# Bone Flow #021 - Shape

## 0. 文書情報

DOC ID: `DOC-0021` / UI ID: `UI-021` / Runtime: `BoneShape 1.0.54` / HTML Functional Class: `bf-shape` / Package: `1.0.63`

この文書は #021 Shape の正式利用ガイドです。Shape GeometryはRegistry/Runtimeを正本とし、DOC側で疑似Shapeを再実装しません。

## 1. 最初に

通常HTMLでShapeを1個表示する最小入口は次です。

```html
<div class="bf-shape" data-shape-type="PROCESS" data-port-label-lr-y="-12" data-port-label-tb-x="12">処理</div>
```

`data-shape-type` は既存Registry TYPEを指定し、要素の `innerText` が表示文字になります。IN/OUTラベル位置は `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, `data-port-label-tb-y` で調整できます。その他のPropertyはProperty EditorまたはBoneShape Public APIを使用します。

## HTML Functional Class

正式Class: `bf-shape`

### 2.1 読込順

```html
<link rel="stylesheet" href="/boneflow/css/bone-shape.css">
<div id="process-node" class="bf-shape" data-shape-type="PROCESS">処理</div>
<script src="/boneflow/js/bone-shape.js"></script>
<script src="/boneflow/js/bone-shape-html-class.js"></script>
```

bridgeは `.bf-shape` をscanし、Registryを確認して `BoneShape.createNode(value)` を生成・mountします。

### 2.2 HTMLから直接指定できるもの

| 指定 | 書き方 | 意味 |
|---|---|---|
| Component入口 | `class="bf-shape"` | #021 Shapeとしてmount |
| Shape TYPE | `data-shape-type="PROCESS"` | Registry TYPE |
| 表示文字 | 要素innerText | `label` |
| その他Property | HTML直接指定不可 | Property Editor / Public APIを使用 |

架空の `data-fill` / `data-job-type` / `data-animation` 等を正式契約として追加しません。

### 2.3 JavaScriptからinstanceを取得

```js
const host = document.getElementById("process-node");
const node = BoneShapeHTMLClass.getInstance(host);
node.update({ label: "更新後" });
console.log(node.getState());
console.log(node.getOutput());
```

動的に後から追加された `.bf-shape` もMutationObserverでscan対象になります。

### 2.4 HTML表示サンプル / Preview

この章では、**HTMLコードだけで記述した `bf-shape` を右側Previewへ実際にmountした結果**を同時表示します。

- 左: HTML記述サンプル
- 右: 実際に `bf-shape` として描画されたPreview
- 下: `BoneShapeHTMLClass.getInstance()` で取得したinstanceのState / OUT

説明文だけを重ねず、**このガイド内で live sample を確認できること**を正式挙動とします。

### 2.5 FIT比較サンプル

この章では、**同じ長い表示文字**を使って `displayTextStyle.fit=false` と `displayTextStyle.fit=true` を比較します。

- **FITなし**: 文字がShapeからはみ出す例をそのまま表示
- **FITあり**: Shape内へ収まるまでフォントサイズを自動調整
- **HTML Functional Class** と **BoneShape.Node** の両方を並べて表示し、効果の違いを目視確認できます。

## 3. Runtime-owned Property Schema

Property定義の所有者はBoneShape Runtimeです。

- `BoneShape.getPropertySchema()`
- `BoneShape.getPropertyDefaults()`
- `BoneShape.getPropertyDefinition(key)`
- `displayTextStyle.fit=true` の場合は表示文字をShape内へ収めるためフォントサイズを自動調整します。

UI側で別の正式Property Schemaを二重管理しません。特にTIME JOBでは、IN受入TYPE、SQL/BAT/JS等の処理TYPE、RUNNING/SUCCESS/ERROR色、日/週/月/時/分のScheduleデータをRuntime Schemaから参照します。

## 4. Shape List / 40 TYPE

現在のRegistryは40 TYPEです。固定/複合/可変詳細/TIME JOBに加えて印鑑Shape 5種（丸印・角印・楕円印・丸型データ印・訂正印）を含みます。

**下表の「実Shape」列そのものに `bf-inline-shape` を記述し、文章表現Previewと同じHTML Functional Class経路で各TYPEを直接Runtime描画します。別カタログは生成しません。**

| TYPE | 日本語 | 実Shape | Category | Size / Geometry |
|---|---|---|---|---|
| `START` | 開始 | — | `fixed` | 220×140 / Registry Geometry: rect / viewBox [0, 0, 220, 140]. |
| `END` | 終了 | — | `fixed` | 220×140 / Registry Geometry: rect / viewBox [0, 0, 220, 140]. |
| `PROCESS` | 処理 | — | `fixed` | 220×140 / Registry Geometry: rect / viewBox [0, 0, 220, 140]. |
| `DECISION` | 条件分岐 | — | `fixed` | 220×160 / Registry Geometry: path / viewBox [0, 0, 220, 160]. |
| `INPUT_OUTPUT` | 入出力 | — | `fixed` | 240×140 / Registry Geometry: path / viewBox [0, 0, 240, 140]. |
| `SUB_PROCESS` | サブプロセス | — | `fixed` | 220×140 / Registry Geometry: rect, path / viewBox [0, 0, 220, 140]. |
| `DOCUMENT` | ドキュメント | — | `fixed` | 240×160 / Registry Geometry: path / viewBox [0, 0, 240, 160]. |
| `DATABASE` | データベース | — | `fixed` | 220×160 / Registry Geometry: path, ellipse, path / viewBox [0, 0, 220, 160]. |
| `DATA_STORE` | データストア | — | `fixed` | 260×160 / Registry Geometry: rect, path / viewBox [0, 0, 260, 160]. |
| `MANUAL_INPUT` | 手動入力 | — | `fixed` | 240×140 / Registry Geometry: path / viewBox [0, 0, 240, 140]. |
| `MANUAL_OPERATION` | 手動処理 | — | `fixed` | 240×140 / Registry Geometry: path / viewBox [0, 0, 240, 140]. |
| `PREPARATION` | 準備 | — | `fixed` | 240×140 / Registry Geometry: path / viewBox [0, 0, 240, 140]. |
| `DELAY` | 遅延 | — | `fixed` | 230×140 / Registry Geometry: path / viewBox [0, 0, 230, 140]. |
| `CONNECTOR` | 接続 | — | `fixed` | 140×140 / Registry Geometry: circle / viewBox [0, 0, 140, 140]. |
| `OFFPAGE_CONNECTOR` | ページ外 | — | `fixed` | 180×160 / Registry Geometry: path / viewBox [0, 0, 180, 160]. |
| `TABLE` | テーブル | — | `fixed` | 240×160 / Registry Geometry: rect, path / viewBox [0, 0, 240, 160]. |
| `VIEW` | ビュー | — | `fixed` | 240×140 / Registry Geometry: rect, path / viewBox [0, 0, 240, 140]. |
| `API` | API | — | `fixed` | 240×140 / Registry Geometry: path / viewBox [0, 0, 240, 140]. |
| `FILE` | ファイル | — | `fixed` | 200×160 / Registry Geometry: path, path / viewBox [0, 0, 200, 160]. |
| `JSON` | JSON | — | `fixed` | 0×0 / Registry Geometry: runtime/detail / viewBox [0, 0, 0, 0]. |
| `XML` | XML | — | `fixed` | 0×0 / Registry Geometry: runtime/detail / viewBox [0, 0, 0, 0]. |
| `CSV` | CSV | — | `fixed` | 0×0 / Registry Geometry: runtime/detail / viewBox [0, 0, 0, 0]. |
| `OBJECT` | オブジェクト | — | `fixed` | 220×160 / Registry Geometry: path, path / viewBox [0, 0, 220, 160]. |
| `IMAGE` | 画像 | — | `fixed` | 240×160 / Registry Geometry: rect, circle, path / viewBox [0, 0, 240, 160]. |
| `ICON` | アイコン | — | `fixed` | 160×160 / Registry Geometry: rect, path / viewBox [0, 0, 160, 160]. |
| `LABEL` | ラベル | — | `fixed` | 240×120 / Registry Geometry: rect / viewBox [0, 0, 240, 120]. |
| `PANEL` | パネル | — | `fixed` | 260×170 / Registry Geometry: rect, path / viewBox [0, 0, 260, 170]. |
| `GROUP` | グループ | — | `fixed` | 280×190 / Registry Geometry: rect, path / viewBox [0, 0, 280, 190]. |
| `MULTI_DOCUMENT` | 複数ドキュメント | — | `composite` | 260×180 / Registry Geometry: runtime/detail / viewBox [-20, 0, 260, 180]. |
| `COLLECTION` | コレクション | — | `composite` | 240×200 / Registry Geometry: runtime/detail / viewBox [-20, 0, 240, 200]. |
| `TABLE_DETAIL` | テーブル詳細 | — | `detail` | 0×0 / Registry Geometry: runtime/detail / viewBox [0, 0, 0, 0]. |
| `INTERNAL_DETAIL` | 内部表現 | — | `detail` | runtime/detail / 実線2重フレーム＋小さな角折り＋INTERNAL表示 / 2列（項目名・型）。 |
| `SCHEDULE_TRIGGER` | スケジュール起点 | — | `fixed` | 180×150 / Registry Geometry: path / viewBox [0, 0, 180, 150]. |
| `JOB` | ジョブ | — | `fixed` | 260×160 / Registry Geometry: rect / viewBox [0, 0, 260, 160]. |
| `JOBNET` | ジョブネット | — | `fixed` | 300×190 / Registry Geometry: rect, path / viewBox [0, 0, 300, 190]. |
| `STAMP_CIRCLE` | 丸印 | — | `stamp` | Jointなし / 既定15mm / 丸型。 |
| `STAMP_SQUARE` | 角印 | — | `stamp` | Jointなし / 既定15mm / 角型。 |
| `STAMP_OVAL` | 楕円印 | — | `stamp` | Jointなし / 既定15mm / 縦長既定。 |
| `STAMP_DATE` | データ印 | — | `stamp` | Jointなし / 既定15mm / 丸型 / 日付表示。 |
| `STAMP_CORRECTION` | 訂正印 | — | `stamp` | Jointなし / 既定10mm / 縦長楕円＋二重訂正線。 |
## 5. IN / OUT / Port

通常Shapeは4方向Joint Portを保持し、横表示はIN=LEFT / OUT=RIGHT、縦表示はIN=TOP / OUT=BOTTOMです。

### 5.1 IN / OUT 表示・非表示

Propertyの **IN表示** / **OUT表示** は `portLabelVisibility.in` / `portLabelVisibility.out` です。チェックをOFFにすると **IN / OUTの文字ラベルだけを非表示** にします。Joint接続点（Portの丸）は接続契約のため残り、消えません。

```js
node.update({
  portLabelVisibility: { in: false, out: true }
});
```

- `in: true / false` : IN文字ラベルの表示 / 非表示
- `out: true / false` : OUT文字ラベルの表示 / 非表示
- Joint Port本体は常時保持
- 印鑑Shape 5種はJoint / IN / OUTを持たないため対象外

### 5.2 Port方向とラベル位置

横フローでは LEFT=IN / RIGHT=OUT、縦フローでは TOP=IN / BOTTOM=OUTです。IN/OUTラベルはShape外側へ自動退避し、LEFT/RIGHTではJoint線の上、TOP/BOTTOMではJoint線の右へ配置します。`bf-shape` HTML Functional Classでは `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, `data-port-label-tb-y` で位置を微調整できます。

