From 1d6f4cdda4a2e949496376e118f52bdc08cd7253 Mon Sep 17 00:00:00 2001
From: Jonathan Fishner <jonathanfishner11@gmail.com>
Date: Wed, 3 Dec 2025 18:45:24 +0200
Subject: [PATCH] fix: shift key for canvas selection + cursor indicator (#993)

* fix: add shift+click multi-selection with crosshair cursor on canvas

* fix

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
---
 src/index.css                                             | 5 +++++
 src/lib/data/import-metadata/scripts/postgres-script.ts   | 2 +-
 .../dbml-export/__tests__/dbml-self-referencing.test.ts   | 4 ----
 .../dbml-import/__tests__/dbml-schema-handling.test.ts    | 2 --
 src/pages/editor-page/canvas/canvas.tsx                   | 8 +++++++-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/index.css b/src/index.css
index bf5e471f..8149ea1b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,6 +7,11 @@
         @apply cursor-default;
     }
 
+    .react-flow.canvas-cursor-multi-select .react-flow__pane,
+    .react-flow.canvas-cursor-multi-select .react-flow__node {
+        cursor: crosshair !important;
+    }
+
     .react-flow.nodes-animated .react-flow__node {
         @apply transition-[width];
         @apply duration-100;
diff --git a/src/lib/data/import-metadata/scripts/postgres-script.ts b/src/lib/data/import-metadata/scripts/postgres-script.ts
index 0fbe76a0..37d6f967 100644
--- a/src/lib/data/import-metadata/scripts/postgres-script.ts
+++ b/src/lib/data/import-metadata/scripts/postgres-script.ts
@@ -336,7 +336,7 @@ cols AS (
             JOIN pg_class c ON c.oid = t.typrelid
             JOIN pg_attribute a ON a.attrelid = c.oid
             WHERE t.typtype = 'c'
-              AND c.relkind = 'c'  -- ✅ Only user-defined composite types
+              AND c.relkind = 'c'  -- Only user-defined composite types
               AND a.attnum > 0 AND NOT a.attisdropped
               AND n.nspname NOT IN ('pg_catalog', 'information_schema') ${
                   databaseEdition === DatabaseEdition.POSTGRESQL_TIMESCALE
diff --git a/src/lib/dbml/dbml-export/__tests__/dbml-self-referencing.test.ts b/src/lib/dbml/dbml-export/__tests__/dbml-self-referencing.test.ts
index 30031907..909fee59 100644
--- a/src/lib/dbml/dbml-export/__tests__/dbml-self-referencing.test.ts
+++ b/src/lib/dbml/dbml-export/__tests__/dbml-self-referencing.test.ts
@@ -44,10 +44,6 @@ Table "finance"."general_ledger" {
         expect(exportResult.standardDbml).toMatch(
             /"finance"\."general_ledger"\."ledger_id"\s*<\s*"finance"\."general_ledger"\."reversal_id"/
         );
-
-        console.log(
-            '✅ Self-referencing relationship preserved in DBML export'
-        );
     });
 
     it('should handle self-referencing relationships in employee hierarchy', async () => {
diff --git a/src/lib/dbml/dbml-import/__tests__/dbml-schema-handling.test.ts b/src/lib/dbml/dbml-import/__tests__/dbml-schema-handling.test.ts
index e811ac60..f460dd9f 100644
--- a/src/lib/dbml/dbml-import/__tests__/dbml-schema-handling.test.ts
+++ b/src/lib/dbml/dbml-import/__tests__/dbml-schema-handling.test.ts
@@ -395,8 +395,6 @@ describe('DBML Schema Handling - Fantasy Realm Database', () => {
 
             // Perform 3 round-trips
             for (let cycle = 1; cycle <= 3; cycle++) {
-                console.log(`🔄 Round-trip cycle ${cycle}`);
-
                 // Export
                 const exported = generateDBMLFromDiagram(currentDiagram);
 
diff --git a/src/pages/editor-page/canvas/canvas.tsx b/src/pages/editor-page/canvas/canvas.tsx
index ffe1aa0e..99801870 100644
--- a/src/pages/editor-page/canvas/canvas.tsx
+++ b/src/pages/editor-page/canvas/canvas.tsx
@@ -26,6 +26,7 @@ import {
     Controls,
     useReactFlow,
     useKeyPress,
+    SelectionMode,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import equal from 'fast-deep-equal';
@@ -1550,7 +1551,10 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
                 <ReactFlow
                     onlyRenderVisibleElements
                     colorMode={effectiveTheme}
-                    className="canvas-cursor-default nodes-animated"
+                    className={cn('nodes-animated', {
+                        'canvas-cursor-multi-select': shiftPressed,
+                        'canvas-cursor-default': !shiftPressed,
+                    })}
                     nodes={nodesWithCursor}
                     edges={edgesWithFloating}
                     onNodesChange={onNodesChangeHandler}
@@ -1571,9 +1575,11 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
                     panOnScroll={scrollAction === 'pan'}
                     snapToGrid={shiftPressed || snapToGridEnabled}
                     snapGrid={[20, 20]}
+                    selectionMode={SelectionMode.Full}
                     onPaneClick={onPaneClickHandler}
                     connectionLineComponent={ConnectionLine}
                     deleteKeyCode={['Backspace', 'Delete']}
+                    multiSelectionKeyCode={['Shift', 'Meta', 'Control']}
                 >
                     <Controls
                         position="top-left"