You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Boris Sekachev 6be7e4cceb
3D annotation view significant performance update & refactoring (#5442)
<!-- Raised an issue to propose your change
(https://github.com/cvat-ai/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the
[CONTRIBUTION](https://github.com/cvat-ai/cvat/blob/develop/CONTRIBUTING.md)
guide. -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable by a reason then ~~explicitly
strikethrough~~ the whole
line. If you don't do that github will show an incorrect process for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into
[CHANGELOG](https://github.com/cvat-ai/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the [documentation](
https://github.com/cvat-ai/cvat/blob/develop/README.md#documentation)
accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues ([read github docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary
([cvat-canvas](https://github.com/cvat-ai/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/cvat-ai/cvat/tree/develop/cvat-core#versioning),
[cvat-data](https://github.com/cvat-ai/cvat/tree/develop/cvat-data#versioning)
and
[cvat-ui](https://github.com/cvat-ai/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.
3 years ago
..
src/typescript 3D annotation view significant performance update & refactoring (#5442) 3 years ago
.eslintignore CVAT-3D Milestone2 (#2645) 5 years ago
.eslintrc.js Typescripted cvat-core, cvat-data (#120) 4 years ago
README.md Replace npm with yarn (#113) 4 years ago
package.json 3D annotation view significant performance update & refactoring (#5442) 3 years ago
tsconfig.json CVAT-3D Milestone2 (#2645) 5 years ago
webpack.config.js Fixed Intel license headers (#119) 4 years ago

README.md

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: yarn version --patch
  • After changing API (backward compatible new features) do: yarn version --minor
  • After changing API (changes that break backward compatibility) do: yarn version --major

Commands

  • Building of the module from sources in the dist directory:
yarn run build
yarn run build --mode=development     # without a minification

API Methods

interface Canvas3d {
  html(): ViewsDOM;
  setup(frameData: any, objectStates: any[]): void;
  isAbleToChangeFrame(): boolean;
  mode(): Mode;
  render(): void;
  keyControls(keys: KeyboardEvent): void;
  draw(drawData: DrawData): void;
  cancel(): void;
  dragCanvas(enable: boolean): void;
  activate(clientID: number | null, attributeID?: number): void;
  configureShapes(shapeProperties: ShapeProperties): void;
  fitCanvas(): void;
  fit(): void;
  group(groupData: GroupData): void;
}

WEB

// 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
const views = canvas.html();
htmlContainer.appendChild(views.perspective);
htmlContainer.appendChild(views.top);
htmlContainer.appendChild(views.side);
htmlContainer.appendChild(views.front);