@fieldnotes/core 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(index_exports, {
   PencilTool: () => PencilTool,
   RemoveElementCommand: () => RemoveElementCommand,
   SelectTool: () => SelectTool,
+  ShapeTool: () => ShapeTool,
   TextTool: () => TextTool,
   ToolManager: () => ToolManager,
   UpdateElementCommand: () => UpdateElementCommand,
@@ -51,6 +52,7 @@ __export(index_exports, {
   createId: () => createId,
   createImage: () => createImage,
   createNote: () => createNote,
+  createShape: () => createShape,
   createStroke: () => createStroke,
   createText: () => createText,
   exportState: () => exportState,
@@ -144,7 +146,7 @@ function validateState(data) {
   }
   cleanBindings(obj["elements"]);
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -185,6 +187,9 @@ function migrateElement(obj) {
       }
     }
   }
+  if (obj["type"] === "shape" && typeof obj["shape"] !== "string") {
+    obj["shape"] = "rectangle";
+  }
 }
 
 // src/core/auto-save.ts
@@ -768,7 +773,7 @@ function isNearLine(point, a, b, threshold) {
 }
 
 // src/elements/arrow-binding.ts
-var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html"]);
+var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
   return BINDABLE_TYPES.has(element.type);
 }
@@ -988,6 +993,9 @@ var ElementRenderer = class {
       case "arrow":
         this.renderArrow(ctx, element);
         break;
+      case "shape":
+        this.renderShape(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1080,6 +1088,49 @@ var ElementRenderer = class {
     }
     return { visualFrom, visualTo };
   }
+  renderShape(ctx, shape) {
+    ctx.save();
+    if (shape.fillColor !== "none") {
+      ctx.fillStyle = shape.fillColor;
+      this.fillShapePath(ctx, shape);
+    }
+    if (shape.strokeWidth > 0) {
+      ctx.strokeStyle = shape.strokeColor;
+      ctx.lineWidth = shape.strokeWidth;
+      this.strokeShapePath(ctx, shape);
+    }
+    ctx.restore();
+  }
+  fillShapePath(ctx, shape) {
+    switch (shape.shape) {
+      case "rectangle":
+        ctx.fillRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+        break;
+      case "ellipse": {
+        const cx = shape.position.x + shape.size.w / 2;
+        const cy = shape.position.y + shape.size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+        ctx.fill();
+        break;
+      }
+    }
+  }
+  strokeShapePath(ctx, shape) {
+    switch (shape.shape) {
+      case "rectangle":
+        ctx.strokeRect(shape.position.x, shape.position.y, shape.size.w, shape.size.h);
+        break;
+      case "ellipse": {
+        const cx = shape.position.x + shape.size.w / 2;
+        const cy = shape.position.y + shape.size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, shape.size.w / 2, shape.size.h / 2, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        break;
+      }
+    }
+  }
 };
 
 // src/elements/note-editor.ts
@@ -1487,6 +1538,20 @@ function createHtmlElement(input) {
     size: input.size
   };
 }
+function createShape(input) {
+  return {
+    id: createId("shape"),
+    type: "shape",
+    position: input.position,
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    shape: input.shape ?? "rectangle",
+    size: input.size,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 2,
+    fillColor: input.fillColor ?? "none"
+  };
+}
 function createText(input) {
   return {
     id: createId("text"),
@@ -2928,8 +2993,123 @@ var ImageTool = class {
   }
 };
 
+// src/tools/shape-tool.ts
+var ShapeTool = class {
+  name = "shape";
+  drawing = false;
+  start = { x: 0, y: 0 };
+  end = { x: 0, y: 0 };
+  shiftHeld = false;
+  shape;
+  strokeColor;
+  strokeWidth;
+  fillColor;
+  constructor(options = {}) {
+    this.shape = options.shape ?? "rectangle";
+    this.strokeColor = options.strokeColor ?? "#000000";
+    this.strokeWidth = options.strokeWidth ?? 2;
+    this.fillColor = options.fillColor ?? "none";
+  }
+  setOptions(options) {
+    if (options.shape !== void 0) this.shape = options.shape;
+    if (options.strokeColor !== void 0) this.strokeColor = options.strokeColor;
+    if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
+    if (options.fillColor !== void 0) this.fillColor = options.fillColor;
+  }
+  onActivate(_ctx) {
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", this.onKeyDown);
+      window.addEventListener("keyup", this.onKeyUp);
+    }
+  }
+  onDeactivate(_ctx) {
+    this.shiftHeld = false;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("keydown", this.onKeyDown);
+      window.removeEventListener("keyup", this.onKeyUp);
+    }
+  }
+  onPointerDown(state, ctx) {
+    this.drawing = true;
+    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = { ...this.start };
+  }
+  onPointerMove(state, ctx) {
+    if (!this.drawing) return;
+    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    ctx.requestRender();
+  }
+  onPointerUp(_state, ctx) {
+    if (!this.drawing) return;
+    this.drawing = false;
+    const { position, size } = this.computeRect();
+    if (size.w === 0 || size.h === 0) return;
+    const shape = createShape({
+      position,
+      size,
+      shape: this.shape,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      fillColor: this.fillColor
+    });
+    ctx.store.add(shape);
+    ctx.requestRender();
+    ctx.switchTool?.("select");
+  }
+  renderOverlay(ctx) {
+    if (!this.drawing) return;
+    const { position, size } = this.computeRect();
+    if (size.w === 0 && size.h === 0) return;
+    ctx.save();
+    ctx.globalAlpha = 0.5;
+    ctx.strokeStyle = this.strokeColor;
+    ctx.lineWidth = this.strokeWidth;
+    if (this.fillColor !== "none") {
+      ctx.fillStyle = this.fillColor;
+    }
+    switch (this.shape) {
+      case "rectangle":
+        if (this.fillColor !== "none") {
+          ctx.fillRect(position.x, position.y, size.w, size.h);
+        }
+        ctx.strokeRect(position.x, position.y, size.w, size.h);
+        break;
+      case "ellipse": {
+        const cx = position.x + size.w / 2;
+        const cy = position.y + size.h / 2;
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, size.w / 2, size.h / 2, 0, 0, Math.PI * 2);
+        if (this.fillColor !== "none") ctx.fill();
+        ctx.stroke();
+        break;
+      }
+    }
+    ctx.restore();
+  }
+  computeRect() {
+    let x = Math.min(this.start.x, this.end.x);
+    let y = Math.min(this.start.y, this.end.y);
+    let w = Math.abs(this.end.x - this.start.x);
+    let h = Math.abs(this.end.y - this.start.y);
+    if (this.shiftHeld) {
+      const side = Math.max(w, h);
+      w = side;
+      h = side;
+      x = this.end.x >= this.start.x ? this.start.x : this.start.x - side;
+      y = this.end.y >= this.start.y ? this.start.y : this.start.y - side;
+    }
+    return { position: { x, y }, size: { w, h } };
+  }
+  onKeyDown = (e) => {
+    if (e.key === "Shift") this.shiftHeld = true;
+  };
+  onKeyUp = (e) => {
+    if (e.key === "Shift") this.shiftHeld = false;
+  };
+};
+
 // src/index.ts
-var VERSION = "0.3.1";
+var VERSION = "0.4.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -2952,6 +3132,7 @@ var VERSION = "0.3.1";
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
@@ -2963,6 +3144,7 @@ var VERSION = "0.3.1";
   createId,
   createImage,
   createNote,
+  createShape,
   createStroke,
   createText,
   exportState,