@luceosports/play-rendering 2.6.1 → 2.6.2

package/src/models/FrameModel.ts

@@ -1,536 +1,570 @@
-import _ from 'lodash';
-import Bezier from '../math/Bezier';
-import { animationProgress, transformShapeTypeToImportKey } from '../helpers/common';
-import { distanceBetweenPoints, splitBezierCurveAtTVal } from '../math/LineDrawingMath';
-import CourtLayer from '../layers/CourtLayer';
-import LineLayer from '../layers/LineLayer';
-import PlayerLayer from '../layers/PlayerLayer';
-import ShapeLayer from '../layers/ShapeLayer';
-import NoteLayer from '../layers/NoteLayer';
-import LineControlPointLayer from '../layers/LineControlPointLayer';
-import ShapeControlPointLayer from '../layers/ShapeControlPointLayer';
-import LineModel, { LinePartAdjusted } from './LineModel';
-import PlayerModel from './PlayerModel';
-import NoteModel from './NoteModel';
-import * as ShapeModels from './ShapeModels';
-
-import {
-  COURT_TYPE_FOOTBALL_HIGH_SCHOOL,
-  COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY,
-  SPORT_TYPE_BASKETBALL,
-  SPORT_TYPE_FOOTBALL
-} from '../constants';
-
-import PlayModel, { PlayModelOptions, PlayStaticData } from './PlayModel';
-import { AnimationMode, Court, CourtPoint, SportType } from '../types';
-import ShapeModel from './ShapeModel';
-import { getEffectiveTimeline, getLineAnimationChunks, getTimelineKey, keyTimesToChunks } from '../helpers/animation';
-
-export type FrameData = {
-  sport: SportType;
-  court: Court;
-  lines: LineModel[];
-  players: PlayerModel[];
-  shapes: ShapeModel[];
-  notes: NoteModel[];
-};
-
-export type FrameDataOptions = PlayModelOptions & {
-  staticData: PlayStaticData;
-  scale: number;
-  animationGlobalProgress: number;
-  playAnimationDuration: number;
-};
-
-type ClosestObjectDistance<T extends PlayerModel | ShapeModel | NoteModel | LineModel> = {
-  object: T;
-  objectPoint: CourtPoint;
-  distance: number;
-};
-
-type InferEntityFromObjectType<T> = T extends 'player'
-  ? PlayerModel
-  : T extends 'note'
-  ? NoteModel
-  : T extends 'shape'
-  ? ShapeModel
-  : LineModel;
-
-export default class FrameModel {
-  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 {
-    const { court, sport } = this.play.playData;
-    if (sport) return sport;
-    return [COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY, COURT_TYPE_FOOTBALL_HIGH_SCHOOL].includes(court.type)
-      ? SPORT_TYPE_FOOTBALL
-      : SPORT_TYPE_BASKETBALL;
-  }
-
-  get court(): Court {
-    const { court } = this.play.playData;
-    return {
-      ...court,
-      type: court.type === COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY ? COURT_TYPE_FOOTBALL_HIGH_SCHOOL : court.type
-    };
-  }
-
-  get frameWidth() {
-    return this.play.width;
-  }
-
-  get frameHeight() {
-    return this.play.height;
-  }
-
-  get frameData() {
-    return {
-      sport: this.sport,
-      court: this.court,
-      lines: this.lines,
-      players: this.players,
-      shapes: this.shapes,
-      notes: this.notes
-    };
-  }
-
-  get frameDataOptions(): FrameDataOptions {
-    return {
-      ...this.play.options,
-      staticData: this.play.staticData,
-      scale: this.play.scale,
-      animationGlobalProgress: this.animationGlobalProgress,
-      playAnimationDuration: this.playAnimationDuration
-    };
-  }
-
-  get playAnimationDuration() {
-    const mode = this.play.options.animationMode;
-    return this.play.playData.lines.reduce<number>((result, l) => {
-      const line = new LineModel(l);
-      const lineLastAnimEndTime = line.lastAnimEndTime(mode)!;
-      return result > lineLastAnimEndTime ? result : lineLastAnimEndTime;
-    }, 0);
-  }
-
-  get lines() {
-    return this.animationGlobalProgress ? this.animationProgressLines : this.currentPhaseLines;
-  }
-
-  get players() {
-    return this.animationGlobalProgress ? this.animationProgressPlayers : this.currentPhasePlayers;
-  }
-
-  get shapes(): ShapeModel[] {
-    if (!this.play.playData.shapes) return [];
-    return this.play.playData.shapes
-      .filter(s => {
-        return ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels] !== undefined;
-      })
-      .map(s => {
-        return new ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels](s);
-      });
-  }
-
-  get notes(): NoteModel[] {
-    if (!this.play.playData.notes) return [];
-    return this.play.playData.notes
-      .filter(n => {
-        return !n.displayModes || (n.displayModes as string[]).includes('onCourt');
-      })
-      .map(n => {
-        return new NoteModel(n);
-      });
-  }
-
-  get currentPhasePlayers() {
-    const { currentPhaseLines } = this;
-    const { huddleMode, magnetMode, animationMode } = this.play.options;
-
-    const lines = huddleMode || magnetMode ? this.playDataLines : this.prevPhaseLines;
-
-    const passLines = lines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
-
-    return this.play.playData.players.map(p => {
-      const player = new PlayerModel(p);
-      player.setPossession(passLines);
-
-      const playerPrevLines = lines
-        .filter(l => {
-          if (!huddleMode) return true;
-          if (this.phase < l.phase) return false;
-          return !currentPhaseLines.find(item => item.id === l.id); // exclude last 2 lines in huddle mode
-        })
-        .filter(l => l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position);
-
-      const playerCurrentPhaseLines = currentPhaseLines.filter(
-        l => magnetMode && l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position
-      );
-
-      const playerLines = playerCurrentPhaseLines.length ? playerCurrentPhaseLines : playerPrevLines;
-      if (playerLines.length) {
-        const maxLine = _.maxBy(playerLines, l => l.lastAnimEndTime(animationMode));
-        if (maxLine) {
-          const lastPoint = maxLine.lastLinePartControlPoint;
-          if (lastPoint) {
-            player.location = lastPoint;
-          }
-        }
-      }
-      return player;
-    });
-  }
-
-  get currentPhaseLines() {
-    let lines = this.play.playData.lines.filter(l => l.phase === this.phase);
-    if (this.play.options.huddleMode) {
-      lines = _.takeRight(lines, 2);
-    }
-    return lines.map(l => {
-      return new LineModel(l);
-    });
-  }
-
-  get animationProgressPlayers() {
-    const passLines = this.prevAnimationLines.filter(l => ['PASS', 'HANDOFF', 'SHOT'].includes(l.type));
-    const { animationMode } = this.play.options;
-
-    // TODO MAYBE WE WILL SUSPEND PLAYER ANIMATIONS COMPLETELY AND RELY ONLY ON LINE ANIMATIONS TO HAVE SINGE SOURCE OF TRUTH
-
-    return this.play.playData.players.map(p => {
-      const player = new PlayerModel(p);
-      player.setPossession(passLines);
-
-      if (!player.animations.length) return player;
-
-      const timeline = getTimelineKey(animationMode);
-
-      player.animations.forEach(animation => {
-        const keyTimes = getEffectiveTimeline(animation, timeline);
-        const keyTimesChunks = keyTimesToChunks(keyTimes);
-
-        keyTimesChunks.forEach(([start, end], index) => {
-          if (_.inRange(this.animationGlobalProgress, start, end)) {
-            const animProgress = this.animationProgress(start, end);
-            const bezier = new Bezier(
-              ...(animation.lineParts[index].controlPoints as ConstructorParameters<typeof Bezier>)
-            );
-            player.location = {
-              x: bezier.x(animProgress),
-              y: bezier.y(animProgress)
-            };
-          }
-        });
-      });
-
-      if (this.animationGlobalProgress >= player.lastAnimEndTime(animationMode)!) {
-        player.location = player.lastAnimationLastLinePartControlPoint!;
-      }
-
-      return player;
-    });
-  }
-
-  get animationProgressLines() {
-    const { linesDisplayOnMoveOnly, animationMode } = this.play.options;
-
-    return this.play.playData.lines
-      .map(l => {
-        const line = new LineModel(l);
-
-        const chunks = getLineAnimationChunks({
-          mode: animationMode,
-          line: l,
-          players: this.play.playData.players
-        });
-
-        const linePartsAdjusted: LinePartAdjusted[] = [];
-        chunks.forEach(([start, end], index) => {
-          if (this.animationGlobalProgressPrev < end && this.animationGlobalProgress >= end) {
-            window.dispatchEvent(
-              new CustomEvent('@luceosports/play-rendering:lineAnimationFinished', { detail: { id: line.id } })
-            );
-          }
-
-          if (_.inRange(this.animationGlobalProgress, start, end)) {
-            if (line.type === 'DRIBBLE') {
-              return linePartsAdjusted.push({ ...line.getLineParts()[index] });
-            }
-
-            const linePathSplitted = splitBezierCurveAtTVal(
-              line.getLineParts()[index].controlPoints,
-              this.animationProgress(start, end)
-            ) as LinePartAdjusted['controlPoints'][];
-
-            linePartsAdjusted.push({
-              controlPoints: linePathSplitted[0],
-              animationSegment: 'processed'
-            });
-
-            linePartsAdjusted.push({
-              controlPoints: linePathSplitted[1],
-              animationSegment: 'active'
-            });
-          } else if (this.animationGlobalProgress > end) {
-            linePartsAdjusted.push({
-              ...line.getLineParts()[index],
-              animationSegment: 'processed'
-            });
-          } else {
-            linePartsAdjusted.push({ ...line.getLineParts()[index] });
-          }
-        });
-
-        line.setLinePartsAdjusted(linePartsAdjusted);
-
-        if (this.animationGlobalProgress > line.lastAnimEndTime(animationMode)!) {
-          line.color = { ...line.color, alpha: 0.1 }; // To adjust line cap opacity
-        }
-
-        return line;
-      })
-      .filter(l => {
-        const [firstAnimation] = l.animations;
-        const keyTimes =
-          animationMode === AnimationMode.SEQUENTIAL
-            ? firstAnimation.keyTimesSeq || firstAnimation.keyTimes
-            : firstAnimation.keyTimes;
-
-        const [start] = keyTimes;
-        const [end] = [...keyTimes].reverse();
-
-        const lineOnMove = _.inRange(this.animationGlobalProgress, start, end);
-        if (linesDisplayOnMoveOnly) return lineOnMove;
-        return lineOnMove || this.animationGlobalProgress > end || l.phase === this.phase;
-      });
-  }
-
-  get playDataLines() {
-    return this.play.playData.lines.map(l => {
-      return new LineModel(l);
-    });
-  }
-
-  get prevPhaseLines() {
-    return this.playDataLines.filter(l => l.phase < this.phase);
-  }
-
-  get prevAnimationLines() {
-    const mode = this.play.options.animationMode;
-    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime(mode)!);
-  }
-
-  draw() {
-    if (!this.ctx) throw new Error('Canvas context is not provided. Please use setContext() method.');
-
-    // console.time('draw');
-
-    this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);
-
-    this._init();
-
-    const { frameData, frameDataOptions } = this;
-    new CourtLayer(this.ctx, frameData, frameDataOptions).apply();
-    new ShapeLayer(this.ctx, frameData, frameDataOptions).apply();
-    new LineLayer(this.ctx, frameData, frameDataOptions).apply();
-    new PlayerLayer(this.ctx, frameData, frameDataOptions).apply();
-    new LineControlPointLayer(this.ctx, frameData, frameDataOptions).apply();
-    new ShapeControlPointLayer(this.ctx, frameData, frameDataOptions).apply();
-    new NoteLayer(this.ctx, frameData, frameDataOptions).apply();
-
-    // console.timeEnd('draw');
-
-    return this;
-  }
-
-  _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;
-
-    this.ctx.scale(this.play.scale, this.play.scale);
-    this.ctx.translate(-this.court.courtRect.origin.x, -this.court.courtRect.origin.y);
-    if (this.play.options.mirror) {
-      this.ctx.scale(-1, 1);
-      this.ctx.translate(Math.abs(this.court.courtRect.origin.x) * 2 - this.court.courtRect.size.width, 0);
-    }
-  }
-
-  setContext(ctx: CanvasRenderingContext2D) {
-    this.ctx = ctx;
-    return this;
-  }
-
-  setPhase(newPhase: number) {
-    this.phase = newPhase;
-    return this;
-  }
-
-  setAnimationGlobalProgress(newProgress: number) {
-    this.animationGlobalProgressPrev = this.animationGlobalProgress;
-    this.animationGlobalProgress = newProgress;
-    return this;
-  }
-
-  animationProgress(start: number, end: number) {
-    return animationProgress(this.animationGlobalProgress, start, end);
-  }
-
-  closestObjectToPoint<T extends 'player' | 'shape' | 'note' | 'line' | 'lineVertex'>(
-    viewPoint: CourtPoint,
-    objectType: T,
-    needConversion = true,
-    filterCallback?: (subject: InferEntityFromObjectType<T>) => boolean
-  ): ClosestObjectDistance<InferEntityFromObjectType<T>> | null {
-    const courtPoint = needConversion ? this.convertViewPointToCourtPoint(viewPoint) : viewPoint;
-    if (objectType === 'player') {
-      return this.closestPlayerToPoint(
-        courtPoint,
-        filterCallback as (subject: PlayerModel) => boolean
-      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
-    }
-    if (objectType === 'shape') {
-      return this.closestShapeToPoint(courtPoint) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
-    }
-    if (objectType === 'note') {
-      return this.closestNoteToPoint(courtPoint) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
-    }
-    if (objectType === 'line') {
-      return this.closestLineToPoint(
-        courtPoint,
-        filterCallback as (subject: LineModel) => boolean
-      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
-    }
-    if (objectType === 'lineVertex') {
-      return this.closestLineVertexToPoint(
-        courtPoint,
-        filterCallback as (subject: LineModel) => boolean
-      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
-    }
-    return null;
-  }
-
-  closestLineToPoint(courtPoint: CourtPoint, filterCallback?: (subject: LineModel) => boolean) {
-    const lineDistances = this.lines
-      .filter(item => {
-        return filterCallback ? filterCallback(item) : true;
-      })
-      .reduce<ClosestObjectDistance<LineModel>[]>((result, item) => {
-        item.lineParts.forEach(linePart => {
-          const bezier = new Bezier(...(linePart.controlPoints as ConstructorParameters<typeof Bezier>));
-          for (let i = 1; i <= 100; i++) {
-            const tVal = i / 100;
-            const pointAtTVal = this.prepareCourtPoint({
-              x: bezier.x(tVal),
-              y: bezier.y(tVal)
-            });
-            result.push({
-              object: item,
-              objectPoint: pointAtTVal,
-              distance: distanceBetweenPoints(pointAtTVal, courtPoint)
-            });
-          }
-        });
-        return result;
-      }, []);
-
-    return _.minBy(lineDistances, 'distance');
-  }
-
-  closestLineVertexToPoint(courtPoint: CourtPoint, filterCallback?: (subject: LineModel) => boolean) {
-    const lineVertexDistances = this.lines
-      .filter(item => {
-        return filterCallback ? filterCallback(item) : true;
-      })
-      .reduce<ClosestObjectDistance<LineModel>[]>((result, item) => {
-        if (!item.id.length) return result;
-
-        const firstVertex = this.prepareCourtPoint(item.firstLinePartControlPoint);
-        const lastVertex = this.prepareCourtPoint(item.lastLinePartControlPoint);
-        result.push({
-          object: item,
-          objectPoint: firstVertex,
-          distance: distanceBetweenPoints(firstVertex, courtPoint)
-        });
-        result.push({
-          object: item,
-          objectPoint: lastVertex,
-          distance: distanceBetweenPoints(lastVertex, courtPoint)
-        });
-        return result;
-      }, []);
-    return _.minBy(lineVertexDistances, 'distance');
-  }
-
-  closestPlayerToPoint(courtPoint: CourtPoint, filterCallback?: (subject: PlayerModel) => boolean) {
-    const playerDistances = this.players
-      .filter(item => {
-        return filterCallback ? filterCallback(item) : true;
-      })
-      .reduce<ClosestObjectDistance<PlayerModel>[]>((result, item) => {
-        const playerLocation = this.prepareCourtPoint(item.location);
-        result.push({
-          object: item,
-          objectPoint: playerLocation,
-          distance: distanceBetweenPoints(playerLocation, courtPoint)
-        });
-        return result;
-      }, []);
-    return _.minBy(playerDistances, 'distance');
-  }
-
-  closestShapeToPoint(courtPoint: CourtPoint) {
-    const shapeDistances = this.shapes
-      .filter(shape => shape.rectWrapperContains(courtPoint))
-      .reduce<ClosestObjectDistance<ShapeModel>[]>((result, item) => {
-        const shapeLocation = this.prepareCourtPoint(item.location);
-        result.push({
-          object: item,
-          objectPoint: shapeLocation,
-          distance: distanceBetweenPoints(shapeLocation, courtPoint)
-        });
-        return result;
-      }, []);
-    return _.minBy(shapeDistances, 'distance');
-  }
-
-  closestNoteToPoint(courtPoint: CourtPoint) {
-    const noteDistances = this.notes
-      .filter(note => note.noteWrapperContains(courtPoint))
-      .reduce<ClosestObjectDistance<NoteModel>[]>((result, item) => {
-        const noteLocation = this.prepareCourtPoint(item.location);
-        result.push({
-          object: item,
-          objectPoint: noteLocation,
-          distance: distanceBetweenPoints(noteLocation, courtPoint)
-        });
-        return result;
-      }, []);
-    return noteDistances.length ? _.minBy(noteDistances, 'distance') : null;
-  }
-
-  prepareCourtPoint(courtPoint: CourtPoint) {
-    const { mirror } = this.play.options;
-    const { width } = this.play.playData.court.courtRect.size;
-    const { origin } = this.play.playData.court.courtRect;
-    return {
-      x: mirror ? width + origin.x - (courtPoint.x - origin.x) : courtPoint.x,
-      y: courtPoint.y
-    };
-  }
-
-  convertViewPointToCourtPoint(viewPoint: CourtPoint) {
-    const { x: ox, y: oy } = this.play.playData.court.courtRect.origin;
-    return {
-      x: viewPoint.x / this.play.scale + ox,
-      y: viewPoint.y / this.play.scale + oy
-    };
-  }
-}
+import _ from 'lodash';
+import Bezier from '../math/Bezier';
+import { animationProgress, isBallTransferLineType, transformShapeTypeToImportKey } from '../helpers/common';
+import { distanceBetweenPoints, splitBezierCurveAtTVal } from '../math/LineDrawingMath';
+import CourtLayer from '../layers/CourtLayer';
+import LineLayer from '../layers/LineLayer';
+import PlayerLayer from '../layers/PlayerLayer';
+import ShapeLayer from '../layers/ShapeLayer';
+import NoteLayer from '../layers/NoteLayer';
+import LineControlPointLayer from '../layers/LineControlPointLayer';
+import ShapeControlPointLayer from '../layers/ShapeControlPointLayer';
+import LineModel, { LinePartAdjusted } from './LineModel';
+import PlayerModel from './PlayerModel';
+import NoteModel from './NoteModel';
+import * as ShapeModels from './ShapeModels';
+
+import {
+  COURT_TYPE_FOOTBALL_HIGH_SCHOOL,
+  COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY,
+  SPORT_TYPE_BASKETBALL,
+  SPORT_TYPE_FOOTBALL
+} from '../constants';
+
+import PlayModel, { PlayModelOptions, PlayStaticData } from './PlayModel';
+import { AnimationMode, Court, CourtPoint, SportType } from '../types';
+import ShapeModel from './ShapeModel';
+import { getEffectiveTimeline, getLineAnimationChunks, getTimelineKey, keyTimesToChunks } from '../helpers/animation';
+
+export type FrameData = {
+  sport: SportType;
+  court: Court;
+  lines: LineModel[];
+  players: PlayerModel[];
+  shapes: ShapeModel[];
+  notes: NoteModel[];
+};
+
+export type FrameDataOptions = PlayModelOptions & {
+  staticData: PlayStaticData;
+  scale: number;
+  animationGlobalProgress: number;
+  playAnimationDuration: number;
+};
+
+type ClosestObjectDistance<T extends PlayerModel | ShapeModel | NoteModel | LineModel> = {
+  object: T;
+  objectPoint: CourtPoint;
+  distance: number;
+};
+
+type InferEntityFromObjectType<T> = T extends 'player'
+  ? PlayerModel
+  : T extends 'note'
+  ? NoteModel
+  : T extends 'shape'
+  ? ShapeModel
+  : LineModel;
+
+export default class FrameModel {
+  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 {
+    const { court, sport } = this.play.playData;
+    if (sport) return sport;
+    return [COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY, COURT_TYPE_FOOTBALL_HIGH_SCHOOL].includes(court.type)
+      ? SPORT_TYPE_FOOTBALL
+      : SPORT_TYPE_BASKETBALL;
+  }
+
+  get court(): Court {
+    const { court } = this.play.playData;
+    return {
+      ...court,
+      type: court.type === COURT_TYPE_FOOTBALL_HIGH_SCHOOL_LEGACY ? COURT_TYPE_FOOTBALL_HIGH_SCHOOL : court.type
+    };
+  }
+
+  get frameWidth() {
+    return this.play.width;
+  }
+
+  get frameHeight() {
+    return this.play.height;
+  }
+
+  get frameData() {
+    return {
+      sport: this.sport,
+      court: this.court,
+      lines: this.lines,
+      players: this.players,
+      shapes: this.shapes,
+      notes: this.notes
+    };
+  }
+
+  get frameDataOptions(): FrameDataOptions {
+    return {
+      ...this.play.options,
+      staticData: this.play.staticData,
+      scale: this.play.scale,
+      animationGlobalProgress: this.animationGlobalProgress,
+      playAnimationDuration: this.playAnimationDuration
+    };
+  }
+
+  get playAnimationDuration() {
+    const mode = this.play.options.animationMode;
+    return this.play.playData.lines.reduce<number>((result, l) => {
+      const line = new LineModel(l);
+      const lineLastAnimEndTime = line.lastAnimEndTime(mode)!;
+      return result > lineLastAnimEndTime ? result : lineLastAnimEndTime;
+    }, 0);
+  }
+
+  get lines() {
+    return this.animationGlobalProgress ? this.animationProgressLines : this.currentPhaseLines;
+  }
+
+  get players() {
+    return this.animationGlobalProgress ? this.animationProgressPlayers : this.currentPhasePlayers;
+  }
+
+  get shapes(): ShapeModel[] {
+    if (!this.play.playData.shapes) return [];
+    return this.play.playData.shapes
+      .filter(s => {
+        return ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels] !== undefined;
+      })
+      .map(s => {
+        return new ShapeModels[transformShapeTypeToImportKey(s.type) as keyof typeof ShapeModels](s);
+      });
+  }
+
+  get notes(): NoteModel[] {
+    if (!this.play.playData.notes) return [];
+    return this.play.playData.notes
+      .filter(n => {
+        return !n.displayModes || (n.displayModes as string[]).includes('onCourt');
+      })
+      .map(n => {
+        return new NoteModel(n);
+      });
+  }
+
+  get currentPhasePlayers() {
+    const { currentPhaseLines } = this;
+    const { huddleMode, magnetMode, animationMode } = this.play.options;
+
+    const lines = huddleMode || magnetMode ? this.playDataLines : this.prevPhaseLines;
+
+    const passLines = lines.filter(l => ['PASS', 'HANDOFF'].includes(l.type));
+
+    return this.play.playData.players.map(p => {
+      const player = new PlayerModel(p);
+      player.setPossession(passLines);
+
+      const playerPrevLines = lines
+        .filter(l => {
+          if (!huddleMode) return true;
+          if (this.phase < l.phase) return false;
+          return !currentPhaseLines.find(item => item.id === l.id); // exclude last 2 lines in huddle mode
+        })
+        .filter(l => l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position);
+
+      const playerCurrentPhaseLines = currentPhaseLines.filter(
+        l => magnetMode && l.playerPositionOrigin === player.position && l.playerPositionTerminus === player.position
+      );
+
+      const playerLines = playerCurrentPhaseLines.length ? playerCurrentPhaseLines : playerPrevLines;
+      if (playerLines.length) {
+        const maxLine = _.maxBy(playerLines, l => l.lastAnimEndTime(animationMode));
+        if (maxLine) {
+          const lastPoint = maxLine.lastLinePartControlPoint;
+          if (lastPoint) {
+            player.location = lastPoint;
+          }
+        }
+      }
+      return player;
+    });
+  }
+
+  get currentPhaseLines() {
+    let lines = this.play.playData.lines.filter(l => l.phase === this.phase);
+    if (this.play.options.huddleMode) {
+      lines = _.takeRight(lines, 2);
+    }
+    return lines.map(l => {
+      return new LineModel(l);
+    });
+  }
+
+  get animationProgressPlayers() {
+    const ballTransferLines = this.prevAnimationLines.filter(l => isBallTransferLineType(l.type));
+    const { animationMode } = this.play.options;
+
+    // During playback, rely ONLY on line animations as the single source of truth for player movement.
+    // Player.animations are ignored here as we treat them as legacy data.
+
+    // Only "movement" lines affect player location (origin === terminus === player position).
+    // Ball transfer lines (PASS/HANDOFF/SHOT) are used for possession only.
+    const movementLines = this.play.playData.lines.filter(l => {
+      if (isBallTransferLineType(l.type)) return false;
+      return !!l.playerPositionOrigin && l.playerPositionOrigin === l.playerPositionTerminus;
+    });
+
+    const movementLinesByPlayer = _.groupBy(movementLines, l => l.playerPositionOrigin);
+
+    return this.play.playData.players.map(p => {
+      const player = new PlayerModel(p);
+      player.setPossession(ballTransferLines);
+
+      const playerMovementLines = movementLinesByPlayer[player.position] ?? [];
+      if (!playerMovementLines.length) return player;
+
+      // Find active movement line segment (if any), otherwise fall back to the last completed end point.
+      let activeLocation: CourtPoint | null = null;
+
+      for (const lineData of playerMovementLines) {
+        const chunks = getLineAnimationChunks({
+          mode: animationMode,
+          line: lineData,
+          players: this.play.playData.players
+        });
+
+        if (!chunks.length) continue;
+
+        const lineModel = new LineModel(lineData);
+        const parts = lineModel.getLineParts();
+
+        for (let index = 0; index < chunks.length; index += 1) {
+          const [start, end] = chunks[index];
+          if (!_.inRange(this.animationGlobalProgress, start, end)) continue;
+
+          const part = parts[index];
+          if (!part) continue;
+
+          const t = this.animationProgress(start, end);
+          const bezier = new Bezier(...(part.controlPoints as ConstructorParameters<typeof Bezier>));
+
+          activeLocation = { x: bezier.x(t), y: bezier.y(t) };
+          break;
+        }
+
+        if (activeLocation) break;
+      }
+
+      if (activeLocation) {
+        player.location = activeLocation;
+        return player;
+      }
+
+      // No active segment: put player at the end of the latest movement line that has finished.
+      const finishedMovementLines = playerMovementLines
+        .map(l => new LineModel(l))
+        .filter(lm => this.animationGlobalProgress >= lm.lastAnimEndTime(animationMode)!);
+
+      const lastFinished = _.maxBy(finishedMovementLines, lm => lm.lastAnimEndTime(animationMode)!);
+      if (lastFinished?.lastLinePartControlPoint) {
+        player.location = lastFinished.lastLinePartControlPoint;
+      }
+
+      return player;
+    });
+  }
+
+  get animationProgressLines() {
+    const { linesDisplayOnMoveOnly, animationMode } = this.play.options;
+
+    return this.play.playData.lines
+      .map(l => {
+        const line = new LineModel(l);
+
+        const chunks = getLineAnimationChunks({
+          mode: animationMode,
+          line: l,
+          players: this.play.playData.players
+        });
+
+        const linePartsAdjusted: LinePartAdjusted[] = [];
+        chunks.forEach(([start, end], index) => {
+          if (this.animationGlobalProgressPrev < end && this.animationGlobalProgress >= end) {
+            window.dispatchEvent(
+              new CustomEvent('@luceosports/play-rendering:lineAnimationFinished', { detail: { id: line.id } })
+            );
+          }
+
+          if (_.inRange(this.animationGlobalProgress, start, end)) {
+            if (line.type === 'DRIBBLE') {
+              return linePartsAdjusted.push({ ...line.getLineParts()[index] });
+            }
+
+            const linePathSplitted = splitBezierCurveAtTVal(
+              line.getLineParts()[index].controlPoints,
+              this.animationProgress(start, end)
+            ) as LinePartAdjusted['controlPoints'][];
+
+            linePartsAdjusted.push({
+              controlPoints: linePathSplitted[0],
+              animationSegment: 'processed'
+            });
+
+            linePartsAdjusted.push({
+              controlPoints: linePathSplitted[1],
+              animationSegment: 'active'
+            });
+          } else if (this.animationGlobalProgress > end) {
+            linePartsAdjusted.push({
+              ...line.getLineParts()[index],
+              animationSegment: 'processed'
+            });
+          } else {
+            linePartsAdjusted.push({ ...line.getLineParts()[index] });
+          }
+        });
+
+        line.setLinePartsAdjusted(linePartsAdjusted);
+
+        if (this.animationGlobalProgress > line.lastAnimEndTime(animationMode)!) {
+          line.color = { ...line.color, alpha: 0.1 }; // To adjust line cap opacity
+        }
+
+        return line;
+      })
+      .filter(l => {
+        const [firstAnimation] = l.animations;
+        const keyTimes =
+          animationMode === AnimationMode.SEQUENTIAL
+            ? firstAnimation.keyTimesSeq || firstAnimation.keyTimes
+            : firstAnimation.keyTimes;
+
+        const [start] = keyTimes;
+        const [end] = [...keyTimes].reverse();
+
+        const lineOnMove = _.inRange(this.animationGlobalProgress, start, end);
+        if (linesDisplayOnMoveOnly) return lineOnMove;
+        return lineOnMove || this.animationGlobalProgress > end || l.phase === this.phase;
+      });
+  }
+
+  get playDataLines() {
+    return this.play.playData.lines.map(l => {
+      return new LineModel(l);
+    });
+  }
+
+  get prevPhaseLines() {
+    return this.playDataLines.filter(l => l.phase < this.phase);
+  }
+
+  get prevAnimationLines() {
+    const mode = this.play.options.animationMode;
+    return this.playDataLines.filter(l => this.animationGlobalProgress >= l.lastAnimEndTime(mode)!);
+  }
+
+  draw() {
+    if (!this.ctx) throw new Error('Canvas context is not provided. Please use setContext() method.');
+
+    // console.time('draw');
+
+    this.ctx.clearRect(0, 0, this.frameWidth, this.frameHeight);
+
+    this._init();
+
+    const { frameData, frameDataOptions } = this;
+    new CourtLayer(this.ctx, frameData, frameDataOptions).apply();
+    new ShapeLayer(this.ctx, frameData, frameDataOptions).apply();
+    new LineLayer(this.ctx, frameData, frameDataOptions).apply();
+    new PlayerLayer(this.ctx, frameData, frameDataOptions).apply();
+    new LineControlPointLayer(this.ctx, frameData, frameDataOptions).apply();
+    new ShapeControlPointLayer(this.ctx, frameData, frameDataOptions).apply();
+    new NoteLayer(this.ctx, frameData, frameDataOptions).apply();
+
+    // console.timeEnd('draw');
+
+    return this;
+  }
+
+  _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;
+
+    this.ctx.scale(this.play.scale, this.play.scale);
+    this.ctx.translate(-this.court.courtRect.origin.x, -this.court.courtRect.origin.y);
+    if (this.play.options.mirror) {
+      this.ctx.scale(-1, 1);
+      this.ctx.translate(Math.abs(this.court.courtRect.origin.x) * 2 - this.court.courtRect.size.width, 0);
+    }
+  }
+
+  setContext(ctx: CanvasRenderingContext2D) {
+    this.ctx = ctx;
+    return this;
+  }
+
+  setPhase(newPhase: number) {
+    this.phase = newPhase;
+    return this;
+  }
+
+  setAnimationGlobalProgress(newProgress: number) {
+    this.animationGlobalProgressPrev = this.animationGlobalProgress;
+    this.animationGlobalProgress = newProgress;
+    return this;
+  }
+
+  animationProgress(start: number, end: number) {
+    return animationProgress(this.animationGlobalProgress, start, end);
+  }
+
+  closestObjectToPoint<T extends 'player' | 'shape' | 'note' | 'line' | 'lineVertex'>(
+    viewPoint: CourtPoint,
+    objectType: T,
+    needConversion = true,
+    filterCallback?: (subject: InferEntityFromObjectType<T>) => boolean
+  ): ClosestObjectDistance<InferEntityFromObjectType<T>> | null {
+    const courtPoint = needConversion ? this.convertViewPointToCourtPoint(viewPoint) : viewPoint;
+    if (objectType === 'player') {
+      return this.closestPlayerToPoint(
+        courtPoint,
+        filterCallback as (subject: PlayerModel) => boolean
+      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
+    }
+    if (objectType === 'shape') {
+      return this.closestShapeToPoint(courtPoint) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
+    }
+    if (objectType === 'note') {
+      return this.closestNoteToPoint(courtPoint) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
+    }
+    if (objectType === 'line') {
+      return this.closestLineToPoint(
+        courtPoint,
+        filterCallback as (subject: LineModel) => boolean
+      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
+    }
+    if (objectType === 'lineVertex') {
+      return this.closestLineVertexToPoint(
+        courtPoint,
+        filterCallback as (subject: LineModel) => boolean
+      ) as ClosestObjectDistance<InferEntityFromObjectType<T>>;
+    }
+    return null;
+  }
+
+  closestLineToPoint(courtPoint: CourtPoint, filterCallback?: (subject: LineModel) => boolean) {
+    const lineDistances = this.lines
+      .filter(item => {
+        return filterCallback ? filterCallback(item) : true;
+      })
+      .reduce<ClosestObjectDistance<LineModel>[]>((result, item) => {
+        item.lineParts.forEach(linePart => {
+          const bezier = new Bezier(...(linePart.controlPoints as ConstructorParameters<typeof Bezier>));
+          for (let i = 1; i <= 100; i++) {
+            const tVal = i / 100;
+            const pointAtTVal = this.prepareCourtPoint({
+              x: bezier.x(tVal),
+              y: bezier.y(tVal)
+            });
+            result.push({
+              object: item,
+              objectPoint: pointAtTVal,
+              distance: distanceBetweenPoints(pointAtTVal, courtPoint)
+            });
+          }
+        });
+        return result;
+      }, []);
+
+    return _.minBy(lineDistances, 'distance');
+  }
+
+  closestLineVertexToPoint(courtPoint: CourtPoint, filterCallback?: (subject: LineModel) => boolean) {
+    const lineVertexDistances = this.lines
+      .filter(item => {
+        return filterCallback ? filterCallback(item) : true;
+      })
+      .reduce<ClosestObjectDistance<LineModel>[]>((result, item) => {
+        if (!item.id.length) return result;
+
+        const firstVertex = this.prepareCourtPoint(item.firstLinePartControlPoint);
+        const lastVertex = this.prepareCourtPoint(item.lastLinePartControlPoint);
+        result.push({
+          object: item,
+          objectPoint: firstVertex,
+          distance: distanceBetweenPoints(firstVertex, courtPoint)
+        });
+        result.push({
+          object: item,
+          objectPoint: lastVertex,
+          distance: distanceBetweenPoints(lastVertex, courtPoint)
+        });
+        return result;
+      }, []);
+    return _.minBy(lineVertexDistances, 'distance');
+  }
+
+  closestPlayerToPoint(courtPoint: CourtPoint, filterCallback?: (subject: PlayerModel) => boolean) {
+    const playerDistances = this.players
+      .filter(item => {
+        return filterCallback ? filterCallback(item) : true;
+      })
+      .reduce<ClosestObjectDistance<PlayerModel>[]>((result, item) => {
+        const playerLocation = this.prepareCourtPoint(item.location);
+        result.push({
+          object: item,
+          objectPoint: playerLocation,
+          distance: distanceBetweenPoints(playerLocation, courtPoint)
+        });
+        return result;
+      }, []);
+    return _.minBy(playerDistances, 'distance');
+  }
+
+  closestShapeToPoint(courtPoint: CourtPoint) {
+    const shapeDistances = this.shapes
+      .filter(shape => shape.rectWrapperContains(courtPoint))
+      .reduce<ClosestObjectDistance<ShapeModel>[]>((result, item) => {
+        const shapeLocation = this.prepareCourtPoint(item.location);
+        result.push({
+          object: item,
+          objectPoint: shapeLocation,
+          distance: distanceBetweenPoints(shapeLocation, courtPoint)
+        });
+        return result;
+      }, []);
+    return _.minBy(shapeDistances, 'distance');
+  }
+
+  closestNoteToPoint(courtPoint: CourtPoint) {
+    const noteDistances = this.notes
+      .filter(note => note.noteWrapperContains(courtPoint))
+      .reduce<ClosestObjectDistance<NoteModel>[]>((result, item) => {
+        const noteLocation = this.prepareCourtPoint(item.location);
+        result.push({
+          object: item,
+          objectPoint: noteLocation,
+          distance: distanceBetweenPoints(noteLocation, courtPoint)
+        });
+        return result;
+      }, []);
+    return noteDistances.length ? _.minBy(noteDistances, 'distance') : null;
+  }
+
+  prepareCourtPoint(courtPoint: CourtPoint) {
+    const { mirror } = this.play.options;
+    const { width } = this.play.playData.court.courtRect.size;
+    const { origin } = this.play.playData.court.courtRect;
+    return {
+      x: mirror ? width + origin.x - (courtPoint.x - origin.x) : courtPoint.x,
+      y: courtPoint.y
+    };
+  }
+
+  convertViewPointToCourtPoint(viewPoint: CourtPoint) {
+    const { x: ox, y: oy } = this.play.playData.court.courtRect.origin;
+    return {
+      x: viewPoint.x / this.play.scale + ox,
+      y: viewPoint.y / this.play.scale + oy
+    };
+  }
+}