@omer-x/svg-viewport 0.1.0

package/.eslintignore

@@ -0,0 +1 @@
+rollup.config.js

package/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.json"]
+  },
+  "extends": [
+    "@omer-x/eslint-config",
+    "@omer-x/eslint-config/typescript"
+  ],
+  "rules": {
+  }
+}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,20 @@
+name: Publish Package to npm
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      # - run: npm test
+      - run: npm run build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/dist/build/components/SvgViewport.d.ts

@@ -0,0 +1,18 @@
+import React, { type Dispatch, type ReactNode, type SetStateAction } from "react";
+import type { ViewportTransform } from "~/types/viewport";
+export type SvgViewportProps = {
+    width: number;
+    height: number;
+    pannable: boolean;
+    zoomable: boolean;
+    minZoom: number;
+    maxZoom: number;
+    panning: boolean;
+    setPanning: (status: boolean) => void;
+    transformation: ViewportTransform | null;
+    setTransformation: Dispatch<SetStateAction<ViewportTransform | null>>;
+    className?: string;
+    children: ReactNode;
+};
+declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, className, children, }: SvgViewportProps) => React.JSX.Element;
+export default SvgViewport;

package/dist/build/core/matrix.d.ts

@@ -0,0 +1,2 @@
+export declare function transform({ a, b, c, d, e, f }: DOMMatrix): string;
+export declare function adjustWithZoom(matrix: DOMMatrix, scale: number, svgElement: SVGSVGElement, eX: number, eY: number): DOMMatrix;

package/dist/build/types/point.d.ts

@@ -0,0 +1,4 @@
+export type Point = {
+    x: number;
+    y: number;
+};

package/dist/build/types/viewport.d.ts

