WIP: oversized canvas

spacetelescope · Jun 21, 2022 · 6bcf17f · 6bcf17f
1 parent 26e04ec
commit 6bcf17f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/jdaviz/app.py b/jdaviz/app.py
@@ -1083,6 +1083,12 @@ def resize(stack_items):
                 bqplot_fig.layout.height = '99.9%'
                 bqplot_fig.layout.height = '100%'
 
+        if len(args) and isinstance(args[0], dict) and 'viewer' in args[0]:
+            # TODO: set appropriate viewer.zoom_level
+            # TODO: box-zoom to act based on overscaled canvas
+            # viewer = self._viewer_by_id(args[0]['viewer'])
+            pass
+
     def vue_destroy_viewer_item(self, cid):
         """
         Callback for when viewer area tabs are destroyed. Finds the viewer item

diff --git a/jdaviz/container.vue b/jdaviz/container.vue
@@ -7,7 +7,7 @@
       :data_items="data_items"
       :app_settings="app_settings"
       :icons="icons"
-      @resize="$emit('resize')"
+      @resize="(e) => $emit('resize', e)"
       :closefn="closefn"
       @data-item-selected="$emit('data-item-selected', $event)"
       @data-item-remove="$emit('data-item-remove', $event)"
@@ -18,7 +18,7 @@
       :key="viewer.id"
       :title="viewer.id"
       :tab-id="viewer.id"
-      @resize="$emit('resize')"
+      @resize="resizeViewer(viewer)"
       @destroy="destroy($event, viewer.id)"
       style="display: flex; flex-flow: column; height: 100%; overflow-y: auto; overflow-x: hidden"
     >
@@ -76,6 +76,15 @@ module.exports = {
       return this.$children[0];
     };
   },
+  watch: {
+    stack(new_stack, old_stack) {
+      console.log("watch: stack")
+      new_stack.viewers.forEach((viewer) => {
+        console.log("original resize of "+viewer.id)
+        this.resizeViewer(viewer)
+      })
+    }
+  },
   methods: {
     computeChildrenPath() {
       return this.$parent.computeChildrenPath();
@@ -85,6 +94,41 @@ module.exports = {
        * between a user closing a tab or a re-render. However, when the user closes a tab, the
        * source of the event is a vue component. We can use that distinction as a close signal. */
       source.$root && this.closefn(viewerId);
+    },
+    resizeViewer(viewer) {
+      if (viewer.config !== 'imviz') {
+        this.$emit('resize')
+        return
+      }
+
+      const viewerWidget = this.$refs['viewer-widget-'+viewer.id][0]
+      const cardEl = viewerWidget.$parent
+      const cardHeight = cardEl.$el.clientHeight
+      const cardWidth = cardEl.$el.clientWidth
+
+      // resize width and height to be the diagonal dimension, 
+      // then offset so the center stays in the center
+      // TODO: eventually we may want to make this dynamic to avoid over-resizing
+      // (by using a rectangle and also adjusting as the rotation angle is changed)
+      const diagDim = (cardEl.$el.clientHeight**2+cardEl.$el.clientWidth**2)**0.5;
+      const top = (cardHeight - diagDim) / 2
+      const left = (cardWidth - diagDim) / 2
+
+      viewerWidget.$el.style.height = diagDim+"px"
+      viewerWidget.$el.style.width = diagDim+"px"
+      viewerWidget.$el.style.position = 'absolute'
+      viewerWidget.$el.style.top = top+"px"
+      viewerWidget.$el.style.left = left+"px"
+      //console.log("diagDim: "+diagDim+ " top: "+top+" left: "+left)
+
+      // TODO: "undo" oversizing by adjusting the viewer.zoom_level
+      // TODO: box zoom also needs to account for scale factor to set limits that result in the box
+      // being shown in the viewer, not the oversized canvas
+      this.$emit('resize', {viewer: viewer.id,
+                            height: cardHeight,
+                            width: cardWidth,
+                            canvasHeight: diagDim,
+                            canvasWidth: diagDim})
     }
   },
   computed: {