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

fix(style): brush can not fully paint the image

Browse Source
This commit is contained in:
jialin
2025-01-19 00:00:15 +08:00
parent 82e8c01b95
commit 4643dbce17
2 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/index.tsx
+20 -8
View File
@@ -20,6 +20,7 @@ type CanvasImageEditorProps = {
disabled?: boolean;
imguid: string | number;
onSave: (imageData: { mask: string | null; img: string }) => void;
onScaleImageSize?: (data: { width: number; height: number }) => void;
uploadButton: React.ReactNode;
imageStatus: {
isOriginal: boolean;
@@ -34,6 +35,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
disabled,
imageStatus,
onSave,
onScaleImageSize,
imguid,
uploadButton
}) => {
@@ -110,8 +112,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}
overlayCanvasRef.current!.style.cursor = 'none';
cursorRef.current!.style.display = 'block';
cursorRef.current!.style.top = `${e.clientY}px`;
cursorRef.current!.style.left = `${e.clientX}px`;
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`;
};
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
@@ -120,8 +122,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
}
overlayCanvasRef.current!.style.cursor = 'none';
cursorRef.current!.style.display = 'block';
cursorRef.current!.style.top = `${e.clientY}px`;
cursorRef.current!.style.left = `${e.clientX}px`;
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`;
};
const handleMouseLeave = () => {
@@ -300,8 +302,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
if (!isDrawing.current) return;
const { offsetX, offsetY } = e.nativeEvent;
const currentX = offsetX + lineWidth / 2;
const currentY = offsetY + lineWidth / 2;
const currentX = offsetX;
const currentY = offsetY;
currentStroke.current.push({
x: currentX,
@@ -336,8 +338,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
currentStroke.current = [];
const { offsetX, offsetY } = e.nativeEvent;
const currentX = offsetX + lineWidth / 2;
const currentY = offsetY + lineWidth / 2;
const currentX = offsetX;
const currentY = offsetY;
currentStroke.current.push({
x: currentX,
@@ -530,6 +532,10 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
setImgLoaded(false);
await drawImage();
onScaleImageSize?.({
width: canvasRef.current!.width,
height: canvasRef.current!.height
});
setImgLoaded(true);
if (strokeCache.current[imguid]) {
@@ -586,9 +592,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
canvasRef.current!.style.transform = `scale(${autoScale.current})`;
};
const updateCursorPosOnZoom = (e: any) => {
cursorRef.current!.style.top = `${e.clientY - (lineWidth / 2) * autoScale.current}px`;
cursorRef.current!.style.left = `${e.clientX - (lineWidth / 2) * autoScale.current}px`;
};
const handleOnWheel = (event: any) => {
handleZoom(event);
updateCursorSize();
updateCursorPosOnZoom(event);
setActiveScale(autoScale.current);
};
src/pages/playground/components/image-edit.tsx
+30 -23
View File
@@ -370,7 +370,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setTokenResult({
error: true,
errorMessage:
result?.data?.error?.message || result?.data?.error || ''
result?.data?.data?.detail ||
result?.data?.error?.message ||
result?.data?.error ||
''
});
setImageList([]);
return;
@@ -627,6 +630,31 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
[modelList, isOpenaiCompatible]
);
const handleOnScaleImageSize = useCallback(
(data: { width: number; height: number }) => {
const { width, height } = data;
form.current?.form?.setFieldsValue({
size: 'custom',
width: width || 512,
height: height || 512
});
setParams((pre: object) => {
return {
...pre,
size: 'custom',
width: width || 512,
height: height || 512
};
});
updateCacheFormData({
size: 'custom',
width: width || 512,
height: height || 512
});
},
[]
);
const handleUpdateImageList = useCallback((base64List: any) => {
console.log('updateimagelist=========', base64List);
const currentImg = _.get(base64List, '[0]', {});
@@ -639,24 +667,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
isResetNeeded: true
});
setImageList([]);
form.current?.form?.setFieldsValue({
size: 'custom',
width: currentImg.rawWidth || 512,
height: currentImg.rawHeight || 512
});
setParams((pre: object) => {
return {
...pre,
size: 'custom',
width: currentImg.rawWidth || 512,
height: currentImg.rawHeight || 512
};
});
updateCacheFormData({
size: 'custom',
width: currentImg.rawWidth || 512,
height: currentImg.rawHeight || 512
});
}, []);
const handleOnSave = useCallback(
@@ -859,9 +869,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
<div
style={{
height: 125,
maxWidth: 125,
maxHeight: 125,
overflow: 'hidden'
maxHeight: 125
}}
key={item.uid}
>
@@ -869,7 +877,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
{...item}
height={125}
maxHeight={125}
maxWidth={125}
preview={item.preview}
loading={item.loading}
autoSize={false}