Fix sorter with multiple frames

src/commands/view/MoveComponent.js

@@ -91,7 +91,8 @@ export default extend({}, SelectPosition, SelectComponent, {
     // Avoid badge showing on move
     this.cacheEl = null;
     const lastModel = models[models.length - 1];
-    const el = lastModel.getEl();
+    const frame = (this.em.get('currentFrame') || {}).model;
+    const el = lastModel.getEl(frame);
     const doc = el.ownerDocument;
     this.startSelectPosition(el, doc);
     this.sorter.draggable = lastModel.get('draggable');

src/commands/view/SelectPosition.js

@@ -10,9 +10,11 @@ export default {
   startSelectPosition(trg, doc) {
     this.isPointed = false;
     var utils = this.editorModel.get('Utils');
+    const container = trg.ownerDocument.body;
+
     if (utils && !this.sorter)
       this.sorter = new utils.Sorter({
-        container: this.getCanvasBody(),
+        container,
         placer: this.canvas.getPlacerEl(),
         containerSel: '*',
         itemSel: '*',
@@ -25,6 +27,7 @@ export default {
         canvasRelative: 1,
         scale: () => this.em.getZoomDecimal()
       });
+
     trg && this.sorter.startSort(trg);
   },
 

src/dom_components/model/Component.js

@@ -1030,10 +1030,12 @@ const Component = Backbone.Model.extend(Styleable).extend(
     /**
      * Get the DOM element of the component.
      * This works only if the component is already rendered
+     * @param {Frame} frame Specific frame from which taking the element
      * @return {HTMLElement}
      */
-    getEl() {
+    getEl(frame) {
-      return this.view && this.view.el;
+      const view = this.getView(frame);
+      return view && view.el;
     },
 
     /**
@@ -1052,6 +1054,11 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return view;
     },
 
+    getCurrentView() {
+      const frame = (this.em.get('currentFrame') || {}).model;
+      return this.getView(frame);
+    },
+
     /**
      * Return script in string format, cleans 'function() {..' from scripts
      * if it's a function

src/utils/Sorter.js

@@ -78,7 +78,9 @@ export default Backbone.View.extend({
     return result(this, scale) || 1;
   },
 
-  getContainerEl() {
+  getContainerEl(elem) {
+    if (elem) return elem.ownerDocument.body;
+
     if (!this.el) {
       var el = this.opt.container;
       this.el = typeof el === 'string' ? document.querySelector(el) : el;
@@ -87,11 +89,13 @@ export default Backbone.View.extend({
     return this.el;
   },
 
-  getDocuments() {
+  getDocuments(el) {
     const em = this.em;
-    const canvasDoc = em && em.get('Canvas').getBody().ownerDocument;
+    const elDoc = el
+      ? el.ownerDocument
+      : em && em.get('Canvas').getBody().ownerDocument;
     const docs = [document];
-    canvasDoc && docs.push(canvasDoc);
+    elDoc && docs.push(elDoc);
     return docs;
   },
 
@@ -300,8 +304,8 @@ export default Backbone.View.extend({
     const em = this.em;
     const itemSel = this.itemSel;
     const contSel = this.containerSel;
-    const container = this.getContainerEl();
+    const container = this.getContainerEl(src);
-    const docs = this.getDocuments();
+    const docs = this.getDocuments(src);
     const onStart = this.onStart;
     let srcModel;
     let plh = this.plh;
@@ -329,6 +333,8 @@ export default Backbone.View.extend({
       srcModel && srcModel.set && srcModel.set('status', 'freezed');
     }
 
+    console.log({ src, container, docs });
+
     on(container, 'mousemove dragover', this.onMove);
     on(docs, 'mouseup dragend touchend', this.endMove);
     on(docs, 'keydown', this.rollback);
@@ -832,7 +838,10 @@ export default Backbone.View.extend({
     // Get children based on getChildrenContainer
     const trgModel = this.getTargetModel(trg);
     if (trgModel && trgModel.view && !this.ignoreViewChildren) {
-      trg = trgModel.view.getChildrenContainer();
+      const view = trgModel.getCurrentView
+        ? trgModel.getCurrentView()
+        : trgModel.view;
+      trg = view.getChildrenContainer();
     }
 
     each(trg.children, (el, i) => {
@@ -1001,16 +1010,16 @@ export default Backbone.View.extend({
    * @return void
    * */
   endMove(e) {
+    const src = this.eV;
     const moved = [null];
     const docs = this.getDocuments();
-    const container = this.getContainerEl();
+    const container = this.getContainerEl(src);
     const onEndMove = this.onEndMove;
     const { target, lastPos } = this;
     off(container, 'mousemove dragover', this.onMove);
     off(docs, 'mouseup dragend touchend', this.endMove);
     off(docs, 'keydown', this.rollback);
     this.plh.style.display = 'none';
-    let src = this.eV;
 
     if (src && this.selectOnEnd) {
       var srcModel = this.getSourceModel();