fix: model filter by worker
This commit is contained in:
@@ -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(
|
||||
(
|
||||
|
||||
@@ -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[]) => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user