@@ -0,0 +1,4 @@
+export type ViewportTransform = {
+    zoom: number;
+    matrix: DOMMatrix;
+};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+
+type ViewportTransform = {
+  zoom: number,
+  matrix: DOMMatrix,
+};
+
+type SvgViewportProps = {
+    width: number;
+    height: number;
+    pannable: boolean;
+    zoomable: boolean;
+    minZoom: number;
+    maxZoom: number;
+    panning: boolean;
+    setPanning: (status: boolean) => void;
+    transformation: ViewportTransform | null;
+    setTransformation: Dispatch<SetStateAction<ViewportTransform | null>>;
+    className?: string;
+    children: ReactNode;
+};
+declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, className, children, }: SvgViewportProps) => React.JSX.Element;
+
+export { type SvgViewportProps, SvgViewport as default };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");function t({a:e,b:t,c:n,d:o,e:r,f:a}){return`matrix(${e}, ${t}, ${n}, ${o}, ${r}, ${a})`}function n(e,t,n,o,r){const a=n.getBoundingClientRect(),i=new DOMPoint(o-a.left,r-a.top).matrixTransform(e.inverse()),s=(new DOMMatrix).translate(i.x,i.y).scale(t).translate(-i.x,-i.y);return e.multiply(s)}module.exports=({width:o,height:r,pannable:a,zoomable:i,minZoom:s,maxZoom:c,panning:m,setPanning:u,transformation:l,setTransformation:d,className:v,children:x})=>{const[g,b]=e.useState(!1),f=e.useRef({x:0,y:0}),p=()=>{b(!1)},h=e.useCallback((e=>{if(m&&l){const t=(e.clientX-f.current.x)/l.zoom,n=(e.clientY-f.current.y)/l.zoom;f.current={x:e.clientX,y:e.clientY},d((e=>e?Object.assign(Object.assign({},e),{matrix:e.matrix.translate(t,n)}):e))}}),[m,l]),y=e.useCallback((()=>{u(!1)}),[]);e.useEffect((()=>(m&&(document.addEventListener("mousemove",h),document.addEventListener("mouseup",y)),()=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",y)})),[m]);const z=a?g||m?"grabbing":"grab":"auto";return e.createElement("svg",{width:o,height:r,onMouseDown:a?e=>{0===e.button&&(f.current={x:e.clientX,y:e.clientY},u(!0)),b(!0)}:void 0,onMouseUp:a?p:void 0,onMouseLeave:a?p:void 0,onWheel:i?e=>{const t=e.deltaY<0?1.25:.8,o=e.currentTarget,r=e.clientX,a=e.clientY;d((e=>e&&e.zoom*t>s&&e.zoom*t<c?Object.assign(Object.assign({},e),{zoom:e.zoom*t,matrix:n(e.matrix,t,o,r,a)}):e))}:void 0,onContextMenu:e=>e.preventDefault(),className:v,style:{cursor:z}},e.createElement("g",{transform:l?t(l.matrix):void 0},l&&x))};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../build/core/matrix.js","../build/components/SvgViewport.js"],"sourcesContent":["export function transform({ a, b, c, d, e, f }) {\n    return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;\n}\nexport function adjustWithZoom(matrix, scale, svgElement, eX, eY) {\n    const rect = svgElement.getBoundingClientRect();\n    const focusPoint = new DOMPoint(eX - rect.left, eY - rect.top);\n    const relativePoint = focusPoint.matrixTransform(matrix.inverse());\n    const modifier = new DOMMatrix()\n        .translate(relativePoint.x, relativePoint.y)\n        .scale(scale)\n        .translate(-relativePoint.x, -relativePoint.y);\n    return matrix.multiply(modifier);\n}\n//# sourceMappingURL=matrix.js.map","import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { adjustWithZoom, transform } from \"../core/matrix\";\nconst SvgViewport = ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, className, children, }) => {\n    const [grabbing, setGrabbing] = useState(false);\n    const pointer = useRef({ x: 0, y: 0 });\n    const stopGrabbing = () => {\n        setGrabbing(false);\n    };\n    // panning\n    const down = (e) => {\n        if (e.button === 0) {\n            pointer.current = {\n                x: e.clientX,\n                y: e.clientY,\n            };\n            setPanning(true);\n        }\n        setGrabbing(true);\n    };\n    const move = useCallback((e) => {\n        if (panning && transformation) {\n            const x = (e.clientX - pointer.current.x) / transformation.zoom;\n            const y = (e.clientY - pointer.current.y) / transformation.zoom;\n            pointer.current = {\n                x: e.clientX,\n                y: e.clientY,\n            };\n            setTransformation(t => (t ? Object.assign(Object.assign({}, t), { matrix: t.matrix.translate(x, y) }) : t));\n        }\n    }, [panning, transformation]);\n    const up = useCallback(() => {\n        setPanning(false);\n    }, []);\n    useEffect(() => {\n        if (panning) {\n            document.addEventListener(\"mousemove\", move);\n            document.addEventListener(\"mouseup\", up);\n        }\n        return () => {\n            document.removeEventListener(\"mousemove\", move);\n            document.removeEventListener(\"mouseup\", up);\n        };\n    }, [panning]);\n    // zooming\n    const adjustZoom = (e) => {\n        const scale = e.deltaY < 0 ? 1.25 : 0.8;\n        const eventTarget = e.currentTarget;\n        const eventClientX = e.clientX;\n        const eventClientY = e.clientY;\n        setTransformation(t => {\n            if (t && t.zoom * scale > minZoom && t.zoom * scale < maxZoom) {\n                return Object.assign(Object.assign({}, t), { zoom: t.zoom * scale, matrix: adjustWithZoom(t.matrix, scale, eventTarget, eventClientX, eventClientY) });\n            }\n            return t;\n        });\n    };\n    const cursor = pannable ? ((grabbing || panning) ? \"grabbing\" : \"grab\") : \"auto\";\n    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 } },\n        React.createElement(\"g\", { transform: transformation ? transform(transformation.matrix) : undefined }, transformation && children)));\n};\nexport default SvgViewport;\n//# sourceMappingURL=SvgViewport.js.map"],"names":["transform","a","b","c","d","e","f","adjustWithZoom","matrix","scale","svgElement","eX","eY","rect","getBoundingClientRect","relativePoint","DOMPoint","left","top","matrixTransform","inverse","modifier","DOMMatrix","translate","x","y","multiply","width","height","pannable","zoomable","minZoom","maxZoom","panning","setPanning","transformation","setTransformation","className","children","grabbing","setGrabbing","useState","pointer","useRef","stopGrabbing","move","useCallback","clientX","current","zoom","clientY","t","Object","assign","up","useEffect","document","addEventListener","removeEventListener","cursor","React","createElement","onMouseDown","button","undefined","onMouseUp","onMouseLeave","onWheel","deltaY","eventTarget","currentTarget","eventClientX","eventClientY","onContextMenu","preventDefault","style"],"mappings":"oCAAO,SAASA,GAAUC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,EAACC,EAAEA,IACvC,MAAO,UAAUL,MAAMC,MAAMC,MAAMC,MAAMC,MAAMC,IACnD,CACO,SAASC,EAAeC,EAAQC,EAAOC,EAAYC,EAAIC,GAC1D,MAAMC,EAAOH,EAAWI,wBAElBC,EADa,IAAIC,SAASL,EAAKE,EAAKI,KAAML,EAAKC,EAAKK,KACzBC,gBAAgBX,EAAOY,WAClDC,GAAW,IAAIC,WAChBC,UAAUR,EAAcS,EAAGT,EAAcU,GACzChB,MAAMA,GACNc,WAAWR,EAAcS,GAAIT,EAAcU,GAChD,OAAOjB,EAAOkB,SAASL,EAC3B,gBCVoB,EAAGM,QAAOC,SAAQC,WAAUC,WAAUC,UAASC,UAASC,UAASC,aAAYC,iBAAgBC,oBAAmBC,YAAWC,eAC3I,MAAOC,EAAUC,GAAeC,EAAQA,UAAC,GACnCC,EAAUC,EAAAA,OAAO,CAAEnB,EAAG,EAAGC,EAAG,IAC5BmB,EAAe,KACjBJ,GAAY,EAAM,EAahBK,EAAOC,eAAazC,IACtB,GAAI4B,GAAWE,EAAgB,CAC3B,MAAMX,GAAKnB,EAAE0C,QAAUL,EAAQM,QAAQxB,GAAKW,EAAec,KACrDxB,GAAKpB,EAAE6C,QAAUR,EAAQM,QAAQvB,GAAKU,EAAec,KAC3DP,EAAQM,QAAU,CACdxB,EAAGnB,EAAE0C,QACLtB,EAAGpB,EAAE6C,SAETd,GAAkBe,GAAMA,EAAIC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEF,GAAI,CAAE3C,OAAQ2C,EAAE3C,OAAOe,UAAUC,EAAGC,KAAQ0B,GAC3G,IACF,CAAClB,EAASE,IACPmB,EAAKR,EAAAA,aAAY,KACnBZ,GAAW,EAAM,GAClB,IACHqB,EAAAA,WAAU,KACFtB,IACAuB,SAASC,iBAAiB,YAAaZ,GACvCW,SAASC,iBAAiB,UAAWH,IAElC,KACHE,SAASE,oBAAoB,YAAab,GAC1CW,SAASE,oBAAoB,UAAWJ,EAAG,IAEhD,CAACrB,IAEJ,MAYM0B,EAAS9B,EAAaU,GAAYN,EAAW,WAAa,OAAU,OAC1E,OAAQ2B,EAAMC,cAAc,MAAO,CAAElC,MAAOA,EAAOC,OAAQA,EAAQkC,YAAajC,EAhDlExB,IACO,IAAbA,EAAE0D,SACFrB,EAAQM,QAAU,CACdxB,EAAGnB,EAAE0C,QACLtB,EAAGpB,EAAE6C,SAEThB,GAAW,IAEfM,GAAY,EAAK,OAwC6EwB,EAAWC,UAAWpC,EAAWe,OAAeoB,EAAWE,aAAcrC,EAAWe,OAAeoB,EAAWG,QAASrC,EAbrMzB,IAChB,MAAMI,EAAQJ,EAAE+D,OAAS,EAAI,KAAO,GAC9BC,EAAchE,EAAEiE,cAChBC,EAAelE,EAAE0C,QACjByB,EAAenE,EAAE6C,QACvBd,GAAkBe,GACVA,GAAKA,EAAEF,KAAOxC,EAAQsB,GAAWoB,EAAEF,KAAOxC,EAAQuB,EAC3CoB,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEF,GAAI,CAAEF,KAAME,EAAEF,KAAOxC,EAAOD,OAAQD,EAAe4C,EAAE3C,OAAQC,EAAO4D,EAAaE,EAAcC,KAEnIrB,GACT,OAG2Oa,EAAWS,cAAepE,GAAKA,EAAEqE,iBAAkBrC,UAAWA,EAAWsC,MAAO,CAAEhB,WAC/TC,EAAMC,cAAc,IAAK,CAAE7D,UAAWmC,EAAiBnC,EAAUmC,EAAe3B,aAAUwD,GAAa7B,GAAkBG,GAAY"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@omer-x/svg-viewport",
+  "version": "0.1.0",
+  "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
+  "keywords": [
+    "react",
+    "svg",
+    "component",
+    "zooming",
+    "panning",
+    "viewport",
+    "scalable-vector-graphics"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/omermecitoglu/svg-viewport.git"
+  },
+  "bugs": {
+    "url": "https://github.com/omermecitoglu/svg-viewport/issues"
+  },
+  "homepage": "https://github.com/omermecitoglu/svg-viewport#readme",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Omer Mecitoglu",
+    "email": "omer.mecitoglu@gmail.com",
+    "url": "https://omermecitoglu.github.io"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "check-unused-exports": "ts-unused-exports tsconfig.json --excludePathsFromReport='SvgViewport'",
+    "prebuild": "npm run check-unused-exports && tsc",
+    "build": "rollup --config"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@omer-x/eslint-config": "^1.0.5",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.2.55",
+    "eslint": "^8.56.0",
+    "rollup": "^4.12.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "ts-unused-exports": "^10.0.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,41 @@
+import path from "path";
+import alias from "@rollup/plugin-alias";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+
+const config = [
+  {
+    input: "build/components/SvgViewport.js",
+    output: {
+      file: "dist/index.js",
+      format: "cjs",
+      sourcemap: true,
+    },
+    external: ["react"],
+    plugins: [
+      typescript(),
+      alias({
+        entries: [
+          { find: /^~/, replacement: path.resolve(process.cwd() + "/src") },
+        ],
+      }),
+      terser(),
+    ],
+  }, {
+    input: "build/components/SvgViewport.d.ts",
+    output: {
+      file: "dist/index.d.ts",
+      format: "es",
+    },
+    plugins: [
+      dts(),
+      alias({
+        entries: [
+          { find: /^~/, replacement: path.resolve(process.cwd() + "/src") },
+        ],
+      }),
+    ],
+  },
+];
+export default config;

