CVAT-3D Milestone2 (#2645)
* CVAT-3D Updated the Mime Types with Bin Support, added dependency of open3D * CVAT-3D Added additional column as Dimension for engine_task table and created a relatedfiles table for PCD to Image mapping. * Added Support for 3D file Upload in BIN and PCD. * Added Dimension attribute defaulting to 2D for importer and exporter. * Added props passing for dimension attribute, filtering of import, Migration Scripts and Dimension attribute for MpegChunk Writers * Modified code as per review comments * Updated Unit test cases for 3D task creation * Refactored Dimension Enum in UI and backend code * Resolving conflicts * Updated Unit Test Case * Refactored TaskDimension to DimensionType, Simplified usage of Dimension accross classes * Removing manually created test files * Removing old pcd mime-type mapping * Added test files generated by synthetic data using open3d * Merged with develop branch latest changes * Added libraries required for open3d * Added files * Added synthethic pcd,bin and img test files * Modified test file name * Trigger travis ci * Modified test case to ignore 3D preview images * Trigger notification * Deleting DS Store files * Modified test cases as per review comments * Checking pre-commit hook * Fixed Lint issues - precommit hook verification * Added changes for CVAT-3D Milestone2 changes - Frame Navigation, photo context hide and show * Modified changes * Added canvas3D for 3D Perspective * Added missing files * Added code to get image context for 3D view * Codacy check for stylesheet * Modified frame navigantion for 3D View * Modified style for context-image * Trigger notification * Added Support for 3D file Upload in BIN and PCD. * Added props passing for dimension attribute, filtering of import, Migration Scripts and Dimension attribute for MpegChunk Writers * Modified code as per review comments * Refactored Dimension Enum in UI and backend code * Merged with develop branch latest changes * Added files * Added changes for CVAT-3D Milestone2 changes - Frame Navigation, photo context hide and show * Modified changes * Added canvas3D for 3D Perspective * Added missing files * Added code to get image context for 3D view * Codacy check for stylesheet * Modified frame navigantion for 3D View * Modified style for context-image * Changed cvat-data lint issues * Modified to use opencv as per review comments * Removed unwanted imports * Fixed css and added usage of hooks * Merged Develop branch code * Removed unused data structures * Removed unused data structures * Refactored unused data structures * Added three js dependency in cvat ui package-lock.json * Merged develop branch code and refactored code * Fixed snyk issue * Modified Camera Icon in photo-context * Update icons.tsx * Remove unused svg file * Modified changelog file Co-authored-by: cdp <cdp123>main
manasars
5 years ago
committed by
GitHub
parent
71e2ddbb59
commit
5c67846c20
@ -0,0 +1 @@
|
|||||||
|
webpack.config.js
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
ecmaVersion: 6,
|
||||||
|
},
|
||||||
|
plugins: ['@typescript-eslint', 'import'],
|
||||||
|
extends: [
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'airbnb-typescript/base',
|
||||||
|
'plugin:import/errors',
|
||||||
|
'plugin:import/warnings',
|
||||||
|
'plugin:import/typescript',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'@typescript-eslint/no-explicit-any': 0,
|
||||||
|
'@typescript-eslint/indent': ['warn', 4],
|
||||||
|
'no-plusplus': 0,
|
||||||
|
'no-restricted-syntax': [
|
||||||
|
0,
|
||||||
|
{
|
||||||
|
selector: 'ForOfStatement',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'max-len': ['error', { code: 120 }],
|
||||||
|
'no-continue': 0,
|
||||||
|
'func-names': 0,
|
||||||
|
'no-console': 0, // this rule deprecates console.log, console.warn etc. because 'it is not good in production code'
|
||||||
|
'lines-between-class-members': 0,
|
||||||
|
'import/prefer-default-export': 0, // works incorrect with interfaces
|
||||||
|
'newline-per-chained-call': 0, // makes code uglier
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
'import/resolver': {
|
||||||
|
node: {
|
||||||
|
extensions: ['.ts', '.js', '.json'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
dist
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
# Module CVAT-CANVAS-3D
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
The CVAT module written in TypeScript language.
|
||||||
|
It presents a canvas to viewing, drawing and editing of 3D annotations.
|
||||||
|
|
||||||
|
## Versioning
|
||||||
|
|
||||||
|
If you make changes in this package, please do following:
|
||||||
|
|
||||||
|
- After not important changes (typos, backward compatible bug fixes, refactoring) do: `npm version patch`
|
||||||
|
- After changing API (backward compatible new features) do: `npm version minor`
|
||||||
|
- After changing API (changes that break backward compatibility) do: `npm version major`
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
- Building of the module from sources in the `dist` directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
npm run build -- --mode=development # without a minification
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Methods
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface Canvas3d {
|
||||||
|
html(): HTMLDivElement;
|
||||||
|
setup(frameData: any): void;
|
||||||
|
fitCanvas(): void;
|
||||||
|
mode(): Mode;
|
||||||
|
isAbleToChangeFrame(): boolean;
|
||||||
|
render(): void;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### WEB
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Create an instance of a canvas
|
||||||
|
const canvas = new window.canvas.Canvas3d();
|
||||||
|
|
||||||
|
console.log('Version ', window.canvas.CanvasVersion);
|
||||||
|
console.log('Current mode is ', window.canvas.mode());
|
||||||
|
|
||||||
|
// Put canvas to a html container
|
||||||
|
htmlContainer.appendChild(canvas.html());
|
||||||
|
canvas.fitCanvas();
|
||||||
|
```
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "cvat-canvas3d",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "Part of Computer Vision Annotation Tool which presents its canvas3D library",
|
||||||
|
"main": "src/canvas3d.ts",
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc && webpack --config ./webpack.config.js",
|
||||||
|
"server": "nodemon --watch config --exec 'webpack-dev-server --config ./webpack.config.js --mode=development --open'"
|
||||||
|
},
|
||||||
|
"author": "Intel",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.5.5",
|
||||||
|
"@babel/core": "^7.5.5",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||||
|
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
|
||||||
|
"@babel/preset-env": "^7.5.5",
|
||||||
|
"@babel/preset-typescript": "^7.3.3",
|
||||||
|
"@types/node": "^12.6.8",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^1.13.0",
|
||||||
|
"@typescript-eslint/parser": "^1.13.0",
|
||||||
|
"babel-loader": "^8.0.6",
|
||||||
|
"css-loader": "^3.4.2",
|
||||||
|
"dts-bundle-webpack": "^1.0.2",
|
||||||
|
"eslint": "^6.1.0",
|
||||||
|
"eslint-config-airbnb-typescript": "^4.0.1",
|
||||||
|
"eslint-config-typescript-recommended": "^1.4.17",
|
||||||
|
"eslint-plugin-import": "^2.18.2",
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"nodemon": "^1.19.4",
|
||||||
|
"postcss-loader": "^3.0.0",
|
||||||
|
"postcss-preset-env": "^6.7.0",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"style-loader": "^1.0.0",
|
||||||
|
"typescript": "^3.5.3",
|
||||||
|
"webpack": "^4.44.2",
|
||||||
|
"webpack-cli": "^3.3.6",
|
||||||
|
"webpack-dev-server": "^3.11.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"three": "^0.125.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
parser: false,
|
||||||
|
plugins: {
|
||||||
|
'postcss-preset-env': {
|
||||||
|
browsers: '> 2.5%', // https://github.com/browserslist/browserslist
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import pjson from '../../package.json';
|
||||||
|
import { Canvas3dController, Canvas3dControllerImpl } from './canvas3dController';
|
||||||
|
import { Canvas3dModel, Canvas3dModelImpl, Mode } from './canvas3dModel';
|
||||||
|
import { Canvas3dView, Canvas3dViewImpl } from './canvas3dView';
|
||||||
|
import { Master } from './master';
|
||||||
|
|
||||||
|
const Canvas3dVersion = pjson.version;
|
||||||
|
|
||||||
|
interface Canvas3d {
|
||||||
|
html(): any;
|
||||||
|
setup(frameData: any): void;
|
||||||
|
isAbleToChangeFrame(): boolean;
|
||||||
|
fitCanvas(): void;
|
||||||
|
mode(): Mode;
|
||||||
|
render(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
class Canvas3dImpl implements Canvas3d {
|
||||||
|
private model: Canvas3dModel & Master;
|
||||||
|
private controller: Canvas3dController;
|
||||||
|
private view: Canvas3dView;
|
||||||
|
|
||||||
|
public constructor() {
|
||||||
|
this.model = new Canvas3dModelImpl();
|
||||||
|
this.controller = new Canvas3dControllerImpl(this.model);
|
||||||
|
this.view = new Canvas3dViewImpl(this.model, this.controller);
|
||||||
|
}
|
||||||
|
|
||||||
|
public html(): any {
|
||||||
|
return this.view.html();
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
this.view.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
public setup(frameData: any): void {
|
||||||
|
this.model.setup(frameData);
|
||||||
|
}
|
||||||
|
|
||||||
|
public mode(): Mode {
|
||||||
|
return this.model.mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public isAbleToChangeFrame(): boolean {
|
||||||
|
return this.model.isAbleToChangeFrame();
|
||||||
|
}
|
||||||
|
|
||||||
|
public fitCanvas(): void {
|
||||||
|
this.model.fitCanvas(this.view.html().clientWidth, this.view.html().clientHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Canvas3dImpl as Canvas3d, Canvas3dVersion };
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import { Canvas3dModel, Mode } from './canvas3dModel';
|
||||||
|
|
||||||
|
export interface Canvas3dController {
|
||||||
|
mode: Mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Canvas3dControllerImpl implements Canvas3dController {
|
||||||
|
private model: Canvas3dModel;
|
||||||
|
|
||||||
|
public constructor(model: Canvas3dModel) {
|
||||||
|
this.model = model;
|
||||||
|
}
|
||||||
|
|
||||||
|
public set mode(value: Mode) {
|
||||||
|
this.model.mode = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get mode(): Mode {
|
||||||
|
return this.model.mode;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,153 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import { MasterImpl } from './master';
|
||||||
|
|
||||||
|
export interface Size {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Image {
|
||||||
|
renderWidth: number;
|
||||||
|
renderHeight: number;
|
||||||
|
imageData: ImageData | CanvasImageSource;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DrawData {
|
||||||
|
enabled: boolean;
|
||||||
|
initialState?: any;
|
||||||
|
redraw?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum FrameZoom {
|
||||||
|
MIN = 0.1,
|
||||||
|
MAX = 10,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum UpdateReasons {
|
||||||
|
IMAGE_CHANGED = 'image_changed',
|
||||||
|
OBJECTS_UPDATED = 'objects_updated',
|
||||||
|
FITTED_CANVAS = 'fitted_canvas',
|
||||||
|
DRAW = 'draw',
|
||||||
|
SELECT = 'select',
|
||||||
|
CANCEL = 'cancel',
|
||||||
|
DATA_FAILED = 'data_failed',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum Mode {
|
||||||
|
IDLE = 'idle',
|
||||||
|
DRAG = 'drag',
|
||||||
|
RESIZE = 'resize',
|
||||||
|
DRAW = 'draw',
|
||||||
|
EDIT = 'edit',
|
||||||
|
INTERACT = 'interact',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Canvas3dModel {
|
||||||
|
mode: Mode;
|
||||||
|
|
||||||
|
setup(frameData: any): void;
|
||||||
|
|
||||||
|
isAbleToChangeFrame(): boolean;
|
||||||
|
|
||||||
|
fitCanvas(width: number, height: number): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
|
||||||
|
private data: {
|
||||||
|
canvasSize: Size;
|
||||||
|
image: Image | null;
|
||||||
|
imageID: number | null;
|
||||||
|
imageOffset: number;
|
||||||
|
imageSize: Size;
|
||||||
|
drawData: DrawData;
|
||||||
|
mode: Mode;
|
||||||
|
exception: Error | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
public constructor() {
|
||||||
|
super();
|
||||||
|
this.data = {
|
||||||
|
canvasSize: {
|
||||||
|
height: 0,
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
image: null,
|
||||||
|
imageID: null,
|
||||||
|
imageOffset: 0,
|
||||||
|
imageSize: {
|
||||||
|
height: 0,
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
drawData: {
|
||||||
|
enabled: false,
|
||||||
|
initialState: null,
|
||||||
|
},
|
||||||
|
mode: Mode.IDLE,
|
||||||
|
exception: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public setup(frameData: any): void {
|
||||||
|
if (this.data.imageID !== frameData.number) {
|
||||||
|
if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
|
||||||
|
throw Error(`Canvas is busy. Action: ${this.data.mode}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.data.imageID = frameData.number;
|
||||||
|
frameData
|
||||||
|
.data((): void => {
|
||||||
|
this.data.image = null;
|
||||||
|
this.notify(UpdateReasons.IMAGE_CHANGED);
|
||||||
|
})
|
||||||
|
.then((data: Image): void => {
|
||||||
|
if (frameData.number !== this.data.imageID) {
|
||||||
|
// already another image
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.data.imageSize = {
|
||||||
|
height: frameData.height as number,
|
||||||
|
width: frameData.width as number,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.data.image = data;
|
||||||
|
this.notify(UpdateReasons.IMAGE_CHANGED);
|
||||||
|
})
|
||||||
|
.catch((exception: any): void => {
|
||||||
|
this.data.exception = exception;
|
||||||
|
this.notify(UpdateReasons.DATA_FAILED);
|
||||||
|
throw exception;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public set mode(value: Mode) {
|
||||||
|
this.data.mode = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get mode(): Mode {
|
||||||
|
return this.data.mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public isAbleToChangeFrame(): boolean {
|
||||||
|
const isUnable = [Mode.DRAG, Mode.EDIT, Mode.RESIZE, Mode.INTERACT].includes(this.data.mode)
|
||||||
|
|| (this.data.mode === Mode.DRAW && typeof this.data.drawData.redraw === 'number');
|
||||||
|
|
||||||
|
return !isUnable;
|
||||||
|
}
|
||||||
|
|
||||||
|
public fitCanvas(width: number, height: number): void {
|
||||||
|
this.data.canvasSize.height = height;
|
||||||
|
this.data.canvasSize.width = width;
|
||||||
|
|
||||||
|
this.data.imageOffset = Math.floor(
|
||||||
|
Math.max(this.data.canvasSize.height / FrameZoom.MIN, this.data.canvasSize.width / FrameZoom.MIN),
|
||||||
|
);
|
||||||
|
|
||||||
|
this.notify(UpdateReasons.FITTED_CANVAS);
|
||||||
|
this.notify(UpdateReasons.OBJECTS_UPDATED);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
|
||||||
|
import { Canvas3dController } from './canvas3dController';
|
||||||
|
import { Listener, Master } from './master';
|
||||||
|
|
||||||
|
import { Canvas3dModel, UpdateReasons, Mode } from './canvas3dModel';
|
||||||
|
|
||||||
|
export interface Canvas3dView {
|
||||||
|
html(): HTMLDivElement;
|
||||||
|
render(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class Canvas3dViewImpl implements Canvas3dView, Listener {
|
||||||
|
private controller: Canvas3dController;
|
||||||
|
private renderer: any;
|
||||||
|
private scene: any;
|
||||||
|
private camera: any;
|
||||||
|
|
||||||
|
private set mode(value: Mode) {
|
||||||
|
this.controller.mode = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
private get mode(): Mode {
|
||||||
|
return this.controller.mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public constructor(model: Canvas3dModel & Master, controller: Canvas3dController) {
|
||||||
|
this.controller = controller;
|
||||||
|
|
||||||
|
this.mode = Mode.IDLE;
|
||||||
|
|
||||||
|
this.scene = new THREE.Scene();
|
||||||
|
this.scene.background = new THREE.Color(0x000000);
|
||||||
|
|
||||||
|
// setting up the camera and adding it in the scene
|
||||||
|
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 500);
|
||||||
|
this.camera.position.set(-15, 0, 4);
|
||||||
|
this.camera.up.set(0, 0, 1);
|
||||||
|
this.camera.lookAt(0, 0, 0);
|
||||||
|
this.scene.add(this.camera);
|
||||||
|
|
||||||
|
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
this.renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
|
model.subscribe(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public notify(model: Canvas3dModel & Master, reason: UpdateReasons): void {
|
||||||
|
if (reason === UpdateReasons.IMAGE_CHANGED) {
|
||||||
|
const loader = new PCDLoader();
|
||||||
|
this.clearScene();
|
||||||
|
const objectURL = URL.createObjectURL(model.data.image.imageData);
|
||||||
|
loader.load(objectURL, this.addScene.bind(this));
|
||||||
|
URL.revokeObjectURL(objectURL);
|
||||||
|
const event: CustomEvent = new CustomEvent('canvas.setup');
|
||||||
|
this.renderer.domElement.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearScene(): void {
|
||||||
|
for (let i = this.scene.children.length - 1; i >= 0; i--) {
|
||||||
|
this.scene.remove(this.scene.children[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private addScene(points: any): void {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
points.material.size = 0.03;
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
points.material.color = new THREE.Color(0x0000ff);
|
||||||
|
this.scene.add(points);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
public html(): any {
|
||||||
|
return this.renderer.domElement;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
const BASE_GRID_WIDTH = 2;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
BASE_GRID_WIDTH,
|
||||||
|
};
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
export interface Master {
|
||||||
|
subscribe(listener: Listener): void;
|
||||||
|
unsubscribe(listener: Listener): void;
|
||||||
|
unsubscribeAll(): void;
|
||||||
|
notify(reason: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Listener {
|
||||||
|
notify(master: Master, reason: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MasterImpl implements Master {
|
||||||
|
private listeners: Listener[];
|
||||||
|
|
||||||
|
public constructor() {
|
||||||
|
this.listeners = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
public subscribe(listener: Listener): void {
|
||||||
|
this.listeners.push(listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
public unsubscribe(listener: Listener): void {
|
||||||
|
for (let i = 0; i < this.listeners.length; i++) {
|
||||||
|
if (this.listeners[i] === listener) {
|
||||||
|
this.listeners.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public unsubscribeAll(): void {
|
||||||
|
this.listeners = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
public notify(reason: string): void {
|
||||||
|
for (const listener of this.listeners) {
|
||||||
|
listener.notify(this, reason);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"emitDeclarationOnly": true,
|
||||||
|
"module": "es6",
|
||||||
|
"target": "es6",
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"preserveConstEnums": true,
|
||||||
|
"declaration": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"declarationDir": "dist/declaration",
|
||||||
|
"paths": {
|
||||||
|
"cvat-canvas.node": ["dist/cvat-canvas3d.node"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/typescript/*.ts"]
|
||||||
|
}
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
|
const DtsBundleWebpack = require('dts-bundle-webpack');
|
||||||
|
|
||||||
|
const nodeConfig = {
|
||||||
|
target: 'node',
|
||||||
|
mode: 'production',
|
||||||
|
devtool: 'source-map',
|
||||||
|
entry: './src/typescript/canvas3d.ts',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'cvat-canvas3d.node.js',
|
||||||
|
library: 'canvas3d',
|
||||||
|
libraryTarget: 'commonjs',
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js', '.json'],
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
plugins: [
|
||||||
|
'@babel/plugin-proposal-class-properties',
|
||||||
|
'@babel/plugin-proposal-optional-chaining',
|
||||||
|
],
|
||||||
|
presets: [['@babel/preset-env'], ['@babel/typescript']],
|
||||||
|
sourceType: 'unambiguous',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(css|scss)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'postcss-loader',
|
||||||
|
'sass-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new DtsBundleWebpack({
|
||||||
|
name: 'cvat-canvas3d.node',
|
||||||
|
main: 'dist/declaration/src/typescript/canvas3d.d.ts',
|
||||||
|
out: '../cvat-canvas3d.node.d.ts',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const webConfig = {
|
||||||
|
target: 'web',
|
||||||
|
mode: 'production',
|
||||||
|
devtool: 'source-map',
|
||||||
|
entry: {
|
||||||
|
'cvat-canvas3d': './src/typescript/canvas3d.ts',
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: '[name].[contenthash].js',
|
||||||
|
library: 'canvas3d',
|
||||||
|
libraryTarget: 'window',
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
contentBase: path.join(__dirname, 'dist'),
|
||||||
|
compress: false,
|
||||||
|
inline: true,
|
||||||
|
port: 3000,
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js', '.json'],
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
plugins: ['@babel/plugin-proposal-class-properties'],
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'@babel/preset-env',
|
||||||
|
{
|
||||||
|
targets: '> 2.5%', // https://github.com/browserslist/browserslist
|
||||||
|
},
|
||||||
|
],
|
||||||
|
['@babel/typescript'],
|
||||||
|
],
|
||||||
|
sourceType: 'unambiguous',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'postcss-loader',
|
||||||
|
'sass-loader',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new DtsBundleWebpack({
|
||||||
|
name: 'cvat-canvas3d',
|
||||||
|
main: 'dist/declaration/src/typescript/canvas3d.d.ts',
|
||||||
|
out: '../cvat-canvas3d.d.ts',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = [webConfig, nodeConfig];
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { ReactElement, useEffect, useRef } from 'react';
|
||||||
|
import { GlobalHotKeys } from 'react-hotkeys';
|
||||||
|
import Layout from 'antd/lib/layout/layout';
|
||||||
|
|
||||||
|
import { Workspace } from 'reducers/interfaces';
|
||||||
|
import { Canvas3d } from 'cvat-canvas3d-wrapper';
|
||||||
|
import ContextImage from '../standard3D-workspace/context-image/context-image';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas3d;
|
||||||
|
jobInstance: any;
|
||||||
|
frameData: any;
|
||||||
|
curZLayer: number;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
loaded: boolean;
|
||||||
|
data: string;
|
||||||
|
annotations: any[];
|
||||||
|
onSetupCanvas: () => void;
|
||||||
|
getContextImage(): void;
|
||||||
|
workspace: Workspace;
|
||||||
|
animateID: any;
|
||||||
|
automaticBordering: boolean;
|
||||||
|
showObjectsTextAlways: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CanvasWrapperComponent = (props: Props): ReactElement => {
|
||||||
|
const animateId = useRef(0);
|
||||||
|
const cvatCanvasContainerRef = useRef();
|
||||||
|
|
||||||
|
const {
|
||||||
|
frameData, contextImageHide, getContextImage, loaded, data, annotations, curZLayer,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const fitCanvas = (): void => {
|
||||||
|
const { canvasInstance } = props;
|
||||||
|
canvasInstance.fitCanvas();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onCanvasSetup = (): void => {
|
||||||
|
const { onSetupCanvas } = props;
|
||||||
|
onSetupCanvas();
|
||||||
|
};
|
||||||
|
|
||||||
|
const animateCanvas = (): void => {
|
||||||
|
const { canvasInstance } = props;
|
||||||
|
|
||||||
|
canvasInstance.render();
|
||||||
|
animateId.current = requestAnimationFrame(animateCanvas);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateCanvas = (): void => {
|
||||||
|
const { canvasInstance } = props;
|
||||||
|
|
||||||
|
if (frameData !== null) {
|
||||||
|
canvasInstance.setup(frameData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialSetup = (): void => {
|
||||||
|
const { canvasInstance } = props;
|
||||||
|
|
||||||
|
// Size
|
||||||
|
window.addEventListener('resize', fitCanvas);
|
||||||
|
fitCanvas();
|
||||||
|
|
||||||
|
// Events
|
||||||
|
canvasInstance.html().addEventListener('canvas.setup', onCanvasSetup);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const { canvasInstance } = props;
|
||||||
|
|
||||||
|
cvatCanvasContainerRef.current.appendChild(canvasInstance.html());
|
||||||
|
|
||||||
|
initialSetup();
|
||||||
|
updateCanvas();
|
||||||
|
animateCanvas();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
canvasInstance.html().removeEventListener('canvas.setup', onCanvasSetup);
|
||||||
|
window.removeEventListener('resize', fitCanvas);
|
||||||
|
cancelAnimationFrame(animateId.current);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
updateCanvas();
|
||||||
|
}, [frameData, annotations, curZLayer]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout.Content style={{ position: 'relative' }}>
|
||||||
|
<GlobalHotKeys />
|
||||||
|
<ContextImage
|
||||||
|
frame={frameData}
|
||||||
|
contextImageHide={contextImageHide}
|
||||||
|
getContextImage={getContextImage}
|
||||||
|
loaded={loaded}
|
||||||
|
data={data}
|
||||||
|
/>
|
||||||
|
<div ref={cvatCanvasContainerRef} className='cvat-canvas-container cvat-canvas-container-overflow' />
|
||||||
|
</Layout.Content>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(CanvasWrapperComponent);
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
frame: number;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
loaded: boolean;
|
||||||
|
data: string;
|
||||||
|
getContextImage(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContextImage(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
contextImageHide, loaded, data, getContextImage,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!contextImageHide && !loaded) {
|
||||||
|
getContextImage();
|
||||||
|
}
|
||||||
|
}, [contextImageHide, loaded]);
|
||||||
|
|
||||||
|
if (!contextImageHide && data !== '') {
|
||||||
|
return (
|
||||||
|
<div className='cvat-contextImage'>
|
||||||
|
<img src={data} alt='Context not available' className='cvat-contextImage-show' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { GlobalHotKeys } from 'react-hotkeys';
|
||||||
|
import Layout from 'antd/lib/layout';
|
||||||
|
|
||||||
|
import { ActiveControl } from 'reducers/interfaces';
|
||||||
|
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||||
|
|
||||||
|
import CursorControl from './cursor-control';
|
||||||
|
import MoveControl from './move-control';
|
||||||
|
|
||||||
|
import DrawCuboidControl from './draw-cuboid-control';
|
||||||
|
|
||||||
|
import PhotoContextControl from './photo-context';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
activeControl: ActiveControl;
|
||||||
|
normalizedKeyMap: Record<string, string>;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
hideShowContextImage: (hidden: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ControlsSideBarComponent(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
canvasInstance, activeControl, normalizedKeyMap, contextImageHide, hideShowContextImage,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout.Sider className='cvat-canvas-controls-sidebar' theme='light' width={44}>
|
||||||
|
<GlobalHotKeys />
|
||||||
|
|
||||||
|
<MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
|
||||||
|
|
||||||
|
<CursorControl
|
||||||
|
cursorShortkey={normalizedKeyMap.CANCEL}
|
||||||
|
canvasInstance={canvasInstance}
|
||||||
|
activeControl={activeControl}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DrawCuboidControl
|
||||||
|
canvasInstance={canvasInstance}
|
||||||
|
isDrawing={activeControl === ActiveControl.DRAW_CUBOID}
|
||||||
|
/>
|
||||||
|
<PhotoContextControl
|
||||||
|
canvasInstance={canvasInstance}
|
||||||
|
activeControl={activeControl}
|
||||||
|
contextImageHide={contextImageHide}
|
||||||
|
hideShowContextImage={hideShowContextImage}
|
||||||
|
/>
|
||||||
|
</Layout.Sider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Icon from '@ant-design/icons';
|
||||||
|
import Tooltip from 'antd/lib/tooltip';
|
||||||
|
|
||||||
|
import { CursorIcon } from 'icons';
|
||||||
|
import { ActiveControl } from 'reducers/interfaces';
|
||||||
|
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
cursorShortkey: string;
|
||||||
|
activeControl: ActiveControl;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CursorControl(props: Props): JSX.Element {
|
||||||
|
const { activeControl, cursorShortkey } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}>
|
||||||
|
<Icon
|
||||||
|
component={CursorIcon}
|
||||||
|
className={[
|
||||||
|
'cvat-cursor-control',
|
||||||
|
activeControl === ActiveControl.CURSOR ? 'cvat-active-canvas-control ' : null,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(CursorControl);
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Popover from 'antd/lib/popover';
|
||||||
|
import Icon from '@ant-design/icons';
|
||||||
|
|
||||||
|
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||||
|
import { ShapeType } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
import { CubeIcon } from 'icons';
|
||||||
|
|
||||||
|
import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
isDrawing: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DrawPolygonControl(props: Props): JSX.Element {
|
||||||
|
const { canvasInstance, isDrawing } = props;
|
||||||
|
|
||||||
|
const dynamcPopoverPros = isDrawing ?
|
||||||
|
{
|
||||||
|
overlayStyle: {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
} :
|
||||||
|
{};
|
||||||
|
|
||||||
|
const dynamicIconProps = isDrawing ?
|
||||||
|
{
|
||||||
|
className: 'cvat-draw-cuboid-control cvat-active-canvas-control',
|
||||||
|
onClick: (): void => {
|
||||||
|
canvasInstance.draw({ enabled: false });
|
||||||
|
},
|
||||||
|
} :
|
||||||
|
{
|
||||||
|
className: 'cvat-draw-cuboid-control',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
{...dynamcPopoverPros}
|
||||||
|
overlayClassName='cvat-draw-shape-popover'
|
||||||
|
placement='right'
|
||||||
|
content={<DrawShapePopoverContainer shapeType={ShapeType.CUBOID} />}
|
||||||
|
>
|
||||||
|
<Icon {...dynamicIconProps} component={CubeIcon} />
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(DrawPolygonControl);
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Icon from '@ant-design/icons';
|
||||||
|
import Tooltip from 'antd/lib/tooltip';
|
||||||
|
|
||||||
|
import { MoveIcon } from 'icons';
|
||||||
|
import { ActiveControl } from 'reducers/interfaces';
|
||||||
|
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
activeControl: ActiveControl;
|
||||||
|
}
|
||||||
|
|
||||||
|
function MoveControl(props: Props): JSX.Element {
|
||||||
|
const { activeControl } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}>
|
||||||
|
<Icon
|
||||||
|
component={MoveIcon}
|
||||||
|
className={[
|
||||||
|
'cvat-move-control',
|
||||||
|
activeControl === ActiveControl.DRAG_CANVAS ? ' cvat-active-canvas-control' : null,
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(MoveControl);
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import CameraIcon from '@ant-design/icons/CameraOutlined';
|
||||||
|
import Tooltip from 'antd/lib/tooltip';
|
||||||
|
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
|
||||||
|
import React from 'react';
|
||||||
|
import { ActiveControl } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
activeControl: ActiveControl;
|
||||||
|
hideShowContextImage: (hidden: boolean) => void;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PhotoContextControl(props: Props): JSX.Element {
|
||||||
|
const { activeControl, contextImageHide, hideShowContextImage } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title='Photo context show/hide' placement='right' mouseLeaveDelay={0}>
|
||||||
|
<CameraIcon
|
||||||
|
className={`cvat-move-control
|
||||||
|
cvat-control-side-bar-icon-size ${
|
||||||
|
activeControl === ActiveControl.PHOTO_CONTEXT ? 'cvat-active-canvas-control' : ''
|
||||||
|
}`}
|
||||||
|
onClick={(): void => {
|
||||||
|
hideShowContextImage(!contextImageHide);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(PhotoContextControl);
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import './styles.scss';
|
||||||
|
import React from 'react';
|
||||||
|
import Layout from 'antd/lib/layout';
|
||||||
|
|
||||||
|
import CanvasWrapperContainer from 'containers/annotation-page/canvas/canvas-wrapper3D';
|
||||||
|
import ControlsSideBarContainer from 'containers/annotation-page/standard3D-workspace/controls-side-bar/controls-side-bar';
|
||||||
|
|
||||||
|
export default function StandardWorkspace3DComponent(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Layout hasSider className='cvat-standard-workspace'>
|
||||||
|
<ControlsSideBarContainer />
|
||||||
|
<CanvasWrapperContainer />
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
@import 'base.scss';
|
||||||
|
|
||||||
|
.cvat-standard-workspace.ant-layout {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-contextImage {
|
||||||
|
width: $grid-unit-size * 32;
|
||||||
|
position: absolute;
|
||||||
|
background: $border-color-3;
|
||||||
|
top: $grid-unit-size;
|
||||||
|
right: $grid-unit-size;
|
||||||
|
max-height: $grid-unit-size * 16;
|
||||||
|
z-index: 100;
|
||||||
|
border-radius: $grid-unit-size;
|
||||||
|
border: 1px solid $border-color-3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $grid-unit-size/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-contextImage-show {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-contextImage-loading {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-objects-sidebar-filter-input {
|
||||||
|
width: calc(100% - 35px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-objects-sidebar-sider {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
background-color: $background-color-2;
|
||||||
|
border-left: 1px solid $border-color-1;
|
||||||
|
border-bottom: 1px solid $border-color-1;
|
||||||
|
border-radius: $grid-unit-size/2 0 0 $grid-unit-size/2;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-objects-sidebar {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-rotate-canvas-controls-right > svg {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-canvas-controls-sidebar {
|
||||||
|
background-color: $background-color-2;
|
||||||
|
border-right: 1px solid $border-color-1;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
> i {
|
||||||
|
border-radius: 3.3px;
|
||||||
|
transform: scale(0.65);
|
||||||
|
padding: $grid-unit-size/4;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $header-color;
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-active-canvas-control {
|
||||||
|
background: $header-color;
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-rotate-canvas-controls-left,
|
||||||
|
.cvat-rotate-canvas-controls-right {
|
||||||
|
transform: scale(0.65);
|
||||||
|
border-radius: $grid-unit-size/2;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.65);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-rotate-canvas-controls > .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-draw-shape-popover,
|
||||||
|
.cvat-tools-control-popover {
|
||||||
|
> .ant-popover-content > .ant-popover-inner > div > .ant-popover-inner-content {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-tools-track-button,
|
||||||
|
.cvat-tools-interact-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: $grid-unit-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-draw-shape-popover-points-selector {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-tools-control-popover-content {
|
||||||
|
width: fit-content;
|
||||||
|
padding: $grid-unit-size;
|
||||||
|
border-radius: $grid-unit-size/2;
|
||||||
|
background: $background-color-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-draw-shape-popover-content {
|
||||||
|
padding: $grid-unit-size;
|
||||||
|
border-radius: $grid-unit-size/2;
|
||||||
|
background: $background-color-2;
|
||||||
|
width: 270px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
margin-top: $grid-unit-size/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:nth-child(3) > div > div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div:last-child {
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
border-radius: $grid-unit-size/2 0 0 $grid-unit-size/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-radius: 0 $grid-unit-size/2 $grid-unit-size/2 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-canvas-container-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-control-side-bar-icon-size {
|
||||||
|
font-size: $grid-unit-size * 5;
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import CanvasWrapperComponent from 'components/annotation-page/canvas/canvas-wrapper3D';
|
||||||
|
import { confirmCanvasReady, getContextImage } from 'actions/annotation-actions';
|
||||||
|
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
import { Canvas3d } from 'cvat-canvas3d-wrapper';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
canvasInstance: Canvas3d;
|
||||||
|
jobInstance: any;
|
||||||
|
frameData: any;
|
||||||
|
curZLayer: number;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
loaded: boolean;
|
||||||
|
data: string;
|
||||||
|
annotations: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onSetupCanvas(): void;
|
||||||
|
getContextImage(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
canvas: { instance: canvasInstance },
|
||||||
|
job: { instance: jobInstance },
|
||||||
|
player: {
|
||||||
|
frame: { data: frameData },
|
||||||
|
contextImage: { hidden: contextImageHide, data, loaded },
|
||||||
|
},
|
||||||
|
annotations: {
|
||||||
|
states: annotations,
|
||||||
|
zLayer: { cur: curZLayer },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
canvasInstance,
|
||||||
|
jobInstance,
|
||||||
|
frameData,
|
||||||
|
curZLayer,
|
||||||
|
contextImageHide,
|
||||||
|
loaded,
|
||||||
|
data,
|
||||||
|
annotations,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
onSetupCanvas(): void {
|
||||||
|
dispatch(confirmCanvasReady());
|
||||||
|
},
|
||||||
|
getContextImage(): void {
|
||||||
|
dispatch(getContextImage());
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(CanvasWrapperComponent);
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import { ExtendedKeyMapOptions } from 'react-hotkeys';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import { Canvas } from 'cvat-canvas-wrapper';
|
||||||
|
import { hideShowContextImage } from 'actions/annotation-actions';
|
||||||
|
import ControlsSideBarComponent from 'components/annotation-page/standard3D-workspace/controls-side-bar/controls-side-bar';
|
||||||
|
import { ActiveControl, CombinedState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
activeControl: ActiveControl;
|
||||||
|
keyMap: Record<string, ExtendedKeyMapOptions>;
|
||||||
|
normalizedKeyMap: Record<string, string>;
|
||||||
|
contextImageHide: boolean;
|
||||||
|
loaded: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
hideShowContextImage(hidden: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
canvas: { instance: canvasInstance, activeControl },
|
||||||
|
player: {
|
||||||
|
contextImage: { hidden: contextImageHide, loaded },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
shortcuts: { keyMap, normalizedKeyMap },
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
canvasInstance,
|
||||||
|
activeControl,
|
||||||
|
normalizedKeyMap,
|
||||||
|
keyMap,
|
||||||
|
contextImageHide,
|
||||||
|
loaded,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function dispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
hideShowContextImage(hidden: boolean): void {
|
||||||
|
dispatch(hideShowContextImage(hidden));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, dispatchToProps)(ControlsSideBarComponent);
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import { Canvas3d, Canvas3dVersion } from 'cvat-canvas3d/src/typescript/canvas3d';
|
||||||
|
|
||||||
|
export { Canvas3d, Canvas3dVersion };
|
||||||
Loading…
Reference in New Issue