Bone Flow #021 - Bone Shape

Package Version 1.0.103 (UI Parts Pack) / Base Package Version 1.0.69 / Runtime Version 1.0.55 / Status: Development

累積回帰テスト UI Parts Pack v1.0.103 文章表現（43） 絵文字風Shape（83） TTF使用サンプル（83） TTFダウンロード
Dependencies #001 Bone Core 既存正式版 #002 Bone Joint 既存正式版 #020 Bone Label >=v1.0.60 UI/Class基準 #022 Hover Border Effect >=v1.0.5 枠Effect #117 Animation >=v1.0.9 要素Motion #040 ColorPicker >=v1.0.15 色選択

使用コンポーネント

#001 Bone Core 使用中
Version 確認中 Status 確認中 API 確認中
#002 Bone Joint 接続表現
Version 確認中 Status 確認中 API 確認中
#020 Bone LabelUI/Class基準
Version 確認中 Status 確認中 API 確認中
#117 Animation要素Motion
Version 確認中 Status 確認中 API 確認中

#021はShape Geometry / Portを保持します。#020 >=v1.0.60をUI/Class API基準、#022 >=v1.0.5を枠Effect、#117 >=v1.0.9をShape要素Motion、#040 >=v1.0.15を色Property選択として参照します。Joint接続表現は従来どおり#002へ委譲します。

テスト対象：Shape Registry、固定/複合/可変詳細Shape、Shape Property、Port、Tooltip、Comment、#040 ColorPicker、#022枠Effect、#117要素Animation、Class/Public API、JSON OUT、Bone Joint接続イメージ、Smoke Test、Validation、完了管理を確認します。

登録済みUI

Shape Property

Property language
Shape Property / Shape List

Shape List — 6 Categories (83 TYPEs)

Shapeサムネイルはプレビューの25%サイズです。

固定Shape 基本プロパティ

Shape色 — #040 ColorPicker v1.0.15

既定OFFではTheme色をそのまま使用します。ON時だけShapeのFill / Stroke / Textを#040 Callerから上書きします。

Fillは単色 / transparent / 2色linear gradientに対応します。

マウスオーバー時の枠Effect — #022 v1.0.5

Shape要素の枠Effectのみ#022へ委譲します。Shape本体Motionとは別責務です。

Shape要素Animation — #117 v1.0.9

Shape自身にkeyframe/timer/loopを持たず、Animation UI Number + Shape UI Number + Target Partで#117へ委譲します。

IN / OUT は文字表示のみ切替。Joint接合点は常時表示します。

Preview / JSON OUT

Preview

TooltipとCommentは親プレビュー領域全体をドラッグ移動できます。移動位置は親要素基準でJSON保存され、黄色のComment起点だけはShapeアウトライン上を移動します。

文章表現 Preview

ああああ いいい


        

        

          JSON OUT
          

        

        

      

    

  


  

    Class リスト
    

      
正式 Class / 実行サンプル

      

        
Primary ClassBoneShape.Node

        
互換ClassBoneShape.Component

        
生成new BoneShape.Node(value, options).render(host)

        
状態初期化待ち

      

      
完成済みBoneShape Public APIを利用側Classから実際に呼び、下のサンプルコードと同じ経路でShapeを自動生成します。コード表示だけではなく、実UI・Class経由操作・State / OUTまで確認します。

      

        
Class利用API目的

        
BoneShape.Nodeconstructor / createNode / attachNode / render / update / getState / getOutput / destroy#023 Flow Editor等でShapeをFlow Nodeとして生成・描画する正式Primary Class
BoneShape.Componentconstructor / createInstance / attachInstance / attach / update / getState / getOutput / destroy既存利用側の互換Class。Flow Nodeの主要ClassはBoneShape.Node

      

      

        利用側Classサンプルコード
        

        

          
Classサンプルコード 実行結果

          
ページ読込後、上のClassサンプルと同じBoneShape Public API経路で実Shapeを自動生成します。

          

          

            
            
            
            
            初期化待ち
          

          
