@markup-canvas/core 1.1.5 → 1.1.7

package/dist/lib/MarkupCanvas.d.ts

@@ -42,6 +42,7 @@ export declare class MarkupCanvas implements Canvas {
     };
     zoomToPoint(x: number, y: number, targetScale: number): boolean;
     resetView(): boolean;
+    resetViewToCenter(): boolean;
     zoomToFitContent(): boolean;
     panLeft(distance?: number): boolean;
     panRight(distance?: number): boolean;

package/dist/lib/events/mouse/handleMouseMove.d.ts

@@ -1,5 +1,5 @@
-import type { Canvas } from "@/types/index.js";
-export declare function handleMouseMove(event: MouseEvent, canvas: Canvas, isDragEnabled: boolean, isDragging: boolean, mouseDownTime: number, mouseDownX: number, mouseDownY: number, lastMouseX: number, lastMouseY: number, setters: {
+import type { Canvas, MarkupCanvasConfig } from "@/types/index.js";
+export declare function handleMouseMove(event: MouseEvent, canvas: Canvas, config: Required<MarkupCanvasConfig>, isDragEnabled: boolean, isDragging: boolean, isSpacePressed: boolean, mouseDownTime: number, mouseDownX: number, mouseDownY: number, lastMouseX: number, lastMouseY: number, setters: {
     setHasDragged: (value: boolean) => void;
     setIsDragging: (value: boolean) => void;
     setLastMouseX: (value: number) => void;

package/dist/lib/events/utils/getViewportCenter.d.ts

@@ -0,0 +1,5 @@
+import type { Canvas } from "@/types/index.js";
+export declare function getViewportCenter(canvas: Canvas): {
+    x: number;
+    y: number;
+};

package/dist/markup-canvas.cjs.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.1.5
+ * @version 1.1.7
  */
 'use strict';
 
@@ -20,8 +20,8 @@ const EDITOR_PRESET = {
     enableZoom: true,
     enablePan: true,
     enableTouch: true,
-    enableKeyboard: false,
-    bindKeyboardEventsTo: "canvas",
+    enableKeyboard: true,
+    bindKeyboardEventsTo: "document",
     // Zoom behavior
     zoomSpeed: 1.5,
     minZoom: 0.05,
@@ -276,13 +276,6 @@ function withRulerSize(canvas, rulerSize, operation) {
     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 = {
@@ -776,42 +769,28 @@ function getAdaptiveZoomSpeed(canvas, baseSpeed) {
 }
 
 function setupKeyboardEvents(canvas, config) {
-    // Track mouse position
-    let lastMouseX = 0;
-    let lastMouseY = 0;
-    function handleMouseMove(event) {
-        const rect = canvas.container.getBoundingClientRect();
-        const rawMouseX = event.clientX - rect.left;
-        const rawMouseY = event.clientY - rect.top;
-        withRulerOffsets(canvas, 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 "=":
@@ -820,7 +799,7 @@ function setupKeyboardEvents(canvas, config) {
                     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;
@@ -829,16 +808,21 @@ function setupKeyboardEvents(canvas, config) {
                     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;
@@ -866,10 +850,8 @@ function setupKeyboardEvents(canvas, config) {
     }
     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);
     };
 }
 
@@ -942,13 +924,15 @@ function handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragg
     }
 }
 
-function handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
+function handleMouseMove(event, canvas, config, isDragEnabled, isDragging, isSpacePressed, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
     if (mouseDownTime > 0) {
         const deltaX = Math.abs(event.clientX - mouseDownX);
         const deltaY = Math.abs(event.clientY - mouseDownY);
         if (deltaX > CLICK_THRESHOLDS.MAX_MOVEMENT || deltaY > CLICK_THRESHOLDS.MAX_MOVEMENT) {
             setters.setHasDragged(true);
-            if (!isDragging && isDragEnabled) {
+            // Check if drag is allowed based on configuration
+            const canDrag = config.requireSpaceForMouseDrag ? isSpacePressed : true;
+            if (!isDragging && isDragEnabled && canDrag) {
                 setters.setIsDragging(true);
             }
         }
@@ -1089,7 +1073,7 @@ function setupMouseEvents(canvas, config, withControls = true) {
         handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
     };
     const mouseMoveHandler = (event) => {
-        handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+        handleMouseMove(event, canvas, config, isDragEnabled, isDragging, isSpacePressed, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
             setHasDragged: setters.setHasDragged,
             setIsDragging: setters.setIsDragging,
             setLastMouseX: setters.setLastMouseX,
@@ -1488,6 +1472,20 @@ 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,
@@ -2086,12 +2084,23 @@ class MarkupCanvas {
         });
     }
     resetView() {
+        const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
+        if (result) {
+            this.emitTransformEvents();
+        }
+        return result;
+    }
+    resetViewToCenter() {
         return withTransition(this.transformLayer, this.config, () => {
-            const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
-            if (result) {
-                this.emitTransformEvents();
-            }
-            return result;
+            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() {
@@ -2133,30 +2142,28 @@ class MarkupCanvas {
         return this.updateTransform(newTransform);
     }
     // Zoom methods
-    zoomIn(factor = 0.1) {
+    zoomIn(factor = 0.5) {
         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);
+                // Get the center of the viewport
+                const center = getViewportCenter(this);
+                return this.zoomToPoint(center.x, center.y, newScale);
             });
         });
     }
-    zoomOut(factor = 0.1) {
+    zoomOut(factor = 0.5) {
         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);
+                // Get the center of the viewport
+                const center = getViewportCenter(this);
+                return this.zoomToPoint(center.x, center.y, newScale);
             });
         });
     }
     resetZoom() {
-        return this.resetView();
+        return this.resetViewToCenter();
     }
     // Mouse drag control methods
     enableMouseDrag() {

package/dist/markup-canvas.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.1.5
+ * @version 1.1.7
  */
 const EDITOR_PRESET = {
     // Canvas dimensions
@@ -16,8 +16,8 @@ const EDITOR_PRESET = {
     enableZoom: true,
     enablePan: true,
     enableTouch: true,
-    enableKeyboard: false,
-    bindKeyboardEventsTo: "canvas",
+    enableKeyboard: true,
+    bindKeyboardEventsTo: "document",
     // Zoom behavior
     zoomSpeed: 1.5,
     minZoom: 0.05,
@@ -272,13 +272,6 @@ function withRulerSize(canvas, rulerSize, operation) {
     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 = {
@@ -772,42 +765,28 @@ function getAdaptiveZoomSpeed(canvas, baseSpeed) {
 }
 
 function setupKeyboardEvents(canvas, config) {
-    // Track mouse position
-    let lastMouseX = 0;
-    let lastMouseY = 0;
-    function handleMouseMove(event) {
-        const rect = canvas.container.getBoundingClientRect();
-        const rawMouseX = event.clientX - rect.left;
-        const rawMouseY = event.clientY - rect.top;
-        withRulerOffsets(canvas, 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 "=":
@@ -816,7 +795,7 @@ function setupKeyboardEvents(canvas, config) {
                     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;
@@ -825,16 +804,21 @@ function setupKeyboardEvents(canvas, config) {
                     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;
@@ -862,10 +846,8 @@ function setupKeyboardEvents(canvas, config) {
     }
     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);
     };
 }
 
@@ -938,13 +920,15 @@ function handleMouseLeave(canvas, config, isDragEnabled, isSpacePressed, isDragg
     }
 }
 
-function handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
+function handleMouseMove(event, canvas, config, isDragEnabled, isDragging, isSpacePressed, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, setters) {
     if (mouseDownTime > 0) {
         const deltaX = Math.abs(event.clientX - mouseDownX);
         const deltaY = Math.abs(event.clientY - mouseDownY);
         if (deltaX > CLICK_THRESHOLDS.MAX_MOVEMENT || deltaY > CLICK_THRESHOLDS.MAX_MOVEMENT) {
             setters.setHasDragged(true);
-            if (!isDragging && isDragEnabled) {
+            // Check if drag is allowed based on configuration
+            const canDrag = config.requireSpaceForMouseDrag ? isSpacePressed : true;
+            if (!isDragging && isDragEnabled && canDrag) {
                 setters.setIsDragging(true);
             }
         }
@@ -1085,7 +1069,7 @@ function setupMouseEvents(canvas, config, withControls = true) {
         handleMouseDown(event, canvas, config, isDragEnabled, isSpacePressed, setters);
     };
     const mouseMoveHandler = (event) => {
-        handleMouseMove(event, canvas, isDragEnabled, isDragging, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
+        handleMouseMove(event, canvas, config, isDragEnabled, isDragging, isSpacePressed, mouseDownTime, mouseDownX, mouseDownY, lastMouseX, lastMouseY, {
             setHasDragged: setters.setHasDragged,
             setIsDragging: setters.setIsDragging,
             setLastMouseX: setters.setLastMouseX,
@@ -1484,6 +1468,20 @@ 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,
@@ -2082,12 +2080,23 @@ class MarkupCanvas {
         });
     }
     resetView() {
+        const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
+        if (result) {
+            this.emitTransformEvents();
+        }
+        return result;
+    }
+    resetViewToCenter() {
         return withTransition(this.transformLayer, this.config, () => {
-            const result = this.baseCanvas.resetView ? this.baseCanvas.resetView() : false;
-            if (result) {
-                this.emitTransformEvents();
-            }
-            return result;
+            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() {
@@ -2129,30 +2138,28 @@ class MarkupCanvas {
         return this.updateTransform(newTransform);
     }
     // Zoom methods
-    zoomIn(factor = 0.1) {
+    zoomIn(factor = 0.5) {
         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);
+                // Get the center of the viewport
+                const center = getViewportCenter(this);
+                return this.zoomToPoint(center.x, center.y, newScale);
             });
         });
     }
-    zoomOut(factor = 0.1) {
+    zoomOut(factor = 0.5) {
         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);
+                // Get the center of the viewport
+                const center = getViewportCenter(this);
+                return this.zoomToPoint(center.x, center.y, newScale);
             });
         });
     }
     resetZoom() {
-        return this.resetView();
+        return this.resetViewToCenter();
     }
     // Mouse drag control methods
     enableMouseDrag() {