`SCHEDULE_TRIGGER` はSemantic `OUT`、`JOB` / `JOBNET` は `IN` / `SUCCESS` / `ERROR` を持ちます。TABLE_DETAILとINTERNAL_DETAILはTABLE Portに加えてFIELD Portを持ちます。FIELD Portは LEFT=IN / RIGHT=OUT を維持します。

## 6. TIME JOB

### 6.1 SCHEDULE_TRIGGER

開始条件の表示とScheduleデータを保持します。`schedule.type` は daily / weekly / monthly / business-day / cron / once、`triggerMode` は CLOCK / MANUAL / API / JOINTです。month / dayOfMonth / dayOfWeek / hour / minute / calendar / enabledを正式Propertyとして保持します。#021自身は常駐Schedulerを実行しません。

### 6.2 JOB / JOBNET

`job.processType` は SQL / BAT / JS / POWERSHELL / EXE / API / SHELL / ETL / FILE_TRANSFER / AI / CUSTOM。`job.acceptedInputType` は ANY / JSON / TEXT / FILE / SQL / COMMAND / JOB_REQUESTです。

RUNNING色は処理中色、SUCCESS / ERROR色は戻り値状態色です。`setJobInput()` はデータINを設定しREADYへ遷移、`applyJobResult()` はSUCCESS/ERROR結果をState・色・returnPortへ反映します。#021はSQL/BAT/JS等を実行しません。

