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

@@ -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;

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

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 () => {

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);
 

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"