@markup-canvas/react 1.0.0

package/README.md

@@ -0,0 +1,162 @@
+# @markup-canvas/react
+
+React component and hook for `@markup-canvas/core`.
+
+## ✨ Live Demo
+
+Check out the live demo: [https://markup-canvas.vercel.app/](https://markup-canvas.vercel.app/)
+
+## Installation
+
+```bash
+npm install @markup-canvas/react @markup-canvas/core
+# or
+pnpm add @markup-canvas/react @markup-canvas/core
+# or
+yarn add @markup-canvas/react @markup-canvas/core
+```
+
+## Usage
+
+### Component API
+
+```tsx
+import { useRef } from 'react';
+import { MarkupCanvas, type MarkupCanvasRef } from '@markup-canvas/react';
+
+function App() {
+  const canvasRef = useRef<MarkupCanvasRef>(null);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <button onClick={() => canvasRef.current?.zoomIn()}>Zoom In</button>
+      <button onClick={() => canvasRef.current?.zoomOut()}>Zoom Out</button>
+      
+      <MarkupCanvas
+        ref={canvasRef}
+        width={20000}
+        height={15000}
+        enableZoom={true}
+        enablePan={true}
+        enableKeyboard={true}
+        onZoomChange={(zoom) => console.log('Zoom:', zoom)}
+        onReady={(canvas) => console.log('Canvas ready:', canvas)}
+      >
+        <div style={{ position: 'absolute', top: 100, left: 100 }}>
+          <h1>Zoomable Content</h1>
+          <p>This content can be panned and zoomed!</p>
+        </div>
+      </MarkupCanvas>
+    </div>
+  );
+}
+```
+
+### Hook API
+
+The `useMarkupCanvas` hook provides convenient access to canvas methods.
+**Important:** You must pass `initCanvasUtils` to the `onReady` prop for the hook to work properly.
+
+```tsx
+import { useRef } from 'react';
+import { MarkupCanvas, type MarkupCanvasRef, useMarkupCanvas } from '@markup-canvas/react';
+
+function App() {
+  const canvasRef = useRef<MarkupCanvasRef>(null);
+
+  const { initCanvasUtils, zoom, zoomIn, zoomOut, fitToContent, resetZoom } = useMarkupCanvas(canvasRef);
+
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <button onClick={() => zoomIn()}>Zoom In</button>
+      <button onClick={() => zoomOut()}>Zoom Out</button>
+      <button onClick={() => fitToContent()}>Fit to Content</button>
+      <span>Current zoom: {zoom.toFixed(2)}</span>
+      
+      <MarkupCanvas
+        ref={canvasRef}
+        width={20000}
+        height={15000}
+        enableZoom={true}
+        enablePan={true}
+        onReady={initCanvasUtils} // Required for hook to work
+      >
+        <div style={{ position: 'absolute', top: 100, left: 100 }}>
+          <h1>Zoomable Content</h1>
+        </div>
+      </MarkupCanvas>
+    </div>
+  );
+}
+```
+
+## API
+
+### Component Props
+
+#### Canvas Dimensions
+- `width?: number` - Canvas width in pixels
+- `height?: number` - Canvas height in pixels
+- `enableAcceleration?: boolean` - Enable hardware acceleration
+
+#### Interaction Controls
+- `enableZoom?: boolean` - Enable zoom functionality
+- `enablePan?: boolean` - Enable pan functionality
+- `enableTouch?: boolean` - Enable touch gestures
+- `enableKeyboard?: boolean` - Enable keyboard controls
+- `limitKeyboardEventsToCanvas?: boolean` - Limit keyboard events to when canvas is focused
+
+#### Zoom Behavior
+- `zoomSpeed?: number` - Zoom speed factor
+- `minZoom?: number` - Minimum zoom level
+- `maxZoom?: number` - Maximum zoom level
+- `enableTransition?: boolean` - Enable smooth transitions
+- `transitionDuration?: number` - Transition duration in ms
+- `enableAdaptiveSpeed?: boolean` - Enable adaptive zoom speed
+
+#### Pan Behavior
+- `enableLeftDrag?: boolean` - Enable left mouse button drag
+- `enableMiddleDrag?: boolean` - Enable middle mouse button drag
+- `requireSpaceForMouseDrag?: boolean` - Require space key for mouse drag
+- `keyboardPanStep?: number` - Keyboard pan step size
+- `keyboardFastMultiplier?: number` - Fast pan multiplier (with shift)
+- `keyboardZoomStep?: number` - Keyboard zoom step size
+
+#### Click-to-Zoom
+- `enableClickToZoom?: boolean` - Enable click to zoom
+- `clickZoomLevel?: number` - Target zoom level for click-to-zoom
+- `requireOptionForClickZoom?: boolean` - Require Option/Alt key for click-to-zoom
+
+#### Visual Elements
+- `enableRulers?: boolean` - Show rulers
+- `enableGrid?: boolean` - Show background grid
+- `gridColor?: string` - Grid line color
+
+#### Ruler Styling
+- `rulerBackgroundColor?: string` - Ruler background color
+- `rulerBorderColor?: string` - Ruler border color
+- `rulerTextColor?: string` - Ruler text color
+- `rulerMajorTickColor?: string` - Major tick mark color
+- `rulerMinorTickColor?: string` - Minor tick mark color
+- `rulerFontSize?: number` - Ruler font size
+- `rulerFontFamily?: string` - Ruler font family
+- `rulerUnits?: string` - Ruler units label
+
+#### React-Specific Props
+- `children?: ReactNode` - Content to render inside the canvas
+- `className?: string` - CSS class name
+- `style?: CSSProperties` - Inline styles
+
+#### Callbacks
+- `onTransformUpdate?: (transform: Transform) => void` - Called on transform update
+- `onTransformChange?: (transform: Transform) => void` - Called on transform change
+- `onZoomChange?: (zoom: number) => void` - Called on zoom change
+- `onPanChange?: (pan: { x: number; y: number }) => void` - Called on pan change
+- `onReady?: (canvas: MarkupCanvas) => void` - Called when canvas is ready
+
+## License
+
+**CC BY-NC 4.0** - Creative Commons Attribution-NonCommercial 4.0 International
+
+This project is licensed for non-commercial use only. See the [LICENSE](../../LICENSE) file for details.
+

package/dist/components/MarkupCanvas.d.ts

@@ -0,0 +1,16 @@
+import { MarkupCanvas as CoreMarkupCanvas, type MarkupCanvasConfig, type Transform } from "@markup-canvas/core";
+import { type CSSProperties, type ReactNode } from "react";
+import type { MarkupCanvasRef } from "../types/index.js";
+export interface MarkupCanvasProps extends Omit<MarkupCanvasConfig, "container"> {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onTransformChange?: (transform: Transform) => void;
+    onZoomChange?: (zoom: number) => void;
+    onPanChange?: (pan: {
+        x: number;
+        y: number;
+    }) => void;
+    onReady?: (canvas: CoreMarkupCanvas) => void;
+}
+export declare const MarkupCanvas: import("react").ForwardRefExoticComponent<MarkupCanvasProps & import("react").RefAttributes<MarkupCanvasRef>>;

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export type { MarkupCanvasProps } from "./MarkupCanvas.js";
+export { MarkupCanvas } from "./MarkupCanvas.js";

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useMarkupCanvas } from "./useMarkupCanvas.js";

