@fieldnotes/core 0.4.0 → 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
 });
@@ -190,6 +191,17 @@ function migrateElement(obj) {
   if (obj["type"] === "shape" && typeof obj["shape"] !== "string") {
     obj["shape"] = "rectangle";
   }
+  if (obj["type"] === "note" && typeof obj["textColor"] !== "string") {
+    obj["textColor"] = "#000000";
+  }
+}
+
+// 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
@@ -1497,7 +1509,8 @@ function createNote(input) {
     locked: input.locked ?? false,
     size: input.size ?? { w: 200, h: 100 },
     text: input.text ?? "",
-    backgroundColor: input.backgroundColor ?? "#ffeb3b"
+    backgroundColor: input.backgroundColor ?? "#ffeb3b",
+    textColor: input.textColor ?? "#000000"
   };
 }
 function createArrow(input) {
@@ -1573,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();
@@ -1595,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,
@@ -1640,6 +1656,8 @@ var Viewport = class {
   toolContext;
   resizeObserver = null;
   animFrameId = 0;
+  _snapToGrid = false;
+  _gridSize;
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
@@ -1647,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;
   }
@@ -1896,6 +1921,7 @@ var Viewport = class {
         node.dataset["initialized"] = "true";
         Object.assign(node.style, {
           backgroundColor: element.backgroundColor,
+          color: element.textColor,
           padding: "8px",
           borderRadius: "4px",
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
@@ -1917,6 +1943,7 @@ var Viewport = class {
           node.textContent = element.text || "";
         }
         node.style.backgroundColor = element.backgroundColor;
+        node.style.color = element.textColor;
       }
     }
     if (element.type === "image") {
@@ -2393,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) {
@@ -2449,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;
@@ -2800,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;
     }
@@ -2817,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();
@@ -2895,13 +2926,16 @@ var ArrowTool = class {
 var NoteTool = class {
   name = "note";
   backgroundColor;
+  textColor;
   size;
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
+    this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
   }
   setOptions(options) {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
+    if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
   }
   onPointerDown(_state, _ctx) {
@@ -2909,11 +2943,15 @@ 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 },
-      backgroundColor: this.backgroundColor
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor
     });
     ctx.store.add(note);
     ctx.requestRender();
@@ -2949,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,
@@ -3031,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) {
@@ -3100,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;
   };
@@ -3109,7 +3153,7 @@ var ShapeTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.4.0";
+var VERSION = "0.5.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -3161,6 +3205,7 @@ var VERSION = "0.4.0";
   isBindable,
   isNearBezier,
   parseState,
+  snapPoint,
   unbindArrow,
   updateBoundArrow
 });