From bf4dc13b838c29efca3c8b2820efb7235d932f2b Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 19 Mar 2019 19:17:32 +0100 Subject: [PATCH] Refactor Dragger --- src/utils/Dragger.js | 99 +++++++++++++++++--------------------------- 1 file changed, 38 insertions(+), 61 deletions(-) diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js index 8cd499899..642425d04 100644 --- a/src/utils/Dragger.js +++ b/src/utils/Dragger.js @@ -126,77 +126,54 @@ export default class Dragger { delta.y = startPointer.y; } - let diffY = 0; - let diffX = 0; let { trgX, trgY } = this; const offset = 20; this.guidesTarget.forEach(trg => { trg.active = 0; + // 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; + this.guidesStatic.forEach(stat => { - if (trg.y && stat.y) { - // if ( - // (trg.y >= stat.y && trg.y <= stat.y + offset) || - // (trg.y <= stat.y && trg.y >= stat.y - offset) - // ) { - // console.log('trg.y', trg.y, 'stat.y', stat.y, 'diff', trg.y - stat.y) - // diffY = (trg.y - stat.y); - // } - if (this.isPointIn(trg.y, stat.y)) { - if (isUndefined(trgY)) { - trgY = this.setGuideLock(trg, delta.y - (trg.y - stat.y)); - } - } - } else { - if (this.isPointIn(trg.x, stat.x)) { - if (isUndefined(trgX)) { - trgX = this.setGuideLock(trg, delta.x - (trg.x - stat.x)); - } + if ((trg.y && stat.x) || (trg.x && stat.y)) return; + const isY = trg.y && stat.y; + const trgPoint = isY ? trg.y : trg.x; + 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)) { + const trgValue = deltaPoint - (trgPoint - statPoint); + this.setGuideLock(trg, trgValue); } } }); - - if (trg.lock) trg.active = 1; }); - // if (diffY) { - // console.log( 'delta.y before', delta.y, 'diff Y ', diffY, 'delta.t after', delta.y - diffY); - // delta.y = delta.y - diffY; - // } - - if (trgX && !this.isPointIn(delta.x, trgX.lock)) { - this.setGuideLock(trgX, null); - trgX = null; - } - - if (trgY && !this.isPointIn(delta.y, trgY.lock)) { - this.setGuideLock(trgY, null); - trgY = null; - } - - if (trgX && !isUndefined(trgX.lock)) { - console.log( - 'locked X at:', - trgX.lock, - `(type: ${trgX.type})`, - 'delta.x: ', - delta.x, - `range (${trgX.lock - offset} - ${trgX.lock + offset})` - ); - delta.x = trgX.lock; - } - - if (trgY && !isUndefined(trgY.lock)) { - console.log( - 'locked Y at:', - trgY.lock, - `(type: ${trgY.type})`, - 'delta.y: ', - delta.y, - `range (${trgY.lock - offset} - ${trgY.lock + offset})` - ); - delta.y = trgY.lock; - } + 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)) { + console.log( + `locked ${axis} at: ${trg.lock}`, + `(type: ${trg.type})`, + `delta: ${delta[co]}`, + `range (${trg.lock - offset} - ${trg.lock + offset})` + ); + delta[co] = trg.lock; + } + }); ['x', 'y'].forEach(co => (delta[co] = delta[co] * result(opts, 'scale'))); this.lockedAxis = lockedAxis; @@ -230,7 +207,7 @@ export default class Dragger { this[trgName] = guide; } else { console.log(`UNLOCK ${axis}`, guide.lock); - guide.active = 0; + delete guide.active; delete guide.lock; delete this[trgName]; }