# Bone Flow #019 - Image Version: 1.0.72 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へ委譲する。 ## v1.0.64 ColorPicker共通化 - 既存9色Propertyを#040 ColorPickerへ委譲。 - 影色以外はSolid / Transparent / Gradient / カスタム追加。影色は既存契約維持のためSolid / Transparent。 - Native color pickerは起動させず、#040のみを使用。 - Pickerはviewportではなく対象Property要素/カードを基準に上下配置。 - 既存Property名・既定色・OUT構造・画像/アイコン切替は維持。 ## #040 ColorPicker Caller/RETURN integration (v1.0.64) - #019 owns only the color trigger swatch (`□`) for each existing color Property. - Clicking the trigger calls #040 ColorPicker v1.0.15 through `attachCaller()`. - #040 owns its detached Overlay and Tooltip under `document.body`; #019 does not embed or query #040 internal DOM. - RETURN is written back into the existing #019 Property. - Solid / Transparent / Gradient are accepted for color Properties; shadow color keeps Solid / Transparent only. - Existing default colors, Image/Icon switching, OUT, Registry, Joint, and Completion behavior remain #019 responsibilities. ## v1.0.65 TYPE: EMOJI / 絵文字一覧 - TYPEへ `EMOJI`（表示名: 絵文字）を追加。 - TYPE=EMOJIでは画像ファイル入力を使用せず、絵文字一覧を表示する。 - 一覧の絵文字をクリックすると `value.source` と `value.icon.value` へ選択値を反映する。 - 選択した絵文字は#019自身が表示し、既存のサイズ・回転・反転・表示領域・背景・枠・Name設定を利用できる。 - #018 Bone Icon、#040 ColorPicker、Image/Icon切替、OUT、Completionの既存経路は変更しない。 ## v1.0.70 TYPE: EMOJI グループ一覧 - v1.0.65のTYPE=EMOJIとクリック選択経路を維持したまま、絵文字一覧を9グループへ整理。 - グループ: Smileys & Emotion / 顔・感情、People & Body / 人・体、Animals & Nature / 動物・自然、Food & Drink / 食べ物・飲み物、Travel & Places / 乗り物・場所、Activities / 活動、Objects / 物、Symbols / 記号、Flags / 旗。 - 各グループは件数を表示し、開閉可能。グループ内はグリッド表示、全体は縦スクロール、横方向は溢れない構造。 - 重複排除後のカタログ件数は1404件。Unicode Emoji完全版を保証するものではなく、Bone Imageで選択可能な一覧を拡張したもの。 - `BoneImage.getEmojiCatalog()` は `group` / `groupLabel` / `emoji` / `name` を返す。 - クリック選択時はTYPE=EMOJIを維持し、Source / Icon value / Name / Previewへ反映。 - #040 ColorPicker v1.0.15 Caller構造、#018 Bone Icon v1.0.16委譲、既存Image TYPE、List Key、Registry、OUT、Security、Completionは変更しない。 ## v1.0.70 TYPE: EMOJI グループ選択 - 絵文字一覧に **グループ選択UI** を追加。 - `すべて` 表示に加え、9グループから任意のグループを選択可能。 - グループ選択時は該当グループのみを表示し、件数表示は `表示件数 / 全1404件` 形式。 - 既存のクリック選択、Source反映、Name反映、Preview即時反映は維持。 ## v1.0.70 追加絵文字（天気 / コンピュータ / ネットワーク / 文書・Office風） - TYPE=EMOJI カタログへ、ユーザー要望に合わせて **天気 / コンピュータ / ネットワーク / 文書・Office風** の絵文字を重点追加しました。 - 追加件数: **34件** - 総件数: **1438件** - 例: ☀️ 🌩️ 🌪️ 💻 🖥️ 🖨️ 📶 🛜 📧 📄 📊 📈 📉 📁 📂 🗂️ 📝 など。 - Excel / Word の公式専用ロゴ絵文字は存在しないため、文書・表計算・フォルダ・グラフなどの近似用途絵文字を追加しています。 ## v1.0.70 Smoke Test状態分離 - `List Key解除で#018使用表示消去` のテストを、現在選択中TYPEに依存しないよう修正。 - テスト中のみ TYPE=ICON / List Key=018-icon-fontawesome を設定して解除を確認し、終了時に元のTYPE/List Keyへ復元する。 - TYPE=EMOJIを選択した状態から「全テスト実行」しても、このテストが誤FAILしない。 ## v1.0.72 #018 dependency display refresh - #018 Bone Icon dependency Version / Status / API is evaluated even while the row is hidden. - When `018-icon-fontawesome` becomes the active List Key, the row no longer remains at `確認中`; it already contains the real dependency result. - #018 dependency requirement itself is unchanged: minimum v1.0.16 (same major.minor patch-compatible) + `create` Public API. - Image runtime / UI Registry / List Key behavior / ColorPicker / Hover Border Effect / Completion are not redesigned. ## v1.0.71 Dependency Version compatibility - Dependency判定を完全一致から **Minimum Version + Public API / Contract compatibility** へ変更。 - 同一 major.minor で最低patch以上を互換として扱う。例: #020 Label `1.0.60 >= 1.0.50`、#022 Hover Border Effect `1.0.8 >= 1.0.5`。 - 最低patch未満は `Version Below Minimum`、major/minor不一致は `Version Incompatible`、解析不能Versionは `Version Invalid`。 - #040 ColorPicker Caller初期化も同じ互換判定を使用し、`attachCaller` / `normalizeValue` 等の必要Public APIを別途確認する。 - Installerも同じMinimum Version + API contract判定を使用する。 - Image / Emoji / List Key / Registry / OUT / Joint / Security / Smoke / Validation / Completion / Property仕様は変更しない。