select nodes in json and edges done

01_Code/physical_computing_interface/graph/main.js

@@ -190,21 +190,32 @@ document.addEventListener('DOMContentLoaded', function(){
 
     }
 
+    //select node
     //TODO: HIGHLIGHT NODE IN THREEJS
     cy.on('tap', 'node', function(){
-        var nodes = this;
+        // var nodes = this;
         selectedjson=this._private.data;
-        console.log(this._private.data);
+        // console.log(this._private.data);
+        var pos=getXYZfromName(this._private.data.id);
+        selectNode(pos.x,pos.y,pos.z);
     });
+    document.addEventListener('selectNode', function (e) { 
+        var tgt=cy.$id(e.detail.id);
+        selectedjson=tgt._private.data;
+        // console.log(tgt.neighborhood().nodes());
+        // console.log(tgt._private.data);
+    }, false);
 
-
+    //select edge
     //TODO: FIX
     cy.on('tap', 'edge', function(){
         var nodes = this;
+        selectNode();
         selectedjson=this._private.data;
-        console.log(this._private.data);
+        // console.log(this._private.data);
     });
     
+
     //TODO: fix add node to random location threejs
     cy.on('tap', function( evt ){
         var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
@@ -221,17 +232,17 @@ document.addEventListener('DOMContentLoaded', function(){
             });
         }
     });
-
     document.addEventListener('addNode', function (e) { 
         console.log("Add:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
         cy.add({
             classes: 'automove-viewport',
             // data: { id: 'new' + Math.round( Math.random() * 100 ) },
             data: { 
-                id: '[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']',
+                id: e.detail.id,
                 name: '[' +e.detail.x +"," +e.detail.y+']',
                 parent: ''+e.detail.z,
-                code: "sum(x+y/2)"
+                code: "sum(x+y/2)",
+                neighbors:[]
             },
             position: {
                 x: e.detail.posX,
@@ -244,27 +255,6 @@ document.addEventListener('DOMContentLoaded', function(){
         
     }, false);
 
-    document.addEventListener('removeNode', function (e) { 
-        console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
-        var tgt=cy.$id('[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']');
-        tgt.remove();
-        
-    }, false);
-
-    cy.on('cxttap', 'node', function( evt ){
-        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
-        // console.log(tgt._private.data.id);
-        var pos=getXYZfromName(tgt._private.data.id);
-        if(tgt._private.data.name==null){
-            tgt.remove();
-
-        }else{
-            removeNode(pos.x,pos.y,pos.z);
-        }
-        
-        // tgt.remove();
-    });
-
     function addEdges(x,y,z){
         for (var i=-1;i<=1;i++) {
             for (var j=-1;j<=1;j++) {
@@ -283,7 +273,10 @@ document.addEventListener('DOMContentLoaded', function(){
                         if(!outofbound )
                         {
                             if (!(i1==x && j1==y && k1==z)&& occupancy[i1][j1][k1]) {
-                                
+                                var tgt=cy.$id('[' +x +"," +y+","+z+']');
+                                tgt._private.data.neighbors.push('[' +i1 +"," +j1+","+k1+']');
+                                tgt=cy.$id('[' +i1 +"," +j1+","+k1+']');
+                                tgt._private.data.neighbors.push('[' +x +"," +y+","+z+']');
                                 cy.add([
                                     { group: "edges", data: { source: '[' +x +"," +y+","+z+']', target: '[' +i1 +"," +j1+","+k1+']'}}
                                 ]);
@@ -295,6 +288,30 @@ document.addEventListener('DOMContentLoaded', function(){
         }
     }
 
+    
+
+    //remove node
+    cy.on('cxttap', 'node', function( evt ){
+        var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
+        // console.log(tgt._private.data.id);
+        var pos=getXYZfromName(tgt._private.data.id);
+        if(tgt._private.data.name==null){
+            tgt.remove();
+
+        }else{
+            removeNode(pos.x,pos.y,pos.z);
+        }
+        
+    });
+    document.addEventListener('removeNode', function (e) { 
+        // console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
+        var tgt=cy.$id(e.detail.id);
+        tgt.remove();
+        
+    }, false);
+
+    
+
     ////////
 
     var api = cy.expandCollapse('get');

01_Code/physical_computing_interface/json/main.js

@@ -17,11 +17,14 @@ function initEditor(){
         };
         editor.set(selectedjson);
     };
+    document.addEventListener('selectNode', function (e) { 
+        editor.set(selectedjson);
+    }, false);
 
     // get json
     document.getElementById('getJSON').onclick = function () {
-        const json = editor.get()
-        alert(JSON.stringify(json, null, 2))
+        const json = editor.get();
+        alert(JSON.stringify(json, null, 2));
     };
 
 }

01_Code/physical_computing_interface/main.js

@@ -25,6 +25,7 @@ function addNode (x,y,z){
             x:x,
             y:y,
             z:z,
+            id:'[' +x +"," +y+","+z+']',
             posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
             posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
             posZ:(z)*voxelSpacing+voxelSpacing/2
@@ -40,6 +41,7 @@ function removeNode (x,y,z){
             x:x,
             y:y,
             z:z,
+            id:'[' +x +"," +y+","+z+']',
             posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
             posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
             posZ:(z)*voxelSpacing+voxelSpacing/2
@@ -48,6 +50,22 @@ function removeNode (x,y,z){
     document.dispatchEvent(removeNodeEvent);
 }
 
+function selectNode (x,y,z){
+    var selectNodeEvent = new CustomEvent('selectNode', { 
+        detail: 
+        {
+            x:x,
+            y:y,
+            z:z,
+            id:'[' +x +"," +y+","+z+']',
+            posX:(x-gridSize/2)*voxelSpacing+voxelSpacing/2,
+            posY:(y-gridSize/2)*voxelSpacing+voxelSpacing/2,
+            posZ:(z)*voxelSpacing+voxelSpacing/2
+        }
+    });
+    document.dispatchEvent(selectNodeEvent);
+}
+
 document.addEventListener('addNode', function (e) { 
 
     occupancy[e.detail.x][e.detail.y][e.detail.z]=true;
@@ -61,6 +79,8 @@ document.addEventListener('removeNode', function (e) {
 }, false);
 
 
+
+
 //////////////////////////////////////////////
 
 //////////////////////utils//////////////////

01_Code/physical_computing_interface/threejs/main.js

@@ -100,7 +100,7 @@ function threejs(){
             var intersect = intersects[ 0 ];
             // delete cube
             if ( isShiftDown ) {
-                console.log("shiftt iss dowwn")
+                // console.log("shiftt iss dowwn");
                 if ( intersect.object !== plane ) {
                     // scene.remove( intersect.object );
                     // console.log(intersect.object.name);
@@ -134,6 +134,7 @@ function threejs(){
             render();
         }
     }
+
     document.addEventListener('removeNode', function (e) { 
         var name='[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']';
         var object = scene.getObjectByName( name );