@fieldnotes/core 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -74,7 +74,16 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
+type ShapeKind = 'rectangle' | 'ellipse';
+interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shape: ShapeKind;
+    size: Size;
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -209,7 +218,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
 declare class ToolManager {
     private tools;
@@ -406,6 +415,9 @@ declare class ElementRenderer {
     private renderArrow;
     private renderArrowhead;
     private getVisualEndpoints;
+    private renderShape;
+    private fillShapePath;
+    private strokeShapePath;
 }
 
 declare class NoteEditor {
@@ -475,6 +487,15 @@ declare function createNote(input: NoteInput): NoteElement;
 declare function createArrow(input: ArrowInput): ArrowElement;
 declare function createImage(input: ImageInput): ImageElement;
 declare function createHtmlElement(input: HtmlInput): HtmlElement;
+interface ShapeInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare function createShape(input: ShapeInput): ShapeElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -679,6 +700,35 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.3.1";
+interface ShapeToolOptions {
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare class ShapeTool implements Tool {
+    readonly name = "shape";
+    private drawing;
+    private start;
+    private end;
+    private shiftHeld;
+    private shape;
+    private strokeColor;
+    private strokeWidth;
+    private fillColor;
+    constructor(options?: ShapeToolOptions);
+    setOptions(options: ShapeToolOptions): void;
+    onActivate(_ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private computeRect;
+    private onKeyDown;
+    private onKeyUp;
+}
+
+declare const VERSION = "0.4.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -74,7 +74,16 @@ interface TextElement extends BaseElement {
     color: string;
     textAlign: 'left' | 'center' | 'right';
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement;
+type ShapeKind = 'rectangle' | 'ellipse';
+interface ShapeElement extends BaseElement {
+    type: 'shape';
+    shape: ShapeKind;
+    size: Size;
+    strokeColor: string;
+    strokeWidth: number;
+    fillColor: string;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
 type ElementType = CanvasElement['type'];
 
 interface CanvasState {
@@ -209,7 +218,7 @@ interface Tool {
     onDeactivate?(ctx: ToolContext): void;
     renderOverlay?(ctx: CanvasRenderingContext2D): void;
 }
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text';
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
 
 declare class ToolManager {
     private tools;
@@ -406,6 +415,9 @@ declare class ElementRenderer {
     private renderArrow;
     private renderArrowhead;
     private getVisualEndpoints;
+    private renderShape;
+    private fillShapePath;
+    private strokeShapePath;
 }
 
 declare class NoteEditor {
@@ -475,6 +487,15 @@ declare function createNote(input: NoteInput): NoteElement;
 declare function createArrow(input: ArrowInput): ArrowElement;
 declare function createImage(input: ImageInput): ImageElement;
 declare function createHtmlElement(input: HtmlInput): HtmlElement;
+interface ShapeInput extends BaseDefaults {
+    position: Point;
+    size: Size;
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare function createShape(input: ShapeInput): ShapeElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -679,6 +700,35 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.3.1";
+interface ShapeToolOptions {
+    shape?: ShapeKind;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fillColor?: string;
+}
+declare class ShapeTool implements Tool {
+    readonly name = "shape";
+    private drawing;
+    private start;
+    private end;
+    private shiftHeld;
+    private shape;
+    private strokeColor;
+    private strokeWidth;
+    private fillColor;
+    constructor(options?: ShapeToolOptions);
+    setOptions(options: ShapeToolOptions): void;
+    onActivate(_ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private computeRect;
+    private onKeyDown;
+    private onKeyUp;
+}
+
+declare const VERSION = "0.4.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -70,7 +70,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");
@@ -111,6 +111,9 @@ function migrateElement(obj) {
       }
     }
   }
+  if (obj["type"] === "shape" && typeof obj["shape"] !== "string") {
+    obj["shape"] = "rectangle";
+  }
 }
 
 // src/core/auto-save.ts
@@ -694,7 +697,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);
 }
@@ -914,6 +917,9 @@ var ElementRenderer = class {
       case "arrow":
         this.renderArrow(ctx, element);
         break;
+      case "shape":
+        this.renderShape(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1006,6 +1012,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
@@ -1413,6 +1462,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"),
@@ -2854,8 +2917,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";
 export {
   AddElementCommand,
   ArrowTool,
@@ -2877,6 +3055,7 @@ export {
   PencilTool,
   RemoveElementCommand,
   SelectTool,
+  ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
@@ -2888,6 +3067,7 @@ export {
   createId,
   createImage,
   createNote,
+  createShape,
   createStroke,
   createText,
   exportState,