/** * The Base class for all Nodes. * * @class NodeBase */ class NodeBase { /** * @param {Object} options * @param {Object} body * @param {Label} labelModule * @constructor NodeBase */ constructor(options, body, labelModule) { this.body = body; this.labelModule = labelModule; this.setOptions(options); this.top = undefined; this.left = undefined; this.height = undefined; this.width = undefined; this.radius = undefined; this.margin = undefined; this.refreshNeeded = true; this.boundingBox = {top: 0, left: 0, right: 0, bottom: 0}; } /** * * @param {Object} options */ setOptions(options) { this.options = options; } /** * * @param {Label} labelModule * @private */ _setMargins(labelModule) { this.margin = {}; if (this.options.margin) { if (typeof this.options.margin == 'object') { this.margin.top = this.options.margin.top; this.margin.right = this.options.margin.right; this.margin.bottom = this.options.margin.bottom; this.margin.left = this.options.margin.left; } else { this.margin.top = this.options.margin; this.margin.right = this.options.margin; this.margin.bottom = this.options.margin; this.margin.left = this.options.margin; } } labelModule.adjustSizes(this.margin) } /** * * @param {CanvasRenderingContext2D} ctx * @param {Number} angle * @returns {Number} * @private */ _distanceToBorder(ctx,angle) { var borderWidth = this.options.borderWidth; this.resize(ctx); return Math.min( Math.abs(this.width / 2 / Math.cos(angle)), Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth; } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ enableShadow(ctx, values) { if (values.shadow) { ctx.shadowColor = values.shadowColor; ctx.shadowBlur = values.shadowSize; ctx.shadowOffsetX = values.shadowX; ctx.shadowOffsetY = values.shadowY; } } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ disableShadow(ctx, values) { if (values.shadow) { ctx.shadowColor = 'rgba(0,0,0,0)'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; } } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ enableBorderDashes(ctx, values) { if (values.borderDashes !== false) { if (ctx.setLineDash !== undefined) { let dashes = values.borderDashes; if (dashes === true) { dashes = [5,15] } ctx.setLineDash(dashes); } else { console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used."); this.options.shapeProperties.borderDashes = false; values.borderDashes = false; } } } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ disableBorderDashes(ctx, values) { if (values.borderDashes !== false) { if (ctx.setLineDash !== undefined) { ctx.setLineDash([0]); } else { console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used."); this.options.shapeProperties.borderDashes = false; values.borderDashes = false; } } } /** * Determine if the shape of a node needs to be recalculated. * * @param {boolean} selected * @param {boolean} hover * @returns {boolean} * @protected */ needsRefresh(selected, hover) { if (this.refreshNeeded === true) { // This is probably not the best location to reset this member. // However, in the current logic, it is the most convenient one. this.refreshNeeded = false; return true; } return (this.width === undefined) || (this.labelModule.differentState(selected, hover)); } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ initContextForDraw(ctx, values) { var borderWidth = values.borderWidth / this.body.view.scale; ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = values.borderColor; ctx.fillStyle = values.color; } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ performStroke(ctx, values) { var borderWidth = values.borderWidth / this.body.view.scale; //draw dashed border if enabled, save and restore is required for firefox not to crash on unix. ctx.save(); // if borders are zero width, they will be drawn with width 1 by default. This prevents that if (borderWidth > 0) { this.enableBorderDashes(ctx, values); //draw the border ctx.stroke(); //disable dashed border for other elements this.disableBorderDashes(ctx, values); } ctx.restore(); } /** * * @param {CanvasRenderingContext2D} ctx * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values */ performFill(ctx, values) { // draw shadow if enabled this.enableShadow(ctx, values); // draw the background ctx.fill(); // disable shadows for other elements. this.disableShadow(ctx, values); this.performStroke(ctx, values); } /** * * @param {Number} margin * @private */ _addBoundingBoxMargin(margin) { this.boundingBox.left -= margin; this.boundingBox.top -= margin; this.boundingBox.bottom += margin; this.boundingBox.right += margin; } /** * Actual implementation of this method call. * * Doing it like this makes it easier to override * in the child classes. * * @param {number} x width * @param {number} y height * @param {CanvasRenderingContext2D} ctx * @param {boolean} selected * @param {boolean} hover * @private */ _updateBoundingBox(x, y, ctx, selected, hover) { if (ctx !== undefined) { this.resize(ctx, selected, hover); } this.left = x - this.width / 2; this.top = y - this.height/ 2; this.boundingBox.left = this.left; this.boundingBox.top = this.top; this.boundingBox.bottom = this.top + this.height; this.boundingBox.right = this.left + this.width; } /** * Default implementation of this method call. * This acts as a stub which can be overridden. * * @param {number} x width * @param {number} y height * @param {CanvasRenderingContext2D} ctx * @param {boolean} selected * @param {boolean} hover */ updateBoundingBox(x, y, ctx, selected, hover) { this._updateBoundingBox(x, y, ctx, selected, hover); } } export default NodeBase;