feat: 右键点击每一边的 LED 增减按钮时,按增减十个计。
This commit is contained in:
parent
45f3f79a49
commit
bd025d6d71
@ -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(() => {
|
||||
if (config) {
|
||||
if (config.global_start_position <= config.global_end_position) {
|
||||
onChange?.({ ...config, global_end_position: config.global_end_position + 1 });
|
||||
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 + delta,
|
||||
});
|
||||
} else {
|
||||
onChange?.({
|
||||
...config,
|
||||
global_start_position: config.global_start_position + delta,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
onChange?.({
|
||||
...config,
|
||||
global_start_position: config.global_start_position + 1,
|
||||
});
|
||||
onChange?.(new LedStripConfig(0, 0, 0));
|
||||
}
|
||||
} else {
|
||||
onChange?.(new LedStripConfig(0, 0, 0));
|
||||
}
|
||||
}, [config, onChange]);
|
||||
const removeLed = useCallback(() => {
|
||||
if (!config) {
|
||||
onChange?.(null);
|
||||
} else if (Math.abs(config.global_start_position - config.global_end_position) <= 1) {
|
||||
onChange?.(null);
|
||||
} else {
|
||||
if (config.global_start_position <= config.global_end_position) {
|
||||
onChange?.({ ...config, global_end_position: config.global_end_position - 1 });
|
||||
},
|
||||
[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) <= delta
|
||||
) {
|
||||
onChange?.(null);
|
||||
} else {
|
||||
onChange?.({
|
||||
...config,
|
||||
global_start_position: config.global_start_position - 1,
|
||||
});
|
||||
if (config.global_start_position <= config.global_end_position) {
|
||||
onChange?.({
|
||||
...config,
|
||||
global_end_position: config.global_end_position - delta,
|
||||
});
|
||||
} else {
|
||||
onChange?.({
|
||||
...config,
|
||||
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}>
|
||||
|
Loading…
Reference in New Issue
Block a user