Bone Flow #020 - Label

Package 1.0.62 / Runtime BoneLabel 1.0.60 / Status: Development

使用コンポーネント

#117 Animation要素Motion
Version 確認中Status 確認中API 確認中

#020 Bone LabelはLABEL Boneを受け取り、自身でラベルを描画します。親要素主モードでは、合算プレビュー領域そのものを親要素としてIN/OUT関係性を確認します。接続線・端点・不存在・型不一致の描画は#002 Bone Jointへ委譲します。マウスオーバー時の枠Effectは#022 Hover Border EffectのPublic APIへ委譲します。要素本体のAnimation/Motionは#117 Animation v1.0.9へRelationで委譲し、#020内に独自keyframe・timer・loopを持ちません。色Propertyの選択UIは#040 ColorPickerへ委譲します。

テスト対象:Bone Coreで生成したLABEL Bone(id / type / value)、ラベル単体、抽象的な親要素を使う構成、IN/OUT関係、関連付け、配置、文字設定、合算プレビュー、Bone Joint接続イメージ、公開APIを確認します。

登録済みUI

プロパティ設定

Property定義の正本は BoneLabel.getPropertySchema() です。UIはRuntime Schemaに存在する既存Propertyだけを操作します。

基本設定
親要素設定(継承確認用)

チェックON時のテスト用親要素です。実運用では Class API の attach(parentElement) に実DOM要素を渡します。親要素設定はOUT・保存データには含めません。

表示位置(9方向 / FIT)
均等割り付け

表示主体がラベル単体ならラベル幅、親要素が主なら合算プレビュー全体の幅へ自動で均等割り付けします。

装飾
マウスオーバー時の枠Effect(#022)

Label単体ではLabel、親要素に吸着時は親要素そのものへ #022 BoneHoverBorderEffect.attach() を使用します。

エフェクト(#117 Animation)
Animation適用先表示主体全体は targetPart=whole、ラベル文字のみは targetPart=text として #117へ渡します。

#020はAnimation実装を持たず、BoneAnimation.create → attach → play/restart → stop/destroy を使用します。#022は枠Effect、#117は要素Motionです。

確定済み

合算プレビュー

#020 Bone Labelの全Propertyと関連コンポーネント例を合算して表示します。合算プレビュー領域そのものを親要素として使用し、親要素用の追加要素やラッパーは生成しません。

OUT値

#020 Label OUT

#020 Label IN

#020 Label OUT(確認用)

Classリスト / Public API

親Componentから内部DOMを直接操作せず、instance経由で#020 Labelを参照するための正式Class APIです。

Class / Public API・使用方法・操作説明を1つのガイドで確認できます。

接続イメージ

LabelをIN/OUTのEndpointとして利用した場合の正式な状態別イメージです。線・端点・不存在・型不一致はBone Jointの責務です。

表示色(凡例)
青色:IN 接続線
緑色:OUT 接続線
オレンジ:型不一致
赤色:接続エラー/不存在終端

Smoke Test / Validation Report

NOT RUN

実行日時-
検査件数0件
PASS0件
FAIL0件
実行時間0.0ms
Package1.0.62
RuntimeBoneLabel 1.0.60

Smoke Test 結果NOT RUN

Smoke Testは未実行です。

Validation 結果NOT RUN

Validationは未実行です。

コンポーネント完了管理

Smoke TestとValidation ReportがALL PASSになった後に完了できます。

Component#020 Bone Label
Package1.0.62
RuntimeBoneLabel 1.0.60
Completion Flagfalse
StatusDevelopment
ValidationDevelopment
完了日時-
全テストALL PASS後に完了できます。
HTML Functional Classbf-label