blockly > WorkspaceSvg

Clase WorkspaceSvg

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

Signature:

export declare class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg 

Se extiende: Workspace

Implementa: IASTNodeLocationSvg

Constructores

Constructor Modificadores Descripción
(constructor)(opciones) 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 lugar de trabajo o editar el conjunto de opciones de menú creado por el lugar de trabajo.
keyboardAccessibilityMode boolean Verdadero si el modo de accesibilidad del teclado está activado; de lo contrario, es falso.
renderizado boolean El estado de renderización de un lugar de trabajo de SVG. Muestra false para lugares de trabajo sin interfaz gráfica y true para instancias de WorkspaceSvg.
escalar número Escala actual.
barra de desplazamiento ScrollbarPair | nulo Las barras de desplazamiento de este lugar de trabajo, si existen.
scrollX número

Desplazamiento horizontal actual en unidades de píxeles, en relación con el origen del lugar de trabajo.

Resulta ú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 lo incluye y no debe incluir el desplazamiento absolutoLeft. Esto se debe a que se utiliza para calcular el valor de viewLeft.

El objeto viewLeft está relacionado con el origen del lugar de trabajo (aunque en unidades de píxeles). Su origen es la esquina superior izquierda del lugar 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 lugar de trabajo está habilitado, viewLeft y el origen del lugar de trabajo están 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 lugar de trabajo (imagina el origen del lugar de trabajo como un punto que se desliza hacia la derecha a medida que se mueve el lienzo).

Por lo tanto, si desplazamientoX incluyera absoluteLeft, de alguna manera, se “anularía” el origen del lugar de trabajo. Esto significa que viewLeft representará el borde izquierdo del blocklyDiv, en lugar del borde izquierdo del espacio de trabajo.

scrollY número

Desplazamiento vertical actual en unidades de píxeles, en relación con el origen del lugar de trabajo.

Resulta útil pensar en una vista y en un lienzo que se mueve debajo de ella. A medida que el lienzo se mueve 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 desplaza hacia arriba, este valor se vuelve más negativo y la vista "ve" la parte inferior del lienzo.

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

El objeto viewTop se relaciona con el origen del lugar de trabajo (aunque en unidades de píxeles). Su origen es la esquina superior izquierda del lugar 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 lugar de trabajo está habilitado, viewTop y el origen del lugar de trabajo están 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 viewTop se vuelve más negativo en relación con el origen del lugar de trabajo (la imagen en el origen del lugar de trabajo como un punto en el lienzo se desliza hacia abajo a medida que se mueve el lienzo).

Por lo tanto, si desplazaY incluye el valor absolutoTop, esto de una manera "anularía" el origen del lugar de trabajo. Esto significa que viewTop representará el borde superior del blocklyDiv, en lugar del borde superior del espacio de trabajo.

startScrollX número Valor de desplazamiento horizontal cuando el desplazamiento comienza en unidades de píxeles
startScrollY número Valor de desplazamiento vertical cuando el desplazamiento comienza en unidades de píxeles
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
papelera Papelera | nulo La papelera del espacio de trabajo (si existe)
zoomControls_ ZoomControls | nulo

Métodos

