From fcb9e14b1048295a135fbc7482b3ecdc4ba2154a Mon Sep 17 00:00:00 2001
From: miaobuao <miaobuao@outlook.com>
Date: Thu, 21 Mar 2024 13:42:03 +0800
Subject: [PATCH] feat: switch mode

---
 svelte/src/lib/multi-dim-table/layout.svelte  | 42 +++++++++++++++++--
 svelte/src/lib/multi-dim-table/store.ts       |  6 +++
 .../src/lib/multi-dim-table/table-axis.svelte |  2 +-
 .../lib/multi-dim-table/table-cell-img.svelte | 40 +++++++++---------
 svelte/src/routes/xyz_plot/+page.svelte       | 19 +--------
 5 files changed, 66 insertions(+), 43 deletions(-)

diff --git a/svelte/src/lib/multi-dim-table/layout.svelte b/svelte/src/lib/multi-dim-table/layout.svelte
index 51606de..52c2f61 100644
--- a/svelte/src/lib/multi-dim-table/layout.svelte
+++ b/svelte/src/lib/multi-dim-table/layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { TableMode, imageWidth, mode } from './store';
+
   export let extraItems:
     | undefined
     | {
@@ -7,6 +9,16 @@
       }[] = undefined;
 
   export let sidebarItems: typeof extraItems = undefined;
+
+  let _imageWidth = 50;
+  let _mode = TableMode.View;
+
+  mode.subscribe((v) => {
+    _mode = v;
+  });
+  $: {
+    imageWidth.set(_imageWidth);
+  }
 </script>
 
 <div class="drawer absolute h-full w-full overflow-y-hidden">
