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

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
-        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"
-      />
+      >
+        <DisplayInfoPanel
+          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"
+        />
+      </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>
   );
 };