# Bone Flow #021 - Shape

## 0. Document information

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

This is the formal usage guide for #021 Shape. Registry/Runtime geometry is authoritative; DOC does not recreate fake Shapes.

## 1. Start here

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

`data-shape-type` selects an existing Registry TYPE and the element `innerText` becomes the display label. IN/OUT label offsets may be set with `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, and `data-port-label-tb-y`. Other Properties use the Property Editor or BoneShape Public API.

## HTML Functional Class

Formal class: `bf-shape`

### 2.1 Load order

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

The bridge scans `.bf-shape`, checks the Registry, creates `BoneShape.createNode(value)`, and mounts it.

### 2.2 Values accepted directly from HTML

| Input | Syntax | Meaning |
|---|---|---|
| Component entry | `class="bf-shape"` | Mount as #021 Shape |
| Shape TYPE | `data-shape-type="PROCESS"` | Registry TYPE |
| Display text | element innerText | `label` |
| Other Properties | not directly set in HTML | Use Property Editor / Public API |

No invented `data-fill`, `data-job-type`, or `data-animation` contract is added.

### 2.3 Access the instance from JavaScript

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

Dynamically added `.bf-shape` elements are also scanned by MutationObserver.

### 2.4 HTML live sample / Preview

This section shows the **actual mounted result of an HTML-only `bf-shape` sample side by side with a live Preview**.

- Left: HTML source sample
- Right: live Preview rendered as `bf-shape`
- Bottom: State / OUT obtained by `BoneShapeHTMLClass.getInstance()`

Instead of repeating text only, **the guide must expose a live sample inside this section**.

### 2.5 FIT comparison sample

This section compares `displayTextStyle.fit=false` and `displayTextStyle.fit=true` with the **same long display label**.

- **Without FIT**: shows the label protruding outside the Shape
- **With FIT**: automatically shrinks the font size until it fits inside the Shape
- Both **HTML Functional Class** and **BoneShape.Node** samples are shown side by side so the visual effect is obvious.

## 3. Runtime-owned Property Schema

BoneShape Runtime owns the formal Property definitions: `getPropertySchema()`, `getPropertyDefaults()`, and `getPropertyDefinition(key)`. The UI must not maintain a second formal schema. TIME JOB schema includes accepted IN TYPE, SQL/BAT/JS-style process TYPE, RUNNING/SUCCESS/ERROR colors, and daily/weekly/monthly/hour/minute schedule data. When `displayTextStyle.fit=true`, the display text automatically shrinks to stay inside the Shape.

## 4. Shape List / 40 TYPE

The current Registry contains 40 TYPE values, including five Joint-free stamp Shapes in addition to fixed/composite/detail/TIME JOB Shapes.

**The Shape column below is generated directly from the #021 BoneShape Runtime when the DOC opens, so each TYPE and its live Shape image are shown together in the same row.**

| TYPE | Name | Live Shape | Category | Size / Geometry |
|---|---|---|---|---|
| `START` | Start | — | `fixed` | 220×140 / Registry geometry: rect / viewBox [0, 0, 220, 140]. |
| `END` | End | — | `fixed` | 220×140 / Registry geometry: rect / viewBox [0, 0, 220, 140]. |
| `PROCESS` | Process | — | `fixed` | 220×140 / Registry geometry: rect / viewBox [0, 0, 220, 140]. |
| `DECISION` | Decision | — | `fixed` | 220×160 / Registry geometry: path / viewBox [0, 0, 220, 160]. |
| `INPUT_OUTPUT` | Input / Output | — | `fixed` | 240×140 / Registry geometry: path / viewBox [0, 0, 240, 140]. |
| `SUB_PROCESS` | Sub Process | — | `fixed` | 220×140 / Registry geometry: rect, path / viewBox [0, 0, 220, 140]. |
| `DOCUMENT` | Document | — | `fixed` | 240×160 / Registry geometry: path / viewBox [0, 0, 240, 160]. |
| `DATABASE` | Database | — | `fixed` | 220×160 / Registry geometry: path, ellipse, path / viewBox [0, 0, 220, 160]. |
| `DATA_STORE` | Data Store | — | `fixed` | 260×160 / Registry geometry: rect, path / viewBox [0, 0, 260, 160]. |
| `MANUAL_INPUT` | Manual Input | — | `fixed` | 240×140 / Registry geometry: path / viewBox [0, 0, 240, 140]. |
| `MANUAL_OPERATION` | Manual Operation | — | `fixed` | 240×140 / Registry geometry: path / viewBox [0, 0, 240, 140]. |
| `PREPARATION` | Preparation | — | `fixed` | 240×140 / Registry geometry: path / viewBox [0, 0, 240, 140]. |
| `DELAY` | Delay | — | `fixed` | 230×140 / Registry geometry: path / viewBox [0, 0, 230, 140]. |
| `CONNECTOR` | Connector | — | `fixed` | 140×140 / Registry geometry: circle / viewBox [0, 0, 140, 140]. |
| `OFFPAGE_CONNECTOR` | Off-page Connector | — | `fixed` | 180×160 / Registry geometry: path / viewBox [0, 0, 180, 160]. |
| `TABLE` | Table | — | `fixed` | 240×160 / Registry geometry: rect, path / viewBox [0, 0, 240, 160]. |
| `VIEW` | 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` | 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` | Object | — | `fixed` | 220×160 / Registry geometry: path, path / viewBox [0, 0, 220, 160]. |
| `IMAGE` | Image | — | `fixed` | 240×160 / Registry geometry: rect, circle, path / viewBox [0, 0, 240, 160]. |
| `ICON` | Icon | — | `fixed` | 160×160 / Registry geometry: rect, path / viewBox [0, 0, 160, 160]. |
| `LABEL` | Label | — | `fixed` | 240×120 / Registry geometry: rect / viewBox [0, 0, 240, 120]. |
| `PANEL` | Panel | — | `fixed` | 260×170 / Registry geometry: rect, path / viewBox [0, 0, 260, 170]. |
| `GROUP` | Group | — | `fixed` | 280×190 / Registry geometry: rect, path / viewBox [0, 0, 280, 190]. |
| `MULTI_DOCUMENT` | Multi Document | — | `composite` | 260×180 / Registry geometry: runtime/detail / viewBox [-20, 0, 260, 180]. |
| `COLLECTION` | Collection | — | `composite` | 240×200 / Registry geometry: runtime/detail / viewBox [-20, 0, 240, 200]. |
| `TABLE_DETAIL` | Table Detail | — | `detail` | 0×0 / Registry geometry: runtime/detail / viewBox [0, 0, 0, 0]. |
| `INTERNAL_DETAIL` | Internal Representation | — | `detail` | runtime/detail / solid double frame + small folded corner + INTERNAL badge / two columns (item, type). |
| `SCHEDULE_TRIGGER` | Schedule Trigger | — | `fixed` | 180×150 / Registry geometry: path / viewBox [0, 0, 180, 150]. |
| `JOB` | Job | — | `fixed` | 260×160 / Registry geometry: rect / viewBox [0, 0, 260, 160]. |
| `JOBNET` | JobNet | — | `fixed` | 300×190 / Registry geometry: rect, path / viewBox [0, 0, 300, 190]. |
| `STAMP_CIRCLE` | Circle Stamp | — | `stamp` | Joint-free / default 15mm / circle. |
| `STAMP_SQUARE` | Square Stamp | — | `stamp` | Joint-free / default 15mm / square. |
| `STAMP_OVAL` | Oval Stamp | — | `stamp` | Joint-free / default 15mm / vertical oval by default. |
| `STAMP_DATE` | Date Stamp | — | `stamp` | Joint-free / default 15mm / round / date display. |
| `STAMP_CORRECTION` | Correction Stamp | — | `stamp` | Joint-free / default 10mm / vertical oval + double correction lines. |
## 5. IN / OUT / Ports

Normal Shapes keep four directional Joint Ports. Horizontal flow uses IN=LEFT / OUT=RIGHT; vertical flow uses IN=TOP / OUT=BOTTOM.

### 5.1 Show / hide IN and OUT labels

The **Show IN label** / **Show OUT label** properties map to `portLabelVisibility.in` / `portLabelVisibility.out`. Turning them off hides only the IN / OUT text label. The Joint connection point itself remains visible because it is part of the connection contract.

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

- `in: true / false`: show / hide IN text
- `out: true / false`: show / hide OUT text
- Joint Ports remain present
- Five stamp Shapes have no Joint / IN / OUT and are not affected

### 5.2 Port direction and label placement

Horizontal flow uses LEFT=IN / RIGHT=OUT; vertical flow uses TOP=IN / BOTTOM=OUT. Labels are automatically moved outside the Shape. LEFT/RIGHT labels sit above the Joint line; TOP/BOTTOM labels sit to the right of the Joint line. The `bf-shape` HTML Functional Class accepts `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, and `data-port-label-tb-y` for fine tuning.

