@omer-x/svg-viewport 1.0.0 → 2.0.1

package/dist/index.cjs

@@ -26,7 +26,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/SvgViewport.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/core/matrix.ts
 function transform(matrix) {
@@ -58,16 +58,6 @@ function getFocusedMatrix(focusPoint, width, height) {
   }
 }
 
-// src/hooks/polyfill-state.ts
-var import_react = require("react");
-function usePolyfillState(state, dispatch) {
-  const [polyfill, setPolyfill] = (0, import_react.useState)(state);
-  if (dispatch) {
-    return [state, dispatch];
-  }
-  return [polyfill, setPolyfill];
-}
-
 // src/components/SvgViewport.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var SvgViewport = ({
@@ -77,55 +67,64 @@ var SvgViewport = ({
   zoomable = false,
   minZoom = 0.5,
   maxZoom = 2,
-  panning = false,
-  setPanning,
-  transformation = null,
-  setTransformation,
+  transformation: externalTransformation,
+  onTransformationChange,
   initialFocusPoint = "center",
   style,
   children,
   ...otherProps
 }) => {
-  const pointer = (0, import_react2.useRef)({ x: 0, y: 0 });
-  const [grabbing, setGrabbing] = (0, import_react2.useState)(false);
-  const [activeTransformation, activeSetTransformation] = usePolyfillState(transformation, setTransformation);
-  const [activePanning, setActivePanning] = usePolyfillState(panning, setPanning);
+  const isControlled = externalTransformation !== void 0;
+  const [internalTransformation, setInternalTransformation] = (0, import_react.useState)(null);
+  const pointer = (0, import_react.useRef)({ x: 0, y: 0 });
+  const [grabbing, setGrabbing] = (0, import_react.useState)(false);
+  const [isPanning, setIsPanning] = (0, import_react.useState)(false);
+  const transformation = isControlled ? externalTransformation : internalTransformation;
+  const transformationRef = (0, import_react.useRef)(transformation);
+  (0, import_react.useEffect)(() => {
+    transformationRef.current = transformation;
+  }, [transformation]);
+  (0, import_react.useEffect)(() => {
+    if (!isControlled && !internalTransformation) {
+      setInternalTransformation({
+        zoom: 1,
+        matrix: getFocusedMatrix(initialFocusPoint, width, height)
+      });
+    }
+  }, []);
+  const setTransformation = (0, import_react.useCallback)((value) => {
+    if (!isControlled) {
+      setInternalTransformation(value);
+    }
+    onTransformationChange?.(value);
+  }, [isControlled, onTransformationChange]);
   const stopGrabbing = () => {
     setGrabbing(false);
   };
-  (0, import_react2.useEffect)(() => {
-    if (setTransformation) return;
-    activeSetTransformation({
-      zoom: 1,
-      matrix: getFocusedMatrix(initialFocusPoint, width, height)
-    });
-  }, [setTransformation]);
   const down = (e) => {
-    if (e.button === 0) {
-      pointer.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      setActivePanning(true);
-    }
+    if (e.button !== 0) return;
+    pointer.current = { x: e.clientX, y: e.clientY };
+    setIsPanning(true);
     setGrabbing(true);
   };
-  const move = (0, import_react2.useCallback)((e) => {
-    if (activePanning && activeTransformation) {
-      const x = (e.clientX - pointer.current.x) / activeTransformation.zoom;
-      const y = (e.clientY - pointer.current.y) / activeTransformation.zoom;
-      pointer.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      activeSetTransformation((t) => t ? { ...t, matrix: t.matrix.translate(x, y) } : t);
+  const move = (0, import_react.useCallback)((e) => {
+    const currentTrans = transformationRef.current;
+    if (currentTrans) {
+      const x = (e.clientX - pointer.current.x) / currentTrans.zoom;
+      const y = (e.clientY - pointer.current.y) / currentTrans.zoom;
+      pointer.current = { x: e.clientX, y: e.clientY };
+      setTransformation({
+        ...currentTrans,
+        matrix: currentTrans.matrix.translate(x, y)
+      });
     }
-  }, [activePanning, activeTransformation]);
-  const up = (0, import_react2.useCallback)(() => {
-    setActivePanning(false);
+  }, [setTransformation]);
+  const up = (0, import_react.useCallback)(() => {
+    setIsPanning(false);
+    setGrabbing(false);
   }, []);
-  (0, import_react2.useEffect)(() => {
-    if (activePanning) {
+  (0, import_react.useEffect)(() => {
+    if (isPanning) {
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
     }
@@ -133,24 +132,21 @@ var SvgViewport = ({
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", up);
     };
-  }, [activePanning]);
+  }, [isPanning, move, up]);
   const adjustZoom = (e) => {
+    if (!zoomable) return;
+    e.preventDefault();
     const scale = e.deltaY < 0 ? 1.25 : 0.8;
     const eventTarget = e.currentTarget;
-    const eventClientX = e.clientX;
-    const eventClientY = e.clientY;
-    activeSetTransformation((t) => {
-      if (t && t.zoom * scale > minZoom && t.zoom * scale < maxZoom) {
-        return {
-          ...t,
-          zoom: t.zoom * scale,
-          matrix: adjustWithZoom(t.matrix, scale, eventTarget, eventClientX, eventClientY)
-        };
-      }
-      return t;
-    });
+    const { clientX, clientY } = e;
+    if (transformation && transformation.zoom * scale > minZoom && transformation.zoom * scale < maxZoom) {
+      setTransformation({
+        zoom: transformation.zoom * scale,
+        matrix: adjustWithZoom(transformation.matrix, scale, eventTarget, clientX, clientY)
+      });
+    }
   };
-  const cursor = pannable ? grabbing || panning ? "grabbing" : "grab" : "auto";
+  const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
@@ -163,7 +159,7 @@ var SvgViewport = ({
       onContextMenu: (e) => e.preventDefault(),
       style: { ...style, cursor },
       ...otherProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: transform(activeTransformation?.matrix), children: activeTransformation && children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: transform(transformation?.matrix), children: transformation && children })
     }
   );
 };

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, Dispatch, SetStateAction } from 'react';
+import { ComponentProps } from 'react';
 
 type FocusPoint = "center" | "top-left";
 
-type ViewportTransform = {
+type ViewportTransformation = {
     zoom: number;
     matrix: DOMMatrix;
 };
@@ -37,21 +37,13 @@ type SvgViewportProps = ComponentProps<"svg"> & {
      */
     maxZoom?: number;
     /**
-     * Indicates if panning is currently active.
+     * Current transformation state of the viewport.
      */
-    panning?: boolean;
+    transformation?: ViewportTransformation | null;
     /**
-     * Setter for the panning state.
+     * Callback to update the transformation state.
      */
-    setPanning?: Dispatch<SetStateAction<boolean>>;
-    /**
-     * Current transformation state.
-     */
-    transformation?: ViewportTransform | null;
-    /**
-     * Setter for the transformation state.
-     */
-    setTransformation?: Dispatch<SetStateAction<ViewportTransform | null>>;
+    onTransformationChange?: (tranformation: ViewportTransformation) => void;
     /**
      * Initial focus point of the viewport.
      */
@@ -60,6 +52,6 @@ type SvgViewportProps = ComponentProps<"svg"> & {
 /**
  * SVG Viewport component that supports panning and zooming.
  */
-declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, initialFocusPoint, style, children, ...otherProps }: SvgViewportProps) => react_jsx_runtime.JSX.Element;
+declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, transformation: externalTransformation, onTransformationChange, initialFocusPoint, style, children, ...otherProps }: SvgViewportProps) => react_jsx_runtime.JSX.Element;
 
 export { SvgViewport as default };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps, Dispatch, SetStateAction } from 'react';
