@luceosports/play-rendering 2.1.4 → 2.1.5

package/package.json

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

package/src/layers/NoteLayer.ts

@@ -67,7 +67,10 @@ export default class NoteLayer extends BaseLayer {
     lines.forEach(({ words }, index) => {
       this.ctx.save();
 
-      this.ctx.translate(NoteModel.NOTE_WRAP_PADDING, NoteModel.NOTE_WRAP_PADDING + note.lineHeight * index);
+      this.ctx.translate(
+        NoteModel.NOTE_WRAP_PADDING,
+        note.fontSize + NoteModel.NOTE_WRAP_PADDING + note.lineHeight * index
+      );
 
       let wordStartX = 0;
       words.forEach((word, i) => {
@@ -80,7 +83,17 @@ export default class NoteLayer extends BaseLayer {
 
         this.ctx.fillStyle = `rgba(0, 0, 0, ${this.animationAlpha})`;
         const wordText = matches.length ? word.text.replace(/(<player=(\d*)>)/gi, '') : word.text;
-        this.ctx.fillText(wordText, wordStartX, 0);
+        this.ctx.fillText(wordText, wordStartX, -note.baseLineOffset);
+
+        // BASELINE FOR TESTING
+        // this.ctx.save();
+        // this.ctx.strokeStyle = 'red';
+        // this.ctx.beginPath();
+        // this.ctx.moveTo(wordStartX, 0);
+        // this.ctx.lineTo(word.width, 0);
+        // this.ctx.stroke();
+        // this.ctx.restore();
+
         wordStartX += word.width;
         if (matches.length) {
           wordStartX -= note.playerTokenRadius * 2;
@@ -92,7 +105,7 @@ export default class NoteLayer extends BaseLayer {
         }
 
         if (i !== words.length - 1) {
-          this.ctx.fillText(' ', wordStartX, 0);
+          this.ctx.fillText(' ', wordStartX, -note.baseLineOffset);
           wordStartX += this.ctx.measureText(' ').width;
         }
       });
@@ -102,12 +115,12 @@ export default class NoteLayer extends BaseLayer {
         this.ctx.strokeStyle = `rgba(0, 0, 0, ${this.animationAlpha})`;
         this.ctx.beginPath();
         if (note.font.underline) {
-          this.ctx.moveTo(0, note.fontSize - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 2);
-          this.ctx.lineTo(wordStartX, note.fontSize - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 2);
+          this.ctx.moveTo(0, note.baseLineOffset);
+          this.ctx.lineTo(wordStartX, note.baseLineOffset);
         }
         if (note.font.strikethrough) {
-          this.ctx.moveTo(0, note.lineHeight / 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 3);
-          this.ctx.lineTo(wordStartX, note.lineHeight / 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET / 3);
+          this.ctx.moveTo(0, -note.fontSize / 2 + note.baseLineOffset);
+          this.ctx.lineTo(wordStartX, -note.fontSize / 2 + note.baseLineOffset);
         }
         this.ctx.stroke();
       }
@@ -124,14 +137,14 @@ export default class NoteLayer extends BaseLayer {
     this.ctx.beginPath();
     this.ctx.strokeStyle = `rgba(255, 255, 255, ${this.animationAlpha})`;
     this.ctx.fillStyle = `rgba(243, 111, 33, ${this.animationAlpha})`;
-    this.ctx.arc(0, note.playerTokenRadius, note.playerTokenRadius, 0, Math.PI * 2);
+    this.ctx.arc(0, -note.fontSize / 2, note.playerTokenRadius, 0, Math.PI * 2);
     this.ctx.fill();
     this.ctx.stroke();
 
     const playerFontSize = note.fontSize * 0.8;
     this.ctx.font = `${playerFontSize}px Arial`;
     const textX = -this.ctx.measureText(label).width / 2;
-    const textY = ((note.playerTokenRadius * 2 - playerFontSize) / 2) * (1 + NoteModel.NOTE_LINE_HEIGHT_OFFSET);
+    const textY = -playerFontSize / 4;
     this.ctx.fillStyle = `rgba(255, 255, 255, ${this.animationAlpha})`;
     this.ctx.fillText(label, textX, textY);
 

package/src/models/NoteModel.ts

@@ -2,6 +2,8 @@ import Model from './Base/InternalFrameModel';
 import { CourtPoint, Note as NoteData } from '../types';
 
 const NOTE_GREY_COLOR = { red: 0.502, green: 0.502, blue: 0.502, alpha: 0.35 };
+const NOTE_LINE_HEIGHT_OFFSET = 0.3;
+const NOTE_BASE_LINE_ALPHABETIC_OFFSET = 0.1;
 
 export default class NoteModel extends Model<NoteData, NoteData> {
   private internalCanvas: HTMLCanvasElement;
@@ -19,10 +21,6 @@ export default class NoteModel extends Model<NoteData, NoteData> {
     return 0.43;
   }
 
-  static get NOTE_LINE_HEIGHT_OFFSET() {
-    return 0.3;
-  }
-
   get id() {
     return this._getAttr('id');
   }
@@ -68,7 +66,15 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   }
 
   get lineHeight() {
-    return this.fontSize + NoteModel.NOTE_LINE_HEIGHT_OFFSET;
+    return this.fontSize + this.lineHeightOffset;
+  }
+
+  get lineHeightOffset() {
+    return this.fontSize * NOTE_LINE_HEIGHT_OFFSET;
+  }
+
+  get baseLineOffset() {
+    return this.fontSize * NOTE_BASE_LINE_ALPHABETIC_OFFSET;
   }
 
   get playerTokenRadius() {
@@ -85,7 +91,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
   }
 
   get textBaseline(): CanvasTextBaseline {
-    return 'top';
+    return 'alphabetic';
   }
 
   get internalCtx(): CanvasRenderingContext2D {
@@ -100,7 +106,7 @@ export default class NoteModel extends Model<NoteData, NoteData> {
       lines,
       box: {
         width: maxLineWidth + NoteModel.NOTE_WRAP_PADDING * 2,
-        height: lines.length * this.lineHeight + NoteModel.NOTE_WRAP_PADDING * 2 - NoteModel.NOTE_LINE_HEIGHT_OFFSET
+        height: lines.length * this.lineHeight + NoteModel.NOTE_WRAP_PADDING * 2
       }
     };
   }