feat: 灯条段排序。

This commit is contained in:
2023-04-02 16:08:28 +08:00
parent 535f731770
commit 86e9b072bc
8 changed files with 89 additions and 186 deletions

View File

@ -44,7 +44,7 @@ function App() {
// listen to led_colors_changed event
createEffect(() => {
const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
const unlisten = listen<Array<string>>('led_colors_changed', (event) => {
const colors = event.payload;
setLedStripStore({
@ -59,7 +59,7 @@ function App() {
// listen to led_sorted_colors_changed event
createEffect(() => {
const unlisten = listen<Array<string>>('led_sorted_colors_changed', (event) => {
const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
const sortedColors = event.payload;
setLedStripStore({

View File

@ -16,6 +16,7 @@ import { useTippy } from 'solid-tippy';
import { followCursor } from 'tippy.js';
import { LedStripConfig } from '../models/led-strip-config';
import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
import { ledStripStore } from '../stores/led-strip.store';
type LedStripPartProps = {
config?: LedStripConfig | null;
@ -55,44 +56,31 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
const [ledSamplePoints, setLedSamplePoints] = createSignal();
const [colors, setColors] = createSignal<string[]>([]);
// get led strip colors when screenshot updated
// update led strip colors from global store
createEffect(() => {
const samplePoints = ledSamplePoints();
if (!localProps.config || !samplePoints) {
if (!localProps.config) {
return;
}
let pendingCount = 0;
const unlisten = listen<{
base64_image: string;
display_id: number;
height: number;
width: number;
}>('encoded-screenshot-updated', (event) => {
if (event.payload.display_id !== localProps.config!.display_id) {
return;
}
if (pendingCount >= 1) {
return;
}
pendingCount++;
const index = ledStripStore.strips.findIndex(
(s) =>
s.display_id === localProps.config!.display_id &&
s.border === localProps.config!.border,
);
invoke<string[]>('get_one_edge_colors', {
samplePoints,
displayId: event.payload.display_id,
})
.then((colors) => {
setColors(colors);
})
.finally(() => {
pendingCount--;
});
});
subscribeScreenshotUpdate(localProps.config.display_id);
if (index === -1) {
return;
}
onCleanup(() => {
unlisten.then((unlisten) => unlisten());
});
const mapper = ledStripStore.mappers[index];
if (!mapper) {
return;
}
const offset = mapper.pos;
const colors = ledStripStore.colors.slice(offset, offset + localProps.config.len);
setColors(colors);
});
// get led strip sample points

View File

@ -12,21 +12,18 @@ import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config'
import { ledStripStore } from '../stores/led-strip.store';
import { invoke } from '@tauri-apps/api';
import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
import background from '../assets/transparent-grid-background.svg?url';
const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
props,
) => {
const [fullLeds, setFullLeds] = createSignal<string[]>([]);
const [fullLeds, setFullLeds] = createSignal<Array<string | null>>([]);
const [dragging, setDragging] = createSignal<boolean>(false);
const [dragStart, setDragStart] = createSignal<{ x: number; y: number } | null>(null);
const [dragCurr, setDragCurr] = createSignal<{ x: number; y: number } | null>(null);
const [dragStartIndex, setDragStartIndex] = createSignal<number>(0);
const [, { setSelectedStripPart }] = useContext(LedStripConfigurationContext);
const totalLedCount = createMemo(() => {
return ledStripStore.strips.reduce((acc, strip) => acc + strip.len, 0);
});
const move = (targetStart: number) => {
if (targetStart === props.mapper.start) {
return;
@ -70,7 +67,8 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
}
setDragCurr({ x: ev.clientX, y: ev.clientY });
const cellWidth = (ev.currentTarget as HTMLDivElement).clientWidth / totalLedCount();
const cellWidth =
(ev.currentTarget as HTMLDivElement).clientWidth / ledStripStore.totalLedCount;
const diff = ev.clientX - dragStart()!.x;
const moved = Math.round(diff / cellWidth);
if (moved === 0) {
@ -85,9 +83,13 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
// update fullLeds
createEffect(() => {
const fullLeds = new Array(totalLedCount()).fill('rgba(255,255,255,0.5)');
const fullLeds = new Array(ledStripStore.totalLedCount).fill(null);
for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
for (
let i = props.mapper.start, j = props.mapper.pos;
i < props.mapper.end;
i++, j++
) {
fullLeds[i] = ledStripStore.colors[j];
}
setFullLeds(fullLeds);
@ -112,11 +114,12 @@ const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper
{(it) => (
<div
class="flex-auto flex h-full w-full justify-center items-center relative"
title={it}
title={it ?? ''}
>
<div
class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
style={{ background: it }}
class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-100"
classList={{ 'ring-stone-300/50': !it }}
style={{ background: it ?? 'transparent' }}
/>
</div>
)}
@ -129,8 +132,7 @@ const SorterResult: Component = () => {
const [fullLeds, setFullLeds] = createSignal<string[]>([]);
createEffect(() => {
const totalLedCount = Math.max(0, ...ledStripStore.mappers.map((m) => m.end));
const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
const fullLeds = new Array(ledStripStore.totalLedCount).fill('rgba(255,255,255,0.1)');
ledStripStore.mappers.forEach((mapper) => {
for (let i = mapper.start, j = 0; i < mapper.end; i++, j++) {
@ -165,7 +167,12 @@ export const LedStripPartsSorter: Component = () => {
const context = createContext();
return (
<div class="select-none overflow-hidden">
<div
class="select-none overflow-hidden"
style={{
'background-image': `url(${background})`,
}}
>
<SorterResult />
<For each={ledStripStore.strips}>
{(strip, index) => (

View File

@ -3,6 +3,7 @@ import { Borders } from '../constants/border';
export type LedStripPixelMapper = {
start: number;
end: number;
pos: number;
};
export type LedStripConfigContainer = {

View File

@ -1,11 +1,12 @@
import { createStore } from 'solid-js/store';
import { DisplayConfig } from '../models/display-config';
import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
export const [ledStripStore, setLedStripStore] = createStore({
displays: new Array<DisplayConfig>(),
strips: new Array<LedStripConfig>(),
mappers: new Array<LedStripPixelMapper>(),
colors: new Uint8ClampedArray(),
sortedColors: new Array<string>(),
colors: new Array<string>(),
sortedColors: new Uint8ClampedArray(),
get totalLedCount() {
return Math.max(0, ...ledStripStore.mappers.map((m) => Math.max(m.start, m.end)));
},
});