diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index 9e692154b..73e080a02 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -113,6 +113,7 @@ module.exports = { case 'l': return (item.x = left); case 'r': + console.log('left', left, 'width', width, 'x: ', left + width); return (item.x = left + width); case 'x': return (item.x = left + width / 2); diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js index 642425d04..c9667a5cf 100644 --- a/src/utils/Dragger.js +++ b/src/utils/Dragger.js @@ -127,24 +127,31 @@ export default class Dragger { } 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; + trg.active = 0; + this.guidesStatic.forEach(stat => { if ((trg.y && stat.x) || (trg.x && stat.y)) return; const isY = trg.y && stat.y; - const trgPoint = isY ? trg.y : trg.x; + const axs = isY ? 'y' : 'x'; + const dirX = 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); } @@ -165,6 +172,7 @@ export default class Dragger { } if (trg && !isUndefined(trg.lock)) { + const offset = 20; console.log( `locked ${axis} at: ${trg.lock}`, `(type: ${trg.type})`, @@ -175,6 +183,7 @@ export default class Dragger { } }); + const deltaPre = { ...delta }; ['x', 'y'].forEach(co => (delta[co] = delta[co] * result(opts, 'scale'))); this.lockedAxis = lockedAxis; this.delta = delta;