@omer-x/svg-viewport 0.3.1 → 2.0.0

package/dist/index.cjs

@@ -0,0 +1,167 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/SvgViewport.tsx
+var import_react = require("react");
+
+// src/core/matrix.ts
+function transform(matrix) {
+  if (!matrix) return void 0;
+  const { a, b, c, d, e, f } = matrix;
+  return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+}
+function focusTo(matrix, { x, y }, width, height, zoom) {
+  return matrix.translate(
+    width / 2 / zoom - x - matrix.m41 / zoom,
+    height / 2 / zoom - y - matrix.m42 / zoom
+  );
+}
+function adjustWithZoom(matrix, scale, svgElement, eX, eY) {
+  const rect = svgElement.getBoundingClientRect();
+  const focusPoint = new DOMPoint(eX - rect.left, eY - rect.top);
+  const relativePoint = focusPoint.matrixTransform(matrix.inverse());
+  const modifier = new DOMMatrix().translate(relativePoint.x, relativePoint.y).scale(scale).translate(-relativePoint.x, -relativePoint.y);
+  return matrix.multiply(modifier);
+}
+
+// src/core/initial-focus.ts
+function getFocusedMatrix(focusPoint, width, height) {
+  switch (focusPoint) {
+    case "center":
+      return focusTo(new DOMMatrix(), { x: 0, y: 0 }, width, height, 1);
+    case "top-left":
+      return focusTo(new DOMMatrix(), { x: 0, y: 0 }, 0, 0, 1);
+  }
+}
+
+// src/components/SvgViewport.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SvgViewport = ({
+  width,
+  height,
+  pannable = false,
+  zoomable = false,
+  minZoom = 0.5,
+  maxZoom = 2,
+  transformation: externalTransformation,
+  onTransformationChange,
+  initialFocusPoint = "center",
+  style,
+  children,
+  ...otherProps
+}) => {
+  const isControlled = externalTransformation !== void 0;
+  const [internalTransformation, setInternalTransformation] = (0, import_react.useState)(() => {
+    if (isControlled) return null;
+    return {
+      zoom: 1,
+      matrix: getFocusedMatrix(initialFocusPoint, width, height)
+    };
+  });
+  const transformation = isControlled ? externalTransformation : internalTransformation;
+  const transformationRef = (0, import_react.useRef)(transformation);
+  (0, import_react.useEffect)(() => {
+    transformationRef.current = transformation;
+  }, [transformation]);
+  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 setTransformation = (0, import_react.useCallback)((value) => {
+    if (!isControlled) {
+      setInternalTransformation(value);
+    }
+    onTransformationChange?.(value);
+  }, [isControlled, onTransformationChange]);
+  const stopGrabbing = () => {
+    setGrabbing(false);
+  };
+  const down = (e) => {
+    if (e.button !== 0) return;
+    pointer.current = { x: e.clientX, y: e.clientY };
+    setIsPanning(true);
+    setGrabbing(true);
+  };
+  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)
+      });
+    }
+  }, [setTransformation]);
+  const up = (0, import_react.useCallback)(() => {
+    setIsPanning(false);
+    setGrabbing(false);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isPanning) {
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    }
+    return () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+  }, [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 { 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 ? "grabbing" : "grab" : "auto";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      onMouseDown: pannable ? down : void 0,
+      onMouseUp: pannable ? stopGrabbing : void 0,
+      onMouseLeave: pannable ? stopGrabbing : void 0,
+      onWheel: zoomable ? adjustZoom : void 0,
+      onContextMenu: (e) => e.preventDefault(),
+      style: { ...style, cursor },
+      ...otherProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: transform(transformation?.matrix), children: transformation && children })
+    }
+  );
+};
+var SvgViewport_default = SvgViewport;
+
+// src/index.ts
+var index_default = SvgViewport_default;

