@markup-canvas/core 1.1.6 → 1.2.0

package/src/lib/MarkupCanvas.ts

@@ -1,19 +1,23 @@
+import { centerContent, panDown, panLeft, panRight, panUp, scrollToPoint } from "@/lib/actions/pan/index.js";
+import { resetTransform, updateTransform } from "@/lib/actions/transform/index.js";
+import { hideGrid, isGridVisible, showGrid, toggleGrid, toggleTransition, updateThemeMode } from "@/lib/actions/ui/index.js";
+import { areRulersVisible, hideRulers, showRulers, toggleRulers } from "@/lib/actions/ui/rulers/index.js";
+import { resetView, resetViewToCenter, setZoom, zoomIn, zoomOut, zoomToPoint } from "@/lib/actions/zoom/index.js";
+import { fitToScreen } from "@/lib/canvas/fitToScreen.js";
+import { getCanvasBounds } from "@/lib/canvas/getCanvasBounds.js";
 import { createCanvas } from "@/lib/canvas/index.js";
 import { createMarkupCanvasConfig } from "@/lib/config/createMarkupCanvasConfig.js";
 import { EventEmitter } from "@/lib/events/EventEmitter.js";
+import { emitTransformEvents } from "@/lib/events/emitTransformEvents.js";
 import { setupKeyboardEvents, setupMouseEvents, setupPostMessageEvents, setupTouchEvents, setupWheelEvents } from "@/lib/events/index.js";
-import { getThemeValue, withClampedZoom, withFeatureEnabled } from "@/lib/helpers/index.js";
+import { getVisibleArea, isPointVisible, withFeatureEnabled } from "@/lib/helpers/index.js";
+import { canvasToContent } from "@/lib/matrix/canvasToContent.js";
+import { createMatrix } from "@/lib/matrix/createMatrix.js";
 import { createRulers } from "@/lib/rulers/index.js";
