blockly > WorkspaceSvg

Classe WorkspaceSvg

Turma de um espaço de trabalho. É uma área na tela com lixeira, barras de rolagem, bolhas e arrastamento opcionais.

Signature:

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

Extends: Workspace

Implementa: IContextMenu, IFocusableNode, IFocusableTree

Construtores

Construtor Modificadores Descrição
(constructor)(options) Cria uma nova instância da classe WorkspaceSvg.

Propriedades

Propriedade Modificadores Tipo Descrição
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Os desenvolvedores podem definir essa função para adicionar opções de menu personalizadas ao menu de contexto do espaço de trabalho ou editar o conjunto de opções de menu criado pelo espaço de trabalho.
keyboardAccessibilityMode booleano Verdadeiro se o modo de teclado de acessibilidade estiver ativado. Caso contrário, será falso.
keyboardMoveInProgress booleano Verdadeiro se um movimento iniciado pelo teclado ("arrastar") estiver em andamento.
renderizado booleano O status de renderização de um espaço de trabalho SVG. Retorna false para espaços de trabalho sem servidor e "true" para instâncias de WorkspaceSvg.
escala número Escala atual.
barra de rolagem ScrollbarPair | null Barras de rolagem do espaço de trabalho, se houver.
scrollX número

Deslocamento de rolagem horizontal atual em unidades de pixel, em relação à origem do espaço de trabalho.

É útil pensar em uma visualização e uma tela que se move abaixo dela. À medida que a tela se move para a direita, esse valor se torna mais positivo, e a visualização agora "vê" o lado esquerdo da tela. À medida que a tela se move para a esquerda, esse valor se torna mais negativo, e a visualização agora "vê" o lado direito da tela.

O que confunde é que esse valor não inclui e não deve incluir o deslocamento absoluteLeft. Isso ocorre porque ele é usado para calcular o valor de viewLeft.

O viewLeft é relativo à origem do espaço de trabalho (em unidades de pixel). A origem do espaço de trabalho é o canto superior esquerdo dele (pelo menos quando ele está ativado). Ele é deslocado do canto superior esquerdo do blocklyDiv para não ficar abaixo da caixa de ferramentas.

Quando o espaço de trabalho está ativado, a origem do viewLeft e do espaço de trabalho estão no mesmo local X. À medida que a tela desliza para a direita abaixo da visualização, esse valor (scrollX) fica mais positivo, e o valor de viewLeft fica mais negativo em relação à origem do espaço de trabalho. Imagine a origem do espaço de trabalho como um ponto na tela deslizando para a direita à medida que a tela se move.

Portanto, se o scrollX incluísse o absoluteLeft, isso "deslocaria" a origem do espaço de trabalho. Isso significa que o viewLeft representa a borda esquerda do blocklyDiv, e não a borda esquerda do espaço de trabalho.

scrollY número

Deslocamento de rolagem vertical atual em unidades de pixel, em relação à origem do espaço de trabalho.

É útil pensar em uma visualização e uma tela que se move abaixo dela. À medida que a tela se move para baixo, esse valor se torna mais positivo, e a visualização "vê" a parte de cima da tela. À medida que a tela se move para cima, esse valor se torna mais negativo, e a visualização "vê" a parte inferior da tela.

O que confunde é que esse valor não inclui e não precisa incluir o deslocamento de absoluteTop. Isso ocorre porque ele é usado para calcular o valor de viewTop.

O viewTop é relativo à origem do espaço de trabalho (em unidades de pixel). A origem do espaço de trabalho é o canto superior esquerdo do espaço de trabalho (pelo menos quando ele está ativado). Ele é deslocado do canto superior esquerdo do blocklyDiv para não ficar abaixo da caixa de ferramentas.

Quando o espaço de trabalho está ativado, a origem do viewTop e do espaço de trabalho estão no mesmo local Y. À medida que a tela desliza para baixo, esse valor (scrollY) se torna mais positivo, e o viewTop se torna mais negativo em relação à origem do espaço de trabalho (imagem na origem do espaço de trabalho como um ponto na tela deslizando para baixo à medida que a tela se move).

