react-native-gesture-image-viewer 1.4.0 → 1.4.1
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/lib/module/GestureViewerManager.js +1 -33
- package/lib/module/GestureViewerManager.js.map +1 -1
- package/lib/module/useGestureViewerController.js +55 -4
- package/lib/module/useGestureViewerController.js.map +1 -1
- package/lib/typescript/src/GestureViewerManager.d.ts +3 -34
- package/lib/typescript/src/GestureViewerManager.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +143 -14
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/useGestureViewerController.d.ts +54 -11
- package/lib/typescript/src/useGestureViewerController.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/GestureViewerManager.ts +4 -36
- package/src/index.tsx +1 -1
- package/src/types.ts +153 -14
- package/src/useGestureViewerController.ts +58 -7
|
@@ -28,7 +28,7 @@ class GestureViewerManager {
|
|
|
28
28
|
getState() {
|
|
29
29
|
return {
|
|
30
30
|
currentIndex: this.currentIndex,
|
|
31
|
-
|
|
31
|
+
totalCount: this.dataLength
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
setWidth(width) {
|
|
@@ -63,21 +63,6 @@ class GestureViewerManager {
|
|
|
63
63
|
setRotation(rotation) {
|
|
64
64
|
this.rotation = rotation;
|
|
65
65
|
}
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* @param angle - The angle to rotate.
|
|
69
|
-
* @default 90 (0, 90, 180, 270, 360)
|
|
70
|
-
* @param clockwise - The direction to rotate.
|
|
71
|
-
* @default true (clockwise)
|
|
72
|
-
*
|
|
73
|
-
* @example
|
|
74
|
-
* rotate(0) // reset rotation
|
|
75
|
-
* rotate(number, false) // rotate {number} degrees counter-clockwise
|
|
76
|
-
* rotate(90) // rotate 90 degrees clockwise
|
|
77
|
-
* rotate(180) // rotate 180 degrees clockwise
|
|
78
|
-
* rotate(270) // rotate 270 degrees clockwise
|
|
79
|
-
* rotate(360) // rotate 360 degrees clockwise
|
|
80
|
-
*/
|
|
81
66
|
rotate = (angle = 90, clockwise = true) => {
|
|
82
67
|
const MAX_ANGLE = 360;
|
|
83
68
|
if (!this.rotation || angle < 0 || angle > MAX_ANGLE || angle !== 0 && this.rotation.value % angle !== 0 && angle !== 360) {
|
|
@@ -95,12 +80,6 @@ class GestureViewerManager {
|
|
|
95
80
|
const nextAngle = clockwise ? this.rotation.value + angle : this.rotation.value - angle;
|
|
96
81
|
this.rotation.value = withTiming(nextAngle);
|
|
97
82
|
};
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* @param multiplier - The multiplier to zoom in.
|
|
101
|
-
* @range 0.01 - 1
|
|
102
|
-
* @default 0.25
|
|
103
|
-
*/
|
|
104
83
|
zoomIn = (multiplier = 0.25) => {
|
|
105
84
|
if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
|
|
106
85
|
return;
|
|
@@ -121,12 +100,6 @@ class GestureViewerManager {
|
|
|
121
100
|
this.translateX.value = withTiming(translateX);
|
|
122
101
|
this.translateY.value = withTiming(translateY);
|
|
123
102
|
};
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* @param multiplier - The multiplier to zoom out.
|
|
127
|
-
* @range 0.01 - 1
|
|
128
|
-
* @default 0.25
|
|
129
|
-
*/
|
|
130
103
|
zoomOut = (multiplier = 0.25) => {
|
|
131
104
|
if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
|
|
132
105
|
return;
|
|
@@ -152,11 +125,6 @@ class GestureViewerManager {
|
|
|
152
125
|
this.translateX.value = withTiming(translateX);
|
|
153
126
|
this.translateY.value = withTiming(translateY);
|
|
154
127
|
};
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* @param scale - The scale to reset to.
|
|
158
|
-
* @default 1
|
|
159
|
-
*/
|
|
160
128
|
resetZoom = (scale = 1) => {
|
|
161
129
|
if (!this.scale || !this.translateX || !this.translateY || scale <= 0 || scale > this.maxZoomScale) {
|
|
162
130
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["withTiming","createBoundsConstraint","GestureViewerManager","currentIndex","dataLength","width","height","scale","translateX","translateY","maxZoomScale","listRef","enableSwipeGesture","listeners","Set","rotation","notifyListeners","state","getState","forEach","listener","subscribe","add","delete","setWidth","setHeight","setListRef","ref","setDataLength","length","setEnableSwipeGesture","enabled","setCurrentIndex","index","setZoomSharedValues","notifyStateChange","setRotation","rotate","angle","clockwise","MAX_ANGLE","value","nextAngle","Math","floor","zoomIn","multiplier","nextScale","min","zoomOut","max","resetZoom","goToIndex","scrollToIndex","animated","scrollTo","x","goToPrevious","goToNext","cleanUp","clear"],"sourceRoot":"../../src","sources":["GestureViewerManager.ts"],"mappings":";;AAAA,SAA2BA,UAAU,QAAQ,yBAAyB;
|
|
1
|
+
{"version":3,"names":["withTiming","createBoundsConstraint","GestureViewerManager","currentIndex","dataLength","width","height","scale","translateX","translateY","maxZoomScale","listRef","enableSwipeGesture","listeners","Set","rotation","notifyListeners","state","getState","forEach","listener","subscribe","add","delete","totalCount","setWidth","setHeight","setListRef","ref","setDataLength","length","setEnableSwipeGesture","enabled","setCurrentIndex","index","setZoomSharedValues","notifyStateChange","setRotation","rotate","angle","clockwise","MAX_ANGLE","value","nextAngle","Math","floor","zoomIn","multiplier","nextScale","min","zoomOut","max","resetZoom","goToIndex","scrollToIndex","animated","scrollTo","x","goToPrevious","goToNext","cleanUp","clear"],"sourceRoot":"../../src","sources":["GestureViewerManager.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,10 +2,62 @@
|
|
|
2
2
|
|
|
3
3
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
import { registry } from "./GestureViewerRegistry.js";
|
|
5
|
+
/**
|
|
6
|
+
* Hook to control the gesture viewer programmatically.
|
|
7
|
+
*
|
|
8
|
+
* @param id - Viewer instance identifier (default: 'default')
|
|
9
|
+
* @returns Methods and state for controlling the viewer
|
|
10
|
+
*
|
|
11
|
+
* **Available methods:**
|
|
12
|
+
* - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
|
|
13
|
+
* - `goToPrevious()` - Navigate to previous item
|
|
14
|
+
* - `goToNext()` - Navigate to next item
|
|
15
|
+
* - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
|
|
16
|
+
* - `zoomOut(multiplier?: number)` - Zoom out (default: 0.25)
|
|
17
|
+
* - `resetZoom(scale?: number)` - Reset zoom level (default: 1.0)
|
|
18
|
+
* - `rotate(angle?: 0|90|180|270|360, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
|
|
19
|
+
*
|
|
20
|
+
* **Available state:**
|
|
21
|
+
* - `currentIndex: number` - Current active index (read-only)
|
|
22
|
+
* - `totalCount: number` - Total number of items (read-only)
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* const { goToIndex, goToNext, goToPrevious, zoomIn, zoomOut, resetZoom, rotate, currentIndex, totalCount } = useGestureViewerController();
|
|
27
|
+
*
|
|
28
|
+
* // Navigate to specific index
|
|
29
|
+
* goToIndex(2);
|
|
30
|
+
*
|
|
31
|
+
* // Go to next image
|
|
32
|
+
* goToNext();
|
|
33
|
+
*
|
|
34
|
+
* // Zoom in by 25%
|
|
35
|
+
* zoomIn();
|
|
36
|
+
*
|
|
37
|
+
* // Zoom out by 50%
|
|
38
|
+
* zoomOut(0.5);
|
|
39
|
+
*
|
|
40
|
+
* // Reset to original size
|
|
41
|
+
* resetZoom();
|
|
42
|
+
*
|
|
43
|
+
* // Rotate 90 degrees clockwise
|
|
44
|
+
* rotate();
|
|
45
|
+
*
|
|
46
|
+
* // Rotate 180 degrees
|
|
47
|
+
* rotate(180);
|
|
48
|
+
*
|
|
49
|
+
* // Check current state
|
|
50
|
+
* console.log(`Image ${currentIndex + 1} of ${totalCount}`);
|
|
51
|
+
*
|
|
52
|
+
* // Check navigation availability
|
|
53
|
+
* const canGoNext = currentIndex < totalCount - 1;
|
|
54
|
+
* const canGoPrevious = currentIndex > 0;
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
5
57
|
export const useGestureViewerController = (id = 'default') => {
|
|
6
58
|
const [state, setState] = useState({
|
|
7
59
|
currentIndex: 0,
|
|
8
|
-
|
|
60
|
+
totalCount: 0
|
|
9
61
|
});
|
|
10
62
|
const [manager, setManager] = useState(null);
|
|
11
63
|
const unsubscribeRef = useRef(null);
|
|
@@ -21,7 +73,7 @@ export const useGestureViewerController = (id = 'default') => {
|
|
|
21
73
|
}
|
|
22
74
|
setState({
|
|
23
75
|
currentIndex: 0,
|
|
24
|
-
|
|
76
|
+
totalCount: 0
|
|
25
77
|
});
|
|
26
78
|
};
|
|
27
79
|
const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
|
|
@@ -39,8 +91,7 @@ export const useGestureViewerController = (id = 'default') => {
|
|
|
39
91
|
zoomOut: manager?.zoomOut || noopFunction,
|
|
40
92
|
resetZoom: manager?.resetZoom || noopFunction,
|
|
41
93
|
rotate: manager?.rotate || noopFunction,
|
|
42
|
-
|
|
43
|
-
totalCount: state.dataLength
|
|
94
|
+
...state
|
|
44
95
|
};
|
|
45
96
|
};
|
|
46
97
|
//# sourceMappingURL=useGestureViewerController.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useGestureViewerController","id","state","setState","currentIndex","
|
|
1
|
+
{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useGestureViewerController","id","state","setState","currentIndex","totalCount","manager","setManager","unsubscribeRef","handleManagerChange","newManager","current","getState","subscribe","unsubscribeFromRegistry","subscribeToManager","noopFunction","goToIndex","goToPrevious","goToNext","zoomIn","zoomOut","resetZoom","rotate"],"sourceRoot":"../../src","sources":["useGestureViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,SAASC,QAAQ,QAAQ,4BAAyB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGA,CAACC,EAAE,GAAG,SAAS,KAA8B;EACrF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA+B;IAC/DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAA8B,IAAI,CAAC;EACzE,MAAMU,cAAc,GAAGX,MAAM,CAAsB,IAAI,CAAC;EAExDF,SAAS,CAAC,MAAM;IACd,MAAMc,mBAAmB,GAAIC,UAAuC,IAAK;MACvEF,cAAc,CAACG,OAAO,GAAG,CAAC;MAC1BH,cAAc,CAACG,OAAO,GAAG,IAAI;MAE7BJ,UAAU,CAACG,UAAU,CAAC;MAEtB,IAAIA,UAAU,EAAE;QACdP,QAAQ,CAACO,UAAU,CAACE,QAAQ,CAAC,CAAC,CAAC;QAC/BJ,cAAc,CAACG,OAAO,GAAGD,UAAU,CAACG,SAAS,CAACV,QAAQ,CAAC;QACvD;MACF;MAEAA,QAAQ,CAAC;QAAEC,YAAY,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAMS,uBAAuB,GAAGf,QAAQ,CAACgB,kBAAkB,CAACd,EAAE,EAAEQ,mBAAmB,CAAC;IAEpF,OAAO,MAAM;MACXK,uBAAuB,CAAC,CAAC;MACzBN,cAAc,CAACG,OAAO,GAAG,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,EAAE,CAAC,CAAC;EAER,MAAMe,YAAY,GAAGpB,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLqB,SAAS,EAAEX,OAAO,EAAEW,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEZ,OAAO,EAAEY,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAEb,OAAO,EAAEa,QAAQ,IAAIH,YAAY;IAC3CI,MAAM,EAAEd,OAAO,EAAEc,MAAM,IAAIJ,YAAY;IACvCK,OAAO,EAAEf,OAAO,EAAEe,OAAO,IAAIL,YAAY;IACzCM,SAAS,EAAEhB,OAAO,EAAEgB,SAAS,IAAIN,YAAY;IAC7CO,MAAM,EAAEjB,OAAO,EAAEiB,MAAM,IAAIP,YAAY;IACvC,GAAGd;EACL,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { type SharedValue } from 'react-native-reanimated';
|
|
2
|
-
|
|
3
|
-
currentIndex: number;
|
|
4
|
-
dataLength: number;
|
|
5
|
-
};
|
|
2
|
+
import type { GestureViewerControllerState } from './types';
|
|
6
3
|
declare class GestureViewerManager {
|
|
7
4
|
private currentIndex;
|
|
8
5
|
private dataLength;
|
|
@@ -17,10 +14,10 @@ declare class GestureViewerManager {
|
|
|
17
14
|
private listeners;
|
|
18
15
|
private rotation;
|
|
19
16
|
private notifyListeners;
|
|
20
|
-
subscribe(listener: (state:
|
|
17
|
+
subscribe(listener: (state: GestureViewerControllerState) => void): () => void;
|
|
21
18
|
getState(): {
|
|
22
19
|
currentIndex: number;
|
|
23
|
-
|
|
20
|
+
totalCount: number;
|
|
24
21
|
};
|
|
25
22
|
setWidth(width: number): void;
|
|
26
23
|
setHeight(height: number): void;
|
|
@@ -31,37 +28,9 @@ declare class GestureViewerManager {
|
|
|
31
28
|
setZoomSharedValues(scale: SharedValue<number>, translateX: SharedValue<number>, translateY: SharedValue<number>, maxZoomScale: number): void;
|
|
32
29
|
notifyStateChange(): void;
|
|
33
30
|
setRotation(rotation: SharedValue<number>): void;
|
|
34
|
-
/**
|
|
35
|
-
* @param angle - The angle to rotate.
|
|
36
|
-
* @default 90 (0, 90, 180, 270, 360)
|
|
37
|
-
* @param clockwise - The direction to rotate.
|
|
38
|
-
* @default true (clockwise)
|
|
39
|
-
*
|
|
40
|
-
* @example
|
|
41
|
-
* rotate(0) // reset rotation
|
|
42
|
-
* rotate(number, false) // rotate {number} degrees counter-clockwise
|
|
43
|
-
* rotate(90) // rotate 90 degrees clockwise
|
|
44
|
-
* rotate(180) // rotate 180 degrees clockwise
|
|
45
|
-
* rotate(270) // rotate 270 degrees clockwise
|
|
46
|
-
* rotate(360) // rotate 360 degrees clockwise
|
|
47
|
-
*/
|
|
48
31
|
rotate: (angle?: 0 | 90 | 180 | 270 | 360, clockwise?: boolean) => void;
|
|
49
|
-
/**
|
|
50
|
-
* @param multiplier - The multiplier to zoom in.
|
|
51
|
-
* @range 0.01 - 1
|
|
52
|
-
* @default 0.25
|
|
53
|
-
*/
|
|
54
32
|
zoomIn: (multiplier?: number) => void;
|
|
55
|
-
/**
|
|
56
|
-
* @param multiplier - The multiplier to zoom out.
|
|
57
|
-
* @range 0.01 - 1
|
|
58
|
-
* @default 0.25
|
|
59
|
-
*/
|
|
60
33
|
zoomOut: (multiplier?: number) => void;
|
|
61
|
-
/**
|
|
62
|
-
* @param scale - The scale to reset to.
|
|
63
|
-
* @default 1
|
|
64
|
-
*/
|
|
65
34
|
resetZoom: (scale?: number) => void;
|
|
66
35
|
goToIndex: (index: number) => void;
|
|
67
36
|
goToPrevious: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GestureViewerManager.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"GestureViewerManager.d.ts","sourceRoot":"","sources":["../../../src/GestureViewerManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,yBAAyB,CAAC;AACvE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAG5D,cAAM,oBAAoB;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,KAAK,CAAoC;IACjD,OAAO,CAAC,UAAU,CAAoC;IACtD,OAAO,CAAC,UAAU,CAAoC;IACtD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,SAAS,CAA4D;IAC7E,OAAO,CAAC,QAAQ,CAAoC;IAEpD,OAAO,CAAC,eAAe;IAMvB,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI;IAQjE,QAAQ;;;;IAOR,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,SAAS,CAAC,MAAM,EAAE,MAAM;IAIxB,UAAU,CAAC,GAAG,EAAE,GAAG;IAInB,aAAa,CAAC,MAAM,EAAE,MAAM;IAI5B,qBAAqB,CAAC,OAAO,EAAE,OAAO;IAItC,eAAe,CAAC,KAAK,EAAE,MAAM;IAM7B,mBAAmB,CACjB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAC1B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,EAC/B,YAAY,EAAE,MAAM;IAQtB,iBAAiB;IAIjB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC;IAIzC,MAAM,GAAI,QAAO,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAQ,EAAE,mBAAgB,UA2B9D;IAEF,MAAM,GAAI,mBAAiB,UAoBzB;IAEF,OAAO,GAAI,mBAAiB,UA0B1B;IAEF,SAAS,GAAI,cAAS,UAQpB;IAEF,SAAS,GAAI,OAAO,MAAM,UAcxB;IAEF,YAAY,aAIV;IAEF,QAAQ,aAIN;IAEF,OAAO;CAaR;AAED,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { GestureViewer } from './GestureViewer';
|
|
2
|
-
export type { GestureViewerProps } from './types';
|
|
2
|
+
export type { GestureViewerController, GestureViewerProps } from './types';
|
|
3
3
|
export { useGestureViewerController } from './useGestureViewerController';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC"}
|
|
@@ -9,7 +9,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
9
9
|
/**
|
|
10
10
|
* When you want to efficiently manage multiple `GestureViewer` instances, you can use the `id` prop to use multiple `GestureViewer` components.
|
|
11
11
|
* @remark `GestureViewer` automatically removes instances from memory when components are unmounted, so no manual memory management is required.
|
|
12
|
-
* @
|
|
12
|
+
* @defaultValue 'default'
|
|
13
13
|
*/
|
|
14
14
|
id?: string;
|
|
15
15
|
/**
|
|
@@ -18,7 +18,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
18
18
|
data: T[];
|
|
19
19
|
/**
|
|
20
20
|
* The index of the item to display in the `GestureViewer` when the component is mounted.
|
|
21
|
-
* @
|
|
21
|
+
* @defaultValue 0
|
|
22
22
|
*/
|
|
23
23
|
initialIndex?: number;
|
|
24
24
|
/**
|
|
@@ -44,7 +44,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
44
44
|
/**
|
|
45
45
|
* The width of the `GestureViewer`.
|
|
46
46
|
* @remark If you don't set this prop, the width of the `GestureViewer` will be the same as the width of the screen.
|
|
47
|
-
* @
|
|
47
|
+
* @defaultValue screen width
|
|
48
48
|
*/
|
|
49
49
|
width?: number;
|
|
50
50
|
/**
|
|
@@ -57,30 +57,30 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
57
57
|
* **`true`**: Snap mode (`snapToInterval` auto-calculated)
|
|
58
58
|
* - `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values
|
|
59
59
|
* - Use this option when you need item spacing
|
|
60
|
-
* @
|
|
60
|
+
* @defaultValue false
|
|
61
61
|
*
|
|
62
62
|
*/
|
|
63
63
|
useSnap?: boolean;
|
|
64
64
|
/**
|
|
65
65
|
* `dismissThreshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
|
|
66
|
-
* @
|
|
66
|
+
* @defaultValue 80
|
|
67
67
|
*/
|
|
68
68
|
dismissThreshold?: number;
|
|
69
69
|
/**
|
|
70
70
|
* Calls `onDismiss` function when swiping down.
|
|
71
71
|
* @remark Useful for closing modals with downward swipe gestures.
|
|
72
|
-
* @
|
|
72
|
+
* @defaultValue true
|
|
73
73
|
*/
|
|
74
74
|
enableDismissGesture?: boolean;
|
|
75
75
|
/**
|
|
76
76
|
* Controls left/right swipe gestures.
|
|
77
77
|
* @remark When `false`, horizontal gestures are disabled.
|
|
78
|
-
* @
|
|
78
|
+
* @defaultValue true
|
|
79
79
|
*/
|
|
80
80
|
enableSwipeGesture?: boolean;
|
|
81
81
|
/**
|
|
82
82
|
* `resistance` controls the range of vertical movement by applying resistance during vertical gestures.
|
|
83
|
-
* @
|
|
83
|
+
* @defaultValue 2
|
|
84
84
|
*/
|
|
85
85
|
resistance?: number;
|
|
86
86
|
/**
|
|
@@ -99,38 +99,167 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
99
99
|
/**
|
|
100
100
|
* By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
|
|
101
101
|
* @remark When `false`, this animation is disabled.
|
|
102
|
-
* @
|
|
102
|
+
* @defaultValue true
|
|
103
103
|
*/
|
|
104
104
|
animateBackdrop?: boolean;
|
|
105
105
|
/**
|
|
106
106
|
* Only works when zoom is active, allows moving item position when zoomed.
|
|
107
107
|
* @remark When `false`, gesture movement is disabled during zoom.
|
|
108
|
-
* @
|
|
108
|
+
* @defaultValue true
|
|
109
109
|
*/
|
|
110
110
|
enableZoomPanGesture?: boolean;
|
|
111
111
|
/**
|
|
112
112
|
* Controls two-finger pinch gestures.
|
|
113
113
|
* @remark When `false`, two-finger zoom gestures are disabled.
|
|
114
|
-
* @
|
|
114
|
+
* @defaultValue true
|
|
115
115
|
*/
|
|
116
116
|
enableZoomGesture?: boolean;
|
|
117
117
|
/**
|
|
118
118
|
* Controls double-tap zoom gestures.
|
|
119
119
|
* @remark When `false`, double-tap zoom gestures are disabled.
|
|
120
|
-
* @
|
|
120
|
+
* @defaultValue true
|
|
121
121
|
*/
|
|
122
122
|
enableDoubleTapGesture?: boolean;
|
|
123
123
|
/**
|
|
124
124
|
* The maximum zoom scale.
|
|
125
|
-
* @
|
|
125
|
+
* @defaultValue 2
|
|
126
126
|
*/
|
|
127
127
|
maxZoomScale?: number;
|
|
128
128
|
/**
|
|
129
129
|
* The spacing between items in pixels.
|
|
130
130
|
* @remark Only applied when `useSnap` is `true`.
|
|
131
|
-
* @
|
|
131
|
+
* @defaultValue 0
|
|
132
132
|
*/
|
|
133
133
|
itemSpacing?: number;
|
|
134
134
|
}
|
|
135
|
+
/**
|
|
136
|
+
* Supported rotation angles in degrees.
|
|
137
|
+
*/
|
|
138
|
+
export type RotationAngle = 0 | 90 | 180 | 270 | 360;
|
|
139
|
+
/**
|
|
140
|
+
* Controller for managing gesture-based image/content viewer interactions.
|
|
141
|
+
* Provides navigation, zoom, and rotation capabilities with state management.
|
|
142
|
+
*/
|
|
143
|
+
export type GestureViewerController = {
|
|
144
|
+
/**
|
|
145
|
+
* Navigates to the specified index in the viewer.
|
|
146
|
+
* Updates the currentIndex in the controller state.
|
|
147
|
+
*
|
|
148
|
+
* @param index - The target index (must be between 0 and totalCount - 1)
|
|
149
|
+
* @throws Will throw an error if index is out of bounds
|
|
150
|
+
*
|
|
151
|
+
* @example
|
|
152
|
+
* ```typescript
|
|
153
|
+
* controller.goToIndex(0); // Go to first item
|
|
154
|
+
* controller.goToIndex(controller.totalCount - 1); // Go to last item
|
|
155
|
+
* ```
|
|
156
|
+
*/
|
|
157
|
+
goToIndex: (index: number) => void;
|
|
158
|
+
/**
|
|
159
|
+
* Navigates to the previous item in the sequence.
|
|
160
|
+
* If already at the first item, behavior depends on implementation (may wrap or do nothing).
|
|
161
|
+
* Updates currentIndex in the controller state.
|
|
162
|
+
*/
|
|
163
|
+
goToPrevious: () => void;
|
|
164
|
+
/**
|
|
165
|
+
* Navigates to the next item in the sequence.
|
|
166
|
+
* If already at the last item, behavior depends on implementation (may wrap or do nothing).
|
|
167
|
+
* Updates currentIndex in the controller state.
|
|
168
|
+
*/
|
|
169
|
+
goToNext: () => void;
|
|
170
|
+
/**
|
|
171
|
+
* Zooms in by the specified multiplier.
|
|
172
|
+
*
|
|
173
|
+
* @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom in more.
|
|
174
|
+
* @defaultValue 0.25
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```typescript
|
|
178
|
+
* controller.zoomIn(); // Zoom in by 25%
|
|
179
|
+
* controller.zoomIn(0.5); // Zoom in by 50%
|
|
180
|
+
* ```
|
|
181
|
+
*/
|
|
182
|
+
zoomIn: (multiplier?: number) => void;
|
|
183
|
+
/**
|
|
184
|
+
* Zooms out by the specified multiplier.
|
|
185
|
+
*
|
|
186
|
+
* @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom out more.
|
|
187
|
+
* @defaultValue 0.25
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```typescript
|
|
191
|
+
* controller.zoomOut(); // Zoom out by 25%
|
|
192
|
+
* controller.zoomOut(0.1); // Zoom out by 10%
|
|
193
|
+
* ```
|
|
194
|
+
*/
|
|
195
|
+
zoomOut: (multiplier?: number) => void;
|
|
196
|
+
/**
|
|
197
|
+
* Resets the zoom level to the specified scale.
|
|
198
|
+
*
|
|
199
|
+
* @param scale - The scale to reset to (1.0 = original size)
|
|
200
|
+
* @defaultValue 1.0
|
|
201
|
+
*
|
|
202
|
+
* @example
|
|
203
|
+
* ```typescript
|
|
204
|
+
* controller.resetZoom(); // Reset to original size
|
|
205
|
+
* controller.resetZoom(0.5); // Reset to 50% of original size
|
|
206
|
+
* ```
|
|
207
|
+
*/
|
|
208
|
+
resetZoom: (scale?: number) => void;
|
|
209
|
+
/**
|
|
210
|
+
* Rotates the content by the specified angle.
|
|
211
|
+
*
|
|
212
|
+
* @param angle - Rotation angle in degrees. Must be one of: 0, 90, 180, 270, 360
|
|
213
|
+
* @param clockwise - Direction of rotation when angle is not 0 or 360
|
|
214
|
+
* @defaultValue angle: `90`, clockwise: `true`
|
|
215
|
+
*
|
|
216
|
+
* @remarks
|
|
217
|
+
* - Angle 0 or 360 resets rotation regardless of clockwise parameter
|
|
218
|
+
* - The clockwise parameter only affects rotation when angle is 90, 180, or 270
|
|
219
|
+
* - Rotation is cumulative and affects the current orientation
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* ```typescript
|
|
223
|
+
* controller.rotate(); // Rotate 90 degrees clockwise
|
|
224
|
+
* controller.rotate(0); // Reset rotation
|
|
225
|
+
* controller.rotate(90, false); // Rotate 90 degrees counter-clockwise
|
|
226
|
+
* controller.rotate(180); // Rotate 180 degrees (clockwise by default)
|
|
227
|
+
* controller.rotate(270, false); // Rotate 270 degrees counter-clockwise
|
|
228
|
+
* controller.rotate(360); // Reset rotation (same as 0)
|
|
229
|
+
* ```
|
|
230
|
+
*/
|
|
231
|
+
rotate: (angle?: RotationAngle, clockwise?: boolean) => void;
|
|
232
|
+
} & GestureViewerControllerState;
|
|
233
|
+
/**
|
|
234
|
+
* State information for the gesture viewer controller.
|
|
235
|
+
* Contains read-only properties that reflect the current state.
|
|
236
|
+
*/
|
|
237
|
+
export type GestureViewerControllerState = {
|
|
238
|
+
/**
|
|
239
|
+
* The current index of the active item in the viewer.
|
|
240
|
+
*
|
|
241
|
+
* @remarks
|
|
242
|
+
* This value is automatically updated when navigation methods are called.
|
|
243
|
+
*
|
|
244
|
+
* @example
|
|
245
|
+
* ```typescript
|
|
246
|
+
* console.log(`Currently viewing item ${controller.currentIndex + 1} of ${controller.totalCount}`);
|
|
247
|
+
* ```
|
|
248
|
+
*/
|
|
249
|
+
readonly currentIndex: number;
|
|
250
|
+
/**
|
|
251
|
+
* The total number of items available in the viewer.
|
|
252
|
+
*
|
|
253
|
+
* @remarks
|
|
254
|
+
* This value determines the valid range for currentIndex (0 to totalCount - 1).
|
|
255
|
+
*
|
|
256
|
+
* @example
|
|
257
|
+
* ```typescript
|
|
258
|
+
* const hasNext = controller.currentIndex < controller.totalCount - 1;
|
|
259
|
+
* const hasPrevious = controller.currentIndex > 0;
|
|
260
|
+
* ```
|
|
261
|
+
*/
|
|
262
|
+
readonly totalCount: number;
|
|
263
|
+
};
|
|
135
264
|
export {};
|
|
136
265
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC7G,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEvG,MAAM,MAAM,iBAAiB,GAAG,OAAO,UAAU,GAAG,OAAO,UAAU,CAAC;AACtE,MAAM,MAAM,mBAAmB,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAC;AAE5E,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,KAAK,oBAAoB,CAAC,EAAE,IAAI,EAAE,SAAS,iBAAiB,GACxD,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,EAAE,SAAS,mBAAmB,GAC5B,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,UAAU;IACjE;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC3D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE;;OAEG;IACH,aAAa,EAAE,EAAE,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import type { GestureViewerController } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to control the gesture viewer programmatically.
|
|
4
|
+
*
|
|
5
|
+
* @param id - Viewer instance identifier (default: 'default')
|
|
6
|
+
* @returns Methods and state for controlling the viewer
|
|
7
|
+
*
|
|
8
|
+
* **Available methods:**
|
|
9
|
+
* - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
|
|
10
|
+
* - `goToPrevious()` - Navigate to previous item
|
|
11
|
+
* - `goToNext()` - Navigate to next item
|
|
12
|
+
* - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
|
|
13
|
+
* - `zoomOut(multiplier?: number)` - Zoom out (default: 0.25)
|
|
14
|
+
* - `resetZoom(scale?: number)` - Reset zoom level (default: 1.0)
|
|
15
|
+
* - `rotate(angle?: 0|90|180|270|360, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
|
|
16
|
+
*
|
|
17
|
+
* **Available state:**
|
|
18
|
+
* - `currentIndex: number` - Current active index (read-only)
|
|
19
|
+
* - `totalCount: number` - Total number of items (read-only)
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* const { goToIndex, goToNext, goToPrevious, zoomIn, zoomOut, resetZoom, rotate, currentIndex, totalCount } = useGestureViewerController();
|
|
24
|
+
*
|
|
25
|
+
* // Navigate to specific index
|
|
26
|
+
* goToIndex(2);
|
|
27
|
+
*
|
|
28
|
+
* // Go to next image
|
|
29
|
+
* goToNext();
|
|
30
|
+
*
|
|
31
|
+
* // Zoom in by 25%
|
|
32
|
+
* zoomIn();
|
|
33
|
+
*
|
|
34
|
+
* // Zoom out by 50%
|
|
35
|
+
* zoomOut(0.5);
|
|
36
|
+
*
|
|
37
|
+
* // Reset to original size
|
|
38
|
+
* resetZoom();
|
|
39
|
+
*
|
|
40
|
+
* // Rotate 90 degrees clockwise
|
|
41
|
+
* rotate();
|
|
42
|
+
*
|
|
43
|
+
* // Rotate 180 degrees
|
|
44
|
+
* rotate(180);
|
|
45
|
+
*
|
|
46
|
+
* // Check current state
|
|
47
|
+
* console.log(`Image ${currentIndex + 1} of ${totalCount}`);
|
|
48
|
+
*
|
|
49
|
+
* // Check navigation availability
|
|
50
|
+
* const canGoNext = currentIndex < totalCount - 1;
|
|
51
|
+
* const canGoPrevious = currentIndex > 0;
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export declare const useGestureViewerController: (id?: string) => GestureViewerController;
|
|
12
55
|
//# sourceMappingURL=useGestureViewerController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAgC,MAAM,SAAS,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBA6C3D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gesture-image-viewer",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { type SharedValue, withTiming } from 'react-native-reanimated';
|
|
2
|
+
import type { GestureViewerControllerState } from './types';
|
|
2
3
|
import { createBoundsConstraint } from './utils';
|
|
3
4
|
|
|
4
|
-
export type GestureViewerManagerState = {
|
|
5
|
-
currentIndex: number;
|
|
6
|
-
dataLength: number;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
5
|
class GestureViewerManager {
|
|
10
6
|
private currentIndex = 0;
|
|
11
7
|
private dataLength = 0;
|
|
@@ -17,7 +13,7 @@ class GestureViewerManager {
|
|
|
17
13
|
private maxZoomScale = 2;
|
|
18
14
|
private listRef: any | null = null;
|
|
19
15
|
private enableSwipeGesture = true;
|
|
20
|
-
private listeners = new Set<(state:
|
|
16
|
+
private listeners = new Set<(state: GestureViewerControllerState) => void>();
|
|
21
17
|
private rotation: SharedValue<number> | null = null;
|
|
22
18
|
|
|
23
19
|
private notifyListeners() {
|
|
@@ -26,7 +22,7 @@ class GestureViewerManager {
|
|
|
26
22
|
this.listeners.forEach((listener) => listener(state));
|
|
27
23
|
}
|
|
28
24
|
|
|
29
|
-
subscribe(listener: (state:
|
|
25
|
+
subscribe(listener: (state: GestureViewerControllerState) => void) {
|
|
30
26
|
this.listeners.add(listener);
|
|
31
27
|
|
|
32
28
|
return () => {
|
|
@@ -37,7 +33,7 @@ class GestureViewerManager {
|
|
|
37
33
|
getState() {
|
|
38
34
|
return {
|
|
39
35
|
currentIndex: this.currentIndex,
|
|
40
|
-
|
|
36
|
+
totalCount: this.dataLength,
|
|
41
37
|
};
|
|
42
38
|
}
|
|
43
39
|
|
|
@@ -87,20 +83,6 @@ class GestureViewerManager {
|
|
|
87
83
|
this.rotation = rotation;
|
|
88
84
|
}
|
|
89
85
|
|
|
90
|
-
/**
|
|
91
|
-
* @param angle - The angle to rotate.
|
|
92
|
-
* @default 90 (0, 90, 180, 270, 360)
|
|
93
|
-
* @param clockwise - The direction to rotate.
|
|
94
|
-
* @default true (clockwise)
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* rotate(0) // reset rotation
|
|
98
|
-
* rotate(number, false) // rotate {number} degrees counter-clockwise
|
|
99
|
-
* rotate(90) // rotate 90 degrees clockwise
|
|
100
|
-
* rotate(180) // rotate 180 degrees clockwise
|
|
101
|
-
* rotate(270) // rotate 270 degrees clockwise
|
|
102
|
-
* rotate(360) // rotate 360 degrees clockwise
|
|
103
|
-
*/
|
|
104
86
|
rotate = (angle: 0 | 90 | 180 | 270 | 360 = 90, clockwise = true) => {
|
|
105
87
|
const MAX_ANGLE = 360;
|
|
106
88
|
|
|
@@ -130,11 +112,6 @@ class GestureViewerManager {
|
|
|
130
112
|
this.rotation.value = withTiming(nextAngle);
|
|
131
113
|
};
|
|
132
114
|
|
|
133
|
-
/**
|
|
134
|
-
* @param multiplier - The multiplier to zoom in.
|
|
135
|
-
* @range 0.01 - 1
|
|
136
|
-
* @default 0.25
|
|
137
|
-
*/
|
|
138
115
|
zoomIn = (multiplier = 0.25) => {
|
|
139
116
|
if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
|
|
140
117
|
return;
|
|
@@ -157,11 +134,6 @@ class GestureViewerManager {
|
|
|
157
134
|
this.translateY.value = withTiming(translateY);
|
|
158
135
|
};
|
|
159
136
|
|
|
160
|
-
/**
|
|
161
|
-
* @param multiplier - The multiplier to zoom out.
|
|
162
|
-
* @range 0.01 - 1
|
|
163
|
-
* @default 0.25
|
|
164
|
-
*/
|
|
165
137
|
zoomOut = (multiplier = 0.25) => {
|
|
166
138
|
if (!this.scale || !this.translateX || !this.translateY || multiplier < 0.01 || multiplier > 1) {
|
|
167
139
|
return;
|
|
@@ -190,10 +162,6 @@ class GestureViewerManager {
|
|
|
190
162
|
this.translateY.value = withTiming(translateY);
|
|
191
163
|
};
|
|
192
164
|
|
|
193
|
-
/**
|
|
194
|
-
* @param scale - The scale to reset to.
|
|
195
|
-
* @default 1
|
|
196
|
-
*/
|
|
197
165
|
resetZoom = (scale = 1) => {
|
|
198
166
|
if (!this.scale || !this.translateX || !this.translateY || scale <= 0 || scale > this.maxZoomScale) {
|
|
199
167
|
return;
|
package/src/index.tsx
CHANGED
package/src/types.ts
CHANGED
|
@@ -17,7 +17,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
17
17
|
/**
|
|
18
18
|
* When you want to efficiently manage multiple `GestureViewer` instances, you can use the `id` prop to use multiple `GestureViewer` components.
|
|
19
19
|
* @remark `GestureViewer` automatically removes instances from memory when components are unmounted, so no manual memory management is required.
|
|
20
|
-
* @
|
|
20
|
+
* @defaultValue 'default'
|
|
21
21
|
*/
|
|
22
22
|
id?: string;
|
|
23
23
|
/**
|
|
@@ -26,7 +26,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
26
26
|
data: T[];
|
|
27
27
|
/**
|
|
28
28
|
* The index of the item to display in the `GestureViewer` when the component is mounted.
|
|
29
|
-
* @
|
|
29
|
+
* @defaultValue 0
|
|
30
30
|
*/
|
|
31
31
|
initialIndex?: number;
|
|
32
32
|
/**
|
|
@@ -52,7 +52,7 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
52
52
|
/**
|
|
53
53
|
* The width of the `GestureViewer`.
|
|
54
54
|
* @remark If you don't set this prop, the width of the `GestureViewer` will be the same as the width of the screen.
|
|
55
|
-
* @
|
|
55
|
+
* @defaultValue screen width
|
|
56
56
|
*/
|
|
57
57
|
width?: number;
|
|
58
58
|
/**
|
|
@@ -65,13 +65,13 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
65
65
|
* **`true`**: Snap mode (`snapToInterval` auto-calculated)
|
|
66
66
|
* - `snapToInterval` is automatically calculated based on `width` and `itemSpacing` values
|
|
67
67
|
* - Use this option when you need item spacing
|
|
68
|
-
* @
|
|
68
|
+
* @defaultValue false
|
|
69
69
|
*
|
|
70
70
|
*/
|
|
71
71
|
useSnap?: boolean;
|
|
72
72
|
/**
|
|
73
73
|
* `dismissThreshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.
|
|
74
|
-
* @
|
|
74
|
+
* @defaultValue 80
|
|
75
75
|
*/
|
|
76
76
|
dismissThreshold?: number;
|
|
77
77
|
// swipeThreshold?: number;
|
|
@@ -79,18 +79,18 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
79
79
|
/**
|
|
80
80
|
* Calls `onDismiss` function when swiping down.
|
|
81
81
|
* @remark Useful for closing modals with downward swipe gestures.
|
|
82
|
-
* @
|
|
82
|
+
* @defaultValue true
|
|
83
83
|
*/
|
|
84
84
|
enableDismissGesture?: boolean;
|
|
85
85
|
/**
|
|
86
86
|
* Controls left/right swipe gestures.
|
|
87
87
|
* @remark When `false`, horizontal gestures are disabled.
|
|
88
|
-
* @
|
|
88
|
+
* @defaultValue true
|
|
89
89
|
*/
|
|
90
90
|
enableSwipeGesture?: boolean;
|
|
91
91
|
/**
|
|
92
92
|
* `resistance` controls the range of vertical movement by applying resistance during vertical gestures.
|
|
93
|
-
* @
|
|
93
|
+
* @defaultValue 2
|
|
94
94
|
*/
|
|
95
95
|
resistance?: number;
|
|
96
96
|
/**
|
|
@@ -109,36 +109,175 @@ export interface GestureViewerProps<T = any, LC = typeof RNFlatList> {
|
|
|
109
109
|
/**
|
|
110
110
|
* By default, the background `opacity` gradually decreases from 1 to 0 during downward swipe gestures.
|
|
111
111
|
* @remark When `false`, this animation is disabled.
|
|
112
|
-
* @
|
|
112
|
+
* @defaultValue true
|
|
113
113
|
*/
|
|
114
114
|
animateBackdrop?: boolean;
|
|
115
115
|
/**
|
|
116
116
|
* Only works when zoom is active, allows moving item position when zoomed.
|
|
117
117
|
* @remark When `false`, gesture movement is disabled during zoom.
|
|
118
|
-
* @
|
|
118
|
+
* @defaultValue true
|
|
119
119
|
*/
|
|
120
120
|
enableZoomPanGesture?: boolean;
|
|
121
121
|
/**
|
|
122
122
|
* Controls two-finger pinch gestures.
|
|
123
123
|
* @remark When `false`, two-finger zoom gestures are disabled.
|
|
124
|
-
* @
|
|
124
|
+
* @defaultValue true
|
|
125
125
|
*/
|
|
126
126
|
enableZoomGesture?: boolean;
|
|
127
127
|
/**
|
|
128
128
|
* Controls double-tap zoom gestures.
|
|
129
129
|
* @remark When `false`, double-tap zoom gestures are disabled.
|
|
130
|
-
* @
|
|
130
|
+
* @defaultValue true
|
|
131
131
|
*/
|
|
132
132
|
enableDoubleTapGesture?: boolean;
|
|
133
133
|
/**
|
|
134
134
|
* The maximum zoom scale.
|
|
135
|
-
* @
|
|
135
|
+
* @defaultValue 2
|
|
136
136
|
*/
|
|
137
137
|
maxZoomScale?: number;
|
|
138
138
|
/**
|
|
139
139
|
* The spacing between items in pixels.
|
|
140
140
|
* @remark Only applied when `useSnap` is `true`.
|
|
141
|
-
* @
|
|
141
|
+
* @defaultValue 0
|
|
142
142
|
*/
|
|
143
143
|
itemSpacing?: number;
|
|
144
144
|
}
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Supported rotation angles in degrees.
|
|
148
|
+
*/
|
|
149
|
+
export type RotationAngle = 0 | 90 | 180 | 270 | 360;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Controller for managing gesture-based image/content viewer interactions.
|
|
153
|
+
* Provides navigation, zoom, and rotation capabilities with state management.
|
|
154
|
+
*/
|
|
155
|
+
export type GestureViewerController = {
|
|
156
|
+
/**
|
|
157
|
+
* Navigates to the specified index in the viewer.
|
|
158
|
+
* Updates the currentIndex in the controller state.
|
|
159
|
+
*
|
|
160
|
+
* @param index - The target index (must be between 0 and totalCount - 1)
|
|
161
|
+
* @throws Will throw an error if index is out of bounds
|
|
162
|
+
*
|
|
163
|
+
* @example
|
|
164
|
+
* ```typescript
|
|
165
|
+
* controller.goToIndex(0); // Go to first item
|
|
166
|
+
* controller.goToIndex(controller.totalCount - 1); // Go to last item
|
|
167
|
+
* ```
|
|
168
|
+
*/
|
|
169
|
+
goToIndex: (index: number) => void;
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Navigates to the previous item in the sequence.
|
|
173
|
+
* If already at the first item, behavior depends on implementation (may wrap or do nothing).
|
|
174
|
+
* Updates currentIndex in the controller state.
|
|
175
|
+
*/
|
|
176
|
+
goToPrevious: () => void;
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Navigates to the next item in the sequence.
|
|
180
|
+
* If already at the last item, behavior depends on implementation (may wrap or do nothing).
|
|
181
|
+
* Updates currentIndex in the controller state.
|
|
182
|
+
*/
|
|
183
|
+
goToNext: () => void;
|
|
184
|
+
|
|
185
|
+
/**
|
|
186
|
+
* Zooms in by the specified multiplier.
|
|
187
|
+
*
|
|
188
|
+
* @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom in more.
|
|
189
|
+
* @defaultValue 0.25
|
|
190
|
+
*
|
|
191
|
+
* @example
|
|
192
|
+
* ```typescript
|
|
193
|
+
* controller.zoomIn(); // Zoom in by 25%
|
|
194
|
+
* controller.zoomIn(0.5); // Zoom in by 50%
|
|
195
|
+
* ```
|
|
196
|
+
*/
|
|
197
|
+
zoomIn: (multiplier?: number) => void;
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* Zooms out by the specified multiplier.
|
|
201
|
+
*
|
|
202
|
+
* @param multiplier - The zoom multiplier (0.01 - 1.0). Higher values zoom out more.
|
|
203
|
+
* @defaultValue 0.25
|
|
204
|
+
*
|
|
205
|
+
* @example
|
|
206
|
+
* ```typescript
|
|
207
|
+
* controller.zoomOut(); // Zoom out by 25%
|
|
208
|
+
* controller.zoomOut(0.1); // Zoom out by 10%
|
|
209
|
+
* ```
|
|
210
|
+
*/
|
|
211
|
+
zoomOut: (multiplier?: number) => void;
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* Resets the zoom level to the specified scale.
|
|
215
|
+
*
|
|
216
|
+
* @param scale - The scale to reset to (1.0 = original size)
|
|
217
|
+
* @defaultValue 1.0
|
|
218
|
+
*
|
|
219
|
+
* @example
|
|
220
|
+
* ```typescript
|
|
221
|
+
* controller.resetZoom(); // Reset to original size
|
|
222
|
+
* controller.resetZoom(0.5); // Reset to 50% of original size
|
|
223
|
+
* ```
|
|
224
|
+
*/
|
|
225
|
+
resetZoom: (scale?: number) => void;
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* Rotates the content by the specified angle.
|
|
229
|
+
*
|
|
230
|
+
* @param angle - Rotation angle in degrees. Must be one of: 0, 90, 180, 270, 360
|
|
231
|
+
* @param clockwise - Direction of rotation when angle is not 0 or 360
|
|
232
|
+
* @defaultValue angle: `90`, clockwise: `true`
|
|
233
|
+
*
|
|
234
|
+
* @remarks
|
|
235
|
+
* - Angle 0 or 360 resets rotation regardless of clockwise parameter
|
|
236
|
+
* - The clockwise parameter only affects rotation when angle is 90, 180, or 270
|
|
237
|
+
* - Rotation is cumulative and affects the current orientation
|
|
238
|
+
*
|
|
239
|
+
* @example
|
|
240
|
+
* ```typescript
|
|
241
|
+
* controller.rotate(); // Rotate 90 degrees clockwise
|
|
242
|
+
* controller.rotate(0); // Reset rotation
|
|
243
|
+
* controller.rotate(90, false); // Rotate 90 degrees counter-clockwise
|
|
244
|
+
* controller.rotate(180); // Rotate 180 degrees (clockwise by default)
|
|
245
|
+
* controller.rotate(270, false); // Rotate 270 degrees counter-clockwise
|
|
246
|
+
* controller.rotate(360); // Reset rotation (same as 0)
|
|
247
|
+
* ```
|
|
248
|
+
*/
|
|
249
|
+
rotate: (angle?: RotationAngle, clockwise?: boolean) => void;
|
|
250
|
+
} & GestureViewerControllerState;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* State information for the gesture viewer controller.
|
|
254
|
+
* Contains read-only properties that reflect the current state.
|
|
255
|
+
*/
|
|
256
|
+
export type GestureViewerControllerState = {
|
|
257
|
+
/**
|
|
258
|
+
* The current index of the active item in the viewer.
|
|
259
|
+
*
|
|
260
|
+
* @remarks
|
|
261
|
+
* This value is automatically updated when navigation methods are called.
|
|
262
|
+
*
|
|
263
|
+
* @example
|
|
264
|
+
* ```typescript
|
|
265
|
+
* console.log(`Currently viewing item ${controller.currentIndex + 1} of ${controller.totalCount}`);
|
|
266
|
+
* ```
|
|
267
|
+
*/
|
|
268
|
+
readonly currentIndex: number;
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* The total number of items available in the viewer.
|
|
272
|
+
*
|
|
273
|
+
* @remarks
|
|
274
|
+
* This value determines the valid range for currentIndex (0 to totalCount - 1).
|
|
275
|
+
*
|
|
276
|
+
* @example
|
|
277
|
+
* ```typescript
|
|
278
|
+
* const hasNext = controller.currentIndex < controller.totalCount - 1;
|
|
279
|
+
* const hasPrevious = controller.currentIndex > 0;
|
|
280
|
+
* ```
|
|
281
|
+
*/
|
|
282
|
+
readonly totalCount: number;
|
|
283
|
+
};
|
|
@@ -1,12 +1,64 @@
|
|
|
1
1
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import type GestureViewerManager from './GestureViewerManager';
|
|
3
|
-
import type { GestureViewerManagerState } from './GestureViewerManager';
|
|
4
3
|
import { registry } from './GestureViewerRegistry';
|
|
4
|
+
import type { GestureViewerController, GestureViewerControllerState } from './types';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Hook to control the gesture viewer programmatically.
|
|
8
|
+
*
|
|
9
|
+
* @param id - Viewer instance identifier (default: 'default')
|
|
10
|
+
* @returns Methods and state for controlling the viewer
|
|
11
|
+
*
|
|
12
|
+
* **Available methods:**
|
|
13
|
+
* - `goToIndex(index: number)` - Navigate to specific index (0 to totalCount-1)
|
|
14
|
+
* - `goToPrevious()` - Navigate to previous item
|
|
15
|
+
* - `goToNext()` - Navigate to next item
|
|
16
|
+
* - `zoomIn(multiplier?: number)` - Zoom in (default: 0.25)
|
|
17
|
+
* - `zoomOut(multiplier?: number)` - Zoom out (default: 0.25)
|
|
18
|
+
* - `resetZoom(scale?: number)` - Reset zoom level (default: 1.0)
|
|
19
|
+
* - `rotate(angle?: 0|90|180|270|360, clockwise?: boolean)` - Rotate content (default: 90° clockwise)
|
|
20
|
+
*
|
|
21
|
+
* **Available state:**
|
|
22
|
+
* - `currentIndex: number` - Current active index (read-only)
|
|
23
|
+
* - `totalCount: number` - Total number of items (read-only)
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* const { goToIndex, goToNext, goToPrevious, zoomIn, zoomOut, resetZoom, rotate, currentIndex, totalCount } = useGestureViewerController();
|
|
28
|
+
*
|
|
29
|
+
* // Navigate to specific index
|
|
30
|
+
* goToIndex(2);
|
|
31
|
+
*
|
|
32
|
+
* // Go to next image
|
|
33
|
+
* goToNext();
|
|
34
|
+
*
|
|
35
|
+
* // Zoom in by 25%
|
|
36
|
+
* zoomIn();
|
|
37
|
+
*
|
|
38
|
+
* // Zoom out by 50%
|
|
39
|
+
* zoomOut(0.5);
|
|
40
|
+
*
|
|
41
|
+
* // Reset to original size
|
|
42
|
+
* resetZoom();
|
|
43
|
+
*
|
|
44
|
+
* // Rotate 90 degrees clockwise
|
|
45
|
+
* rotate();
|
|
46
|
+
*
|
|
47
|
+
* // Rotate 180 degrees
|
|
48
|
+
* rotate(180);
|
|
49
|
+
*
|
|
50
|
+
* // Check current state
|
|
51
|
+
* console.log(`Image ${currentIndex + 1} of ${totalCount}`);
|
|
52
|
+
*
|
|
53
|
+
* // Check navigation availability
|
|
54
|
+
* const canGoNext = currentIndex < totalCount - 1;
|
|
55
|
+
* const canGoPrevious = currentIndex > 0;
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export const useGestureViewerController = (id = 'default'): GestureViewerController => {
|
|
59
|
+
const [state, setState] = useState<GestureViewerControllerState>({
|
|
8
60
|
currentIndex: 0,
|
|
9
|
-
|
|
61
|
+
totalCount: 0,
|
|
10
62
|
});
|
|
11
63
|
|
|
12
64
|
const [manager, setManager] = useState<GestureViewerManager | null>(null);
|
|
@@ -25,7 +77,7 @@ export const useGestureViewerController = (id = 'default') => {
|
|
|
25
77
|
return;
|
|
26
78
|
}
|
|
27
79
|
|
|
28
|
-
setState({ currentIndex: 0,
|
|
80
|
+
setState({ currentIndex: 0, totalCount: 0 });
|
|
29
81
|
};
|
|
30
82
|
|
|
31
83
|
const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
|
|
@@ -46,7 +98,6 @@ export const useGestureViewerController = (id = 'default') => {
|
|
|
46
98
|
zoomOut: manager?.zoomOut || noopFunction,
|
|
47
99
|
resetZoom: manager?.resetZoom || noopFunction,
|
|
48
100
|
rotate: manager?.rotate || noopFunction,
|
|
49
|
-
|
|
50
|
-
totalCount: state.dataLength,
|
|
101
|
+
...state,
|
|
51
102
|
};
|
|
52
103
|
};
|