React UI: Point deletion context menu #1292

ActiveChooN · 2020-03-18T23:09:07Z

Delete point with simple context menu and without using Ctrl+double click

bsekachev · 2020-03-19T12:39:55Z

Hmm..
Whenever I try to press right button click on a point, UI fails with

Uncaught Error: Canvas is busy. Action: resize
    at CanvasModelImpl.activate (canvasModel.ts:336)
    at CanvasImpl.activate (canvas.ts:98)
    at CanvasWrapperComponent.activateOnCanvas (canvas-wrapper.tsx:498)
    at CanvasWrapperComponent.componentDidUpdate (canvas-wrapper.tsx:203)
    at commitLifeCycles (react-dom.development.js:22084)
    at commitLayoutEffects (react-dom.development.js:25302)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at commitRootImpl (react-dom.development.js:25040)
activate @ canvasModel.ts:336
activate @ canvas.ts:98
activateOnCanvas @ canvas-wrapper.tsx:498
componentDidUpdate @ canvas-wrapper.tsx:203
commitLifeCycles @ react-dom.development.js:22084
commitLayoutEffects @ react-dom.development.js:25302
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25040
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
commitRoot @ react-dom.development.js:24889
finishSyncRender @ react-dom.development.js:24296
performSyncWorkOnRoot @ react-dom.development.js:24274
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
onUpdateContextMenu @ canvas-wrapper.tsx:263
(anonymous) @ canvas-wrapper.tsx:473
contextmenuHandler @ canvasView.ts:465
react-dom.development.js:21810 The above error occurred in the <CanvasWrapperComponent> component:
    in CanvasWrapperComponent (created by ConnectFunction)
    in ConnectFunction (created by StandardWorkspaceComponent)
    in section (created by BasicLayout)
    in BasicLayout (created by Context.Consumer)
    in Adapter (created by StandardWorkspaceComponent)
    in StandardWorkspaceComponent (created by AnnotationPageComponent)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Adapter (created by AnnotationPageComponent)
    in section (created by BasicLayout)
    in BasicLayout (created by Context.Consumer)
    in Adapter (created by AnnotationPageComponent)
    in AnnotationPageComponent (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(AnnotationPageComponent)) (created by Context.Consumer)
    in Route (created by CVATApplication)
    in Switch (created by CVATApplication)
    in GlobalHotKeys (created by CVATApplication)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Adapter (created by CVATApplication)
    in section (created by BasicLayout)
    in BasicLayout (created by Context.Consumer)
    in Adapter (created by CVATApplication)
    in CVATApplication (created by Context.Consumer)
    in withRouter(CVATApplication) (created by ConnectFunction)
    in ConnectFunction
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Can you confirm if it works for you?

ActiveChooN · 2020-03-19T13:08:29Z

@bsekachev

Can you confirm if it works for you?

Hmm, everything works fine for me, but i'll try to figure it out.

Also found that there is ability to open context menu for box points also. Will fix it.

ActiveChooN · 2020-03-20T09:47:33Z

@bsekachev please confirm that you still have an issue. And if so can you please provide a case in which it happens?

bsekachev · 2020-03-23T05:52:16Z

@ActiveChooN

Was you able to reproduce it on ubuntu?

ActiveChooN · 2020-03-23T07:26:26Z

@bsekachev

@ActiveChooN

Was you able to reproduce it on ubuntu?

Yes, working on it

bsekachev · 2020-03-23T12:10:22Z

Some issues:

When I open shape menu for a shape, then move cursor to another shape, I cannot open menu for another shape in a new place
gif below

Looks like when we remove some points of a shape, the shape updates immediately, when we remove others points of the shape, the shape doesn't update immediately.

one more issue demonstrated on the following gif
and I cannot remove the first point of a shape (a point that was first during drawing). Literally, I cannot even press the button 'Delete point'

Fixed deleting of the latest point

bsekachev · 2020-03-23T16:00:31Z

cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx

+import {
+    Layout,
+    Slider,
+    Icon,
+    Tooltip,
+} from 'antd';
+


Let's import exact components in future code
Not from antd wrapper
It common recommendation to reduce bundle size

bsekachev · 2020-03-23T16:07:29Z

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

+.cvat-canvas-context-menu {
+    opacity: 0.6;
+    position: fixed;
+    width: 300px;
+    z-index: 10;
+    max-height: 50%;
+    overflow-y: auto;
+
+    &:hover {
+        opacity: 1;
+    }
+}


