@tsdraw/core 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -11,6 +11,7 @@ interface DrawSegment {
 }
 type SizeStyle = 's' | 'm' | 'l' | 'xl';
 type DashStyle = 'draw' | 'solid' | 'dashed' | 'dotted';
+type FillStyle = 'none' | 'semi' | 'solid' | 'blank';
 type ColorStyle = string;
 interface DrawShape {
     id: ShapeId;
@@ -20,6 +21,7 @@ interface DrawShape {
     props: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
         scale: number;
         isPen: boolean;
@@ -66,6 +68,7 @@ interface TsdrawSessionStateSnapshot {
     drawStyle: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
     };
     selectedShapeIds: ShapeId[];
@@ -168,11 +171,13 @@ interface IEditor {
     getCurrentDrawStyle(): {
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     };
     setCurrentDrawStyle(partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>): void;
     panBy(dx: number, dy: number): void;
@@ -246,9 +251,10 @@ declare class CanvasRenderer implements ICanvasRenderer {
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
     private paintStroke;
     private paintDashedStroke;
+    private paintClosedShapeFill;
 }
 
-type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand';
+type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand' | 'square' | 'circle';
 type ToolId = DefaultToolId | (string & {});
 interface ToolDefinition {
     id: ToolId;
@@ -326,11 +332,13 @@ declare class Editor {
     getCurrentDrawStyle(): {
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     };
     setCurrentDrawStyle(partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>): void;
     setViewport(partial: Partial<Viewport>): void;
@@ -401,6 +409,76 @@ declare class PenDrawingState extends StateNode {
     private endStroke;
 }
 
+declare class SquareIdleState extends StateNode {
+    static id: string;
+    onPointerDown(info?: ToolPointerDownInfo): void;
+}
+
+interface ShapeBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+declare function buildSquareBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildRectangleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildDefaultCenteredRectangleBounds(centerX: number, centerY: number): ShapeBounds;
+declare function buildRectangleSegments(width: number, height: number): DrawSegment[];
+declare function buildCircleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildEllipseBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildDefaultCenteredEllipseBounds(centerX: number, centerY: number): ShapeBounds;
+declare function buildEllipseSegments(width: number, height: number): DrawSegment[];
+
+interface GeometricDrawingStateConfig {
+    idleStateId: string;
+    buildConstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
+    buildUnconstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
+    buildDefaultBounds: (centerX: number, centerY: number) => ShapeBounds;
+    buildSegments: (width: number, height: number) => DrawSegment[];
+}
+declare abstract class GeometricDrawingState extends StateNode {
+    private currentShapeId;
+    private startedAt;
+    protected abstract getConfig(): GeometricDrawingStateConfig;
+    onEnter(info?: ToolPointerDownInfo): void;
+    onPointerMove(): void;
+    onPointerUp(): void;
+    onCancel(): void;
+    onInterrupt(): void;
+    onKeyDown(): void;
+    onKeyUp(): void;
+    private completeShape;
+    private removeCurrentShape;
+    private getActiveShape;
+}
+
+declare class SquareDrawingState extends GeometricDrawingState {
+    static id: string;
+    protected getConfig(): {
+        idleStateId: string;
+        buildConstrainedBounds: typeof buildSquareBounds;
+        buildUnconstrainedBounds: typeof buildRectangleBounds;
+        buildDefaultBounds: typeof buildDefaultCenteredRectangleBounds;
+        buildSegments: typeof buildRectangleSegments;
+    };
+}
+
+declare class CircleIdleState extends StateNode {
+    static id: string;
+    onPointerDown(info?: ToolPointerDownInfo): void;
+}
+
+declare class CircleDrawingState extends GeometricDrawingState {
+    static id: string;
+    protected getConfig(): {
+        idleStateId: string;
+        buildConstrainedBounds: typeof buildCircleBounds;
+        buildUnconstrainedBounds: typeof buildEllipseBounds;
+        buildDefaultBounds: typeof buildDefaultCenteredEllipseBounds;
+        buildSegments: typeof buildEllipseSegments;
+    };
+}
+
 declare class EraserIdleState extends StateNode {
     static id: string;
     onPointerDown(info?: ToolPointerDownInfo): void;
@@ -550,4 +628,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface DrawSegment {
 }
 type SizeStyle = 's' | 'm' | 'l' | 'xl';
 type DashStyle = 'draw' | 'solid' | 'dashed' | 'dotted';
+type FillStyle = 'none' | 'semi' | 'solid' | 'blank';
 type ColorStyle = string;
 interface DrawShape {
     id: ShapeId;
@@ -20,6 +21,7 @@ interface DrawShape {
     props: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
         scale: number;
         isPen: boolean;
@@ -66,6 +68,7 @@ interface TsdrawSessionStateSnapshot {
     drawStyle: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
     };
     selectedShapeIds: ShapeId[];
@@ -168,11 +171,13 @@ interface IEditor {
     getCurrentDrawStyle(): {
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     };
     setCurrentDrawStyle(partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>): void;
     panBy(dx: number, dy: number): void;
@@ -246,9 +251,10 @@ declare class CanvasRenderer implements ICanvasRenderer {
     render(ctx: CanvasRenderingContext2D, viewport: Viewport, shapes: Shape[]): void;
     private paintStroke;
     private paintDashedStroke;
+    private paintClosedShapeFill;
 }
 
-type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand';
+type DefaultToolId = 'pen' | 'eraser' | 'select' | 'hand' | 'square' | 'circle';
 type ToolId = DefaultToolId | (string & {});
 interface ToolDefinition {
     id: ToolId;
@@ -326,11 +332,13 @@ declare class Editor {
     getCurrentDrawStyle(): {
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     };
     setCurrentDrawStyle(partial: Partial<{
         color: ColorStyle;
         dash: DashStyle;
+        fill: FillStyle;
         size: SizeStyle;
     }>): void;
     setViewport(partial: Partial<Viewport>): void;
@@ -401,6 +409,76 @@ declare class PenDrawingState extends StateNode {
     private endStroke;
 }
 
+declare class SquareIdleState extends StateNode {
+    static id: string;
+    onPointerDown(info?: ToolPointerDownInfo): void;
+}
+
+interface ShapeBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+declare function buildSquareBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildRectangleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildDefaultCenteredRectangleBounds(centerX: number, centerY: number): ShapeBounds;
+declare function buildRectangleSegments(width: number, height: number): DrawSegment[];
+declare function buildCircleBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildEllipseBounds(anchorX: number, anchorY: number, cursorX: number, cursorY: number): ShapeBounds;
+declare function buildDefaultCenteredEllipseBounds(centerX: number, centerY: number): ShapeBounds;
+declare function buildEllipseSegments(width: number, height: number): DrawSegment[];
+
+interface GeometricDrawingStateConfig {
+    idleStateId: string;
+    buildConstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
+    buildUnconstrainedBounds: (anchorX: number, anchorY: number, cursorX: number, cursorY: number) => ShapeBounds;
+    buildDefaultBounds: (centerX: number, centerY: number) => ShapeBounds;
+    buildSegments: (width: number, height: number) => DrawSegment[];
+}
+declare abstract class GeometricDrawingState extends StateNode {
+    private currentShapeId;
+    private startedAt;
+    protected abstract getConfig(): GeometricDrawingStateConfig;
+    onEnter(info?: ToolPointerDownInfo): void;
+    onPointerMove(): void;
+    onPointerUp(): void;
+    onCancel(): void;
+    onInterrupt(): void;
+    onKeyDown(): void;
+    onKeyUp(): void;
+    private completeShape;
+    private removeCurrentShape;
+    private getActiveShape;
+}
+
+declare class SquareDrawingState extends GeometricDrawingState {
+    static id: string;
+    protected getConfig(): {
+        idleStateId: string;
+        buildConstrainedBounds: typeof buildSquareBounds;
+        buildUnconstrainedBounds: typeof buildRectangleBounds;
+        buildDefaultBounds: typeof buildDefaultCenteredRectangleBounds;
+        buildSegments: typeof buildRectangleSegments;
+    };
+}
+
+declare class CircleIdleState extends StateNode {
+    static id: string;
+    onPointerDown(info?: ToolPointerDownInfo): void;
+}
+
+declare class CircleDrawingState extends GeometricDrawingState {
+    static id: string;
+    protected getConfig(): {
+        idleStateId: string;
+        buildConstrainedBounds: typeof buildCircleBounds;
+        buildUnconstrainedBounds: typeof buildEllipseBounds;
+        buildDefaultBounds: typeof buildDefaultCenteredEllipseBounds;
+        buildSegments: typeof buildEllipseSegments;
+    };
+}
+
 declare class EraserIdleState extends StateNode {
     static id: string;
     onPointerDown(info?: ToolPointerDownInfo): void;
@@ -550,4 +628,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.js

@@ -148,6 +148,12 @@ var DocumentStore = class {
   loadSnapshot(snapshot) {
     const pageState = cloneValue(snapshot.page);
     const normalizedOrder = [...snapshot.order].filter((shapeId) => pageState.shapes[shapeId] != null);
+    const orderedSet = new Set(normalizedOrder);
+    for (const shapeId of Object.keys(pageState.shapes)) {
+      if (!orderedSet.has(shapeId)) {
+        normalizedOrder.push(shapeId);
+      }
+    }
     this.state = {
       id: pageState.id,
       shapes: pageState.shapes,
@@ -290,11 +296,16 @@ var CanvasRenderer = class {
     }
     ctx.restore();
   }
+  // Paints a single stroke
   paintStroke(ctx, shape) {
     const width = (STROKE_WIDTHS[shape.props.size] ?? 3.5) * shape.props.scale;
     const samples = flattenSegments(shape);
     if (samples.length === 0) return;
     const color = resolveThemeColor(shape.props.color, this.theme);
+    const fillStyle = shape.props.fill ?? "none";
+    if (shape.props.isClosed && fillStyle !== "none") {
+      this.paintClosedShapeFill(ctx, samples, color, fillStyle);
+    }
     if (shape.props.dash !== "draw") {
       this.paintDashedStroke(ctx, samples, width, color, shape.props.dash);
       return;
@@ -341,6 +352,30 @@ var CanvasRenderer = class {
     ctx.stroke();
     ctx.restore();
   }
+  // Closed shapes are shapes where their start and end point are the same
+  paintClosedShapeFill(ctx, samples, color, fillStyle) {
+    if (samples.length < 3) return;
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(samples[0].x, samples[0].y);
+    for (let i = 1; i < samples.length; i++) {
+      const sample = samples[i];
+      ctx.lineTo(sample.x, sample.y);
+    }
+    ctx.closePath();
+    if (fillStyle === "solid") {
+      ctx.fillStyle = color;
+      ctx.globalAlpha = 0.55;
+    } else if (fillStyle === "none") {
+      ctx.fillStyle = this.theme === "dark" ? "#0f0f0f" : "#fafafa";
+      ctx.globalAlpha = 1;
+    } else {
+      ctx.fillStyle = color;
+      ctx.globalAlpha = 0.28;
+    }
+    ctx.fill();
+    ctx.restore();
+  }
 };
 var PRESSURE_FLOOR = 0.025;
 var STYLUS_CURVE = (t) => t * 0.65 + Math.sin(t * Math.PI / 2) * 0.35;
@@ -354,7 +389,7 @@ function remap(value, inRange, outRange, clamp = false) {
   return outLo + (outHi - outLo) * clamped;
 }
 function strokeConfig(shape, width) {
-  const done = shape.props.isComplete;
+  const done = shape.props.isComplete || shape.props.isClosed === true;
   if (shape.props.isPen) {
     return {
       size: 1 + width * 1.2,
@@ -863,13 +898,14 @@ var PenDrawingState = class extends StateNode {
           type: "straight",
           path: encodePoints([prevEnd, { ...anchorPt, z: pressure }])
         };
+        const withStraightSeg = [...segments, seg];
         this.editor.updateShapes([
           {
             id,
             type: "draw",
             props: {
-              segments: [...segments, seg],
-              isClosed: this.detectClosure(segments, size, scale)
+              segments: withStraightSeg,
+              isClosed: this.detectClosure(withStraightSeg, size, scale)
             }
           }
         ]);
@@ -945,7 +981,7 @@ var PenDrawingState = class extends StateNode {
             type: "draw",
             props: {
               segments: updated,
-              isClosed: this.detectClosure(segments, size, scale)
+              isClosed: this.detectClosure(updated, size, scale)
             }
           }
         ]);
@@ -1026,6 +1062,236 @@ var PenDrawingState = class extends StateNode {
   }
 };
 
+// src/tools/square/states/SquareIdleState.ts
+var SquareIdleState = class extends StateNode {
+  static id = "square_idle";
+  onPointerDown(info) {
+    this.ctx.transition("square_drawing", info);
+  }
+};
+
+// src/tools/geometric/states/GeometricDrawingState.ts
+var GeometricDrawingState = class extends StateNode {
+  currentShapeId = null;
+  startedAt = { point: { x: 0, y: 0, z: 0.5 } };
+  onEnter(info) {
+    this.startedAt = info ?? { point: { x: 0, y: 0, z: 0.5 } };
+    const originPoint = this.editor.input.getOriginPagePoint();
+    const drawStyle = this.editor.getCurrentDrawStyle();
+    const nextShapeId = this.editor.createShapeId();
+    const config = this.getConfig();
+    this.editor.createShape({
+      id: nextShapeId,
+      type: "draw",
+      x: originPoint.x,
+      y: originPoint.y,
+      props: {
+        color: drawStyle.color,
+        dash: drawStyle.dash,
+        fill: drawStyle.fill,
+        size: drawStyle.size,
+        scale: 1,
+        isPen: false,
+        isComplete: false,
+        isClosed: true,
+        segments: config.buildSegments(1, 1)
+      }
+    });
+    this.currentShapeId = nextShapeId;
+  }
+  onPointerMove() {
+    const activeShape = this.getActiveShape();
+    if (!activeShape) return;
+    const config = this.getConfig();
+    const originPoint = this.editor.input.getOriginPagePoint();
+    const cursorPoint = this.editor.input.getCurrentPagePoint();
+    const shapeBounds = this.editor.input.getShiftKey() ? config.buildConstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildUnconstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y);
+    this.editor.store.updateShape(activeShape.id, {
+      x: shapeBounds.x,
+      y: shapeBounds.y,
+      props: {
+        ...activeShape.props,
+        segments: config.buildSegments(shapeBounds.width, shapeBounds.height),
+        isClosed: true
+      }
+    });
+  }
+  onPointerUp() {
+    this.completeShape();
+  }
+  onCancel() {
+    this.removeCurrentShape();
+    this.ctx.transition(this.getConfig().idleStateId, this.startedAt);
+  }
+  onInterrupt() {
+    this.completeShape();
+  }
+  onKeyDown() {
+    this.onPointerMove();
+  }
+  onKeyUp() {
+    this.onPointerMove();
+  }
+  completeShape() {
+    const activeShape = this.getActiveShape();
+    const config = this.getConfig();
+    if (!activeShape) {
+      this.ctx.transition(config.idleStateId, this.startedAt);
+      return;
+    }
+    const originPoint = this.editor.input.getOriginPagePoint();
+    const cursorPoint = this.editor.input.getCurrentPagePoint();
+    const finalizedBounds = this.editor.input.getIsDragging() ? this.editor.input.getShiftKey() ? config.buildConstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildUnconstrainedBounds(originPoint.x, originPoint.y, cursorPoint.x, cursorPoint.y) : config.buildDefaultBounds(originPoint.x, originPoint.y);
+    this.editor.store.updateShape(activeShape.id, {
+      x: finalizedBounds.x,
+      y: finalizedBounds.y,
+      props: {
+        ...activeShape.props,
+        fill: this.editor.getCurrentDrawStyle().fill,
+        isComplete: true,
+        isClosed: true,
+        segments: config.buildSegments(finalizedBounds.width, finalizedBounds.height)
+      }
+    });
+    this.currentShapeId = null;
+    this.ctx.transition(config.idleStateId);
+  }
+  removeCurrentShape() {
+    if (!this.currentShapeId) return;
+    this.editor.store.deleteShapes([this.currentShapeId]);
+    this.currentShapeId = null;
+  }
+  getActiveShape() {
+    if (!this.currentShapeId) return null;
+    const shape = this.editor.getShape(this.currentShapeId);
+    if (!shape || shape.type !== "draw") return null;
+    return shape;
+  }
+};
+
+// src/tools/geometric/geometricShapeHelpers.ts
+var MIN_SIDE_LENGTH = 1;
+var DEFAULT_RECTANGLE_WIDTH = 180;
+var DEFAULT_RECTANGLE_HEIGHT = 120;
+var DEFAULT_ELLIPSE_WIDTH = 180;
+var DEFAULT_ELLIPSE_HEIGHT = 120;
+function toSizedBounds(anchorX, anchorY, cursorX, cursorY, forceEqualSides) {
+  const rawDeltaX = cursorX - anchorX;
+  const rawDeltaY = cursorY - anchorY;
+  const sideLength = Math.max(Math.abs(rawDeltaX), Math.abs(rawDeltaY), MIN_SIDE_LENGTH);
+  if (forceEqualSides) {
+    const nextDeltaX = rawDeltaX < 0 ? -sideLength : sideLength;
+    const nextDeltaY = rawDeltaY < 0 ? -sideLength : sideLength;
+    return normalizeBounds(anchorX, anchorY, anchorX + nextDeltaX, anchorY + nextDeltaY);
+  }
+  return normalizeBounds(anchorX, anchorY, cursorX, cursorY);
+}
+function normalizeBounds(startX, startY, endX, endY) {
+  const x = Math.min(startX, endX);
+  const y = Math.min(startY, endY);
+  const width = Math.max(Math.abs(endX - startX), MIN_SIDE_LENGTH);
+  const height = Math.max(Math.abs(endY - startY), MIN_SIDE_LENGTH);
+  return { x, y, width, height };
+}
+function buildSquareBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, true);
+}
+function buildRectangleBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, false);
+}
+function buildDefaultCenteredRectangleBounds(centerX, centerY) {
+  const halfWidth = DEFAULT_RECTANGLE_WIDTH / 2;
+  const halfHeight = DEFAULT_RECTANGLE_HEIGHT / 2;
+  return {
+    x: centerX - halfWidth,
+    y: centerY - halfHeight,
+    width: DEFAULT_RECTANGLE_WIDTH,
+    height: DEFAULT_RECTANGLE_HEIGHT
+  };
+}
+function buildRectangleSegments(width, height) {
+  const topLeft = { x: 0, y: 0, z: 0.5 };
+  const topRight = { x: width, y: 0, z: 0.5 };
+  const bottomRight = { x: width, y: height, z: 0.5 };
+  const bottomLeft = { x: 0, y: height, z: 0.5 };
+  return [
+    { type: "straight", path: encodePoints([topLeft, topRight]) },
+    { type: "straight", path: encodePoints([topRight, bottomRight]) },
+    { type: "straight", path: encodePoints([bottomRight, bottomLeft]) },
+    { type: "straight", path: encodePoints([bottomLeft, topLeft]) }
+  ];
+}
+function buildCircleBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, true);
+}
+function buildEllipseBounds(anchorX, anchorY, cursorX, cursorY) {
+  return toSizedBounds(anchorX, anchorY, cursorX, cursorY, false);
+}
+function buildDefaultCenteredEllipseBounds(centerX, centerY) {
+  const halfWidth = DEFAULT_ELLIPSE_WIDTH / 2;
+  const halfHeight = DEFAULT_ELLIPSE_HEIGHT / 2;
+  return {
+    x: centerX - halfWidth,
+    y: centerY - halfHeight,
+    width: DEFAULT_ELLIPSE_WIDTH,
+    height: DEFAULT_ELLIPSE_HEIGHT
+  };
+}
+function buildEllipseSegments(width, height) {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radiusX = width / 2;
+  const radiusY = height / 2;
+  const sampleCount = 64;
+  const sampledPoints = [];
+  for (let sampleIndex = 0; sampleIndex <= sampleCount; sampleIndex += 1) {
+    const progress = sampleIndex / sampleCount;
+    const angle = progress * Math.PI * 2;
+    sampledPoints.push({
+      x: centerX + Math.cos(angle) * radiusX,
+      y: centerY + Math.sin(angle) * radiusY,
+      z: 0.5
+    });
+  }
+  return [{ type: "free", path: encodePoints(sampledPoints) }];
+}
+
+// src/tools/square/states/SquareDrawingState.ts
+var SquareDrawingState = class extends GeometricDrawingState {
+  static id = "square_drawing";
+  getConfig() {
+    return {
+      idleStateId: "square_idle",
+      buildConstrainedBounds: buildSquareBounds,
+      buildUnconstrainedBounds: buildRectangleBounds,
+      buildDefaultBounds: buildDefaultCenteredRectangleBounds,
+      buildSegments: buildRectangleSegments
+    };
+  }
+};
+
+// src/tools/circle/states/CircleIdleState.ts
+var CircleIdleState = class extends StateNode {
+  static id = "circle_idle";
+  onPointerDown(info) {
+    this.ctx.transition("circle_drawing", info);
+  }
+};
+
+// src/tools/circle/states/CircleDrawingState.ts
+var CircleDrawingState = class extends GeometricDrawingState {
+  static id = "circle_drawing";
+  getConfig() {
+    return {
+      idleStateId: "circle_idle",
+      buildConstrainedBounds: buildCircleBounds,
+      buildUnconstrainedBounds: buildEllipseBounds,
+      buildDefaultBounds: buildDefaultCenteredEllipseBounds,
+      buildSegments: buildEllipseSegments
+    };
+  }
+};
+
 // src/tools/eraser/states/EraserIdleState.ts
 var EraserIdleState = class extends StateNode {
   static id = "eraser_idle";
@@ -1339,6 +1605,7 @@ var Editor = class {
   drawStyle = {
     color: "black",
     dash: "draw",
+    fill: "none",
     size: "m"
   };
   toolStateContext;
@@ -1398,6 +1665,8 @@ var Editor = class {
   getDefaultToolDefinitions() {
     return [
       { id: "pen", initialStateId: PenIdleState.id, stateConstructors: [PenIdleState, PenDrawingState] },
+      { id: "square", initialStateId: SquareIdleState.id, stateConstructors: [SquareIdleState, SquareDrawingState] },
+      { id: "circle", initialStateId: CircleIdleState.id, stateConstructors: [CircleIdleState, CircleDrawingState] },
       { id: "eraser", initialStateId: EraserIdleState.id, stateConstructors: [EraserIdleState, EraserPointingState, EraserErasingState] },
       { id: "select", initialStateId: SelectIdleState.id, stateConstructors: [SelectIdleState] },
       { id: "hand", initialStateId: HandIdleState.id, stateConstructors: [HandIdleState, HandDraggingState] }
@@ -1461,10 +1730,11 @@ var Editor = class {
     this.emitChange();
   }
   setViewport(partial) {
+    const rawZoom = partial.zoom ?? this.viewport.zoom;
     this.viewport = {
       x: partial.x ?? this.viewport.x,
       y: partial.y ?? this.viewport.y,
-      zoom: partial.zoom ?? this.viewport.zoom
+      zoom: Math.max(0.1, Math.min(4, rawZoom))
     };
     this.emitChange();
   }
@@ -1501,7 +1771,12 @@ var Editor = class {
   }
   loadSessionStateSnapshot(snapshot) {
     this.setViewport(snapshot.viewport);
-    this.setCurrentDrawStyle(snapshot.drawStyle);
+    this.setCurrentDrawStyle({
+      color: snapshot.drawStyle.color,
+      dash: snapshot.drawStyle.dash,
+      fill: snapshot.drawStyle.fill ?? "none",
+      size: snapshot.drawStyle.size
+    });
     if (this.tools.hasTool(snapshot.currentToolId)) {
       this.setCurrentTool(snapshot.currentToolId);
     }
@@ -1882,6 +2157,6 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
   }
 }
 
-export { CanvasRenderer, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { CanvasRenderer, CircleDrawingState, CircleIdleState, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, SquareDrawingState, SquareIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map