diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index dba0ae835..5beedbd31 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -75,6 +75,9 @@ module.exports = Backbone.View.extend({ externalStyles += ``; }); + // rgb(255, 202, 111) + const colorWarn = '#ffca6f'; + let baseCss = ` * { box-sizing: border-box; @@ -95,10 +98,19 @@ module.exports = Backbone.View.extend({ } `; + let layoutCss = ` + .${ppfx}comp-selected{ + outline: 3px solid #3b97e3 !important + } + .${ppfx}comp-selected-parent{ + outline: 2px solid ${colorWarn} !important + } + `; + // I need all this styles to make the editor work properly var frameCss = baseCss + '.' + ppfx + 'dashed :not([contenteditable]) > *[data-highlightable]{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' + - '.' + ppfx + 'comp-selected{outline: 3px solid #3b97e3 !important}' + + layoutCss + '.' + ppfx + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+ '.' + ppfx + 'freezed{opacity: 0.5; pointer-events: none}' + '.' + ppfx + 'no-pointer{pointer-events: none}' + diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 9f8fb69fb..e2246ced8 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -100,16 +100,22 @@ module.exports = Backbone.View.extend({ * @private * */ updateStatus(e) { - var s = this.model.get('status'), - pfx = this.pfx; + var s = this.model.get('status'); + var pfx = this.pfx; + var selectedClass = pfx + 'selected'; + var selectedParentClass = selectedClass + '-parent'; + switch(s) { case 'selected': - this.$el.addClass(pfx + 'selected'); + this.$el.addClass(selectedClass); + break; + case 'selected-parent': + this.$el.addClass(selectedParentClass); break; case 'moving': break; default: - this.$el.removeClass(pfx + 'selected'); + this.$el.removeClass(`${selectedClass} ${selectedParentClass}`); } }, diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 85e628a47..a72f3968a 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -252,6 +252,31 @@ module.exports = Backbone.View.extend({ this.toggleSortCursor(1); }, + /** + * Get the model from HTMLElement target + * @return {Model|null} + */ + getModelFromTarget(el) { + let elem = el || this.target; + return $(elem).data('model'); + }, + + /** + * Highlight target + * @param {Model|null} model + */ + selectTargetModel(model) { + var prevModel = this.targetModel; + if (prevModel) { + prevModel.set('status', ''); + } + + if (model && model.set) { + model.set('status', 'selected-parent'); + this.targetModel = model; + } + }, + /** * During move * @param {Event} e @@ -279,6 +304,10 @@ module.exports = Backbone.View.extend({ } var dims = this.dimsFromTarget(e.target, rX, rY); + + let targetModel = this.getModelFromTarget(this.target); + this.selectTargetModel(targetModel); + this.lastDims = dims; var pos = this.findPosition(dims, rX, rY); // If there is a significant changes with the pointer @@ -640,10 +669,13 @@ module.exports = Backbone.View.extend({ this.onEndMove(created); var dragHelper = this.dragHelper; + if(dragHelper) { dragHelper.remove(); this.dragHelper = null; } + + this.selectTargetModel(); this.toggleSortCursor(); },