From be6b8b8b2cf32eeb41542882c6b6db4f07615f0d Mon Sep 17 00:00:00 2001
From: NathanViaud <nathan.viaud@inria.fr>
Date: Thu, 16 Mar 2023 16:06:48 +0100
Subject: [PATCH] Issue #156: nodes selection refactor

---
 src/features/ePocFlow/ePocFlow.vue          |  1 +
 src/features/ePocFlow/nodes/ChapterNode.vue |  1 +
 src/features/ePocFlow/nodes/ScreenNode.vue  | 21 +++++++++------------
 src/features/ePocFlow/nodes/ePocNode.vue    |  1 +
 src/global.scss                             | 12 +++++++-----
 src/shared/stores/editorStore.ts            |  4 +++-
 6 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue
index c1c0a7a3..79c25410 100644
--- a/src/features/ePocFlow/ePocFlow.vue
+++ b/src/features/ePocFlow/ePocFlow.vue
@@ -151,6 +151,7 @@ function onEdgeclick (event) {
         @dragover.prevent
         @dragenter.prevent
         @edge-click="onEdgeclick"
+        @pane-click="editorStore.closeFormPanel()"
     >
         <template #node-custom="{ id, data }">
             <ScreenNode :id="id" :data="data" />
diff --git a/src/features/ePocFlow/nodes/ChapterNode.vue b/src/features/ePocFlow/nodes/ChapterNode.vue
index 8f08d419..6b368fc6 100644
--- a/src/features/ePocFlow/nodes/ChapterNode.vue
+++ b/src/features/ePocFlow/nodes/ChapterNode.vue
@@ -42,6 +42,7 @@ const subtitle = computed(() => {
             :class-list="{ 'btn-content-blue' : false, 'clickable': true, 'btn-content-node': true, 'btn-content-large': true }"
             :subtitle="subtitle"
             @click="openForm()"
+            @mousedown="editorStore.closeFormPanel()"
         />
     </div>
     <Handle
diff --git a/src/features/ePocFlow/nodes/ScreenNode.vue b/src/features/ePocFlow/nodes/ScreenNode.vue
index 24a35cdf..45ef4d94 100644
--- a/src/features/ePocFlow/nodes/ScreenNode.vue
+++ b/src/features/ePocFlow/nodes/ScreenNode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Handle, Position, useVueFlow } from '@vue-flow/core';
 import ContentButton from '@/src/components/ContentButton.vue';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useEditorStore } from '@/src/shared/stores';
 import { NodeElement } from '@/src/shared/interfaces';
 
@@ -21,7 +21,7 @@ const props = defineProps<{
 }>();
 
 
-const { findNode, getSelectedNodes } = useVueFlow({ id: 'main' });
+const { findNode } = useVueFlow({ id: 'main' });
 
 const node = findNode(props.id);
 const dropped = ref(false);
@@ -116,14 +116,10 @@ function dragStart(event, element: NodeElement, index: number) {
     event.dataTransfer.setData('source', JSON.stringify({ parent: props.id, index: index}));
 }
 
-function cmdClick() {
+function closeFormPanel() {
     editorStore.closeFormPanel();
 }
 
-const isSelected = computed(() => {
-    return getSelectedNodes.value.find((selectedNode) => selectedNode.id === node.id);
-});
-
 </script>
 
 <template>
@@ -138,11 +134,12 @@ const isSelected = computed(() => {
             />
             <div
                 :id="'node'+ props.id"
-                :class=" { 'active': editorStore.openedNodeId ? editorStore.openedNodeId === props.id : false, 'selected': isSelected }"
+                :class=" { 'active': editorStore.openedNodeId ? editorStore.openedNodeId === props.id : false }"
                 class="node"
                 @click.exact="openPageForm(node.id, node.data.formType, node.data.formValues)"
-                @click.meta="cmdClick"
-                @click.ctrl="cmdClick"  
+                @click.meta="closeFormPanel"
+                @click.ctrl="closeFormPanel"
+                @mousedown="closeFormPanel"
                 @dragover="dragOver($event)"
                 @dragleave="dragLeave($event)"
                 @dragenter="dragEnter($event)"
@@ -166,8 +163,8 @@ const isSelected = computed(() => {
                                 :is-draggable="isQuestion"
                                 :class-list="{ 'btn-content-blue' : false, 'clickable': true, 'btn-content-node': true }"
                                 @click.exact="openForm(element)"
-                                @click.meta="cmdClick"
-                                @click.ctrl="cmdClick"
+                                @click.meta="closeFormPanel"
+                                @click.ctrl="closeFormPanel"
                                 @dragstart="dragStart($event, element, index)"
                             />
                         </div>
diff --git a/src/features/ePocFlow/nodes/ePocNode.vue b/src/features/ePocFlow/nodes/ePocNode.vue
index 613b6df5..3bc2a294 100644
--- a/src/features/ePocFlow/nodes/ePocNode.vue
+++ b/src/features/ePocFlow/nodes/ePocNode.vue
@@ -31,6 +31,7 @@ function openForm() {
             :class-list="{ 'btn-content-blue' : false, 'clickable': true, 'btn-content-node': true, 'btn-content-large': true }"
             subtitle="ePoc"
             @click="openForm()"
+            @mousedown="editorStore.closeFormPanel()"
         />
     </div>
 </template>
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 8858dfee..5b47d1c8 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -229,11 +229,6 @@ hr {
     box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);
     background-color: var(--node-active);
   } 
-  
-  &.selected {
-    border: 1px solid var(--editor-blue);
-    box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);  
-  }
 
   &-animate {
       padding: 1.5rem;
@@ -472,4 +467,11 @@ g.selected {
 .vue-flow__nodesselection-rect {
   padding: 2rem 1rem 1rem 1rem;
   transform: translate(-1rem, -2rem);
+}
+
+.vue-flow__node.selected {
+  .node {
+    border: 1px solid var(--editor-blue);
+    box-shadow: 0 1px 8px 0 var(--editor-blue-shadow);  
+  }
 }
\ No newline at end of file
diff --git a/src/shared/stores/editorStore.ts b/src/shared/stores/editorStore.ts
index 53f15199..b448b0a0 100644
--- a/src/shared/stores/editorStore.ts
+++ b/src/shared/stores/editorStore.ts
@@ -72,7 +72,9 @@ export const useEditorStore = defineStore('editor', {
             //? To be sure the view is notified of closing / reopening
             setTimeout(() => { 
                 this.formPanel = structuredClone(formsModel.find(form => form.type === formType));
-                document.querySelectorAll('.node.selected').forEach(node => node.classList.remove('selected'));
+            });
+            nodes.value.forEach((node) => {
+                node.selected = false;
             });
         },
         closeFormPanel(): void {
-- 
GitLab