@luceosports/play-rendering 2.0.2 → 2.0.4

package/dist/types/models/PlayModel.d.ts

@@ -15,7 +15,7 @@ export type PlayModelOptions = {
     linesSelectedIds: string[];
     shapeSelectedId: string | null;
     noteSelectedId: string | null;
-    playersHiddenPositions?: string[];
+    playersHiddenPositions: string[];
     background: string;
     watermark: string | null;
     mirror: boolean;

package/dist/types/models/ShapeModels/index.d.ts

@@ -10,5 +10,5 @@ import LineShape from './LineShape';
 import SquareShape from './SquareShape';
 import StraightShape from './StraightShape';
 import TriangleShape from './TriangleShape';
-import XMarkShape from './XMarkShape';
-export { CutLineShape, DribbleLineShape, HandoffLineShape, PassLineShape, ScreenLineShape, CircleShape, ConeShape, FovShape, LineShape, SquareShape, StraightShape, TriangleShape, XMarkShape };
+import XmarkShape from './XmarkShape';
+export { CutLineShape, DribbleLineShape, HandoffLineShape, PassLineShape, ScreenLineShape, CircleShape, ConeShape, FovShape, LineShape, SquareShape, StraightShape, TriangleShape, XmarkShape };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "main": "dist/play-rendering.js",
   "types": "dist/play-rendering.d.ts",
   "scripts": {

package/src/helpers/common.ts

@@ -25,7 +25,7 @@ export function shapeModelKeyFromImport(shapeModels: typeof ShapeModels, type: S
     const prefix = type.replace('LINE.', '');
     const suffix = type.indexOf('LINE.') >= 0 ? 'LineShape' : 'Shape';
     return key.toLowerCase() === `${prefix}${suffix}`.toLowerCase();
-  });
+  }) as keyof typeof ShapeModels;
 }
 
 export async function loadImage(src: string | Buffer) {

package/src/layers/CourtLayer.ts

@@ -23,7 +23,7 @@ export default class CourtLayer extends BaseLayer {
   }
 
   get background() {
-    return this.options.background || this.playData.sport;
+    return (this.options.background || this.playData.sport) as keyof typeof this.staticData.backgroundOptions;
   }
 
   apply() {
@@ -58,8 +58,7 @@ export default class CourtLayer extends BaseLayer {
 
   setBackground() {
     if (this.staticData.backgroundOptions && this.staticData.backgroundOptions[this.background]) {
-      const ptrn = this.ctx.createPattern(this.staticData.backgroundOptions[this.background], 'repeat');
-      this.ctx.fillStyle = ptrn;
+      this.ctx.fillStyle = this.ctx.createPattern(this.staticData.backgroundOptions[this.background], 'repeat')!;
       this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     } else if (this.background.indexOf('#') === 0) {
       this.ctx.save();
@@ -70,8 +69,10 @@ export default class CourtLayer extends BaseLayer {
   }
 
   setWatermark() {
-    if (this.options.watermark && this.staticData.watermark && this.staticData.watermark[this.options.watermark]) {
-      const watermarkImage = this.staticData.watermark[this.options.watermark];
+    const watermarkImage = this.options.watermark
+      ? this.staticData.watermark[this.options.watermark as keyof typeof this.staticData.watermark]
+      : null;
+    if (watermarkImage) {
       const aRatio = watermarkImage.width / watermarkImage.height;
       const maxWatermarkLimit = this.frameWidth / 5;
       const destination = {
@@ -92,11 +93,11 @@ export default class CourtLayer extends BaseLayer {
       const dy = (this.playData.court.courtRect.size.height - fullCourtIndentY - 1) * this.scale - destination.height;
 
       this.ctx.drawImage(
-        this.staticData.watermark[this.options.watermark],
+        watermarkImage,
         0,
         0,
-        this.staticData.watermark[this.options.watermark].width,
-        this.staticData.watermark[this.options.watermark].height,
+        watermarkImage.width,
+        watermarkImage.height,
         dx,
         dy,
         destination.width,

package/src/layers/LineLayer.ts

@@ -16,8 +16,8 @@ export default class LineLayer extends BaseLayer {
     this.playData.lines.forEach(line => {
       if (this.options.linesHiddenIds.indexOf(line.id) >= 0) return;
       const layerKey = `${_.capitalize(line.type)}LineLayer`;
-      if (lineLayers[layerKey]) {
-        new lineLayers[layerKey](this, line).apply();
+      if (lineLayers[layerKey as keyof typeof lineLayers]) {
+        new lineLayers[layerKey as keyof typeof lineLayers](this, line).apply();
       }
     });
 

package/src/layers/NoteLayer.ts

@@ -3,7 +3,7 @@ import BaseLayer from './base/BaseLayer';
 import NoteModel from '../models/NoteModel';
 
 export default class NoteLayer extends BaseLayer {
-  private noteAlpha: number;
+  private noteAlpha?: number;
 
   apply() {
     this.ctx.save();
@@ -62,6 +62,8 @@ export default class NoteLayer extends BaseLayer {
   }
 
   setColor(note: NoteModel) {
+    if (typeof this.noteAlpha === 'undefined') throw new Error('noteAlpha is not set');
+
     const { alpha, blue, green, red } = note.color;
 
     const r = Math.ceil(red * 255);
@@ -82,7 +84,7 @@ export default class NoteLayer extends BaseLayer {
     this.ctx.textBaseline = note.textBaseline;
   }
 
-  drawBubble(note: NoteModel, { width, height }) {
+  drawBubble(note: NoteModel, { width, height }: { width: number; height: number }) {
     this.ctx.lineWidth = this.courtTypeConstants.COURT_LINE_WIDTH;
     this.ctx.beginPath();
     this.ctx.rect(0, 0, width, height);
@@ -92,7 +94,7 @@ export default class NoteLayer extends BaseLayer {
     }
   }
 
-  drawText(note: NoteModel, lines) {
+  drawText(note: NoteModel, lines: { words: { text: string; width: number }[] }[]) {
     lines.forEach(({ words }, index) => {
       this.ctx.save();
 

package/src/layers/PlayerLayer.ts

@@ -106,14 +106,31 @@ export default class PlayerLayer extends BaseLayer {
       const playerMapItem = this.options.playersMap.find(item => item.position === player.position);
       const headshotImage = this.staticData.playerHeadshots.find(item => item.id === playerMapItem?.teamPlayerId);
       if (headshotImage) {
+        const imageVertical = headshotImage.image.width < headshotImage.image.height;
+        const imageHorizontal = headshotImage.image.height < headshotImage.image.width;
+
+        const imageScale = imageVertical
+          ? headshotImage.image.height / headshotImage.image.width
+          : imageHorizontal
+          ? headshotImage.image.width / headshotImage.image.height
+          : 1;
+
+        const dw =
+          this.radius * 2 * (imageVertical ? headshotImage.image.width / headshotImage.image.height : 1) * imageScale;
+        const dh =
+          this.radius * 2 * (imageHorizontal ? headshotImage.image.height / headshotImage.image.width : 1) * imageScale;
+
+        const topLeftX = 0 - (imageHorizontal ? dw / 2 : this.radius);
+        const topLeftY = 0 - (imageVertical ? dh / 2 : this.radius);
+
         this.ctx.save();
         this.ctx.translate(x, y);
-        if (this.options.flipPlayerLabels === true) {
+        if (this.options.flipPlayerLabels) {
           this.ctx.rotate(Math.PI);
         }
         this.ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
         this.ctx.clip();
-        this.ctx.drawImage(headshotImage.image, 0 - this.radius, 0 - this.radius, this.radius * 2, this.radius * 2);
+        this.ctx.drawImage(headshotImage.image, topLeftX, topLeftY, dw, dh);
         this.ctx.restore();
         return;
       }
@@ -135,7 +152,7 @@ export default class PlayerLayer extends BaseLayer {
     this.ctx.textAlign = 'center';
     this.ctx.font = `${fontSize}px Helvetica`;
 
-    if (this.options.mirror === true) {
+    if (this.options.mirror) {
       this.ctx.save();
       this.ctx.translate(x * 2, 0);
       this.ctx.scale(-1, 1);
@@ -144,7 +161,7 @@ export default class PlayerLayer extends BaseLayer {
     let px = x;
     let py = y;
 
-    if (this.options.flipPlayerLabels === true) {
+    if (this.options.flipPlayerLabels) {
       px = 0;
       py = 0;
       this.ctx.save();
@@ -154,11 +171,11 @@ export default class PlayerLayer extends BaseLayer {
 
     this.ctx.fillText(player.textLabel, px, py + textVerticalOffset);
 
-    if (this.options.flipPlayerLabels === true) {
+    if (this.options.flipPlayerLabels) {
       this.ctx.restore();
     }
 
-    if (this.options.mirror === true) {
+    if (this.options.mirror) {
       this.ctx.restore();
     }
   }

package/src/layers/ShapeLayer.ts

@@ -11,8 +11,8 @@ export default class ShapeLayer extends BaseLayer {
         ? `${_.capitalize(shape.type.replace('LINE.', ''))}Line`
         : _.capitalize(shape.type);
       const layerKey = `${shapeType}ShapeLayer`;
-      if (shapeLayers[layerKey]) {
-        new shapeLayers[layerKey](this, shape).apply();
+      if (shapeLayers[layerKey as keyof typeof shapeLayers]) {
+        new shapeLayers[layerKey as keyof typeof shapeLayers](this, shape).apply();
       }
     });
 

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/ADirtLayer.ts

@@ -11,6 +11,7 @@ import {
   PITCHERS_PLATE_TO_PITCHING_MOUND_CENTER,
   PITCHING_MOUND_DIA
 } from '../constants';
+import { CourtPoint } from '../../../../../../../types';
 
 export default class ADirtLayer extends InternalCourtLayer {
   original() {
@@ -119,6 +120,6 @@ export default class ADirtLayer extends InternalCourtLayer {
   }
 }
 
-function getArcPointForAngle(c, radius, angle) {
+function getArcPointForAngle(c: CourtPoint, radius: number, angle: number) {
   return { x: c.x + Math.cos(angle) * radius, y: c.y + Math.sin(angle) * radius };
 }

package/src/layers/court/layers/BASEBALL/courtTypes/BASEBALL_HIGH_SCHOOL/layers/BaseLineLayer.ts

@@ -56,7 +56,7 @@ export default class BaseLineLayer extends InternalCourtLayer {
     });
   }
 
-  drawBaseSquare(x, y) {
+  drawBaseSquare(x: number, y: number) {
     this.ctx.save();
     this.ctx.lineCap = 'square';
     this.ctx.beginPath();

package/src/layers/court/layers/BASKETBALL/common/LaneMarkingNBATrait.ts

@@ -1,3 +1,15 @@
+import { CourtPoint, CourtTypeConstants } from '../../../../../types';
+
+interface InheritedPropsAndMethods {
+  ctx: CanvasRenderingContext2D;
+  courtTypeConstants: CourtTypeConstants & Record<string, any>;
+  courtCenter: CourtPoint;
+}
+
+interface LineMarkingNBATrait extends InheritedPropsAndMethods {
+  drawLogic: () => void;
+}
+
 const COURT_INNER_MARK_OFFSET = 5;
 
 export default {
@@ -31,4 +43,4 @@ export default {
     this.ctx.lineTo(courtInnerMarkRightX - 0.5, 13.0);
     this.ctx.stroke();
   }
-};
+} as LineMarkingNBATrait;

package/src/layers/court/layers/BASKETBALL/common/LaneMarkingNCAATrait.ts

@@ -1,3 +1,15 @@
+import { CourtPoint, CourtTypeConstants } from '../../../../../types';
+
+interface InheritedPropsAndMethods {
+  ctx: CanvasRenderingContext2D;
+  courtTypeConstants: CourtTypeConstants & Record<string, any>;
+  courtCenter: CourtPoint;
+}
+
+interface LineMarkingNCAATrait extends InheritedPropsAndMethods {
+  drawLogic: () => void;
+}
+
 export default {
   drawLogic() {
     const courtMarkingWidth = 0.667;
@@ -27,4 +39,4 @@ export default {
     this.ctx.fill();
     this.ctx.stroke();
   }
-};
+} as LineMarkingNCAATrait;

package/src/layers/court/layers/BASKETBALL/courtTypes/BIG3/layers/Big3Layer.ts

@@ -36,7 +36,7 @@ export default class Big3Layer extends InternalCourtLayer {
         this.ctx.fill();
       }
 
-      this.ctx.fillStyle = this.options.lineColor;
+      this.ctx.fillStyle = this.options.lineColor!;
       this.ctx.fillText('4', point.x - textHorizontalOffset, point.y + textVerticalOffset);
     });
   }

package/src/layers/court/layers/FOOTBALL/layers/FieldNumberLayer.ts

@@ -9,7 +9,7 @@ export default class FieldNumberLayer extends InternalCourtLayer {
 
     const thinSpaceChar = String.fromCharCode(8202);
 
-    this.ctx.fillStyle = this.options.lineColor;
+    this.ctx.fillStyle = this.options.lineColor!;
     this.ctx.translate(x, y);
 
     for (let i = 1; i < 10; i++) {

package/src/layers/court/layers/LACROSSE/courtTypes/LACROSSE_US_W/layers/FanLineLayer.ts

@@ -1,4 +1,5 @@
 import InternalCourtLayer from '../../../../../base/InternalCourtLayer';
+import { CourtPoint } from '../../../../../../../types';
 
 const ARC_8M_RADIUS = 11.59;
 const ARC_12M_RADIUS = 15.97;
@@ -140,6 +141,6 @@ export default class CenterLineLayer extends InternalCourtLayer {
   }
 }
 
-function getArcPointForAngle(c, radius, angle) {
+function getArcPointForAngle(c: CourtPoint, radius: number, angle: number) {
   return { x: c.x + Math.cos(angle) * radius, y: c.y + Math.sin(angle) * radius };
 }

package/src/layers/line/base/InternalLineLayer.ts

@@ -44,7 +44,7 @@ export default class InternalLineLayer extends InternalBaseLayer {
     this.drawLineCap();
   }
 
-  setColor(alphaOverride = null) {
+  setColor(alphaOverride: number | null = null) {
     let lineForPlayerInPosition = false;
     if (this.options.position) {
       const { playerPositionOrigin, playerPositionTerminus } = this.line.originalData;
@@ -135,8 +135,8 @@ export default class InternalLineLayer extends InternalBaseLayer {
           const [preLastLine] = linesForPlayerPosition;
           if (preLastLine.lineParts.length) {
             const lastLinePart = [...preLastLine.lineParts].pop();
-            const lastLinePartCp = [...lastLinePart.controlPoints].pop();
-            this.startMaskSettings = { centerPoint: lastLinePartCp, radius: 3.0 }; // 1
+            const lastLinePartCp = [...lastLinePart!.controlPoints].pop();
+            this.startMaskSettings = { centerPoint: lastLinePartCp!, radius: 3.0 }; // 1
           }
         }
       }
@@ -146,11 +146,11 @@ export default class InternalLineLayer extends InternalBaseLayer {
       if (this.line.type !== 'SCREEN') {
         let radius = 3.7; // 0.7
         const lastLinePart = [...this.line.getLineParts()].pop();
-        const lastLinePartCp = [...lastLinePart.controlPoints].pop();
+        const lastLinePartCp = [...lastLinePart!.controlPoints].pop();
         if (['PASS', 'HANDOFF'].indexOf(this.line.type) >= 0) {
           radius = 1.75;
         }
-        this.endMaskSettings = { centerPoint: lastLinePartCp, radius: radius };
+        this.endMaskSettings = { centerPoint: lastLinePartCp!, radius: radius };
       }
     }
 

package/src/layers/line/layers/DribbleLineLayer.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { animationProgress } from '../../../helpers/common';
 import ActionLineLayer from '../base/ActionLineLayer';
 import DribbleLineTrait from '../../../traits/DribbleLineTrait';
-import { CourtPoint, LinePart } from '../../../types';
+import { LinePart } from '../../../types';
 import { LinePartAdjusted } from '../../../models/LineModel';
 
 export default class DribbleLineLayer extends ActionLineLayer {
@@ -23,11 +23,11 @@ export default class DribbleLineLayer extends ActionLineLayer {
     dribbleLineParts.forEach(lp => {
       const { controlPoints, lpIndex } = lp;
       const [firstPoint] = controlPoints;
-      let alpha = lineParts[lpIndex].alpha || this.line.color.alpha;
+      let alpha = lineParts[lpIndex!].alpha || this.line.color.alpha;
       if (this.options.animationGlobalProgress) {
-        const [start, end] = this.line.animationKeyTimeChunks[lpIndex];
+        const [start, end] = this.line.animationKeyTimeChunks[lpIndex!];
         if (_.inRange(this.options.animationGlobalProgress, start, end)) {
-          if (animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time) {
+          if (animationProgress(this.options.animationGlobalProgress, start, end) > firstPoint.time!) {
             alpha = 0.1;
           }
         }

package/src/layers/shape/base/InternalShapeLayer.ts

@@ -13,7 +13,7 @@ export default class InternalShapeLayer extends InternalBaseLayer {
   }
 
   get staticData() {
-    return this.options.staticData;
+    return this.options.staticData!;
   }
 
   drawLogic() {

package/src/layers/shape/layers/line/DribbleLineShapeLayer.ts

@@ -19,7 +19,7 @@ export default class DribbleLineShapeLayer extends InternalLineShapeLayer {
   }
 
   getProcessedLinePaths() {
-    return this.convertLinePartsToDribble([this.shape.linePart]);
+    return this.convertLinePartsToDribble([...(this.shape.linePart ? [this.shape.linePart] : [])]);
   }
 }
 

package/src/layers/shape/layers/line/base/InternalLineShapeLayer.ts

@@ -24,7 +24,7 @@ export default class InternalLineShapeLayer extends InternalShapeLayer {
   }
 
   getProcessedLinePaths() {
-    return [this.shape.linePart];
+    return [this.shape.linePart!];
   }
 
   drawShapeLogic() {

package/src/math/Bezier.ts

@@ -8,8 +8,8 @@ export default class Bezier {
   constructor(
     private a: CourtPoint,
     private b: CourtPoint,
-    private c: CourtPoint = null,
-    private d: CourtPoint = null
+    private c: CourtPoint | null = null,
+    private d: CourtPoint | null = null
   ) {
     this.len = 100;
     this.arcLengths = new Array(this.len + 1);
@@ -42,6 +42,7 @@ export default class Bezier {
     if (this.a && this.b && !this.c && !this.d) {
       return this.linearBezierEquation(t, 'x');
     }
+    throw new Error('invalid input params');
   }
 
   y(t: number) {
@@ -54,6 +55,7 @@ export default class Bezier {
     if (this.a && this.b && !this.c && !this.d) {
       return this.linearBezierEquation(t, 'y');
     }
+    throw new Error('invalid input params');
   }
 
   map(u: number) {
@@ -94,15 +96,15 @@ export default class Bezier {
   }
 
   quadraticBezierEquation(t: number, axis: 'x' | 'y') {
-    return (1 - t) * (1 - t) * this.a[axis] + 2 * (1 - t) * t * this.b[axis] + t * t * this.c[axis];
+    return (1 - t) * (1 - t) * this.a[axis] + 2 * (1 - t) * t * this.b[axis] + t * t * this.c![axis];
   }
 
   cubicBezierEquation(t: number, axis: 'x' | 'y') {
     return (
       (1 - t) * (1 - t) * (1 - t) * this.a[axis] +
       3 * ((1 - t) * (1 - t)) * t * this.b[axis] +
-      3 * (1 - t) * (t * t) * this.c[axis] +
-      t * t * t * this.d[axis]
+      3 * (1 - t) * (t * t) * this.c![axis] +
+      t * t * t * this.d![axis]
     );
   }
 }

package/src/math/LineDrawingMath.ts

@@ -5,26 +5,26 @@ const sinusoidNumberOfPoints = 1000;
 
 export function adjustedBezierCurveWithExclusionZones(
   controlPoints: CourtPoint[],
-  startZoneRadius = null,
-  startAnchor = null,
-  endZoneRadius = null,
-  endAnchor = null
+  startZoneRadius: number | null = null,
+  startAnchor: CourtPoint | null = null,
+  endZoneRadius: number | null = null,
+  endAnchor: CourtPoint | null = null
 ) {
   let curve = [...controlPoints];
   if (startZoneRadius && startAnchor) {
     const controlPointsMat = controlPointsMatFromPoints(controlPoints);
     const tVal = firstTValForPointOnCurveOutsideCircle(controlPointsMat, startAnchor, startZoneRadius);
     const splitCurves = splitBezierCurveAtTVal(controlPoints, tVal);
-    curve = [...splitCurves].pop();
+    curve = [...splitCurves!].pop() as CourtPoint[];
   }
 
   if (endZoneRadius && endAnchor) {
-    const reverseControlPoints = [].concat(curve).reverse(); // reverse array without changing the original
+    const reverseControlPoints = ([] as CourtPoint[]).concat(curve).reverse(); // reverse array without changing the original
     const reverseControlPointsMat = controlPointsMatFromPoints(reverseControlPoints);
     const reverseTVal = firstTValForPointOnCurveOutsideCircle(reverseControlPointsMat, endAnchor, endZoneRadius);
     const tVal = 1.0 - reverseTVal;
     const splitCurves = splitBezierCurveAtTVal(curve, tVal);
-    curve = splitCurves[0];
+    curve = splitCurves![0];
   }
   return curve as LinePart['controlPoints'];
 }
@@ -225,7 +225,7 @@ export function splitBezierCurveAtTVal(controlPoints: CourtPoint[], tVal: number
 
 function linearPointAtTVal(controlPoints: CourtPoint[], tVal: number) {
   const [firstControlPoint] = controlPoints;
-  const lastControlPoint = [...controlPoints].pop();
+  const lastControlPoint = [...controlPoints].pop() as CourtPoint;
   const xt = firstControlPoint.x + (lastControlPoint.x - firstControlPoint.x) * tVal;
   const yt = firstControlPoint.y + (lastControlPoint.y - firstControlPoint.y) * tVal;
   return { y: yt, x: xt };
@@ -233,11 +233,11 @@ function linearPointAtTVal(controlPoints: CourtPoint[], tVal: number) {
 
 function splitLinearBezierCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
   // Comment from prev dev:
-  // this could be faster by doing calculations directly.. but who cares
-  const midPoint = linearPointAtTVal(controlPoints, tVal);
+  // this could be faster by doing calculations directly... but who cares
+  const midPoint: CourtPoint = linearPointAtTVal(controlPoints, tVal);
   return [
     [controlPoints[0], midPoint],
-    [midPoint, [...controlPoints].pop()]
+    [midPoint, [...controlPoints].pop() as CourtPoint]
   ];
 }
 
@@ -275,12 +275,12 @@ function splitCubicCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
 function firstTValForPointOnCurveOutsideCircle(controlPointsMat: Matrix, anchorPoint: CourtPoint, radius: number) {
   const [numberOfRows] = controlPointsMat.size();
   const helperMat = helperMatrixForDegree(numberOfRows - 1);
-  const pointsOnCurveMat = multiply(helperMat, controlPointsMat);
+  const pointsOnCurveMat = multiply(helperMat!, controlPointsMat);
   const distances = distancesFromPointToPoints(anchorPoint, pointsOnCurveMat);
 
   // Comment from prev dev:
   // We're assuming that point 0 is the closest to the anchor point... So we could use a binary search here to save a bit of time
-  // Chances are is that the tVal will actually be near the beginning however due to the way the function i used at this time
+  // Chances are is that the tVal will actually be near the beginning however due to the way the function I used at this time
 
   let indexOfPoint = distances.length - 1;
   for (let i = 0; i < distances.length; i++) {
@@ -298,8 +298,8 @@ function distancesFromPointToPoints(anchorPoint: CourtPoint, pointsOnCurveMat: M
   const xPointAdjustFromOrigin = -anchorPoint.x;
   const yPointAdjustFromOrigin = -anchorPoint.y;
 
-  const adjustedXPoints = [];
-  const adjustedYPoints = [];
+  const adjustedXPoints: number[] = [];
+  const adjustedYPoints: number[] = [];
 
   pointsOnCurveMat.forEach((value, [, col]) => {
     switch (col) {

package/src/models/AnimationModel.ts

@@ -12,8 +12,8 @@ export default class AnimationModel {
   private running: boolean;
   private framesLoadTime: number[];
   private timeStart: number | null;
-  private timeElapsed: number;
-  private timeElapsedSaved: number;
+  private timeElapsed: number | null;
+  private timeElapsedSaved: number | null;
 
   constructor(private ctx: CanvasRenderingContext2D, play: PlayModel) {
     this.play = _.cloneDeep(play);
@@ -35,7 +35,7 @@ export default class AnimationModel {
   }
 
   get globalProgress() {
-    return (this.timeElapsed * 100) / (this.animationDuration * 1000) / 100;
+    return ((this.timeElapsed || 0) * 100) / (this.animationDuration * 1000) / 100;
   }
 
   get currentPlayPhase() {
@@ -43,7 +43,7 @@ export default class AnimationModel {
       return _.inRange(this.globalProgress, interval.min, interval.max);
     });
 
-    return parseInt(phaseInterval ? phaseInterval[0] : Object.keys(this.linesPhaseIntervals).pop());
+    return parseInt(phaseInterval ? phaseInterval[0] : Object.keys(this.linesPhaseIntervals).pop()!);
   }
 
   get linesPhaseIntervals(): Record<number, { min: number; max: number }> {
@@ -52,7 +52,7 @@ export default class AnimationModel {
       if (!result[line.phase]) result[line.phase] = { min: 0, max: 0 };
       line.animations.forEach(({ keyTimes }) => {
         const [from] = keyTimes;
-        const to = [...keyTimes].pop();
+        const to = [...keyTimes].pop()!;
         if (from < result[line.phase].min || (!result[line.phase].min && line.phase > 1)) result[line.phase].min = from;
         if (to > result[line.phase].max) result[line.phase].max = to;
       });
@@ -61,9 +61,9 @@ export default class AnimationModel {
   }
 
   get lastLineAnimationMax() {
-    return this.play.playData.lines.reduce((result, line) => {
+    return this.play.playData.lines.reduce<number>((result, line) => {
       const lineModel = new LineModel(line);
-      return result > lineModel.lastAnimEndTime ? result : lineModel.lastAnimEndTime;
+      return result > lineModel.lastAnimEndTime! ? result : lineModel.lastAnimEndTime!;
     }, 0);
   }
 
@@ -78,7 +78,7 @@ export default class AnimationModel {
   }
 
   pause() {
-    cancelAnimationFrame(this.loopId);
+    cancelAnimationFrame(this.loopId!);
     this.running = false;
     this.timeStart = null;
     this.timeElapsedSaved = this.timeElapsed;
@@ -117,7 +117,7 @@ export default class AnimationModel {
     if (this.globalProgress >= this.lastLineAnimationMax) {
       progressCallback(this.lastLineAnimationMax);
       this.reset();
-      cancelAnimationFrame(this.loopId);
+      cancelAnimationFrame(this.loopId!);
       setTimeout(() => {
         finishCallback();
       }, 1000);
@@ -128,10 +128,10 @@ export default class AnimationModel {
 
     if (!this.timeStart) this.timeStart = timestamp;
 
-    const frameTime = timestamp - this.timeStart + this.timeElapsedSaved - this.timeElapsed;
+    const frameTime = timestamp - this.timeStart + (this.timeElapsedSaved || 0) - (this.timeElapsed || 0);
     this.framesLoadTime.push(frameTime);
 
-    this.timeElapsed = timestamp - this.timeStart + this.timeElapsedSaved;
+    this.timeElapsed = timestamp - this.timeStart + (this.timeElapsedSaved || 0);
 
     if (debug) {
       console.log(

package/src/models/Base/InternalFrameModel.ts

@@ -10,11 +10,11 @@ export default class Model<M extends Line | Player | Note | Shape, A extends Lin
   }
 
   _getAttrOriginal<K extends keyof M>(attr: K) {
-    return typeof this.originalData[attr] !== 'undefined' ? this.originalData[attr] : null;
+    return this.originalData[attr];
   }
 
   _getAttr<K extends keyof A>(attr: K) {
-    return typeof this.adjustedData[attr] !== 'undefined' ? this.adjustedData[attr] : null;
+    return this.adjustedData[attr];
   }
 
   _setAttr<K extends keyof A>(attr: K, value: A[K]) {