blockly > WorkspaceSvg

Classe WorkspaceSvg

Corso per uno spazio di lavoro. Questa è un'area sullo schermo con cestino, barre di scorrimento, bolle e trascinamento facoltativi.

Firma:

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

Estende: Workspace

Implementa: IContextMenu, IFocusableNode, IFocusableTree

Costruttori

Costruttore Modificatori Descrizione
(constructor)(options) Crea una nuova istanza della classe WorkspaceSvg

Proprietà

Proprietà Modificatori Tipo Descrizione
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Gli sviluppatori possono definire questa funzione per aggiungere opzioni di menu personalizzate al menu contestuale dello spazio di lavoro o modificare il set di opzioni di menu creato dallo spazio di lavoro.
keyboardAccessibilityMode booleano Vero se la modalità di accessibilità della tastiera è attiva, falso in caso contrario.
keyboardMoveInProgress booleano True se è in corso uno spostamento ("trascinamento") avviato dalla tastiera.
rendered booleano Lo stato di rendering di uno spazio di lavoro SVG. Restituisce false per gli spazi di lavoro headless e true per le istanze di WorkspaceSvg.
scala numero Scala attuale.
scrollbar ScrollbarPair | null Le barre di scorrimento di questo spazio di lavoro, se presenti.
scrollX numero

Offset di scorrimento orizzontale corrente in unità pixel, rispetto all'origine del workspace.

È utile pensare a una visualizzazione e a un canvas che si sposta sotto di essa. Man mano che il canvas si sposta a destra, questo valore diventa più positivo e la visualizzazione "vede" il lato sinistro del canvas. Man mano che il canvas si sposta a sinistra, questo valore diventa più negativo e la visualizzazione "vede" il lato destro del canvas.

L'aspetto fuorviante di questo valore è che non include e non deve includere l'offset absoluteLeft. Questo perché viene utilizzato per calcolare il valore viewLeft.

viewLeft è relativo all'origine dello spazio di lavoro (anche se in unità di pixel). L'origine dell'area di lavoro è l'angolo in alto a sinistra dell'area di lavoro (almeno quando è attiva). Viene spostato dalla parte superiore sinistra di blocklyDiv in modo da non trovarsi sotto la barra degli strumenti.

Quando lo spazio di lavoro è abilitato, viewLeft e l'origine dello spazio di lavoro si trovano nella stessa posizione X. Man mano che il canvas scorre verso destra sotto la visualizzazione, questo valore (scrollX) diventa più positivo e viewLeft diventa più negativo rispetto all'origine dello spazio di lavoro (immagina l'origine dello spazio di lavoro come un punto sul canvas che scorre verso destra man mano che il canvas si sposta).

Quindi, se scrollX includesse absoluteLeft, in un certo senso "sposterebbe" l'origine dello spazio di lavoro. Ciò significa che viewLeft rappresenterà il bordo sinistro di blocklyDiv, anziché il bordo sinistro dell'area di lavoro.

scrollY numero

Offset di scorrimento verticale corrente in unità di pixel, rispetto all'origine dello spazio di lavoro.

È utile pensare a una visualizzazione e a un canvas che si sposta sotto di essa. Man mano che il canvas si sposta verso il basso, questo valore diventa più positivo e la visualizzazione "vede" la parte superiore del canvas. Man mano che il canvas si sposta verso l'alto, questo valore diventa più negativo e la visualizzazione "vede" la parte inferiore del canvas.

La cosa che confonde di questo valore è che non include e non deve includere l'offset absoluteTop. Questo perché viene utilizzato per calcolare il valore viewTop.

viewTop è relativo all'origine dello spazio di lavoro (anche se in unità pixel). L'origine dell'area di lavoro è l'angolo in alto a sinistra dell'area di lavoro (almeno quando è attiva). Viene spostato dalla parte superiore sinistra di blocklyDiv in modo da non trovarsi sotto la barra degli strumenti.

Quando lo spazio di lavoro è attivato, la parte superiore della visualizzazione e l'origine dello spazio di lavoro si trovano nella stessa posizione Y. Man mano che il canvas scorre verso il basso, questo valore (scrollY) diventa più positivo e viewTop diventa più negativo rispetto all'origine del workspace (l'immagine nell'origine del workspace è un punto sul canvas che scorre verso il basso man mano che il canvas si sposta).

Quindi, se scrollY includesse absoluteTop, in un certo senso "sposterebbe" l'origine dello spazio di lavoro. Ciò significa che viewTop rappresenterà il bordo superiore di blocklyDiv, anziché il bordo superiore dell'area di lavoro.

startScrollX numero Valore di scorrimento orizzontale quando lo scorrimento è iniziato in unità di pixel.
startScrollY numero Valore di scorrimento verticale quando lo scorrimento è iniziato in unità di pixel.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
trashcan Pattumiera | null Il cestino dello spazio di lavoro (se presente).
zoomControls_ ZoomControls | null

Metodi

Metodo Modificatori Descrizione
addClass(className) Aggiunge una classe CSS allo spazio di lavoro.
addTopBlock(block) Aggiunge un blocco all'elenco dei blocchi principali.
addTopBoundedElement(element) Aggiunge un elemento delimitato all'elenco degli elementi delimitati principali.
addTopComment(comment) Aggiunge un commento all'elenco dei commenti principali.
canBeFocused() Consulta IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly) Scorri lo spazio di lavoro per centrare il blocco specificato. Se il blocco ha altri blocchi impilati sotto, lo spazio di lavoro sarà centrato sulla pila, a meno che blockOnly non sia true.
cleanUp() Riordina l'area di lavoro disponendo tutti i blocchi in una colonna in modo che non si sovrappongano.
clear() Elimina tutti i blocchi nell'area di lavoro, con un'ottimizzazione per evitare i ridimensionamenti.
copyOptionsForFlyout() Crea un nuovo insieme di opzioni a partire da quelle di questo spazio di lavoro, con solo i valori pertinenti a un menu a comparsa.
createDom(opt_backgroundClass, injectionDiv) Crea gli elementi DOM dello spazio di lavoro.
dispose() Elimina questo spazio di lavoro. Scollega tutti gli elementi DOM per evitare perdite di memoria.
getAbsoluteScale()

