minimal template viz with statics

static/css/app.css

+
+
+
+
+
+#padagraph-top .row {
+    
+}
+
+
+#padagraph-top .column {
+    padding: 6px 0px 6px 0px;
+    z-index: 100;
+
+}
+#padagraph-right.column {
+    padding: 0px;
+    padding-top: 6px;
+}
+
+#padagraph-right .tab {
+    padding: 0px;
+    margin: 0px;
+    height: calc(100% - 68px);
+}
+#padagraph-right .tab.tab-actions{
+    height: calc(100% - 51px);
+}
+
+#padagraph-right .tab .scrollable {
+    max-height: 100%;
+    overflow-y:auto;
+    word-wrap: break-word;
+    text-align: left;
+    padding: 6px;
+/*
+    margin-top  : 10px;
+*/
+}
+
+
+#padagraph-right .ui.secondary.fitted.menu {
+    border-top: 0px;
+}
+
+#padagraph-right .tab .vertical.menu>.item {
+ padding-left:8px;
+
+}
+
+#padagraph-right .tab .vertical.menu>.item .menu .item{
+/*
+ padding-left:2px;
+*/
+}
+
+#padagraph-viz {
+    height : calc(100% - 52px);
+    padding:0px;
+    width:100%;
+}
+
+
+#padagraph-viz .dimmer {
+    background: hsla(60,100%,30%,0.6);
+    padding: 12px;
+}
+
+.startapp .ui.menu, .ui.pointing.dropdown>.menu {
+    border-radius: .2rem;
+    
+}
+
+i.dore.icons i.comment.icon {
+    color: #999900;
+}
+
+.menu.inverted i.dore.icons i.share.icon {
+    color: #e2E2E2;
+}
+
+i.dore.icons i.share.icon {
+    color: #666;
+}
+
+
+
+
+
+.padagraph-box, .padagraph-box-messages {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 12px;
+    z-index:100;
+    background: rgba(51, 51, 51, 0.6);
+}
+
+.padagraph-box {
+    height: 100%;
+    width: 100%;
+}
+
+.padagraph-box .ui.steps .step {
+    padding: 0px !important;
+}
+
+.padagraph-box>.message {
+    padding: 0px;
+    padding-top: 2px;
+    border: 1px solid #16191D;
+    border-radius: 0px;
+    max-height:800px;
+    max-width: 800px;
+    text-align: left;
+    margin: auto;
+}
+
+.padagraph-box>.message>.form>.header {
+    padding: 18px;
+    text-align: left;
+    background-color: #333;
+    color: white;
+    
+}
+.padagraph-box .message .form  .content {
+    height: auto;
+    padding: 12px;
+    overflow: auto;
+}
+
+.padagraph-box .padagraph-edit-buttons {
+    padding-bottom: 42px !important;
+    margin-top: 10px !important;
+}
+
+.padagraph-box   .padagraph-edit-buttons .right.floated.button {
+    margin-right: 12px;
+}  
+.padagraph-box .padagraph-edit-buttons .left.floated.button {
+    margin-left: 12px;
+}  
+
+
+.ui.star.rating .icon:hover {
+    color:#DDC507;
+}
+
+
+
+/*
+ *
+ *.padagraph-box{
+            height: 100%;
+        }
+        
+        .padagraph-box .message {
+            padding: 0px;
+            padding-top: 2px;
+            border: 1px solid #16191D;
+            border-radius: 0px;
+            max-height:800px;
+            max-width: 800px;
+            text-align: left;
+            margin: auto;
+        }
+        
+        
+        .padagraph-box .message .form .header {
+            padding: 18px;
+            text-align: left;
+            background-color: #333;
+            color: white;
+            
+        }
+        .padagraph-box .message .form /deep/ .content {
+            height: auto;
+            padding: 12px;
+        }
+        
+        .padagraph-box .padagraph-edit-buttons {
+            padding-bottom: 48px !important;
+        }
+        .padagraph-box /deep/  .padagraph-edit-buttons button.right.floated.button {
+            margin-right: 12px;
+        }  
+        .padagraph-box /deep/  .padagraph-edit-buttons button.left.floated {
+            margin-left: 12px;
+        }  
+
+ * 
+ *
+ *
+ * 
+ *
+ * :host .padagraph-box {
+            height:100%;
+        }
+        
+        .ui.message {
+            padding-top: 20px;
+            padding: 0px;
+            border: 1px solid #2A63AC;
+            border-radius: 0px;
+            max-height:800px;
+            max-width: 800px;
+            text-align: left;
+            margin: auto;
+        }
+        .form .header {
+            padding: 18px;
+            text-align: left;
+            background-color: #333;
+            color: white;
+            
+        }
+        .form .content {
+            height: auto;
+            padding: 12px;
+        }
+
+        .padagraph-edit-buttons {
+            padding-bottom: 48px;
+        }
+        
+        button.ui.icon.right.floated.button {
+            margin-right: 12px;
+        }  
+*/
\ No newline at end of file

