feat(visual): add baisc context menu

inherd · Jan 25, 2021 · 936c566 · 936c566
1 parent 15fa739
commit 936c566
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/web/index.html b/web/index.html
@@ -15,6 +15,20 @@
       font: 12px sans-serif;
       line-height: 20px;
     }
+
+    .contextMenu {
+      stroke: #00557d;
+      fill: #ffffff;
+    }
+
+    .menuEntry {
+      cursor: pointer;
+    }
+
+    .menuEntry text {
+      font-size: 12px;
+      stroke: #00557d;
+    }
   </style>
 </head>
 <body>

diff --git a/web/index.js b/web/index.js
@@ -55,6 +55,50 @@ let CodeUtil = {
   }
 }
 
+
+let Menu = {
+  menuFactory: function(x, y, menuItems, data, svgId){
+    d3.select(".contextMenu").remove();
+
+    // Draw the menu
+    d3.select(svgId)
+      .append('g').attr('class', "contextMenu")
+      .selectAll('tmp')
+      .data(menuItems).enter()
+      .append('g').attr('class', "menuEntry")
+      .style({'cursor': 'pointer'});
+
+    // Draw menu entries
+    d3.selectAll(`.menuEntry`)
+      .append('rect')
+      .attr('x', x)
+      .attr('y', (d, i) => { return y + (i * 30); })
+      .attr('rx', 2)
+      .attr('width', 150)
+      .attr('height', 30)
+      .on('click', (d) => { d.action(data) });
+
+    d3.selectAll(`.menuEntry`)
+      .append('text')
+      .text((d) => { return d.title; })
+      .attr('x', x)
+      .attr('y', (d, i) => { return y + (i * 30); })
+      .attr('dy', 20)
+      .attr('dx', 45)
+      .on('click', (d) => { d.action(data) });
+
+    // Other interactions
+    d3.select('body')
+      .on('click', () => {
+        d3.select(".contextMenu").remove();
+      });
+  },
+  createContextMenu: function (event, d, menuItems, width, height, svgId) {
+    Menu.menuFactory(event.pageX - width / 2, event.pageY - height / 1.5, menuItems, d, svgId);
+    event.preventDefault();
+  }
+}
+
 d3.json("cloc.json").then(function (json) {
   var data;
   var maxlen = 0;

diff --git a/web/nested-treemap.js b/web/nested-treemap.js
@@ -31,11 +31,27 @@ function renderNestedTreemap(originData) {
   let data = CodeUtil.hierarchy(Object.values(dMap));
 
   const svg = d3.select("#nested-treemap").append("svg")
+    .attr("id", "graphSvg")
     .attr("viewBox", [0.5, -30.5, width, height + 30])
 
   let group = svg.append("g")
     .call(render, treemap(data));
 
+  const menuItems = [
+    {
+      title: 'First action',
+      action: (d) => {
+        console.log(d);
+      }
+    },
+    {
+      title: 'Second action',
+      action: (d) => {
+        console.log(d);
+      }
+    }
+  ];
+
   function render(group, root) {
     const shadow = DOM.uid("shadow");
 
@@ -55,7 +71,10 @@ function renderNestedTreemap(originData) {
       .selectAll("g")
       .data(d => d[1])
       .join("g")
-      .attr("transform", d => `translate(${d.x0},${d.y0})`);
+      .attr("transform", d => `translate(${d.x0},${d.y0})`)
+      .on("contextmenu", (event, d) => {
+        Menu.createContextMenu(event, d, menuItems, width, height, '#nested-treemap');
+      })
 
     node.append("title")
       .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
@@ -129,5 +148,6 @@ function renderNestedTreemap(originData) {
         .attrTween("opacity", () => d3.interpolate(1, 0))
         .call(position, d))
       .call(t => group1.transition(t)
-        .call(position, d.parent));  }
+        .call(position, d.parent));
+  }
 }