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

This commit is contained in:
2023-03-26 23:33:38 +08:00
parent 58e8c30fe2
commit 958a422672
5 changed files with 65 additions and 10 deletions

View File

@ -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')}

View File

@ -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
}

View File

@ -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>
);
};