From b8bb46042c5fe6ed50777feb4ca10f7f81666a56 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 11 Nov 2022 20:49:15 +1100 Subject: [PATCH] SVG mask --- frontend/src/assets/images/mask.svg | 77 +++++++++++++ frontend/src/assets/images/mask_pattern2.png | Bin 1902 -> 0 bytes .../canvas/IAICanvasMaskCompositer.tsx | 102 ++++++++++++++++-- 3 files changed, 170 insertions(+), 9 deletions(-) create mode 100644 frontend/src/assets/images/mask.svg delete mode 100644 frontend/src/assets/images/mask_pattern2.png 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 b917d0c421fae3006e657806f62c7515f832e9e8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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=mbV1fTy=~?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)a!h7a&+-6`Q^qM(SYjxubMMwkpACIXiboKULpnRJnM%tM!uIdsm&imc#bxnKaZwg|#= z3}O17ZsMc3r;$yjf2Vsqv%(O>)SWO9lS!TB)6@n+RtX1i3lLZ@Zv&}20VB%&nUL~A znrRfE= zfaICmE0s2zp6KAzCT$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;vkhRs`>fz{$Em0Sf zRvvMb9n3q+-EG(rSC}!lc3Xyll=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<+xUGs28cfL41{9#yV z!9eM;uGix~yEH+aS-Nk}_x)J&@vvgsD{+u?kt!b&SeT8;)vMu~g{DQ7vtiLC5Z|jo0k3RqAz0sF$)!gq6E0C$2 zZOfMqG4N|4GS`KSs2 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'}