@markup-canvas/core 1.0.0

package/src/lib/canvas/getCanvasMethods.ts

@@ -0,0 +1,104 @@
+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) {
+      const newRect = this.container.getBoundingClientRect();
+
+      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, (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,
+        });
+      });
+    },
+  };
+}

package/src/lib/canvas/getEmptyBounds.ts

@@ -0,0 +1,22 @@
+import type { CanvasBounds } from "@/types";
+
+export function getEmptyBounds(): CanvasBounds {
+  return {
+    width: 0,
+    height: 0,
+    contentWidth: 0,
+    contentHeight: 0,
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+    visibleArea: { x: 0, y: 0, width: 0, height: 0 },
+    scaledContentWidth: 0,
+    scaledContentHeight: 0,
+    canPanLeft: false,
+    canPanRight: false,
+    canPanUp: false,
+    canPanDown: false,
+    canZoomIn: false,
+    canZoomOut: false,
+  };
+}

package/src/lib/canvas/index.ts

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

package/src/lib/canvas/moveExistingContent.ts

@@ -0,0 +1,9 @@
+import { TRANSFORM_LAYER_CLASS } from "@/lib/constants";
+
+export function moveExistingContent(existingContent: Element[], contentLayer: HTMLElement, transformLayer: HTMLElement): void {
+  existingContent.forEach((child) => {
+    if (child !== transformLayer && !child.classList.contains(TRANSFORM_LAYER_CLASS)) {
+      contentLayer.appendChild(child);
+    }
+  });
+}

package/src/lib/canvas/setupCanvasContainer.ts

@@ -0,0 +1,22 @@
+import { checkContainerDimensions } from "@/lib/canvas/checkContainerDimensions";
+import { CANVAS_CONTAINER_CLASS } from "@/lib/constants";
+
+export function setupCanvasContainer(container: HTMLElement): void {
+  const currentPosition = getComputedStyle(container).position;
+  if (currentPosition === "static") {
+    container.style.position = "relative";
+  }
+  container.style.overflow = "hidden";
+  container.style.cursor = "grab";
+  container.style.overscrollBehavior = "none";
+
+  if (!container.hasAttribute("tabindex")) {
+    container.setAttribute("tabindex", "0");
+  }
+
+  checkContainerDimensions(container);
+
+  if (!container.classList.contains(CANVAS_CONTAINER_CLASS)) {
+    container.classList.add(CANVAS_CONTAINER_CLASS);
+  }
+}

package/src/lib/canvas/setupContentLayer.ts

@@ -0,0 +1,6 @@
+export function setupContentLayer(contentLayer: HTMLElement): void {
+  contentLayer.style.position = "relative";
+  contentLayer.style.width = "100%";
+  contentLayer.style.height = "100%";
+  contentLayer.style.pointerEvents = "auto";
+}

package/src/lib/canvas/setupTransformLayer.ts

@@ -0,0 +1,15 @@
+import { RULER_SIZE } from "@/lib/rulers/constants";
+import type { MarkupCanvasConfig } from "@/types";
+
+// Sets up the transform layer with proper styles and dimensions
+export function setupTransformLayer(transformLayer: HTMLElement, config: Required<MarkupCanvasConfig>): void {
+  transformLayer.style.position = "absolute";
+
+  const rulerOffset = RULER_SIZE;
+
+  transformLayer.style.top = `${rulerOffset}px`;
+  transformLayer.style.left = `${rulerOffset}px`;
+  transformLayer.style.width = `${config.width}px`;
+  transformLayer.style.height = `${config.height}px`;
+  transformLayer.style.transformOrigin = "0 0";
+}

package/src/lib/config/constants.ts

