forked from profectus/Profectus
Fixed various node and action selection issues
This commit is contained in:
parent
e52b3751c9
commit
4312b7ac75
2 changed files with 18 additions and 9 deletions
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue