@markup-canvas/core 1.1.7 → 1.2.1

package/src/lib/actions/pan/centerContent.ts

@@ -0,0 +1,21 @@
+import { getCanvasBounds } from "@/lib/canvas/getCanvasBounds.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function centerContent(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  updateTransformFn: (newTransform: Partial<Transform>) => boolean,
+  transformLayer: HTMLElement
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    const bounds = getCanvasBounds(canvas, config);
+    const centerX = (bounds.width - bounds.contentWidth * canvas.transform.scale) / 2;
+    const centerY = (bounds.height - bounds.contentHeight * canvas.transform.scale) / 2;
+
+    return updateTransformFn({
+      translateX: centerX,
+      translateY: centerY,
+    });
+  });
+}

package/src/lib/actions/pan/index.ts

@@ -0,0 +1,6 @@
+export { centerContent } from "./centerContent.js";
+export { panDown } from "./panDown.js";
+export { panLeft } from "./panLeft.js";
+export { panRight } from "./panRight.js";
+export { panUp } from "./panUp.js";
+export { scrollToPoint } from "./scrollToPoint.js";

package/src/lib/actions/pan/panDown.ts

@@ -0,0 +1,13 @@
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function panDown(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  updateTransform: (newTransform: Partial<Transform>) => boolean
+): boolean {
+  const panDistance = config.keyboardPanStep;
+  const newTransform: Partial<Transform> = {
+    translateY: canvas.transform.translateY - panDistance,
+  };
+  return updateTransform(newTransform);
+}

package/src/lib/actions/pan/panLeft.ts

@@ -0,0 +1,13 @@
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function panLeft(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  updateTransform: (newTransform: Partial<Transform>) => boolean
+): boolean {
+  const panDistance = config.keyboardPanStep;
+  const newTransform: Partial<Transform> = {
+    translateX: canvas.transform.translateX + panDistance,
+  };
+  return updateTransform(newTransform);
+}

package/src/lib/actions/pan/panRight.ts

@@ -0,0 +1,13 @@
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function panRight(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  updateTransform: (newTransform: Partial<Transform>) => boolean
+): boolean {
+  const panDistance = config.keyboardPanStep;
+  const newTransform: Partial<Transform> = {
+    translateX: canvas.transform.translateX - panDistance,
+  };
+  return updateTransform(newTransform);
+}

package/src/lib/actions/pan/panUp.ts

@@ -0,0 +1,13 @@
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function panUp(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  updateTransform: (newTransform: Partial<Transform>) => boolean
+): boolean {
+  const panDistance = config.keyboardPanStep;
+  const newTransform: Partial<Transform> = {
+    translateY: canvas.transform.translateY + panDistance,
+  };
+  return updateTransform(newTransform);
+}

package/src/lib/actions/pan/scrollToPoint.ts

@@ -0,0 +1,27 @@
+import { getCanvasBounds } from "@/lib/canvas/getCanvasBounds.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function scrollToPoint(
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  x: number,
+  y: number,
+  updateTransform: (newTransform: Partial<Transform>) => boolean,
+  transformLayer: HTMLElement
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    const bounds = getCanvasBounds(canvas, config);
+    const centerX = bounds.width / 2;
+    const centerY = bounds.height / 2;
+
+    // Calculate new translation to center the point
+    const newTranslateX = centerX - x * canvas.transform.scale;
+    const newTranslateY = centerY - y * canvas.transform.scale;
+
+    return updateTransform({
+      translateX: newTranslateX,
+      translateY: newTranslateY,
+    });
+  });
+}

package/src/lib/actions/transform/index.ts

@@ -0,0 +1,2 @@
+export { resetTransform } from "./resetTransform.js";
+export { updateTransform } from "./updateTransform.js";

package/src/lib/actions/transform/resetTransform.ts

@@ -0,0 +1,11 @@
+import type { Canvas, Transform } from "@/types/index.js";
+import { updateTransform } from "./updateTransform.js";
+
+export function resetTransform(canvas: Canvas): boolean {
+  const resetTransformData: Transform = {
+    scale: 1.0,
+    translateX: 0,
+    translateY: 0,
+  };
+  return updateTransform(canvas, resetTransformData);
+}

package/src/lib/actions/transform/updateTransform.ts