`SCHEDULE_TRIGGER` has semantic `OUT`; `JOB` / `JOBNET` have `IN` / `SUCCESS` / `ERROR`. TABLE_DETAIL and INTERNAL_DETAIL also have FIELD Ports. FIELD Ports remain LEFT=IN / RIGHT=OUT.

## 6. TIME JOB

### 6.1 SCHEDULE_TRIGGER

Owns start-condition representation and schedule data. `schedule.type`: daily / weekly / monthly / business-day / cron / once. `triggerMode`: CLOCK / MANUAL / API / JOINT. month / dayOfMonth / dayOfWeek / hour / minute / calendar / enabled are formal Properties. #021 does not run a resident 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 color represents processing; SUCCESS / ERROR colors represent return-state colors. `setJobInput()` applies data IN and moves to READY; `applyJobResult()` applies SUCCESS/ERROR to State, color and returnPort. #021 does not execute SQL/BAT/JS itself.

## 7. Responsibility boundaries

- Color selection: #040 ColorPicker Caller API
- Border effect: #022 Hover Border Effect
- Element motion: #117 Animation
- Joint rendering: #002 Bone Joint

## 8. Public API

Primary Class: `BoneShape.Node`; compatibility Class: `BoneShape.Component`. Static APIs include load/create/destroy/createNode/attachNode/createInstance/attachInstance/list/find/output/validate/setJobInput/applyJobResult/matchesSchedule/triggerSchedule/getClassGuide/getPropertySchema/getPropertyDefaults/getPropertyDefinition.

## 9. Japanese / English

The Property language switch changes visible labels, descriptions, schedule text and ColorPicker locale. Internal TYPE, enum and JSON keys are not translated.

## 10. Smoke / Validation / Completion

Smoke Test and Validation are separate. NOT RUN is never reported as PASS. Completion is only formal after browser execution and user confirmation.


### INTERNAL_DETAIL
`INTERNAL_DETAIL` is for internal representations such as DB metadata and storage areas. It is visually distinct from TABLE_DETAIL with a solid double frame, a small folded top-right corner, and an `INTERNAL` badge. It uses two columns (item / type) and has no alias column, while retaining FIELD IN/OUT and TABLE ports.


### IN/OUT label placement (v1.0.52)
For LEFT/RIGHT ports, IN/OUT labels are placed above the Joint line. For TOP/BOTTOM ports, labels are placed to the right of the Joint line. The `bf-shape` HTML Functional Class accepts `data-port-label-lr-x`, `data-port-label-lr-y`, `data-port-label-tb-x`, and `data-port-label-tb-y` for offset tuning.


### Automatic IN/OUT clearance and detail grid (v1.0.52)
IN/OUT labels are automatically moved outside the Shape boundary. LEFT/RIGHT labels stay above the Joint line while moving outward horizontally; TOP/BOTTOM labels stay to the right of the Joint line while moving outward vertically. HTML Functional Class offsets are added after this automatic placement. INTERNAL_DETAIL field rules stop inside the double frame instead of overlapping the left/right outer border. TABLE_DETAIL / INTERNAL_DETAIL rules use the same stroke color as the Shape outline.


## Stamp Shape / `bf-stamp` / `bf-stamp-inline` / `bf-correction-stamp`

#021 provides Joint-free stamp Shapes. `bf-stamp` and `bf-stamp-inline` render round, square, oval, date, and correction stamps inside an element; `bf-stamp-inline` is intended for inline use inside normal text. Normal stamps default to 15 mm and correction stamps to 10 mm. Use `data-stamp-diameter-mm` for physical size and `data-stamp-border-width` for outline thickness. Round/square/oval stamps default to vertical text; oval stamps default to vertical orientation. The default sample text is `サンプル印`. Date stamps are round and render only the date row with a Gothic/sans-serif font.

`bf-correction-stamp` treats the element itself as the correction range, draws one or two correction lines inside that range only, and overlays the correction stamp. Configure it with `data-correction-line-width`, `data-correction-line-count`, and `data-correction-line-offset`.

```html
Inline <span class="bf-stamp-inline" data-stamp-type="circle" data-stamp-border-width="1.5">サンプル印</span> stamp
<span class="bf-stamp-inline" data-stamp-type="date" data-stamp-date-format="yyyy/MM/dd" data-stamp-diameter-mm="15" data-stamp-top="Approved" data-stamp-bottom="Owner"></span>
<span class="bf-correction-stamp" data-stamp-text="訂正" data-stamp-diameter-mm="10" data-correction-line-count="2">correct this text</span>
```


### Live Shape in the Shape List table
The Live Shape column uses `bf-inline-shape` rather than a static image, rendering the Runtime Shape directly in the table cell through the same HTML Functional Class path used by the sentence preview.