-import { withTransition } from "@/lib/transition/withTransition.js";
-import type {
-  BaseCanvas,
-  Canvas,
-  CanvasBounds,
-  MarkupCanvasConfig,
-  MarkupCanvasEvents,
-  MouseDragControls,
-  Transform,
-} from "@/types/index.js";
+import { broadcastEvent } from "@/lib/window/broadcastEvent.js";
+import { cleanupWindowBinding } from "@/lib/window/cleanupWindowBinding.js";
+import { bindCanvasToWindow } from "@/lib/window/index.js";
+import type { Canvas, CanvasBounds, MarkupCanvasConfig, MarkupCanvasEvents, MouseDragControls, Transform } from "@/types/index.js";
 
 declare global {
   interface Window {
@@ -21,15 +25,14 @@ declare global {
   }
 }
 
-export class MarkupCanvas implements Canvas {
-  private baseCanvas: BaseCanvas;
-  private cleanupFunctions: (() => void)[] = [];
+export class MarkupCanvas {
+  private canvas: Canvas;
+  private cleanupCallbacks: (() => void)[] = [];
   private rulers: ReturnType<typeof createRulers> | null = null;
   private dragSetup: MouseDragControls | null = null;
   public config: Required<MarkupCanvasConfig>;
+  public event = new EventEmitter<MarkupCanvasEvents>();
   private _isReady = false;
-  private listen = new EventEmitter<MarkupCanvasEvents>();
-  private postMessageCleanup: (() => void) | null = null;
 
   constructor(container: HTMLElement, options: MarkupCanvasConfig = {}) {
     if (!container) {
@@ -43,127 +46,58 @@ export class MarkupCanvas implements Canvas {
       throw new Error("Failed to create canvas");
     }
 
-    this.baseCanvas = canvas;
+    this.canvas = canvas;
 
-    if (this.config.bindToWindow) {
-      this.listen.setEmitInterceptor((event, data) => {
-        this.broadcastEvent(event as string, data);
-      });
-      this.setupGlobalBinding();
+    // Always bind canvas to window
+    this.event.setEmitInterceptor((event, data) => {
+      broadcastEvent(event as string, data, this.config);
+    });
 
-      // Set up postMessage listener
-      if (this.config.enablePostMessageAPI) {
-        this.postMessageCleanup = setupPostMessageEvents(this);
-      }
+    bindCanvasToWindow(this, this.config);
+
+    // Set up postMessage listener
+    if (this.config.enablePostMessageAPI) {
+      const postMessageCleanup = setupPostMessageEvents(this);
+      this.cleanupCallbacks.push(postMessageCleanup);
     }
 
     this.setupEventHandlers();
     this._isReady = true;
 
     // Emit ready event
-    this.listen.emit("ready", this);
-  }
-
-  private setupGlobalBinding(): void {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const canvasName = this.config.name || "markupCanvas";
-    const windowObj = window as unknown as Record<string, unknown>;
-
-    // Bind instance to window
-    windowObj[canvasName] = this;
-
-    // Track all instances
-    if (!windowObj.__markupCanvasInstances) {
-      windowObj.__markupCanvasInstances = new Map();
-    }
-    (windowObj.__markupCanvasInstances as unknown as Map<string, MarkupCanvas>).set(canvasName, this);
-  }
-
-  private cleanupGlobalBinding(): void {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    const canvasName = this.config.name || "markupCanvas";
-    const windowObj = window as unknown as Record<string, unknown>;
-
-    delete windowObj[canvasName];
-    if (windowObj.__markupCanvasInstances) {
-      (windowObj.__markupCanvasInstances as unknown as Map<string, MarkupCanvas>).delete(canvasName);
-    }
-  }
-
-  private broadcastEvent(event: string, data: unknown): void {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    // Receivers can get the instance from the window binding
-    let broadcastData = data;
-
-    if (event === "ready") {
-      broadcastData = { ready: true };
-    }
-
-    window.postMessage(
-      {
-        source: "markup-canvas",
-        event,
-        data: broadcastData,
-        timestamp: Date.now(),
-        canvasName: this.config.name,
-      },
-      "*"
-    );
-
-    if (window.parent) {
-      window.parent.postMessage(
-        {
-          source: "markup-canvas",
-          event,
-          data: broadcastData,
-          timestamp: Date.now(),
-          canvasName: this.config.name,
-        },
-        "*"
-      );
-    }
+    this.event.emit("ready", this);
   }
 
   private setupEventHandlers(): void {
     try {
-      // Wheel zoom
+      // Wheel events
       withFeatureEnabled(this.config, "enableZoom", () => {
         const wheelCleanup = setupWheelEvents(this, this.config);
-        this.cleanupFunctions.push(wheelCleanup);
+        this.cleanupCallbacks.push(wheelCleanup);
       });
 
-      // Mouse events (drag and click-to-zoom)
-      // Set up mouse events if either pan or click-to-zoom is enabled
+      // Mouse events
       if (this.config.enablePan || this.config.enableClickToZoom) {
         this.dragSetup = setupMouseEvents(this, this.config, true);
-        this.cleanupFunctions.push(this.dragSetup.cleanup);
+        this.cleanupCallbacks.push(this.dragSetup.cleanup);
       }
 
-      // Keyboard navigation
+      // Keyboard events
       withFeatureEnabled(this.config, "enableKeyboard", () => {
         const keyboardCleanup = setupKeyboardEvents(this, this.config);
-        this.cleanupFunctions.push(keyboardCleanup);
+        this.cleanupCallbacks.push(keyboardCleanup);
       });
 
-      // Touch events (if enabled)
+      // Touch events
       withFeatureEnabled(this.config, "enableTouch", () => {
         const touchCleanup = setupTouchEvents(this);
-        this.cleanupFunctions.push(touchCleanup);
+        this.cleanupCallbacks.push(touchCleanup);
       });
 
       // Set up rulers and grid
       withFeatureEnabled(this.config, "enableRulers", () => {
-        this.rulers = createRulers(this.baseCanvas, this.config);
-        this.cleanupFunctions.push(() => {
+        this.rulers = createRulers(this, this.config);
+        this.cleanupCallbacks.push(() => {
           if (this.rulers) {
             this.rulers.destroy();
           }
@@ -176,24 +110,22 @@ export class MarkupCanvas implements Canvas {
     }
   }
 
-  // Base canvas properties and methods
   get container(): HTMLElement {
-    return this.baseCanvas.container;
+    return this.canvas.container;
   }
 
   get transformLayer(): HTMLElement {
-    return this.baseCanvas.transformLayer;
+    return this.canvas.transformLayer;
   }
 
   get contentLayer(): HTMLElement {
-    return this.baseCanvas.contentLayer;
+    return this.canvas.contentLayer;
   }
 
   get transform(): Transform {
-    return this.baseCanvas.transform;
+    return this.canvas.transform;
   }
 
-  // State management getters for React integration
   get isReady(): boolean {
     return this._isReady;
   }
@@ -203,142 +135,88 @@ export class MarkupCanvas implements Canvas {
   }
 
   get visibleBounds(): { x: number; y: number; width: number; height: number } {
-    return this.getVisibleArea();
+    return getVisibleArea(this);
   }
 
   getBounds(): CanvasBounds {
-    return this.baseCanvas.getBounds();
+    return getCanvasBounds(this.canvas, this.config);
   }
 
   updateTransform(newTransform: Partial<Transform>): boolean {
-    const result = this.baseCanvas.updateTransform(newTransform);
+    const result = updateTransform(this.canvas, newTransform);
     if (result) {
-      this.emitTransformEvents();
+      emitTransformEvents(this.event, this.canvas);
     }
     return result;
   }
 
-  private emitTransformEvents(): void {
-    const transform = this.baseCanvas.transform;
-    this.listen.emit("transform", transform);
-    this.listen.emit("zoom", transform.scale);
-    this.listen.emit("pan", { x: transform.translateX, y: transform.translateY });
-  }
-
   reset(): boolean {
-    return this.baseCanvas.reset();
-  }
-
-  handleResize(): boolean {
-    return this.baseCanvas.handleResize();
+    const result = resetTransform(this.canvas);
+    if (result) {
+      emitTransformEvents(this.event, this.canvas);
+    }
+    return result;
   }
 
   setZoom(zoomLevel: number): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      return withClampedZoom(this.config, (clamp) => {
-        const newScale = clamp(zoomLevel);
-        const newTransform: Partial<Transform> = {
-          scale: newScale,
-        };
-        return this.updateTransform(newTransform);
-      });
-    });
+    return setZoom(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), zoomLevel);
   }
 
   canvasToContent(x: number, y: number): { x: number; y: number } {
-    return this.baseCanvas.canvasToContent(x, y);
+    const matrix = createMatrix(this.canvas.transform.scale, this.canvas.transform.translateX, this.canvas.transform.translateY);
+    return canvasToContent(x, y, matrix);
   }
 
   zoomToPoint(x: number, y: number, targetScale: number): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const result = this.baseCanvas.zoomToPoint(x, y, targetScale);
-      if (result) {
-        this.emitTransformEvents();
-      }
-      return result;
-    });
+    return zoomToPoint(this.canvas, this.transformLayer, this.config, x, y, targetScale);
   }
 
   resetView(): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
-      if (result) {
-        this.emitTransformEvents();
-      }
-      return result;
-    });
+    return resetView(this.canvas, this.transformLayer, this.config);
   }
 
-  zoomToFitContent(): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const result = this.baseCanvas.zoomToFitContent();
-      if (result) {
-        this.emitTransformEvents();
-      }
-      return result;
-    });
+  resetViewToCenter(): boolean {
+    return resetViewToCenter(this, this.transformLayer, this.config, this.zoomToPoint.bind(this));
   }
 
