@markup-canvas/core 1.1.7 → 1.2.0

package/src/lib/events/mouse/createMouseDragControls.ts

@@ -0,0 +1,21 @@
+import type { MouseDragControls } from "@/types/index.js";
+
+export interface MouseDragControlMethods {
+  enableMouseDrag: () => boolean;
+  disableMouseDrag: () => boolean;
+  isMouseDragEnabled: () => boolean;
+}
+
+export function createMouseDragControls(dragSetup: MouseDragControls | null): MouseDragControlMethods {
+  return {
+    enableMouseDrag(): boolean {
+      return dragSetup?.enable() ?? false;
+    },
+    disableMouseDrag(): boolean {
+      return dragSetup?.disable() ?? false;
+    },
+    isMouseDragEnabled(): boolean {
+      return dragSetup?.isEnabled() ?? false;
+    },
+  };
+}

package/src/lib/events/mouse/handleClickToZoom.ts

@@ -1,11 +1,12 @@
 import { CLICK_THRESHOLDS } from "@/lib/events/constants.js";
 import { withRulerOffset } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import { withTransition } from "@/lib/transition/withTransition.js";
-import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+import type { MarkupCanvasConfig, Transform } from "@/types/index.js";
 
 export function handleClickToZoom(
   event: MouseEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   mouseDownTime: number,
   hasDragged: boolean,

package/src/lib/events/mouse/handleMouseDown.ts

@@ -1,9 +1,10 @@
 import { updateCursor } from "@/lib/events/utils/updateCursor.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function handleMouseDown(
   event: MouseEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isSpacePressed: boolean,

package/src/lib/events/mouse/handleMouseLeave.ts

@@ -1,8 +1,9 @@
 import { resetDragState } from "@/lib/events/utils/resetDragState.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function handleMouseLeave(
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isSpacePressed: boolean,

package/src/lib/events/mouse/handleMouseMove.ts

@@ -1,10 +1,11 @@
 import { CLICK_THRESHOLDS } from "@/lib/events/constants.js";
 import { withRAFThrottle } from "@/lib/helpers/index.js";
-import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig, Transform } from "@/types/index.js";
 
 export function handleMouseMove(
   event: MouseEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isDragging: boolean,

package/src/lib/events/mouse/handleMouseUp.ts

@@ -1,11 +1,12 @@
 import { handleClickToZoom } from "@/lib/events/mouse/handleClickToZoom.js";
 import { resetClickState } from "@/lib/events/utils/resetClickState.js";
 import { resetDragState } from "@/lib/events/utils/resetDragState.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function handleMouseUp(
   event: MouseEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isSpacePressed: boolean,

package/src/lib/events/mouse/setupMouseDrag.ts

@@ -6,13 +6,14 @@ import { handleMouseMove } from "@/lib/events/mouse/handleMouseMove.js";
 import { handleMouseUp } from "@/lib/events/mouse/handleMouseUp.js";
 import { resetDragState } from "@/lib/events/utils/resetDragState.js";
 import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import type { MouseDragControls } from "@/types/events.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
-export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
-export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
+export function setupMouseEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
+export function setupMouseEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
 export function setupMouseEvents(
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   withControls: boolean = true
 ): MouseDragControls | (() => void) {

package/src/lib/events/mouse/setupMouseEvents.ts

@@ -6,13 +6,14 @@ import { handleMouseMove } from "@/lib/events/mouse/handleMouseMove.js";
 import { handleMouseUp } from "@/lib/events/mouse/handleMouseUp.js";
 import { resetDragState } from "@/lib/events/utils/resetDragState.js";
 import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import type { MouseDragControls } from "@/types/events.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
-export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
-export function setupMouseEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
+export function setupMouseEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>, withControls: true): MouseDragControls;
+export function setupMouseEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>, withControls: false): () => void;
 export function setupMouseEvents(
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   withControls: boolean = true
 ): MouseDragControls | (() => void) {

package/src/lib/events/postMessage/setupPostMessageEvents.ts

@@ -75,6 +75,16 @@ export function setupPostMessageEvents(canvas: MarkupCanvas): () => void {
         const currentConfig = canvas.getConfig();
         const newMode = currentConfig.themeMode === "light" ? "dark" : "light";
         canvas.updateThemeMode(newMode);
+      }
+      // Transition methods
+      else if (action === "updateTransition") {
+        const enabled = args[0] as boolean;
+        if (typeof enabled !== "boolean") {
+          throw new Error(`Invalid transition enabled value: ${enabled}. Must be a boolean.`);
+        }
+        canvas.updateTransition(enabled);
+      } else if (action === "toggleTransitionMode") {
+        canvas.toggleTransitionMode();
       } else {
         throw new Error(`Unknown action: ${action}`);
       }

package/src/lib/events/touch/handleTouchMove.ts

@@ -1,10 +1,11 @@
 import { getTouchCenter } from "@/lib/events/touch/getTouchCenter.js";
 import { getTouchDistance } from "@/lib/events/touch/getTouchDistance.js";
 import { withRAFThrottle, withRulerOffsetObject } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import { applyZoomToCanvas } from "@/lib/transform/applyZoomToCanvas.js";
-import type { Canvas, TouchState, Transform } from "@/types/index.js";
+import type { TouchState, Transform } from "@/types/index.js";
 
-export function handleTouchMove(event: TouchEvent, canvas: Canvas, touchState: TouchState): void {
+export function handleTouchMove(event: TouchEvent, canvas: MarkupCanvas, touchState: TouchState): void {
   event.preventDefault();
 
   const currentTouches = Array.from(event.touches);

package/src/lib/events/touch/setupTouchEvents.ts

@@ -1,9 +1,10 @@
 import { handleTouchEnd } from "@/lib/events/touch/handleTouchEnd.js";
 import { handleTouchMove } from "@/lib/events/touch/handleTouchMove.js";
 import { handleTouchStart } from "@/lib/events/touch/handleTouchStart.js";
-import type { Canvas, TouchState } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { TouchState } from "@/types/index.js";
 
-export function setupTouchEvents(canvas: Canvas): () => void {
+export function setupTouchEvents(canvas: MarkupCanvas): () => void {
   const touchState: TouchState = {
     touches: [],
     lastDistance: 0,

package/src/lib/events/trackpad/createTrackpadPanHandler.ts

@@ -1,8 +1,9 @@
 import { withRAFThrottle } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import { disableTransition } from "@/lib/transition";
-import type { BaseCanvas, Transform } from "@/types";
+import type { Transform } from "@/types";
 
-export const createTrackpadPanHandler = (canvas: BaseCanvas) =>
+export const createTrackpadPanHandler = (canvas: MarkupCanvas) =>
   withRAFThrottle((...args: unknown[]) => {
     const event = args[0] as WheelEvent;
     if (!event || !canvas?.updateTransform) {

package/src/lib/events/utils/getAdaptiveZoomSpeed.ts

@@ -1,7 +1,7 @@
 import { ADAPTIVE_ZOOM_FACTOR, REFERENCE_DISPLAY_AREA } from "@/lib/events/constants.js";
-import type { BaseCanvas } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 
-export function getAdaptiveZoomSpeed(canvas: BaseCanvas, baseSpeed: number): number {
+export function getAdaptiveZoomSpeed(canvas: MarkupCanvas, baseSpeed: number): number {
   if (!canvas?.getBounds) {
     return baseSpeed;
   }

package/src/lib/events/utils/getViewportCenter.ts

@@ -1,6 +1,6 @@
-import type { Canvas } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 
-export function getViewportCenter(canvas: Canvas): { x: number; y: number } {
+export function getViewportCenter(canvas: MarkupCanvas): { x: number; y: number } {
   try {
     const bounds = canvas.getBounds();
     return {

package/src/lib/events/utils/resetDragState.ts

@@ -1,8 +1,9 @@
 import { updateCursor } from "@/lib/events/utils/updateCursor.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function resetDragState(
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isSpacePressed: boolean,

package/src/lib/events/utils/updateCursor.ts

@@ -1,7 +1,8 @@
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
 export function updateCursor(
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isSpacePressed: boolean,

package/src/lib/events/wheel/handleWheel.ts

@@ -2,10 +2,11 @@ import { TRACKPAD_PINCH_SPEED_FACTOR } from "@/lib/events/constants.js";
 import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture.js";
 import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.js";
 import { withRulerOffset } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import { applyZoomToCanvas } from "@/lib/transform/applyZoomToCanvas.js";
-import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
 
-export function handleWheel(event: WheelEvent, canvas: Canvas, config: Required<MarkupCanvasConfig>): boolean {
+export function handleWheel(event: WheelEvent, canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): boolean {
   if (!event || typeof event.deltaY !== "number") {
     console.warn("Invalid wheel event provided");
     return false;

package/src/lib/events/wheel/setupWheelEvents.ts

@@ -1,9 +1,10 @@
 import { createTrackpadPanHandler } from "@/lib/events/trackpad/createTrackpadPanHandler";
 import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture";
 import { handleWheel } from "@/lib/events/wheel/handleWheel";
-import type { Canvas, MarkupCanvasConfig } from "@/types";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types";
 
-export function setupWheelEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+export function setupWheelEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): () => void {
   const trackpadPanHandler = createTrackpadPanHandler(canvas);
 
   const wheelHandler = (event: WheelEvent) => {

package/src/lib/events/wheel/setupWheelHandler.ts

@@ -1,9 +1,10 @@
 import { createTrackpadPanHandler } from "@/lib/events/trackpad/createTrackpadPanHandler";
 import { detectTrackpadGesture } from "@/lib/events/trackpad/detectTrackpadGesture";
 import { handleWheel } from "@/lib/events/wheel/handleWheel";
-import type { Canvas, MarkupCanvasConfig } from "@/types";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig } from "@/types";
 
-export function setupWheelEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+export function setupWheelEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): () => void {
   const trackpadPanHandler = createTrackpadPanHandler(canvas);
 
   const wheelHandler = (event: WheelEvent) => {

package/src/lib/helpers/getVisibleArea.ts

@@ -0,0 +1,6 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+
+export function getVisibleArea(canvas: MarkupCanvas): { x: number; y: number; width: number; height: number } {
+  const bounds = canvas.getBounds();
+  return bounds.visibleArea;
+}

package/src/lib/helpers/index.ts

@@ -1,3 +1,5 @@
+export { getVisibleArea } from "./getVisibleArea.js";
+export { isPointVisible } from "./isPointVisible.js";
 export { withClampedZoom } from "./withClampedZoom.js";
 export { withDebounce } from "./withDebounce.js";
 export { withFeatureEnabled } from "./withFeatureEnabled.js";

package/src/lib/helpers/isPointVisible.ts

@@ -0,0 +1,7 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import { getVisibleArea } from "./getVisibleArea.js";
+
+export function isPointVisible(canvas: MarkupCanvas, x: number, y: number): boolean {
+  const visibleArea = getVisibleArea(canvas);
+  return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+}

package/src/lib/rulers/createRulers.ts

@@ -56,7 +56,6 @@ export function createRulers(canvas: Canvas, config: Required<MarkupCanvasConfig
         if (elements.horizontalRuler) elements.horizontalRuler.style.display = "block";
         if (elements.verticalRuler) elements.verticalRuler.style.display = "block";
         if (elements.cornerBox) elements.cornerBox.style.display = "flex";
-        if (elements.gridOverlay) elements.gridOverlay.style.display = "block";
       },
 
       hide: () => {

package/src/lib/transform/applyZoomToCanvas.ts

@@ -1,7 +1,7 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import { getZoomToMouseTransform } from "@/lib/matrix";
-import type { Canvas } from "@/types";
 
-export function applyZoomToCanvas(canvas: Canvas, rawZoomFactor: number, centerX: number, centerY: number): boolean {
+export function applyZoomToCanvas(canvas: MarkupCanvas, rawZoomFactor: number, centerX: number, centerY: number): boolean {
   const newTransform = getZoomToMouseTransform(centerX, centerY, canvas.transform, rawZoomFactor, canvas.config);
   return canvas.updateTransform(newTransform);
 }

package/src/lib/window/bindCanvasToWindow.ts

@@ -0,0 +1,128 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { MarkupCanvasConfig, WindowAPI } from "@/types/index.js";
+
+export function bindCanvasToWindow(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const canvasName = config.name || "markupCanvas";
+  const windowObj = window as unknown as Record<string, unknown>;
+
+  const api: WindowAPI = {
+    config: {
+      get current() {
+        return canvas.config;
+      },
+      get: canvas.getConfig.bind(canvas),
+      update: canvas.updateConfig.bind(canvas),
+    },
+    // Transform group
+    transform: {
+      update: canvas.updateTransform.bind(canvas),
+      reset: canvas.reset.bind(canvas),
+    },
+
+    // Zoom group
+    zoom: {
+      set: canvas.setZoom.bind(canvas),
+      toPoint: canvas.zoomToPoint.bind(canvas),
+      in: canvas.zoomIn.bind(canvas),
+      out: canvas.zoomOut.bind(canvas),
+      reset: canvas.resetZoom.bind(canvas),
+      resetToCenter: canvas.resetViewToCenter.bind(canvas),
+      fitToScreen: canvas.fitToScreen.bind(canvas),
+    },
+
+    // Pan group
+    pan: {
+      left: canvas.panLeft.bind(canvas),
+      right: canvas.panRight.bind(canvas),
+      up: canvas.panUp.bind(canvas),
+      down: canvas.panDown.bind(canvas),
+      toPoint: canvas.scrollToPoint.bind(canvas),
+      toCenter: canvas.centerContent.bind(canvas),
+    },
+
+    // Mouse drag group
+    mouseDrag: {
+      enable: canvas.enableMouseDrag.bind(canvas),
+      disable: canvas.disableMouseDrag.bind(canvas),
+      isEnabled: canvas.isMouseDragEnabled.bind(canvas),
+    },
+
+    // Grid group
+    grid: {
+      toggle: canvas.toggleGrid.bind(canvas),
+      show: canvas.showGrid.bind(canvas),
+      hide: canvas.hideGrid.bind(canvas),
+      isVisible: canvas.isGridVisible.bind(canvas),
+    },
+
+    // Ruler group
+    rulers: {
+      toggle: canvas.toggleRulers.bind(canvas),
+      show: canvas.showRulers.bind(canvas),
+      hide: canvas.hideRulers.bind(canvas),
+      isVisible: canvas.areRulersVisible.bind(canvas),
+    },
+
+    // Utility group
+    canvas: {
+      canvasToContent: canvas.canvasToContent.bind(canvas),
+      getVisibleArea: canvas.getVisibleArea.bind(canvas),
+      isPointVisible: canvas.isPointVisible.bind(canvas),
+      getBounds: canvas.getBounds.bind(canvas),
+    },
+
+    theme: {
+      get current() {
+        return canvas.config.themeMode;
+      },
+      update: canvas.updateThemeMode.bind(canvas),
+      toggle: canvas.toggleThemeMode.bind(canvas),
+    },
+
+    transition: {
+      get current() {
+        return canvas.config.enableTransition;
+      },
+      set: canvas.updateTransition.bind(canvas),
+      toggle: canvas.toggleTransitionMode.bind(canvas),
+    },
+
+    // Event group
+    event: canvas.event,
+
+    // Lifecycle group
+    lifecycle: {
+      cleanup: canvas.cleanup.bind(canvas),
+      destroy: canvas.destroy.bind(canvas),
+    },
+
+    // Properties/State group
+    state: {
+      get isReady() {
+        return canvas.isReady;
+      },
+      get isTransforming() {
+        return canvas.isTransforming;
+      },
+      get visibleBounds() {
+        return canvas.visibleBounds;
+      },
+      get transform() {
+        return canvas.transform;
+      },
+    },
+  };
+
+  // Bind public API to window
+  windowObj[canvasName] = api;
+
+  // Track all instances
+  if (!windowObj.__markupCanvasInstances) {
+    windowObj.__markupCanvasInstances = new Map();
+  }
+  (windowObj.__markupCanvasInstances as unknown as Map<string, unknown>).set(canvasName, api);
+}

package/src/lib/window/broadcastEvent.ts

@@ -0,0 +1,38 @@
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function broadcastEvent(event: string, data: unknown, config: Required<MarkupCanvasConfig>): 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: config.name,
+    },
+    "*"
+  );
+
+  if (window.parent) {
+    window.parent.postMessage(
+      {
+        source: "markup-canvas",
+        event,
+        data: broadcastData,
+        timestamp: Date.now(),
+        canvasName: config.name,
+      },
+      "*"
+    );
+  }
+}

package/src/lib/window/cleanupWindowBinding.ts

@@ -0,0 +1,15 @@
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function cleanupWindowBinding(config: Required<MarkupCanvasConfig>): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const canvasName = 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, unknown>).delete(canvasName);
+  }
+}

package/src/lib/window/index.ts

@@ -0,0 +1,3 @@
+export { bindCanvasToWindow } from "./bindCanvasToWindow.js";
+export { broadcastEvent } from "./broadcastEvent.js";
+export { cleanupWindowBinding } from "./cleanupWindowBinding.js";

package/src/types/canvas.ts

@@ -1,5 +1,3 @@
-import type { MarkupCanvasConfig } from "./config";
-
 export interface Transform {
   scale: number;
   translateX: number;
@@ -11,7 +9,6 @@ export interface CanvasOptions {
   height?: number;
   enableAcceleration?: boolean;
   enableEventHandling?: boolean;
-  onTransformUpdate?: (transform: Transform) => void;
 }
 
 export interface CanvasBounds {
@@ -38,53 +35,9 @@ export interface CanvasBounds {
   canZoomOut: boolean;
 }
 
-export interface BaseCanvas {
+export interface Canvas {
   container: HTMLElement;
   transformLayer: HTMLElement;
   contentLayer: HTMLElement;
-  config: Required<MarkupCanvasConfig>;
   transform: Transform;
-  getBounds: () => CanvasBounds;
-  updateTransform: (newTransform: Partial<Transform>) => boolean;
-  reset: () => boolean;
-  handleResize: () => boolean;
-  setZoom: (zoomLevel: number) => boolean;
-  canvasToContent: (x: number, y: number) => { x: number; y: number };
-  zoomToPoint: (x: number, y: number, targetScale: number) => boolean;
-  resetView: () => boolean;
-  zoomToFitContent: () => boolean;
-}
-
-// Legacy Canvas interface - kept for backwards compatibility with other parts of the codebase
-export interface Canvas extends BaseCanvas {
-  cleanup?: () => void;
-  // Exposed control functions for custom keyboard implementation
-  panLeft: (distance?: number) => boolean;
-  panRight: (distance?: number) => boolean;
-  panUp: (distance?: number) => boolean;
-  panDown: (distance?: number) => boolean;
-  zoomIn: (factor?: number) => boolean;
-  zoomOut: (factor?: number) => boolean;
-  resetZoom: (duration?: number) => boolean;
-  resetViewToCenter: () => boolean;
-  // Mouse drag control functions
-  enableMouseDrag: () => boolean;
-  disableMouseDrag: () => boolean;
-  isMouseDragEnabled: () => boolean;
-  // Grid control functions
-  toggleGrid?: () => boolean;
-  showGrid?: () => boolean;
-  hideGrid?: () => boolean;
-  isGridVisible?: () => boolean;
-  // Ruler control functions
-  toggleRulers?: () => boolean;
-  showRulers?: () => boolean;
-  hideRulers?: () => boolean;
-  areRulersVisible?: () => boolean;
-  // Additional utility functions
-  centerContent: () => boolean;
-  fitToScreen: () => boolean;
-  getVisibleArea: () => { x: number; y: number; width: number; height: number };
-  isPointVisible: (x: number, y: number) => boolean;
-  scrollToPoint: (x: number, y: number, duration?: number) => boolean;
 }

package/src/types/config.ts

@@ -1,13 +1,10 @@
-import type { Transform } from "./canvas";
-
 export interface MarkupCanvasConfig {
   // Canvas dimensions
   width?: number;
   height?: number;
   enableAcceleration?: boolean;
 
-  // Global Binding & Instance Access
-  bindToWindow?: boolean;
+  // Global Instance Access
   name?: string;
 
   // Post Message API
@@ -71,7 +68,4 @@ export interface MarkupCanvasConfig {
 
   // Theme
   themeMode?: "light" | "dark";
-
-  // Callbacks
-  onTransformUpdate?: (transform: Transform) => void;
 }

package/src/types/events.ts

@@ -6,6 +6,8 @@ export interface MarkupCanvasEvents {
   zoom: number;
   pan: { x: number; y: number };
   ready: MarkupCanvas;
+  rulersVisibility: boolean;
+  gridVisibility: boolean;
   [key: string]: unknown;
 }
 
@@ -50,7 +52,9 @@ export type PostMessageAction =
   | "showGrid"
   | "hideGrid"
   | "updateThemeMode"
-  | "toggleThemeMode";
+  | "toggleThemeMode"
+  | "updateTransition"
+  | "toggleTransitionMode";
 
 export interface PostMessageRequest {
   source: "markup-canvas";
@@ -58,3 +62,5 @@ export interface PostMessageRequest {
   action: PostMessageAction;
   args?: unknown[];
 }
+
+export type CallbackEventName = "transform" | "zoom" | "pan" | "ready" | "rulersVisibility" | "gridVisibility";