fix: clear instances when page hidden

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pz4284jx1rq.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_6x6w1c4c2c.js'
 });
 
 export default IconFont;

src/components/image-editor/index.tsx

@@ -62,6 +62,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   const strokeCache = useRef<any>({});
   const preImguid = useRef<string | number>('');
   const [activeScale, setActiveScale] = useState<number>(1);
+  const negativeMaskRef = useRef<boolean>(false);
 
   const getTransformedPoint = useCallback(
     (offsetX: number, offsetY: number) => {
@@ -159,6 +160,41 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     strokesRef.current = strokes;
   };
 
+  const inpaintArea = useCallback(
+    (data: Uint8ClampedArray<ArrayBufferLike>) => {
+      for (let i = 0; i < data.length; i += 4) {
+        const alpha = data[i + 3];
+        if (alpha > 0) {
+          data[i] = 255; // Red
+          data[i + 1] = 255; // Green
+          data[i + 2] = 255; // Blue
+          data[i + 3] = 255; // Alpha
+        }
+      }
+    },
+    []
+  );
+
+  const inpaintBackground = useCallback(
+    (data: Uint8ClampedArray<ArrayBufferLike>) => {
+      for (let i = 0; i < data.length; i += 4) {
+        const alpha = data[i + 3];
+        if (alpha > 0) {
+          data[i] = 0; // Red
+          data[i + 1] = 0; // Green
+          data[i + 2] = 0; // Blue
+          data[i + 3] = 255; // Alpha
+        } else {
+          data[i] = 255;
+          data[i + 1] = 255;
+          data[i + 2] = 255;
+          data[i + 3] = 255;
+        }
+      }
+    },
+    []
+  );
+
   const generateMask = useCallback(() => {
     if (strokesRef.current.length === 0) {
       return null;
@@ -178,15 +214,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     );
     const data = imageData.data;
 
-    for (let i = 0; i < data.length; i += 4) {
-      const alpha = data[i + 3];
-      if (alpha > 0) {
-        data[i] = 255; // Red
-        data[i + 1] = 255; // Green
-        data[i + 2] = 255; // Blue
-        data[i + 3] = 255; // Alpha
-      }
+    if (negativeMaskRef.current) {
+      inpaintBackground(data);
+    } else {
+      inpaintArea(data);
     }
+
     maskCtx.putImageData(imageData, 0, 0);
 
     maskCtx.globalCompositeOperation = 'destination-over';
@@ -620,6 +653,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     cursorRef.current!.style.width = `${value}px`;
     cursorRef.current!.style.height = `${value}px`;
   };
+
+  const handleOnChangeMask = (e: any) => {
+    negativeMaskRef.current = e.target.checked;
+    saveImage();
+  };
+
   useEffect(() => {
     initializeImage();
   }, [initializeImage]);
@@ -719,6 +758,15 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           </Tooltip>
         </div>
         <div className="tools">
+          {/* <Checkbox
+            onChange={handleOnChangeMask}
+            className="flex-center"
+            value={negativeMaskRef.current}
+          >
+            <span className="font-size-12">
+              {intl.formatMessage({ id: 'playground.image.negativeMask' })}
+            </span>
+          </Checkbox> */}
           <Tooltip
             title={intl.formatMessage({ id: 'playground.image.saveMask' })}
           >

src/components/seal-table/components/table-row.tsx

@@ -197,6 +197,7 @@ const TableRow: React.FC<
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'hidden') {
         cacheDataListRef.current = [];
+        setChildrenData([]);
       }
     };
 
@@ -218,10 +219,6 @@ const TableRow: React.FC<
     };
   }, [firstLoad, expanded, tableContext.allChildren]);
 
-  useEffect(() => {
-    console.log('allSubChildren===', tableContext.allSubChildren);
-  }, [tableContext.allSubChildren]);
-
   const renderRowPrefix = () => {
     if (expandable && rowSelection) {
       return (