@omer-x/svg-viewport 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +15 -19
  2. package/dist/index.js +15 -19
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -75,35 +75,32 @@ var SvgViewport = ({
75
75
  ...otherProps
76
76
  }) => {
77
77
  const isControlled = externalTransformation !== void 0;
78
- const [internalTransformation, setInternalTransformation] = (0, import_react.useState)(() => {
79
- if (isControlled) return null;
80
- return {
81
- zoom: 1,
82
- matrix: getFocusedMatrix(initialFocusPoint, width, height)
83
- };
84
- });
78
+ const [internalTransformation, setInternalTransformation] = (0, import_react.useState)(null);
79
+ const pointer = (0, import_react.useRef)({ x: 0, y: 0 });
80
+ const [isPanning, setIsPanning] = (0, import_react.useState)(false);
85
81
  const transformation = isControlled ? externalTransformation : internalTransformation;
86
82
  const transformationRef = (0, import_react.useRef)(transformation);
87
83
  (0, import_react.useEffect)(() => {
88
84
  transformationRef.current = transformation;
89
85
  }, [transformation]);
90
- const pointer = (0, import_react.useRef)({ x: 0, y: 0 });
91
- const [grabbing, setGrabbing] = (0, import_react.useState)(false);
92
- const [isPanning, setIsPanning] = (0, import_react.useState)(false);
86
+ (0, import_react.useEffect)(() => {
87
+ if (!isControlled && !internalTransformation) {
88
+ setInternalTransformation({
89
+ zoom: 1,
90
+ matrix: getFocusedMatrix(initialFocusPoint, width, height)
91
+ });
92
+ }
93
+ }, []);
93
94
  const setTransformation = (0, import_react.useCallback)((value) => {
94
95
  if (!isControlled) {
95
96
  setInternalTransformation(value);
96
97
  }
97
98
  onTransformationChange?.(value);
98
99
  }, [isControlled, onTransformationChange]);
99
- const stopGrabbing = () => {
100
- setGrabbing(false);
101
- };
102
100
  const down = (e) => {
103
101
  if (e.button !== 0) return;
104
102
  pointer.current = { x: e.clientX, y: e.clientY };
105
103
  setIsPanning(true);
106
- setGrabbing(true);
107
104
  };
108
105
  const move = (0, import_react.useCallback)((e) => {
109
106
  const currentTrans = transformationRef.current;
@@ -119,7 +116,6 @@ var SvgViewport = ({
119
116
  }, [setTransformation]);
120
117
  const up = (0, import_react.useCallback)(() => {
121
118
  setIsPanning(false);
122
- setGrabbing(false);
123
119
  }, []);
124
120
  (0, import_react.useEffect)(() => {
125
121
  if (isPanning) {
@@ -144,18 +140,18 @@ var SvgViewport = ({
144
140
  });
145
141
  }
146
142
  };
147
- const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
148
143
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
144
  "svg",
150
145
  {
151
146
  width,
152
147
  height,
153
148
  onMouseDown: pannable ? down : void 0,
154
- onMouseUp: pannable ? stopGrabbing : void 0,
155
- onMouseLeave: pannable ? stopGrabbing : void 0,
156
149
  onWheel: zoomable ? adjustZoom : void 0,
157
150
  onContextMenu: (e) => e.preventDefault(),
158
- style: { ...style, cursor },
151
+ style: {
152
+ ...style,
153
+ cursor: pannable ? isPanning ? "grabbing" : "grab" : "auto"
154
+ },
159
155
  ...otherProps,
160
156
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: transform(transformation?.matrix), children: transformation && children })
161
157
  }
package/dist/index.js CHANGED
@@ -50,35 +50,32 @@ var SvgViewport = ({
50
50
  ...otherProps
51
51
  }) => {
52
52
  const isControlled = externalTransformation !== void 0;
53
- const [internalTransformation, setInternalTransformation] = useState(() => {
54
- if (isControlled) return null;
55
- return {
56
- zoom: 1,
57
- matrix: getFocusedMatrix(initialFocusPoint, width, height)
58
- };
59
- });
53
+ const [internalTransformation, setInternalTransformation] = useState(null);
54
+ const pointer = useRef({ x: 0, y: 0 });
55
+ const [isPanning, setIsPanning] = useState(false);
60
56
  const transformation = isControlled ? externalTransformation : internalTransformation;
61
57
  const transformationRef = useRef(transformation);
62
58
  useEffect(() => {
63
59
  transformationRef.current = transformation;
64
60
  }, [transformation]);
65
- const pointer = useRef({ x: 0, y: 0 });
66
- const [grabbing, setGrabbing] = useState(false);
67
- const [isPanning, setIsPanning] = useState(false);
61
+ useEffect(() => {
62
+ if (!isControlled && !internalTransformation) {
63
+ setInternalTransformation({
64
+ zoom: 1,
65
+ matrix: getFocusedMatrix(initialFocusPoint, width, height)
66
+ });
67
+ }
68
+ }, []);
68
69
  const setTransformation = useCallback((value) => {
69
70
  if (!isControlled) {
70
71
  setInternalTransformation(value);
71
72
  }
72
73
  onTransformationChange?.(value);
73
74
  }, [isControlled, onTransformationChange]);
74
- const stopGrabbing = () => {
75
- setGrabbing(false);
76
- };
77
75
  const down = (e) => {
78
76
  if (e.button !== 0) return;
79
77
  pointer.current = { x: e.clientX, y: e.clientY };
80
78
  setIsPanning(true);
81
- setGrabbing(true);
82
79
  };
83
80
  const move = useCallback((e) => {
84
81
  const currentTrans = transformationRef.current;
@@ -94,7 +91,6 @@ var SvgViewport = ({
94
91
  }, [setTransformation]);
95
92
  const up = useCallback(() => {
96
93
  setIsPanning(false);
97
- setGrabbing(false);
98
94
  }, []);
99
95
  useEffect(() => {
100
96
  if (isPanning) {
@@ -119,18 +115,18 @@ var SvgViewport = ({
119
115
  });
120
116
  }
121
117
  };
122
- const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
123
118
  return /* @__PURE__ */ jsx(
124
119
  "svg",
125
120
  {
126
121
  width,
127
122
  height,
128
123
  onMouseDown: pannable ? down : void 0,
129
- onMouseUp: pannable ? stopGrabbing : void 0,
130
- onMouseLeave: pannable ? stopGrabbing : void 0,
131
124
  onWheel: zoomable ? adjustZoom : void 0,
132
125
  onContextMenu: (e) => e.preventDefault(),
133
- style: { ...style, cursor },
126
+ style: {
127
+ ...style,
128
+ cursor: pannable ? isPanning ? "grabbing" : "grab" : "auto"
129
+ },
134
130
  ...otherProps,
135
131
  children: /* @__PURE__ */ jsx("g", { transform: transform(transformation?.matrix), children: transformation && children })
136
132
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omer-x/svg-viewport",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "Provides a simple React component for displaying SVG content with zooming and panning capabilities",
5
5
  "keywords": [
6
6
  "react",