static/css/page.css

+
+body {
+/*
+    background-color:#999900;
+*/
+    background-color:#F7F7F7;
+}
+
+ #padagraph-row-top {
+    background-color: #333;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    margin-bottom: 20px !important;
+    padding: 0px;
+    padding-top: 10px;
+    height: 70px;
+}
+
+
+
+#padagraph-row-top .row {
+    padding: 4px;
+}
+
+
+
+
+
+/*  one page app css */
+
+h1.ui.header {
+    margin-bottom:-20px;
+}
+
+    
+.ui.divider { margin:14px; }
+
+#padagraph-viz {
+    background-color:{{color}};
+    margin:auto;
+}
+
+.compact.mini.buttons {
+        vertical-align:middle;
+}
+.compact.mini.buttons .ui.button{
+    padding:6px !important;
+}
+.compact.mini.buttons .downvote.icon.button .icon, .compact.mini.buttons .upvote.icon.button .icon{
+    margin-right:4px;
+}
+.ui.primary.button{
+    margin-left:8px;
+}
+
+
+/*  iframe css */
+
+
+
+#markdown {
+    position: absolute;
+    overflow-y: scroll;
+    display:none;
+    top: 0px;
+    left: 0px;
+    height: 90%;
+    margin: 20px;
+    padding: 20px;
+    background-color:{{color}};
+    border: 1px solid white;
+    opacity: 0.87;
+}
+#markdown h1, #markdown h2 {
+    border-bottom: 2px solid #0f8e8e;
+}  
+#markdown a {
+    color: #000e40;
+    text-decoration: underline;
+    font-weight: 700;
+}
+
+.panel {
+    position: relative;
+    top: -32px;
+    left: -6px;
+    text-align: center;
+    margin:auto;
+}
+
+.small.button {
+    margin-top: -4px;
+    vertical-align: top;
+}

static/main.js

+// Filename: main.js
+
+// Require.js allows us to configure shortcut alias
+// There usage will become more apparent further along in the tutorial.
+var path = "../static/bower_components/"
+
+ require.config({
+      waitSeconds: 0,
+      paths: {
+
+        //underscore : path + 'underscore/underscore-min',
+        //backbone   : path + 'backbone/backbone-min',
+        //jquery     : path + 'jquery/dist/jquery.min',
+        
+        cello     : 'cello.min',
+        gviz      : 'gviz.min',
+        embed     : 'embed.min',
+        
+        //cello     : 'cello',
+        //gviz      : 'gviz',
+        //embed     : 'embed',     
+        
+        threejs   : 'three',
+        numeric   : 'numeric-1.2.6',
+        //tween     : 'tween',
+        //materials : 'materials',
+        //pdgconst  : 'pdgconst',
+
+        //mousetrap : 'mousetrap',
+        //moment    : 'moment',
+        //json2html    : 'json2html',
+
+      },
+      
+      shim: {
+          // threejs not require compatible...
+          'threejs': {
+                exports: 'THREE',
+            },
+          
+          'json2html': {
+                exports: 'json2html',
+            },
+          'semantic': {
+              deps: ['jquery']
+          },
+        }
+    });
+

static/materials.js

