@luceosports/play-rendering 1.11.1 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luceosports/play-rendering",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "",
   "main": "dist/play-rendering.js",
   "scripts": {

package/src/layers/NoteLayer.js

@@ -1,40 +1,7 @@
 const BaseLayer = require('./base/BaseLayer');
-
-const BOX_MAX_WIDTH = 250;
-const FONT_SIZE = 14;
-const LINE_HEIGHT_OFFSET = 4;
-const BOX_PADDING = 6;
-const PLAYER_TOKEN_RADIUS = 10;
+const Note = require('../models/Note');
 
 class NoteLayer extends BaseLayer {
-  get boxMaxWidth() {
-    return this.scale(BOX_MAX_WIDTH);
-  }
-
-  get boxPadding() {
-    return this.scale(BOX_PADDING);
-  }
-
-  get fontSize() {
-    return this.scale(FONT_SIZE);
-  }
-
-  get spaceWidth() {
-    return this.ctx.measureText(' ').width;
-  }
-
-  get lineHeight() {
-    return this.scale(FONT_SIZE + LINE_HEIGHT_OFFSET);
-  }
-
-  get lineHeightOffset() {
-    return this.scale(LINE_HEIGHT_OFFSET);
-  }
-
-  get playerTokenRadius() {
-    return this.scale(PLAYER_TOKEN_RADIUS);
-  }
-
   apply() {
     this.ctx.save();
 
@@ -43,14 +10,18 @@ class NoteLayer extends BaseLayer {
     this.setColor();
 
     this.playData.notes.forEach(note => {
+      this.ctx.save();
+
       const { location } = note;
       this.ctx.translate(location.x, location.y);
 
-      this.setFont(note);
+      const { lines, box } = note.preProcessedTextForContext();
 
-      const { lines, box } = this.preProcessText(note);
+      this.setFont(note);
       this.drawBubble(box);
       this.drawText(lines);
+
+      this.ctx.restore();
     });
 
     this.ctx.restore();
@@ -61,59 +32,9 @@ class NoteLayer extends BaseLayer {
     this.ctx.strokeStyle = `rgba(0, 133, 133, 1)`;
   }
 
-  setFont() {
-    this.ctx.font = `${this.fontSize}px Arial`;
-    this.ctx.textBaseline = 'top';
-  }
-
-  preProcessText(note) {
-    const fitWidth = this.boxMaxWidth - this.boxPadding * 2;
-    const lines = this.getLines(note.text, fitWidth);
-    const maxLineWidth = lines.reduce((a, b) => (a.width > b.width ? a : b)).width;
-    return {
-      lines,
-      box: {
-        width: maxLineWidth + this.boxPadding * 2,
-        height: lines.length * this.lineHeight + this.boxPadding * 2 - this.lineHeightOffset
-      }
-    };
-  }
-
-  getLines(text, fitWidth) {
-    const getLineInfo = inputWords => {
-      let lineWidth = 0;
-      const wordsResult = [];
-      inputWords.forEach((w, i) => {
-        const matches = [...w.matchAll(/(<player=(\d*)>)/gi)];
-        const wordProcessed = {
-          text: w,
-          width: matches.length
-            ? this.ctx.measureText(w.replace(/<player=(\d*)>/, '')).width + this.playerTokenRadius * 2
-            : this.ctx.measureText(w).width
-        };
-        lineWidth += wordProcessed.width;
-        if (i !== inputWords.length - 1) {
-          lineWidth += this.spaceWidth;
-        }
-        wordsResult.push(wordProcessed);
-      });
-      return { words: wordsResult, width: lineWidth };
-    };
-
-    const lines = [];
-    const words = text.split(' ');
-    let wordIndex = 1;
-    while (words.length > 0) {
-      const wordsForIndex = words.slice(0, wordIndex);
-      if (getLineInfo(wordsForIndex).width < fitWidth && wordIndex <= words.length) {
-        wordIndex++;
-        continue;
-      }
-      if (wordIndex !== 1) wordIndex--;
-      lines.push(getLineInfo(words.splice(0, wordIndex)));
-      wordIndex = 1;
-    }
-    return lines;
+  setFont(note) {
+    this.ctx.font = note.font;
+    this.ctx.textBaseline = note.textBaseline;
   }
 
   drawBubble({ width, height }) {
@@ -127,7 +48,7 @@ class NoteLayer extends BaseLayer {
     lines.forEach(({ words }, index) => {
       this.ctx.save();
 
-      this.ctx.translate(this.boxPadding, this.boxPadding + this.lineHeight * index);
+      this.ctx.translate(Note.NOTE_WRAP_PADDING, Note.NOTE_WRAP_PADDING + Note.NOTE_LINE_HEIGHT * index);
 
       let wordStartX = 0;
       words.forEach((word, i) => {
@@ -135,7 +56,7 @@ class NoteLayer extends BaseLayer {
 
         if (matches.length && matches[0].index === 0) {
           this.drawPlayerToken(wordStartX, matches[0][2]);
-          wordStartX += this.playerTokenRadius * 2;
+          wordStartX += Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
         }
 
         this.ctx.fillStyle = '#000';
@@ -143,17 +64,17 @@ class NoteLayer extends BaseLayer {
         this.ctx.fillText(wordText, wordStartX, 0);
         wordStartX += word.width;
         if (matches.length) {
-          wordStartX -= this.playerTokenRadius * 2;
+          wordStartX -= Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
         }
 
         if (matches.length && matches[0].index > 0) {
           this.drawPlayerToken(wordStartX, matches[0][2]);
-          wordStartX += this.playerTokenRadius * 2;
+          wordStartX += Note.NOTE_PLAYER_TOKEN_RADIUS * 2;
         }
 
         if (i !== words.length - 1) {
           this.ctx.fillText(' ', wordStartX, 0);
-          wordStartX += this.spaceWidth;
+          wordStartX += this.ctx.measureText(' ').width;
         }
       });
 
@@ -164,12 +85,12 @@ class NoteLayer extends BaseLayer {
   drawPlayerToken(x, label) {
     this.ctx.save();
 
-    this.ctx.translate(x + this.playerTokenRadius, 0);
+    this.ctx.translate(x + Note.NOTE_PLAYER_TOKEN_RADIUS, 0);
 
     this.ctx.beginPath();
     this.ctx.strokeStyle = '#ffffff';
     this.ctx.fillStyle = '#f36f21';
-    this.ctx.arc(0, this.fontSize / 2, this.playerTokenRadius, 0, Math.PI * 2);
+    this.ctx.arc(0, Note.NOTE_FONT_SIZE / 2, Note.NOTE_PLAYER_TOKEN_RADIUS, 0, Math.PI * 2);
     this.ctx.fill();
     this.ctx.stroke();
 

package/src/models/Frame.js

@@ -240,7 +240,6 @@ class Frame {
     this.ctx.canvas.height = this.frameHeight;
 
     this.ctx.scale(this.play.scale, this.play.scale);
-    // this.ctx.translate(Math.abs(this.court.courtRect.origin.x), Math.abs(this.court.courtRect.origin.y));
     this.ctx.translate(-this.court.courtRect.origin.x, -this.court.courtRect.origin.y);
     if (this.play.options.mirror) {
       this.ctx.scale(-1, 1);
@@ -276,6 +275,9 @@ class Frame {
     if (objectType === 'shape') {
       return this.closestShapeToPoint(courtPoint, filterCallback);
     }
+    if (objectType === 'note') {
+      return this.closestNoteToPoint(courtPoint, filterCallback);
+    }
     if (objectType === 'line') {
       return this.closestLineToPoint(courtPoint, filterCallback);
     }
@@ -369,6 +371,21 @@ class Frame {
     return _.minBy(shapeDistances, 'distance');
   }
 
+  closestNoteToPoint(courtPoint) {
+    const noteDistances = this.notes
+      .filter(note => note.noteWrapperContains(courtPoint))
+      .reduce((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) {
     const { mirror } = this.play.options;
     const { width } = this.play.playData.court.courtRect.size;

package/src/models/Note.js

@@ -1,12 +1,37 @@
 const Model = require('./Base/InternalFrameModel');
 
 class Note extends Model {
-  get id() {
-    return this._getAttr('id');
+  constructor(data) {
+    super(data);
+    this.internalCanvas = document.createElement('canvas');
+  }
+
+  static get NOTE_WRAP_MAX_WIDTH() {
+    return 18;
+  }
+
+  static get NOTE_WRAP_PADDING() {
+    return 0.43;
+  }
+
+  static get NOTE_PLAYER_TOKEN_RADIUS() {
+    return 0.7;
+  }
+
+  static get NOTE_LINE_HEIGHT_OFFSET() {
+    return 0.3;
+  }
+
+  static get NOTE_FONT_SIZE() {
+    return 1;
   }
 
-  get headerText() {
-    return this._getAttr('headerText');
+  static get NOTE_LINE_HEIGHT() {
+    return Note.NOTE_FONT_SIZE + Note.NOTE_LINE_HEIGHT_OFFSET;
+  }
+
+  get id() {
+    return this._getAttr('id');
   }
 
   get text() {
@@ -16,6 +41,105 @@ class Note extends Model {
   get location() {
     return this._getAttr('location');
   }
+
+  get font() {
+    return `${Note.NOTE_FONT_SIZE}px Arial`;
+  }
+
+  get textBaseline() {
+    return 'top';
+  }
+
+  get internalCtx() {
+    // used only for measureText feature to get a text width
+    return this.internalCanvas.getContext('2d');
+  }
+
+  preProcessedTextForContext() {
+    const lines = this._getLines();
+    const maxLineWidth = lines.reduce((a, b) => (a.width > b.width ? a : b)).width;
+    return {
+      lines,
+      box: {
+        width: maxLineWidth + Note.NOTE_WRAP_PADDING * 2,
+        height: lines.length * Note.NOTE_LINE_HEIGHT + Note.NOTE_WRAP_PADDING * 2 - Note.NOTE_LINE_HEIGHT_OFFSET
+      }
+    };
+  }
+
+  _getLines() {
+    this.internalCtx.font = this.font;
+    this.internalCtx.textBaseline = this.textBaseline;
+
+    const fitWidth = Note.NOTE_WRAP_MAX_WIDTH - Note.NOTE_WRAP_PADDING * 2;
+
+    const lines = [];
+    const words = this.text.split(' ').reduce((result, item) => {
+      if (!item.match(/\n/)) {
+        result.push(item);
+        return result;
+      }
+      const nlSegments = item.split(/\n/);
+      nlSegments.forEach((segment, index) => {
+        if (!segment) return result.push('\n');
+        result.push(segment);
+        if (nlSegments[index + 1]) result.push('\n');
+      });
+      return result;
+    }, []);
+
+    let wordIndex = 1;
+    while (words.length > 0) {
+      const wordsForIndex = words.slice(0, wordIndex);
+      const lineInfo = this._getLineInfo(wordsForIndex);
+      if (lineInfo.width < fitWidth && wordIndex <= words.length && !lineInfo.hasLineBreak) {
+        wordIndex++;
+        continue;
+      }
+      if (wordIndex !== 1) wordIndex--;
+      lines.push(this._getLineInfo(words.splice(0, wordIndex)));
+      wordIndex = 1;
+      if (lineInfo.hasLineBreak) {
+        words.splice(0, 1);
+      }
+    }
+    return lines;
+  }
+
+  _getLineInfo(inputWords) {
+    let lineWidth = 0;
+    let hasLineBreak = false;
+    const wordsResult = [];
+    inputWords.forEach((w, i) => {
+      if (w === '\n') {
+        hasLineBreak = true;
+        return;
+      }
+      const matches = [...w.matchAll(/(<player=(\d*)>)/gi)];
+      const wordProcessed = {
+        text: w,
+        width: matches.length
+          ? this.internalCtx.measureText(w.replace(/<player=(\d*)>/, '')).width + Note.NOTE_PLAYER_TOKEN_RADIUS * 2
+          : this.internalCtx.measureText(w).width
+      };
+      lineWidth += wordProcessed.width;
+      if (i !== inputWords.length - 1) {
+        lineWidth += this.internalCtx.measureText(' ').width;
+      }
+      wordsResult.push(wordProcessed);
+    });
+    return { words: wordsResult, width: lineWidth, hasLineBreak };
+  }
+
+  noteWrapperContains({ x, y }) {
+    const { box } = this.preProcessedTextForContext();
+
+    const topLeft = this.location;
+    const topRight = { x: topLeft.x + box.width, y: topLeft.y };
+    const botRight = { x: topRight.x, y: topRight.y + box.height };
+
+    return topLeft.x <= x && x <= topRight.x && topLeft.y <= y && y <= botRight.y;
+  }
 }
 
 module.exports = Note;

package/src/models/Play.js

@@ -17,6 +17,7 @@ class Play {
       linesHiddenIds = [],
       linesSelectedIds = [],
       shapeSelectedId = null,
+      noteSelectedId = null,
       playersHiddenPositions = [],
       background = '',
       watermark = null,
@@ -37,6 +38,7 @@ class Play {
       linesHiddenIds,
       linesSelectedIds,
       shapeSelectedId,
+      noteSelectedId,
       playersHiddenPositions,
       background,
       watermark,