+import { ComponentProps } from 'react';
 
 type FocusPoint = "center" | "top-left";
 
-type ViewportTransform = {
+type ViewportTransformation = {
     zoom: number;
     matrix: DOMMatrix;
 };
@@ -37,21 +37,13 @@ type SvgViewportProps = ComponentProps<"svg"> & {
      */
     maxZoom?: number;
     /**
-     * Indicates if panning is currently active.
+     * Current transformation state of the viewport.
      */
-    panning?: boolean;
+    transformation?: ViewportTransformation | null;
     /**
-     * Setter for the panning state.
+     * Callback to update the transformation state.
      */
-    setPanning?: Dispatch<SetStateAction<boolean>>;
-    /**
-     * Current transformation state.
-     */
-    transformation?: ViewportTransform | null;
-    /**
-     * Setter for the transformation state.
-     */
-    setTransformation?: Dispatch<SetStateAction<ViewportTransform | null>>;
+    onTransformationChange?: (tranformation: ViewportTransformation) => void;
     /**
      * Initial focus point of the viewport.
      */
@@ -60,6 +52,6 @@ type SvgViewportProps = ComponentProps<"svg"> & {
 /**
  * SVG Viewport component that supports panning and zooming.
  */
-declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, initialFocusPoint, style, children, ...otherProps }: SvgViewportProps) => react_jsx_runtime.JSX.Element;
+declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, transformation: externalTransformation, onTransformationChange, initialFocusPoint, style, children, ...otherProps }: SvgViewportProps) => react_jsx_runtime.JSX.Element;
 
 export { SvgViewport as default };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/SvgViewport.tsx
