blockly > WorkspaceSvg

Clase WorkspaceSvg

Clase para un espacio de trabajo. Esta es un área en pantalla con papelera, barras de desplazamiento, burbujas y arrastre opcionales.

Signature:

export declare class WorkspaceSvg extends Workspace implements IContextMenu, IFocusableNode, IFocusableTree 

Extiende: Workspace

Implementa: IContextMenu, IFocusableNode, IFocusableTree

Constructores

Constructor Modificadores Descripción
(constructor)(options) Construye una instancia nueva de la clase WorkspaceSvg.

Propiedades

Propiedad Modificadores Tipo Descripción
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Los desarrolladores pueden definir esta función para agregar opciones de menú personalizadas al menú contextual del espacio de trabajo o editar el conjunto de opciones de menú creadas por el espacio de trabajo.
keyboardAccessibilityMode booleano Es verdadero si el modo de accesibilidad del teclado está activado; de lo contrario, es falso.
keyboardMoveInProgress booleano Es verdadero si hay un movimiento ("arrastre") en curso iniciado con el teclado.
rendered booleano Es el estado de renderización de un espacio de trabajo SVG. Devuelve false para los espacios de trabajo sin interfaz gráfica y verdadero para las instancias de WorkspaceSvg.
escala número Es la escala actual.
scrollbar ScrollbarPair | null Barras de desplazamiento de este espacio de trabajo, si existen.
scrollX número

Es el desplazamiento horizontal actual en unidades de píxeles, en relación con el origen del espacio de trabajo.

Es útil pensar en una vista y en un lienzo que se mueve debajo de ella. A medida que el lienzo se mueve hacia la derecha, este valor se vuelve más positivo y la vista ahora "ve" el lado izquierdo del lienzo. A medida que el lienzo se mueve hacia la izquierda, este valor se vuelve más negativo y la vista ahora "ve" el lado derecho del lienzo.

Lo confuso de este valor es que no incluye el desplazamiento absoluteLeft y no debe hacerlo. Esto se debe a que se usa para calcular el valor de viewLeft.

El valor de viewLeft es relativo al origen del espacio de trabajo (aunque en unidades de píxeles). El origen del espacio de trabajo es la esquina superior izquierda del espacio de trabajo (al menos cuando está habilitado). Se desplaza desde la parte superior izquierda de blocklyDiv para que no quede debajo de la caja de herramientas.

Cuando el espacio de trabajo está habilitado, el origen de viewLeft y del espacio de trabajo se encuentran en la misma ubicación X. A medida que el lienzo se desliza hacia la derecha debajo de la vista, este valor (scrollX) se vuelve más positivo, y viewLeft se vuelve más negativo en relación con el origen del espacio de trabajo (imagina el origen del espacio de trabajo como un punto en el lienzo que se desliza hacia la derecha a medida que se mueve el lienzo).

Por lo tanto, si scrollX incluyera absoluteLeft, de alguna manera se "desplazaría" el origen del espacio de trabajo. Esto significa que viewLeft representaría el borde izquierdo de blocklyDiv, en lugar del borde izquierdo del espacio de trabajo.

scrollY número

Es el desplazamiento vertical actual en píxeles, en relación con el origen del espacio de trabajo.

Es útil pensar en una vista y en un lienzo que se mueve debajo de ella. A medida que el lienzo se desplaza hacia abajo, este valor se vuelve más positivo y la vista ahora "ve" la parte superior del lienzo. A medida que el lienzo se mueve hacia arriba, este valor se vuelve más negativo y la vista "ve" la parte inferior del lienzo.

Lo confuso de este valor es que no incluye el desplazamiento de absoluteTop y no debe hacerlo. Esto se debe a que se usa para calcular el valor de viewTop.

El valor de viewTop es relativo al origen del espacio de trabajo (aunque en unidades de píxeles). El origen del espacio de trabajo es la esquina superior izquierda del espacio de trabajo (al menos cuando está habilitado). Se desplaza desde la parte superior izquierda de blocklyDiv para que no quede debajo de la caja de herramientas.