Portanto, se o scrollY incluísse o absoluteTop, isso "deslocaria" a origem do espaço de trabalho. Isso significa que o viewTop representa a borda superior do blocklyDiv, e não a borda superior do espaço de trabalho.

startScrollX número Valor da rolagem horizontal quando a rolagem começou em unidades de pixel.
startScrollY número Valor da rolagem vertical quando a rolagem começou em unidades de pixel.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
lixeira Lixeira | null A lixeira do espaço de trabalho (se houver).
zoomControls_ ZoomControls | null

Métodos

Método Modificadores Descrição
addClass(className) Adiciona uma classe CSS ao espaço de trabalho.
addTopBlock(block) Adiciona um bloco à lista de blocos principais.
addTopBoundedElement(element) Adiciona um elemento delimitado à lista de elementos delimitados principais.
addTopComment(comment) Adiciona um comentário à lista dos principais comentários.
canBeFocused() Consulte IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly) Role o espaço de trabalho para centralizar o bloco. Se o bloco tiver outros blocos empilhados abaixo dele, o espaço de trabalho será centralizado na pilha, a menos que blockOnly seja verdadeiro.
cleanUp() Limpe o espaço de trabalho ordenando todos os blocos em uma coluna para que nenhum deles se sobreponha.
clear() Elimine todos os blocos no espaço de trabalho, com uma otimização para evitar redimensionamentos.
copyOptionsForFlyout() Cria um novo conjunto de opções com base nas opções do espaço de trabalho, usando apenas os valores relevantes para um menu suspenso.
createDom(opt_backgroundClass, injectionDiv) Crie os elementos DOM do espaço de trabalho.
dispose() Descartar este espaço de trabalho. Desvincule de todos os elementos DOM para evitar vazamentos de memória.
getAbsoluteScale()

Retorna a escala absoluta do espaço de trabalho.

A escala do espaço de trabalho é multiplicativa. Se um espaço de trabalho B (por exemplo, um editor de mutador) com escala Y estiver aninhado em um espaço de trabalho raiz A com escala X, a escala efetiva do espaço de trabalho B será X * Y, porque, como filho de A, ele já é transformado pelo fator de escala de A e depois se transforma pelo próprio fator de escala. Normalmente, isso funciona, mas para elementos globais (por exemplo, editores de campo) que estão visualmente associados a um espaço de trabalho específico, mas estão no nível superior do DOM em vez de serem filhos do espaço de trabalho associado, a escala absoluta/efectiva pode ser necessária para renderizar adequadamente.