@@ -0,0 +1,9 @@
+import { createMatrix } from "@/lib/matrix/createMatrix.js";
+import { applyTransform } from "@/lib/transform/index.js";
+import type { Canvas, Transform } from "@/types/index.js";
+
+export function updateTransform(canvas: Canvas, newTransform: Partial<Transform>): boolean {
+  canvas.transform = { ...canvas.transform, ...newTransform };
+  const matrix = createMatrix(canvas.transform.scale, canvas.transform.translateX, canvas.transform.translateY);
+  return applyTransform(canvas.transformLayer, matrix);
+}

package/src/lib/actions/ui/grid/hideGrid.ts

@@ -0,0 +1,9 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function hideGrid(rulers: RulerSystem | null): boolean {
+  if (rulers?.gridOverlay) {
+    rulers.gridOverlay.style.display = "none";
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/grid/index.ts

@@ -0,0 +1,4 @@
+export { hideGrid } from "./hideGrid.js";
+export { isGridVisible } from "./isGridVisible.js";
+export { showGrid } from "./showGrid.js";
+export { toggleGrid } from "./toggleGrid.js";

package/src/lib/actions/ui/grid/isGridVisible.ts

@@ -0,0 +1,8 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function isGridVisible(rulers: RulerSystem | null): boolean {
+  if (rulers?.gridOverlay) {
+    return rulers.gridOverlay.style.display !== "none";
+  }
+  return false;
+}

package/src/lib/actions/ui/grid/showGrid.ts

@@ -0,0 +1,9 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function showGrid(rulers: RulerSystem | null): boolean {
+  if (rulers?.gridOverlay) {
+    rulers.gridOverlay.style.display = "block";
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/grid/toggleGrid.ts

@@ -0,0 +1,9 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function toggleGrid(rulers: RulerSystem | null): boolean {
+  if (rulers?.toggleGrid) {
+    rulers.toggleGrid();
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/index.ts

@@ -0,0 +1,4 @@
+export * from "./grid/index.js";
+export * from "./rulers/index.js";
+export { toggleTransition } from "./toggleTransition.js";
+export { updateThemeMode } from "./updateThemeMode.js";

package/src/lib/actions/ui/rulers/areRulersVisible.ts

@@ -0,0 +1,8 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function areRulersVisible(rulers: RulerSystem | null): boolean {
+  if (rulers?.horizontalRuler) {
+    return rulers.horizontalRuler.style.display !== "none";
+  }
+  return false;
+}

package/src/lib/actions/ui/rulers/hideRulers.ts

@@ -0,0 +1,9 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function hideRulers(rulers: RulerSystem | null): boolean {
+  if (rulers) {
+    rulers.hide();
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/rulers/index.ts

@@ -0,0 +1,4 @@
+export { areRulersVisible } from "./areRulersVisible.js";
+export { hideRulers } from "./hideRulers.js";
+export { showRulers } from "./showRulers.js";
+export { toggleRulers } from "./toggleRulers.js";

package/src/lib/actions/ui/rulers/showRulers.ts

@@ -0,0 +1,9 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function showRulers(rulers: RulerSystem | null): boolean {
+  if (rulers) {
+    rulers.show();
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/rulers/toggleRulers.ts

@@ -0,0 +1,14 @@
+import type { RulerSystem } from "@/types/index.js";
+
+export function toggleRulers(rulers: RulerSystem | null, areRulersVisible: () => boolean): boolean {
+  if (rulers) {
+    const isVisible = areRulersVisible();
+    if (isVisible) {
+      rulers.hide();
+    } else {
+      rulers.show();
+    }
+    return true;
+  }
+  return false;
+}

package/src/lib/actions/ui/toggleTransition.ts

@@ -0,0 +1,3 @@
+export function toggleTransition(enableTransition: boolean): boolean {
+  return !enableTransition;
+}

package/src/lib/actions/ui/updateThemeMode.ts

@@ -0,0 +1,25 @@
+import { createMarkupCanvasConfig } from "@/lib/config/createMarkupCanvasConfig.js";
+import { getThemeValue } from "@/lib/helpers/index.js";
+import type { MarkupCanvasConfig, RulerSystem } from "@/types/index.js";
+
+export function updateThemeMode(
+  canvasContainer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  rulers: RulerSystem | null,
+  mode: "light" | "dark"
+): void {
+  const newConfig = {
+    ...config,
+    themeMode: mode,
+  };
+  const updatedConfig = createMarkupCanvasConfig(newConfig);
+
+  // Update canvas background color
+  const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
+  canvasContainer.style.backgroundColor = backgroundColor;
+
+  // Update rulers if they exist
+  if (rulers) {
+    rulers.updateTheme(updatedConfig);
+  }
+}

package/src/lib/actions/zoom/index.ts

@@ -0,0 +1,6 @@
+export { resetView } from "./resetView.js";
+export { resetViewToCenter } from "./resetViewToCenter.js";
+export { setZoom } from "./setZoom.js";
+export { zoomIn } from "./zoomIn.js";
+export { zoomOut } from "./zoomOut.js";
+export { zoomToPoint } from "./zoomToPoint.js";

package/src/lib/actions/zoom/resetView.ts

@@ -0,0 +1,17 @@
+import { updateTransform } from "@/lib/actions/transform/updateTransform.js";
+import { withRulerSize } from "@/lib/helpers/index.js";
+import { withTransition } from "@/lib/transition/index.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function resetView(canvas: Canvas, transformLayer: HTMLElement, config: Required<MarkupCanvasConfig>): boolean {
+  return withTransition(transformLayer, config, () => {
+    return withRulerSize(canvas, config.rulerSize, (rulerSize) => {
+      const resetTransformData: Transform = {
+        scale: 1.0,
+        translateX: rulerSize * -1,
+        translateY: rulerSize * -1,
+      };
+      return updateTransform(canvas, resetTransformData);
+    });
+  });
+}

package/src/lib/actions/zoom/resetViewToCenter.ts

@@ -0,0 +1,21 @@
+import { getViewportCenter } from "@/lib/events/utils/getViewportCenter.js";
+import { withClampedZoom } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function resetViewToCenter(
+  canvas: MarkupCanvas,
+  transformLayer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  zoomToPoint: (x: number, y: number, targetScale: number) => boolean
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    return withClampedZoom(config, (clamp) => {
+      const newScale = clamp(1.0);
+
+      const center = getViewportCenter(canvas);
+      return zoomToPoint(center.x, center.y, newScale);
+    });
+  });
+}

package/src/lib/actions/zoom/setZoom.ts

@@ -0,0 +1,22 @@
+import { getViewportCenter } from "@/lib/events/utils/getViewportCenter.js";
+import { withClampedZoom } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function setZoom(
+  canvas: MarkupCanvas,
+  transformLayer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  zoomToPoint: (x: number, y: number, targetScale: number) => boolean,
+  zoomLevel: number
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    return withClampedZoom(config, (clamp) => {
+      const newScale = clamp(zoomLevel);
+
+      const center = getViewportCenter(canvas);
+      return zoomToPoint(center.x, center.y, newScale);
+    });
+  });
+}

package/src/lib/actions/zoom/zoomIn.ts

@@ -0,0 +1,21 @@
+import { getViewportCenter } from "@/lib/events/utils/getViewportCenter.js";
+import { withClampedZoom } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function zoomIn(
+  canvas: MarkupCanvas,
+  transformLayer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  zoomToPoint: (x: number, y: number, targetScale: number) => boolean,
+  factor: number = 0.5
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    return withClampedZoom(config, (clamp) => {
+      const newScale = clamp(canvas.transform.scale * (1 + factor));
+      const center = getViewportCenter(canvas);
+      return zoomToPoint(center.x, center.y, newScale);
+    });
+  });
+}

package/src/lib/actions/zoom/zoomOut.ts

@@ -0,0 +1,21 @@
+import { getViewportCenter } from "@/lib/events/utils/getViewportCenter.js";
+import { withClampedZoom } from "@/lib/helpers/index.js";
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import { withTransition } from "@/lib/transition/withTransition.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function zoomOut(
+  canvas: MarkupCanvas,
+  transformLayer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  zoomToPoint: (x: number, y: number, targetScale: number) => boolean,
+  factor: number = 0.5
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    return withClampedZoom(config, (clamp) => {
+      const newScale = clamp(canvas.transform.scale * (1 - factor));
+      const center = getViewportCenter(canvas);
+      return zoomToPoint(center.x, center.y, newScale);
+    });
+  });
+}

