feat(GUI): 指针悬浮时,使用 tooltip 显示灯珠数。
This commit is contained in:
@ -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')}
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user