@omer-x/svg-viewport 0.2.0 → 0.3.1

package/dist/index.d.ts

@@ -1,16 +1,6 @@
 import React, { Dispatch, SetStateAction, ReactNode } from 'react';
 
-type Point = {
-  x: number,
-  y: number,
-};
-
-declare function focusTo(matrix: DOMMatrix, { x, y }: Point, width: number, height: number, zoom: number) {
-  return matrix.translate(
-    ((width / 2) / zoom) - x - (matrix.m41 / zoom),
-    ((height / 2) / zoom) - y - (matrix.m42 / zoom),
-  );
-}
+type FocusPoint = "center" | "top-left";
 
 type ViewportTransform = {
   zoom: number,
@@ -28,9 +18,10 @@ type SvgViewportProps = {
     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, type ViewportTransform, SvgViewport as default, focusTo };
+export { SvgViewport as default };

package/dist/index.js

@@ -21,6 +21,15 @@ function adjustWithZoom(matrix, scale, svgElement, eX, eY) {
     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) {
@@ -29,7 +38,7 @@ function usePolyfillState(state, dispatch) {
     return [polyfill, setPolyfill];
 }
 
-const SvgViewport = ({ width, height, pannable = false, zoomable = false, minZoom = 0.5, maxZoom = 2, panning = false, setPanning, transformation = null, setTransformation, className, children, }) => {
+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);
@@ -42,7 +51,7 @@ const SvgViewport = ({ width, height, pannable = false, zoomable = false, minZoo
             return;
         activeSetTransformation({
             zoom: 1,
-            matrix: focusTo(new DOMMatrix(), { x: 0, y: 0 }, width, height, 1),
+            matrix: getFocusedMatrix(initialFocusPoint, width, height),
         });
     }, [setTransformation]);
     // panning
@@ -98,4 +107,4 @@ const SvgViewport = ({ width, height, pannable = false, zoomable = false, minZoo
         React.createElement("g", { transform: transform(activeTransformation === null || activeTransformation === void 0 ? void 0 : activeTransformation.matrix) }, activeTransformation && children)));
 };
 
-export { SvgViewport as default, focusTo };
+export { SvgViewport as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omer-x/svg-viewport",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
   "keywords": [
     "react",
@@ -36,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": {

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

@@ -1,21 +0,0 @@
-import React, { type Dispatch, type ReactNode, type SetStateAction } from "react";
-import { focusTo } from "~/core/matrix";
-import type { ViewportTransform } from "~/types/viewport";
-export type { ViewportTransform };
-export { focusTo };
-export type SvgViewportProps = {
-    width: number;
-    height: number;
-    pannable?: boolean;
-    zoomable?: boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    panning?: boolean;
-    setPanning?: Dispatch<SetStateAction<boolean>>;
-    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,4 +0,0 @@
-import type { Point } from "~/types/point";
-export declare function transform(matrix?: DOMMatrix): string | undefined;
-export declare function focusTo(matrix: DOMMatrix, { x, y }: Point, width: number, height: number, zoom: number): DOMMatrix;
-export declare function adjustWithZoom(matrix: DOMMatrix, scale: number, svgElement: SVGSVGElement, eX: number, eY: number): DOMMatrix;

package/dist/build/hooks/polyfill-state.d.ts

@@ -1,2 +0,0 @@
-import { type Dispatch } from "react";
-export declare function usePolyfillState<T>(state: T, dispatch?: Dispatch<React.SetStateAction<T>>): [T, Dispatch<React.SetStateAction<T>>];

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;
-};