Minor fixes and README update

Author: ActiveChooN

cvat-canvas/README.md

@@ -32,11 +32,6 @@ Canvas itself handles:
 ### API Methods
 
 ```ts
-    enum Rotation {
-        ANTICLOCKWISE90,
-        CLOCKWISE90,
-    }
-
     interface DrawData {
         enabled: boolean;
         shapeType?: string;
@@ -74,7 +69,7 @@ Canvas itself handles:
         setZLayer(zLayer: number | null): void;
         setup(frameData: any, objectStates: any[]): void;
         activate(clientID: number, attributeID?: number): void;
-        rotate(rotation: Rotation, remember?: boolean): void;
+        rotate(frameAngle: number): void;
         focus(clientID: number, padding?: number): void;
         fit(): void;
         grid(stepX: number, stepY: number): void;
@@ -142,7 +137,7 @@ Standard JS events are used.
     canvas.fitCanvas();
 
     // Next you can use its API methods. For example:
-    canvas.rotate(window.Canvas.Rotation.CLOCKWISE90);
+    canvas.rotate(270);
     canvas.draw({
         enabled: true,
         shapeType: 'rectangle',

cvat-canvas/src/typescript/canvasModel.ts

@@ -343,7 +343,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
 
     public rotate(rotationAngle: number): void {
         if (this.data.angle !== rotationAngle) {
-            this.data.angle = rotationAngle;
+            this.data.angle = (360 + Math.floor((rotationAngle) / 90) * 90) % 360;
             this.fit();
         }
     }

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

@@ -33,7 +33,7 @@ interface Props {
     selectedStatesID: number[];
     annotations: any[];
     frameData: any;
-    frameAngles: number[];
+    frameAngle: number;
     frame: number;
     opacity: number;
     colorBy: ColorBy;
@@ -102,7 +102,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             gridColor,
             gridOpacity,
             frameData,
-            frameAngles,
+            frameAngle,
             annotations,
             canvasInstance,
             sidebarCollapsed,
@@ -173,8 +173,8 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             canvasInstance.setZLayer(curZLayer);
         }
 
-        if (prevProps.frameAngles !== frameAngles) {
-            this.rotate();
+        if (prevProps.frameAngle !== frameAngle) {
+            canvasInstance.rotate(frameAngle);
         }
 
         this.activateOnCanvas();
@@ -333,28 +333,16 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         const {
             annotations,
             frameData,
+            frameAngle,
             canvasInstance,
         } = this.props;
 
         if (frameData !== null) {
             canvasInstance.setup(frameData, annotations);
-            this.rotate();
+            canvasInstance.rotate(frameAngle);
         }
     }
 
-    private rotate(): void {
-        const {
-            frame,
-            frameAngles,
-            canvasInstance,
-            jobInstance,
-        } = this.props;
-
-        const frameAngle = frameAngles[frame - jobInstance.startFrame];
-
-        canvasInstance.rotate(frameAngle);
-    }
-
     private initialSetup(): void {
         const {
             grid,

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

@@ -41,7 +41,7 @@ interface StateToProps {
     selectedStatesID: number[];
     annotations: any[];
     frameData: any;
-    frameAngles: number[];
+    frameAngle: number;
     frame: number;
     opacity: number;
     colorBy: ColorBy;
@@ -141,7 +141,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         canvasInstance,
         jobInstance,
         frameData,
-        frameAngles,
+        frameAngle: frameAngles[frame - jobInstance.startFrame],
         frame,
         activatedStateID,
         selectedStatesID,

cvat-ui/src/reducers/annotation-reducer.ts

@@ -135,7 +135,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                         number,
                         data,
                     },
-                    frameAngles: Array(job.stopFrame - job.startFrame).fill(0),
+                    frameAngles: Array(job.stopFrame - job.startFrame + 1).fill(0),
                 },
                 drawing: {
                     ...state.drawing,