-  // Pan methods
   panLeft(distance?: number): boolean {
-    const panDistance = distance ?? this.config.keyboardPanStep;
-    const newTransform: Partial<Transform> = {
-      translateX: this.baseCanvas.transform.translateX + panDistance,
-    };
-    return this.updateTransform(newTransform);
+    return (
+      panLeft(this.canvas, this.config, this.updateTransform.bind(this)) ||
+      (distance ? panLeft(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false)
+    );
   }
 
   panRight(distance?: number): boolean {
-    const panDistance = distance ?? this.config.keyboardPanStep;
-    const newTransform: Partial<Transform> = {
-      translateX: this.baseCanvas.transform.translateX - panDistance,
-    };
-    return this.updateTransform(newTransform);
+    return (
+      panRight(this.canvas, this.config, this.updateTransform.bind(this)) ||
+      (distance ? panRight(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false)
+    );
   }
 
   panUp(distance?: number): boolean {
-    const panDistance = distance ?? this.config.keyboardPanStep;
-    const newTransform: Partial<Transform> = {
-      translateY: this.baseCanvas.transform.translateY + panDistance,
-    };
-    return this.updateTransform(newTransform);
+    return (
+      panUp(this.canvas, this.config, this.updateTransform.bind(this)) ||
+      (distance ? panUp(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false)
+    );
   }
 
   panDown(distance?: number): boolean {
-    const panDistance = distance ?? this.config.keyboardPanStep;
-    const newTransform: Partial<Transform> = {
-      translateY: this.baseCanvas.transform.translateY - panDistance,
-    };
-    return this.updateTransform(newTransform);
-  }
-
-  // Zoom methods
-  zoomIn(factor: number = 0.1): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      return withClampedZoom(this.config, (clamp) => {
-        const newScale = clamp(this.baseCanvas.transform.scale * (1 + factor));
-        const newTransform: Partial<Transform> = {
-          scale: newScale,
-        };
-        return this.updateTransform(newTransform);
-      });
-    });
+    return (
+      panDown(this.canvas, this.config, this.updateTransform.bind(this)) ||
+      (distance ? panDown(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false)
+    );
   }
 
-  zoomOut(factor: number = 0.1): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      return withClampedZoom(this.config, (clamp) => {
-        const newScale = clamp(this.baseCanvas.transform.scale * (1 - factor));
-        const newTransform: Partial<Transform> = {
-          scale: newScale,
-        };
-        return this.updateTransform(newTransform);
-      });
-    });
+  zoomIn(factor: number = 0.5): boolean {
+    return zoomIn(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
+  }
+
+  zoomOut(factor: number = 0.5): boolean {
+    return zoomOut(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
   }
 
   resetZoom(): boolean {
-    return this.resetView();
+    return this.resetViewToCenter();
   }
 
   // Mouse drag control methods
@@ -354,124 +232,80 @@ export class MarkupCanvas implements Canvas {
     return this.dragSetup?.isEnabled() ?? false;
   }
 
-  // Grid control methods
   toggleGrid(): boolean {
-    if (this.rulers?.toggleGrid) {
-      this.rulers.toggleGrid();
-      return true;
+    const result = toggleGrid(this.rulers);
+    if (result) {
+      this.event.emit("gridVisibility", this.isGridVisible());
     }
-    return false;
+    return result;
   }
 
   showGrid(): boolean {
-    if (this.rulers?.gridOverlay) {
-      this.rulers.gridOverlay.style.display = "block";
-      return true;
+    const result = showGrid(this.rulers);
+    if (result) {
+      this.event.emit("gridVisibility", true);
     }
-    return false;
+    return result;
   }
 
   hideGrid(): boolean {
-    if (this.rulers?.gridOverlay) {
-      this.rulers.gridOverlay.style.display = "none";
-      return true;
+    const result = hideGrid(this.rulers);
+    if (result) {
+      this.event.emit("gridVisibility", false);
     }
-    return false;
+    return result;
   }
 
   isGridVisible(): boolean {
-    if (this.rulers?.gridOverlay) {
-      return this.rulers.gridOverlay.style.display !== "none";
-    }
-    return false;
+    return isGridVisible(this.rulers);
   }
 
-  // Ruler control methods
   toggleRulers(): boolean {
-    if (this.rulers) {
-      const areVisible = this.areRulersVisible();
-      if (areVisible) {
-        this.rulers.hide();
-      } else {
-        this.rulers.show();
-      }
-      return true;
+    const result = toggleRulers(this.rulers, () => this.areRulersVisible());
+    if (result) {
+      this.event.emit("rulersVisibility", this.areRulersVisible());
     }
-    return false;
+    return result;
   }
 
   showRulers(): boolean {
-    if (this.rulers) {
-      this.rulers.show();
-      return true;
+    const result = showRulers(this.rulers);
+    if (result) {
+      this.event.emit("rulersVisibility", true);
     }
-    return false;
+    return result;
   }
 
   hideRulers(): boolean {
-    if (this.rulers) {
-      this.rulers.hide();
-      return true;
+    const result = hideRulers(this.rulers);
+    if (result) {
+      this.event.emit("rulersVisibility", false);
     }
-    return false;
+    return result;
   }
 
   areRulersVisible(): boolean {
-    if (this.rulers?.horizontalRuler) {
-      return this.rulers.horizontalRuler.style.display !== "none";
-    }
-    return false;
+    return areRulersVisible(this.rulers);
   }
 
-  // Utility methods
   centerContent(): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const bounds = this.baseCanvas.getBounds();
-      const centerX = (bounds.width - bounds.contentWidth * this.baseCanvas.transform.scale) / 2;
-      const centerY = (bounds.height - bounds.contentHeight * this.baseCanvas.transform.scale) / 2;
-
-      return this.updateTransform({
-        translateX: centerX,
-        translateY: centerY,
-      });
-    });
+    return centerContent(this.canvas, this.config, this.updateTransform.bind(this), this.transformLayer);
   }
 
   fitToScreen(): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const result = this.baseCanvas.zoomToFitContent();
-      if (result) {
-        this.emitTransformEvents();
-      }
-      return result;
-    });
+    return fitToScreen(this.canvas, this.transformLayer, this.config);
   }
 
   getVisibleArea(): { x: number; y: number; width: number; height: number } {
-    const bounds = this.baseCanvas.getBounds();
-    return bounds.visibleArea;
+    return getVisibleArea(this);
   }
 
   isPointVisible(x: number, y: number): boolean {
-    const visibleArea = this.getVisibleArea();
-    return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+    return isPointVisible(this, x, y);
   }
 
   scrollToPoint(x: number, y: number): boolean {
-    return withTransition(this.transformLayer, this.config, () => {
-      const bounds = this.baseCanvas.getBounds();
-      const centerX = bounds.width / 2;
-      const centerY = bounds.height / 2;
-
-      // Calculate new translation to center the point
-      const newTranslateX = centerX - x * this.baseCanvas.transform.scale;
-      const newTranslateY = centerY - y * this.baseCanvas.transform.scale;
-
-      return this.updateTransform({
-        translateX: newTranslateX,
-        translateY: newTranslateY,
-      });
-    });
+    return scrollToPoint(this.canvas, this.config, x, y, this.updateTransform.bind(this), this.transformLayer);
   }
 
   // Configuration access
@@ -485,40 +319,40 @@ export class MarkupCanvas implements Canvas {
 
   // Theme management
   updateThemeMode(mode: "light" | "dark"): void {
-    const newConfig = {
-      ...this.config,
-      themeMode: mode,
-    };
-    this.config = createMarkupCanvasConfig(newConfig);
-
-    // Update canvas background color
-    const backgroundColor = getThemeValue(this.config, "canvasBackgroundColor");
-    this.baseCanvas.container.style.backgroundColor = backgroundColor;
-
-    // Update rulers if they exist
-    if (this.rulers) {
-      this.rulers.updateTheme(this.config);
-    }
+    this.config = createMarkupCanvasConfig({ ...this.config, themeMode: mode });
+    updateThemeMode(this.canvas.container, this.config, this.rulers, mode);
+  }
+
+  toggleThemeMode(): "light" | "dark" {
+    const currentMode = this.config.themeMode;
+    const newMode = currentMode === "light" ? "dark" : "light";
+    this.updateThemeMode(newMode);
+    return newMode;
+  }
+
+  // Transition management
+  updateTransition(enabled: boolean): void {
+    this.config = createMarkupCanvasConfig({ ...this.config, enableTransition: enabled });
+  }
+
+  toggleTransitionMode(): boolean {
+    const newEnableTransition = toggleTransition(this.config.enableTransition);
+    this.updateTransition(newEnableTransition);
+    return newEnableTransition;
   }
 
   // Cleanup method
   cleanup(): void {
-    this.cleanupGlobalBinding();
-
-    // Cleanup postMessage listener
-    if (this.postMessageCleanup) {
-      this.postMessageCleanup();
-      this.postMessageCleanup = null;
-    }
+    cleanupWindowBinding(this.config);
 
-    this.cleanupFunctions.forEach((cleanup) => {
+    this.cleanupCallbacks.forEach((cleanup) => {
       try {
         cleanup();
       } catch (cleanupError) {
         console.warn("Error during cleanup:", cleanupError);
       }
     });
-    this.cleanupFunctions = [];
+    this.cleanupCallbacks = [];
 
     // Remove all event listeners
     this.removeAllListeners();
@@ -526,19 +360,19 @@ export class MarkupCanvas implements Canvas {
 
   // Event emitter delegation methods
   on<K extends keyof MarkupCanvasEvents>(event: K, handler: (data: MarkupCanvasEvents[K]) => void): void {
-    this.listen.on(event, handler);
+    this.event.on(event, handler);
   }
 
   off<K extends keyof MarkupCanvasEvents>(event: K, handler: (data: MarkupCanvasEvents[K]) => void): void {
-    this.listen.off(event, handler);
+    this.event.off(event, handler);
   }
 
   emit<K extends keyof MarkupCanvasEvents>(event: K, data: MarkupCanvasEvents[K]): void {
-    this.listen.emit(event, data);
+    this.event.emit(event, data);
   }
 
   removeAllListeners(): void {
-    this.listen.removeAllListeners();
+    this.event.removeAllListeners();
   }
 
   destroy(): void {

package/src/lib/actions/config/getConfig.ts

@@ -0,0 +1,5 @@
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function getConfig(config: Required<MarkupCanvasConfig>): Required<MarkupCanvasConfig> {
+  return { ...config };
+}

package/src/lib/actions/index.ts

@@ -0,0 +1,6 @@
+// Pan actions
+export * from "./pan/index.js";
+// UI actions
+export * from "./ui/index.js";
+// Zoom actions
+export * from "./zoom/index.js";