@luceosports/play-rendering 2.0.2 → 2.0.3

package/src/models/FrameModel.ts

@@ -9,7 +9,7 @@ import ShapeLayer from '../layers/ShapeLayer';
 import NoteLayer from '../layers/NoteLayer';
 import LineControlPointLayer from '../layers/LineControlPointLayer';
 import ShapeControlPointLayer from '../layers/ShapeControlPointLayer';
-import LineModel from './LineModel';
+import LineModel, { LinePartAdjusted } from './LineModel';
 import PlayerModel from './PlayerModel';
 import NoteModel from './NoteModel';
 import * as ShapeModels from './ShapeModels';
@@ -22,7 +22,7 @@ import {
 } from '../constants';
 
 import PlayModel, { PlayModelOptions, PlayStaticData } from './PlayModel';
-import { Court, CourtPoint, SportType } from '../types';
+import { Court, CourtPoint, ShapeType, SportType } from '../types';
 import ShapeModel from './ShapeModel';
 
 export type FrameData = {
@@ -56,11 +56,12 @@ type InferEntityFromObjectType<T> = T extends 'player'
   : LineModel;
 
 export default class FrameModel {
-  private ctx: CanvasRenderingContext2D;
+  private ctx: CanvasRenderingContext2D | null;
   private animationGlobalProgressPrev: number;
 
   constructor(private play: PlayModel, private phase = 1, private animationGlobalProgress = 0) {
     this.animationGlobalProgressPrev = animationGlobalProgress;
+    this.ctx = null;
   }
 
   get sport(): SportType {
@@ -109,9 +110,9 @@ export default class FrameModel {
   }
 
   get playAnimationDuration() {
-    return this.play.playData.lines.reduce((result, l) => {
+    return this.play.playData.lines.reduce<number>((result, l) => {
       const line = new LineModel(l);
-      const lineLastAnimEndTime = line.lastAnimEndTime;
+      const lineLastAnimEndTime = line.lastAnimEndTime!;
       return result > lineLastAnimEndTime ? result : lineLastAnimEndTime;
     }, 0);
   }
@@ -128,10 +129,10 @@ export default class FrameModel {
     if (!this.play.playData.shapes) return [];
     return this.play.playData.shapes
       .filter(s => {
-        return ShapeModels[transformShapeTypeToImportKey(s.type)] !== undefined;
+        return ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels] !== undefined;
       })
       .map(s => {
-        return new ShapeModels[transformShapeTypeToImportKey(s.type)](s);
+        return new ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels](s);
       });
   }
 
@@ -203,7 +204,7 @@ export default class FrameModel {
       if (!player.animations.length) return player;
 
       player.animations.forEach(animation => {
-        const keyTimesChunks = [];
+        const keyTimesChunks: [number, number][] = [];
         animation.keyTimes.forEach((value, index) => {
           if (index) keyTimesChunks.push([animation.keyTimes[index - 1], value]);
         });
@@ -222,8 +223,8 @@ export default class FrameModel {
         });
       });
 
-      if (this.animationGlobalProgress >= player.lastAnimEndTime) {
-        player.location = player.lastAnimationLastLinePartControlPoint;
+      if (this.animationGlobalProgress >= player.lastAnimEndTime!) {
+        player.location = player.lastAnimationLastLinePartControlPoint!;
       }
 
       return player;
@@ -237,10 +238,10 @@ export default class FrameModel {
         const line = new LineModel(l);
 
         line.setAnimationKeyTimesChunked(
-          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)
+          this.play.playData.players.find(p => p.position === line.playerPositionOrigin)!
         );
 
-        const linePartsAdjusted = [];
+        const linePartsAdjusted: LinePartAdjusted[] = [];
         line.animationKeyTimeChunks.forEach(([start, end], index) => {
           if (this.animationGlobalProgressPrev < end && this.animationGlobalProgress >= end) {
             window.dispatchEvent(
@@ -254,7 +255,7 @@ export default class FrameModel {
             const linePathSplitted = splitBezierCurveAtTVal(
               line.getLineParts()[index].controlPoints,
               this.animationProgress(start, end)
-            );
+            ) as LinePartAdjusted['controlPoints'][];
             linePartsAdjusted.push({ controlPoints: linePathSplitted[0], alpha: 0.1 });
             linePartsAdjusted.push({ controlPoints: linePathSplitted[1], alpha: line.color.alpha });
           } else if (this.animationGlobalProgress > end) {
@@ -265,7 +266,7 @@ export default class FrameModel {
         });
         line.setLinePartsAdjusted(linePartsAdjusted);
 
-        if (this.animationGlobalProgress > line.lastAnimEndTime) {
+        if (this.animationGlobalProgress > line.lastAnimEndTime!) {
           line.color = { ...line.color, alpha: 0.1 }; // To adjust line cap opacity
         }
 
@@ -292,7 +293,7 @@ export default class FrameModel {
   }
 
   get prevAnimationLines() {
-    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime);
+    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime!);
   }
 
   draw() {
@@ -319,6 +320,8 @@ export default class FrameModel {
   }
 
   _init() {
+    if (!this.ctx) throw new Error('Canvas context is not provided. Please use setContext() method.');
+
     this.ctx.canvas.width = this.frameWidth;
     this.ctx.canvas.height = this.frameHeight;
 

package/src/models/LineModel.ts

@@ -48,7 +48,7 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
   }
 
   setAnimationKeyTimesChunked(linePlayer: Player) {
-    let keyTimesChunks = [];
+    let keyTimesChunks: [number, number][] = [];
     this.animations[0].keyTimes.forEach((value, index) => {
       if (index) keyTimesChunks.push([this.animations[0].keyTimes[index - 1], value]);
     });
@@ -142,6 +142,6 @@ export default class LineModel extends Model<LineData, LineAdjusted> {
   }
 
   get lastLinePartControlPoint() {
-    return [...[...this.lineParts].pop().controlPoints].pop();
+    return [...[...this.lineParts].pop()!.controlPoints].pop()!;
   }
 }

package/src/models/NoteModel.ts

@@ -1,5 +1,5 @@
 import Model from './Base/InternalFrameModel';
-import { Note as NoteData } from '../types';
+import { CourtPoint, Note as NoteData } from '../types';
 
 const NOTE_GREY_COLOR = { red: 0.502, green: 0.502, blue: 0.502, alpha: 0.35 };
 
@@ -84,9 +84,9 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return 'top';
   }
 
-  get internalCtx() {
+  get internalCtx(): CanvasRenderingContext2D {
     // used only for measureText feature to get a text width
-    return this.internalCanvas.getContext('2d');
+    return this.internalCanvas.getContext('2d')!;
   }
 
   preProcessedTextForContext() {
@@ -108,13 +108,13 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     const fitWidth = NoteModel.NOTE_WRAP_MAX_WIDTH - NoteModel.NOTE_WRAP_PADDING * 2;
 
     const lines = [];
-    const words = this.text.split(' ').reduce((result, word) => {
+    const words = this.text.split(' ').reduce<string[]>((result, word) => {
       if (!word.match(/\n/)) {
         result.push(word);
         return result;
       }
 
-      const nlSegments = [];
+      const nlSegments: string[] = [];
       let curSeg = '';
       for (let i = 0; i < word.length; i++) {
         const char = word[i];
@@ -164,7 +164,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   _getLineInfo(inputWords: string[]) {
     let lineWidth = 0;
     let hasLineBreak = false;
-    const wordsResult = [];
+    const wordsResult: { text: string; width: number }[] = [];
     inputWords.forEach((w, i) => {
       if (w === '\n') {
         hasLineBreak = true;
@@ -186,7 +186,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return { words: wordsResult, width: lineWidth, hasLineBreak };
   }
 
-  noteWrapperContains({ x, y }) {
+  noteWrapperContains({ x, y }: CourtPoint) {
     const { box } = this.preProcessedTextForContext();
 
     const topLeft = this.location;

package/src/models/PlayModel.ts

@@ -58,7 +58,7 @@ export type PlayModelOptions = {
   linesSelectedIds: string[];
   shapeSelectedId: string | null;
   noteSelectedId: string | null;
-  playersHiddenPositions?: string[];
+  playersHiddenPositions: string[];
   background: string;
   watermark: string | null;
   mirror: boolean;
@@ -83,13 +83,13 @@ export default class PlayModel {
   public static playerHeadshots: PlayerHeadshotItem[] = [];
   public static playerHats: readonly ImageConfigItem[];
   public static shapes: readonly ImageConfigItem[];
-  public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement };
+  public static watermark: { LuceoSports: HTMLImageElement; TeamLogo: HTMLImageElement | null };
   public static backgroundOptions: Record<SportType, HTMLImageElement> & { Hardwood: HTMLImageElement };
 
   constructor(data: PlayConstructData, options?: Partial<PlayModelOptions>) {
     this.name = data.name;
     this.options = useDefaults(options);
-    this.setPlayData(data.playData);
+    this.playData = data.playData;
   }
 
   static async init({ teamLogoPath = '' } = {}) {

package/src/models/PlayerModel.ts

@@ -64,7 +64,7 @@ export default class PlayerModel extends Model<PlayerData, PlayerData> {
   }
 
   get lastAnimationLastLinePartControlPoint() {
-    return [...[...this.lastAnimation.lineParts].pop().controlPoints].pop();
+    return [...[...this.lastAnimation!.lineParts].pop()!.controlPoints].pop();
   }
 
   setPossession(prevPassLines: Line[]) {

package/src/models/ShapeModel.ts

@@ -8,7 +8,7 @@ const WRAP_POINT_TOP_RIGHT_INDEX = 1;
 const WRAP_POINT_BOT_RIGHT_INDEX = 2;
 const WRAP_POINT_BOT_LEFT_INDEX = 3;
 
-export default class ShapeModel extends Model<ShapeData, ShapeData> {
+export default abstract class ShapeModel extends Model<ShapeData, ShapeData> {
   get id() {
     return this._getAttr('id');
   }
@@ -76,10 +76,7 @@ export default class ShapeModel extends Model<ShapeData, ShapeData> {
     return +(aDistance * bDistance).toFixed(2);
   }
 
-  get shapeControlPoints() {
-    // Override this function in a subclass if needed
-    return [];
-  }
+  abstract get shapeControlPoints(): CourtPoint[];
 
   rectWrapperContains(point: CourtPoint) {
     // https://stackoverflow.com/questions/17136084/checking-if-a-point-is-inside-a-rotated-rectangle
@@ -102,7 +99,7 @@ export default class ShapeModel extends Model<ShapeData, ShapeData> {
     return trianglesAreaSum <= this.rectWrapAreaTranslated;
   }
 
-  computeCenterForRect([topLeft, topRight, botRight, botLeft]) {
+  computeCenterForRect([topLeft, topRight, botRight, botLeft]: [CourtPoint, CourtPoint, CourtPoint, CourtPoint]) {
     return {
       x: (topLeft.x + botRight.x) / 2,
       y: (topRight.y + botLeft.y) / 2

package/src/models/ShapeModels/CircleShape.ts

@@ -12,4 +12,8 @@ export default class CircleShape extends ShapeModel {
     const botLeft = { x: -this.outerCircleRadius, y: this.outerCircleRadius };
     return [topLeft, topRight, botRight, botLeft];
   }
+
+  get shapeControlPoints() {
+    return [];
+  }
 }

package/src/models/ShapeModels/LineShape.ts

@@ -1,18 +1,23 @@
 import ShapeModel from '../ShapeModel';
 import { rotatePoint } from '../../helpers/common';
 import { bezierBoundingBox } from '../../math/LineDrawingMath';
+import { CourtPoint } from '../../types';
 
 export default class LineShape extends ShapeModel {
   get rectWrapPointsPure() {
-    const { controlPoints } = this.linePart;
+    const { controlPoints } = this.linePart!;
     return bezierBoundingBox(controlPoints);
   }
 
   get controlPointsTranslated() {
-    return this.linePart.controlPoints.map(point => {
+    return this.linePart!.controlPoints.map(point => {
       const scaled = { x: point.x * this.scale.x, y: point.y * this.scale.y };
       const rotated = rotatePoint(scaled.x, scaled.y, 0, 0, this.angle);
       return { x: rotated.x + this.location.x, y: rotated.y + this.location.y };
     });
   }
+
+  get shapeControlPoints() {
+    return [];
+  }
 }

package/src/traits/DribbleLineTrait.ts

@@ -1,7 +1,22 @@
 import Bezier from '../math/Bezier';
-import { LinePart } from '../types';
+import { CourtPoint, LinePart } from '../types';
 import { CourtPointAdjusted, LinePartAdjusted } from '../models/LineModel';
 
+interface InheritedPropsAndMethods {}
+
+interface DribbleLineTrait extends InheritedPropsAndMethods {
+  convertLinePartsToDribble: (lineParts: LinePart[]) => LinePartAdjusted[];
+  drawArrowLineCap: () => void;
+  drawPerpendicularLineCap: () => void;
+  drawPerpendicularLineAtCourtPoint: (point: CourtPoint, angle: number) => void;
+  handOffLineCap: (baseLineParts: LinePart[]) => void;
+  calcMidPoint: (point1: CourtPoint, point2: CourtPoint) => CourtPoint;
+  angleBetweenLastTwoPoints: () => number;
+  angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
+  arrowTipPoint: () => CourtPoint;
+  setLineOptions: () => void;
+}
+
 export default {
   convertLinePartsToDribble(lineParts: LinePart[]): LinePartAdjusted[] {
     const processedLineParts: LinePartAdjusted[] = [];
@@ -56,4 +71,4 @@ export default {
 
     return processedLineParts;
   }
-};
+} as DribbleLineTrait;

package/src/traits/LineDrawOperationsTrait.ts

@@ -1,5 +1,27 @@
 import { CourtPoint, LinePart } from '../types';
-import { LinePartAdjusted } from '../models/LineModel';
+import LineModel, { LinePartAdjusted } from '../models/LineModel';
+import ShapeModel from '../models/ShapeModel';
+
+interface InheritedPropsAndMethods {
+  ctx: CanvasRenderingContext2D;
+  getProcessedLinePaths: () => LinePartAdjusted[];
+  setColor: (alpha?: number) => void;
+  line?: LineModel;
+  shape?: ShapeModel;
+}
+
+interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
+  drawLineFromControlPoints: () => void;
+  drawArrowLineCap: () => void;
+  drawPerpendicularLineCap: () => void;
+  drawPerpendicularLineAtCourtPoint: (point: CourtPoint, angle: number) => void;
+  handOffLineCap: (baseLineParts: LinePart[]) => void;
+  calcMidPoint: (point1: CourtPoint, point2: CourtPoint) => CourtPoint;
+  angleBetweenLastTwoPoints: () => number;
+  angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
+  arrowTipPoint: () => CourtPoint;
+  setLineOptions: () => void;
+}
 
 export default {
   drawLineFromControlPoints() {
@@ -9,7 +31,7 @@ export default {
 
     this.ctx.lineJoin = 'round';
 
-    (this.getProcessedLinePaths() as LinePartAdjusted[]).forEach(linePart => {
+    this.getProcessedLinePaths().forEach(linePart => {
       this.ctx.save();
 
       if (linePart.alpha) {
@@ -23,7 +45,7 @@ export default {
 
       if (cp.length === 2) {
         // TODO refactor next line to avoid access to line/shape model
-        if ((this.line || this.shape).type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
+        if ((this.line || this.shape || {}).type === 'DRIBBLE') this.ctx.lineCap = 'round'; // fix last straight line cap segment
         this.ctx.lineTo(cp[1].x, cp[1].y);
       }
       if (cp.length === 3) {
@@ -41,7 +63,9 @@ export default {
     this.ctx.restore();
   },
 
-  drawArrowLineCap(arrowTipPoint: CourtPoint = this.arrowTipPoint()) {
+  drawArrowLineCap(point?: CourtPoint) {
+    const arrowTipPoint = point || this.arrowTipPoint();
+
     this.ctx.save();
 
     const arrowTipLength = 1.4;
@@ -135,7 +159,7 @@ export default {
 
   angleBetweenLastTwoPoints() {
     const lastLinePart = [...this.getProcessedLinePaths()].pop();
-    const cp = lastLinePart.controlPoints;
+    const cp = lastLinePart!.controlPoints;
 
     const cpTo = cp[cp.length - 1];
     const cpFrom = cp[cp.length - 2];
@@ -150,7 +174,7 @@ export default {
   },
 
   arrowTipPoint() {
-    const lastLinePart: LinePart = [...this.getProcessedLinePaths()].pop();
+    const lastLinePart = [...this.getProcessedLinePaths()].pop() as LinePartAdjusted;
     const cp = lastLinePart.controlPoints;
     return cp[cp.length - 1];
   },
@@ -158,4 +182,4 @@ export default {
   setLineOptions() {
     // Override this method in a subclass
   }
-};
+} as LineDrawOperationsTrait;

package/tsconfig.json

@@ -14,7 +14,8 @@
     ],
     "target": "es2015",
     "moduleResolution": "node",
-    "strictNullChecks": false // TODO make everything strict
+    "strictNullChecks": true,
+    "strict": true,
   },
   "exclude": [
     "node_modules"