newcat · starker-xp · Feb 1, 2024
diff --git a/packages/renderer-vue/src/editor/Editor.vue b/packages/renderer-vue/src/editor/Editor.vue
@@ -6,11 +6,13 @@
         :class="{
             'baklava-ignore-mouse': !!temporaryConnection.temporaryConnection.value || panZoom.dragging.value,
             '--temporary-connection': !!temporaryConnection.temporaryConnection.value,
+            '--pan-can-move': keyDownActive && !panZoom.dragging.value,
+            '--pan-move': keyDownActive && panZoom.dragging.value,
         }"
         @pointermove.self="onPointerMove"
         @pointerdown="onPointerDown"
         @pointerup="onPointerUp"
-        @wheel.self="panZoom.onMouseWheel"
+        @wheel.self="onWheel"
         @keydown="keyDown"
         @keyup="keyUp"
         @contextmenu="contextMenu.open"
@@ -50,13 +52,15 @@
                         :selected="selectedNodes.includes(node)"
                         :dragging="dragMoves[idx].dragging.value"
                         @select="selectNode(node)"
+                        @unselect="unselectNode(node)"
                         @start-drag="startDrag"
                     >
                         <Node
                             :node="node"
                             :selected="selectedNodes.includes(node)"
                             :dragging="dragMoves[idx].dragging.value"
                             @select="selectNode(node)"
+                            @unselect="unselectNode(node)"
                             @start-drag="startDrag"
                         />
                     </slot>
@@ -82,6 +86,17 @@
                 @click="contextMenu.onClick"
             />
         </slot>
+
+        <div
+            v-if="isSelecting"
+            class="selection-box"
+            :style="{
+                width: Math.abs(endX - startX) + 'px',
+                height: Math.abs(endY - startY) + 'px',
+                left: (endX > startX ? startX : endX) + 'px',
+                top: (endY > startY ? startY : endY) + 'px',
+            }"
+        />
     </div>
 </template>
 
@@ -92,6 +107,7 @@ import { AbstractNode } from "@baklavajs/core";
 import { IBaklavaViewModel } from "../viewModel";
 import { providePlugin, useDragMove } from "../utility";
 import { usePanZoom } from "./panZoom";
+import { useSelectionBox } from "./selectionBox";
 import { useTemporaryConnection } from "./temporaryConnection";
 import { useContextMenu } from "./contextMenu";
 
