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。 | |
| rendered | 布林值 | SVG 工作區的算繪狀態。針對無頭工作區傳回 false，針對 WorkspaceSvg 的執行個體傳回 true。 |
|
| 規模 | 數字 | 目前規模。 | |
| scrollbar | ScrollbarPair | null | 這個工作區的捲軸 (如有)。 | |
| scrollX | 數字 | 以像素為單位的目前水平捲動偏移，相對於工作區原點。 將檢視區塊想成畫布，並在該檢視區塊下方移動，會很有幫助。畫布向右移動時，這個值會變得更正，而檢視畫面現在「看到」的是畫布的左側。畫布向左移動時，這個值會變得更負，而檢視畫面現在「看到」的是畫布右側。 這個值令人困惑的地方在於，它不會也不得包含 absoluteLeft 偏移。因為系統會使用這個值計算 viewLeft 值。 viewLeft 相對於工作區原點 (以像素為單位)。工作區原點是工作區的左上角 (至少在啟用時是這樣)。它會從 blocklyDiv 的左上角移動，以免位於工具箱下方。 啟用工作區後，viewLeft 和工作區來源會位於相同的 X 位置。當畫布在檢視畫面下方往右滑動時，這個值 (scrollX) 會變得更正，而 viewLeft 相對工作區原點會變得更負 (想像工作區原點是畫布上的一個點，當畫布移動時，該點會往右滑動)。 因此，如果 scrollX 包含 absoluteLeft，工作區原點就會以某種方式「取消移位」。這表示 viewLeft 代表的是 blocklyDiv 的左側邊緣，而非工作區的左側邊緣。 |
|
| scrollY | 數字 | 以像素為單位，相對於工作區原點的目前垂直捲動偏移。 將檢視區塊想成畫布，並在該檢視區塊下方移動，會很有幫助。畫布向下移動時，這個值會變得更正，而檢視畫面現在「看到」畫布的上半部。畫布向上移動時，這個值會變得更負，而檢視畫面會「看到」畫布的下半部。 這個值令人困惑的地方在於，它不會也不得包含 absoluteTop 偏移。因為系統會使用這個值計算 viewTop 值。 viewTop 相對於工作區原點 (以像素為單位)。工作區原點是工作區的左上角 (至少在啟用時是這樣)。它會從 blocklyDiv 的左上角移動，以免位於工具箱下方。 啟用工作區後，viewTop 和工作區來源會位於相同的 Y 位置。畫布向底部滑動時，這個值 (scrollY) 會變得更正向，而相對於工作區原點，viewTop 會變得更負向 (工作區原點的圖片會變成畫布上向下移動的點)。 因此，如果 scrollY 包含 absoluteTop，工作區原點就會以某種方式「取消移位」。也就是說，viewTop 會代表 blocklyDiv 的頂端邊緣，而不是工作區的頂端邊緣。 |
|
| startScrollX | 數字 | 以像素為單位，表示開始捲動時的水平捲動值。 | |
| startScrollY | 數字 | 以像素為單位，捲動開始時的垂直捲動值。 | |
| svgBackground_ | SVGElement | ||
| svgBlockCanvas_ | SVGElement | ||
| svgBubbleCanvas_ | SVGElement | ||
| svgGroup_ | SVGElement | ||
| themeManager_ | protected |
ThemeManager | |
| 垃圾桶 | Trashcan | null | 工作區的垃圾桶 (如有)。 | |
| zoomControls_ | ZoomControls | null |
方法
| 方法 | 修飾符 | 說明 |
|---|---|---|
| addClass(className) | 將 CSS 類別新增至工作區。 | |
| addTopBlock(block) | 將區塊新增至頂端區塊清單。 | |
| addTopBoundedElement(element) | 將有界限的元素新增至有界限的頂端元素清單。 | |
| addTopComment(comment) | 在熱門留言清單中新增留言。 | |
| canBeFocused() | 請參閱 IFocusableNode.canBeFocused。 | |
| centerOnBlock(id, blockOnly) | 捲動工作區，將指定區塊置中。如果方塊下方堆疊了其他方塊，工作區會以堆疊為中心，除非 blockOnly 為 true。 | |
| cleanUp() | 將所有方塊依序排列在同一欄中，不要重疊，即可整理工作區。 | |
| clear() | 處置工作區中的所有區塊，並進行最佳化，防止大小調整。 | |
| copyOptionsForFlyout() | 從這個工作區的選項建立一組新選項，只包含與浮動視窗相關的值。 | |
| createDom(opt_backgroundClass, injectionDiv) | 建立工作區 DOM 元素。 | |
| dispose() | 處置這個工作區。從所有 DOM 元素取消連結，避免記憶體流失。 | |
| getAbsoluteScale() | 傳回工作區的絕對比例。 工作區縮放是乘法運算；如果縮放比例為 Y 的工作區 B (例如變數編輯器) 巢狀內嵌於縮放比例為 X 的根工作區 A 中，工作區 B 的有效縮放比例為 X * Y，因為工作區 B 是工作區 A 的子項，已由工作區 A 的縮放比例轉換，然後再由自身的縮放比例轉換。通常這項功能會正常運作，但如果是與特定工作區視覺上相關聯，但位於 DOM 頂層而非相關聯工作區子項的全球元素 (例如欄位編輯器)，可能需要絕對/有效比例才能適當算繪。 |
|
| getAllBlocks(ordered) | 找出工作區中的所有方塊。區塊可依位置排序，由上到下 (略微偏向 LTR 或 RTL)。 | |
| getAudioManager() | 取得這個工作區的音訊管理員。 | |
| getBlockById(id) | 找出這個工作區中具有指定 ID 的區塊。 | |
| getBlocksBoundingBox() | 計算工作區中區塊的定界框。座標系統：工作區座標。 | |
| getBubbleCanvas() | 取得構成泡泡表面的 SVG 元素。 | |
| getButtonCallback(key) | 取得與指定鍵相關聯的回呼函式，用於在飛出式視窗中點選按鈕和標籤。 | |
| getCanvas() | 取得構成繪圖表面的 SVG 元素。 | |
| getCommentById(id) | 傳回具有指定 ID 的工作區留言 (如有)。 | |
| 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(ordered) | 找出頂層有界限的元素並傳回。 | |
| getTopComments(ordered) | 傳回這個工作區的留言清單。 | |
| 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() | 盡可能縮放方塊，使其符合工作區大小。 |