Why have you duplicated style from src/components/annotation-page/styles.scss?

bsekachev · 2020-03-23T16:07:52Z

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

+.cvat-canvas-z-axis-wrapper {
+    position: absolute;
+    background: $background-color-2;
+    bottom: 10px;
+    right: 10px;
+    height: 150px;
+    z-index: 100;
+    border-radius: 6px;
+    opacity: 0.5;
+    border: 1px solid $border-color-3;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 3px;
+
+    &:hover {
+        opacity: 1;
+    }
+
+    > .ant-slider {
+        height: 75%;
+        margin: 5px 3px;
+
+        > .ant-slider-rail {
+            background-color: #979797;
+        }
+
+        > .ant-slider-handle {
+            transform: none !important;
+        }
+    }
+
+    > i {
+        opacity: 0.7;
+        color: $objects-bar-icons-color;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        &:active {
+            opacity: 0.7;
+        }
+    }
+}


One more duplicate

bsekachev · 2020-03-23T16:11:35Z

cvat-ui/src/containers/annotation-page/standard-workspace/canvas-point-context-menu.tsx

+
+interface StateToProps {
+    activatedStateID: number | null;
+    activatedPointID: number | null | undefined;


activatedPointID?: number | null

bsekachev · 2020-03-23T16:11:58Z

cvat-ui/src/containers/annotation-page/standard-workspace/canvas-point-context-menu.tsx

+
+interface State {
+    activatedStateID: number | null | undefined;
+    activatedPointID: number | null | undefined;


activatedPointID?: number | null

bsekachev · 2020-03-23T16:13:56Z

cvat-ui/src/containers/annotation-page/standard-workspace/canvas-point-context-menu.tsx

+    top: number;
+}
+
+class CanvasContextMenuContainer extends React.PureComponent<Props, State> {


CanvasPointContextMenuContainer

ActiveChooN added 4 commits March 12, 2020 13:50

wip

965ff77

temp

4d0c225

Merge branch 'develop' into dk/point-deletion

b0dbbb3

Added point deletion context menu

845be3b

ActiveChooN requested a review from bsekachev March 18, 2020 23:09

ActiveChooN changed the title ~~Point deletion context menu~~ React UI: Point deletion context menu Mar 18, 2020

ActiveChooN added 2 commits March 20, 2020 12:31

fixed point context menu for rectangles

1c1ab6a

Merge branch 'develop' into dk/point-deletion

7e7a5a6

Fixed context menu on ubuntu

56f58b6

bsekachev and others added 3 commits March 23, 2020 18:09

Fixed deleting of the latest point

8aaa4d2

Merge pull request #1304 from opencv/bs/delete_points_fix

56c6f11

Fixed deleting of the latest point

fixes

c11cc64

bsekachev reviewed Mar 23, 2020

View reviewed changes

fixed PR

3c128b2

bsekachev approved these changes Mar 24, 2020

View reviewed changes

ActiveChooN merged commit 57e8083 into develop Mar 24, 2020

bsekachev deleted the dk/point-deletion branch March 25, 2020 08:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React UI: Point deletion context menu #1292

React UI: Point deletion context menu #1292

ActiveChooN commented Mar 18, 2020

bsekachev commented Mar 19, 2020

ActiveChooN commented Mar 19, 2020 •

edited

Loading

ActiveChooN commented Mar 20, 2020

bsekachev commented Mar 23, 2020

ActiveChooN commented Mar 23, 2020

bsekachev commented Mar 23, 2020

bsekachev Mar 23, 2020

bsekachev Mar 23, 2020

bsekachev Mar 23, 2020

bsekachev Mar 23, 2020

bsekachev Mar 23, 2020

bsekachev Mar 23, 2020

React UI: Point deletion context menu #1292

React UI: Point deletion context menu #1292

Conversation

ActiveChooN commented Mar 18, 2020

bsekachev commented Mar 19, 2020

ActiveChooN commented Mar 19, 2020 • edited Loading

ActiveChooN commented Mar 20, 2020

bsekachev commented Mar 23, 2020

ActiveChooN commented Mar 23, 2020

bsekachev commented Mar 23, 2020

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

bsekachev Mar 23, 2020

Choose a reason for hiding this comment

ActiveChooN commented Mar 19, 2020 •

edited

Loading