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

frontend/src/components/main/NodeItem.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" @click="onNodeClick">
+  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" >
     <div class="row">
-      <q-card class="action-node" :class="nodeStyle" :square="false" >
+      <q-card class="action-node" :class="nodeStyle" :square="false" @click="onNodeClick" >
         <q-toolbar class="col" >
           <div class="text-subtitle2">{{ node.subTitle }}</div>
           <q-space></q-space>
-          <q-btn flat round dense icon="more_horiz" >
+          <q-btn flat round dense icon="more_horiz" size="sm" >
             <q-menu  auto-close anchor="top right">
                 <q-list>
-                  <q-item clickable v-if="!isRoot">
+                  <q-item clickable v-if="!isRoot" @click="onEditNode">
+                    <q-item-section avatar><q-icon name="edit" ></q-icon></q-item-section>
+                    <q-item-section >編集する</q-item-section>
+                  </q-item>
+                  <q-item clickable v-if="!isRoot"  @click="onDeleteNode">
+                    <q-item-section avatar><q-icon name="delete" ></q-icon></q-item-section>
                     <q-item-section>削除する</q-item-section>
                   </q-item>
-                  <q-item clickable>
-                    <q-item-section>以下すべて削除する</q-item-section>
+                  <q-item clickable @click="onDeleteAllNode">
+                    <q-item-section avatar><q-icon name="delete_sweep" ></q-icon></q-item-section>
+                    <q-item-section >以下すべて削除する</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -67,7 +73,10 @@ export default defineComponent({
   },
   emits: [
     'addNode',
-    "nodeSelected"
+    "nodeSelected",
+    "nodeEdit",
+    "deleteNode",
+    "deleteAllNextNodes",
   ],
   setup(props, context) {
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
@@ -83,13 +92,13 @@ export default defineComponent({
         return Direction.Default;
       }
       if (point === props.actionNode.outputPoints[0]) {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Left;
         } else {
           return Direction.LeftNotNext;
         }
       } else {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Right;
         } else {
           return Direction.RightNotNext;
@@ -109,6 +118,23 @@ export default defineComponent({
     const onNodeClick = () => {
       context.emit('nodeSelected', props.actionNode);
     }
+
+    const onEditNode=()=>{
+      context.emit('nodeEdit', props.actionNode);
+    }
+    /**
+     * ノードを削除する
+     */
+    const onDeleteNode=()=>{
+      context.emit('deleteNode', props.actionNode);
+    }
+
+    /**
+     * ノードの以下すべて削除する
+     */
+     const onDeleteAllNode=()=>{
+      context.emit('deleteAllNextNodes', props.actionNode);
+    }
     return {
       node: props.actionNode,
       isRoot: props.actionNode.isRoot,
@@ -116,7 +142,10 @@ export default defineComponent({
       nodeStyle,
       getMode,
       addNode,
-      onNodeClick
+      onNodeClick,
+      onEditNode,
+      onDeleteNode,
+      onDeleteAllNode
     }
   }
 });
@@ -152,6 +181,6 @@ export default defineComponent({
 }
 
 .selected{
-  background-color: $light-blue-1;
+  background-color: $yellow-1;
 }
 </style>