From 061b7fa78d3340f26727520bb343bb6f61038bf5 Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Tue, 8 Oct 2024 11:34:25 +0300
Subject: [PATCH 1/5] initial commit

---
 .../canvas/views/canvas2d/brush-tools.tsx     | 244 +++++++++++-------
 1 file changed, 152 insertions(+), 92 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
index 3e365cdb360..fc5e0063baf 100644
--- a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
+++ b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
@@ -24,6 +24,10 @@ import CVATTooltip from 'components/common/cvat-tooltip';
 import { CombinedState, ObjectType, ShapeType } from 'reducers';
 import LabelSelector from 'components/label-selector/label-selector';
 import { rememberObject, updateCanvasBrushTools } from 'actions/annotation-actions';
+import { ShortcutScope } from 'utils/enums';
+import GlobalHotKeys from 'utils/mousetrap-react';
+import { subKeyMap } from 'utils/component-subkeymap';
+import { registerComponentShortcuts } from 'actions/shortcuts-actions';
 import useDraggable from './draggable-hoc';
 
 const DraggableArea = (
@@ -32,6 +36,34 @@ const DraggableArea = (
     </div>
 );
 
+const componentShortcuts = {
+    ACTIVATE_BRUSH_TOOL_STANDARD_CONTROLS: {
+        name: 'Brush tool',
+        description: 'Activate brush tool (in mask edit mode)',
+        sequences: ['shift+1'],
+        scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+    },
+    ACTIVATE_ERASER_TOOL_STANDARD_CONTROLS: {
+        name: 'Eraser tool',
+        description: 'Activate eraser tool (in mask edit mode)',
+        sequences: ['shift+2'],
+        scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+    },
+    ACTIVATE_POLYGON_TOOL_STANDARD_CONTROLS: {
+        name: 'Polygon tool',
+        description: 'Activate polygon tool (in mask edit mode)',
+        sequences: ['shift+3'],
+        scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+    },
+    ACTIVATE_POLYGON_REMOVE_TOOL_STANDARD_CONTROLS: {
+        name: 'Polygon remove tool',
+        description: 'Activate polygon remove tool (in mask edit mode)',
+        sequences: ['shift+4'],
+        scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+    },
+};
+registerComponentShortcuts(componentShortcuts);
+
 const MIN_BRUSH_SIZE = 1;
 function BrushTools(): React.ReactPortal | null {
     const dispatch = useDispatch();
@@ -39,6 +71,7 @@ function BrushTools(): React.ReactPortal | null {
     const config = useSelector((state: CombinedState) => state.annotation.canvas.brushTools);
     const canvasInstance = useSelector((state: CombinedState) => state.annotation.canvas.instance);
     const labels = useSelector((state: CombinedState) => state.annotation.job.labels);
+    const { keyMap } = useSelector((state: CombinedState) => state.shortcuts);
     const { visible } = config;
 
     const [editableState, setEditableState] = useState<any | null>(null);
@@ -53,6 +86,26 @@ function BrushTools(): React.ReactPortal | null {
         'polygon-minus': false,
     });
 
+    const setBrushTool = useCallback(() => setCurrentTool('brush'), [setCurrentTool]);
+    const setEraserTool = useCallback(() => {
+        if (!blockedTools.eraser) {
+            setCurrentTool('eraser');
+        }
+    }, [setCurrentTool, blockedTools]);
+    const setPolygonTool = useCallback(() => setCurrentTool('polygon-plus'), [setCurrentTool]);
+    const setPolygonRemoveTool = useCallback(() => {
+        if (!blockedTools['polygon-minus']) {
+            setCurrentTool('polygon-minus');
+        }
+    }, [setCurrentTool, blockedTools]);
+
+    const handlers: Record<keyof typeof componentShortcuts, (event?: KeyboardEvent) => void> = {
+        ACTIVATE_BRUSH_TOOL_STANDARD_CONTROLS: setBrushTool,
+        ACTIVATE_ERASER_TOOL_STANDARD_CONTROLS: setEraserTool,
+        ACTIVATE_POLYGON_TOOL_STANDARD_CONTROLS: setPolygonTool,
+        ACTIVATE_POLYGON_REMOVE_TOOL_STANDARD_CONTROLS: setPolygonRemoveTool,
+    };
+
     const [removeUnderlyingPixels, setRemoveUnderlyingPixels] = useState(false);
     const dragBar = useDraggable(
         (): number[] => {
@@ -201,110 +254,117 @@ function BrushTools(): React.ReactPortal | null {
     }
 
     return ReactDOM.createPortal((
-        <div className='cvat-brush-tools-toolbox' style={{ top, left, display: visible ? '' : 'none' }}>
-            <Button
-                type='text'
-                className='cvat-brush-tools-finish'
-                icon={<Icon component={CheckIcon} />}
-                onClick={() => {
-                    if (canvasInstance instanceof Canvas) {
-                        if (editableState) {
-                            canvasInstance.edit({ enabled: false });
-                        } else {
-                            canvasInstance.draw({ enabled: false });
-                        }
-                    }
-                }}
+        <>
+            <GlobalHotKeys
+                keyMap={subKeyMap(componentShortcuts, keyMap)}
+                handlers={handlers}
             />
-            {!editableState && (
+            <div className='cvat-brush-tools-toolbox' style={{ top, left, display: visible ? '' : 'none' }}>
                 <Button
                     type='text'
-                    disabled={!!editableState}
-                    className='cvat-brush-tools-continue'
-                    icon={<Icon component={PlusIcon} />}
+                    className='cvat-brush-tools-finish'
+                    icon={<Icon component={CheckIcon} />}
                     onClick={() => {
                         if (canvasInstance instanceof Canvas) {
-                            canvasInstance.draw({ enabled: false, continue: true });
-
-                            dispatch(
-                                rememberObject({
-                                    activeObjectType: ObjectType.SHAPE,
-                                    activeShapeType: ShapeType.MASK,
-                                    activeLabelID: defaultLabelID,
-                                }),
-                            );
+                            if (editableState) {
+                                canvasInstance.edit({ enabled: false });
+                            } else {
+                                canvasInstance.draw({ enabled: false });
+                            }
                         }
                     }}
                 />
-            )}
-            <hr />
-            <Button
-                type='text'
-                className={['cvat-brush-tools-brush', ...(currentTool === 'brush' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                icon={<Icon component={BrushIcon} />}
-                onClick={() => setCurrentTool('brush')}
-            />
-            <Button
-                type='text'
-                className={['cvat-brush-tools-eraser', ...(currentTool === 'eraser' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                icon={<Icon component={EraserIcon} />}
-                onClick={() => setCurrentTool('eraser')}
-                disabled={blockedTools.eraser}
-            />
-            <Button
-                type='text'
-                className={['cvat-brush-tools-polygon-plus', ...(currentTool === 'polygon-plus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                icon={<Icon component={PolygonPlusIcon} />}
-                onClick={() => setCurrentTool('polygon-plus')}
-            />
-            <Button
-                type='text'
-                className={['cvat-brush-tools-polygon-minus', ...(currentTool === 'polygon-minus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                icon={<Icon component={PolygonMinusIcon} />}
-                onClick={() => setCurrentTool('polygon-minus')}
-                disabled={blockedTools['polygon-minus']}
-            />
-            { ['brush', 'eraser'].includes(currentTool) ? (
-                <CVATTooltip title='Brush size [Hold Alt + Right Mouse Click + Drag Left/Right]'>
-                    <InputNumber
-                        className='cvat-brush-tools-brush-size'
-                        value={brushSize}
-                        min={MIN_BRUSH_SIZE}
-                        onChange={(value: number | null) => {
-                            if (typeof value === 'number' && Number.isInteger(value) && value >= MIN_BRUSH_SIZE) {
-                                setBrushSize(value);
+                {!editableState && (
+                    <Button
+                        type='text'
+                        disabled={!!editableState}
+                        className='cvat-brush-tools-continue'
+                        icon={<Icon component={PlusIcon} />}
+                        onClick={() => {
+                            if (canvasInstance instanceof Canvas) {
+                                canvasInstance.draw({ enabled: false, continue: true });
+
+                                dispatch(
+                                    rememberObject({
+                                        activeObjectType: ObjectType.SHAPE,
+                                        activeShapeType: ShapeType.MASK,
+                                        activeLabelID: defaultLabelID,
+                                    }),
+                                );
                             }
                         }}
                     />
-                </CVATTooltip>
-            ) : null}
-            { ['brush', 'eraser'].includes(currentTool) ? (
-                <Select value={brushForm} onChange={(value: 'circle' | 'square') => setBrushForm(value)}>
-                    <Select.Option value='circle'>Circle</Select.Option>
-                    <Select.Option value='square'>Square</Select.Option>
-                </Select>
-            ) : null}
-            <Button
-                type='text'
-                className={['cvat-brush-tools-underlying-pixels', ...(removeUnderlyingPixels ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                icon={<VerticalAlignBottomOutlined />}
-                onClick={() => setRemoveUnderlyingPixels(!removeUnderlyingPixels)}
-            />
-            { !editableState && !!applicableLabels.length && (
-                <LabelSelector
-                    labels={applicableLabels}
-                    value={defaultLabelID}
-                    onChange={({ id: labelID }: { id: number }) => {
-                        if (Number.isInteger(labelID)) {
-                            dispatch(
-                                rememberObject({ activeLabelID: labelID }),
-                            );
-                        }
-                    }}
+                )}
+                <hr />
+                <Button
+                    type='text'
+                    className={['cvat-brush-tools-brush', ...(currentTool === 'brush' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                    icon={<Icon component={BrushIcon} />}
+                    onClick={setBrushTool}
                 />
-            )}
-            { dragBar }
-        </div>
+                <Button
+                    type='text'
+                    className={['cvat-brush-tools-eraser', ...(currentTool === 'eraser' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                    icon={<Icon component={EraserIcon} />}
+                    onClick={setEraserTool}
+                    disabled={blockedTools.eraser}
+                />
+                <Button
+                    type='text'
+                    className={['cvat-brush-tools-polygon-plus', ...(currentTool === 'polygon-plus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                    icon={<Icon component={PolygonPlusIcon} />}
+                    onClick={setPolygonTool}
+                />
+                <Button
+                    type='text'
+                    className={['cvat-brush-tools-polygon-minus', ...(currentTool === 'polygon-minus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                    icon={<Icon component={PolygonMinusIcon} />}
+                    onClick={setPolygonRemoveTool}
+                    disabled={blockedTools['polygon-minus']}
+                />
+                { ['brush', 'eraser'].includes(currentTool) ? (
+                    <CVATTooltip title='Brush size [Hold Alt + Right Mouse Click + Drag Left/Right]'>
+                        <InputNumber
+                            className='cvat-brush-tools-brush-size'
+                            value={brushSize}
+                            min={MIN_BRUSH_SIZE}
+                            onChange={(value: number | null) => {
+                                if (typeof value === 'number' && Number.isInteger(value) && value >= MIN_BRUSH_SIZE) {
+                                    setBrushSize(value);
+                                }
+                            }}
+                        />
+                    </CVATTooltip>
+                ) : null}
+                { ['brush', 'eraser'].includes(currentTool) ? (
+                    <Select value={brushForm} onChange={(value: 'circle' | 'square') => setBrushForm(value)}>
+                        <Select.Option value='circle'>Circle</Select.Option>
+                        <Select.Option value='square'>Square</Select.Option>
+                    </Select>
+                ) : null}
+                <Button
+                    type='text'
+                    className={['cvat-brush-tools-underlying-pixels', ...(removeUnderlyingPixels ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                    icon={<VerticalAlignBottomOutlined />}
+                    onClick={() => setRemoveUnderlyingPixels(!removeUnderlyingPixels)}
+                />
+                { !editableState && !!applicableLabels.length && (
+                    <LabelSelector
+                        labels={applicableLabels}
+                        value={defaultLabelID}
+                        onChange={({ id: labelID }: { id: number }) => {
+                            if (Number.isInteger(labelID)) {
+                                dispatch(
+                                    rememberObject({ activeLabelID: labelID }),
+                                );
+                            }
+                        }}
+                    />
+                )}
+                { dragBar }
+            </div>
+        </>
+
     ), window.document.body);
 }
 

From edd13dcc57ebaa00238ae834f13d88d61dab739c Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Tue, 8 Oct 2024 11:47:59 +0300
Subject: [PATCH 2/5] added weight to shortcuts

---
 .../annotation-page/canvas/views/canvas2d/brush-tools.tsx     | 4 ++++
 .../components/header/settings-modal/shortcut-settings.tsx    | 2 +-
 cvat-ui/src/utils/mousetrap-react.tsx                         | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
index fc5e0063baf..0dd51cec9da 100644
--- a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
+++ b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
@@ -42,24 +42,28 @@ const componentShortcuts = {
         description: 'Activate brush tool (in mask edit mode)',
         sequences: ['shift+1'],
         scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+        weight: 10,
     },
     ACTIVATE_ERASER_TOOL_STANDARD_CONTROLS: {
         name: 'Eraser tool',
         description: 'Activate eraser tool (in mask edit mode)',
         sequences: ['shift+2'],
         scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+        weight: 10,
     },
     ACTIVATE_POLYGON_TOOL_STANDARD_CONTROLS: {
         name: 'Polygon tool',
         description: 'Activate polygon tool (in mask edit mode)',
         sequences: ['shift+3'],
         scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+        weight: 10,
     },
     ACTIVATE_POLYGON_REMOVE_TOOL_STANDARD_CONTROLS: {
         name: 'Polygon remove tool',
         description: 'Activate polygon remove tool (in mask edit mode)',
         sequences: ['shift+4'],
         scope: ShortcutScope.STANDARD_WORKSPACE_CONTROLS,
+        weight: 10,
     },
 };
 registerComponentShortcuts(componentShortcuts);
diff --git a/cvat-ui/src/components/header/settings-modal/shortcut-settings.tsx b/cvat-ui/src/components/header/settings-modal/shortcut-settings.tsx
index f65e8eb5c8a..6804973a94e 100644
--- a/cvat-ui/src/components/header/settings-modal/shortcut-settings.tsx
+++ b/cvat-ui/src/components/header/settings-modal/shortcut-settings.tsx
@@ -74,7 +74,7 @@ function ShortcutsSettingsComponent(props: Props): JSX.Element {
         const scopeItems = Object.values(ShortcutScope).map((scope: string) => {
             const viewFilteredItems = filteredKeyMap.filter(
                 ([, item]) => item.scope === scope,
-            );
+            ).sort(([, item1], [, item2]) => (item1.weight ?? 0) - (item2.weight ?? 0));
             if (viewFilteredItems.length === 0) {
                 return null;
             }
diff --git a/cvat-ui/src/utils/mousetrap-react.tsx b/cvat-ui/src/utils/mousetrap-react.tsx
index bca19c5eee4..4da055d327f 100644
--- a/cvat-ui/src/utils/mousetrap-react.tsx
+++ b/cvat-ui/src/utils/mousetrap-react.tsx
@@ -15,6 +15,7 @@ export interface KeyMapItem {
     scope: ShortcutScope;
     nonActive?: boolean;
     applicable?: string[];
+    weight?: number;
 }
 
 export interface KeyMap {

From bf8bda8a744646d77e106c577e60292f657e675d Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Tue, 8 Oct 2024 12:20:35 +0300
Subject: [PATCH 3/5] added tooltips for new shortcuts

---
 .../canvas/views/canvas2d/brush-tools.tsx     | 64 +++++++++++--------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
index 0dd51cec9da..956b6f1ce3a 100644
--- a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
+++ b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
@@ -75,7 +75,7 @@ function BrushTools(): React.ReactPortal | null {
     const config = useSelector((state: CombinedState) => state.annotation.canvas.brushTools);
     const canvasInstance = useSelector((state: CombinedState) => state.annotation.canvas.instance);
     const labels = useSelector((state: CombinedState) => state.annotation.job.labels);
-    const { keyMap } = useSelector((state: CombinedState) => state.shortcuts);
+    const { keyMap, normalizedKeyMap } = useSelector((state: CombinedState) => state.shortcuts);
     const { visible } = config;
 
     const [editableState, setEditableState] = useState<any | null>(null);
@@ -300,32 +300,42 @@ function BrushTools(): React.ReactPortal | null {
                     />
                 )}
                 <hr />
-                <Button
-                    type='text'
-                    className={['cvat-brush-tools-brush', ...(currentTool === 'brush' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                    icon={<Icon component={BrushIcon} />}
-                    onClick={setBrushTool}
-                />
-                <Button
-                    type='text'
-                    className={['cvat-brush-tools-eraser', ...(currentTool === 'eraser' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                    icon={<Icon component={EraserIcon} />}
-                    onClick={setEraserTool}
-                    disabled={blockedTools.eraser}
-                />
-                <Button
-                    type='text'
-                    className={['cvat-brush-tools-polygon-plus', ...(currentTool === 'polygon-plus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                    icon={<Icon component={PolygonPlusIcon} />}
-                    onClick={setPolygonTool}
-                />
-                <Button
-                    type='text'
-                    className={['cvat-brush-tools-polygon-minus', ...(currentTool === 'polygon-minus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
-                    icon={<Icon component={PolygonMinusIcon} />}
-                    onClick={setPolygonRemoveTool}
-                    disabled={blockedTools['polygon-minus']}
-                />
+                <CVATTooltip title={`Brush tool ${normalizedKeyMap.ACTIVATE_BRUSH_TOOL_STANDARD_CONTROLS}`}>
+                    <Button
+                        type='text'
+                        className={['cvat-brush-tools-brush', ...(currentTool === 'brush' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                        icon={<Icon component={BrushIcon} />}
+                        onClick={setBrushTool}
+                    />
+                </CVATTooltip>
+                <CVATTooltip title={`Eraser tool ${normalizedKeyMap.ACTIVATE_ERASER_TOOL_STANDARD_CONTROLS}`}>
+                    <Button
+                        type='text'
+                        className={['cvat-brush-tools-eraser', ...(currentTool === 'eraser' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                        icon={<Icon component={EraserIcon} />}
+                        onClick={setEraserTool}
+                        disabled={blockedTools.eraser}
+                    />
+                </CVATTooltip>
+                <CVATTooltip title={`Polygon tool ${normalizedKeyMap.ACTIVATE_POLYGON_TOOL_STANDARD_CONTROLS}`}>
+                    <Button
+                        type='text'
+                        className={['cvat-brush-tools-polygon-plus', ...(currentTool === 'polygon-plus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                        icon={<Icon component={PolygonPlusIcon} />}
+                        onClick={setPolygonTool}
+                    />
+                </CVATTooltip>
+                <CVATTooltip
+                    title={`Polygon remove tool ${normalizedKeyMap.ACTIVATE_POLYGON_REMOVE_TOOL_STANDARD_CONTROLS}`}
+                >
+                    <Button
+                        type='text'
+                        className={['cvat-brush-tools-polygon-minus', ...(currentTool === 'polygon-minus' ? ['cvat-brush-tools-active-tool'] : [])].join(' ')}
+                        icon={<Icon component={PolygonMinusIcon} />}
+                        onClick={setPolygonRemoveTool}
+                        disabled={blockedTools['polygon-minus']}
+                    />
+                </CVATTooltip>
                 { ['brush', 'eraser'].includes(currentTool) ? (
                     <CVATTooltip title='Brush size [Hold Alt + Right Mouse Click + Drag Left/Right]'>
                         <InputNumber

From 5b807a9fd04fb41d06e3d147ca8ae70504732507 Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Tue, 8 Oct 2024 12:27:38 +0300
Subject: [PATCH 4/5] added tooltips for existing shortcuts

---
 .../canvas/views/canvas2d/brush-tools.tsx     | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
index 956b6f1ce3a..09516f35fb1 100644
--- a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
+++ b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
@@ -264,40 +264,44 @@ function BrushTools(): React.ReactPortal | null {
                 handlers={handlers}
             />
             <div className='cvat-brush-tools-toolbox' style={{ top, left, display: visible ? '' : 'none' }}>
-                <Button
-                    type='text'
-                    className='cvat-brush-tools-finish'
-                    icon={<Icon component={CheckIcon} />}
-                    onClick={() => {
-                        if (canvasInstance instanceof Canvas) {
-                            if (editableState) {
-                                canvasInstance.edit({ enabled: false });
-                            } else {
-                                canvasInstance.draw({ enabled: false });
-                            }
-                        }
-                    }}
-                />
-                {!editableState && (
+                <CVATTooltip title={`Finish ${normalizedKeyMap.SWITCH_DRAW_MODE_STANDARD_CONTROLS}`}>
                     <Button
                         type='text'
-                        disabled={!!editableState}
-                        className='cvat-brush-tools-continue'
-                        icon={<Icon component={PlusIcon} />}
+                        className='cvat-brush-tools-finish'
+                        icon={<Icon component={CheckIcon} />}
                         onClick={() => {
                             if (canvasInstance instanceof Canvas) {
-                                canvasInstance.draw({ enabled: false, continue: true });
-
-                                dispatch(
-                                    rememberObject({
-                                        activeObjectType: ObjectType.SHAPE,
-                                        activeShapeType: ShapeType.MASK,
-                                        activeLabelID: defaultLabelID,
-                                    }),
-                                );
+                                if (editableState) {
+                                    canvasInstance.edit({ enabled: false });
+                                } else {
+                                    canvasInstance.draw({ enabled: false });
+                                }
                             }
                         }}
                     />
+                </CVATTooltip>
+                {!editableState && (
+                    <CVATTooltip title={`Continue ${normalizedKeyMap.SWITCH_REDRAW_MODE_STANDARD_CONTROLS}`}>
+                        <Button
+                            type='text'
+                            disabled={!!editableState}
+                            className='cvat-brush-tools-continue'
+                            icon={<Icon component={PlusIcon} />}
+                            onClick={() => {
+                                if (canvasInstance instanceof Canvas) {
+                                    canvasInstance.draw({ enabled: false, continue: true });
+
+                                    dispatch(
+                                        rememberObject({
+                                            activeObjectType: ObjectType.SHAPE,
+                                            activeShapeType: ShapeType.MASK,
+                                            activeLabelID: defaultLabelID,
+                                        }),
+                                    );
+                                }
+                            }}
+                        />
+                    </CVATTooltip>
                 )}
                 <hr />
                 <CVATTooltip title={`Brush tool ${normalizedKeyMap.ACTIVATE_BRUSH_TOOL_STANDARD_CONTROLS}`}>

From 8f7a7dd5b02f817bf9665d0da7a018eb9069aa6c Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Tue, 8 Oct 2024 12:30:50 +0300
Subject: [PATCH 5/5] fixed ts errors

---
 .../annotation-page/canvas/views/canvas2d/brush-tools.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
index 09516f35fb1..08d4146632e 100644
--- a/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
+++ b/cvat-ui/src/components/annotation-page/canvas/views/canvas2d/brush-tools.tsx
@@ -156,7 +156,7 @@ function BrushTools(): React.ReactPortal | null {
                         type: currentTool,
                         size: brushSize,
                         form: brushForm,
-                        color: label.color,
+                        color: label.color as string,
                         onBlockUpdated,
                     },
                     onUpdateConfiguration,
@@ -169,7 +169,7 @@ function BrushTools(): React.ReactPortal | null {
                         type: currentTool,
                         size: brushSize,
                         form: brushForm,
-                        color: label.color,
+                        color: label.color as string,
                         onBlockUpdated,
                     },
                     onUpdateConfiguration,
@@ -288,7 +288,7 @@ function BrushTools(): React.ReactPortal | null {
                             className='cvat-brush-tools-continue'
                             icon={<Icon component={PlusIcon} />}
                             onClick={() => {
-                                if (canvasInstance instanceof Canvas) {
+                                if (canvasInstance instanceof Canvas && defaultLabelID) {
                                     canvasInstance.draw({ enabled: false, continue: true });
 
                                     dispatch(