Cuando el espacio de trabajo está habilitado, el origen de viewTop y del espacio de trabajo se encuentran en la misma ubicación Y. A medida que el lienzo se desliza hacia la parte inferior, este valor (scrollY) se vuelve más positivo y el valor de viewTop se vuelve más negativo en relación con el origen del espacio de trabajo (la imagen en el origen del espacio de trabajo como un punto en el lienzo que se desliza hacia abajo a medida que se mueve el lienzo).

Por lo tanto, si scrollY incluyera absoluteTop, de alguna manera se "desplazaría" el origen del espacio de trabajo. Esto significa que viewTop representaría el borde superior de blocklyDiv, en lugar del borde superior del espacio de trabajo.

startScrollX número Valor de desplazamiento horizontal cuando se inició el desplazamiento en unidades de píxeles.
startScrollY número Valor de desplazamiento vertical cuando se inició el desplazamiento en unidades de píxeles.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
trashcan Trashcan | null Papelera del espacio de trabajo (si hay alguna).
zoomControls_ ZoomControls | null

Métodos

Método Modificadores Descripción
addClass(className) Agrega una clase CSS al espacio de trabajo.
addTopBlock(block) Agrega un bloque a la lista de bloques superiores.
addTopBoundedElement(element) Agrega un elemento delimitado a la lista de elementos delimitados principales.
addTopComment(comment) Agrega un comentario a la lista de comentarios destacados.
canBeFocused() Consulta IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly) Desplaza el espacio de trabajo para centrarlo en el bloque determinado. Si el bloque tiene otros bloques apilados debajo, el espacio de trabajo se centrará en la pila, a menos que blockOnly sea verdadero.
cleanUp() Ordena todos los bloques en una columna para que no se superpongan y, así, limpiar el espacio de trabajo.
clear() Descarta todos los bloques del espacio de trabajo, con una optimización para evitar cambios de tamaño.
copyOptionsForFlyout() Crea un nuevo conjunto de opciones a partir de las opciones de este espacio de trabajo solo con los valores que son relevantes para un menú desplegable.
createDom(opt_backgroundClass, injectionDiv) Crea los elementos DOM del espacio de trabajo.
dispose() Desecha este espacio de trabajo. Desvincula todos los elementos del DOM para evitar fugas de memoria.
getAbsoluteScale()

Devuelve la escala absoluta del espacio de trabajo.

El ajuste del espacio de trabajo es multiplicativo. Si un espacio de trabajo B (p. ej., un editor de mutadores) con un ajuste Y está anidado dentro de un espacio de trabajo raíz A con un ajuste X, el ajuste efectivo del espacio de trabajo B es X * Y, ya que, como elemento secundario de A, ya se transformó por el factor de ajuste de A y, luego, se transforma aún más por su propio factor de ajuste. Normalmente, esto funciona sin problemas, pero para los elementos globales (p.ej., los editores de campos) que se asocian visualmente con un espacio de trabajo en particular, pero que se encuentran en el nivel superior del DOM en lugar de ser un elemento secundario de su espacio de trabajo asociado, es posible que se necesite la escala absoluta o efectiva para renderizar de forma adecuada.

