fix: model filter by worker

This commit is contained in:
jialin
2025-04-01 10:56:50 +08:00
parent eff88528d3
commit 7e8b5f1f63
12 changed files with 72 additions and 182 deletions
@@ -127,32 +127,26 @@ export default function useDrawing(props: {
offCtx!.setTransform(scale, 0, 0, scale, translateX, translateY);
}, []);
const getTransformedPoint = useCallback(
(offsetX: number, offsetY: number) => {
const { current: scale } = autoScale;
console.log('lineWidth:----------', lineWidth, autoScale.current);
const getTransformedPoint = (offsetX: number, offsetY: number) => {
const { current: scale } = autoScale;
console.log('lineWidth:----------', lineWidth, autoScale.current);
const { x: translateX, y: translateY } = translatePos.current;
const { x: translateX, y: translateY } = translatePos.current;
const transformedX = (offsetX - translateX) / scale;
const transformedY = (offsetY - translateY) / scale;
const transformedX = (offsetX - translateX) / scale;
const transformedY = (offsetY - translateY) / scale;
return {
x: transformedX,
y: transformedY
};
},
[]
);
return {
x: transformedX,
y: transformedY
};
};
const getTransformLineWidth = useCallback(
(w = 1) => {
console.log('lineWidth:', lineWidth, autoScale.current);
const width = w || lineWidth;
return width / autoScale.current;
},
[lineWidth]
);
const getTransformLineWidth = (w = 1) => {
console.log('lineWidth:', lineWidth, autoScale.current);
const width = w || lineWidth;
return width / autoScale.current;
};
const drawLine = useCallback(
(
+30 -30
View File
@@ -27,6 +27,7 @@ const LoadWrapper = styled.div<{ width?: number; height?: number }>`
width: ${(props) => `${props.width}px` || '100%'};
z-index: 100;
`;
const Loading = (props: { width: number; height: number }) => {
const { width, height } = props;
return (
@@ -161,37 +162,35 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
link.click();
}, [generateMask]);
const drawFillRect = useCallback(
(
ctx: CanvasRenderingContext2D,
stroke: Stroke | Point[],
options: {
lineWidth?: number;
color: string;
isInitial?: boolean;
}
) => {
const { color, isInitial } = options;
const drawFillRect = (
ctx: CanvasRenderingContext2D,
stroke: Stroke | Point[],
options: {
lineWidth?: number;
color: string;
isInitial?: boolean;
}
) => {
const { color, isInitial } = options;
stroke.forEach((point) => {
const { x, y } = getTransformedPoint(point.x, point.y);
const width = getTransformLineWidth(point.lineWidth);
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;
stroke.forEach((point) => {
const { x, y } = getTransformedPoint(point.x, point.y);
const width = getTransformLineWidth(point.lineWidth);
console.log('Drawing stroke:', point, 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);
});
},
[getTransformLineWidth, getTransformedPoint]
);
ctx.restore();
}
// draw the new stroke
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = color;
ctx.fillRect(x - width / 2, y - width / 2, width, width);
});
};
const onReset = useCallback(() => {
clearOverlayCanvas();
@@ -210,12 +209,13 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
const overlayCanvas = overlayCanvasRef.current!;
const overlayCtx = overlayCanvas.getContext('2d')!;
strokes.forEach((stroke: Point[]) => {
strokes.forEach((stroke: Point[], index) => {
drawFillRect(overlayCtx, stroke, {
color: COLOR,
isInitial: isInitial
});
});
console.log('Loading mask pixels-------:');
};
const redrawStrokes = (strokes: Stroke[]) => {
+1 -1
View File
@@ -60,7 +60,7 @@ interface FilterBarProps {
handleClickPrimary: (item: any) => void;
rowSelection: any;
actionItems: ActionItem[];
selectOptions?: Global.BaseListItem<string>[];
selectOptions?: Global.BaseOption<string | number>[];
showSelect?: boolean;
buttonText: string;
buttonIcon?: React.ReactNode;
+12 -12
View File
@@ -87,13 +87,13 @@ const WrapperBox = styled.div`
// wrapper
const InnerWrapper = styled.div.attrs<{
noWrapperStyle?: boolean;
nolabel?: boolean;
$noWrapperStyle?: boolean;
$nolabel?: boolean;
}>((props) => ({
className: classNames({
__wrapper__: true,
'no-wrapper-style': props.noWrapperStyle,
'no-label': props.nolabel
'no-wrapper-style': props.$noWrapperStyle,
'no-label': props.$nolabel
})
}))`
position: relative;
@@ -118,13 +118,13 @@ const InnerWrapper = styled.div.attrs<{
// label
export const Label = styled.div.attrs<{
isFocus?: boolean;
hasPrefix?: boolean;
$isFocus?: boolean;
$hasPrefix?: boolean;
}>((props) => ({
className: classNames({
'isfoucs-has-value': props.isFocus,
'blur-no-value': !props.isFocus,
'has-prefix': props.hasPrefix
'isfoucs-has-value': props.$isFocus,
'blur-no-value': !props.$isFocus,
'has-prefix': props.$hasPrefix
})
}))`
position: absolute;
@@ -204,12 +204,12 @@ const Wrapper: FC<WrapperProps> = ({
return (
<WrapperBox className={wrapperClass}>
<InnerWrapper
noWrapperStyle={noWrapperStyle}
nolabel={!label}
$noWrapperStyle={noWrapperStyle}
$nolabel={!label}
onClick={onClick}
>
{label && (
<Label isFocus={isFocus} hasPrefix={hasPrefix} onClick={onClick}>
<Label $isFocus={isFocus} $hasPrefix={hasPrefix} onClick={onClick}>
<LabelInfo
label={label}
required={required}