# Bone Flow #019 - Image Version: 1.0.62 Status: Development ## 概要 #019 ImageはIMAGE Boneを受け取り、Registryから取得した`value.listKey`により登録済み子UIへ処理を委譲する画像系親コンポーネントです。SVG・JPG・PNG等はそれぞれ対象画像を1つ保持し、ICONだけがFont Awesomeアイコン群から1つを選択します。 ## 親・子共通プロパティ編集 `BoneImage.createEditor(options)`は#019単独画面と、上位コンポーネントのプロパティ画面の両方で利用できます。`setValue`、`getValue`、`onChange`、`validate`、`serialize`、`deserialize`、`commit`、`save`、`load`を提供します。 埋め込み利用では、#019が保存場所を独占しません。編集操作は未確定値として保持され、#019自身の「変更を確定」ボタンまたは`commit()`で正式値へ反映します。上位コンポーネントへの保存処理は今回の確定動作には含めません。 ## 将来の子TYPE追加 SVGやJPG等の専用子コンポーネント完成後も、親側で保持しているIMAGE Propertyの形式は変わりません。TYPE Registryまたは接続設定を更新し、保存済みPropertyをそのまま子実装へ渡します。 ## ICON選択 ICONでは`iconCatalog`をEditorへ渡し、Font Awesome候補を一覧・検索・選択できます。選択結果は単一の`value.icon`として保存されます。SVG・JPG等は候補一覧ではなく単一Sourceを設定します。 ## Validation ICONはアイコン値必須、その他のTYPEはSource必須です。`validateValue`およびEditorの`validate()`で検証します。 ## v1.0.35 - Font Awesome一覧以外のIcon設定をBone Image共通Propertyへ統合。 - 親コンポーネント保存時も同一Property値を利用。 - #018正式基準に合わせて接続イメージの構成・カード配置・凡例を復元。 ## v1.0.35 List Key 一覧表示はTYPEではなく `listKey` で制御します。Registryの `018-icon-fontawesome` を選択すると、UIには `018 - Icon (Font Awesome)` と表示され、Font Awesome一覧と画像アイコン表示設定を表示します。 ## v1.0.35 画像アイコン表示設定（表示サイズ・色・回転・反転・アニメーション・プレビュー状態）をFont Awesome一覧へ即時反映するよう修正。 ## v1.0.35 右側の「画像アイコン表示設定」をアコーディオン化。初期状態は展開し、見出しクリックまたはキーボード操作で開閉できます。一覧・合算プレビュー・設定値一覧への即時反映処理は維持します。 ## 親子コンポーネント正式OUTパターン #019は自身のOUT、子Component Input、子Component OUTを生成する。上位ComponentはgetOutput()またはProperty EditorのgetOutput()で保存できる。 ## v1.0.35 表示・OUT設定 #018 Bone Iconと同じく、Icon / Name / Unicodeについて表示ON/OFFとOUT ON/OFFを個別設定できます。設定はProperty、合算プレビュー、設定値一覧、#019 Image OUT、子Component Input、子Component OUTへ即時反映されます。 ## v1.0.35 画像ファイル入力・共通表示設定 - ICONではFont Awesome一覧を表示する。 - ICON以外では画像ドラッグ＆ドロップ領域とファイル選択を表示する。 - 画像ファイルはData URLとしてSourceへ反映し、形式・ファイル名・容量・元画像寸法を取得する。 - 表示領域の初期値は「親要素に合わせる」。 - FITの初期値は`contain`、画像表示率は100%、表示位置は中央。 - 表示位置は左上・上中央・右上・左中央・中央・右中央・左下・下中央・右下の9方向。 - #019内のICON設定では#018を基準とし、アニメーション設定は除外する。#018本体は変更しない。 ## v1.0.35 UI Registry正式対応 - #019は子UI番号を固定保持せず、`BoneUIRegistry.resolve(TYPE)`で取得する。 - TYPE=ICONはRegistry登録済みの#018 Bone Iconへ処理委譲する。 - TYPE=BITMAPはBitmap Sample UI、TYPE=SVGはSVG Sample UIへ処理委譲する。 - JPEG/JPG/PNG/GIF/WebP/AVIF/BMP/ICO/Data URLはBITMAP系としてRegistry解決する。 - UI ListはRegistryから自動生成する。 - 正式UI一覧条件は`completionFlag=true`かつ`status=Release Ready`。 - 使用コンポーネント表示はRegistry情報から自動生成する。 - 新しい画像TYPEはRegistry登録だけで追加でき、#019親処理の変更を不要とする。 ## v1.0.35 画像用途 画像ファイルはファイル形式とは別に `usage` を持ちます。`usage: icon` では画像ファイルをアイコンとして扱い、#018 Bone Iconに準じた静的なサイズ・回転・反転・表示領域設定を使用します。Animationは使用しません。`usage: image` では親要素内へ表示し、FIT／そのまま表示、9方向配置、拡大率を設定します。TYPE=ICONは従来どおり#018 Bone Iconを使用します。 ## Version 1.0.35 更新 - List Keyを文字列入力・固定名表示からRegistry由来のUIリストへ変更。 - 正式候補として `018 - Icon (Font Awesome)` を選択可能に変更。 - #019自身に「変更を確定」ボタンを追加。編集値は確定操作までDraftとして保持。 - 今回の確定処理に上位親コンポーネントは関与しない。 ## Version 1.0.50 更新 - #019 v1.0.35を直接の修正元として更新。 - TYPEによる直接解決を廃止し、登録済みRegistryのList Keyで子UIを解決。 - UIリストを未登録候補専用として実装。 - 登録済みUIを別管理し、登録・登録解除・削除を実装。 - 登録解除または削除したUIは未登録候補へ戻り、再登録可能。 - 使用コンポーネントとList Keyプルダウンを登録済みUIへ同期。 - Bitmap、SVG、Font Awesomeを用途別の子UIとして扱い、ファイル形式だけで用途を決定しない。 - 変更確定後に使用コンポーネント、Property、Preview、OUTを同期。 ## Version 1.0.50 修正 - UI Registryをエクスプローラー詳細形式の1列表示へ変更。 - Draft編集値を合算プレビューへ即時反映。 - TYPE／用途変更時にList Keyを登録済みUIへ同期。 - 画像アイコン用途で画像アイコン表示設定を表示。 - Smoke TestのBone Core構造確認を正式normalize API経由へ修正。 ## Version 1.0.50 修正 - List Keyを現在のTYPEに対応する登録済みUIだけへ限定。 - アイコン用途設定を左側の「変更を確定」直下へ移動。 - 未登録候補が空の場合はUI Registryの空欄領域を表示しない。 - UI Registryを1列の詳細一覧表示へ統一。 - v1.0.50: 画像アイコンName入力・表示を追加。Unicode設定を#019から撤去。元画像幅・高さを画像描画サイズと子Inputへ反映。 ## Version 1.0.50 修正 - 画像アイコン名の文字サイズ・色・フォント・位置・間隔を設定可能にした。 - 画像アイコン用途では元画像幅・高さを実画像サイズとして反映し、Icon表示領域の幅・高さとは分離した。 - アイコン名をIcon表示領域内へ配置し、表示領域から外へ押し出される問題を修正した。 - 画像アイコンNameおよび表示領域反映のValidationを修正・追加した。 ## v1.0.50 - 画像ファイルをアイコン用途で使う場合、`size`を画像アイコンの実描画サイズとして使用する。 - 元画像の縦横比を維持し、長辺を`size`へ合わせる。 - Icon表示領域の幅・高さは画像アイコンサイズと独立して保持する。 - 画像アイコン用途では、元画像幅・高さ、FIT、画像表示率、9方向配置、画像色を編集対象から除外する。 - Name、Name文字設定、回転、反転、表示・OUT、背景、領域、枠線、余白、状態設定は維持する。 - Validationは現在の画面選択値に依存せず、固定した検証値で画像アイコンサイズとName表示を検査する。 ## v1.0.50 修正 - 「一覧表示設定」を「画像アイコン表示設定」へ正式名称変更。 - 画像アイコン表示領域の「はみ出し：表示」は、画像アイコンサイズまたはNameが領域を超える場合にクリップせず表示する。 - 「非表示」は領域外をクリップし、「スクロール」は領域内スクロールを使用する。 ## コンポーネント完了管理 テストページ末尾の「#019 Bone Imageを完了」は、Propertyの「変更を確定」とは別の正式完了操作である。Smoke TestとValidation ReportがALL PASSの場合のみ実行でき、Completion Flag、Status、Validation Status、完了日時を更新する。状態はローカル環境へ保存され、「完了解除」でDevelopmentへ戻せる。 ## v1.0.50 修正 UI RegistryへList Keyの追加・編集・Registry定義削除を復元。登録・登録解除・候補へ戻す削除とは別操作として実装。 ## v1.0.50 - 選択中のList Keyを登録解除した際、List Keyを「なし」へ同期するよう修正。 - #018 Bone Iconの使用表示、プレビュー、子Input／OUTを即時更新。 - #018未登録状態をUI Registry公開API検証で正常状態として扱うよう修正。 ## Version 1.0.56 修正 - Bone Flow標準の `install.bat` / `install.ps1` をZIPルートへ同梱。 - 既存のBone Flow配置先へ #019 Image対象ファイルのみをバックアップ付きで配置する。 - #001 Core、#002 Joint、#018 Iconなど既存コンポーネントは上書きしない。 - インストール前に必須依存ファイルとパッケージSHA-256を検証する。 ## Version 1.0.56 修正 - 接続イメージの静的表示を廃止。 - #002 Bone Jointが生成した実際のSVG接続パスを基準に、同一経路上へ流動アニメーションを重ねる方式へ修正。 - IN／OUT、Target Field不存在、型不一致の全6接続ケースでアニメーションを表示。 - Smoke Testへ「Joint実パスアニメーション」を追加し、Bone Joint実パス・6ケース・CSSアニメーション適用を検証。 ## Version 1.0.62 修正 - install.batをUTF-8 BOMなし・CRLFで再生成。 - bone-image.htmlのVersion表記を1.0.62へ統一。 - インストーラのバージョン検証対象と実ファイルを一致。 ### 接続イメージ修正（v1.0.62） - #019独自のSVG複製パスおよび独自アニメーション処理を撤去。 - #018 Bone Iconと同一の`BoneJoint.drawLine()`による`gradient-flow`を使用。 - 接続判定・線描画・アニメーションを#002 Bone Jointへ委譲。 ## v1.0.62 正式修正 - #019 Imageを画像系の親コンポーネントとして使用可能にした。 - TYPEごとの対応UI設定をLocalStorageへ保存・復元する。 - 対応UIが未作成の場合は「なし」または作成予定UIを選択し、ダミー表示で処理を継続する。 - SVGの作成予定UIは #020 ではなく、BIZ LIST上の #086 SVGSurface として扱う。実装済みとは扱わない。 - TYPE=ICONのみ #018 Bone Iconへ委譲する。