Método Modificadores Descripción
addTopBlock(block) Agrega un bloque a la lista de bloques superiores.
addTopBoundedElement(element) Agrega un elemento delimitado a la lista de elementos delimitados en la parte superior.
addTopComment(comment) Agrega un comentario a la lista de comentarios principales.
centerOnBlock(id, blockOnly) Desplaza el espacio de trabajo para centrar 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() Limpia el espacio de trabajo ordenando todos los bloques en una columna.
clear() Desecha todos los bloques en el lugar de trabajo, con una optimización para evitar cambios de tamaño.
createDom(opt_backgroundClass, injectDiv) Crea los elementos del DOM del lugar de trabajo.
createVariable(name, opt_type, opt_id) Crea una variable nueva con el nombre dado. Actualiza el menú flotante para mostrar la nueva variable de inmediato.
deleteVariableById(id) Borra una variable según el ID que se pasó. Actualiza el control flotante para mostrar de inmediato que se borra la variable.
dispose() Descarta este lugar de trabajo. Desvincula todos los elementos del DOM para evitar fugas de memoria.
getAllBlocks(ordered) Buscar todos los bloques en el espacio de trabajo De manera opcional, los bloques se ordenan por posición; de arriba abajo (con un leve sesgo de izquierda a derecha o de derecha a izquierda).
getAudioManager() Obtén el administrador de audio para este lugar de trabajo.
getBlockById(id); Busca el bloque en este lugar de trabajo con el ID especificado.
getBlocksBoundingBox(); Calcula el cuadro delimitador para los bloques en el lugar de trabajo. Sistema de coordenadas: coordenadas del lugar de trabajo.
getBubbleCanvas() Obtén el elemento SVG que forma la superficie de la burbuja.
getButtonCallback(key) Obtén la función de devolución de llamada asociada a una tecla determinada para los clics en los botones y las etiquetas del menú flotante.
getCanvas() Obtén el elemento SVG que forma la superficie de dibujo.
getComponentManager() Obtiene el administrador de componentes para este lugar de trabajo.
getCursor() El cursor para este lugar de trabajo.
getDragTarget(e) Muestra el objetivo de arrastre sobre el que finaliza el evento del puntero.
getFlyout(opt_own) Método get para el menú flotante asociado con este lugar de trabajo. Este control flotante puede ser propiedad de la caja de herramientas o del lugar de trabajo, según la configuración de la caja de herramientas. Será nulo si no hay un control flotante.
getGrid() Obtén el objeto de cuadrícula para este lugar de trabajo o el valor nulo si no hay ninguno.
getInverseScreenCTM() Es el método get para la elusión de medidas de la pantalla invertida.
getMarkerManager() Obtén el administrador de marcadores de este lugar de trabajo.
getMetricsManager() Obtiene el administrador de métricas para este lugar de trabajo.
getParentSvg(). Obtén el elemento SVG que contiene este lugar de trabajo. Nota: Suponemos que solo se llama después de que se haya insertado el espacio de trabajo en el DOM.
getRenderer() Obtén el procesador de bloques adjunto a este lugar de trabajo.
getRootWorkspace()
getScale() Obtén el factor de zoom del lugar de trabajo. Si el lugar de trabajo tiene un elemento superior, llamamos a este último para obtener la escala del lugar de trabajo.
getSvgGroup() Muestra el grupo de SVG para el lugar de trabajo.
getTheme() Obtén el objeto de tema del lugar de trabajo.
getToolbox() Es el método get para la caja de herramientas asociada a este lugar de trabajo, si existe.
getToolboxCategoryCallback(key) Obtén la función de devolución de llamada asociada a una clave determinada para propagar categorías personalizadas de la caja de herramientas en este lugar de trabajo.
getTopBlocks(ordered) Busca los bloques de nivel superior y los muestra. De manera opcional, los bloques se ordenan por posición; de arriba abajo (con un leve sesgo de izquierda a derecha o de derecha a izquierda).
getTopBoundedElements() Busca los elementos limitados de nivel superior y los muestra.
getWidth() Muestra el desplazamiento horizontal del lugar de trabajo. Diseñado para la compatibilidad con LTR/RTL en XML.
hideChaff(onlyClosePopups) Cierra información sobre herramientas, menús contextuales, selecciones desplegables, etcétera.
hideComponents(onlyClosePopups) Oculta los componentes que se puedan ocultar automáticamente (como el menú flotante, la papelera y los componentes registrados por el usuario).
highlightBlock(id, opt_state) Destaca o desmarca un bloque en el espacio de trabajo. A menudo, el resaltado de bloques se usa para marcar visualmente los bloques que se están ejecutando.
isDraggable() ¿Este lugar de trabajo es arrastrable?
isDragging() ¿El usuario arrastra un bloque o se desplaza por el menú flotante o el espacio de trabajo?
isMovable()

¿Se puede trasladar este espacio de trabajo?

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