getAllBlocks(ordered) Encontre todos os blocos no espaço de trabalho. Os blocos são classificados opcionalmente por posição, de cima para baixo (com ligeira inclinação LTR ou RTL).
getAudioManager() Acesse o gerenciador de áudio para este espaço de trabalho.
getBlockById(id) Encontre o bloco no espaço de trabalho com o ID especificado.
getBlocksBoundingBox() Calcule a caixa delimitadora dos blocos no espaço de trabalho. Sistema de coordenadas: coordenadas do espaço de trabalho.
getBubbleCanvas() Recebe o elemento SVG que forma a superfície da bolha.
getButtonCallback(key) Receba a função de callback associada a uma determinada tecla para cliques em botões e rótulos no menu suspenso.
getCanvas() Recebe o elemento SVG que forma a superfície de desenho.
getComponentManager() Consegue o gerenciador de componentes para este espaço de trabalho.
getCursor() O cursor deste espaço de trabalho.
getDragTarget(e) Retorna o destino de arrasto em que o evento do ponteiro está.
getFlyout(opt_own) Getter para o menu suspenso associado a este espaço de trabalho. Esse menu pode ser da caixa de ferramentas ou do espaço de trabalho, dependendo da configuração da caixa de ferramentas. Será nulo se não houver um pop-up.
getFocusableElement() Consulte IFocusableNode.getFocusableElement.
getFocusableTree() Consulte IFocusableNode.getFocusableTree.
getGrid() Recebe o objeto de grade para esse espaço de trabalho ou nulo, se não houver nenhum.
getInverseScreenCTM() Getter para a CTM da tela invertida.
getMarkerManager() Receba o gerenciador de marcadores para este espaço de trabalho.
getMetricsManager() Consegue o gerenciador de métricas para este espaço de trabalho.
getNavigator() Retorna um objeto responsável por coordenar o movimento do foco entre os itens no espaço de trabalho em resposta aos comandos de navegação do teclado.
getNestedTrees() Consulte IFocusableTree.getNestedTrees.
getParentSvg() Receba o elemento SVG que contém esse espaço de trabalho. Observação: presumimos que isso só seja chamado depois que o espaço de trabalho for injetado no DOM.
getRenderer() Receba o renderizador de blocos anexado a este espaço de trabalho.
getRestoredFocusableNode(previousNode) Consulte IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode() Consulte IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale() Conferir o fator de zoom do espaço de trabalho.
getSvgGroup() Retorna o grupo SVG do espaço de trabalho.
getTheme() Recebe o objeto de tema do espaço de trabalho.
getToolbox() Getter para a caixa de ferramentas associada a este espaço de trabalho, se houver.
getToolboxCategoryCallback(key) Receba a função de callback associada a uma determinada chave para preencher categorias personalizadas da caixa de ferramentas neste espaço de trabalho.
getTopBlocks(ordered) Encontra e retorna os blocos de nível superior. Os blocos são classificados opcionalmente por posição, de cima para baixo (com ligeira inclinação LTR ou RTL).
getTopBoundedElements() Encontra e retorna os elementos delimitados de nível superior.
getWidth() Retorna o deslocamento horizontal do espaço de trabalho. Destinado à compatibilidade LTR/RTL em XML.
hideChaff(onlyClosePopups) Feche as dicas, menus de contexto, seleções de menus suspensos etc.
hideComponents(onlyClosePopups) Ocultar componentes que podem ser ocultados automaticamente, como o menu suspenso, a lixeira e os componentes registrados pelo usuário.
highlightBlock(id, opt_state) Destaque ou desfoque um bloco no espaço de trabalho. O destaque de bloco é usado com frequência para marcar visualmente os blocos que estão sendo executados.
isDraggable() Esse espaço de trabalho pode ser arrastado?
isDragging()

Retorna verdadeiro se o usuário estiver envolvido em um gesto de arrasto ou se uma movimentação iniciada pelo teclado estiver em andamento.

Os gestos de arrasto normalmente envolvem mover um bloco ou outro item no espaço de trabalho ou rolar o menu suspenso/espaço de trabalho.

Os movimentos iniciados pelo teclado são implementados usando a infraestrutura de arrasto e têm como objetivo emular gestos de arrasto (um subconjunto deles). Por isso, eles geralmente são tratados como se fossem um arrasto baseado em gestos.

isMovable()

Esse espaço de trabalho pode ser movido?

Isso significa que o usuário pode reposicionar as coordenadas XY do espaço de trabalho por meio de entrada. Isso pode ser feito com barras de rolagem, roda de rolagem, arrastando ou aplicando zoom com a roda de rolagem ou a pinça (já que o zoom é centralizado na posição do mouse). Isso não inclui o zoom com os controles de zoom, já que as coordenadas XY são decididas programaticamente.