@@ -0,0 +1,56 @@
+import type { MarkupCanvasConfig } from "@/types";
+
+export const DEFAULT_CONFIG: Required<MarkupCanvasConfig> = {
+  // Canvas dimensions
+  width: 8000,
+  height: 8000,
+  enableAcceleration: true,
+
+  // Interaction controls
+  enableZoom: true,
+  enablePan: true,
+  enableTouch: true,
+  enableKeyboard: true,
+  limitKeyboardEventsToCanvas: false,
+
+  // Zoom behavior
+  zoomSpeed: 1.5,
+  minZoom: 0.05,
+  maxZoom: 80,
+  enableTransition: true,
+  transitionDuration: 0.2,
+  enableAdaptiveSpeed: true,
+
+  // Pan behavior
+  enableLeftDrag: true,
+  enableMiddleDrag: true,
+  requireSpaceForMouseDrag: false,
+
+  // Keyboard behavior
+  keyboardPanStep: 50,
+  keyboardFastMultiplier: 20,
+  keyboardZoomStep: 0.2,
+
+  // Click-to-zoom
+  enableClickToZoom: true,
+  clickZoomLevel: 1.0,
+  requireOptionForClickZoom: false,
+
+  // Visual elements
+  enableRulers: true,
+  enableGrid: true,
+  gridColor: "rgba(0, 123, 255, 0.1)",
+
+  // Ruler styling
+  rulerBackgroundColor: "rgba(255, 255, 255, 0.95)",
+  rulerBorderColor: "#ddd",
+  rulerTextColor: "#666",
+  rulerMajorTickColor: "#999",
+  rulerMinorTickColor: "#ccc",
+  rulerFontSize: 10,
+  rulerFontFamily: "Monaco, Menlo, monospace",
+  rulerUnits: "px",
+
+  // Callbacks
+  onTransformUpdate: () => {},
+};

package/src/lib/config/createMarkupCanvasConfig.ts

@@ -0,0 +1,56 @@
+import { DEFAULT_CONFIG } from "@/lib/config/constants.js";
+import type { MarkupCanvasConfig } from "@/types/index.js";
+
+export function createMarkupCanvasConfig(options: MarkupCanvasConfig = {}): Required<MarkupCanvasConfig> {
+  const config: Required<MarkupCanvasConfig> = {
+    ...DEFAULT_CONFIG,
+    ...options,
+  };
+
+  if (typeof config.width !== "number" || config.width <= 0) {
+    console.warn("Invalid width, using default");
+    config.width = DEFAULT_CONFIG.width;
+  }
+
+  if (typeof config.height !== "number" || config.height <= 0) {
+    console.warn("Invalid height, using default");
+    config.height = DEFAULT_CONFIG.height;
+  }
+
+  if (typeof config.zoomSpeed !== "number" || config.zoomSpeed <= 0) {
+    console.warn("Invalid zoomSpeed, using default");
+    config.zoomSpeed = DEFAULT_CONFIG.zoomSpeed;
+  }
+
+  if (typeof config.minZoom !== "number" || config.minZoom <= 0) {
+    console.warn("Invalid minZoom, using default");
+    config.minZoom = DEFAULT_CONFIG.minZoom;
+  }
+
+  if (typeof config.maxZoom !== "number" || config.maxZoom <= config.minZoom) {
+    console.warn("Invalid maxZoom, using default");
+    config.maxZoom = DEFAULT_CONFIG.maxZoom;
+  }
+
+  if (typeof config.keyboardPanStep !== "number" || config.keyboardPanStep <= 0) {
+    console.warn("Invalid keyboardPanStep, using default");
+    config.keyboardPanStep = DEFAULT_CONFIG.keyboardPanStep;
+  }
+
+  if (typeof config.keyboardFastMultiplier !== "number" || config.keyboardFastMultiplier <= 0) {
+    console.warn("Invalid keyboardFastMultiplier, using default");
+    config.keyboardFastMultiplier = DEFAULT_CONFIG.keyboardFastMultiplier;
+  }
+
+  if (typeof config.clickZoomLevel !== "number" || config.clickZoomLevel <= 0) {
+    console.warn("Invalid clickZoomLevel, using default");
+    config.clickZoomLevel = DEFAULT_CONFIG.clickZoomLevel;
+  }
+
+  if (typeof config.rulerFontSize !== "number" || config.rulerFontSize <= 0) {
+    console.warn("Invalid rulerFontSize, using default");
+    config.rulerFontSize = DEFAULT_CONFIG.rulerFontSize;
+  }
+
+  return config;
+}

