@deepnoid/canvas 0.1.24 → 0.1.25
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/hooks/usePanZoom.js +36 -28
- package/package.json +1 -1
package/dist/hooks/usePanZoom.js
CHANGED
|
@@ -8,6 +8,7 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
|
|
|
8
8
|
const MAX_ZOOM = 4;
|
|
9
9
|
const MIN_ZOOM = 0.5;
|
|
10
10
|
const { width, height } = useResizeObserver({ ref: canvasRef });
|
|
11
|
+
console.log('> width', width, ', height :', height);
|
|
11
12
|
const [initZoom, setInitZoom] = useState(0);
|
|
12
13
|
const [zoom, setZoom] = useState(0);
|
|
13
14
|
const [zoomX, setZoomX] = useState(0);
|
|
@@ -54,7 +55,9 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
|
|
|
54
55
|
setZoomX(zoomPoint.x);
|
|
55
56
|
setZoomY(zoomPoint.y);
|
|
56
57
|
};
|
|
58
|
+
console.log('. imageOnloadCount ', imageOnloadCount);
|
|
57
59
|
const initCanvas = () => {
|
|
60
|
+
console.log('> initCanvas !!!!!!!!! imageRef?.current : ', imageRef?.current);
|
|
58
61
|
if (imageRef?.current) {
|
|
59
62
|
const canvasEl = resolutionCanvas(canvasRef.current);
|
|
60
63
|
if (canvasEl)
|
|
@@ -62,34 +65,6 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
|
|
|
62
65
|
setImageOnloadCount((prev) => prev + 1);
|
|
63
66
|
}
|
|
64
67
|
};
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
const image = imageRef?.current;
|
|
67
|
-
if (image) {
|
|
68
|
-
if (resetOnImageChange) {
|
|
69
|
-
const canvasEl = resolutionCanvas(canvasRef.current);
|
|
70
|
-
if (canvasEl)
|
|
71
|
-
init(canvasEl, image);
|
|
72
|
-
}
|
|
73
|
-
setImageOnloadCount((prev) => prev + 1);
|
|
74
|
-
}
|
|
75
|
-
}, [imageRef?.current, resetOnImageChange]);
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
if (!imageRef?.current)
|
|
78
|
-
return;
|
|
79
|
-
const canvasEl = resolutionCanvas(canvasRef.current);
|
|
80
|
-
if (canvasEl && !resetOnImageChange) {
|
|
81
|
-
init(canvasEl, imageRef.current);
|
|
82
|
-
setImageOnloadCount((prev) => prev + 1);
|
|
83
|
-
}
|
|
84
|
-
}, [width, height, resetOnImageChange]);
|
|
85
|
-
useEffect(() => {
|
|
86
|
-
const redraw = () => {
|
|
87
|
-
if (canvasRef.current && imageRef?.current) {
|
|
88
|
-
drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), imageRef.current, true);
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
redraw();
|
|
92
|
-
}, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount, canvasRef, imageRef]);
|
|
93
68
|
const handleWheel = (event) => {
|
|
94
69
|
if (!panZoomable || !canvasRef.current || !imageRef?.current)
|
|
95
70
|
return;
|
|
@@ -148,6 +123,39 @@ export const usePanZoom = ({ canvasRef, imageRef, panZoomable = false, resetOnIm
|
|
|
148
123
|
setStatus(MouseStatus.STOP);
|
|
149
124
|
event.preventDefault();
|
|
150
125
|
};
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
const redraw = () => {
|
|
128
|
+
if (canvasRef.current && imageRef?.current) {
|
|
129
|
+
drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), imageRef.current, true);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
redraw();
|
|
133
|
+
}, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount, canvasRef, imageRef]);
|
|
134
|
+
useEffect(() => {
|
|
135
|
+
if (!imageRef?.current || !canvasRef?.current || !width || !height) {
|
|
136
|
+
console.log(888888888888888888888);
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
console.log(11111111111111111111111111111);
|
|
140
|
+
if (resetOnImageChange) {
|
|
141
|
+
const canvasEl = resolutionCanvas(canvasRef.current);
|
|
142
|
+
if (canvasEl)
|
|
143
|
+
init(canvasEl, imageRef.current);
|
|
144
|
+
}
|
|
145
|
+
setImageOnloadCount((prev) => prev + 1);
|
|
146
|
+
}, [imageRef?.current]);
|
|
147
|
+
useEffect(() => {
|
|
148
|
+
if (!imageRef?.current || !canvasRef?.current || !width || !height) {
|
|
149
|
+
console.log(99999999999999999999999);
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
const canvasEl = resolutionCanvas(canvasRef.current);
|
|
153
|
+
if (canvasEl && !resetOnImageChange) {
|
|
154
|
+
console.log(333333333333333333333333333333);
|
|
155
|
+
init(canvasEl, imageRef.current);
|
|
156
|
+
}
|
|
157
|
+
setImageOnloadCount((prev) => prev + 1);
|
|
158
|
+
}, [width, height]);
|
|
151
159
|
return {
|
|
152
160
|
moveX,
|
|
153
161
|
moveY,
|