package/dist/index.d.cts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type FocusPoint = "center" | "top-left";
+
+type ViewportTransformation = {
+    zoom: number;
+    matrix: DOMMatrix;
+};
+
+/**
+ * Props for the SvgViewport component.
+ */
+type SvgViewportProps = ComponentProps<"svg"> & {
+    /**
+     * Width of the SVG viewport.
+     */
+    width: number;
+    /**
+     * Height of the SVG viewport.
+     */
+    height: number;
+    /**
+     * Enable or disable panning functionality.
+     */
+    pannable?: boolean;
+    /**
+     * Enable or disable zooming functionality.
+     */
+    zoomable?: boolean;
+    /**
+     * Minimum zoom level.
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level.
+     */
+    maxZoom?: number;
+    /**
+     * Current transformation state of the viewport.
+     */
+    transformation?: ViewportTransformation | null;
+    /**
+     * Callback to update the transformation state.
+     */
+    onTransformationChange?: (tranformation: ViewportTransformation) => void;
+    /**
+     * Initial focus point of the viewport.
+     */
+    initialFocusPoint?: FocusPoint;
+};
+/**
+ * SVG Viewport component that supports panning and zooming.
+ */
+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,27 +1,57 @@
-import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
 
 type FocusPoint = "center" | "top-left";
 
-type ViewportTransform = {
-  zoom: number,
-  matrix: DOMMatrix,
+type ViewportTransformation = {
+    zoom: number;
+    matrix: DOMMatrix;
 };
 
-type SvgViewportProps = {
+/**
+ * Props for the SvgViewport component.
+ */
+type SvgViewportProps = ComponentProps<"svg"> & {
+    /**
+     * Width of the SVG viewport.
+     */
     width: number;
+    /**
+     * Height of the SVG viewport.
+     */
     height: number;
+    /**
+     * Enable or disable panning functionality.
+     */
     pannable?: boolean;
+    /**
+     * Enable or disable zooming functionality.
+     */
     zoomable?: boolean;
+    /**
+     * Minimum zoom level.
+     */
     minZoom?: number;
+    /**
+     * Maximum zoom level.
+     */
     maxZoom?: number;
-    panning?: boolean;
-    setPanning?: Dispatch<SetStateAction<boolean>>;
-    transformation?: ViewportTransform | null;
-    setTransformation?: Dispatch<SetStateAction<ViewportTransform | null>>;
+    /**
+     * Current transformation state of the viewport.
+     */
+    transformation?: ViewportTransformation | null;
+    /**
+     * Callback to update the transformation state.
+     */
+    onTransformationChange?: (tranformation: ViewportTransformation) => void;
+    /**
+     * Initial focus point of the viewport.
+     */
     initialFocusPoint?: FocusPoint;
-    className?: string;
-    children: ReactNode;
 };
-declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, initialFocusPoint, className, children, }: SvgViewportProps) => React.JSX.Element;
+/**
+ * SVG Viewport component that supports panning and zooming.
+ */
+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,110 +1,145 @@
 "use client";
-import React, { useState, useRef, useEffect, useCallback } from 'react';
 
+// src/components/SvgViewport.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/core/matrix.ts
 function transform(matrix) {
-    if (!matrix)
-        return undefined;
-    const { a, b, c, d, e, f } = matrix;
-    return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+  if (!matrix) return void 0;
+  const { a, b, c, d, e, f } = matrix;
+  return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
 }
 function focusTo(matrix, { x, y }, width, height, zoom) {
-    return matrix.translate(((width / 2) / zoom) - x - (matrix.m41 / zoom), ((height / 2) / zoom) - y - (matrix.m42 / zoom));
+  return matrix.translate(
+    width / 2 / zoom - x - matrix.m41 / zoom,
+    height / 2 / zoom - y - matrix.m42 / zoom
+  );
 }
 function adjustWithZoom(matrix, scale, svgElement, eX, eY) {
-    const rect = svgElement.getBoundingClientRect();
-    const focusPoint = new DOMPoint(eX - rect.left, eY - rect.top);
-    const relativePoint = focusPoint.matrixTransform(matrix.inverse());
-    const modifier = new DOMMatrix()
-        .translate(relativePoint.x, relativePoint.y)
-        .scale(scale)
-        .translate(-relativePoint.x, -relativePoint.y);
-    return matrix.multiply(modifier);
+  const rect = svgElement.getBoundingClientRect();
+  const focusPoint = new DOMPoint(eX - rect.left, eY - rect.top);
+  const relativePoint = focusPoint.matrixTransform(matrix.inverse());
+  const modifier = new DOMMatrix().translate(relativePoint.x, relativePoint.y).scale(scale).translate(-relativePoint.x, -relativePoint.y);
+  return matrix.multiply(modifier);
 }
 