package/src/lib/actions/zoom/zoomToPoint.ts

@@ -0,0 +1,18 @@
+import { updateTransform } from "@/lib/actions/transform/updateTransform.js";
+import { getZoomToMouseTransform } from "@/lib/matrix/getZoomToMouseTransform.js";
+import { withTransition } from "@/lib/transition/index.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function zoomToPoint(
+  canvas: Canvas,
+  transformLayer: HTMLElement,
+  config: Required<MarkupCanvasConfig>,
+  x: number,
+  y: number,
+  targetScale: number
+): boolean {
+  return withTransition(transformLayer, config, () => {
+    const newTransform = getZoomToMouseTransform(x, y, canvas.transform, targetScale / canvas.transform.scale, config);
+    return updateTransform(canvas, newTransform);
+  });
+}

package/src/lib/canvas/createCanvas.ts

@@ -1,13 +1,12 @@
 import { createCanvasLayers } from "@/lib/canvas/createCanvasLayers.js";
-import { getCanvasMethods } from "@/lib/canvas/getCanvasMethods.js";
 import { setupCanvasContainer } from "@/lib/canvas/setupCanvasContainer.js";
 import { DEFAULT_ZOOM } from "@/lib/constants.js";
+import { withFeatureEnabled } from "@/lib/helpers/index.js";
 import { createMatrix } from "@/lib/matrix/createMatrix.js";
 import { applyTransform, enableHardwareAcceleration } from "@/lib/transform/index.js";
