Fix block and container highlight for resizing

Previously the position of cursor (inside/outside block) was tracked during the resizing.
This commit changes this focus detection so that it is detected once at the end of resizing based on the final mouse position.
Thanks to event bubbling parent containers could set correct highlight state as well.
[MAILPOET-1819]
This commit is contained in:
Rostislav Wolny
2019-03-12 16:04:19 +01:00
committed by M. Shull
parent ad05c0ca94
commit cc9a0c4141
2 changed files with 5 additions and 7 deletions

View File

@@ -5,6 +5,7 @@
*/ */
import Marionette from 'backbone.marionette'; import Marionette from 'backbone.marionette';
import BL from 'newsletter_editor/behaviors/BehaviorsLookup'; import BL from 'newsletter_editor/behaviors/BehaviorsLookup';
import { isEventInsideElement } from 'newsletter_editor/utils';
BL.HighlightEditingBehavior = Marionette.Behavior.extend({ BL.HighlightEditingBehavior = Marionette.Behavior.extend({
modelEvents: { modelEvents: {
@@ -12,17 +13,11 @@ BL.HighlightEditingBehavior = Marionette.Behavior.extend({
stopEditing: 'onStopEditing', stopEditing: 'onStopEditing',
startResizing: 'onStartResizing', startResizing: 'onStartResizing',
stopResizing: 'onStopResizing', stopResizing: 'onStopResizing',
resizeMove: 'onResizeMove',
}, },
events: { events: {
mouseenter: 'onMouseEnter', mouseenter: 'onMouseEnter',
mouseleave: 'onMouseLeave', mouseleave: 'onMouseLeave',
}, },
// mouseleave event is not always triggered during resizing
// so we have to check if the pointer is still inside using resize event coordinates
onResizeMove: function onResizeMove(event) {
this.isFocusedByPointer = event.isViewFocused;
},
onMouseEnter: function onMouseEnter(mouseEvent) { onMouseEnter: function onMouseEnter(mouseEvent) {
this.isFocusedByPointer = true; this.isFocusedByPointer = true;
// Ignore mouse events when dragging // Ignore mouse events when dragging
@@ -54,6 +49,7 @@ BL.HighlightEditingBehavior = Marionette.Behavior.extend({
this.view.triggerMethod('resizeStart'); this.view.triggerMethod('resizeStart');
}, },
onStopResizing: function onStopResizing(event) { onStopResizing: function onStopResizing(event) {
this.isFocusedByPointer = isEventInsideElement(event, this.view.$el);
this.onStopEditing(); this.onStopEditing();
this.view.triggerMethod('resizeStop', event); this.view.triggerMethod('resizeStop', event);
}, },
@@ -63,10 +59,13 @@ BL.HighlightEditingBehavior = Marionette.Behavior.extend({
} }
}, },
onChildviewResizeStart: function onChildviewResizeStart() { onChildviewResizeStart: function onChildviewResizeStart() {
this.onStartEditing();
// Let event bubble up // Let event bubble up
this.view.triggerMethod('resizeStart'); this.view.triggerMethod('resizeStart');
}, },
onChildviewResizeStop: function onChildviewResizeStop(event) { onChildviewResizeStop: function onChildviewResizeStop(event) {
this.isFocusedByPointer = isEventInsideElement(event, this.view.$el);
this.onStopEditing();
// Let event bubble up // Let event bubble up
this.view.triggerMethod('resizeStop', event); this.view.triggerMethod('resizeStop', event);
}, },

View File

@@ -60,7 +60,6 @@ BL.ResizableBehavior = Marionette.Behavior.extend({
that.$el.addClass('mailpoet_resize_active'); that.$el.addClass('mailpoet_resize_active');
}).on('resizemove', function resizemove(event) { }).on('resizemove', function resizemove(event) {
var onResize = that.options.onResize.bind(that); var onResize = that.options.onResize.bind(that);
that.view.model.trigger('resizeMove', that.detectMousePointerFocus(event));
return onResize(event); return onResize(event);
}) })
.on('resizeend', function resizeend(event) { .on('resizeend', function resizeend(event) {