@markup-canvas/core 1.1.7 → 1.2.0

package/src/types/index.ts

@@ -1,6 +1,5 @@
 // Canvas types
 export type {
-  BaseCanvas,
   Canvas,
   CanvasBounds,
   CanvasOptions,
@@ -11,7 +10,7 @@ export type {
 export type { MarkupCanvasConfig } from "./config.js";
 
 // Event types
-export type { GestureInfo, MarkupCanvasEvents, MouseDragControls, TouchState } from "./events.js";
+export type { CallbackEventName, GestureInfo, MarkupCanvasEvents, MouseDragControls, TouchState } from "./events.js";
 
 // Matrix types
 export type {
@@ -26,3 +25,6 @@ export type {
   RulerElements,
   RulerSystem,
 } from "./rulers.js";
+
+// Window API types
+export type { WindowAPI } from "./window.js";

package/src/types/window.ts

@@ -0,0 +1,77 @@
+import type { EventEmitter } from "@/lib/events/EventEmitter.js";
+import type { CanvasBounds, Transform } from "./canvas.js";
+import type { MarkupCanvasConfig } from "./config.js";
+import type { MarkupCanvasEvents } from "./events.js";
+
+export interface WindowAPI {
+  config: {
+    readonly current: MarkupCanvasConfig;
+    readonly get: () => MarkupCanvasConfig;
+    readonly update: (config: Partial<MarkupCanvasConfig>) => void;
+  };
+  transform: {
+    readonly update: (transform: Transform) => void;
+    readonly reset: () => void;
+  };
+  zoom: {
+    readonly set: (zoomLevel: number) => void;
+    readonly toPoint: (x: number, y: number, zoomLevel: number) => void;
+    readonly in: (factor?: number) => void;
+    readonly out: (factor?: number) => void;
+    readonly reset: () => void;
+    readonly resetToCenter: () => void;
+    readonly fitToScreen: () => void;
+  };
+  pan: {
+    readonly left: (distance?: number) => void;
+    readonly right: (distance?: number) => void;
+    readonly up: (distance?: number) => void;
+    readonly down: (distance?: number) => void;
+    readonly toPoint: (x: number, y: number) => void;
+    readonly toCenter: () => void;
+  };
+  mouseDrag: {
+    readonly enable: () => void;
+    readonly disable: () => void;
+    isEnabled: () => boolean;
+  };
+  grid: {
+    readonly toggle: () => void;
+    readonly show: () => void;
+    readonly hide: () => void;
+    readonly isVisible: () => boolean;
+  };
+  rulers: {
+    readonly toggle: () => void;
+    readonly show: () => void;
+    readonly hide: () => void;
+    readonly isVisible: () => boolean;
+  };
+  canvas: {
+    readonly canvasToContent: (x: number, y: number) => { x: number; y: number };
+    readonly getVisibleArea: () => { x: number; y: number; width: number; height: number };
+    readonly isPointVisible: (x: number, y: number) => boolean;
+    readonly getBounds: () => CanvasBounds;
+  };
+  theme: {
+    readonly current: "light" | "dark";
+    readonly update: (mode: "light" | "dark") => void;
+    readonly toggle: () => "light" | "dark";
+  };
+  transition: {
+    readonly current: boolean;
+    readonly set: (enabled: boolean) => void;
+    readonly toggle: () => boolean;
+  };
+  event: EventEmitter<MarkupCanvasEvents>;
+  lifecycle: {
+    readonly cleanup: () => void;
+    readonly destroy: () => void;
+  };
+  state: {
+    readonly isReady: boolean;
+    readonly isTransforming: boolean;
+    readonly visibleBounds: Record<string, unknown>;
+    readonly transform: Transform;
+  };
+}

package/dist/lib/canvas/config.d.ts

@@ -1,2 +0,0 @@
-import type { CanvasOptions } from "@/types/index.js";
-export declare function createCanvasConfig(options?: CanvasOptions): Required<CanvasOptions>;

package/dist/lib/canvas/getCanvasMethods.d.ts

@@ -1,12 +0,0 @@
-import type { BaseCanvas, Transform } from "@/types/index.js";
-export declare function getCanvasMethods(): {
-    getBounds: (this: BaseCanvas) => import("@/types/index.js").CanvasBounds;
-    updateTransform: (this: BaseCanvas, newTransform: Partial<Transform>) => boolean;
-    reset: (this: BaseCanvas) => boolean;
-    handleResize: (this: BaseCanvas) => boolean;
-    setZoom: (this: BaseCanvas, zoomLevel: number) => boolean;
-    canvasToContent: (this: BaseCanvas, x: number, y: number) => import("@/types/index.js").Point;
-    zoomToPoint: (this: BaseCanvas, x: number, y: number, targetScale: number) => boolean;
-    resetView: (this: BaseCanvas) => boolean;
-    zoomToFitContent: (this: BaseCanvas) => boolean;
-};

package/src/lib/canvas/config.ts

@@ -1,29 +0,0 @@
-import type { CanvasOptions } from "@/types/index.js";
-
-const DEFAULT_CANVAS_WIDTH = 8000;
-const DEFAULT_CANVAS_HEIGHT = 8000;
-
-// Creates a validated configuration object with defaults
-export function createCanvasConfig(options: CanvasOptions = {}): Required<CanvasOptions> {
-  const config: Required<CanvasOptions> = {
-    width: DEFAULT_CANVAS_WIDTH,
-    height: DEFAULT_CANVAS_HEIGHT,
-    enableAcceleration: true,
-    enableEventHandling: true,
-    onTransformUpdate: () => {},
-    ...options,
-  };
-
-  // Validate and fix configuration values
-  if (typeof config.width !== "number" || config.width <= 0) {
-    console.warn("Invalid width, using default 8000px");
-    config.width = DEFAULT_CANVAS_WIDTH;
-  }
-
-  if (typeof config.height !== "number" || config.height <= 0) {
-    console.warn("Invalid height, using default 8000px");
-    config.height = DEFAULT_CANVAS_HEIGHT;
-  }
-
-  return config;
-}

package/src/lib/canvas/getCanvasMethods.ts

@@ -1,102 +0,0 @@
-import { getCanvasBounds } from "@/lib/canvas/getCanvasBounds.js";
-import { ZOOM_FIT_PADDING } from "@/lib/constants.js";
-import { withClampedZoom, withFeatureEnabled, withRulerSize } from "@/lib/helpers/index.js";
-import { canvasToContent } from "@/lib/matrix/canvasToContent.js";
-import { createMatrix } from "@/lib/matrix/createMatrix.js";
-import { getZoomToMouseTransform } from "@/lib/matrix/getZoomToMouseTransform.js";
-import { applyTransform } from "@/lib/transform/index.js";
-import { withTransition } from "@/lib/transition/index.js";
-import type { BaseCanvas, Transform } from "@/types/index.js";
-
-export function getCanvasMethods() {
-  return {
-    // Utility methods
-    getBounds: function (this: BaseCanvas) {
-      return getCanvasBounds(this);
-    },
-
-    // Transform methods
-    updateTransform: function (this: BaseCanvas, newTransform: Partial<Transform>) {
-      this.transform = { ...this.transform, ...newTransform };
-      const matrix = createMatrix(this.transform.scale, this.transform.translateX, this.transform.translateY);
-      const result = applyTransform(this.transformLayer, matrix);
-
-      withFeatureEnabled(this.config, "onTransformUpdate", () => {
-        this.config.onTransformUpdate!(this.transform);
-      });
-
-      return result;
-    },
-
-    // Reset method
-    reset: function (this: BaseCanvas) {
-      const resetTransform: Transform = {
-        scale: 1.0,
-        translateX: 0,
-        translateY: 0,
-      };
-      return this.updateTransform(resetTransform);
-    },
-
-    // Handle canvas resize
-    handleResize: function (this: BaseCanvas) {
-      return true;
-    },
-
-    // Set zoom level
-    setZoom: function (this: BaseCanvas, zoomLevel: number) {
-      const newScale = withClampedZoom(this.config, (clamp) => clamp(zoomLevel));
-      return this.updateTransform({ scale: newScale });
-    },
-
-    // Convert canvas coordinates to content coordinates
-    canvasToContent: function (this: BaseCanvas, x: number, y: number) {
-      const matrix = createMatrix(this.transform.scale, this.transform.translateX, this.transform.translateY);
-      return canvasToContent(x, y, matrix);
-    },
-
-    // Zoom to a specific point with animation
-    zoomToPoint: function (this: BaseCanvas, x: number, y: number, targetScale: number) {
-      return withTransition(this.transformLayer, this.config, () => {
-        const newTransform = getZoomToMouseTransform(x, y, this.transform, targetScale / this.transform.scale, this.config);
-        return this.updateTransform(newTransform);
-      });
-    },
-
-    // Reset view with animation
-    resetView: function (this: BaseCanvas) {
-      return withTransition(this.transformLayer, this.config, () => {
-        return withRulerSize(this, this.config.rulerSize, (rulerSize) => {
-          const resetTransform: Transform = {
-            scale: 1.0,
-            translateX: rulerSize * -1,
-            translateY: rulerSize * -1,
-          };
-          return this.updateTransform(resetTransform);
-        });
-      });
-    },
-
-    // Zoom to fit content in canvas
-    zoomToFitContent: function (this: BaseCanvas) {
-      return withTransition(this.transformLayer, this.config, () => {
-        const bounds = this.getBounds();
-        const scaleX = bounds.width / this.config.width;
-        const scaleY = bounds.height / this.config.height;
-        const fitScale = withClampedZoom(this.config, (clamp) => clamp(Math.min(scaleX, scaleY) * ZOOM_FIT_PADDING));
-
-        // Center the content
-        const scaledWidth = this.config.width * fitScale;
-        const scaledHeight = this.config.height * fitScale;
-        const centerX = (bounds.width - scaledWidth) / 2;
-        const centerY = (bounds.height - scaledHeight) / 2;
-
-        return this.updateTransform({
-          scale: fitScale,
-          translateX: centerX,
-          translateY: centerY,
-        });
-      });
-    },
-  };
-}