Add cursor change to selection
This commit is contained in:
parent
fdc4aba009
commit
f989ae0435
@ -144,6 +144,39 @@ function Selection({
|
|||||||
|
|
||||||
const hasItems = selection.items.length > 0;
|
const hasItems = selection.items.length > 0;
|
||||||
|
|
||||||
|
// Update cursor when mouse enter and out of selection
|
||||||
|
function handleMouseEnter(event: Konva.KonvaEventObject<MouseEvent>) {
|
||||||
|
let style = event.target.getStage()?.content?.style;
|
||||||
|
if (style && hasItems) {
|
||||||
|
style.cursor = "move";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseOut(event: Konva.KonvaEventObject<MouseEvent>) {
|
||||||
|
let style = event.target.getStage()?.content?.style;
|
||||||
|
if (style) {
|
||||||
|
style.cursor = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update cursor to move when selection is made
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasItems) {
|
||||||
|
var node: Konva.Node | null = null;
|
||||||
|
if (lineRef.current) {
|
||||||
|
node = lineRef.current;
|
||||||
|
} else if (rectRef.current) {
|
||||||
|
node = rectRef.current;
|
||||||
|
}
|
||||||
|
if (node) {
|
||||||
|
let style = node.getStage()?.content?.style;
|
||||||
|
if (style) {
|
||||||
|
style.cursor = "move";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [hasItems]);
|
||||||
|
|
||||||
const requestRef = useRef<number>();
|
const requestRef = useRef<number>();
|
||||||
const lineRef = useRef<Konva.Line>(null);
|
const lineRef = useRef<Konva.Line>(null);
|
||||||
const rectRef = useRef<Konva.Rect>(null);
|
const rectRef = useRef<Konva.Rect>(null);
|
||||||
@ -190,6 +223,8 @@ function Selection({
|
|||||||
onMouseUp: handlePointerUp,
|
onMouseUp: handlePointerUp,
|
||||||
onTouchStart: handlePointerDown,
|
onTouchStart: handlePointerDown,
|
||||||
onTouchEnd: handlePointerUp,
|
onTouchEnd: handlePointerUp,
|
||||||
|
onMouseEnter: handleMouseEnter,
|
||||||
|
onMouseOut: handleMouseOut,
|
||||||
// Increase stroke width when drawing a selection to
|
// Increase stroke width when drawing a selection to
|
||||||
// prevent deselection click event from firing
|
// prevent deselection click event from firing
|
||||||
hitStrokeWidth: hasItems ? undefined : 100,
|
hitStrokeWidth: hasItems ? undefined : 100,
|
||||||
|
Loading…
Reference in New Issue
Block a user