diff --git a/src/features/ePocFlow/nodes/ScreenNode.vue b/src/features/ePocFlow/nodes/ScreenNode.vue index 9ef90e7b688506f88bc94dc463fb3b99e207354f..51ddee1829ce367fe4a7ece17d5412b437f5782d 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 { onMounted, ref } from 'vue'; +import { computed, 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 } = useVueFlow({ id: 'main' }); +const { findNode, getSelectedNodes } = useVueFlow({ id: 'main' }); const node = findNode(props.id); const dropped = ref(false); @@ -34,9 +34,15 @@ onMounted(() => { }); function openForm(element: NodeElement) { + document.querySelectorAll('.node.selected').forEach(node => node.classList.remove('selected')); editorStore.openFormPanel(element.id, element.formType, element.formValues, element.parentId); } +function openPageForm(id, formType, formValues) { + document.querySelectorAll('.node.selected').forEach(node => node.classList.remove('selected')); + editorStore.openFormPanel(id, formType, formValues); +} + let counter = 0; function dragLeave(event) { @@ -112,11 +118,21 @@ function dragStart(event, element: NodeElement, index: number) { event.dataTransfer.setData('source', JSON.stringify({ parent: props.id, index: index})); } +function cmdClick() { + editorStore.closeFormPanel(); +} + +const isSelected = computed(() => { + return getSelectedNodes.value.find((selectedNode) => selectedNode.id === node.id); +}); + </script> <template> <div - @click="editorStore.openFormPanel(node.id, node.data.formType, node.data.formValues)" + @click.exact="openPageForm(node.id, node.data.formType, node.data.formValues)" + @click.meta="cmdClick" + @click.ctrl="cmdClick" > <div class="container"> <p class="node-title">{{ node.data.formValues?.title || 'Page' }}</p> @@ -127,8 +143,8 @@ function dragStart(event, element: NodeElement, index: number) { :connectable="false" /> <div - :id="'node'+props.id" - :class=" { 'active': editorStore.openedNodeId ? editorStore.openedNodeId === props.id : false }" + :id="'node'+ props.id" + :class=" { 'active': editorStore.openedNodeId ? editorStore.openedNodeId === props.id : false, 'selected': isSelected }" class="node" @dragover="dragOver($event)" @dragleave="dragLeave($event)" @@ -152,7 +168,9 @@ function dragStart(event, element: NodeElement, index: number) { :is-active="editorStore.openedNodeId ? editorStore.openedNodeId === element.id : false" :is-draggable="isQuestion" :class-list="{ 'btn-content-blue' : false, 'clickable': true, 'btn-content-node': true}" - @click="openForm(element)" + @click.exact="openForm(element)" + @click.meta="cmdClick" + @click.ctrl="cmdClick" @dragstart="dragStart($event, element, index)" /> </div> diff --git a/src/global.scss b/src/global.scss index 1675e8685451b16baec7e82dfb72f822bfe68299..8858dfee1242f9e054e747eaa40c75ecbd90ffac 100644 --- a/src/global.scss +++ b/src/global.scss @@ -228,6 +228,11 @@ hr { border: 1px solid var(--editor-blue); 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 { @@ -456,4 +461,15 @@ g.selected { h1, h3, label { user-select: none; } +} + +.vue-flow__nodesselection-rect, .vue-flow__selection { + background-color: #00B3E920; + border: 2px dashed #00B3E9f0; + border-radius: 8px; +} + +.vue-flow__nodesselection-rect { + padding: 2rem 1rem 1rem 1rem; + transform: translate(-1rem, -2rem); } \ No newline at end of file