@gx-design-vue/image 0.1.2 → 0.2.0-alpha.0

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 (56) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +71 -7
  3. package/dist/GImage.d.ts +162 -0
  4. package/dist/GImage.js +221 -0
  5. package/dist/ImagePreview/Operations.d.ts +83 -0
  6. package/dist/ImagePreview/Operations.js +71 -0
  7. package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts +19 -0
  8. package/dist/ImagePreview/hooks/getFixScaleEleTransPosition.js +40 -0
  9. package/dist/ImagePreview/hooks/useImageTransform.d.ts +39 -0
  10. package/dist/ImagePreview/hooks/useImageTransform.js +105 -0
  11. package/dist/ImagePreview/hooks/useMouseEvent.d.ts +14 -0
  12. package/dist/ImagePreview/hooks/useMouseEvent.js +100 -0
  13. package/dist/ImagePreview/hooks/useTouchEvent.d.ts +12 -0
  14. package/dist/ImagePreview/hooks/useTouchEvent.js +123 -0
  15. package/dist/ImagePreview/index.d.ts +162 -0
  16. package/dist/ImagePreview/index.js +303 -0
  17. package/dist/ImagePreview/props.d.ts +88 -0
  18. package/dist/ImagePreview/props.js +53 -0
  19. package/dist/ImagePreview/style.d.ts +30 -0
  20. package/dist/ImagePreview/style.js +286 -0
  21. package/dist/ImagePreview/typings.d.ts +19 -0
  22. package/dist/ImagePreview/typings.js +1 -0
  23. package/dist/ImagePreview/utils/KeyCode.d.ts +438 -0
  24. package/dist/ImagePreview/utils/KeyCode.js +173 -0
  25. package/dist/ImagePreview/utils/addEventListener.d.ts +6 -0
  26. package/dist/ImagePreview/utils/addEventListener.js +22 -0
  27. package/dist/ImagePreview/utils/util.d.ts +7 -0
  28. package/dist/ImagePreview/utils/util.js +8 -0
  29. package/dist/hooks/useFrameSetState.d.ts +5 -0
  30. package/dist/hooks/useFrameSetState.js +33 -0
  31. package/dist/image.esm.js +2374 -0
  32. package/dist/image.js +1 -0
  33. package/dist/index.d.ts +5 -7
  34. package/dist/index.js +6 -0
  35. package/dist/props.d.ts +82 -77
  36. package/dist/props.js +66 -0
  37. package/dist/slots.d.ts +6 -0
  38. package/dist/slots.js +21 -0
  39. package/dist/style.d.ts +9 -0
  40. package/dist/style.js +78 -0
  41. package/dist/typings.d.ts +6 -0
  42. package/dist/typings.js +1 -0
  43. package/dist/utils/aria.d.ts +14 -11
  44. package/dist/utils/aria.js +16 -0
  45. package/dist/utils/util.d.ts +4 -0
  46. package/dist/utils/util.js +8 -0
  47. package/global.d.ts +8 -0
  48. package/package.json +57 -60
  49. package/dist/Image.d.ts +0 -130
  50. package/dist/components/ImageViewer.d.ts +0 -59
  51. package/dist/components/ImageViewerGroup.d.ts +0 -14
  52. package/dist/design/config.less +0 -2
  53. package/dist/image.es.js +0 -801
  54. package/dist/image.umd.js +0 -1
  55. package/dist/style.css +0 -1
  56. package/dist/style.less +0 -177
