feat: 添加数据流为多张图片的兼容逻辑

silx-kit · Feb 14, 2025 · 8e1c87a · 8e1c87a
1 parent 8bdea9f
commit 8e1c87a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 10 deletions.
diff --git a/packages/app/src/vis-packs/core/raw/RawVisContainer.tsx b/packages/app/src/vis-packs/core/raw/RawVisContainer.tsx
@@ -25,6 +25,12 @@ function RawVisContainer(props: VisContainerProps) {
         dataset={entity}
         render={(value) => {
           const isImage = value instanceof Uint8Array && isBinaryImage(value);
+          // 判断是否多张图片
+          const isImageArray =
+            Array.isArray(value) &&
+            value.length > 0 &&
+            value[0] instanceof Uint8Array &&
+            isBinaryImage(value[0]);
 
           return (
             <>
@@ -42,9 +48,10 @@ function RawVisContainer(props: VisContainerProps) {
                   toolbarContainer,
                 )}
 
-              {isImage ? (
+              {isImage || isImageArray ? (
                 <RawImageVis
                   className={visualizerStyles.vis}
+                  type={isImageArray ? 'array' : 'single'}
                   value={value}
                   title={entity.name}
                   fit={config.fitImage}

diff --git a/packages/lib/src/vis/raw/RawImageVis.module.css b/packages/lib/src/vis/raw/RawImageVis.module.css
@@ -8,9 +8,15 @@
   display: block;
 }
 
+.imageDiv {
+  display: flex;
+}
+
 .img[data-fit] {
   max-width: 100%;
   max-height: 100%;
+  min-width: 600px;
+  min-height: 600px;
 }
 
 .img:not([data-fit]) {

diff --git a/packages/lib/src/vis/raw/RawImageVis.tsx b/packages/lib/src/vis/raw/RawImageVis.tsx
@@ -1,24 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 import { type ClassStyleAttrs } from '../models';
 import styles from './RawImageVis.module.css';
 
 interface Props extends ClassStyleAttrs {
-  value: Uint8Array;
+  value: Uint8Array | Uint8Array[];
   title?: string;
   fit?: boolean;
+  // 图像数据流可能单个也可能是数组
+  type?: 'single' | 'array';
 }
 
 function RawImageVis(props: Props) {
-  const { value, title, fit, className = '', style } = props;
+  const { value, title, fit, className = '', style, type } = props;
+  const [nowCount, setNowCount] = useState(0);
+  const timer = useRef<null | NodeJS.Timeout>(null);
+
+  const handleAuto = useCallback(() => {
+    if (timer.current !== null) {
+      clearInterval(timer.current);
+    }
+    timer.current = setInterval(() => {
+      setNowCount((prev) => {
+        if (prev === (value as Uint8Array[]).length - 1) {
+          return 0;
+        }
+        return prev + 1;
+      });
+    }, 500);
+  }, [value]);
+
+  useEffect(() => {
+    if (type === 'array') {
+      handleAuto();
+      return () => {
+        if (timer.current !== null) {
+          clearInterval(timer.current);
+        }
+      };
+    }
+    return () => {};
+  }, [handleAuto, type]);
 
+  let nowImage = '';
+  if (type === 'array') {
+    nowImage = URL.createObjectURL(new Blob([value[nowCount] as Uint8Array]));
+  } else {
+    nowImage = URL.createObjectURL(new Blob([value as Uint8Array]));
+  }
   return (
     <div className={`${styles.root} ${className}`} style={style}>
-      <img
-        className={styles.img}
-        src={URL.createObjectURL(new Blob([value]))}
-        alt={title}
-        data-keep-colors
-        data-fit={fit || undefined}
-      />
+      <div className={styles.imageDiv}>
+        <img
+          className={styles.img}
+          src={nowImage}
+          alt={title}
+          data-keep-colors
+          data-fit={fit || undefined}
+        />
+      </div>
     </div>
   );
 }