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