Browse Source

added cacheing to edge labels, cannot cache node labels due to different shapes

v3_develop
Alex de Mulder 10 years ago
parent
commit
8e0f4733a1
3 changed files with 58 additions and 42 deletions
  1. +28
    -20
      dist/vis.js
  2. +26
    -19
      lib/network/Edge.js
  3. +4
    -3
      lib/network/Node.js

+ 28
- 20
dist/vis.js View File

@ -24545,6 +24545,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.preassignedLevel = false; this.preassignedLevel = false;
this.hierarchyEnumerated = false; this.hierarchyEnumerated = false;
this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
this.dirtyLabel = true;
this.imagelist = imagelist; this.imagelist = imagelist;
@ -24639,7 +24640,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.originalLabel = undefined; this.originalLabel = undefined;
// basic properties // basic properties
if (properties.id !== undefined) {this.id = properties.id;} 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.title !== undefined) {this.title = properties.title;}
if (properties.x !== undefined) {this.x = properties.x;} if (properties.x !== undefined) {this.x = properties.x;}
if (properties.y !== undefined) {this.y = properties.y;} 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) { Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) { if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) {
ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace; 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 lines = text.split('\n');
var lineCount = lines.length; var lineCount = lines.length;
@ -25400,6 +25399,8 @@ return /******/ (function(modules) { // webpackBootstrap
// draw text // draw text
ctx.fillStyle = this.options.fontColor || "black"; ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = align || "center";
ctx.textBaseline = baseline || "middle";
for (var i = 0; i < lineCount; i++) { for (var i = 0; i < lineCount; i++) {
ctx.fillText(lines[i], x, yLine); ctx.fillText(lines[i], x, yLine);
yLine += fontSize; yLine += fontSize;
@ -25555,6 +25556,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.selected = false; this.selected = false;
this.hover = false; this.hover = false;
this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
this.dirtyLabel = true;
this.from = null; // a node this.from = null; // a node
this.to = 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.to !== undefined) {this.toId = properties.to;}
if (properties.id !== undefined) {this.id = properties.id;} 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.title !== undefined) {this.title = properties.title;}
if (properties.value !== undefined) {this.value = properties.value;} if (properties.value !== undefined) {this.value = properties.value;}
@ -26061,37 +26063,43 @@ return /******/ (function(modules) { // webpackBootstrap
*/ */
Edge.prototype._label = function (ctx, text, x, y) { Edge.prototype._label = function (ctx, text, x, y) {
if (text) { if (text) {
// TODO: cache the calculated size
ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + 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") { if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
ctx.fillStyle = this.options.fontFill; 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 // draw text
ctx.fillStyle = this.options.fontColor || "black"; ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
yLine = this.labelDimensions.yLine;
for (var i = 0; i < lineCount; i++) { for (var i = 0; i < lineCount; i++) {
ctx.fillText(lines[i], x, yLine); ctx.fillText(lines[i], x, yLine);
yLine += fontSize; yLine += fontSize;

+ 26
- 19
lib/network/Edge.js View File

@ -39,6 +39,7 @@ function Edge (properties, network, networkConstants) {
this.selected = false; this.selected = false;
this.hover = false; this.hover = false;
this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
this.dirtyLabel = true;
this.from = null; // a node this.from = null; // a node
this.to = 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.to !== undefined) {this.toId = properties.to;}
if (properties.id !== undefined) {this.id = properties.id;} 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.title !== undefined) {this.title = properties.title;}
if (properties.value !== undefined) {this.value = properties.value;} 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) { Edge.prototype._label = function (ctx, text, x, y) {
if (text) { if (text) {
// TODO: cache the calculated size
ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") + 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") { if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
ctx.fillStyle = this.options.fontFill; 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 // draw text
ctx.fillStyle = this.options.fontColor || "black"; ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
yLine = this.labelDimensions.yLine;
for (var i = 0; i < lineCount; i++) { for (var i = 0; i < lineCount; i++) {
ctx.fillText(lines[i], x, yLine); ctx.fillText(lines[i], x, yLine);
yLine += fontSize; yLine += fontSize;

+ 4
- 3
lib/network/Node.js View File

@ -54,6 +54,7 @@ function Node(properties, imagelist, grouplist, networkConstants) {
this.preassignedLevel = false; this.preassignedLevel = false;
this.hierarchyEnumerated = false; this.hierarchyEnumerated = false;
this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
this.dirtyLabel = true;
this.imagelist = imagelist; this.imagelist = imagelist;
@ -148,7 +149,7 @@ Node.prototype.setProperties = function(properties, constants) {
this.originalLabel = undefined; this.originalLabel = undefined;
// basic properties // basic properties
if (properties.id !== undefined) {this.id = properties.id;} 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.title !== undefined) {this.title = properties.title;}
if (properties.x !== undefined) {this.x = properties.x;} if (properties.x !== undefined) {this.x = properties.x;}
if (properties.y !== undefined) {this.y = properties.y;} 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) { Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNode) {
if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) { if (text && Number(this.options.fontSize) * this.networkScale > this.fontDrawThreshold) {
ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace; 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 lines = text.split('\n');
var lineCount = lines.length; var lineCount = lines.length;
@ -909,6 +908,8 @@ Node.prototype._label = function (ctx, text, x, y, align, baseline, labelUnderNo
// draw text // draw text
ctx.fillStyle = this.options.fontColor || "black"; ctx.fillStyle = this.options.fontColor || "black";
ctx.textAlign = align || "center";
ctx.textBaseline = baseline || "middle";
for (var i = 0; i < lineCount; i++) { for (var i = 0; i < lineCount; i++) {
ctx.fillText(lines[i], x, yLine); ctx.fillText(lines[i], x, yLine);
yLine += fontSize; yLine += fontSize;

Loading…
Cancel
Save