thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed various node and action selection issues

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/board/Board.vue
View file

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

13
src/components/board/BoardNode.vue
View file

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