実行結果 / State / OUT

          
初期化待ち

        

      

      
Public API一覧・各API詳細・使用方法・クラス別の操作説明はガイドで確認します。

    

  


  

    
HTML Functional Class

    
HTML Class: bf-shape

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

    
data-shape-type と要素innerTextが基本契約です。IN/OUTラベル位置だけは data-port-label-lr-x/y と data-port-label-tb-x/y で調整できます。その他のPropertyはProperty Editor / BoneShape Public APIを使用します。

    
文章内Shape Class: bf-inline-shape（既定は周囲フォント+3px）

    
ああああ<span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="light" data-inline-font-size-offset="3">処理</span>いいい

    
印鑑専用Class: bf-stamp（Joint / IN / OUTなし）

    
<span class="bf-stamp-inline" data-stamp-type="circle" data-stamp-font-size="24" data-stamp-border-width="2">サンプル印</span>
<span class="bf-stamp-inline" data-stamp-type="date" data-stamp-date-format="yyyy/MM/dd" data-stamp-diameter-mm="15" data-stamp-font-size="18" 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>

    
bf-stamp-inline は文章中の単体印鑑、bf-correction-stamp は指定要素範囲内へ訂正線＋訂正印を表示します。共通で data-stamp-border-width も指定できます。

    

      
Classbf-shape

      
RuntimeBoneShape 1.0.54

      
HTML classbone-shape.js

      
DOCDOC-0021

    

  

































 HTMLクラス・文章表現 使用ガイド / v1.0.83 (Candidate)
 
CSS・JSの読み込み、HTMLクラス、文章内Shapeサイズ、テーマ、40 TYPEをまとめています。

 
Markdownガイド（別AIへ共有・ダウンロード）
   40種類の文章表現サンプル
   JSダウンロード
   CSSダウンロード
   Shape定義JSON
   アセット処理テスト

 
使用方法（HTML / CSS / JS / サイズ）
 
<link rel="stylesheet" href="../css/bone-shape.css">
<p>工程で <span class="bf-inline-shape" data-shape-type="PROCESS" data-theme="neon" data-inline-size="40" data-inline-text-size="14">処理</span> します。</p>
<script src="../js/bone-shape.js"></script>

 
文章内サイズは data-inline-size="40"（高さ40px・範囲8–160px）。周囲の文字に合わせるには data-inline-font-size-offset="3"（-8–32px）。

 
既存の /boneflow/data/bone-shapes.json RegistryはRuntimeが読み込みます。独自JSONチャートや実行JSの追加は不要です。

 







  

    
接続イメージ

    
#020 Label と同じ Bone Joint 接続状態イメージです。中央表示のみ「処理」に変更しています。

    

    

      

        
IN 接続線

        
OUT 接続線

        
型不一致

        
接続エラー／不存在終端

      

    

  


  

    
Validation

    

  


  

    
Smoke Test / Validation Report

    

      
      
      
      
      
      
    

    

      
NOT RUN

      
実行日時-

      
検査件数0件

      
PASS0件

      
FAIL0件

      
実行時間0.0ms

      
Version1.0.63

    

    

      
Smoke Test 結果NOT RUN

      
Smoke Testは未実行です。

    

    

      
Validation 結果NOT RUN

      
Validationは未実行です。

    

  


  

    
コンポーネント完了管理

    
Smoke TestとValidation ReportがALL PASSになった後に完了できます。

    

      
Component#021 Bone Shape

      
Version1.0.63

      
Completion Flagfalse

      
StatusDevelopment

      
ValidationNOT RUN

      
完了日時-

    

    

      
      
      全テストALL PASS後に完了できます。
    

  


  


















































 
