From b44e9c775203cc2b4fb65b07529662a53a2ae06e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 11 Nov 2022 20:03:03 +1100
Subject: [PATCH] Changes mask to diagonal line pattern

---
 frontend/src/assets/images/mask_pattern2.png  | Bin 0 -> 1902 bytes
 .../canvas/IAICanvasMaskCompositer.tsx        |  55 ++++++++++++++++--
 2 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/assets/images/mask_pattern2.png

diff --git a/frontend/src/assets/images/mask_pattern2.png b/frontend/src/assets/images/mask_pattern2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b917d0c421fae3006e657806f62c7515f832e9e8
GIT binary patch
literal 1902
zcmb_de@qis96vHQE#RgO1JO)x*TtDYd%YrH&lZFhq|CC~!h|_sNBi2Iw0Gy-RSITo
zf}4TFIMBIh7-nJ^A~H9#p<~0Dj7bcHWSAg=V3={54DiP`U1W3bS|}j0{j=m<d+&Wd
z-_QI0dhaUDnVS}et_VdCWU(>bV1fTy=~?s~{3R#)c?4N-n$F4*b4;5_8|zV0cD4{G
zeI5?tkeB4+C|eN_(L&&)867s>b{<1%yAInLXHuCsJ#f+Kr97~fW@gz+i)<P@mXsK(
z^^s7(14Ih-dEAUZ`gE9ImxS-qGLE5siddw>a!h7a&+-6`Q^qM(SYjxu<?RmAVn~}b
zhBF=J5=D;0@#5lQWpS*M<()X8(P(g$8ds|okf9Jt7?JWR7(p&c1T+jlu<<k}(kz2Y
znp7d{6?GT}adc7~_~>bMMwkpACIXiboKULpnRJnM%tM!uIdsm&imc#bxnKaZwg|#=
z3}O17ZsMc3r;$yjf2Vsqv%(O>)SWO9lS!TB)6@n+RtX1i3lLZ@Zv&}20VB%&nUL~A
znrR<!=NM=YU<8<59Tu;80?eHU)U$4ux5B0ZI*jn!NSPyz9?A)}(st1m)S6!33>fE=
zfaICmE0s2zp<yiQX|0@TOot_?@fq9XJ{1bqf%JQ4V(rkmSij&jWYp`;JnNv{5ECq$
zQcz>6KAzCT$1Bvzzz(ozB($X+B?d}_EVT;uCPBcFMXV>|2vWU1njlD3AXR=gJPUS8
zr2dO9bu_Al7A6y!P75N-m-v?gZEgiS0<*x>P5b*BMg3JKDVvle9mesj-D?AOe^^j1
zfC{WbET(vn?1Tl@VaW~$4bxeInx)P~2_>OY#?7`Ub^)k1e{A@qXSj6Yrd-qFbDY=u
z2{Vo;v<s}kqYv*8Ja~z~N$?s147_`Ic*!*GOkaZ_A-ic<mO14>khRs`>fz{$Em0Sf
zRvvMb9n3q+-EG(rSC}!lc3X<Es3AOIplH0|>yll=3PtOs(W+$$WqEfZxsz{2ryjpy
zX{lWKTWP-az^}D+zx-J{uIcI3^n^Iq)jPVc=6Bw_mu8P??E3L$M4x=|*^Y15b!1yt
z%l5u{f*fMFD|ed)TC)EdJYP={bkp_5$W?E6<+xU<Jy+A`8H)I$>Gs28cfL41{9#yV
z!9eM;uGix~yEH+aS-Nk}_x)J&@v<Ewktb<+bPRs+<L-#dM;~3m@4h0$_AcA-!&RbE
zmA2%4S(=R4xLQB5@Yb4*`<okUh97;B)bZtwrV(#dR7^EyT6Mnh*%NgK8!PJ$9{$wz
z;4xcZI+bK@8Iz@4s{r4L<wegVzIN#Mb~g9uLbLFK^IXQ?_g00sSLHXk+Vfob6$kED
z9lBE9>vgsD{+u?kt!b&SeT8;)vMu~g{DQ7vtiLC5Z|jo0k3RqAz0sF$)!gq6E0C$2
zZOfMqG4N|4<I-~l1POaldP0yRwNY@f&uB=_a_t_y{POdLEsGW;kG*@lwd|b(8Ht@1
zMQ7K<wO!-gU61xyiLa(cSfZt?#!5UGIy`gblsKBTd1`c(?~f3o^ENEEPK`6y<sE|=
ueVHAXr$)@fbfWdApelTkg#Ra*4;~}+pn2@@_6yQ?6fve|8d_4`F8>GS`KSs2

literal 0
HcmV?d00001

diff --git a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
index c3e218eff4..27ee3c0027 100644
--- a/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
+++ b/frontend/src/features/canvas/IAICanvasMaskCompositer.tsx
@@ -1,13 +1,18 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store';
 import { RectConfig } from 'konva/lib/shapes/Rect';
+import _ from 'lodash';
 import { Rect } from 'react-konva';
 import {
   currentCanvasSelector,
   InpaintingCanvasState,
   OutpaintingCanvasState,
 } from './canvasSlice';
+import maskPatternImage from 'assets/images/mask_pattern2.png';
+
 import { rgbaColorToString } from './util/colorToString';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Konva from 'konva';
 
 export const canvasMaskCompositerSelector = createSelector(
   currentCanvasSelector,
@@ -20,6 +25,7 @@ export const canvasMaskCompositerSelector = createSelector(
       stageDimensions,
       stageScale,
       maskColorString: rgbaColorToString(maskColor),
+      maskOpacity: maskColor.a,
     };
   }
 );
@@ -29,18 +35,59 @@ type IAICanvasMaskCompositerProps = RectConfig;
 const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
   const { ...rest } = props;
 
-  const { maskColorString, stageCoordinates, stageDimensions, stageScale } =
-    useAppSelector(canvasMaskCompositerSelector);
+  const {
+    maskColorString,
+    maskOpacity,
+    stageCoordinates,
+    stageDimensions,
+    stageScale,
+  } = useAppSelector(canvasMaskCompositerSelector);
+
+  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);
+    console.log('toggle');
+    console.log('incrementing');
+  }, [offset]);
+
+  useEffect(() => {
+    if (fillPatternImage) return;
+    const image = new Image();
+
+    image.onload = () => {
+      setFillPatternImage(image);
+    };
+
+    image.src = maskPatternImage;
+  }, [fillPatternImage]);
+
+  useEffect(() => {
+    const timer = setInterval(() => setOffset((i) => (i + 1) % 6), 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  if (!fillPatternImage) return null;
 
   return (
     <Rect
+      ref={rectRef}
       offsetX={stageCoordinates.x / stageScale}
       offsetY={stageCoordinates.y / stageScale}
       height={stageDimensions.height / stageScale}
       width={stageDimensions.width / stageScale}
-      fill={maskColorString}
+      fillPatternImage={fillPatternImage}
+      fillPatternOffsetY={offset}
+      fillPatternRepeat={'repeat'}
+      fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
+      listening={true}
+      opacity={maskOpacity}
       globalCompositeOperation={'source-in'}
-      listening={false}
       {...rest}
     />
   );