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

mxUtils.extend(mxWaterFlowComponent, mxConnector)

mxWaterFlowComponent.prototype.customProperties = [
  { componentType: 'waterFlow' }
]

mxWaterFlowComponent.prototype.shapeKey = 'mxgraph.thingskit/waterFlowComponent'

mxWaterFlowComponent.prototype.paintEdgeShape = function (c, x, y, w, h) {
  this.foreground(c, x, y, w, h)
}

mxWaterFlowComponent.prototype.foreground = function (svgCanvas, x, y, w, h) {
  var status = getCellStatus(this.state.view.graph)
  if (status === 'sidebar') {
    svgCanvas.image(0, 0, 200, 200, IMAGE_PATH + '/thingskit/waterFlow.svg')
  } else {
    mxConnector.prototype.paintEdgeShape.apply(this, arguments);
    var shape = this.state.shape
    var node = shape.node
    var waterFlowBg = node.getElementsByTagName('path')[0]
    var waterFlowLine = node.getElementsByTagName('path')[1]

    waterFlowBg.setAttribute('stroke', '#d3d3d3')
    waterFlowBg.setAttribute('visibility', 'visible')

    waterFlowLine.setAttribute('stroke-dasharray', '20')
    waterFlowLine.setAttribute('class', 'water-flow-animation')
  }
}

mxWaterFlowComponent.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)
}

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

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

mxWaterFlowComponent.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(mxWaterFlowComponent.prototype.shapeKey, mxWaterFlowComponent)