@markup-canvas/core 1.1.7 → 1.2.0

package/dist/markup-canvas.esm.js

@@ -1,15 +1,14 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.1.7
+ * @version 1.2.0
  */
 const EDITOR_PRESET = {
     // Canvas dimensions
     width: 4000,
     height: 4000,
     enableAcceleration: true,
-    // Global Binding & Instance Access
-    bindToWindow: true,
+    // Global Instance Access
     name: "canvas",
     enablePostMessageAPI: true,
     // Interaction controls
@@ -39,7 +38,7 @@ const EDITOR_PRESET = {
     requireOptionForClickZoom: true,
     // Visual elements
     enableRulers: true,
-    enableGrid: false,
+    enableGrid: true,
     showRulers: true,
     showGrid: false,
     rulerFontSize: 9,
@@ -63,72 +62,8 @@ const EDITOR_PRESET = {
     gridColorDark: "rgba(232, 86, 193, 0.5)",
     // Theme
     themeMode: "light",
-    // Callbacks
-    onTransformUpdate: () => { },
 };
 
-// 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 };
@@ -156,6 +91,19 @@ function createMatrix(scale, translateX, translateY) {
     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 || {
@@ -217,6 +165,16 @@ function getEmptyBounds() {
     };
 }
 
+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);
@@ -303,8 +261,7 @@ const DEFAULT_CONFIG = {
     width: 8000,
     height: 8000,
     enableAcceleration: true,
-    // Global Binding & Instance Access
-    bindToWindow: false,
+    // Global Instance Access
     name: "markupCanvas",
     enablePostMessageAPI: false,
     // Interaction controls
@@ -312,7 +269,7 @@ const DEFAULT_CONFIG = {
     enablePan: true,
     enableTouch: true,
     enableKeyboard: true,
-    bindKeyboardEventsTo: "canvas",
+    bindKeyboardEventsTo: "document",
     // Zoom behavior
     zoomSpeed: 1.5,
     minZoom: 0.05,
@@ -358,14 +315,11 @@ const DEFAULT_CONFIG = {
     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,
@@ -415,37 +369,6 @@ function getCanvasBounds(canvas) {
     }
 }
 
-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) {
@@ -497,85 +420,386 @@ function withTransition(element, config, operation) {
     }
 }
 
-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,
-                });
-            });
-        },
-    };
+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})`;
+}
+
+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 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;
+    }
+    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 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();
+        }
+        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.warn("Failed to calculate viewport center:", error);
+        return { x: 0, y: 0 };
+    }
+}
+
+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);
+    }
+    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 checkContainerDimensions(container) {
@@ -611,7 +835,6 @@ function setupCanvasContainer(container, config) {
     }
 }
 
-// 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");
@@ -620,10 +843,9 @@ function createCanvas(container, config) {
     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,
@@ -638,12 +860,8 @@ function createCanvas(container, config) {
             container,
             transformLayer,
             contentLayer,
-            // Configuration
-            config: config,
             // Current state
             transform: initialTransform,
-            // Add all canvas methods
-            ...getCanvasMethods(),
         };
         return canvas;
     }
@@ -653,54 +871,6 @@ function createCanvas(container, config) {
     }
 }
 
-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();
@@ -739,6 +909,13 @@ class EventEmitter {
     }
 }
 
+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;
@@ -1233,6 +1410,17 @@ function setupPostMessageEvents(canvas) {
                 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}`);
             }
@@ -1468,20 +1656,6 @@ function setupWheelEvents(canvas, config) {
     };
 }
 
-function getViewportCenter(canvas) {
-    try {
-        const bounds = canvas.getBounds();
-        return {
-            x: bounds.width / 2,
-            y: bounds.height / 2,
-        };
-    }
-    catch (error) {
-        console.warn("Failed to calculate viewport center:", error);
-        return { x: 0, y: 0 };
-    }
-}
-
 // Rulers
 const RULER_Z_INDEX = {
     GRID: 100,
@@ -1844,8 +2018,6 @@ function createRulers(canvas, config) {
                     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)
@@ -1889,14 +2061,163 @@ function createRulers(canvas, config) {
     }
 }
 
+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");
         }
@@ -1905,100 +2226,48 @@ class MarkupCanvas {
         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();
                     }
@@ -2011,20 +2280,18 @@ class MarkupCanvas {
             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;
     }
@@ -2032,131 +2299,62 @@ class MarkupCanvas {
         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() {
-        const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
-        if (result) {
-            this.emitTransformEvents();
-        }
-        return result;
+        return resetView(this.canvas, this.transformLayer, this.config);
     }
     resetViewToCenter() {
-        return withTransition(this.transformLayer, this.config, () => {
-            return withClampedZoom(this.config, (clamp) => {
-                const newScale = clamp(1.0);
-                const center = getViewportCenter(this);
-                const result = this.zoomToPoint(center.x, center.y, newScale);
-                if (result) {
-                    this.emitTransformEvents();
-                }
-                return result;
-            });
-        });
-    }
-    zoomToFitContent() {
-        return withTransition(this.transformLayer, this.config, () => {
-            const result = this.baseCanvas.zoomToFitContent();
-            if (result) {
-                this.emitTransformEvents();
-            }
-            return result;
-        });
+        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.5) {
-        return withTransition(this.transformLayer, this.config, () => {
-            return withClampedZoom(this.config, (clamp) => {
-                const newScale = clamp(this.baseCanvas.transform.scale * (1 + factor));
-                // Get the center of the viewport
-                const center = getViewportCenter(this);
-                return this.zoomToPoint(center.x, center.y, newScale);
-            });
-        });
+        return zoomIn(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
     }
     zoomOut(factor = 0.5) {
-        return withTransition(this.transformLayer, this.config, () => {
-            return withClampedZoom(this.config, (clamp) => {
-                const newScale = clamp(this.baseCanvas.transform.scale * (1 - factor));
-                // Get the center of the viewport
-                const center = getViewportCenter(this);
-                return this.zoomToPoint(center.x, center.y, newScale);
-            });
-        });
+        return zoomOut(this, this.transformLayer, this.config, this.zoomToPoint.bind(this), factor);
     }
     resetZoom() {
         return this.resetViewToCenter();
@@ -2171,110 +2369,68 @@ class MarkupCanvas {
     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() {
@@ -2285,28 +2441,28 @@ class MarkupCanvas {
     }
     // 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();
             }
@@ -2314,22 +2470,22 @@ class MarkupCanvas {
                 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();