@fieldnotes/core 0.4.1 → 0.5.0

package/dist/index.cjs

@@ -69,6 +69,7 @@ __export(index_exports, {
   isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
   parseState: () => parseState,
+  snapPoint: () => snapPoint,
   unbindArrow: () => unbindArrow,
   updateBoundArrow: () => updateBoundArrow
 });
@@ -195,6 +196,14 @@ function migrateElement(obj) {
   }
 }
 
+// src/core/snap.ts
+function snapPoint(point, gridSize) {
+  return {
+    x: Math.round(point.x / gridSize) * gridSize || 0,
+    y: Math.round(point.y / gridSize) * gridSize || 0
+  };
+}
+
 // src/core/auto-save.ts
 var DEFAULT_KEY = "fieldnotes-autosave";
 var DEFAULT_DEBOUNCE_MS = 1e3;
@@ -1577,6 +1586,7 @@ var Viewport = class {
     this.container = container;
     this.camera = new Camera(options.camera);
     this.background = new Background(options.background);
+    this._gridSize = options.background?.spacing ?? 24;
     this.store = new ElementStore();
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
@@ -1599,7 +1609,9 @@ var Viewport = class {
       editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
-      }
+      },
+      snapToGrid: false,
+      gridSize: this._gridSize
     };
     this.inputHandler = new InputHandler(this.wrapper, this.camera, {
       toolManager: this.toolManager,
@@ -1644,6 +1656,8 @@ var Viewport = class {
   toolContext;
   resizeObserver = null;
   animFrameId = 0;
+  _snapToGrid = false;
+  _gridSize;
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
@@ -1651,6 +1665,13 @@ var Viewport = class {
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
+  get snapToGrid() {
+    return this._snapToGrid;
+  }
+  setSnapToGrid(enabled) {
+    this._snapToGrid = enabled;
+    this.toolContext.snapToGrid = enabled;
+  }
   requestRender() {
     this.needsRender = true;
   }
@@ -2399,10 +2420,13 @@ var SelectTool = class {
     this.mode = { type: "idle" };
     ctx.setCursor?.("default");
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.lastWorld = world;
+    this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
@@ -2455,9 +2479,10 @@ var SelectTool = class {
     }
     if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
       ctx.setCursor?.("move");
-      const dx = world.x - this.lastWorld.x;
-      const dy = world.y - this.lastWorld.y;
-      this.lastWorld = world;
+      const snapped = this.snap(world, ctx);
+      const dx = snapped.x - this.lastWorld.x;
+      const dy = snapped.y - this.lastWorld.y;
+      this.lastWorld = snapped;
       for (const id of this._selectedIds) {
         const el = ctx.store.getById(id);
         if (!el || el.locked) continue;
@@ -2806,7 +2831,7 @@ var ArrowTool = class {
       this.fromBinding = { elementId: target.id };
       this.fromTarget = target;
     } else {
-      this.start = world;
+      this.start = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.fromBinding = void 0;
       this.fromTarget = null;
     }
@@ -2823,7 +2848,7 @@ var ArrowTool = class {
       this.end = getElementCenter(target);
       this.toTarget = target;
     } else {
-      this.end = world;
+      this.end = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.toTarget = null;
     }
     ctx.requestRender();
@@ -2918,7 +2943,10 @@ var NoteTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const note = createNote({
       position: world,
       size: { ...this.size },
@@ -2959,7 +2987,10 @@ var TextTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const textEl = createText({
       position: world,
       fontSize: this.fontSize,
@@ -3041,12 +3072,12 @@ var ShapeTool = class {
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
-    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.start = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     this.end = { ...this.start };
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
-    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -3110,6 +3141,9 @@ var ShapeTool = class {
     }
     return { position: { x, y }, size: { w, h } };
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onKeyDown = (e) => {
     if (e.key === "Shift") this.shiftHeld = true;
   };
@@ -3119,7 +3153,7 @@ var ShapeTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.4.1";
+var VERSION = "0.5.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -3171,6 +3205,7 @@ var VERSION = "0.4.1";
   isBindable,
   isNearBezier,
   parseState,
+  snapPoint,
   unbindArrow,
   updateBoundArrow
 });