@markup-canvas/core 1.3.2 → 1.3.4

package/src/lib/MarkupCanvas.ts

@@ -31,6 +31,7 @@ export class MarkupCanvas {
   private rulers: ReturnType<typeof createRulers> | null = null;
   private dragSetup: MouseDragControls | null = null;
   private keyboardCleanup: (() => void) | null = null;
+  private textEditModeEnabled = false;
   public config: Required<MarkupCanvasConfig>;
   public event = new EventEmitter<MarkupCanvasEvents>();
   private _isReady = false;
@@ -99,7 +100,9 @@ export 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);
       });
@@ -247,7 +250,9 @@ export 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;
   }
@@ -265,6 +270,61 @@ export class MarkupCanvas {
     return this.keyboardCleanup !== null;
   }
 
+  // Text edit mode control methods
+  enableTextEditMode(): boolean {
+    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(): boolean {
+    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(): boolean {
+    return this.textEditModeEnabled;
+  }
+
   toggleGrid(): boolean {
     const result = toggleGrid(this.rulers);
     if (result) {

package/src/lib/config/presets/editor-preset.ts

@@ -18,7 +18,7 @@ export const EDITOR_PRESET: MarkupCanvasConfig = {
   bindKeyboardEventsTo: "document",
 
   // Zoom behavior
-  zoomSpeed: 1.5,
+  zoomSpeed: 4,
   minZoom: 0.05,
   maxZoom: 80,
   enableTransition: false,
@@ -57,7 +57,7 @@ export const EDITOR_PRESET: MarkupCanvasConfig = {
 
   // 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)",

package/src/lib/events/keyboard/setupKeyboardEvents.ts

@@ -2,7 +2,13 @@ import { getAdaptiveZoomSpeed } from "@/lib/events/utils/getAdaptiveZoomSpeed.js
 import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
 import type { MarkupCanvasConfig, Transform } from "@/types/index.js";
 
-export function setupKeyboardEvents(canvas: MarkupCanvas, config: Required<MarkupCanvasConfig>): () => void {
+export function setupKeyboardEvents(
+  canvas: MarkupCanvas,
+  config: Required<MarkupCanvasConfig>,
+  options?: { textEditModeEnabled?: boolean }
+): () => void {
+  const textEditModeEnabled = options?.textEditModeEnabled ?? false;
+
   function handleKeyDown(event: Event): void {
     if (!(event instanceof KeyboardEvent)) return;
 
@@ -13,23 +19,38 @@ export function setupKeyboardEvents(canvas: MarkupCanvas, config: Required<Marku
 
     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)
@@ -39,6 +60,9 @@ export function setupKeyboardEvents(canvas: MarkupCanvas, config: Required<Marku
         }
         break;
       case "-":
+        if (textEditModeEnabled) {
+          return;
+        }
         {
           const adaptiveZoomStep = config.enableAdaptiveSpeed
             ? getAdaptiveZoomSpeed(canvas, config.keyboardZoomStep)

package/src/lib/events/postMessage/processPostMessages.ts

@@ -0,0 +1,113 @@
+import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
+import type { PostMessageAction } from "@/types/events";
+import { sendPostMessageError } from "./sendPostMessageError";
+
+export function processPostMessage(
+  canvas: MarkupCanvas,
+  action: PostMessageAction,
+  payload: string | number | boolean | object,
+  canvasName: string
+): void {
+  try {
+    // View methods
+    switch (action) {
+      case "zoomIn":
+        canvas.zoomIn(payload as number | undefined);
+        break;
+      case "zoomOut":
+        canvas.zoomOut(payload as number | undefined);
+        break;
+      case "setZoom": {
+        const zoomLevel = payload as number;
+        if (typeof zoomLevel !== "number" || zoomLevel <= 0) {
+          throw new Error(`Invalid zoom level: ${zoomLevel}. Must be a positive number.`);
+        }
+        canvas.setZoom(zoomLevel);
+        break;
+      }
+      case "resetZoom":
+        canvas.resetZoom();
+        break;
+      case "panLeft":
+        canvas.panLeft(payload as number | undefined);
+        break;
+      case "panRight":
+        canvas.panRight(payload as number | undefined);
+        break;
+      case "panUp":
+        canvas.panUp(payload as number | undefined);
+        break;
+      case "panDown":
+        canvas.panDown(payload as number | undefined);
+        break;
+      case "fitToScreen":
+        canvas.fitToScreen();
+        break;
+      case "centerContent":
+        canvas.centerContent();
+        break;
+      case "panToPoint": {
+        const point = payload as { x: number; y: number };
+        canvas.panToPoint(point.x, point.y);
+        break;
+      }
+      case "resetView":
+        canvas.resetView();
+        break;
+      case "resetViewToCenter":
+        canvas.resetViewToCenter();
+        break;
+      // Ruler/Grid methods
+      case "toggleRulers":
+        canvas.toggleRulers();
+        break;
+      case "showRulers":
+        canvas.showRulers();
+        break;
+      case "hideRulers":
+        canvas.hideRulers();
+        break;
+      case "toggleGrid":
+        canvas.toggleGrid();
+        break;
+      case "showGrid":
+        canvas.showGrid();
+        break;
+      case "hideGrid":
+        canvas.hideGrid();
+        break;
+      // Config methods
+      case "updateThemeMode": {
+        const mode = payload as "light" | "dark";
+        if (mode !== "light" && mode !== "dark") {
+          throw new Error(`Invalid theme mode: ${mode}`);
+        }
+        canvas.updateThemeMode(mode);
+        break;
+      }
+      case "toggleThemeMode": {
+        const currentConfig = canvas.getConfig();
+        const newMode = currentConfig.themeMode === "light" ? "dark" : "light";
+        canvas.updateThemeMode(newMode);
+        break;
+      }
+      // Transition methods
+      case "updateTransition": {
+        const enabled = payload as boolean;
+        if (typeof enabled !== "boolean") {
+          throw new Error(`Invalid transition enabled value: ${enabled}. Must be a boolean.`);
+        }
+        canvas.updateTransition(enabled);
+        break;
+      }
+      case "toggleTransitionMode":
+        canvas.toggleTransitionMode();
+        break;
+      default:
+        throw new Error(`Unknown action: ${action}`);
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    sendPostMessageError(canvasName, action, errorMessage);
+  }
+}

package/src/lib/events/postMessage/setupPostMessageEvents.ts

@@ -1,6 +1,6 @@
 import type { MarkupCanvas } from "@/lib/MarkupCanvas.js";
-import type { PostMessageAction, PostMessageRequest } from "@/types/events";
-import { sendPostMessageError } from "./sendError";
+import type { PostMessageRequest } from "@/types/events";
+import { processPostMessage } from "./processPostMessages";
 
 export function setupPostMessageEvents(canvas: MarkupCanvas): () => void {
   const handleMessage = (event: MessageEvent): void => {
@@ -10,94 +10,16 @@ export function setupPostMessageEvents(canvas: MarkupCanvas): () => void {
       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 as PostMessageAction;
+    const action = data.action;
     const payload = data.data as string | number | boolean | object;
 
-    try {
-      // View methods
-      if (action === "zoomIn") {
-        console.log("zoomIn", payload);
-        canvas.zoomIn(payload as number | undefined);
-      } else if (action === "zoomOut") {
-        canvas.zoomOut(payload as number | undefined);
-      } else if (action === "setZoom") {
-        const zoomLevel = payload as number;
-        if (typeof zoomLevel !== "number" || zoomLevel <= 0) {
-          throw new Error(`Invalid zoom level: ${zoomLevel}. Must be a positive number.`);
-        }
-        canvas.setZoom(zoomLevel);
-      } else if (action === "resetZoom") {
-        canvas.resetZoom();
-      } else if (action === "panLeft") {
-        canvas.panLeft(payload as number | undefined);
-      } else if (action === "panRight") {
-        canvas.panRight(payload as number | undefined);
-      } else if (action === "panUp") {
-        canvas.panUp(payload as number | undefined);
-      } else if (action === "panDown") {
-        canvas.panDown(payload as number | undefined);
-      } else if (action === "fitToScreen") {
-        canvas.fitToScreen();
-      } else if (action === "centerContent") {
-        canvas.centerContent();
-      } else if (action === "panToPoint") {
-        canvas.panToPoint((payload as { x: number; y: number }).x, (payload as { x: number; y: number }).y);
-      } else if (action === "resetView") {
-        canvas.resetView();
-      } else if (action === "resetViewToCenter") {
-        canvas.resetViewToCenter();
-      }
-      // Ruler/Grid methods
-      else if (action === "toggleRulers") {
-        canvas.toggleRulers();
-      } else if (action === "showRulers") {
-        canvas.showRulers();
-      } else if (action === "hideRulers") {
-        canvas.hideRulers();
-      } else if (action === "toggleGrid") {
-        canvas.toggleGrid();
-      } else if (action === "showGrid") {
-        canvas.showGrid();
-      } else if (action === "hideGrid") {
-        canvas.hideGrid();
-      }
-      // Config methods
-      else if (action === "updateThemeMode") {
-        const mode = payload as "light" | "dark";
-        if (mode !== "light" && mode !== "dark") {
-          throw new Error(`Invalid theme mode: ${mode}`);
-        }
-        canvas.updateThemeMode(mode);
-      } else if (action === "toggleThemeMode") {
-        const currentConfig = canvas.getConfig();
-        const newMode = currentConfig.themeMode === "light" ? "dark" : "light";
-        canvas.updateThemeMode(newMode);
-      }
-      // Transition methods
-      else if (action === "updateTransition") {
-        const enabled = payload as boolean;
-        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}`);
-      }
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      sendPostMessageError(canvasName, action, errorMessage);
-    }
+    processPostMessage(canvas, action, payload, canvasName);
   };
 
   if (typeof window !== "undefined") {

package/src/lib/rulers/createHorizontalRuler.ts

@@ -13,7 +13,6 @@ export function createHorizontalRuler(config: Required<MarkupCanvasConfig>): HTM
 	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};

package/src/lib/rulers/createVerticalRuler.ts

@@ -13,7 +13,6 @@ export function createVerticalRuler(config: Required<MarkupCanvasConfig>): HTMLE
 	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};

package/src/lib/window/bindCanvasToWindow.ts

@@ -59,6 +59,9 @@ export function bindCanvasToWindow(canvas: MarkupCanvas, config: Required<Markup
       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

package/src/types/window.ts

@@ -39,7 +39,10 @@ export interface WindowAPI {
   keyboard: {
     readonly enable: () => boolean;
     readonly disable: () => boolean;
-    isEnabled: () => boolean;
+    readonly isEnabled: () => boolean;
+    readonly enableTextEditMode: () => boolean;
+    readonly disableTextEditMode: () => boolean;
+    readonly isTextEditModeEnabled: () => boolean;
   };
   grid: {
     readonly toggle: () => void;