React UI: cuboids

.gitignore

@@ -23,4 +23,9 @@ __pycache__
 # Ignore development npm files
 node_modules
 
+# Ignore npm logs file
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
 .DS_Store

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Re-Identification algorithm to merging bounding boxes automatically to the new UI (<https://github.com/opencv/cvat/pull/1406>)
 - Methods ``import`` and ``export`` to import/export raw annotations for Job and Task in ``cvat-core`` (<https://github.com/opencv/cvat/pull/1406>)
 - Versioning of client packages (``cvat-core``, ``cvat-canvas``, ``cvat-ui``). Initial versions are set to 1.0.0  (<https://github.com/opencv/cvat/pull/1448>)
+- Cuboids feature was migrated from old UI to new one. (<https://github.com/opencv/cvat/pull/1451>)
 
 ### Changed
 -

cvat-canvas/src/scss/canvas.scss

@@ -134,7 +134,8 @@ polyline.cvat_canvas_shape_splitting {
     cursor: nwse-resize;
 }
 
-.svg_select_points_l:hover, .svg_select_points_r:hover {
+.svg_select_points_l:hover, .svg_select_points_r:hover,
+.svg_select_points_ew:hover {
     cursor: ew-resize;
 }
 

cvat-canvas/src/typescript/canvasModel.ts

@@ -50,6 +50,7 @@ export interface Configuration {
     autoborders?: boolean;
     displayAllText?: boolean;
     undefinedAttrValue?: string;
+    showProjections?: boolean;
 }
 
 export interface DrawData {
@@ -527,6 +528,9 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.displayAllText = configuration.displayAllText;
         }
 
+        if (typeof (configuration.showProjections) !== 'undefined') {
+            this.data.configuration.showProjections = configuration.showProjections;
+        }
         if (typeof (configuration.autoborders) !== 'undefined') {
             this.data.configuration.autoborders = configuration.autoborders;
         }

cvat-canvas/src/typescript/canvasView.ts

@@ -437,6 +437,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     .filter((_state: any): boolean => (
                         _state.clientID === self.activeElement.clientID
                     ));
+                if (['cuboid', 'rectangle'].includes(state.shapeType)) {
+                    e.preventDefault();
+                    return;
+                }
                 if (e.ctrlKey) {
                     const { points } = state;
                     self.onEditDone(
@@ -721,7 +725,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
     public notify(model: CanvasModel & Master, reason: UpdateReasons): void {
         this.geometry = this.controller.geometry;
         if (reason === UpdateReasons.CONFIG_UPDATED) {
+            const { activeElement } = this;
+            this.deactivate();
             this.configuration = model.configuration;
+            this.activate(activeElement);
             this.editHandler.configurate(this.configuration);
             this.drawHandler.configurate(this.configuration);
 
@@ -939,26 +946,63 @@ export class CanvasViewImpl implements CanvasView, Listener {
             for (const state of states) {
                 if (state.hidden || state.outside) continue;
                 ctx.fillStyle = 'white';
-                if (['rectangle', 'polygon'].includes(state.shapeType)) {
-                    const points = state.shapeType === 'rectangle' ? [
-                        state.points[0], // xtl
-                        state.points[1], // ytl
-                        state.points[2], // xbr
-                        state.points[1], // ytl
-                        state.points[2], // xbr
-                        state.points[3], // ybr
-                        state.points[0], // xtl
-                        state.points[3], // ybr
-                    ] : state.points;
+                if (['rectangle', 'polygon', 'cuboid'].includes(state.shapeType)) {
+                    let points = [];
+                    if (state.shapeType === 'rectangle') {
+                        points = [
+                            state.points[0], // xtl
+                            state.points[1], // ytl
+                            state.points[2], // xbr
+                            state.points[1], // ytl
+                            state.points[2], // xbr
+                            state.points[3], // ybr
+                            state.points[0], // xtl
+                            state.points[3], // ybr
+                        ];
+                    } else if (state.shapeType === 'cuboid') {
+                        points = [
+                            state.points[0],
+                            state.points[1],
+                            state.points[4],
+                            state.points[5],
+                            state.points[8],
+                            state.points[9],
+                            state.points[12],
+                            state.points[13],
+                        ];
+                    } else {
+                        points = [...state.points];
+                    }
                     ctx.beginPath();
                     ctx.moveTo(points[0], points[1]);
                     for (let i = 0; i < points.length; i += 2) {
                         ctx.lineTo(points[i], points[i + 1]);
                     }
                     ctx.closePath();
+                    ctx.fill();
                 }
 
-                ctx.fill();
+                if (state.shapeType === 'cuboid') {
+                    for (let i = 0; i < 5; i++) {
+                        const points = [
+                            state.points[(0 + i * 4) % 16],
+                            state.points[(1 + i * 4) % 16],
+                            state.points[(2 + i * 4) % 16],
+                            state.points[(3 + i * 4) % 16],
+                            state.points[(6 + i * 4) % 16],
+                            state.points[(7 + i * 4) % 16],
+                            state.points[(4 + i * 4) % 16],
+                            state.points[(5 + i * 4) % 16],
+                        ];
+                        ctx.beginPath();
+                        ctx.moveTo(points[0], points[1]);
+                        for (let j = 0; j < points.length; j += 2) {
+                            ctx.lineTo(points[j], points[j + 1]);
+                        }
+                        ctx.closePath();
+                        ctx.fill();
+                    }
+                }
             }
         }
     }
@@ -1055,7 +1099,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
                             return `${acc}${val},`;
                         }, '',
                     );
-                    (shape as any).clear();
+                    if (state.shapeType !== 'cuboid') {
+                        (shape as any).clear();
+                    }
                     shape.attr('points', stringified);
 
                     if (state.shapeType === 'points' && !isInvisible) {
@@ -1116,6 +1162,9 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     } else if (state.shapeType === 'points') {
                         this.svgShapes[state.clientID] = this
                             .addPoints(stringified, state);
+                    } else if (state.shapeType === 'cuboid') {
+                        this.svgShapes[state.clientID] = this
+                            .addCuboid(stringified, state);
                     }
                 }
 
@@ -1202,6 +1251,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 this.selectize(false, shape);
             }
 
+            if (drawnState.shapeType === 'cuboid') {
+                (shape as any).attr('projections', false);
+            }
+
             (shape as any).off('resizestart');
             (shape as any).off('resizing');
             (shape as any).off('resizedone');
@@ -1281,6 +1334,11 @@ export class CanvasViewImpl implements CanvasView, Listener {
             this.content.append(shape.node);
         }
 
+        const { showProjections } = this.configuration;
+        if (state.shapeType === 'cuboid' && showProjections) {
+            (shape as any).attr('projections', true);
+        }
+
         if (!state.pinned) {
             shape.addClass('cvat_canvas_shape_draggable');
             (shape as any).draggable().on('dragstart', (): void => {
@@ -1548,6 +1606,30 @@ export class CanvasViewImpl implements CanvasView, Listener {
         return polyline;
     }
 
+    private addCuboid(points: string, state: any): any {
+        const cube = (this.adoptedContent as any).cube(points)
+            .fill(state.color).attr({
+                clientID: state.clientID,
+                'color-rendering': 'optimizeQuality',
+                id: `cvat_canvas_shape_${state.clientID}`,
+                fill: state.color,
+                'shape-rendering': 'geometricprecision',
+                stroke: state.color,
+                'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
+                'data-z-order': state.zOrder,
+            }).addClass('cvat_canvas_shape');
+
+        if (state.occluded) {
+            cube.addClass('cvat_canvas_shape_occluded');
+        }
+
+        if (state.hidden || state.outside) {
+            cube.style('display', 'none');
+        }
+
+        return cube;
+    }
+
     private setupPoints(basicPolyline: SVG.PolyLine, state: any): any {
         this.selectize(true, basicPolyline);
 

cvat-canvas/src/typescript/consts.ts

@@ -10,6 +10,7 @@ const AREA_THRESHOLD = 9;
 const SIZE_THRESHOLD = 3;
 const POINTS_STROKE_WIDTH = 1.5;
 const POINTS_SELECTED_STROKE_WIDTH = 4;
+const MIN_EDGE_LENGTH = 3;
 const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__';
 
 export default {
@@ -21,5 +22,6 @@ export default {
     SIZE_THRESHOLD,
     POINTS_STROKE_WIDTH,
     POINTS_SELECTED_STROKE_WIDTH,
+    MIN_EDGE_LENGTH,
     UNDEFINED_ATTRIBUTE_VALUE,
 };