HudCanvas: add useCallbacks
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
Rob Watson
parent
5e27c3db9a
commit
aabd0f3252
|
|
@ -174,102 +174,108 @@ export const HudCanvas: React.FC<Props> = ({
|
|||
return x;
|
||||
};
|
||||
|
||||
const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
|
||||
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;
|
||||
const handleMouseDown = useCallback(
|
||||
(evt: MouseEvent<HTMLCanvasElement>) => {
|
||||
if (mode != Mode.Normal) {
|
||||
return;
|
||||
}
|
||||
case Mode.ResizingStart: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const start = constrainXToCanvas(selection.start + diff);
|
||||
|
||||
if (start > selection.end) {
|
||||
setNewSelection({ start: selection.end, end: start });
|
||||
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 });
|
||||
}
|
||||
},
|
||||
[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;
|
||||
}
|
||||
case Mode.ResizingStart: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const start = constrainXToCanvas(selection.start + diff);
|
||||
|
||||
setNewSelection({ ...selection, start: start });
|
||||
break;
|
||||
}
|
||||
case Mode.ResizingEnd: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const end = constrainXToCanvas(selection.end + diff);
|
||||
if (start > selection.end) {
|
||||
setNewSelection({ start: selection.end, end: start });
|
||||
break;
|
||||
}
|
||||
|
||||
if (end < selection.start) {
|
||||
setNewSelection({ start: Math.max(0, end), end: selection.start });
|
||||
setNewSelection({ ...selection, start: start });
|
||||
break;
|
||||
}
|
||||
case Mode.ResizingEnd: {
|
||||
const diff = x - moveOffsetX.current;
|
||||
const end = constrainXToCanvas(selection.end + diff);
|
||||
|
||||
setNewSelection({ ...selection, end: end });
|
||||
break;
|
||||
}
|
||||
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;
|
||||
if (end < selection.start) {
|
||||
setNewSelection({ start: Math.max(0, end), end: selection.start });
|
||||
break;
|
||||
}
|
||||
|
||||
setNewSelection({ ...selection, end: end });
|
||||
break;
|
||||
}
|
||||
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 });
|
||||
break;
|
||||
}
|
||||
case Mode.Selecting: {
|
||||
if (x < moveOffsetX.current) {
|
||||
setNewSelection({
|
||||
start: x,
|
||||
end: moveOffsetX.current,
|
||||
});
|
||||
} else {
|
||||
setNewSelection({ start: moveOffsetX.current, end: x });
|
||||
setNewSelection({ start: start, end: end });
|
||||
break;
|
||||
}
|
||||
case Mode.Selecting: {
|
||||
if (x < moveOffsetX.current) {
|
||||
setNewSelection({
|
||||
start: x,
|
||||
end: moveOffsetX.current,
|
||||
});
|
||||
} else {
|
||||
setNewSelection({ start: moveOffsetX.current, end: x });
|
||||
}
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
[mode, selection]
|
||||
);
|
||||
|
||||
const handleMouseUp = () => {
|
||||
const handleMouseUp = useCallback(() => {
|
||||
if (mode == Mode.Normal) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -283,7 +289,7 @@ export const HudCanvas: React.FC<Props> = ({
|
|||
}
|
||||
|
||||
onSelectionChange({ ...newSelection });
|
||||
};
|
||||
}, [mode, newSelection]);
|
||||
|
||||
const handleEmptySelectionAction = useCallback(() => {
|
||||
switch (emptySelectionAction) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue