Improved cvat-canvas integration

cvat-canvas/src/typescript/canvasView.ts

@@ -726,6 +726,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
  width: this.canvas.clientWidth,
  };
 
+
  this.controller.geometry = geometry;
  this.geometry = geometry;
  }

cvat-core/src/annotations-objects.js

@@ -480,20 +480,18 @@
  // Method is used to construct ObjectState objects
  get(frame) {
  if (!(frame in this.cache)) {
- const interpolation = Object.assign(
- {}, this.getPosition(frame),
- {
- attributes: this.getAttributes(frame),
- group: this.group,
- objectType: ObjectType.TRACK,
- shapeType: this.shapeType,
- clientID: this.clientID,
- serverID: this.serverID,
- lock: this.lock,
- color: this.color,
- visibility: this.visibility,
- },
- );
+ const interpolation = {
+ ...this.getPosition(frame),
+ attributes: this.getAttributes(frame),
+ group: this.group,
+ objectType: ObjectType.TRACK,
+ shapeType: this.shapeType,
+ clientID: this.clientID,
+ serverID: this.serverID,
+ lock: this.lock,
+ color: this.color,
+ visibility: this.visibility,
+ };
 
  this.cache[frame] = interpolation;
  }
@@ -504,7 +502,7 @@
  }
 
  neighborsFrames(targetFrame) {
- const frames = Object.keys(this.shapes).map(frame => +frame);
+ const frames = Object.keys(this.shapes).map((frame) => +frame);
  let lDiff = Number.MAX_SAFE_INTEGER;
  let rDiff = Number.MAX_SAFE_INTEGER;
 
@@ -773,13 +771,14 @@
  }
 
  if (rightPosition && leftPosition) {
- return Object.assign({}, this.interpolatePosition(
- leftPosition,
- rightPosition,
- (targetFrame - leftFrame) / (rightFrame - leftFrame),
- ), {
+ return {
+ ...this.interpolatePosition(
+ leftPosition,
+ rightPosition,
+ (targetFrame - leftFrame) / (rightFrame - leftFrame),
+ ),
  keyframe: false,
- });
+ };
  }
 
  if (rightPosition) {
@@ -858,7 +857,7 @@
  clientID: this.clientID,
  serverID: this.serverID,
  lock: this.lock,
- attributes: Object.assign({}, this.attributes),
+ attributes: { ...this.attributes },
  label: this.label,
  group: this.group,
  };
