Skip to content

Commit

Permalink
fix the issue with displacement when dragging
Browse files Browse the repository at this point in the history
  • Loading branch information
Ni55aN committed Aug 1, 2018
1 parent 5b9ec68 commit 227c17b
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 16 deletions.
9 changes: 7 additions & 2 deletions src/view/area.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ export class Area extends Emitter {

el.style.transformOrigin = '0 0';

this._startPosition = null;
this._zoom = new Zoom(container, el, 0.1, this.onZoom.bind(this));
this._drag = new Drag(container, this.onTranslate.bind(this));
this._drag = new Drag(container, this.onTranslate.bind(this), this.onStart.bind(this));
this.container.addEventListener('mousemove', this.mousemove.bind(this));

this.update();
Expand All @@ -38,8 +39,12 @@ export class Area extends Emitter {
this.trigger('mousemove', { ...this.mouse });
}

onStart() {
this._startPosition = { ...this.transform };
}

onTranslate(dx, dy) {
this.translate(this.transform.x + dx, this.transform.y + dy)
this.translate(this._startPosition.x + dx, this._startPosition.y + dy)
}

onZoom(delta, ox, oy) {
Expand Down
2 changes: 0 additions & 2 deletions src/view/drag.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ export class Drag {
let delta = [x - this.mouseStart[0], y - this.mouseStart[1]];
let zoom = this.el.getBoundingClientRect().width / this.el.offsetWidth;

this.mouseStart = [x, y];

this.onTranslate(delta[0] / zoom, delta[1] / zoom);
}

Expand Down
28 changes: 16 additions & 12 deletions src/view/node.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ export class Node extends Emitter {
this.el.style.position = 'absolute';

this.el.addEventListener('contextmenu', e => this.trigger('contextmenu', { e, node: this.node }));
this.drag = new Drag(this.el, this.onTranslate.bind(this), this.onSelect.bind(this));

this._startPosition = null;
this._drag = new Drag(this.el, this.onTranslate.bind(this), this.onSelect.bind(this));

this.trigger('rendernode', {
el: this.el,
Expand All @@ -27,7 +29,7 @@ export class Node extends Emitter {
bindSocket: this.bindSocket.bind(this),
bindControl: this.bindControl.bind(this)
});

this.update();
}

Expand All @@ -43,27 +45,29 @@ export class Node extends Emitter {
return this.sockets.get(io).getPosition(this.node);
}

onSelect() {
onSelect() {
this._startPosition = [...this.node.position];
this.trigger('selectnode', this.node);
}

onTranslate(dx, dy) {
const node = this.node;
const x = node.position[0] + dx;
const y = node.position[1] + dy;
const x = this._startPosition[0] + dx;
const y = this._startPosition[1] + dy;

if (!this.trigger('nodetranslate', { node, x, y })) return;

this.translate(x, y);

this.trigger('nodetranslated', { node });
}

translate(x, y) {
this.node.position[0] = x;
this.node.position[1] = y;
const node = this.node;
const params = { node, x, y };

if (!this.trigger('nodetranslate', params)) return;

this.node.position[0] = params.x;
this.node.position[1] = params.y;

this.update();
this.trigger('nodetranslated', { node });
}

update() {
Expand Down

0 comments on commit 227c17b

Please sign in to comment.