Fixed various node and action selection issues

This commit is contained in:
thepaperpilot 2021-08-24 01:23:25 -05:00
parent e52b3751c9
commit 4312b7ac75
2 changed files with 18 additions and 9 deletions

View file

@ -7,8 +7,8 @@
@init="onInit"
@mousemove="drag"
@touchmove="drag"
@mousedown="mouseDown"
@touchstart="mouseDown"
@mousedown="e => mouseDown(e)"
@touchstart="e => mouseDown(e)"
@mouseup="() => endDragging(dragging)"
@touchend="() => endDragging(dragging)"
@mouseleave="() => endDragging(dragging)"
@ -56,7 +56,7 @@ export default defineComponent({
} as {
lastMousePosition: { x: number; y: number };
dragged: { x: number; y: number };
dragging: string | null;
dragging: number | null;
hasDragged: boolean;
};
},
@ -81,7 +81,9 @@ export default defineComponent({
];
},
draggingNode() {
return this.dragging ? this.board.nodes.find(node => node.id === this.dragging) : null;
return this.dragging == null
? null
: this.board.nodes.find(node => node.id === this.dragging);
},
nodes() {
const nodes = this.board.nodes.slice();
@ -135,7 +137,7 @@ export default defineComponent({
onInit(panzoomInstance: any) {
panzoomInstance.setTransformOrigin(null);
},
mouseDown(e: MouseEvent, nodeID: string | null = null, draggable = false) {
mouseDown(e: MouseEvent, nodeID: number | null = null, draggable = false) {
if (this.dragging == null) {
e.preventDefault();
e.stopPropagation();
@ -176,7 +178,7 @@ export default defineComponent({
e.stopPropagation();
}
},
endDragging(nodeID: string | null) {
endDragging(nodeID: number | null) {
if (this.dragging != null && this.dragging === nodeID) {
const draggingNode = this.draggingNode!;
const receivingNode = this.receivingNode;

View file

@ -22,6 +22,8 @@
"
@mousedown="e => performAction(e, action)"
@touchstart="e => performAction(e, action)"
@mouseup="e => actionMouseUp(e, action)"
@touchend.stop="e => actionMouseUp(e, action)"
>
<circle
:fill="
@ -175,7 +177,6 @@ export default defineComponent({
return {
ProgressDisplay,
Shape,
lastMousePosition: { x: 0, y: 0 },
hovering: false,
sqrtTwo: Math.sqrt(2)
};
@ -211,7 +212,7 @@ export default defineComponent({
return layers[this.nodeType.layer].boards!.data[this.nodeType.id];
},
selected() {
return this.board.selectedNode?.id === this.node.id;
return this.board.selectedNode === this.node;
},
selectedAction() {
return this.board.selectedAction;
@ -316,11 +317,17 @@ export default defineComponent({
e.preventDefault();
e.stopPropagation();
}
},
actionMouseUp(e: MouseEvent, action: BoardNodeAction) {
if (this.board.selectedAction === action) {
e.preventDefault();
e.stopPropagation();
}
}
},
watch: {
onDraggableChanged() {
if (this.dragging?.id === this.node.id && !this.draggable) {
if (this.dragging === this.node && !this.draggable) {
this.$emit("endDragging", this.node.id);
}
}