isMovableHorizontally() ¿Se puede mover este lugar de trabajo horizontalmente?
isMovableVertically() ¿Este lugar de trabajo se puede mover verticalmente?
isVisible() Método get para isVisible
markFocused() Marca este lugar de trabajo como el principal actualmente enfocado.
moveDrag(e) Haz un seguimiento del arrastre de un objeto en este lugar de trabajo.
newBlock(prototypeName, opt_id) Obtén un bloque recién creado.
pegar(estado) Pega el bloque o el comentario del espacio de trabajo proporcionado en el espacio de trabajo. No verifica si hay capacidad restante para el objeto, eso debe hacerse antes de llamar a este método.
recordDragTargets() Haz una lista de todas las áreas borradas de este lugar de trabajo.
refreshTheme() Actualiza todos los bloques del espacio de trabajo después de actualizar el tema.
registerButtonCallback(key, func) Registra una función de devolución de llamada asociada con una tecla determinada para los clics en botones y etiquetas del menú flotante. Por ejemplo, un botón especificado por el XML debería coincidir con una llamada a registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Registra una función de devolución de llamada asociada con una clave determinada para propagar categorías personalizadas de la caja de herramientas en este lugar de trabajo. Consulta las categorías de variable y procedimiento como ejemplo.
removeButtonCallback(key) Elimina una devolución de llamada para un clic en un botón del menú flotante.
removeToolboxCategoryCallback(key) Elimina una devolución de llamada para un clic en el nombre de una categoría personalizada en la caja de herramientas.
removeTopBlock(block) Elimina un bloque de la lista de bloques superiores.
removeTopBoundedElement(element) Quita un elemento delimitado de la lista de elementos delimitados en la parte superior.
removeTopComment(comment) Elimina un comentario de la lista de comentarios principales.
renameVariableById(id, newName) Para cambiar el nombre de una variable, actualiza su nombre en el mapa de variables. Actualiza el control flotante para mostrar de inmediato la variable a la que le cambiaste el nombre.
render(). Renderiza todos los bloques en el espacio de trabajo.
resize() Cambia el tamaño de todas las partes de Chrome del lugar de trabajo y su posición (caja de herramientas, papelera, barras de desplazamiento, etc.). Se debe llamar a este método cuando cambia algo que requiere volver a calcular las dimensiones y posiciones de la papelera, el zoom, la caja de herramientas, etc. (p.ej., cambiar el tamaño de la ventana).
scrollCenter() Centra el lugar de trabajo.
setResizeHandlerWrapper(handler) Guarda los datos del controlador de cambio de tamaño para poder borrarlos más tarde y desecharlos.
setResizesEnabled(enabled) Actualiza si este lugar de trabajo tiene habilitados los cambios de tamaño. Si se habilita esta opción, se cambiará el tamaño del espacio de trabajo cuando corresponda. Si se inhabilita, no se cambiará el tamaño del espacio de trabajo hasta que se vuelva a habilitar. Se usa para evitar cambiar el tamaño durante una operación por lotes para mejorar el rendimiento.
setScale(newScale) Establece el factor de zoom del lugar de trabajo.
setTheme(theme) Establece el objeto de tema del lugar de trabajo. Si no se pasa ningún tema, se usará el tema Classic de forma predeterminada.
setVisible(isVisible) Activa o desactiva la visibilidad del lugar de trabajo. Actualmente, solo está destinado al lugar de trabajo principal.
startDrag(e, xy) Comienza a hacer un seguimiento del arrastre de un objeto en este lugar de trabajo.
translate(x, y) Traduce este lugar de trabajo a coordenadas nuevas.
updateInverseScreenCTM() Marcar la pantalla inversa CTM como sucia.
updateToolbox(toolboxDef) Modifica el árbol de bloques en la caja de herramientas existente.
zoom(x, y, cantidad) Acerca o aleja el espacio de trabajo en relación con la coordenada (x, y) determinada o centrada en ella.
zoomCenter(type) Acercamiento o alejamiento de los bloques centrados en el centro de la vista
zoomToFit() Si es posible, haz zoom en los bloques para que se ajusten al espacio de trabajo.