feat: add bizID

alibaba · Aug 2, 2023 · 0edc4bd · 0edc4bd
1 parent b04ef65
commit 0edc4bd
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/examples/cavans-project/src/pages/home.tsx b/examples/cavans-project/src/pages/home.tsx
@@ -24,13 +24,15 @@ export default function Home() {
       setTimeout(() => {
         console.log('canvas paint ready!');
         resolve(true);
-      }, 5000);
+      }, 10000);
     });
   };
+
   return (
     <>
       <h2 className={styles.title}>Home Page</h2>
       <CacheCanvas
+        bizID={'test'}
         ref={childRef}
         id={GAME_CANVAS_ID}
         init={initFunc}

diff --git a/packages/cache-canvas/src/index.tsx b/packages/cache-canvas/src/index.tsx
@@ -36,6 +36,7 @@ export type RefCacheCanvas = {
 
 export type CacheCanvasProps = {
   id: string;
+  bizID: string;
   init: () => Promise<any>;
   useCache?: Boolean;
   getSnapshot?: () => String;
@@ -53,6 +54,7 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     fallback,
     style,
     className,
+    bizID = '',
     ...rest
   } = props;
 
@@ -72,9 +74,11 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
     }
     // Cache base64 string when canvas rendered.
     if (renderedCanvas && strBase64) {
-      Storage.setItem(cacheKey, strBase64);
+      Storage.setItem(cacheKey, strBase64, {
+        bizID,
+      });
     }
-  }, [id, renderedCanvas, cacheKey, getSnapshot]);
+  }, [id, renderedCanvas, cacheKey, getSnapshot, bizID]);
 
   useImperativeHandle(ref, () => ({
     cacheCanvasToStorage: cacheCanvasFunc,
@@ -129,13 +133,13 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
           <img
             className={className}
             style={style}
-            src={Storage.getItem(cacheKey) || ''}
+            src={Storage.getItem(cacheKey, { bizID }) || ''}
             id={`canvas-img-${id}`}
           />
           {
             (typeof fallback === 'function') && (<div
               id={`fallback-${id}`}
-              style={isNode || Storage.getItem(cacheKey) ? { display: 'none' } : { display: 'block' }}
+              style={isNode || Storage.getItem(cacheKey, { bizID }) ? { display: 'none' } : { display: 'block' }}
             >
               {
                 fallback()
@@ -156,7 +160,7 @@ export const CacheCanvas = forwardRef((props: CacheCanvasProps, ref) => {
                     });
             
                     if (canIUse) {
-                      const res = window.__megability_bridge__.syncCall('userKVStorage', 'getItem', { key: '${cacheKey}' });
+                      const res = window.__megability_bridge__.syncCall('userKVStorage', 'getItem', { key: '${cacheKey}',  bizID: '${bizID}' });
                       if (res && res.statusCode === 0 && res.data && res.data.result) {
                         base64Data = res.data.result;
                       }

diff --git a/packages/cache-canvas/src/storage.tsx b/packages/cache-canvas/src/storage.tsx
@@ -1,7 +1,7 @@
 const cache = {};
 
 export const Storage = {
-  setItem: (key, value) => {
+  setItem: (key, value, { bizID = '' }) => {
     try {
       if (
         typeof window !== 'undefined' &&
@@ -17,6 +17,7 @@ export const Storage = {
           const res = window.__megability_bridge__.syncCall('userKVStorage', 'setItem', {
             key,
             value,
+            bizID,
           });
           if (res && res.statusCode === 0) {
             return;
@@ -33,7 +34,7 @@ export const Storage = {
       console.error('Storage setItem error:', e);
     }
   },
-  getItem: (key) => {
+  getItem: (key, { bizID = '' }) => {
     try {
       if (
         typeof window !== 'undefined' &&
@@ -46,7 +47,13 @@ export const Storage = {
         });
 
         if (canIUse) {
-          const res = window.__megability_bridge__.syncCall('userKVStorage', 'getItem', { key });
+          const res = window.__megability_bridge__.syncCall(
+            'userKVStorage',
+            'getItem',
+            {
+              key,
+              bizID,
+            });
           if (res && res.statusCode === 0 && res.data && res.data.result) {
             return res.data.result;
           }