zimme-zoom 0.1.3 → 0.1.4

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 (6) hide show
  1. package/README.md +7 -0
  2. package/dist/index.esm.js +59 -6
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +59 -6
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  A lightweight React photo viewer with zoom, navigation, blurred background, and SVG overlay support.
4
4
 
5
+ ## Prerequisites
6
+
7
+ - Node.js >= 14.0.0
8
+ - React >= 16.8.0
9
+ - React DOM >= 16.8.0
10
+ - Yarn >= 1.22.0 (or npm)
11
+
5
12
  ## Installation
6
13
 
7
14
  ```bash
package/dist/index.esm.js CHANGED
@@ -217,14 +217,21 @@ var PhotoViewer = function (_a) {
217
217
  var _d = useState(0), rotationCount = _d[0], setRotationCount = _d[1];
218
218
  var _e = useState(false), isHovered = _e[0], setIsHovered = _e[1];
219
219
  var _f = useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
220
+ var _g = useState(0), panX = _g[0], setPanX = _g[1];
221
+ var _h = useState(0), panY = _h[0], setPanY = _h[1];
222
+ var _j = useState(false), isDragging = _j[0], setIsDragging = _j[1];
223
+ var _k = useState({ x: 0, y: 0 }), dragStart = _k[0], setDragStart = _k[1];
220
224
  var containerRef = useRef(null);
221
225
  var imageRef = useRef(null);
222
- var _g = useState(selectedImage), currentSelectedImage = _g[0], setCurrentSelectedImage = _g[1];
226
+ var imageContainerRef = useRef(null);
227
+ var _l = useState(selectedImage), currentSelectedImage = _l[0], setCurrentSelectedImage = _l[1];
223
228
  useEffect(function () {
224
229
  setCurrentSelectedImage(selectedImage);
225
230
  setZoom(1);
226
231
  setRotationCount(0);
227
232
  setShowOverlay(false);
233
+ setPanX(0);
234
+ setPanY(0);
228
235
  }, [selectedImage]);
229
236
  var handleNext = useCallback(function () {
230
237
  var currentImageIndex = images.findIndex(function (img) { return img.id === (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.id); });
@@ -235,6 +242,8 @@ var PhotoViewer = function (_a) {
235
242
  setZoom(1);
236
243
  setRotationCount(0);
237
244
  setShowOverlay(false);
245
+ setPanX(0);
246
+ setPanY(0);
238
247
  onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(nextImage);
239
248
  }
240
249
  }, [images, currentSelectedImage, onImageChange]);
@@ -247,12 +256,19 @@ var PhotoViewer = function (_a) {
247
256
  setZoom(1);
248
257
  setRotationCount(0);
249
258
  setShowOverlay(false);
259
+ setPanX(0);
260
+ setPanY(0);
250
261
  onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(prevImage);
251
262
  }
252
263
  }, [images, currentSelectedImage, onImageChange]);
253
264
  var handleZoom = useCallback(function (newZoom) {
254
265
  var clampedZoom = Math.min(Math.max(newZoom, minZoom), maxZoom);
255
266
  setZoom(clampedZoom);
267
+ // Reset pan when zooming back to 1
268
+ if (clampedZoom === 1) {
269
+ setPanX(0);
270
+ setPanY(0);
271
+ }
256
272
  }, [maxZoom, minZoom]);
257
273
  var handleRotate = useCallback(function (direction) {
258
274
  if (direction === void 0) { direction = 'right'; }
@@ -264,6 +280,8 @@ var PhotoViewer = function (_a) {
264
280
  if (allowReset) {
265
281
  setZoom(1);
266
282
  setRotationCount(0);
283
+ setPanX(0);
284
+ setPanY(0);
267
285
  }
268
286
  }, [allowReset]);
269
287
  var handleDoubleClick = useCallback(function () {
@@ -315,6 +333,38 @@ var PhotoViewer = function (_a) {
315
333
  onClose();
316
334
  }
317
335
  }, [clickOutsideToExit, onClose]);
336
+ var handleMouseDown = useCallback(function (e) {
337
+ // Only allow panning when zoomed in, and only on left mouse button
338
+ if (zoom > 1 && e.button === 0) {
339
+ e.preventDefault();
340
+ setIsDragging(true);
341
+ setDragStart({ x: e.clientX - panX, y: e.clientY - panY });
342
+ }
343
+ }, [zoom, panX, panY]);
344
+ var handleMouseMove = useCallback(function (e) {
345
+ if (isDragging && zoom > 1) {
346
+ e.preventDefault();
347
+ var newPanX = e.clientX - dragStart.x;
348
+ var newPanY = e.clientY - dragStart.y;
349
+ setPanX(newPanX);
350
+ setPanY(newPanY);
351
+ }
352
+ }, [isDragging, zoom, dragStart]);
353
+ var handleMouseUp = useCallback(function () {
354
+ setIsDragging(false);
355
+ }, []);
356
+ useEffect(function () {
357
+ if (isDragging) {
358
+ var handleGlobalMouseMove_1 = function (e) { return handleMouseMove(e); };
359
+ var handleGlobalMouseUp_1 = function () { return handleMouseUp(); };
360
+ window.addEventListener('mousemove', handleGlobalMouseMove_1);
361
+ window.addEventListener('mouseup', handleGlobalMouseUp_1);
362
+ return function () {
363
+ window.removeEventListener('mousemove', handleGlobalMouseMove_1);
364
+ window.removeEventListener('mouseup', handleGlobalMouseUp_1);
365
+ };
366
+ }
367
+ }, [isDragging, handleMouseMove, handleMouseUp]);
318
368
  useEffect(function () {
319
369
  var container = containerRef.current;
320
370
  if (!container)
@@ -345,26 +395,29 @@ var PhotoViewer = function (_a) {
345
395
  zIndex: 1000,
346
396
  }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
347
397
  React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, onToggleOverlay: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) ? function () { return setShowOverlay(!showOverlay); } : undefined, showOverlay: showOverlay, showControls: isHovered }),
348
- React.createElement("div", { style: {
398
+ React.createElement("div", { ref: imageContainerRef, style: {
349
399
  position: 'relative',
350
400
  width: '100%',
351
401
  height: '100%',
352
402
  display: 'flex',
353
403
  alignItems: 'center',
354
404
  justifyContent: 'center',
355
- } },
405
+ overflow: 'hidden',
406
+ cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
407
+ }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp },
356
408
  React.createElement("div", { style: {
357
409
  position: 'relative',
358
- transform: "scale(".concat(zoom, ") rotateZ(").concat(rotationCount * 90, "deg)"),
410
+ transform: "translate(".concat(panX, "px, ").concat(panY, "px) rotateZ(").concat(rotationCount * 90, "deg) scale(").concat(zoom, ")"),
359
411
  transformOrigin: 'center',
360
- transition: 'transform 0.2s ease',
412
+ transition: isDragging ? 'none' : 'transform 0.2s ease',
361
413
  display: 'inline-block',
362
414
  } },
363
- React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
415
+ React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, draggable: false, style: {
364
416
  maxWidth: '80vw',
365
417
  maxHeight: '80vh',
366
418
  objectFit: 'contain',
367
419
  display: 'block',
420
+ userSelect: 'none',
368
421
  } }),
369
422
  showOverlay && (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) && (React.createElement(ImageOverlay, { overlay: currentSelectedImage.svgOverlay, position: currentSelectedImage.overlayPosition, size: currentSelectedImage.overlaySize }))))));
370
423
  };
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -219,14 +219,21 @@ var PhotoViewer = function (_a) {
219
219
  var _d = React.useState(0), rotationCount = _d[0], setRotationCount = _d[1];
220
220
  var _e = React.useState(false), isHovered = _e[0], setIsHovered = _e[1];
221
221
  var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
222
+ var _g = React.useState(0), panX = _g[0], setPanX = _g[1];
223
+ var _h = React.useState(0), panY = _h[0], setPanY = _h[1];
224
+ var _j = React.useState(false), isDragging = _j[0], setIsDragging = _j[1];
225
+ var _k = React.useState({ x: 0, y: 0 }), dragStart = _k[0], setDragStart = _k[1];
222
226
  var containerRef = React.useRef(null);
223
227
  var imageRef = React.useRef(null);
224
- var _g = React.useState(selectedImage), currentSelectedImage = _g[0], setCurrentSelectedImage = _g[1];
228
+ var imageContainerRef = React.useRef(null);
229
+ var _l = React.useState(selectedImage), currentSelectedImage = _l[0], setCurrentSelectedImage = _l[1];
225
230
  React.useEffect(function () {
226
231
  setCurrentSelectedImage(selectedImage);
227
232
  setZoom(1);
228
233
  setRotationCount(0);
229
234
  setShowOverlay(false);
235
+ setPanX(0);
236
+ setPanY(0);
230
237
  }, [selectedImage]);
231
238
  var handleNext = React.useCallback(function () {
232
239
  var currentImageIndex = images.findIndex(function (img) { return img.id === (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.id); });
@@ -237,6 +244,8 @@ var PhotoViewer = function (_a) {
237
244
  setZoom(1);
238
245
  setRotationCount(0);
239
246
  setShowOverlay(false);
247
+ setPanX(0);
248
+ setPanY(0);
240
249
  onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(nextImage);
241
250
  }
242
251
  }, [images, currentSelectedImage, onImageChange]);
@@ -249,12 +258,19 @@ var PhotoViewer = function (_a) {
249
258
  setZoom(1);
250
259
  setRotationCount(0);
251
260
  setShowOverlay(false);
261
+ setPanX(0);
262
+ setPanY(0);
252
263
  onImageChange === null || onImageChange === void 0 ? void 0 : onImageChange(prevImage);
253
264
  }
254
265
  }, [images, currentSelectedImage, onImageChange]);
255
266
  var handleZoom = React.useCallback(function (newZoom) {
256
267
  var clampedZoom = Math.min(Math.max(newZoom, minZoom), maxZoom);
257
268
  setZoom(clampedZoom);
269
+ // Reset pan when zooming back to 1
270
+ if (clampedZoom === 1) {
271
+ setPanX(0);
272
+ setPanY(0);
273
+ }
258
274
  }, [maxZoom, minZoom]);
259
275
  var handleRotate = React.useCallback(function (direction) {
260
276
  if (direction === void 0) { direction = 'right'; }
@@ -266,6 +282,8 @@ var PhotoViewer = function (_a) {
266
282
  if (allowReset) {
267
283
  setZoom(1);
268
284
  setRotationCount(0);
285
+ setPanX(0);
286
+ setPanY(0);
269
287
  }
270
288
  }, [allowReset]);
271
289
  var handleDoubleClick = React.useCallback(function () {
@@ -317,6 +335,38 @@ var PhotoViewer = function (_a) {
317
335
  onClose();
318
336
  }
319
337
  }, [clickOutsideToExit, onClose]);
338
+ var handleMouseDown = React.useCallback(function (e) {
339
+ // Only allow panning when zoomed in, and only on left mouse button
340
+ if (zoom > 1 && e.button === 0) {
341
+ e.preventDefault();
342
+ setIsDragging(true);
343
+ setDragStart({ x: e.clientX - panX, y: e.clientY - panY });
344
+ }
345
+ }, [zoom, panX, panY]);
346
+ var handleMouseMove = React.useCallback(function (e) {
347
+ if (isDragging && zoom > 1) {
348
+ e.preventDefault();
349
+ var newPanX = e.clientX - dragStart.x;
350
+ var newPanY = e.clientY - dragStart.y;
351
+ setPanX(newPanX);
352
+ setPanY(newPanY);
353
+ }
354
+ }, [isDragging, zoom, dragStart]);
355
+ var handleMouseUp = React.useCallback(function () {
356
+ setIsDragging(false);
357
+ }, []);
358
+ React.useEffect(function () {
359
+ if (isDragging) {
360
+ var handleGlobalMouseMove_1 = function (e) { return handleMouseMove(e); };
361
+ var handleGlobalMouseUp_1 = function () { return handleMouseUp(); };
362
+ window.addEventListener('mousemove', handleGlobalMouseMove_1);
363
+ window.addEventListener('mouseup', handleGlobalMouseUp_1);
364
+ return function () {
365
+ window.removeEventListener('mousemove', handleGlobalMouseMove_1);
366
+ window.removeEventListener('mouseup', handleGlobalMouseUp_1);
367
+ };
368
+ }
369
+ }, [isDragging, handleMouseMove, handleMouseUp]);
320
370
  React.useEffect(function () {
321
371
  var container = containerRef.current;
322
372
  if (!container)
@@ -347,26 +397,29 @@ var PhotoViewer = function (_a) {
347
397
  zIndex: 1000,
348
398
  }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
349
399
  React.createElement(Navigation, { title: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.title) || 'Photo Viewer', onClose: onClose, onNext: images.length > 1 ? handleNext : undefined, onPrevious: images.length > 1 ? handlePrevious : undefined, onZoomIn: allowZoom ? function () { return handleZoom(zoom + zoomStep); } : undefined, onZoomOut: allowZoom ? function () { return handleZoom(zoom - zoomStep); } : undefined, onRotate: allowRotate ? handleRotate : undefined, onReset: zoom !== 1 || rotationCount !== 0 ? handleReset : undefined, onToggleOverlay: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) ? function () { return setShowOverlay(!showOverlay); } : undefined, showOverlay: showOverlay, showControls: isHovered }),
350
- React.createElement("div", { style: {
400
+ React.createElement("div", { ref: imageContainerRef, style: {
351
401
  position: 'relative',
352
402
  width: '100%',
353
403
  height: '100%',
354
404
  display: 'flex',
355
405
  alignItems: 'center',
356
406
  justifyContent: 'center',
357
- } },
407
+ overflow: 'hidden',
408
+ cursor: zoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
409
+ }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp },
358
410
  React.createElement("div", { style: {
359
411
  position: 'relative',
360
- transform: "scale(".concat(zoom, ") rotateZ(").concat(rotationCount * 90, "deg)"),
412
+ transform: "translate(".concat(panX, "px, ").concat(panY, "px) rotateZ(").concat(rotationCount * 90, "deg) scale(").concat(zoom, ")"),
361
413
  transformOrigin: 'center',
362
- transition: 'transform 0.2s ease',
414
+ transition: isDragging ? 'none' : 'transform 0.2s ease',
363
415
  display: 'inline-block',
364
416
  } },
365
- React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, style: {
417
+ React.createElement("img", { ref: imageRef, src: currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.src, alt: (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.alt) || '', onDoubleClick: handleDoubleClick, draggable: false, style: {
366
418
  maxWidth: '80vw',
367
419
  maxHeight: '80vh',
368
420
  objectFit: 'contain',
369
421
  display: 'block',
422
+ userSelect: 'none',
370
423
  } }),
371
424
  showOverlay && (currentSelectedImage === null || currentSelectedImage === void 0 ? void 0 : currentSelectedImage.svgOverlay) && (React.createElement(ImageOverlay, { overlay: currentSelectedImage.svgOverlay, position: currentSelectedImage.overlayPosition, size: currentSelectedImage.overlaySize }))))));
372
425
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zimme-zoom",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "A lightweight React photo viewer with zoom, navigation, blurred background, and SVG overlay support",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",