@markup-canvas/react 1.1.7 → 1.2.1

package/src/hooks/useMarkupCanvas.ts

@@ -1,21 +1,31 @@
-import type { MarkupCanvas, Transform } from "@markup-canvas/core";
-import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
-import type { MarkupCanvasRef, UseMarkupCanvasOptions } from "../types/index.js";
+import type { Transform, WindowAPI } from "@markup-canvas/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { UseMarkupCanvasOptions } from "../types/index.js";
 
-export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, options: UseMarkupCanvasOptions = {}) {
-  const [instance, setInstance] = useState<MarkupCanvas | null>(null);
+interface UseMarkupCanvasHookOptions extends Omit<UseMarkupCanvasOptions, "onReady"> {
+  canvasName?: string;
+  onError?: () => void;
+  onReady?: (canvas: WindowAPI) => void;
+}
+
+export function useMarkupCanvas(options: UseMarkupCanvasHookOptions = {}) {
+  const { canvasName = "markupCanvas" } = options;
+
+  const [canvas, setCanvas] = useState<WindowAPI | null>(null);
   const [transform, setTransform] = useState<Transform>({ scale: 1, translateX: 0, translateY: 0 });
   const [zoom, setZoom] = useState(1);
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const [isReady, setIsReady] = useState(false);
   const [themeMode, setThemeModeState] = useState<"light" | "dark">("light");
+  const [showRulersState, setShowRulersState] = useState(false);
+  const [showGridState, setShowGridState] = useState(false);
 
   const optionsRef = useRef(options);
   optionsRef.current = options;
 
-  const handleCanvasInstance = useCallback((canvas: MarkupCanvas) => {
-    setInstance(canvas);
-    optionsRef.current.onReady?.(canvas);
+  const handleCanvasInstance = useCallback((canvasInstance: WindowAPI) => {
+    setCanvas(canvasInstance);
+    optionsRef.current.onReady?.(canvasInstance);
   }, []);
 
   const handleTransform = useCallback((newTransform: Transform) => {
@@ -33,121 +43,228 @@ export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, op
     optionsRef.current.onPanChange?.(newPan);
   }, []);
 
-  const handleReady = useCallback((canvas: MarkupCanvas) => {
+  const handleReady = useCallback((canvasInstance: WindowAPI) => {
     setIsReady(true);
-    optionsRef.current.onReady?.(canvas);
+    optionsRef.current.onReady?.(canvasInstance);
   }, []);
 
-  useEffect(() => {
-    console.log("useEffect", instance);
+  const handleRulersVisibilityChange = useCallback((isVisible: boolean) => {
+    setShowRulersState(isVisible);
+  }, []);
+
+  const handleGridVisibilityChange = useCallback((isVisible: boolean) => {
+    setShowGridState(isVisible);
+  }, []);
 
-    if (!instance) {
+  // Get instance from window binding
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      optionsRef.current.onError?.();
       return;
     }
 
-    instance.on("transform", handleTransform);
-    instance.on("zoom", handleZoom);
-    instance.on("pan", handlePan);
-    instance.on("ready", handleReady);
+    const windowCanvas = (window as unknown as Record<string, unknown>)[canvasName] as WindowAPI;
+
+    if (windowCanvas && typeof windowCanvas === "object") {
+      handleCanvasInstance(windowCanvas);
+      optionsRef.current.onReady?.(windowCanvas);
+
+      // Set initial state from instance
+      if (windowCanvas.state?.transform) {
+        const transform = windowCanvas.state.transform;
+        setTransform(transform);
+        setZoom(transform.scale);
+        setPan({ x: transform.translateX, y: transform.translateY });
+      }
+
+      if (windowCanvas.state?.isReady) {
+        setIsReady(true);
+        optionsRef.current.onReady?.(windowCanvas);
+      }
+
+      setThemeModeState((windowCanvas?.theme?.current as "light" | "dark" | undefined) || "light");
 
-    if (instance.transform) {
-      setTransform(instance.transform);
-      setZoom(instance.transform.scale);
-      setPan({ x: instance.transform.translateX, y: instance.transform.translateY });
+      if (windowCanvas.rulers?.isVisible?.()) {
+        setShowRulersState(true);
+      }
+      if (windowCanvas.grid?.isVisible?.()) {
+        setShowGridState(true);
+      }
+    } else {
+      optionsRef.current.onError?.();
     }
+  }, [canvasName, handleCanvasInstance]);
 
-    if (instance.isReady) {
-      setIsReady(true);
-      optionsRef.current.onReady?.(instance);
+  // Set up event listeners on canvas instance
+  useEffect(() => {
+    if (!canvas) {
+      return;
     }
 
+    canvas.event.on("transform", handleTransform);
+    canvas.event.on("zoom", handleZoom);
+    canvas.event.on("pan", handlePan);
+    canvas.event.on("ready", handleReady);
+    canvas.event.on("rulersVisibility", handleRulersVisibilityChange);
+    canvas.event.on("gridVisibility", handleGridVisibilityChange);
+
     return () => {
-      instance.off("transform", handleTransform);
-      instance.off("zoom", handleZoom);
-      instance.off("pan", handlePan);
-      instance.off("ready", handleReady);
+      canvas.event.off("transform", handleTransform);
+      canvas.event.off("zoom", handleZoom);
+      canvas.event.off("pan", handlePan);
+      canvas.event.off("ready", handleReady);
+      canvas.event.off("rulersVisibility", handleRulersVisibilityChange);
+      canvas.event.off("gridVisibility", handleGridVisibilityChange);
     };
-  }, [instance, handleTransform, handleZoom, handlePan, handleReady]);
+  }, [canvas, handleTransform, handleZoom, handlePan, handleReady, handleRulersVisibilityChange, handleGridVisibilityChange]);
 
-  const zoomIn = useCallback(() => {
-    canvasRef.current?.zoomIn();
-  }, [canvasRef]);
+  // Listen to window messages for state updates
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.source === "markup-canvas" && event.data.canvasName === canvasName) {
+        switch (event.data.event) {
+          case "transform":
+            handleTransform(event.data.data);
+            break;
+          case "zoom":
+            console.log("zoom", event.data.data);
+            handleZoom(event.data.data);
+            break;
+          case "pan":
+            handlePan(event.data.data);
+            break;
+          case "ready":
+            handleReady(event.data.data);
+            break;
+          default:
+            break;
+        }
+      }
+    };
 
-  const zoomOut = useCallback(() => {
-    canvasRef.current?.zoomOut();
-  }, [canvasRef]);
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [canvasName, handleTransform, handleZoom, handlePan, handleReady]);
+
+  // Action methods
+  const zoomIn = useCallback(
+    (factor = 0.5) => {
+      canvas?.zoom?.in?.(factor);
+    },
+    [canvas]
+  );
+
+  const zoomOut = useCallback(
+    (factor = 0.5) => {
+      canvas?.zoom?.out?.(factor);
+    },
+    [canvas]
+  );
 
   const resetZoom = useCallback(() => {
-    canvasRef.current?.resetZoom();
-  }, [canvasRef]);
+    canvas?.zoom?.reset?.();
+  }, [canvas]);
+
+  const panLeft = useCallback(
+    (distance?: number) => {
+      canvas?.pan?.left?.(distance);
+    },
+    [canvas]
+  );
 
-  const panTo = useCallback(
-    (x: number, y: number) => {
-      canvasRef.current?.panTo(x, y);
+  const panRight = useCallback(
+    (distance?: number) => {
+      canvas?.pan?.right?.(distance);
     },
-    [canvasRef]
+    [canvas]
+  );
+
+  const panUp = useCallback(
+    (distance?: number) => {
+      canvas?.pan?.up?.(distance);
+    },
+    [canvas]
+  );
+
+  const panDown = useCallback(
+    (distance?: number) => {
+      canvas?.pan?.down?.(distance);
+    },
+    [canvas]
   );
 
   const fitToContent = useCallback(() => {
-    canvasRef.current?.fitToContent();
-  }, [canvasRef]);
+    canvas?.zoom?.fitToScreen?.();
+  }, [canvas]);
 
   const centerContent = useCallback(() => {
-    canvasRef.current?.centerContent();
-  }, [canvasRef]);
+    canvas?.pan?.toCenter?.();
+  }, [canvas]);
+
+  const resetView = useCallback(() => {
+    canvas?.zoom?.resetToCenter?.();
+  }, [canvas]);
 
   const setTransitionMode = useCallback(
     (enabled: boolean) => {
-      if (canvasRef.current?.canvas) {
-        canvasRef.current.canvas.updateConfig({ enableTransition: enabled });
-      }
+      canvas?.transition?.set?.(enabled);
     },
-    [canvasRef]
+    [canvas]
   );
 
   const toggleTransitionMode = useCallback(() => {
-    if (canvasRef.current?.canvas) {
-      const currentConfig = canvasRef.current.canvas.getConfig();
-      const newEnableTransition = !currentConfig.enableTransition;
-      canvasRef.current.canvas.updateConfig({ enableTransition: newEnableTransition });
-      return newEnableTransition;
-    }
-    return false;
-  }, [canvasRef]);
+    return canvas?.transition?.toggle?.() ?? false;
+  }, [canvas]);
 
   const updateThemeMode = useCallback(
     (mode: "light" | "dark") => {
       setThemeModeState(mode);
-      canvasRef.current?.updateThemeMode(mode);
+      canvas?.theme?.update?.(mode);
     },
-    [canvasRef]
+    [canvas]
   );
 
   const toggleThemeMode = useCallback(() => {
-    const newMode = themeMode === "light" ? "dark" : "light";
-    updateThemeMode(newMode);
-    return newMode;
-  }, [themeMode, updateThemeMode]);
+    canvas?.theme?.toggle?.();
+  }, [canvas]);
+
+  const showRulers = useCallback(() => {
+    canvas?.rulers?.show?.();
+  }, [canvas]);
+
+  const hideRulers = useCallback(() => {
+    canvas?.rulers?.hide?.();
+  }, [canvas]);
 
   const toggleRulers = useCallback(() => {
-    canvasRef.current?.toggleRulers();
-  }, [canvasRef]);
+    canvas?.rulers?.toggle?.();
+  }, [canvas]);
 
   const areRulersVisible = useCallback(() => {
-    return canvasRef.current?.areRulersVisible() ?? false;
-  }, [canvasRef]);
+    return canvas?.rulers?.isVisible?.() ?? false;
+  }, [canvas]);
+
+  const showGrid = useCallback(() => {
+    canvas?.grid?.show?.();
+  }, [canvas]);
+
+  const hideGrid = useCallback(() => {
+    canvas?.grid?.hide?.();
+  }, [canvas]);
 
   const toggleGrid = useCallback(() => {
-    canvasRef.current?.toggleGrid();
-  }, [canvasRef]);
+    canvas?.grid?.toggle?.();
+  }, [canvas]);
 
   const isGridVisible = useCallback(() => {
-    return canvasRef.current?.isGridVisible() ?? false;
-  }, [canvasRef]);
+    return canvas?.grid?.isVisible?.() ?? false;
+  }, [canvas]);
 
   return {
-    canvas: canvasRef.current?.canvas || null,
-    initCanvasUtils: handleCanvasInstance,
+    canvas: canvas,
     transform,
     zoom,
     pan,
@@ -155,17 +272,27 @@ export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, op
     zoomIn,
     zoomOut,
     resetZoom,
-    panTo,
+    panLeft,
+    panRight,
+    panUp,
+    panDown,
     fitToContent,
     centerContent,
+    resetView,
     setTransitionMode,
     toggleTransitionMode,
     themeMode,
     updateThemeMode,
     toggleThemeMode,
     toggleRulers,
+    showRulers,
+    hideRulers,
     areRulersVisible,
+    showRulersState,
     toggleGrid,
+    showGrid,
+    hideGrid,
     isGridVisible,
+    showGridState,
   };
 }

