comic-bubbles/javascript/objects/word.mjs

Animated comic bubbles - what else?

import { Margin } from './margin.mjs'
import { Bounds } from './bounds.mjs'

export class Word {
  constructor(parent) {
    this.canvas = document.createElement('canvas')
    this.margin = new Margin(this)
    this.bounds = new Bounds(this)
    this.bounds.width = 0
    this.bounds.height = 0
    this.spaceWidth = undefined
    this.maxLineSpacing = 0
    this.parent = parent
  }

  getPrefStr() {
    return this.parent === undefined ? 'word' : this.parent.getPrefStr() + '.word'
  }

  charArr = new Array()

  addChar(char) {
    char.parent = this
    this.charArr.push(char)

    this.bounds.height = Math.max(this.bounds.height, char.font.fontHeight)
    this.maxLineSpacing = Math.max(this.maxLineSpacing, char.font.lineSpacing)
    this.bounds.width += char.margin.left + char.bounds.width + char.margin.right

    if (this.getCharCount() >= 2) {
      let prevChar = this.charArr[this.charArr.length - 1]
      this.bounds.width += prevChar.font.letterSpacing
    }
    this.spaceWidth = char.font.spaceWidth
  }

  char(idx) {
    return this.charArr[idx]
  }

  getCharCount() {
    return this.charArr.length
  }

  ctx() {
    return this.canvas.getContext('2d')
  }
}