function mxThermometerComponent(bounds, fill, stroke, strokewidth) {
  mxShape.call(this);
  this.bounds = bounds;
  this.fill = fill;
  this.stroke = stroke;
  this.strokewidth = (strokewidth != null) ? strokewidth : 1;
}

mxUtils.extend(mxThermometerComponent, mxShape)

mxThermometerComponent.prototype.customProperties = [
  { componentType: 'text' }
]

mxThermometerComponent.prototype.shapeKey = 'mxgraph.thingskit/thermometerComponent'

mxThermometerComponent.prototype.paintVertexShape = function (c, x, y, w, h) {
  this.paintBackground(c, x, y, w, h)
  this.foreground(c, x, y, w, h)
}

mxThermometerComponent.prototype.paintBackground = function (svgCanvas, x, y, w, h) {
  svgCanvas.rect(x, y, w, h);
  svgCanvas.fillAndStroke()
}

mxThermometerComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
  var cell = this.state.cell
  var status = getCellStatus(this.state.view.graph)

  if (status === 'sidebar') {
    svgCanvas.image(...this.getThumbSize(x, y, w, h), IMAGE_PATH + '/thingskit/thermometer.svg')
  } else {
    createComponent(this, svgCanvas, x, y, w, h)
    setContainerSize(this, svgCanvas, x, y, w, h)
  }
}

mxThermometerComponent.prototype.configureCanvas = function (a, b, c, d) {
  mxShape.prototype.configureCanvas.apply(this, arguments)
  a.setFontColor(this.color);
  a.setFontFamily(this.family);
  a.setFontSize(this.size);
  a.setFontStyle(this.fontStyle)
}

mxThermometerComponent.prototype.updateMargin = function () {
  this.margin = mxUtils.getAlignmentAsPoint(this.align, this.valign)
}

mxThermometerComponent.prototype.apply = function (a) {
  mxText.prototype.apply.apply(this, arguments);
  this.opacity = mxUtils.getValue(this.style, mxConstants.STYLE_OPACITY, 100)
}

mxThermometerComponent.prototype.getThumbSize = function (x, y, w, h) {
  const offset = Math.min(x, y)
  const size = Math.max(w, h)
  return [offset, offset, size, size]
}

mxCellRenderer.registerShape(mxThermometerComponent.prototype.shapeKey, mxThermometerComponent)