+// src/core/initial-focus.ts
 function getFocusedMatrix(focusPoint, width, height) {
-    switch (focusPoint) {
-        case "center":
-            return focusTo(new DOMMatrix(), { x: 0, y: 0 }, width, height, 1);
-        case "top-left":
-            return focusTo(new DOMMatrix(), { x: 0, y: 0 }, 0, 0, 1);
-    }
-}
-
-function usePolyfillState(state, dispatch) {
-    const [polyfill, setPolyfill] = useState(state);
-    if (dispatch) {
-        return [state, dispatch];
-    }
-    return [polyfill, setPolyfill];
+  switch (focusPoint) {
+    case "center":
+      return focusTo(new DOMMatrix(), { x: 0, y: 0 }, width, height, 1);
+    case "top-left":
+      return focusTo(new DOMMatrix(), { x: 0, y: 0 }, 0, 0, 1);
+  }
 }
 
-const SvgViewport = ({ width, height, pannable = false, zoomable = false, minZoom = 0.5, maxZoom = 2, panning = false, setPanning, transformation = null, setTransformation, initialFocusPoint = "center", className, children, }) => {
-    const pointer = useRef({ x: 0, y: 0 });
-    const [grabbing, setGrabbing] = useState(false);
-    const [activeTransformation, activeSetTransformation] = usePolyfillState(transformation, setTransformation);
-    const [activePanning, setActivePanning] = usePolyfillState(panning, setPanning);
-    const stopGrabbing = () => {
-        setGrabbing(false);
-    };
-    useEffect(() => {
-        if (setTransformation)
-            return;
-        activeSetTransformation({
-            zoom: 1,
-            matrix: getFocusedMatrix(initialFocusPoint, width, height),
-        });
-    }, [setTransformation]);
-    // panning
-    const down = (e) => {
-        if (e.button === 0) {
-            pointer.current = {
-                x: e.clientX,
-                y: e.clientY,
-            };
-            setActivePanning(true);
-        }
-        setGrabbing(true);
+// src/components/SvgViewport.tsx
+import { jsx } from "react/jsx-runtime";
+var SvgViewport = ({
+  width,
+  height,
+  pannable = false,
+  zoomable = false,
+  minZoom = 0.5,
+  maxZoom = 2,
+  transformation: externalTransformation,
+  onTransformationChange,
+  initialFocusPoint = "center",
+  style,
+  children,
+  ...otherProps
+}) => {
+  const isControlled = externalTransformation !== void 0;
+  const [internalTransformation, setInternalTransformation] = useState(() => {
+    if (isControlled) return null;
+    return {
+      zoom: 1,
+      matrix: getFocusedMatrix(initialFocusPoint, width, height)
     };
-    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 ? Object.assign(Object.assign({}, t), { matrix: t.matrix.translate(x, y) }) : t));
-        }
-    }, [activePanning, activeTransformation]);
-    const up = useCallback(() => {
-        setActivePanning(false);
-    }, []);
-    useEffect(() => {
-        if (activePanning) {
-            document.addEventListener("mousemove", move);
-            document.addEventListener("mouseup", up);
-        }
-        return () => {
-            document.removeEventListener("mousemove", move);
-            document.removeEventListener("mouseup", up);
-        };
-    }, [activePanning]);
-    // zooming
-    const adjustZoom = (e) => {
-        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 Object.assign(Object.assign({}, t), { zoom: t.zoom * scale, matrix: adjustWithZoom(t.matrix, scale, eventTarget, eventClientX, eventClientY) });
-            }
-            return t;
-        });
+  });
+  const transformation = isControlled ? externalTransformation : internalTransformation;
+  const transformationRef = useRef(transformation);
+  useEffect(() => {
+    transformationRef.current = transformation;
+  }, [transformation]);
+  const pointer = useRef({ x: 0, y: 0 });
+  const [grabbing, setGrabbing] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const setTransformation = useCallback((value) => {
+    if (!isControlled) {
+      setInternalTransformation(value);
+    }
+    onTransformationChange?.(value);
+  }, [isControlled, onTransformationChange]);
+  const stopGrabbing = () => {
+    setGrabbing(false);
+  };
+  const down = (e) => {
+    if (e.button !== 0) return;
+    pointer.current = { x: e.clientX, y: e.clientY };
+    setIsPanning(true);
+    setGrabbing(true);
+  };
+  const move = 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)
+      });
+    }
+  }, [setTransformation]);
+  const up = useCallback(() => {
+    setIsPanning(false);
+    setGrabbing(false);
+  }, []);
+  useEffect(() => {
+    if (isPanning) {
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    }
+    return () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
     };
-    const cursor = pannable ? ((grabbing || panning) ? "grabbing" : "grab") : "auto";
-    return (React.createElement("svg", { width: width, height: height, onMouseDown: pannable ? down : undefined, onMouseUp: pannable ? stopGrabbing : undefined, onMouseLeave: pannable ? stopGrabbing : undefined, onWheel: zoomable ? adjustZoom : undefined, onContextMenu: e => e.preventDefault(), className: className, style: { cursor } },
-        React.createElement("g", { transform: transform(activeTransformation === null || activeTransformation === void 0 ? void 0 : activeTransformation.matrix) }, activeTransformation && children)));
+  }, [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 { 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 ? "grabbing" : "grab" : "auto";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width,
+      height,
+      onMouseDown: pannable ? down : void 0,
+      onMouseUp: pannable ? stopGrabbing : void 0,
+      onMouseLeave: pannable ? stopGrabbing : void 0,
+      onWheel: zoomable ? adjustZoom : void 0,
+      onContextMenu: (e) => e.preventDefault(),
+      style: { ...style, cursor },
+      ...otherProps,
+      children: /* @__PURE__ */ jsx("g", { transform: transform(transformation?.matrix), children: transformation && children })
+    }
+  );
 };
