diff --git a/src/commands/index.js b/src/commands/index.js index bee7c7bc1..05a3f8284 100644 --- a/src/commands/index.js +++ b/src/commands/index.js @@ -144,6 +144,7 @@ module.exports = () => { if (includes(modes, mode)) { // TODO move grabbing func in editor/canvas from the Sorter dragger = editor.runCommand('core:component-drag', { + guidesInfo: 1, mode, target: sel, onEnd, diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index b41b2552a..c60ec05a4 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -303,13 +303,34 @@ module.exports = { }, onDrag() { - const { guidesTarget, guidesStatic, opts, editor } = this; + const { guidesTarget, opts } = this; this.updateGuides(guidesTarget); opts.debug && guidesTarget.forEach(item => this.renderGuide(item)); - const active = guidesTarget.filter(item => item.active); - this.elGuideInfoY.style.display = 'none'; - this.elGuideInfoX.style.display = 'none'; - active.forEach(item => { + opts.guidesInfo && + this.renderGuideInfo(guidesTarget.filter(item => item.active)); + }, + + onEnd() { + const { editor, opts, id } = this; + const { onEnd } = opts; + onEnd && onEnd(); + editor.stopCommand(id); + }, + + hideGuidesInfo() { + ['X', 'Y'].forEach(item => { + this[`elGuideInfo${item}`].style.display = 'none'; + }); + }, + + /** + * Render guides with spacing information + */ + renderGuideInfo(guides = []) { + const { guidesStatic, editor } = this; + this.hideGuidesInfo(); + + guides.forEach(item => { const { origin, x } = item; const rectOrigin = editor.Canvas.offset(origin); const axis = isUndefined(x) ? 'y' : 'x'; @@ -361,13 +382,6 @@ module.exports = { }); }, - onEnd() { - const { editor, opts, id } = this; - const { onEnd } = opts; - onEnd && onEnd(); - editor.stopCommand(id); - }, - toggleDrag(on) { const { ppfx, editor } = this; const methodCls = on ? 'add' : 'remove';