From 8bf67414adcd536791b2d8de0dd0f41e0a1427b1 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 20 Mar 2019 02:33:33 +0100 Subject: [PATCH] Clean drag method in Dragger --- src/utils/Dragger.js | 84 ++++---------------------------------------- 1 file changed, 7 insertions(+), 77 deletions(-) diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js index 2fececbb5..81b2ea8a5 100644 --- a/src/utils/Dragger.js +++ b/src/utils/Dragger.js @@ -52,6 +52,9 @@ export default class Dragger { */ getGuidesTarget: () => [], + // Offset before snap to guides + snapOffset: 5, + // Document on which listen to pointer events doc: 0, @@ -126,60 +129,6 @@ export default class Dragger { delta.y = startPointer.y; } - /* - let { trgX, trgY } = this; - this.guidesTarget.forEach(trg => { - // Skip the guide if its locked axis already exists - // TODO: allow near axis change (using diff) - if ((trg.x && this.trgX) || (trg.y && this.trgY)) return; - - trg.active = 0; - - this.guidesStatic.forEach(stat => { - if ((trg.y && stat.x) || (trg.x && stat.y)) return; - const isY = trg.y && stat.y; - const axs = isY ? 'y' : 'x'; - const dirX = 0; // this.delta ? (delta[axs] < this.delta[axs] ? -1 : 1) : 0; - const trgPoint = isY ? trg.y : trg.x + dirX; - const statPoint = isY ? stat.y : stat.x; - const deltaPoint = isY ? delta.y : delta.x; - const trgGuide = isY ? trgY : trgX; - - if (this.isPointIn(trgPoint, statPoint)) { - if (isUndefined(trgGuide)) { - console.log(`LOCK ${isY ? 'Y' : 'X'} trgPoint: ${trgPoint} statPoint ${statPoint} diff: ${ trgPoint - statPoint } delta.x: ${delta.x}`); - const trgValue = deltaPoint - (trgPoint - statPoint); - this.setGuideLock(trg, trgValue); - } - } - }); - }); - - trgX = this.trgX; - trgY = this.trgY; - - ['x', 'y'].forEach(co => { - const axis = co.toUpperCase(); - let trg = this[`trg${axis}`]; - - if (trg && !this.isPointIn(delta[co], trg.lock)) { - this.setGuideLock(trg, null); - trg = null; - } - - if (trg && !isUndefined(trg.lock)) { - const offset = 20; - console.log( - `locked ${axis} at: ${trg.lock}`, - `(type: ${trg.type})`, - `delta: ${delta[co]}`, - `range (${trg.lock - offset} - ${trg.lock + offset})` - ); - delta[co] = trg.lock; - } - }); - */ - const moveDelta = delta => { ['x', 'y'].forEach(co => (delta[co] = delta[co] * result(opts, 'scale'))); this.delta = delta; @@ -191,12 +140,11 @@ export default class Dragger { this.lockedAxis = lockedAxis; moveDelta(delta); + // Check if to snap on guides let { trgX, trgY } = this; this.guidesTarget.forEach(trg => { // Skip the guide if its locked axis already exists - // TODO: allow near axis change (using diff) if ((trg.x && this.trgX) || (trg.y && this.trgY)) return; - trg.active = 0; this.guidesStatic.forEach(stat => { @@ -209,12 +157,6 @@ export default class Dragger { if (this.isPointIn(trgPoint, statPoint)) { if (isUndefined(trgGuide)) { - console.log( - `LOCK ${ - isY ? 'Y' : 'X' - } trgPoint: ${trgPoint} statPoint ${statPoint} diff: ${trgPoint - - statPoint} delta.x: ${deltaPre.x}` - ); const trgValue = deltaPoint - (trgPoint - statPoint); this.setGuideLock(trg, trgValue); } @@ -235,13 +177,6 @@ export default class Dragger { } if (trg && !isUndefined(trg.lock)) { - const offset = 4; - console.log( - `locked ${axis} at: ${trg.lock}`, - `(type: ${trg.type})`, - `delta: ${delta[co]}`, - `range (${trg.lock - offset} - ${trg.lock + offset})` - ); deltaPre[co] = trg.lock; } }); @@ -252,17 +187,13 @@ export default class Dragger { ev.which === 0 && this.stop(ev); } - isPointIn(src, trg, offset = 5) { + isPointIn(src, trg, { offset } = {}) { + const ofst = offset || this.opts.snapOffset; return ( - (src >= trg && src <= trg + offset) || (src <= trg && src >= trg - offset) + (src >= trg && src <= trg + ofst) || (src <= trg && src >= trg - ofst) ); } - getGuideLock(axis = 'x') { - const trgName = `trg${axis.toUpperCase()}`; - return this[trgName]; - } - setGuideLock(guide, value) { const axis = !isUndefined(guide.x) ? 'X' : 'Y'; const trgName = `trg${axis}`; @@ -272,7 +203,6 @@ export default class Dragger { guide.lock = value; this[trgName] = guide; } else { - console.log(`UNLOCK ${axis}`, guide.lock); delete guide.active; delete guide.lock; delete this[trgName];