girder-large-image 1.35.6.dev2__tar.gz → 1.35.6.dev7__tar.gz

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: girder-large-image
-Version: 1.35.6.dev2
+Version: 1.35.6.dev7
 Summary: A Girder plugin to work with large, multiresolution images.
 Home-page: https://github.com/girder/large_image
 Author: Kitware, Inc.
@@ -19,9 +19,9 @@ Description-Content-Type: text/x-rst
 License-File: LICENSE
 Requires-Dist: girder<5,>=3.1.18
 Requires-Dist: girder-jobs<5,>=3.0.3
-Requires-Dist: large_image>=1.35.6.dev2
+Requires-Dist: large_image>=1.35.6.dev7
 Provides-Extra: tasks
-Requires-Dist: large-image-tasks[girder]>=1.35.6.dev2; extra == "tasks"
+Requires-Dist: large-image-tasks[girder]>=1.35.6.dev7; extra == "tasks"
 Requires-Dist: girder-worker[girder]<5,>=0.6.0; extra == "tasks"
 Dynamic: author
 Dynamic: author-email

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/girder_large_image/web_client/widgets/CompositeLayers.vue

@@ -13,7 +13,9 @@ module.exports = {
         'layerMap',
         'active',
         'colors',
-        'styleUpdate'
+        'styleUpdate',
+
+        'layerHotkeys'
     ],
     data() {
         return {
@@ -38,6 +40,15 @@ module.exports = {
                 roundRange: true
             };
         },
+        customShortcuts() {
+            if (!this.layerHotkeys) {
+                return undefined;
+            }
+            const labels = this.layerHotkeys.labels || [];
+            return this.layers
+                .map((layerName, index) => ({layerName, keys: labels[index]}))
+                .filter((entry) => entry.keys);
+        },
         showExpandAllButton() {
             if (this.histogramRows.length) {
                 return document.getElementsByClassName('expand-btn').length > 0;
@@ -122,25 +133,34 @@ module.exports = {
             }
         },
         keyHandler(e) {
-            let numericKey = parseFloat(e.key);
-            if (e.ctrlKey && !isNaN(numericKey)) {
-                e.preventDefault();
+            let layerIndex;
+            if (this.layerHotkeys) {
+                layerIndex = this.layerHotkeys.layerForEvent(e);
+                if (layerIndex === undefined || layerIndex === null || layerIndex < 0) {
+                    return;
+                }
+            } else {
+                let numericKey = parseFloat(e.key);
+                if (!e.ctrlKey || isNaN(numericKey)) {
+                    return;
+                }
                 if (numericKey === 0) {
                     numericKey += 10;
                 }
                 if (e.altKey) {
                     numericKey += 10;
                 }
-                const layerIndex = numericKey - 1;
-                if (layerIndex < this.layers.length) {
-                    const targetLayer = this.layers[layerIndex];
-                    if (this.compositeLayerInfo[targetLayer].enabled) {
-                        this.enabledLayers = this.enabledLayers.filter((v) => v !== targetLayer);
-                    } else {
-                        this.enabledLayers.push(targetLayer);
-                    }
-                    this.updateActiveLayers();
+                layerIndex = numericKey - 1;
+            }
+            e.preventDefault();
+            if (layerIndex < this.layers.length) {
+                const targetLayer = this.layers[layerIndex];
+                if (this.compositeLayerInfo[targetLayer].enabled) {
+                    this.enabledLayers = this.enabledLayers.filter((v) => v !== targetLayer);
+                } else {
+                    this.enabledLayers.push(targetLayer);
                 }
+                this.updateActiveLayers();
             }
         },
         initializeLayerInfo() {
@@ -342,24 +362,38 @@ module.exports = {
       <div class="h5">
         Keyboard Shortcuts
       </div>
-      <div>
-        <span class="monospace">ctrl + number</span>
-        Toggle visibility of the layer at the number position
-      </div>
-      <div>
-        <span style="font-weight: bold;">Example: </span>
-        <span class="monospace">ctrl + 1</span>
-        Toggle visibility of the first layer in the table
-      </div>
-      <div>
-        <span class="monospace">ctrl + alt + number</span>
-        Toggle visibility of the layer at the position of the number plus 10
-      </div>
-      <div>
-        <span style="font-weight: bold;">Example: </span>
-        <span class="monospace">ctrl + alt + 1</span>
-        Toggle visibility of the eleventh layer in the table
-      </div>
+      <template v-if="customShortcuts">
+        <div
+          v-for="entry in customShortcuts"
+          :key="entry.layerName"
+        >
+          <span class="monospace">{{ entry.keys }}</span>
+          Toggle visibility of {{ entry.layerName }}
+        </div>
+        <div v-if="!customShortcuts.length">
+          No layers have keyboard shortcuts.
+        </div>
+      </template>
+      <template v-else>
+        <div>
+          <span class="monospace">ctrl + number</span>
+          Toggle visibility of the layer at the number position
+        </div>
+        <div>
+          <span style="font-weight: bold;">Example: </span>
+          <span class="monospace">ctrl + 1</span>
+          Toggle visibility of the first layer in the table
+        </div>
+        <div>
+          <span class="monospace">ctrl + alt + number</span>
+          Toggle visibility of the layer at the position of the number plus 10
+        </div>
+        <div>
+          <span style="font-weight: bold;">Example: </span>
+          <span class="monospace">ctrl + alt + 1</span>
+          Toggle visibility of the eleventh layer in the table
+        </div>
+      </template>
     </div>
     <div class="table-container">
       <table

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/girder_large_image/web_client/widgets/FrameSelector.vue

@@ -9,7 +9,8 @@ module.exports = {
         'liConfig',
         'colors',
         'getFrameHistogram',
-        'frameHistograms'
+        'frameHistograms',
+        'layerHotkeys'
     ],
     data() {
         return {
@@ -401,6 +402,7 @@ module.exports = {
         :active="currentModeId === 2"
         :class="currentModeId === 2 ? '' : 'invisible'"
         :colors="colors"
+        :layer-hotkeys="layerHotkeys"
         :style-update="(style) => updateStyle(2, style)"
       />
       <composite-layers
@@ -418,6 +420,7 @@ module.exports = {
         :active="currentModeId === 3"
         :class="currentModeId === 3 ? '' : 'invisible'"
         :colors="colors"
+        :layer-hotkeys="layerHotkeys"
         :style-update="(style) => updateStyle(3, style)"
       />
     </div>

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/girder_large_image.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: girder-large-image
-Version: 1.35.6.dev2
+Version: 1.35.6.dev7
 Summary: A Girder plugin to work with large, multiresolution images.
 Home-page: https://github.com/girder/large_image
 Author: Kitware, Inc.
@@ -19,9 +19,9 @@ Description-Content-Type: text/x-rst
 License-File: LICENSE
 Requires-Dist: girder<5,>=3.1.18
 Requires-Dist: girder-jobs<5,>=3.0.3
-Requires-Dist: large_image>=1.35.6.dev2
+Requires-Dist: large_image>=1.35.6.dev7
 Provides-Extra: tasks
-Requires-Dist: large-image-tasks[girder]>=1.35.6.dev2; extra == "tasks"
+Requires-Dist: large-image-tasks[girder]>=1.35.6.dev7; extra == "tasks"
 Requires-Dist: girder-worker[girder]<5,>=0.6.0; extra == "tasks"
 Dynamic: author
 Dynamic: author-email

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/girder_large_image.egg-info/requires.txt

@@ -1,7 +1,7 @@
 girder<5,>=3.1.18
 girder-jobs<5,>=3.0.3
-large_image>=1.35.6.dev2
+large_image>=1.35.6.dev7
 
 [tasks]
-large-image-tasks[girder]>=1.35.6.dev2
+large-image-tasks[girder]>=1.35.6.dev7
 girder-worker[girder]<5,>=0.6.0

{girder_large_image-1.35.6.dev2 → girder_large_image-1.35.6.dev7}/test_girder/web_client_specs/imageViewerSpec.js

@@ -1,4 +1,4 @@
-/* globals describe, it, expect, _, girderTest, $, runs, waitsFor, xit */
+/* globals describe, it, expect, _, girderTest, $, runs, waitsFor, waits, xit */
 
 girderTest.importPlugin('large_image');
 
@@ -77,6 +77,118 @@ $(function () {
             }, 'control slider to update');
         });
     });
+    describe('test layer hotkeys in band compositing', function () {
+        // CompositeLayers listens on the document with addEventListener, which
+        // jQuery's trigger does not reach, so dispatch native events.
+        function pressKey(key, mods) {
+            var evt = document.createEvent('Event');
+            evt.initEvent('keydown', true, true);
+            var props = _.extend({key: key, ctrlKey: false, altKey: false, shiftKey: false, metaKey: false}, mods || {});
+            _.each(props, function (value, name) {
+                Object.defineProperty(evt, name, {value: value});
+            });
+            document.dispatchEvent(evt);
+        }
+        function bandEnabled(band) {
+            return $('.image-frame-control-box .enable-col input[value="' + band + '"]').prop('checked');
+        }
+        function frameSelector() {
+            return $('.image-frame-control-box')[0].__vue__;
+        }
+
+        it('upload a multi-band image', function () {
+            runs(function () {
+                $('.g-item-breadcrumb-link[data-type="folder"]:last').click();
+            });
+            girderTest.waitForLoad();
+            runs(function () {
+                girderTest.binaryUpload('${large_image}/../../test/test_files/multi_test_source_bands.yml'); // eslint-disable-line no-template-curly-in-string
+            });
+            girderTest.waitForLoad();
+        });
+        it('navigate to the item and use band compositing', function () {
+            waitsFor(function () {
+                return $('a.g-item-list-link:contains(multi_test_source_bands)').length > 0;
+            }, 'item link to appear');
+            runs(function () {
+                $('a.g-item-list-link:contains(multi_test_source_bands)').click();
+            });
+            girderTest.waitForLoad();
+            waitsFor(function () {
+                return $('.image-frame-control-box select[name="mode"] option[value="3"]').length > 0;
+            }, 'band compositing mode to be available', 15000);
+            runs(function () {
+                var select = $('.image-frame-control-box select[name="mode"]')[0];
+                select.value = '3';
+                var evt = document.createEvent('HTMLEvents');
+                evt.initEvent('change', true, true);
+                select.dispatchEvent(evt);
+            });
+            waitsFor(function () {
+                return $('.image-frame-control-box .enable-col input[value="green"]:visible').length > 0;
+            }, 'band table to appear');
+            runs(function () {
+                expect(bandEnabled('red')).toBe(true);
+                expect(bandEnabled('green')).toBe(true);
+            });
+        });
+        it('toggle a band with the default keys', function () {
+            runs(function () {
+                pressKey('1', {ctrlKey: true});
+            });
+            waitsFor(function () {
+                return bandEnabled('red') === false;
+            }, 'ctrl+1 to hide the first band');
+            runs(function () {
+                pressKey('1', {ctrlKey: true});
+            });
+            waitsFor(function () {
+                return bandEnabled('red') === true;
+            }, 'ctrl+1 to show the first band');
+        });
+        it('replace the layer hotkeys', function () {
+            runs(function () {
+                frameSelector()._props.layerHotkeys = {
+                    layerForEvent: function (evt) {
+                        return evt.key === 'q' && !evt.ctrlKey ? 1 : undefined;
+                    },
+                    labels: [undefined, 'Q']
+                };
+            });
+            waits(100);
+            runs(function () {
+                pressKey('1', {ctrlKey: true});
+                pressKey('q');
+            });
+            waitsFor(function () {
+                return bandEnabled('green') === false;
+            }, 'q to hide the second band');
+            runs(function () {
+                expect(bandEnabled('red')).toBe(true);
+            });
+        });
+        it('list the replaced keys in the help', function () {
+            runs(function () {
+                $('.image-frame-control-box .icon-keyboard:visible').click();
+            });
+            waitsFor(function () {
+                return $('.image-frame-control-box .shortcuts:visible').length > 0;
+            }, 'shortcut help to show');
+            runs(function () {
+                var text = $('.image-frame-control-box .shortcuts:visible').text().replace(/\s+/g, ' ');
+                expect(text).toContain('Q Toggle visibility of green');
+                expect(text).not.toContain('ctrl + number');
+                $('.image-frame-control-box .icon-keyboard:visible').click();
+                frameSelector()._props.layerHotkeys = undefined;
+            });
+            // Toggling bands requests histograms; let them finish before the
+            // next test navigates away from this viewer.
+            waitsFor(function () {
+                return $.active === 0;
+            }, 'histogram requests to finish');
+            girderTest.waitForLoad();
+        });
+    });
     describe('upload test file', function () {
         it('go to collections page', function () {
             runs(function () {