visjs-network
Version:
A dynamic, browser-based network visualization library.
146 lines (124 loc) • 3.71 kB
JavaScript
'use strict'
import CircleImageBase from '../util/CircleImageBase'
/**
* An image-based replacement for the default Node shape.
*
* @extends CircleImageBase
*/
class Image extends CircleImageBase {
/**
* @param {Object} options
* @param {Object} body
* @param {Label} labelModule
* @param {Image} imageObj
* @param {Image} imageObjAlt
*/
constructor(options, body, labelModule, imageObj, imageObjAlt) {
super(options, body, labelModule)
this.setImages(imageObj, imageObjAlt)
}
/**
*
* @param {CanvasRenderingContext2D} ctx - Unused.
* @param {boolean} [selected]
* @param {boolean} [hover]
*/
resize(ctx, selected = this.selected, hover = this.hover) {
var imageAbsent =
this.imageObj.src === undefined ||
this.imageObj.width === undefined ||
this.imageObj.height === undefined
if (imageAbsent) {
var side = this.options.size * 2
this.width = side
this.height = side
return
}
if (this.needsRefresh(selected, hover)) {
this._resizeImage()
}
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {number} x width
* @param {number} y height
* @param {boolean} selected
* @param {boolean} hover
* @param {ArrowOptions} values
*/
draw(ctx, x, y, selected, hover, values) {
this.switchImages(selected)
this.resize()
this.left = x - this.width / 2
this.top = y - this.height / 2
if (this.options.shapeProperties.useBorderWithImage === true) {
var neutralborderWidth = this.options.borderWidth
var selectionLineWidth =
this.options.borderWidthSelected || 2 * this.options.borderWidth
var borderWidth =
(selected ? selectionLineWidth : neutralborderWidth) /
this.body.view.scale
ctx.lineWidth = Math.min(this.width, borderWidth)
ctx.beginPath()
// setup the line properties.
ctx.strokeStyle = selected
? this.options.color.highlight.border
: hover
? this.options.color.hover.border
: this.options.color.border
// set a fillstyle
ctx.fillStyle = selected
? this.options.color.highlight.background
: hover
? this.options.color.hover.background
: this.options.color.background
// draw a rectangle to form the border around. This rectangle is filled so the opacity of a picture (in future vis releases?) can be used to tint the image
ctx.rect(
this.left - 0.5 * ctx.lineWidth,
this.top - 0.5 * ctx.lineWidth,
this.width + ctx.lineWidth,
this.height + ctx.lineWidth
)
ctx.fill()
this.performStroke(ctx, values)
ctx.closePath()
}
this._drawImageAtPosition(ctx, values)
this._drawImageLabel(ctx, x, y, selected, hover)
this.updateBoundingBox(x, y)
}
/**
*
* @param {number} x
* @param {number} y
*/
updateBoundingBox(x, y) {
this.resize()
this._updateBoundingBox(x, y)
if (this.options.label !== undefined && this.labelModule.size.width > 0) {
this.boundingBox.left = Math.min(
this.boundingBox.left,
this.labelModule.size.left
)
this.boundingBox.right = Math.max(
this.boundingBox.right,
this.labelModule.size.left + this.labelModule.size.width
)
this.boundingBox.bottom = Math.max(
this.boundingBox.bottom,
this.boundingBox.bottom + this.labelOffset
)
}
}
/**
*
* @param {CanvasRenderingContext2D} ctx
* @param {number} angle
* @returns {number}
*/
distanceToBorder(ctx, angle) {
return this._distanceToBorder(ctx, angle)
}
}
export default Image