admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-04 16:14:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(canvas): enhance image editing interactions and fix flickering in high-resolution previews

Browse Source
This commit is contained in:
HouYunFei
2026-07-27 16:30:43 +08:00
parent f8191d13b2
commit 6c61081698
6 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/canvas/canvas-node-crop-dialog.tsx
+3 -1
View File
@@ -86,7 +86,9 @@ export function CanvasNodeCropDialog({ dataUrl, open, onClose, onConfirm }: { da
>
<div className="relative" style={viewport.contentStyle}>
<div ref={boxRef} className="absolute isolate overflow-hidden rounded-lg bg-black select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
<img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain opacity-90" draggable={false} />
<div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
<img src={dataUrl} alt="" className="block h-full w-full object-contain opacity-90" draggable={false} />
</div>
<CropMask crop={crop} />
<div className="absolute cursor-move border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.3),0_0_28px_rgba(0,0,0,.28)]" style={cropStyle(crop)} onPointerDown={(event) => startDrag("move", event)}>
<div className="pointer-events-none absolute inset-x-0 top-1/3 border-t border-white/50" />
web/src/components/canvas/canvas-node-mask-edit-dialog.tsx
+36 -32
View File
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
import { createPortal } from "react-dom";
import { Button, Input, Modal, Slider, Tooltip } from "antd";
import { Brush, Eraser, Redo2, RotateCcw, Undo2, WandSparkles, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -75,11 +76,10 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
};
const updateBrushPreview = (event: ReactPointerEvent<HTMLCanvasElement>, size = brushSize, adjusting = false) => {
const rect = event.currentTarget.getBoundingClientRect();
setBrushPreview({
x: event.clientX - rect.left,
y: event.clientY - rect.top,
size: Math.max(4, (size / event.currentTarget.width) * rect.width),
x: event.clientX,
y: event.clientY,
size,
adjusting,
});
};
@@ -89,14 +89,13 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
event.preventDefault();
event.stopPropagation();
event.currentTarget.setPointerCapture(event.pointerId);
const rect = event.currentTarget.getBoundingClientRect();
brushAdjustRef.current = {
active: true,
pointerId: event.pointerId,
startX: event.clientX,
startSize: brushSize,
previewX: event.clientX - rect.left,
previewY: event.clientY - rect.top,
previewX: event.clientX,
previewY: event.clientY,
};
updateBrushPreview(event, brushSize, true);
return;
@@ -120,7 +119,7 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
setBrushPreview({
x: brushAdjust.previewX,
y: brushAdjust.previewY,
size: Math.max(4, (nextSize / event.currentTarget.width) * event.currentTarget.getBoundingClientRect().width),
size: nextSize,
adjusting: true,
});
return;
@@ -218,38 +217,43 @@ export function CanvasNodeMaskEditDialog({ dataUrl, open, onClose, onConfirm }:
>
<div className="relative" style={viewport.contentStyle}>
<div ref={viewport.stageRef} className="absolute isolate overflow-hidden rounded-lg bg-transparent select-none [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
<img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain [backface-visibility:hidden]" draggable={false} />
{image ? (
<>
<canvas ref={maskCanvasRef} width={image.width} height={image.height} className="hidden" />
<canvas
ref={previewCanvasRef}
width={image.width}
height={image.height}
className="absolute inset-0 h-full w-full cursor-none touch-none [backface-visibility:hidden]"
onPointerDown={startDraw}
onPointerMove={moveDraw}
onPointerUp={stopDraw}
onPointerCancel={stopDraw}
onPointerEnter={(event) => updateBrushPreview(event)}
onPointerLeave={() => {
if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
}}
onContextMenu={(event) => event.preventDefault()}
/>
{brushPreview ? (
<div
className={`pointer-events-none absolute z-10 rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
style={{ left: brushPreview.x, top: brushPreview.y, width: brushPreview.size, height: brushPreview.size, transform: "translate(-50%, -50%)" }}
>
{brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
</div>
) : null}
<div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
<img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full bg-transparent object-contain" draggable={false} />
<canvas
ref={previewCanvasRef}
width={image.width}
height={image.height}
className="absolute inset-0 h-full w-full cursor-none touch-none"
onPointerDown={startDraw}
onPointerMove={moveDraw}
onPointerUp={stopDraw}
onPointerCancel={stopDraw}
onPointerEnter={(event) => updateBrushPreview(event)}
onPointerLeave={() => {
if (!drawingRef.current.active && !brushAdjustRef.current?.active) setBrushPreview(null);
}}
onContextMenu={(event) => event.preventDefault()}
/>
</div>
</>
) : null}
</div>
</div>
</div>
{brushPreview
? createPortal(
<div
className={`pointer-events-none fixed z-[1100] rounded-full border-2 ${brushPreview.adjusting ? "border-[#fbbf24] bg-black/10" : "border-white/90 bg-black/5"} shadow-[0_0_0_1px_rgba(0,0,0,.8)]`}
style={{ left: brushPreview.x, top: brushPreview.y, width: Math.max(4, brushPreview.size * viewport.imageScale), aspectRatio: 1, transform: "translate(-50%, -50%)" }}
>
{brushPreview.adjusting ? <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-black/75 px-1.5 py-0.5 text-xs font-semibold text-white">{brushSize}px</span> : null}
</div>,
document.body,
)
: null}
<div className="flex min-h-[360px] flex-col gap-5">
<div>
web/src/components/canvas/canvas-node-split-dialog.tsx
+3 -1
View File
@@ -162,7 +162,9 @@ export function CanvasNodeSplitDialog({ dataUrl, open, onClose, onConfirm }: { d
>
<div className="relative" style={viewport.contentStyle}>
<div ref={previewRef} className="absolute isolate overflow-hidden rounded-lg bg-black [backface-visibility:hidden] [contain:layout_paint] [transform:translateZ(0)]" style={viewport.stageStyle}>
<img src={dataUrl} alt="" className="absolute inset-0 block h-full w-full object-contain [backface-visibility:hidden]" draggable={false} />
<div className="absolute left-0 top-0 [backface-visibility:hidden]" style={viewport.mediaStyle}>
<img src={dataUrl} alt="" className="block h-full w-full object-contain" draggable={false} />
</div>
<SplitGrid horizontalLines={horizontalLines} verticalLines={verticalLines} active={active} onPointerDown={startDrag} />
</div>
</div>
web/src/components/canvas/use-image-editor-viewport.ts
+26 -12
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";
import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent } from "react";
type ImageSize = { width: number; height: number };
@@ -11,6 +11,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
const viewportNodeRef = useRef<HTMLDivElement>(null);
const stageRef = useRef<HTMLDivElement>(null);
const panRef = useRef<{ pointerId: number; x: number; y: number; scrollLeft: number; scrollTop: number } | null>(null);
const zoomAnchorRef = useRef<{ zoom: number; ratioX: number; ratioY: number; viewportX: number; viewportY: number } | null>(null);
const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);
const [viewportSize, setViewportSize] = useState<ImageSize>({ width: 0, height: 0 });
const [zoom, setZoom] = useState(minZoom);
@@ -23,7 +24,9 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
}, []);
useEffect(() => {
if (open) setZoom(minZoom);
if (!open) return;
zoomAnchorRef.current = null;
setZoom(minZoom);
}, [open, image?.width, image?.height]);
useEffect(() => {
@@ -85,6 +88,19 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
top: Math.max(0, Math.round((contentSize.height - stageSize.height) / 2)),
};
useLayoutEffect(() => {
const viewport = viewportNodeRef.current;
const anchor = zoomAnchorRef.current;
if (!viewport || !anchor || Math.abs(anchor.zoom - zoom) > 0.001) return;
const nextWidth = baseSize.width * zoom;
const nextHeight = baseSize.height * zoom;
const nextLeft = Math.max(0, (Math.max(viewport.clientWidth, nextWidth) - nextWidth) / 2);
const nextTop = Math.max(0, (Math.max(viewport.clientHeight, nextHeight) - nextHeight) / 2);
viewport.scrollLeft = nextLeft + anchor.ratioX * nextWidth - anchor.viewportX;
viewport.scrollTop = nextTop + anchor.ratioY * nextHeight - anchor.viewportY;
zoomAnchorRef.current = null;
}, [baseSize.height, baseSize.width, zoom]);
const setZoomAround = useCallback(
(nextZoom: number, clientX?: number, clientY?: number) => {
const viewport = viewportNodeRef.current;
@@ -103,17 +119,8 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
const viewportX = pointerX - viewportRect.left;
const viewportY = pointerY - viewportRect.top;
zoomAnchorRef.current = { zoom: boundedZoom, ratioX, ratioY, viewportX, viewportY };
setZoom(boundedZoom);
requestAnimationFrame(() => {
const nextWidth = baseSize.width * boundedZoom;
const nextHeight = baseSize.height * boundedZoom;
const nextContentWidth = Math.max(viewport.clientWidth, nextWidth);
const nextContentHeight = Math.max(viewport.clientHeight, nextHeight);
const nextLeft = Math.max(0, (nextContentWidth - nextWidth) / 2);
const nextTop = Math.max(0, (nextContentHeight - nextHeight) / 2);
viewport.scrollLeft = nextLeft + ratioX * nextWidth - viewportX;
viewport.scrollTop = nextTop + ratioY * nextHeight - viewportY;
});
},
[baseSize.height, baseSize.width, zoom],
);
@@ -177,6 +184,7 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
},
canZoomIn: zoom < maxZoom,
canZoomOut: zoom > minZoom,
imageScale: image ? stageSize.width / image.width : 0,
zoomIn: () => setZoomAround(zoom * zoomStep),
zoomOut: () => setZoomAround(zoom / zoomStep),
resetZoom: () => setZoomAround(minZoom),
@@ -187,6 +195,12 @@ export function useImageEditorViewport(image: ImageSize | null, open: boolean) {
width: stageSize.width,
height: stageSize.height,
} satisfies CSSProperties,
mediaStyle: {
width: baseSize.width,
height: baseSize.height,
transform: `translateZ(0) scale(${zoom})`,
transformOrigin: "top left",
} satisfies CSSProperties,
};
}