@@ -888,7 +887,7 @@
 
  if (updated.attributes) {
  const labelAttributes = copy.label
- .attributes.map(attr => `${attr.id}`);
+ .attributes.map((attr) => `${attr.id}`);
 
  for (const attrID of Object.keys(data.attributes)) {
  if (labelAttributes.includes(attrID)) {
@@ -1399,8 +1398,8 @@
  // some points from source and target can absent in mapping
  // source, target - arrays of points. Target array size >= sourse array size
  appendMapping(mapping, source, target) {
- const targetMatched = Object.values(mapping).map(x => +x);
- const sourceMatched = Object.keys(mapping).map(x => +x);
+ const targetMatched = Object.values(mapping).map((x) => +x);
+ const sourceMatched = Object.keys(mapping).map((x) => +x);
  const orderForReceive = [];
 
  function findNeighbors(point) {

cvat-core/src/frames.js

@@ -127,8 +127,9 @@
 
  async function getFrame(taskID, mode, frame) {
  if (!(taskID in frameDataCache)) {
- frameDataCache[taskID] = {};
- frameDataCache[taskID].meta = await serverProxy.frames.getMeta(taskID);
+ frameDataCache[taskID] = {
+ meta: await serverProxy.frames.getMeta(taskID),
+ };
 
  frameCache[taskID] = {};
  }

cvat-core/src/labels.js

@@ -192,7 +192,7 @@
  toJSON() {
  const object = {
  name: this.name,
- attributes: [...this.attributes.map(el => el.toJSON())],
+ attributes: [...this.attributes.map((el) => el.toJSON())],
  };
 
  if (typeof (this.id) !== 'undefined') {

cvat-core/src/plugins.js

@@ -17,7 +17,7 @@
  const pluginList = await PluginRegistry.list();
  for (const plugin of pluginList) {
  const pluginDecorators = plugin.functions
- .filter(obj => obj.callback === wrappedFunc)[0];
+ .filter((obj) => obj.callback === wrappedFunc)[0];
  if (pluginDecorators && pluginDecorators.enter) {
  try {
  await pluginDecorators.enter.call(this, plugin, ...args);
@@ -35,7 +35,7 @@
 
  for (const plugin of pluginList) {
  const pluginDecorators = plugin.functions
- .filter(obj => obj.callback === wrappedFunc)[0];
+ .filter((obj) => obj.callback === wrappedFunc)[0];
  if (pluginDecorators && pluginDecorators.leave) {
  try {
  result = await pluginDecorators.leave.call(this, plugin, result, ...args);

cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper-component.tsx

@@ -8,44 +8,38 @@ import { Canvas } from '../../../../../cvat-canvas/src/typescript/canvas';
 
 interface Props {
  jobInstance: any;
+ canvas: Canvas;
  frame: number | null;
  onSetupCanvas(): void;
 }
 
 export default class CanvasWrapperComponent extends React.PureComponent<Props> {
- private initializedSize = false;
- public readonly canvas: Canvas;
- public constructor(props: Props) {
- super(props);
- this.canvas = new Canvas();
- this.initializedSize = false;
- }
-
  public componentDidMount(): void {
  const {
  jobInstance,
  onSetupCanvas,
+ canvas,
  } = this.props;
 
  // It's awful approach from the point of view React
  // But we do not have any choice because cvat-canvas returns regular DOM element
  const [wrapper] = window.document
  .getElementsByClassName('cvat-annotation-page-canvas-container');
- wrapper.appendChild(this.canvas.html());
+ wrapper.appendChild(canvas.html());
+ canvas.updateSize();
 
- this.canvas.html().addEventListener('canvas.setup', () => {
- if (!this.initializedSize) {
- this.initializedSize = true;
- this.canvas.updateSize();
- this.canvas.fit();
- }
 
+ canvas.html().addEventListener('canvas.setup', () => {
+ onSetupCanvas();
  if (jobInstance.task.mode === 'annotation') {
- this.canvas.fit();
+ canvas.fit();
  }
- onSetupCanvas();
  });
 
+ canvas.html().addEventListener('canvas.setup', () => {
+ canvas.fit();
+ }, { once: true });
+
  this.updateCanvas();
  }
 
@@ -57,27 +51,25 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
  const {
  jobInstance,
  frame,
+ canvas,
  } = this.props;
 
  if (frame !== null) {
- jobInstance.frames.get(frame)
- .then((frameData: any) => jobInstance.annotations.get(frame)
- .then((annotations: any[]) => {
- this.canvas.setup(frameData, annotations);
- }).catch((error: any) => {
- console.log(error);
- // TODO: jobInstance.annotations.get(frame)
- // requires meta information and there is an error
- }))
- .catch((error: any) => {
- console.log(error);
- });
+ Promise.all([
+
+ jobInstance.frames.get(frame),
+ jobInstance.annotations.get(frame),
+ ]).then(([frameData, annotations]) => {
+ canvas.setup(frameData, annotations);
+ }).catch((error: any) => {
+ console.log(error);
+ });
  }
  }
 
  public render(): JSX.Element {
  return (
- // This element doesn't has any props
+ // This element doesn't have any props
  // So, React isn't going to rerender it
  // And it's a reason why cvat-canvas appended in mount function works
  <Layout.Content

cvat-ui/src/components/annotation-page/standard-workspace/standard-workspace.tsx

@@ -5,6 +5,8 @@ import {
  Layout,
 } from 'antd';
 
+import { Canvas } from '../../../../../cvat-canvas/src/typescript/canvas';
+
 import ControlsSideBarComponent from './controls-side-bar';
 import CanvasWrapperComponent from './canvas-wrapper-component';
 import ObjectSideBarComponent from './objects-side-bar/objects-side-bar';
@@ -15,32 +17,42 @@ interface Props {
  onSetupCanvas(): void;
 }
 
-export default function StandardWorkspaceComponent(props: Props): JSX.Element {
- const {
- jobInstance,
- frame,
- onSetupCanvas,
- } = props;
-
- const canvasWrapper = React.createRef<CanvasWrapperComponent>();
-
- return (
- <Layout>
- <ControlsSideBarComponent />
- <CanvasWrapperComponent
- jobInstance={jobInstance}
- frame={frame}
- onSetupCanvas={onSetupCanvas}
- ref={canvasWrapper}
- />
- <ObjectSideBarComponent
- onSidebarFoldUnfold={(): void => {
- if (canvasWrapper.current) {
- canvasWrapper.current.canvas.updateSize();
- canvasWrapper.current.canvas.fit();
- }
- }}
- />
- </Layout>
- );
+interface State {
+ canvas: Canvas;
+}
+
+export default class StandardWorkspaceComponent extends React.PureComponent<Props, State> {
+ public constructor(props: Props) {
+ super(props);
+ this.state = {
+ canvas: new Canvas(),
+ };
+ }
+
+ public render(): JSX.Element {
+ const {
+ jobInstance,
+ frame,
+ onSetupCanvas,
+ } = this.props;
+
+ const { canvas } = this.state;
+
+ return (
+ <Layout hasSider>
+ <ControlsSideBarComponent />
+ <CanvasWrapperComponent
+ jobInstance={jobInstance}
+ frame={frame}
+ onSetupCanvas={onSetupCanvas}
+ canvas={canvas}
+ />
+ <ObjectSideBarComponent
+ onSidebarFoldUnfold={(): void => {
+ canvas.updateSize();
+ }}
+ />
+ </Layout>
+ );
+ }
 }