Merge pull request #304 from DigitalSlideArchive/handle-new-feature-event

manthey · web-flow · commit 1e8a351e6783 · 2023-05-04T12:57:49.000-04:00
Handle the mousedown event for better overlay processing.
diff --git a/histomicsui/web_client/package.json b/histomicsui/web_client/package.json
@@ -27,8 +27,8 @@
         "webpack": "webpack.helper"
     },
     "scripts": {
-        "lint": "eslint --cache . && pug-lint . && stylus-supremacy format --compare ./**/*.styl --options package.json",
-        "format": "eslint --cache --fix . && stylus-supremacy format ./**/*.styl --replace --options package.json"
+        "lint": "eslint --cache . && eslint --no-eslintrc -c ./package.json --cache ../../tests && pug-lint . && stylus-supremacy format --compare ./**/*.styl --options package.json",
+        "format": "eslint --cache --fix . && eslint --no-eslintrc -c ./package.json --cache --fix ../../tests && stylus-supremacy format ./**/*.styl --replace --options package.json"
     },
     "dependencies": {
         "@vue/compiler-sfc": "^3.2.33",
diff --git a/histomicsui/web_client/views/body/ImageView.js b/histomicsui/web_client/views/body/ImageView.js
@@ -220,6 +220,7 @@ var ImageView = View.extend({
             // handle overlay events
             this.listenTo(this.viewerWidget, 'g:mouseClickAnnotationOverlay', this.mouseClickOverlay);
             this.listenTo(this.viewerWidget, 'g:mouseOverAnnotationOverlay', this.mouseOverOverlay);
+            this.listenTo(this.viewerWidget, 'g:mouseDownAnnotationOverlay', this.mouseOverOverlay);
             this.listenTo(this.viewerWidget, 'g:drawOverlayAnnotation', this.overlayLayerDrawn);
             this.listenTo(this.viewerWidget, 'g:removeOverlayAnnotation', this.overlayLayerRemoved);
 
@@ -927,7 +928,7 @@ var ImageView = View.extend({
         if (overlayElement.get('type') !== 'pixelmap') { return; }
         const overlayAnnotationIsSelected = this.activeAnnotation && this.activeAnnotation.elements().get(overlayElement.id);
         const index = overlayElement.get('boundaries') ? (event.index - event.index % 2) : event.index;
-        if (event.mouse.buttonsDown.left && this.drawWidget && overlayAnnotationIsSelected) {
+        if (event.mouse.buttonsDown.left && !event.mouse.modifiers.shift && this.drawWidget && overlayAnnotationIsSelected) {
             // left click. check what the active style is and if it applies
             const style = this.drawWidget.getStyleGroup();
             const newIndex = this._getCategoryIndexFromStyleGroup(overlayElement, style);
diff --git a/tests/web_client_specs/.eslintrc b/tests/web_client_specs/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": "girder",
+  "extends": "@girder",
   "rules": {
     "no-template-curly-in-string": 0
   },
diff --git a/tests/web_client_specs/analysisSpec.js b/tests/web_client_specs/analysisSpec.js
@@ -1,6 +1,4 @@
-/* global huiTest */
-
-/* global huiTest */
+/* global huiTest girderTest beforeEach girder describe it waitsFor runs $ afterEach expect */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
diff --git a/tests/web_client_specs/annotationSpec.js b/tests/web_client_specs/annotationSpec.js
@@ -1,4 +1,4 @@
-/* global huiTest */
+/* global huiTest girderTest beforeEach girder describe it waitsFor runs $ afterEach expect waits _ */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
@@ -888,15 +888,15 @@ girderTest.promise.done(function () {
                 $('.h-annotation-select-by-region').click();
 
                 interactor.simulateEvent('mousedown', {
-                    map: { x: 100, y: 100 },
+                    map: {x: 100, y: 100},
                     button: 'left'
                 });
                 interactor.simulateEvent('mousemove', {
-                    map: { x: 200, y: 200 },
+                    map: {x: 200, y: 200},
                     button: 'left'
                 });
                 interactor.simulateEvent('mouseup', {
-                    map: { x: 200, y: 200 },
+                    map: {x: 200, y: 200},
                     button: 'left'
                 });
 
@@ -1205,19 +1205,19 @@ girderTest.promise.done(function () {
 
                 runs(function () {
                     var rect = {
-                        'name': 'rectangle',
-                        'description': 'the description',
-                        'elements': [
+                        name: 'rectangle',
+                        description: 'the description',
+                        elements: [
                             {
-                                'center': [
+                                center: [
                                     2000,
                                     2000,
                                     0
                                 ],
-                                'height': 4000,
-                                'rotation': 0,
-                                'type': 'rectangle',
-                                'width': 4000
+                                height: 4000,
+                                rotation: 0,
+                                type: 'rectangle',
+                                width: 4000
                             }
                         ]
                     };
diff --git a/tests/web_client_specs/girderUISpec.js b/tests/web_client_specs/girderUISpec.js
@@ -1,3 +1,5 @@
+/* global girderTest describe it waitsFor runs $ expect _ */
+
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 
 girderTest.startApp();
diff --git a/tests/web_client_specs/huiSpec.js b/tests/web_client_specs/huiSpec.js
@@ -1,12 +1,12 @@
-/* globals girder, girderTest, describe, it, expect, waitsFor, runs */
+/* globals girder, girderTest, describe, it, expect, waitsFor, runs, $ */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 
 girderTest.startApp();
 
 describe('Test the HistomicsUI plugin', function () {
     it('change the HistomicsUI settings', function () {
-        var styles = [{'lineWidth': 8, 'id': 'Sample Group'}];
+        var styles = [{lineWidth: 8, id: 'Sample Group'}];
         var styleJSON = JSON.stringify(styles);
 
         girderTest.login('admin', 'Admin', 'Admin', 'password')();
diff --git a/tests/web_client_specs/huiTest.js b/tests/web_client_specs/huiTest.js
@@ -1,3 +1,5 @@
+/* global waitsFor girderTest $ girder runs expect */
+
 (function (global) {
     global.huiTest = {};
 
diff --git a/tests/web_client_specs/itemSpec.js b/tests/web_client_specs/itemSpec.js
@@ -1,4 +1,4 @@
-/* globals girder, girderTest, describe, it, expect, waitsFor, runs */
+/* globals girder, girderTest, describe, it, expect, waitsFor, runs, _, $ */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 
diff --git a/tests/web_client_specs/metadataPanelSpec.js b/tests/web_client_specs/metadataPanelSpec.js
@@ -1,4 +1,4 @@
-/* global huiTest */
+/* global huiTest girderTest describe it runs $ expect waitsFor */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
diff --git a/tests/web_client_specs/metadataPlotSpec.js b/tests/web_client_specs/metadataPlotSpec.js
@@ -1,4 +1,4 @@
-/* global huiTest */
+/* global huiTest girderTest describe it runs $ expect girder waitsFor */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
@@ -27,28 +27,30 @@ girderTest.promise.done(function () {
                         contentType: 'application/json',
                         processData: false,
                         method: 'PUT',
-                        data: JSON.stringify({gloms: [{
-                            Label: 'Old',
-                            pas: 2680.166436339452,
-                            area: 783.110155889082,
-                            aspect: 2.9080459770114944,
-                            average: 164.37993900822062,
-                            std: 26.010079499756575
-                        }, {
-                            Label: 'Old',
-                            pas: 12980.996970666974,
-                            area: 1496.7676319940551,
-                            aspect: 1.9185185185185185,
-                            average: 155.27579392594646,
-                            std: 28.416844030625626
-                        }, {
-                            Label: 'Young',
-                            pas: 8402.006745559294,
-                            area: 1788.302533363278,
-                            aspect: 1.019704433497537,
-                            average: 159.67405227626796,
-                            std: 33.87920305083972
-                        }]}),
+                        data: JSON.stringify({
+                            gloms: [{
+                                Label: 'Old',
+                                pas: 2680.166436339452,
+                                area: 783.110155889082,
+                                aspect: 2.9080459770114944,
+                                average: 164.37993900822062,
+                                std: 26.010079499756575
+                            }, {
+                                Label: 'Old',
+                                pas: 12980.996970666974,
+                                area: 1496.7676319940551,
+                                aspect: 1.9185185185185185,
+                                average: 155.27579392594646,
+                                std: 28.416844030625626
+                            }, {
+                                Label: 'Young',
+                                pas: 8402.006745559294,
+                                area: 1788.302533363278,
+                                aspect: 1.019704433497537,
+                                average: 159.67405227626796,
+                                std: 33.87920305083972
+                            }]
+                        }),
                         async: false
                     });
                 });
@@ -59,29 +61,31 @@ girderTest.promise.done(function () {
                         contentType: 'application/json',
                         processData: false,
                         method: 'PUT',
-                        data: JSON.stringify({gloms: [{
-                            Label: 'Young',
-                            pas: 11851.975039865125,
-                            area: 2360.3514018844844,
-                            aspect: 1.0686695278969958,
-                            average: 156.98394786336002,
-                            std: 31.21637278966411
-                        }, {
-                            Label: 'Old',
-                            pas: 14936.277054529173,
-                            area: 3136.911379889736,
-                            aspect: 1.0586080586080586,
-                            average: 156.36041872733267,
-                            std: 25.653667101657856
-                        }, {
-                            Label: 'Old',
-                            pas: 16794.292195370363,
-                            area: 3383.7387179248767,
-                            aspect: 1.08,
-                            average: 162.33947155279122,
-                            std: 29.727093069010945
+                        data: JSON.stringify({
+                            gloms: [{
+                                Label: 'Young',
+                                pas: 11851.975039865125,
+                                area: 2360.3514018844844,
+                                aspect: 1.0686695278969958,
+                                average: 156.98394786336002,
+                                std: 31.21637278966411
+                            }, {
+                                Label: 'Old',
+                                pas: 14936.277054529173,
+                                area: 3136.911379889736,
+                                aspect: 1.0586080586080586,
+                                average: 156.36041872733267,
+                                std: 25.653667101657856
+                            }, {
+                                Label: 'Old',
+                                pas: 16794.292195370363,
+                                area: 3383.7387179248767,
+                                aspect: 1.08,
+                                average: 162.33947155279122,
+                                std: 29.727093069010945
 
-                        }]}),
+                            }]
+                        }),
                         async: false
                     });
                 });
diff --git a/tests/web_client_specs/overviewPanelSpec.js b/tests/web_client_specs/overviewPanelSpec.js
@@ -1,4 +1,4 @@
-/* global huiTest */
+/* global huiTest girderTest describe it runs expect waitsFor */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
@@ -58,40 +58,40 @@ girderTest.promise.done(function () {
             });
             it('click pan', function () {
                 var center = main.center();
-                simulateAndWait('mousedown', { map: { x: 100, y: 100 }, button: 'left' });
-                simulateAndWait('mouseup', { map: { x: 100, y: 100 }, button: 'left' });
+                simulateAndWait('mousedown', {map: {x: 100, y: 100}, button: 'left'});
+                simulateAndWait('mouseup', {map: {x: 100, y: 100}, button: 'left'});
                 runs(function () {
                     expect(main.center()).not.toEqual(center);
                 });
             });
             it('click drag back to start', function () {
                 var center = main.center();
-                simulateAndWait('mousedown', { map: { x: 140, y: 120 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 140, y: 140 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 140, y: 120 }, button: 'left' });
-                simulateAndWait('mouseup', { map: { x: 140, y: 120 }, button: 'left' });
+                simulateAndWait('mousedown', {map: {x: 140, y: 120}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 140, y: 140}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 140, y: 120}, button: 'left'});
+                simulateAndWait('mouseup', {map: {x: 140, y: 120}, button: 'left'});
                 runs(function () {
                     expect(main.center().x).toBeCloseTo(center.x);
                     expect(main.center().y).toBeCloseTo(center.y);
                 });
             });
             it('click drag', function () {
                 var center = main.center();
-                simulateAndWait('mousedown', { map: { x: 140, y: 120 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 140, y: 140 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 140, y: 150 }, button: 'left' });
-                simulateAndWait('mouseup', { map: { x: 140, y: 150 }, button: 'left' });
+                simulateAndWait('mousedown', {map: {x: 140, y: 120}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 140, y: 140}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 140, y: 150}, button: 'left'});
+                simulateAndWait('mouseup', {map: {x: 140, y: 150}, button: 'left'});
                 runs(function () {
                     expect(main.center().x).toBeCloseTo(center.x);
                     expect(main.center().y).not.toBeCloseTo(center.y);
                 });
             });
             it('click drag outside of zone', function () {
                 var center = main.center();
-                simulateAndWait('mousedown', { map: { x: 40, y: 20 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 40, y: 40 }, button: 'left' });
-                simulateAndWait('mousemove', { map: { x: 40, y: 50 }, button: 'left' });
-                simulateAndWait('mouseup', { map: { x: 40, y: 50 }, button: 'left' });
+                simulateAndWait('mousedown', {map: {x: 40, y: 20}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 40, y: 40}, button: 'left'});
+                simulateAndWait('mousemove', {map: {x: 40, y: 50}, button: 'left'});
+                simulateAndWait('mouseup', {map: {x: 40, y: 50}, button: 'left'});
                 runs(function () {
                     expect(main.center().x).toBeCloseTo(center.x);
                     expect(main.center().y).toBeCloseTo(center.y);
@@ -100,10 +100,10 @@ girderTest.promise.done(function () {
             it('left-click drag zero area', function () {
                 var center = main.center();
                 var zoom = main.zoom();
-                simulateAndWait('mousedown', { map: { x: 40, y: 20 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mousemove', { map: { x: 40, y: 20 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mousemove', { map: { x: 40, y: 40 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mouseup', { map: { x: 40, y: 40 }, button: 'left', modifiers: 'shift' });
+                simulateAndWait('mousedown', {map: {x: 40, y: 20}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mousemove', {map: {x: 40, y: 20}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mousemove', {map: {x: 40, y: 40}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mouseup', {map: {x: 40, y: 40}, button: 'left', modifiers: 'shift'});
                 runs(function () {
                     expect(main.center()).toEqual(center);
                     expect(main.zoom()).toEqual(zoom);
@@ -112,10 +112,10 @@ girderTest.promise.done(function () {
             it('left-click drag', function () {
                 var center = main.center();
                 var zoom = main.zoom();
-                simulateAndWait('mousedown', { map: { x: 40, y: 20 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mousemove', { map: { x: 40, y: 40 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mousemove', { map: { x: 60, y: 40 }, button: 'left', modifiers: 'shift' });
-                simulateAndWait('mouseup', { map: { x: 60, y: 40 }, button: 'left', modifiers: 'shift' });
+                simulateAndWait('mousedown', {map: {x: 40, y: 20}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mousemove', {map: {x: 40, y: 40}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mousemove', {map: {x: 60, y: 40}, button: 'left', modifiers: 'shift'});
+                simulateAndWait('mouseup', {map: {x: 60, y: 40}, button: 'left', modifiers: 'shift'});
                 runs(function () {
                     expect(main.center()).not.toEqual(center);
                     expect(main.zoom()).not.toEqual(zoom);
diff --git a/tests/web_client_specs/panelLayoutSpec.js b/tests/web_client_specs/panelLayoutSpec.js
@@ -1,4 +1,4 @@
-/* global huiTest */
+/* global huiTest girderTest describe it runs $ expect girder waitsFor */
 
 girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');
 girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');
diff --git a/tests/web_client_specs/pixelmapCategorySpec.js b/tests/web_client_specs/pixelmapCategorySpec.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": "girder",`
	`2`	`+ "extends": "@girder",`
`3`	`3`	`"rules": {`
`4`	`4`	`"no-template-curly-in-string": 0`
`5`	`5`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+/* global girderTest describe it waitsFor runs $ expect _ */`
	`2`	`+`
`1`	`3`	`girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');`
`2`	`4`
`3`	`5`	`girderTest.startApp();`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+/* global waitsFor girderTest $ girder runs expect */`
	`2`	`+`
`1`	`3`	`(function (global) {`
`2`	`4`	`global.huiTest = {};`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* globals girder, girderTest, describe, it, expect, waitsFor, runs */`
	`1`	`+/* globals girder, girderTest, describe, it, expect, waitsFor, runs, _, $ */`
`2`	`2`
`3`	`3`	`girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* global huiTest */`
	`1`	`+/* global huiTest girderTest describe it runs $ expect waitsFor */`
`2`	`2`
`3`	`3`	`girderTest.importPlugin('jobs', 'large_image', 'large_image_annotation', 'slicer_cli_web', 'histomicsui');`
`4`	`4`	`girderTest.addScript('/static/built/plugins/histomicsui/huiTest.js');`