updated d3 dependency, fixed zoom and click bug

mitraman · Aug 30, 2017 · b3e43f9 · b3e43f9
1 parent 47b96da
commit b3e43f9
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 176 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <meta charset="UTF-8"/> 
+  <meta charset="UTF-8"/>
   <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "bootstrap-toggle": "^2.2.2",
     "brace": "~0.9.1",
     "css-loader": "~0.26.1",
-    "d3": "^4.2.3",
+    "d3": "^4.10.0",
     "file-loader": "~0.9.0",
     "history": "^4.6.1",
     "http-server": "^0.9.0",

diff --git a/src/css/tree.css b/src/css/tree.css
diff --git a/src/css/tree.scss b/src/css/tree.scss
@@ -19,6 +19,12 @@
   stroke:gray;
   stroke-width: 5px;
 }
+
+.parameterized-node-uri {
+  stroke-dasharray: 5, 5;
+}
+
+
 .node-internal-border {
   stroke: gray;
   stroke-width: 1px;

diff --git a/src/js/d3/CRUDTree.jsx b/src/js/d3/CRUDTree.jsx
@@ -17,6 +17,7 @@ export default class {
   static halfBoxWidth() { return halfBoxWidth; }
 
   static drawNodes(svg, g, rootTreeNode, handler, selectedNode) {
+
     let translations = {};
 
     // Create a new <g> for every object in the nodeList
@@ -55,15 +56,20 @@ export default class {
           .attr("rx", 10)
           .attr("ry", 10)
   		    .attr("class", function(d) {
+            let classString = '';
             if (selectedNode && d.data.id === selectedNode.id ){
-              return "selected-node-uri";
+              classString += "selected-node-uri";
             }else {
-              return "node-uri";
+              classString += "node-uri";
+            }
+            if( d.data.name.startsWith(':') ||
+              ( d.data.name.startsWith('{') && d.data.name.endsWith('}')) ) {
+              classString += " parameterized-node-uri";
             }
+            return classString;
           })
           .on("click", function(d) {
             if( !d.data.isRoot) {
-              //console.log('node clicked');
               handler({
                 name: "detail",
                 source: d.data.id,
@@ -194,70 +200,12 @@ export default class {
     node.append("g")
       .attr("class", "badges");
 
-    // GET Badge
-    badges.append("rect")
-      .filter(function(d) {
-        if( d.data.isRoot ) return;
-        if( d.data.data.get  ){
-          return d.data.data.get.enabled;
-        }else {
-          return false;
-        }
-      })
-      .attr("width", 30)
-      .attr("height", 12)
-      .attr("rx", 3)
-      .attr("ry", 2)
-      .attr("transform", "translate(8,4)")
-      .attr("class", "get")
-    .append('svg:title')
-      .text('GET');
-
-
-    // PUT badge
-    badges.append("rect")
-      .filter(function(d) {
-        if( d.data.isRoot ) return;
-        if( d.data.data.put  ){
-          return d.data.data.put.enabled;
-        }else {
-          return false;
-        }
-      })
-      .attr("width", 30)
-      .attr("height", 12)
-      .attr("rx", 3)
-      .attr("ry", 2)
-      .attr("transform", "translate(46,4)")
-      .attr("class", "put")
-    .append('svg:title')
-      .text('PUT');
-
-    // POST badge
-    badges.append("rect")
-      .filter(function(d) {
-        if( d.data.isRoot ) return;
-        if( d.data.data.post  ){
-          return d.data.data.post.enabled;
-        }else {
-          return false;
-        }
-      })
-      .attr("width", 30)
-      .attr("height", 12)
-      .attr("rx", 3)
-      .attr("ry", 2)
-      .attr("transform", "translate(84,4)")
-      .attr("class", "post")
-    .append('svg:title')
-      .text('POST');
-
-      // DELETE badge
+    let appendBadge = function(name, translateX, badges) {
       badges.append("rect")
         .filter(function(d) {
           if( d.data.isRoot ) return;
-          if( d.data.data.delete  ){
-            return d.data.data.delete.enabled;
+          if( d.data.data[name]  ){
+            return d.data.data[name].enabled;
           }else {
             return false;
           }
@@ -266,29 +214,19 @@ export default class {
         .attr("height", 12)
         .attr("rx", 3)
         .attr("ry", 2)
-        .attr("transform", "translate(122,4)")
-        .attr("class", "delete")
+        .attr("transform", "translate("+ translateX + ",4)")
+        .attr("class", name)
       .append('svg:title')
-        .text('DELETE');
+        .text(name.toUpperCase());
+    }
+
+    //TODO: Use utility method to generate badges
+    appendBadge('get', 8, badges);
+    appendBadge('put', 46, badges);
+    appendBadge('post', 84, badges);
+    appendBadge('delete', 122, badges);
+    appendBadge('patch', 160, badges);
 
-      // PATCH badge
-      badges.append("rect")
-        .filter(function(d) {
-          if( d.data.isRoot ) return;
-          if( d.data.data.patch  ){
-            return d.data.data.patch.enabled;
-          }else {
-            return false;
-          }
-        })
-        .attr("width", 30)
-        .attr("height", 12)
-        .attr("rx", 3)
-        .attr("ry", 2)
-        .attr("transform", "translate(160,4)")
-        .attr("class", "patch")
-      .append('svg:title')
-        .text('PATCH');
 
   return {
     translations: translations,

diff --git a/src/js/d3/CRUDTreeComponent.jsx b/src/js/d3/CRUDTreeComponent.jsx
@@ -60,26 +60,35 @@ export default class extends React.Component{
 
   update (svgElement, rootNodes, handler, selectedNode) {
 
+    console.log('update()');
+
     // Cleanup any existing graphs
     let svg = d3.select(svgElement);
     const g = this.state.g;
+
+    // NOTE: Tempoararilyremoved
     g.selectAll("*").remove();
 
     let svgWidth = ($("svg").width());
     let svgHeight = ($("svg").height());
 
-    svg.on('click', function() {
+    //TODO: Set a pan extent so that the user can't lose the sketch by panning it away
+
+
+    let zoom = d3.zoom();
+    svg.call(zoom.on("zoom", () => {
+      g.attr("transform", d3.event.transform);
+    }));
+
 
-      //console.log('svg clicked');
+    // Click handler for the svg object
+    svg.on('click', function() {
       handler({
         name: "reset"
       });
-      /*
-      console.log('TODO: deselect nodes if svg is clicked');
-      console.log('TODO: stop propogating events when node is clicked so that svg.onClick does not get called');
-      */
-
 
+      //console.log('TODO: deselect nodes if svg is clicked');
+      //console.log('TODO: stop propogating events when node is clicked so that svg.onClick does not get called');
     })
 
     // Create a default root node for the nodes
@@ -103,17 +112,12 @@ export default class extends React.Component{
               + " " + (d.parent.y + CRUDTree.resourceBoxWidth()) + "," + (d.parent.x + CRUDTree.halfBoxHeight());
         });
 
+
     // draw the tree nodes
     let drawNodesResult = CRUDTree.drawNodes(svg, g, nodes, handler, selectedNode);
-    let node = drawNodesResult.node;
+    let node = drawNodesResult.node
     node.exit().remove();
 
-    //TODO: Set a pan extent so that the user can't lose the sketch by panning it away
-    let zoom = d3.zoom();
-    svg.call(zoom.on("zoom", () => {
-      g.attr("transform", d3.event.transform);
-    }));
-
     if( selectedNode === '/') {
       // Zoom out and center the graph
       let offsetX = 400;
@@ -126,7 +130,6 @@ export default class extends React.Component{
     }
     else {
       // Move the position of the tree to the selected node
-      //console.log(drawNodesResult.translations[selectedNode.id]);
       let offsetX = (0 - drawNodesResult.translations[selectedNode.id].y);
       let offsetY = (0 - drawNodesResult.translations[selectedNode.id].x);
       const xPadding = 20;
@@ -139,10 +142,6 @@ export default class extends React.Component{
       .call( zoom.transform, d3.zoomIdentity.translate(translate[0],translate[1]).scale(scale) );
     }
 
-    // Use less of an x offset for the initial root node
-    //const xPadding = svgWidth / 2;
-
-
 
   }
 

diff --git a/src/js/modules/Sketch.jsx b/src/js/modules/Sketch.jsx
@@ -416,9 +416,11 @@ export default class extends React.Component{
     ]
 
     let prePath = '';
-    if( this.state.selectedNode.id ) {
-      prePath = this.state.treeHash[this.state.selectedNode.id].fullpath;
+    /*
+    if( this.state.selectedNode != '/' && this.state.selectedNode.id ) {
+      prePath = this.state.treeHash[this.state.selectedNode.parentId].fullpath;
     }
+    */
 
     let EditPane =  this.state.selectedNode ?
       <NodeEditor

diff --git a/src/js/modules/header/AuthenticatedHeader.jsx b/src/js/modules/header/AuthenticatedHeader.jsx
@@ -21,16 +21,16 @@ export default class extends React.Component{
   }
 
   exportOAPI2() {
-    console.log('swagger export');
     // Make the call to do an export
-    console.log(this.props.project);
-    console.log(this.props.sketchIndex);
+    //console.log(this.props.project);
+    //console.log(this.props.sketchIndex);
     let exportData =
 
     Backend.export(this.props.userInfo.token, this.props.project.id, this.props.sketchIndex, 'oai2')
     .then(exportData => {
-      console.log(exportData);
-      fileDownload(exportData, 'test.yaml');
+      //console.log(exportData);
+      let filename = this.props.project.name + '.yaml';
+      fileDownload(exportData, filename);
     });
 
   }

diff --git a/src/js/modules/projects/Project.jsx b/src/js/modules/projects/Project.jsx
@@ -15,10 +15,12 @@ export default class extends React.Component{
       sketches: [],
       projectNotFound: false
     }
+    console.log('this.loadProject');
     this.loadProject(this.props.userObject.token, this.props.projectId);
   }
 
   componentWillReceiveProps(nextProps) {
+    console.log('project:componentWillReceiveProps');
     if(nextProps.projectId != this.props.projectId) {
       this.loadProject(this.props.userObject.token, this.props.projectId);
     }
@@ -31,7 +33,6 @@ export default class extends React.Component{
       if( !result.project.sketches ){
         throw new Error('No Sketch iterations found in this project');
       }
-
       this.setState({sketches: result.project.sketches});
       this.props.setProjectHandler(result.project);
       this.props.setSketchIndexHandler(1);