rob
/
clipper
2
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

HudCanvas: add useCallbacks
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Rob Watson 2022-01-13 07:59:48 +01:00
parent 5e27c3db9a
commit aabd0f3252
1 changed files with 89 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
frontend/src/HudCanvas.tsx
View File

@ -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) {