package/dist/hooks/useMarkupCanvas.d.ts

@@ -0,0 +1,22 @@
+import type { MarkupCanvas, Transform } from "@markup-canvas/core";
+import { type RefObject } from "react";
+import type { MarkupCanvasRef, UseMarkupCanvasOptions } from "../types/index.js";
+export declare function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, options?: UseMarkupCanvasOptions): {
+    canvas: MarkupCanvas | null;
+    initCanvasUtils: (canvas: MarkupCanvas) => void;
+    transform: Transform;
+    zoom: number;
+    pan: {
+        x: number;
+        y: number;
+    };
+    isReady: boolean;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    resetZoom: () => void;
+    panTo: (x: number, y: number) => void;
+    fitToContent: () => void;
+    centerContent: () => void;
+    setTransitionMode: (enabled: boolean) => void;
+    toggleTransitionMode: () => boolean;
+};

package/dist/index.cjs.js

@@ -0,0 +1,180 @@
+/**
+ * Markup Canvas React
+ * React components and hooks for markup-canvas
+ * @version 1.0.0
+ */
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@markup-canvas/core');
+var react = require('react');
+
+const MarkupCanvas = react.forwardRef(({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
+    const containerRef = react.useRef(null);
+    const [canvasInstance, setCanvasInstance] = react.useState(null);
+    react.useImperativeHandle(ref, () => ({
+        canvas: canvasInstance,
+        zoomIn: (factor = 0.1) => canvasInstance?.zoomIn(factor),
+        zoomOut: (factor = 0.1) => canvasInstance?.zoomOut(factor),
+        resetZoom: () => canvasInstance?.resetZoom(),
+        panTo: (x, y) => canvasInstance?.scrollToPoint(x, y),
+        fitToContent: () => canvasInstance?.fitToScreen(),
+        centerContent: () => canvasInstance?.centerContent(),
+        getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
+        getZoom: () => canvasInstance?.transform?.scale || 1,
+    }), [canvasInstance]);
+    const onTransformChangeRef = react.useRef(onTransformChange);
+    const onZoomChangeRef = react.useRef(onZoomChange);
+    const onPanChangeRef = react.useRef(onPanChange);
+    const onReadyRef = react.useRef(onReady);
+    onTransformChangeRef.current = onTransformChange;
+    onZoomChangeRef.current = onZoomChange;
+    onPanChangeRef.current = onPanChange;
+    onReadyRef.current = onReady;
+    const handleTransformChange = react.useCallback((transform) => {
+        onTransformChangeRef.current?.(transform);
+    }, []);
+    const handleZoomChange = react.useCallback((zoom) => {
+        onZoomChangeRef.current?.(zoom);
+    }, []);
+    const handlePanChange = react.useCallback((pan) => {
+        onPanChangeRef.current?.(pan);
+    }, []);
+    const handleReady = react.useCallback((canvas) => {
+        onReadyRef.current?.(canvas);
+    }, []);
+    const stableOptions = react.useMemo(() => options, Object.values(options));
+    react.useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const canvas = new core.MarkupCanvas(containerRef.current, stableOptions);
+        setCanvasInstance(canvas);
+        canvas.on("transform", handleTransformChange);
+        canvas.on("zoom", handleZoomChange);
+        canvas.on("pan", handlePanChange);
+        canvas.on("ready", handleReady);
+        if (canvas.isReady) {
+            handleReady(canvas);
+        }
+        if (canvas.container && typeof canvas.container.focus === "function") {
+            canvas.container.focus();
+        }
+        return () => {
+            canvas.off("transform", handleTransformChange);
+            canvas.off("zoom", handleZoomChange);
+            canvas.off("pan", handlePanChange);
+            canvas.off("ready", handleReady);
+            canvas.cleanup();
+            setCanvasInstance(null);
+        };
+    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: className, style: { width: "100%", height: "100%", ...style }, children: children }));
+});
+MarkupCanvas.displayName = "MarkupCanvas";
+
+function useMarkupCanvas(canvasRef, options = {}) {
+    const [canvasInstance, setCanvasInstance] = react.useState(null);
+    const [transform, setTransform] = react.useState({ scale: 1, translateX: 0, translateY: 0 });
+    const [zoom, setZoom] = react.useState(1);
+    const [pan, setPan] = react.useState({ x: 0, y: 0 });
+    const [isReady, setIsReady] = react.useState(false);
+    const optionsRef = react.useRef(options);
+    optionsRef.current = options;
+    const handleCanvasInstance = react.useCallback((canvas) => {
+        setCanvasInstance(canvas);
+        optionsRef.current.onReady?.(canvas);
+    }, []);
+    const handleTransform = react.useCallback((newTransform) => {
+        setTransform(newTransform);
+        optionsRef.current.onTransformChange?.(newTransform);
+    }, []);
+    const handleZoom = react.useCallback((newZoom) => {
+        setZoom(newZoom);
+        optionsRef.current.onZoomChange?.(newZoom);
+    }, []);
+    const handlePan = react.useCallback((newPan) => {
+        setPan(newPan);
+        optionsRef.current.onPanChange?.(newPan);
+    }, []);
+    const handleReady = react.useCallback((canvas) => {
+        setIsReady(true);
+        optionsRef.current.onReady?.(canvas);
+    }, []);
+    react.useEffect(() => {
+        console.log("useEffect", canvasInstance);
+        if (!canvasInstance) {
+            return;
+        }
+        canvasInstance.on("transform", handleTransform);
+        canvasInstance.on("zoom", handleZoom);
+        canvasInstance.on("pan", handlePan);
+        canvasInstance.on("ready", handleReady);
+        if (canvasInstance.transform) {
+            setTransform(canvasInstance.transform);
+            setZoom(canvasInstance.transform.scale);
+            setPan({ x: canvasInstance.transform.translateX, y: canvasInstance.transform.translateY });
+        }
+        if (canvasInstance.isReady) {
+            setIsReady(true);
+            optionsRef.current.onReady?.(canvasInstance);
+        }
+        return () => {
+            canvasInstance.off("transform", handleTransform);
+            canvasInstance.off("zoom", handleZoom);
+            canvasInstance.off("pan", handlePan);
+            canvasInstance.off("ready", handleReady);
+        };
+    }, [canvasInstance]);
+    const zoomIn = react.useCallback((factor = 0.5) => {
+        canvasRef.current?.zoomIn(factor);
+    }, [canvasRef]);
+    const zoomOut = react.useCallback((factor = 0.5) => {
+        canvasRef.current?.zoomOut(factor);
+    }, [canvasRef]);
+    const resetZoom = react.useCallback(() => {
+        canvasRef.current?.resetZoom();
+    }, [canvasRef]);
+    const panTo = react.useCallback((x, y) => {
+        canvasRef.current?.panTo(x, y);
+    }, [canvasRef]);
+    const fitToContent = react.useCallback(() => {
+        canvasRef.current?.fitToContent();
+    }, [canvasRef]);
+    const centerContent = react.useCallback(() => {
+        canvasRef.current?.centerContent();
+    }, [canvasRef]);
+    const setTransitionMode = react.useCallback((enabled) => {
+        if (canvasRef.current?.canvas) {
+            canvasRef.current.canvas.updateConfig({ enableTransition: enabled });
+        }
+    }, [canvasRef]);
+    const toggleTransitionMode = react.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: canvasRef.current?.canvas || null,
+        initCanvasUtils: handleCanvasInstance,
+        transform,
+        zoom,
+        pan,
+        isReady,
+        zoomIn,
+        zoomOut,
+        resetZoom,
+        panTo,
+        fitToContent,
+        centerContent,
+        setTransitionMode,
+        toggleTransitionMode,
+    };
+}
+
+exports.MarkupCanvas = MarkupCanvas;
+exports.useMarkupCanvas = useMarkupCanvas;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["forwardRef","useRef","useState","useImperativeHandle","useCallback","useMemo","useEffect","CoreMarkupCanvas","_jsx"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { MarkupCanvas as CoreMarkupCanvas, MarkupCanvasConfig, Transform } from "@markup-canvas/core";
+export type { MarkupCanvasProps } from "./components/index.js";
+export { MarkupCanvas } from "./components/index.js";
+export { useMarkupCanvas } from "./hooks/index.js";
+export type { CanvasEventHandlers, MarkupCanvasRef, UseMarkupCanvasOptions } from "./types/index.js";

package/dist/index.esm.js

@@ -0,0 +1,177 @@
+/**
+ * Markup Canvas React
+ * React components and hooks for markup-canvas
+ * @version 1.0.0
+ */
+import { jsx } from 'react/jsx-runtime';
+import { MarkupCanvas as MarkupCanvas$1 } from '@markup-canvas/core';
+import { forwardRef, useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
+
+const MarkupCanvas = forwardRef(({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
+    const containerRef = useRef(null);
+    const [canvasInstance, setCanvasInstance] = useState(null);
+    useImperativeHandle(ref, () => ({
+        canvas: canvasInstance,
+        zoomIn: (factor = 0.1) => canvasInstance?.zoomIn(factor),
+        zoomOut: (factor = 0.1) => canvasInstance?.zoomOut(factor),
+        resetZoom: () => canvasInstance?.resetZoom(),
+        panTo: (x, y) => canvasInstance?.scrollToPoint(x, y),
+        fitToContent: () => canvasInstance?.fitToScreen(),
+        centerContent: () => canvasInstance?.centerContent(),
+        getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
+        getZoom: () => canvasInstance?.transform?.scale || 1,
+    }), [canvasInstance]);
+    const onTransformChangeRef = useRef(onTransformChange);
+    const onZoomChangeRef = useRef(onZoomChange);
+    const onPanChangeRef = useRef(onPanChange);
+    const onReadyRef = useRef(onReady);
+    onTransformChangeRef.current = onTransformChange;
+    onZoomChangeRef.current = onZoomChange;
+    onPanChangeRef.current = onPanChange;
+    onReadyRef.current = onReady;
+    const handleTransformChange = useCallback((transform) => {
+        onTransformChangeRef.current?.(transform);
+    }, []);
+    const handleZoomChange = useCallback((zoom) => {
+        onZoomChangeRef.current?.(zoom);
+    }, []);
+    const handlePanChange = useCallback((pan) => {
+        onPanChangeRef.current?.(pan);
+    }, []);
+    const handleReady = useCallback((canvas) => {
+        onReadyRef.current?.(canvas);
+    }, []);
+    const stableOptions = useMemo(() => options, Object.values(options));
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const canvas = new MarkupCanvas$1(containerRef.current, stableOptions);
+        setCanvasInstance(canvas);
+        canvas.on("transform", handleTransformChange);
+        canvas.on("zoom", handleZoomChange);
+        canvas.on("pan", handlePanChange);
+        canvas.on("ready", handleReady);
+        if (canvas.isReady) {
+            handleReady(canvas);
+        }
+        if (canvas.container && typeof canvas.container.focus === "function") {
+            canvas.container.focus();
+        }
+        return () => {
+            canvas.off("transform", handleTransformChange);
+            canvas.off("zoom", handleZoomChange);
+            canvas.off("pan", handlePanChange);
+            canvas.off("ready", handleReady);
+            canvas.cleanup();
+            setCanvasInstance(null);
+        };
+    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+    return (jsx("div", { ref: containerRef, className: className, style: { width: "100%", height: "100%", ...style }, children: children }));
+});
+MarkupCanvas.displayName = "MarkupCanvas";
+
+function useMarkupCanvas(canvasRef, options = {}) {
+    const [canvasInstance, setCanvasInstance] = useState(null);
+    const [transform, setTransform] = useState({ 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 optionsRef = useRef(options);
+    optionsRef.current = options;
+    const handleCanvasInstance = useCallback((canvas) => {
+        setCanvasInstance(canvas);
+        optionsRef.current.onReady?.(canvas);
+    }, []);
+    const handleTransform = useCallback((newTransform) => {
+        setTransform(newTransform);
+        optionsRef.current.onTransformChange?.(newTransform);
+    }, []);
+    const handleZoom = useCallback((newZoom) => {
+        setZoom(newZoom);
+        optionsRef.current.onZoomChange?.(newZoom);
+    }, []);
+    const handlePan = useCallback((newPan) => {
+        setPan(newPan);
+        optionsRef.current.onPanChange?.(newPan);
+    }, []);
+    const handleReady = useCallback((canvas) => {
+        setIsReady(true);
+        optionsRef.current.onReady?.(canvas);
+    }, []);
+    useEffect(() => {
+        console.log("useEffect", canvasInstance);
+        if (!canvasInstance) {
+            return;
+        }
+        canvasInstance.on("transform", handleTransform);
+        canvasInstance.on("zoom", handleZoom);
+        canvasInstance.on("pan", handlePan);
+        canvasInstance.on("ready", handleReady);
+        if (canvasInstance.transform) {
+            setTransform(canvasInstance.transform);
+            setZoom(canvasInstance.transform.scale);
+            setPan({ x: canvasInstance.transform.translateX, y: canvasInstance.transform.translateY });
+        }
+        if (canvasInstance.isReady) {
+            setIsReady(true);
+            optionsRef.current.onReady?.(canvasInstance);
+        }
+        return () => {
+            canvasInstance.off("transform", handleTransform);
+            canvasInstance.off("zoom", handleZoom);
+            canvasInstance.off("pan", handlePan);
+            canvasInstance.off("ready", handleReady);
+        };
+    }, [canvasInstance]);
+    const zoomIn = useCallback((factor = 0.5) => {
+        canvasRef.current?.zoomIn(factor);
+    }, [canvasRef]);
+    const zoomOut = useCallback((factor = 0.5) => {
+        canvasRef.current?.zoomOut(factor);
+    }, [canvasRef]);
+    const resetZoom = useCallback(() => {
+        canvasRef.current?.resetZoom();
+    }, [canvasRef]);
+    const panTo = useCallback((x, y) => {
+        canvasRef.current?.panTo(x, y);
+    }, [canvasRef]);
+    const fitToContent = useCallback(() => {
+        canvasRef.current?.fitToContent();
+    }, [canvasRef]);
+    const centerContent = useCallback(() => {
+        canvasRef.current?.centerContent();
+    }, [canvasRef]);
+    const setTransitionMode = useCallback((enabled) => {
+        if (canvasRef.current?.canvas) {
+            canvasRef.current.canvas.updateConfig({ enableTransition: enabled });
+        }
+    }, [canvasRef]);
+    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: canvasRef.current?.canvas || null,
+        initCanvasUtils: handleCanvasInstance,
+        transform,
+        zoom,
+        pan,
+        isReady,
+        zoomIn,
+        zoomOut,
+        resetZoom,
+        panTo,
+        fitToContent,
+        centerContent,
+        setTransitionMode,
+        toggleTransitionMode,
+    };
+}
+
+export { MarkupCanvas, useMarkupCanvas };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/MarkupCanvas.tsx","../src/hooks/useMarkupCanvas.ts"],"sourcesContent":[null,null],"names":["CoreMarkupCanvas","_jsx"],"mappings":"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"}

package/dist/types/index.d.ts

@@ -0,0 +1,30 @@
+import type { MarkupCanvas as CoreMarkupCanvas, Transform } from "@markup-canvas/core";
+export interface MarkupCanvasRef {
+    canvas: CoreMarkupCanvas | null;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    resetZoom: () => void;
+    panTo: (x: number, y: number) => void;
+    fitToContent: () => void;
+    centerContent: () => void;
+    getTransform: () => Transform;
+    getZoom: () => number;
+}
+export interface UseMarkupCanvasOptions {
+    onTransformChange?: (transform: Transform) => void;
+    onZoomChange?: (zoom: number) => void;
+    onPanChange?: (pan: {
+        x: number;
+        y: number;
+    }) => void;
+    onReady?: (canvas: CoreMarkupCanvas) => void;
+}
+export interface CanvasEventHandlers {
+    onZoom?: (zoom: number) => void;
+    onPan?: (pan: {
+        x: number;
+        y: number;
+    }) => void;
+    onTransform?: (transform: Transform) => void;
+    onReady?: (canvas: CoreMarkupCanvas) => void;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@markup-canvas/react",
+  "version": "1.0.0",
+  "description": "React components and hooks for markup-canvas",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "clean": "rm -rf dist",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@markup-canvas/core": "^1.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.2.6",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rollup": "^4.52.4",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.9.3",
+    "tslib": "^2.8.1"
+  },
+  "keywords": [
+    "react",
+    "zoom",
+    "pan",
+    "canvas",
+    "component",
+    "hook"
+  ],
+  "author": "Fritz Benning <mail@fritzbenning.de>",
+  "license": "CC-BY-NC-4.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fritzbenning/markup-canvas"
+  },
+  "bugs": {
+    "url": "https://github.com/fritzbenning/markup-canvas/issues"
+  },
+  "homepage": "https://github.com/fritzbenning/markup-canvas#readme"
+}

package/src/components/MarkupCanvas.tsx

@@ -0,0 +1,111 @@
+import { MarkupCanvas as CoreMarkupCanvas, type MarkupCanvasConfig, type Transform } from "@markup-canvas/core";
+import {
+  type CSSProperties,
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type { MarkupCanvasRef } from "../types/index.js";
+
+export interface MarkupCanvasProps extends Omit<MarkupCanvasConfig, "container"> {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  onTransformChange?: (transform: Transform) => void;
+  onZoomChange?: (zoom: number) => void;
+  onPanChange?: (pan: { x: number; y: number }) => void;
+  onReady?: (canvas: CoreMarkupCanvas) => void;
+}
+
+export const MarkupCanvas = forwardRef<MarkupCanvasRef, MarkupCanvasProps>(
+  ({ children, className, style, onTransformChange, onZoomChange, onPanChange, onReady, ...options }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [canvasInstance, setCanvasInstance] = useState<CoreMarkupCanvas | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        canvas: canvasInstance,
+        zoomIn: (factor = 0.1) => canvasInstance?.zoomIn(factor),
+        zoomOut: (factor = 0.1) => canvasInstance?.zoomOut(factor),
+        resetZoom: () => canvasInstance?.resetZoom(),
+        panTo: (x, y) => canvasInstance?.scrollToPoint(x, y),
+        fitToContent: () => canvasInstance?.fitToScreen(),
+        centerContent: () => canvasInstance?.centerContent(),
+        getTransform: () => canvasInstance?.transform || { scale: 1, translateX: 0, translateY: 0 },
+        getZoom: () => canvasInstance?.transform?.scale || 1,
+      }),
+      [canvasInstance]
+    );
+
+    const onTransformChangeRef = useRef(onTransformChange);
+    const onZoomChangeRef = useRef(onZoomChange);
+    const onPanChangeRef = useRef(onPanChange);
+    const onReadyRef = useRef(onReady);
+
+    onTransformChangeRef.current = onTransformChange;
+    onZoomChangeRef.current = onZoomChange;
+    onPanChangeRef.current = onPanChange;
+    onReadyRef.current = onReady;
+
+    const handleTransformChange = useCallback((transform: Transform) => {
+      onTransformChangeRef.current?.(transform);
+    }, []);
+
+    const handleZoomChange = useCallback((zoom: number) => {
+      onZoomChangeRef.current?.(zoom);
+    }, []);
+
+    const handlePanChange = useCallback((pan: { x: number; y: number }) => {
+      onPanChangeRef.current?.(pan);
+    }, []);
+
+    const handleReady = useCallback((canvas: CoreMarkupCanvas) => {
+      onReadyRef.current?.(canvas);
+    }, []);
+
+    const stableOptions = useMemo(() => options, Object.values(options));
+
+    useEffect(() => {
+      if (!containerRef.current) return;
+
+      const canvas = new CoreMarkupCanvas(containerRef.current, stableOptions);
+      setCanvasInstance(canvas);
+
+      canvas.on("transform", handleTransformChange);
+      canvas.on("zoom", handleZoomChange);
+      canvas.on("pan", handlePanChange);
+      canvas.on("ready", handleReady);
+
+      if (canvas.isReady) {
+        handleReady(canvas);
+      }
+
+      if (canvas.container && typeof canvas.container.focus === "function") {
+        canvas.container.focus();
+      }
+
+      return () => {
+        canvas.off("transform", handleTransformChange);
+        canvas.off("zoom", handleZoomChange);
+        canvas.off("pan", handlePanChange);
+        canvas.off("ready", handleReady);
+        canvas.cleanup();
+        setCanvasInstance(null);
+      };
+    }, [stableOptions, handleTransformChange, handleZoomChange, handlePanChange, handleReady]);
+
+    return (
+      <div ref={containerRef} className={className} style={{ width: "100%", height: "100%", ...style }}>
+        {children}
+      </div>
+    );
+  }
+);
+
+MarkupCanvas.displayName = "MarkupCanvas";

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export type { MarkupCanvasProps } from "./MarkupCanvas.js";
+export { MarkupCanvas } from "./MarkupCanvas.js";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useMarkupCanvas } from "./useMarkupCanvas.js";