@@ -41,14 +53,38 @@
       <div class="flex-none">
         {#if extraItems}
           <ul class="menu menu-horizontal items-center">
-            <slot name="extra" />
+            <li>
+              <div>
+                <input
+                  type="range"
+                  min="30"
+                  max="300"
+                  bind:value={_imageWidth}
+                  class="range"
+                />
+              </div>
+            </li>
+
             {#each extraItems as item}
               <li>
-                <a on:click={item.onClick}>
+                <button on:click={item.onClick}>
                   {item.label}
-                </a>
+                </button>
               </li>
             {/each}
+            <li>
+              <button
+                on:click={() => {
+                  if (_mode === TableMode.Score) {
+                    mode.set(TableMode.View);
+                  } else {
+                    mode.set(TableMode.Score);
+                  }
+                }}
+              >
+                {_mode === TableMode.Score ? 'Score' : 'View'}
+              </button>
+            </li>
           </ul>
         {/if}
       </div>
diff --git a/svelte/src/lib/multi-dim-table/store.ts b/svelte/src/lib/multi-dim-table/store.ts
index f94ee11..06dab0d 100644
--- a/svelte/src/lib/multi-dim-table/store.ts
+++ b/svelte/src/lib/multi-dim-table/store.ts
@@ -2,3 +2,9 @@ import { writable } from 'svelte/store';
 
 export const imageWidth = writable(50);
 export const comfyUrl = writable('');
+
+export enum TableMode {
+  Score,
+  View,
+}
+export const mode = writable(TableMode.View);
diff --git a/svelte/src/lib/multi-dim-table/table-axis.svelte b/svelte/src/lib/multi-dim-table/table-axis.svelte
index f989aa1..6ad26bc 100644
--- a/svelte/src/lib/multi-dim-table/table-axis.svelte
+++ b/svelte/src/lib/multi-dim-table/table-axis.svelte
@@ -6,7 +6,7 @@
 
 <tr>
   <!-- prompts -->
-  <th style="max-width:30vw">{axis.value}</th>
+  <th style="max-width:30vw" class="z-10">{axis.value}</th>
   {#each axis.children as dim2}
     {#if dim2.type === 'axis'}
       <td>
diff --git a/svelte/src/lib/multi-dim-table/table-cell-img.svelte b/svelte/src/lib/multi-dim-table/table-cell-img.svelte
index 1df7980..b94584c 100644
--- a/svelte/src/lib/multi-dim-table/table-cell-img.svelte
+++ b/svelte/src/lib/multi-dim-table/table-cell-img.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ImgResult } from './models';
-  import { comfyUrl, imageWidth } from './store';
+  import { TableMode, comfyUrl, imageWidth, mode } from './store';
   import { db, getScore, getUser, updateScore, type User } from '$lib/db';
   export let value: ImgResult;
   export let width = 100;
@@ -8,14 +8,15 @@
   let api = '';
   comfyUrl.subscribe((d) => (api = d));
 
-  let hover = false;
   let like = false;
+  let _mode = TableMode.View;
   imageWidth.subscribe((d) => {
     width = d;
   });
 
-  $: {
-    if (hover)
+  mode.subscribe((v) => {
+    _mode = v;
+    if (v === TableMode.Score)
       db.scoreboard
         .where('uuid')
         .equals(value.uuid)
@@ -27,7 +28,7 @@
             like = false;
           }
         });
-  }
+  });
 
   function updateSelfScore(score: number) {
     return updateScore(value.uuid, { score });
@@ -91,29 +92,26 @@
 
 <div class="px-0.5 box-border inline-block relative" style={`width:${width}px`}>
   <img
-    on:mouseenter={() => (hover = true)}
     class="w-full"
     src={value.src}
     alt={value.uuid}
+    style={`width:${width}px`}
   />
-  {#if hover}
-    <div
-      class="absolute h-full w-full top-0 left-0 my-img-mask text-white flex flex-col justify-center items-center cursor-default"
-      role="button"
+  {#if _mode === TableMode.Score}
+    <button
+      class="absolute h-full w-full top-0 left-0 my-img-mask text-white flex flex-col justify-center items-center"
       tabindex="0"
-      on:mouseleave={() => (hover = false)}
+      on:click={like ? onDislike : onLike}
     >
       <div class="flex justify-around btn-container">
-        <button on:click={like ? onDislike : onLike}>
-          <svg class="inline-block w-1/3" viewBox="0 0 1024 1024">
-            <path
-              d="M725.333333 192c-89.6 0-168.533333 44.8-213.333333 115.2C467.2 236.8 388.266667 192 298.666667 192 157.866667 192 42.666667 307.2 42.666667 448c0 253.866667 469.333333 512 469.333333 512s469.333333-256 469.333333-512c0-140.8-115.2-256-256-256z"
-              fill={like ? '#F44336' : 'grey'}
-            />
-          </svg>
-        </button>
+        <svg class="inline-block w-1/3" viewBox="0 0 1024 1024">
+          <path
+            d="M725.333333 192c-89.6 0-168.533333 44.8-213.333333 115.2C467.2 236.8 388.266667 192 298.666667 192 157.866667 192 42.666667 307.2 42.666667 448c0 253.866667 469.333333 512 469.333333 512s469.333333-256 469.333333-512c0-140.8-115.2-256-256-256z"
+            fill={like ? '#F44336' : 'grey'}
+          />
+        </svg>
       </div>
-    </div>
+    </button>
   {/if}
 </div>
 
@@ -124,7 +122,7 @@
       background: rgba(0, 0, 0, 0);
     }
     100% {
-      backdrop-filter: blur(5px);
+      backdrop-filter: blur(2px);
       background: rgba(0, 0, 0, 0.5);
     }
   }
diff --git a/svelte/src/routes/xyz_plot/+page.svelte b/svelte/src/routes/xyz_plot/+page.svelte
index ad10ef9..8b0d91a 100644
--- a/svelte/src/routes/xyz_plot/+page.svelte
+++ b/svelte/src/routes/xyz_plot/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import MultiDimTableLayout from '$lib/multi-dim-table/layout.svelte';
   import AnalyzeTable from '$lib/multi-dim-table/table.svelte';
-  import { comfyUrl, imageWidth } from '$lib/multi-dim-table/store';
+  import { comfyUrl } from '$lib/multi-dim-table/store';
   import InfoIcon from '$lib/icons/info.svelte';
   import { db, getUser } from '$lib/db';
   import { v1 as uuid } from 'uuid';
@@ -50,12 +50,6 @@
       });
     }
   });
-
-  let _imageWidth = 50;
-
-  $: {
-    imageWidth.set(_imageWidth);
-  }
 </script>
 
 {#if typeof data.path === 'string' && data.path.length > 0}
@@ -87,17 +81,6 @@
           <InfoIcon />
         </div>
       </div>
-      <li slot="extra">
-        <div>
-          <input
-            type="range"
-            min="30"
-            max="300"
-            bind:value={_imageWidth}
-            class="range"
-          />
-        </div>
-      </li>
       <div class="w-full h-full" bind:this={tableContainerRef}>
         <AnalyzeTable {payload} height={tableContainerRef?.clientHeight ?? 0} />
       </div>