package/src/lib/constants.ts

@@ -0,0 +1,16 @@
+// Default transform values
+export const DEFAULT_ZOOM = 1.0;
+
+// Validation thresholds
+export const ZOOM_CHANGE_THRESHOLD = 0.001;
+
+// CSS transition values
+export const FALLBACK_TRANSITION_DURATION = 0.2;
+
+// Zoom to fit padding factor
+export const ZOOM_FIT_PADDING = 0.9;
+
+// CSS class names
+export const CANVAS_CONTAINER_CLASS = "canvas-container";
+export const TRANSFORM_LAYER_CLASS = "transform-layer";
+export const CONTENT_LAYER_CLASS = "content-layer";

package/src/lib/events/EventEmitter.ts

@@ -0,0 +1,34 @@
+export class EventEmitter<Events extends Record<string, unknown>> {
+  private listeners: Map<keyof Events, Set<(data: unknown) => void>> = new Map();
+
+  on<K extends keyof Events>(event: K, handler: (data: Events[K]) => void): void {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(handler as (data: unknown) => void);
+  }
+
+  off<K extends keyof Events>(event: K, handler: (data: Events[K]) => void): void {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.delete(handler as (data: unknown) => void);
+    }
+  }
+
+  emit<K extends keyof Events>(event: K, data: Events[K]): void {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(data);
+        } catch (error) {
+          console.error(`Error in event handler for "${String(event)}":`, error);
+        }
+      });
+    }
+  }
+
+  removeAllListeners(): void {
+    this.listeners.clear();
+  }
+}

package/src/lib/events/constants.ts

@@ -0,0 +1,9 @@
+export const REFERENCE_DISPLAY_AREA = 1920 * 1080;
+
+export const TRACKPAD_PINCH_SPEED_FACTOR = 0.05;
+export const ADAPTIVE_ZOOM_FACTOR = 1;
+
+export const CLICK_THRESHOLDS = {
+  MAX_DURATION: 300,
+  MAX_MOVEMENT: 5,
+} as const;

package/src/lib/events/index.ts

@@ -0,0 +1,6 @@
+export { setupKeyboardEvents } from "./keyboard/setupKeyboardEvents.js";
+export { setupMouseEvents } from "./mouse/setupMouseEvents.js";
+export { setupTouchEvents } from "./touch/setupTouchEvents.js";
+export { detectTrackpadGesture } from "./trackpad/detectTrackpadGesture.js";
+export { getAdaptiveZoomSpeed } from "./utils/getAdaptiveZoomSpeed.js";
+export { setupWheelEvents } from "./wheel/setupWheelEvents.js";

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

