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

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
 -

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() | + | + | + | + | +  | + | + | + | +  | +   |

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);

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);

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),

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) {

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%;
 

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;
  }
 }
 

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,

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);
  }
  }