display-ambient-light/desktop
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: 灯条配置。

Browse Source
This commit is contained in:
Ivan Li
2023-01-16 21:35:22 +08:00
parent 458cc85db2
commit af03b22d05
4 changed files with 80 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/configurator/components/draggable-strip.tsx
View File

@ -43,21 +43,21 @@ export const DraggableStrip: FC<DraggableStripProp> = ({
const handleMouseMoveRef = useRef<(ev: MouseEvent) => void>();
const [boxTranslateX, setBoxTranslateX] = useState(0);
const ledItems = useMemo(
() =>
pixels.map((rgb, i) => (
<StyledPixel
key={i}
rgb={rgb}
css={css`
grid-column: ${(availableConfig.global_start_position ?? 0) + i + 1} / span 1;
grid-row-start: ${index + 1};
pointer-events: none;
`}
/>
)),
[pixels, availableConfig],
);
const ledItems = useMemo(() => {
const step = config.global_start_position - config.global_end_position < 0 ? 1 : -1;
return pixels.map((rgb, i) => (
<StyledPixel
key={i}
rgb={rgb}
css={css`
grid-column: ${(availableConfig.global_start_position ?? 0) + i * step + 1} /
span 1;
grid-row-start: ${index + 1};
pointer-events: none;
`}
/>
));
}, [pixels, availableConfig]);
const [placeholders, placeholderRefs]: [ReactNode[], RefObject<HTMLSpanElement>[]] =
useMemo(

32
src/configurator/components/led-strip-editor.tsx
View File

@ -28,7 +28,14 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
}) => {
const addLed = useCallback(() => {
if (config) {
onChange?.({ ...config, global_end_position: config.global_end_position + 1 });
if (config.global_start_position <= config.global_end_position) {
onChange?.({ ...config, global_end_position: config.global_end_position + 1 });
} else {
onChange?.({
...config,
global_start_position: config.global_start_position + 1,
});
}
} else {
onChange?.(new LedStripConfig(0, 0, 1));
}
@ -36,10 +43,29 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
const removeLed = useCallback(() => {
if (!config) {
onChange?.(null);
} else if (Math.abs(config.global_start_position - config.global_end_position) <= 1) {
onChange?.(null);
} else {
onChange?.({ ...config, global_end_position: config.global_end_position - 1 });
if (config.global_start_position <= config.global_end_position) {
onChange?.({ ...config, global_end_position: config.global_end_position - 1 });
} else {
onChange?.({
...config,
global_start_position: config.global_start_position - 1,
});
}
}
}, [config, onChange]);
const reverse = useCallback(() => {
if (!config) {
return;
}
onChange?.({
...config,
global_start_position: config.global_end_position,
global_end_position: config.global_start_position,
});
}, [config, onChange]);
return (
<StyledContainer {...htmlAttrs}>
@ -49,7 +75,7 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
<StyledButton title="Remove LED" onClick={removeLed}>
<FontAwesomeIcon icon={faMinus} />
</StyledButton>
<StyledButton title="Reverse">
<StyledButton title="Reverse" onClick={reverse}>
<FontAwesomeIcon icon={faLeftRight} />
</StyledButton>
{`s: ${config?.global_start_position ?? 'x'}, e: ${