Bone Flow #002 - Bone Joint

Package Version 1.0.28/Runtime Version 1.1.40/ Status: Development Candidate
累積回帰テスト
Dependencies: #001 Bone Core / Runtime 1.0.0
HTML Functional Class: bf-joint / Adapter Package 1.0.28 / Runtime API: BoneJointHTMLClass → BoneJoint 1.1.40

Joint表示設定

起点
起点サイズ
接続経路
曲線方向
未接続終端
表示
線の既定設定
アニメーション
直角経路
交差表現
Jointラベル

Direction Marker / IN・OUT HTML Class

Direction MarkerのTarget到達位置と輪郭、Joint IN / OUTのHTML Functional Class反映を実Jointで確認します。青い十字の中心がTarget endpointです。

Direction Marker

Target endpoint確認中Target endpointと比較中
Outline確認中stroke属性を確認中
Joint Color / Animation確認中Joint線とのpaint同期を確認中

③ Joint IN / OUT HTML Class

INbf-joint-in
Source
IN
反映Role確認中
OUTbf-joint-out
OUT
Target
反映Role確認中

接続経路 実接続テスト

BoneJoint.drawLine() 本体で実Shape / 実Port間を接続します。Curve Left / Rightは同じ場所のTargetを使い回さず、指定側に実在する別Targetへ接続します。方向アニメーションON時はGradient Flowも実際に動作します。

主テスト：1つのSource Portから、LEFTは左側（横方向では上側）のTarget、RIGHTは右側（横方向では下側）のTargetへ接続。Port中心・経路方向・Shape回避・Animationを同時確認。

Curve Left / Right 4方向 実接続

Curve 直交Port 8方向 実接続

Curve 直交Port 8方向 近接配置回帰

Shape間隔を8pxまで近づけ、Port座標がほぼ一直線になる条件で確認します。大回り・折返し・S字・Shape内部通過は禁止です。
追加条件：狭い間隔 / 広い間隔 / Sourceずれ / Shape Avoidance ON。各SceneでSourceは1つ、LEFT/RIGHTは別Targetへ接続します。

IN / OUT / RETURN + Shape Avoidance 接続イメージ

通常TBは TOP=IN / BOTTOM=OUT / LEFT・RIGHT=RETURN（物理Role）。画面上はRETURN文字を表示しません。 RETURN→RETURN の再戻しでは、送り出しに使うRETURN位置が現在のOUTへ切り替わり、元のOUT位置はRETURN扱いへ戻ります。3状態に加え、旧OUTがRETURN扱いへ変わり、別のRETURN位置へOUTが移動する状態も独立表示して実Jointで確認します。

Joint線交差 専用プレビュー

線は入力順に描画し、後から描画した線だけが交差位置をジャンプします。吹き出し本体は自由移動、丸い起点アンカーは対象線上だけを移動できます。

1本目：下を通る2本目：後描画・ジャンプ3本目：後描画・ジャンプ

OUT WAIT / Target Busy 3秒 目視テスト

接続は切れていません。Targetが処理中の3秒間はTarget端点をFont Awesome spinner（f110）の回転表示にし、受信可能になったら待機データをFIFOで配送して通常の○へ戻します。×→○の再接続とは別状態です。

READY ○未実行
OUTcommit data
TargetREADY

確認手順: ボタン押下 → すぐTarget側がスピナーで3秒待機 → 3秒後に自動配送 → スピナーが○へ戻る。線は途中で切断表示にならない。

OUT BLOCKED / 危険データ配送停止 目視テスト

JointとTargetは接続済みのままです。危険データを送ると配送Guardが停止し、Target端点の最前面へFont Awesome ban（f05e） を #018 Bone Icon準拠の beat-fade で表示します。データはTargetへ届きません。×の未接続やspinnerのWAITINGとは別状態です。

READY ○未実行
OUTuntrusted data
TargetREADY

確認手順: 「危険データ送信」→ 接続線を残したままTarget側の最前面に赤い禁止アイコンがbeat-fade → Target受信件数は0のまま。「BLOCK解除」で通常の○へ戻る。

正常系・異常系 同一画面比較

PREVIEW READY

HTML Functional Class / 接続イメージ

class="bf-joint" は別Jointを実装せず、HTML属性を BoneJoint 1.1.40 の evaluate / drawLine / drawError / drawCompatibilityMarker へ渡す薄い入口です。Marker・spinner・ban・Compatibility表示は正式Runtimeが描画します。

直線 / straight

Source
Target

曲線 / curve

Source
Target

直角 / orthogonal

Source
Target

WAIT / 正式spinner

OUT
Target

BLOCKED / 正式ban

OUT
Target

Target Field 不存在 / 正式Error Marker

Source.value
Target.caption

Compatibility Warning / INT → STRING

INT
STRING

Compatibility Error / STRING → INT

STRING
INT

IN HTML Class

Source
IN

OUT HTML Class

OUT
Target
<div class="bf-joint bf-flow"
  data-route="orthogonal"
  data-state="blocked">
  <div class="bf-node bf-node--source bf-joint-source">OUT</div>
  <div class="bf-node bf-node--target bf-joint-target">Target</div>
</div>

bf-joint-in / bf-joint-out は bf-joint の意味役割modifierです。Hostの data-bf-joint-role と実Joint pathの data-joint-role に in / out を反映します。正式評価が必要な例は data-source / data-target / data-bones に、BoneJoint.evaluate() と同じ Source・Target・Bone辞書をJSONで渡します。DOM位置指定は data-source-id / data-target-id または .bf-joint-source / .bf-joint-target を使用します。

Smoke Test / Validation Report

NOT RUN

実行日時-
検査件数0件
PASS0件
FAIL0件
実行時間0.0ms
Runtime Version1.1.40
Package Version1.0.28

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

コンポーネント完了管理

Smoke TestとValidation ReportがALL PASSで、3秒WAITとBLOCKEDの両方を目視確認した後に完了できます。

Component#002 Bone Joint
Runtime Version1.1.40
Package Version1.0.28
Completion Flagfalse
StatusDevelopment
ValidationNOT RUN
WAIT目視未確認
BLOCK目視未確認
完了日時-
全テストALL PASS + WAIT/BLOCK目視確認後に完了できます。