From a95128f5f2a55f63c4583b2fd2c6a1c58ad6a9e1 Mon Sep 17 00:00:00 2001
From: Josh Corbett <joshwcorbett@icloud.com>
Date: Tue, 5 Mar 2024 18:08:32 -0700
Subject: [PATCH] refactor: :pencil2: canvas mask compositor naming

changes `...MaskCompositer` spelling to `...MaskCompositor`
---
 .../features/canvas/components/IAICanvas.tsx  |  4 +-
 .../components/IAICanvasMaskCompositer.tsx    | 92 -------------------
 2 files changed, 2 insertions(+), 94 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
index ac9d008e21..c08b70a783 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
@@ -29,7 +29,7 @@ import { Layer, Stage } from 'react-konva';
 import IAICanvasBoundingBoxOverlay from './IAICanvasBoundingBoxOverlay';
 import IAICanvasGrid from './IAICanvasGrid';
 import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
-import IAICanvasMaskCompositer from './IAICanvasMaskCompositer';
+import IAICanvasMaskCompositor from './IAICanvasMaskCompositor';
 import IAICanvasMaskLines from './IAICanvasMaskLines';
 import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
 import IAICanvasStagingArea from './IAICanvasStagingArea';
@@ -176,7 +176,7 @@ const IAICanvas = () => {
           </Layer>
           <Layer id="mask" visible={isMaskEnabled && !isStaging} listening={false}>
             <IAICanvasMaskLines visible={true} listening={false} />
-            <IAICanvasMaskCompositer listening={false} />
+            <IAICanvasMaskCompositor listening={false} />
           </Layer>
           <Layer listening={false}>
             <IAICanvasBoundingBoxOverlay />
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
deleted file mode 100644
index 4fedcaec75..0000000000
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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 IAICanvasMaskCompositerProps = RectConfig;
-
-const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
-  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(IAICanvasMaskCompositer);