@@ -123,6 +139,10 @@ const selectedNodes = computed(() => props.viewModel.displayedGraph.selectedNode
 const panZoom = usePanZoom();
 const temporaryConnection = useTemporaryConnection();
 const contextMenu = useContextMenu(viewModelRef);
+const keyDownActive = ref(false);
+
+const selectionBox = useSelectionBox(el);
+const { isSelecting, startX, startY, endX, endY } = selectionBox;
 
 const nodeContainerStyle = computed(() => ({
     ...panZoom.styles.value,
@@ -136,7 +156,12 @@ props.viewModel.editor.hooks.load.subscribe(token, (s) => {
 });
 
 const onPointerMove = (ev: PointerEvent) => {
-    panZoom.onPointerMove(ev);
+    if (keyDownActive.value) {
+        panZoom.onPointerMove(ev);
+    }
+    if (!keyDownActive.value) {
+        selectionBox.onPointerMove(ev);
+    }
     temporaryConnection.onMouseMove(ev);
 };
 
@@ -145,6 +170,9 @@ const onPointerDown = (ev: PointerEvent) => {
         if (ev.target === el.value) {
             unselectAllNodes();
             panZoom.onPointerDown(ev);
+            if (!keyDownActive.value) {
+                selectionBox.onPointerDown(ev);
+            }
         }
         temporaryConnection.onMouseDown();
     }
@@ -153,17 +181,29 @@ const onPointerDown = (ev: PointerEvent) => {
 const onPointerUp = (ev: PointerEvent) => {
     panZoom.onPointerUp(ev);
     temporaryConnection.onMouseUp();
+    if (!keyDownActive.value) {
+        selectionBox.onPointerUp(ev);
+    }
+};
+
+const onWheel = (ev: WheelEvent) => {
+    panZoom.onMouseWheel(ev);
 };
 
 const keyDown = (ev: KeyboardEvent) => {
     if (ev.key === "Tab") {
         ev.preventDefault();
     }
     props.viewModel.commandHandler.handleKeyDown(ev);
+    if (ev.key === "Control") {
+        keyDownActive.value = true;
+        selectionBox.unselect();
+    }
 };
 
 const keyUp = (ev: KeyboardEvent) => {
     props.viewModel.commandHandler.handleKeyUp(ev);
+    keyDownActive.value = false;
 };
 
 const selectNode = (node: AbstractNode) => {
@@ -173,6 +213,14 @@ const selectNode = (node: AbstractNode) => {
     props.viewModel.displayedGraph.selectedNodes.push(node);
 };
 
+const unselectNode = (node: AbstractNode) => {
+    if (["Control"].some((k) => props.viewModel.commandHandler.pressedKeys.includes(k))) {
+        props.viewModel.displayedGraph.selectedNodes = props.viewModel.displayedGraph.selectedNodes.filter(
+            (selected: AbstractNode) => selected !== node,
+        );
+    }
+};
+
 const unselectAllNodes = () => {
     props.viewModel.displayedGraph.selectedNodes = [];
 };

diff --git a/packages/renderer-vue/src/editor/selectionBox.ts b/packages/renderer-vue/src/editor/selectionBox.ts
@@ -0,0 +1,115 @@
+import { computed, ComputedRef, ref, Ref } from "vue";
+import { useGraph, useViewModel } from "../utility";
+import { AbstractNode } from "@baklavajs/core";
+
+interface SelectionBoxState {
+    isSelecting: Ref<boolean>;
+    startX: Ref<number>;
+    startY: Ref<number>;
+    endX: Ref<number>;
+    endY: Ref<number>;
+}
+
+interface SelectionBoxRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+
+export function useSelectionBox(editorEl: Ref<HTMLElement | null>) {
+    const { viewModel } = useViewModel();
+    const { graph } = useGraph();
+
+    const nodes = computed(() => graph.value.nodes) as ComputedRef<AbstractNode[]>;
+
+    const state: SelectionBoxState = {
+        isSelecting: ref(false),
+        startX: ref(0),
+        startY: ref(0),
+        endX: ref(0),
+        endY: ref(0),
+    };
+
+    const onPointerMove = (ev: PointerEvent) => {
+        if (state.isSelecting.value) {
+            state.startX.value = ev.clientX - editorEl.value!.getBoundingClientRect().left;
+            state.startY.value = ev.clientY - editorEl.value!.getBoundingClientRect().top;
+        }
+    };
+
+    const onPointerDown = (ev: PointerEvent) => {
+        // Start the selection box
+        state.isSelecting.value = true;
+        state.endX.value = ev.clientX - editorEl.value!.getBoundingClientRect().left;
+        state.endY.value = ev.clientY - editorEl.value!.getBoundingClientRect().top;
+    };
+
+    const onPointerUp = (ev: PointerEvent) => {
+        if (state.isSelecting.value) {
+            state.startX.value = ev.clientX - editorEl.value!.getBoundingClientRect().left;
+            state.startY.value = ev.clientY - editorEl.value!.getBoundingClientRect().top;
+            state.isSelecting.value = false;
+            handleSelection();
+        }
+    };
+
+    const handleSelection = () => {
+        const selectedNodes = getNodesInSelection();
+        for (const node of selectedNodes) {
+            viewModel.value.displayedGraph.selectedNodes.push(node);
+        }
+    };
+
+    const getNodesInSelection = () => {
+        const selectionBoxRect = getSelectionBoxRect();
+        return nodes.value.filter((node) => {
+            const nodeRect = getNodeRect(node);
+            return isRectOverlap(selectionBoxRect, nodeRect);
+        });
+    };
+
+    const getSelectionBoxRect = (): SelectionBoxRect => {
+        const editor = document.querySelector(".baklava-editor") as Element;
+        const editorBounding = editor.getBoundingClientRect();
+
+        return {
+            left: Math.min(state.startX.value, state.endX.value) - editorBounding.left,
+            top: Math.min(state.startY.value, state.endY.value) - editorBounding.top,
+            right: Math.max(state.startX.value, state.endX.value),
+            bottom: Math.max(state.startY.value, state.endY.value),
+        };
+    };
+
+    const getNodeRect = (node: AbstractNode): SelectionBoxRect => {
+        const domNode = document.getElementById(node.id);
+        const rect = domNode ? domNode.getBoundingClientRect() : { x: 0, y: 0, width: 0, height: 0 };
+        return {
+            left: rect.x,
+            top: rect.y,
+            right: rect.x + rect.width,
+            bottom: rect.y + rect.height,
+        };
+    };
+
+    const isRectOverlap = (rect1: SelectionBoxRect, rect2: SelectionBoxRect) => {
+        return (
+            rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
+        );
+    };
+
+    const unselect = () => {
+        state.isSelecting.value = false;
+    };
+    return {
+        isSelecting: state.isSelecting,
+        startX: state.startX,
+        startY: state.startY,
+        endX: state.endX,
+        endY: state.endY,
+        onPointerMove,
+        onPointerDown,
+        onPointerUp,
+        unselect,
+    };
+}
diff --git a/packages/renderer-vue/src/node/Node.vue b/packages/renderer-vue/src/node/Node.vue
@@ -6,7 +6,7 @@
         :class="classes"
         :style="styles"
         :data-node-type="node.type"
-        @pointerdown="select"
+        @pointerdown="toogleSelect"
     >
         <div v-if="viewModel.settings.nodes.resizable" class="__resize-handle" @mousedown="startResize" />
 
@@ -84,6 +84,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
     (e: "select"): void;
+    (e: "unselect"): void;
     (e: "start-drag", ev: PointerEvent): void;
 }>();
 
@@ -129,11 +130,20 @@ const select = () => {
     emit("select");
 };
 
-const startDrag = (ev: PointerEvent) => {
+const unselect = () => {
+    emit("unselect");
+};
+
+const toogleSelect = () => {
     if (!props.selected) {
         select();
+        return;
     }
+    unselect();
+};
 
+const startDrag = (ev: PointerEvent) => {
+    toogleSelect();
     emit("start-drag", ev);
 };
 

diff --git a/packages/themes/src/classic/components/node-editor.scss b/packages/themes/src/classic/components/node-editor.scss
@@ -20,6 +20,14 @@
         pointer-events: none !important;
     }
 
+    .selection-box {
+        position: absolute;
+        border: 3px dashed var(--baklava-selectionbox-color-border);
+        background-color: var(--baklava-selectionbox-color-background);
+        pointer-events: none;
+        opacity: 0.8;
+    }
+
     & *:not(input):not(textarea) {
         user-select: none;
         -moz-user-select: none;
@@ -42,6 +50,12 @@
     &.--temporary-connection {
         cursor: crosshair;
     }
+    &.--pan-move {
+        cursor: grabbing;
+    }
+    &.--pan-can-move {
+        cursor: grab;
+    }
 
     .connections-container {
         position: absolute;

diff --git a/packages/themes/src/classic/variables.scss b/packages/themes/src/classic/variables.scss
@@ -51,4 +51,8 @@
 
     // Misc
     --baklava-visual-transition: 0.1s linear;
+
+    // Selection box
+    --baklava-selectionbox-color-border: #1b202c;
+    --baklava-selectionbox-color-background: var(--baklava-node-color-hover);
 }
diff --git a/packages/themes/src/syrup-dark/variables.scss b/packages/themes/src/syrup-dark/variables.scss
@@ -51,4 +51,8 @@
 
     // Misc
     --baklava-visual-transition: 0.1s linear;
+
+    // Selection box
+    --baklava-selectionbox-color-border: #1b202c;
+    --baklava-selectionbox-color-background: var(--baklava-node-color-hover);
 }