package/src/hooks/useMarkupCanvas.ts

@@ -0,0 +1,139 @@
+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";
+
+export function useMarkupCanvas(canvasRef: RefObject<MarkupCanvasRef | null>, options: UseMarkupCanvasOptions = {}) {
+  const [canvasInstance, setCanvasInstance] = useState<MarkupCanvas | 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 optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  const handleCanvasInstance = useCallback((canvas: MarkupCanvas) => {
+    setCanvasInstance(canvas);
+    optionsRef.current.onReady?.(canvas);
+  }, []);
+
+  const handleTransform = useCallback((newTransform: Transform) => {
+    setTransform(newTransform);
+    optionsRef.current.onTransformChange?.(newTransform);
+  }, []);
+
+  const handleZoom = useCallback((newZoom: number) => {
+    setZoom(newZoom);
+    optionsRef.current.onZoomChange?.(newZoom);
+  }, []);
+
+  const handlePan = useCallback((newPan: { x: number; y: number }) => {
+    setPan(newPan);
+    optionsRef.current.onPanChange?.(newPan);
+  }, []);
+
+  const handleReady = useCallback((canvas: MarkupCanvas) => {
+    setIsReady(true);
+    optionsRef.current.onReady?.(canvas);
+  }, []);
+
+  useEffect(() => {
+    console.log("useEffect", canvasInstance);
+
+    if (!canvasInstance) {
+      return;
+    }
+
+    canvasInstance.on("transform", handleTransform);
+    canvasInstance.on("zoom", handleZoom);
+    canvasInstance.on("pan", handlePan);
+    canvasInstance.on("ready", handleReady);
+
+    if (canvasInstance.transform) {
+      setTransform(canvasInstance.transform);
+      setZoom(canvasInstance.transform.scale);
+      setPan({ x: canvasInstance.transform.translateX, y: canvasInstance.transform.translateY });
+    }
+
+    if (canvasInstance.isReady) {
+      setIsReady(true);
+      optionsRef.current.onReady?.(canvasInstance);
+    }
+
+    return () => {
+      canvasInstance.off("transform", handleTransform);
+      canvasInstance.off("zoom", handleZoom);
+      canvasInstance.off("pan", handlePan);
+      canvasInstance.off("ready", handleReady);
+    };
+  }, [canvasInstance]);
+
+  const zoomIn = useCallback(
+    (factor = 0.5) => {
+      canvasRef.current?.zoomIn(factor);
+    },
+    [canvasRef]
+  );
+
+  const zoomOut = useCallback(
+    (factor = 0.5) => {
+      canvasRef.current?.zoomOut(factor);
+    },
+    [canvasRef]
+  );
+
+  const resetZoom = useCallback(() => {
+    canvasRef.current?.resetZoom();
+  }, [canvasRef]);
+
+  const panTo = useCallback(
+    (x: number, y: number) => {
+      canvasRef.current?.panTo(x, y);
+    },
+    [canvasRef]
+  );
+
+  const fitToContent = useCallback(() => {
+    canvasRef.current?.fitToContent();
+  }, [canvasRef]);
+
+  const centerContent = useCallback(() => {
+    canvasRef.current?.centerContent();
+  }, [canvasRef]);
+
+  const setTransitionMode = useCallback(
+    (enabled: boolean) => {
+      if (canvasRef.current?.canvas) {
+        canvasRef.current.canvas.updateConfig({ enableTransition: enabled });
+      }
+    },
+    [canvasRef]
+  );
+
+  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: canvasRef.current?.canvas || null,
+    initCanvasUtils: handleCanvasInstance,
+    transform,
+    zoom,
+    pan,
+    isReady,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    panTo,
+    fitToContent,
+    centerContent,
+    setTransitionMode,
+    toggleTransitionMode,
+  };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Core
+export type { MarkupCanvas as CoreMarkupCanvas, MarkupCanvasConfig, Transform } from "@markup-canvas/core";
+export type { MarkupCanvasProps } from "./components/index.js";
+export { MarkupCanvas } from "./components/index.js";
+// Hooks
+export { useMarkupCanvas } from "./hooks/index.js";
+// Types
+export type { CanvasEventHandlers, MarkupCanvasRef, UseMarkupCanvasOptions } from "./types/index.js";

package/src/types/index.ts

@@ -0,0 +1,27 @@
+import type { MarkupCanvas as CoreMarkupCanvas, Transform } from "@markup-canvas/core";
+
+export interface MarkupCanvasRef {
+  canvas: CoreMarkupCanvas | null;
+  zoomIn: (factor?: number) => void;
+  zoomOut: (factor?: number) => void;
+  resetZoom: () => void;
+  panTo: (x: number, y: number) => void;
+  fitToContent: () => void;
+  centerContent: () => void;
+  getTransform: () => Transform;
+  getZoom: () => number;
+}
+
+export interface UseMarkupCanvasOptions {
+  onTransformChange?: (transform: Transform) => void;
+  onZoomChange?: (zoom: number) => void;
+  onPanChange?: (pan: { x: number; y: number }) => void;
+  onReady?: (canvas: CoreMarkupCanvas) => void;
+}
+
+export interface CanvasEventHandlers {
+  onZoom?: (zoom: number) => void;
+  onPan?: (pan: { x: number; y: number }) => void;
+  onTransform?: (transform: Transform) => void;
+  onReady?: (canvas: CoreMarkupCanvas) => void;
+}