+var SvgViewport_default = SvgViewport;
 
-export { SvgViewport as default };
+// src/index.ts
+var index_default = SvgViewport_default;
+export {
+  index_default as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omer-x/svg-viewport",
-  "version": "0.3.1",
+  "version": "2.0.0",
   "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
   "keywords": [
     "react",
@@ -23,9 +23,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "dist/"
-  ],
   "author": {
     "name": "Omer Mecitoglu",
     "email": "omer.mecitoglu@gmail.com",
@@ -33,28 +30,35 @@
   },
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "scripts": {
-    "check-unused-exports": "ts-unused-exports tsconfig.json --excludePathsFromReport='src/index'",
-    "prebuild": "npm run check-unused-exports && tsc",
-    "postbuild": "rimraf dist/build",
-    "build": "rollup --config"
+    "lint": "eslint --flag unstable_native_nodejs_ts_config",
+    "lint:fix": "eslint --fix --flag unstable_native_nodejs_ts_config",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest --coverage",
+    "dev": "tsup --watch",
+    "build": "tsup"
   },
-  "dependencies": {
-    "react": "^18.2.0"
+  "peerDependencies": {
+    "react": "^19"
   },
   "devDependencies": {
-    "@omer-x/eslint-config": "^1.0.5",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.2.55",
-    "eslint": "^8.56.0",
-    "rollup": "^4.12.0",
-    "rollup-plugin-banner2": "^1.2.2",
-    "rollup-plugin-dts": "^6.1.0",
-    "ts-unused-exports": "^10.0.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
+    "@omer-x/eslint-config": "^2.2.6",
+    "@types/react": "^19.2.10",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint": "^9.39.2",
+    "semantic-release": "^25.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   }
 }