Add grid snapping, @TODO: Add settings popup with grid settings + render grid.

components/canvas/CanvasNodeEditor.vue

@@ -34,14 +34,16 @@
 </template>
 
 <script setup lang="ts">
-import type { Direction } from '#shared/canvas.util';
+import { gridSnap, type Direction } from '#shared/canvas.util';
 import type { Element } from '../CanvasEditor.vue';
 import FakeA from '../prose/FakeA.vue';
 import type { CanvasNode } from '~/types/canvas';
 
-const { node, zoom } = defineProps<{
+const { node, zoom, snapping, grid } = defineProps<{
     node: CanvasNode
     zoom: number
+    snapping: boolean
+    grid: number
 }>();
 
 const emit = defineEmits<{
@@ -80,14 +82,20 @@ function resizeNode(e: MouseEvent, x: number, y: number, w: number, h: number) {
     e.stopImmediatePropagation();
 
     const startx = node.x, starty = node.y, startw = node.width, starth = node.height;
+    let realx = node.x, realy = node.y, realw = node.width, realh = node.height;
     const resizemove = (e: MouseEvent) => {
         if(e.button !== 0)
             return;
 
-        node.x += (e.movementX / zoom) * x;
-        node.y += (e.movementY / zoom) * y;
-        node.width += (e.movementX / zoom) * w;
-        node.height += (e.movementY / zoom) * h;
+        realx += (e.movementX / zoom) * x;
+        realy += (e.movementY / zoom) * y;
+        realw += (e.movementX / zoom) * w;
+        realh += (e.movementY / zoom) * h;
+
+        node.x = snapping ? gridSnap(realx, grid) : realx;
+        node.y = snapping ? gridSnap(realy, grid) : realy;
+        node.width = snapping ? gridSnap(realw, grid) : realw;
+        node.height = snapping ? gridSnap(realh, grid) : realh;
     };
     const resizeend = (e: MouseEvent) => {
         if(e.button !== 0)
@@ -126,12 +134,16 @@ function unselect() {
 }
 
 let lastx = 0, lasty = 0;
+let realx = 0, realy = 0;
 const dragmove = (e: MouseEvent) => {
     if(e.button !== 0)
         return;
 
-    node.x += e.movementX / zoom;
-    node.y += e.movementY / zoom;
+    realx += e.movementX / zoom;
+    realy += e.movementY / zoom;
+
+    node.x = snapping ? gridSnap(realx, grid) : realx;
+    node.y = snapping ? gridSnap(realy, grid) : realy;
 };
 const dragend = (e: MouseEvent) => {
     if(e.button !== 0)
@@ -148,6 +160,7 @@ const dragstart = (e: MouseEvent) => {
         return;
     
     lastx = node.x, lasty = node.y;
+    realx = node.x, realy = node.y;
 
     window.addEventListener('mousemove', dragmove, { passive: true });
     window.addEventListener('mouseup', dragend, { passive: true });