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

components/CanvasEditor.vue

@@ -63,12 +63,23 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 import { clamp } from '#shared/general.utils';
 import type { CanvasContent, CanvasEdge, CanvasNode } from '~/types/canvas';
 
-const canvas = defineModel<CanvasContent>({ required: true, });
+const canvas = defineModel<CanvasContent>({ required: true });
 
 const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
 const focusing = ref<Element>(), editing = ref<Element>();
 const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');
 const nodes = useTemplateRef<NodeEditor[]>('nodes'), edges = useTemplateRef<EdgeEditor[]>('edges');
+const canvasSettings = useCookie<{
+    snap: boolean,
+    size: number
+}>('canvasPreference', { default: () => ({ snap: true, size: 32 }) });
+const snap = computed({
+    get: () => canvasSettings.value.snap,
+    set: (value: boolean) => canvasSettings.value = { ...canvasSettings.value, snap: value },
+}), gridSize = computed({
+    get: () => canvasSettings.value.size,
+    set: (value: number) => canvasSettings.value = { ...canvasSettings.value, size: value },
+});
 
 const focused = computed(() => focusing.value ? focusing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === focusing.value!.id) : edges.value?.find(e => !!e && e.id === focusing.value!.id) : undefined), edited = computed(() => editing.value ? editing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === editing.value!.id) : edges.value?.find(e => !!e && e.id === editing.value!.id) : undefined);
 
@@ -618,7 +629,7 @@ useShortcuts({
                     </div>
                 </div>
                 <div>
-                    <CanvasNodeEditor v-for="node of canvas.nodes" :key="node.id" ref="nodes" :node="node" :zoom="zoom" @select="select" @edit="edit" @move="(i, x, y) => moveNode([i], x, y)" @resize="(i, x, y, w, h) => resizeNode([i], x, y, w, h)" @input="(id, text) => editNodeProperty([id], node.type === 'group' ? 'label' : 'text', text)" />
+                    <CanvasNodeEditor v-for="node of canvas.nodes" :key="node.id" ref="nodes" :node="node" :zoom="zoom" @select="select" @edit="edit" @move="(i, x, y) => moveNode([i], x, y)" @resize="(i, x, y, w, h) => resizeNode([i], x, y, w, h)" @input="(id, text) => editNodeProperty([id], node.type === 'group' ? 'label' : 'text', text)" :snapping="snap" :grid="gridSize" />
                 </div>
                 <div>
                     <CanvasEdgeEditor v-for="edge of canvas.edges" :key="edge.id" ref="edges" :edge="edge" :nodes="canvas.nodes!" @select="select" @edit="edit" @input="(id, text) => editEdgeProperty([id], 'label', text)" />

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