@fieldnotes/core 0.3.1 → 0.4.1

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,12 @@ 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/auto-save.ts
@@ -768,7 +776,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 +996,9 @@ var ElementRenderer = class {
       case "arrow":
         this.renderArrow(ctx, element);
         break;
+      case "shape":
+        this.renderShape(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1080,6 +1091,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
@@ -1446,7 +1500,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) {
@@ -1487,6 +1542,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"),
@@ -1831,6 +1900,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)",
@@ -1852,6 +1922,7 @@ var Viewport = class {
           node.textContent = element.text || "";
         }
         node.style.backgroundColor = element.backgroundColor;
+        node.style.color = element.textColor;
       }
     }
     if (element.type === "image") {
@@ -2830,13 +2901,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) {
@@ -2848,7 +2922,8 @@ var NoteTool = class {
     const note = createNote({
       position: world,
       size: { ...this.size },
-      backgroundColor: this.backgroundColor
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor
     });
     ctx.store.add(note);
     ctx.requestRender();
@@ -2928,8 +3003,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.1";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -2952,6 +3142,7 @@ var VERSION = "0.3.1";
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
@@ -2963,6 +3154,7 @@ var VERSION = "0.3.1";
   createId,
   createImage,
   createNote,
+  createShape,
   createStroke,
   createText,
   exportState,