diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 33131982..d40e877e 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.47.0", + "version": "1.47.1", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.conf.tsx b/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.conf.tsx index f5059b22..ede0d883 100644 --- a/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.conf.tsx +++ b/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.conf.tsx @@ -2,6 +2,8 @@ // // SPDX-License-Identifier: MIT +import config from 'config'; + export interface ItemLayout { viewType: ViewType; offset: number[]; @@ -35,8 +37,8 @@ defaultLayout['2D']['0'] = [{ offset: [0], x: 0, y: 0, - w: 12, - h: 12, + w: config.CANVAS_WORKSPACE_COLS, + h: config.CANVAS_WORKSPACE_ROWS, }]; defaultLayout['2D']['1'] = [ @@ -46,7 +48,7 @@ defaultLayout['2D']['1'] = [ x: 9, y: 0, w: 3, - h: 4, + h: config.CANVAS_WORKSPACE_DEFAULT_CONTEXT_HEIGHT, viewIndex: '0', }, ]; @@ -111,7 +113,7 @@ defaultLayout['3D']['1'] = [ x: 9, y: 0, w: 3, - h: 4, + h: config.CANVAS_WORKSPACE_DEFAULT_CONTEXT_HEIGHT, viewIndex: '0', }, ]; diff --git a/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.tsx b/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.tsx index 380c8d1c..1a8f9a8c 100644 --- a/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.tsx +++ b/cvat-ui/src/components/annotation-page/canvas/grid-layout/canvas-layout.tsx @@ -72,7 +72,8 @@ const fitLayout = (type: DimensionType, layoutConfig: ItemLayout[]): ItemLayout[ const relatedViews = layoutConfig .filter((item: ItemLayout) => item.viewType === ViewType.RELATED_IMAGE); const relatedViewsCols = relatedViews.length > 6 ? 2 : 1; - const height = Math.floor(config.CANVAS_WORKSPACE_ROWS / (relatedViews.length / relatedViewsCols)); + let height = Math.floor(config.CANVAS_WORKSPACE_ROWS / (relatedViews.length / relatedViewsCols)); + height = Math.min(height, config.CANVAS_WORKSPACE_DEFAULT_CONTEXT_HEIGHT); relatedViews.forEach((view: ItemLayout, i: number) => { updatedLayout.push({ ...view, @@ -210,6 +211,10 @@ function CanvasLayout({ type }: { type?: DimensionType }): JSX.Element { i: typeof (value.viewIndex) !== 'undefined' ? `${value.viewType}_${value.viewIndex}` : `${value.viewType}`, })); + const singleClassName = 'cvat-canvas-grid-root-single'; + const className = !relatedFiles && children.length <= 1 ? + `cvat-canvas-grid-root ${singleClassName}` : 'cvat-canvas-grid-root'; + return ( { !!rowHeight && ( @@ -219,7 +224,7 @@ function CanvasLayout({ type }: { type?: DimensionType }): JSX.Element { style={{ background: canvasBackgroundColor }} containerPadding={[config.CANVAS_WORKSPACE_PADDING, config.CANVAS_WORKSPACE_PADDING]} margin={[config.CANVAS_WORKSPACE_MARGIN, config.CANVAS_WORKSPACE_MARGIN]} - className='cvat-canvas-grid-root' + className={className} rowHeight={rowHeight} layout={layout} onLayoutChange={(updatedLayout: RGL.Layout[]) => { diff --git a/cvat-ui/src/components/annotation-page/canvas/grid-layout/styles.scss b/cvat-ui/src/components/annotation-page/canvas/grid-layout/styles.scss index 97e444ba..bdef5354 100644 --- a/cvat-ui/src/components/annotation-page/canvas/grid-layout/styles.scss +++ b/cvat-ui/src/components/annotation-page/canvas/grid-layout/styles.scss @@ -8,6 +8,28 @@ position: relative; } +.cvat-canvas-grid-root-single { + .cvat-grid-item-drag-handler { + display: none; + } + + .cvat-grid-item-fullscreen-handler { + display: none; + } + + .cvat-grid-item-resize-handler { + display: none; + } + + .cvat-grid-item-close-button { + display: none; + } + + & +.cvat-grid-layout-common-setups { + display: none; + } +} + .cvat-grid-layout-common-setups { position: absolute; top: 0; diff --git a/cvat-ui/src/config.tsx b/cvat-ui/src/config.tsx index 4193aeef..ff505337 100644 --- a/cvat-ui/src/config.tsx +++ b/cvat-ui/src/config.tsx @@ -29,6 +29,7 @@ const DEFAULT_PROJECT_SUBSETS = ['Train', 'Test', 'Validation']; const CANVAS_WORKSPACE_ROWS = 12; const CANVAS_WORKSPACE_COLS = 12; const CANVAS_WORKSPACE_MARGIN = 8; +const CANVAS_WORKSPACE_DEFAULT_CONTEXT_HEIGHT = 4; const CANVAS_WORKSPACE_PADDING = CANVAS_WORKSPACE_MARGIN / 2; const OUTSIDE_PIC_URL = 'https://opencv.github.io/cvat/images/image019.jpg'; const DEFAULT_AWS_S3_REGIONS: string[][] = [ @@ -142,4 +143,5 @@ export default { CANVAS_WORKSPACE_COLS, CANVAS_WORKSPACE_MARGIN, CANVAS_WORKSPACE_PADDING, + CANVAS_WORKSPACE_DEFAULT_CONTEXT_HEIGHT, };