UI美化

frontend/src/components/main/NodeItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="row justify-center" :style="{marginLeft:node.inputPoint!==''?'240px':''}">
+  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" @click="onNodeClick">
     <div class="row">
-      <q-card class="action-node" :class="{'root-node':node.isRoot,'text-white':node.isRoot}" :square="false">
+      <q-card class="action-node" :class="nodeStyle" :square="false" >
         <q-card-section>
           <div class="text-h6">{{ node.title }}</div>
           <div class="text-subtitle2">{{ node.subTitle }}</div>
@@ -29,11 +29,10 @@
       <node-line :action-node="node" :mode="getMode('')" @addNode="addNode" input-point=""></node-line>
     </div>
   </template>
-
 </template>
 
 <script lang="ts">
-import {defineComponent,computed} from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 import { IActionNode } from '../../types/ActionTypes';
 import NodeLine, { Direction } from '../main/NodeLine.vue';
 export default defineComponent({
@@ -45,13 +44,24 @@ import NodeLine,{Direction} from '../main/NodeLine.vue';
     actionNode: {
       type: Object as () => IActionNode,
       required: true
+    },
+    isSelected: {
+      type: Boolean
     }
   },
   emits: [
-        'addNode'
+    'addNode',
+    "nodeSelected"
   ],
   setup(props, context) {
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
+    const nodeStyle = computed(() => {
+      return {
+        'root-node': props.actionNode.isRoot,
+        'text-white': props.actionNode.isRoot,
+        'selected': props.isSelected && !props.actionNode.isRoot
+      };
+    });
     const getMode = (point: string) => {
       if (point === '' || props.actionNode.outputPoints.length === 0) {
         return Direction.Default;
@@ -70,15 +80,27 @@ import NodeLine,{Direction} from '../main/NodeLine.vue';
         }
       }
     }
+    /**
+     * アクションノード追加イベントを
+     * @param point 入力ポイント
+     */
     const addNode = (point: string) => {
       context.emit('addNode', props.actionNode, point);
     }
+    /**
+     * ノード選択状態
+     */
+    const onNodeClick = () => {
+      context.emit('nodeSelected', props.actionNode);
+    }
     return {
       node: props.actionNode,
-          hasBranch,
       isRoot: props.actionNode.isRoot,
+      hasBranch,
+      nodeStyle,
       getMode,
-          addNode
+      addNode,
+      onNodeClick
     }
   }
 });
@@ -87,21 +109,33 @@ import NodeLine,{Direction} from '../main/NodeLine.vue';
 .action-node {
   min-width: 250px !important;
 }
+
 .line {
   height: 20px;
 }
+
 .line:after {
   content: '';
   background-color: $blue-7;
   display: block;
   width: 3px;
 }
+
 .add-icon {
   font-size: 2em;
   color: $blue-7;
 }
+
 .root-node {
   background-color: $blue-7;
   border-radius: 20px;
 }
+
+.action-node:not(.root-node):hover{
+  background-color: $light-blue-1;
+}
+
+.selected{
+  background-color: $light-blue-1;
+}
 </style>

frontend/src/components/main/NodeLine.vue

@@ -2,7 +2,8 @@
     <div>
       <svg class="node-line">
         <polyline :points="points.linePoints" class="line" ></polyline>
-        <text class="add-icon" @click="addNode(node)" :x="points.iconPoint.x" :y="points.iconPoint.y" font-family="Arial" font-size="25" text-anchor="middle" dy=".3em" style="cursor: pointer;" >
+        <text class="add-icon" @click="addNode(node)" :x="points.iconPoint.x" :y="points.iconPoint.y" font-family="Arial" font-size="25"
+        text-anchor="middle" dy=".3em" style="cursor: pointer;" >
           ⊕
         </text>
       </svg>
@@ -69,6 +70,7 @@ export default defineComponent({
     const addNode=(prveNode:IActionNode)=>{
       context.emit('addNode',props.inputPoint);
     }
+
     return {
       node: props.actionNode,
       hasBranch,
@@ -91,9 +93,17 @@ export default defineComponent({
 }
 
 .add-icon {
-  stroke: $blue-7;
-  fill: $blue-7;
+  stroke: $blue-8;
+  fill: $blue-8;
   font-family: Arial;
   pointer-events: all;
+  font-size: 2.0em;
+}
+
+.add-icon:hover{
+  stroke: $blue-8;
+  fill:$blue-8;
+  font-weight: bold;
+  font-size: 2.4em;
 }
 </style>

frontend/src/pages/FlowChartTest.vue

@@ -1,7 +1,9 @@
 <template>
   <q-page>
       <div class="flowchart">
-        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index" :actionNode="node" @addNode="addNode"></node-item>
+        <node-item v-for="(node,index) in refFlow.actionNodes" :key="index"
+         :isSelected="node===activeNode" :actionNode="node"
+         @addNode="addNode" @nodeSelected="onNodeSelected"></node-item>
       </div>
   </q-page>
   <show-dialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
@@ -16,8 +18,8 @@ import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 
-const rootAction:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
-const actionFlow: ActionFlow = new ActionFlow(rootAction);
+const rootNode:RootAction =new RootAction("app.record.create.submit","レコード追加画面","保存するとき");
+const actionFlow: ActionFlow = new ActionFlow(rootNode);
 actionFlow.addNode(new ActionNode('自動採番','文書番号を自動採番する',''));
 actionFlow.addNode(new ActionNode('入力データ取得','電話番号を取得する',''));
 const branchNode = actionFlow.addNode(new ActionNode('条件分岐','電話番号入力形式チャック','',['はい','いいえ'] ));
@@ -26,6 +28,7 @@ actionFlow.addNode(new ActionNode('エラー表示','エラー表示して保存
 // ref関数を使ってtemplateとバインド
 const refFlow = ref(actionFlow);
 const showAddAction=ref(false);
+const activeNode =ref(rootNode);
 
 const addActionNode=(action:IActionNode)=>{
   refFlow.value.actionNodes.push(action);
@@ -34,6 +37,14 @@ const addActionNode=(action:IActionNode)=>{
 const addNode=(node:IActionNode,inputPoint:string)=>{
   showAddAction.value=true;
 }
+
+const onNodeSelected=(node:IActionNode)=>{
+  activeNode.value=node;
+}
+
+const closeDg=(val :any)=>{
+  console.log("Dialog closed->",val);
+}
 </script>
 
 <style lang="scss">