comic-bubbles/javascript/objects/bubble.mjs

Animated comic bubbles - what else?

import { Body } from "./body.mjs"
import { Arrow } from "./arrow.mjs"
import { Connector } from "./connector.mjs"
import { Margin } from "./margin.mjs"

export class Bubble {
  constructor(parent) {
    this.arrIdx = -1
    this.canvas = document.createElement('canvas')
    this.body = new Body(this)
    this.arrow = new Arrow(this)
    this.connector = new Connector(this)
    this.margin = new Margin(this)
    this.shadowHeight = undefined
    this.parent = parent
  }

  getWidth() {
    return this.body.getWidth() + this.arrow.width
  }

  getHeight() {
    return this.body.getHeight() + this.connector.getHeight()
  }

  getX() {
    return this.parent.getX() + this.margin.left
  }

  getY() {
    let y = this.margin.top + this.parent.getY()
    for (let i = 0; i < this.arrIdx; i++) {
      let bubble = this.parent.bubble(i)
      y += bubble.getHeight() + bubble.margin.top + bubble.margin.bottom
    }

    return y
  }

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

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