Merge pull request #341 from yojeek/2.0-move-multiple-nodes

Move multiple nodes at once
newcat · Nov 21, 2023 · 5d00311 · 5d00311
2 parents 353388d + b6a3815
commit 5d00311
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 17 deletions.
diff --git a/packages/renderer-vue/src/editor/Editor.vue b/packages/renderer-vue/src/editor/Editor.vue
@@ -42,9 +42,22 @@
 
         <div class="node-container" :style="nodeContainerStyle">
             <transition-group name="fade">
-                <template v-for="node in nodes" :key="node.id + counter.toString()">
-                    <slot name="node" :node="node" :selected="selectedNodes.includes(node)" @select="selectNode(node)">
-                        <Node :node="node" :selected="selectedNodes.includes(node)" @select="selectNode(node)" />
+                <template v-for="(node, idx) in nodes" :key="node.id + counter.toString()">
+                    <slot
+                        name="node"
+                        :node="node"
+                        :selected="selectedNodes.includes(node)"
+                        :dragging="dragMoves[idx].dragging.value"
+                        @select="selectNode(node)"
+                        @start-drag="startDrag"
+                    >
+                        <Node
+                            :node="node"
+                            :selected="selectedNodes.includes(node)"
+                            :dragging="dragMoves[idx].dragging.value"
+                            @select="selectNode(node)"
+                            @start-drag="startDrag"
+                        />
                     </slot>
                 </template>
             </transition-group>
@@ -67,7 +80,7 @@ import { AbstractNode } from "@baklavajs/core";
 import { IBaklavaViewModel } from "../viewModel";
 import { usePanZoom } from "./panZoom";
 import { useTemporaryConnection } from "./temporaryConnection";
-import { providePlugin } from "../utility";
+import { providePlugin, useDragMove } from "../utility";
 
 import Background from "./Background.vue";
 import Node from "../node/Node.vue";
@@ -89,6 +102,7 @@ const el = ref<HTMLElement | null>(null);
 provide("editorEl", el);
 
 const nodes = computed(() => props.viewModel.displayedGraph.nodes);
+const dragMoves = computed(() => props.viewModel.displayedGraph.nodes.map((n) => useDragMove(toRef(n, "position"))));
 const connections = computed(() => props.viewModel.displayedGraph.connections);
 const selectedNodes = computed(() => props.viewModel.displayedGraph.selectedNodes);
 
@@ -147,4 +161,28 @@ const selectNode = (node: AbstractNode) => {
 const unselectAllNodes = () => {
     props.viewModel.displayedGraph.selectedNodes = [];
 };
+
+const startDrag = (ev: PointerEvent) => {
+    for (const selectedNode of props.viewModel.displayedGraph.selectedNodes) {
+        const idx = nodes.value.indexOf(selectedNode);
+        const dragMove = dragMoves.value[idx];
+        dragMove.onPointerDown(ev);
+
+        document.addEventListener("pointermove", dragMove.onPointerMove);
+    }
+
+    document.addEventListener("pointerup", stopDrag);
+};
+
+const stopDrag = () => {
+    for (const selectedNode of props.viewModel.displayedGraph.selectedNodes) {
+        const idx = nodes.value.indexOf(selectedNode);
+        const dragMove = dragMoves.value[idx];
+        dragMove.onPointerUp();
+
+        document.removeEventListener("pointermove", dragMove.onPointerMove);
+    }
+
+    document.removeEventListener("pointerup", stopDrag);
+};
 </script>
diff --git a/packages/renderer-vue/src/node/Node.vue b/packages/renderer-vue/src/node/Node.vue
@@ -64,9 +64,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, toRef, nextTick, onUpdated, onMounted } from "vue";
+import { ref, computed, nextTick, onUpdated, onMounted } from "vue";
 import { AbstractNode, GRAPH_NODE_TYPE_PREFIX, IGraphNode } from "@baklavajs/core";
-import { useDragMove, useGraph, useViewModel } from "../utility";
+import { useGraph, useViewModel } from "../utility";
 
 import ContextMenu from "../components/ContextMenu.vue";
 import VerticalDots from "../icons/VerticalDots.vue";
@@ -76,17 +76,18 @@ const props = withDefaults(
     defineProps<{
         node: AbstractNode;
         selected?: boolean;
+        dragging?: boolean;
     }>(),
     { selected: false },
 );
 
 const emit = defineEmits<{
     (e: "select"): void;
+    (e: "start-drag", ev: PointerEvent): void;
 }>();
 
 const { viewModel } = useViewModel();
 const { graph, switchGraph } = useGraph();
-const dragMove = useDragMove(toRef(props.node, "position"));
 
 const el = ref<HTMLElement | null>(null);
 const renaming = ref(false);
@@ -109,7 +110,7 @@ const contextMenuItems = computed(() => {
 
 const classes = computed(() => ({
     "--selected": props.selected,
-    "--dragging": dragMove.dragging.value,
+    "--dragging": props.dragging,
     "--two-column": !!props.node.twoColumn,
 }));
 
@@ -127,16 +128,11 @@ const select = () => {
 };
 
 const startDrag = (ev: PointerEvent) => {
-    dragMove.onPointerDown(ev);
-    document.addEventListener("pointermove", dragMove.onPointerMove);
-    document.addEventListener("pointerup", stopDrag);
-    select();
-};
+    if (!props.selected) {
+        select();
+    }
 
-const stopDrag = () => {
-    dragMove.onPointerUp();
-    document.removeEventListener("pointermove", dragMove.onPointerMove);
-    document.removeEventListener("pointerup", stopDrag);
+    emit("start-drag", ev);
 };
 
 const openContextMenu = () => {