Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-09 15:10:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Node drawing moved to GraphCanvas

Browse Source
This commit is contained in:
tamat
2013-10-23 19:23:50 +02:00
parent d9d998336d
commit 2b3503640e
31 changed files with 16321 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

692
build/litegraph.js
View File

@@ -18,9 +18,10 @@ var LiteGraph = {
NODE_WIDTH: 140,
NODE_MIN_WIDTH: 50,
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_DEFAULT_COLOR: "#888",
NODE_DEFAULT_BGCOLOR: "#333",
NODE_DEFAULT_COLOR: "#999",
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#AEF",
NODE_DEFAULT_SHAPE: "box",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
@@ -1167,7 +1168,7 @@ LGraphNode.prototype.computeSize = function(minHeight)
//returns the bounding of the object, used for rendering purposes
LGraphNode.prototype.getBounding = function()
{
return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
}
//checks if a point is inside the shape of a node
@@ -1176,7 +1177,8 @@ LGraphNode.prototype.isPointInsideNode = function(x,y)
var margin_top = this.graph.isLive() ? 0 : 20;
if(this.flags.collapsed)
{
if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
if( isInsideRectangle(x,y, this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_COLLAPSED_WIDTH, LiteGraph.NODE_TITLE_HEIGHT) )
return true;
}
else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x
@@ -1385,7 +1387,13 @@ LGraphNode.prototype.disconnectInput = function(slot)
LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
{
if(this.flags.collapsed)
return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
{
if(is_input)
return [this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
else
return [this.pos[0] + LiteGraph.NODE_COLLAPSED_WIDTH, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
//return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
}
if(is_input && slot_number == -1)
{
@@ -1402,331 +1410,6 @@ LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT];
}
/* Renders the LGraphNode on the canvas */
LGraphNode.prototype.draw = function(ctx, canvasrender)
{
var glow = false;
var color = this.color || LiteGraph.NODE_DEFAULT_COLOR;
//if (this.selected) color = "#88F";
var render_title = true;
if(this.flags.skip_title_render || this.graph.isLive())
render_title = false;
if(this.mouseOver)
render_title = true;
//shadow and glow
if (this.mouseOver) glow = true;
if(this.selected)
{
/*
ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 1;
*/
}
else if(canvasrender.render_shadows)
{
ctx.shadowColor = "#111";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 4;
}
else
ctx.shadowColor = "transparent";
//only render if it forces it to do it
if(canvasrender.live_mode)
{
if(!this.flags.collapsed)
{
ctx.shadowColor = "transparent";
if(this.onDrawBackground)
this.onDrawBackground(ctx);
if(this.onDrawForeground)
this.onDrawForeground(ctx);
}
return;
}
//draw in collapsed form
if(this.flags.collapsed)
{
if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false)
this.drawNodeCollapsed(ctx,color,this.bgcolor);
return;
}
//clip if required (mask)
if(this.flags.clip_area)
{
ctx.save();
if(this.shape == null || this.shape == "box")
{
ctx.beginPath();
ctx.rect(0,0,this.size[0], this.size[1]);
}
else if (this.shape == "round")
{
ctx.roundRect(0,0,this.size[0], this.size[1],10);
}
else if (this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
}
ctx.clip();
}
//draw shape
this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected );
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.font = "12px Arial";
var render_text = this.graph.config.canvas_scale > 0.6;
//input connection slots
if(this.inputs)
for(var i = 0; i < this.inputs.length; i++)
{
var slot = this.inputs[i];
ctx.globalAlpha = 1.0;
if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type)
ctx.globalAlpha = 0.4;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
var pos = this.getConnectionPos(true,i);
pos[0] -= this.pos[0];
pos[1] -= this.pos[1];
ctx.beginPath();
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
ctx.fill();
//render name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
//output connection slots
if(canvasrender.connecting_node)
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
ctx.textAlign = "right";
ctx.strokeStyle = "black";
if(this.outputs)
for(var i = 0; i < this.outputs.length; i++)
{
var slot = this.outputs[i];
var pos = this.getConnectionPos(false,i);
pos[0] -= this.pos[0];
pos[1] -= this.pos[1];
ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
ctx.beginPath();
//ctx.rect( this.size[0] - 14,i*14,10,10);
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
//trigger
//if(slot.node_id != null && slot.slot == -1)
// ctx.fillStyle = "#F85";
//if(slot.links != null && slot.links.length)
ctx.fill();
ctx.stroke();
//render output name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
ctx.textAlign = "left";
ctx.globalAlpha = 1.0;
if(this.onDrawForeground)
this.onDrawForeground(ctx);
if(this.flags.clip_area)
ctx.restore();
}
/* Renders the node shape */
LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected )
{
//bg rect
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
/* gradient test
var grad = ctx.createLinearGradient(0,0,0,this.size[1]);
grad.addColorStop(0, "#AAA");
grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
ctx.fillStyle = grad;
*/
var title_height = LiteGraph.NODE_TITLE_HEIGHT;
//render depending on shape
if(this.shape == null || this.shape == "box")
{
if(selected)
{
ctx.strokeStyle = "#CCC";
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) );
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height);
}
else if (this.shape == "round")
{
ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10);
}
else if (this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
}
ctx.fill();
ctx.shadowColor = "transparent";
ctx.stroke();
//image
if (this.bgImage && this.bgImage.width)
ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5);
if(this.bgImageUrl && !this.bgImage)
this.bgImage = this.loadImage(this.bgImageUrl);
if(this.onDrawBackground)
this.onDrawBackground(ctx);
//title bg
if(!no_title)
{
ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
if(this.shape == null || this.shape == "box")
{
ctx.fillRect(0,-title_height,this.size[0],title_height);
ctx.stroke();
}
else if (this.shape == "round")
{
ctx.roundRect(0,-title_height,this.size[0], title_height,10,0);
//ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
}
//box
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
if (this.shape == "round")
ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
else
ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
ctx.fill();
//title text
ctx.font = "bold 12px Arial";
if(this.name != "" && this.graph.config.canvas_scale > 0.8)
{
ctx.fillStyle = "#222";
ctx.fillText(this.name,16,13-title_height );
}
}
}
/* Renders the node when collapsed */
LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor)
{
//draw default collapsed shape
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
//circle shape
if(this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
ctx.fill();
}
else if(this.shape == "round") //rounded box
{
ctx.beginPath();
ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
ctx.fill();
}
else //flat box
{
ctx.beginPath();
ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
ctx.fill();
}
}
/* Force align to grid */
LGraphNode.prototype.alignToGrid = function()
{
@@ -2947,14 +2630,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
for (var i in visible_nodes)
{
var n = visible_nodes[i];
var node = visible_nodes[i];
//transform coords system
ctx.save();
ctx.translate( n.pos[0], n.pos[1] );
ctx.translate( node.pos[0], node.pos[1] );
//Draw
n.draw(ctx,this);
this.drawNode(node, ctx );
drawn_nodes += 1;
//Restore
@@ -3091,6 +2774,349 @@ LGraphCanvas.prototype.drawBgcanvas = function()
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
}
/* Renders the LGraphNode on the canvas */
LGraphCanvas.prototype.drawNode = function(node, ctx )
{
var glow = false;
var color = node.color || LiteGraph.NODE_DEFAULT_COLOR;
//if (this.selected) color = "#88F";
var render_title = true;
if(node.flags.skip_title_render || node.graph.isLive())
render_title = false;
if(node.mouseOver)
render_title = true;
//shadow and glow
if (node.mouseOver) glow = true;
if(node.selected)
{
/*
ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 1;
*/
}
else if(this.render_shadows)
{
ctx.shadowColor = "#111";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 4;
}
else
ctx.shadowColor = "transparent";
//only render if it forces it to do it
if(this.live_mode)
{
if(!node.flags.collapsed)
{
ctx.shadowColor = "transparent";
if(node.onDrawBackground)
node.onDrawBackground(ctx);
if(node.onDrawForeground)
node.onDrawForeground(ctx);
}
return;
}
//draw in collapsed form
/*
if(node.flags.collapsed)
{
if(!node.onDrawCollapsed || node.onDrawCollapsed(ctx) == false)
this.drawNodeCollapsed(node, ctx, color, node.bgcolor);
return;
}
*/
//clip if required (mask)
var shape = node.shape || "box";
var size = new Float32Array(node.size);
if(node.flags.collapsed)
size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
//Start cliping
if(node.flags.clip_area)
{
ctx.save();
if(shape == "box")
{
ctx.beginPath();
ctx.rect(0,0,size[0], size[1]);
}
else if (shape == "round")
{
ctx.roundRect(0,0,size[0], size[1],10);
}
else if (shape == "circle")
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
}
ctx.clip();
}
//draw shape
this.drawNodeShape(node, ctx, size, color, node.bgcolor, !render_title, node.selected );
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.font = "12px Arial";
var render_text = node.graph.config.canvas_scale > 0.6;
//render inputs and outputs
if(!node.flags.collapsed)
{
//input connection slots
if(node.inputs)
for(var i = 0; i < node.inputs.length; i++)
{
var slot = node.inputs[i];
ctx.globalAlpha = 1.0;
if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
ctx.globalAlpha = 0.4;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
var pos = node.getConnectionPos(true,i);
pos[0] -= node.pos[0];
pos[1] -= node.pos[1];
ctx.beginPath();
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
ctx.fill();
//render name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
//output connection slots
if(this.connecting_node)
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
ctx.textAlign = "right";
ctx.strokeStyle = "black";
if(node.outputs)
for(var i = 0; i < node.outputs.length; i++)
{
var slot = node.outputs[i];
var pos = node.getConnectionPos(false,i);
pos[0] -= node.pos[0];
pos[1] -= node.pos[1];
ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
ctx.beginPath();
//ctx.rect( node.size[0] - 14,i*14,10,10);
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
//trigger
//if(slot.node_id != null && slot.slot == -1)
// ctx.fillStyle = "#F85";
//if(slot.links != null && slot.links.length)
ctx.fill();
ctx.stroke();
//render output name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
ctx.textAlign = "left";
ctx.globalAlpha = 1.0;
if(node.onDrawForeground)
node.onDrawForeground(ctx);
}//!collapsed
if(node.flags.clip_area)
ctx.restore();
}
/* Renders the node shape */
LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolor, no_title, selected )
{
//bg rect
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
/* gradient test
var grad = ctx.createLinearGradient(0,0,0,node.size[1]);
grad.addColorStop(0, "#AAA");
grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
ctx.fillStyle = grad;
*/
var title_height = LiteGraph.NODE_TITLE_HEIGHT;
//render depending on shape
var shape = node.shape || "box";
if(shape == "box")
{
if(selected)
{
ctx.strokeStyle = "#CCC";
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0,no_title ? 0.5 : -title_height + 1,size[0]+1, no_title ? size[1] : size[1] + title_height);
}
else if (node.shape == "round")
{
ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
}
else if (node.shape == "circle")
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
}
ctx.fill();
ctx.shadowColor = "transparent";
//ctx.stroke();
//image
if (node.bgImage && node.bgImage.width)
ctx.drawImage( node.bgImage, (size[0] - node.bgImage.width) * 0.5 , (size[1] - node.bgImage.height) * 0.5);
if(node.bgImageUrl && !node.bgImage)
node.bgImage = node.loadImage(node.bgImageUrl);
if(node.onDrawBackground)
node.onDrawBackground(ctx);
//title bg
if(!no_title)
{
ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
if(shape == "box")
{
ctx.beginPath();
ctx.fillRect(0,-title_height,size[0]+1,title_height);
ctx.stroke();
}
else if (shape == "round")
{
ctx.roundRect(0,-title_height,size[0], title_height,10,0);
//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
}
//box
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
if (shape == "round")
ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
else
ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
ctx.fill();
//title text
ctx.font = "bold 12px Arial";
if(node.name != "" && node.graph.config.canvas_scale > 0.8)
{
ctx.fillStyle = "#222";
ctx.fillText(node.name,16,13-title_height );
}
}
}
/* Renders the node when collapsed */
LGraphCanvas.prototype.drawNodeCollapsed = function(node, ctx, fgcolor, bgcolor)
{
//draw default collapsed shape
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
//circle shape
var shape = node.shape || "box";
if(shape == "circle")
{
ctx.beginPath();
ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
ctx.fill();
}
else if(shape == "round") //rounded box
{
ctx.beginPath();
ctx.roundRect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.roundRect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
ctx.fill();
}
else //flat box
{
ctx.beginPath();
//ctx.rect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius, 2*collapsed_radius);
ctx.rect(0, 0, node.size[0], collapsed_radius * 2 );
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
//ctx.rect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
ctx.rect(collapsed_radius*0.5, collapsed_radius*0.5, collapsed_radius, collapsed_radius);
ctx.fill();
}
}
LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"];
LGraphCanvas.prototype.drawConnections = function(ctx)

48
build/litegraph.min.js vendored
View File