-import { useCallback, useEffect, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/core/matrix.ts
 function transform(matrix) {
@@ -33,16 +33,6 @@ function getFocusedMatrix(focusPoint, width, height) {
   }
 }
 
-// src/hooks/polyfill-state.ts
-import { useState } from "react";
-function usePolyfillState(state, dispatch) {
-  const [polyfill, setPolyfill] = useState(state);
-  if (dispatch) {
-    return [state, dispatch];
-  }
-  return [polyfill, setPolyfill];
-}
-
 // src/components/SvgViewport.tsx
 import { jsx } from "react/jsx-runtime";
 var SvgViewport = ({
@@ -52,55 +42,64 @@ var SvgViewport = ({
   zoomable = false,
   minZoom = 0.5,
   maxZoom = 2,
-  panning = false,
-  setPanning,
-  transformation = null,
-  setTransformation,
+  transformation: externalTransformation,
+  onTransformationChange,
   initialFocusPoint = "center",
   style,
   children,
   ...otherProps
 }) => {
+  const isControlled = externalTransformation !== void 0;
+  const [internalTransformation, setInternalTransformation] = useState(null);
   const pointer = useRef({ x: 0, y: 0 });
-  const [grabbing, setGrabbing] = useState2(false);
-  const [activeTransformation, activeSetTransformation] = usePolyfillState(transformation, setTransformation);
-  const [activePanning, setActivePanning] = usePolyfillState(panning, setPanning);
+  const [grabbing, setGrabbing] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const transformation = isControlled ? externalTransformation : internalTransformation;
+  const transformationRef = useRef(transformation);
+  useEffect(() => {
+    transformationRef.current = transformation;
+  }, [transformation]);
+  useEffect(() => {
+    if (!isControlled && !internalTransformation) {
+      setInternalTransformation({
+        zoom: 1,
+        matrix: getFocusedMatrix(initialFocusPoint, width, height)
+      });
+    }
+  }, []);
+  const setTransformation = useCallback((value) => {
+    if (!isControlled) {
+      setInternalTransformation(value);
+    }
+    onTransformationChange?.(value);
+  }, [isControlled, onTransformationChange]);
   const stopGrabbing = () => {
     setGrabbing(false);
   };
-  useEffect(() => {
-    if (setTransformation) return;
-    activeSetTransformation({
-      zoom: 1,
-      matrix: getFocusedMatrix(initialFocusPoint, width, height)
-    });
-  }, [setTransformation]);
   const down = (e) => {
-    if (e.button === 0) {
-      pointer.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      setActivePanning(true);
-    }
+    if (e.button !== 0) return;
+    pointer.current = { x: e.clientX, y: e.clientY };
+    setIsPanning(true);
     setGrabbing(true);
   };
   const move = useCallback((e) => {
-    if (activePanning && activeTransformation) {
-      const x = (e.clientX - pointer.current.x) / activeTransformation.zoom;
-      const y = (e.clientY - pointer.current.y) / activeTransformation.zoom;
-      pointer.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      activeSetTransformation((t) => t ? { ...t, matrix: t.matrix.translate(x, y) } : t);
+    const currentTrans = transformationRef.current;
+    if (currentTrans) {
+      const x = (e.clientX - pointer.current.x) / currentTrans.zoom;
+      const y = (e.clientY - pointer.current.y) / currentTrans.zoom;
+      pointer.current = { x: e.clientX, y: e.clientY };
+      setTransformation({
+        ...currentTrans,
+        matrix: currentTrans.matrix.translate(x, y)
+      });
     }
-  }, [activePanning, activeTransformation]);
+  }, [setTransformation]);
   const up = useCallback(() => {
-    setActivePanning(false);
+    setIsPanning(false);
+    setGrabbing(false);
   }, []);
   useEffect(() => {
-    if (activePanning) {
+    if (isPanning) {
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
     }
@@ -108,24 +107,21 @@ var SvgViewport = ({
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", up);
     };
-  }, [activePanning]);
+  }, [isPanning, move, up]);
   const adjustZoom = (e) => {
+    if (!zoomable) return;
+    e.preventDefault();
     const scale = e.deltaY < 0 ? 1.25 : 0.8;
     const eventTarget = e.currentTarget;
-    const eventClientX = e.clientX;
-    const eventClientY = e.clientY;
-    activeSetTransformation((t) => {
-      if (t && t.zoom * scale > minZoom && t.zoom * scale < maxZoom) {
-        return {
-          ...t,
-          zoom: t.zoom * scale,
-          matrix: adjustWithZoom(t.matrix, scale, eventTarget, eventClientX, eventClientY)
-        };
-      }
-      return t;
-    });
+    const { clientX, clientY } = e;
+    if (transformation && transformation.zoom * scale > minZoom && transformation.zoom * scale < maxZoom) {
+      setTransformation({
+        zoom: transformation.zoom * scale,
+        matrix: adjustWithZoom(transformation.matrix, scale, eventTarget, clientX, clientY)
+      });
+    }
   };
-  const cursor = pannable ? grabbing || panning ? "grabbing" : "grab" : "auto";
+  const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -138,7 +134,7 @@ var SvgViewport = ({
       onContextMenu: (e) => e.preventDefault(),
       style: { ...style, cursor },
       ...otherProps,
-      children: /* @__PURE__ */ jsx("g", { transform: transform(activeTransformation?.matrix), children: activeTransformation && children })
+      children: /* @__PURE__ */ jsx("g", { transform: transform(transformation?.matrix), children: transformation && children })
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omer-x/svg-viewport",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
   "keywords": [
     "react",