Bone Flow #021 - Bone Shape

Package Version 1.0.69 / Runtime Version 1.0.55 / Status: Development

累積回帰テスト
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 — 5 Categories

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後に完了できます。