Added feature to display dimensions of rectangles and ellipses

changelog.d/20250224_114044_sekachev.bs_display_dimensions_support.md

@@ -0,0 +1,4 @@
+### Added
+
+- A setting to display rectangles and ellipses dimensions and rotation
+  (<https://github.com/cvat-ai/cvat/pull/9142>)

cvat-canvas/src/scss/canvas.scss

@@ -48,12 +48,15 @@ polyline.cvat_shape_drawing_opacity {
     font-weight: bold;
     fill: white;
     cursor: default;
-    font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
-    text-shadow: 0 0 4px black;
+    filter: drop-shadow(1px 1px 1px black) drop-shadow(-1px -1px 1px black);
     user-select: none;
     pointer-events: none;
 }
 
+.cvat_canvas_text_dimensions {
+    fill: cyan;
+}
+
 .cvat_canvas_text_description {
     fill: yellow;
     font-style: oblique 40deg;

cvat-canvas/src/typescript/canvasModel.ts

@@ -939,7 +939,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
 
         if (typeof configuration.textContent === 'string') {
             const splitted = configuration.textContent.split(',').filter((entry: string) => !!entry);
-            if (splitted.every((entry: string) => ['id', 'label', 'attributes', 'source', 'descriptions'].includes(entry))) {
+            if (splitted.every((entry: string) => ['id', 'label', 'attributes', 'source', 'descriptions', 'dimensions'].includes(entry))) {
                 this.data.configuration.textContent = configuration.textContent;
             }
         }

cvat-canvas/src/typescript/canvasView.ts

@@ -2444,10 +2444,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 shape.untransform();
             }
 
-            if (
-                state.points.length !== drawnState.points.length ||
-                state.points.some((p: number, id: number): boolean => p !== drawnState.points[id])
-            ) {
+            const pointsUpdated = state.points.length !== drawnState.points.length ||
+                state.points.some((p: number, id: number): boolean => p !== drawnState.points[id]);
+
+            if (pointsUpdated) {
                 if (state.shapeType === 'mask') {
                     // if masks points were updated, draw from scratch
                     this.deleteObjects([this.drawnStates[+clientID]]);
@@ -2493,9 +2493,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
 
             const stateDescriptions = state.descriptions;
             const drawnStateDescriptions = drawnState.descriptions;
+            const rotationUpdated = drawnState.rotation !== state.rotation;
 
             if (
                 drawnState.label.id !== state.label.id ||
+                pointsUpdated ||
+                rotationUpdated ||
                 drawnStateDescriptions.length !== stateDescriptions.length ||
                 drawnStateDescriptions.some((desc: string, id: number): boolean => desc !== stateDescriptions[id])
             ) {
@@ -3090,6 +3093,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         const withLabel = content.includes('label');
         const withSource = content.includes('source');
         const withDescriptions = content.includes('descriptions');
+        const withDimensions = content.includes('dimensions');
         const textFontSize = this.configuration.textFontSize || 12;
         const {
             label, clientID, attributes, source, descriptions,
@@ -3116,6 +3120,27 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 `${withSource ? `(${source})` : ''}`).style({
                     'text-transform': 'uppercase',
                 });
+                if (withDimensions && ['rectangle', 'ellipse'].includes(state.shapeType)) {
+                    let width = state.points[2] - state.points[0];
+                    let height = state.points[3] - state.points[1];
+
+                    if (state.shapeType === 'ellipse') {
+                        width *= 2;
+                        height *= -2;
+                    }
+
+                    const normWidth = width.toFixed(1);
+                    const normHeight = height.toFixed(1);
+                    const normRot = state.rotation === 0 ? '' : `${state.rotation.toFixed(1)}\u00B0`;
+
+                    block
+                        .tspan(`${normWidth}x${normHeight}px ${normRot}`)
+                        .attr({
+                            dy: '1em',
+                            x: 0,
+                        })
+                        .addClass('cvat_canvas_text_dimensions');
+                }
                 if (withDescriptions) {
                     for (const desc of descriptions) {
                         block

cvat-canvas/src/typescript/shared.ts

@@ -100,7 +100,7 @@ export function displayShapeSize(shapesContainer: SVG.Container, textContainer:
             .fill('white')
             .addClass('cvat_canvas_text'),
         update(shape: SVG.Shape): void {
-            let text = `${Math.floor(shape.width())}x${Math.floor(shape.height())}px`;
+            let text = `${shape.width().toFixed(1)}x${shape.height().toFixed(1)}px`;
             if (shape.type === 'rect' || shape.type === 'ellipse') {
                 let rotation = shape.transform().rotation || 0;
                 // be sure, that rotation in range [0; 360]

cvat-ui/src/components/header/settings-modal/workspace-settings.tsx

@@ -168,6 +168,7 @@ function WorkspaceSettingsComponent(props: Props): JSX.Element {
                         <Select.Option value='attributes'>Attributes</Select.Option>
                         <Select.Option value='source'>Source</Select.Option>
                         <Select.Option value='descriptions'>Descriptions</Select.Option>
+                        <Select.Option value='dimensions'>Dimensions</Select.Option>
                     </Select>
                 </Col>
             </Row>

cvat-ui/src/reducers/settings-reducer.ts

@@ -35,7 +35,7 @@ const defaultState: SettingsState = {
         textFontSize: 14,
         controlPointsSize: 5,
         textPosition: 'auto',
-        textContent: 'id,source,label,attributes,descriptions',
+        textContent: 'id,source,label,attributes,descriptions,dimensions',
         toolsBlockerState: {
             algorithmsLocked: false,
             buttonVisible: false,

site/content/en/docs/manual/basics/settings.md

@@ -43,6 +43,8 @@ In tab `Workspace` you can:
   - `Label` - object label.
   - `Source`- source of creating of objects `MANUAL`, `AUTO` or `SEMI-AUTO`.
   - `Descriptions` - description of attributes.
+  - `Dimensions` - width, height and rotation for rectangles and ellipses.
+
 
 - `Position of a text` - text positioning mode selection:
   - `Auto` - the object details will be automatically placed where free space is.