+!!!define([], function() {
+
+
+    Materials =  {
+        'edge' : [
+            {'default' : {
+                'lineWidth'  : 2,
+                'color'    : "#666",
+                'opacity'  : 1, //.4
+                'label_visible' : false,
+                'fontColor': "#4C4D00",
+                'textAlign': "center",
+                'orientation_visible' : false,
+                'label_visible' : false,
+
+                //'lineType' : "dashed",
+                //'dashSize' : 2,
+                //'gapSize'  : 5,
+                'lineType' : "plain",
+
+            }},
+
+            { '.es-cluster-faded': {
+                'lineWidth'  : 1,
+                'opacity'    : 0.2,
+            } },
+
+            { '.es-mo-faded': {
+                'lineWidth'  : 1,
+                'opacity'    : 0.2,
+            }
+            },
+
+            { '.es-sel-faded': {
+                'lineWidth'  : 1,
+                'opacity'    : 0.2,
+            }
+            },
+
+
+            { '.es-mo-adjacent': {
+                    'lineWidth'  : 2,
+                    'opacity'    : 1,
+                    //'label_visible' : true,
+                    //'orientation_visible' : true,
+                    'lineType' : "plain",
+                }
+            },
+
+            { '.es-sel-adjacent': {
+                    'lineWidth'  : 2,
+                    'opacity'    : 1,
+                    'label_visible' : false,
+                    //'orientation_visible' : true,
+                }
+            },
+
+
+            {  '.es-bolder': {
+                    'lineWidth'  : 2,
+                    'opacity'    : 1,
+                }
+            },
+            {  '.selected': {
+                    'lineWidth'  : 4,
+                    'opacity'    : 1,
+                }
+            },
+            {  '.intersected': {
+                    'lineWidth'  : 4,
+                    'opacity'    : 0.8,
+                    'label_visible' : true,
+                    'orientation_visible' : true,
+                }
+            },
+            {  '.disabled': {
+                    'lineWidth'  : 1,
+                    'opacity'    : 0.,
+                    'label_visible' : false,
+                    'orientation_visible' : false,
+                }
+            },
+
+        ],
+
+        'node': [
+
+            { '.form': {
+                'scale':1,
+                'shape': 'prop:shape',
+                //'strokeStyle': "gradient:#2244AA", //"get:color", //"#2B51FF", //"#EEEEEE",
+                //'fillStyle'  : "gradient:#2244AA", //'get:color',  //#366633',
+                
+                'image':"prop:image",
+
+                'lineWidth'  : .2,
+                'lineJoin'   : 'bevel',
+                'lineType' : "dashed",
+                'dashSize' : .1,
+                'gapSize'  : .5,
+                'line_max_length': 11,
+
+                'fontScale'  :  0.07,
+                'font' : "normal 10px sans-serif",
+                'fontFillStyle'  : '#222',  //#366633',
+                //'fontStrokeStyle'  : 'black',
+                //'fontStrokeWidth' : 0.6,
+                
+                'textPaddingY'  : -0.8,
+                'textPaddingX'  : 0,
+                'textAlign'     : 'center',
+                'textVerticalAlign'     : 'center',
+            } },
+
+
+            { '.form.cluster-faded': {
+                'opacity'   : 0.3,
+            } },
+            {'.form.mo-faded': {
+                'opacity'   : 0.2,
+            } },
+
+            {'.form.sel-faded': {
+                'opacity'   : 0.2,
+            } },
+
+            {'.form.disabled': {
+                'opacity'   : 0.1,
+            } },
+
+            {'.form.mo-adjacent': {
+                'opacity'   : 1.,
+            } },
+
+            {'.form.sel-adjacent': {
+                'opacity'   : 1,
+            } },
+
+            { '.form.cluster': {
+                //'shape': 'square',
+                //'scale':1,
+                'opacity'   : 1,
+                'fontScale'  :  0.12,
+            } },
+
+            { '.form.intersected':  {
+                'fontScale'  :  0.13,
+                'scale':1.2,
+                'opacity'   : 1,
+
+            } },
+
+            { '.form.selected':  {
+                'strokeStyle'  : '#FFFFFF',
+                'scale':1.,
+                'opacity'   : 1,
+                //'fontScale'  :  0.4,
+                'paddingX': 200,
+            } },
+
+            { '.target': {
+                'shape': 'triangle',
+                'lineJoin' : 'bevel',
+                'fontScale'  :  0.16,
+                'scale':2,
+                'textPaddingY'  : 12,
+
+                'font' : "normal 10px sans",
+                'fontFillStyle'  : '#111',  //#366633',
+                //'fontStrokeStyle'  : null, // '#333',
+            } },
+
+            { '.target.intersected': {
+            } },
+
+        ]
+    };
+
+
+    return Materials
+});