package/src/index.ts

@@ -3,6 +3,6 @@ export type { MarkupCanvas as CoreMarkupCanvas, MarkupCanvasConfig, Transform }
 export type { MarkupCanvasProps } from "./components/index.js";
 export { MarkupCanvas } from "./components/index.js";
 // Hooks
-export { useMarkupCanvas, useMarkupCanvasWindow } from "./hooks/index.js";
+export { useMarkupCanvas } from "./hooks/index.js";
 // Types
 export type { CanvasEventHandlers, MarkupCanvasRef, UseMarkupCanvasOptions } from "./types/index.js";

package/dist/hooks/useMarkupCanvasWindow.d.ts

@@ -1,43 +0,0 @@
-import type { MarkupCanvas, Transform } from "@markup-canvas/core";
-import type { UseMarkupCanvasOptions } from "../types/index.js";
-interface UseMarkupCanvasWindowOptions extends UseMarkupCanvasOptions {
-    canvasName?: string;
-    onCanvasReady?: (canvas: MarkupCanvas) => void;
-    onCanvasUnavailable?: () => void;
-}
-export declare function useMarkupCanvasWindow(options?: UseMarkupCanvasWindowOptions): {
-    canvas: MarkupCanvas | null;
-    transform: Transform;
-    zoom: number;
-    pan: {
-        x: number;
-        y: number;
-    };
-    isReady: boolean;
-    zoomIn: (factor?: number) => void;
-    zoomOut: (factor?: number) => void;
-    resetZoom: () => void;
-    panLeft: (distance?: number) => void;
-    panRight: (distance?: number) => void;
-    panUp: (distance?: number) => void;
-    panDown: (distance?: number) => void;
-    fitToContent: () => void;
-    centerContent: () => void;
-    resetView: () => void;
-    setTransitionMode: (enabled: boolean) => void;
-    toggleTransitionMode: () => boolean;
-    themeMode: "light" | "dark";
-    updateThemeMode: (mode: "light" | "dark") => void;
-    toggleThemeMode: () => "light" | "dark";
-    toggleRulers: () => void;
-    showRulers: () => void;
-    hideRulers: () => void;
-    areRulersVisible: () => boolean;
-    showRulersState: boolean;
-    toggleGrid: () => void;
-    showGrid: () => void;
-    hideGrid: () => void;
-    isGridVisible: () => boolean;
-    showGridState: boolean;
-};
-export {};