@luceosports/play-rendering 2.5.5 → 2.5.6

package/src/traits/LineDrawOperationsTrait.ts

@@ -1,6 +1,8 @@
-import { CourtPoint, LinePart } from '../types';
+import { CourtPoint, LinePart, PlayData } from '../types';
 import LineModel, { LinePartAdjusted } from '../models/LineModel';
 import ShapeModel from '../models/ShapeModel';
+import { FrameDataOptions } from '../models/FrameModel';
+import { drawBallObject } from '../helpers/draw';
 
 interface InheritedPropsAndMethods {
   ctx: CanvasRenderingContext2D;
@@ -8,6 +10,13 @@ interface InheritedPropsAndMethods {
   setColor: (alpha?: number) => void;
   line?: LineModel;
   shape?: ShapeModel;
+  // below present on layers using this trait (InternalBaseLayer)
+  options: FrameDataOptions;
+  playData: PlayData;
+  courtTypeConstants?: {
+    PLAYER_TOKEN_SCALE: number;
+    PLAYER_TOKEN_RADIUS: number;
+  };
 }
 
 interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
@@ -21,9 +30,44 @@ interface LineDrawOperationsTrait extends InheritedPropsAndMethods {
   angleBetweenTwoPoints: (cpFrom: CourtPoint, cpTo: CourtPoint) => number;
   arrowTipPoint: () => CourtPoint;
   setLineOptions: () => void;
+  maybeDrawBallAtStartPoint: (params: {
+    linePart: Pick<LinePartAdjusted, 'animationSegment'>;
+    controlPoints: CourtPoint[];
+    alreadyDrawn: boolean;
+  }) => boolean;
 }
 
 export default {
+  maybeDrawBallAtStartPoint(params: {
+    linePart: Pick<LinePartAdjusted, 'animationSegment'>;
+    controlPoints: CourtPoint[];
+    alreadyDrawn: boolean;
+  }): boolean {
+    const { linePart, controlPoints, alreadyDrawn } = params;
+
+    if (!this.options?.showBallMode) return alreadyDrawn;
+    if (alreadyDrawn) return true;
+    if (linePart.animationSegment !== 'active') return false;
+    if (!this.line?.isBallTransferLine) return false;
+
+    const startPoint = controlPoints[0];
+    if (!startPoint || !this.courtTypeConstants) return false;
+
+    const playerScale = this.courtTypeConstants.PLAYER_TOKEN_SCALE * (this.options?.playerTokenScale ?? 1);
+    const puckRadiusBase = this.courtTypeConstants.PLAYER_TOKEN_RADIUS * playerScale;
+    const radiusMultiplier = this.options?.legacyPrintStyle ? 1.2 : 1;
+    const puckRadius = radiusMultiplier * puckRadiusBase;
+
+    return drawBallObject({
+      sport: this.playData.sport,
+      ctx: this.ctx,
+      staticData: this.options?.staticData,
+      center: { x: startPoint.x, y: startPoint.y },
+      puckRadius,
+      placement: 'center'
+    });
+  },
+
   drawLineFromControlPoints() {
     this.ctx.save();
 
@@ -31,11 +75,13 @@ export default {
 
     this.ctx.lineJoin = 'round';
 
+    let isBallDrawn = false;
+
     this.getProcessedLinePaths().forEach(linePart => {
       this.ctx.save();
 
-      if (linePart.alpha) {
-        this.setColor(linePart.alpha); // setting color for each line path (animation)
+      if (linePart.animationSegment === 'processed') {
+        this.setColor(0.1); // processed segment (before animation progress)
       }
 
       this.ctx.beginPath();
@@ -57,6 +103,15 @@ export default {
 
       this.ctx.stroke();
 
+      // Draw the ball AFTER the stroke so it overlaps the line.
+      if (!isBallDrawn) {
+        isBallDrawn = this.maybeDrawBallAtStartPoint({
+          linePart,
+          controlPoints: cp,
+          alreadyDrawn: isBallDrawn
+        });
+      }
+
       this.ctx.restore();
     });