diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue index c1c0a7a391e5028ecb854477b9e2a54bc9c939b2..79c25410ba6ca9a5584ea254e08eb9847d8cfd37 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 8f08d4190e450efd628fa0e5c23701177458f6a4..6b368fc6d076e8bbb5fdca6ecfbdaff0757ce264 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 24a35cdfbd05ebb78633e2e7a1175c52c3d98576..45ef4d94ae13bfa48d76c041be99ff61876c7ef9 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 613b6df56e5b4fbd5894a4931fa54f1653383737..3bc2a294fe78dbd9839331a5806bb635d5258dc1 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 8858dfee1242f9e054e747eaa40c75ecbd90ffac..5b47d1c88964d866ca819731440ad73b5a18dcdf 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 53f1519926b0e0dee00cd8ba62b6e63ef8ae52bd..b448b0a00e2ebf0431aa7aec5e6ed475aff10f4a 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 {