HudCanvas: add useCallbacks
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
5e27c3db9a
commit
aabd0f3252
|
@ -174,102 +174,108 @@ export const HudCanvas: React.FC<Props> = ({
|
||||||
return x;
|
return x;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
|
const handleMouseDown = useCallback(
|
||||||
if (mode != Mode.Normal) {
|
(evt: MouseEvent<HTMLCanvasElement>) => {
|
||||||
return;
|
if (mode != Mode.Normal) {
|
||||||
}
|
return;
|
||||||
|
|
||||||
const x = getCanvasX(evt);
|
|
||||||
|
|
||||||
if (isHoveringSelectionStart(x)) {
|
|
||||||
setMode(Mode.ResizingStart);
|
|
||||||
moveOffsetX.current = x;
|
|
||||||
} else if (isHoveringSelectionEnd(x)) {
|
|
||||||
setMode(Mode.ResizingEnd);
|
|
||||||
moveOffsetX.current = x;
|
|
||||||
} else if (isHoveringSelection(x)) {
|
|
||||||
setMode(Mode.Dragging);
|
|
||||||
setCursor('pointer');
|
|
||||||
moveOffsetX.current = x;
|
|
||||||
} else {
|
|
||||||
setMode(Mode.Selecting);
|
|
||||||
setCursor('col-resize');
|
|
||||||
moveOffsetX.current = x;
|
|
||||||
setNewSelection({ start: x, end: x });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseMove = (evt: MouseEvent<HTMLCanvasElement>) => {
|
|
||||||
const x = getCanvasX(evt);
|
|
||||||
|
|
||||||
switch (mode) {
|
|
||||||
case Mode.Normal: {
|
|
||||||
if (isHoveringSelectionStart(x)) {
|
|
||||||
setHoverState(HoverState.OverSelectionStart);
|
|
||||||
setCursor('col-resize');
|
|
||||||
} else if (isHoveringSelectionEnd(x)) {
|
|
||||||
setHoverState(HoverState.OverSelectionEnd);
|
|
||||||
setCursor('col-resize');
|
|
||||||
} else if (isHoveringSelection(x)) {
|
|
||||||
setHoverState(HoverState.OverSelection);
|
|
||||||
setCursor('pointer');
|
|
||||||
} else {
|
|
||||||
setCursor('auto');
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
case Mode.ResizingStart: {
|
|
||||||
const diff = x - moveOffsetX.current;
|
|
||||||
const start = constrainXToCanvas(selection.start + diff);
|
|
||||||
|
|
||||||
if (start > selection.end) {
|
const x = getCanvasX(evt);
|
||||||
setNewSelection({ start: selection.end, end: start });
|
|
||||||
|
if (isHoveringSelectionStart(x)) {
|
||||||
|
setMode(Mode.ResizingStart);
|
||||||
|
moveOffsetX.current = x;
|
||||||
|
} else if (isHoveringSelectionEnd(x)) {
|
||||||
|
setMode(Mode.ResizingEnd);
|
||||||
|
moveOffsetX.current = x;
|
||||||
|
} else if (isHoveringSelection(x)) {
|
||||||
|
setMode(Mode.Dragging);
|
||||||
|
setCursor('pointer');
|
||||||
|
moveOffsetX.current = x;
|
||||||
|
} else {
|
||||||
|
setMode(Mode.Selecting);
|
||||||
|
setCursor('col-resize');
|
||||||
|
moveOffsetX.current = x;
|
||||||
|
setNewSelection({ start: x, end: x });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[mode, selection]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMouseMove = useCallback(
|
||||||
|
(evt: MouseEvent<HTMLCanvasElement>) => {
|
||||||
|
const x = getCanvasX(evt);
|
||||||
|
|
||||||
|
switch (mode) {
|
||||||
|
case Mode.Normal: {
|
||||||
|
if (isHoveringSelectionStart(x)) {
|
||||||
|
setHoverState(HoverState.OverSelectionStart);
|
||||||
|
setCursor('col-resize');
|
||||||
|
} else if (isHoveringSelectionEnd(x)) {
|
||||||
|
setHoverState(HoverState.OverSelectionEnd);
|
||||||
|
setCursor('col-resize');
|
||||||
|
} else if (isHoveringSelection(x)) {
|
||||||
|
setHoverState(HoverState.OverSelection);
|
||||||
|
setCursor('pointer');
|
||||||
|
} else {
|
||||||
|
setCursor('auto');
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case Mode.ResizingStart: {
|
||||||
|
const diff = x - moveOffsetX.current;
|
||||||
|
const start = constrainXToCanvas(selection.start + diff);
|
||||||
|
|
||||||
setNewSelection({ ...selection, start: start });
|
if (start > selection.end) {
|
||||||
break;
|
setNewSelection({ start: selection.end, end: start });
|
||||||
}
|
break;
|
||||||
case Mode.ResizingEnd: {
|
}
|
||||||
const diff = x - moveOffsetX.current;
|
|
||||||
const end = constrainXToCanvas(selection.end + diff);
|
|
||||||
|
|
||||||
if (end < selection.start) {
|
setNewSelection({ ...selection, start: start });
|
||||||
setNewSelection({ start: Math.max(0, end), end: selection.start });
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case Mode.ResizingEnd: {
|
||||||
|
const diff = x - moveOffsetX.current;
|
||||||
|
const end = constrainXToCanvas(selection.end + diff);
|
||||||
|
|
||||||
setNewSelection({ ...selection, end: end });
|
if (end < selection.start) {
|
||||||
break;
|
setNewSelection({ start: Math.max(0, end), end: selection.start });
|
||||||
}
|
break;
|
||||||
case Mode.Dragging: {
|
}
|
||||||
const diff = x - moveOffsetX.current;
|
|
||||||
const selectionWidth = selection.end - selection.start;
|
setNewSelection({ ...selection, end: end });
|
||||||
let start = Math.max(0, selection.start + diff);
|
break;
|
||||||
let end = start + selectionWidth;
|
|
||||||
if (end > width) {
|
|
||||||
end = width;
|
|
||||||
start = end - selectionWidth;
|
|
||||||
}
|
}
|
||||||
|
case Mode.Dragging: {
|
||||||
|
const diff = x - moveOffsetX.current;
|
||||||
|
const selectionWidth = selection.end - selection.start;
|
||||||
|
let start = Math.max(0, selection.start + diff);
|
||||||
|
let end = start + selectionWidth;
|
||||||
|
if (end > width) {
|
||||||
|
end = width;
|
||||||
|
start = end - selectionWidth;
|
||||||
|
}
|
||||||
|
|
||||||
setNewSelection({ start: start, end: end });
|
setNewSelection({ start: start, end: end });
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case Mode.Selecting: {
|
case Mode.Selecting: {
|
||||||
if (x < moveOffsetX.current) {
|
if (x < moveOffsetX.current) {
|
||||||
setNewSelection({
|
setNewSelection({
|
||||||
start: x,
|
start: x,
|
||||||
end: moveOffsetX.current,
|
end: moveOffsetX.current,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
setNewSelection({ start: moveOffsetX.current, end: x });
|
setNewSelection({ start: moveOffsetX.current, end: x });
|
||||||
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
};
|
[mode, selection]
|
||||||
|
);
|
||||||
|
|
||||||
const handleMouseUp = () => {
|
const handleMouseUp = useCallback(() => {
|
||||||
if (mode == Mode.Normal) {
|
if (mode == Mode.Normal) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -283,7 +289,7 @@ export const HudCanvas: React.FC<Props> = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelectionChange({ ...newSelection });
|
onSelectionChange({ ...newSelection });
|
||||||
};
|
}, [mode, newSelection]);
|
||||||
|
|
||||||
const handleEmptySelectionAction = useCallback(() => {
|
const handleEmptySelectionAction = useCallback(() => {
|
||||||
switch (emptySelectionAction) {
|
switch (emptySelectionAction) {
|
||||||
|
|
Loading…
Reference in New Issue