WorkspaceSvg 類別
工作區的類別。這是螢幕上的區域，可選用垃圾桶、捲軸、泡泡和拖曳功能。
Signature:
export declare class WorkspaceSvg extends Workspace implements IContextMenu, IFocusableNode, IFocusableTree
擴充： Workspace
實作： IContextMenu、IFocusableNode、IFocusableTree
建構函式
| 建構函式 | 修飾符 | 說明 |
|---|---|---|
| (建構函式)(選項) | 建構 WorkspaceSvg 類別的新例項 |
屬性
| 屬性 | 修飾符 | 類型 | 說明 |
|---|---|---|---|
| configureContextMenu | ((menuOptions: ContextMenuOption[], e: Event) => void) | null | 開發人員可以定義這個函式，將自訂選單選項新增至工作區的內容選單，或編輯工作區建立的選單選項組合。 | |
| keyboardAccessibilityMode | 布林值 | 如果鍵盤無障礙模式已開啟，則傳回 true；否則傳回 false。 | |
| keyboardMoveInProgress | 布林值 | 如果使用者正在使用鍵盤移動 (「拖曳」) 畫面，則為 True。 | |
| 算繪 | 布林值 | SVG 工作區的轉譯狀態。針對無頭工作區傳回 false，針對 WorkspaceSvg 例項傳回 true。 |
|
| scale | 數字 | 目前比例。 | |
| 捲動條 | ScrollbarPair | null | 這個工作區的捲動條 (如有)。 | |
| scrollX | 數字 | 以像素為單位，相對於工作區原點的目前水平捲動偏移量。 思考檢視畫面和在該檢視畫面下方移動的畫布很有幫助。隨著畫布向右移動，這個值會變得更正，而檢視畫面現在會「看到」畫布的左側。隨著畫布向左移動，這個值會變得更為負面，而檢視畫面現在會「看到」畫布的右側。 這個值的困惑之處在於，它不包含 (且不得包含) absoluteLeft 偏移。這是因為它用於計算 viewLeft 值。 viewLeft 是相對於工作區原點 (但以像素為單位)。工作區原點是工作區的左上角 (至少在啟用時)。它會從 blocklyDiv 的左上方移動，以免位於工具箱下方。 啟用工作區後，viewLeft 和工作區原點會位於相同的 X 位置。隨著畫布向右滑動至檢視畫面下方，這個值 (scrollX) 會變得更為正面，而 viewLeft 相對於工作區起點的值會變得更為負面 (請想像工作區起點是畫布上的一個點，隨著畫布移動而向右滑動)。 因此，如果 scrollX 包含 absoluteLeft，這會以某種方式「unshift」工作區原點。這表示 viewLeft 會代表 blocklyDiv 的左側邊緣，而非工作區的左側邊緣。 |
|
| scrollY | 數字 | 相對於工作區原點，以像素為單位的目前垂直捲動偏移量。 思考檢視畫面和在該檢視畫面下方移動的畫布很有幫助。隨著畫布向下移動，這個值會變得更為正面，而檢視畫面現在會「看到」畫布的上方部分。隨著畫布向上移動，這個值會變得更為負面，而檢視畫面會「看到」畫布的下方部分。 這個值的困惑之處在於，它不包含 (且不得包含) absoluteTop 偏移。這是因為該值用於計算 viewTop 值。 viewTop 是相對於工作區起點 (但以像素為單位)。工作區原點是工作區的左上角 (至少在啟用時)。它會從 blocklyDiv 的左上方移動，以免位於工具箱下方。 啟用工作區後，viewTop 和工作區原點會位於相同的 Y 位置。隨著畫布向下滑動，這個值 (scrollY) 會變得更為正面，而 viewTop 相對於工作區原點的值會變得更為負面 (工作區原點中的圖片會以點的形式在畫布上滑動，隨著畫布移動而向下滑動)。 因此，如果 scrollY 包含 absoluteTop，這會以某種方式「unshift」工作區來源。也就是說，viewTop 會代表 blocklyDiv 的頂端邊緣，而非工作區的頂端邊緣。 |
|
| startScrollX | 數字 | 開始捲動時的水平捲動值，以像素為單位。 | |
| startScrollY | 數字 | 以像素單位表示的捲動開始時的垂直捲動值。 | |
| svgBackground_ | SVGElement | ||
| svgBlockCanvas_ | SVGElement | ||
| svgBubbleCanvas_ | SVGElement | ||
| svgGroup_ | SVGElement | ||
| themeManager_ | protected |
ThemeManager | |
| trashcan | Trashcan | 空值 | 工作區的垃圾桶 (如有)。 | |
| zoomControls_ | ZoomControls | null |
方法
| 方法 | 修飾符 | 說明 |
|---|---|---|
| addClass(className) | 將 CSS 類別新增至工作區。 | |
| addTopBlock(block) | 將區塊新增至頂端區塊清單。 | |
| addTopBoundedElement(element) | 將受限元素新增至頂層受限元素清單。 | |
| addTopComment(comment) | 在熱門留言清單中新增留言。 | |
| canBeFocused() | 請參閱 IFocusableNode.canBeFocused。 | |
| centerOnBlock(id, blockOnly) | 捲動工作區，將畫面置中顯示指定的區塊。如果區塊下方有其他堆疊區塊，除非 blockOnly 為 true，否則工作區會置中於堆疊上方。 | |
| cleanUp() | 將資料欄中的所有區塊排序，讓區塊不重疊，以便整理工作區。 | |
| clear() | Dispose 工作區中的所有區塊，並進行最佳化處理，避免重新調整大小。 | |
| copyOptionsForFlyout() | 從這個工作區的選項建立一組新的選項，只包含與彈出式選單相關的值。 | |
| createDom(opt_backgroundClass, injectionDiv) | 建立工作區 DOM 元素。 | |
| dispose() | Dispose 這個工作區。取消連結所有 DOM 元素，以免記憶體流失。 | |
| getAbsoluteScale() | 傳回工作區的絕對比例。 工作區縮放是可相乘的；如果縮放比例為 Y 的工作區 B (例如變異子編輯器) 是嵌套在縮放比例為 X 的根工作區 A 中，則工作區 B 的有效縮放比例為 X * Y，因為它是 A 的子項，因此已經過 A 的縮放比例轉換，然後再以自身的縮放比例進一步轉換。這項功能通常會「自動運作」，但如果全域元素 (例如欄位編輯器) 與特定工作區視覺上相關聯，但位於 DOM 頂層，而非相關聯工作區的子項，則可能需要使用絕對/有效比例才能正確轉譯。 |
|
| getAllBlocks(ordered) | 找出工作區中的所有區塊。您可以選擇依位置排序區塊，從上到下排列 (並略微偏向 LTR 或 RTL)。 | |
| getAudioManager() | 取得此工作區的音訊管理工具。 | |
| getBlockById(id) | 在這個工作區中找出含有指定 ID 的區塊。 | |
| getBlocksBoundingBox() | 計算工作區塊的定界框。座標系統：工作區座標。 | |
| getBubbleCanvas() | 取得用於形成氣泡表面的 SVG 元素。 | |
| getButtonCallback(key) | 取得與特定鍵相關聯的回呼函式，用於點按彈出式視窗中的按鈕和標籤。 | |
| getCanvas() | 取得用於形成繪圖介面的 SVG 元素。 | |
| getComponentManager() | 取得此工作區的元件管理工具。 | |
| getCursor() | 這個工作區的游標。 | |
| getDragTarget(e) | 傳回指標事件結束時的拖曳目標。 | |
| getFlyout(opt_own) | 與此工作區相關聯的彈出式視窗的 Getter。視工具箱設定而定，這個彈出式視窗可能由工具箱或工作區擁有。如果沒有彈出式視窗，則為空值。 | |
| getFocusableElement() | 請參閱 IFocusableNode.getFocusableElement。 | |
| getFocusableTree() | 請參閱 IFocusableNode.getFocusableTree。 | |
| getGrid() | 取得這個工作區的格線物件，如果沒有，則傳回空值。 | |
| getInverseScreenCTM() | 反轉螢幕 CTM 的 getter。 | |
| getMarkerManager() | 取得此工作區的標記管理工具。 | |
| getMetricsManager() | 取得這個工作區的指標管理工具。 | |
| getNavigator() | 傳回物件，負責在回應鍵盤導覽指令時，協調在這個工作區域內的項目之間移動焦點。 | |
| getNestedTrees() | 請參閱 IFocusableTree.getNestedTrees。 | |
| getParentSvg() | 取得包含此工作區的 SVG 元素。注意：我們假設這項方法只會在工作區被插入 DOM 後才呼叫。 | |
| getRenderer() | 取得附加至此工作區的區塊轉譯器。 | |
| getRestoredFocusableNode(previousNode) | 請參閱 IFocusableTree.getRestoredFocusableNode。 | |
| getRootFocusableNode() | 請參閱 IFocusableTree.getRootFocusableNode。 | |
| getRootWorkspace() | ||
| getScale() | 取得工作區的縮放係數。 | |
| getSvgGroup() | 傳回工作區的 SVG 群組。 | |
| getTheme() | 取得工作區主題物件。 | |
| getToolbox() | 與這個工作區相關聯的工具箱 (如有) 的 getter。 | |
| getToolboxCategoryCallback(key) | 取得與特定鍵相關聯的回呼函式，以便在這個工作區中填入自訂工具箱類別。 | |
| getTopBlocks(ordered) | 尋找並傳回頂層區塊。您可以選擇依位置排序區塊，從上到下排列 (並略微偏向 LTR 或 RTL)。 | |
| getTopBoundedElements() | 找出並傳回頂層受限元素。 | |
| getWidth() | 傳回工作區的水平偏移量。適用於 XML 中的 LTR/RTL 相容性。 | |
| hideChaff(onlyClosePopups) | 關閉工具提示、內容選單、下拉式選單等。 | |
| hideComponents(onlyClosePopups) | 隱藏任何可自動隱藏的元件 (例如彈出式、垃圾桶和任何使用者註冊的元件)。 | |
| highlightBlock(id, opt_state) | 在工作區中醒目顯示或取消醒目顯示區塊。區塊醒目顯示功能通常用於視覺化標示目前正在執行的區塊。 | |
| isDraggable() | 這個工作區是否可拖曳？ | |
| isDragging() | 如果使用者目前正在進行拖曳手勢，或是正在進行鍵盤啟動的移動動作，則會傳回 true。 拖曳手勢通常會涉及移動工作區中的區塊或其他項目，或是捲動彈出式/工作區。 鍵盤啟動的動作會使用拖曳基礎結構實作，目的是模擬拖曳手勢 (部分)，因此通常應視為以手勢為基礎的拖曳動作。 |
|
| isMovable() | 這個工作區是否可移動？ 這表示使用者可以透過輸入內容，調整工作區的 X 和 Y 座標。您可以透過捲軸列、滾輪、拖曳，或使用滾輪或雙指撥動手勢縮放 (因為縮放功能會以滑鼠位置為中心)。這不包括使用縮放控制項的縮放功能，因為 X Y 座標是由程式決定。 |
|
| isMovableHorizontally() | 這個工作區是否可以水平移動？ | |
| isMovableVertically() | 這個工作區是否可以垂直移動？ | |
| isVisible() | isVisible 的 getter | |
| lookUpFocusableNode(id) | 請參閱 IFocusableTree.lookUpFocusableNode。 | |
| markFocused() | 將這個工作區標示為目前聚焦的主要工作區。 | |
| moveDrag(e) | 追蹤工作區上物件的拖曳動作。 | |
| newBlock(prototypeName, opt_id) | 取得新建立的區塊。 | |
| newComment(id) | 取得新建立的留言。 | |
| onNodeBlur() | 請參閱 IFocusableNode.onNodeBlur。 | |
| onNodeFocus() | 請參閱 IFocusableNode.onNodeFocus。 | |
| onTreeBlur(nextTree) | 請參閱 IFocusableTree.onTreeBlur。 | |
| onTreeFocus(_node, _previousTree) | 請參閱 IFocusableTree.onTreeFocus。 | |
| recordDragTargets() | 列出這個工作區的所有刪除區域。 | |
| refreshTheme() | 在主題更新後，重新整理工作區中的所有區塊。 | |
| registerButtonCallback(key, func) | 為彈出式視窗中的按鈕和標籤點擊事件，註冊與特定鍵相關聯的回呼函式。舉例來說，XML 指定的按鈕應與 registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction) 呼叫相符。 | |
| registerToolboxCategoryCallback(key, func) | 註冊與特定鍵相關聯的回呼函式，以便在這個工作區中填入自訂工具箱類別。請參閱變數和程序類別的範例。 | |
| removeButtonCallback(key) | 移除彈出式視窗中按下按鈕的回呼。 | |
| removeClass(className) | 從工作區移除 CSS 類別。 | |
| removeToolboxCategoryCallback(key) | 移除工具箱中自訂類別名稱點擊事件的回呼。 | |
| removeTopBlock(block) | 從頂級區塊清單中移除區塊。 | |
| removeTopBoundedElement(element) | 從頂層邊界元素清單中移除邊界元素。 | |
| removeTopComment(comment) | 從熱門留言清單中移除留言。 | |
| render() | 算繪工作區中的所有區塊。 | |
| resize() | 調整所有工作區 Chrome 元素 (工具箱、垃圾桶、捲軸等) 的大小和位置當需要重新計算垃圾桶、縮放、工具箱等的尺寸和位置 (例如調整視窗大小) 時，應呼叫此方法。 | |
| scroll(x, y) | 將工作區捲動至指定的偏移量 (以像素為單位)，並保持在工作區範圍內。請參閱 workspaceSvg.scrollX 的註解，進一步瞭解這些值的意義。 | |
| scrollCenter() | 將工作區置中。 | |
| setIsReadOnly(readOnly) | ||
| setNavigator(newNavigator) | 設定這個工作區使用的 Navigator 例項。 | |
| setResizeHandlerWrapper(handler) | 儲存重新調整大小處理常式資料，以便日後在處置時刪除。 | |
| setResizesEnabled(enabled) | 更新這個工作區是否已啟用調整大小功能。啟用後，系統會在適當情況下調整工作區大小。如果停用，工作區將不會調整大小，直到重新啟用為止。為避免影響效能，請在批次作業期間避免調整大小。 | |
| setScale(newScale) | 設定工作區的縮放比例。 | |
| setTheme(theme) | 設定工作區主題物件。如果未傳入主題，系統會預設為 Classic 主題。 |
|
| setVisible(isVisible) | 切換工作區的顯示設定。目前僅適用於主要工作區。 | |
| startDrag(e, xy) | 開始追蹤工作區上物件的拖曳動作。 | |
| translate(x, y) | 將這個工作區轉換為新的座標。 | |
| updateInverseScreenCTM() | 將反向螢幕 CTM 標示為髒污。 | |
| updateToolbox(toolboxDef) | 修改現有工具箱的區塊樹狀結構。 | |
| zoom(x, y, amount) | 以指定 (x, y) 座標為中心，放大或縮小工作區。 | |
| zoomCenter(type) | 透過放大或縮小，將位於檢視畫面中央的區塊置中。 | |
| zoomToFit() | 盡可能將區塊縮放至可容納在工作區的大小。 |