@@ -0,0 +1,438 @@
1
+ //#region src/ImagePreview/utils/KeyCode.d.ts
2
+ /**
3
+ * @ignore
4
+ * some key-codes definition and utils from closure-library
5
+ * @author yiminghe@gmail.com
6
+ */
7
+ declare const KeyCode: {
8
+ /**
9
+ * MAC_ENTER
10
+ */
11
+ MAC_ENTER: number;
12
+ /**
13
+ * BACKSPACE
14
+ */
15
+ BACKSPACE: number;
16
+ /**
17
+ * TAB
18
+ */
19
+ TAB: number;
20
+ /**
21
+ * NUMLOCK on FF/Safari Mac
22
+ */
23
+ NUM_CENTER: number;
24
+ /**
25
+ * ENTER
26
+ */
27
+ ENTER: number;
28
+ /**
29
+ * SHIFT
30
+ */
31
+ SHIFT: number;
32
+ /**
33
+ * CTRL
34
+ */
35
+ CTRL: number;
36
+ /**
37
+ * ALT
38
+ */
39
+ ALT: number;
40
+ /**
41
+ * PAUSE
42
+ */
43
+ PAUSE: number;
44
+ /**
45
+ * CAPS_LOCK
46
+ */
47
+ CAPS_LOCK: number;
48
+ /**
49
+ * ESC
50
+ */
51
+ ESC: number;
52
+ /**
53
+ * SPACE
54
+ */
55
+ SPACE: number;
56
+ /**
57
+ * PAGE_UP
58
+ */
59
+ PAGE_UP: number;
60
+ /**
61
+ * PAGE_DOWN
62
+ */
63
+ PAGE_DOWN: number;
64
+ /**
65
+ * END
66
+ */
67
+ END: number;
68
+ /**
69
+ * HOME
70
+ */
71
+ HOME: number;
72
+ /**
73
+ * LEFT
74
+ */
75
+ LEFT: number;
76
+ /**
77
+ * UP
78
+ */
79
+ UP: number;
80
+ /**
81
+ * RIGHT
82
+ */
83
+ RIGHT: number;
84
+ /**
85
+ * DOWN
86
+ */
87
+ DOWN: number;
88
+ /**
89
+ * PRINT_SCREEN
90
+ */
91
+ PRINT_SCREEN: number;
92
+ /**
93
+ * INSERT
94
+ */
95
+ INSERT: number;
96
+ /**
97
+ * DELETE
98
+ */
99
+ DELETE: number;
100
+ /**
101
+ * ZERO
102
+ */
103
+ ZERO: number;
104
+ /**
105
+ * ONE
106
+ */
107
+ ONE: number;
108
+ /**
109
+ * TWO
110
+ */
111
+ TWO: number;
112
+ /**
113
+ * THREE
114
+ */
115
+ THREE: number;
116
+ /**
117
+ * FOUR
118
+ */
119
+ FOUR: number;
120
+ /**
121
+ * FIVE
122
+ */
123
+ FIVE: number;
124
+ /**
125
+ * SIX
126
+ */
127
+ SIX: number;
128
+ /**
129
+ * SEVEN
130
+ */
131
+ SEVEN: number;
132
+ /**
133
+ * EIGHT
134
+ */
135
+ EIGHT: number;
136
+ /**
137
+ * NINE
138
+ */
139
+ NINE: number;
140
+ /**
141
+ * QUESTION_MARK
142
+ */
143
+ QUESTION_MARK: number;
144
+ /**
145
+ * A
146
+ */
147
+ A: number;
148
+ /**
149
+ * B
150
+ */
151
+ B: number;
152
+ /**
153
+ * C
154
+ */
155
+ C: number;
156
+ /**
157
+ * D
158
+ */
159
+ D: number;
160
+ /**
161
+ * E
162
+ */
163
+ E: number;
164
+ /**
165
+ * F
166
+ */
167
+ F: number;
168
+ /**
169
+ * G
170
+ */
171
+ G: number;
172
+ /**
173
+ * H
174
+ */
175
+ H: number;
176
+ /**
177
+ * I
178
+ */
179
+ I: number;
180
+ /**
181
+ * J
182
+ */
183
+ J: number;
184
+ /**
185
+ * K
186
+ */
187
+ K: number;
188
+ /**
189
+ * L
190
+ */
191
+ L: number;
192
+ /**
193
+ * M
194
+ */
195
+ M: number;
196
+ /**
197
+ * N
198
+ */
199
+ N: number;
200
+ /**
201
+ * O
202
+ */
203
+ O: number;
204
+ /**
205
+ * P
206
+ */
207
+ P: number;
208
+ /**
209
+ * Q
210
+ */
211
+ Q: number;
212
+ /**
213
+ * R
214
+ */
215
+ R: number;
216
+ /**
217
+ * S
218
+ */
219
+ S: number;
220
+ /**
221
+ * T
222
+ */
223
+ T: number;
224
+ /**
225
+ * U
226
+ */
227
+ U: number;
228
+ /**
229
+ * V
230
+ */
231
+ V: number;
232
+ /**
233
+ * W
234
+ */
235
+ W: number;
236
+ /**
237
+ * X
238
+ */
239
+ X: number;
240
+ /**
241
+ * Y
242
+ */
243
+ Y: number;
244
+ /**
245
+ * Z
246
+ */
247
+ Z: number;
248
+ /**
249
+ * META
250
+ */
251
+ META: number;
252
+ /**
253
+ * WIN_KEY_RIGHT
254
+ */
255
+ WIN_KEY_RIGHT: number;
256
+ /**
257
+ * CONTEXT_MENU
258
+ */
259
+ CONTEXT_MENU: number;
260
+ /**
261
+ * NUM_ZERO
262
+ */
263
+ NUM_ZERO: number;
264
+ /**
265
+ * NUM_ONE
266
+ */
267
+ NUM_ONE: number;
268
+ /**
269
+ * NUM_TWO
270
+ */
271
+ NUM_TWO: number;
272
+ /**
273
+ * NUM_THREE
274
+ */
275
+ NUM_THREE: number;
276
+ /**
277
+ * NUM_FOUR
278
+ */
279
+ NUM_FOUR: number;
280
+ /**
281
+ * NUM_FIVE
282
+ */
283
+ NUM_FIVE: number;
284
+ /**
285
+ * NUM_SIX
286
+ */
287
+ NUM_SIX: number;
288
+ /**
289
+ * NUM_SEVEN
290
+ */
291
+ NUM_SEVEN: number;
292
+ /**
293
+ * NUM_EIGHT
294
+ */
295
+ NUM_EIGHT: number;
296
+ /**
297
+ * NUM_NINE
298
+ */
299
+ NUM_NINE: number;
300
+ /**
301
+ * NUM_MULTIPLY
302
+ */
303
+ NUM_MULTIPLY: number;
304
+ /**
305
+ * NUM_PLUS
306
+ */
307
+ NUM_PLUS: number;
308
+ /**
309
+ * NUM_MINUS
310
+ */
311
+ NUM_MINUS: number;
312
+ /**
313
+ * NUM_PERIOD
314
+ */
315
+ NUM_PERIOD: number;
316
+ /**
317
+ * NUM_DIVISION
318
+ */
319
+ NUM_DIVISION: number;
320
+ /**
321
+ * F1
322
+ */
323
+ F1: number;
324
+ /**
325
+ * F2
326
+ */
327
+ F2: number;
328
+ /**
329
+ * F3
330
+ */
331
+ F3: number;
332
+ /**
333
+ * F4
334
+ */
335
+ F4: number;
336
+ /**
337
+ * F5
338
+ */
339
+ F5: number;
340
+ /**
341
+ * F6
342
+ */
343
+ F6: number;
344
+ /**
345
+ * F7
346
+ */
347
+ F7: number;
348
+ /**
349
+ * F8
350
+ */
351
+ F8: number;
352
+ /**
353
+ * F9
354
+ */
355
+ F9: number;
356
+ /**
357
+ * F10
358
+ */
359
+ F10: number;
360
+ /**
361
+ * F11
362
+ */
363
+ F11: number;
364
+ /**
365
+ * F12
366
+ */
367
+ F12: number;
368
+ /**
369
+ * NUMLOCK
370
+ */
371
+ NUMLOCK: number;
372
+ /**
373
+ * SEMICOLON
374
+ */
375
+ SEMICOLON: number;
376
+ /**
377
+ * DASH
378
+ */
379
+ DASH: number;
380
+ /**
381
+ * EQUALS
382
+ */
383
+ EQUALS: number;
384
+ /**
385
+ * COMMA
386
+ */
387
+ COMMA: number;
388
+ /**
389
+ * PERIOD
390
+ */
391
+ PERIOD: number;
392
+ /**
393
+ * SLASH
394
+ */
395
+ SLASH: number;
396
+ /**
397
+ * APOSTROPHE
398
+ */
399
+ APOSTROPHE: number;
400
+ /**
401
+ * SINGLE_QUOTE
402
+ */
403
+ SINGLE_QUOTE: number;
404
+ /**
405
+ * OPEN_SQUARE_BRACKET
406
+ */
407
+ OPEN_SQUARE_BRACKET: number;
408
+ /**
409
+ * BACKSLASH
410
+ */
411
+ BACKSLASH: number;
412
+ /**
413
+ * CLOSE_SQUARE_BRACKET
414
+ */
415
+ CLOSE_SQUARE_BRACKET: number;
416
+ /**
417
+ * WIN_KEY
418
+ */
419
+ WIN_KEY: number;
420
+ /**
421
+ * MAC_FF_META
422
+ */
423
+ MAC_FF_META: number;
424
+ /**
425
+ * WIN_IME
426
+ */
427
+ WIN_IME: number;
428
+ /**
429
+ * whether text and modified key is entered at the same time.
430
+ */
431
+ isTextModifyingKeyEvent: (e: KeyboardEvent) => boolean;
432
+ /**
433
+ * whether character is entered.
434
+ */
435
+ isCharacterKey: (keyCode: number) => boolean;
436
+ };
437
+ //#endregion
438
+ export { KeyCode as default };
@@ -0,0 +1,173 @@
1
+ //#region src/ImagePreview/utils/KeyCode.ts
2
+ /**
3
+ * @ignore
4
+ * some key-codes definition and utils from closure-library
5
+ * @author yiminghe@gmail.com
6
+ */
7
+ const KeyCode = {
8
+ MAC_ENTER: 3,
9
+ BACKSPACE: 8,
10
+ TAB: 9,
11
+ NUM_CENTER: 12,
12
+ ENTER: 13,
13
+ SHIFT: 16,
14
+ CTRL: 17,
15
+ ALT: 18,
16
+ PAUSE: 19,
17
+ CAPS_LOCK: 20,
18
+ ESC: 27,
19
+ SPACE: 32,
20
+ PAGE_UP: 33,
21
+ PAGE_DOWN: 34,
22
+ END: 35,
23
+ HOME: 36,
24
+ LEFT: 37,
25
+ UP: 38,
26
+ RIGHT: 39,
27
+ DOWN: 40,
28
+ PRINT_SCREEN: 44,
29
+ INSERT: 45,
30
+ DELETE: 46,
31
+ ZERO: 48,
32
+ ONE: 49,
33
+ TWO: 50,
34
+ THREE: 51,
35
+ FOUR: 52,
36
+ FIVE: 53,
37
+ SIX: 54,
38
+ SEVEN: 55,
39
+ EIGHT: 56,
40
+ NINE: 57,
41
+ QUESTION_MARK: 63,
42
+ A: 65,
43
+ B: 66,
44
+ C: 67,
45
+ D: 68,
46
+ E: 69,
47
+ F: 70,
48
+ G: 71,
49
+ H: 72,
50
+ I: 73,
51
+ J: 74,
52
+ K: 75,
53
+ L: 76,
54
+ M: 77,
55
+ N: 78,
56
+ O: 79,
57
+ P: 80,
58
+ Q: 81,
59
+ R: 82,
60
+ S: 83,
61
+ T: 84,
62
+ U: 85,
63
+ V: 86,
64
+ W: 87,
65
+ X: 88,
66
+ Y: 89,
67
+ Z: 90,
68
+ META: 91,
69
+ WIN_KEY_RIGHT: 92,
70
+ CONTEXT_MENU: 93,
71
+ NUM_ZERO: 96,
72
+ NUM_ONE: 97,
73
+ NUM_TWO: 98,
74
+ NUM_THREE: 99,
75
+ NUM_FOUR: 100,
76
+ NUM_FIVE: 101,
77
+ NUM_SIX: 102,
78
+ NUM_SEVEN: 103,
79
+ NUM_EIGHT: 104,
80
+ NUM_NINE: 105,
81
+ NUM_MULTIPLY: 106,
82
+ NUM_PLUS: 107,
83
+ NUM_MINUS: 109,
84
+ NUM_PERIOD: 110,
85
+ NUM_DIVISION: 111,
86
+ F1: 112,
87
+ F2: 113,
88
+ F3: 114,
89
+ F4: 115,
90
+ F5: 116,
91
+ F6: 117,
92
+ F7: 118,
93
+ F8: 119,
94
+ F9: 120,
95
+ F10: 121,
96
+ F11: 122,
97
+ F12: 123,
98
+ NUMLOCK: 144,
99
+ SEMICOLON: 186,
100
+ DASH: 189,
101
+ EQUALS: 187,
102
+ COMMA: 188,
103
+ PERIOD: 190,
104
+ SLASH: 191,
105
+ APOSTROPHE: 192,
106
+ SINGLE_QUOTE: 222,
107
+ OPEN_SQUARE_BRACKET: 219,
108
+ BACKSLASH: 220,
109
+ CLOSE_SQUARE_BRACKET: 221,
110
+ WIN_KEY: 224,
111
+ MAC_FF_META: 224,
112
+ WIN_IME: 229,
113
+ isTextModifyingKeyEvent: function isTextModifyingKeyEvent(e) {
114
+ const { keyCode } = e;
115
+ if (e.altKey && !e.ctrlKey || e.metaKey || keyCode >= KeyCode.F1 && keyCode <= KeyCode.F12) return false;
116
+ switch (keyCode) {
117
+ case KeyCode.ALT:
118
+ case KeyCode.CAPS_LOCK:
119
+ case KeyCode.CONTEXT_MENU:
120
+ case KeyCode.CTRL:
121
+ case KeyCode.DOWN:
122
+ case KeyCode.END:
123
+ case KeyCode.ESC:
124
+ case KeyCode.HOME:
125
+ case KeyCode.INSERT:
126
+ case KeyCode.LEFT:
127
+ case KeyCode.MAC_FF_META:
128
+ case KeyCode.META:
129
+ case KeyCode.NUMLOCK:
130
+ case KeyCode.NUM_CENTER:
131
+ case KeyCode.PAGE_DOWN:
132
+ case KeyCode.PAGE_UP:
133
+ case KeyCode.PAUSE:
134
+ case KeyCode.PRINT_SCREEN:
135
+ case KeyCode.RIGHT:
136
+ case KeyCode.SHIFT:
137
+ case KeyCode.UP:
138
+ case KeyCode.WIN_KEY:
139
+ case KeyCode.WIN_KEY_RIGHT: return false;
140
+ default: return true;
141
+ }
142
+ },
143
+ isCharacterKey: function isCharacterKey(keyCode) {
144
+ if (keyCode >= KeyCode.ZERO && keyCode <= KeyCode.NINE) return true;
145
+ if (keyCode >= KeyCode.NUM_ZERO && keyCode <= KeyCode.NUM_MULTIPLY) return true;
146
+ if (keyCode >= KeyCode.A && keyCode <= KeyCode.Z) return true;
147
+ if (window.navigator.userAgent.includes("WebKit") && keyCode === 0) return true;
148
+ switch (keyCode) {
149
+ case KeyCode.SPACE:
150
+ case KeyCode.QUESTION_MARK:
151
+ case KeyCode.NUM_PLUS:
152
+ case KeyCode.NUM_MINUS:
153
+ case KeyCode.NUM_PERIOD:
154
+ case KeyCode.NUM_DIVISION:
155
+ case KeyCode.SEMICOLON:
156
+ case KeyCode.DASH:
157
+ case KeyCode.EQUALS:
158
+ case KeyCode.COMMA:
159
+ case KeyCode.PERIOD:
160
+ case KeyCode.SLASH:
161
+ case KeyCode.APOSTROPHE:
162
+ case KeyCode.SINGLE_QUOTE:
163
+ case KeyCode.OPEN_SQUARE_BRACKET:
164
+ case KeyCode.BACKSLASH:
165
+ case KeyCode.CLOSE_SQUARE_BRACKET: return true;
166
+ default: return false;
167
+ }
168
+ }
169
+ };
170
+ var KeyCode_default = KeyCode;
171
+
172
+ //#endregion
173
+ export { KeyCode_default as default };
@@ -0,0 +1,6 @@
1
+ //#region src/ImagePreview/utils/addEventListener.d.ts
2
+ declare function addEventListenerWrap(target: any, eventType: any, cb: any, option: any): {
3
+ remove: () => void;
4
+ };
5
+ //#endregion
6
+ export { addEventListenerWrap as default };
@@ -0,0 +1,22 @@
1
+ //#region src/ImagePreview/utils/addEventListener.ts
2
+ let supportsPassive = false;
3
+ try {
4
+ const opts = Object.defineProperty({}, "passive", { get() {
5
+ supportsPassive = true;
6
+ } });
7
+ window.addEventListener("testPassive", null, opts);
8
+ window.removeEventListener("testPassive", null, opts);
9
+ } catch (e) {}
10
+ function addEventListenerWrap(target, eventType, cb, option) {
11
+ if (target && target.addEventListener) {
12
+ let opt = option;
13
+ if (opt === void 0 && supportsPassive && (eventType === "touchstart" || eventType === "touchmove" || eventType === "wheel")) opt = { passive: false };
14
+ target.addEventListener(eventType, cb, opt);
15
+ }
16
+ return { remove: () => {
17
+ if (target && target.removeEventListener) target.removeEventListener(eventType, cb);
18
+ } };
19
+ }
20
+
21
+ //#endregion
22
+ export { addEventListenerWrap as default };
@@ -0,0 +1,7 @@
1
+ //#region src/ImagePreview/utils/util.d.ts
2
+ /** Scale the ratio base */
3
+ declare const BASE_SCALE_RATIO = 1;
4
+ /** The maximum zoom ratio when the mouse zooms in, adjustable */
5
+ declare const WHEEL_MAX_SCALE_RATIO = 1;
6
+ //#endregion
7
+ export { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO };
@@ -0,0 +1,8 @@
1
+ //#region src/ImagePreview/utils/util.ts
2
+ /** Scale the ratio base */
3
+ const BASE_SCALE_RATIO = 1;
4
+ /** The maximum zoom ratio when the mouse zooms in, adjustable */
5
+ const WHEEL_MAX_SCALE_RATIO = 1;
6
+
7
+ //#endregion
8
+ export { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO };
@@ -0,0 +1,5 @@
1
+ //#region src/hooks/useFrameSetState.d.ts
2
+ type SetActionType<T> = Partial<T> | ((state: T) => Partial<T>);
3
+ declare function useFrameSetState<T extends object>(initial: T): [Record<string, any>, (newState: SetActionType<T>) => void];
4
+ //#endregion
5
+ export { useFrameSetState as default };
@@ -0,0 +1,33 @@
1
+ import { onMounted, reactive, ref } from "vue";
2
+ import { raf } from "@gx-design-vue/pro-utils";
3
+
4
+ //#region src/hooks/useFrameSetState.ts
5
+ function useFrameSetState(initial) {
6
+ const frame = ref(null);
7
+ const state = reactive({ ...initial });
8
+ const queue = ref([]);
9
+ const setFrameState = (newState) => {
10
+ if (frame.value === null) {
11
+ queue.value = [];
12
+ frame.value = raf(() => {
13
+ let memoState;
14
+ queue.value.forEach((queueState) => {
15
+ memoState = {
16
+ ...memoState,
17
+ ...queueState
18
+ };
19
+ });
20
+ Object.assign(state, memoState);
21
+ frame.value = null;
22
+ });
23
+ }
24
+ queue.value.push(newState);
25
+ };
26
+ onMounted(() => {
27
+ frame.value && raf.cancel(frame.value);
28
+ });
29
+ return [state, setFrameState];
30
+ }
31
+
32
+ //#endregion
33
+ export { useFrameSetState as default };