Shape TYPE一覧（83種類）

 

 
既存40種類＋仕様書用UIパーツ43種類。実SVG Shapeをカード形式で表示します。

 
開始START既存40種類
開始を表す図形
終了END既存40種類
終了を表す図形
処理PROCESS既存40種類
処理を表す図形
条件分岐DECISION既存40種類
条件分岐を表す図形
入出力INPUT_OUTPUT既存40種類
入出力を表す図形
サブプロセスSUB_PROCESS既存40種類
サブプロセスを表す図形
ドキュメントDOCUMENT既存40種類
ドキュメントを表す図形
データベースDATABASE既存40種類
データベースを表す図形
データストアDATA_STORE既存40種類
データストアを表す図形
手動入力MANUAL_INPUT既存40種類
手動入力を表す図形
手動処理MANUAL_OPERATION既存40種類
手動処理を表す図形
準備PREPARATION既存40種類
準備を表す図形
遅延DELAY既存40種類
遅延を表す図形
接続CONNECTOR既存40種類
接続を表す図形
ページ外OFFPAGE_CONNECTOR既存40種類
ページ外を表す図形
テーブルTABLE既存40種類
テーブルを表す図形
ビューVIEW既存40種類
ビューを表す図形
APIAPI既存40種類
APIを表す図形
ファイルFILE既存40種類
ファイルを表す図形
JSONJSON既存40種類
JSONを表す図形
XMLXML既存40種類
XMLを表す図形
CSVCSV既存40種類
CSVを表す図形
オブジェクトOBJECT既存40種類
オブジェクトを表す図形
画像IMAGE既存40種類
画像を表す図形
アイコンICON既存40種類
アイコンを表す図形
ラベルLABEL既存40種類
ラベルを表す図形
パネルPANEL既存40種類
パネルを表す図形
グループGROUP既存40種類
グループを表す図形
複数ドキュメントMULTI_DOCUMENT既存40種類
複数ドキュメントを表す図形
コレクションCOLLECTION既存40種類
コレクションを表す図形
テーブル詳細TABLE_DETAIL既存40種類
テーブル詳細を表す図形
内部表現INTERNAL_DETAIL既存40種類
内部表現を表す図形
丸印STAMP_CIRCLE既存40種類
丸印を表す図形
角印STAMP_SQUARE既存40種類
角印を表す図形
楕円印STAMP_OVAL既存40種類
楕円印を表す図形
データ印STAMP_DATE既存40種類
データ印を表す図形
訂正印STAMP_CORRECTION既存40種類
訂正印を表す図形
スケジュール起点SCHEDULE_TRIGGER既存40種類
スケジュール起点を表す図形
ジョブJOB既存40種類
ジョブを表す図形
ジョブネットJOBNET既存40種類
ジョブネットを表す図形
ウィンドウ枠WINDOW_FRAME_UI基本UI
タイトルと内容領域を持つ画面枠
最小化WINDOW_CONTROL_MINIMIZE基本UI
ウィンドウを最小化するボタン
最大化WINDOW_CONTROL_MAXIMIZE基本UI
ウィンドウを最大化するボタン
元に戻すWINDOW_CONTROL_RESTORE基本UI
最大化前の大きさに戻すボタン
閉じるWINDOW_CONTROL_CLOSE基本UI
ウィンドウを閉じるボタン
ボタンBUTTON_RECT基本UI
標準操作ボタン
アイコンボタンBUTTON_ICON基本UI
アイコンのみの操作ボタン
スプリットボタンBUTTON_SPLIT基本UI
主操作と候補の分割ボタン
チェックボックスCHECKBOX_UI基本UI
ON/OFF選択
オプションボタンRADIO_BUTTON_UI基本UI
単一選択
ラベルLABEL_UI基本UI
項目名・必須印・補足説明（#020 Labelの表示専用Shape）
テキストボックスTEXTBOX_UI基本UI
1行文字入力
コンボボックスCOMBOBOX_UI基本UI
候補付き入力
トースト通知TOAST_UI基本UI
簡易通知
ダイアログDIALOG_UI基本UI
モーダルダイアログ
タブTAB_UI基本UI
タブ切替見出し
メニューMENU_UI基本UI
操作候補の一覧
月カレンダーCALENDAR_MONTHカレンダー
1か月の予定表示
週カレンダーCALENDAR_WEEKカレンダー
1週間の予定表示
日付セルCALENDAR_DAY_CELLカレンダー
通常の日付セル
選択日セルCALENDAR_DAY_SELECTEDカレンダー
選択状態の日付セル
今日セルCALENDAR_DAY_TODAYカレンダー
今日の強調表示
祝日セルCALENDAR_DAY_HOLIDAYカレンダー
祝日の日付
イベントセルCALENDAR_DAY_EVENTカレンダー
イベントを持つ日付
タスクセルCALENDAR_DAY_TASKカレンダー
タスクを持つ日付
カレンダーヘッダCALENDAR_HEADERカレンダー
年月と前月/翌月
前へCALENDAR_NAV_PREVカレンダー
前月/前週へ移動
次へCALENDAR_NAV_NEXTカレンダー
翌月/翌週へ移動
時間グリッドTIMELINE_GRIDタイムライン
時間目盛りと背景格子
タイムバーTIMELINE_BARタイムライン
開始・終了を示す時間帯
範囲バーTIMELINE_BAR_RANGEタイムライン
開始・終了ハンドル付き
選択バーTIMELINE_BAR_SELECTEDタイムライン
選択中のバー
縦タイムラインTIMELINE_VERTICALタイムライン
時間を縦方向に表す
横タイムラインTIMELINE_HORIZONTALタイムライン
時間を横方向に表す
時刻ラベルTIMELINE_LABEL_HOURタイムライン
時間目盛りの文字
現在時刻線TIMELINE_MARKER_NOWタイムライン
現在時刻位置
DatePickerDATE_PICKER_UIPicker
日付選択UIの概観
TimePickerTIME_PICKER_UIPicker
時刻選択UIの概観
DateTimePickerDATETIME_PICKER_UIPicker
日時入力UIの概観
ColorPickerCOLOR_PICKER_UIPicker
色の選択UIの概観
FilePickerFILE_PICKER_UIPicker
ファイル選択UIの概観
PickerポップアップPICKER_POPUP_UIPicker
展開時の選択パネル
候補一覧OPTION_LIST_UIPicker
選択候補リスト