|
|
|
@ -21,7 +21,7 @@ import {
|
|
|
|
ReloadOutlined,
|
|
|
|
ReloadOutlined,
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
} from '@ant-design/icons';
|
|
|
|
|
|
|
|
|
|
|
|
import consts from 'consts';
|
|
|
|
import config from 'config';
|
|
|
|
import { DimensionType, CombinedState } from 'reducers';
|
|
|
|
import { DimensionType, CombinedState } from 'reducers';
|
|
|
|
import CanvasWrapperComponent from 'components/annotation-page/canvas/views/canvas2d/canvas-wrapper';
|
|
|
|
import CanvasWrapperComponent from 'components/annotation-page/canvas/views/canvas2d/canvas-wrapper';
|
|
|
|
import CanvasWrapper3DComponent, {
|
|
|
|
import CanvasWrapper3DComponent, {
|
|
|
|
@ -72,7 +72,7 @@ const fitLayout = (type: DimensionType, layoutConfig: ItemLayout[]): ItemLayout[
|
|
|
|
const relatedViews = layoutConfig
|
|
|
|
const relatedViews = layoutConfig
|
|
|
|
.filter((item: ItemLayout) => item.viewType === ViewType.RELATED_IMAGE);
|
|
|
|
.filter((item: ItemLayout) => item.viewType === ViewType.RELATED_IMAGE);
|
|
|
|
const relatedViewsCols = relatedViews.length > 6 ? 2 : 1;
|
|
|
|
const relatedViewsCols = relatedViews.length > 6 ? 2 : 1;
|
|
|
|
const height = Math.floor(consts.CANVAS_WORKSPACE_ROWS / (relatedViews.length / relatedViewsCols));
|
|
|
|
const height = Math.floor(config.CANVAS_WORKSPACE_ROWS / (relatedViews.length / relatedViewsCols));
|
|
|
|
relatedViews.forEach((view: ItemLayout, i: number) => {
|
|
|
|
relatedViews.forEach((view: ItemLayout, i: number) => {
|
|
|
|
updatedLayout.push({
|
|
|
|
updatedLayout.push({
|
|
|
|
...view,
|
|
|
|
...view,
|
|
|
|
@ -83,7 +83,7 @@ const fitLayout = (type: DimensionType, layoutConfig: ItemLayout[]): ItemLayout[
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let widthAvail = consts.CANVAS_WORKSPACE_COLS;
|
|
|
|
let widthAvail = config.CANVAS_WORKSPACE_COLS;
|
|
|
|
if (updatedLayout.length > 0) {
|
|
|
|
if (updatedLayout.length > 0) {
|
|
|
|
widthAvail -= updatedLayout[0].w * relatedViewsCols;
|
|
|
|
widthAvail -= updatedLayout[0].w * relatedViewsCols;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -96,7 +96,7 @@ const fitLayout = (type: DimensionType, layoutConfig: ItemLayout[]): ItemLayout[
|
|
|
|
x: 0,
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
y: 0,
|
|
|
|
w: widthAvail,
|
|
|
|
w: widthAvail,
|
|
|
|
h: consts.CANVAS_WORKSPACE_ROWS,
|
|
|
|
h: config.CANVAS_WORKSPACE_ROWS,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
const canvas = layoutConfig
|
|
|
|
const canvas = layoutConfig
|
|
|
|
@ -113,25 +113,25 @@ const fitLayout = (type: DimensionType, layoutConfig: ItemLayout[]): ItemLayout[
|
|
|
|
x: 0,
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
y: 0,
|
|
|
|
w: widthAvail,
|
|
|
|
w: widthAvail,
|
|
|
|
h: consts.CANVAS_WORKSPACE_ROWS - helpfulCanvasViewHeight,
|
|
|
|
h: config.CANVAS_WORKSPACE_ROWS - helpfulCanvasViewHeight,
|
|
|
|
}, {
|
|
|
|
}, {
|
|
|
|
...top,
|
|
|
|
...top,
|
|
|
|
x: 0,
|
|
|
|
x: 0,
|
|
|
|
y: consts.CANVAS_WORKSPACE_ROWS,
|
|
|
|
y: config.CANVAS_WORKSPACE_ROWS,
|
|
|
|
w: Math.ceil(widthAvail / 3),
|
|
|
|
w: Math.ceil(widthAvail / 3),
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
...side,
|
|
|
|
...side,
|
|
|
|
x: Math.ceil(widthAvail / 3),
|
|
|
|
x: Math.ceil(widthAvail / 3),
|
|
|
|
y: consts.CANVAS_WORKSPACE_ROWS,
|
|
|
|
y: config.CANVAS_WORKSPACE_ROWS,
|
|
|
|
w: Math.ceil(widthAvail / 3),
|
|
|
|
w: Math.ceil(widthAvail / 3),
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
...front,
|
|
|
|
...front,
|
|
|
|
x: Math.ceil(widthAvail / 3) * 2,
|
|
|
|
x: Math.ceil(widthAvail / 3) * 2,
|
|
|
|
y: consts.CANVAS_WORKSPACE_ROWS,
|
|
|
|
y: config.CANVAS_WORKSPACE_ROWS,
|
|
|
|
w: Math.floor(widthAvail / 3),
|
|
|
|
w: Math.floor(widthAvail / 3),
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
h: helpfulCanvasViewHeight,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -152,8 +152,8 @@ function CanvasLayout({ type }: { type?: DimensionType }): JSX.Element {
|
|
|
|
containerHeight = window.innerHeight - container.getBoundingClientRect().bottom;
|
|
|
|
containerHeight = window.innerHeight - container.getBoundingClientRect().bottom;
|
|
|
|
// https://github.com/react-grid-layout/react-grid-layout/issues/628#issuecomment-1228453084
|
|
|
|
// https://github.com/react-grid-layout/react-grid-layout/issues/628#issuecomment-1228453084
|
|
|
|
return Math.floor(
|
|
|
|
return Math.floor(
|
|
|
|
(containerHeight - consts.CANVAS_WORKSPACE_MARGIN * (consts.CANVAS_WORKSPACE_ROWS)) /
|
|
|
|
(containerHeight - config.CANVAS_WORKSPACE_MARGIN * (config.CANVAS_WORKSPACE_ROWS)) /
|
|
|
|
consts.CANVAS_WORKSPACE_ROWS,
|
|
|
|
config.CANVAS_WORKSPACE_ROWS,
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -214,11 +214,11 @@ function CanvasLayout({ type }: { type?: DimensionType }): JSX.Element {
|
|
|
|
<Layout.Content>
|
|
|
|
<Layout.Content>
|
|
|
|
{ !!rowHeight && (
|
|
|
|
{ !!rowHeight && (
|
|
|
|
<ReactGridLayout
|
|
|
|
<ReactGridLayout
|
|
|
|
cols={consts.CANVAS_WORKSPACE_COLS}
|
|
|
|
cols={config.CANVAS_WORKSPACE_COLS}
|
|
|
|
maxRows={consts.CANVAS_WORKSPACE_ROWS}
|
|
|
|
maxRows={config.CANVAS_WORKSPACE_ROWS}
|
|
|
|
style={{ background: canvasBackgroundColor }}
|
|
|
|
style={{ background: canvasBackgroundColor }}
|
|
|
|
containerPadding={[consts.CANVAS_WORKSPACE_PADDING, consts.CANVAS_WORKSPACE_PADDING]}
|
|
|
|
containerPadding={[config.CANVAS_WORKSPACE_PADDING, config.CANVAS_WORKSPACE_PADDING]}
|
|
|
|
margin={[consts.CANVAS_WORKSPACE_MARGIN, consts.CANVAS_WORKSPACE_MARGIN]}
|
|
|
|
margin={[config.CANVAS_WORKSPACE_MARGIN, config.CANVAS_WORKSPACE_MARGIN]}
|
|
|
|
className='cvat-canvas-grid-root'
|
|
|
|
className='cvat-canvas-grid-root'
|
|
|
|
rowHeight={rowHeight}
|
|
|
|
rowHeight={rowHeight}
|
|
|
|
layout={layout}
|
|
|
|
layout={layout}
|
|
|
|
|