@markup-canvas/core 1.1.6 → 1.2.0

package/dist/markup-canvas.umd.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.1.6
+ * @version 1.2.0
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -9,68 +9,6 @@
     (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";
-    }
-
-    // Sets up the transform layer with proper styles and dimensions
-    function setupTransformLayer(transformLayer, config) {
-        transformLayer.style.position = "absolute";
-        const rulerOffset = config.rulerSize;
-        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 };
@@ -98,6 +36,19 @@
         return new DOMMatrix([scale, 0, 0, scale, translateX, translateY]);
     }
 
+    // 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 getZoomToMouseTransform(mouseX, mouseY, currentTransform, zoomFactor, config) {
         const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
         const transform = currentTransform || {
@@ -159,6 +110,16 @@
         };
     }
 
+    function getVisibleArea(canvas) {
+        const bounds = canvas.getBounds();
+        return bounds.visibleArea;
+    }
+
+    function isPointVisible(canvas, x, y) {
+        const visibleArea = getVisibleArea(canvas);
+        return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+    }
+
     function withClampedZoom(config, operation) {
         const clampFunction = (scale) => clampZoom(scale, config);
         return operation(clampFunction);
@@ -214,13 +175,6 @@
         const finalRulerSize = hasRulers ? rulerSize : 0;
         return operation(finalRulerSize);
     }
