@tsdraw/core 0.6.2 → 0.8.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;
@@ -61,11 +63,13 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
+        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
     };
     selectedShapeIds: ShapeId[];
@@ -168,11 +172,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;
@@ -216,6 +222,7 @@ interface Viewport {
     x: number;
     y: number;
     zoom: number;
+    rotation: number;
 }
 declare function createViewport(): Viewport;
 declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
@@ -230,9 +237,11 @@ declare function setViewport(viewport: Viewport, updater: {
     x?: number;
     y?: number;
     zoom?: number;
+    rotation?: number;
 }): Viewport;
 declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
 declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -246,9 +255,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,15 +336,20 @@ 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;
     panBy(dx: number, dy: number): void;
+    zoomAt(factor: number, screenX: number, screenY: number): void;
+    rotateAt(delta: number, screenX: number, screenY: number): void;
+    deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
     getSessionStateSnapshot(args?: {
@@ -401,6 +416,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 +635,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, rotateViewport, 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;
@@ -61,11 +63,13 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
+        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
         color: ColorStyle;
         dash: DashStyle;
+        fill?: FillStyle;
         size: SizeStyle;
     };
     selectedShapeIds: ShapeId[];
@@ -168,11 +172,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;
@@ -216,6 +222,7 @@ interface Viewport {
     x: number;
     y: number;
     zoom: number;
+    rotation: number;
 }
 declare function createViewport(): Viewport;
 declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
@@ -230,9 +237,11 @@ declare function setViewport(viewport: Viewport, updater: {
     x?: number;
     y?: number;
     zoom?: number;
+    rotation?: number;
 }): Viewport;
 declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
 declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -246,9 +255,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,15 +336,20 @@ 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;
     panBy(dx: number, dy: number): void;
+    zoomAt(factor: number, screenX: number, screenY: number): void;
+    rotateAt(delta: number, screenX: number, screenY: number): void;
+    deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
     getSessionStateSnapshot(args?: {
@@ -401,6 +416,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 +635,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, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };