import BaseComponent from './basecomponent'
class Binding extends BaseComponent {
/**
* Binging class represents the binding between an exchange and a queue.
*
* @param {object} source
* @param {object} destination
* @param {string} routingKey - used routing key
* @extends BaseComponent
*/
constructor(source, destination, routingKey) {
super(0, 0)
this.source = source
this.destination = destination
this.routingKey = routingKey
source.binding = this
destination.binding = this
source.bindings.push(this)
destination.bindings.push(this)
this.setCoords()
}
/**
* Sets x and y for the source and destination property.
*/
setCoords() {
this.x1 = this.source.x
this.x2 = this.destination.x
this.y1 = this.source.y
this.y2 = this.destination.y
}
/**
* http://phrogz.net/tmp/canvas_rotated_text.html
*
* @param {string} text - text to draw as label
*/
drawLabel(text) {
const alignment = 'center'
const dx = this.x2 - this.x1
const dy = this.y2 - this.y1
const p = { x: this.x1, y: this.y1 }
const pad = 1 / 2
this.ctx.save()
this.ctx.textAlign = alignment
this.ctx.translate(p.x + dx * pad, p.y + dy * pad)
this.ctx.rotate(Math.atan2(dy, dx + 3))
this.ctx.fillText(text, 0, 0)
this.ctx.restore()
}
update() {
this.setCoords()
this.dx = this.x2 - this.x1
this.dy = this.y2 - this.y1
}
/**
* Renders the line between bind components.
*/
render() {
this.ctx.beginPath()
this.ctx.strokeStyle = '#000'
this.ctx.setLineDash([])
this.ctx.lineWidth = 1
if (this.hover) {
this.ctx.lineWidth = 2
}
this.ctx.moveTo(this.x1, this.y1)
this.ctx.lineTo(this.x2, this.y2)
this.ctx.stroke()
this.drawLabel(this.routingKey)
}
}
export default Binding