@choice-ui/react 1.9.7 → 1.9.8
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/components/button/dist/index.d.ts +9 -2
- package/dist/components/button/dist/index.js +19 -45
- package/dist/components/checkbox/dist/index.d.ts +1 -10
- package/dist/components/checkbox/dist/index.js +5 -49
- package/dist/components/code-block/dist/index.d.ts +14 -11
- package/dist/components/code-block/dist/index.js +93 -120
- package/dist/components/colors/dist/index.d.ts +6 -39
- package/dist/components/colors/src/color-image-paint/color-image-paint.js +2 -2
- package/dist/components/dropdown/dist/index.d.ts +0 -6
- package/dist/components/dropdown/dist/index.js +10 -20
- package/dist/components/emoji-picker/dist/index.d.ts +1 -30
- package/dist/components/emoji-picker/dist/index.js +44 -148
- package/dist/components/form/src/adapters/range-adapter.js +2 -2
- package/dist/components/icon-button/dist/index.d.ts +1 -1
- package/dist/components/icon-button/dist/index.js +0 -39
- package/dist/components/list/dist/index.d.ts +1 -1
- package/dist/components/md-render/dist/index.d.ts +1 -2
- package/dist/components/md-render/dist/index.js +9 -5
- package/dist/components/menus/dist/index.d.ts +0 -5
- package/dist/components/menus/dist/index.js +3 -32
- package/dist/components/modal/dist/index.js +2 -2
- package/dist/components/notifications/dist/index.d.ts +5 -1
- package/dist/components/numeric-input/dist/index.d.ts +10 -27
- package/dist/components/numeric-input/dist/index.js +23 -108
- package/dist/components/panel/dist/index.d.ts +16 -16
- package/dist/components/picture-preview/dist/index.d.ts +0 -5
- package/dist/components/picture-preview/dist/index.js +140 -287
- package/dist/components/popover/dist/index.d.ts +0 -5
- package/dist/components/popover/dist/index.js +2 -21
- package/dist/components/radio/dist/index.d.ts +1 -9
- package/dist/components/radio/dist/index.js +6 -50
- package/dist/components/range/dist/index.d.ts +20 -276
- package/dist/components/range/dist/index.js +616 -1044
- package/dist/components/scroll-area/dist/index.d.ts +27 -4
- package/dist/components/scroll-area/dist/index.js +123 -96
- package/dist/components/separator/dist/index.d.ts +8 -1
- package/dist/components/splitter/dist/index.d.ts +1 -1
- package/dist/components/text-field/dist/index.d.ts +3 -2
- package/dist/components/text-field/dist/index.js +19 -4
- package/dist/components/textarea/dist/index.js +1 -3
- package/dist/components/tooltip/dist/index.d.ts +0 -2
- package/dist/components/tooltip/dist/index.js +5 -23
- package/package.json +1 -1
- package/dist/components/toast/dist/index.d.ts +0 -274
- package/dist/components/virtual-select/dist/index.d.ts +0 -48
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Dropdown as Dropdown2 } from "../../dropdown/dist/index.js";
|
|
2
2
|
import { IconButton } from "../../icon-button/dist/index.js";
|
|
3
3
|
import { LoaderCircle, ImageRemove, Delete, Add } from "@choiceform/icons-react";
|
|
4
|
-
import { forwardRef, useState,
|
|
5
|
-
import { useEventCallback } from "usehooks-ts";
|
|
4
|
+
import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from "react";
|
|
6
5
|
import isHotkey from "is-hotkey";
|
|
7
6
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
8
7
|
import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
|
|
@@ -92,7 +91,7 @@ function useDraggable(initialPosition = { x: 0, y: 0 }, options = {}) {
|
|
|
92
91
|
};
|
|
93
92
|
}
|
|
94
93
|
function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
|
|
95
|
-
const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan
|
|
94
|
+
const { minZoom = 0.01, maxZoom = 10, zoomStep = 0.1, onZoom, onPan } = options;
|
|
96
95
|
const isMac = useRef(
|
|
97
96
|
typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0
|
|
98
97
|
);
|
|
@@ -101,32 +100,14 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
|
|
|
101
100
|
(event) => {
|
|
102
101
|
event.preventDefault();
|
|
103
102
|
event.stopPropagation();
|
|
104
|
-
if (zoomRef.current
|
|
103
|
+
if (!zoomRef.current || !positionRef.current) return;
|
|
105
104
|
const isPreciseEvent = event.deltaMode === 0;
|
|
106
105
|
const hasDeltaX = Math.abs(event.deltaX) > 0;
|
|
107
106
|
const isZoomModifier = isMac.current && event.metaKey || !isMac.current && event.ctrlKey;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
const sensitivity = isPinchZoom ? 8e-3 : 3e-3;
|
|
113
|
-
const delta = event.deltaY;
|
|
114
|
-
newZoom = oldZoom * Math.exp(-delta * sensitivity);
|
|
115
|
-
newZoom = Math.max(minZoom, Math.min(maxZoom, newZoom));
|
|
116
|
-
const target = targetRef.current;
|
|
117
|
-
if (onZoomAtPoint && target) {
|
|
118
|
-
const rect = target.getBoundingClientRect();
|
|
119
|
-
const mouseX = event.clientX - rect.left - rect.width / 2;
|
|
120
|
-
const mouseY = event.clientY - rect.top - rect.height / 2;
|
|
121
|
-
const zoomRatio = newZoom / oldZoom;
|
|
122
|
-
const currentX = positionRef.current.x;
|
|
123
|
-
const currentY = positionRef.current.y;
|
|
124
|
-
const newPosition = {
|
|
125
|
-
x: mouseX - (mouseX - currentX) * zoomRatio,
|
|
126
|
-
y: mouseY - (mouseY - currentY) * zoomRatio
|
|
127
|
-
};
|
|
128
|
-
onZoomAtPoint({ newZoom, newPosition });
|
|
129
|
-
} else if (onZoom) {
|
|
107
|
+
if (isZoomModifier) {
|
|
108
|
+
const delta = -Math.sign(event.deltaY) * zoomStep;
|
|
109
|
+
const newZoom = Math.max(minZoom, Math.min(maxZoom, zoomRef.current + delta));
|
|
110
|
+
if (onZoom) {
|
|
130
111
|
onZoom(newZoom);
|
|
131
112
|
}
|
|
132
113
|
} else if (isPreciseEvent && hasDeltaX) {
|
|
@@ -158,7 +139,7 @@ function useWheelHandler(targetRef, zoomRef, positionRef, options = {}) {
|
|
|
158
139
|
}
|
|
159
140
|
}
|
|
160
141
|
},
|
|
161
|
-
[minZoom, maxZoom, onZoom, onPan
|
|
142
|
+
[minZoom, maxZoom, zoomStep, onZoom, onPan]
|
|
162
143
|
);
|
|
163
144
|
const handleKeyDown = useCallback((e) => {
|
|
164
145
|
if (isMac.current && e.metaKey || !isMac.current && e.ctrlKey) {
|
|
@@ -219,30 +200,24 @@ var HOTKEYS = {
|
|
|
219
200
|
};
|
|
220
201
|
var PicturePreviewTv = tcv({
|
|
221
202
|
slots: {
|
|
222
|
-
root: [
|
|
223
|
-
"group/picture-preview relative flex flex-col overflow-hidden",
|
|
224
|
-
"h-full w-full",
|
|
225
|
-
"touch-none select-none"
|
|
226
|
-
],
|
|
203
|
+
root: ["relative flex flex-col overflow-hidden", "h-full w-full", "touch-none select-none"],
|
|
227
204
|
loading: [
|
|
228
205
|
"text-secondary-foreground absolute inset-0 z-10 flex flex-col items-center justify-center gap-4"
|
|
229
206
|
],
|
|
230
207
|
content: [
|
|
231
208
|
"relative flex-1 overflow-hidden",
|
|
232
209
|
"flex items-center justify-center",
|
|
233
|
-
"bg-gray-100 dark:bg-gray-900"
|
|
234
|
-
"[contain:layout_paint]"
|
|
210
|
+
"bg-gray-100 dark:bg-gray-900"
|
|
235
211
|
],
|
|
236
212
|
canvas: [
|
|
213
|
+
"relative h-full w-full",
|
|
237
214
|
"transform-gpu will-change-transform",
|
|
238
|
-
"cursor-grab active:cursor-grabbing"
|
|
239
|
-
"origin-center",
|
|
240
|
-
"flex items-center justify-center"
|
|
215
|
+
"cursor-grab active:cursor-grabbing"
|
|
241
216
|
],
|
|
242
|
-
image: ["pointer-events-none", "
|
|
217
|
+
image: ["pointer-events-none", "h-full w-full object-contain"],
|
|
243
218
|
controlGroup: [
|
|
244
219
|
"overflow-hidden",
|
|
245
|
-
"absolute flex items-center",
|
|
220
|
+
"absolute right-2 bottom-2 flex items-center",
|
|
246
221
|
"bg-default-background",
|
|
247
222
|
"rounded-md",
|
|
248
223
|
"shadow-md"
|
|
@@ -251,58 +226,26 @@ var PicturePreviewTv = tcv({
|
|
|
251
226
|
variants: {
|
|
252
227
|
isLoading: {
|
|
253
228
|
true: {
|
|
254
|
-
image: "opacity-0
|
|
255
|
-
},
|
|
256
|
-
false: {
|
|
257
|
-
image: "opacity-100 scale-100 blur-0 transition-all duration-500 ease-out"
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
isError: {
|
|
261
|
-
true: {
|
|
262
|
-
image: "opacity-0"
|
|
229
|
+
image: "opacity-0 transition-opacity duration-300"
|
|
263
230
|
},
|
|
264
231
|
false: {}
|
|
265
232
|
},
|
|
266
|
-
|
|
233
|
+
isError: {
|
|
267
234
|
true: {
|
|
268
|
-
|
|
235
|
+
image: "opacity-0 transition-opacity duration-300"
|
|
269
236
|
},
|
|
270
237
|
false: {}
|
|
271
|
-
},
|
|
272
|
-
controlPosition: {
|
|
273
|
-
"top-left": {
|
|
274
|
-
controlGroup: "top-2 left-2"
|
|
275
|
-
},
|
|
276
|
-
"top-right": {
|
|
277
|
-
controlGroup: "top-2 right-2"
|
|
278
|
-
},
|
|
279
|
-
"bottom-left": {
|
|
280
|
-
controlGroup: "bottom-2 left-2"
|
|
281
|
-
},
|
|
282
|
-
"bottom-right": {
|
|
283
|
-
controlGroup: "bottom-2 right-2"
|
|
284
|
-
}
|
|
285
|
-
},
|
|
286
|
-
controlShow: {
|
|
287
|
-
always: {
|
|
288
|
-
controlGroup: ""
|
|
289
|
-
},
|
|
290
|
-
hover: {
|
|
291
|
-
controlGroup: "group-hover/picture-preview:opacity-100 opacity-0 transition-opacity duration-200"
|
|
292
|
-
}
|
|
293
238
|
}
|
|
294
239
|
},
|
|
295
240
|
defaultVariants: {
|
|
296
241
|
isLoading: false,
|
|
297
|
-
isError: false
|
|
298
|
-
isMenuOpen: false,
|
|
299
|
-
controlPosition: "bottom-right"
|
|
242
|
+
isError: false
|
|
300
243
|
}
|
|
301
244
|
});
|
|
245
|
+
var MIN_ZOOM = 0.01;
|
|
246
|
+
var MAX_ZOOM = 10;
|
|
302
247
|
var ZOOM_STEP = 0.1;
|
|
303
248
|
var INITIAL_ZOOM = 1;
|
|
304
|
-
var MIN_ACTUAL_PERCENT = 2;
|
|
305
|
-
var MAX_ACTUAL_PERCENT = 1e3;
|
|
306
249
|
var PicturePreview = forwardRef(
|
|
307
250
|
function PicturePreview2(props, ref) {
|
|
308
251
|
const {
|
|
@@ -320,32 +263,16 @@ var PicturePreview = forwardRef(
|
|
|
320
263
|
zoomTo200: "Zoom to 200%",
|
|
321
264
|
error: "Image loading failed, please try again."
|
|
322
265
|
},
|
|
323
|
-
control = {
|
|
324
|
-
enable: true,
|
|
325
|
-
position: "bottom-right",
|
|
326
|
-
show: "hover"
|
|
327
|
-
},
|
|
328
266
|
...rest
|
|
329
267
|
} = props;
|
|
330
268
|
const [zoom, setZoom] = useState(INITIAL_ZOOM);
|
|
331
269
|
const [isLoading, setIsLoading] = useState(true);
|
|
332
270
|
const [isError, setIsError] = useState(false);
|
|
333
|
-
const [naturalSize, setNaturalSize] = useState(null);
|
|
334
|
-
const [baseScale, setBaseScale] = useState(1);
|
|
335
|
-
const [menuIsOpen, setMenuIsOpen] = useState(false);
|
|
336
|
-
const minZoom = useMemo(
|
|
337
|
-
() => baseScale > 0 ? MIN_ACTUAL_PERCENT / 100 / baseScale : 0.01,
|
|
338
|
-
[baseScale]
|
|
339
|
-
);
|
|
340
|
-
const maxZoom = useMemo(
|
|
341
|
-
() => baseScale > 0 ? MAX_ACTUAL_PERCENT / 100 / baseScale : 100,
|
|
342
|
-
[baseScale]
|
|
343
|
-
);
|
|
344
271
|
const internalRef = useRef(null);
|
|
345
272
|
const canvasRef = useRef(null);
|
|
346
273
|
const zoomRef = useRef(zoom);
|
|
347
274
|
const rafId = useRef(null);
|
|
348
|
-
const scheduleUpdate =
|
|
275
|
+
const scheduleUpdate = useCallback(() => {
|
|
349
276
|
if (rafId.current !== null) {
|
|
350
277
|
return;
|
|
351
278
|
}
|
|
@@ -353,7 +280,7 @@ var PicturePreview = forwardRef(
|
|
|
353
280
|
setZoom(zoomRef.current);
|
|
354
281
|
rafId.current = null;
|
|
355
282
|
});
|
|
356
|
-
});
|
|
283
|
+
}, []);
|
|
357
284
|
useEffect(() => {
|
|
358
285
|
return () => {
|
|
359
286
|
if (rafId.current !== null) {
|
|
@@ -365,52 +292,43 @@ var PicturePreview = forwardRef(
|
|
|
365
292
|
zoomRef.current = zoom;
|
|
366
293
|
}, [zoom]);
|
|
367
294
|
const { position, isDragging, handleMouseDown, updatePosition, positionRef } = useDraggable();
|
|
368
|
-
const
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
const handleZoomAtPoint = useEventCallback(
|
|
372
|
-
(params) => {
|
|
373
|
-
zoomRef.current = params.newZoom;
|
|
374
|
-
updatePosition(params.newPosition);
|
|
295
|
+
const handleZoomChange = useCallback(
|
|
296
|
+
(newZoom) => {
|
|
297
|
+
zoomRef.current = newZoom;
|
|
375
298
|
scheduleUpdate();
|
|
376
|
-
}
|
|
299
|
+
},
|
|
300
|
+
[scheduleUpdate]
|
|
301
|
+
);
|
|
302
|
+
const handlePositionChange = useCallback(
|
|
303
|
+
(newPosition) => {
|
|
304
|
+
updatePosition(newPosition);
|
|
305
|
+
},
|
|
306
|
+
[updatePosition]
|
|
377
307
|
);
|
|
378
308
|
useWheelHandler(internalRef, zoomRef, positionRef, {
|
|
379
|
-
minZoom,
|
|
380
|
-
maxZoom,
|
|
309
|
+
minZoom: MIN_ZOOM,
|
|
310
|
+
maxZoom: MAX_ZOOM,
|
|
381
311
|
zoomStep: ZOOM_STEP,
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
});
|
|
385
|
-
const zoomIn = useEventCallback(() => {
|
|
386
|
-
zoomRef.current = Math.min(maxZoom, zoomRef.current + ZOOM_STEP);
|
|
387
|
-
scheduleUpdate();
|
|
312
|
+
onZoom: handleZoomChange,
|
|
313
|
+
onPan: handlePositionChange
|
|
388
314
|
});
|
|
389
|
-
const
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
315
|
+
const zoomIn = useCallback(() => {
|
|
316
|
+
handleZoomChange(Math.min(MAX_ZOOM, zoomRef.current + ZOOM_STEP));
|
|
317
|
+
}, [handleZoomChange]);
|
|
318
|
+
const zoomOut = useCallback(() => {
|
|
319
|
+
handleZoomChange(Math.max(MIN_ZOOM, zoomRef.current - ZOOM_STEP));
|
|
320
|
+
}, [handleZoomChange]);
|
|
321
|
+
const resetView = useCallback(() => {
|
|
394
322
|
zoomRef.current = INITIAL_ZOOM;
|
|
395
323
|
updatePosition({ x: 0, y: 0 });
|
|
396
324
|
scheduleUpdate();
|
|
397
|
-
});
|
|
398
|
-
const fitToView =
|
|
399
|
-
if (!canvasRef.current
|
|
400
|
-
|
|
401
|
-
const containerWidth = containerRect.width;
|
|
402
|
-
const containerHeight = containerRect.height;
|
|
403
|
-
if (naturalSize.width <= 0 || naturalSize.height <= 0) return;
|
|
404
|
-
const scaleX = containerWidth / naturalSize.width;
|
|
405
|
-
const scaleY = containerHeight / naturalSize.height;
|
|
406
|
-
const fitScale = Math.min(scaleX, scaleY);
|
|
407
|
-
zoomRef.current = fitScale / baseScale;
|
|
325
|
+
}, [updatePosition, scheduleUpdate]);
|
|
326
|
+
const fitToView = useCallback(() => {
|
|
327
|
+
if (!canvasRef.current) return;
|
|
328
|
+
zoomRef.current = 1;
|
|
408
329
|
updatePosition({ x: 0, y: 0 });
|
|
409
330
|
scheduleUpdate();
|
|
410
|
-
});
|
|
411
|
-
const handleDoubleClick = useEventCallback(() => {
|
|
412
|
-
fitToView();
|
|
413
|
-
});
|
|
331
|
+
}, [updatePosition, scheduleUpdate]);
|
|
414
332
|
useHotkeys([
|
|
415
333
|
{
|
|
416
334
|
hotkey: HOTKEYS.ZOOM_IN,
|
|
@@ -429,16 +347,13 @@ var PicturePreview = forwardRef(
|
|
|
429
347
|
handler: () => fitToView()
|
|
430
348
|
}
|
|
431
349
|
]);
|
|
432
|
-
const handleZoomMenuItemClick =
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
zoomRef.current = Math.max(minZoom, Math.min(maxZoom, newZoom));
|
|
440
|
-
scheduleUpdate();
|
|
441
|
-
});
|
|
350
|
+
const handleZoomMenuItemClick = useCallback(
|
|
351
|
+
(zoomLevel) => {
|
|
352
|
+
zoomRef.current = zoomLevel;
|
|
353
|
+
scheduleUpdate();
|
|
354
|
+
},
|
|
355
|
+
[scheduleUpdate]
|
|
356
|
+
);
|
|
442
357
|
useEffect(() => {
|
|
443
358
|
if (!internalRef.current) return;
|
|
444
359
|
if (typeof ref === "function") {
|
|
@@ -458,75 +373,26 @@ var PicturePreview = forwardRef(
|
|
|
458
373
|
backfaceVisibility: "hidden"
|
|
459
374
|
};
|
|
460
375
|
}, [position.x, position.y, zoom, isDragging]);
|
|
461
|
-
const calculateBaseScale = useCallback(() => {
|
|
462
|
-
if (!naturalSize || !internalRef.current) return 1;
|
|
463
|
-
const containerRect = internalRef.current.getBoundingClientRect();
|
|
464
|
-
const containerWidth = containerRect.width;
|
|
465
|
-
const containerHeight = containerRect.height;
|
|
466
|
-
if (naturalSize.width <= 0 || naturalSize.height <= 0 || containerWidth <= 0 || containerHeight <= 0) {
|
|
467
|
-
return 1;
|
|
468
|
-
}
|
|
469
|
-
const scaleX = containerWidth / naturalSize.width;
|
|
470
|
-
const scaleY = containerHeight / naturalSize.height;
|
|
471
|
-
return Math.min(scaleX, scaleY);
|
|
472
|
-
}, [naturalSize]);
|
|
473
|
-
useEffect(() => {
|
|
474
|
-
if (!naturalSize || !internalRef.current) return;
|
|
475
|
-
const updateBaseScale = () => {
|
|
476
|
-
const scale = calculateBaseScale();
|
|
477
|
-
setBaseScale(scale);
|
|
478
|
-
};
|
|
479
|
-
updateBaseScale();
|
|
480
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
481
|
-
updateBaseScale();
|
|
482
|
-
});
|
|
483
|
-
resizeObserver.observe(internalRef.current);
|
|
484
|
-
return () => {
|
|
485
|
-
resizeObserver.disconnect();
|
|
486
|
-
};
|
|
487
|
-
}, [naturalSize, calculateBaseScale]);
|
|
488
376
|
useEffect(() => {
|
|
489
377
|
setIsLoading(true);
|
|
490
|
-
setIsError(false);
|
|
491
|
-
setNaturalSize(null);
|
|
492
378
|
const img = new Image();
|
|
493
|
-
|
|
379
|
+
img.src = src;
|
|
494
380
|
img.onload = () => {
|
|
495
|
-
if (isCancelled) return;
|
|
496
|
-
setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
|
|
497
381
|
setIsLoading(false);
|
|
498
382
|
};
|
|
499
383
|
img.onerror = () => {
|
|
500
|
-
if (isCancelled) return;
|
|
501
|
-
setIsError(true);
|
|
502
384
|
setIsLoading(false);
|
|
503
385
|
};
|
|
504
|
-
img.src = src;
|
|
505
|
-
return () => {
|
|
506
|
-
isCancelled = true;
|
|
507
|
-
img.onload = null;
|
|
508
|
-
img.onerror = null;
|
|
509
|
-
img.src = "";
|
|
510
|
-
};
|
|
511
386
|
}, [src]);
|
|
512
|
-
const
|
|
513
|
-
return Math.round(zoom * baseScale * 100);
|
|
514
|
-
}, [zoom, baseScale]);
|
|
515
|
-
const tv = PicturePreviewTv({
|
|
516
|
-
isLoading,
|
|
517
|
-
isError,
|
|
518
|
-
isMenuOpen: menuIsOpen,
|
|
519
|
-
controlPosition: control.position,
|
|
520
|
-
controlShow: control.show
|
|
521
|
-
});
|
|
387
|
+
const styles = PicturePreviewTv({ isLoading, isError });
|
|
522
388
|
return /* @__PURE__ */ jsxs(
|
|
523
389
|
"div",
|
|
524
390
|
{
|
|
525
391
|
ref: internalRef,
|
|
526
|
-
className: tcx(
|
|
392
|
+
className: tcx(styles.root(), className),
|
|
527
393
|
...rest,
|
|
528
394
|
children: [
|
|
529
|
-
isLoading && /* @__PURE__ */ jsx("div", { className:
|
|
395
|
+
isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading(), children: /* @__PURE__ */ jsx(
|
|
530
396
|
LoaderCircle,
|
|
531
397
|
{
|
|
532
398
|
className: "animate-spin",
|
|
@@ -534,7 +400,7 @@ var PicturePreview = forwardRef(
|
|
|
534
400
|
height: 32
|
|
535
401
|
}
|
|
536
402
|
) }),
|
|
537
|
-
isError && /* @__PURE__ */ jsxs("div", { className:
|
|
403
|
+
isError && /* @__PURE__ */ jsxs("div", { className: styles.loading(), children: [
|
|
538
404
|
/* @__PURE__ */ jsx(
|
|
539
405
|
ImageRemove,
|
|
540
406
|
{
|
|
@@ -544,24 +410,19 @@ var PicturePreview = forwardRef(
|
|
|
544
410
|
),
|
|
545
411
|
/* @__PURE__ */ jsx("span", { children: defaultText.error })
|
|
546
412
|
] }),
|
|
547
|
-
|
|
413
|
+
/* @__PURE__ */ jsx("div", { className: styles.content(), children: /* @__PURE__ */ jsx(
|
|
548
414
|
"div",
|
|
549
415
|
{
|
|
550
416
|
ref: canvasRef,
|
|
551
|
-
className:
|
|
417
|
+
className: styles.canvas(),
|
|
552
418
|
style: transformStyle,
|
|
553
419
|
onMouseDown: handleMouseDown,
|
|
554
|
-
onDoubleClick: handleDoubleClick,
|
|
555
420
|
children: /* @__PURE__ */ jsx(
|
|
556
421
|
"img",
|
|
557
422
|
{
|
|
558
423
|
src,
|
|
559
424
|
alt: fileName || "Preview",
|
|
560
|
-
className:
|
|
561
|
-
style: naturalSize ? {
|
|
562
|
-
width: naturalSize.width * baseScale,
|
|
563
|
-
height: naturalSize.height * baseScale
|
|
564
|
-
} : void 0,
|
|
425
|
+
className: styles.image(),
|
|
565
426
|
draggable: false,
|
|
566
427
|
loading: "eager",
|
|
567
428
|
decoding: "async",
|
|
@@ -571,7 +432,7 @@ var PicturePreview = forwardRef(
|
|
|
571
432
|
)
|
|
572
433
|
}
|
|
573
434
|
) }),
|
|
574
|
-
isError || isLoading
|
|
435
|
+
isError || isLoading ? null : /* @__PURE__ */ jsxs("div", { className: styles.controlGroup(), children: [
|
|
575
436
|
/* @__PURE__ */ jsx(
|
|
576
437
|
IconButton,
|
|
577
438
|
{
|
|
@@ -588,90 +449,82 @@ var PicturePreview = forwardRef(
|
|
|
588
449
|
children: /* @__PURE__ */ jsx(Delete, {})
|
|
589
450
|
}
|
|
590
451
|
),
|
|
591
|
-
/* @__PURE__ */ jsxs(
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
/* @__PURE__ */
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
variant: "ghost",
|
|
602
|
-
className: "border-x-default rounded-none",
|
|
603
|
-
size: "large",
|
|
604
|
-
children: /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
|
|
605
|
-
actualZoomPercent,
|
|
606
|
-
"%"
|
|
607
|
-
] })
|
|
608
|
-
}
|
|
609
|
-
),
|
|
610
|
-
/* @__PURE__ */ jsxs(Dropdown2.Content, { children: [
|
|
611
|
-
/* @__PURE__ */ jsx(
|
|
612
|
-
Dropdown2.Item,
|
|
613
|
-
{
|
|
614
|
-
onMouseUp: () => handleZoomMenuItemClick(zoomRef.current + ZOOM_STEP),
|
|
615
|
-
shortcut: {
|
|
616
|
-
keys: "+",
|
|
617
|
-
modifier: "command"
|
|
618
|
-
},
|
|
619
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomIn })
|
|
620
|
-
}
|
|
621
|
-
),
|
|
622
|
-
/* @__PURE__ */ jsx(
|
|
623
|
-
Dropdown2.Item,
|
|
624
|
-
{
|
|
625
|
-
onMouseUp: () => handleZoomMenuItemClick(zoomRef.current - ZOOM_STEP),
|
|
626
|
-
shortcut: {
|
|
627
|
-
keys: "-",
|
|
628
|
-
modifier: "command"
|
|
629
|
-
},
|
|
630
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomOut })
|
|
631
|
-
}
|
|
632
|
-
),
|
|
633
|
-
/* @__PURE__ */ jsx(
|
|
634
|
-
Dropdown2.Item,
|
|
635
|
-
{
|
|
636
|
-
selected: actualZoomPercent === 50,
|
|
637
|
-
onMouseUp: () => setActualZoomPercent(50),
|
|
638
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo50 })
|
|
639
|
-
}
|
|
640
|
-
),
|
|
641
|
-
/* @__PURE__ */ jsx(
|
|
642
|
-
Dropdown2.Item,
|
|
643
|
-
{
|
|
644
|
-
selected: actualZoomPercent === 100,
|
|
645
|
-
onMouseUp: () => setActualZoomPercent(100),
|
|
646
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo100 })
|
|
647
|
-
}
|
|
648
|
-
),
|
|
649
|
-
/* @__PURE__ */ jsx(
|
|
650
|
-
Dropdown2.Item,
|
|
651
|
-
{
|
|
652
|
-
selected: actualZoomPercent === 200,
|
|
653
|
-
onMouseUp: () => setActualZoomPercent(200),
|
|
654
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo200 })
|
|
655
|
-
}
|
|
656
|
-
),
|
|
657
|
-
/* @__PURE__ */ jsx(Dropdown2.Divider, {}),
|
|
658
|
-
/* @__PURE__ */ jsx(
|
|
659
|
-
Dropdown2.Item,
|
|
660
|
-
{
|
|
661
|
-
onMouseUp: () => {
|
|
662
|
-
fitToView();
|
|
663
|
-
},
|
|
664
|
-
shortcut: {
|
|
665
|
-
keys: "1",
|
|
666
|
-
modifier: "command"
|
|
667
|
-
},
|
|
668
|
-
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.fitToScreen })
|
|
669
|
-
}
|
|
670
|
-
)
|
|
452
|
+
/* @__PURE__ */ jsxs(Dropdown2, { selection: true, children: [
|
|
453
|
+
/* @__PURE__ */ jsx(
|
|
454
|
+
Dropdown2.Trigger,
|
|
455
|
+
{
|
|
456
|
+
variant: "ghost",
|
|
457
|
+
className: "border-x-default rounded-none",
|
|
458
|
+
size: "large",
|
|
459
|
+
children: /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
|
|
460
|
+
Math.round(zoom * 100),
|
|
461
|
+
"%"
|
|
671
462
|
] })
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
463
|
+
}
|
|
464
|
+
),
|
|
465
|
+
/* @__PURE__ */ jsxs(Dropdown2.Content, { children: [
|
|
466
|
+
/* @__PURE__ */ jsx(
|
|
467
|
+
Dropdown2.Item,
|
|
468
|
+
{
|
|
469
|
+
onMouseUp: () => handleZoomMenuItemClick(zoomRef.current + ZOOM_STEP),
|
|
470
|
+
shortcut: {
|
|
471
|
+
keys: "+",
|
|
472
|
+
modifier: "command"
|
|
473
|
+
},
|
|
474
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomIn })
|
|
475
|
+
}
|
|
476
|
+
),
|
|
477
|
+
/* @__PURE__ */ jsx(
|
|
478
|
+
Dropdown2.Item,
|
|
479
|
+
{
|
|
480
|
+
onMouseUp: () => handleZoomMenuItemClick(zoomRef.current - ZOOM_STEP),
|
|
481
|
+
shortcut: {
|
|
482
|
+
keys: "-",
|
|
483
|
+
modifier: "command"
|
|
484
|
+
},
|
|
485
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomOut })
|
|
486
|
+
}
|
|
487
|
+
),
|
|
488
|
+
/* @__PURE__ */ jsx(
|
|
489
|
+
Dropdown2.Item,
|
|
490
|
+
{
|
|
491
|
+
selected: zoomRef.current === 0.5,
|
|
492
|
+
onMouseUp: () => handleZoomMenuItemClick(0.5),
|
|
493
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo50 })
|
|
494
|
+
}
|
|
495
|
+
),
|
|
496
|
+
/* @__PURE__ */ jsx(
|
|
497
|
+
Dropdown2.Item,
|
|
498
|
+
{
|
|
499
|
+
selected: zoomRef.current === 1,
|
|
500
|
+
onMouseUp: () => handleZoomMenuItemClick(1),
|
|
501
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo100 })
|
|
502
|
+
}
|
|
503
|
+
),
|
|
504
|
+
/* @__PURE__ */ jsx(
|
|
505
|
+
Dropdown2.Item,
|
|
506
|
+
{
|
|
507
|
+
selected: zoomRef.current === 2,
|
|
508
|
+
onMouseUp: () => handleZoomMenuItemClick(2),
|
|
509
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.zoomTo200 })
|
|
510
|
+
}
|
|
511
|
+
),
|
|
512
|
+
/* @__PURE__ */ jsx(Dropdown2.Divider, {}),
|
|
513
|
+
/* @__PURE__ */ jsx(
|
|
514
|
+
Dropdown2.Item,
|
|
515
|
+
{
|
|
516
|
+
onMouseUp: () => {
|
|
517
|
+
fitToView();
|
|
518
|
+
},
|
|
519
|
+
shortcut: {
|
|
520
|
+
keys: "1",
|
|
521
|
+
modifier: "command"
|
|
522
|
+
},
|
|
523
|
+
children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: defaultText.fitToScreen })
|
|
524
|
+
}
|
|
525
|
+
)
|
|
526
|
+
] })
|
|
527
|
+
] }),
|
|
675
528
|
/* @__PURE__ */ jsx(
|
|
676
529
|
IconButton,
|
|
677
530
|
{
|
|
@@ -41,11 +41,6 @@ interface PopoverProps extends Omit<React__default.HTMLAttributes<HTMLElement>,
|
|
|
41
41
|
*/
|
|
42
42
|
root?: HTMLElement | null;
|
|
43
43
|
triggerRef?: React__default.RefObject<HTMLElement>;
|
|
44
|
-
/**
|
|
45
|
-
* CSS selector string to find the trigger element in the DOM.
|
|
46
|
-
* Alternative to triggerRef for cases where you want to use a selector instead of a ref.
|
|
47
|
-
*/
|
|
48
|
-
triggerSelector?: string;
|
|
49
44
|
}
|
|
50
45
|
interface PopoverComponent extends React__default.FC<PopoverProps> {
|
|
51
46
|
Content: typeof ModalContent;
|
|
@@ -221,8 +221,7 @@ function useFloatingPopover({
|
|
|
221
221
|
matchTriggerWidth = false,
|
|
222
222
|
transitionStylesProps = {
|
|
223
223
|
duration: 0
|
|
224
|
-
}
|
|
225
|
-
triggerSelector
|
|
224
|
+
}
|
|
226
225
|
}) {
|
|
227
226
|
const [isClosing, setIsClosing] = useState(false);
|
|
228
227
|
const positionRef = useRef({ x: 0, y: 0 });
|
|
@@ -386,22 +385,6 @@ function useFloatingPopover({
|
|
|
386
385
|
},
|
|
387
386
|
[refs]
|
|
388
387
|
);
|
|
389
|
-
const isOpenRef = useRef(innerOpen);
|
|
390
|
-
isOpenRef.current = innerOpen;
|
|
391
|
-
useEffect(() => {
|
|
392
|
-
if (!triggerSelector) return;
|
|
393
|
-
const element = document.querySelector(triggerSelector);
|
|
394
|
-
if (!element) return;
|
|
395
|
-
refs.setReference(element);
|
|
396
|
-
const handleClick = (e) => {
|
|
397
|
-
e.preventDefault();
|
|
398
|
-
handleOpenChange(!isOpenRef.current);
|
|
399
|
-
};
|
|
400
|
-
element.addEventListener("click", handleClick);
|
|
401
|
-
return () => {
|
|
402
|
-
element.removeEventListener("click", handleClick);
|
|
403
|
-
};
|
|
404
|
-
}, [triggerSelector, refs, handleOpenChange]);
|
|
405
388
|
return {
|
|
406
389
|
refs,
|
|
407
390
|
triggerRefs,
|
|
@@ -426,7 +409,6 @@ var DragPopover = memo(function DragPopover2({
|
|
|
426
409
|
className,
|
|
427
410
|
children,
|
|
428
411
|
triggerRef: externalTriggerRef,
|
|
429
|
-
triggerSelector,
|
|
430
412
|
draggable = false,
|
|
431
413
|
placement = "bottom",
|
|
432
414
|
interactions = "click",
|
|
@@ -485,8 +467,7 @@ var DragPopover = memo(function DragPopover2({
|
|
|
485
467
|
closeOnEscape,
|
|
486
468
|
rememberPosition,
|
|
487
469
|
resetDragState,
|
|
488
|
-
resetPosition
|
|
489
|
-
triggerSelector
|
|
470
|
+
resetPosition
|
|
490
471
|
});
|
|
491
472
|
useEffect(() => {
|
|
492
473
|
if (externalTriggerRef) {
|