@omer-x/svg-viewport 2.0.1 → 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.
- package/dist/index.cjs +4 -10
- package/dist/index.js +4 -10
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -77,7 +77,6 @@ var SvgViewport = ({
|
|
|
77
77
|
const isControlled = externalTransformation !== void 0;
|
|
78
78
|
const [internalTransformation, setInternalTransformation] = (0, import_react.useState)(null);
|
|
79
79
|
const pointer = (0, import_react.useRef)({ x: 0, y: 0 });
|
|
80
|
-
const [grabbing, setGrabbing] = (0, import_react.useState)(false);
|
|
81
80
|
const [isPanning, setIsPanning] = (0, import_react.useState)(false);
|
|
82
81
|
const transformation = isControlled ? externalTransformation : internalTransformation;
|
|
83
82
|
const transformationRef = (0, import_react.useRef)(transformation);
|
|
@@ -98,14 +97,10 @@ var SvgViewport = ({
|
|
|
98
97
|
}
|
|
99
98
|
onTransformationChange?.(value);
|
|
100
99
|
}, [isControlled, onTransformationChange]);
|
|
101
|
-
const stopGrabbing = () => {
|
|
102
|
-
setGrabbing(false);
|
|
103
|
-
};
|
|
104
100
|
const down = (e) => {
|
|
105
101
|
if (e.button !== 0) return;
|
|
106
102
|
pointer.current = { x: e.clientX, y: e.clientY };
|
|
107
103
|
setIsPanning(true);
|
|
108
|
-
setGrabbing(true);
|
|
109
104
|
};
|
|
110
105
|
const move = (0, import_react.useCallback)((e) => {
|
|
111
106
|
const currentTrans = transformationRef.current;
|
|
@@ -121,7 +116,6 @@ var SvgViewport = ({
|
|
|
121
116
|
}, [setTransformation]);
|
|
122
117
|
const up = (0, import_react.useCallback)(() => {
|
|
123
118
|
setIsPanning(false);
|
|
124
|
-
setGrabbing(false);
|
|
125
119
|
}, []);
|
|
126
120
|
(0, import_react.useEffect)(() => {
|
|
127
121
|
if (isPanning) {
|
|
@@ -146,18 +140,18 @@ var SvgViewport = ({
|
|
|
146
140
|
});
|
|
147
141
|
}
|
|
148
142
|
};
|
|
149
|
-
const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
|
|
150
143
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
144
|
"svg",
|
|
152
145
|
{
|
|
153
146
|
width,
|
|
154
147
|
height,
|
|
155
148
|
onMouseDown: pannable ? down : void 0,
|
|
156
|
-
onMouseUp: pannable ? stopGrabbing : void 0,
|
|
157
|
-
onMouseLeave: pannable ? stopGrabbing : void 0,
|
|
158
149
|
onWheel: zoomable ? adjustZoom : void 0,
|
|
159
150
|
onContextMenu: (e) => e.preventDefault(),
|
|
160
|
-
style: {
|
|
151
|
+
style: {
|
|
152
|
+
...style,
|
|
153
|
+
cursor: pannable ? isPanning ? "grabbing" : "grab" : "auto"
|
|
154
|
+
},
|
|
161
155
|
...otherProps,
|
|
162
156
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: transform(transformation?.matrix), children: transformation && children })
|
|
163
157
|
}
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,6 @@ var SvgViewport = ({
|
|
|
52
52
|
const isControlled = externalTransformation !== void 0;
|
|
53
53
|
const [internalTransformation, setInternalTransformation] = useState(null);
|
|
54
54
|
const pointer = useRef({ x: 0, y: 0 });
|
|
55
|
-
const [grabbing, setGrabbing] = useState(false);
|
|
56
55
|
const [isPanning, setIsPanning] = useState(false);
|
|
57
56
|
const transformation = isControlled ? externalTransformation : internalTransformation;
|
|
58
57
|
const transformationRef = useRef(transformation);
|
|
@@ -73,14 +72,10 @@ var SvgViewport = ({
|
|
|
73
72
|
}
|
|
74
73
|
onTransformationChange?.(value);
|
|
75
74
|
}, [isControlled, onTransformationChange]);
|
|
76
|
-
const stopGrabbing = () => {
|
|
77
|
-
setGrabbing(false);
|
|
78
|
-
};
|
|
79
75
|
const down = (e) => {
|
|
80
76
|
if (e.button !== 0) return;
|
|
81
77
|
pointer.current = { x: e.clientX, y: e.clientY };
|
|
82
78
|
setIsPanning(true);
|
|
83
|
-
setGrabbing(true);
|
|
84
79
|
};
|
|
85
80
|
const move = useCallback((e) => {
|
|
86
81
|
const currentTrans = transformationRef.current;
|
|
@@ -96,7 +91,6 @@ var SvgViewport = ({
|
|
|
96
91
|
}, [setTransformation]);
|
|
97
92
|
const up = useCallback(() => {
|
|
98
93
|
setIsPanning(false);
|
|
99
|
-
setGrabbing(false);
|
|
100
94
|
}, []);
|
|
101
95
|
useEffect(() => {
|
|
102
96
|
if (isPanning) {
|
|
@@ -121,18 +115,18 @@ var SvgViewport = ({
|
|
|
121
115
|
});
|
|
122
116
|
}
|
|
123
117
|
};
|
|
124
|
-
const cursor = pannable ? grabbing ? "grabbing" : "grab" : "auto";
|
|
125
118
|
return /* @__PURE__ */ jsx(
|
|
126
119
|
"svg",
|
|
127
120
|
{
|
|
128
121
|
width,
|
|
129
122
|
height,
|
|
130
123
|
onMouseDown: pannable ? down : void 0,
|
|
131
|
-
onMouseUp: pannable ? stopGrabbing : void 0,
|
|
132
|
-
onMouseLeave: pannable ? stopGrabbing : void 0,
|
|
133
124
|
onWheel: zoomable ? adjustZoom : void 0,
|
|
134
125
|
onContextMenu: (e) => e.preventDefault(),
|
|
135
|
-
style: {
|
|
126
|
+
style: {
|
|
127
|
+
...style,
|
|
128
|
+
cursor: pannable ? isPanning ? "grabbing" : "grab" : "auto"
|
|
129
|
+
},
|
|
136
130
|
...otherProps,
|
|
137
131
|
children: /* @__PURE__ */ jsx("g", { transform: transform(transformation?.matrix), children: transformation && children })
|
|
138
132
|
}
|