diff --git a/frontend/src/assets/images/mask.svg b/frontend/src/assets/images/mask.svg
new file mode 100644
index 0000000000..8cc4bee424
--- /dev/null
+++ b/frontend/src/assets/images/mask.svg
@@ -0,0 +1,77 @@
+
+
+
diff --git a/frontend/src/assets/images/mask_pattern2.png b/frontend/src/assets/images/mask_pattern2.png
deleted file mode 100644
index b917d0c421..0000000000
Binary files a/frontend/src/assets/images/mask_pattern2.png and /dev/null differ
diff --git a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
index 27ee3c0027..9a09ef7572 100644
--- a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
+++ b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
@@ -8,7 +8,6 @@ import {
InpaintingCanvasState,
OutpaintingCanvasState,
} from './canvasSlice';
-import maskPatternImage from 'assets/images/mask_pattern2.png';
import { rgbaColorToString } from './util/colorToString';
import { useCallback, useEffect, useRef, useState } from 'react';
@@ -32,6 +31,86 @@ export const canvasMaskCompositerSelector = createSelector(
type IAICanvasMaskCompositerProps = RectConfig;
+const getColoredSVG = (color: string) => {
+ return `data:image/svg+xml;utf8,`.replaceAll('black', color);
+};
+
const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
const { ...rest } = props;
@@ -52,8 +131,6 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
const incrementOffset = useCallback(() => {
setOffset(offset + 1);
setTimeout(incrementOffset, 500);
- console.log('toggle');
- console.log('incrementing');
}, [offset]);
useEffect(() => {
@@ -63,14 +140,21 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
image.onload = () => {
setFillPatternImage(image);
};
-
- image.src = maskPatternImage;
- }, [fillPatternImage]);
+ image.src = getColoredSVG(maskColorString);
+ }, [fillPatternImage, maskColorString]);
useEffect(() => {
- const timer = setInterval(() => setOffset((i) => (i + 1) % 6), 100);
+ if (!fillPatternImage) return;
+ fillPatternImage.src = getColoredSVG(maskColorString);
+ }, [fillPatternImage, maskColorString]);
+
+ useEffect(() => {
+ const timer = setInterval(
+ () => setOffset((i) => (i + 2) % Number(fillPatternImage?.width)),
+ 100
+ );
return () => clearInterval(timer);
- }, []);
+ }, [fillPatternImage?.width]);
if (!fillPatternImage) return null;
@@ -84,7 +168,7 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
fillPatternImage={fillPatternImage}
fillPatternOffsetY={offset}
fillPatternRepeat={'repeat'}
- fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
+ fillPatternScale={{ x: 0.5 / stageScale, y: 0.5 / stageScale }}
listening={true}
opacity={maskOpacity}
globalCompositeOperation={'source-in'}