feat: 拖拽排序。
This commit is contained in:
38
src/App.tsx
38
src/App.tsx
@ -1,4 +1,4 @@
|
||||
import { createEffect, onCleanup } from 'solid-js';
|
||||
import { createContext, createEffect, onCleanup } from 'solid-js';
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import { DisplayView } from './components/display-view';
|
||||
import { DisplayListContainer } from './components/display-list-container';
|
||||
@ -7,6 +7,11 @@ import { LedStripConfigContainer } from './models/led-strip-config';
|
||||
import { setLedStripStore } from './stores/led-strip.store';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
|
||||
import { createStore } from 'solid-js/store';
|
||||
import {
|
||||
LedStripConfigurationContext,
|
||||
LedStripConfigurationContextType,
|
||||
} from './contexts/led-strip-configuration.context';
|
||||
|
||||
function App() {
|
||||
createEffect(() => {
|
||||
@ -52,14 +57,33 @@ function App() {
|
||||
});
|
||||
});
|
||||
|
||||
const [ledStripConfiguration, setLedStripConfiguration] = createStore<
|
||||
LedStripConfigurationContextType[0]
|
||||
>({
|
||||
selectedStripPart: null,
|
||||
});
|
||||
|
||||
const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
|
||||
ledStripConfiguration,
|
||||
{
|
||||
setSelectedStripPart: (v) => {
|
||||
setLedStripConfiguration({
|
||||
selectedStripPart: v,
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
</LedStripConfigurationContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -10,10 +10,12 @@ import {
|
||||
JSX,
|
||||
onCleanup,
|
||||
splitProps,
|
||||
useContext,
|
||||
} from 'solid-js';
|
||||
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';
|
||||
|
||||
type LedStripPartProps = {
|
||||
config?: LedStripConfig | null;
|
||||
@ -48,6 +50,7 @@ export const Pixel: Component<PixelProps> = (props) => {
|
||||
|
||||
export const LedStripPart: Component<LedStripPartProps> = (props) => {
|
||||
const [localProps, rootProps] = splitProps(props, ['config']);
|
||||
const [stripConfiguration] = useContext(LedStripConfigurationContext);
|
||||
|
||||
const [ledSamplePoints, setLedSamplePoints] = createSignal();
|
||||
const [colors, setColors] = createSignal<string[]>([]);
|
||||
@ -143,8 +146,15 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
|
||||
{...rootProps}
|
||||
ref={setAnchor}
|
||||
class={
|
||||
'flex flex-nowrap justify-around items-center overflow-hidden ' + rootProps.class
|
||||
'flex rounded-full flex-nowrap justify-around items-center overflow-hidden ' +
|
||||
rootProps.class
|
||||
}
|
||||
classList={{
|
||||
'ring ring-inset bg-yellow-400/50 ring-orange-400 animate-pulse':
|
||||
stripConfiguration.selectedStripPart?.border === localProps.config?.border &&
|
||||
stripConfiguration.selectedStripPart?.displayId ===
|
||||
localProps.config?.display_id,
|
||||
}}
|
||||
onWheel={onWheel}
|
||||
>
|
||||
<For each={colors()}>{(item) => <Pixel color={item} />}</For>
|
||||
|
@ -1,14 +1,91 @@
|
||||
import { Component, createContext, createEffect, createSignal, For } from 'solid-js';
|
||||
import {
|
||||
Component,
|
||||
createContext,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
For,
|
||||
JSX,
|
||||
useContext,
|
||||
} from 'solid-js';
|
||||
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';
|
||||
|
||||
const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
|
||||
const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
|
||||
props,
|
||||
) => {
|
||||
const [fullLeds, setFullLeds] = createSignal<string[]>([]);
|
||||
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;
|
||||
}
|
||||
console.log(`target_start ${targetStart}`);
|
||||
invoke('move_strip_part', {
|
||||
displayId: props.strip.display_id,
|
||||
border: props.strip.border,
|
||||
targetStart,
|
||||
}).catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
const onPointerDown = (ev: PointerEvent) => {
|
||||
if (ev.button !== 0) {
|
||||
return;
|
||||
}
|
||||
setDragging(true);
|
||||
setDragStart({ x: ev.clientX, y: ev.clientY });
|
||||
setDragCurr({ x: ev.clientX, y: ev.clientY });
|
||||
setDragStartIndex(props.mapper.start);
|
||||
};
|
||||
|
||||
const onPointerUp = () => (ev: PointerEvent) => {
|
||||
if (ev.button !== 0) {
|
||||
return;
|
||||
}
|
||||
setDragging(false);
|
||||
};
|
||||
|
||||
const onPointerMove = (ev: PointerEvent) => {
|
||||
setSelectedStripPart({
|
||||
displayId: props.strip.display_id,
|
||||
border: props.strip.border,
|
||||
});
|
||||
if (!(ev.buttons & 1)) {
|
||||
return;
|
||||
}
|
||||
const draggingInfo = dragging();
|
||||
if (!draggingInfo) {
|
||||
return;
|
||||
}
|
||||
setDragCurr({ x: ev.clientX, y: ev.clientY });
|
||||
|
||||
const cellWidth = (ev.currentTarget as HTMLDivElement).clientWidth / totalLedCount();
|
||||
const diff = ev.clientX - dragStart()!.x;
|
||||
const moved = Math.round(diff / cellWidth);
|
||||
if (moved === 0) {
|
||||
return;
|
||||
}
|
||||
move(props.mapper.start + moved);
|
||||
};
|
||||
|
||||
const onPointerLeave = () => {
|
||||
setSelectedStripPart(null);
|
||||
};
|
||||
|
||||
// update fullLeds
|
||||
createEffect(() => {
|
||||
const strips = ledStripStore.strips;
|
||||
const totalLedCount = strips.reduce((acc, strip) => acc + strip.len, 0);
|
||||
const fullLeds = new Array(totalLedCount).fill('rgba(255,255,255,0.5)');
|
||||
const fullLeds = new Array(totalLedCount()).fill('rgba(255,255,255,0.5)');
|
||||
|
||||
for (let i = props.mapper.start, j = 0; i < props.mapper.end; i++, j++) {
|
||||
fullLeds[i] = `rgb(${ledStripStore.colors[i * 3]}, ${
|
||||
@ -18,8 +95,21 @@ const SorterItem: Component<{ mapper: LedStripPixelMapper }> = (props) => {
|
||||
setFullLeds(fullLeds);
|
||||
});
|
||||
|
||||
const style = createMemo<JSX.CSSProperties>(() => {
|
||||
return {
|
||||
transform: `translateX(${(dragCurr()?.x ?? 0) - (dragStart()?.x ?? 0)}px)`,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="flex h-2 m-2">
|
||||
<div
|
||||
class="flex h-2 m-2 select-none cursor-ew-resize focus:cursor-ew-resize"
|
||||
style={style()}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerLeave={onPointerLeave}
|
||||
>
|
||||
<For each={fullLeds()}>
|
||||
{(it) => (
|
||||
<div
|
||||
@ -78,11 +168,13 @@ export const LedStripPartsSorter: Component = () => {
|
||||
const context = createContext();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="select-none overflow-hidden">
|
||||
<SorterResult />
|
||||
<For each={ledStripStore.strips}>
|
||||
{(strip, index) => <SorterItem mapper={ledStripStore.mappers[index()]} />}
|
||||
{(strip, index) => (
|
||||
<SorterItem strip={strip} mapper={ledStripStore.mappers[index()]} />
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
24
src/contexts/led-strip-configuration.context.ts
Normal file
24
src/contexts/led-strip-configuration.context.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { createContext } from 'solid-js';
|
||||
import { Borders } from '../constants/border';
|
||||
|
||||
export type LedStripConfigurationContextType = [
|
||||
{
|
||||
selectedStripPart: {
|
||||
displayId: number;
|
||||
border: Borders;
|
||||
} | null;
|
||||
},
|
||||
{
|
||||
setSelectedStripPart: (v: { displayId: number; border: Borders } | null) => void;
|
||||
},
|
||||
];
|
||||
|
||||
export const LedStripConfigurationContext =
|
||||
createContext<LedStripConfigurationContextType>([
|
||||
{
|
||||
selectedStripPart: null,
|
||||
},
|
||||
{
|
||||
setSelectedStripPart: () => {},
|
||||
},
|
||||
]);
|
@ -1,16 +0,0 @@
|
||||
import { Borders } from '../constants/border';
|
||||
import { LedStripConfig } from './led-strip-config';
|
||||
|
||||
export class LedStripConfigOfBorders implements Record<Borders, LedStripConfig | null> {
|
||||
constructor(
|
||||
public top: LedStripConfig | null = null,
|
||||
public bottom: LedStripConfig | null = null,
|
||||
public left: LedStripConfig | null = null,
|
||||
public right: LedStripConfig | null = null,
|
||||
) {}
|
||||
}
|
||||
export class DisplayConfig {
|
||||
led_strip_of_borders = new LedStripConfigOfBorders();
|
||||
|
||||
constructor(public id: number) {}
|
||||
}
|
Reference in New Issue
Block a user