feat(GUI): 指针悬浮时，使用 tooltip 显示灯珠数。

package.json

@@ -12,7 +12,9 @@
   "license": "MIT",
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
-    "solid-js": "^1.4.7"
+    "solid-js": "^1.4.7",
+    "solid-tippy": "^0.2.1",
+    "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.2.2",

pnpm-lock.yaml

@@ -7,7 +7,9 @@ specifiers:
   autoprefixer: ^10.4.14
   postcss: ^8.4.21
   solid-js: ^1.4.7
+  solid-tippy: ^0.2.1
   tailwindcss: ^3.2.7
+  tippy.js: ^6.3.7
   typescript: ^4.7.4
   vite: ^4.0.0
   vite-plugin-solid: ^2.3.0
@@ -15,6 +17,8 @@ specifiers:
 dependencies:
   '@tauri-apps/api': 1.2.0
   solid-js: 1.6.14
+  solid-tippy: 0.2.1_rick4tq22pxy45qudhdfrizose
+  tippy.js: 6.3.7
 
 devDependencies:
   '@tauri-apps/cli': 1.2.3
@@ -603,6 +607,10 @@ packages:
       fastq: 1.15.0
     dev: true
 
+  /@popperjs/core/2.11.7:
+    resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==}
+    dev: false
+
   /@tauri-apps/api/1.2.0:
     resolution: {integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==}
     engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
@@ -1329,6 +1337,17 @@ packages:
       solid-js: 1.6.14
     dev: true
 
+  /solid-tippy/0.2.1_rick4tq22pxy45qudhdfrizose:
+    resolution: {integrity: sha512-8qB6X1iMn7nBd5BX+x7tS+5mDVragw5vCaXLOxEQFWUsyRRGKAY8JmbmmyVFIMIvF+pgkIIVIArhNfAGGtYVLA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      solid-js: ^1.2
+      tippy.js: ^6.3
+    dependencies:
+      solid-js: 1.6.14
+      tippy.js: 6.3.7
+    dev: false
+
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -1380,6 +1399,12 @@ packages:
       - ts-node
     dev: true
 
+  /tippy.js/6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+    dependencies:
+      '@popperjs/core': 2.11.7
+    dev: false
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}

src/components/display-view.tsx

@@ -1,4 +1,4 @@
-import { Component, createMemo } from 'solid-js';
+import { Component, createMemo, ParentComponent } from 'solid-js';
 import { LedStripConfigOfBorders } from '../models/display-config';
 import { DisplayInfo } from '../models/display-info.model';
 import { displayStore } from '../stores/display.store';
@@ -30,20 +30,21 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
 
   return (
     <section
-      class="absolute grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden group"
+      class="absolute grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden"
       style={style()}
     >
       <ScreenView
-        class="row-start-2 col-start-2"
+        class="row-start-2 col-start-2 group"
         displayId={props.display.id}
         style={{
           'object-fit': 'contain',
         }}
-      />
+      >
-      <DisplayInfoPanel
+        <DisplayInfoPanel
-        display={props.display}
+          display={props.display}
-        class="absolute bg-slate-700/20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black group-hover:opacity-100 opacity-0 transition-opacity"
+          class="absolute bg-slate-700/20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black group-hover:opacity-100 opacity-0 transition-opacity"
-      />
+        />
+      </ScreenView>
       <LedStripPart
         class="row-start-1 col-start-2 flex-row overflow-hidden"
         config={ledStripConfigs().find((c) => c.border === 'Top')}

src/components/led-strip-part.tsx

@@ -4,12 +4,15 @@ import {
   Component,
   createEffect,
   createMemo,
+  createRoot,
   createSignal,
   For,
   JSX,
   onCleanup,
   splitProps,
 } from 'solid-js';
+import { useTippy } from 'solid-tippy';
+import { followCursor } from 'tippy.js';
 import { LedStripConfig } from '../models/led-strip-config';
 
 type LedStripPartProps = {
@@ -49,6 +52,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
   const [ledSamplePoints, setLedSamplePoints] = createSignal();
   const [colors, setColors] = createSignal<string[]>([]);
 
+  // get led strip colors when screenshot updated
   createEffect(() => {
     const samplePoints = ledSamplePoints();
     if (!localProps.config || !samplePoints) {
@@ -88,17 +92,38 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
     });
   });
 
+  // get led strip sample points
   createEffect(() => {
     if (localProps.config) {
       invoke('get_led_strips_sample_points', {
         config: localProps.config,
       }).then((points) => {
-        console.log({ points });
         setLedSamplePoints(points);
       });
     }
   });
 
+  const [anchor, setAnchor] = createSignal<HTMLElement>();
+
+  useTippy(anchor, {
+    hidden: true,
+    props: {
+      trigger: 'mouseenter focus',
+      followCursor: true,
+
+      plugins: [followCursor],
+
+      content: () =>
+        createRoot(() => {
+          return (
+            <span class="rounded-lg bg-slate-400/50 backdrop-blur text-white p-2 drop-shadow">
+              Count: {localProps.config?.len ?? '--'}
+            </span>
+          );
+        }) as Element,
+    },
+  });
+
   const onWheel = (e: WheelEvent) => {
     if (localProps.config) {
       invoke('patch_led_strip_len', {
@@ -129,6 +154,7 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
   return (
     <section
       {...rootProps}
+      ref={setAnchor}
       class={
         'flex flex-nowrap justify-around items-center overflow-hidden ' + rootProps.class
       }

src/components/screen-view.tsx

@@ -153,6 +153,7 @@ export const ScreenView: Component<ScreenViewProps> = (props) => {
       class={'overflow-hidden h-full w-full ' + rootProps.class}
     >
       <canvas ref={canvas!} />
+      {rootProps.children}
     </div>
   );
 };