@markup-canvas/core 1.3.2 → 1.3.4

package/dist/markup-canvas.esm.js

@@ -1,7 +1,7 @@
 /**
  * Markup Canvas
  * High-performance markup canvas with zoom and pan capabilities
- * @version 1.3.2
+ * @version 1.3.4
  */
 const EDITOR_PRESET = {
     // Canvas dimensions
@@ -18,7 +18,7 @@ const EDITOR_PRESET = {
     enableKeyboard: true,
     bindKeyboardEventsTo: "document",
     // Zoom behavior
-    zoomSpeed: 1.5,
+    zoomSpeed: 4,
     minZoom: 0.05,
     maxZoom: 80,
     enableTransition: false,
@@ -50,7 +50,7 @@ const EDITOR_PRESET = {
     canvasBackgroundColorDark: "transparent",
     // Ruler styling
     rulerBackgroundColor: "oklch(100% 0 0 / 0.96)",
-    rulerBorderColor: "oklch(96.7% 0.001 286.375)",
+    rulerBorderColor: "oklch(0.322 0.0095 285.919)",
     rulerTextColor: "oklch(70.5% 0.015 286.067)",
     rulerTickColor: "oklch(92% 0.004 286.32)",
     gridColor: "rgba(232, 86, 193, 0.5)",
@@ -944,7 +944,8 @@ function getAdaptiveZoomSpeed(canvas, baseSpeed) {
     }
 }
 
-function setupKeyboardEvents(canvas, config) {
+function setupKeyboardEvents(canvas, config, options) {
+    const textEditModeEnabled = options?.textEditModeEnabled ?? false;
     function handleKeyDown(event) {
         if (!(event instanceof KeyboardEvent))
             return;
@@ -954,23 +955,38 @@ function setupKeyboardEvents(canvas, config) {
         const newTransform = {};
         switch (event.key) {
             case "ArrowLeft":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 newTransform.translateX = canvas.transform.translateX + config.keyboardPanStep;
                 handled = true;
                 break;
             case "ArrowRight":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 newTransform.translateX = canvas.transform.translateX - config.keyboardPanStep;
                 handled = true;
                 break;
             case "ArrowUp":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 newTransform.translateY = canvas.transform.translateY + config.keyboardPanStep;
                 handled = true;
                 break;
             case "ArrowDown":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 newTransform.translateY = canvas.transform.translateY - config.keyboardPanStep;
                 handled = true;
                 break;
             case "=":
             case "+":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 {
                     const adaptiveZoomStep = config.enableAdaptiveSpeed
                         ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
@@ -980,6 +996,9 @@ function setupKeyboardEvents(canvas, config) {
                 }
                 break;
             case "-":
+                if (textEditModeEnabled) {
+                    return;
+                }
                 {
                     const adaptiveZoomStep = config.enableAdaptiveSpeed
                         ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)
@@ -1326,117 +1345,125 @@ function sendPostMessageError(canvasName, action, error) {
     }, "*");
 }
 
-function setupPostMessageEvents(canvas) {
-    const handleMessage = (event) => {
-        const data = event.data;
-        if (!["markup-canvas", "application"].includes(data.source)) {
-            return;
-        }
-        console.log("data", event.data);
-        const canvasName = canvas.config.name || "markupCanvas";
-        if (data.canvasName !== canvasName) {
-            console.log("canvasName", data.canvasName, "!==", canvasName);
-            return;
-        }
-        const action = data.action;
-        const payload = data.data;
-        try {
-            // View methods
-            if (action === "zoomIn") {
-                console.log("zoomIn", payload);
+function processPostMessage(canvas, action, payload, canvasName) {
+    try {
+        // View methods
+        switch (action) {
+            case "zoomIn":
                 canvas.zoomIn(payload);
-            }
-            else if (action === "zoomOut") {
+                break;
+            case "zoomOut":
                 canvas.zoomOut(payload);
-            }
-            else if (action === "setZoom") {
+                break;
+            case "setZoom": {
                 const zoomLevel = payload;
                 if (typeof zoomLevel !== "number" || zoomLevel <= 0) {
                     throw new Error(`Invalid zoom level: ${zoomLevel}. Must be a positive number.`);
                 }
                 canvas.setZoom(zoomLevel);
+                break;
             }
-            else if (action === "resetZoom") {
+            case "resetZoom":
                 canvas.resetZoom();
-            }
-            else if (action === "panLeft") {
+                break;
+            case "panLeft":
                 canvas.panLeft(payload);
-            }
-            else if (action === "panRight") {
+                break;
+            case "panRight":
                 canvas.panRight(payload);
-            }
-            else if (action === "panUp") {
+                break;
+            case "panUp":
                 canvas.panUp(payload);
-            }
-            else if (action === "panDown") {
+                break;
+            case "panDown":
                 canvas.panDown(payload);
-            }
-            else if (action === "fitToScreen") {
+                break;
+            case "fitToScreen":
                 canvas.fitToScreen();
-            }
-            else if (action === "centerContent") {
+                break;
+            case "centerContent":
                 canvas.centerContent();
+                break;
+            case "panToPoint": {
+                const point = payload;
+                canvas.panToPoint(point.x, point.y);
+                break;
             }
-            else if (action === "panToPoint") {
-                canvas.panToPoint(payload.x, payload.y);
-            }
-            else if (action === "resetView") {
+            case "resetView":
                 canvas.resetView();
-            }
-            else if (action === "resetViewToCenter") {
+                break;
+            case "resetViewToCenter":
                 canvas.resetViewToCenter();
-            }
+                break;
             // Ruler/Grid methods
-            else if (action === "toggleRulers") {
+            case "toggleRulers":
                 canvas.toggleRulers();
-            }
-            else if (action === "showRulers") {
+                break;
+            case "showRulers":
                 canvas.showRulers();
-            }
-            else if (action === "hideRulers") {
+                break;
+            case "hideRulers":
                 canvas.hideRulers();
-            }
-            else if (action === "toggleGrid") {
+                break;
+            case "toggleGrid":
                 canvas.toggleGrid();
-            }
-            else if (action === "showGrid") {
+                break;
+            case "showGrid":
                 canvas.showGrid();
-            }
-            else if (action === "hideGrid") {
+                break;
+            case "hideGrid":
                 canvas.hideGrid();
-            }
+                break;
             // Config methods
-            else if (action === "updateThemeMode") {
+            case "updateThemeMode": {
                 const mode = payload;
                 if (mode !== "light" && mode !== "dark") {
                     throw new Error(`Invalid theme mode: ${mode}`);
                 }
                 canvas.updateThemeMode(mode);
+                break;
             }
-            else if (action === "toggleThemeMode") {
+            case "toggleThemeMode": {
                 const currentConfig = canvas.getConfig();
                 const newMode = currentConfig.themeMode === "light" ? "dark" : "light";
                 canvas.updateThemeMode(newMode);
+                break;
             }
             // Transition methods
-            else if (action === "updateTransition") {
+            case "updateTransition": {
                 const enabled = payload;
                 if (typeof enabled !== "boolean") {
                     throw new Error(`Invalid transition enabled value: ${enabled}. Must be a boolean.`);
                 }
                 canvas.updateTransition(enabled);
+                break;
             }
-            else if (action === "toggleTransitionMode") {
+            case "toggleTransitionMode":
                 canvas.toggleTransitionMode();
-            }
-            else {
+                break;
+            default:
                 throw new Error(`Unknown action: ${action}`);
-            }
         }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : String(error);
-            sendPostMessageError(canvasName, action, errorMessage);
+    }
+    catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        sendPostMessageError(canvasName, action, errorMessage);
+    }
+}
+
+function setupPostMessageEvents(canvas) {
+    const handleMessage = (event) => {
+        const data = event.data;
+        if (!["markup-canvas", "application"].includes(data.source)) {
+            return;
         }
+        const canvasName = canvas.config.name || "markupCanvas";
+        if (data.canvasName !== canvasName) {
+            return;
+        }
+        const action = data.action;
+        const payload = data.data;
+        processPostMessage(canvas, action, payload, canvasName);
     };
     if (typeof window !== "undefined") {
         window.addEventListener("message", handleMessage);
@@ -1737,7 +1764,6 @@ function createHorizontalRuler(config) {
 	height: ${config.rulerSize}px;
 	background: var(--ruler-background-color);
 	border-bottom: 1px solid var(--ruler-border-color);
-	border-right: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
@@ -1759,7 +1785,6 @@ function createVerticalRuler(config) {
 	width: ${config.rulerSize}px;
 	background: var(--ruler-background-color);
 	border-right: 1px solid var(--ruler-border-color);
-	border-bottom: 1px solid var(--ruler-border-color);
 	z-index: ${RULER_Z_INDEX.RULERS};
 	pointer-events: none;
 	font-family: ${config.rulerFontFamily};
@@ -2161,6 +2186,9 @@ function bindCanvasToWindow(canvas, config) {
             enable: canvas.enableKeyboard.bind(canvas),
             disable: canvas.disableKeyboard.bind(canvas),
             isEnabled: canvas.isKeyboardEnabled.bind(canvas),
+            enableTextEditMode: canvas.enableTextEditMode.bind(canvas),
+            disableTextEditMode: canvas.disableTextEditMode.bind(canvas),
+            isTextEditModeEnabled: canvas.isTextEditModeEnabled.bind(canvas),
         },
         // Grid group
         grid: {
@@ -2235,6 +2263,7 @@ class MarkupCanvas {
         this.rulers = null;
         this.dragSetup = null;
         this.keyboardCleanup = null;
+        this.textEditModeEnabled = false;
         this.event = new EventEmitter();
         this._isReady = false;
         if (!container) {
@@ -2286,7 +2315,9 @@ class MarkupCanvas {
             }
             // Keyboard events
             withFeatureEnabled(this.config, "enableKeyboard", () => {
-                const keyboardCleanup = setupKeyboardEvents(this, this.config);
+                const keyboardCleanup = setupKeyboardEvents(this, this.config, {
+                    textEditModeEnabled: this.textEditModeEnabled,
+                });
                 this.keyboardCleanup = keyboardCleanup;
                 this.cleanupCallbacks.push(keyboardCleanup);
             });
@@ -2400,7 +2431,9 @@ class MarkupCanvas {
         if (this.keyboardCleanup) {
             return true; // Already enabled
         }
-        this.keyboardCleanup = setupKeyboardEvents(this, this.config);
+        this.keyboardCleanup = setupKeyboardEvents(this, this.config, {
+            textEditModeEnabled: this.textEditModeEnabled,
+        });
         this.cleanupCallbacks.push(this.keyboardCleanup);
         return true;
     }
@@ -2415,6 +2448,54 @@ class MarkupCanvas {
     isKeyboardEnabled() {
         return this.keyboardCleanup !== null;
     }
+    // Text edit mode control methods
+    enableTextEditMode() {
+        if (this.textEditModeEnabled) {
+            return true; // Already enabled
+        }
+        this.textEditModeEnabled = true;
+        // If keyboard is currently enabled, re-setup with new option
+        if (this.keyboardCleanup) {
+            // Remove old cleanup from callbacks
+            const index = this.cleanupCallbacks.indexOf(this.keyboardCleanup);
+            if (index > -1) {
+                this.cleanupCallbacks.splice(index, 1);
+            }
+            // Cleanup old handler
+            this.keyboardCleanup();
+            // Setup new handler with text edit mode enabled
+            this.keyboardCleanup = setupKeyboardEvents(this, this.config, {
+                textEditModeEnabled: true,
+            });
+            this.cleanupCallbacks.push(this.keyboardCleanup);
+        }
+        return true;
+    }
+    disableTextEditMode() {
+        if (!this.textEditModeEnabled) {
+            return true; // Already disabled
+        }
+        this.textEditModeEnabled = false;
+        // If keyboard is currently enabled, re-setup with new option
+        if (this.keyboardCleanup) {
+            // Remove old cleanup from callbacks
+            const index = this.cleanupCallbacks.indexOf(this.keyboardCleanup);
+            if (index > -1) {
+                this.cleanupCallbacks.splice(index, 1);
+            }
+            // Cleanup old handler
+            this.keyboardCleanup();
+            // Setup new handler with text edit mode disabled
+            this.keyboardCleanup = setupKeyboardEvents(this, this.config, {
+                textEditModeEnabled: false,
+            });
+            this.cleanupCallbacks.push(this.keyboardCleanup);
+        }
+        return true;
+    }
+    isTextEditModeEnabled() {
+        return this.textEditModeEnabled;
+    }
     toggleGrid() {
         const result = toggleGrid(this.rulers);
         if (result) {