commit: e0bc870d71b36b02800e20c70f81efc0a2bfc2f2
parent 61eb36c4daf25816ba64b5834f8ecb7d5db98220
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Mon, 5 Mar 2018 15:54:04 +1300
Implemented Dom nodes
Diffstat:
9 files changed, 75 insertions(+), 48 deletions(-)
diff --git a/index.html b/index.html
@@ -4,8 +4,19 @@
<meta charset="utf-8">
<script src="scripts/lib/riven.js"></script>
<script src="scripts/graph.js"></script>
+
<script src="scripts/nodes/query.js"></script>
<script src="scripts/nodes/router.js"></script>
+ <script src="scripts/nodes/database.js"></script>
+ <script src="scripts/nodes/dictionary.js"></script>
+ <script src="scripts/nodes/template.js"></script>
+ <script src="scripts/nodes/dom.js"></script>
+ <script src="scripts/nodes/element.js"></script>
+
+ <script src="scripts/dictionary/ingredients.js"></script>
+ <script src="scripts/dictionary/recipes.js"></script>
+ <script src="scripts/dictionary/pages.js"></script>
+
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
<title>Riven</title>
diff --git a/links/riven.main.css b/links/riven.main.css
@@ -1,5 +1,5 @@
body { padding:20px; background-image: url(../media/assets/grid.svg); background-color:#111; font-family: 'input_mono_medium'; font-size:9px; background-size:20px 20px;}
-svg { padding:50px 10px; width:calc(100vw - 80px); height:calc(100vh - 80px); position: fixed; left:0px; top:0px; }
+svg { padding:50px 10px; width:100%; height:100%; position: fixed; left:0px; top:0px; }
svg.magnet { transition: all 250ms }
svg g.node { fill:#777; }
svg g.node text { text-anchor: middle }
diff --git a/riven.html b/riven.html
@@ -5,6 +5,7 @@
<script src="scripts/lib/riven.js"></script>
<script src="scripts/lib/riven.graph.js"></script>
<script src="scripts/graph.js"></script>
+
<script src="scripts/nodes/query.js"></script>
<script src="scripts/nodes/router.js"></script>
<script src="scripts/nodes/database.js"></script>
diff --git a/scripts/graph.js b/scripts/graph.js
@@ -1,19 +1,7 @@
-function PrintNode(id,rect)
-{
- Node.call(this,id,rect);
- this.glyph = NODE_GLYPHS.render
-
- this.receive = function(q)
- {
- this.label = q;
- }
-}
-
function graph()
{
Ø("query").cast({x:2,y:4},QueryNode)
- Ø("print").cast({x:32,y:4},PrintNode)
Ø("model").mesh({x:6,y:0},[
Ø("router").cast({x:5,y:2},RouterNode),
@@ -24,20 +12,30 @@ function graph()
])
Ø("view").mesh({x:18,y:0},[
- Ø("dom").cast({x:5,y:2},DomNode),
- Ø("header").cast({x:2,y:8},ElementNode),
- Ø("body").cast({x:5,y:8},ElementNode),
- Ø("footer").cast({x:8,y:8},ElementNode),
+ Ø("template").cast({x:2,y:2},TemplateNode),
+ Ø("main").cast({x:8,y:2},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),
+
+ Ø("body").cast({x:14,y:10},DomNode),
+ Ø("related").cast({x:20,y:14},DomNode),
+
+ Ø("footer").cast({x:14,y:6},DomNode),
])
Ø("router").syphon("database")
Ø("database").syphon(["recipes","ingredients","pages"])
- Ø("dom").syphon(["header","body","footer"])
- Ø("dom").connect("print")
+ Ø("main").connect(["header","body","footer"])
+ Ø("body").connect(["related"])
+ Ø("header").connect(["logo","search","menu"])
Ø("query").connect("router")
- Ø("router").connect("dom")
+ Ø("router").connect("template")
+ Ø("template").connect("main")
Ø("query").bang()
}
diff --git a/scripts/lib/riven.graph.js b/scripts/lib/riven.graph.js
@@ -213,20 +213,3 @@ function Riven_Graph()
this.cursor.install(this);
}
-
-var NODE_GLYPHS = {
- default: "M150,60 L150,60 L60,150 L150,240 L240,150 Z",
- router:"M60,120 L60,120 L150,120 L240,60 M60,150 L60,150 L240,150 M60,180 L60,180 L150,180 L240,240",
- parser:"M60,60 L60,60 L240,60 M120,120 A30,30 0 0,1 150,150 M150,150 A30,30 0 0,0 180,180 M180,180 L180,180 L240,180 M120,120 L120,120 L60,120 M60,240 L60,240 L240,240 M240,120 L240,120 L180,120 M60,180 L60,180 L120,180",
- entry:"M60,150 L60,150 L240,150 L240,150 L150,240 M150,60 L150,60 L240,150",
- bang:"M150,60 L150,60 L150,180 M150,240 L150,240 L150,240",
- value:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M60,150 L60,150 L240,150",
- equal:"M60,60 L60,60 L240,60 M60,120 L60,120 L240,120 M60,180 L60,180 L240,180 M60,240 L60,240 L240,240",
- render:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M240,150 L240,150 L150,150 L150,240",
- database:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M120,120 L120,120 L180,120 M120,180 L120,180 L180,180 M120,150 L120,150 L180,150",
- cache:"M60,60 L60,60 L240,60 L240,240 L60,240 Z",
- builder:"M60,60 L60,60 L150,120 L240,120 M60,150 L60,150 L240,150 M60,240 L60,240 L150,180 L240,180",
- selector:"M90,60 L90,60 L60,60 L60,90 M60,210 L60,210 L60,240 L90,240 M210,240 L210,240 L240,240 L240,210 M240,90 L240,90 L240,60 L210,60",
- dom: "M150,60 L150,60 L60,150 L150,240 L240,150 Z",
- element: "M150,60 L150,60 L240,150 L150,240 L60,150 Z M120,150 L120,150 L180,150 M150,120 L150,120 L150,180",
-}-
\ No newline at end of file
diff --git a/scripts/lib/riven.js b/scripts/lib/riven.js
@@ -205,3 +205,19 @@ function Node(id,rect={x:0,y:0,w:2,h:2})
var PORT_TYPES = {default:"default",input:"input",output:"output",request:"request",answer:"answer"}
var ROUTE_TYPES = {default:"default",request:"request"}
+var NODE_GLYPHS = {
+ default: "M150,60 L150,60 L60,150 L150,240 L240,150 Z",
+ router:"M60,120 L60,120 L150,120 L240,60 M60,150 L60,150 L240,150 M60,180 L60,180 L150,180 L240,240",
+ parser:"M60,60 L60,60 L240,60 M120,120 A30,30 0 0,1 150,150 M150,150 A30,30 0 0,0 180,180 M180,180 L180,180 L240,180 M120,120 L120,120 L60,120 M60,240 L60,240 L240,240 M240,120 L240,120 L180,120 M60,180 L60,180 L120,180",
+ entry:"M60,150 L60,150 L240,150 L240,150 L150,240 M150,60 L150,60 L240,150",
+ bang:"M150,60 L150,60 L150,180 M150,240 L150,240 L150,240",
+ value:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M60,150 L60,150 L240,150",
+ equal:"M60,60 L60,60 L240,60 M60,120 L60,120 L240,120 M60,180 L60,180 L240,180 M60,240 L60,240 L240,240",
+ render:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M240,150 L240,150 L150,150 L150,240",
+ database:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M120,120 L120,120 L180,120 M120,180 L120,180 L180,180 M120,150 L120,150 L180,150",
+ cache:"M60,60 L60,60 L240,60 L240,240 L60,240 Z",
+ builder:"M60,60 L60,60 L150,120 L240,120 M60,150 L60,150 L240,150 M60,240 L60,240 L150,180 L240,180",
+ selector:"M90,60 L90,60 L60,60 L60,90 M60,210 L60,210 L60,240 L90,240 M210,240 L210,240 L240,240 L240,210 M240,90 L240,90 L240,60 L210,60",
+ dom: "M150,60 L150,60 L60,150 L150,240 L240,150 Z",
+ element: "M150,60 L150,60 L240,150 L150,240 L60,150 Z M120,150 L120,150 L180,150 M150,120 L150,120 L150,180",
+}+
\ No newline at end of file
diff --git a/scripts/nodes/database.js b/scripts/nodes/database.js
@@ -2,7 +2,7 @@ function DatabaseNode(id,rect)
{
Node.call(this,id,rect);
- this.glyph = NODE_GLYPHS.cache
+ this.glyph = NODE_GLYPHS ? NODE_GLYPHS.cache : ""
this.cache = null;
diff --git a/scripts/nodes/dom.js b/scripts/nodes/dom.js
@@ -5,29 +5,34 @@ function DomNode(id,rect)
this.glyph = NODE_GLYPHS.dom
this.el = document.createElement("yu")
+ this.el.id = this.id
this.is_installed = false;
- this.receive = function(page)
+ this.receive = function(content)
{
if(!this.is_installed){
this.install(this.request());
}
-
- this.update(page);
+
+ if(content[this.id]){
+ this.update(content[this.id]);
+ this.send(content[this.id])
+ }
}
this.install = function(elements)
{
+ this.is_installed = true;
for(id in elements){
- var el = elements[id];
- this.el.appendChild(el)
+ this.el.appendChild(elements[id])
}
document.body.appendChild(this.el)
- this.is_installed = true;
}
- this.update = function()
+ this.update = function(content)
{
-
+ if(typeof content == "string"){
+ this.el.innerHTML = content;
+ }
}
}
\ No newline at end of file
diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js
@@ -2,5 +2,18 @@ function TemplateNode(id,rect)
{
Node.call(this,id,rect);
- this.glyph = NODE_GLYPHS.builder
+ this.glyph = NODE_GLYPHS.parser
+
+ this.cache = null;
+
+ this.receive = function(q)
+ {
+ var dom = {
+ header:{
+ search:"test"
+ },
+ footer:"hello"
+ }
+ this.send({main:dom})
+ }
}
\ No newline at end of file