@@ -0,0 +1,18 @@
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleKeyDown(
+  event: KeyboardEvent,
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isDragging: boolean,
+  setters: {
+    setIsSpacePressed: (value: boolean) => void;
+  }
+): void {
+  if (config.requireSpaceForMouseDrag && event.key === " ") {
+    setters.setIsSpacePressed(true);
+    updateCursor(canvas, config, isDragEnabled, true, isDragging);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { resetDragState } from "@/lib/events/utils/resetDragState.js";
+import { updateCursor } from "@/lib/events/utils/updateCursor.js";
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+
+export function handleKeyUp(
+  event: KeyboardEvent,
+  canvas: Canvas,
+  config: Required<MarkupCanvasConfig>,
+  isDragEnabled: boolean,
+  isDragging: boolean,
+  setters: {
+    setIsSpacePressed: (value: boolean) => void;
+    setIsDragging: (value: boolean) => void;
+    setDragButton: (value: number) => void;
+  }
+): void {
+  if (config.requireSpaceForMouseDrag && event.key === " ") {
+    setters.setIsSpacePressed(false);
+    updateCursor(canvas, config, isDragEnabled, false, isDragging);
+    // Stop dragging if currently dragging
+    if (isDragging) {
+      resetDragState(canvas, config, isDragEnabled, false, {
+        setIsDragging: setters.setIsDragging,
+        setDragButton: setters.setDragButton,
+      });
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.js";
+import { withRulerOffsets } from "@/lib/helpers/index.js";
+import { clampZoom } from "@/lib/matrix/clampZoom.js";
+import { getZoomToMouseTransform } from "@/lib/matrix/getZoomToMouseTransform.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function setupKeyboardEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+  // Track mouse position
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  function handleMouseMove(event: MouseEvent): void {
+    const rect = canvas.container.getBoundingClientRect();
+    const rawMouseX = event.clientX - rect.left;
+    const rawMouseY = event.clientY - rect.top;
+
+    withRulerOffsets(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
+      lastMouseX = adjustedX;
+      lastMouseY = adjustedY;
+    });
+  }
+
+  function handleKeyDown(event: Event): void {
+    if (!(event instanceof KeyboardEvent)) return;
+
+    if (config.limitKeyboardEventsToCanvas && document.activeElement !== canvas.container) return;
+
+    const isFastPan = event.shiftKey;
+    const panDistance = config.keyboardPanStep * (isFastPan ? config.keyboardFastMultiplier : 1);
+
+    let handled = false;
+    const newTransform: Partial<Transform> = {};
+
+    switch (event.key) {
+      case "ArrowLeft":
+        newTransform.translateX = canvas.transform.translateX + panDistance;
+        handled = true;
+        break;
+      case "ArrowRight":
+        newTransform.translateX = canvas.transform.translateX - panDistance;
+        handled = true;
+        break;
+      case "ArrowUp":
+        newTransform.translateY = canvas.transform.translateY + panDistance;
+        handled = true;
+        break;
+      case "ArrowDown":
+        newTransform.translateY = canvas.transform.translateY - panDistance;
+        handled = true;
+        break;
+      case "=":
+      case "+":
+        {
+          const adaptiveZoomStep = config.enableAdaptiveSpeed
+            ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+            : config.keyboardZoomStep;
+          newTransform.scale = clampZoom(canvas.transform.scale * (1 + adaptiveZoomStep), config);
+          handled = true;
+        }
+        break;
+      case "-":
+        {
+          const adaptiveZoomStep = config.enableAdaptiveSpeed
+            ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+            : config.keyboardZoomStep;
+          newTransform.scale = clampZoom(canvas.transform.scale * (1 - adaptiveZoomStep), config);
+          handled = true;
+        }
+        break;
+      case "0":
+        if (event.metaKey || event.ctrlKey) {
+          const targetScale = 1.0;
+          const zoomFactor = targetScale / canvas.transform.scale;
+
+          const zoomTransform = getZoomToMouseTransform(lastMouseX, lastMouseY, canvas.transform, zoomFactor, config);
+
+          Object.assign(newTransform, zoomTransform);
+          handled = true;
+        }
+        break;
+      case "g":
+      case "G":
+        if (canvas.toggleGrid) {
+          canvas.toggleGrid();
+        }
+        handled = true;
+        break;
+      case "r":
+      case "R":
+        if (!event.metaKey && !event.ctrlKey && !event.altKey && canvas.toggleRulers) {
+          canvas.toggleRulers();
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      if (Object.keys(newTransform).length > 0) {
+        canvas.updateTransform(newTransform);
+      }
+    }
+  }
+
+  const keyboardTarget = config.limitKeyboardEventsToCanvas ? canvas.container : document;
+
+  keyboardTarget.addEventListener("keydown", handleKeyDown);
+  canvas.container.addEventListener("mousemove", handleMouseMove);
+
+  return () => {
+    keyboardTarget.removeEventListener("keydown", handleKeyDown);
+    canvas.container.removeEventListener("mousemove", handleMouseMove);
+  };
+}

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

@@ -0,0 +1,115 @@
+import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.js";
+import { withRulerOffsets } from "@/lib/helpers/index.js";
+import { clampZoom } from "@/lib/matrix/clampZoom.js";
+import { getZoomToMouseTransform } from "@/lib/matrix/getZoomToMouseTransform.js";
+import type { Canvas, MarkupCanvasConfig, Transform } from "@/types/index.js";
+
+export function setupKeyboardEvents(canvas: Canvas, config: Required<MarkupCanvasConfig>): () => void {
+  // Track mouse position
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  function handleMouseMove(event: MouseEvent): void {
+    const rect = canvas.container.getBoundingClientRect();
+    const rawMouseX = event.clientX - rect.left;
+    const rawMouseY = event.clientY - rect.top;
+
+    // Use the new helper to adjust for ruler offset
+    withRulerOffsets(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
+      lastMouseX = adjustedX;
+      lastMouseY = adjustedY;
+    });
+  }
+
+  function handleKeyDown(event: Event): void {
+    if (!(event instanceof KeyboardEvent)) return;
+
+    if (config.limitKeyboardEventsToCanvas && document.activeElement !== canvas.container) return;
+
+    const isFastPan = event.shiftKey;
+    const panDistance = config.keyboardPanStep * (isFastPan ? config.keyboardFastMultiplier : 1);
+
+    let handled = false;
+    const newTransform: Partial<Transform> = {};
+
+    switch (event.key) {
+      case "ArrowLeft":
+        newTransform.translateX = canvas.transform.translateX + panDistance;
+        handled = true;
+        break;
+      case "ArrowRight":
+        newTransform.translateX = canvas.transform.translateX - panDistance;
+        handled = true;
+        break;
+      case "ArrowUp":
+        newTransform.translateY = canvas.transform.translateY + panDistance;
+        handled = true;
+        break;
+      case "ArrowDown":
+        newTransform.translateY = canvas.transform.translateY - panDistance;
+        handled = true;
+        break;
+      case "=":
+      case "+":
+        {
+          const adaptiveZoomStep = config.enableAdaptiveSpeed
+            ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+            : config.keyboardZoomStep;
+          newTransform.scale = clampZoom(canvas.transform.scale * (1 + adaptiveZoomStep), config);
+          handled = true;
+        }
+        break;
+      case "-":
+        {
+          const adaptiveZoomStep = config.enableAdaptiveSpeed
+            ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
+            : config.keyboardZoomStep;
+          newTransform.scale = clampZoom(canvas.transform.scale * (1 - adaptiveZoomStep), config);
+          handled = true;
+        }
+        break;
+      case "0":
+        if (event.metaKey || event.ctrlKey) {
+          const targetScale = 1.0;
+          const zoomFactor = targetScale / canvas.transform.scale;
+
+          const zoomTransform = getZoomToMouseTransform(lastMouseX, lastMouseY, canvas.transform, zoomFactor, config);
+
+          Object.assign(newTransform, zoomTransform);
+          handled = true;
+        }
+        break;
+      case "g":
+      case "G":
+        if (canvas.toggleGrid) {
+          canvas.toggleGrid();
+        }
+        handled = true;
+        break;
+      case "r":
+      case "R":
+        if (!event.metaKey && !event.ctrlKey && !event.altKey && canvas.toggleRulers) {
+          canvas.toggleRulers();
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      if (Object.keys(newTransform).length > 0) {
+        canvas.updateTransform(newTransform);
+      }
+    }
+  }
+
+  const keyboardTarget = config.limitKeyboardEventsToCanvas ? canvas.container : document;
+
+  keyboardTarget.addEventListener("keydown", handleKeyDown);
+  canvas.container.addEventListener("mousemove", handleMouseMove);
+
+  return () => {
+    keyboardTarget.removeEventListener("keydown", handleKeyDown);
+    canvas.container.removeEventListener("mousemove", handleMouseMove);
+  };
+}