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

feat: 右键点击每一边的 LED 增减按钮时，按增减十个计。

Browse Source
This commit is contained in:
Ivan Li 2023-01-29 00:41:11 +08:00
parent 45f3f79a49
commit bd025d6d71
1 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { HTMLAttributes, useCallback } from 'react'; import { HTMLAttributes, MouseEventHandler, useCallback } from 'react';
import { FC } from 'react'; import { FC } from 'react';
import { LedStripConfig } from '../models/led-strip-config'; import { LedStripConfig } from '../models/led-strip-config';
import tw, { styled } from 'twin.macro'; import tw, { styled } from 'twin.macro';
@ -26,36 +26,54 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
onChange, onChange,
...htmlAttrs ...htmlAttrs
}) => { }) => {
const addLed = useCallback(() => { const addLed: MouseEventHandler = useCallback(
(ev) => {
ev.preventDefault();
const delta = ev.button === 2 ? 10 : 1;
if (config) { if (config) {
if (config.global_start_position <= config.global_end_position) { if (config.global_start_position <= config.global_end_position) {
onChange?.({ ...config, global_end_position: config.global_end_position + 1 }); onChange?.({
...config,
global_end_position: config.global_end_position + delta,
});
} else { } else {
onChange?.({ onChange?.({
...config, ...config,
global_start_position: config.global_start_position + 1, global_start_position: config.global_start_position + delta,
}); });
} }
} else { } else {
onChange?.(new LedStripConfig(0, 0, 0)); onChange?.(new LedStripConfig(0, 0, 0));
} }
}, [config, onChange]); },
const removeLed = useCallback(() => { [config, onChange],
);
const removeLed: MouseEventHandler = useCallback(
(ev) => {
ev.preventDefault();
const delta = ev.button === 2 ? 10 : 1;
if (!config) { if (!config) {
onChange?.(null); onChange?.(null);
} else if (Math.abs(config.global_start_position - config.global_end_position) <= 1) { } else if (
Math.abs(config.global_start_position - config.global_end_position) <= delta
) {
onChange?.(null); onChange?.(null);
} else { } else {
if (config.global_start_position <= config.global_end_position) { if (config.global_start_position <= config.global_end_position) {
onChange?.({ ...config, global_end_position: config.global_end_position - 1 }); onChange?.({
...config,
global_end_position: config.global_end_position - delta,
});
} else { } else {
onChange?.({ onChange?.({
...config, ...config,
global_start_position: config.global_start_position - 1, global_start_position: config.global_start_position - delta,
}); });
} }
} }
}, [config, onChange]); },
[config, onChange],
);
const reverse = useCallback(() => { const reverse = useCallback(() => {
if (!config) { if (!config) {
return; return;
@ -69,10 +87,10 @@ export const LedStripEditor: FC<LedStripEditorProps> = ({
return ( return (
<StyledContainer {...htmlAttrs}> <StyledContainer {...htmlAttrs}>
<StyledButton title="Add LED" onClick={addLed}> <StyledButton title="Add LED" onClick={addLed} onContextMenu={addLed}>
<FontAwesomeIcon icon={faPlus} /> <FontAwesomeIcon icon={faPlus} />
</StyledButton> </StyledButton>
<StyledButton title="Remove LED" onClick={removeLed}> <StyledButton title="Remove LED" onClick={removeLed} onContextMenu={removeLed}>
<FontAwesomeIcon icon={faMinus} /> <FontAwesomeIcon icon={faMinus} />
</StyledButton> </StyledButton>
<StyledButton title="Reverse" onClick={reverse}> <StyledButton title="Reverse" onClick={reverse}>