Fixes mask for FF

This commit is contained in:
psychedelicious 2022-11-11 21:14:22 +11:00 committed by blessedcoolant
parent 016551e036
commit 0a96d2a888

View File

@ -32,7 +32,9 @@ export const canvasMaskCompositerSelector = createSelector(
type IAICanvasMaskCompositerProps = RectConfig;
const getColoredSVG = (color: string) => {
return `data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
return `data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="60px" height="60px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(0.5,0,0,0.5,0,0)">
<path d="M-3.5,63.5L64,-4" style="fill:none;stroke:black;stroke-width:1px;"/>
</g>
@ -149,12 +151,9 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
}, [fillPatternImage, maskColorString]);
useEffect(() => {
const timer = setInterval(
() => setOffset((i) => (i + 2) % (fillPatternImage?.width || 0)),
100
);
const timer = setInterval(() => setOffset((i) => (i + 1) % 5), 50);
return () => clearInterval(timer);
}, [fillPatternImage?.width]);
}, []);
if (!fillPatternImage) return null;
@ -166,11 +165,10 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
height={stageDimensions.height / stageScale}
width={stageDimensions.width / stageScale}
fillPatternImage={fillPatternImage}
fillPatternOffsetY={offset}
fillPatternOffsetY={isNaN(offset) ? 0 : offset}
fillPatternRepeat={'repeat'}
fillPatternScale={{ x: 0.5 / stageScale, y: 0.5 / stageScale }}
fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
listening={true}
opacity={maskOpacity}
globalCompositeOperation={'source-in'}
{...rest}
/>