UNPKG

visjs-network

Version:

A dynamic, browser-based network visualization library.

123 lines (107 loc) 3.28 kB
'use strict' import CircleImageBase from '../util/CircleImageBase' /** * A CircularImage Node/Cluster shape. * * @extends CircleImageBase */ class CircularImage 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 * @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 diameter = this.options.size * 2 this.width = diameter this.height = diameter this.radius = 0.5 * this.width return } // At this point, an image is present, i.e. this.imageObj is valid. 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 // draw the background circle. IMPORTANT: the stroke in this method is used by the clip method below. this._drawRawCircle(ctx, x, y, values) // now we draw in the circle, we save so we can revert the clip operation after drawing. ctx.save() // clip is used to use the stroke in drawRawCircle as an area that we can draw in. ctx.clip() // draw the image this._drawImageAtPosition(ctx, values) // restore so we can again draw on the full canvas ctx.restore() this._drawImageLabel(ctx, x, y, selected, hover) this.updateBoundingBox(x, y) } // TODO: compare with Circle.updateBoundingBox(), consolidate? More stuff is happening here /** * * @param {number} x width * @param {number} y height */ updateBoundingBox(x, y) { this.boundingBox.top = y - this.options.size this.boundingBox.left = x - this.options.size this.boundingBox.right = x + this.options.size this.boundingBox.bottom = y + this.options.size // TODO: compare with Image.updateBoundingBox(), consolidate? 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 ) } // prettier-ignore /** * * @param {CanvasRenderingContext2D} ctx * @param {number} angle - Unused * @returns {number} */ distanceToBorder(ctx, angle) { // eslint-disable-line no-unused-vars this.resize(ctx) return this.width * 0.5 } } export default CircularImage