Add magic wand selection tool

package.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.9.3",
     "@mui/material": "^5.9.1",
     "@mui/system": "^5.9.1",
+    "@techstark/opencv-js": "^4.10.0-beta.1",
     "@tensorflow-models/coco-ssd": "^2.2.2",
     "@tensorflow-models/posenet": "^2.2.2",
     "@tensorflow/tfjs": "^3.19.0",

src/data/enums/CustomCursorStyle.ts

@@ -6,5 +6,8 @@ export enum CustomCursorStyle {
     CANCEL = "CANCEL",
     CLOSE = "CLOSE",
     GRAB = "GRAB",
-    GRABBING = "GRABBING"
+    GRABBING = "GRABBING",
+    MAGIC_WAND  = "MAGIC_WAND",
+    MAGIC_WAND_ADD  = "MAGIC_WAND_ADD",
+    MAGIC_WAND_REMOVE = "MAGIC_WAND_REMOVE", 
 }

src/logic/actions/EditorActions.ts

@@ -124,7 +124,7 @@ export class EditorActions {
             EditorModel.cursor.style.top = mousePositionOverViewPort.y + "px";
             EditorModel.cursor.style.display = "block";
 
-            if (isMouseOverImage && ![CustomCursorStyle.GRAB, CustomCursorStyle.GRABBING].includes(GeneralSelector.getCustomCursorStyle())) {
+            if (isMouseOverImage && ![CustomCursorStyle.GRAB, CustomCursorStyle.GRABBING, CustomCursorStyle.MAGIC_WAND].includes(GeneralSelector.getCustomCursorStyle())) {
                 const imageSize: ISize = ImageUtil.getSize(EditorModel.image);
                 const scale: number = imageSize.width / viewPortContentImageRect.width;
                 const mousePositionOverImage: IPoint = PointUtil.multiply(

src/logic/context/ContextManager.ts

@@ -1,12 +1,13 @@
 import {ContextType} from "../../data/enums/ContextType";
 import {HotKeyAction} from "../../data/HotKeyAction";
 import {store} from "../../index";
-import {updateActiveContext} from "../../store/general/actionCreators";
+import {updateActiveContext, updateCustomCursorStyle} from "../../store/general/actionCreators";
 import {xor, isEmpty} from "lodash";
 import {EditorContext} from "./EditorContext";
 import {PopupContext} from "./PopupContext";
 import {GeneralSelector} from "../../store/selectors/GeneralSelector";
 import {EventType} from "../../data/enums/EventType";
+import {CustomCursorStyle} from "../../data/enums/CustomCursorStyle";
 
 export class ContextManager {
     private static activeCombo: string[] = [];
@@ -56,11 +57,13 @@ export class ContextManager {
             ContextManager.addToCombo(keyCode);
         }
         ContextManager.execute(event);
+        store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MAGIC_WAND_ADD));
     }
 
     private static onUp(event: KeyboardEvent): void {
         const keyCode: string = ContextManager.getKeyCodeFromEvent(event);
         ContextManager.removeFromCombo(keyCode);
+        store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MAGIC_WAND));
     }
 
     public static onFocus() {

src/logic/render/PolygonRenderEngine.ts

@@ -27,6 +27,11 @@ import {GeneralSelector} from '../../store/selectors/GeneralSelector';
 import {Settings} from '../../settings/Settings';
 import {LabelUtil} from '../../utils/LabelUtil';
 import {PolygonUtil} from '../../utils/PolygonUtil';
+import {MagicWandUtil} from '../../utils/MagicWandUtil';
+import {EditorModel} from '../../staticModels/EditorModel';
+import {PlatformUtil} from '../../utils/PlatformUtil';
+import {MagicWandSelector} from '../../store/selectors/MagicWandSelector';
+import {updateMagicWandMask,updateMagicWandRect} from '../../store/magic-wand/actionCreators';
 
 export class PolygonRenderEngine extends BaseRenderEngine {
 
@@ -69,7 +74,9 @@ export class PolygonRenderEngine extends BaseRenderEngine {
     public mouseDownHandler(data: EditorData): void {
         const isMouseOverCanvas: boolean = RenderEngineUtil.isMouseOverCanvas(data);
         if (isMouseOverCanvas) {
-            if (this.isCreationInProgress()) {
+            if (MagicWandSelector.getMagicWandActiveStatus()) {
+                this.magicWandSelection(data);
+            } else if (this.isCreationInProgress()) {
                 const isMouseOverStartAnchor: boolean = this.isMouseOverAnchor(
                     data.mousePositionOnViewPortContent, this.activePath[0]);
                 if (isMouseOverStartAnchor) {
@@ -165,7 +172,16 @@ export class PolygonRenderEngine extends BaseRenderEngine {
         if (!!this.canvas && !!data.mousePositionOnViewPortContent && !GeneralSelector.getImageDragModeStatus()) {
             const isMouseOverCanvas: boolean = RenderEngineUtil.isMouseOverCanvas(data);
             if (isMouseOverCanvas) {
-                if (this.isCreationInProgress()) {
+                if (MagicWandSelector.getMagicWandActiveStatus()) {
+                    if (data.activeKeyCombo.includes("Shift")) {
+                        store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MAGIC_WAND_ADD));
+                    } else if (data.activeKeyCombo.includes(PlatformUtil.isMac(window.navigator.userAgent) ? "Alt" : "Control")) {
+                        store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MAGIC_WAND_REMOVE));
+
+                    } else {
+                        store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MAGIC_WAND));
+                    }
+                } else if (this.isCreationInProgress()) {
                     const isMouseOverStartAnchor: boolean = this.isMouseOverAnchor(data.mousePositionOnViewPortContent, this.activePath[0]);
                     if (isMouseOverStartAnchor && this.activePath.length > 2)
                         store.dispatch(updateCustomCursorStyle(CustomCursorStyle.CLOSE));
@@ -297,6 +313,12 @@ export class PolygonRenderEngine extends BaseRenderEngine {
         }
     }
 
+    private removePolygonLabel(labelId: string) {
+        const imageData: ImageData = LabelsSelector.getActiveImageData();
+        imageData.labelPolygons = imageData.labelPolygons.filter((polygon: LabelPolygon) => polygon.id !== labelId);
+        store.dispatch(updateImageDataById(imageData.id, imageData));
+    };
+
     private addPolygonLabel(polygon: IPoint[]) {
         const activeLabelId = LabelsSelector.getActiveLabelNameId();
         const imageData: ImageData = LabelsSelector.getActiveImageData();
@@ -447,4 +469,33 @@ export class PolygonRenderEngine extends BaseRenderEngine {
         }
         return null;
     }
+
+    private magicWandSelection(data: EditorData): void {
+        const mousePositionSnapped: IPoint = RectUtil.snapPointToRect(data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
+        const actualPosition = RenderEngineUtil.transferPointFromViewPortContentToImage(mousePositionSnapped, data);
+        this.activePath.push(mousePositionSnapped);
+        const shiftKey = data.activeKeyCombo.includes("Shift");
+        const altKey = data.activeKeyCombo.includes(PlatformUtil.isMac(window.navigator.userAgent) ? "Alt" : "Control");
+        const modifier = shiftKey ? "add" : altKey ? "remove" : undefined;
+        if (modifier && MagicWandSelector.getMagicWandMask()) {
+            const { mask: updatedMask, rect: updatedRect, path }  = MagicWandUtil.editSelection(EditorModel.image, actualPosition, MagicWandSelector.getMagicWandMask(), MagicWandSelector.getMagicWandRect(), MagicWandSelector.getMagicWandTolerance(), modifier);
+            if (path.length === 0) return;
+            store.dispatch(updateMagicWandMask(updatedMask));
+            store.dispatch(updateMagicWandRect(updatedRect));
+            this.activePath = path.map((point: IPoint) => RenderEngineUtil.transferPointFromImageToViewPortContent(point, data));
+            const polygonOnImage: IPoint[] = RenderEngineUtil.transferPolygonFromViewPortContentToImage(this.activePath, data);
+            this.removePolygonLabel(LabelsSelector.getActiveLabelId());
+            this.addPolygonLabel(polygonOnImage);
+            this.finishLabelCreation();
+        } else {
+            const { mask: updatedMask, rect: updatedRect, path } = MagicWandUtil.getSelection(EditorModel.image, actualPosition, MagicWandUtil.initMatrix(), MagicWandUtil.initRectangle(), MagicWandSelector.getMagicWandTolerance());
+            if (path.length === 0) return;
+            store.dispatch(updateMagicWandMask(updatedMask));
+            store.dispatch(updateMagicWandRect(updatedRect));
+            this.activePath = path.map((point: IPoint) => RenderEngineUtil.transferPointFromImageToViewPortContent(point, data));
+            const polygonOnImage: IPoint[] = RenderEngineUtil.transferPolygonFromViewPortContentToImage(this.activePath, data);
+            this.addPolygonLabel(polygonOnImage);
+            this.finishLabelCreation();
+        }
+    }
 }

src/store/Actions.ts

@@ -31,8 +31,14 @@ export enum Action {
     UPDATE_HIGHLIGHTED_LABEL_ID = '@@UPDATE_HIGHLIGHTED_LABEL_ID',
     UPDATE_LABEL_NAMES = '@@UPDATE_LABEL_NAMES',
     UPDATE_FIRST_LABEL_CREATED_FLAG = '@@UPDATE_FIRST_LABEL_CREATED_FLAG',
+
+    // MAGIC WAND
+    UPDATE_MAGIC_WAND_ACTIVE_STATUS = '@@UPDATE_MAGIC_WAND_ACTIVE_STATUS',
+    UPDATE_MAGIC_WAND_TOLERANCE = '@@UPDATE_MAGIC_WAND_TOLERANCE',
+    UPDATE_MAGIC_WAND_MASK = '@@UPDATE_MAGIC_WAND_MASK',
+    UPDATE_MAGIC_WAND_RECT = '@@UPDATE_MAGIC_WAND_RECT',
 
     // NOTIFICATIONS
     SUBMIT_NEW_NOTIFICATION = '@@SUBMIT_NEW_NOTIFICATION',
-    DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID'
+    DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID',
 }

src/store/index.ts

@@ -1,14 +1,16 @@
-import { combineReducers } from 'redux';
+import {combineReducers} from 'redux';
 import {labelsReducer} from './labels/reducer';
 import {generalReducer} from './general/reducer';
 import {aiReducer} from './ai/reducer';
+import {magicWandReducer} from './magic-wand/reducer';
 import {notificationsReducer} from './notifications/reducer';
 
 export const rootReducer = combineReducers({
     general: generalReducer,
     labels: labelsReducer,
     ai: aiReducer,
-    notifications: notificationsReducer
+    magicWand: magicWandReducer,
+    notifications: notificationsReducer,
 });
 
 export type AppState = ReturnType<typeof rootReducer>;

src/store/magic-wand/actionCreators.ts

@@ -0,0 +1,39 @@
+import {MagicWandActionTypes} from './types';
+import {Action} from '../Actions';
+import {Matrix,Rectangle} from '../../utils/MagicWandUtil';
+
+export function updateMagicWandActiveStatus(magicWandActive: boolean): MagicWandActionTypes {
+    return {
+        type: Action.UPDATE_MAGIC_WAND_ACTIVE_STATUS,
+        payload: {
+            magicWandActive,
+        },
+    };
+}
+
+export function updateMagicWandTolerance(magicWandTolerance: number): MagicWandActionTypes {
+    return {
+        type: Action.UPDATE_MAGIC_WAND_TOLERANCE,
+        payload: {
+            magicWandTolerance,
+        },
+    };
+}
+
+export function updateMagicWandMask(magicWandMask: Matrix): MagicWandActionTypes {
+    return {
+        type: Action.UPDATE_MAGIC_WAND_MASK,
+        payload: {
+            magicWandMask,
+        },
+    };
+}
+
+export function updateMagicWandRect(magicWandRect: Rectangle): MagicWandActionTypes {
+    return {
+        type: Action.UPDATE_MAGIC_WAND_RECT,
+        payload: {
+            magicWandRect,
+        },
+    };
+}