# Bone Flow #020 - Label **Version** : 1.0.61 **Status** : Development **Standard** : Bone Flow Development Standard v1.0 ## 役割 `LABEL` Boneを受け取り、ラベルを独立して描画するPrimitive UIです。#017 Bone Textには依存しません。 ## 依存 - #001 Bone Core：LABEL Boneの生成・正規化 - #002 Bone Joint：テスト画面におけるIN/OUT接続状態と線の可視化 ## 表示主体 設定の先頭で次の2種類を選択します。 - `ラベル単体`：Labelだけを生成してINとOUTを確認します。 - `親要素が主`：テストHTML内に親要素を再現し、親要素へのIN、Label保持、親要素からのOUTという関係を確認します。 親要素はテスト専用です。Label本体のOUT、保存値、Registryには含めません。Group機能ではありません。 ## Label IN ```text componentId : 020 componentName : Label type : LABEL value : Label Property ``` ## Label OUT ```text componentId : 020 componentName : Label version : 1.0.49 type : LABEL value : 表示文字列 property : 正規化済みLabel Property ``` ## 公開API - `defaults()` - `normalizeValue(value)` - `validateValue(value)` - `buildInput(value)` - `buildOutput(value)` - `create(bone)` - `attachToParent(parentElement, bone)` - `distributeLabels(parentElement, bones, options)` - `getInput(element)` - `getOutput(element)` - `isInstance(element)` - `getCompletionState()` - `complete(validation)` - `reopen()` ## v1.0.39変更 - #017 Bone Text依存を完全削除。 - Text子UI、UI Registry、Child Input/OUTを削除。 - Label自身による文字描画へ変更。 - 設定の最上部へ「ラベル単体／親要素が主」を追加。 - 親要素をテスト内だけで再現し、IN/OUT関係性を確認可能にした。 - Group Registry、グループ保存、グループ吸着は持たない。 ## v1.0.39 更新 - サンプル選択UIおよびサンプルJSONを削除。 - 基本設定をアコーディオン化。 - 親要素主モードでは親要素そのものへダミーEffectを適用。 - `BoneLabel.setEffectAdapter()` / `getEffectAdapter()`を追加し、#116 Effect完成後に差し替え可能とした。 ## v1.0.39 更新 - Effectの「きっかけ」はイベント発火元として扱う。 - エフェクトの適用先は常にLabelとする。 - `self` はLabel操作でLabelへ適用する。 - `parent` は親要素操作をきっかけとしてLabelへ適用する。 - 将来の#116 Effectは `apply / activate / deactivate` アダプター契約で差し替える。 - Joint接続イメージの診断値を高コントラスト表示へ修正した。 - Source/Target Field、Compatibility、Joint State、Raw Stateをすべて表示する。 - 接続ノードからText由来の表示を削除した。 ## v1.0.39 更新 - 表示用とEffect用に見えていた親要素を統合し、テスト内では単一の親要素だけを生成します。 - Effectの発火元は表示主体から自動決定します。ラベル単体ではLabel、親要素主では同じテスト親要素です。 - Effect設定から重複していた「きっかけ」選択を削除しました。 - Labelサイズに `Fit（内容に合わせる）` と `固定サイズ` を追加しました。 - Fit時は幅を `fit-content`、高さを自動にします。 ## Version 1.0.39 修正 - 合算プレビューの「テスト用親要素（主）」表示を削除。 - 親要素主モードでは、抽象的な親要素を1つだけ生成してLabelを配置する。 - 表示・IN/OUT・Effect発火元は同じ実対象要素を参照する。 ## Version 1.0.39 修正 - テスト用のinputと「入力対象」表示を完全削除。 - 親要素は種類を固定しない抽象DOM要素1つとして再現。 - 親要素主では親要素のmouseenter / mouseleave / focusin / focusoutを発火条件とし、Effect適用先は「親要素全体」または「Label文字のみ」から選択する。 - 親要素にはEffectクラスを付与しないこと、LabelのEffectが開始・解除されることをSmoke Testで確認する。 ## v1.0.39 修正 - Label固有ではない必須表示Propertyを削除。 - 表示主体のみでIN/OUTおよびDummy Effect Adapterの適用対象を切替。 - 親要素主ではLabelを親要素の実子として配置。 - 親要素9方向吸着、Fit/固定サイズ、Label幅／親要素幅均等割り付けを維持。 - #116完成後はEffect Adapterを差し替える。 - 既存のBone Joint接続イメージ生成処理は変更しない。 ## v1.0.39 変更 - 最小幅(px)を削除し、均等割り付け幅はラベル幅(px)を使用する。 - 文字揃えを削除する。 - 配置と親要素内の表示位置を1つの「表示位置」へ統合する。 - 表示主体に応じて、ラベル5位置／親要素9位置へ選択肢を切り替える。 - 親要素主でも新しい親要素・ラッパーを生成せず、渡された既存要素をそのまま表示主体として使用する。 ## v1.0.39 - 均等割り付けの方式選択を削除し、有効／無効だけに整理。対象幅は表示主体から自動決定する。 - 表示位置を左右上下中央の9方向へ統一し、選択内容と実際の配置を一致させる。 - 合算プレビュー領域そのものを親要素として使用し、親要素用の追加要素・ラッパーを生成しない。 ## v1.0.39 変更 - 合算プレビュー領域そのものに要素枠と3×3位置基準を表示。 - 表示位置の日本語名称と実配置を一致。 - Effect適用先として「表示主体全体」「ラベル文字のみ」を追加。 - 親要素が主の場合、合算プレビュー領域全体またはLabel文字だけにDummy Effectを適用。 ## v1.0.39 修正 - ラベル単体のFitは、ラベル幅(px)・ラベル高さ(px)を外形として維持し、その幅へ文字を収める。 - 親要素が主のFitは、合算プレビュー領域幅を基準にLabelを配置する。 - 表示位置は合算プレビュー枠に対するCSSアンカーで決定し、文字幅から座標計算しない。 - 親要素が主でEffect適用先が表示主体全体の場合、Effect対象は合算プレビュー領域そのものとする。 - 親要素用の追加DOM・ラッパーは生成しない。 ## Version 1.0.46 - Effectテスト再生は合算プレビュー（OUT受信要素）を入口として実行する。 - 「ラベル文字のみ」はOUT受信状態からLabel文字要素を解決して適用する。 - Dummy Effectは動作確認可能な Fade / Slide / Zoom / Bounce / Pulse / Shake / Glow に限定する。 - Blink / Float / Rotateは#116 Effect完成まで選択肢から除外する。 - reduced motionは初期OFFとし、ON時だけ動きを停止する。 ## v1.0.46 Effect修正 Label本体の配置用transformを保持したまま、Dummy Effect AdapterがEffect用transformを合成します。Dummy Adapter利用時は旧CSS animationを停止し、Web Animations APIのみを使用します。 ## Version 1.0.48 - 既存の7つの色選択Property（文字色、背景色、Gradient開始/終了、枠色、影色、発光色）の選択UIを #040 ColorPickerへ委譲。 - #020側のProperty名・LABEL value・OUT・Validation・既定値は変更しない。 - 7 Propertyはいずれも既存HEX単色契約を維持し、#040 v1.0.8を `allowedKinds: ["solid"]` で利用する。 - Gradient自体を#040のgradient値へ置換せず、既存 `gradientStart` / `gradientEnd` の各Color Stop選択だけを共通化する。 ## v1.0.48更新 - #020で既存設定されていた7色を#040 ColorPickerの初期値としてそのまま復元する同期を明示。 - #040 ColorPickerを2列Property内で崩さないConsumer用コンパクト表示へ調整。 - 色スウォッチクリックでも#040のパレットを開くようConsumer連携を修正。 ## Version 1.0.49 - #040 ColorPicker ConsumerのNative color Picker二重起動を停止。 - 旧 `input[type=color]` は値保持専用として hidden / tabIndex=-1 を維持し、親labelの既定起動経路を停止。 - #040内部Native swatchは表示専用としてPointer操作を停止し、#040パレットだけを使用する。 - 既存7色、Property名、LABEL value、OUT、Validation、Completionは変更しない。 ## v1.0.50 ColorPicker consumer修正 - #040 ColorPickerの「カスタム追加」を阻害していたConsumer host全体の `preventDefault()` を廃止。 - 旧7色 `input[type=color]` は値保持用 `text` inputへ切替え、Native Picker経路だけを停止。 - #040 main swatchは#040 panelへrouteし、既存7色とProperty契約を維持。 ## v1.0.52 #040 ColorPicker v1.0.15 Caller対応 - v1.0.50の #040 v1.0.8 埋め込みConsumer方式を廃止。 - 既存7色Propertyは #020所有の色選択□を表示し、クリック時に `BoneColorPicker.attachCaller()` を使用する。 - #040 Overlay / Tooltip は `document.body` 直下に #040自身が生成する。 - #020から `.bone-colorpicker` 内部DOMを操作しない。 - 7色Propertyは既存契約どおり **Solidのみ**。Transparent / Gradientを単一色Propertyへ追加しない。 - `read()`、Bone.value、OUT、Validation、既定色、Label描画契約は変更しない。 - `setCallerValue()` / controller `setValue()` による同期ではRETURNを偽造しない。ユーザー選択RETURN時だけ既存Propertyへ反映する。 - #040依存Versionは **1.0.15**。 ## v1.0.52 Class / Parent Reference Standard #020 Label は親Componentへの吸着後も、親がLabel内部DOMを直接参照せずに操作できる正式Public API / Class APIを提供する。 - Class: `BoneLabel.Component` - Factory: `BoneLabel.createInstance()` / `BoneLabel.attachInstance()` - Existing element/parent → instance: `BoneLabel.getInstance()` - State: `BoneLabel.getState()` / instance `getState()` - Lifecycle: `attach()` / `detach()` / `destroy()` - Value: `getValue()` / `setValue()` / `update()` - Data: `getInput()` / `getOutput()` - Effect: `playEffect()` - Existing function API (`create`, `attachToParent`, etc.) remains backward compatible. - Parent Component must retain or obtain the Component instance through the Public API instead of querying `.bone-label` internals. Detailed class list: `020-Label-Class-API.md` Developer usage: `020-Label-Usage.md` Operation manual source: `020-Label-Operation-Guide.md` ## v1.0.55 表示ガイド - Class / Public API、使用方法、操作説明は `bone-label.html` の専用ガイド画面から確認する。 - 直接Markdownを開くリンクはテストUIから廃止し、Bone Flow コード入力ガイドと同系統のモーダル表示を採用する。 - Markdownファイルは正本資料として保持する。 ## v1.0.55 ガイド表示統合 - テスト画面のガイド入口を **「ガイドを開く」1個** に統合。 - ガイド内の3項目（Class / Public API・使用方法・操作説明）は維持。 - テスト画面に独立表示していた「操作説明」セクションは削除。 - Classリスト / Public APIの画面表示は維持。 ## v1.0.56 親要素吸着UI - 画面操作を他Componentと同じ「親要素に吸着」チェックボックス方式へ統一。 - チェックOFFはLabel単体、チェックONは親要素へ吸着。 - 「親要素設定」では標準 / 横長 / 小型のPreview用親要素を選択。 - 実運用の親参照は既存Class API `attach(parentElement)` / `attachInstance(parentElement, input)` を維持。 ## v1.0.58 親要素内の横はみ出し修正 - 親要素へ吸着し「均等割り付け」を有効にした場合、9方向配置の12px余白を含めてもLabelが親要素外へ出ないよう、合算プレビュー上の親要素幅Labelを `calc(100% - 24px)` に制限します。 - Class API / #040 ColorPicker / Property / Completion仕様は変更しません。 ## v1.0.58 #022 / 親要素設定 - #022 Hover Border Effect v1.0.5 を実依存として使用します。 - `hoverBorderEffect` Property は `enabled / effect / color / direction / speed / spinWidth / spinGlow` を保持します。 - Label単体ではLabelへ、親要素に吸着時は親要素へ `BoneHoverBorderEffect.attach()` で接続します。 - detach / destroy 時は #022 `detach()` を実行します。 - テスト画面の独自プリセット「標準 / 横長 / 小型親要素」は廃止しました。 - 「親要素設定（継承確認用）」で親の幅・高さ・背景色・文字色・角丸を設定します。これはテスト専用でOUT / 保存データには含めません。 ## v1.0.60 #117 Animation正式参照 - #020の要素本体エフェクト / Motionは、完成済み **#117 Animation v1.0.9** を正式参照する。 - #022 Hover Border Effectは枠Effect専用のまま維持する。 - #020独自のDummy Effect Adapter、独自keyframe、独自Web Animations keyframe生成、独自timer、独自loop schedulerは廃止する。 - #117 Relationは `animationUiNo + targetUiNo + targetPart`。 - `targetPart=whole` は表示主体全体、`targetPart=text` はLabel文字のみ。 - #117正式Animation: Move / Bounce / Pulse / Spin / Blink / Slide / Zoom。 - 再利用可能Flow preset: Flow / Shimmer / Glow Sweep / Breathing Glow。 - #020 Propertyでは direction / axis / speed / distance / loop / loopWaitMs / respectReducedMotion を保持し、#117へ委譲する。 - 親吸着解除・Class `detach()` / `destroy()` 時は #117 `stop()` / `destroy()` も解除する。 - `BoneLabel.getAnimationState()` / `getAnimationOutput()` / `getAnimationDependency()` を公開する。 過去版に記載された #116 / Dummy Effect Adapter は履歴として残るが、v1.0.60以降の現行実装には使用しない。 ## v1.0.60 #117 Parent Runtime修正 - `attachToParent()` / `attachInstance()` 実行時のRuntime State / INPUT / OUTPUTを、実際の表示主体どおり `displayMode=parent` に固定。 - これにより #117 Animation の親要素主体ターゲット解決と、Class `detach()` / `destroy()` 時の #117 解除経路を一致させる。 - #022 / #040 / 親要素設定 / Class公開APIの仕様変更は行わない。