static/mousetrap.js

+/* mousetrap v1.6.0 craig.is/killing/mice */
+(function(r,t,g){function u(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function y(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return k[a.which]?k[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function v(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function z(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],A[c]&&(c=A[c]),b&&"keypress"!=b&&B[c]&&(c=B[c],g.push("shift")),v(c)&&g.push(c);h=c;e=b;if(!e){if(!n){n={};for(var l in k)95<l&&112>l||k.hasOwnProperty(l)&&(n[k[l]]=l)}e=n[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function C(a,b){return null===a||a===t?!1:a===b?!0:C(a.parentNode,b)}function c(a){function b(a){a=
+a||{};var b=!1,m;for(m in n)a[m]?b=!0:n[m]=0;b||(w=!1)}function h(a,b,m,f,c,h){var g,e,k=[],l=m.type;if(!d._callbacks[a])return[];"keyup"==l&&v(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||n[e.seq]==e.level)&&l==e.action){var q;(q="keypress"==l&&!m.metaKey&&!m.ctrlKey)||(q=e.modifiers,q=b.sort().join(",")===q.sort().join(","));q&&(q=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||q)&&d._callbacks[a].splice(g,1),k.push(e))}return k}function g(a,b,m,f){d.stopCallback(b,
+b.target||b.srcElement,m,f)||!1!==a(b,m)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=y(a);b&&("keyup"==a.type&&x===b?x=!1:d.handleKey(b,D(a),a))}function k(a,c,m,f){function e(c){return function(){w=c;++n[a];clearTimeout(r);r=setTimeout(b,1E3)}}function h(c){g(m,c,a);"keyup"!==f&&(x=y(c));setTimeout(b,10)}for(var d=n[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
+z(c[d+1]).action);l(c[d],p,f,a,d)}}function l(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?k(a,g,b,c):(c=z(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||t;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var n={},r,x=!1,p=!1,w=!1;d._handleKey=function(a,
+c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=w||v(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)l(a[d],b,c)};u(a,"keypress",e);u(a,"keydown",e);u(a,"keyup",e)}if(r){var k={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",
+18:"alt",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},B={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},A={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},n;for(g=1;20>g;++g)k[111+g]="f"+g;for(g=0;9>=g;++g)k[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
+{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||C(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.addKeycodes=function(a){for(var b in a)a.hasOwnProperty(b)&&(k[b]=a[b]);n=null};c.init=function(){var a=c(t),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};
+c.init();r.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=c);"function"===typeof define&&define.amd&&define(function(){return c})}})("undefined"!==typeof window?window:null,"undefined"!==typeof window?document:null);

static/pdgconst.js

+define([], function() {
+
+    // Backbone constant event
+
+    Constantes =  {
+
+        /* ui request form consts */
+        ui_create_nodetype  : "ui_create_nodetype", // 
+        ui_edit_nodetype    : "ui_edit_nodetype",   // arg: nodetype
+        ui_create_node      : "ui_create_node",     // arg: { nodetype: nodetype model }
+        ui_edit_node        : "ui_edit_node",       // arg: vertex
+        
+        ui_create_edgetype  : "ui_create_edgetype", 
+        ui_edit_edgetype    : "ui_edit_edgetype",   // arg: edgetype
+        ui_create_edge      : "ui_create_edge",     // arg: { source: vertex, target: vertex, arg: edgetype: edgetype }   }
+        ui_edit_edge        : "ui_edit_edge",       // arg: edge model
+
+        /* edge and vertex (un)selection*/
+        // unselect all edges | vertices
+        unselect_nodes  : "unselect_nodes", 
+        unselect_edges  : "unselect_edges",
+        
+        select_node     : "select_node",  // to select one node, arg:vertex   
+        select_edge     : "select_edge" , // to select one edge, arg:edge
+
+        /*  node & and edge remove request */
+        remove_all      : "graph_clear", // removes edges and vertices
+        remove_node     : "remove_node", // arg: vertex
+        remove_edge     : "remove_edge", // arg: edge
+        
+        
+    }
+    return Constantes
+
+});
+
+