Batch of fixes (#1370)

* Some margins were change to paddings * Removed extra selected * Fix: added outside shapes when merge polyshapes * Fixed double scroll bars * Updated canvas table * Fixed setup methodf * Disabled change frame during drag, resize and editing * Fixed: hidden points are visible * Fixed: Merge is allowed for points, but clicks on points conflict with frame dragging logic * Fixed: do not filter removed objects * Updated CHANGELOG.md * Couple of headers updated
cvat-ai · Apr 7, 2020 · 1d78c54 · 1d78c54
1 parent 76fc8e4
commit 1d78c54
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - Increase preview size of a task till 256, 256 on the server
+- Minor style updates
 
 ### Deprecated
 -
@@ -23,8 +24,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - New shape is added when press ``esc`` when drawing instead of cancellation
-- Fixed dextr segmentation.
-- Fixed `FileNotFoundError` during dump after moving format files
+- Dextr segmentation doesn't work.
+- `FileNotFoundError` during dump after moving format files
+- CVAT doesn't append outside shapes when merge polyshapes in old UI
+- Layout sometimes shows double scroll bars on create task, dashboard and settings pages
+- UI fails after trying to change frame during resizing, dragging, editing
+- Hidden points (or outsided) are visible after changing a frame
+- Merge is allowed for points, but clicks on points conflict with frame dragging logic
+- Removed objects are visible for search
 
 ### Security
 -

diff --git a/cvat-canvas/README.md b/cvat-canvas/README.md
@@ -179,23 +179,23 @@ Standard JS events are used.
 
 ## API Reaction
 
-|              | IDLE | GROUPING | SPLITTING | DRAWING | MERGING | EDITING | DRAG | ZOOM |
-|--------------|------|----------|-----------|---------|---------|---------|------|------|
-| html()       | +    | +        | +         | +       | +       | +       | +    | +    |
-| setup()      | +    | +        | +         | +       | +       | -       | +    | +    |
-| activate()   | +    | -        | -         | -       | -       | -       | -    | -    |
-| rotate()     | +    | +        | +         | +       | +       | +       | +    | +    |
-| focus()      | +    | +        | +         | +       | +       | +       | +    | +    |
-| fit()        | +    | +        | +         | +       | +       | +       | +    | +    |
-| grid()       | +    | +        | +         | +       | +       | +       | +    | +    |
-| draw()       | +    | -        | -         | -       | -       | -       | -    | -    |
-| split()      | +    | -        | +         | -       | -       | -       | -    | -    |
-| group()      | +    | +        | -         | -       | -       | -       | -    | -    |
-| merge()      | +    | -        | -         | -       | +       | -       | -    | -    |
-| fitCanvas()  | +    | +        | +         | +       | +       | +       | +    | +    |
-| dragCanvas() | +    | -        | -         | -       | -       | -       | +    | -    |
-| zoomCanvas() | +    | -        | -         | -       | -       | -       | -    | +    |
-| cancel()     | -    | +        | +         | +       | +       | +       | +    | +    |
-| configure()  | +    | -        | -         | -       | -       | -       | -    | -    |
-| bitmap()     | +    | +        | +         | +       | +       | +       | +    | +    |
-| setZLayer()  | +    | +        | +         | +       | +       | +       | +    | +    |
+|              | IDLE | GROUP | SPLIT | DRAW | MERGE | EDIT | DRAG | RESIZE | ZOOM_CANVAS | DRAG_CANVAS |
+|--------------|------|-------|-------|------|-------|------|------|--------|-------------|-------------|
+| html()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| setup()      | +    | +     | +     | +    | +     | -    | -    | -      | +           | +           |
+| activate()   | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           |
+| rotate()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| focus()      | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| fit()        | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| grid()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| draw()       | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           |
+| split()      | +    | -     | +     | -    | -     | -    | -    | -      | -           | -           |
+| group()      | +    | +     | -     | -    | -     | -    | -    | -      | -           | -           |
+| merge()      | +    | -     | -     | -    | +     | -    | -    | -      | -           | -           |
+| fitCanvas()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| dragCanvas() | +    | -     | -     | -    | -     | -    | +    | -      | -           | +           |
+| zoomCanvas() | +    | -     | -     | -    | -     | -    | -    | +      | +           | -           |
+| cancel()     | -    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| configure()  | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           |
+| bitmap()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+| setZLayer()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
@@ -327,6 +327,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public setup(frameData: any, objectStates: any[]): void {
+        if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
+            throw Error(`Canvas is busy. Action: ${this.data.mode}`);
+        }
+
         if (frameData.number === this.data.imageID) {
             this.data.objects = objectStates;
             this.notify(UpdateReasons.OBJECTS_UPDATED);

diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
@@ -1041,7 +1041,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     (shape as any).clear();
                     shape.attr('points', stringified);
 
-                    if (state.shapeType === 'points') {
+                    if (state.shapeType === 'points' && !state.hidden) {
                         this.selectize(false, shape);
                         this.setupPoints(shape as SVG.PolyLine, state);
                     }
@@ -1187,7 +1187,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             (shape as any).off('resizestart');
             (shape as any).off('resizing');
             (shape as any).off('resizedone');
-            (shape as any).resize(false);
+            (shape as any).resize('stop');
 
             // TODO: Hide text only if it is hidden by settings
             const text = this.svgTexts[clientID];
@@ -1543,6 +1543,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
         group.on('click.canvas', (event: MouseEvent): void => {
             // Need to redispatch the event on another element
             basicPolyline.fire(new MouseEvent('click', event));
+            // redispatch event to canvas to be able merge points clicking them
+            this.content.dispatchEvent(new MouseEvent('click', event));
         });
 
         group.bbox = basicPolyline.bbox.bind(basicPolyline);

diff --git a/cvat-core/src/annotations-collection.js b/cvat-core/src/annotations-collection.js
@@ -871,16 +871,18 @@
                 // In particular consider first and last frame as keyframes for all frames
                 const statesData = [].concat(
                     (frame in this.shapes ? this.shapes[frame] : [])
+                        .filter((shape) => !shape.removed)
                         .map((shape) => shape.get(frame)),
                     (frame in this.tags ? this.tags[frame] : [])
+                        .filter((tag) => !tag.removed)
                         .map((tag) => tag.get(frame)),
                 );
                 const tracks = Object.values(this.tracks)
                     .filter((track) => (
                         frame in track.shapes
                         || frame === frameFrom
                         || frame === frameTo
-                    ));
+                    )).filter((track) => !track.removed);
                 statesData.push(
                     ...tracks.map((track) => track.get(frame))
                         .filter((state) => !state.outside),

diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx
@@ -36,7 +36,17 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
 
     useEffect(() => {
         saveLogs();
-        return saveLogs;
+        const root = window.document.getElementById('root');
+        if (root) {
+            root.style.minHeight = '768px';
+        }
+
+        return () => {
+            saveLogs();
+            if (root) {
+                root.style.minHeight = '';
+            }
+        };
     }, []);
 
     if (job === null) {

diff --git a/cvat-ui/src/components/create-task-page/styles.scss b/cvat-ui/src/components/create-task-page/styles.scss
@@ -6,7 +6,7 @@
 
 .cvat-create-task-form-wrapper {
     text-align: center;
-    margin-top: 40px;
+    padding-top: 40px;
     overflow-y: auto;
     height: 90%;
 

diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss
@@ -9,7 +9,7 @@
     height: 100%;
 
     > div:nth-child(1) {
-        margin-bottom: 10px;
+        padding-bottom: 10px;
 
         div > {
             span {
@@ -36,11 +36,11 @@
 
     > div:nth-child(3) {
         height: 83%;
-        margin-top: 10px;
+        padding-top: 10px;
     }
 
     > div:nth-child(4) {
-        margin-top: 10px;
+        padding-top: 10px;
     }
 }
 

diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
@@ -7,6 +7,7 @@ import copy from 'copy-to-clipboard';
 import { connect } from 'react-redux';
 
 import { LogType } from 'cvat-logger';
+import { Canvas, isAbleToChangeFrame } from 'cvat-canvas';
 import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces';
 import {
     collapseObjectItems,
@@ -24,7 +25,6 @@ import {
 
 import ObjectStateItemComponent from 'components/annotation-page/standard-workspace/objects-side-bar/object-item';
 
-
 interface OwnProps {
     clientID: number;
 }
@@ -44,6 +44,7 @@ interface StateToProps {
     minZLayer: number;
     maxZLayer: number;
     normalizedKeyMap: Record<string, string>;
+    canvasInstance: Canvas;
 }
 
 interface DispatchToProps {
@@ -84,6 +85,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
             canvas: {
                 ready,
                 activeControl,
+                instance: canvasInstance,
             },
             colors,
         },
@@ -119,6 +121,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         minZLayer,
         maxZLayer,
         normalizedKeyMap,
+        canvasInstance,
     };
 }
 
@@ -166,72 +169,44 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
 type Props = StateToProps & DispatchToProps;
 class ObjectItemContainer extends React.PureComponent<Props> {
     private navigateFirstKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { first } = objectState.keyframes;
         if (first !== frameNumber) {
-            changeFrame(first);
+            this.changeFrame(first);
         }
     };
 
     private navigatePrevKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { prev } = objectState.keyframes;
         if (prev !== null && prev !== frameNumber) {
-            changeFrame(prev);
+            this.changeFrame(prev);
         }
     };
 
     private navigateNextKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { next } = objectState.keyframes;
         if (next !== null && next !== frameNumber) {
-            changeFrame(next);
+            this.changeFrame(next);
         }
     };
 
     private navigateLastKeyframe = (): void => {
-        const {
-            objectState,
-            changeFrame,
-            frameNumber,
-        } = this.props;
-
+        const { objectState, frameNumber } = this.props;
         const { last } = objectState.keyframes;
         if (last !== frameNumber) {
-            changeFrame(last);
+            this.changeFrame(last);
         }
     };
 
     private copy = (): void => {
-        const {
-            objectState,
-            copyShape,
-        } = this.props;
-
+        const { objectState, copyShape } = this.props;
         copyShape(objectState);
     };
 
     private propagate = (): void => {
-        const {
-            objectState,
-            propagateObject,
-        } = this.props;
-
+        const { objectState, propagateObject } = this.props;
         propagateObject(objectState);
     };
 
@@ -422,6 +397,13 @@ class ObjectItemContainer extends React.PureComponent<Props> {
         this.commit();
     };
 
+    private changeFrame(frame: number): void {
+        const { changeFrame, canvasInstance } = this.props;
+        if (isAbleToChangeFrame(canvasInstance)) {
+            changeFrame(frame);
+        }
+    }
+
     private commit(): void {
         const {
             objectState,

diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx
@@ -15,6 +15,7 @@ import {
     copyShape as copyShapeAction,
     propagateObject as propagateObjectAction,
 } from 'actions/annotation-actions';
+import { Canvas, isAbleToChangeFrame } from 'cvat-canvas';
 import { CombinedState, StatesOrdering, ObjectType } from 'reducers/interfaces';
 
 interface StateToProps {
@@ -32,6 +33,7 @@ interface StateToProps {
     annotationsFiltersHistory: string[];
     keyMap: Record<string, ExtendedKeyMapOptions>;
     normalizedKeyMap: Record<string, string>;
+    canvasInstance: Canvas;
 }
 
 interface DispatchToProps {
@@ -65,6 +67,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
                     number: frameNumber,
                 },
             },
+            canvas: {
+                instance: canvasInstance,
+            },
             tabContentHeight: listHeight,
         },
         shortcuts: {
@@ -104,6 +109,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         annotationsFiltersHistory,
         keyMap,
         normalizedKeyMap,
+        canvasInstance,
     };
 }
 
@@ -254,6 +260,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             minZLayer,
             keyMap,
             normalizedKeyMap,
+            canvasInstance,
         } = this.props;
         const {
             sortedStatesID,
@@ -388,7 +395,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                 if (state && state.objectType === ObjectType.TRACK) {
                     const frame = typeof (state.keyframes.next) === 'number'
                         ? state.keyframes.next : null;
-                    if (frame !== null) {
+                    if (frame !== null && isAbleToChangeFrame(canvasInstance)) {
                         changeFrame(frame);
                     }
                 }
@@ -399,7 +406,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                 if (state && state.objectType === ObjectType.TRACK) {
                     const frame = typeof (state.keyframes.prev) === 'number'
                         ? state.keyframes.prev : null;
-                    if (frame !== null) {
+                    if (frame !== null && isAbleToChangeFrame(canvasInstance)) {
                         changeFrame(frame);
                     }
                 }