UNPKG

visjs-network

Version:

A dynamic, browser-based network visualization library.

143 lines (126 loc) 3.79 kB
'use strict' import NodeBase from '../util/NodeBase' /** * An icon replacement for the default Node shape. * * @extends NodeBase */ class Icon extends NodeBase { /** * @param {Object} options * @param {Object} body * @param {Label} labelModule */ constructor(options, body, labelModule) { super(options, body, labelModule) this._setMargins(labelModule) } /** * * @param {CanvasRenderingContext2D} ctx - Unused. * @param {boolean} [selected] * @param {boolean} [hover] */ resize(ctx, selected, hover) { if (this.needsRefresh(selected, hover)) { this.iconSize = { width: Number(this.options.icon.size), height: Number(this.options.icon.size) } this.width = this.iconSize.width + this.margin.right + this.margin.left this.height = this.iconSize.height + this.margin.top + this.margin.bottom this.radius = 0.5 * this.width } } /** * * @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.resize(ctx, selected, hover) this.options.icon.size = this.options.icon.size || 50 this.left = x - this.width / 2 this.top = y - this.height / 2 this._icon(ctx, x, y, selected, hover, values) if (this.options.label !== undefined) { var iconTextSpacing = 5 this.labelModule.draw( ctx, this.left + this.iconSize.width / 2 + this.margin.left, y + this.height / 2 + iconTextSpacing, selected ) } this.updateBoundingBox(x, y) } /** * * @param {number} x * @param {number} y */ updateBoundingBox(x, y) { this.boundingBox.top = y - this.options.icon.size * 0.5 this.boundingBox.left = x - this.options.icon.size * 0.5 this.boundingBox.right = x + this.options.icon.size * 0.5 this.boundingBox.bottom = y + this.options.icon.size * 0.5 if (this.options.label !== undefined && this.labelModule.size.width > 0) { var iconTextSpacing = 5 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.labelModule.size.height + iconTextSpacing ) } } /** * * @param {CanvasRenderingContext2D} ctx * @param {number} x width * @param {number} y height * @param {boolean} selected * @param {boolean} hover - Unused * @param {ArrowOptions} values */ _icon(ctx, x, y, selected, hover, values) { let iconSize = Number(this.options.icon.size) if (this.options.icon.code !== undefined) { ctx.font = (selected ? 'bold ' : '') + iconSize + 'px ' + this.options.icon.face // draw icon ctx.fillStyle = this.options.icon.color || 'black' ctx.textAlign = 'center' ctx.textBaseline = 'middle' // draw shadow if enabled this.enableShadow(ctx, values) ctx.fillText(this.options.icon.code, x, y) // disable shadows for other elements. this.disableShadow(ctx, values) } else { console.error( 'When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally.' ) } } /** * * @param {CanvasRenderingContext2D} ctx * @param {number} angle * @returns {number} */ distanceToBorder(ctx, angle) { return this._distanceToBorder(ctx, angle) } } export default Icon