From 8e0f4733a1d7e8f9488a5a5d931d5682f4ac4d07 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Wed, 17 Sep 2014 14:30:26 +0200 Subject: [PATCH] added cacheing to edge labels, cannot cache node labels due to different shapes --- dist/vis.js | 48 ++++++++++++++++++++++++++------------------- lib/network/Edge.js | 45 ++++++++++++++++++++++++------------------ lib/network/Node.js | 7 ++++--- 3 files changed, 58 insertions(+), 42 deletions(-) diff --git a/dist/vis.js b/dist/vis.js index a38ee1ed..b914ad79 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -24545,6 +24545,7 @@ return /******/ (function(modules) { // webpackBootstrap this.preassignedLevel = false; this.hierarchyEnumerated = false; this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached + this.dirtyLabel = true; this.imagelist = imagelist; @@ -24639,7 +24640,7 @@ return /******/ (function(modules) { // webpackBootstrap this.originalLabel = undefined; // basic properties if (properties.id !== undefined) {this.id = properties.id;} - if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label;} + if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label; this.dirtyLabel = true;} if (properties.title !== undefined) {this.title = properties.title;} if (properties.x !== undefined) {this.x = properties.x;} if (properties.y !== undefined) {this.y = properties.y;} @@ -25367,8 +25368,6 @@ return /******/ (function(modules) { // webpackBootstrap Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) { if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) { ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace; - ctx.textAlign = align || "center"; - ctx.textBaseline = baseline || "middle"; var lines = text.split('\n'); var lineCount = lines.length; @@ -25400,6 +25399,8 @@ return /******/ (function(modules) { // webpackBootstrap // draw text ctx.fillStyle = this.options.fontColor || "black"; + ctx.textAlign = align || "center"; + ctx.textBaseline = baseline || "middle"; for (var i = 0; i < lineCount; i++) { ctx.fillText(lines[i], x, yLine); yLine += fontSize; @@ -25555,6 +25556,7 @@ return /******/ (function(modules) { // webpackBootstrap this.selected = false; this.hover = false; this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached + this.dirtyLabel = true; this.from = null; // a node this.to = null; // a node @@ -25596,7 +25598,7 @@ return /******/ (function(modules) { // webpackBootstrap if (properties.to !== undefined) {this.toId = properties.to;} if (properties.id !== undefined) {this.id = properties.id;} - if (properties.label !== undefined) {this.label = properties.label;} + if (properties.label !== undefined) {this.label = properties.label; this.dirtyLabel = true;} if (properties.title !== undefined) {this.title = properties.title;} if (properties.value !== undefined) {this.value = properties.value;} @@ -26061,37 +26063,43 @@ return /******/ (function(modules) { // webpackBootstrap */ Edge.prototype._label = function (ctx, text, x, y) { if (text) { - // TODO: cache the calculated size ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + - this.options.fontSize + "px " + this.options.fontFace; + this.options.fontSize + "px " + this.options.fontFace; + var yLine; + if (this.dirtyLabel == true) { + var lines = String(text).split('\n'); + var lineCount = lines.length; + var fontSize = (Number(this.options.fontSize) + 4); + yLine = y + (1 - lineCount) / 2 * fontSize; - var lines = String(text).split('\n'); - var lineCount = lines.length; - var fontSize = (Number(this.options.fontSize) + 4); - var yLine = y + (1 - lineCount) / 2 * fontSize; + var width = ctx.measureText(lines[0]).width; + for (var i = 1; i < lineCount; i++) { + var lineWidth = ctx.measureText(lines[i]).width; + width = lineWidth > width ? lineWidth : width; + } + var height = this.options.fontSize * lineCount; + var left = x - width / 2; + var top = y - height / 2; - var width = ctx.measureText(lines[0]).width; - for (var i = 1; i < lineCount; i++) { - var lineWidth = ctx.measureText(lines[i]).width; - width = lineWidth > width ? lineWidth : width; + // cache + this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine}; } - var height = this.options.fontSize * lineCount; - var left = x - width / 2; - var top = y - height / 2; - this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine}; if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") { ctx.fillStyle = this.options.fontFill; - ctx.fillRect(left, top, width, height); + ctx.fillRect(this.labelDimensions.left, + this.labelDimensions.top, + this.labelDimensions.width, + this.labelDimensions.height); } // draw text ctx.fillStyle = this.options.fontColor || "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; - + yLine = this.labelDimensions.yLine; for (var i = 0; i < lineCount; i++) { ctx.fillText(lines[i], x, yLine); yLine += fontSize; diff --git a/lib/network/Edge.js b/lib/network/Edge.js index a4883751..ff93d140 100644 --- a/lib/network/Edge.js +++ b/lib/network/Edge.js @@ -39,6 +39,7 @@ function Edge (properties, network, networkConstants) { this.selected = false; this.hover = false; this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached + this.dirtyLabel = true; this.from = null; // a node this.to = null; // a node @@ -80,7 +81,7 @@ Edge.prototype.setProperties = function(properties) { if (properties.to !== undefined) {this.toId = properties.to;} if (properties.id !== undefined) {this.id = properties.id;} - if (properties.label !== undefined) {this.label = properties.label;} + if (properties.label !== undefined) {this.label = properties.label; this.dirtyLabel = true;} if (properties.title !== undefined) {this.title = properties.title;} if (properties.value !== undefined) {this.value = properties.value;} @@ -545,37 +546,43 @@ Edge.prototype._circle = function (ctx, x, y, radius) { */ Edge.prototype._label = function (ctx, text, x, y) { if (text) { - // TODO: cache the calculated size ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + - this.options.fontSize + "px " + this.options.fontFace; - - - var lines = String(text).split('\n'); - var lineCount = lines.length; - var fontSize = (Number(this.options.fontSize) + 4); - var yLine = y + (1 - lineCount) / 2 * fontSize; + this.options.fontSize + "px " + this.options.fontFace; + var yLine; + + if (this.dirtyLabel == true) { + var lines = String(text).split('\n'); + var lineCount = lines.length; + var fontSize = (Number(this.options.fontSize) + 4); + yLine = y + (1 - lineCount) / 2 * fontSize; + + var width = ctx.measureText(lines[0]).width; + for (var i = 1; i < lineCount; i++) { + var lineWidth = ctx.measureText(lines[i]).width; + width = lineWidth > width ? lineWidth : width; + } + var height = this.options.fontSize * lineCount; + var left = x - width / 2; + var top = y - height / 2; - var width = ctx.measureText(lines[0]).width; - for (var i = 1; i < lineCount; i++) { - var lineWidth = ctx.measureText(lines[i]).width; - width = lineWidth > width ? lineWidth : width; + // cache + this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine}; } - var height = this.options.fontSize * lineCount; - var left = x - width / 2; - var top = y - height / 2; - this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine}; if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") { ctx.fillStyle = this.options.fontFill; - ctx.fillRect(left, top, width, height); + ctx.fillRect(this.labelDimensions.left, + this.labelDimensions.top, + this.labelDimensions.width, + this.labelDimensions.height); } // draw text ctx.fillStyle = this.options.fontColor || "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; - + yLine = this.labelDimensions.yLine; for (var i = 0; i < lineCount; i++) { ctx.fillText(lines[i], x, yLine); yLine += fontSize; diff --git a/lib/network/Node.js b/lib/network/Node.js index 349d943d..9e53a017 100644 --- a/lib/network/Node.js +++ b/lib/network/Node.js @@ -54,6 +54,7 @@ function Node(properties, imagelist, grouplist, networkConstants) { this.preassignedLevel = false; this.hierarchyEnumerated = false; this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached + this.dirtyLabel = true; this.imagelist = imagelist; @@ -148,7 +149,7 @@ Node.prototype.setProperties = function(properties, constants) { this.originalLabel = undefined; // basic properties if (properties.id !== undefined) {this.id = properties.id;} - if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label;} + if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = properties.label; this.dirtyLabel = true;} if (properties.title !== undefined) {this.title = properties.title;} if (properties.x !== undefined) {this.x = properties.x;} if (properties.y !== undefined) {this.y = properties.y;} @@ -876,8 +877,6 @@ Node.prototype._drawText = function (ctx) { Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) { if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) { ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace; - ctx.textAlign = align || "center"; - ctx.textBaseline = baseline || "middle"; var lines = text.split('\n'); var lineCount = lines.length; @@ -909,6 +908,8 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo // draw text ctx.fillStyle = this.options.fontColor || "black"; + ctx.textAlign = align || "center"; + ctx.textBaseline = baseline || "middle"; for (var i = 0; i < lineCount; i++) { ctx.fillText(lines[i], x, yLine); yLine += fontSize;