プロパティ属性設定連動実装

frontend/src/pages/FlowChartTest.vue

@@ -1,34 +1,66 @@
 <template>
   <q-page>
       <div class="flowchart">
-        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index"
-         :isSelected="node===activeNode" :actionNode="node"
-         @addNode="addNode" @nodeSelected="onNodeSelected"></node-item>
+        <node-item v-for="(node,) in refFlow.actionNodes" :key="node.id"
+         :isSelected="node===state.activeNode" :actionNode="node"
+         @addNode="addNode"
+         @nodeSelected="onNodeSelected"
+         @nodeEdit="onNodeEdit"
+         @deleteNode="onDeleteNode"
+         @deleteAllNextNodes="onDeleteAllNextNodes"
+         ></node-item>
       </div>
   </q-page>
+  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
   <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
       <action-select ref="appDg" name="アクション" type="single"></action-select>
   </show-dialog>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue';
-import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction } from 'src/types/ActionTypes';
+import {ref,reactive,computed} from 'vue';
+import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
 import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
+import PropertyPanel from 'components/right/PropertyPanel.vue';
+
 
 const rootNode:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
 const actionFlow: ActionFlow = new ActionFlow(rootNode);
-actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する',''));
+const saibanProps:[IActionProperty]=[{
+  component:"InputText",
+  props:{
+    displayName:"フォーマット",
+    modelValue:"",
+    name:"format",
+    placeholder:"フォーマットを入力してください",
+  }
+},{
+  component:"FieldInput",
+  props:{
+    displayName:"採番項目",
+    modelValue:"",
+    name:"filed",
+    placeholder:"採番項目を選択してください",
+  }
+}];
+
+
+actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する','',[],saibanProps));
 actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
 const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
+actionFlow.addNode(new ActionNode('入力データ取得','住所を取得する',''),branchNode,'はい');
 actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存しない',''),branchNode,'いいえ' );
 
 // ref関数を使ってtemplateとバインド
+const state=reactive({
+  activeNode:rootNode,
+})
+
 const refFlow = ref(actionFlow);
 const showAddAction=ref(false);
-const activeNode =ref(rootNode);
+const drawerRight=ref(false);
 
 const addActionNode=(action:IActionNode)=>{
   refFlow.value.actionNodes.push(action);
@@ -39,9 +71,21 @@ const addNode=(node:IActionNode,inputPoint:string)=>{
 }
 
 const onNodeSelected=(node:IActionNode)=>{
-  activeNode.value=node;
+  state.activeNode = node;
 }
 
+const onNodeEdit=(node:IActionNode)=>{
+  state.activeNode = node;
+  drawerRight.value=true;
+}
+
+const onDeleteNode=(node:IActionNode)=>{
+  refFlow.value.removeNode(node);
+}
+
+const onDeleteAllNextNodes=(node:IActionNode)=>{
+  refFlow.value.removeNode(node);
+}
 const closeDg=(val :any)=>{
   console.log("Dialog closed->",val);
 }