## 7. #040 / #022 / #117 / #002 責務分離

- 色選択: #040 ColorPicker Caller API
- 枠Effect: #022 Hover Border Effect
- 要素Motion: #117 Animation
- Shape間Joint描画: #002 Bone Joint

## 8. Public API

主要Classは `BoneShape.Node`、互換Classは `BoneShape.Component`。Static APIにはload/create/destroy/createNode/attachNode/createInstance/attachInstance/list/find/output/validate/setJobInput/applyJobResult/matchesSchedule/triggerSchedule/getClassGuide/getPropertySchema/getPropertyDefaults/getPropertyDefinition等があります。

## 9. 日本語 / English

Property言語切替は表示ラベル・説明・Schedule表示文・ColorPicker localeを切り替えます。内部TYPE / enum / JSON keyは翻訳しません。

## 10. Smoke / Validation / Completion

Smoke TestとValidationは別実行です。未実行をPASSと表示しません。Completionはブラウザ実行結果とユーザー確認後にのみ正式完了扱いします。


### INTERNAL_DETAIL
`INTERNAL_DETAIL` はDBメタ情報・保存領域等の内部表現用です。TABLE_DETAILとは異なる実線2重フレーム・小さな右上角折りと `INTERNAL` 表示を持ち、列は「項目名 / 型」の2列で略名列を持ちません。FIELD IN/OUTとTABLE Portは保持します。


