fix: LSDV-5560: Fix plus and minus hotkeys (#1561)

* fix: LSDV-5560: Fix plus and minus hotkeys * test: LSDV-5560: Add test for zoom hotkeys * Refactor Co-authored-by: hlomzik <hlomzik@gmail.com> * Add comments Co-authored-by: hlomzik <hlomzik@gmail.com> * Update testing lib --------- Co-authored-by: hlomzik <hlomzik@gmail.com>
HumanSignal · Sep 28, 2023 · d34cf03 · d34cf03
1 parent 688ba57
commit d34cf03
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 2 deletions.
diff --git a/src/core/Hotkey.ts b/src/core/Hotkey.ts
@@ -79,6 +79,11 @@ keymaster.filter = function(event) {
   return true;
 };
 
+const ALIASES = {
+  'plus': '=', // "ctrl plus" is actually a "ctrl =" because shift is not used
+  'minus': '-',
+};
+
 export const Hotkey = (
   namespace = 'global',
   description = 'Hotkeys',
@@ -159,6 +164,12 @@ export const Hotkey = (
   _destructors.push(unbind);
 
   return {
+    applyAliases(key: string) {
+      return key
+        .split(',')
+        .map(k => k.split('+').map(k => ALIASES[k.trim()] ?? k).join('+'))
+        .join(',');
+    },
     /**
      * Add key
      */
@@ -169,7 +180,7 @@ export const Hotkey = (
         console.warn(`Key already added: ${key}. It's possibly a bug.`);
       }
 
-      const keyName = key.toLowerCase();
+      const keyName = this.applyAliases(key.toLowerCase());
 
       _hotkeys_map[keyName] = func;
       if (desc) _hotkeys_desc[keyName] = desc;

diff --git a/tests/functional/data/image_segmentation/tools/zoom.ts b/tests/functional/data/image_segmentation/tools/zoom.ts
@@ -0,0 +1,12 @@
+export const simpleConfig = `
+  <View>
+    <Image name="img" value="$image"/>
+    <RectangleLabels name="tag" toName="img">
+      <Label value="Label 1" background="purple"/>
+    </RectangleLabels>
+  </View>
+`;
+
+export const simpleImageData = {
+  image: 'https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg',
+};
diff --git a/tests/functional/package.json b/tests/functional/package.json
@@ -18,7 +18,7 @@
     "cvg:summary": "nyc report --temp-dir=.nyc_output --reporter=text-summary --cwd=. --exclude-after-remap false"
   },
   "dependencies": {
-    "@heartexlabs/ls-test": "git+ssh://git@github.com/heartexlabs/ls-frontend-test#4c67cf3278d16b39715e55e330d86a5065aca7ba"
+    "@heartexlabs/ls-test": "git+ssh://git@github.com/heartexlabs/ls-frontend-test#3ab1956acfe84ee6ef4fbdd724b8f781f00adebf"
   },
   "devDependencies": {
     "ts-loader": "^9.4.2",

diff --git a/tests/functional/specs/image_segmentation/tools/zoom.cy.ts b/tests/functional/specs/image_segmentation/tools/zoom.cy.ts
@@ -0,0 +1,32 @@
+import { ImageView, LabelStudio } from '@heartexlabs/ls-test/helpers/LSF';
+import { simpleConfig, simpleImageData } from 'data/image_segmentation/tools/zoom';
+
+describe('Zoom tool', () => {
+  it('should zoom on hotkey', () => {
+    LabelStudio.params()
+      .config(simpleConfig)
+      .data(simpleImageData)
+      .withResult([])
+      .init();
+
+    ImageView.waitForImage();
+
+    const sizes = ImageView.image.then((img) => {
+      return {
+        width: parseFloat(img.css('width')),
+        height: parseFloat(img.css('height')),
+      };
+    });
+
+    for (let i = 0; i < 10; i++) {
+      ImageView.zoomInWithHotkey();
+    }
+
+    ImageView.image.then((img) => {
+      sizes.then((sizes) => {
+        expect(parseFloat(img.css('width'))).to.be.greaterThan(sizes.width);
+        expect(parseFloat(img.css('height'))).to.be.greaterThan(sizes.height);
+      });
+    });
+  });
+});
diff --git a/tests/functional/yarn.lock b/tests/functional/yarn.lock
@@ -264,6 +264,28 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@heartexlabs/ls-test@git+ssh://git@github.com/heartexlabs/ls-frontend-test#3ab1956acfe84ee6ef4fbdd724b8f781f00adebf":
+  version "1.0.8"
+  resolved "git+ssh://git@github.com/heartexlabs/ls-frontend-test#3ab1956acfe84ee6ef4fbdd724b8f781f00adebf"
+  dependencies:
+    "@cypress/code-coverage" "^3.10.0"
+    "@cypress/webpack-preprocessor" "^5.17.0"
+    chai "^4.3.7"
+    cypress "12.17.4"
+    cypress-image-snapshot "^4.0.1"
+    cypress-multi-reporters "^1.6.2"
+    cypress-parallel "^0.12.0"
+    cypress-plugin-snapshots "^1.4.4"
+    cypress-terminal-report "^5.1.1"
+    pixelmatch "^5.3.0"
+    pngjs "^7.0.0"
+    proper-lockfile "^4.1.2"
+    ts-loader "^9.4.2"
+    typescript "^4.9.5"
+    webpack "^5.77.0"
+    webpack-cli "^5.0.1"
+    yargs "^17.7.1"
+
 "@heartexlabs/ls-test@git+ssh://git@github.com/heartexlabs/ls-frontend-test#4c67cf3278d16b39715e55e330d86a5065aca7ba":
   version "1.0.8"
   resolved "git+ssh://git@github.com/heartexlabs/ls-frontend-test#4c67cf3278d16b39715e55e330d86a5065aca7ba"