Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

changes to node generation for faster working, based on mpil2's sugge… #176

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

changes to node generation for faster working, based on mpil2's sugge… #176

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
221 changes: 124 additions & 97 deletions Treant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@
element.style.height = height+'px';
}
},
isjQueryAvailable: function() {return(typeof ($) !== 'undefined' && $);}
isjQueryAvailable: function() {return(typeof ($) !== 'undefined' && $);},
};

/**
Expand Down Expand Up @@ -408,22 +408,20 @@
* @param {number} treeId
* @returns {Tree}
*/
this.reset = function( jsonConfig, treeId ) {
this.reset = function( jsonConfig, treeId ) {
this.initJsonConfig = jsonConfig;
this.initTreeId = treeId;

this.id = treeId;

this.CONFIG = UTIL.extend( Tree.CONFIG, jsonConfig.chart );
this.drawArea = UTIL.findEl( this.CONFIG.container, true );
if ( !this.drawArea ) {
throw new Error( 'Failed to find element by selector "'+this.CONFIG.container+'"' );
}

this.drawArea = document.createDocumentFragment();
this.testArea = UTIL.findEl( this.CONFIG.container, true );
UTIL.addClass( this.drawArea, 'Treant' );
UTIL.addClass( this.testArea, 'Treant' );

// kill of any child elements that may be there
this.drawArea.innerHTML = '';
this.testArea.innerHTML = '';

this.imageLoader = new ImageLoader();

Expand All @@ -434,6 +432,12 @@
this.connectionStore = {};

this.loaded = false;
var frag = this.drawArea;
this.drawArea = this.testArea;
this.drawArea.appendChild(frag);
if ( !this.drawArea ) {
throw new Error( 'Failed to find element by selector "'+this.CONFIG.container+'"' );
}

this._R = new Raphael( this.drawArea, 100, 100 );

Expand Down Expand Up @@ -466,6 +470,8 @@
* @returns {TreeNode}
*/
addNode: function( parentTreeNode, nodeDefinition ) {
var dbEntry = this.nodeDB.get( parentTreeNode.id );

this.CONFIG.callback.onBeforeAddNode.apply( this, [parentTreeNode, nodeDefinition] );

var oNewNode = this.nodeDB.createNode( nodeDefinition, parentTreeNode.id, this );
Expand Down Expand Up @@ -496,7 +502,8 @@
var self = this;

if ( this.imageLoader.isNotLoading() ) {
var root = this.root();
var root = this.root(),
orient = this.CONFIG.rootOrientation;

this.resetLevelData();

Expand Down Expand Up @@ -624,7 +631,7 @@
}

// find the gap between two trees and apply it to subTrees
// and matching smaller gaps to smaller subtrees
// and mathing smaller gaps to smaller subtrees

var totalGap = (firstChildLeftNeighbor.prelim + modifierSumLeft + firstChildLeftNeighbor.size() + this.CONFIG.subTeeSeparation) - (firstChild.prelim + modifierSumRight );

Expand Down Expand Up @@ -673,72 +680,70 @@
* RootOrientations of EAST or WEST.)
*/
secondWalk: function( node, level, X, Y ) {
if ( level > this.CONFIG.maxDepth ) {
return;
}

var xTmp = node.prelim + X,
yTmp = Y, align = this.CONFIG.nodeAlign,
orient = this.CONFIG.rootOrientation,
levelHeight, nodesizeTmp;
if ( level <= this.CONFIG.maxDepth ) {
var xTmp = node.prelim + X,
yTmp = Y, align = this.CONFIG.nodeAlign,
orient = this.CONFIG.rootOrientation,
levelHeight, nodesizeTmp;

if (orient === 'NORTH' || orient === 'SOUTH') {
levelHeight = this.levelMaxDim[level].height;
nodesizeTmp = node.height;
if (node.pseudo) {
node.height = levelHeight;
} // assign a new size to pseudo nodes
}
else if (orient === 'WEST' || orient === 'EAST') {
levelHeight = this.levelMaxDim[level].width;
nodesizeTmp = node.width;
if (node.pseudo) {
node.width = levelHeight;
} // assign a new size to pseudo nodes
}

node.X = xTmp;

if (node.pseudo) { // pseudo nodes need to be properly aligned, otherwise position is not correct in some examples
if (orient === 'NORTH' || orient === 'WEST') {
node.Y = yTmp; // align "BOTTOM"
}
else if (orient === 'SOUTH' || orient === 'EAST') {
node.Y = (yTmp + (levelHeight - nodesizeTmp)); // align "TOP"
}

if (orient === 'NORTH' || orient === 'SOUTH') {
levelHeight = this.levelMaxDim[level].height;
nodesizeTmp = node.height;
if (node.pseudo) {
node.height = levelHeight;
} // assign a new size to pseudo nodes
}
else if (orient === 'WEST' || orient === 'EAST') {
levelHeight = this.levelMaxDim[level].width;
nodesizeTmp = node.width;
if (node.pseudo) {
node.width = levelHeight;
} // assign a new size to pseudo nodes
}
} else {
node.Y = ( align === 'CENTER' ) ? (yTmp + (levelHeight - nodesizeTmp) / 2) :
( align === 'TOP' ) ? (yTmp + (levelHeight - nodesizeTmp)) :
yTmp;
}

node.X = xTmp;
if ( orient === 'WEST' || orient === 'EAST' ) {
var swapTmp = node.X;
node.X = node.Y;
node.Y = swapTmp;
}

if (node.pseudo) { // pseudo nodes need to be properly aligned, otherwise position is not correct in some examples
if (orient === 'NORTH' || orient === 'WEST') {
node.Y = yTmp; // align "BOTTOM"
if (orient === 'SOUTH' ) {
node.Y = -node.Y - nodesizeTmp;
}
else if (orient === 'SOUTH' || orient === 'EAST') {
node.Y = (yTmp + (levelHeight - nodesizeTmp)); // align "TOP"
else if ( orient === 'EAST' ) {
node.X = -node.X - nodesizeTmp;
}

} else {
node.Y = ( align === 'CENTER' ) ? (yTmp + (levelHeight - nodesizeTmp) / 2) :
( align === 'TOP' ) ? (yTmp + (levelHeight - nodesizeTmp)) :
yTmp;
}

if ( orient === 'WEST' || orient === 'EAST' ) {
var swapTmp = node.X;
node.X = node.Y;
node.Y = swapTmp;
}

if (orient === 'SOUTH' ) {
node.Y = -node.Y - nodesizeTmp;
}
else if ( orient === 'EAST' ) {
node.X = -node.X - nodesizeTmp;
}

if ( node.childrenCount() !== 0 ) {
if ( node.id === 0 && this.CONFIG.hideRootNode ) {
// ako je root node Hiden onda nemoj njegovu dijecu pomaknut po Y osi za Level separation, neka ona budu na vrhu
this.secondWalk(node.firstChild(), level + 1, X + node.modifier, Y);
if ( node.childrenCount() !== 0 ) {
if ( node.id === 0 && this.CONFIG.hideRootNode ) {
// ako je root node Hiden onda nemoj njegovu dijecu pomaknut po Y osi za Level separation, neka ona budu na vrhu
this.secondWalk(node.firstChild(), level + 1, X + node.modifier, Y);
}
else {
this.secondWalk(node.firstChild(), level + 1, X + node.modifier, Y + levelHeight + this.CONFIG.levelSeparation);
}
}
else {
this.secondWalk(node.firstChild(), level + 1, X + node.modifier, Y + levelHeight + this.CONFIG.levelSeparation);

if ( node.rightSibling() ) {
this.secondWalk( node.rightSibling(), level, X, Y );
}
}

if ( node.rightSibling() ) {
this.secondWalk( node.rightSibling(), level, X, Y );
}
},

/**
Expand Down Expand Up @@ -778,6 +783,8 @@
i, len, node;

// position all the nodes
var dacw = this.drawArea.clientWidth;
var dach = this.drawArea.clientHeight;
for ( i = 0, len = this.nodeDB.db.length; i < len; i++ ) {

node = this.nodeDB.get(i);
Expand All @@ -790,8 +797,8 @@
}

// if the tree is smaller than the draw area, then center the tree within drawing area
node.X += negOffsetX + ((treeWidth < this.drawArea.clientWidth) ? deltaX : this.CONFIG.padding);
node.Y += negOffsetY + ((treeHeight < this.drawArea.clientHeight) ? deltaY : this.CONFIG.padding);
node.X += negOffsetX + ((treeWidth < dacw) ? deltaX : this.CONFIG.padding);
node.Y += negOffsetY + ((treeHeight < dach) ? deltaY : this.CONFIG.padding);

var collapsedParent = node.collapsedParent(),
hidePoint = null;
Expand Down Expand Up @@ -875,7 +882,7 @@
} // else this.CONFIG.scrollbar == 'None'

return this;
},
},
/**
* @param {TreeNode} treeNode
* @param {boolean} hidePoint
Expand Down Expand Up @@ -995,8 +1002,8 @@
if ( stacked ) { // STACKED CHILDREN

stackPoint = (orientation === 'EAST' || orientation === 'WEST')?
endPoint.x+','+startPoint.y:
startPoint.x+','+endPoint.y;
endPoint.x+','+startPoint.y:
startPoint.x+','+endPoint.y;

if ( connType === "step" || connType === "straight" ) {
pathString = ["M", sp, 'L', stackPoint, 'L', ep];
Expand Down Expand Up @@ -1254,9 +1261,9 @@
parent = parent || this.get(0);

MinMax = MinMax || { // start with root node dimensions
min: parent[dim],
max: parent[dim] + ( ( dim === 'X' )? parent.width: parent.height )
};
min: parent[dim],
max: parent[dim] + ( ( dim === 'X' )? parent.width: parent.height )
};

var i = parent.childrenCount();

Expand All @@ -1281,15 +1288,15 @@
* @param {object} nodeStructure
* @returns {boolean}
*/
hasGrandChildren: function (nodeStructure) {
var i = nodeStructure.children.length;
while (i--) {
if (nodeStructure.children[i].children && nodeStructure.children[i].children.length > 0) {
return true;
}
}
return false;
}
hasGrandChildren: function( nodeStructure ) {
var i = nodeStructure.children.length;
while ( i-- ) {
if ( nodeStructure.children[i].children ) {
return true;
}
}
return false;
}
};

/**
Expand Down Expand Up @@ -1331,6 +1338,9 @@

this.meta = nodeStructure.meta || {};
this.image = nodeStructure.image || null;
this.imageUrl = nodeStructure.imageUrl || null;
this.imageHint = nodeStructure.imageHint || null;
this.hint = nodeStructure.hint || null;

this.link = UTIL.createMerge( tree.CONFIG.node.link, nodeStructure.link );

Expand Down Expand Up @@ -1757,7 +1767,8 @@
return this;
},

show: function() {
show: function() {
var bCurrentState = this.hidden;
this.hidden = false;

this.nodeDOM.style.visibility = 'visible';
Expand Down Expand Up @@ -1842,7 +1853,22 @@
if (this.image) {
image = document.createElement('img');
image.src = this.image;
node.appendChild(image);
if(this.imageHint)
image.title = this.imageHint;
if(this.imageUrl) {
var eUrl = document.createElement('a');
eUrl.href = this.imageUrl;
eUrl.target = '_blank';
node.appendChild(eUrl);
eUrl.appendChild(image);
} else {
node.appendChild(image);
}
}

// hint
if(this.hint) {
node.title = this.hint;
}

// TEXT
Expand All @@ -1852,24 +1878,24 @@
if (key.startsWith("data-")) {
node.setAttribute(key, this.text[key]);
} else {

var textElement = document.createElement(this.text[key].href ? 'a' : 'p');

// make an <a> element if required
if (this.text[key].href) {
textElement.href = this.text[key].href;
if (this.text[key].target) {
textElement.target = this.text[key].target;
}
}

textElement.className = "node-"+key;
textElement.appendChild(document.createTextNode(
this.text[key].val ? this.text[key].val :
this.text[key] instanceof Object ? "'val' param missing!" : this.text[key]
)
this.text[key].val ? this.text[key].val :
this.text[key] instanceof Object ? "'val' param missing!" : this.text[key]
)
);

node.appendChild(textElement);
}
}
Expand Down Expand Up @@ -1945,7 +1971,7 @@

/////////// BUILD NODE CONTENT //////////////
if ( !this.pseudo ) {
node = this.nodeInnerHTML? this.buildNodeFromHtml(node) : this.buildNodeFromText(node);
node = this.nodeInnerHTML? this.buildNodeFromHtml(node) : this.buildNodeFromText(node)

// handle collapse switch
if ( this.collapsed || (this.collapsable && this.childrenCount() && !this.stackParentId) ) {
Expand All @@ -1956,10 +1982,11 @@
tree.CONFIG.callback.onCreateNode.apply( tree, [this, node] );

/////////// APPEND all //////////////
drawArea.appendChild(node);

tree.testArea.appendChild(node);
this.width = node.offsetWidth;
this.height = node.offsetHeight;
tree.testArea.removeChild(node);
drawArea.appendChild(node);

this.nodeDOM = node;

Expand Down Expand Up @@ -2166,4 +2193,4 @@
/* expose constructor globally */
window.Treant = Treant;

})();
})();