@@ -1,8 +1,8 @@
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#888",NODE_DEFAULT_BGCOLOR:"#333",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,
c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;var e=d.prototype||d;b=b||e.title||d.title||a;var f=null;if(d.prototype)f=new d(b);else{f=new LGraphNode(b);f.inputs=[];f.outputs=[];for(var g in e)if("inputs"==g)for(var h in e[g])f.addInput(e[g][h][0],e[g][h][1],
e[g][h][2]);else if("outputs"==g)for(h in e[g])f.addOutput(e[g][h][0],e[g][h][1],e[g][h][2]);else f[g]=e[g].concat?e[g].concat():"object"==typeof e[g]?jQuery.extend({},e[g]):e[g];d.size&&(f.size=d.size.concat())}f.type=a;f.name||(f.name=b);f.flags||(f.flags={});f.size||(f.size=f.computeSize());f.pos||(f.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(g in c)f[g]=c[g];return f},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==
a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=
[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}for(d in LiteGraph.graphs)for(var h in LiteGraph.graphs[d].nodes)if(a=LiteGraph.graphs[d].nodes[h],
var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");
b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;var e=d.prototype||d;b=b||e.title||d.title||a;var f=null;if(d.prototype)f=new d(b);else{f=new LGraphNode(b);f.inputs=[];f.outputs=[];for(var g in e)if("inputs"==g)for(var h in e[g])f.addInput(e[g][h][0],
e[g][h][1],e[g][h][2]);else if("outputs"==g)for(h in e[g])f.addOutput(e[g][h][0],e[g][h][1],e[g][h][2]);else f[g]=e[g].concat?e[g].concat():"object"==typeof e[g]?jQuery.extend({},e[g]):e[g];d.size&&(f.size=d.size.concat())}f.type=a;f.name||(f.name=b);f.flags||(f.flags={});f.size||(f.size=f.computeSize());f.pos||(f.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(g in c)f[g]=c[g];return f},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;
for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),
c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}for(d in LiteGraph.graphs)for(var h in LiteGraph.graphs[d].nodes)if(a=LiteGraph.graphs[d].nodes[h],
c=LiteGraph.getNodeType(n.type))for(var k in c)"function"==typeof c[k]&&(a[k]=c[k]);LiteGraph.debug&&console.log("Nodes reloaded")}};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.canvas=null;LiteGraph.graphs.push(this);this.clear()}LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2;
LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this.nodes=[];this.nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={canvas_offset:[0,0],canvas_scale:1};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.graph={};this.debug=!0;this.change();this.canvas&&this.canvas.clear()};
LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=(new Date).getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}};
@@ -27,28 +27,18 @@ LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a<this.inpu
LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.outputs.length)return null;if(a<this.outputs.length){a=this.outputs[a];for(var b=[],c=0;c<a.length;c++)b.push(this.graph.getNodeById(a.links[c][3]));return b}return null};LGraphNode.prototype.triggerOutput=function(a,b){var c=this.getOutputNode(a);if(c&&c.onTrigger)c.onTrigger(b)};
LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);this.size=this.computeSize()};LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize()};
LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);this.inputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};
LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph.isLive()?0:20;if(this.flags.collapsed){if(distance([a,b],[this.pos[0]+0.5*this.size[0],this.pos[1]+0.5*this.size[1]])<LiteGraph.NODE_COLLAPSED_RADIUS)return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};
LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph.isLive()?0:20;if(this.flags.collapsed){if(isInsideRectangle(a,b,this.pos[0],this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_COLLAPSED_WIDTH,LiteGraph.NODE_TITLE_HEIGHT))return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};
LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
LGraphNode.prototype.connect=function(a,b,c){c=c||0;if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&&
console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a=[this.graph.last_link_id++,this.id,a,b.id,c],null==d.links&&(d.links=[]),d.links.push(a),b.inputs[c].link=a,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange();return!0};
LGraphNode.prototype.disconnectOutput=function(a,b){if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d<e;d++){var f=c.links[d];if(f[3]==b.id){c.links.splice(d,1);b.inputs[f[4]].link=null;delete this.graph.links[f[0]];
break}}else{d=0;for(e=c.links.length;d<e;d++)if(f=c.links[d],b=this.graph.getNodeById(f[3]))b.inputs[f[4]].link=null;c.links=null}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a=this.findInputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.inputs||a>=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;a=this.graph.getNodeById(b[1]);if(!a)return!1;a=a.outputs[b[2]];if(!a||!a.links||0==a.links.length)return!1;for(var c=
0,d=a.links.length;c<d;c++)if(b=a.links[c],b[3]==this.id){a.links.splice(c,1);break}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?[this.pos[0]+0.5*this.size[0],this.pos[1]+0.5*this.size[1]]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,
this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};
LGraphNode.prototype.draw=function(a,b){var c=this.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(this.flags.skip_title_render||this.graph.isLive())d=!1;this.mouseOver&&(d=!0);this.selected||(b.render_shadows?(a.shadowColor="#111",a.shadowOffsetX=2,a.shadowOffsetY=2,a.shadowBlur=4):a.shadowColor="transparent");if(b.live_mode){if(!this.flags.collapsed){a.shadowColor="transparent";if(this.onDrawBackground)this.onDrawBackground(a);if(this.onDrawForeground)this.onDrawForeground(a)}}else if(this.flags.collapsed)this.onDrawCollapsed&&!1!=
this.onDrawCollapsed(a)||this.drawNodeCollapsed(a,c,this.bgcolor);else{this.flags.clip_area&&(a.save(),null==this.shape||"box"==this.shape?(a.beginPath(),a.rect(0,0,this.size[0],this.size[1])):"round"==this.shape?a.roundRect(0,0,this.size[0],this.size[1],10):"circle"==this.shape&&(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*this.size[0],0,2*Math.PI)),a.clip());this.drawNodeShape(a,c,this.bgcolor,!d,this.selected);a.shadowColor="transparent";a.textAlign="left";a.font="12px Arial";d=0.6<
this.graph.config.canvas_scale;if(this.inputs)for(var e=0;e<this.inputs.length;e++){var f=this.inputs[e];a.globalAlpha=1;null!=b.connecting_node&&0!=b.connecting_output.type&&0!=this.inputs[e].type&&b.connecting_output.type!=this.inputs[e].type&&(a.globalAlpha=0.4);a.fillStyle=null!=f.link?"#7F7":"#AAA";var g=this.getConnectionPos(!0,e);g[0]-=this.pos[0];g[1]-=this.pos[1];a.beginPath();a.arc(g[0],g[1],4,0,2*Math.PI);a.fill();d&&(f=null!=f.label?f.label:f.name)&&(a.fillStyle=c,a.fillText(f,g[0]+10,
g[1]+5))}b.connecting_node&&(a.globalAlpha=0.4);a.lineWidth=1;a.textAlign="right";a.strokeStyle="black";if(this.outputs)for(e=0;e<this.outputs.length;e++)if(f=this.outputs[e],g=this.getConnectionPos(!1,e),g[0]-=this.pos[0],g[1]-=this.pos[1],a.fillStyle=f.links&&f.links.length?"#7F7":"#AAA",a.beginPath(),a.arc(g[0],g[1],4,0,2*Math.PI),a.fill(),a.stroke(),d&&(f=null!=f.label?f.label:f.name))a.fillStyle=c,a.fillText(f,g[0]-10,g[1]+5);a.textAlign="left";a.globalAlpha=1;if(this.onDrawForeground)this.onDrawForeground(a);
this.flags.clip_area&&a.restore()}};
LGraphNode.prototype.drawNodeShape=function(a,b,c,d,e){a.strokeStyle=b||LiteGraph.NODE_DEFAULT_COLOR;a.fillStyle=c||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_TITLE_HEIGHT;null==this.shape||"box"==this.shape?(e&&(a.strokeStyle="#CCC",a.strokeRect(-0.5,d?-0.5:-c+-0.5,this.size[0]+2,d?this.size[1]+2:this.size[1]+c+2),a.strokeStyle=b),a.beginPath(),a.rect(0.5,d?0.5:-c+0.5,this.size[0],d?this.size[1]:this.size[1]+c)):"round"==this.shape?a.roundRect(0,d?0:-c,this.size[0],d?this.size[1]:this.size[1]+
c,10):"circle"==this.shape&&(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*this.size[0],0,2*Math.PI));a.fill();a.shadowColor="transparent";a.stroke();this.bgImage&&this.bgImage.width&&a.drawImage(this.bgImage,0.5*(this.size[0]-this.bgImage.width),0.5*(this.size[1]-this.bgImage.height));this.bgImageUrl&&!this.bgImage&&(this.bgImage=this.loadImage(this.bgImageUrl));if(this.onDrawBackground)this.onDrawBackground(a);d||(a.fillStyle=b||LiteGraph.NODE_DEFAULT_COLOR,null==this.shape||"box"==
this.shape?(a.fillRect(0,-c,this.size[0],c),a.stroke()):"round"==this.shape&&(a.roundRect(0,-c,this.size[0],c,10,0),a.fill(),a.stroke()),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),"round"==this.shape?a.arc(0.5*c,-0.5*c,0.5*(c-6),0,2*Math.PI):a.rect(3,-c+3,c-6,c-6),a.fill(),a.font="bold 12px Arial",""!=this.name&&0.8<this.graph.config.canvas_scale&&(a.fillStyle="#222",a.fillText(this.name,16,13-c)))};
LGraphNode.prototype.drawNodeCollapsed=function(a,b,c){a.strokeStyle=b||LiteGraph.NODE_DEFAULT_COLOR;a.fillStyle=c||LiteGraph.NODE_DEFAULT_BGCOLOR;b=LiteGraph.NODE_COLLAPSED_RADIUS;"circle"==this.shape?(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],b,0,2*Math.PI),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*b,0,2*Math.PI)):"round"==this.shape?(a.beginPath(),a.roundRect(0.5*
this.size[0]-b,0.5*this.size[1]-b,2*b,2*b,5),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.roundRect(0.5*this.size[0]-0.5*b,0.5*this.size[1]-0.5*b,b,b,2)):(a.beginPath(),a.rect(0.5*this.size[0]-b,0.5*this.size[1]-b,2*b,2*b),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.rect(0.5*this.size[0]-0.5*b,0.5*this.size[1]-0.5*b,b,b));a.fill()};
LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?jQuery.extend({},a[c]):a[c])};
LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?a?[this.pos[0],this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:[this.pos[0]+LiteGraph.NODE_COLLAPSED_WIDTH,this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:
a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};
LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?jQuery.extend({},a[c]):a[c])};
LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type);a.size=this.size.concat();if(this.inputs)for(var b=0,c=this.inputs.length;b<c;++b)-1==a.findInputSlot(this.inputs[b].name)&&a.addInput(this.inputs[b].name,this.inputs[b].type);if(this.outputs)for(b=0,c=this.outputs.length;b<c;++b)-1==a.findOutputSlot(this.outputs[b].name)&&a.addOutput(this.outputs[b].name,this.outputs[b].type);return a};
LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.canvas&&(a&&(this.graph.canvas.dirty_canvas=!0),b&&(this.graph.canvas.dirty_bgcanvas=!0))};
LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
@@ -91,11 +81,21 @@ LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.g
LGraphCanvas.prototype.draw=function(a,b){var c=(new Date).getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.graph.config.canvas_offset[0],-this.graph.config.canvas_offset[1]],d=[c[0]+this.canvas.width/this.graph.config.canvas_scale,c[1]+this.canvas.height/this.graph.config.canvas_scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=
this.render_time?1/this.render_time:0;this.frame+=1};
LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);a.drawImage(this.bgcanvas,0,0);this.show_info&&(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+
this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);a.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);d.draw(a,this);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&
(a.lineWidth=LGraphCanvas.link_width,a.fillStyle="node"==this.connecting_output.type?"#F85":"#AFA",a.strokeStyle=a.fillStyle,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]]),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();this.dirty_canvas=!1};
this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);a.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=
this.connecting_pos&&(a.lineWidth=LGraphCanvas.link_width,a.fillStyle="node"==this.connecting_output.type?"#F85":"#AFA",a.strokeStyle=a.fillStyle,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]]),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();
this.dirty_canvas=!1};
LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);b.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);if(this.background_image&&0.5<this.graph.config.canvas_scale){b.globalAlpha=1-0.5/this.graph.config.canvas_scale;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=
!1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],
this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.live_mode||this.drawConnections(b);b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.live_mode||this.drawConnections(b);b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
LGraphCanvas.prototype.drawNode=function(a,b){var c=a.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(a.flags.skip_title_render||a.graph.isLive())d=!1;a.mouseOver&&(d=!0);a.selected||(this.render_shadows?(b.shadowColor="#111",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=4):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed){b.shadowColor="transparent";if(a.onDrawBackground)a.onDrawBackground(b);if(a.onDrawForeground)a.onDrawForeground(b)}}else{var e=a.shape||"box",f=new Float32Array(a.size);
a.flags.collapsed&&f.set([LiteGraph.NODE_COLLAPSED_WIDTH,0]);a.flags.clip_area&&(b.save(),"box"==e?(b.beginPath(),b.rect(0,0,f[0],f[1])):"round"==e?b.roundRect(0,0,f[0],f[1],10):"circle"==e&&(b.beginPath(),b.arc(0.5*f[0],0.5*f[1],0.5*f[0],0,2*Math.PI)),b.clip());this.drawNodeShape(a,b,f,c,a.bgcolor,!d,a.selected);b.shadowColor="transparent";b.textAlign="left";b.font="12px Arial";d=0.6<a.graph.config.canvas_scale;if(!a.flags.collapsed){if(a.inputs)for(e=0;e<a.inputs.length;e++){var g=a.inputs[e];b.globalAlpha=
1;null!=this.connecting_node&&0!=this.connecting_output.type&&0!=a.inputs[e].type&&this.connecting_output.type!=a.inputs[e].type&&(b.globalAlpha=0.4);b.fillStyle=null!=g.link?"#7F7":"#AAA";f=a.getConnectionPos(!0,e);f[0]-=a.pos[0];f[1]-=a.pos[1];b.beginPath();b.arc(f[0],f[1],4,0,2*Math.PI);b.fill();d&&(g=null!=g.label?g.label:g.name)&&(b.fillStyle=c,b.fillText(g,f[0]+10,f[1]+5))}this.connecting_node&&(b.globalAlpha=0.4);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";if(a.outputs)for(e=0;e<
a.outputs.length;e++)if(g=a.outputs[e],f=a.getConnectionPos(!1,e),f[0]-=a.pos[0],f[1]-=a.pos[1],b.fillStyle=g.links&&g.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(f[0],f[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(g=null!=g.label?g.label:g.name))b.fillStyle=c,b.fillText(g,f[0]-10,f[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore()}};
LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=e||LiteGraph.NODE_DEFAULT_BGCOLOR;e=LiteGraph.NODE_TITLE_HEIGHT;var h=a.shape||"box";"box"==h?(g&&(b.strokeStyle="#CCC",b.strokeRect(-0.5,f?-0.5:-e+-0.5,c[0]+2,f?c[1]+2:c[1]+e+2),b.strokeStyle=d),b.beginPath(),b.rect(0,f?0.5:-e+1,c[0]+1,f?c[1]:c[1]+e)):"round"==a.shape?b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10):"circle"==a.shape&&(b.beginPath(),b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,
2*Math.PI));b.fill();b.shadowColor="transparent";a.bgImage&&a.bgImage.width&&b.drawImage(a.bgImage,0.5*(c[0]-a.bgImage.width),0.5*(c[1]-a.bgImage.height));a.bgImageUrl&&!a.bgImage&&(a.bgImage=a.loadImage(a.bgImageUrl));if(a.onDrawBackground)a.onDrawBackground(b);f||(b.fillStyle=d||LiteGraph.NODE_DEFAULT_COLOR,"box"==h?(b.beginPath(),b.fillRect(0,-e,c[0]+1,e),b.stroke()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill(),b.stroke()),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),
"round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.font="bold 12px Arial",""!=a.name&&0.8<a.graph.config.canvas_scale&&(b.fillStyle="#222",b.fillText(a.name,16,13-e)))};
LGraphCanvas.prototype.drawNodeCollapsed=function(a,b,c,d){b.strokeStyle=c||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=d||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_COLLAPSED_RADIUS;d=a.shape||"box";"circle"==d?(b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],c,0,2*Math.PI),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],0.5*c,0,2*Math.PI)):"round"==d?(b.beginPath(),b.roundRect(0.5*a.size[0]-
c,0.5*a.size[1]-c,2*c,2*c,5),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.roundRect(0.5*a.size[0]-0.5*c,0.5*a.size[1]-0.5*c,c,c,2)):(b.beginPath(),b.rect(0,0,a.size[0],2*c),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.rect(0.5*c,0.5*c,c,c));b.fill()};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=LGraphCanvas.link_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";for(var b in this.graph.nodes){var c=this.graph.nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&e.link){var f=e.link,e=this.graph.getNodeById(f[1]);if(null!=e){var g=f[2],f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];null==e&&(e=LGraphCanvas.link_colors[c.id%LGraphCanvas.link_colors.length]);
a.fillStyle=a.strokeStyle=e;this.renderLink(a,f,c.getConnectionPos(!0,d))}}}}};
LGraphCanvas.prototype.renderLink=function(a,b,c){if(this.highquality_render){var d=distance(b,c);a.beginPath();a.moveTo(b[0],b[1]);a.bezierCurveTo(b[0]+0.25*d,b[1],c[0]-0.25*d,c[1],c[0],c[1]);a.stroke();0.6<this.graph.config.canvas_scale&&(d=this.computeConnectionPoint(b,c,0.5),b=this.computeConnectionPoint(b,c,0.51),c=0,c=-Math.atan2(b[0]-d[0],b[1]-d[1]),a.save(),a.translate(d[0],d[1]),a.rotate(c),a.beginPath(),a.moveTo(-5,-5),a.lineTo(0,5),a.lineTo(5,-5),a.fill(),a.restore())}else a.beginPath(),

5927
build/litescene.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
demo/code.js
View File

@@ -18,7 +18,7 @@ $(window).load(function() {
if(graph.status == LGraph.STATUS_STOPPED)
{
$(this).html("<img src='imgs/icon-stop.png'/> Stop");
graph.run(1);
graph.start(1);
}
else
{

11
doc/api.js Normal file
View File

@@ -0,0 +1,11 @@
YUI.add("yuidoc-meta", function(Y) {
Y.YUIDoc = { meta: {
"classes": [
"LGraph",
"LGraphNode",
"LiteGraph"
],
"modules": [],
"allModules": []
} };
});

BIN
doc/assets/css/external-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 491 B

BIN
doc/assets/css/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

783
doc/assets/css/main.css Normal file
View File

@@ -0,0 +1,783 @@
/*
Font sizes for all selectors other than the body are given in percentages,
with 100% equal to 13px. To calculate a font size percentage, multiply the
desired size in pixels by 7.6923076923.
Here's a quick lookup table:
10px - 76.923%
11px - 84.615%
12px - 92.308%
13px - 100%
14px - 107.692%
15px - 115.385%
16px - 123.077%
17px - 130.769%
18px - 138.462%
19px - 146.154%
20px - 153.846%
*/
html {
background: #fff;
color: #333;
overflow-y: scroll;
}
body {
/*font: 13px/1.4 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', 'Bitstream Vera Sans', 'Helvetica', 'Arial', sans-serif;*/
font: 13px/1.4 'Helvetica', 'Arial', sans-serif;
margin: 0;
padding: 0;
}
/* -- Links ----------------------------------------------------------------- */
a {
color: #356de4;
text-decoration: none;
}
.hidden {
display: none;
}
a:hover { text-decoration: underline; }
/* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
sight until it's focused. */
.jump {
position: absolute;
padding: 3px 6px;
left: -99999px;
top: 0;
}
.jump:focus { left: 40%; }
/* -- Paragraphs ------------------------------------------------------------ */
p { margin: 1.3em 0; }
dd p, td p { margin-bottom: 0; }
dd p:first-child, td p:first-child { margin-top: 0; }
/* -- Headings -------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: #D98527;/*was #f80*/
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
line-height: 1.1;
margin: 1.1em 0 0.5em;
}
h1 {
font-size: 184.6%;
color: #30418C;
margin: 0.75em 0 0.5em;
}
h2 {
font-size: 153.846%;
color: #E48A2B;
}
h3 { font-size: 138.462%; }
h4 {
border-bottom: 1px solid #DBDFEA;
color: #E48A2B;
font-size: 115.385%;
font-weight: normal;
padding-bottom: 2px;
}
h5, h6 { font-size: 107.692%; }
/* -- Code and examples ----------------------------------------------------- */
code, kbd, pre, samp {
font-family: Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
font-size: 92.308%;
line-height: 1.35;
}
p code, p kbd, p samp {
background: #FCFBFA;
border: 1px solid #EFEEED;
padding: 0 3px;
}
a code, a kbd, a samp,
pre code, pre kbd, pre samp,
table code, table kbd, table samp,
.intro code, .intro kbd, .intro samp,
.toc code, .toc kbd, .toc samp {
background: none;
border: none;
padding: 0;
}
pre.code, pre.terminal, pre.cmd {
overflow-x: auto;
*overflow-x: scroll;
padding: 0.3em 0.6em;
}
pre.code {
background: #FCFBFA;
border: 1px solid #EFEEED;
border-left-width: 5px;
}
pre.terminal, pre.cmd {
background: #F0EFFC;
border: 1px solid #D0CBFB;
border-left: 5px solid #D0CBFB;
}
/* Don't reduce the font size of <code>/<kbd>/<samp> elements inside <pre>
blocks. */
pre code, pre kbd, pre samp { font-size: 100%; }
/* Used to denote text that shouldn't be selectable, such as line numbers or
shell prompts. Guess which browser this doesn't work in. */
.noselect {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
/* -- Lists ----------------------------------------------------------------- */
dd { margin: 0.2em 0 0.7em 1em; }
dl { margin: 1em 0; }
dt { font-weight: bold; }
/* -- Tables ---------------------------------------------------------------- */
caption, th { text-align: left; }
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #fff;
padding: 5px 12px;
vertical-align: top;
}
td { background: #E6E9F5; }
td dl { margin: 0; }
td dl dl { margin: 1em 0; }
td pre:first-child { margin-top: 0; }
th {
background: #D2D7E6;/*#97A0BF*/
border-bottom: none;
border-top: none;
color: #000;/*#FFF1D5*/
font-family: 'Trebuchet MS', sans-serif;
font-weight: bold;
line-height: 1.3;
white-space: nowrap;
}
/* -- Layout and Content ---------------------------------------------------- */
#doc {
margin: auto;
min-width: 1024px;
}
.content { padding: 0 20px 0 25px; }
.sidebar {
padding: 0 15px 0 10px;
}
#bd {
padding: 7px 0 130px;
position: relative;
width: 99%;
}
/* -- Table of Contents ----------------------------------------------------- */
/* The #toc id refers to the single global table of contents, while the .toc
class refers to generic TOC lists that could be used throughout the page. */
.toc code, .toc kbd, .toc samp { font-size: 100%; }
.toc li { font-weight: bold; }
.toc li li { font-weight: normal; }
/* -- Intro and Example Boxes ----------------------------------------------- */
/*
.intro, .example { margin-bottom: 2em; }
.example {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 0 5px #bfbfbf;
-webkit-box-shadow: 0 0 5px #bfbfbf;
box-shadow: 0 0 5px #bfbfbf;
padding: 1em;
}
.intro {
background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
}
*/
/* -- Other Styles ---------------------------------------------------------- */
/* These are probably YUI-specific, and should be moved out of Selleck's default
theme. */
.button {
border: 1px solid #dadada;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 92.308%;
font-weight: bold;
padding: 4px 13px 3px;
-moz-text-shadow: 1px 1px 0 #fff;
-webkit-text-shadow: 1px 1px 0 #fff;
text-shadow: 1px 1px 0 #fff;
white-space: nowrap;
background: #EFEFEF; /* old browsers */
background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
}
.button:hover {
border-color: #466899;
color: #fff;
text-decoration: none;
-moz-text-shadow: 1px 1px 0 #222;
-webkit-text-shadow: 1px 1px 0 #222;
text-shadow: 1px 1px 0 #222;
background: #6396D8; /* old browsers */
background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
}
.newwindow { text-align: center; }
.header .version em {
display: block;
text-align: right;
}
#classdocs .item {
border-bottom: 1px solid #466899;
margin: 1em 0;
padding: 1.5em;
}
#classdocs .item .params p,
#classdocs .item .returns p,{
display: inline;
}
#classdocs .item em code, #classdocs .item em.comment {
color: green;
}
#classdocs .item em.comment a {
color: green;
text-decoration: underline;
}
#classdocs .foundat {
font-size: 11px;
font-style: normal;
}
.attrs .emits {
margin-left: 2em;
padding: .5em;
border-left: 1px dashed #ccc;
}
abbr {
border-bottom: 1px dashed #ccc;
font-size: 80%;
cursor: help;
}
.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8 {
list-style: decimal;
}
ul li p {
margin-top: 0;
}
.method .name {
font-size: 110%;
}
.apidocs .methods .extends .method,
.apidocs .properties .extends .property,
.apidocs .attrs .extends .attr,
.apidocs .events .extends .event {
font-weight: bold;
}
.apidocs .methods .extends .inherited,
.apidocs .properties .extends .inherited,
.apidocs .attrs .extends .inherited,
.apidocs .events .extends .inherited {
font-weight: normal;
}
#hd {
background: whiteSmoke;
background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
border-bottom: 1px solid #DFDFDF;
padding: 0 15px 1px 20px;
margin-bottom: 15px;
}
#hd img {
margin-right: 10px;
vertical-align: middle;
}
/* -- API Docs CSS ---------------------------------------------------------- */
/*
This file is organized so that more generic styles are nearer the top, and more
specific styles are nearer the bottom of the file. This allows us to take full
advantage of the cascade to avoid redundant style rules. Please respect this
convention when making changes.
*/
/* -- Generic TabView styles ------------------------------------------------ */
/*
These styles apply to all API doc tabviews. To change styles only for a
specific tabview, see the other sections below.
*/
.yui3-js-enabled .apidocs .tabview {
visibility: hidden; /* Hide until the TabView finishes rendering. */
_visibility: visible;
}
.apidocs .tabview.yui3-tabview-content { visibility: visible; }
.apidocs .tabview .yui3-tabview-panel { background: #fff; }
/* -- Generic Content Styles ------------------------------------------------ */
/* Headings */
h2, h3, h4, h5, h6 {
border: none;
color: #30418C;
font-weight: bold;
text-decoration: none;
}
.link-docs {
float: right;
font-size: 15px;
margin: 4px 4px 6px;
padding: 6px 30px 5px;
}
.apidocs { zoom: 1; }
/* Generic box styles. */
.apidocs .box {
border: 1px solid;
border-radius: 3px;
margin: 1em 0;
padding: 0 1em;
}
/* A flag is a compact, capsule-like indicator of some kind. It's used to
indicate private and protected items, item return types, etc. in an
attractive and unobtrusive way. */
.apidocs .flag {
background: #bababa;
border-radius: 3px;
color: #fff;
font-size: 11px;
margin: 0 0.5em;
padding: 2px 4px 1px;
}
/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
.apidocs .meta {
background: #f9f9f9;
border-color: #efefef;
color: #555;
font-size: 11px;
padding: 3px 6px;
}
.apidocs .meta p { margin: 0; }
/* Deprecation warning. */
.apidocs .box.deprecated,
.apidocs .flag.deprecated {
background: #fdac9f;
border: 1px solid #fd7775;
}
.apidocs .box.deprecated p { margin: 0.5em 0; }
.apidocs .flag.deprecated { color: #333; }
/* Module/Class intro description. */
.apidocs .intro {
background: #f0f1f8;
border-color: #d4d8eb;
}
/* Loading spinners. */
#bd.loading .apidocs,
#api-list.loading .yui3-tabview-panel {
background: #fff url(../img/spinner.gif) no-repeat center 70px;
min-height: 150px;
}
#bd.loading .apidocs .content,
#api-list.loading .yui3-tabview-panel .apis {
display: none;
}
.apidocs .no-visible-items { color: #666; }
/* Generic inline list. */
.apidocs ul.inline {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
.apidocs ul.inline li { display: inline; }
/* Comma-separated list. */
.apidocs ul.commas li:after { content: ','; }
.apidocs ul.commas li:last-child:after { content: ''; }
/* Keyboard shortcuts. */
kbd .cmd { font-family: Monaco, Helvetica; }
/* -- Generic Access Level styles ------------------------------------------- */
.apidocs .item.protected,
.apidocs .item.private,
.apidocs .index-item.protected,
.apidocs .index-item.deprecated,
.apidocs .index-item.private {
display: none;
}
.show-deprecated .item.deprecated,
.show-deprecated .index-item.deprecated,
.show-protected .item.protected,
.show-protected .index-item.protected,
.show-private .item.private,
.show-private .index-item.private {
display: block;
}
.hide-inherited .item.inherited,
.hide-inherited .index-item.inherited {
display: none;
}
/* -- Generic Item Index styles --------------------------------------------- */
.apidocs .index { margin: 1.5em 0 3em; }
.apidocs .index h3 {
border-bottom: 1px solid #efefef;
color: #333;
font-size: 13px;
margin: 2em 0 0.6em;
padding-bottom: 2px;
}
.apidocs .index .no-visible-items { margin-top: 2em; }
.apidocs .index-list {
border-color: #efefef;
font-size: 12px;
list-style: none;
margin: 0;
padding: 0;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-width: 170px;
-ms-column-count: 4;
-ms-column-gap: 10px;
-ms-column-width: 170px;
-o-column-count: 4;
-o-column-gap: 10px;
-o-column-width: 170px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-width: 170px;
column-count: 4;
column-gap: 10px;
column-width: 170px;
}
.apidocs .no-columns .index-list {
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.apidocs .index-item { white-space: nowrap; }
.apidocs .index-item .flag {
background: none;
border: none;
color: #afafaf;
display: inline;
margin: 0 0 0 0.2em;
padding: 0;
}
/* -- Generic API item styles ----------------------------------------------- */
.apidocs .args {
display: inline;
margin: 0 0.5em;
}
.apidocs .flag.chainable { background: #46ca3b; }
.apidocs .flag.protected { background: #9b86fc; }
.apidocs .flag.private { background: #fd6b1b; }
.apidocs .flag.async { background: #356de4; }
.apidocs .flag.required { background: #e60923; }
.apidocs .item {
border-bottom: 1px solid #efefef;
margin: 1.5em 0 2em;
padding-bottom: 2em;
}
.apidocs .item h4,
.apidocs .item h5,
.apidocs .item h6 {
color: #333;
font-family: inherit;
font-size: 100%;
}
.apidocs .item .description p,
.apidocs .item pre.code {
margin: 1em 0 0;
}
.apidocs .item .meta {
background: none;
border: none;
padding: 0;
}
.apidocs .item .name {
display: inline;
font-size: 14px;
}
.apidocs .item .type,
.apidocs .item .type a,
.apidocs .returns-inline {
color: #555;
}
.apidocs .item .type,
.apidocs .returns-inline {
font-size: 11px;
margin: 0 0 0 0;
}
.apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
.apidocs .item .type a:hover { border: none; }
/* -- Item Parameter List --------------------------------------------------- */
.apidocs .params-list {
list-style: square;
margin: 1em 0 0 2em;
padding: 0;
}
.apidocs .param { margin-bottom: 1em; }
.apidocs .param .type,
.apidocs .param .type a {
color: #666;
}
.apidocs .param .type {
margin: 0 0 0 0.5em;
*margin-left: 0.5em;
}
.apidocs .param-name { font-weight: bold; }
/* -- Item "Emits" block ---------------------------------------------------- */
.apidocs .item .emits {
background: #f9f9f9;
border-color: #eaeaea;
}
/* -- Item "Returns" block -------------------------------------------------- */
.apidocs .item .returns .type,
.apidocs .item .returns .type a {
font-size: 100%;
margin: 0;
}
/* -- Class Constructor block ----------------------------------------------- */
.apidocs .constructor .item {
border: none;
padding-bottom: 0;
}
/* -- File Source View ------------------------------------------------------ */
.apidocs .file pre.code,
#doc .apidocs .file pre.prettyprint {
background: inherit;
border: none;
overflow: visible;
padding: 0;
}
.apidocs .L0,
.apidocs .L1,
.apidocs .L2,
.apidocs .L3,
.apidocs .L4,
.apidocs .L5,
.apidocs .L6,
.apidocs .L7,
.apidocs .L8,
.apidocs .L9 {
background: inherit;
}
/* -- Submodule List -------------------------------------------------------- */
.apidocs .module-submodule-description {
font-size: 12px;
margin: 0.3em 0 1em;
}
.apidocs .module-submodule-description p:first-child { margin-top: 0; }
/* -- Sidebar TabView ------------------------------------------------------- */
#api-tabview { margin-top: 0.6em; }
#api-tabview-filter,
#api-tabview-panel {
border: 1px solid #dfdfdf;
}
#api-tabview-filter {
border-bottom: none;
border-top: none;
padding: 0.6em 10px 0 10px;
}
#api-tabview-panel { border-top: none; }
#api-filter { width: 97%; }
/* -- Content TabView ------------------------------------------------------- */
#classdocs .yui3-tabview-panel { border: none; }
/* -- Source File Contents -------------------------------------------------- */
.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8 {
list-style: decimal;
}
/* -- API options ----------------------------------------------------------- */
#api-options {
font-size: 11px;
margin-top: 2.2em;
position: absolute;
right: 1.5em;
}
/*#api-options label { margin-right: 0.6em; }*/
/* -- API list -------------------------------------------------------------- */
#api-list {
margin-top: 1.5em;
*zoom: 1;
}
.apis {
font-size: 12px;
line-height: 1.4;
list-style: none;
margin: 0;
padding: 0.5em 0 0.5em 0.4em;
}
.apis a {
border: 1px solid transparent;
display: block;
margin: 0 0 0 -4px;
padding: 1px 4px 0;
text-decoration: none;
_border: none;
_display: inline;
}
.apis a:hover,
.apis a:focus {
background: #E8EDFC;
background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
border-color: #AAC0FA;
border-radius: 3px;
color: #333;
outline: none;
}
.api-list-item a:hover,
.api-list-item a:focus {
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
}
.apis .message { color: #888; }
.apis .result a { padding: 3px 5px 2px; }
.apis .result .type {
right: 4px;
top: 7px;
}
.api-list-item .yui3-highlight {
font-weight: bold;
}

BIN
doc/assets/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 740 B

BIN
doc/assets/img/spinner.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

10
doc/assets/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>Redirector</title>
<meta http-equiv="refresh" content="0;url=../">
</head>
<body>
<a href="../">Click here to redirect</a>
</body>
</html>

52
doc/assets/js/api-filter.js Normal file
View File

@@ -0,0 +1,52 @@
YUI.add('api-filter', function (Y) {
Y.APIFilter = Y.Base.create('apiFilter', Y.Base, [Y.AutoCompleteBase], {
// -- Initializer ----------------------------------------------------------
initializer: function () {
this._bindUIACBase();
this._syncUIACBase();
},
getDisplayName: function(name) {
Y.each(Y.YUIDoc.meta.allModules, function(i) {
if (i.name === name && i.displayName) {
name = i.displayName;
}
});
return name;
}
}, {
// -- Attributes -----------------------------------------------------------
ATTRS: {
resultHighlighter: {
value: 'phraseMatch'
},
// May be set to "classes" or "modules".
queryType: {
value: 'classes'
},
source: {
valueFn: function() {
var self = this;
return function(q) {
var data = Y.YUIDoc.meta[self.get('queryType')],
out = [];
Y.each(data, function(v) {
if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
out.push(v);
}
});
return out;
};
}
}
}
});
}, '3.4.0', {requires: [
'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources'
]});

251
doc/assets/js/api-list.js Normal file
View File

@@ -0,0 +1,251 @@
YUI.add('api-list', function (Y) {
var Lang = Y.Lang,
YArray = Y.Array,
APIList = Y.namespace('APIList'),
classesNode = Y.one('#api-classes'),
inputNode = Y.one('#api-filter'),
modulesNode = Y.one('#api-modules'),
tabviewNode = Y.one('#api-tabview'),
tabs = APIList.tabs = {},
filter = APIList.filter = new Y.APIFilter({
inputNode : inputNode,
maxResults: 1000,
on: {
results: onFilterResults
}
}),
search = APIList.search = new Y.APISearch({
inputNode : inputNode,
maxResults: 100,
on: {
clear : onSearchClear,
results: onSearchResults
}
}),
tabview = APIList.tabview = new Y.TabView({
srcNode : tabviewNode,
panelNode: '#api-tabview-panel',
render : true,
on: {
selectionChange: onTabSelectionChange
}
}),
focusManager = APIList.focusManager = tabviewNode.plug(Y.Plugin.NodeFocusManager, {
circular : true,
descendants: '#api-filter, .yui3-tab-panel-selected .api-list-item a, .yui3-tab-panel-selected .result a',
keys : {next: 'down:40', previous: 'down:38'}
}).focusManager,
LIST_ITEM_TEMPLATE =
'<li class="api-list-item {typeSingular}">' +
'<a href="{rootPath}{typePlural}/{name}.html">{displayName}</a>' +
'</li>';
// -- Init ---------------------------------------------------------------------
// Duckpunch FocusManager's key event handling to prevent it from handling key
// events when a modifier is pressed.
Y.before(function (e, activeDescendant) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
return new Y.Do.Prevent();
}
}, focusManager, '_focusPrevious', focusManager);
Y.before(function (e, activeDescendant) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
return new Y.Do.Prevent();
}
}, focusManager, '_focusNext', focusManager);
// Create a mapping of tabs in the tabview so we can refer to them easily later.
tabview.each(function (tab, index) {
var name = tab.get('label').toLowerCase();
tabs[name] = {
index: index,
name : name,
tab : tab
};
});
// Switch tabs on Ctrl/Cmd-Left/Right arrows.
tabviewNode.on('key', onTabSwitchKey, 'down:37,39');
// Focus the filter input when the `/` key is pressed.
Y.one(Y.config.doc).on('key', onSearchKey, 'down:83');
// Keep the Focus Manager up to date.
inputNode.on('focus', function () {
focusManager.set('activeDescendant', inputNode);
});
// Update all tabview links to resolved URLs.
tabview.get('panelNode').all('a').each(function (link) {
link.setAttribute('href', link.get('href'));
});
// -- Private Functions --------------------------------------------------------
function getFilterResultNode() {
return filter.get('queryType') === 'classes' ? classesNode : modulesNode;
}
// -- Event Handlers -----------------------------------------------------------
function onFilterResults(e) {
var frag = Y.one(Y.config.doc.createDocumentFragment()),
resultNode = getFilterResultNode(),
typePlural = filter.get('queryType'),
typeSingular = typePlural === 'classes' ? 'class' : 'module';
if (e.results.length) {
YArray.each(e.results, function (result) {
frag.append(Lang.sub(LIST_ITEM_TEMPLATE, {
rootPath : APIList.rootPath,
displayName : filter.getDisplayName(result.highlighted),
name : result.text,
typePlural : typePlural,
typeSingular: typeSingular
}));
});
} else {
frag.append(
'<li class="message">' +
'No ' + typePlural + ' found.' +
'</li>'
);
}
resultNode.empty(true);
resultNode.append(frag);
focusManager.refresh();
}
function onSearchClear(e) {
focusManager.refresh();
}
function onSearchKey(e) {
var target = e.target;
if (target.test('input,select,textarea')
|| target.get('isContentEditable')) {
return;
}
e.preventDefault();
inputNode.focus();
focusManager.refresh();
}
function onSearchResults(e) {
var frag = Y.one(Y.config.doc.createDocumentFragment());
if (e.results.length) {
YArray.each(e.results, function (result) {
frag.append(result.display);
});
} else {
frag.append(
'<li class="message">' +
'No results found. Maybe you\'ll have better luck with a ' +
'different query?' +
'</li>'
);
}
focusManager.refresh();
}
function onTabSelectionChange(e) {
var tab = e.newVal,
name = tab.get('label').toLowerCase();
tabs.selected = {
index: tab.get('index'),
name : name,
tab : tab
};
switch (name) {
case 'classes': // fallthru
case 'modules':
filter.setAttrs({
minQueryLength: 0,
queryType : name
});
search.set('minQueryLength', -1);
// Only send a request if this isn't the initially-selected tab.
if (e.prevVal) {
filter.sendRequest(filter.get('value'));
}
break;
case 'everything':
filter.set('minQueryLength', -1);
search.set('minQueryLength', 1);
if (search.get('value')) {
search.sendRequest(search.get('value'));
} else {
inputNode.focus();
}
break;
default:
// WTF? We shouldn't be here!
filter.set('minQueryLength', -1);
search.set('minQueryLength', -1);
}
if (focusManager) {
setTimeout(function () {
focusManager.refresh();
}, 1);
}
}
function onTabSwitchKey(e) {
var currentTabIndex = tabs.selected.index;
if (!(e.ctrlKey || e.metaKey)) {
return;
}
e.preventDefault();
switch (e.keyCode) {
case 37: // left arrow
if (currentTabIndex > 0) {
tabview.selectChild(currentTabIndex - 1);
inputNode.focus();
}
break;
case 39: // right arrow
if (currentTabIndex < (Y.Object.size(tabs) - 2)) {
tabview.selectChild(currentTabIndex + 1);
inputNode.focus();
}
break;
}
}
}, '3.4.0', {requires: [
'api-filter', 'api-search', 'event-key', 'node-focusmanager', 'tabview'
]});

