Merge branches 'master' and 'dev' of github.com:yuanyxh/illustrate in…

…to dev
yuanyxh · Sep 13, 2023 · e60e0d0 · e60e0d0
2 parents 8104833 + 78e7e54
commit e60e0d0
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 32 deletions.
diff --git a/src/components/ExtraInformation/ExtraInformation.tsx b/src/components/ExtraInformation/ExtraInformation.tsx
@@ -55,25 +55,5 @@ export default function ExtraInformation(props: ExtraInformationProps) {
         }
       }}
     </Tip>
-
-    // <div className={style['extra-information']}>
-    //   <h1 className={style['title']}>案例相关链接：</h1>
-
-    //   {/* <div className={style['wrapper']}>
-    //     {Object.keys(platform).map((key) => (
-    //       <div key={key} className={style['group']}>
-    //         <span className={style['platform']}>
-    //           {Platform[key as keyof typeof Platform]}：
-    //         </span>
-
-    //         {platform[key as keyof typeof Platform]?.map(({ title, url }) => (
-    //           <Link key={url} to={url} target="_blank">
-    //             <Text type="primary">{title}</Text>
-    //           </Link>
-    //         ))}
-    //       </div>
-    //     ))}
-    //   </div> */}
-    // </div>
   );
 }
diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
@@ -34,7 +34,11 @@ export default function Navbar({ toggle }: Readonly<NavbarProps>) {
         ) : (
           <Link style={{ height: '100%' }} to={'/'}>
             <h1 className={style['logo-container']} title="yuanyxh">
-              <img className={style['logo']} src="/logo.png" alt="logo" />
+              <img
+                className={style['logo']}
+                src="/illustrate/logo.png"
+                alt="logo"
+              />
 
               <Text className={style['logo-text']} block size="large">
                 yuanyxh

diff --git a/src/layout/Sidebar.module.css b/src/layout/Sidebar.module.css
@@ -3,7 +3,7 @@
   top: var(--navbar-height);
   bottom: 0;
   left: 0;
-  z-index: calc(var(--z-index-highest) + var(--z-index-important));
+  z-index: calc(var(--z-index-important) + var(--z-index-important));
   padding: 20px 5px;
   width: var(--sidebar-width);
   transition: transform var(--transition-duration);

diff --git a/src/pages/GIF-Explorer/GIF-Explorer.tsx b/src/pages/GIF-Explorer/GIF-Explorer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import ExtraInformation from '@/components/ExtraInformation/ExtraInformation';
 import GIFVideo from './GIFVideo';
 import GIFPicture from './GIFPicture';
 import GIFPlayer from './GIFPlayer';
@@ -9,6 +10,20 @@ import style from './GIF-Explorer.module.css';
 export default function GIFExplorer() {
   return (
     <div className={style['gif-explorer']}>
+      <ExtraInformation
+        platform={{
+          blog: {
+            title: '深入浅出 GIF',
+            url: 'https://yuanyxh.com/posts/produce/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA%20GIF.html'
+          },
+          juejin: { url: 'https://juejin.cn/post/7277831097391775755' },
+          zhihu: { url: 'https://zhuanlan.zhihu.com/p/655933856' },
+          csdn: {
+            url: 'https://blog.csdn.net/yuanfgbb/article/details/132845424?spm=1001.2014.3001.5502'
+          }
+        }}
+      />
+
       <GIFVideo />
 
       <GIFPicture />

diff --git a/src/pages/GIF-Explorer/GIFPlayer.tsx b/src/pages/GIF-Explorer/GIFPlayer.tsx
@@ -132,6 +132,7 @@ export default function GIFPlayer() {
           setCursor(0);
           setViews((prev) => ++prev);
         } else {
+          setPlay(false);
           window.clearTimeout(timer);
         }
       } else {

diff --git a/src/pages/GIF-Explorer/gif/GIFDecoder.ts b/src/pages/GIF-Explorer/gif/GIFDecoder.ts
@@ -220,6 +220,7 @@ class GIFDecoder {
   }
 
   private parseApplicationExtension(bytes: Uint8Array) {
+    const cursor = this.cursor;
     this.cursor += APPLICATION_EXTENSION.length;
 
     const len = bytes[this.cursor++];
@@ -233,6 +234,7 @@ class GIFDecoder {
 
     this.pattern.applicationExtension = {
       id,
+      cursor,
       application,
       loop
     };
@@ -279,6 +281,8 @@ class GIFDecoder {
   }
 
   private parsePlainTextExtension(bytes: Uint8Array) {
+    const cursor = this.cursor;
+
     this.cursor += PLAIN_TEXT_EXTENSION.length;
     this.cursor++;
 
@@ -307,6 +311,7 @@ class GIFDecoder {
 
     this.pattern.plainTextExtension.push({
       index: this.index++,
+      cursor: cursor,
       offsetLeft,
       offsetTop,
       gridWidth,
@@ -326,6 +331,8 @@ class GIFDecoder {
   }
 
   private parseCommentExtension(bytes: Uint8Array) {
+    const cursor = this.cursor;
+
     this.cursor += COMMENT_EXTENSION.length;
 
     const blocks = this.parseSubBlocks(bytes);
@@ -342,10 +349,16 @@ class GIFDecoder {
       this.pattern.commentExtension = [];
     }
 
-    this.pattern.commentExtension.push({ index: this.index++, comments });
+    this.pattern.commentExtension.push({
+      index: this.index++,
+      cursor: cursor,
+      comments
+    });
   }
 
   private parseImage(bytes: Uint8Array) {
+    const cursor = this.cursor;
+
     const offsetLeft = this.parseShort(bytes);
     const offsetTop = this.parseShort(bytes);
     const width = this.parseShort(bytes);
@@ -374,6 +387,7 @@ class GIFDecoder {
 
     this.pattern.frames.push({
       index: this.index++,
+      cursor: cursor,
       offsetLeft,
       offsetTop,
       width,

diff --git a/src/pages/GIF-Explorer/gif/encoder.worker.ts b/src/pages/GIF-Explorer/gif/encoder.worker.ts
@@ -118,7 +118,7 @@ function encoder(e: MessageEvent<ImageOptions>) {
 
   // 初始化可变代码大小、前缀、当前输入 k
   let codeSize = lzwMiniCodeSize + 1;
-  let perfix: number[] = [];
+  let prefix: number[] = [];
   let k: number[] = [];
 
   // 初始化输入长度、当前索引 point
@@ -160,7 +160,7 @@ function encoder(e: MessageEvent<ImageOptions>) {
   set(clearCode);
 
   // 取第一个输入作为初始化的当前前缀
-  perfix = [input[point++]];
+  prefix = [input[point++]];
 
   // 初始化查找表
   for (let i = 0; i <= eoiCode; i++) trie.insert([i]);
@@ -171,12 +171,12 @@ function encoder(e: MessageEvent<ImageOptions>) {
     k = [input[point++]];
 
     // 查找表中查找 前缀 + k
-    const current = perfix.concat(k);
+    const current = prefix.concat(k);
     const result = trie.search(current);
 
     // 找到则 前缀 = 前缀 + k
     if (result) {
-      perfix = current;
+      prefix = current;
       k = [];
 
       continue;
@@ -186,13 +186,13 @@ function encoder(e: MessageEvent<ImageOptions>) {
     trie.insert(current);
 
     // 获取前缀对应的码
-    const perfixCode = trie.search(perfix);
+    const prefixCode = trie.search(prefix);
 
     // 添加至码表
-    perfixCode && set(perfixCode.code);
+    prefixCode && set(prefixCode.code);
 
     // 前缀 = k
-    perfix = k;
+    prefix = k;
     // k 重置
     k = [];
 
@@ -216,7 +216,7 @@ function encoder(e: MessageEvent<ImageOptions>) {
   }
 
   // 已完成输出最后的码
-  const val = trie.search(perfix);
+  const val = trie.search(prefix);
   val && set(val.code);
 
   // 输出信息结束码

diff --git a/src/pages/GIF-Explorer/types.d.ts b/src/pages/GIF-Explorer/types.d.ts
@@ -102,6 +102,7 @@ export interface GIFPattern {
   };
   frames: {
     index: number;
+    cursor: number;
     data?: ImageData;
     offsetLeft: number;
     offsetTop: number;
@@ -122,6 +123,7 @@ export interface GIFPattern {
   globalColorTable?: number[][];
   applicationExtension?: {
     id: number;
+    cursor: number;
     application: string;
     loop: number;
   };
@@ -134,6 +136,7 @@ export interface GIFPattern {
   };
   plainTextExtension?: {
     index: number;
+    cursor: number;
     offsetLeft: number;
     offsetTop: number;
     gridWidth: number;
@@ -147,6 +150,7 @@ export interface GIFPattern {
   }[];
   commentExtension?: {
     index: number;
+    cursor: number;
     comments: string;
   }[];
 }
diff --git a/src/styles/preset.css b/src/styles/preset.css
@@ -38,7 +38,7 @@
 .mask {
   position: fixed;
   inset: 0;
-  z-index: var(--z-index-highest);
+  z-index: calc(var(--z-index-important) + var(--z-index-useful));
   background-color: hsla(0deg 100% 0% / 50%);
   backdrop-filter: blur(5px);
   opacity: 0;