root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: edit mask for undo

Browse Source
This commit is contained in:
jialin
2025-03-18 17:15:55 +08:00
parent 08b3c9d1ac
commit 00ef7ab6ca
13 changed files with 200 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/hooks/use-drawing.ts
+41 -4
View File
@@ -24,6 +24,7 @@ export default function useDrawing(props: {
const mouseDownState = useRef<boolean>(false);
const canvasRef = useRef<HTMLCanvasElement>(null);
const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
const offscreenCanvasRef = useRef<any>(null);
const currentStroke = useRef<Point[]>([]);
const strokesRef = useRef<Stroke[]>([]);
const isDrawing = useRef<boolean>(false);
@@ -101,20 +102,29 @@ export default function useDrawing(props: {
onSave({ mask, img });
};
const creatOffscreenCanvas = useCallback(() => {
if (!offscreenCanvasRef.current) {
offscreenCanvasRef.current = document.createElement('canvas');
}
}, []);
const setTransform = useCallback(() => {
creatOffscreenCanvas();
const ctx = canvasRef.current?.getContext('2d');
const overlayCtx = overlayCanvasRef.current?.getContext('2d');
const offCtx = offscreenCanvasRef.current?.getContext('2d');
if (!ctx || !overlayCtx) return;
ctx!.resetTransform();
overlayCtx!.resetTransform();
offCtx!.resetTransform();
const { current: scale } = autoScale;
const { x: translateX, y: translateY } = translatePos.current;
ctx!.setTransform(scale, 0, 0, scale, translateX, translateY);
overlayCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
offCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
}, []);
const getTransformedPoint = useCallback(
@@ -134,9 +144,13 @@ export default function useDrawing(props: {
[]
);
const getTransformLineWidth = useCallback((lineWidth = 1) => {
return lineWidth / autoScale.current;
}, []);
const getTransformLineWidth = useCallback(
(w = 1) => {
const width = w || lineWidth;
return width / autoScale.current;
},
[lineWidth]
);
const drawLine = useCallback(
(
@@ -180,6 +194,7 @@ export default function useDrawing(props: {
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.globalCompositeOperation = compositeOperation;
ctx.save();
ctx.beginPath();
@@ -196,6 +211,7 @@ export default function useDrawing(props: {
ctx.strokeStyle = color;
}
ctx.stroke();
ctx.restore();
},
[getTransformLineWidth, getTransformedPoint]
);
@@ -323,6 +339,9 @@ export default function useDrawing(props: {
const clearOverlayCanvas = useCallback(() => {
const ctx = overlayCanvasRef.current!.getContext('2d');
const offCtx = offscreenCanvasRef.current?.getContext('2d');
offCtx!.resetTransform();
ctx!.resetTransform();
ctx!.clearRect(
0,
@@ -330,33 +349,48 @@ export default function useDrawing(props: {
overlayCanvasRef.current!.width,
overlayCanvasRef.current!.height
);
offCtx!.clearRect(
0,
0,
overlayCanvasRef.current!.width,
overlayCanvasRef.current!.height
);
}, []);
const clearCanvas = useCallback(() => {
const canvas = canvasRef.current!;
const ctx = canvasRef.current!.getContext('2d');
const offCtx = offscreenCanvasRef.current?.getContext('2d');
ctx!.resetTransform();
ctx!.clearRect(0, 0, canvas.width, canvas.height);
offCtx!.resetTransform();
offCtx!.clearRect(0, 0, canvas.width, canvas.height);
}, []);
const resetCanvas = useCallback(() => {
const canvas = canvasRef.current!;
const overlayCanvas = overlayCanvasRef.current!;
const offscreenCanvas = offscreenCanvasRef.current!;
const ctx = canvas.getContext('2d');
const overlayCtx = overlayCanvas.getContext('2d');
const offCtx = offscreenCanvasRef.current?.getContext('2d');
autoScale.current = 1;
baseScale.current = 1;
translatePos.current = { x: 0, y: 0 };
contentPos.current = { x: 0, y: 0 };
canvas.style.transform = 'scale(1)';
overlayCanvas.style.transform = 'scale(1)';
offscreenCanvas.style.transform = 'scale(1)';
cursorRef.current!.style.width = `${lineWidth}px`;
cursorRef.current!.style.height = `${lineWidth}px`;
ctx!.resetTransform();
overlayCtx!.resetTransform();
offCtx!.resetTransform();
}, []);
const fitView = () => {
@@ -366,11 +400,13 @@ export default function useDrawing(props: {
setTransform();
overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
offscreenCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
};
return {
canvasRef,
overlayCanvasRef,
offscreenCanvasRef,
cursorRef,
strokesRef,
currentStroke,
@@ -379,6 +415,7 @@ export default function useDrawing(props: {
autoScale,
baseScale,
maskStorkeRef,
creatOffscreenCanvas,
setMaskStrokes,
fitView,
setStrokes,
src/components/image-editor/hooks/use-zoom.ts
+5 -1
View File
@@ -4,6 +4,7 @@ import { MutableRefObject, useState } from 'react';
export default function useZoom(props: {
overlayCanvasRef: any;
canvasRef: any;
offscreenCanvasRef: any;
cursorRef: any;
lineWidth: number;
autoScale: MutableRefObject<number>;
@@ -16,6 +17,7 @@ export default function useZoom(props: {
const {
overlayCanvasRef,
canvasRef,
offscreenCanvasRef,
cursorRef,
lineWidth,
translatePos,
@@ -34,7 +36,6 @@ export default function useZoom(props: {
return;
}
console.log('Setting transform origin:', autoScale.current);
const rect = overlayCanvasRef.current!.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
@@ -44,6 +45,7 @@ export default function useZoom(props: {
overlayCanvasRef.current!.style.transformOrigin = `${originX * 100}% ${originY * 100}%`;
canvasRef.current!.style.transformOrigin = `${originX * 100}% ${originY * 100}%`;
offscreenCanvasRef.current!.style.transformOrigin = `${originX * 100}% ${originY * 100}%`;
};
const updateZoom = (scaleChange: number, mouseX: number, mouseY: number) => {
@@ -77,6 +79,8 @@ export default function useZoom(props: {
overlayCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
offscreenCanvasRef.current!.style.transform = `scale(${autoScale.current})`;
setCanvasTransformOrigin(event);
updateZoom(scaleChange, mouseX, mouseY);
};
src/components/image-editor/index.tsx
+49 -42
View File
@@ -62,6 +62,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
const {
canvasRef,
overlayCanvasRef,
offscreenCanvasRef,
cursorRef,
strokesRef,
currentStroke,
@@ -79,6 +80,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
handleMouseEnter,
saveImage,
resetCanvas,
creatOffscreenCanvas,
generateMask,
getTransformLineWidth,
getTransformedPoint,
@@ -99,6 +101,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
const { handleOnWheel, setActiveScale, activeScale } = useZoom({
overlayCanvasRef,
canvasRef,
offscreenCanvasRef,
cursorRef,
lineWidth,
translatePos,
@@ -114,9 +117,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
const updateCanvasSize = useCallback(() => {
const canvas = canvasRef.current!;
const overlayCanvas = overlayCanvasRef.current!;
const offscreenCanvas = offscreenCanvasRef.current!;
overlayCanvas.width = canvas.width;
overlayCanvas.height = canvas.height;
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
}, []);
const downloadMask = useCallback(() => {
@@ -135,26 +141,26 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
options: {
lineWidth?: number;
color: string;
isInitial?: boolean;
}
) => {
const { color } = options;
const { color, isInitial } = options;
stroke.forEach((point) => {
const { x, y } = getTransformedPoint(point.x, point.y);
const width = getTransformLineWidth(point.lineWidth);
ctx.save();
// erase the previous stroke
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(x - width / 2, y - width / 2, width, width);
if (isInitial) {
ctx.save();
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(x - width / 2, y - width / 2, width, width);
ctx.restore();
}
// draw the new stroke
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = color;
ctx.fillRect(x - width / 2, y - width / 2, width, width);
ctx.restore();
});
},
[getTransformLineWidth, getTransformedPoint]
@@ -168,27 +174,31 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
console.log('Resetting strokes', currentStroke.current);
}, []);
const loadMaskPixs = (strokes: Stroke[]) => {
clearOverlayCanvas();
const loadMaskPixs = (strokes: Stroke[], isInitial?: boolean) => {
if (!strokes.length) {
return;
}
console.log('loadin mask pixs:');
const overlayCanvas = overlayCanvasRef.current!;
const overlayCtx = overlayCanvas!.getContext('2d')!;
const overlayCtx = overlayCanvas.getContext('2d')!;
setTransform();
strokes?.forEach((stroke: Point[], index) => {
strokes.forEach((stroke: Point[]) => {
drawFillRect(overlayCtx, stroke, {
color: COLOR
color: COLOR,
isInitial: isInitial
});
});
};
const redrawStrokes = (strokes: Stroke[], type?: string) => {
console.log('Redrawing strokes:', strokes, type);
const redrawStrokes = (strokes: Stroke[]) => {
clearOverlayCanvas();
if (!strokes.length) {
setTransform();
console.log(
'Redrawing strokes:',
strokes.length,
maskStorkeRef.current.length
);
if (!strokes.length && !maskStorkeRef.current.length) {
return;
}
@@ -198,8 +208,6 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
// clear offscreen canvas
setTransform();
overlayCtx.save();
loadMaskPixs(maskStorkeRef.current);
strokes?.forEach((stroke: Point[], index) => {
@@ -213,10 +221,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
compositeOperation: 'source-over'
});
});
overlayCtx.restore();
};
const undo = () => {
const undo = useCallback(() => {
if (
strokesRef.current.length === 0 &&
maskStorkeRef.current.length === 0
@@ -225,25 +232,23 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
return;
}
const lastlength = strokesRef.current.length;
const newStrokes = strokesRef.current.slice(0, -1);
setStrokes(newStrokes);
console.log(
'newstrokes=======',
newStrokes.length,
if (
!newStrokes.length &&
lastlength === 0 &&
maskStorkeRef.current.length
);
if (strokesRef.current.length) {
clearTimeout(timer.current);
timer.current = setTimeout(() => {
redrawStrokes(strokesRef.current);
}, 100);
} else if (maskStorkeRef.current.length) {
loadMaskPixs(maskStorkeRef.current);
) {
setMaskStrokes([]);
}
};
clearTimeout(timer.current);
timer.current = setTimeout(() => {
redrawStrokes(newStrokes);
}, 100);
}, []);
const downloadOriginImage = () => {
const canvas = canvasRef.current!;
@@ -308,7 +313,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
// fit the image to the container
autoScale.current = 1;
creatOffscreenCanvas();
updateCanvasSize();
clearCanvas();
@@ -335,7 +340,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
setTransform();
ctx.globalCompositeOperation = 'destination-out';
strokesRef.current.forEach((stroke) => {
[...strokesRef.current, ...maskStorkeRef.current].forEach((stroke) => {
stroke.forEach((point: Point) => {
const { x, y } = getTransformedPoint(point.x, point.y);
const lineWidth = getTransformLineWidth(point.lineWidth);
@@ -369,14 +374,14 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
onReset();
resetCanvas();
} else if (
strokesRef.current.length &&
(strokesRef.current.length || maskStorkeRef.current.length) &&
imageStatus.isOriginal &&
!invertMask
) {
redrawStrokes(strokesRef.current);
saveImage();
} else if (
strokesRef.current.length &&
(strokesRef.current.length || maskStorkeRef.current.length) &&
imageStatus.isOriginal &&
invertMask
) {
@@ -456,7 +461,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
loadMaskPixs(strokes: Stroke[]) {
setMaskStrokes(strokes);
setStrokes([]);
loadMaskPixs(strokes);
setTransform();
clearOverlayCanvas();
loadMaskPixs(strokes, true);
}
}));