98
doc/assets/js/api-search.js Normal file
View File

@@ -0,0 +1,98 @@
YUI.add('api-search', function (Y) {
var Lang = Y.Lang,
Node = Y.Node,
YArray = Y.Array;
Y.APISearch = Y.Base.create('apiSearch', Y.Base, [Y.AutoCompleteBase], {
// -- Public Properties ----------------------------------------------------
RESULT_TEMPLATE:
'<li class="result {resultType}">' +
'<a href="{url}">' +
'<h3 class="title">{name}</h3>' +
'<span class="type">{resultType}</span>' +
'<div class="description">{description}</div>' +
'<span class="className">{class}</span>' +
'</a>' +
'</li>',
// -- Initializer ----------------------------------------------------------
initializer: function () {
this._bindUIACBase();
this._syncUIACBase();
},
// -- Protected Methods ----------------------------------------------------
_apiResultFilter: function (query, results) {
// Filter components out of the results.
return YArray.filter(results, function (result) {
return result.raw.resultType === 'component' ? false : result;
});
},
_apiResultFormatter: function (query, results) {
return YArray.map(results, function (result) {
var raw = Y.merge(result.raw), // create a copy
desc = raw.description || '';
// Convert description to text and truncate it if necessary.
desc = Node.create('<div>' + desc + '</div>').get('text');
if (desc.length > 65) {
desc = Y.Escape.html(desc.substr(0, 65)) + ' &hellip;';
} else {
desc = Y.Escape.html(desc);
}
raw['class'] || (raw['class'] = '');
raw.description = desc;
// Use the highlighted result name.
raw.name = result.highlighted;
return Lang.sub(this.RESULT_TEMPLATE, raw);
}, this);
},
_apiTextLocator: function (result) {
return result.displayName || result.name;
}
}, {
// -- Attributes -----------------------------------------------------------
ATTRS: {
resultFormatter: {
valueFn: function () {
return this._apiResultFormatter;
}
},
resultFilters: {
valueFn: function () {
return this._apiResultFilter;
}
},
resultHighlighter: {
value: 'phraseMatch'
},
resultListLocator: {
value: 'data.results'
},
resultTextLocator: {
valueFn: function () {
return this._apiTextLocator;
}
},
source: {
value: '/api/v1/search?q={query}&count={maxResults}'
}
}
});
}, '3.4.0', {requires: [
'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources',
'escape'
]});

