From 458e7185b85a4de54ceab926641e48f7e4f9d3f2 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Tue, 5 Mar 2024 19:21:45 -0700
Subject: [PATCH] fix: :bug: didn't include renamed file

---
 .../components/IAICanvasMaskCompositor.tsx    | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositor.tsx

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositor.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositor.tsx
new file mode 100644
index 0000000000..a339cf5352
--- /dev/null
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositor.tsx
@@ -0,0 +1,92 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import { rgbaColorToString } from 'features/canvas/util/colorToString';
+import { getColoredMaskSVG } from 'features/canvas/util/getColoredMaskSVG';
+import type Konva from 'konva';
+import type { RectConfig } from 'konva/lib/shapes/Rect';
+import { isNumber } from 'lodash-es';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Rect } from 'react-konva';
+
+const canvasMaskCompositerSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return {
+    stageCoordinates: canvas.stageCoordinates,
+    stageDimensions: canvas.stageDimensions,
+  };
+});
+
+type IAICanvasMaskCompositorProps = RectConfig;
+
+const IAICanvasMaskCompositor = (props: IAICanvasMaskCompositorProps) => {
+  const { ...rest } = props;
+
+  const { stageCoordinates, stageDimensions } = useAppSelector(canvasMaskCompositerSelector);
+  const stageScale = useAppSelector((s) => s.canvas.stageScale);
+  const maskColorString = useAppSelector((s) => rgbaColorToString(s.canvas.maskColor));
+  const [fillPatternImage, setFillPatternImage] = useState<HTMLImageElement | null>(null);
+
+  const [offset, setOffset] = useState<number>(0);
+
+  const rectRef = useRef<Konva.Rect>(null);
+  const incrementOffset = useCallback(() => {
+    setOffset(offset + 1);
+    setTimeout(incrementOffset, 500);
+  }, [offset]);
+
+  useEffect(() => {
+    if (fillPatternImage) {
+      return;
+    }
+    const image = new Image();
+
+    image.onload = () => {
+      setFillPatternImage(image);
+    };
+    image.src = getColoredMaskSVG(maskColorString);
+  }, [fillPatternImage, maskColorString]);
+
+  useEffect(() => {
+    if (!fillPatternImage) {
+      return;
+    }
+    fillPatternImage.src = getColoredMaskSVG(maskColorString);
+  }, [fillPatternImage, maskColorString]);
+
+  useEffect(() => {
+    const timer = setInterval(() => setOffset((i) => (i + 1) % 5), 50);
+    return () => clearInterval(timer);
+  }, []);
+
+  const fillPatternScale = useMemo(() => ({ x: 1 / stageScale, y: 1 / stageScale }), [stageScale]);
+
+  if (
+    !fillPatternImage ||
+    !isNumber(stageCoordinates.x) ||
+    !isNumber(stageCoordinates.y) ||
+    !isNumber(stageScale) ||
+    !isNumber(stageDimensions.width) ||
+    !isNumber(stageDimensions.height)
+  ) {
+    return null;
+  }
+
+  return (
+    <Rect
+      ref={rectRef}
+      offsetX={stageCoordinates.x / stageScale}
+      offsetY={stageCoordinates.y / stageScale}
+      height={stageDimensions.height / stageScale}
+      width={stageDimensions.width / stageScale}
+      fillPatternImage={fillPatternImage}
+      fillPatternOffsetY={!isNumber(offset) ? 0 : offset}
+      fillPatternRepeat="repeat"
+      fillPatternScale={fillPatternScale}
+      listening={true}
+      globalCompositeOperation="source-in"
+      {...rest}
+    />
+  );
+};
+
+export default memo(IAICanvasMaskCompositor);