getAllBlocks(ordered) Busca todos los bloques en el espacio de trabajo. Los bloques se pueden ordenar por posición, de arriba hacia abajo (con una ligera tendencia de LTR o RTL).
getAudioManager() Obtiene el administrador de audio para este espacio de trabajo.
getBlockById(id) Busca el bloque en este espacio de trabajo con el ID especificado.
getBlocksBoundingBox() Calcula el cuadro de límite de los bloques en el espacio de trabajo. Sistema de coordenadas: coordenadas del espacio de trabajo.
getBubbleCanvas() Obtiene el elemento SVG que forma la superficie de la burbuja.
getButtonCallback(key) Obtiene la función de devolución de llamada asociada a una clave determinada para los clics en botones y etiquetas del menú desplegable.
getCanvas() Obtiene el elemento SVG que forma la superficie de dibujo.
getCommentById(id) Devuelve el comentario del espacio de trabajo con el ID determinado, si hay alguno.
getComponentManager() Obtiene el administrador de componentes para este espacio de trabajo.
getCursor() Es el cursor de este espacio de trabajo.
getDragTarget(e) Devuelve el destino de arrastre sobre el que se encuentra el evento del puntero.
getFlyout(opt_own) Es el getter del panel desplegable asociado a este espacio de trabajo. Este menú desplegable puede pertenecer a la caja de herramientas o al espacio de trabajo, según la configuración de la caja de herramientas. Será nulo si no hay ventana emergente.
getFocusableElement() Consulta IFocusableNode.getFocusableElement.
getFocusableTree() Consulta IFocusableNode.getFocusableTree.
getGrid() Obtén el objeto de cuadrícula para este espacio de trabajo o el valor nulo si no hay ninguno.
getInverseScreenCTM() Es el método getter para la CTM de la pantalla invertida.
getMarkerManager() Obtiene el administrador de marcadores para este espacio de trabajo.
getMetricsManager() Obtiene el administrador de métricas para este espacio de trabajo.
getNavigator() Devuelve un objeto responsable de coordinar el movimiento del enfoque entre los elementos de este espacio de trabajo en respuesta a los comandos de navegación con el teclado.
getNestedTrees() Consulta IFocusableTree.getNestedTrees.
getParentSvg() Obtiene el elemento SVG que contiene este espacio de trabajo. Nota: Suponemos que esto solo se llama después de que el espacio de trabajo se haya insertado en el DOM.
getRenderer() Obtiene el renderizador de bloques adjunto a este espacio de trabajo.
getRestoredFocusableNode(previousNode) Consulta IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode() Consulta IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale() Obtiene el factor de zoom del espacio de trabajo.
getSvgGroup() Devuelve el grupo SVG del espacio de trabajo.
getTheme() Obtiene el objeto del tema del espacio de trabajo.
getToolbox() Getter para la caja de herramientas asociada a este espacio de trabajo, si existe.
getToolboxCategoryCallback(key) Obtiene la función de devolución de llamada asociada a una clave determinada para completar las categorías personalizadas de la caja de herramientas en este espacio de trabajo.
getTopBlocks(ordered) Encuentra los bloques de nivel superior y los devuelve. Los bloques se pueden ordenar por posición, de arriba hacia abajo (con una ligera tendencia de LTR o RTL).
getTopBoundedElements(ordered) Encuentra los elementos delimitados de nivel superior y los devuelve.
getTopComments(ordered) Devuelve una lista de comentarios sobre este espacio de trabajo.
getWidth() Devuelve el desplazamiento horizontal del espacio de trabajo. Se diseñó para la compatibilidad con LTR/RTL en XML.
hideChaff(onlyClosePopups) Cierra las sugerencias, los menús contextuales, las selecciones de menús desplegables, etcétera.
hideComponents(onlyClosePopups) Oculta todos los componentes que se pueden ocultar automáticamente (como el menú desplegable, la papelera y cualquier componente registrado por el usuario).
highlightBlock(id, opt_state) Destaca o quita el destacado de un bloque en el espacio de trabajo. El resaltado de bloques se usa a menudo para marcar visualmente los bloques que se están ejecutando.
isDraggable() ¿Se puede arrastrar este espacio de trabajo?
isDragging()

Devuelve verdadero si el usuario está realizando un gesto de arrastre o si se está realizando un movimiento iniciado por el teclado.

Los gestos de arrastre suelen implicar mover un bloque o algún otro elemento en el espacio de trabajo, o bien desplazarse por el menú desplegable o el espacio de trabajo.

Los movimientos iniciados con el teclado se implementan con la infraestructura de arrastre y tienen como objetivo emular (un subconjunto de) los gestos de arrastre, por lo que, por lo general, deben tratarse como si fueran un arrastre basado en gestos.

isMovable()

¿Se puede mover este espacio de trabajo?

Esto significa que el usuario puede cambiar la posición de las coordenadas X e Y del espacio de trabajo a través de la entrada. Esto puede hacerse a través de barras de desplazamiento, la rueda del mouse, arrastrar o acercar y alejar con la rueda del mouse o pellizcar (ya que el zoom se centra en la posición del mouse). Esto no incluye el uso de los controles de zoom, ya que las coordenadas X e Y se deciden de forma programática.