### IN/OUTラベル位置（v1.0.52）
LEFT/RIGHT PortのIN/OUTラベルはJoint線の上、TOP/BOTTOM PortではJoint線の右に表示します。`bf-shape` HTML Functional Classでは `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, `data-port-label-tb-y` でオフセットを調整できます。


### IN/OUT自動退避・詳細罫線（v1.0.52）
IN/OUTラベルはShape外側へ自動退避します。LEFT/RIGHTはJoint線の上を保ちながら左右外側、TOP/BOTTOMはJoint線の右を保ちながら上下外側へ配置します。HTML Functional Classのオフセット値は自動配置後に加算されます。`INTERNAL_DETAIL` のフィールド横罫線は二重外枠の内側で止まり、左右端の外枠へ重なりません。TABLE_DETAIL / INTERNAL_DETAIL の罫線色はShape外枠色と同じです。


## 印鑑 Shape / `bf-stamp` / `bf-stamp-inline` / `bf-correction-stamp`

#021 は Joint / IN / OUT を持たない印鑑Shapeを提供する。`bf-stamp` と `bf-stamp-inline` は丸印 / 角印 / 楕円印 / データ印 / 訂正印を要素内に描画し、`bf-stamp-inline` は文章中への単体表示を正式用途とする。通常印鑑は直径15mm、訂正印は10mmを既定とし、`data-stamp-diameter-mm` で実寸を変更する。枠線は `data-stamp-border-width` で変更できる。丸印・角印・楕円印は縦書きが既定、楕円は縦型が既定。既定サンプル文字は「サンプル印」。データ印は丸型で、日付行のみゴシック体固定。

`bf-correction-stamp` は要素自身を訂正対象範囲として、その範囲内だけに訂正線を描き、訂正印を重ねる。`data-correction-line-width` / `data-correction-line-count` / `data-correction-line-offset` を使用できる。

```html
文章中に <span class="bf-stamp-inline" data-stamp-type="circle" data-stamp-border-width="1.5">サンプル印</span> を表示
<span class="bf-stamp-inline" data-stamp-type="date" data-stamp-date-format="yyyy/MM/dd" data-stamp-diameter-mm="15" data-stamp-top="承認" data-stamp-bottom="担当"></span>
<span class="bf-correction-stamp" data-stamp-text="訂正" data-stamp-diameter-mm="10" data-correction-line-count="2">訂正する文字</span>
```


### Shape List 表内の実Shape
Shape Listの「実Shape」列は画像ではなく `bf-inline-shape` を使用し、文章表現Previewと同じHTML Functional Class経路でRuntime Shapeを表セル内へ直接描画する。