isMovableHorizontally() Esse espaço de trabalho pode ser movido horizontalmente?
isMovableVertically() Esse espaço de trabalho pode ser movido verticalmente?
isVisible() Getter para isVisible
lookUpFocusableNode(id) Consulte IFocusableTree.lookUpFocusableNode.
markFocused() Marcar este espaço de trabalho como o principal em foco no momento.
moveDrag(e) Acompanhe o arrasto de um objeto neste espaço de trabalho.
newBlock(prototypeName, opt_id) Receba um bloco recém-criado.
newComment(id) Receber um comentário recém-criado.
onNodeBlur() Consulte IFocusableNode.onNodeBlur.
onNodeFocus() Consulte IFocusableNode.onNodeFocus.
onTreeBlur(nextTree) Consulte IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree) Consulte IFocusableTree.onTreeFocus.
recordDragTargets() Faça uma lista de todas as áreas de exclusão para esse espaço de trabalho.
refreshTheme() Atualizar todos os blocos no espaço de trabalho após uma atualização de tema.
registerButtonCallback(key, func) Registra uma função de callback associada a uma determinada chave para cliques em botões e rótulos no menu suspenso. Por exemplo, um botão especificado pelo XML precisa ser correspondido por uma chamada para registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Registre uma função de callback associada a uma determinada chave para preencher categorias personalizadas da caixa de ferramentas neste espaço de trabalho. Confira as categorias de variável e procedimento como exemplo.
removeButtonCallback(key) Remover um callback para um clique em um botão no menu flutuante.
removeClass(className) Remove uma classe CSS do espaço de trabalho.
removeToolboxCategoryCallback(key) Removemos um callback para um clique no nome de uma categoria personalizada na caixa de ferramentas.
removeTopBlock(block) Remove um bloco da lista de blocos principais.
removeTopBoundedElement(element) Remove um elemento limitado da lista de elementos limitados principais.
removeTopComment(comment) Remove um comentário da lista dos principais comentários.
render() Renderizar todos os blocos no espaço de trabalho.
resize() Redimensione e reposicione todo o Chrome do espaço de trabalho (caixa de ferramentas, lixeira, barras de rolagem etc.). Ele precisa ser chamado quando algo muda e exige o recalculo das dimensões e posições da lixeira, do zoom, da caixa de ferramentas etc. (por exemplo, redimensionamento de janela).
scroll(x, y) Role o espaço de trabalho para um deslocamento especificado (em pixels), mantendo os limites do espaço de trabalho. Consulte o comentário sobre workspaceSvg.scrollX para mais detalhes sobre o significado desses valores.
scrollCenter() Centralize o espaço de trabalho.
setIsReadOnly(readOnly)
setNavigator(newNavigator) Define a instância do Navigator usada por este espaço de trabalho.
setResizeHandlerWrapper(handler) Salvar dados do gerenciador de redimensionamento para que possamos excluí-los mais tarde no descarte.
setResizesEnabled(enabled) Atualiza se o espaço de trabalho tem redimensionamentos ativados. Se ativada, o espaço de trabalho vai ser redimensionado quando apropriado. Se desativado, o espaço de trabalho não será redimensionado até ser reativado. Use para evitar o redimensionamento durante uma operação em lote, para melhorar a performance.
setScale(newScale) Defina o fator de zoom do espaço de trabalho.
setTheme(theme) Defina o objeto do tema do espaço de trabalho. Se nenhum tema for transmitido, o padrão será o tema Classic.
setVisible(isVisible) Alternar a visibilidade do espaço de trabalho. Atualmente, é destinado apenas ao espaço de trabalho principal.
startDrag(e, xy) Comece a rastrear o arrasto de um objeto nesse espaço de trabalho.
translate(x, y) Transfira este espaço de trabalho para novas coordenadas.
updateInverseScreenCTM() Marcar a CTM da tela inversa como suja.
updateToolbox(toolboxDef) Modifique a árvore de blocos na caixa de ferramentas.
zoom(x, y, amount) Aumenta ou diminui o zoom do espaço de trabalho em relação a/centralizado na coordenada (x, y) especificada.
zoomCenter(type) Aumento ou diminuição do zoom dos blocos centralizados no centro da visualização.
zoomToFit() Aumente o zoom dos blocos para caber no espaço de trabalho, se possível.