chg: 🚸 AnnotationViewer - add OS X support to multi selection event key

cypress/specs/AnnotationViewer.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { mount } from '@cypress/react'
 import { AnnotationShape, AnnotationViewer } from '../../dist'
-import { Key } from 'ts-key-enum'
 
 import dummyImage from '../assets/demo.jpg'
 import { dummyShapes } from '../assets/shapes'
@@ -31,7 +30,6 @@ describe('AnnotationViewer', () => {
         cy.wrap(canvasHeight).should('equal', containerHeight)
       })
     cy.get('#annotationViewer').matchImageSnapshot('default')
-    cy.pause()
   })
 
   it('zoom correctly', () => {
@@ -150,15 +148,16 @@ describe('AnnotationViewer', () => {
         onShapeMultiSelect={events.onShapeMultiSelect}
       />
     ).then(() => {
+      cy.pause()
       cy.get('#annotationViewer')
         .children()
-        .trigger('keydown', { key: Key.Control })
+        .trigger('keydown', { altKey: true, ctrlKey: true })
         .trigger('mousedown', { which: 1, clientX: 10, clientY: 10 })
         .trigger('mousemove', { which: 1, clientX: 600, clientY: 300 })
         .matchImageSnapshot('multi-select')
       cy.get('#annotationViewer')
         .trigger('mouseup')
-        .trigger('keyup', { key: Key.Control })
+        .trigger('keyup', { altKey: true, ctrlKey: true })
         .then(() => {
           cy.wait(200)
           expect(events.onShapeMultiSelect).to.be.calledOnceWithExactly(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mindee-js",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Front-End Computer Vision SDK for React",
   "author": "@mindee",
   "license": "GPL-3.0",
@@ -15,7 +15,6 @@
   "dependencies": {
     "konva": "^8.1.3",
     "pdfjs-dist": "2.6.347",
-    "ts-key-enum": "^2.0.7",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
@@ -35,12 +34,12 @@
     "eslint-plugin-prettier": "^3.1.4",
     "prettier": "^2.1.2",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "ts-patch": "^1.4.3",
     "typescript": "^4.1.2",
     "typescript-transform-paths": "^3.3.1",
     "vite": "^2.5.1",
-    "vite-tsconfig-paths": "^3.3.13",
-    "react-dom": "^17.0.2"
+    "vite-tsconfig-paths": "^3.3.13"
   },
   "peerDependencies": {
     "react": "^17.0.2"

src/index.ts

@@ -13,6 +13,7 @@ import {
   drawShape,
   setShapeConfig,
   drawShapes,
+  toBase64,
 } from './utils/functions'
 import getImagesFromPDF from './utils/getImagesFromPDF'
 import AnnotationLens from './components/AnnotationLens'
@@ -29,6 +30,7 @@ export type {
   AnnotationData,
 }
 export {
+  toBase64,
   drawShapes,
   dataURItoBlob,
   AnnotationLens,

src/utils/useMultiSelection.ts

@@ -1,6 +1,5 @@
 import useEventListener from './useEventListener'
 import { MutableRefObject } from 'react'
-import { Key } from 'ts-key-enum'
 import Konva from 'konva'
 
 interface Props {
@@ -15,27 +14,19 @@ export default function useMultiSelection({
     'keydown',
     (event: KeyboardEvent) => {
       event.stopPropagation()
-      switch (event.key) {
-        case Key.Control:
-          stage?.draggable(false)
-          isSelectionActiveRef.current = true
-          break
-        default:
-          break
+      if (event.ctrlKey || event.altKey) {
+        stage?.draggable(false)
+        isSelectionActiveRef.current = true
       }
     }
   )
   useEventListener<HTMLDivElement, KeyboardEvent>(
     'keyup',
     (event: KeyboardEvent) => {
       event.stopPropagation()
-      switch (event.key) {
-        case Key.Control:
-          stage?.draggable(true)
-          isSelectionActiveRef.current = false
-          break
-        default:
-          break
+      if (event.ctrlKey || event.altKey) {
+        stage?.draggable(false)
+        isSelectionActiveRef.current = true
       }
     }
   )

yarn.lock

@@ -3033,11 +3033,6 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-ts-key-enum@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/ts-key-enum/-/ts-key-enum-2.0.7.tgz#ea2c6f3bd770257a3d70fd60625bc3e99d19ab1e"
-  integrity sha512-i5K1p6o5J2EMNS3DVpVdpsJnFMWNE01kBjnw5evS/XgBYiu/oo/mxamOOEVYn/uPbIaxl5iDVSbAcFCDY55tmw==
-
 ts-patch@^1.4.3:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/ts-patch/-/ts-patch-1.4.4.tgz#c4814af4ab36183ddcf04c178f0153ce6ef48245"