blockly > WorkspaceSvg

WorkspaceSvg クラス

ワークスペースのクラス。これは、ゴミ箱、スクロールバー、バブル、ドラッグを必要に応じて表示できる画面上の領域です。

署名:

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

拡張: Workspace

実装: IContextMenuIFocusableNodeIFocusableTree

コンストラクタ

コンストラクタ 修飾子 説明
(コンストラクタ)(オプション) WorkspaceSvg クラスの新しいインスタンスを構築します。

プロパティ

プロパティ 修飾子 タイプ 説明
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null デベロッパーは、この関数を定義して、ワークスペースのコンテキスト メニューにカスタム メニュー オプションを追加したり、ワークスペースで作成されたメニュー オプションのセットを編集したりできます。
keyboardAccessibilityMode ブール値 キーボード ユーザー補助モードがオンの場合は true、それ以外の場合は false。
keyboardMoveInProgress ブール値 キーボードで開始された移動(「ドラッグ」)が進行中の場合に true。
rendered ブール値 SVG ワークスペースのレンダリング ステータス。ヘッドレス ワークスペースの場合は false を返し、WorkspaceSvg のインスタンスの場合は true を返します。
scale 数値 現在のスケール。
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 になります。これは、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) このワークスペースに関連付けられたフライアウトのゲッター。このフライアウトは、ツールボックスの構成に応じて、ツールボックスまたはワークスペースのいずれかが所有します。フライアウトがない場合は null になります。
getFocusableElement() IFocusableNode.getFocusableElement を参照してください。
getFocusableTree() IFocusableNode.getFocusableTree を参照してください。
getGrid() このワークスペースのグリッド オブジェクトを取得します。存在しない場合は null を返します。
getInverseScreenCTM() 反転した画面の CTM のゲッター。
getMarkerManager() このワークスペースのマーカー マネージャーを取得します。
getMetricsManager() このワークスペースの指標マネージャーを取得します。
getNavigator() キーボード ナビゲーション コマンドに応じて、このワークスペースのアイテム間のフォーカスの移動を調整するオブジェクトを返します。
getNestedTrees() IFocusableTree.getNestedTrees をご覧ください。
getParentSvg() このワークスペースを含む SVG 要素を取得します。注: これは、ワークスペースが DOM に挿入された後にのみ呼び出されることを前提としています。
getRenderer() このワークスペースにアタッチされているブロック レンダラを取得します。
getRestoredFocusableNode(previousNode) IFocusableTree.getRestoredFocusableNode をご覧ください。
getRootFocusableNode() IFocusableTree.getRootFocusableNode をご覧ください。
getRootWorkspace()
getScale() ワークスペースのズーム率を取得します。
getSvgGroup() ワークスペースの SVG グループを返します。
getTheme() ワークスペースのテーマ オブジェクトを取得します。
getToolbox() このワークスペースに関連付けられているツールボックスのゲッター(存在する場合)。
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 のゲッター
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() ワークスペースのクローム(ツールボックス、ゴミ箱、スクロールバーなど)のサイズ変更と位置変更これは、ゴミ箱、ズーム、ツールボックスなどの寸法と位置を再計算する必要がある変更(ウィンドウのサイズ変更など)が発生した場合に呼び出す必要があります。
scroll(x, y) ワークスペースの境界内に収まるように、ワークスペースを指定したオフセット(ピクセル単位)までスクロールします。これらの値の意味について詳しくは、workspaceSvg.scrollX のコメントをご覧ください。
scrollCenter() ワークスペースを中央に配置します。
setIsReadOnly(readOnly)
setNavigator(newNavigator) このワークスペースで使用される Navigator インスタンスを設定します。
setResizeHandlerWrapper(handler) サイズ変更ハンドラのデータを保存して、後で dispose で削除できるようにします。
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() 可能であれば、ブロックをズームしてワークスペースに収めます。