-import type { BaseCanvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
 
-// Creates and initializes a canvas with the required DOM structure
-export function createCanvas(container: HTMLElement, config: Required<MarkupCanvasConfig>): BaseCanvas | null {
+export function createCanvas(container: HTMLElement, config: Required<MarkupCanvasConfig>): Canvas | null {
   if (!container?.appendChild) {
     console.error("Invalid container element provided to createCanvas");
     return null;
@@ -18,10 +17,9 @@ export function createCanvas(container: HTMLElement, config: Required<MarkupCanv
 
     const { transformLayer, contentLayer } = createCanvasLayers(container, config);
 
-    // Enable hardware acceleration if requested
-    if (config.enableAcceleration) {
+    withFeatureEnabled(config, "enableAcceleration", () => {
       enableHardwareAcceleration(transformLayer);
-    }
+    });
 
     const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
 
@@ -36,20 +34,14 @@ export function createCanvas(container: HTMLElement, config: Required<MarkupCanv
 
     applyTransform(transformLayer, initialMatrix);
 
-    const canvas: BaseCanvas = {
+    const canvas: Canvas = {
       // DOM references
       container,
       transformLayer,
       contentLayer,
 
-      // Configuration
-      config: config,
-
       // Current state
       transform: initialTransform,
-
-      // Add all canvas methods
-      ...getCanvasMethods(),
     };
 
     return canvas;

package/src/lib/canvas/fitToScreen.ts

@@ -0,0 +1,27 @@
+import { updateTransform } from "@/lib/actions/transform/updateTransform.js";
+import { getCanvasBounds } from "@/lib/canvas/getCanvasBounds.js";
+import { ZOOM_FIT_PADDING } from "@/lib/constants.js";
+import { withClampedZoom } from "@/lib/helpers/index.js";
+import { withTransition } from "@/lib/transition/index.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function fitToScreen(canvas: Canvas, transformLayer: HTMLElement, config: Required<MarkupCanvasConfig>): boolean {
+  return withTransition(transformLayer, config, () => {
+    const bounds = getCanvasBounds(canvas, config);
+    const scaleX = bounds.width / config.width;
+    const scaleY = bounds.height / config.height;
+    const fitScale = withClampedZoom(config, (clamp) => clamp(Math.min(scaleX, scaleY) * ZOOM_FIT_PADDING));
+
+    // Center the content
+    const scaledWidth = config.width * fitScale;
+    const scaledHeight = config.height * fitScale;
+    const centerX = (bounds.width - scaledWidth) / 2;
+    const centerY = (bounds.height - scaledHeight) / 2;
+
+    return updateTransform(canvas, {
+      scale: fitScale,
+      translateX: centerX,
+      translateY: centerY,
+    });
+  });
+}

package/src/lib/canvas/getCanvasBounds.ts

@@ -1,13 +1,12 @@
-import { calculateVisibleArea } from "@/lib/canvas/calcVisibleArea.js";
+import { calculateVisibleArea } from "@/lib/canvas/calculateVisibleArea.js";
 import { getEmptyBounds } from "@/lib/canvas/getEmptyBounds.js";
 import { withRulerSize } from "@/lib/helpers/index.js";
-import type { BaseCanvas, CanvasBounds } from "@/types/index.js";
+import type { Canvas, CanvasBounds, MarkupCanvasConfig } from "@/types/index.js";
 import { DEFAULT_CONFIG } from "../config/constants";
 
-export function getCanvasBounds(canvas: BaseCanvas): CanvasBounds {
+export function getCanvasBounds(canvas: Canvas, config: Required<MarkupCanvasConfig>): CanvasBounds {
   try {
     const container = canvas.container;
-    const config = canvas.config;
     const transform = canvas.transform || {
       scale: 1.0,
       translateX: 0,

package/src/lib/canvas/index.ts

@@ -1,3 +1,3 @@
-export { createCanvasConfig } from "./config.js";
 export { createCanvas } from "./createCanvas.js";
+export { fitToScreen } from "./fitToScreen.js";
 export { getCanvasBounds } from "./getCanvasBounds.js";

package/src/lib/config/constants.ts

@@ -6,8 +6,7 @@ export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
   height: 8000,
   enableAcceleration: true,
 
-  // Global Binding & Instance Access
-  bindToWindow: false,
+  // Global Instance Access
   name: "markupCanvas",
   enablePostMessageAPI: false,
 
@@ -16,7 +15,7 @@ export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
   enablePan: true,
   enableTouch: true,
   enableKeyboard: true,
-  bindKeyboardEventsTo: "canvas",
+  bindKeyboardEventsTo: "document",
 
   // Zoom behavior
   zoomSpeed: 1.5,
@@ -71,7 +70,4 @@ export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
 
   // Theme
   themeMode: "light",
-
-  // Callbacks
-  onTransformUpdate: () => {},
 };

package/src/lib/config/presets/editor-preset.ts

@@ -6,8 +6,7 @@ export const EDITOR_PRESET: Required<MarkupCanvasConfig> = {
   height: 4000,
   enableAcceleration: true,
 
-  // Global Binding & Instance Access
-  bindToWindow: true,
+  // Global Instance Access
   name: "canvas",
   enablePostMessageAPI: true,
 
@@ -43,7 +42,7 @@ export const EDITOR_PRESET: Required<MarkupCanvasConfig> = {
 
   // Visual elements
   enableRulers: true,
-  enableGrid: false,
+  enableGrid: true,
   showRulers: true,
   showGrid: false,
 
@@ -72,7 +71,4 @@ export const EDITOR_PRESET: Required<MarkupCanvasConfig> = {
 
   // Theme
   themeMode: "light",
-
-  // Callbacks
-  onTransformUpdate: () => {},
 };

package/src/lib/events/emitTransformEvents.ts

@@ -0,0 +1,9 @@
+import type { EventEmitter } from "@/lib/events/EventEmitter.js";
+import type { Canvas, MarkupCanvasEvents } from "@/types/index.js";
+
+export function emitTransformEvents(listen: EventEmitter<MarkupCanvasEvents>, canvas: Canvas): void {
+  const transform = canvas.transform;
+  listen.emit("transform", transform);
+  listen.emit("zoom", transform.scale);
+  listen.emit("pan", { x: transform.translateX, y: transform.translateY });
+}

package/src/lib/events/keyboard/handleKeyDown.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 handleKeyDown(
   event: KeyboardEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isDragging: boolean,

package/src/lib/events/keyboard/handleKeyUp.ts

@@ -1,10 +1,11 @@
 import { resetDragState } from "@/lib/events/utils/resetDragState.js";
 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 handleKeyUp(
   event: KeyboardEvent,
-  canvas: Canvas,
+  canvas: MarkupCanvas,
   config: Required<MarkupCanvasConfig>,
   isDragEnabled: boolean,
   isDragging: boolean,

package/src/lib/events/keyboard/setupKeyboardEvents.ts

@@ -1,7 +1,8 @@
 import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.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 setupKeyboardEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+export function setupKeyboardEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): () => void {
   function handleKeyDown(event: Event): void {
     if (!(event instanceof KeyboardEvent)) return;