-    function withRulerOffsets(canvas, rulerSize, x, y, operation) {
-        return withRulerSize(canvas, rulerSize, (rulerSize) => {
-            const adjustedX = x - rulerSize;
-            const adjustedY = y - rulerSize;
-            return operation(adjustedX, adjustedY);
-        });
-    }
     function withRulerOffsetObject(canvas, rulerSize, coords, operation) {
         return withRulerSize(canvas, rulerSize, (rulerSize) => {
             const adjusted = {
@@ -252,8 +206,7 @@
         width: 8000,
         height: 8000,
         enableAcceleration: true,
-        // Global Binding & Instance Access
-        bindToWindow: false,
+        // Global Instance Access
         name: "markupCanvas",
         enablePostMessageAPI: false,
         // Interaction controls
@@ -261,7 +214,7 @@
         enablePan: true,
         enableTouch: true,
         enableKeyboard: true,
-        bindKeyboardEventsTo: "canvas",
+        bindKeyboardEventsTo: "document",
         // Zoom behavior
         zoomSpeed: 1.5,
         minZoom: 0.05,
@@ -307,14 +260,11 @@
         gridColorDark: "rgba(232, 86, 193, 0.5)",
         // Theme
         themeMode: "light",
-        // Callbacks
-        onTransformUpdate: () => { },
     };
 
-    function getCanvasBounds(canvas) {
+    function getCanvasBounds(canvas, config) {
         try {
             const container = canvas.container;
-            const config = canvas.config;
             const transform = canvas.transform || {
                 scale: 1.0,
                 translateX: 0,
@@ -364,6 +314,116 @@
         }
     }
 
+    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 centerContent(canvas, config, updateTransformFn, transformLayer) {
+        return withTransition(transformLayer, config, () => {
+            const bounds = getCanvasBounds(canvas, config);
+            const centerX = (bounds.width - bounds.contentWidth * canvas.transform.scale) / 2;
+            const centerY = (bounds.height - bounds.contentHeight * canvas.transform.scale) / 2;
+            return updateTransformFn({
+                translateX: centerX,
+                translateY: centerY,
+            });
+        });
+    }
+
+    function panDown(canvas, config, updateTransform) {
+        const panDistance = config.keyboardPanStep;
+        const newTransform = {
+            translateY: canvas.transform.translateY - panDistance,
+        };
+        return updateTransform(newTransform);
+    }
+
+    function panLeft(canvas, config, updateTransform) {
+        const panDistance = config.keyboardPanStep;
+        const newTransform = {
+            translateX: canvas.transform.translateX + panDistance,
+        };
+        return updateTransform(newTransform);
+    }
+
+    function panRight(canvas, config, updateTransform) {
+        const panDistance = config.keyboardPanStep;
+        const newTransform = {
+            translateX: canvas.transform.translateX - panDistance,
+        };
+        return updateTransform(newTransform);
+    }
+
+    function panUp(canvas, config, updateTransform) {
+        const panDistance = config.keyboardPanStep;
+        const newTransform = {
+            translateY: canvas.transform.translateY + panDistance,
+        };
+        return updateTransform(newTransform);
+    }
+
+    function scrollToPoint(canvas, config, x, y, updateTransform, transformLayer) {
+        return withTransition(transformLayer, config, () => {
+            const bounds = getCanvasBounds(canvas, config);
+            const centerX = bounds.width / 2;
+            const centerY = bounds.height / 2;
+            // Calculate new translation to center the point
+            const newTranslateX = centerX - x * canvas.transform.scale;
+            const newTranslateY = centerY - y * canvas.transform.scale;
+            return updateTransform({
+                translateX: newTranslateX,
+                translateY: newTranslateY,
+            });
+        });
+    }
+
     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})`;
     }
@@ -395,136 +455,296 @@
         }
     }
 
-    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;
+    function updateTransform(canvas, newTransform) {
+        canvas.transform = { ...canvas.transform, ...newTransform };
+        const matrix = createMatrix(canvas.transform.scale, canvas.transform.translateX, canvas.transform.translateY);
+        return applyTransform(canvas.transformLayer, matrix);
+    }
+
+    function resetTransform(canvas) {
+        const resetTransformData = {
+            scale: 1.0,
+            translateX: 0,
+            translateY: 0,
+        };
+        return updateTransform(canvas, resetTransformData);
+    }
+
+    function hideGrid(rulers) {
+        if (rulers?.gridOverlay) {
+            rulers.gridOverlay.style.display = "none";
+            return true;
         }
-        catch (error) {
-            console.error("Failed to disable transitions:", error);
+        return false;
+    }
+
+    function isGridVisible(rulers) {
+        if (rulers?.gridOverlay) {
+            return rulers.gridOverlay.style.display !== "none";
+        }
+        return false;
+    }
+
+    function showGrid(rulers) {
+        if (rulers?.gridOverlay) {
+            rulers.gridOverlay.style.display = "block";
             return true;
         }
+        return false;
     }
 
-    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;
+    function toggleGrid(rulers) {
+        if (rulers?.toggleGrid) {
+            rulers.toggleGrid();
+            return true;
+        }
+        return false;
+    }
+
+    function areRulersVisible(rulers) {
+        if (rulers?.horizontalRuler) {
+            return rulers.horizontalRuler.style.display !== "none";
+        }
+        return false;
+    }
+
+    function hideRulers(rulers) {
+        if (rulers) {
+            rulers.hide();
+            return true;
+        }
+        return false;
+    }
+
+    function showRulers(rulers) {
+        if (rulers) {
+            rulers.show();
+            return true;
+        }
+        return false;
+    }
+
+    function toggleRulers(rulers, areRulersVisible) {
+        if (rulers) {
+            const isVisible = areRulersVisible();
+            if (isVisible) {
+                rulers.hide();
             }
-            return false;
+            else {
+                rulers.show();
+            }
+            return true;
+        }
+        return false;
+    }
+
+    function toggleTransition(enableTransition) {
+        return !enableTransition;
+    }
+
+    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;
+        }
+        if (typeof config.rulerSize !== "number" || config.rulerSize <= 0) {
+            console.warn("Invalid rulerSize, using default");
+            config.rulerSize = DEFAULT_CONFIG.rulerSize;
+        }
+        return config;
+    }
+
+    function updateThemeMode(canvasContainer, config, rulers, mode) {
+        const newConfig = {
+            ...config,
+            themeMode: mode,
+        };
+        const updatedConfig = createMarkupCanvasConfig(newConfig);
+        // Update canvas background color
+        const backgroundColor = getThemeValue(updatedConfig, "canvasBackgroundColor");
+        canvasContainer.style.backgroundColor = backgroundColor;
+        // Update rulers if they exist
+        if (rulers) {
+            rulers.updateTheme(updatedConfig);
+        }
+    }
+
+    function resetView(canvas, transformLayer, config) {
+        return withTransition(transformLayer, config, () => {
+            return withRulerSize(canvas, config.rulerSize, (rulerSize) => {
+                const resetTransformData = {
+                    scale: 1.0,
+                    translateX: rulerSize * -1,
+                    translateY: rulerSize * -1,
+                };
+                return updateTransform(canvas, resetTransformData);
+            });
+        });
+    }
+
+    function getViewportCenter(canvas) {
+        try {
+            const bounds = canvas.getBounds();
+            return {
+                x: bounds.width / 2,
+                y: bounds.height / 2,
+            };
         }
         catch (error) {
-            console.error("Failed to enable transitions:", error);
-            return false;
+            console.warn("Failed to calculate viewport center:", error);
+            return { x: 0, y: 0 };
         }
     }
 
-    function withTransition(element, config, operation) {
-        enableTransition(element, config);
-        try {
-            const result = operation();
-            return result;
+    function resetViewToCenter(canvas, transformLayer, config, zoomToPoint) {
+        return withTransition(transformLayer, config, () => {
+            return withClampedZoom(config, (clamp) => {
+                const newScale = clamp(1.0);
+                const center = getViewportCenter(canvas);
+                return zoomToPoint(center.x, center.y, newScale);
+            });
+        });
+    }
+
+    function setZoom(canvas, transformLayer, config, zoomToPoint, zoomLevel) {
+        return withTransition(transformLayer, config, () => {
+            return withClampedZoom(config, (clamp) => {
+                const newScale = clamp(zoomLevel);
+                const center = getViewportCenter(canvas);
+                return zoomToPoint(center.x, center.y, newScale);
+            });
+        });
+    }
+
+    function zoomIn(canvas, transformLayer, config, zoomToPoint, factor = 0.5) {
+        return withTransition(transformLayer, config, () => {
+            return withClampedZoom(config, (clamp) => {
+                const newScale = clamp(canvas.transform.scale * (1 + factor));
+                const center = getViewportCenter(canvas);
+                return zoomToPoint(center.x, center.y, newScale);
+            });
+        });
+    }
+
+    function zoomOut(canvas, transformLayer, config, zoomToPoint, factor = 0.5) {
+        return withTransition(transformLayer, config, () => {
+            return withClampedZoom(config, (clamp) => {
+                const newScale = clamp(canvas.transform.scale * (1 - factor));
+                const center = getViewportCenter(canvas);
+                return zoomToPoint(center.x, center.y, newScale);
+            });
+        });
+    }
+
+    function zoomToPoint(canvas, transformLayer, config, x, y, targetScale) {
+        return withTransition(transformLayer, config, () => {
+            const newTransform = getZoomToMouseTransform(x, y, canvas.transform, targetScale / canvas.transform.scale, config);
+            return updateTransform(canvas, newTransform);
+        });
+    }
+
+    function fitToScreen(canvas, transformLayer, config) {
+        return withTransition(transformLayer, config, () => {
+            const bounds = getCanvasBounds(canvas, config);
+            const scaleX = bounds.width / config.width;
+            const scaleY = bounds.height / config.height;
+            const fitScale = withClampedZoom(config, (clamp) => clamp(Math.min(scaleX, scaleY) * ZOOM_FIT_PADDING));
+            // Center the content
+            const scaledWidth = config.width * fitScale;
+            const scaledHeight = config.height * fitScale;
+            const centerX = (bounds.width - scaledWidth) / 2;
+            const centerY = (bounds.height - scaledHeight) / 2;
+            return updateTransform(canvas, {
+                scale: fitScale,
+                translateX: centerX,
+                translateY: centerY,
+            });
+        });
+    }
+
+    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";
+    }
+
+    // Sets up the transform layer with proper styles and dimensions
+    function setupTransformLayer(transformLayer, config) {
+        transformLayer.style.position = "absolute";
+        const rulerOffset = config.rulerSize;
+        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);
         }
-        finally {
-            disableTransition(element, config);
+        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);
         }
-    }
-
-    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 () {
-                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, this.config.rulerSize, (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,
-                    });
-                });
-            },
-        };
+        // Set content layer properties
+        setupContentLayer(contentLayer);
+        return { transformLayer, contentLayer };
     }
 
     function checkContainerDimensions(container) {
@@ -560,7 +780,6 @@
         }
     }
 
-    // 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");
@@ -569,10 +788,9 @@
         try {
             setupCanvasContainer(container, config);
             const { transformLayer, contentLayer } = createCanvasLayers(container, config);
-            // Enable hardware acceleration if requested
-            if (config.enableAcceleration) {
+            withFeatureEnabled(config, "enableAcceleration", () => {
                 enableHardwareAcceleration(transformLayer);
-            }
+            });
             const rulerOffset = config.enableRulers ? -config.rulerSize : 0;
             const initialTransform = {
                 scale: DEFAULT_ZOOM,
@@ -587,12 +805,8 @@
                 container,
                 transformLayer,
                 contentLayer,
-                // Configuration
-                config: config,
                 // Current state
                 transform: initialTransform,
-                // Add all canvas methods
-                ...getCanvasMethods(),
             };
             return canvas;
         }
@@ -602,54 +816,6 @@
         }
     }
 
-    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;
-        }
-        if (typeof config.rulerSize !== "number" || config.rulerSize <= 0) {
-            console.warn("Invalid rulerSize, using default");
-            config.rulerSize = DEFAULT_CONFIG.rulerSize;
-        }
-        return config;
-    }
-
     class EventEmitter {
         constructor() {
             this.listeners = new Map();
@@ -688,6 +854,13 @@
         }
     }
 
+    function emitTransformEvents(listen, canvas) {
+        const transform = canvas.transform;
+        listen.emit("transform", transform);
+        listen.emit("zoom", transform.scale);
+        listen.emit("pan", { x: transform.translateX, y: transform.translateY });
+    }
+
     const REFERENCE_DISPLAY_AREA = 1920 * 1080;
     const TRACKPAD_PINCH_SPEED_FACTOR = 0.05;
     const ADAPTIVE_ZOOM_FACTOR = 1;
@@ -714,42 +887,28 @@
     }
 
     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, config.rulerSize, rawMouseX, rawMouseY, (adjustedX, adjustedY) => {
-                lastMouseX = adjustedX;
-                lastMouseY = adjustedY;
-            });
-        }
         function handleKeyDown(event) {
             if (!(event instanceof KeyboardEvent))
                 return;
             if (config.bindKeyboardEventsTo === "canvas" && 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;
+                    newTransform.translateX = canvas.transform.translateX + config.keyboardPanStep;
                     handled = true;
                     break;
                 case "ArrowRight":
-                    newTransform.translateX = canvas.transform.translateX - panDistance;
+                    newTransform.translateX = canvas.transform.translateX - config.keyboardPanStep;
                     handled = true;
                     break;
                 case "ArrowUp":
-                    newTransform.translateY = canvas.transform.translateY + panDistance;
+                    newTransform.translateY = canvas.transform.translateY + config.keyboardPanStep;
                     handled = true;
                     break;
                 case "ArrowDown":
-                    newTransform.translateY = canvas.transform.translateY - panDistance;
+                    newTransform.translateY = canvas.transform.translateY - config.keyboardPanStep;
                     handled = true;
                     break;
                 case "=":
@@ -758,7 +917,7 @@
                         const adaptiveZoomStep = config.enableAdaptiveSpeed
                             ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
                             : config.keyboardZoomStep;
-                        newTransform.scale = clampZoom(canvas.transform.scale * (1 + adaptiveZoomStep), config);
+                        canvas.zoomIn(adaptiveZoomStep);
                         handled = true;
                     }
                     break;
@@ -767,16 +926,21 @@
                         const adaptiveZoomStep = config.enableAdaptiveSpeed
                             ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
                             : config.keyboardZoomStep;
-                        newTransform.scale = clampZoom(canvas.transform.scale * (1 - adaptiveZoomStep), config);
+                        canvas.zoomOut(adaptiveZoomStep);
                         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);
+                    if (event.ctrlKey) {
+                        if (canvas.resetView) {
+                            canvas.resetView();
+                        }
+                        handled = true;
+                    }
+                    else if (event.metaKey || event.ctrlKey) {
+                        if (canvas.resetViewToCenter) {
+                            canvas.resetViewToCenter();
+                        }
                         handled = true;
                     }
                     break;
@@ -804,10 +968,8 @@
         }
         const keyboardTarget = config.bindKeyboardEventsTo === "canvas" ? canvas.container : document;
         keyboardTarget.addEventListener("keydown", handleKeyDown);
-        canvas.container.addEventListener("mousemove", handleMouseMove);
         return () => {
             keyboardTarget.removeEventListener("keydown", handleKeyDown);
-            canvas.container.removeEventListener("mousemove", handleMouseMove);
         };
     }
 
@@ -1193,6 +1355,17 @@
                     const newMode = currentConfig.themeMode === "light" ? "dark" : "light";
                     canvas.updateThemeMode(newMode);
                 }
+                // Transition methods
+                else if (action === "updateTransition") {
+                    const enabled = args[0];
+                    if (typeof enabled !== "boolean") {
+                        throw new Error(`Invalid transition enabled value: ${enabled}. Must be a boolean.`);
+                    }
+                    canvas.updateTransition(enabled);
+                }
+                else if (action === "toggleTransitionMode") {
+                    canvas.toggleTransitionMode();
+                }
                 else {
                     throw new Error(`Unknown action: ${action}`);
                 }
@@ -1790,8 +1963,6 @@
                         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)
@@ -1835,14 +2006,163 @@
         }
     }
 
+    function broadcastEvent(event, data, config) {
+        if (typeof window === "undefined") {
+            return;
+        }
+        // Receivers can get the instance from the window binding
+        let broadcastData = data;
+        if (event === "ready") {
+            broadcastData = { ready: true };
+        }
+        window.postMessage({
+            source: "markup-canvas",
+            event,
+            data: broadcastData,
+            timestamp: Date.now(),
+            canvasName: config.name,
+        }, "*");
+        if (window.parent) {
+            window.parent.postMessage({
+                source: "markup-canvas",
+                event,
+                data: broadcastData,
+                timestamp: Date.now(),
+                canvasName: config.name,
+            }, "*");
+        }
+    }
+
+    function cleanupWindowBinding(config) {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const canvasName = config.name || "markupCanvas";
+        const windowObj = window;
+        delete windowObj[canvasName];
+        if (windowObj.__markupCanvasInstances) {
+            windowObj.__markupCanvasInstances.delete(canvasName);
+        }
+    }
+
+    function bindCanvasToWindow(canvas, config) {
+        if (typeof window === "undefined") {
+            return;
+        }
+        const canvasName = config.name || "markupCanvas";
+        const windowObj = window;
+        const api = {
+            config: {
+                get current() {
+                    return canvas.config;
+                },
+                get: canvas.getConfig.bind(canvas),
+                update: canvas.updateConfig.bind(canvas),
+            },
+            // Transform group
+            transform: {
+                update: canvas.updateTransform.bind(canvas),
+                reset: canvas.reset.bind(canvas),
+            },
+            // Zoom group
+            zoom: {
+                set: canvas.setZoom.bind(canvas),
+                toPoint: canvas.zoomToPoint.bind(canvas),
+                in: canvas.zoomIn.bind(canvas),
+                out: canvas.zoomOut.bind(canvas),
+                reset: canvas.resetZoom.bind(canvas),
+                resetToCenter: canvas.resetViewToCenter.bind(canvas),
+                fitToScreen: canvas.fitToScreen.bind(canvas),
+            },
+            // Pan group
+            pan: {
+                left: canvas.panLeft.bind(canvas),
+                right: canvas.panRight.bind(canvas),
+                up: canvas.panUp.bind(canvas),
+                down: canvas.panDown.bind(canvas),
+                toPoint: canvas.scrollToPoint.bind(canvas),
+                toCenter: canvas.centerContent.bind(canvas),
+            },
+            // Mouse drag group
+            mouseDrag: {
+                enable: canvas.enableMouseDrag.bind(canvas),
+                disable: canvas.disableMouseDrag.bind(canvas),
+                isEnabled: canvas.isMouseDragEnabled.bind(canvas),
+            },
+            // Grid group
+            grid: {
+                toggle: canvas.toggleGrid.bind(canvas),
+                show: canvas.showGrid.bind(canvas),
+                hide: canvas.hideGrid.bind(canvas),
+                isVisible: canvas.isGridVisible.bind(canvas),
+            },
+            // Ruler group
+            rulers: {
+                toggle: canvas.toggleRulers.bind(canvas),
+                show: canvas.showRulers.bind(canvas),
+                hide: canvas.hideRulers.bind(canvas),
+                isVisible: canvas.areRulersVisible.bind(canvas),
+            },
+            // Utility group
+            canvas: {
+                canvasToContent: canvas.canvasToContent.bind(canvas),
+                getVisibleArea: canvas.getVisibleArea.bind(canvas),
+                isPointVisible: canvas.isPointVisible.bind(canvas),
+                getBounds: canvas.getBounds.bind(canvas),
+            },
+            theme: {
+                get current() {
+                    return canvas.config.themeMode;
+                },
+                update: canvas.updateThemeMode.bind(canvas),
+                toggle: canvas.toggleThemeMode.bind(canvas),
+            },
+            transition: {
+                get current() {
+                    return canvas.config.enableTransition;
+                },
+                set: canvas.updateTransition.bind(canvas),
+                toggle: canvas.toggleTransitionMode.bind(canvas),
+            },
+            // Event group
+            event: canvas.event,
+            // Lifecycle group
+            lifecycle: {
+                cleanup: canvas.cleanup.bind(canvas),
+                destroy: canvas.destroy.bind(canvas),
+            },
+            // Properties/State group
+            state: {
+                get isReady() {
+                    return canvas.isReady;
+                },
+                get isTransforming() {
+                    return canvas.isTransforming;
+                },
+                get visibleBounds() {
+                    return canvas.visibleBounds;
+                },
+                get transform() {
+                    return canvas.transform;
+                },
+            },
+        };
+        // Bind public API to window
+        windowObj[canvasName] = api;
+        // Track all instances
+        if (!windowObj.__markupCanvasInstances) {
+            windowObj.__markupCanvasInstances = new Map();
+        }
+        windowObj.__markupCanvasInstances.set(canvasName, api);
+    }
+
     class MarkupCanvas {
         constructor(container, options = {}) {
-            this.cleanupFunctions = [];
+            this.cleanupCallbacks = [];
             this.rulers = null;
             this.dragSetup = null;
+            this.event = new EventEmitter();
             this._isReady = false;
-            this.listen = new EventEmitter();
-            this.postMessageCleanup = null;
             if (!container) {
                 throw new Error("Container element is required");
             }
@@ -1851,100 +2171,48 @@
             if (!canvas) {
                 throw new Error("Failed to create canvas");
             }
-            this.baseCanvas = canvas;
-            if (this.config.bindToWindow) {
-                this.listen.setEmitInterceptor((event, data) => {
-                    this.broadcastEvent(event, data);
-                });
-                this.setupGlobalBinding();
-                // Set up postMessage listener
-                if (this.config.enablePostMessageAPI) {
-                    this.postMessageCleanup = setupPostMessageEvents(this);
-                }
+            this.canvas = canvas;
+            // Always bind canvas to window
+            this.event.setEmitInterceptor((event, data) => {
+                broadcastEvent(event, data, this.config);
+            });
+            bindCanvasToWindow(this, this.config);
+            // Set up postMessage listener
+            if (this.config.enablePostMessageAPI) {
+                const postMessageCleanup = setupPostMessageEvents(this);
+                this.cleanupCallbacks.push(postMessageCleanup);
             }
             this.setupEventHandlers();
             this._isReady = true;
             // Emit ready event
-            this.listen.emit("ready", this);
-        }
-        setupGlobalBinding() {
-            if (typeof window === "undefined") {
-                return;
-            }
-            const canvasName = this.config.name || "markupCanvas";
-            const windowObj = window;
-            // Bind instance to window
-            windowObj[canvasName] = this;
-            // Track all instances
-            if (!windowObj.__markupCanvasInstances) {
-                windowObj.__markupCanvasInstances = new Map();
-            }
-            windowObj.__markupCanvasInstances.set(canvasName, this);
-        }
-        cleanupGlobalBinding() {
-            if (typeof window === "undefined") {
-                return;
-            }
-            const canvasName = this.config.name || "markupCanvas";
-            const windowObj = window;
-            delete windowObj[canvasName];
-            if (windowObj.__markupCanvasInstances) {
-                windowObj.__markupCanvasInstances.delete(canvasName);
-            }
-        }
-        broadcastEvent(event, data) {
-            if (typeof window === "undefined") {
-                return;
-            }
-            // Receivers can get the instance from the window binding
-            let broadcastData = data;
-            if (event === "ready") {
-                broadcastData = { ready: true };
-            }
-            window.postMessage({
-                source: "markup-canvas",
-                event,
-                data: broadcastData,
-                timestamp: Date.now(),
-                canvasName: this.config.name,
-            }, "*");
-            if (window.parent) {
-                window.parent.postMessage({
-                    source: "markup-canvas",
-                    event,
-                    data: broadcastData,
-                    timestamp: Date.now(),
-                    canvasName: this.config.name,
-                }, "*");
-            }
+            this.event.emit("ready", this);
         }
         setupEventHandlers() {
             try {
-                // Wheel zoom
+                // Wheel events
                 withFeatureEnabled(this.config, "enableZoom", () => {
                     const wheelCleanup = setupWheelEvents(this, this.config);
-                    this.cleanupFunctions.push(wheelCleanup);
+                    this.cleanupCallbacks.push(wheelCleanup);
                 });
-                // Mouse events (drag and click-to-zoom)
-                // Set up mouse events if either pan or click-to-zoom is enabled
+                // Mouse events
                 if (this.config.enablePan || this.config.enableClickToZoom) {
                     this.dragSetup = setupMouseEvents(this, this.config, true);
-                    this.cleanupFunctions.push(this.dragSetup.cleanup);
+                    this.cleanupCallbacks.push(this.dragSetup.cleanup);
                 }
-                // Keyboard navigation
+                // Keyboard events
                 withFeatureEnabled(this.config, "enableKeyboard", () => {
                     const keyboardCleanup = setupKeyboardEvents(this, this.config);
-                    this.cleanupFunctions.push(keyboardCleanup);
+                    this.cleanupCallbacks.push(keyboardCleanup);
                 });
-                // Touch events (if enabled)
+                // Touch events
                 withFeatureEnabled(this.config, "enableTouch", () => {
                     const touchCleanup = setupTouchEvents(this);
-                    this.cleanupFunctions.push(touchCleanup);
+                    this.cleanupCallbacks.push(touchCleanup);
                 });
                 // Set up rulers and grid
                 withFeatureEnabled(this.config, "enableRulers", () => {
-                    this.rulers = createRulers(this.baseCanvas, this.config);
-                    this.cleanupFunctions.push(() => {
+                    this.rulers = createRulers(this, this.config);
+                    this.cleanupCallbacks.push(() => {
                         if (this.rulers) {
                             this.rulers.destroy();
                         }
@@ -1957,20 +2225,18 @@
                 throw error;
             }
         }
-        // Base canvas properties and methods
         get container() {
-            return this.baseCanvas.container;
+            return this.canvas.container;
         }
         get transformLayer() {
-            return this.baseCanvas.transformLayer;
+            return this.canvas.transformLayer;
         }
         get contentLayer() {
-            return this.baseCanvas.contentLayer;
+            return this.canvas.contentLayer;
         }
         get transform() {
-            return this.baseCanvas.transform;
+            return this.canvas.transform;
         }
-        // State management getters for React integration
         get isReady() {
             return this._isReady;
         }
@@ -1978,125 +2244,65 @@
             return this.dragSetup?.isEnabled() || false;
         }
         get visibleBounds() {
-            return this.getVisibleArea();
+            return getVisibleArea(this);
         }
         getBounds() {
-            return this.baseCanvas.getBounds();
+            return getCanvasBounds(this.canvas, this.config);
         }
         updateTransform(newTransform) {
-            const result = this.baseCanvas.updateTransform(newTransform);
+            const result = updateTransform(this.canvas, newTransform);
             if (result) {
-                this.emitTransformEvents();
+                emitTransformEvents(this.event, this.canvas);
             }
             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();
+            const result = resetTransform(this.canvas);
+            if (result) {
+                emitTransformEvents(this.event, this.canvas);
+            }
+            return result;
         }
         setZoom(zoomLevel) {
-            return withTransition(this.transformLayer, this.config, () => {
-                return withClampedZoom(this.config, (clamp) => {
-                    const newScale = clamp(zoomLevel);
-                    const newTransform = {
-                        scale: newScale,
-                    };
-                    return this.updateTransform(newTransform);
-                });
-            });
+            return setZoom(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), zoomLevel);
         }
         canvasToContent(x, y) {
-            return this.baseCanvas.canvasToContent(x, y);
+            const matrix = createMatrix(this.canvas.transform.scale, this.canvas.transform.translateX, this.canvas.transform.translateY);
+            return canvasToContent(x, y, matrix);
         }
         zoomToPoint(x, y, targetScale) {
-            return withTransition(this.transformLayer, this.config, () => {
-                const result = this.baseCanvas.zoomToPoint(x, y, targetScale);
-                if (result) {
-                    this.emitTransformEvents();
-                }
-                return result;
-            });
+            return zoomToPoint(this.canvas, this.transformLayer, this.config, x, y, targetScale);
         }
         resetView() {
-            return withTransition(this.transformLayer, this.config, () => {
-                const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
-                if (result) {
-                    this.emitTransformEvents();
-                }
-                return result;
-            });
+            return resetView(this.canvas, this.transformLayer, this.config);
         }
-        zoomToFitContent() {
-            return withTransition(this.transformLayer, this.config, () => {
-                const result = this.baseCanvas.zoomToFitContent();
-                if (result) {
-                    this.emitTransformEvents();
-                }
-                return result;
-            });
+        resetViewToCenter() {
+            return resetViewToCenter(this, this.transformLayer, this.config, this.zoomToPoint.bind(this));
         }
-        // Pan methods
         panLeft(distance) {
-            const panDistance = distance ?? this.config.keyboardPanStep;
-            const newTransform = {
-                translateX: this.baseCanvas.transform.translateX + panDistance,
-            };
-            return this.updateTransform(newTransform);
+            return (panLeft(this.canvas, this.config, this.updateTransform.bind(this)) ||
+                (distance ? panLeft(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false));
         }
         panRight(distance) {
-            const panDistance = distance ?? this.config.keyboardPanStep;
-            const newTransform = {
-                translateX: this.baseCanvas.transform.translateX - panDistance,
-            };
-            return this.updateTransform(newTransform);
+            return (panRight(this.canvas, this.config, this.updateTransform.bind(this)) ||
+                (distance ? panRight(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false));
         }
         panUp(distance) {
-            const panDistance = distance ?? this.config.keyboardPanStep;
-            const newTransform = {
-                translateY: this.baseCanvas.transform.translateY + panDistance,
-            };
-            return this.updateTransform(newTransform);
+            return (panUp(this.canvas, this.config, this.updateTransform.bind(this)) ||
+                (distance ? panUp(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false));
         }
         panDown(distance) {
-            const panDistance = distance ?? this.config.keyboardPanStep;
-            const newTransform = {
-                translateY: this.baseCanvas.transform.translateY - panDistance,
-            };
-            return this.updateTransform(newTransform);
+            return (panDown(this.canvas, this.config, this.updateTransform.bind(this)) ||
+                (distance ? panDown(this.canvas, { ...this.config, keyboardPanStep: distance }, this.updateTransform.bind(this)) : false));
         }
-        // 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);
-                });
-            });
+        zoomIn(factor = 0.5) {
+            return zoomIn(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
         }
-        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);
-                });
-            });
+        zoomOut(factor = 0.5) {
+            return zoomOut(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
         }
         resetZoom() {
-            return this.resetView();
+            return this.resetViewToCenter();
         }
         // Mouse drag control methods
         enableMouseDrag() {
@@ -2108,110 +2314,68 @@
         isMouseDragEnabled() {
             return this.dragSetup?.isEnabled() ?? false;
         }
-        // Grid control methods
         toggleGrid() {
-            if (this.rulers?.toggleGrid) {
-                this.rulers.toggleGrid();
-                return true;
+            const result = toggleGrid(this.rulers);
+            if (result) {
+                this.event.emit("gridVisibility", this.isGridVisible());
             }
-            return false;
+            return result;
         }
         showGrid() {
-            if (this.rulers?.gridOverlay) {
-                this.rulers.gridOverlay.style.display = "block";
-                return true;
+            const result = showGrid(this.rulers);
+            if (result) {
+                this.event.emit("gridVisibility", true);
             }
-            return false;
+            return result;
         }
         hideGrid() {
-            if (this.rulers?.gridOverlay) {
-                this.rulers.gridOverlay.style.display = "none";
-                return true;
+            const result = hideGrid(this.rulers);
+            if (result) {
+                this.event.emit("gridVisibility", false);
             }
-            return false;
+            return result;
         }
         isGridVisible() {
-            if (this.rulers?.gridOverlay) {
-                return this.rulers.gridOverlay.style.display !== "none";
-            }
-            return false;
+            return isGridVisible(this.rulers);
         }
-        // Ruler control methods
         toggleRulers() {
-            if (this.rulers) {
-                const areVisible = this.areRulersVisible();
-                if (areVisible) {
-                    this.rulers.hide();
-                }
-                else {
-                    this.rulers.show();
-                }
-                return true;
+            const result = toggleRulers(this.rulers, () => this.areRulersVisible());
+            if (result) {
+                this.event.emit("rulersVisibility", this.areRulersVisible());
             }
-            return false;
+            return result;
         }
         showRulers() {
-            if (this.rulers) {
-                this.rulers.show();
-                return true;
+            const result = showRulers(this.rulers);
+            if (result) {
+                this.event.emit("rulersVisibility", true);
             }
-            return false;
+            return result;
         }
         hideRulers() {
-            if (this.rulers) {
-                this.rulers.hide();
-                return true;
+            const result = hideRulers(this.rulers);
+            if (result) {
+                this.event.emit("rulersVisibility", false);
             }
-            return false;
+            return result;
         }
         areRulersVisible() {
-            if (this.rulers?.horizontalRuler) {
-                return this.rulers.horizontalRuler.style.display !== "none";
-            }
-            return false;
+            return areRulersVisible(this.rulers);
         }
-        // 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,
-                });
-            });
+            return centerContent(this.canvas, this.config, this.updateTransform.bind(this), this.transformLayer);
         }
         fitToScreen() {
-            return withTransition(this.transformLayer, this.config, () => {
-                const result = this.baseCanvas.zoomToFitContent();
-                if (result) {
-                    this.emitTransformEvents();
-                }
-                return result;
-            });
+            return fitToScreen(this.canvas, this.transformLayer, this.config);
         }
         getVisibleArea() {
-            const bounds = this.baseCanvas.getBounds();
-            return bounds.visibleArea;
+            return getVisibleArea(this);
         }
         isPointVisible(x, y) {
-            const visibleArea = this.getVisibleArea();
-            return x >= visibleArea.x && x <= visibleArea.x + visibleArea.width && y >= visibleArea.y && y <= visibleArea.y + visibleArea.height;
+            return isPointVisible(this, x, y);
         }
         scrollToPoint(x, 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,
-                });
-            });
+            return scrollToPoint(this.canvas, this.config, x, y, this.updateTransform.bind(this), this.transformLayer);
         }
         // Configuration access
         getConfig() {
@@ -2222,28 +2386,28 @@
         }
         // Theme management
         updateThemeMode(mode) {
-            const newConfig = {
-                ...this.config,
-                themeMode: mode,
-            };
-            this.config = createMarkupCanvasConfig(newConfig);
-            // Update canvas background color
-            const backgroundColor = getThemeValue(this.config, "canvasBackgroundColor");
-            this.baseCanvas.container.style.backgroundColor = backgroundColor;
-            // Update rulers if they exist
-            if (this.rulers) {
-                this.rulers.updateTheme(this.config);
-            }
+            this.config = createMarkupCanvasConfig({ ...this.config, themeMode: mode });
+            updateThemeMode(this.canvas.container, this.config, this.rulers, mode);
+        }
+        toggleThemeMode() {
+            const currentMode = this.config.themeMode;
+            const newMode = currentMode === "light" ? "dark" : "light";
+            this.updateThemeMode(newMode);
+            return newMode;
+        }
+        // Transition management
+        updateTransition(enabled) {
+            this.config = createMarkupCanvasConfig({ ...this.config, enableTransition: enabled });
+        }
+        toggleTransitionMode() {
+            const newEnableTransition = toggleTransition(this.config.enableTransition);
+            this.updateTransition(newEnableTransition);
+            return newEnableTransition;
         }
         // Cleanup method
         cleanup() {
-            this.cleanupGlobalBinding();
-            // Cleanup postMessage listener
-            if (this.postMessageCleanup) {
-                this.postMessageCleanup();
-                this.postMessageCleanup = null;
-            }
-            this.cleanupFunctions.forEach((cleanup) => {
+            cleanupWindowBinding(this.config);
+            this.cleanupCallbacks.forEach((cleanup) => {
                 try {
                     cleanup();
                 }
@@ -2251,22 +2415,22 @@
                     console.warn("Error during cleanup:", cleanupError);
                 }
             });
-            this.cleanupFunctions = [];
+            this.cleanupCallbacks = [];
             // Remove all event listeners
             this.removeAllListeners();
         }
         // Event emitter delegation methods
         on(event, handler) {
-            this.listen.on(event, handler);
+            this.event.on(event, handler);
         }
         off(event, handler) {
-            this.listen.off(event, handler);
+            this.event.off(event, handler);
         }
         emit(event, data) {
-            this.listen.emit(event, data);
+            this.event.emit(event, data);
         }
         removeAllListeners() {
-            this.listen.removeAllListeners();
+            this.event.removeAllListeners();
         }
         destroy() {
             this.cleanup();