Restituisce la scala assoluta dello spazio di lavoro.

Il ridimensionamento dello spazio di lavoro è moltiplicativo: se uno spazio di lavoro B (ad es. un editor di mutatori) con scala Y è nidificato all'interno di uno spazio di lavoro principale A con scala X, la scala effettiva dello spazio di lavoro B è X * Y, perché, essendo figlio di A, è già trasformato dal fattore di ridimensionamento di A e poi si trasforma ulteriormente con il proprio fattore di ridimensionamento. Normalmente questo funziona, ma per gli elementi globali (ad es. gli editor di campi) che sono associati visivamente a un particolare spazio di lavoro, ma si trovano al livello superiore del DOM anziché essere un elemento secondario dello spazio di lavoro associato, potrebbe essere necessaria la scala assoluta/effettiva per il rendering appropriato.

getAllBlocks(ordered) Trova tutti i blocchi nello spazio di lavoro. I blocchi vengono ordinati in modo facoltativo in base alla posizione, dall'alto verso il basso (con una leggera preferenza per la direzione da sinistra a destra o da destra a sinistra).
getAudioManager() Ottieni il gestore audio per questo spazio di lavoro.
getBlockById(id) Trova il blocco in questo spazio di lavoro con l'ID specificato.
getBlocksBoundingBox() Calcola il riquadro di delimitazione per i blocchi nello spazio di lavoro. Sistema di coordinate: coordinate del workspace.
getBubbleCanvas() Recupera l'elemento SVG che forma la superficie della bolla.
getButtonCallback(key) Ottieni la funzione di callback associata a una determinata chiave per i clic sui pulsanti e sulle etichette nel riquadro a comparsa.
getCanvas() Recupera l'elemento SVG che forma la superficie di disegno.
getCommentById(id) Restituisce il commento dello spazio di lavoro con l'ID specificato, se presente.
getComponentManager() Recupera il gestore dei componenti per questo workspace.
getCursor() Il cursore per questo workspace.
getDragTarget(e) Restituisce la destinazione di trascinamento su cui si trova l'evento puntatore.
getFlyout(opt_own) Getter per il riquadro visualizzato associato a questo spazio di lavoro. Questo riquadro a comparsa può essere di proprietà della barra degli strumenti o dello spazio di lavoro, a seconda della configurazione della barra degli strumenti. Sarà nullo se non è presente alcun riquadro.
getFocusableElement() Vedi IFocusableNode.getFocusableElement.
getFocusableTree() Consulta IFocusableNode.getFocusableTree.
getGrid() Recupera l'oggetto griglia per questo workspace o null se non esiste.
getInverseScreenCTM() Getter per la CTM dello schermo invertito.
getMarkerManager() Ottieni il gestore dei marcatori per questo spazio di lavoro.
getMetricsManager() Recupera il gestore delle metriche per questo spazio di lavoro.
getNavigator() Restituisce un oggetto responsabile del coordinamento dello spostamento dello stato attivo tra gli elementi di questo spazio di lavoro in risposta ai comandi di navigazione da tastiera.
getNestedTrees() Vedi IFocusableTree.getNestedTrees.
getParentSvg() Ottieni l'elemento SVG che contiene questo spazio di lavoro. Nota: presupponiamo che questa funzione venga chiamata solo dopo che lo spazio di lavoro è stato inserito nel DOM.
getRenderer() Ottieni il renderer dei blocchi allegato a questo workspace.
getRestoredFocusableNode(previousNode) Vedi IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode() Vedi IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale() Ottieni il fattore di zoom dello spazio di lavoro.
getSvgGroup() Restituisce il gruppo SVG per lo spazio di lavoro.
getTheme() Recupera l'oggetto del tema dello spazio di lavoro.
getToolbox() Getter per la casella degli strumenti associata a questo spazio di lavoro, se esistente.
getToolboxCategoryCallback(key) Recupera la funzione di callback associata a una determinata chiave per popolare le categorie della casella degli strumenti personalizzata in questo spazio di lavoro.
getTopBlocks(ordered) Trova i blocchi di primo livello e li restituisce. I blocchi vengono ordinati in modo facoltativo in base alla posizione, dall'alto verso il basso (con una leggera preferenza per la direzione da sinistra a destra o da destra a sinistra).
getTopBoundedElements(ordered) Trova gli elementi delimitati di primo livello e li restituisce.
getTopComments(ordered) Restituisce un elenco di commenti su questo workspace.
getWidth() Restituisce l'offset orizzontale dello spazio di lavoro. Destinato alla compatibilità LTR/RTL in XML.
hideChaff(onlyClosePopups) Chiudere descrizioni comando, menu contestuali, selezioni dei menu a discesa e così via.
hideComponents(onlyClosePopups) Nascondi tutti i componenti nascondibili automaticamente (come i riquadri a comparsa, il cestino e tutti i componenti registrati dall'utente).
highlightBlock(id, opt_state) Evidenzia o rimuovi l'evidenziazione di un blocco nello spazio di lavoro. L'evidenziazione dei blocchi viene spesso utilizzata per contrassegnare visivamente i blocchi attualmente in esecuzione.
isDraggable() Questa area di lavoro è trascinabile?
isDragging()

Restituisce true se l'utente sta eseguendo un gesto di trascinamento o se è in corso uno spostamento avviato dalla tastiera.

I gesti di trascinamento in genere comportano lo spostamento di un blocco o di un altro elemento nell'area di lavoro oppure lo scorrimento del riquadro o dell'area di lavoro.

I movimenti avviati dalla tastiera vengono implementati utilizzando l'infrastruttura di trascinamento e hanno lo scopo di emulare (un sottoinsieme di) i gesti di trascinamento, pertanto in genere devono essere trattati come se fossero un trascinamento basato su gesti.

isMovable()

Questa area di lavoro è mobile?

Ciò significa che l'utente può riposizionare le coordinate X e Y dello spazio di lavoro tramite l'input. Puoi farlo tramite le barre di scorrimento, la rotellina di scorrimento, il trascinamento o lo zoom con la rotellina di scorrimento o il pizzico (poiché lo zoom è centrato sulla posizione del mouse). Ciò non include lo zoom con i controlli di zoom, poiché le coordinate X e Y vengono decise a livello di programmazione.

isMovableHorizontally() Questo spazio di lavoro è spostabile orizzontalmente?
isMovableVertically() Questa area di lavoro è spostabile verticalmente?
isVisible() Getter per isVisible
lookUpFocusableNode(id) Vedi IFocusableTree.lookUpFocusableNode.
markFocused() Contrassegna questo spazio di lavoro come lo spazio di lavoro principale attualmente in primo piano.
moveDrag(e) Monitora il trascinamento di un oggetto in questo spazio di lavoro.
newBlock(prototypeName, opt_id) Ottieni un blocco appena creato.
newComment(id) Ottieni un commento appena creato.
onNodeBlur() Vedi IFocusableNode.onNodeBlur.
onNodeFocus() Consulta IFocusableNode.onNodeFocus.
onTreeBlur(nextTree) Consulta IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree) Consulta IFocusableTree.onTreeFocus.
recordDragTargets() Crea un elenco di tutte le aree di eliminazione per questo workspace.
refreshTheme() Aggiorna tutti i blocchi nello spazio di lavoro dopo l'aggiornamento di un tema.
registerButtonCallback(key, func) Registra una funzione di callback associata a una determinata chiave per i clic sui pulsanti e sulle etichette nel riquadro a comparsa. Ad esempio, un pulsante specificato dal codice XML deve corrispondere a una chiamata a registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Registra una funzione di callback associata a una determinata chiave per popolare le categorie della casella degli strumenti personalizzata in questo spazio di lavoro. Vedi le categorie di variabili e procedure come esempio.
removeButtonCallback(key) Rimuovi un callback per un clic su un pulsante nel riquadro a comparsa.
removeClass(className) Rimuove una classe CSS dallo spazio di lavoro.
removeToolboxCategoryCallback(key) Rimuovi un callback per un clic sul nome di una categoria personalizzata nella barra degli strumenti.
removeTopBlock(block) Rimuove un blocco dall'elenco dei blocchi principali.
removeTopBoundedElement(element) Rimuove un elemento delimitato dall'elenco dei principali elementi delimitati.
removeTopComment(comment) Rimuove un commento dall'elenco dei commenti principali.
render() Esegui il rendering di tutti i blocchi nell'area di lavoro.
resize() Ridimensiona e riposiziona tutti gli elementi di Chrome dello spazio di lavoro (barra degli strumenti, cestino, barre di scorrimento e così via). Questo metodo deve essere chiamato quando qualcosa cambia e richiede il ricalcolo delle dimensioni e delle posizioni del cestino, dello zoom, della barra degli strumenti e così via (ad es. ridimensionamento della finestra).
scroll(x, y) Scorre il workspace fino a un offset specificato (in pixel), rimanendo nei limiti del workspace. Per ulteriori dettagli sul significato di questi valori, consulta il commento su workspaceSvg.scrollX.
scrollCenter() Centra lo spazio di lavoro.
setIsReadOnly(readOnly)
setNavigator(newNavigator) Imposta l'istanza di Navigator utilizzata da questo workspace.
setResizeHandlerWrapper(handler) Salva i dati del gestore di ridimensionamento in modo da poterli eliminare in un secondo momento durante l'eliminazione.
setResizesEnabled(enabled) Aggiorna se il ridimensionamento è abilitato per questo spazio di lavoro. Se questa opzione è attiva, lo spazio di lavoro viene ridimensionato quando necessario. Se disattivato, lo spazio di lavoro non verrà ridimensionato finché non verrà riattivato. Utilizzalo per evitare il ridimensionamento durante un'operazione batch, per migliorare le prestazioni.
setScale(newScale) Imposta il fattore di zoom dello spazio di lavoro.
setTheme(theme) Imposta l'oggetto tema dello spazio di lavoro. Se non viene passato alcun tema, viene utilizzato il tema Classic per impostazione predefinita.
setVisible(isVisible) Attiva/disattiva la visibilità dello spazio di lavoro. Al momento è destinato solo allo spazio di lavoro principale.
startDrag(e, xy) Inizia a monitorare il trascinamento di un oggetto in questo spazio di lavoro.
translate(x, y) Traduci questo spazio di lavoro in nuove coordinate.
updateInverseScreenCTM() Contrassegna come sporco lo schermo CTM inverso.
updateToolbox(toolboxDef) Modifica l'albero dei blocchi nella casella degli strumenti esistente.
zoom(x, y, amount) Aumenta o diminuisce lo zoom dello spazio di lavoro rispetto alla coordinata (x, y) specificata o centrata su di essa.
zoomCenter(type) Aumentare o diminuire lo zoom dei blocchi centrati al centro della visualizzazione.
zoomToFit() Se possibile, ridimensiona i blocchi in modo che si adattino all'area di lavoro.