package/src/components/SvgViewport.tsx

@@ -0,0 +1,122 @@
+import React, { type Dispatch, type ReactNode, type SetStateAction, useCallback, useEffect, useRef, useState } from "react";
+import type { Point } from "~/types/point";
+import type { ViewportTransform } from "~/types/viewport";
+import { adjustWithZoom, transform } from "../core/matrix";
+
+export type SvgViewportProps = {
+  width: number,
+  height: number,
+  pannable: boolean,
+  zoomable: boolean,
+  minZoom: number,
+  maxZoom: number,
+  panning: boolean,
+  setPanning: (status: boolean) => void,
+  transformation: ViewportTransform | null,
+  setTransformation: Dispatch<SetStateAction<ViewportTransform | null>>,
+  className?: string,
+  children: ReactNode,
+};
+
+const SvgViewport = ({
+  width,
+  height,
+  pannable,
+  zoomable,
+  minZoom,
+  maxZoom,
+  panning,
+  setPanning,
+  transformation,
+  setTransformation,
+  className,
+  children,
+}: SvgViewportProps) => {
+  const [grabbing, setGrabbing] = useState(false);
+  const pointer = useRef<Point>({ x: 0, y: 0 });
+
+  const stopGrabbing = () => {
+    setGrabbing(false);
+  };
+
+  // panning
+
+  const down = (e: React.MouseEvent<SVGSVGElement>) => {
+    if (e.button === 0) {
+      pointer.current = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+      setPanning(true);
+    }
+    setGrabbing(true);
+  };
+
+  const move = useCallback((e: MouseEvent) => {
+    if (panning && transformation) {
+      const x = (e.clientX - pointer.current.x) / transformation.zoom;
+      const y = (e.clientY - pointer.current.y) / transformation.zoom;
+      pointer.current = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+      setTransformation(t => (t ? { ...t, matrix: t.matrix.translate(x, y) } : t));
+    }
+  }, [panning, transformation]);
+
+  const up = useCallback(() => {
+    setPanning(false);
+  }, []);
+
+  useEffect(() => {
+    if (panning) {
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    }
+    return () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+  }, [panning]);
+
+  // zooming
+
+  const adjustZoom = (e: React.WheelEvent<SVGSVGElement>) => {
+    const scale = e.deltaY < 0 ? 1.25 : 0.8;
+    const eventTarget = e.currentTarget;
+    const eventClientX = e.clientX;
+    const eventClientY = e.clientY;
+    setTransformation(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 cursor = pannable ? ((grabbing || panning) ? "grabbing" : "grab") : "auto";
+
+  return (
+    <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 }}
+    >
+      <g transform={transformation ? transform(transformation.matrix) : undefined}>
+        {transformation && children}
+      </g>
+    </svg>
+  );
+};
+
+export default SvgViewport;

package/src/core/matrix.ts

@@ -0,0 +1,14 @@
+export function transform({ a, b, c, d, e, f }: DOMMatrix) {
+  return `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+}
+
+export function adjustWithZoom(matrix: DOMMatrix, scale: number, svgElement: SVGSVGElement, eX: number, eY: number) {
+  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);
+}

package/src/types/point.ts

@@ -0,0 +1,4 @@
+export type Point = {
+  x: number,
+  y: number,
+};

package/src/types/viewport.ts

@@ -0,0 +1,4 @@
+export type ViewportTransform = {
+  zoom: number,
+  matrix: DOMMatrix,
+};

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "outDir": "build",
+    "target": "es6",
+    "lib": ["dom", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "sourceMap": true,
+    "jsx": "react",
+    "incremental": false,
+    "plugins": [
+    ],
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules",
+  ],
+}