Merge pull request #87 from LegumeFederation/develop

Develop
LegumeFederation · May 15, 2018 · d0e86cf · d0e86cf
2 parents 42478a0 + 7814306
commit d0e86cf
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 15 deletions.
diff --git a/src/ui/UI.js b/src/ui/UI.js
@@ -25,6 +25,8 @@ export class UI extends mix().with(RegisterComponentMixin) {
   constructor(appState) {
     super();
     this.appState = appState;
+    this.panLock = false;
+    this.panTarget = null;
   }
 
   /**
@@ -147,15 +149,30 @@ export class UI extends mix().with(RegisterComponentMixin) {
    */
 
   _dispatchGestureEvt(evt) {
-    let hitElements = document.elementsFromPoint(evt.center.x, evt.center.y);
-    let filtered = hitElements.filter(el => {
-      return (el.mithrilComponent && el.mithrilComponent.handleGesture);
-    });
-    // dispatch event to all the mithril components, until one returns true;
-    // effectively the same as 'stopPropagation' on a normal event bubbling.
-    filtered.some(el => {
-      return el.mithrilComponent.handleGesture(evt);
-    });
+    // dispatch events normally if pan hasn't started
+    if (!this.panLock) {
+      if(evt.type === 'panstart'){
+        this.panLock = true;
+      }
+      let hitElements = document.elementsFromPoint(evt.center.x, evt.center.y);
+      let filtered = hitElements.filter(el => {
+        return (el.mithrilComponent && el.mithrilComponent.handleGesture);
+      });
+      // dispatch event to all the mithril components, until one returns true;
+      // effectively the same as 'stopPropagation' on a normal event bubbling.
+      filtered.some(el => {
+        if (this.panLock) {
+          this.panTarget = el;
+        }
+        return el.mithrilComponent.handleGesture(evt);
+      });
+    } else { //redirect pan to original target component until end of pan
+      this.panTarget.mithrilComponent.handleGesture(evt);
+      if (evt.type === 'panend') {
+        this.panLock = false;
+      }
+    }
+
   }
 
   /**

diff --git a/src/ui/layout/HorizontalLayout.js b/src/ui/layout/HorizontalLayout.js
@@ -46,8 +46,18 @@ export class HorizontalLayout
       // all of these topics have effectively the same event handler for
       // the purposes of horizontal layout.
       PubSub.subscribe(dataLoaded, handler),
-      PubSub.subscribe(mapRemoved, handler),
-      PubSub.subscribe(mapAdded, handler),
+      PubSub.subscribe(mapRemoved, () =>{
+        this.bioMapComponents = [];
+        this.bioMapOrder = [];
+        this._onDataLoaded();
+       // this.bioMapComponents.forEach(component => component.dirty = true);
+       // m.redraw();
+      }),
+      PubSub.subscribe(mapAdded, ()=>{
+        this.bioMapComponents = [];
+        this.bioMapOrder = [];
+        this._onDataLoaded();
+      }),
       PubSub.subscribe(reset, () => {
         this._onReset();
       }),
@@ -248,7 +258,7 @@ export class HorizontalLayout
         layoutBounds: layoutBounds,
         appState: this.appState,
         bioMapIndex: mapIndex,
-        initialView : this.appState.initialView[mapIndex]
+        initialView : this.appState.initialView[mapIndex] || model.config
       });
       model.component = component; // save a reference for mapping model -> component
       cursor += component.domBounds.width + padding;
@@ -284,8 +294,8 @@ export class HorizontalLayout
     let n = this.bioMapComponents.length;
     this.correspondenceMapComponents = [];
     for (let i = 0; i < n - 1; i++) {
-      let left = this.bioMapComponents[i];
-      let right = this.bioMapComponents[i + 1];
+      let left = this.bioMapComponents[this.bioMapOrder[i]];
+      let right = this.bioMapComponents[this.bioMapOrder[i + 1]];
       let layoutBounds = new Bounds({
         left: Math.floor(left.domBounds.left + left.backbone.globalBounds.right),
         right: Math.floor(right.domBounds.left + right.backbone.globalBounds.left),

diff --git a/src/ui/layout/components/BioMapComponent.js b/src/ui/layout/components/BioMapComponent.js
@@ -31,14 +31,21 @@ export class BioMapComponent {
 
   onupdate(vnode) {
     //redraw biomap if dirty (drawing has changed, instead of just changing position)
-    if (vnode.state.bioMap.dirty === true) {
+    if (vnode.state.bioMap && vnode.state.bioMap.dirty === true) {
       vnode.state.context2d.clearRect(0, 0, vnode.state.canvas.width, vnode.state.canvas.height);
       vnode.state.bioMap.draw();
     }
   }
 
   view(vnode) {
     // store these bounds, for checking in drawLazily()
+    if(vnode.state.bioMap && vnode.state.bioMap.model !== vnode.attrs.bioMap.model){
+      vnode.attrs.bioMap.canvas = vnode.state.bioMap.canvas;
+      vnode.state.bioMap = vnode.attrs.bioMap;
+      vnode.state.domBounds = vnode.state.bioMap.domBounds;
+      vnode.state.context2d = vnode.state.bioMap.context2d = vnode.state.canvas.getContext('2d');
+      vnode.state.context2d.imageSmoothingEnabled = false;
+    }
     let domBounds = vnode.state.domBounds || null;
     if (domBounds && !domBounds.isEmptyArea) {
       this.lastDrawnMithrilBounds = domBounds;

diff --git a/src/ui/layout/components/TitleComponent.js b/src/ui/layout/components/TitleComponent.js
@@ -34,6 +34,7 @@ export let TitleComponent = {
 
   onbeforeupdate: function (vnode) {
     vnode.state.bioMaps = vnode.attrs.bioMaps;
+    vnode.state.domOrder = vnode.state.titleOrder.indexOf(vnode.state.order);
     if (this.titleOrder[this.domOrder] !== this.order) {
       this.domOrder = this.titleOrder.indexOf(this.order);
     }

diff --git a/src/ui/tools/MapAdditionDialog.js b/src/ui/tools/MapAdditionDialog.js
@@ -38,6 +38,7 @@ export class MapAdditionDialog {
   _onAddRight(evt) {
     const i = this.model.bioMaps.length;
     this.model.addMap(this.selection, i);
+    this.model.initialView.concat(this.selection.config);
     evt.preventDefault();
     this.onDismiss(evt);
   }
@@ -50,6 +51,7 @@ export class MapAdditionDialog {
 
   _onAddLeft(evt) {
     this.model.addMap(this.selection, 0);
+    [this.selection.config].concat(this.model.initialView);
     evt.preventDefault();
     this.onDismiss(evt);
   }