Source Editor · .bflow
12.5px
Ctrl+Space Completion1
Ln:Col 1:1
Preview
Shape / Joint dependency-isolated
ValidationERROR 0WARNING 0
| Level | Line | Code | Target | Message |
|---|
Definition / JSON
1
| Level | Line | Code | Target | Message |
|---|
Bone Flowは Node（Shape） と Joint（接続） をSourceへ記述すると、右側Previewへ表示されます。下の「Sourceへ挿入」でカーソル位置へ例を入れられます。
@id sample-flow @title "Sample Flow" @version 1.0.0 @flow direction=TB @theme light @joint line=orthogonal @joint animate=false @layout mode=auto (start:開始) => [process:処理] => ((end:終了))
ここは固定イラストではなく、インストール済みの #021 Bone Shape Registry から実際のShapeを生成して表示します。カードをクリックすると、そのTYPEのNodeコードをSourceへ挿入します。
| TYPE | 短縮Syntax | 意味 |
|---|---|---|
| START | (start:開始) | 開始 |
| END | ((end:終了)) | 終了 |
| PROCESS | [work:処理] | 通常処理 |
| DECISION | <check:承認？> | 条件分岐 |
| INPUT_OUTPUT | {io:入出力} | 入出力 |
| SUB_PROCESS | [[sub:サブ処理]] | サブプロセス |
| その他 | [id:TYPE:表示文字] | #021 RegistryのTYPEを指定 |
[db:DATABASE:顧客DB] [api:API:注文API] [doc:DOCUMENT:納品書] [file:FILE:orders.csv]
{manual,x:120,y:240,theme:dark,scale:1.2,comment:"説明",tooltip:"詳細"} をNode末尾へ付けると個別設定を指定できます。
| 記号 | 線 | 例 |
|---|---|---|
-- | Global Default | [a] -- [b] |
-> | Straight | [a] -> [b] |
~> | Curve | [a] ~> [b] |
=> | Orthogonal | [a] => [b] |
Joint Labelは線記号の間へ "..." を入れます。Decisionの分岐表示は key: で指定し、YES / NO固定ではありません。
[check] ="承認"=>{key:承認,animate:true} [ok]
[check] ="否認"=>{key:差戻し,dashed,width:6} [ng]
[a] ~"送信"~>{animate:true,speed:normal,curve-side:left} [b]主なOption: animate:true|false / speed:slow|normal|fast / solid / dashed / dotted / dash-dot / width:1..12 / jump / nojump / color:"#RRGGBB" / clearance:0..120.
通常接続はSource側OUTからTarget側INです。TB方向の通常Shapeは TOP=IN / BOTTOM=OUT / LEFT・RIGHT=RETURN。RETURNは .RETURN と書かず、物理位置 .LEFT / .RIGHT を指定します。
[source].BOTTOM => [target].TOP [ng].LEFT => [request].LEFT
2行目は差戻し例です。Previewでは現在の送信RETURN位置だけをOUTとして見せ、RETURNという文字自体は表示しません。
[customers:TABLE_DETAIL:顧客]
{
customer_id : 顧客ID : INT {pk,required}
name : 顧客名 : VARCHAR
}
[orders:TABLE_DETAIL:注文]
{
order_id : 注文ID : INT {pk,required}
customer_id : 顧客ID : INT {fk,required}
}
[customers].customer_id.OUT ="customer_id"=> [orders].customer_id.INTABLE_DETAILのField Portは常に LEFT=IN / RIGHT=OUT で、フロー方向を変更してもFieldのIN/OUTは回転しません。
| Directive | 用途 |
|---|---|
@id | Flow ID |
@title | タイトル |
@version | Flowバージョン |
@flow direction=TB|BT|LR|RL | レイアウト方向 |
@theme light|dark|neon | テーマ |
@joint line=straight|curve|orthogonal | 既定Joint線種 |
@joint animate=true|false | Jointアニメーション |
@joint speed=slow|normal|fast | アニメ速度 |
@joint intersection=jump | 交差ジャンプ |
@layout mode=auto|manual | 配置方式 |
@layout gap=N | Node外周間隔 |
@layout branch-gap=N | 分岐間隔 |
詳しい仕様書は同梱の docs/023-Input-Guide.md と docs/023-Bone-Flow-Syntax.md を参照してください。
このClassはJavaScriptの class {} ではありません。 HTML要素の class="" に機能Classを設定し、そのClassと1対1のPublic APIを呼び出すための宣言的な入口です。
class="" にClass名を設定するdata-bone-event でいつ呼ぶかを設定するdata-bone-args / data-bone-arg-N でAPI引数を渡す<div class="bone-html-class-use bone-flow-editor-definition-normalize-type" data-bone-event="manual"></div>左側の Class一覧 114件 からClassを選択すると、そのClass専用の説明・引数・HTML例・実行・Resultを表示します。
HTMLの class="" は「どのPublic APIを使うか」を指定します。Public APIへ渡す引数と呼出タイミングは、以下の共通 data-bone-* 属性で指定します。
実行マーカー: 機能Classは bone-html-class-use と組み合わせて使用します。例: class="bone-html-class-use bone-bone-flow-editor-definition-normalize-type"。既存CSS Classを誤実行しないための共通契約です。
| 属性 | 役割 | 値 / Default | 説明 |
|---|---|---|---|
class | 機能Class | bone-html-class-use bone-...-... | bone-html-class-use とClass一覧の機能Classを同じ class="" に設定します。対応Public APIと1対1です。 |
data-bone-event | 起動タイミング | load / click / input / change / manual 等Default: load | 複数指定は空白またはカンマ区切り。manual は自動実行せず、Bridgeの invoke() から実行します。 |
data-bone-args | 引数一括指定 | JSON Array | Public APIの引数順そのままのJSON配列です。例: ["$self","$value",{}] |
data-bone-arg-N | 引数個別指定 | Nは0始まり | data-bone-arg-0, data-bone-arg-1 のように1引数ずつ指定します。一括指定より個別値を補完できます。 |
data-bone-once | イベント1回限定 | true / Default: false | click等のイベント監視を1回だけ実行したい場合に指定します。 |
data-bone-append-result | Element戻り値 | false でappend停止Default: append | Public APIがElementを返した場合、既定ではClass設定要素へappendします。 |
data-bone-throw | Debug再throw | true / Default: false | Class実行エラーをResultへ保存した後、Debug用に非同期で再throwします。 |
| 値 | 解決内容 |
|---|---|
$self | Classを設定したHTML要素そのものを渡します。element / target / root などの第1引数に使用します。 |
$event | Class起動の原因になったDOM Eventを渡します。click / input / change等のイベント情報が必要なAPI用です。 |
$value | input / textarea / select等の現在の value を渡します。 |
$checked | checkbox / radio等の現在の checked(Boolean)を渡します。 |
$text | Classを設定した要素の textContent を渡します。 |
$dataset | Classを設定した要素の dataset を通常Objectとして渡します。 |
$files | file input の FileList を渡します。 |
$selector:... | ...をCSS selectorとして document.querySelector() で解決し、そのElementを渡します。 |
$id:... | ...をDOM idとして document.getElementById() で解決し、そのElementを渡します。 |
$global:... | window / globalThis上の指定名の値を渡します。 |
$handler:... | window / globalThis上の指定名のFunctionをコールバック引数として渡します。 |
data-bone-args で配列を読み込み、未指定位置を data-bone-arg-N と自動補完（第1引数のelement系は $self、event系は $event）で埋めます。
Class経由のPublic API実行結果は、Class設定要素自身へ保存されます。成功・失敗をHTMLとEventの両方から確認できます。
| 結果 | 内容 | 用途 |
|---|---|---|
element.__boneClassResult | Public APIの生の戻り値 | JavaScript側で元のObject / Element / primitiveをそのまま参照します。 |
data-bone-class-status | ok / error | HTML属性だけで直近のClass実行成否を確認します。 |
data-bone-class-result | 戻り値のserialize結果 | DOM Inspectorやテストから結果概要を確認します。長い結果は1000文字で省略します。 |
bone-html-class-result | 成功CustomEvent | detail に componentId / className / api / value を持ちます。 |
bone-html-class-error | 失敗CustomEvent | detail に componentId / className / api / error を持ちます。 |
左のClass一覧からClassを選択し「このClassを実行」を押すと、実Public APIのStatus / Resultを表示します。
TYPEをFlow Editorの正式契約に沿う形へ正規化します。
| HTML Class | bone-flow-editor-definition-normalize-type |
|---|---|
| 対応Public API | BoneFlowDefinition.normalizeType |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | v | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-normalize-type" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
field TypeをFlow Editorの正式契約に沿う形へ正規化します。
| HTML Class | bone-flow-editor-definition-normalize-field-type |
|---|---|
| 対応Public API | BoneFlowDefinition.normalizeFieldType |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | v | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-normalize-field-type" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorで使用する出力・定義オブジェクトを構築します。
| HTML Class | bone-flow-editor-definition-build |
|---|---|
| 対応Public API | BoneFlowDefinition.build |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | astOrSource | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-build" data-bone-event="manual" data-bone-args='["html-class"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.toCanonical の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-to-canonical |
|---|---|
| 対応Public API | BoneFlowDefinition.toCanonical |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | working | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-to-canonical" data-bone-event="manual" data-bone-args='[null,{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.promoteAutoIds の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-promote-auto-ids |
|---|---|
| 対応Public API | BoneFlowDefinition.promoteAutoIds |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | working | Object | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-promote-auto-ids" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.generateCanonicalSource の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-generate-canonical-source |
|---|---|
| 対応Public API | BoneFlowDefinition.generateCanonicalSource |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | definition | Object | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-generate-canonical-source" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.quoteText の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-quote-text |
|---|---|
| 対応Public API | BoneFlowDefinition.quoteText |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-quote-text" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.quoteJointLabel の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-quote-joint-label |
|---|---|
| 対応Public API | BoneFlowDefinition.quoteJointLabel |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-quote-joint-label" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowDefinition.clone の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-definition-clone |
|---|---|
| 対応Public API | BoneFlowDefinition.clone |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | v | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-definition-clone" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-flow-editor-create |
|---|---|
| 対応Public API | BoneFlowEditor.create |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | root | Element / Instance | data-bone-arg-0または data-bone-args[0] | "$self" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-create" data-bone-event="manual" data-bone-args='["$self"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowJointAdapter.init の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-joint-adapter-init |
|---|---|
| 対応Public API | BoneFlowJointAdapter.init |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ctx | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-init" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
指定先へFlow Editorの表示を描画・更新します。
| HTML Class | bone-flow-editor-joint-adapter-render |
|---|---|
| 対応Public API | BoneFlowJointAdapter.render |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | lines | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-render" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの表示・接続・状態を現在値から再計算します。
| HTML Class | bone-flow-editor-joint-adapter-refresh-interactions |
|---|---|
| 対応Public API | BoneFlowJointAdapter.refreshInteractions |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-refresh-interactions" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
既存のFlow Editor要素または状態を更新します。
| HTML Class | bone-flow-editor-joint-adapter-update-hover |
|---|---|
| 対応Public API | BoneFlowJointAdapter.updateHover |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | clientX | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | clientY | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-update-hover" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-joint-adapter-clear-hover |
|---|---|
| 対応Public API | BoneFlowJointAdapter.clearHover |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-clear-hover" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-joint-adapter-clear-transient-interactions |
|---|---|
| 対応Public API | BoneFlowJointAdapter.clearTransientInteractions |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-clear-transient-interactions" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowJointAdapter.beginPointer の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-joint-adapter-begin-pointer |
|---|---|
| 対応Public API | BoneFlowJointAdapter.beginPointer |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ev | Event | data-bone-arg-0または data-bone-args[0] | "$event" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-begin-pointer" data-bone-event="manual" data-bone-args='["$event"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象UI・データを開きます。
| HTML Class | bone-flow-editor-joint-adapter-open-context-menu |
|---|---|
| 対応Public API | BoneFlowJointAdapter.openContextMenu |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ev | Event | data-bone-arg-0または data-bone-args[0] | "$event" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-open-context-menu" data-bone-event="manual" data-bone-args='["$event"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Menu Anchor Client」を取得します。
| HTML Class | bone-flow-editor-joint-adapter-get-menu-anchor-client |
|---|---|
| 対応Public API | BoneFlowJointAdapter.getMenuAnchorClient |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | jointId | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-get-menu-anchor-client" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの診断表示を描画します。
| HTML Class | bone-flow-editor-joint-adapter-render-diagnostic |
|---|---|
| 対応Public API | BoneFlowJointAdapter.renderDiagnostic |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | d | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-render-diagnostic" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Viewport」を設定します。
| HTML Class | bone-flow-editor-joint-adapter-set-viewport |
|---|---|
| 対応Public API | BoneFlowJointAdapter.setViewport |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-set-viewport" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-joint-adapter-clear |
|---|---|
| 対応Public API | BoneFlowJointAdapter.clear |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-clear" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostics」を取得します。
| HTML Class | bone-flow-editor-joint-adapter-get-diagnostics |
|---|---|
| 対応Public API | BoneFlowJointAdapter.getDiagnostics |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-joint-adapter-get-diagnostics" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLayout.compute の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-layout-compute |
|---|---|
| 対応Public API | BoneFlowLayout.compute |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | definition | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | bounds | API定義値 | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-layout-compute" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLayout.tarjan の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-layout-tarjan |
|---|---|
| 対応Public API | BoneFlowLayout.tarjan |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | nodes | Element / Instance | data-bone-arg-0または data-bone-args[0] | null |
| 1 | joints | API定義値 | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-layout-tarjan" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
入力ソースをFlow Editorの正式契約に沿う形へ正規化します。
| HTML Class | bone-flow-editor-lexer-normalize-source |
|---|---|
| 対応Public API | BoneFlowLexer.normalizeSource |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-normalize-source" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.splitLines の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-split-lines |
|---|---|
| 対応Public API | BoneFlowLexer.splitLines |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | source | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-split-lines" data-bone-event="manual" data-bone-args='["html-class"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.lineColumnAt の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-line-column-at |
|---|---|
| 対応Public API | BoneFlowLexer.lineColumnAt |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | source | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
| 1 | offset | Number | data-bone-arg-1または data-bone-args[1] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-line-column-at" data-bone-event="manual" data-bone-args='["html-class",0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.sourceRef の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-source-ref |
|---|---|
| 対応Public API | BoneFlowLexer.sourceRef |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | source | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
| 1 | startOffset | Number | data-bone-arg-1または data-bone-args[1] | 0 |
| 2 | endOffset | Number | data-bone-arg-2または data-bone-args[2] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-source-ref" data-bone-event="manual" data-bone-args='["html-class",0,0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.stripInlineComment の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-strip-inline-comment |
|---|---|
| 対応Public API | BoneFlowLexer.stripInlineComment |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | text | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-strip-inline-comment" data-bone-event="manual" data-bone-args='["sample"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.decodeQuoted の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-decode-quoted |
|---|---|
| 対応Public API | BoneFlowLexer.decodeQuoted |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-decode-quoted" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowLexer.lex の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-lexer-lex |
|---|---|
| 対応Public API | BoneFlowLexer.lex |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-lexer-lex" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力を解析し、構造化結果を返します。
| HTML Class | bone-flow-editor-parser-parse |
|---|---|
| 対応Public API | BoneFlowParser.parse |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | value | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-parse" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力を解析し、構造化結果を返します。
| HTML Class | bone-flow-editor-parser-parse-endpoint-token |
|---|---|
| 対応Public API | BoneFlowParser.parseEndpointToken |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | text | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample" |
| 1 | index | Number | data-bone-arg-1または data-bone-args[1] | 0 |
| 2 | absBase | API定義値 | data-bone-arg-2または data-bone-args[2] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-parse-endpoint-token" data-bone-event="manual" data-bone-args='["sample",0,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力を解析し、構造化結果を返します。
| HTML Class | bone-flow-editor-parser-parse-connector |
|---|---|
| 対応Public API | BoneFlowParser.parseConnector |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | text | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample" |
| 1 | index | Number | data-bone-arg-1または data-bone-args[1] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-parse-connector" data-bone-event="manual" data-bone-args='["sample",0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力を解析し、構造化結果を返します。
| HTML Class | bone-flow-editor-parser-parse-options |
|---|---|
| 対応Public API | BoneFlowParser.parseOptions |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | inner | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-parse-options" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowParser.canonicalDirective の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-parser-canonical-directive |
|---|---|
| 対応Public API | BoneFlowParser.canonicalDirective |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | line | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-canonical-directive" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowParser.endpointKey の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-parser-endpoint-key |
|---|---|
| 対応Public API | BoneFlowParser.endpointKey |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ep | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-parser-endpoint-key" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowRenderer.init の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-renderer-init |
|---|---|
| 対応Public API | BoneFlowRenderer.init |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ctx | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-init" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
指定先へFlow Editorの表示を描画・更新します。
| HTML Class | bone-flow-editor-renderer-render |
|---|---|
| 対応Public API | BoneFlowRenderer.render |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | w | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-render" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの表示・接続・状態を現在値から再計算します。
| HTML Class | bone-flow-editor-renderer-refresh-geometry |
|---|---|
| 対応Public API | BoneFlowRenderer.refreshGeometry |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | w | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-refresh-geometry" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの表示・接続・状態を現在値から再計算します。
| HTML Class | bone-flow-editor-renderer-refresh-interactions |
|---|---|
| 対応Public API | BoneFlowRenderer.refreshInteractions |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-refresh-interactions" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-renderer-clear-transient-interactions |
|---|---|
| 対応Public API | BoneFlowRenderer.clearTransientInteractions |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-clear-transient-interactions" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
既存のFlow Editor要素または状態を更新します。
| HTML Class | bone-flow-editor-renderer-update-joint-hover |
|---|---|
| 対応Public API | BoneFlowRenderer.updateJointHover |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | clientX | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | clientY | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-update-joint-hover" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-renderer-clear-joint-hover |
|---|---|
| 対応Public API | BoneFlowRenderer.clearJointHover |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-clear-joint-hover" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowRenderer.beginJointPointer の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-renderer-begin-joint-pointer |
|---|---|
| 対応Public API | BoneFlowRenderer.beginJointPointer |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ev | Event | data-bone-arg-0または data-bone-args[0] | "$event" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-begin-joint-pointer" data-bone-event="manual" data-bone-args='["$event"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象UI・データを開きます。
| HTML Class | bone-flow-editor-renderer-open-joint-context-menu |
|---|---|
| 対応Public API | BoneFlowRenderer.openJointContextMenu |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ev | Event | data-bone-arg-0または data-bone-args[0] | "$event" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-open-joint-context-menu" data-bone-event="manual" data-bone-args='["$event"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Joint Menu Anchor Client」を取得します。
| HTML Class | bone-flow-editor-renderer-get-joint-menu-anchor-client |
|---|---|
| 対応Public API | BoneFlowRenderer.getJointMenuAnchorClient |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-get-joint-menu-anchor-client" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Viewport」を設定します。
| HTML Class | bone-flow-editor-renderer-set-viewport |
|---|---|
| 対応Public API | BoneFlowRenderer.setViewport |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-set-viewport" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-renderer-clear |
|---|---|
| 対応Public API | BoneFlowRenderer.clear |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-clear" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Dependency Map」を取得します。
| HTML Class | bone-flow-editor-renderer-get-dependency-map |
|---|---|
| 対応Public API | BoneFlowRenderer.getDependencyMap |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-get-dependency-map" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの状態をシリアライズして返します。
| HTML Class | bone-flow-editor-renderer-serialize-svg |
|---|---|
| 対応Public API | BoneFlowRenderer.serializeSvg |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | theme | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-renderer-serialize-svg" data-bone-event="manual" data-bone-args='[null,{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.init の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-init |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.init |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | ctx | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-init" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.whenReady の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-when-ready |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.whenReady |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-when-ready" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.diagnosticGeometrySnapshot の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-diagnostic-geometry-snapshot |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.diagnosticGeometrySnapshot |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKeys | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-diagnostic-geometry-snapshot" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-flow-editor-shape-adapter-create |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.create |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | node | Element / Instance | data-bone-arg-0または data-bone-args[0] | "$self" |
| 1 | ctx | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-create" data-bone-event="manual" data-bone-args='["$self",null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
既存のFlow Editor要素または状態を更新します。
| HTML Class | bone-flow-editor-shape-adapter-update |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.update |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | node | Element / Instance | data-bone-arg-0または data-bone-args[0] | "$self" |
| 1 | ctx | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-update" data-bone-event="manual" data-bone-args='["$self",null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorから指定対象を削除します。
| HTML Class | bone-flow-editor-shape-adapter-remove |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.remove |
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-remove" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Value」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.get |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Bounds」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-bounds |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getBounds |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-bounds" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Avoidance Bounds」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-avoidance-bounds |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getAvoidanceBounds |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-avoidance-bounds" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Ports」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-ports |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getPorts |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-ports" data-bone-event="manual" data-bone-args='["sample-id"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.findPortAtClientPoint の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-find-port-at-client-point |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.findPortAtClientPoint |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | clientX | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | clientY | Number | data-bone-arg-1または data-bone-args[1] | null |
| 2 | role | String / API許容値 | data-bone-arg-2または data-bone-args[2] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-find-port-at-client-point" data-bone-event="manual" data-bone-args='[null,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Drop Target」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-drop-target |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setDropTarget |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | candidate | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-drop-target" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Reconnect Candidates」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-reconnect-candidates |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setReconnectCandidates |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | role | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
| 1 | active | Boolean | data-bone-arg-1または data-bone-args[1] | true |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-reconnect-candidates" data-bone-event="manual" data-bone-args='[null,true]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Reconnect Candidate Positions」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-reconnect-candidate-positions |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getReconnectCandidatePositions |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | role | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-reconnect-candidate-positions" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.resolveEndpoint の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-resolve-endpoint |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.resolveEndpoint |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | endpoint | Number | data-bone-arg-0または data-bone-args[0] | 0 |
| 1 | side | String / API許容値 | data-bone-arg-1または data-bone-args[1] | null |
| 2 | joint | API定義値 | data-bone-arg-2または data-bone-args[2] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-resolve-endpoint" data-bone-event="manual" data-bone-args='[0,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Selected」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-selected |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setSelected |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
| 1 | selected | Boolean | data-bone-arg-1または data-bone-args[1] | true |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-selected" data-bone-event="manual" data-bone-args='["sample-id",true]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Port Visible」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-port-visible |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setPortVisible |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
| 1 | visible | Boolean | data-bone-arg-1または data-bone-args[1] | true |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-port-visible" data-bone-event="manual" data-bone-args='["sample-id",true]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Position」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-position |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setPosition |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | id | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample-id" |
| 1 | p | API定義値 | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-position" data-bone-event="manual" data-bone-args='["sample-id",null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-flow-editor-shape-adapter-create-diagnostic-copy |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.createDiagnosticCopy |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | node | Element / Instance | data-bone-arg-1または data-bone-args[1] | null |
| 2 | ctx | Number | data-bone-arg-2または data-bone-args[2] | null |
| 3 | caseIndex | Number | data-bone-arg-3または data-bone-args[3] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-create-diagnostic-copy" data-bone-event="manual" data-bone-args='[null,null,null,0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorから指定対象を削除します。
| HTML Class | bone-flow-editor-shape-adapter-remove-diagnostic-copy |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.removeDiagnosticCopy |
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-remove-diagnostic-copy" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Position」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-diagnostic-position |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setDiagnosticPosition |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | p | API定義値 | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-diagnostic-position" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-diagnostic |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getDiagnostic |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-diagnostic" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Bounds」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-diagnostic-bounds |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getDiagnosticBounds |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-diagnostic-bounds" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Avoidance Bounds」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-diagnostic-avoidance-bounds |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getDiagnosticAvoidanceBounds |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-diagnostic-avoidance-bounds" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Ports」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-diagnostic-ports |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getDiagnosticPorts |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-diagnostic-ports" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowShapeAdapter.resolveDiagnosticEndpoint の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-shape-adapter-resolve-diagnostic-endpoint |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.resolveDiagnosticEndpoint |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | endpoint | Number | data-bone-arg-1または data-bone-args[1] | 0 |
| 2 | side | String / API許容値 | data-bone-arg-2または data-bone-args[2] | null |
| 3 | joint | API定義値 | data-bone-arg-3または data-bone-args[3] | null |
| 4 | peerViewKey | Number | data-bone-arg-4または data-bone-args[4] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-resolve-diagnostic-endpoint" data-bone-event="manual" data-bone-args='[null,0,null,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Port Compatibility」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-port-compatibility |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setPortCompatibility |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | nodeId | Element / Instance | data-bone-arg-0または data-bone-args[0] | null |
| 1 | fieldKey | Number | data-bone-arg-1または data-bone-args[1] | null |
| 2 | role | String / API許容値 | data-bone-arg-2または data-bone-args[2] | null |
| 3 | severity | Number | data-bone-arg-3または data-bone-args[3] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-port-compatibility" data-bone-event="manual" data-bone-args='[null,null,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Port Compatibility」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-diagnostic-port-compatibility |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setDiagnosticPortCompatibility |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | fieldKey | Number | data-bone-arg-1または data-bone-args[1] | null |
| 2 | role | String / API許容値 | data-bone-arg-2または data-bone-args[2] | null |
| 3 | severity | Number | data-bone-arg-3または data-bone-args[3] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-diagnostic-port-compatibility" data-bone-event="manual" data-bone-args='[null,null,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Diagnostic Port Visible」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-diagnostic-port-visible |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setDiagnosticPortVisible |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | viewKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | visible | Boolean | data-bone-arg-1または data-bone-args[1] | true |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-diagnostic-port-visible" data-bone-event="manual" data-bone-args='[null,true]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの新しい要素またはRuntimeオブジェクトを生成します。
| HTML Class | bone-flow-editor-shape-adapter-create-case-label |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.createCaseLabel |
| 使用する場面 | HTML上のホスト要素からUI生成・描画を開始したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | text | String / API許容値 | data-bone-arg-1または data-bone-args[1] | "sample" |
| 2 | p | API定義値 | data-bone-arg-2または data-bone-args[2] | null |
| 3 | width | Number | data-bone-arg-3または data-bone-args[3] | null |
| 4 | caseIndex | Number | data-bone-arg-4または data-bone-args[4] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-create-case-label" data-bone-event="manual" data-bone-args='[null,"sample",null,null,0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorから指定対象を削除します。
| HTML Class | bone-flow-editor-shape-adapter-remove-case-label |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.removeCaseLabel |
| 使用する場面 | HTML操作を契機に対象の破棄・削除・切断・終了を行いたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-remove-case-label" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Case Label」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-case-label |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getCaseLabel |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-case-label" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Case Label Bounds」を取得します。
| HTML Class | bone-flow-editor-shape-adapter-get-case-label-bounds |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.getCaseLabelBounds |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-get-case-label-bounds" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの「Viewport」を設定します。
| HTML Class | bone-flow-editor-shape-adapter-set-viewport |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.setViewport |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-set-viewport" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの指定状態・内容をクリアします。
| HTML Class | bone-flow-editor-shape-adapter-clear |
|---|---|
| 対応Public API | BoneFlowShapeAdapter.clear |
| 使用する場面 | HTMLのイベントを契機に、既存UIやRuntime状態を変更したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-shape-adapter-clear" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力・状態を検証し、Validation結果を返します。
| HTML Class | bone-flow-editor-validation-validate |
|---|---|
| 対応Public API | BoneFlowValidation.validate |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | working | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-validate" data-bone-event="manual" data-bone-args='[null,{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowValidation.semanticErrors の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-validation-semantic-errors |
|---|---|
| 対応Public API | BoneFlowValidation.semanticErrors |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | working | Object | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-semantic-errors" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力・状態を検証し、Validation結果を返します。
| HTML Class | bone-flow-editor-validation-validate-canonical-schema |
|---|---|
| 対応Public API | BoneFlowValidation.validateCanonicalSchema |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | d | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-validate-canonical-schema" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力・状態を検証し、Validation結果を返します。
| HTML Class | bone-flow-editor-validation-validate-canonical-semantics |
|---|---|
| 対応Public API | BoneFlowValidation.validateCanonicalSemantics |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | definition | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | options | Object | data-bone-arg-1または data-bone-args[1] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-validate-canonical-semantics" data-bone-event="manual" data-bone-args='[null,{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowValidation.registryTypes の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-validation-registry-types |
|---|---|
| 対応Public API | BoneFlowValidation.registryTypes |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | options | Object | data-bone-arg-0または data-bone-args[0] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-registry-types" data-bone-event="manual" data-bone-args='[{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowValidation.fieldCompatibility の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-validation-field-compatibility |
|---|---|
| 対応Public API | BoneFlowValidation.fieldCompatibility |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | sourceType | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
| 1 | targetType | Element / Instance | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-validation-field-compatibility" data-bone-event="manual" data-bone-args='["html-class",null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.defaults の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-defaults |
|---|---|
| 対応Public API | BoneFlowWorkspace.defaults |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | flowId | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
| 1 | flowKey | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-defaults" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
入力ソースをFlow Editorの正式契約に沿う形へ正規化します。
| HTML Class | bone-flow-editor-workspace-normalize-source |
|---|---|
| 対応Public API | BoneFlowWorkspace.normalizeSource |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | s | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-normalize-source" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.sha256Bytes の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-sha256-bytes |
|---|---|
| 対応Public API | BoneFlowWorkspace.sha256Bytes |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | bytes | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-sha256-bytes" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.sha256Text の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-sha256-text |
|---|---|
| 対応Public API | BoneFlowWorkspace.sha256Text |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | text | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "sample" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-sha256-text" data-bone-event="manual" data-bone-args='["sample"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.sourceHash の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-source-hash |
|---|---|
| 対応Public API | BoneFlowWorkspace.sourceHash |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | source | String / API許容値 | data-bone-arg-0または data-bone-args[0] | "html-class" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-source-hash" data-bone-event="manual" data-bone-args='["html-class"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.recoveryChecksum の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-recovery-checksum |
|---|---|
| 対応Public API | BoneFlowWorkspace.recoveryChecksum |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | record | Object | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-recovery-checksum" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.collisionKey の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-collision-key |
|---|---|
| 対応Public API | BoneFlowWorkspace.collisionKey |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | oldFlowKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | candidate | String / API許容値 | data-bone-arg-1または data-bone-args[1] | null |
| 2 | currentSourceHash | String / API許容値 | data-bone-arg-2または data-bone-args[2] | "html-class" |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-collision-key" data-bone-event="manual" data-bone-args='[null,null,"html-class"]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.candidateKey の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-candidate-key |
|---|---|
| 対応Public API | BoneFlowWorkspace.candidateKey |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | flowId | String / API許容値 | data-bone-arg-0または data-bone-args[0] | null |
| 1 | fileName | String / API許容値 | data-bone-arg-1または data-bone-args[1] | null |
| 2 | sessionUUID | String / API許容値 | data-bone-arg-2または data-bone-args[2] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-candidate-key" data-bone-event="manual" data-bone-args='[null,null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象UI・データを開きます。
| HTML Class | bone-flow-editor-workspace-open-db |
|---|---|
| 対応Public API | BoneFlowWorkspace.openDb |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-open-db" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.atomicRekey の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-atomic-rekey |
|---|---|
| 対応Public API | BoneFlowWorkspace.atomicRekey |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | oldKey | Number | data-bone-arg-0または data-bone-args[0] | null |
| 1 | candidate | String / API許容値 | data-bone-arg-1または data-bone-args[1] | null |
| 2 | currentSourceHash | String / API許容値 | data-bone-arg-2または data-bone-args[2] | "html-class" |
| 3 | recovery | Number | data-bone-arg-3または data-bone-args[3] | null |
| 4 | workspace | Object | data-bone-arg-4または data-bone-args[4] | null |
| 5 | options | Object | data-bone-arg-5または data-bone-args[5] | {} |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-atomic-rekey" data-bone-event="manual" data-bone-args='[null,null,"html-class",null,null,{}]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象データを保存します。
| HTML Class | bone-flow-editor-workspace-save-recovery |
|---|---|
| 対応Public API | BoneFlowWorkspace.saveRecovery |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | record | Object | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-save-recovery" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象データを読み込みます。
| HTML Class | bone-flow-editor-workspace-load-recovery |
|---|---|
| 対応Public API | BoneFlowWorkspace.loadRecovery |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-load-recovery" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象データを保存します。
| HTML Class | bone-flow-editor-workspace-save-workspace |
|---|---|
| 対応Public API | BoneFlowWorkspace.saveWorkspace |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | w | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-save-workspace" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの対象データを読み込みます。
| HTML Class | bone-flow-editor-workspace-load-workspace |
|---|---|
| 対応Public API | BoneFlowWorkspace.loadWorkspace |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | key | Number | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-load-workspace" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.deleteRecovery の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-delete-recovery |
|---|---|
| 対応Public API | BoneFlowWorkspace.deleteRecovery |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | 'flowRecovery' | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
| 1 | key | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-delete-recovery" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.deleteWorkspace の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-delete-workspace |
|---|---|
| 対応Public API | BoneFlowWorkspace.deleteWorkspace |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | 'workspace' | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | key | Number | data-bone-arg-1または data-bone-args[1] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-delete-workspace" data-bone-event="manual" data-bone-args='[null,null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorが保持する対象一覧を取得します。
| HTML Class | bone-flow-editor-workspace-list-recovery |
|---|---|
| 対応Public API | BoneFlowWorkspace.listRecovery |
| 使用する場面 | JavaScriptを直接記述せず、HTML要素から現在値・状態・一覧を取得したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-list-recovery" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.purgeRecoveries の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-purge-recoveries |
|---|---|
| 対応Public API | BoneFlowWorkspace.purgeRecoveries |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | maxRecords | Object | data-bone-arg-0または data-bone-args[0] | null |
| 1 | maxAgeDays | Number | data-bone-arg-1または data-bone-args[1] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-purge-recoveries" data-bone-event="manual" data-bone-args='[null,0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
Flow Editorの入力・状態を検証し、Validation結果を返します。
| HTML Class | bone-flow-editor-workspace-validate-workspace |
|---|---|
| 対応Public API | BoneFlowWorkspace.validateWorkspace |
| 使用する場面 | HTMLイベントから検証・解析を実行し、その結果をResultとして受け取りたいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | w | API定義値 | data-bone-arg-0または data-bone-args[0] | null |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-validate-workspace" data-bone-event="manual" data-bone-args='[null]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.debounce の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-debounce |
|---|---|
| 対応Public API | BoneFlowWorkspace.debounce |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 0 | fn | Function | data-bone-arg-0または data-bone-args[0] | "$handler:handlerName" |
| 1 | ms | Number | data-bone-arg-1または data-bone-args[1] | 0 |
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-debounce" data-bone-event="manual" data-bone-args='["$handler:handlerName",0]'></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。
BoneFlowWorkspace.uuid の公開機能をHTML Classから呼び出します。
| HTML Class | bone-flow-editor-workspace-uuid |
|---|---|
| 対応Public API | BoneFlowWorkspace.uuid |
| 使用する場面 | HTMLの class と data-bone-* 属性だけで対応Public APIを呼び出したいとき。 |
| 起動方法 | data-bone-event で load / click / input / change / manual 等を指定します。 |
| # | 引数名 | 値の種類 | HTMLでの渡し方 | 例 |
|---|---|---|---|---|
| 引数なし。Classの起動だけでAPIを呼び出します。 | ||||
引数はAPIの並び順そのままです。個別指定は data-bone-arg-N、一括指定はJSON配列の data-bone-args を使用します。
<div class="bone-html-class-use bone-flow-editor-workspace-uuid" data-bone-event="manual"></div>下のDemo HostへこのClassを一時設定し、Class Bridgeの invoke() で実Public APIを呼びます。必要な引数は上のJSONを編集できます。
このClassはまだ実行していません。