React UI: ZOrder implementation (#1176)

* Drawn z-order switcher

* Z layer was added to state

* Added ZLayer API method cvat-canvas

* Added sorting by Z

* Displaying points in top

* Removed old code

* Improved sort function

* Drawn a couple of icons

* Send to foreground / send to background

* Updated unit tests

* Added unit tests for filter parser

* Removed extra code

* Updated README.md

cvat-canvas/README.md

@@ -71,6 +71,7 @@ Canvas itself handles:
 
     interface Canvas {
         html(): HTMLDivElement;
+        setZLayer(zLayer: number | null): void;
         setup(frameData: any, objectStates: any[]): void;
         activate(clientID: number, attributeID?: number): void;
         rotate(rotation: Rotation, remember?: boolean): void;
@@ -149,9 +150,6 @@ Standard JS events are used.
     });
 ```
 
-## States
-
- ![](images/states.svg)
 
 ## API Reaction
 
@@ -172,3 +170,4 @@ Standard JS events are used.
 | dragCanvas() | +    | -        | -         | -       | -       | -       | +    | -    |
 | zoomCanvas() | +    | -        | -         | -       | -       | -       | -    | +    |
 | cancel()     | -    | +        | +         | +       | +       | +       | +    | +    |
+| setZLayer()  | +    | +        | +         | +       | +       | +       | +    | +    |

cvat-canvas/src/typescript/canvas.ts

@@ -34,6 +34,7 @@ const CanvasVersion = pjson.version;
 
 interface Canvas {
     html(): HTMLDivElement;
+    setZLayer(zLayer: number | null): void;
     setup(frameData: any, objectStates: any[]): void;
     activate(clientID: number | null, attributeID?: number): void;
     rotate(rotation: Rotation, remember?: boolean): void;
@@ -69,6 +70,10 @@ class CanvasImpl implements Canvas {
         return this.view.html();
     }
 
+    public setZLayer(zLayer: number | null): void {
+        this.model.setZLayer(zLayer);
+    }
+
     public setup(frameData: any, objectStates: any[]): void {
         this.model.setup(frameData, objectStates);
     }

cvat-canvas/src/typescript/canvasController.ts

@@ -18,6 +18,7 @@ import {
 
 export interface CanvasController {
     readonly objects: any[];
+    readonly zLayer: number | null;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
     readonly drawData: DrawData;
@@ -105,6 +106,10 @@ export class CanvasControllerImpl implements CanvasController {
         this.model.geometry = geometry;
     }
 
+    public get zLayer(): number | null {
+        return this.model.zLayer;
+    }
+
     public get objects(): any[] {
         return this.model.objects;
     }

cvat-canvas/src/typescript/canvasModel.ts

@@ -80,6 +80,7 @@ export enum UpdateReasons {
     IMAGE_FITTED = 'image_fitted',
     IMAGE_MOVED = 'image_moved',
     GRID_UPDATED = 'grid_updated',
+    SET_Z_LAYER = 'set_z_layer',
 
     OBJECTS_UPDATED = 'objects_updated',
     SHAPE_ACTIVATED = 'shape_activated',
@@ -113,6 +114,7 @@ export enum Mode {
 export interface CanvasModel {
     readonly image: HTMLImageElement | null;
     readonly objects: any[];
+    readonly zLayer: number | null;
     readonly gridSize: Size;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
@@ -124,6 +126,7 @@ export interface CanvasModel {
     geometry: Geometry;
     mode: Mode;
 
+    setZLayer(zLayer: number | null): void;
     zoom(x: number, y: number, direction: number): void;
     move(topOffset: number, leftOffset: number): void;
 
@@ -163,6 +166,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         rememberAngle: boolean;
         scale: number;
         top: number;
+        zLayer: number | null;
         drawData: DrawData;
         mergeData: MergeData;
         groupData: GroupData;
@@ -204,6 +208,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             rememberAngle: false,
             scale: 1,
             top: 0,
+            zLayer: null,
             drawData: {
                 enabled: false,
                 initialState: null,
@@ -222,6 +227,11 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         };
     }
 
+    public setZLayer(zLayer: number | null): void {
+        this.data.zLayer = zLayer;
+        this.notify(UpdateReasons.SET_Z_LAYER);
+    }
+
     public zoom(x: number, y: number, direction: number): void {
         const oldScale: number = this.data.scale;
         const newScale: number = direction > 0 ? oldScale * 6 / 5 : oldScale * 5 / 6;
@@ -515,11 +525,20 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         ));
     }
 
+    public get zLayer(): number | null {
+        return this.data.zLayer;
+    }
+
     public get image(): HTMLImageElement | null {
         return this.data.image;
     }
 
     public get objects(): any[] {
+        if (this.data.zLayer !== null) {
+            return this.data.objects
+                .filter((object: any): boolean => object.zOrder <= this.data.zLayer);
+        }
+
         return this.data.objects;
     }
 

cvat-canvas/src/typescript/canvasView.ts

@@ -77,12 +77,16 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
     private onDrawDone(data: object, continueDraw?: boolean): void {
         if (data) {
+            const { zLayer } = this.controller;
             const event: CustomEvent = new CustomEvent('canvas.drawn', {
                 bubbles: false,
                 cancelable: true,
                 detail: {
                     // eslint-disable-next-line new-cap
-                    state: data,
+                    state: {
+                        ...data,
+                        zOrder: zLayer || 0,
+                    },
                     continue: continueDraw,
                 },
             });
@@ -364,6 +368,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
     }
 
+
     private setupObjects(states: any[]): void {
         const { offset } = this.controller.geometry;
         const translate = (points: number[]): number[] => points
@@ -403,6 +408,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
         this.addObjects(created, translate);
         this.updateObjects(updated, translate);
+        this.sortObjects();
 
         if (this.controller.activeElement.clientID !== null) {
             const { clientID } = this.controller.activeElement;
@@ -685,12 +691,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.setupObjects([]);
             this.moveCanvas();
             this.resizeCanvas();
-        } else if (reason === UpdateReasons.IMAGE_ZOOMED || reason === UpdateReasons.IMAGE_FITTED) {
+        } else if ([UpdateReasons.IMAGE_ZOOMED, UpdateReasons.IMAGE_FITTED].includes(reason)) {
             this.moveCanvas();
             this.transformCanvas();
         } else if (reason === UpdateReasons.IMAGE_MOVED) {
             this.moveCanvas();
-        } else if (reason === UpdateReasons.OBJECTS_UPDATED) {
+        } else if ([UpdateReasons.OBJECTS_UPDATED, UpdateReasons.SET_Z_LAYER].includes(reason)) {
             if (this.mode === Mode.GROUP) {
                 this.groupHandler.resetSelectedObjects();
             }
@@ -833,6 +839,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             shapeType: state.shapeType,
             points: [...state.points],
             attributes: { ...state.attributes },
+            zOrder: state.zOrder,
         };
     }
 
@@ -851,6 +858,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }
             }
 
+            if (drawnState.zOrder !== state.zOrder) {
+                if (state.shapeType === 'points') {
+                    this.svgShapes[clientID].remember('_selectHandler').nested
+                        .attr('data-z-order', state.zOrder);
+                } else {
+                    this.svgShapes[clientID].attr('data-z-order', state.zOrder);
+                }
+            }
+
             if (drawnState.occluded !== state.occluded) {
                 if (state.occluded) {
                     this.svgShapes[clientID].addClass('cvat_canvas_shape_occluded');
@@ -961,6 +977,27 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
     }
 
+    private sortObjects(): void {
+        // TODO: Can be significantly optimized
+        const states = Array.from(
+            this.content.getElementsByClassName('cvat_canvas_shape'),
+        ).map((state: SVGElement): [SVGElement, number] => (
+            [state, +state.getAttribute('data-z-order')]
+        ));
+
+        const needSort = states.some((pair): boolean => pair[1] !== states[0][1]);
+        if (!states.length || !needSort) {
+            return;
+        }
+
+        const sorted = states.sort((a, b): number => a[1] - b[1]);
+        sorted.forEach((pair): void => {
+            this.content.appendChild(pair[0]);
+        });
+
+        this.content.prepend(...sorted.map((pair): SVGElement => pair[0]));
+    }
+
     private deactivate(): void {
         if (this.activeElement.clientID !== null) {
             const { clientID } = this.activeElement;
@@ -989,6 +1026,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 delete this.svgTexts[clientID];
             }
 
+            this.sortObjects();
+
             this.activeElement = {
                 clientID: null,
                 attributeID: null,
@@ -1016,6 +1055,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const [state] = this.controller.objects
             .filter((_state: any): boolean => _state.clientID === clientID);
 
+        if (!state) {
+            return;
+        }
+
         if (state.shapeType === 'points') {
             this.svgShapes[clientID].remember('_selectHandler').nested
                 .style('pointer-events', state.lock ? 'none' : '');
@@ -1040,7 +1083,13 @@ export class CanvasViewImpl implements CanvasView, Listener {
         }
 
         const self = this;
-        this.content.append(shape.node);
+        if (state.shapeType === 'points') {
+            this.content.append(this.svgShapes[clientID]
+                .remember('_selectHandler').nested.node);
+        } else {
+            this.content.append(shape.node);
+        }
+
         (shape as any).draggable().on('dragstart', (): void => {
             this.mode = Mode.DRAG;
             if (text) {
@@ -1197,7 +1246,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             'shape-rendering': 'geometricprecision',
             stroke: state.color,
             'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            zOrder: state.zOrder,
+            'data-z-order': state.zOrder,
         }).move(xtl, ytl)
             .addClass('cvat_canvas_shape');
 
@@ -1221,7 +1270,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             'shape-rendering': 'geometricprecision',
             stroke: state.color,
             'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            zOrder: state.zOrder,
+            'data-z-order': state.zOrder,
         }).addClass('cvat_canvas_shape');
 
         if (state.occluded) {
@@ -1244,7 +1293,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
             'shape-rendering': 'geometricprecision',
             stroke: state.color,
             'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
-            zOrder: state.zOrder,
+            'data-z-order': state.zOrder,
         }).addClass('cvat_canvas_shape');
 
         if (state.occluded) {
@@ -1264,9 +1313,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const group = basicPolyline.remember('_selectHandler').nested
             .addClass('cvat_canvas_shape').attr({
                 clientID: state.clientID,
-                zOrder: state.zOrder,
                 id: `cvat_canvas_shape_${state.clientID}`,
                 fill: state.color,
+                'data-z-order': state.zOrder,
             }).style({
                 'fill-opacity': 1,
             });

cvat-core/src/annotations-collection.js

@@ -119,13 +119,11 @@
             this.objects = {}; // key is a client id
             this.count = 0;
             this.flush = false;
-            this.collectionZ = {}; // key is a frame, {max, min} are values
             this.groups = {
                 max: 0,
             }; // it is an object to we can pass it as an argument by a reference
             this.injection = {
                 labels: this.labels,
-                collectionZ: this.collectionZ,
                 groups: this.groups,
                 frameMeta: this.frameMeta,
                 history: this.history,
@@ -461,7 +459,7 @@
                 points: [...objectState.points],
                 occluded: objectState.occluded,
                 outside: objectState.outside,
-                zOrder: 0,
+                zOrder: objectState.zOrder,
                 attributes: Object.keys(objectState.attributes)
                     .reduce((accumulator, attrID) => {
                         if (!labelAttributes[attrID].mutable) {
@@ -725,6 +723,7 @@
                 } else {
                     checkObjectType('state occluded', state.occluded, 'boolean', null);
                     checkObjectType('state points', state.points, null, Array);
+                    checkObjectType('state zOrder', state.zOrder, 'integer', null);
 
                     for (const coord of state.points) {
                         checkObjectType('point coordinate', coord, 'number', null);
@@ -746,7 +745,7 @@
                             occluded: state.occluded || false,
                             points: [...state.points],
                             type: state.shapeType,
-                            z_order: 0,
+                            z_order: state.zOrder,
                         });
                     } else if (state.objectType === 'track') {
                         constructed.tracks.push({
@@ -763,7 +762,7 @@
                                 outside: false,
                                 points: [...state.points],
                                 type: state.shapeType,
-                                z_order: 0,
+                                z_order: state.zOrder,
                             }],
                         });
                     } else {

cvat-core/src/annotations-filter.js

@@ -210,6 +210,10 @@ class AnnotationsFilter {
 
     toJSONQuery(filters) {
         try {
+            if (!Array.isArray(filters) || filters.some((value) => typeof (value) !== 'string')) {
+                throw Error('Argument must be an array of strings');
+            }
+
             if (!filters.length) {
                 return [[], '$.objects[*].clientID'];
             }