@markup-canvas/core 1.0.0

package/dist/markup-canvas.umd.js

@@ -0,0 +1,2003 @@
+/**
+ * Markup Canvas
+ * High-performance markup canvas with zoom and pan capabilities
+ * @version 1.0.0
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MarkupCanvas = factory());
+})(this, (function () { 'use strict';
+
+    // Default transform values
+    const DEFAULT_ZOOM = 1.0;
+    // Validation thresholds
+    const ZOOM_CHANGE_THRESHOLD = 0.001;
+    // CSS transition values
+    const FALLBACK_TRANSITION_DURATION = 0.2;
+    // Zoom to fit padding factor
+    const ZOOM_FIT_PADDING = 0.9;
+    // CSS class names
+    const CANVAS_CONTAINER_CLASS = "canvas-container";
+    const TRANSFORM_LAYER_CLASS = "transform-layer";
+    const CONTENT_LAYER_CLASS = "content-layer";
+
+    function moveExistingContent(existingContent, contentLayer, transformLayer) {
+        existingContent.forEach((child) => {
+            if (child !== transformLayer && !child.classList.contains(TRANSFORM_LAYER_CLASS)) {
+                contentLayer.appendChild(child);
+            }
+        });
+    }
+
+    function setupContentLayer(contentLayer) {
+        contentLayer.style.position = "relative";
+        contentLayer.style.width = "100%";
+        contentLayer.style.height = "100%";
+        contentLayer.style.pointerEvents = "auto";
+    }
+
+    // Rulers
+    const RULER_SIZE = 24;
+    const RULER_Z_INDEX = {
+        GRID: 100,
+        RULERS: 1000,
+        CORNER: 1001,
+    };
+    const TICK_SETTINGS = {
+        MAJOR_HEIGHT: 6,
+        MINOR_HEIGHT: 4,
+        MAJOR_WIDTH: 8,
+        MINOR_WIDTH: 4,
+        MAJOR_MULTIPLIER: 5,
+        LABEL_INTERVAL: 100,
+    };
+    const GRID_SETTINGS = {
+        BASE_SIZE: 100,
+        MIN_SIZE: 20,
+        MAX_SIZE: 200,
+    };
+
+    // Sets up the transform layer with proper styles and dimensions
+    function setupTransformLayer(transformLayer, config) {
+        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";
+    }
+
+    function createCanvasLayers(container, config) {
+        const existingContent = Array.from(container.children);
+        // Create or find transform layer
+        let transformLayer = container.querySelector(`.${TRANSFORM_LAYER_CLASS}`);
+        if (!transformLayer) {
+            transformLayer = document.createElement("div");
+            transformLayer.className = TRANSFORM_LAYER_CLASS;
+            container.appendChild(transformLayer);
+        }
+        setupTransformLayer(transformLayer, config);
+        // Create or find content layer
+        let contentLayer = transformLayer.querySelector(`.${CONTENT_LAYER_CLASS}`);
+        if (!contentLayer) {
+            contentLayer = document.createElement("div");
+            contentLayer.className = CONTENT_LAYER_CLASS;
+            transformLayer.appendChild(contentLayer);
+            moveExistingContent(existingContent, contentLayer, transformLayer);
+        }
+        // Set content layer properties
+        setupContentLayer(contentLayer);
+        return { transformLayer, contentLayer };
+    }
+
+    function canvasToContent(canvasX, canvasY, matrix) {
+        if (!matrix?.inverse) {
+            return { x: canvasX, y: canvasY };
+        }
+        try {
+            const inverseMatrix = matrix.inverse();
+            const point = new DOMPoint(canvasX, canvasY);
+            const transformed = point.matrixTransform(inverseMatrix);
+            return {
+                x: transformed.x,
+                y: transformed.y,
+            };
+        }
+        catch (error) {
+            console.warn("Canvas to content conversion failed:", error);
+            return { x: canvasX, y: canvasY };
+        }
+    }
+
+    function clampZoom(scale, config) {
+        return Math.max(config.minZoom, Math.min(config.maxZoom, scale));
+    }
+
+    function createMatrix(scale, translateX, translateY) {
+        return new DOMMatrix([scale, 0, 0, scale, translateX, translateY]);
+    }
+
+    function getZoomToMouseTransform(mouseX, mouseY, currentTransform, zoomFactor, config) {
+        const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+        const transform = currentTransform || {
+            scale: DEFAULT_ZOOM,
+            translateX: rulerOffset,
+            translateY: rulerOffset,
+        };
+        const { scale, translateX, translateY } = transform;
+        // Calculate new scale with clamping
+        const newScale = clampZoom(scale * zoomFactor, config);
+        // Early return if zoom didn't change (hit bounds)
+        if (Math.abs(newScale - scale) < ZOOM_CHANGE_THRESHOLD) {
+            return { scale, translateX, translateY };
+        }
+        // Convert mouse position to content space
+        // Formula: contentPos = (mousePos - translate) / scale
+        const contentX = (mouseX - translateX) / scale;
+        const contentY = (mouseY - translateY) / scale;
+        // Calculate new translation
+        // Formula: newTranslate = mousePos - (contentPos * newScale)
+        const newTranslateX = mouseX - contentX * newScale;
+        const newTranslateY = mouseY - contentY * newScale;
+        return {
+            scale: newScale,
+            translateX: newTranslateX,
+            translateY: newTranslateY,
+        };
+    }
+
+    function calculateVisibleArea(canvasWidth, canvasHeight, contentWidth, contentHeight, transform) {
+        const topLeft = canvasToContent(0, 0, createMatrix(transform.scale, transform.translateX, transform.translateY));
+        const bottomRight = canvasToContent(canvasWidth, canvasHeight, createMatrix(transform.scale, transform.translateX, transform.translateY));
+        return {
+            x: Math.max(0, Math.min(contentWidth, topLeft.x)),
+            y: Math.max(0, Math.min(contentHeight, topLeft.y)),
+            width: Math.max(0, Math.min(contentWidth - topLeft.x, bottomRight.x - topLeft.x)),
+            height: Math.max(0, Math.min(contentHeight - topLeft.y, bottomRight.y - topLeft.y)),
+        };
+    }
+
+    function getEmptyBounds() {
+        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,
+        };
+    }
+
+    function withClampedZoom(config, operation) {
+        const clampFunction = (scale) => clampZoom(scale, config);
+        return operation(clampFunction);
+    }
+
+    const debounceTimers = new Map();
+    function withDebounce(key, delay, operation) {
+        const existingTimer = debounceTimers.get(key);
+        if (existingTimer) {
+            clearTimeout(existingTimer);
+        }
+        const timer = window.setTimeout(() => {
+            operation();
+            debounceTimers.delete(key);
+        }, delay);
+        debounceTimers.set(key, timer);
+    }
+
+    function withFeatureEnabled(config, feature, operation) {
+        if (config[feature]) {
+            return operation();
+        }
+        return null;
+    }
+
+    function withRAFThrottle(func) {
+        let rafId = null;
+        let lastArgs = null;
+        const throttled = (...args) => {
+            lastArgs = args;
+            if (rafId === null) {
+                rafId = requestAnimationFrame(() => {
+                    if (lastArgs) {
+                        func(...lastArgs);
+                    }
+                    rafId = null;
+                    lastArgs = null;
+                });
+            }
+        };
+        throttled.cleanup = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+                lastArgs = null;
+            }
+        };
+        return throttled;
+    }
+
+    function withRulerSize(canvas, operation) {
+        const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+        const rulerSize = hasRulers ? RULER_SIZE : 0;
+        return operation(rulerSize);
+    }
+    function withRulerOffsets(canvas, x, y, operation) {
+        return withRulerSize(canvas, (rulerSize) => {
+            const adjustedX = x - rulerSize;
+            const adjustedY = y - rulerSize;
+            return operation(adjustedX, adjustedY);
+        });
+    }
+    function withRulerOffsetObject(canvas, coords, operation) {
+        return withRulerSize(canvas, (rulerSize) => {
+            const adjusted = {
+                ...coords,
+                x: coords.x - rulerSize,
+                y: coords.y - rulerSize,
+            };
+            return operation(adjusted);
+        });
+    }
+
+    function withRulerOffset(canvas, x, y, operation) {
+        const hasRulers = canvas.container.querySelector(".canvas-ruler") !== null;
+        const adjustedX = hasRulers ? x - RULER_SIZE : x;
+        const adjustedY = hasRulers ? y - RULER_SIZE : y;
+        return operation(adjustedX, adjustedY);
+    }
+
+    const DEFAULT_CONFIG = {
+        // 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: () => { },
+    };
+
+    function getCanvasBounds(canvas) {
+        try {
+            const container = canvas.container;
+            const config = canvas.config;
+            const transform = canvas.transform || {
+                scale: 1.0,
+                translateX: 0,
+                translateY: 0,
+            };
+            // Get canvas dimensions
+            const containerRect = container.getBoundingClientRect();
+            const totalWidth = containerRect.width || container.clientWidth || 0;
+            const totalHeight = containerRect.height || container.clientHeight || 0;
+            // Calculate canvas dimensions accounting for rulers
+            const canvasWidth = withRulerSize({ container }, (rulerSize) => Math.max(0, totalWidth - rulerSize));
+            const canvasHeight = withRulerSize({ container }, (rulerSize) => Math.max(0, totalHeight - rulerSize));
+            // Get content dimensions
+            const contentWidth = config.width || DEFAULT_CONFIG.width;
+            const contentHeight = config.height || DEFAULT_CONFIG.height;
+            // Calculate visible area in content coordinates
+            const visibleArea = calculateVisibleArea(canvasWidth, canvasHeight, contentWidth, contentHeight, transform);
+            return {
+                // Canvas dimensions
+                width: canvasWidth,
+                height: canvasHeight,
+                // Content dimensions
+                contentWidth,
+                contentHeight,
+                // Current transform
+                scale: transform.scale,
+                translateX: transform.translateX,
+                translateY: transform.translateY,
+                // Visible area in content coordinates
+                visibleArea,
+                // Calculated properties
+                scaledContentWidth: contentWidth * transform.scale,
+                scaledContentHeight: contentHeight * transform.scale,
+                // Bounds checking
+                canPanLeft: transform.translateX < 0,
+                canPanRight: transform.translateX + contentWidth * transform.scale > canvasWidth,
+                canPanUp: transform.translateY < 0,
+                canPanDown: transform.translateY + contentHeight * transform.scale > canvasHeight,
+                // Zoom bounds
+                canZoomIn: transform.scale < 3.5,
+                canZoomOut: transform.scale > 0.1,
+            };
+        }
+        catch (error) {
+            console.error("Failed to calculate canvas bounds:", error);
+            return getEmptyBounds();
+        }
+    }
+
+    function createMatrixString(matrix) {
+        return `matrix3d(${matrix.m11}, ${matrix.m12}, ${matrix.m13}, ${matrix.m14}, ${matrix.m21}, ${matrix.m22}, ${matrix.m23}, ${matrix.m24}, ${matrix.m31}, ${matrix.m32}, ${matrix.m33}, ${matrix.m34}, ${matrix.m41}, ${matrix.m42}, ${matrix.m43}, ${matrix.m44})`;
+    }
+
+    function applyTransform(element, matrix) {
+        if (!element?.style || !matrix) {
+            return false;
+        }
+        try {
+            element.style.transform = createMatrixString(matrix);
+            return true;
+        }
+        catch (error) {
+            console.warn("Transform application failed:", error);
+            return false;
+        }
+    }
+
+    function enableHardwareAcceleration(element) {
+        try {
+            // Set CSS properties for hardware acceleration
+            element.style.transform = element.style.transform || "translateZ(0)";
+            element.style.backfaceVisibility = "hidden";
+            return true;
+        }
+        catch (error) {
+            console.error("Failed to enable hardware acceleration:", error);
+            return false;
+        }
+    }
+
+    function disableTransition(element, config) {
+        try {
+            if (config.enableTransition) {
+                if (window.__markupCanvasTransitionTimeout) {
+                    clearTimeout(window.__markupCanvasTransitionTimeout);
+                    window.__markupCanvasTransitionTimeout = undefined;
+                }
+                const delay = (config.transitionDuration ?? FALLBACK_TRANSITION_DURATION) * 1000;
+                withDebounce("disableTransition", delay, () => {
+                    element.style.transition = "none";
+                    window.__markupCanvasTransitionTimeout = undefined;
+                });
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            console.error("Failed to disable transitions:", error);
+            return true;
+        }
+    }
+
+    function enableTransition(element, config) {
+        try {
+            if (config.enableTransition) {
+                if (window.__markupCanvasTransitionTimeout) {
+                    clearTimeout(window.__markupCanvasTransitionTimeout);
+                    window.__markupCanvasTransitionTimeout = undefined;
+                }
+                element.style.transition = `transform ${config.transitionDuration}s linear`;
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            console.error("Failed to enable transitions:", error);
+            return false;
+        }
+    }
+
+    function withTransition(element, config, operation) {
+        enableTransition(element, config);
+        try {
+            const result = operation();
+            return result;
+        }
+        finally {
+            disableTransition(element, config);
+        }
+    }
+
+    function getCanvasMethods() {
+        return {
+            // Utility methods
+            getBounds: function () {
+                return getCanvasBounds(this);
+            },
+            // Transform methods
+            updateTransform: function (newTransform) {
+                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 () {
+                const resetTransform = {
+                    scale: 1.0,
+                    translateX: 0,
+                    translateY: 0,
+                };
+                return this.updateTransform(resetTransform);
+            },
+            // Handle canvas resize
+            handleResize: function () {
+                this.container.getBoundingClientRect();
+                return true;
+            },
+            // Set zoom level
+            setZoom: function (zoomLevel) {
+                const newScale = withClampedZoom(this.config, (clamp) => clamp(zoomLevel));
+                return this.updateTransform({ scale: newScale });
+            },
+            // Convert canvas coordinates to content coordinates
+            canvasToContent: function (x, y) {
+                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 (x, y, targetScale) {
+                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 () {
+                return withTransition(this.transformLayer, this.config, () => {
+                    return withRulerSize(this, (rulerSize) => {
+                        const resetTransform = {
+                            scale: 1.0,
+                            translateX: rulerSize * -1,
+                            translateY: rulerSize * -1,
+                        };
+                        return this.updateTransform(resetTransform);
+                    });
+                });
+            },
+            // Zoom to fit content in canvas
+            zoomToFitContent: function () {
+                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,
+                    });
+                });
+            },
+        };
+    }
+
+    function checkContainerDimensions(container) {
+        const containerRect = container.getBoundingClientRect();
+        const computedStyle = getComputedStyle(container);
+        if (containerRect.height === 0 && computedStyle.height === "auto") {
+            console.error("MarkupCanvas: Container height is 0. Please set a height on your container element using CSS.", "Examples: height: 100vh, height: 500px, or use flexbox/grid layout.", container);
+        }
+        if (containerRect.width === 0 && computedStyle.width === "auto") {
+            console.error("MarkupCanvas: Container width is 0. Please set a width on your container element using CSS.", "Examples: width: 100vw, width: 800px, or use flexbox/grid layout.", container);
+        }
+    }
+
+    function setupCanvasContainer(container) {
+        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);
+        }
+    }
+
+    // Creates and initializes a canvas with the required DOM structure
+    function createCanvas(container, config) {
+        if (!container?.appendChild) {
+            console.error("Invalid container element provided to createCanvas");
+            return null;
+        }
+        try {
+            setupCanvasContainer(container);
+            const { transformLayer, contentLayer } = createCanvasLayers(container, config);
+            // Enable hardware acceleration if requested
+            if (config.enableAcceleration) {
+                enableHardwareAcceleration(transformLayer);
+            }
+            const rulerOffset = config.enableRulers ? -RULER_SIZE : 0;
+            const initialTransform = {
+                scale: DEFAULT_ZOOM,
+                translateX: rulerOffset,
+                translateY: rulerOffset,
+            };
+            // Apply initial transform
+            const initialMatrix = createMatrix(initialTransform.scale, initialTransform.translateX, initialTransform.translateY);
+            applyTransform(transformLayer, initialMatrix);
+            const canvas = {
+                // DOM references
+                container,
+                transformLayer,
+                contentLayer,
+                // Configuration
+                config: config,
+                // Current state
+                transform: initialTransform,
+                // Add all canvas methods
+                ...getCanvasMethods(),
+            };
+            return canvas;
+        }
+        catch (error) {
+            console.error("Failed to create canvas:", error);
+            return null;
+        }
+    }
+
+    function createMarkupCanvasConfig(options = {}) {
+        const config = {
+            ...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;
+    }
+
+    class EventEmitter {
+        constructor() {
+            this.listeners = new Map();
+        }
+        on(event, handler) {
+            if (!this.listeners.has(event)) {
+                this.listeners.set(event, new Set());
+            }
+            this.listeners.get(event).add(handler);
+        }
+        off(event, handler) {
+            const handlers = this.listeners.get(event);
+            if (handlers) {
+                handlers.delete(handler);
+            }
+        }
+        emit(event, data) {
+            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() {
+            this.listeners.clear();
+        }
+    }
+
+    const REFERENCE_DISPLAY_AREA = 1920 * 1080;
+    const TRACKPAD_PINCH_SPEED_FACTOR = 0.05;
+    const ADAPTIVE_ZOOM_FACTOR = 1;
+    const CLICK_THRESHOLDS = {
+        MAX_DURATION: 300,
+        MAX_MOVEMENT: 5,
+    };
+
+    function getAdaptiveZoomSpeed(canvas, baseSpeed) {
+        if (!canvas?.getBounds) {
+            return baseSpeed;
+        }
+        try {
+            const bounds = canvas.getBounds();
+            const displayArea = bounds.width * bounds.height;
+            const rawScaleFactor = (displayArea / REFERENCE_DISPLAY_AREA) ** ADAPTIVE_ZOOM_FACTOR;
+            const adaptiveSpeed = baseSpeed * rawScaleFactor;
+            return adaptiveSpeed;
+        }
+        catch (error) {
+            console.warn("Failed to calculate adaptive zoom speed, using base speed:", error);
+            return baseSpeed;
+        }
+    }
+
+    function setupKeyboardEvents(canvas, config) {
+        // Track mouse position
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        function handleMouseMove(event) {
+            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) {
+            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 = {};
+            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);
+        };
+    }
+
+    function updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging) {
+        if (!isDragEnabled) {
+            canvas.container.style.cursor = "default";
+            return;
+        }
+        if (config.requireSpaceForMouseDrag) {
+            canvas.container.style.cursor = isSpacePressed ? "grab" : "default";
+        }
+        else {
+            canvas.container.style.cursor = isDragging ? "grabbing" : "grab";
+        }
+    }
+
+    function handleKeyDown(event, canvas, config, isDragEnabled, isDragging, setters) {
+        if (config.requireSpaceForMouseDrag && event.key === " ") {
+            setters.setIsSpacePressed(true);
+            updateCursor(canvas, config, isDragEnabled, true, isDragging);
+        }
+    }
+
+    function resetDragState(canvas, config, isDragEnabled, isSpacePressed, setters) {
+        setters.setIsDragging(false);
+        setters.setDragButton(-1);
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, false);
+    }
+
+    function handleKeyUp(event, canvas, config, isDragEnabled, isDragging, setters) {
+        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,
+                });
+            }
+        }
+    }
+
+    function handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters) {
+        const isLeftButton = event.button === 0;
+        const isMiddleButton = event.button === 1;
+        if (isLeftButton) {
+            setters.setMouseDownTime(Date.now());
+            setters.setMouseDownX(event.clientX);
+            setters.setMouseDownY(event.clientY);
+            setters.setHasDragged(false);
+        }
+        if (!isDragEnabled)
+            return;
+        // Check if drag is allowed based on configuration
+        const canDrag = config.requireSpaceForMouseDrag ? isSpacePressed : true;
+        if (canDrag && ((isLeftButton && config.enableLeftDrag) || (isMiddleButton && config.enableMiddleDrag))) {
+            event.preventDefault();
+            // Don't set isDragging to true yet - wait for mouse move
+            setters.setDragButton(event.button);
+            setters.setLastMouseX(event.clientX);
+            setters.setLastMouseY(event.clientY);
+            updateCursor(canvas, config, isDragEnabled, isSpacePressed, false); // ← Changed to false
+        }
+    }
+
+    function handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, setters) {
+        if (isDragging) {
+            resetDragState(canvas, config, isDragEnabled, isSpacePressed, setters);
+        }
+    }
+
+    function handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
+        if (mouseDownTime > 0) {
+            const deltaX = Math.abs(event.clientX - mouseDownX);
+            const deltaY = Math.abs(event.clientY - mouseDownY);
+            if (deltaX > CLICK_THRESHOLDS.MAX_MOVEMENT || deltaY > CLICK_THRESHOLDS.MAX_MOVEMENT) {
+                setters.setHasDragged(true);
+                if (!isDragging && isDragEnabled) {
+                    setters.setIsDragging(true);
+                }
+            }
+        }
+        if (!isDragging || !isDragEnabled)
+            return;
+        event.preventDefault();
+        const handleMouseMoveThrottled = withRAFThrottle((...args) => {
+            const moveEvent = args[0];
+            if (!isDragging || !isDragEnabled)
+                return;
+            const deltaX = moveEvent.clientX - lastMouseX;
+            const deltaY = moveEvent.clientY - lastMouseY;
+            const newTransform = {
+                translateX: canvas.transform.translateX + deltaX,
+                translateY: canvas.transform.translateY + deltaY,
+            };
+            canvas.updateTransform(newTransform);
+            setters.setLastMouseX(moveEvent.clientX);
+            setters.setLastMouseY(moveEvent.clientY);
+        });
+        handleMouseMoveThrottled(event);
+    }
+
+    function handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isDragging) {
+        const clickDuration = Date.now() - mouseDownTime;
+        // Check if Option/Alt key is required and pressed
+        const optionKeyPressed = event.altKey;
+        const shouldZoom = config.requireOptionForClickZoom ? optionKeyPressed : true;
+        if (clickDuration < CLICK_THRESHOLDS.MAX_DURATION && !hasDragged && !isDragging && shouldZoom) {
+            event.preventDefault();
+            const rect = canvas.container.getBoundingClientRect();
+            const rawClickX = event.clientX - rect.left;
+            const rawClickY = event.clientY - rect.top;
+            const { clickX, clickY } = withRulerOffset(canvas, rawClickX, rawClickY, (adjustedX, adjustedY) => ({
+                clickX: adjustedX,
+                clickY: adjustedY,
+            }));
+            // Convert canvas coordinates to content coordinates at current scale
+            const contentCoords = canvas.canvasToContent(clickX, clickY);
+            // Calculate the center of the canvas
+            const canvasCenterX = rect.width / 2;
+            const canvasCenterY = rect.height / 2;
+            const newScale = config.clickZoomLevel;
+            const newTranslateX = canvasCenterX - contentCoords.x * newScale;
+            const newTranslateY = canvasCenterY - contentCoords.y * newScale;
+            const newTransform = {
+                scale: newScale,
+                translateX: newTranslateX,
+                translateY: newTranslateY,
+            };
+            withTransition(canvas.transformLayer, canvas.config, () => {
+                canvas.updateTransform(newTransform);
+            });
+        }
+    }
+
+    function resetClickState(setters) {
+        setters.setMouseDownTime(0);
+        setters.setHasDragged(false);
+    }
+
+    function handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, setters) {
+        if (isDragging && event.button === dragButton) {
+            resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+                setIsDragging: setters.setIsDragging,
+                setDragButton: setters.setDragButton,
+            });
+        }
+        if (isDragEnabled && event.button === 0 && config.enableClickToZoom && mouseDownTime > 0) {
+            handleClickToZoom(event, canvas, config, mouseDownTime, hasDragged, isDragging);
+        }
+        if (event.button === 0) {
+            resetClickState({
+                setMouseDownTime: setters.setMouseDownTime,
+                setHasDragged: setters.setHasDragged,
+            });
+        }
+    }
+
+    function setupMouseEvents(canvas, config, withControls = true) {
+        // State management
+        let isDragEnabled = true;
+        let isDragging = false;
+        let lastMouseX = 0;
+        let lastMouseY = 0;
+        let dragButton = -1;
+        let isSpacePressed = false;
+        // Click-to-zoom tracking
+        let mouseDownTime = 0;
+        let mouseDownX = 0;
+        let mouseDownY = 0;
+        let hasDragged = false;
+        // State setters for passing to functions
+        const setters = {
+            setIsDragging: (value) => {
+                isDragging = value;
+            },
+            setDragButton: (value) => {
+                dragButton = value;
+            },
+            setIsSpacePressed: (value) => {
+                isSpacePressed = value;
+            },
+            setMouseDownTime: (value) => {
+                mouseDownTime = value;
+            },
+            setMouseDownX: (value) => {
+                mouseDownX = value;
+            },
+            setMouseDownY: (value) => {
+                mouseDownY = value;
+            },
+            setHasDragged: (value) => {
+                hasDragged = value;
+            },
+            setLastMouseX: (value) => {
+                lastMouseX = value;
+            },
+            setLastMouseY: (value) => {
+                lastMouseY = value;
+            },
+        };
+        // Event handler wrappers
+        const keyDownHandler = (event) => {
+            handleKeyDown(event, canvas, config, isDragEnabled, isDragging, {
+                setIsSpacePressed: setters.setIsSpacePressed,
+            });
+        };
+        const keyUpHandler = (event) => {
+            handleKeyUp(event, canvas, config, isDragEnabled, isDragging, {
+                setIsSpacePressed: setters.setIsSpacePressed,
+                setIsDragging: setters.setIsDragging,
+                setDragButton: setters.setDragButton,
+            });
+        };
+        const mouseDownHandler = (event) => {
+            handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
+        };
+        const mouseMoveHandler = (event) => {
+            handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+                setHasDragged: setters.setHasDragged,
+                setIsDragging: setters.setIsDragging,
+                setLastMouseX: setters.setLastMouseX,
+                setLastMouseY: setters.setLastMouseY,
+            });
+        };
+        const mouseUpHandler = (event) => {
+            handleMouseUp(event, canvas, config, isDragEnabled, isSpacePressed, isDragging, dragButton, mouseDownTime, hasDragged, {
+                setIsDragging: setters.setIsDragging,
+                setDragButton: setters.setDragButton,
+                setMouseDownTime: setters.setMouseDownTime,
+                setHasDragged: setters.setHasDragged,
+            });
+        };
+        const mouseLeaveHandler = () => {
+            handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragging, {
+                setIsDragging: setters.setIsDragging,
+                setDragButton: setters.setDragButton,
+            });
+        };
+        // Set up event listeners
+        canvas.container.addEventListener("mousedown", mouseDownHandler);
+        document.addEventListener("mousemove", mouseMoveHandler);
+        document.addEventListener("mouseup", mouseUpHandler);
+        canvas.container.addEventListener("mouseleave", mouseLeaveHandler);
+        if (config.requireSpaceForMouseDrag) {
+            document.addEventListener("keydown", keyDownHandler);
+            document.addEventListener("keyup", keyUpHandler);
+        }
+        updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+        const cleanup = () => {
+            canvas.container.removeEventListener("mousedown", mouseDownHandler);
+            document.removeEventListener("mousemove", mouseMoveHandler);
+            document.removeEventListener("mouseup", mouseUpHandler);
+            canvas.container.removeEventListener("mouseleave", mouseLeaveHandler);
+            if (config.requireSpaceForMouseDrag) {
+                document.removeEventListener("keydown", keyDownHandler);
+                document.removeEventListener("keyup", keyUpHandler);
+            }
+        };
+        if (withControls) {
+            return {
+                cleanup,
+                enable: () => {
+                    isDragEnabled = true;
+                    updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+                    return true;
+                },
+                disable: () => {
+                    isDragEnabled = false;
+                    // Stop any current dragging
+                    if (isDragging) {
+                        resetDragState(canvas, config, isDragEnabled, isSpacePressed, {
+                            setIsDragging: setters.setIsDragging,
+                            setDragButton: setters.setDragButton,
+                        });
+                    }
+                    updateCursor(canvas, config, isDragEnabled, isSpacePressed, isDragging);
+                    return true;
+                },
+                isEnabled: () => isDragEnabled,
+            };
+        }
+        return cleanup;
+    }
+
+    function handleTouchEnd(event, touchState) {
+        touchState.touches = Array.from(event.touches);
+        if (touchState.touches.length < 2) {
+            touchState.lastDistance = 0;
+        }
+    }
+
+    function getTouchCenter(touch1, touch2) {
+        return {
+            x: (touch1.clientX + touch2.clientX) / 2,
+            y: (touch1.clientY + touch2.clientY) / 2,
+        };
+    }
+
+    function getTouchDistance(touch1, touch2) {
+        const dx = touch1.clientX - touch2.clientX;
+        const dy = touch1.clientY - touch2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    function applyZoomToCanvas(canvas, rawZoomFactor, centerX, centerY) {
+        const newTransform = getZoomToMouseTransform(centerX, centerY, canvas.transform, rawZoomFactor, canvas.config);
+        return canvas.updateTransform(newTransform);
+    }
+
+    function handleTouchMove(event, canvas, touchState) {
+        event.preventDefault();
+        const currentTouches = Array.from(event.touches);
+        // Enhanced RAF-throttled touch move handler for smooth gesture performance
+        const handleTouchMoveThrottled = withRAFThrottle((...args) => {
+            const touches = args[0];
+            if (touches.length === 1) {
+                // Single touch pan
+                if (touchState.touches.length === 1) {
+                    const deltaX = touches[0].clientX - touchState.touches[0].clientX;
+                    const deltaY = touches[0].clientY - touchState.touches[0].clientY;
+                    const newTransform = {
+                        translateX: canvas.transform.translateX + deltaX,
+                        translateY: canvas.transform.translateY + deltaY,
+                    };
+                    canvas.updateTransform(newTransform);
+                }
+            }
+            else if (touches.length === 2) {
+                // Two finger pinch zoom
+                const currentDistance = getTouchDistance(touches[0], touches[1]);
+                const currentCenter = getTouchCenter(touches[0], touches[1]);
+                if (touchState.lastDistance > 0) {
+                    const rawZoomFactor = currentDistance / touchState.lastDistance;
+                    // Get center relative to canvas content area (accounting for rulers)
+                    const rect = canvas.container.getBoundingClientRect();
+                    let centerX = currentCenter.x - rect.left;
+                    let centerY = currentCenter.y - rect.top;
+                    // Account for ruler offset if rulers are present
+                    const adjustedCenter = withRulerOffsetObject(canvas, { x: centerX, y: centerY }, (adjusted) => adjusted);
+                    centerX = adjustedCenter.x;
+                    centerY = adjustedCenter.y;
+                    // Touch zoom uses global transition settings
+                    applyZoomToCanvas(canvas, rawZoomFactor, centerX, centerY);
+                }
+                touchState.lastDistance = currentDistance;
+                touchState.lastCenter = currentCenter;
+            }
+            touchState.touches = touches;
+        });
+        handleTouchMoveThrottled(currentTouches);
+    }
+
+    function handleTouchStart(event, touchState) {
+        event.preventDefault();
+        touchState.touches = Array.from(event.touches);
+        if (touchState.touches.length === 2) {
+            touchState.lastDistance = getTouchDistance(touchState.touches[0], touchState.touches[1]);
+            touchState.lastCenter = getTouchCenter(touchState.touches[0], touchState.touches[1]);
+        }
+    }
+
+    function setupTouchEvents(canvas) {
+        const touchState = {
+            touches: [],
+            lastDistance: 0,
+            lastCenter: { },
+        };
+        const touchStartHandler = (event) => {
+            handleTouchStart(event, touchState);
+        };
+        const touchMoveHandler = (event) => {
+            handleTouchMove(event, canvas, touchState);
+        };
+        const touchEndHandler = (event) => {
+            handleTouchEnd(event, touchState);
+        };
+        canvas.container.addEventListener("touchstart", touchStartHandler, {
+            passive: false,
+        });
+        canvas.container.addEventListener("touchmove", touchMoveHandler, {
+            passive: false,
+        });
+        canvas.container.addEventListener("touchend", touchEndHandler, {
+            passive: false,
+        });
+        return () => {
+            canvas.container.removeEventListener("touchstart", touchStartHandler);
+            canvas.container.removeEventListener("touchmove", touchMoveHandler);
+            canvas.container.removeEventListener("touchend", touchEndHandler);
+        };
+    }
+
+    function detectTrackpadGesture(event) {
+        const isZoomIntent = event.ctrlKey || event.metaKey;
+        const isPixelMode = event.deltaMode === 0;
+        const hasSmallDelta = Math.abs(event.deltaY) < 50;
+        const hasFractionalDelta = event.deltaY % 1 !== 0;
+        const hasMultiAxis = Math.abs(event.deltaX) > 0 && Math.abs(event.deltaY) > 0;
+        const trackpadCriteria = [isPixelMode, hasSmallDelta, hasFractionalDelta, hasMultiAxis];
+        const trackpadMatches = trackpadCriteria.filter(Boolean).length;
+        const isTrackpad = trackpadMatches >= 2;
+        return {
+            isTrackpad,
+            isMouseWheel: !isTrackpad,
+            isTrackpadScroll: isTrackpad && !isZoomIntent,
+            isTrackpadPinch: isTrackpad && isZoomIntent,
+            isZoomGesture: isZoomIntent,
+        };
+    }
+
+    const createTrackpadPanHandler = (canvas) => withRAFThrottle((...args) => {
+        const event = args[0];
+        if (!event || !canvas?.updateTransform) {
+            return false;
+        }
+        try {
+            const currentTransform = canvas.transform;
+            // Calculate pan delta based on trackpad scroll
+            const panSensitivity = 1.0;
+            const deltaX = event.deltaX * panSensitivity;
+            const deltaY = event.deltaY * panSensitivity;
+            // Apply pan by adjusting translation
+            const newTransform = {
+                scale: currentTransform.scale,
+                translateX: currentTransform.translateX - deltaX,
+                translateY: currentTransform.translateY - deltaY,
+            };
+            disableTransition(canvas.transformLayer, canvas.config);
+            // Apply the new transform
+            return canvas.updateTransform(newTransform);
+        }
+        catch (error) {
+            console.error("Error handling trackpad pan:", error);
+            return false;
+        }
+    });
+
+    function handleWheel(event, canvas, config) {
+        if (!event || typeof event.deltaY !== "number") {
+            console.warn("Invalid wheel event provided");
+            return false;
+        }
+        if (!canvas?.updateTransform) {
+            console.warn("Invalid canvas provided to handleWheelEvent");
+            return false;
+        }
+        try {
+            event.preventDefault();
+            // Get mouse position
+            const rect = canvas.container.getBoundingClientRect();
+            const rawMouseX = event.clientX - rect.left;
+            const rawMouseY = event.clientY - rect.top;
+            // Account for ruler offset
+            const { mouseX, mouseY } = withRulerOffset(canvas, rawMouseX, rawMouseY, (adjustedX, adjustedY) => ({
+                mouseX: adjustedX,
+                mouseY: adjustedY,
+            }));
+            // Use the standard zoom speed
+            const baseZoomSpeed = config.zoomSpeed;
+            // Simple gesture detection
+            const gestureInfo = detectTrackpadGesture(event);
+            if (!gestureInfo.isZoomGesture) {
+                // Not a zoom gesture, ignore
+                return false;
+            }
+            // Apply display-size adaptive scaling if enabled
+            const currentZoomSpeed = config.enableAdaptiveSpeed ? getAdaptiveZoomSpeed(canvas, baseZoomSpeed) : baseZoomSpeed;
+            // Simple device-based zoom speed adjustment
+            let deviceZoomSpeed = currentZoomSpeed;
+            if (gestureInfo.isTrackpadPinch) {
+                const baseTrackpadSpeed = config.zoomSpeed * TRACKPAD_PINCH_SPEED_FACTOR;
+                deviceZoomSpeed = config.enableAdaptiveSpeed ? getAdaptiveZoomSpeed(canvas, baseTrackpadSpeed) : baseTrackpadSpeed;
+            }
+            // Calculate zoom delta
+            const zoomDirection = event.deltaY < 0 ? 1 : -1;
+            // Use exponential zoom for more natural feel
+            const rawZoomMultiplier = zoomDirection > 0 ? 1 + deviceZoomSpeed : 1 / (1 + deviceZoomSpeed);
+            return applyZoomToCanvas(canvas, rawZoomMultiplier, mouseX, mouseY);
+        }
+        catch (error) {
+            console.error("Error handling wheel event:", error);
+            return false;
+        }
+    }
+
+    function setupWheelEvents(canvas, config) {
+        const trackpadPanHandler = createTrackpadPanHandler(canvas);
+        const wheelHandler = (event) => {
+            const gestureInfo = detectTrackpadGesture(event);
+            if (gestureInfo.isTrackpadScroll) {
+                return trackpadPanHandler(event);
+            }
+            return handleWheel(event, canvas, config);
+        };
+        canvas.container.addEventListener("wheel", wheelHandler, { passive: false });
+        return () => {
+            canvas.container.removeEventListener("wheel", wheelHandler);
+        };
+    }
+
+    function createCornerBox(config) {
+        const corner = document.createElement("div");
+        corner.className = "canvas-ruler corner-box";
+        corner.style.cssText = `
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: ${RULER_SIZE}px;
+		height: ${RULER_SIZE}px;
+		background: ${config.backgroundColor};
+		border-right: 1px solid ${config.borderColor};
+		border-bottom: 1px solid ${config.borderColor};
+		z-index: ${RULER_Z_INDEX.CORNER};
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: ${config.fontFamily};
+		font-size: ${config.fontSize - 2}px;
+		color: ${config.textColor};
+		pointer-events: none;
+	`;
+        corner.textContent = config.units;
+        return corner;
+    }
+
+    function createGridOverlay(config) {
+        const grid = document.createElement("div");
+        grid.className = "canvas-ruler grid-overlay";
+        grid.style.cssText = `
+		position: absolute;
+		top: ${RULER_SIZE}px;
+		left: ${RULER_SIZE}px;
+		right: 0;
+		bottom: 0;
+		pointer-events: none;
+		z-index: ${RULER_Z_INDEX.GRID};
+		background-image: 
+			linear-gradient(${config.gridColor} 1px, transparent 1px),
+			linear-gradient(90deg, ${config.gridColor} 1px, transparent 1px);
+		background-size: 100px 100px;
+		opacity: 0.5;
+	`;
+        return grid;
+    }
+
+    function createHorizontalRuler(config) {
+        const ruler = document.createElement("div");
+        ruler.className = "canvas-ruler horizontal-ruler";
+        ruler.style.cssText = `
+	position: absolute;
+	top: 0;
+	left: ${RULER_SIZE}px;
+	right: 0;
+	height: ${RULER_SIZE}px;
+	background: ${config.backgroundColor};
+	border-bottom: 1px solid ${config.borderColor};
+	border-right: 1px solid ${config.borderColor};
+	z-index: ${RULER_Z_INDEX.RULERS};
+	pointer-events: none;
+	font-family: ${config.fontFamily};
+	font-size: ${config.fontSize}px;
+	color: ${config.textColor};
+	overflow: hidden;
+  `;
+        return ruler;
+    }
+
+    function createVerticalRuler(config) {
+        const ruler = document.createElement("div");
+        ruler.className = "canvas-ruler vertical-ruler";
+        ruler.style.cssText = `
+	position: absolute;
+	top: ${RULER_SIZE}px;
+	left: 0;
+	bottom: 0;
+	width: ${RULER_SIZE}px;
+	background: ${config.backgroundColor};
+	border-right: 1px solid ${config.borderColor};
+	border-bottom: 1px solid ${config.borderColor};
+	z-index: ${RULER_Z_INDEX.RULERS};
+	pointer-events: none;
+	font-family: ${config.fontFamily};
+	font-size: ${config.fontSize}px;
+	color: ${config.textColor};
+	overflow: hidden;
+  `;
+        return ruler;
+    }
+
+    function createRulerElements(container, config) {
+        const horizontalRuler = createHorizontalRuler(config);
+        const verticalRuler = createVerticalRuler(config);
+        const cornerBox = createCornerBox(config);
+        const gridOverlay = config.showGrid ? createGridOverlay(config) : undefined;
+        container.appendChild(horizontalRuler);
+        container.appendChild(verticalRuler);
+        container.appendChild(cornerBox);
+        if (gridOverlay) {
+            container.appendChild(gridOverlay);
+        }
+        return {
+            horizontalRuler,
+            verticalRuler,
+            cornerBox,
+            gridOverlay,
+        };
+    }
+
+    function setupRulerEvents(canvas, updateCallback) {
+        const throttledUpdateCallback = withRAFThrottle(updateCallback);
+        const originalUpdateTransform = canvas.updateTransform;
+        canvas.updateTransform = function (newTransform) {
+            const result = originalUpdateTransform.call(this, newTransform);
+            throttledUpdateCallback();
+            return result;
+        };
+        const resizeHandler = withRAFThrottle(updateCallback);
+        window.addEventListener("resize", resizeHandler);
+        return () => {
+            window.removeEventListener("resize", resizeHandler);
+            canvas.updateTransform = originalUpdateTransform;
+            throttledUpdateCallback.cleanup();
+            resizeHandler.cleanup();
+        };
+    }
+
+    function updateGrid(gridOverlay, scale, translateX, translateY) {
+        let gridSize = GRID_SETTINGS.BASE_SIZE * scale;
+        while (gridSize < GRID_SETTINGS.MIN_SIZE)
+            gridSize *= 2;
+        while (gridSize > GRID_SETTINGS.MAX_SIZE)
+            gridSize /= 2;
+        gridOverlay.style.backgroundSize = `${gridSize}px ${gridSize}px`;
+        gridOverlay.style.backgroundPosition = `${translateX % gridSize}px ${translateY % gridSize}px`;
+    }
+
+    function calculateTickSpacing(contentSize, canvasSize) {
+        const targetTicks = Math.max(5, Math.min(20, canvasSize / 50));
+        const rawSpacing = contentSize / targetTicks;
+        const magnitude = 10 ** Math.floor(Math.log10(rawSpacing));
+        const normalized = rawSpacing / magnitude;
+        let niceSpacing;
+        if (normalized <= 1)
+            niceSpacing = 1;
+        else if (normalized <= 2)
+            niceSpacing = 2;
+        else if (normalized <= 5)
+            niceSpacing = 5;
+        else
+            niceSpacing = 10;
+        return niceSpacing * magnitude;
+    }
+
+    function createHorizontalTick(container, position, pixelPos, tickSpacing, config) {
+        const tick = document.createElement("div");
+        const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
+        const tickHeight = isMajor ? TICK_SETTINGS.MAJOR_HEIGHT : TICK_SETTINGS.MINOR_HEIGHT;
+        tick.style.cssText = `
+		position: absolute;
+		left: ${pixelPos}px;
+		bottom: 0;
+		width: 1px;
+		height: ${tickHeight}px;
+		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+	`;
+        container.appendChild(tick);
+        const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+        if (shouldShowLabel) {
+            const label = document.createElement("div");
+            label.style.cssText = `
+			position: absolute;
+			left: ${pixelPos}px;
+			bottom: ${tickHeight}px;
+			font-size: ${config.fontSize}px;
+			color: ${config.textColor};
+			white-space: nowrap;
+			pointer-events: none;
+		`;
+            label.textContent = Math.round(position).toString();
+            container.appendChild(label);
+        }
+    }
+
+    function updateHorizontalRuler(ruler, contentLeft, contentRight, canvasWidth, scale, config) {
+        const rulerWidth = canvasWidth;
+        const contentWidth = contentRight - contentLeft;
+        const tickSpacing = calculateTickSpacing(contentWidth, rulerWidth);
+        const fragment = document.createDocumentFragment();
+        const startTick = Math.floor(contentLeft / tickSpacing) * tickSpacing;
+        const endTick = Math.ceil(contentRight / tickSpacing) * tickSpacing;
+        for (let pos = startTick; pos <= endTick; pos += tickSpacing) {
+            const pixelPos = (pos - contentLeft) * scale;
+            if (pixelPos >= -50 && pixelPos <= rulerWidth + 50) {
+                createHorizontalTick(fragment, pos, pixelPos, tickSpacing, config);
+            }
+        }
+        ruler.innerHTML = "";
+        ruler.appendChild(fragment);
+    }
+
+    function createVerticalTick(container, position, pixelPos, tickSpacing, config) {
+        const tick = document.createElement("div");
+        const isMajor = position % (tickSpacing * TICK_SETTINGS.MAJOR_MULTIPLIER) === 0;
+        const tickWidth = isMajor ? TICK_SETTINGS.MAJOR_WIDTH : TICK_SETTINGS.MINOR_WIDTH;
+        tick.style.cssText = `
+		position: absolute;
+		top: ${pixelPos}px;
+		right: 0;
+		width: ${tickWidth}px;
+		height: 1px;
+		background: ${isMajor ? config.majorTickColor : config.minorTickColor};
+	`;
+        container.appendChild(tick);
+        const shouldShowLabel = isMajor || position % TICK_SETTINGS.LABEL_INTERVAL === 0;
+        if (shouldShowLabel) {
+            const label = document.createElement("div");
+            label.style.cssText = `
+			position: absolute;
+			top: ${pixelPos - 6}px;
+			right: ${tickWidth + 6}px;
+			font-size: ${config.fontSize}px;
+			color: ${config.textColor};
+			white-space: nowrap;
+			pointer-events: none;
+			transform: rotate(-90deg);
+			transform-origin: right center;
+		`;
+            label.textContent = Math.round(position).toString();
+            container.appendChild(label);
+        }
+    }
+
+    function updateVerticalRuler(ruler, contentTop, contentBottom, canvasHeight, scale, config) {
+        const rulerHeight = canvasHeight;
+        const contentHeight = contentBottom - contentTop;
+        const tickSpacing = calculateTickSpacing(contentHeight, rulerHeight);
+        const fragment = document.createDocumentFragment();
+        const startTick = Math.floor(contentTop / tickSpacing) * tickSpacing;
+        const endTick = Math.ceil(contentBottom / tickSpacing) * tickSpacing;
+        for (let pos = startTick; pos <= endTick; pos += tickSpacing) {
+            const pixelPos = (pos - contentTop) * scale;
+            if (pixelPos >= -50 && pixelPos <= rulerHeight + 50) {
+                createVerticalTick(fragment, pos, pixelPos, tickSpacing, config);
+            }
+        }
+        ruler.innerHTML = "";
+        ruler.appendChild(fragment);
+    }
+
+    function updateRulers(canvas, horizontalRuler, verticalRuler, gridOverlay, config) {
+        const bounds = canvas.getBounds();
+        const scale = bounds.scale || 1;
+        const translateX = bounds.translateX || 0;
+        const translateY = bounds.translateY || 0;
+        const canvasWidth = bounds.width - RULER_SIZE;
+        const canvasHeight = bounds.height - RULER_SIZE;
+        const contentLeft = -translateX / scale;
+        const contentTop = -translateY / scale;
+        const contentRight = contentLeft + canvasWidth / scale;
+        const contentBottom = contentTop + canvasHeight / scale;
+        updateHorizontalRuler(horizontalRuler, contentLeft, contentRight, canvasWidth, scale, config);
+        updateVerticalRuler(verticalRuler, contentTop, contentBottom, canvasHeight, scale, config);
+        if (gridOverlay) {
+            updateGrid(gridOverlay, scale, translateX, translateY);
+        }
+    }
+
+    function createRulers(canvas, config) {
+        if (!canvas?.container) {
+            console.error("Invalid canvas provided to createRulers");
+            return null;
+        }
+        let elements;
+        let cleanupEvents = null;
+        let isDestroyed = false;
+        const rulerOptions = {
+            backgroundColor: config.rulerBackgroundColor,
+            borderColor: config.rulerBorderColor,
+            textColor: config.rulerTextColor,
+            majorTickColor: config.rulerMajorTickColor,
+            minorTickColor: config.rulerMinorTickColor,
+            fontSize: config.rulerFontSize,
+            fontFamily: config.rulerFontFamily,
+            showGrid: config.enableGrid,
+            gridColor: config.gridColor,
+            units: config.rulerUnits,
+        };
+        const safeUpdate = () => {
+            if (isDestroyed || !elements.horizontalRuler || !elements.verticalRuler)
+                return;
+            updateRulers(canvas, elements.horizontalRuler, elements.verticalRuler, elements.gridOverlay, rulerOptions);
+        };
+        try {
+            elements = createRulerElements(canvas.container, rulerOptions);
+            cleanupEvents = setupRulerEvents(canvas, safeUpdate);
+            safeUpdate();
+            return {
+                horizontalRuler: elements.horizontalRuler,
+                verticalRuler: elements.verticalRuler,
+                cornerBox: elements.cornerBox,
+                gridOverlay: elements.gridOverlay,
+                update: safeUpdate,
+                show: () => {
+                    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: () => {
+                    if (elements.horizontalRuler)
+                        elements.horizontalRuler.style.display = "none";
+                    if (elements.verticalRuler)
+                        elements.verticalRuler.style.display = "none";
+                    if (elements.cornerBox)
+                        elements.cornerBox.style.display = "none";
+                    if (elements.gridOverlay)
+                        elements.gridOverlay.style.display = "none";
+                },
+                toggleGrid: () => {
+                    if (elements.gridOverlay) {
+                        const isVisible = elements.gridOverlay.style.display !== "none";
+                        elements.gridOverlay.style.display = isVisible ? "none" : "block";
+                    }
+                },
+                destroy: () => {
+                    isDestroyed = true;
+                    if (cleanupEvents) {
+                        cleanupEvents();
+                    }
+                    if (elements.horizontalRuler?.parentNode) {
+                        elements.horizontalRuler.parentNode.removeChild(elements.horizontalRuler);
+                    }
+                    if (elements.verticalRuler?.parentNode) {
+                        elements.verticalRuler.parentNode.removeChild(elements.verticalRuler);
+                    }
+                    if (elements.cornerBox?.parentNode) {
+                        elements.cornerBox.parentNode.removeChild(elements.cornerBox);
+                    }
+                    if (elements.gridOverlay?.parentNode) {
+                        elements.gridOverlay.parentNode.removeChild(elements.gridOverlay);
+                    }
+                },
+            };
+        }
+        catch (error) {
+            console.error("Failed to create rulers:", error);
+            return null;
+        }
+    }
+
+    class MarkupCanvas {
+        constructor(container, options = {}) {
+            this.cleanupFunctions = [];
+            this.rulers = null;
+            this.dragSetup = null;
+            this._isReady = false;
+            this.listen = new EventEmitter();
+            if (!container) {
+                throw new Error("Container element is required");
+            }
+            this.config = createMarkupCanvasConfig(options);
+            const canvas = createCanvas(container, this.config);
+            if (!canvas) {
+                throw new Error("Failed to create canvas");
+            }
+            this.baseCanvas = canvas;
+            this.setupEventHandlers();
+            this._isReady = true;
+            // Emit ready event
+            this.listen.emit("ready", this);
+        }
+        setupEventHandlers() {
+            try {
+                // Wheel zoom
+                withFeatureEnabled(this.config, "enableZoom", () => {
+                    const wheelCleanup = setupWheelEvents(this, this.config);
+                    this.cleanupFunctions.push(wheelCleanup);
+                });
+                // Mouse events (drag and click-to-zoom)
+                // Set up mouse events if either pan or click-to-zoom is enabled
+                if (this.config.enablePan || this.config.enableClickToZoom) {
+                    this.dragSetup = setupMouseEvents(this, this.config, true);
+                    this.cleanupFunctions.push(this.dragSetup.cleanup);
+                }
+                // Keyboard navigation
+                withFeatureEnabled(this.config, "enableKeyboard", () => {
+                    const keyboardCleanup = setupKeyboardEvents(this, this.config);
+                    this.cleanupFunctions.push(keyboardCleanup);
+                });
+                // Touch events (if enabled)
+                withFeatureEnabled(this.config, "enableTouch", () => {
+                    const touchCleanup = setupTouchEvents(this);
+                    this.cleanupFunctions.push(touchCleanup);
+                });
+                // Set up rulers and grid
+                withFeatureEnabled(this.config, "enableRulers", () => {
+                    this.rulers = createRulers(this.baseCanvas, this.config);
+                    this.cleanupFunctions.push(() => {
+                        if (this.rulers) {
+                            this.rulers.destroy();
+                        }
+                    });
+                });
+            }
+            catch (error) {
+                console.error("Failed to set up event handlers:", error);
+                this.cleanup();
+                throw error;
+            }
+        }
+        // Base canvas properties and methods
+        get container() {
+            return this.baseCanvas.container;
+        }
+        get transformLayer() {
+            return this.baseCanvas.transformLayer;
+        }
+        get contentLayer() {
+            return this.baseCanvas.contentLayer;
+        }
+        get transform() {
+            return this.baseCanvas.transform;
+        }
+        // State management getters for React integration
+        get isReady() {
+            return this._isReady;
+        }
+        get isTransforming() {
+            return this.dragSetup?.isEnabled() || false;
+        }
+        get visibleBounds() {
+            return this.getVisibleArea();
+        }
+        getBounds() {
+            return this.baseCanvas.getBounds();
+        }
+        updateTransform(newTransform) {
+            const result = this.baseCanvas.updateTransform(newTransform);
+            if (result) {
+                this.emitTransformEvents();
+            }
+            return result;
+        }
+        emitTransformEvents() {
+            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() {
+            return this.baseCanvas.reset();
+        }
+        handleResize() {
+            return this.baseCanvas.handleResize();
+        }
+        setZoom(zoomLevel) {
+            return this.baseCanvas.setZoom(zoomLevel);
+        }
+        canvasToContent(x, y) {
+            return this.baseCanvas.canvasToContent(x, y);
+        }
+        zoomToPoint(x, y, targetScale) {
+            return withTransition(this.transformLayer, this.config, () => {
+                const result = this.baseCanvas.zoomToPoint(x, y, targetScale);
+                if (result) {
+                    this.emitTransformEvents();
+                }
+                return result;
+            });
+        }
+        resetView() {
+            return withTransition(this.transformLayer, this.config, () => {
+                const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
+                if (result) {
+                    this.emitTransformEvents();
+                }
+                return result;
+            });
+        }
+        zoomToFitContent() {
+            return withTransition(this.transformLayer, this.config, () => {
+                const result = this.baseCanvas.zoomToFitContent();
+                if (result) {
+                    this.emitTransformEvents();
+                }
+                return result;
+            });
+        }
+        // Pan methods
+        panLeft(distance) {
+            const panDistance = distance ?? this.config.keyboardPanStep;
+            const newTransform = {
+                translateX: this.baseCanvas.transform.translateX + panDistance,
+            };
+            return this.updateTransform(newTransform);
+        }
+        panRight(distance) {
+            const panDistance = distance ?? this.config.keyboardPanStep;
+            const newTransform = {
+                translateX: this.baseCanvas.transform.translateX - panDistance,
+            };
+            return this.updateTransform(newTransform);
+        }
+        panUp(distance) {
+            const panDistance = distance ?? this.config.keyboardPanStep;
+            const newTransform = {
+                translateY: this.baseCanvas.transform.translateY + panDistance,
+            };
+            return this.updateTransform(newTransform);
+        }
+        panDown(distance) {
+            const panDistance = distance ?? this.config.keyboardPanStep;
+            const newTransform = {
+                translateY: this.baseCanvas.transform.translateY - panDistance,
+            };
+            return this.updateTransform(newTransform);
+        }
+        // Zoom methods
+        zoomIn(factor = 0.1) {
+            return withTransition(this.transformLayer, this.config, () => {
+                return withClampedZoom(this.config, (clamp) => {
+                    const newScale = clamp(this.baseCanvas.transform.scale * (1 + factor));
+                    const newTransform = {
+                        scale: newScale,
+                    };
+                    return this.updateTransform(newTransform);
+                });
+            });
+        }
+        zoomOut(factor = 0.1) {
+            return withTransition(this.transformLayer, this.config, () => {
+                return withClampedZoom(this.config, (clamp) => {
+                    const newScale = clamp(this.baseCanvas.transform.scale * (1 - factor));
+                    const newTransform = {
+                        scale: newScale,
+                    };
+                    return this.updateTransform(newTransform);
+                });
+            });
+        }
+        resetZoom() {
+            return this.resetView();
+        }
+        // Mouse drag control methods
+        enableMouseDrag() {
+            return this.dragSetup?.enable() ?? false;
+        }
+        disableMouseDrag() {
+            return this.dragSetup?.disable() ?? false;
+        }
+        isMouseDragEnabled() {
+            return this.dragSetup?.isEnabled() ?? false;
+        }
+        // Grid control methods
+        toggleGrid() {
+            if (this.rulers?.toggleGrid) {
+                this.rulers.toggleGrid();
+                return true;
+            }
+            return false;
+        }
+        showGrid() {
+            if (this.rulers?.gridOverlay) {
+                this.rulers.gridOverlay.style.display = "block";
+                return true;
+            }
+            return false;
+        }
+        hideGrid() {
+            if (this.rulers?.gridOverlay) {
+                this.rulers.gridOverlay.style.display = "none";
+                return true;
+            }
+            return false;
+        }
+        isGridVisible() {
+            if (this.rulers?.gridOverlay) {
+                return this.rulers.gridOverlay.style.display !== "none";
+            }
+            return false;
+        }
+        // Ruler control methods
+        toggleRulers() {
+            if (this.rulers) {
+                const areVisible = this.areRulersVisible();
+                if (areVisible) {
+                    this.rulers.hide();
+                }
+                else {
+                    this.rulers.show();
+                }
+                return true;
+            }
+            return false;
+        }
+        showRulers() {
+            if (this.rulers) {
+                this.rulers.show();
+                return true;
+            }
+            return false;
+        }
+        hideRulers() {
+            if (this.rulers) {
+                this.rulers.hide();
+                return true;
+            }
+            return false;
+        }
+        areRulersVisible() {
+            if (this.rulers?.horizontalRuler) {
+                return this.rulers.horizontalRuler.style.display !== "none";
+            }
+            return false;
+        }
+        // Utility methods
+        centerContent() {
+            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,
+                });
+            });
+        }
+        fitToScreen() {
+            return withTransition(this.transformLayer, this.config, () => {
+                const result = this.baseCanvas.zoomToFitContent();
+                if (result) {
+                    this.emitTransformEvents();
+                }
+                return result;
+            });
+        }
+        getVisibleArea() {
+            const bounds = this.baseCanvas.getBounds();
+            return bounds.visibleArea;
+        }
+        isPointVisible(x, y) {
+            const visibleArea = this.getVisibleArea();
+            return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+        }
+        scrollToPoint(x, y) {
+            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,
+                });
+            });
+        }
+        // Configuration access
+        getConfig() {
+            return { ...this.config };
+        }
+        updateConfig(newConfig) {
+            this.config = createMarkupCanvasConfig({ ...this.config, ...newConfig });
+        }
+        // Cleanup method
+        cleanup() {
+            this.cleanupFunctions.forEach((cleanup) => {
+                try {
+                    cleanup();
+                }
+                catch (cleanupError) {
+                    console.warn("Error during cleanup:", cleanupError);
+                }
+            });
+            this.cleanupFunctions = [];
+            // Remove all event listeners
+            this.removeAllListeners();
+        }
+        // Event emitter delegation methods
+        on(event, handler) {
+            this.listen.on(event, handler);
+        }
+        off(event, handler) {
+            this.listen.off(event, handler);
+        }
+        emit(event, data) {
+            this.listen.emit(event, data);
+        }
+        removeAllListeners() {
+            this.listen.removeAllListeners();
+        }
+        destroy() {
+            this.cleanup();
+            if (window.__markupCanvasTransitionTimeout) {
+                clearTimeout(window.__markupCanvasTransitionTimeout);
+            }
+        }
+    }
+
+    return MarkupCanvas;
+
+}));