isMovableHorizontally() ¿Se puede mover este espacio de trabajo horizontalmente?
isMovableVertically() ¿Se puede mover este espacio de trabajo verticalmente?
isVisible() Método get para isVisible
lookUpFocusableNode(id) Consulta IFocusableTree.lookUpFocusableNode.
markFocused() Marca este espacio de trabajo como el espacio de trabajo principal en el que se enfoca actualmente.
moveDrag(e) Realiza un seguimiento del arrastre de un objeto en este espacio de trabajo.
newBlock(prototypeName, opt_id) Obtiene un bloque recién creado.
newComment(id) Obtiene un comentario recién creado.
onNodeBlur() Consulta IFocusableNode.onNodeBlur.
onNodeFocus() Consulta IFocusableNode.onNodeFocus.
onTreeBlur(nextTree) Consulta IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree) Consulta IFocusableTree.onTreeFocus.
recordDragTargets() Haz una lista de todas las áreas de borrado de este espacio de trabajo.
refreshTheme() Actualiza todos los bloques del espacio de trabajo después de una actualización del tema.
registerButtonCallback(key, func) Registra una función de devolución de llamada asociada a una clave determinada para los clics en botones y etiquetas del menú desplegable. Por ejemplo, un botón especificado por el código XML debe coincidir con una llamada a registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Registra una función de devolución de llamada asociada a una clave determinada para completar las categorías personalizadas de la caja de herramientas en este espacio de trabajo. Consulta las categorías de variables y procedimientos como ejemplo.
removeButtonCallback(key) Quita una devolución de llamada para un clic en un botón del menú desplegable.
removeClass(className) Quita una clase CSS del espacio de trabajo.
removeToolboxCategoryCallback(key) Quita una devolución de llamada para un clic en el nombre de una categoría personalizada en la caja de herramientas.
removeTopBlock(block) Quita un bloque de la lista de bloques principales.
removeTopBoundedElement(element) Quita un elemento delimitado de la lista de elementos delimitados principales.
removeTopComment(comment) Quita un comentario de la lista de comentarios destacados.
render() Renderiza todos los bloques del espacio de trabajo.
resize() Cambia el tamaño y la posición de todos los elementos de la interfaz de Workspace (caja de herramientas, papelera, barras de desplazamiento, etcétera). Se debe llamar a este método cuando cambia algo que requiere volver a calcular las dimensiones y las posiciones de la papelera, el zoom, la caja de herramientas, etcétera (p. ej., cambio de tamaño de la ventana).
scroll(x, y) Desplaza el espacio de trabajo a un desplazamiento especificado (en píxeles) y mantén los límites del espacio de trabajo. Consulta el comentario sobre workspaceSvg.scrollX para obtener más detalles sobre el significado de estos valores.
scrollCenter() Centra el espacio de trabajo.
setIsReadOnly(readOnly)
setNavigator(newNavigator) Establece la instancia de Navigator que usa este espacio de trabajo.
setResizeHandlerWrapper(handler) Guarda los datos del controlador de cambio de tamaño para que podamos borrarlos más adelante en dispose.
setResizesEnabled(enabled) Actualiza si este espacio de trabajo tiene habilitado el cambio de tamaño. Si está habilitada, el espacio de trabajo cambiará de tamaño cuando sea necesario. Si se inhabilita, el espacio de trabajo no cambiará de tamaño hasta que se vuelva a habilitar. Se usa para evitar el cambio de tamaño durante una operación por lotes, para mejorar el rendimiento.
setScale(newScale) Establece el factor de zoom del espacio de trabajo.
setTheme(theme) Establece el objeto del tema del espacio de trabajo. Si no se pasa ningún tema, se usa el tema Classic de forma predeterminada.
setVisible(isVisible) Activa o desactiva la visibilidad del espacio de trabajo. Actualmente, solo está disponible para el espacio de trabajo principal.
startDrag(e, xy) Comienza a hacer un seguimiento del arrastre de un objeto en este espacio de trabajo.
translate(x, y) Traduce este espacio de trabajo a coordenadas nuevas.
updateInverseScreenCTM() Marca la CTM inversa de la pantalla como sucia.
updateToolbox(toolboxDef) Modifica el árbol de bloques en la caja de herramientas existente.
zoom(x, y, amount) Acerca o aleja el espacio de trabajo en relación con la coordenada (x, y) determinada o centrada en ella.
zoomCenter(type) Acercar o alejar los bloques centrados en el centro de la vista
zoomToFit() Si es posible, haz zoom en los bloques para que quepan en el espacio de trabajo.