370
doc/assets/js/apidocs.js Normal file
View File

@@ -0,0 +1,370 @@
YUI().use(
'yuidoc-meta',
'api-list', 'history-hash', 'node-screen', 'node-style', 'pjax',
function (Y) {
var win = Y.config.win,
localStorage = win.localStorage,
bdNode = Y.one('#bd'),
pjax,
defaultRoute,
classTabView,
selectedTab;
// Kill pjax functionality unless serving over HTTP.
if (!Y.getLocation().protocol.match(/^https?\:/)) {
Y.Router.html5 = false;
}
// Create the default route with middleware which enables syntax highlighting
// on the loaded content.
defaultRoute = Y.Pjax.defaultRoute.concat(function (req, res, next) {
prettyPrint();
bdNode.removeClass('loading');
next();
});
pjax = new Y.Pjax({
container : '#docs-main',
contentSelector: '#docs-main > .content',
linkSelector : '#bd a',
titleSelector : '#xhr-title',
navigateOnHash: true,
root : '/',
routes : [
// -- / ----------------------------------------------------------------
{
path : '/(index.html)?',
callbacks: defaultRoute
},
// -- /classes/* -------------------------------------------------------
{
path : '/classes/:class.html*',
callbacks: [defaultRoute, 'handleClasses']
},
// -- /files/* ---------------------------------------------------------
{
path : '/files/*file',
callbacks: [defaultRoute, 'handleFiles']
},
// -- /modules/* -------------------------------------------------------
{
path : '/modules/:module.html*',
callbacks: defaultRoute
}
]
});
// -- Utility Functions --------------------------------------------------------
pjax.checkVisibility = function (tab) {
tab || (tab = selectedTab);
if (!tab) { return; }
var panelNode = tab.get('panelNode'),
visibleItems;
// If no items are visible in the tab panel due to the current visibility
// settings, display a message to that effect.
visibleItems = panelNode.all('.item,.index-item').some(function (itemNode) {
if (itemNode.getComputedStyle('display') !== 'none') {
return true;
}
});
panelNode.all('.no-visible-items').remove();
if (!visibleItems) {
if (Y.one('#index .index-item')) {
panelNode.append(
'<div class="no-visible-items">' +
'<p>' +
'Some items are not shown due to the current visibility ' +
'settings. Use the checkboxes at the upper right of this ' +
'page to change the visibility settings.' +
'</p>' +
'</div>'
);
} else {
panelNode.append(
'<div class="no-visible-items">' +
'<p>' +
'This class doesn\'t provide any methods, properties, ' +
'attributes, or events.' +
'</p>' +
'</div>'
);
}
}
// Hide index sections without any visible items.
Y.all('.index-section').each(function (section) {
var items = 0,
visibleItems = 0;
section.all('.index-item').each(function (itemNode) {
items += 1;
if (itemNode.getComputedStyle('display') !== 'none') {
visibleItems += 1;
}
});
section.toggleClass('hidden', !visibleItems);
section.toggleClass('no-columns', visibleItems < 4);
});
};
pjax.initClassTabView = function () {
if (!Y.all('#classdocs .api-class-tab').size()) {
return;
}
if (classTabView) {
classTabView.destroy();
selectedTab = null;
}
classTabView = new Y.TabView({
srcNode: '#classdocs',
on: {
selectionChange: pjax.onTabSelectionChange
}
});
pjax.updateTabState();
classTabView.render();
};
pjax.initLineNumbers = function () {
var hash = win.location.hash.substring(1),
container = pjax.get('container'),
hasLines, node;
// Add ids for each line number in the file source view.
container.all('.linenums>li').each(function (lineNode, index) {
lineNode.set('id', 'l' + (index + 1));
lineNode.addClass('file-line');
hasLines = true;
});
// Scroll to the desired line.
if (hasLines && /^l\d+$/.test(hash)) {
if ((node = container.getById(hash))) {
win.scroll(0, node.getY());
}
}
};
pjax.initRoot = function () {
var terminators = /^(?:classes|files|modules)$/,
parts = pjax._getPathRoot().split('/'),
root = [],
i, len, part;
for (i = 0, len = parts.length; i < len; i += 1) {
part = parts[i];
if (part.match(terminators)) {
// Makes sure the path will end with a "/".
root.push('');
break;
}
root.push(part);
}
pjax.set('root', root.join('/'));
};
pjax.updateTabState = function (src) {
var hash = win.location.hash.substring(1),
defaultTab, node, tab, tabPanel;
function scrollToNode() {
if (node.hasClass('protected')) {
Y.one('#api-show-protected').set('checked', true);
pjax.updateVisibility();
}
if (node.hasClass('private')) {
Y.one('#api-show-private').set('checked', true);
pjax.updateVisibility();
}
setTimeout(function () {
// For some reason, unless we re-get the node instance here,
// getY() always returns 0.
var node = Y.one('#classdocs').getById(hash);
win.scrollTo(0, node.getY() - 70);
}, 1);
}
if (!classTabView) {
return;
}
if (src === 'hashchange' && !hash) {
defaultTab = 'index';
} else {
if (localStorage) {
defaultTab = localStorage.getItem('tab_' + pjax.getPath()) ||
'index';
} else {
defaultTab = 'index';
}
}
if (hash && (node = Y.one('#classdocs').getById(hash))) {
if ((tabPanel = node.ancestor('.api-class-tabpanel', true))) {
if ((tab = Y.one('#classdocs .api-class-tab.' + tabPanel.get('id')))) {
if (classTabView.get('rendered')) {
Y.Widget.getByNode(tab).set('selected', 1);
} else {
tab.addClass('yui3-tab-selected');
}
}
}
// Scroll to the desired element if this is a hash URL.
if (node) {
if (classTabView.get('rendered')) {
scrollToNode();
} else {
classTabView.once('renderedChange', scrollToNode);
}
}
} else {
tab = Y.one('#classdocs .api-class-tab.' + defaultTab);
// When the `defaultTab` node isn't found, `localStorage` is stale.
if (!tab && defaultTab !== 'index') {
tab = Y.one('#classdocs .api-class-tab.index');
}
if (classTabView.get('rendered')) {
Y.Widget.getByNode(tab).set('selected', 1);
} else {
tab.addClass('yui3-tab-selected');
}
}
};
pjax.updateVisibility = function () {
var container = pjax.get('container');
container.toggleClass('hide-inherited',
!Y.one('#api-show-inherited').get('checked'));
container.toggleClass('show-deprecated',
Y.one('#api-show-deprecated').get('checked'));
container.toggleClass('show-protected',
Y.one('#api-show-protected').get('checked'));
container.toggleClass('show-private',
Y.one('#api-show-private').get('checked'));
pjax.checkVisibility();
};
// -- Route Handlers -----------------------------------------------------------
pjax.handleClasses = function (req, res, next) {
var status = res.ioResponse.status;
// Handles success and local filesystem XHRs.
if (!status || (status >= 200 && status < 300)) {
pjax.initClassTabView();
}
next();
};
pjax.handleFiles = function (req, res, next) {
var status = res.ioResponse.status;
// Handles success and local filesystem XHRs.
if (!status || (status >= 200 && status < 300)) {
pjax.initLineNumbers();
}
next();
};
// -- Event Handlers -----------------------------------------------------------
pjax.onNavigate = function (e) {
var hash = e.hash,
originTarget = e.originEvent && e.originEvent.target,
tab;
if (hash) {
tab = originTarget && originTarget.ancestor('.yui3-tab', true);
if (hash === win.location.hash) {
pjax.updateTabState('hashchange');
} else if (!tab) {
win.location.hash = hash;
}
e.preventDefault();
return;
}
// Only scroll to the top of the page when the URL doesn't have a hash.
this.set('scrollToTop', !e.url.match(/#.+$/));
bdNode.addClass('loading');
};
pjax.onOptionClick = function (e) {
pjax.updateVisibility();
};
pjax.onTabSelectionChange = function (e) {
var tab = e.newVal,
tabId = tab.get('contentBox').getAttribute('href').substring(1);
selectedTab = tab;
// If switching from a previous tab (i.e., this is not the default tab),
// replace the history entry with a hash URL that will cause this tab to
// be selected if the user navigates away and then returns using the back
// or forward buttons.
if (e.prevVal && localStorage) {
localStorage.setItem('tab_' + pjax.getPath(), tabId);
}
pjax.checkVisibility(tab);
};
// -- Init ---------------------------------------------------------------------
pjax.on('navigate', pjax.onNavigate);
pjax.initRoot();
pjax.upgrade();
pjax.initClassTabView();
pjax.initLineNumbers();
pjax.updateVisibility();
Y.APIList.rootPath = pjax.get('root');
Y.one('#api-options').delegate('click', pjax.onOptionClick, 'input');
Y.on('hashchange', function (e) {
pjax.updateTabState('hashchange');
}, win);
});

17
doc/assets/js/yui-prettify.js vendored Normal file
View File

@@ -0,0 +1,17 @@
YUI().use('node', function(Y) {
var code = Y.all('.prettyprint.linenums');
if (code.size()) {
code.each(function(c) {
var lis = c.all('ol li'),
l = 1;
lis.each(function(n) {
n.prepend('<a name="LINENUM_' + l + '"></a>');
l++;
});
});
var h = location.hash;
location.hash = '';
h = h.replace('LINE_', 'LINENUM_');
location.hash = h;
}
});

130
doc/assets/vendor/prettify/CHANGES.html vendored Normal file
View File

@@ -0,0 +1,130 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Log</title>
</head>
<body bgcolor="white">
<a style="float:right" href="README.html">README</a>
<h1>Known Issues</h1>
<ul>
<li>Perl formatting is really crappy. Partly because the author is lazy and
partly because Perl is
<a href="http://www.perlmonks.org/?node_id=663393">hard</a> to parse.
<li>On some browsers, <code>&lt;code&gt;</code> elements with newlines in the text
which use CSS to specify <code>white-space:pre</code> will have the newlines
improperly stripped if the element is not attached to the document at the time
the stripping is done. Also, on IE 6, all newlines will be stripped from
<code>&lt;code&gt;</code> elements because of the way IE6 produces
<code>innerHTML</code>. Workaround: use <code>&lt;pre&gt;</code> for code with
newlines.
</ul>
<h1>Change Log</h1>
<h2>29 March 2007</h2>
<ul>
<li>Added <a href="tests/prettify_test.html#PHP">tests</a> for PHP support
to address
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=3"
>issue 3</a>.
<li>Fixed
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=6"
>bug</a>: <code>prettyPrintOne</code> was not halting. This was not
reachable through the normal entry point.
<li>Fixed
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=4"
>bug</a>: recursing into a script block or PHP tag that was not properly
closed would not silently drop the content.
(<a href="tests/prettify_test.html#issue4">test</a>)
<li>Fixed
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=8"
>bug</a>: was eating tabs
(<a href="tests/prettify_test.html#issue8">test</a>)
<li>Fixed entity handling so that the caveat
<blockquote>
<p>Caveats: please properly escape less-thans. <tt>x&amp;lt;y</tt>
instead of <tt>x&lt;y</tt>, and use <tt>&quot;</tt> instead of
<tt>&amp;quot;</tt> for string delimiters.</p>
</blockquote>
is no longer applicable.
<li>Added noisefree's C#
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=4"
>patch</a>
<li>Added a <a href="http://google-code-prettify.googlecode.com/files/prettify-small.zip">distribution</a> that has comments and
whitespace removed to reduce download size from 45.5kB to 12.8kB.
</ul>
<h2>4 Jul 2008</h2>
<ul>
<li>Added <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=17">language specific formatters</a> that are triggered by the presence
of a <code>lang-&lt;language-file-extension&gt;</code></li>
<li>Fixed <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=29">bug</a>: python handling of <code>'''string'''</code>
<li>Fixed bug: <code>/</code> in regex <code>[charsets] should not end regex</code>
</ul>
<h2>5 Jul 2008</h2>
<ul>
<li>Defined language extensions for Lisp and Lua</code>
</ul>
<h2>14 Jul 2008</h2>
<ul>
<li>Language handlers for F#, OCAML, SQL</code>
<li>Support for <code>nocode</code> spans to allow embedding of line
numbers and code annotations which should not be styled or otherwise
affect the tokenization of prettified code.
See the issue 22
<a href="tests/prettify_test.html#issue22">testcase</a>.</code>
</ul>
<h2>6 Jan 2009</h2>
<ul>
<li>Language handlers for Visual Basic, Haskell, CSS, and WikiText</li>
<li>Added <tt>.mxml</tt> extension to the markup style handler for
Flex <a href="http://en.wikipedia.org/wiki/MXML">MXML files</a>. See
<a
href="http://code.google.com/p/google-code-prettify/issues/detail?id=37"
>issue 37</a>.
<li>Added <tt>.m</tt> extension to the C style handler so that Objective
C source files properly highlight. See
<a
href="http://code.google.com/p/google-code-prettify/issues/detail?id=58"
>issue 58</a>.
<li>Changed HTML lexer to use the same embedded source mechanism as the
wiki language handler, and changed to use the registered
CSS handler for STYLE element content.
</ul>
<h2>21 May 2009</h2>
<ul>
<li>Rewrote to improve performance on large files.
See <a href="http://mikesamuel.blogspot.com/2009/05/efficient-parsing-in-javascript.html">benchmarks</a>.</li>
<li>Fixed bugs with highlighting of Haskell line comments, Lisp
number literals, Lua strings, C preprocessor directives,
newlines in Wiki code on Windows, and newlines in IE6.</li>
</ul>
<h2>14 August 2009</h2>
<ul>
<li>Fixed prettifying of <code>&lt;code&gt;</code> blocks with embedded newlines.
</ul>
<h2>3 October 2009</h2>
<ul>
<li>Fixed prettifying of XML/HTML tags that contain uppercase letters.
</ul>
<h2>19 July 2010</h2>
<ul>
<li>Added support for line numbers. Bug
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=22"
>22</a></li>
<li>Added YAML support. Bug
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=123"
>123</a></li>
<li>Added VHDL support courtesy Le Poussin.</li>
<li>IE performance improvements. Bug
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=102"
>102</a> courtesy jacobly.</li>
<li>A variety of markup formatting fixes courtesy smain and thezbyg.</li>
<li>Fixed copy and paste in IE[678].
<li>Changed output to use <code>&amp;#160;</code> instead of
<code>&amp;nbsp;</code> so that the output works when embedded in XML.
Bug
<a href="http://code.google.com/p/google-code-prettify/issues/detail?id=108"
>108</a>.</li>
</ul>
</body>
</html>

202
doc/assets/vendor/prettify/COPYING vendored Normal file
View File

@@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

203
doc/assets/vendor/prettify/README.html vendored Normal file
View File

@@ -0,0 +1,203 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript code prettifier</title>
<link href="src/prettify.css" type="text/css" rel="stylesheet" />
<script src="src/prettify.js" type="text/javascript"></script>
<style type="text/css">
body { margin-left: .5in }
h1, h2, h3, h4, .footer { margin-left: -.4in; }
</style>
</head>
<body onload="prettyPrint()" bgcolor="white">
<small style="float: right">Languages : <a href="README-zh-Hans.html">CH</a></small>
<h1>Javascript code prettifier</h1>
<h2>Setup</h2>
<ol>
<li><a href="http://code.google.com/p/google-code-prettify/downloads/list">Download</a> a distribution
<li>Include the script and stylesheets in your document
(you will need to make sure the css and js file are on your server, and
adjust the paths in the <tt>script</tt> and <tt>link</tt> tag)
<pre class="prettyprint">
&lt;link href="prettify.css" type="text/css" rel="stylesheet" />
&lt;script type="text/javascript" src="prettify.js">&lt;/script></pre>
<li>Add <code class="prettyprint lang-html">onload="prettyPrint()"</code> to your
document's body tag.
<li>Modify the stylesheet to get the coloring you prefer</li>
</ol>
<h2>Usage</h2>
<p>Put code snippets in
<tt>&lt;pre class="prettyprint"&gt;...&lt;/pre&gt;</tt>
or <tt>&lt;code class="prettyprint"&gt;...&lt;/code&gt;</tt>
and it will automatically be pretty printed.
<table summary="code examples">
<tr>
<th>The original
<th>Prettier
<tr>
<td><pre style="border: 1px solid #888;padding: 2px"
><a name="voila1"></a>class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="#voila1">tags</a>.
}</pre>
<td><pre class="prettyprint"><a name="voila2"></a>class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>
</table>
<h2>FAQ</h2>
<h3 id="langs">Which languages does it work for?</h3>
<p>The comments in <tt>prettify.js</tt> are authoritative but the lexer
should work on a number of languages including C and friends,
Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles.
It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl
and Ruby, but, because of commenting conventions, doesn't work on
Smalltalk, or CAML-like languages.</p>
<p>LISPy languages are supported via an extension:
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lisp.js"
><code>lang-lisp.js</code></a>.</p>
<p>And similarly for
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css.js"
><code>CSS</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs.js"
><code>Haskell</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js"
><code>Lua</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js"
><code>OCAML, SML, F#</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js"
><code>Visual Basic</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js"
><code>SQL</code></a>,
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js"
><code>Protocol Buffers</code></a>, and
<a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js"
><code>WikiText</code></a>..
<p>If you'd like to add an extension for your favorite language, please
look at <tt>src/lang-lisp.js</tt> and file an
<a href="http://code.google.com/p/google-code-prettify/issues/list"
>issue</a> including your language extension, and a testcase.</p>
<h3>How do I specify which language my code is in?</h3>
<p>You don't need to specify the language since <code>prettyprint()</code>
will guess. You can specify a language by specifying the language extension
along with the <code>prettyprint</code> class like so:</p>
<pre class="prettyprint lang-html"
>&lt;pre class=&quot;prettyprint <b>lang-html</b>&quot;&gt;
The lang-* class specifies the language file extensions.
File extensions supported by default include
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
"java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
"xhtml", "xml", "xsl".
&lt;/pre&gt;</pre>
<h3>It doesn't work on <tt>&lt;obfuscated code sample&gt;</tt>?</h3>
<p>Yes. Prettifying obfuscated code is like putting lipstick on a pig
&mdash; i.e. outside the scope of this tool.</p>
<h3>Which browsers does it work with?</h3>
<p>It's been tested with IE 6, Firefox 1.5 &amp; 2, and Safari 2.0.4.
Look at <a href="tests/prettify_test.html">the test page</a> to see if it
works in your browser.</p>
<h3>What's changed?</h3>
<p>See the <a href="CHANGES.html">change log</a></p>
<h3>Why doesn't Prettyprinting of strings work on WordPress?</h3>
<p>Apparently wordpress does "smart quoting" which changes close quotes.
This causes end quotes to not match up with open quotes.
<p>This breaks prettifying as well as copying and pasting of code samples.
See
<a href="http://wordpress.org/support/topic/125038"
>WordPress's help center</a> for info on how to stop smart quoting of code
snippets.</p>
<h3 id="linenums">How do I put line numbers in my code?</h3>
<p>You can use the <code>linenums</code> class to turn on line
numbering. If your code doesn't start at line number 1, you can
add a colon and a line number to the end of that class as in
<code>linenums:52</code>.
<p>For example
<pre class="prettyprint">&lt;pre class="prettyprint linenums:<b>4</b>"
&gt;// This is line 4.
foo();
bar();
baz();
boo();
far();
faz();
&lt;pre&gt;</pre>
produces
<pre class="prettyprint linenums:4"
>// This is line 4.
foo();
bar();
baz();
boo();
far();
faz();
</pre>
<h3>How do I prevent a portion of markup from being marked as code?</h3>
<p>You can use the <code>nocode</code> class to identify a span of markup
that is not code.
<pre class="prettyprint">&lt;pre class=prettyprint&gt;
int x = foo(); /* This is a comment &lt;span class="nocode"&gt;This is not code&lt;/span&gt;
Continuation of comment */
int y = bar();
&lt;/pre&gt;</pre>
produces
<pre class="prettyprint">
int x = foo(); /* This is a comment <span class="nocode">This is not code</span>
Continuation of comment */
int y = bar();
</pre>
<p>For a more complete example see the issue22
<a href="tests/prettify_test.html#issue22">testcase</a>.</p>
<h3>I get an error message "a is not a function" or "opt_whenDone is not a function"</h3>
<p>If you are calling <code>prettyPrint</code> via an event handler, wrap it in a function.
Instead of doing
<blockquote>
<code class="prettyprint lang-js"
>addEventListener('load', prettyPrint, false);</code>
</blockquote>
wrap it in a closure like
<blockquote>
<code class="prettyprint lang-js"
>addEventListener('load', function (event) { prettyPrint() }, false);</code>
</blockquote>
so that the browser does not pass an event object to <code>prettyPrint</code> which
will confuse it.
<br><br><br>
<div class="footer">
<!-- Created: Tue Oct 3 17:51:56 PDT 2006 -->
<!-- hhmts start -->
Last modified: Wed Jul 19 13:56:00 PST 2010
<!-- hhmts end -->
</div>
</body>
</html>

1
doc/assets/vendor/prettify/prettify-min.css vendored Normal file
View File

@@ -0,0 +1 @@
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

1
doc/assets/vendor/prettify/prettify-min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2056
doc/classes/LGraph.html Normal file
View File

File diff suppressed because it is too large Load Diff

163
doc/classes/LGraphNode.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LGraphNode</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="../assets/css/logo.png" title=""></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: </em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/LGraph.html">LGraph</a></li>
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
</ul>
<ul id="api-modules" class="apis modules">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>LGraphNode Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l947"><code>..&#x2F;src&#x2F;litegraph.js:947</code></a>
</div>
</div>
<div class="box intro">
<p>Base Class for all the node type classes</p>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>

802
doc/classes/LiteGraph.html Normal file
View File

@@ -0,0 +1,802 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LiteGraph</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="../assets/css/logo.png" title=""></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: </em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/LGraph.html">LGraph</a></li>
<li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
<li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
</ul>
<ul id="api-modules" class="apis modules">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>LiteGraph Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="../files/.._src_litegraph.js.html#l6"><code>..&#x2F;src&#x2F;litegraph.js:6</code></a>
</div>
</div>
<div class="box intro">
<p>The Global Scope. It contains all the registered node classes.</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_LiteGraph" class="method item">
<h3 class="name"><code>LiteGraph</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l6"><code>..&#x2F;src&#x2F;litegraph.js:6</code></a>
</p>
</div>
<div class="description">
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods">
<li class="index-item method">
<a href="#method_createNode">createNode</a>
</li>
<li class="index-item method">
<a href="#method_getNodeType">getNodeType</a>
</li>
<li class="index-item method">
<a href="#method_getNodeType">getNodeType</a>
</li>
<li class="index-item method">
<a href="#method_getNodeTypesCategories">getNodeTypesCategories</a>
</li>
<li class="index-item method">
<a href="#method_registerNodeType">registerNodeType</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_createNode" class="method item">
<h3 class="name"><code>createNode</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>type</code>
</li>
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>options</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l67"><code>..&#x2F;src&#x2F;litegraph.js:67</code></a>
</p>
</div>
<div class="description">
<p>Create a node of a given type with a name. The node is not attached to any graph yet.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">type</code>
<span class="type">String</span>
<div class="param-description">
<p>full name of the node class. p.e. &quot;math/sin&quot;</p>
</div>
</li>
<li class="param">
<code class="param-name">name</code>
<span class="type">String</span>
<div class="param-description">
<p>a name to distinguish from other nodes</p>
</div>
</li>
<li class="param">
<code class="param-name">options</code>
<span class="type">Object</span>
<div class="param-description">
<p>to set options</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_getNodeType" class="method item">
<h3 class="name"><code>getNodeType</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>type</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type">Class</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l143"><code>..&#x2F;src&#x2F;litegraph.js:143</code></a>
</p>
</div>
<div class="description">
<p>Returns a registered node type with a given name</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">type</code>
<span class="type">String</span>
<div class="param-description">
<p>full name of the node class. p.e. &quot;math/sin&quot;</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Class</span>:
<p>the node class</p>
</div>
</div>
</div>
<div id="method_getNodeType" class="method item">
<h3 class="name"><code>getNodeType</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>category</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type">Array</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l156"><code>..&#x2F;src&#x2F;litegraph.js:156</code></a>
</p>
</div>
<div class="description">
<p>Returns a list of node types matching one category</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">category</code>
<span class="type">String</span>
<div class="param-description">
<p>category name</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Array</span>:
<p>array with all the node classes</p>
</div>
</div>
</div>
<div id="method_getNodeTypesCategories" class="method item">
<h3 class="name"><code>getNodeTypesCategories</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type">Array</span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l178"><code>..&#x2F;src&#x2F;litegraph.js:178</code></a>
</p>
</div>
<div class="description">
<p>Returns a list with all the node type categories</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Array</span>:
<p>array with all the names of the categories</p>
</div>
</div>
</div>
<div id="method_registerNodeType" class="method item">
<h3 class="name"><code>registerNodeType</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>type</code>
</li>
<li class="arg">
<code>base_class</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/.._src_litegraph.js.html#l33"><code>..&#x2F;src&#x2F;litegraph.js:33</code></a>
</p>
</div>
<div class="description">
<p>Register a node class so it can be listed when the user wants to create a new one</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">type</code>
<span class="type">String</span>
<div class="param-description">
<p>name of the node and path</p>
</div>
</li>
<li class="param">
<code class="param-name">base_class</code>
<span class="type">Class</span>
<div class="param-description">
<p>class containing the structure of a node</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>

10
doc/classes/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>Redirector</title>
<meta http-equiv="refresh" content="0;url=../">
</head>
<body>
<a href="../">Click here to redirect</a>
</body>
</html>

450
doc/data.json Normal file
View File

@@ -0,0 +1,450 @@
{
"project": {},
"files": {
"../src/litegraph.js": {
"name": "../src/litegraph.js",
"modules": {},
"classes": {
"LiteGraph": 1,
"LGraph": 1,
"LGraphNode": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {},
"classes": {
"LiteGraph": {
"name": "LiteGraph",
"shortname": "LiteGraph",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 6,
"description": "The Global Scope. It contains all the registered node classes.",
"is_constructor": 1
},
"LGraph": {
"name": "LGraph",
"shortname": "LGraph",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 302,
"description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.",
"is_constructor": 1
},
"LGraphNode": {
"name": "LGraphNode",
"shortname": "LGraphNode",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"file": "../src/litegraph.js",
"line": 947,
"description": "Base Class for all the node type classes",
"params": [
{
"name": "name",
"description": "a name for the node",
"type": "String"
}
]
}
},
"classitems": [
{
"file": "../src/litegraph.js",
"line": 33,
"description": "Register a node class so it can be listed when the user wants to create a new one",
"itemtype": "method",
"name": "registerNodeType",
"params": [
{
"name": "type",
"description": "name of the node and path",
"type": "String"
},
{
"name": "base_class",
"description": "class containing the structure of a node",
"type": "Class"
}
],
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 67,
"description": "Create a node of a given type with a name. The node is not attached to any graph yet.",
"itemtype": "method",
"name": "createNode",
"params": [
{
"name": "type",
"description": "full name of the node class. p.e. \"math/sin\"",
"type": "String"
},
{
"name": "name",
"description": "a name to distinguish from other nodes",
"type": "String"
},
{
"name": "options",
"description": "to set options",
"type": "Object"
}
],
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 143,
"description": "Returns a registered node type with a given name",
"itemtype": "method",
"name": "getNodeType",
"params": [
{
"name": "type",
"description": "full name of the node class. p.e. \"math/sin\"",
"type": "String"
}
],
"return": {
"description": "the node class",
"type": "Class"
},
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 156,
"description": "Returns a list of node types matching one category",
"itemtype": "method",
"name": "getNodeType",
"params": [
{
"name": "category",
"description": "category name",
"type": "String"
}
],
"return": {
"description": "array with all the node classes",
"type": "Array"
},
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 178,
"description": "Returns a list with all the node type categories",
"itemtype": "method",
"name": "getNodeTypesCategories",
"return": {
"description": "array with all the names of the categories",
"type": "Array"
},
"class": "LiteGraph"
},
{
"file": "../src/litegraph.js",
"line": 321,
"description": "Removes all nodes from this graph",
"itemtype": "method",
"name": "clear",
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 364,
"description": "Starts running this graph every interval milliseconds.",
"itemtype": "method",
"name": "start",
"params": [
{
"name": "interval",
"description": "amount of milliseconds between executions, default is 1",
"type": "Number"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 391,
"description": "Stops the execution loop of the graph",
"itemtype": "method",
"name": "stop",
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 413,
"description": "Run N steps (cycles) of the graph",
"itemtype": "method",
"name": "runStep",
"params": [
{
"name": "num",
"description": "number of steps to run, default is 1",
"type": "Number"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 457,
"description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.",
"itemtype": "method",
"name": "updateExecutionOrder",
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 553,
"description": "Returns the amount of time the graph has been running in milliseconds",
"itemtype": "method",
"name": "getTime",
"return": {
"description": "number of milliseconds the graph has been running",
"type": "Number"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 564,
"description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant",
"itemtype": "method",
"name": "getFixedTime",
"return": {
"description": "number of milliseconds the graph has been running",
"type": "Number"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 575,
"description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions",
"itemtype": "method",
"name": "getElapsedTime",
"return": {
"description": "number of milliseconds it took the last cycle",
"type": "Number"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 587,
"description": "Sends an event to all the nodes, useful to trigger stuff",
"itemtype": "method",
"name": "sendEventToAllNodes",
"params": [
{
"name": "eventname",
"description": "the name of the event",
"type": "String"
},
{
"name": "param",
"description": "an object containing the info",
"type": "Object"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 602,
"description": "Adds a new node instasnce to this graph",
"itemtype": "method",
"name": "add",
"params": [
{
"name": "node",
"description": "the instance of the node",
"type": "LGraphNode"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 647,
"description": "Removes a node from the graph",
"itemtype": "method",
"name": "remove",
"params": [
{
"name": "node",
"description": "the instance of the node",
"type": "LGraphNode"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 708,
"description": "Returns a node by its id.",
"itemtype": "method",
"name": "getNodeById",
"params": [
{
"name": "id",
"description": "",
"type": "String"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 721,
"description": "Returns a list of nodes that matches a type",
"itemtype": "method",
"name": "findNodesByType",
"params": [
{
"name": "type",
"description": "the name of the node type",
"type": "String"
}
],
"return": {
"description": "a list with all the nodes of this type",
"type": "Array"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 737,
"description": "Returns a list of nodes that matches a name",
"itemtype": "method",
"name": "findNodesByName",
"params": [
{
"name": "name",
"description": "the name of the node to search",
"type": "String"
}
],
"return": {
"description": "a list with all the nodes with this name",
"type": "Array"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 753,
"description": "Returns the top-most node in this position of the canvas",
"itemtype": "method",
"name": "getNodeOnPos",
"params": [
{
"name": "x",
"description": "the x coordinate in canvas space",
"type": "Number"
},
{
"name": "y",
"description": "the y coordinate in canvas space",
"type": "Number"
},
{
"name": "nodes_list",
"description": "a list with all the nodes to search from, by default is all the nodes in the graph",
"type": "Array"
}
],
"return": {
"description": "a list with all the nodes that intersect this coordinate",
"type": "Array"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 774,
"description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
"itemtype": "method",
"name": "setInputData",
"params": [
{
"name": "name",
"description": "the name of the node",
"type": "String"
},
{
"name": "value",
"description": "value to assign to this node",
"type": "*"
}
],
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 789,
"description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
"itemtype": "method",
"name": "setInputData",
"params": [
{
"name": "name",
"description": "the name of the node",
"type": "String"
}
],
"return": {
"description": "value of the node",
"type": "*"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 843,
"description": "Creates a JSON String containing all the info about this graph",
"itemtype": "method",
"name": "serialize",
"return": {
"description": "value of the node",
"type": "String"
},
"class": "LGraph"
},
{
"file": "../src/litegraph.js",
"line": 869,
"description": "Configure a graph from a JSON string",
"itemtype": "method",
"name": "unserialize",
"params": [
{
"name": "str",
"description": "configure a graph from a JSON string",
"type": "String"
}
],
"class": "LGraph"
}
],
"warnings": []
}

3894
doc/files/.._src_litegraph.js.html Normal file
View File

File diff suppressed because it is too large Load Diff

10
doc/files/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>Redirector</title>
<meta http-equiv="refresh" content="0;url=../">
</head>
<body>
<a href="../">Click here to redirect</a>
</body>
</html>

126
doc/index.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="./assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="./assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="./assets/favicon.png">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="./assets/css/logo.png" title=""></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: </em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="./classes/LGraph.html">LGraph</a></li>
<li><a href="./classes/LGraphNode.html">LGraphNode</a></li>
<li><a href="./classes/LiteGraph.html">LiteGraph</a></li>
</ul>
<ul id="api-modules" class="apis modules">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<div class="apidocs">
<div id="docs-main" class="content">
<p>
Browse to a module or class using the sidebar to view its API documentation.
</p>
<h2>Keyboard Shortcuts</h2>
<ul>
<li><p>Press <kbd>s</kbd> to focus the API search box.</p></li>
<li><p>Use <kbd>Up</kbd> and <kbd>Down</kbd> to select classes, modules, and search results.</p></li>
<li class="mac-only"><p>With the API search box or sidebar focused, use <kbd><span class="cmd">&#x2318;</span>-Left</kbd> or <kbd><span class="cmd">&#x2318;</span>-Right</kbd> to switch sidebar tabs.</p></li>
<li class="pc-only"><p>With the API search box or sidebar focused, use <kbd>Ctrl+Left</kbd> and <kbd>Ctrl+Right</kbd> to switch sidebar tabs.</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="./assets/js/yui-prettify.js"></script>
<script src="./assets/../api.js"></script>
<script src="./assets/js/api-filter.js"></script>
<script src="./assets/js/api-list.js"></script>
<script src="./assets/js/api-search.js"></script>
<script src="./assets/js/apidocs.js"></script>
</body>
</html>

10
doc/modules/index.html Normal file
View File

@@ -0,0 +1,10 @@
<!doctype html>
<html>
<head>
<title>Redirector</title>
<meta http-equiv="refresh" content="0;url=../">
</head>
<body>
<a href="../">Click here to redirect</a>
</body>
</html>

694
src/litegraph.js
View File

@@ -17,9 +17,10 @@ var LiteGraph = {
NODE_WIDTH: 140,
NODE_MIN_WIDTH: 50,
NODE_COLLAPSED_RADIUS: 10,
NODE_COLLAPSED_WIDTH: 80,
CANVAS_GRID_SIZE: 10,
NODE_DEFAULT_COLOR: "#888",
NODE_DEFAULT_BGCOLOR: "#333",
NODE_DEFAULT_COLOR: "#999",
NODE_DEFAULT_BGCOLOR: "#444",
NODE_DEFAULT_BOXCOLOR: "#AEF",
NODE_DEFAULT_SHAPE: "box",
MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
@@ -1166,7 +1167,7 @@ LGraphNode.prototype.computeSize = function(minHeight)
//returns the bounding of the object, used for rendering purposes
LGraphNode.prototype.getBounding = function()
{
return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
}
//checks if a point is inside the shape of a node
@@ -1175,7 +1176,8 @@ LGraphNode.prototype.isPointInsideNode = function(x,y)
var margin_top = this.graph.isLive() ? 0 : 20;
if(this.flags.collapsed)
{
if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
if( isInsideRectangle(x,y, this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_COLLAPSED_WIDTH, LiteGraph.NODE_TITLE_HEIGHT) )
return true;
}
else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x
@@ -1384,7 +1386,13 @@ LGraphNode.prototype.disconnectInput = function(slot)
LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
{
if(this.flags.collapsed)
return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
{
if(is_input)
return [this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
else
return [this.pos[0] + LiteGraph.NODE_COLLAPSED_WIDTH, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
//return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
}
if(is_input && slot_number == -1)
{
@@ -1401,331 +1409,6 @@ LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT];
}
/* Renders the LGraphNode on the canvas */
LGraphNode.prototype.draw = function(ctx, canvasrender)
{
var glow = false;
var color = this.color || LiteGraph.NODE_DEFAULT_COLOR;
//if (this.selected) color = "#88F";
var render_title = true;
if(this.flags.skip_title_render || this.graph.isLive())
render_title = false;
if(this.mouseOver)
render_title = true;
//shadow and glow
if (this.mouseOver) glow = true;
if(this.selected)
{
/*
ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 1;
*/
}
else if(canvasrender.render_shadows)
{
ctx.shadowColor = "#111";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 4;
}
else
ctx.shadowColor = "transparent";
//only render if it forces it to do it
if(canvasrender.live_mode)
{
if(!this.flags.collapsed)
{
ctx.shadowColor = "transparent";
if(this.onDrawBackground)
this.onDrawBackground(ctx);
if(this.onDrawForeground)
this.onDrawForeground(ctx);
}
return;
}
//draw in collapsed form
if(this.flags.collapsed)
{
if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false)
this.drawNodeCollapsed(ctx,color,this.bgcolor);
return;
}
//clip if required (mask)
if(this.flags.clip_area)
{
ctx.save();
if(this.shape == null || this.shape == "box")
{
ctx.beginPath();
ctx.rect(0,0,this.size[0], this.size[1]);
}
else if (this.shape == "round")
{
ctx.roundRect(0,0,this.size[0], this.size[1],10);
}
else if (this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
}
ctx.clip();
}
//draw shape
this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected );
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.font = "12px Arial";
var render_text = this.graph.config.canvas_scale > 0.6;
//input connection slots
if(this.inputs)
for(var i = 0; i < this.inputs.length; i++)
{
var slot = this.inputs[i];
ctx.globalAlpha = 1.0;
if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type)
ctx.globalAlpha = 0.4;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
var pos = this.getConnectionPos(true,i);
pos[0] -= this.pos[0];
pos[1] -= this.pos[1];
ctx.beginPath();
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
ctx.fill();
//render name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
//output connection slots
if(canvasrender.connecting_node)
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
ctx.textAlign = "right";
ctx.strokeStyle = "black";
if(this.outputs)
for(var i = 0; i < this.outputs.length; i++)
{
var slot = this.outputs[i];
var pos = this.getConnectionPos(false,i);
pos[0] -= this.pos[0];
pos[1] -= this.pos[1];
ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
ctx.beginPath();
//ctx.rect( this.size[0] - 14,i*14,10,10);
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
//trigger
//if(slot.node_id != null && slot.slot == -1)
// ctx.fillStyle = "#F85";
//if(slot.links != null && slot.links.length)
ctx.fill();
ctx.stroke();
//render output name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
ctx.textAlign = "left";
ctx.globalAlpha = 1.0;
if(this.onDrawForeground)
this.onDrawForeground(ctx);
if(this.flags.clip_area)
ctx.restore();
}
/* Renders the node shape */
LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected )
{
//bg rect
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
/* gradient test
var grad = ctx.createLinearGradient(0,0,0,this.size[1]);
grad.addColorStop(0, "#AAA");
grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
ctx.fillStyle = grad;
*/
var title_height = LiteGraph.NODE_TITLE_HEIGHT;
//render depending on shape
if(this.shape == null || this.shape == "box")
{
if(selected)
{
ctx.strokeStyle = "#CCC";
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) );
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height);
}
else if (this.shape == "round")
{
ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10);
}
else if (this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
}
ctx.fill();
ctx.shadowColor = "transparent";
ctx.stroke();
//image
if (this.bgImage && this.bgImage.width)
ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5);
if(this.bgImageUrl && !this.bgImage)
this.bgImage = this.loadImage(this.bgImageUrl);
if(this.onDrawBackground)
this.onDrawBackground(ctx);
//title bg
if(!no_title)
{
ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
if(this.shape == null || this.shape == "box")
{
ctx.fillRect(0,-title_height,this.size[0],title_height);
ctx.stroke();
}
else if (this.shape == "round")
{
ctx.roundRect(0,-title_height,this.size[0], title_height,10,0);
//ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
}
//box
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
if (this.shape == "round")
ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
else
ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
ctx.fill();
//title text
ctx.font = "bold 12px Arial";
if(this.name != "" && this.graph.config.canvas_scale > 0.8)
{
ctx.fillStyle = "#222";
ctx.fillText(this.name,16,13-title_height );
}
}
}
/* Renders the node when collapsed */
LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor)
{
//draw default collapsed shape
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
//circle shape
if(this.shape == "circle")
{
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
ctx.fill();
}
else if(this.shape == "round") //rounded box
{
ctx.beginPath();
ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
ctx.fill();
}
else //flat box
{
ctx.beginPath();
ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
ctx.fill();
}
}
/* Force align to grid */
LGraphNode.prototype.alignToGrid = function()
{
@@ -2946,14 +2629,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
for (var i in visible_nodes)
{
var n = visible_nodes[i];
var node = visible_nodes[i];
//transform coords system
ctx.save();
ctx.translate( n.pos[0], n.pos[1] );
ctx.translate( node.pos[0], node.pos[1] );
//Draw
n.draw(ctx,this);
this.drawNode(node, ctx );
drawn_nodes += 1;
//Restore
@@ -3090,6 +2773,349 @@ LGraphCanvas.prototype.drawBgcanvas = function()
this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas
}
/* Renders the LGraphNode on the canvas */
LGraphCanvas.prototype.drawNode = function(node, ctx )
{
var glow = false;
var color = node.color || LiteGraph.NODE_DEFAULT_COLOR;
//if (this.selected) color = "#88F";
var render_title = true;
if(node.flags.skip_title_render || node.graph.isLive())
render_title = false;
if(node.mouseOver)
render_title = true;
//shadow and glow
if (node.mouseOver) glow = true;
if(node.selected)
{
/*
ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 1;
*/
}
else if(this.render_shadows)
{
ctx.shadowColor = "#111";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 4;
}
else
ctx.shadowColor = "transparent";
//only render if it forces it to do it
if(this.live_mode)
{
if(!node.flags.collapsed)
{
ctx.shadowColor = "transparent";
if(node.onDrawBackground)
node.onDrawBackground(ctx);
if(node.onDrawForeground)
node.onDrawForeground(ctx);
}
return;
}
//draw in collapsed form
/*
if(node.flags.collapsed)
{
if(!node.onDrawCollapsed || node.onDrawCollapsed(ctx) == false)
this.drawNodeCollapsed(node, ctx, color, node.bgcolor);
return;
}
*/
//clip if required (mask)
var shape = node.shape || "box";
var size = new Float32Array(node.size);
if(node.flags.collapsed)
size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
//Start cliping
if(node.flags.clip_area)
{
ctx.save();
if(shape == "box")
{
ctx.beginPath();
ctx.rect(0,0,size[0], size[1]);
}
else if (shape == "round")
{
ctx.roundRect(0,0,size[0], size[1],10);
}
else if (shape == "circle")
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
}
ctx.clip();
}
//draw shape
this.drawNodeShape(node, ctx, size, color, node.bgcolor, !render_title, node.selected );
ctx.shadowColor = "transparent";
//connection slots
ctx.textAlign = "left";
ctx.font = "12px Arial";
var render_text = node.graph.config.canvas_scale > 0.6;
//render inputs and outputs
if(!node.flags.collapsed)
{
//input connection slots
if(node.inputs)
for(var i = 0; i < node.inputs.length; i++)
{
var slot = node.inputs[i];
ctx.globalAlpha = 1.0;
if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
ctx.globalAlpha = 0.4;
ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
var pos = node.getConnectionPos(true,i);
pos[0] -= node.pos[0];
pos[1] -= node.pos[1];
ctx.beginPath();
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
ctx.fill();
//render name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text,pos[0] + 10,pos[1] + 5);
}
}
}
//output connection slots
if(this.connecting_node)
ctx.globalAlpha = 0.4;
ctx.lineWidth = 1;
ctx.textAlign = "right";
ctx.strokeStyle = "black";
if(node.outputs)
for(var i = 0; i < node.outputs.length; i++)
{
var slot = node.outputs[i];
var pos = node.getConnectionPos(false,i);
pos[0] -= node.pos[0];
pos[1] -= node.pos[1];
ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
ctx.beginPath();
//ctx.rect( node.size[0] - 14,i*14,10,10);
if (1 || slot.round)
ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
//else
// ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
//trigger
//if(slot.node_id != null && slot.slot == -1)
// ctx.fillStyle = "#F85";
//if(slot.links != null && slot.links.length)
ctx.fill();
ctx.stroke();
//render output name
if(render_text)
{
var text = slot.label != null ? slot.label : slot.name;
if(text)
{
ctx.fillStyle = color;
ctx.fillText(text, pos[0] - 10,pos[1] + 5);
}
}
}
ctx.textAlign = "left";
ctx.globalAlpha = 1.0;
if(node.onDrawForeground)
node.onDrawForeground(ctx);
}//!collapsed
if(node.flags.clip_area)
ctx.restore();
}
/* Renders the node shape */
LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolor, no_title, selected )
{
//bg rect
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
/* gradient test
var grad = ctx.createLinearGradient(0,0,0,node.size[1]);
grad.addColorStop(0, "#AAA");
grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
ctx.fillStyle = grad;
*/
var title_height = LiteGraph.NODE_TITLE_HEIGHT;
//render depending on shape
var shape = node.shape || "box";
if(shape == "box")
{
if(selected)
{
ctx.strokeStyle = "#CCC";
ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
ctx.strokeStyle = fgcolor;
}
ctx.beginPath();
ctx.rect(0,no_title ? 0.5 : -title_height + 1,size[0]+1, no_title ? size[1] : size[1] + title_height);
}
else if (node.shape == "round")
{
ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
}
else if (node.shape == "circle")
{
ctx.beginPath();
ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
}
ctx.fill();
ctx.shadowColor = "transparent";
//ctx.stroke();
//image
if (node.bgImage && node.bgImage.width)
ctx.drawImage( node.bgImage, (size[0] - node.bgImage.width) * 0.5 , (size[1] - node.bgImage.height) * 0.5);
if(node.bgImageUrl && !node.bgImage)
node.bgImage = node.loadImage(node.bgImageUrl);
if(node.onDrawBackground)
node.onDrawBackground(ctx);
//title bg
if(!no_title)
{
ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
if(shape == "box")
{
ctx.beginPath();
ctx.fillRect(0,-title_height,size[0]+1,title_height);
ctx.stroke();
}
else if (shape == "round")
{
ctx.roundRect(0,-title_height,size[0], title_height,10,0);
//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
ctx.fill();
ctx.stroke();
}
//box
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
if (shape == "round")
ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
else
ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
ctx.fill();
//title text
ctx.font = "bold 12px Arial";
if(node.name != "" && node.graph.config.canvas_scale > 0.8)
{
ctx.fillStyle = "#222";
ctx.fillText(node.name,16,13-title_height );
}
}
}
/* Renders the node when collapsed */
LGraphCanvas.prototype.drawNodeCollapsed = function(node, ctx, fgcolor, bgcolor)
{
//draw default collapsed shape
ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
//circle shape
var shape = node.shape || "box";
if(shape == "circle")
{
ctx.beginPath();
ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
ctx.fill();
}
else if(shape == "round") //rounded box
{
ctx.beginPath();
ctx.roundRect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
ctx.roundRect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
ctx.fill();
}
else //flat box
{
ctx.beginPath();
//ctx.rect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius, 2*collapsed_radius);
ctx.rect(0, 0, node.size[0], collapsed_radius * 2 );
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
ctx.beginPath();
//ctx.rect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
ctx.rect(collapsed_radius*0.5, collapsed_radius*0.5, collapsed_radius, collapsed_radius);
ctx.fill();
}
}
LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"];
LGraphCanvas.prototype.drawConnections = function(ctx)
@@ -3398,7 +3424,7 @@ LGraphCanvas.onMenuNodeColors = function(node, e, prev_menu)
LGraphCanvas.onMenuNodeShapes = function(node,e)
{
LiteGraph.createContextualMenu(["box","round","circle"], {event: e, callback: inner_clicked});
LiteGraph.createContextualMenu(["box","round"], {event: e, callback: inner_clicked});
function inner_clicked(v)
{