Skip to content

Commit

Permalink
Fix #20
Browse files Browse the repository at this point in the history
  • Loading branch information
@newcat
newcat committed Mar 14, 2021
1 parent 60dce76 commit 3583a03
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 45 deletions.
33 changes: 25 additions & 8 deletions packages/baklavajs-plugin-renderer-vue/src/components/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ import { IMenuItem } from "./ContextMenu.vue";
import Clipboard from "../clipboard";
import History from "../history";
interface IPosition {
x: number;
y: number;
}
@Component
export default class EditorView extends Vue {
@Prop({ type: Object, required: true })
Expand All @@ -92,9 +97,11 @@ export default class EditorView extends Vue {
temporaryConnection: ITemporaryConnection | null = null;
hoveringOver?: INodeInterface | null = null;
selectedNodes: IViewNode[] = [];
dragging = false;
ctrlPressed = false;
draggingStartPoint: IPosition | null = null;
draggingStartPanning: IPosition | null = null;
// Reason: https://github.com/newcat/baklavajs/issues/54
counter = 0;
Expand Down Expand Up @@ -227,9 +234,11 @@ export default class EditorView extends Vue {
if (this.temporaryConnection) {
this.temporaryConnection.mx = ev.offsetX / this.plugin.scaling - this.plugin.panning.x;
this.temporaryConnection.my = ev.offsetY / this.plugin.scaling - this.plugin.panning.y;
} else if (this.dragging) {
this.plugin.panning.x += ev.movementX / this.plugin.scaling;
this.plugin.panning.y += ev.movementY / this.plugin.scaling;
} else if (this.draggingStartPoint) {
const dx = ev.screenX - this.draggingStartPoint.x;
const dy = ev.screenY - this.draggingStartPoint.y;
this.plugin.panning.x = this.draggingStartPanning!.x + dx / this.plugin.scaling;
this.plugin.panning.y = this.draggingStartPanning!.y + dy / this.plugin.scaling;
}
}
Expand All @@ -256,21 +265,29 @@ export default class EditorView extends Vue {
this.$set(this.temporaryConnection as any, "my", null);
} else if (ev.target === this.$el) {
this.unselectAllNodes();
this.dragging = true;
this.draggingStartPoint = {
x: ev.screenX,
y: ev.screenY,
};
this.draggingStartPanning = {
x: this.plugin.panning.x,
y: this.plugin.panning.y,
};
}
}
}
mouseUp(ev: MouseEvent) {
this.dragging = false;
mouseUp() {
this.draggingStartPoint = null;
this.draggingStartPanning = null;
const tc = this.temporaryConnection;
if (tc && this.hoveringOver) {
this.plugin.editor.addConnection(tc.from, tc.to!);
}
this.temporaryConnection = null;
}
mouseWheel(ev: MouseWheelEvent) {
mouseWheel(ev: WheelEvent) {
ev.preventDefault();
let scrollAmount = ev.deltaY;
if (ev.deltaMode === 1) {
Expand Down
79 changes: 42 additions & 37 deletions packages/baklavajs-plugin-renderer-vue/src/components/node/Node.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<template>
<div :id="data.id" :class="classes" :style="styles">

<div
class="__title"
@mousedown.self.stop="startDrag"
@contextmenu.self.prevent="openContextMenu"
>

<div class="__title" @mousedown.self.stop="startDrag" @contextmenu.self.prevent="openContextMenu">
<span v-if="!renaming">{{ data.name }}</span>
<input
v-else
Expand All @@ -16,20 +10,19 @@
placeholder="Node Name"
v-click-outside="doneRenaming"
@keydown.enter="doneRenaming"
>
/>

<component
:is="plugin.components.contextMenu"
v-model="contextMenu.show"
:x="contextMenu.x" :y="contextMenu.y"
:x="contextMenu.x"
:y="contextMenu.y"
:items="contextMenu.items"
@click="onContextMenu"
></component>

</div>

<div class="__content">

<!-- Outputs -->
<div class="__outputs">
<component
Expand All @@ -44,7 +37,6 @@
<!-- Options -->
<div class="__options">
<template v-for="[name, option] in data.options">

<component
:is="plugin.components.nodeOption"
:key="name"
Expand All @@ -55,8 +47,14 @@
@openSidebar="openSidebar(name)"
></component>

<portal :key="'sb_' + name" to="sidebar"
v-if="plugin.sidebar.nodeId === data.id && plugin.sidebar.optionName === name && option.sidebarComponent"
<portal
:key="'sb_' + name"
to="sidebar"
v-if="
plugin.sidebar.nodeId === data.id &&
plugin.sidebar.optionName === name &&
option.sidebarComponent
"
>
<component
:is="plugin.components.nodeOption"
Expand All @@ -67,7 +65,6 @@
:node="data"
></component>
</portal>

</template>
</div>

Expand All @@ -81,15 +78,12 @@
:data="input"
></component>
</div>

</div>

</div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Inject, Watch } from "vue-property-decorator";
import { VueConstructor } from "vue";
import { Component, Vue, Prop, Inject } from "vue-property-decorator";
// @ts-ignore
import ClickOutside from "v-click-outside";
Expand All @@ -98,13 +92,17 @@ import { ViewPlugin } from "../../viewPlugin";
import { IViewNode } from "../../../types";
import { sanitizeName } from "../../utility/cssNames";
interface IPosition {
x: number;
y: number;
}
@Component({
directives: {
ClickOutside: ClickOutside.directive
}
ClickOutside: ClickOutside.directive,
},
})
export default class NodeView extends Vue {
@Prop({ type: Object })
data!: IViewNode;
Expand All @@ -114,7 +112,8 @@ export default class NodeView extends Vue {
@Inject("plugin")
plugin!: ViewPlugin;
dragging = false;
draggingStartPosition: IPosition | null = null;
draggingStartPoint: IPosition | null = null;
renaming = false;
tempName = "";
Expand All @@ -124,19 +123,17 @@ export default class NodeView extends Vue {
y: 0,
items: [
{ value: "rename", label: "Rename" },
{ value: "delete", label: "Delete" }
]
{ value: "delete", label: "Delete" },
],
};
private unsubscribe: (() => void)|null = null;
get classes() {
return {
"node": true,
"--selected": this.selected,
"--dragging": this.dragging,
"--dragging": !!this.draggingStartPoint,
"--two-column": !!this.data.twoColumn,
[`--type-${sanitizeName(this.data.type)}`]: true
[`--type-${sanitizeName(this.data.type)}`]: true,
};
}
Expand Down Expand Up @@ -171,8 +168,15 @@ export default class NodeView extends Vue {
this.$forceUpdate();
}
startDrag() {
this.dragging = true;
startDrag(ev: MouseEvent) {
this.draggingStartPoint = {
x: ev.screenX,
y: ev.screenY,
};
this.draggingStartPosition = {
x: this.data.position.x,
y: this.data.position.y,
};
document.addEventListener("mousemove", this.handleMove);
document.addEventListener("mouseup", this.stopDrag);
this.select();
Expand All @@ -183,16 +187,18 @@ export default class NodeView extends Vue {
}
stopDrag() {
this.dragging = false;
this.draggingStartPoint = null;
this.draggingStartPosition = null;
document.removeEventListener("mousemove", this.handleMove);
document.removeEventListener("mouseup", this.stopDrag);
}
handleMove(ev: MouseEvent) {
if (this.dragging) {
const scaleFactor = this.plugin.scaling * window.devicePixelRatio;
this.data.position.x += ev.movementX / scaleFactor;
this.data.position.y += ev.movementY / scaleFactor;
if (this.draggingStartPoint) {
const dx = ev.screenX - this.draggingStartPoint.x;
const dy = ev.screenY - this.draggingStartPoint.y;
this.data.position.x = this.draggingStartPosition!.x + dx / this.plugin.scaling;
this.data.position.y = this.draggingStartPosition!.y + dy / this.plugin.scaling;
}
}
Expand Down Expand Up @@ -223,6 +229,5 @@ export default class NodeView extends Vue {
this.plugin.sidebar.optionName = optionName;
this.plugin.sidebar.visible = true;
}
}
</script>

0 comments on commit 3583a03

Please sign in to comment.