@omer-x/svg-viewport 0.1.0 → 0.3.1

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import React, { Dispatch, SetStateAction, ReactNode } from 'react';
 
+type FocusPoint = "center" | "top-left";
+
 type ViewportTransform = {
   zoom: number,
   matrix: DOMMatrix,
@@ -8,17 +10,18 @@ type ViewportTransform = {
 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>>;
+    pannable?: boolean;
+    zoomable?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    panning?: boolean;
+    setPanning?: Dispatch<SetStateAction<boolean>>;
+    transformation?: ViewportTransform | null;
+    setTransformation?: Dispatch<SetStateAction<ViewportTransform | null>>;
+    initialFocusPoint?: FocusPoint;
     className?: string;
     children: ReactNode;
 };
-declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, className, children, }: SvgViewportProps) => React.JSX.Element;
+declare const SvgViewport: ({ width, height, pannable, zoomable, minZoom, maxZoom, panning, setPanning, transformation, setTransformation, initialFocusPoint, className, children, }: SvgViewportProps) => React.JSX.Element;
 
-export { type SvgViewportProps, SvgViewport as default };
+export { SvgViewport as default };

package/dist/index.js

@@ -1,2 +1,110 @@
-"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
+"use client";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+function transform(matrix) {
+    if (!matrix)
+        return undefined;
+    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);
+}
+
+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];
+}
+
+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);
+    };
+    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 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)));
+};
+
+export { SvgViewport as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omer-x/svg-viewport",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
   "keywords": [
     "react",
@@ -23,6 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist/"
+  ],
   "author": {
     "name": "Omer Mecitoglu",
     "email": "omer.mecitoglu@gmail.com",
@@ -33,8 +36,9 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "check-unused-exports": "ts-unused-exports tsconfig.json --excludePathsFromReport='SvgViewport'",
+    "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"
   },
   "dependencies": {
@@ -43,11 +47,11 @@
   "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-banner2": "^1.2.2",
     "rollup-plugin-dts": "^6.1.0",
     "ts-unused-exports": "^10.0.1",
     "tslib": "^2.6.2",

package/.eslintignore

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

package/.eslintrc

@@ -1,12 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

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

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

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

package/dist/index.js.map

@@ -1 +0,0 @@
-{"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/rollup.config.js

@@ -1,41 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/types/viewport.ts

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

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "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",
-  ],
-}