commit: 40b9198cddf0b585992ad49b7d1e306fd00f10fb
parent e0bc870d71b36b02800e20c70f81efc0a2bfc2f2
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Mon, 5 Mar 2018 17:36:27 +1300
Improved connection types
Diffstat:
6 files changed, 72 insertions(+), 23 deletions(-)
diff --git a/links/riven.main.css b/links/riven.main.css
@@ -14,4 +14,5 @@ svg rect.fill { fill:#111; }
svg text { fill:white; text-transform: uppercase; }
svg path.route { stroke:#555; stroke-width:2; }
svg path.route.request { stroke-dasharray: 5,5; }
+svg path.route.bidirectional { stroke:#33; stroke-dasharray: 0,3; }
svg g:hover text { fill:#72dec2; cursor: pointer; }
\ No newline at end of file
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -5,37 +5,37 @@ function graph()
Ø("model").mesh({x:6,y:0},[
Ø("router").cast({x:5,y:2},RouterNode),
- Ø("database").cast({x:5,y:8},DatabaseNode),
- Ø("recipes").cast({x:2,y:14},DictionaryNode),
- Ø("ingredients").cast({x:5,y:14},DictionaryNode),
- Ø("pages").cast({x:8,y:14},DictionaryNode),
+ Ø("database").cast({x:5,y:9},DatabaseNode),
+ Ø("recipes").cast({x:2,y:17},DictionaryNode),
+ Ø("ingredients").cast({x:5,y:17},DictionaryNode),
+ Ø("pages").cast({x:8,y:17},DictionaryNode),
])
Ø("view").mesh({x:18,y:0},[
Ø("template").cast({x:2,y:2},TemplateNode),
- Ø("main").cast({x:8,y:2},DomNode),
+ Ø("main").cast({x:8,y:7},DomNode),
- Ø("header").cast({x:14,y:2},DomNode),
- Ø("logo").cast({x:20,y:2},DomNode),
- Ø("search").cast({x:20,y:6},DomNode),
- Ø("menu").cast({x:20,y:10},DomNode),
+ Ø("header").cast({x:2,y:12},DomNode),
+ Ø("logo").cast({x:2,y:17},DomNode),
+ Ø("search").cast({x:6,y:17},DomNode),
+ Ø("menu").cast({x:10,y:17},DomNode),
- Ø("body").cast({x:14,y:10},DomNode),
- Ø("related").cast({x:20,y:14},DomNode),
+ Ø("body").cast({x:14,y:12},DomNode),
+ Ø("related").cast({x:14,y:17},DomNode),
- Ø("footer").cast({x:14,y:6},DomNode),
+ Ø("footer").cast({x:10,y:12},DomNode),
])
Ø("router").syphon("database")
Ø("database").syphon(["recipes","ingredients","pages"])
- Ø("main").connect(["header","body","footer"])
- Ø("body").connect(["related"])
- Ø("header").connect(["logo","search","menu"])
+ Ø("template").bind("main")
+ Ø("main").bind(["header","body","footer"])
+ Ø("body").bind(["related"])
+ Ø("header").bind(["logo","search","menu"])
Ø("query").connect("router")
Ø("router").connect("template")
- Ø("template").connect("main")
Ø("query").bang()
}
diff --git a/scripts/lib/riven.graph.js b/scripts/lib/riven.graph.js
@@ -72,9 +72,27 @@ function Riven_Graph()
function draw_connection(a,b,type)
{
+ if(is_bidirectional(a.host,b.host)){
+ return a.type != PORT_TYPES.output ? draw_connection_bidirectional(a,b) : ""
+ }
+
return a.type == PORT_TYPES.output ? draw_connection_output(a,b) : draw_connection_request(a,b)
}
+ function is_bidirectional(a,b)
+ {
+ for(id in a.ports.output.routes){
+ var route_a = a.ports.output.routes[id]
+ for(id in a.ports.request.routes){
+ var route_b = a.ports.request.routes[id]
+ if(route_a.host.id == route_b.host.id){
+ return true;
+ }
+ }
+ }
+ return false
+ }
+
function draw_connection_output(a,b)
{
var pos_a = get_port_position(a)
@@ -112,6 +130,23 @@ function Riven_Graph()
return `<path d="${path}" class='route request'/>
<circle cx='${pos_m.x}' cy='${pos_m.y}' r='2' fill='white'></circle>`
}
+
+ function draw_connection_bidirectional(a,b)
+ {
+ var pos_a = get_port_position(a)
+ var pos_b = get_port_position(b)
+ var pos_m = middle(pos_a,pos_b)
+ var pos_c1 = {x:pos_a.x,y:(pos_m.y+(pos_a.y+GRID_SIZE))/2}
+ var pos_c2 = {x:pos_b.x,y:(pos_m.y+(pos_b.y-GRID_SIZE))/2}
+
+ var path = ""
+
+ path += `M${pos_a.x},${pos_a.y} L${pos_a.x},${pos_a.y+GRID_SIZE} `
+ path += `L${pos_a.x},${pos_m.y} L${pos_b.x},${pos_m.y}`
+ path += `L${pos_b.x},${pos_b.y-GRID_SIZE} L${pos_b.x},${pos_b.y}`
+
+ return `<path d="${path}" class='route bidirectional'/>`
+ }
function draw_diamond(pos)
{
@@ -187,7 +222,7 @@ function Riven_Graph()
update: function(){
this.host.el.style.left = `${parseInt(this.offset.x)}px`;
this.host.el.style.top = `${parseInt(this.offset.y)}px`;
- document.body.style.backgroundPosition = `${this.offset.x/2}px ${this.offset.y/2}px`;
+ document.body.style.backgroundPosition = `${parseInt(this.offset.x/2)}px ${parseInt(this.offset.y/2)}px`;
},
touch: function(pos,click = null){
if(click == true){
diff --git a/scripts/lib/riven.js b/scripts/lib/riven.js
@@ -87,7 +87,9 @@ function Node(id,rect={x:0,y:0,w:2,h:2})
return node;
}
- this.connect = function(q,type)
+ // Connection
+
+ this.connect = function(q,type = ROUTE_TYPES.output)
{
if(q instanceof Array){
for(id in q){
@@ -104,6 +106,12 @@ function Node(id,rect={x:0,y:0,w:2,h:2})
this.connect(q,ROUTE_TYPES.request)
}
+ this.bind = function(q)
+ {
+ this.connect(q)
+ this.syphon(q)
+ }
+
this.signal = function(target)
{
for(port_id in this.ports){
diff --git a/scripts/nodes/dom.js b/scripts/nodes/dom.js
@@ -9,17 +9,21 @@ function DomNode(id,rect)
this.is_installed = false;
this.receive = function(content)
- {
- if(!this.is_installed){
- this.install(this.request());
- }
-
+ {
if(content[this.id]){
this.update(content[this.id]);
this.send(content[this.id])
}
}
+ this.answer = function()
+ {
+ if(!this.is_installed){
+ this.install(this.request());
+ }
+ return this.el
+ }
+
this.install = function(elements)
{
this.is_installed = true;
diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js
@@ -15,5 +15,6 @@ function TemplateNode(id,rect)
footer:"hello"
}
this.send({main:dom})
+ this.request()
}
}
\ No newline at end of file
