blooom - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

dist/main.es.browser.js

@@ -91,3 +91,3 @@
       .append("svg")
-      .attr("id", "blooom")
+      .attr("class", "blooom")
       .attr("width", "100%")
@@ -177,7 +177,7 @@ .attr("height", "100%");
         that.handler.focusLink(d);
-        that.config.linkMouseEnter && that.config.linkMouseEnter(d);
+        that.config.linkMouseEnter && that.config.linkMouseEnter(d, that);
       })
       .on("mouseleave", function (d) {
         that.handler.removeFocus(that.nodes, that.links);
-        that.config.linkMouseLeave && that.config.linkMouseLeave(d);
+        that.config.linkMouseLeave && that.config.linkMouseLeave(d, that);
       });
@@ -193,7 +193,7 @@
         that.handler.focusNode(d);
-        that.config.nodeMouseEnter && that.config.nodeMouseEnter(d);
+        that.config.nodeMouseEnter && that.config.nodeMouseEnter(d, that);
       })
       .on("mouseleave", function (d) {
         that.handler.removeFocus(that.nodes, that.links);
-        that.config.nodeMouseLeave && that.config.nodeMouseLeave(d);
+        that.config.nodeMouseLeave && that.config.nodeMouseLeave(d, that);
       });
@@ -200,0 +200,0 @@

dist/main.es.browser.min.js

@@ -1,2 +0,2 @@
-class Blooom{constructor(t,e,r){let n;[e,n]=this.transformData(e),this.config=new Config(this,n,r),this.handler=new Handler(this),this.renderer=new Renderer;const[o,i]=this.washData(e);this.container=this.initCanvas(t),this.simulation=this.initSimulation(o,i),this.links=this.initLinks(i),this.nodes=this.initNodes(o),this.registerInteraction(i),this.renderTick()}loadNeo4j(t){let e=[],r=[];return t.map(t=>t.graph).forEach(t=>{e=e.concat(t.nodes),r=r.concat(t.relationships)}),[{nodes:e,links:r},{linkSourceKey:"startNode",linkTargetKey:"endNode",nodeGroupsKey:"labels"}]}transformData(t){let e={};return"string"==typeof t&&(t=JSON.parse(t)),t[0].graph&&([t,e]=this.loadNeo4j(t)),[t,e]}washData(t){let e=[];const r=renameItemDict(t.links,{source:this.config.linkSourceKey,target:this.config.linkTargetKey}).map(t=>(e.push(t.source),e.push(t.target),Object.create(t)));e=unique(e);let n=[],o=[];const i=renameItemDict(t.nodes,{labels:this.config.nodeGroupsKey}).map(t=>n.indexOf(t.id)>=0||e.indexOf(t.id)<0?null:(n.push(t.id),o.push(t[this.config.nodeGroupsKey]),Object.create(t))).filter(t=>t);return this.existedGroups=Object.assign(...unique(o.flat()).map((t,e)=>({[t]:e}))),[i,r]}initCanvas(t){return this.svg=d3.select(t).html("").append("svg").attr("id","blooom").attr("width","100%").attr("height","100%"),this.width=this.svg.node().clientWidth,this.height=this.svg.node().clientHeight,this.svg.attr("viewBox",[0,0,this.width,this.height]),this.svg.append("g")}initSimulation(t,e){return d3.forceSimulation(t).velocityDecay(.1).force("link",d3.forceLink(e).id(t=>t.id)).force("charge",d3.forceManyBody().strength(-800)).force("center",d3.forceCenter(this.width/2,this.height/2)).force("collide",d3.forceCollide().radius(40).iterations(2))}initNodes(t){const e=this.container.selectAll(".node").data(t).enter().append("g").attr("class","node").call(this.handler.drag(this.simulation));return this.nodeGroup={circle:e.append("circle").attr("class","glow").attr("r",25),glow:e.append("circle").attr("class","circle").attr("r",25).attr("fill",t=>this.config.colors[this.config.getNodeClassIndex(t.labels)]).attr("stroke",t=>this.config.borderColors[this.config.getNodeClassIndex(t.labels)]),label:e.append("text").text(t=>this.config.getNodeText(t))},e}initLinks(t){var e=this.container.selectAll(".link").data(t).enter().append("g").attr("class","link");return this.linkGroup={glow:e.append("path").attr("class","glow"),arrow:e.append("path").attr("class","arrow"),text:e.append("text").text(t=>t[this.config.linkLabelProperty])},e}registerInteraction(t){const e=this;this.nodesLinked=[],t.forEach((function(t){e.nodesLinked[t.source.index+"-"+t.target.index]=!0,e.nodesLinked[t.target.index+"-"+t.source.index]=!0})),this.links.on("mouseenter",(function(t){e.handler.focusLink(t),e.config.linkMouseEnter&&e.config.linkMouseEnter(t)})).on("mouseleave",(function(t){e.handler.removeFocus(e.nodes,e.links),e.config.linkMouseLeave&&e.config.linkMouseLeave(t)})),this.nodes.on("contextmenu",t=>{e.handler.pinNode(e.nodes,t),t.fx=t.x,t.fy=t.y}).on("mouseenter",(function(t){e.handler.focusNode(t),e.config.nodeMouseEnter&&e.config.nodeMouseEnter(t)})).on("mouseleave",(function(t){e.handler.removeFocus(e.nodes,e.links),e.config.nodeMouseLeave&&e.config.nodeMouseLeave(t)})),this.svg.on("contextmenu",()=>d3.event.preventDefault()).call(this.handler.zoom()),this.svg.on("dblclick.zoom",null)}renderTick(){this.simulation.on("tick",()=>{this.renderer.renderLink(this.links,this.linkGroup.glow,this.linkGroup.text),this.nodes.attr("transform",t=>`translate(${t.x}, ${t.y})`)})}}class Config{nodeMouseEnter=null;nodeMouseLeave=null;linkMouseEnter=null;linkMouseLeave=null;colors=["#68bdf6","#6dce9e","#faafc2","#f2baf6","#ff928c","#fcea7e","#ffc766","#405f9e","#a5abb6","#78cecb","#b88cbb","#ced2d9","#e84646","#fa5f86","#ffab1a","#fcda19","#797b80","#c9d96f","#47991f","#70edee","#ff75ea"];linkSourceKey="source";linkTargetKey="target";nodeGroupsKey="group";linkLabelProperty="type";nodeLabelProperties=null;constructor(t,...e){const r=this;if(e)for(let t of e)Object.entries(t).forEach(([t,e])=>r[t]=e);this.graph=t,this.borderColors=this.colors.map(t=>d3.rgb(t).darker(.5))}getNodeLabel(t){return t.constructor===Array?t[0]:t}getNodeClassIndex(t){return this.graph.existedGroups[this.getNodeLabel(t)]}getNodeText(t){return t.properties[this.nodeLabelProperties[this.getNodeLabel(t.labels)]]}}class Handler{constructor(t){this.graph=t}focusLink(t){this.graph.nodes.each((function(e){e.index!=t.source.index&&e.index!=t.target.index&&this.classList.add("faded")})),this.graph.links.each((function(e){e.source.index==t.source.index&&e.target.index==t.target.index||this.classList.add("faded")}))}focusNode(t){const e=this;this.graph.nodes.each((function(r){r.index==t.index||e.graph.nodesLinked[r.index+"-"+t.index]||this.classList.add("faded")})),this.graph.links.each((function(e){e.source.index!=t.index&&e.target.index!=t.index&&this.classList.add("faded")}))}removeFocus(){this.graph.nodes.each((function(){this.classList.remove("faded")})),this.graph.links.each((function(){this.classList.remove("faded")}))}pinNode(t,e){this.graph.nodes.each((function(t){t.index===e.index&&this.classList.add("pinned")}))}removeNodePin(t){this.graph.nodes.each((function(e){e.index===t.index&&this.classList.remove("pinned")}))}zoom(){const t=this;return d3.zoom().scaleExtent([.1,2]).on("zoom",()=>{const e=+d3.event.transform.k;t.graph.nodeGroup.label.attr("opacity",e>.5?1:e<.4?0:10*(e-.4)),t.graph.linkGroup.text.attr("opacity",e>.5?1:e<.4?0:10*(e-.4)),t.graph.container.attr("transform",d3.event.transform)})}drag(t){const e=this;return d3.drag().on("start",(function(r){d3.event.active||t.alphaTarget(.3).restart(),e.removeNodePin(r),r.fx=r.x,r.fy=r.y})).on("drag",(function(t){t.fx=d3.event.x,t.fy=d3.event.y})).on("end",(function(e){d3.event.active||t.alphaTarget(0),e.fx=null,e.fy=null}))}}class Renderer{utils=new Utils;renderLink(t,e,r){const n=this;t.attr("transform",(function(t){var e=n.utils.rotation(t.source,t.target);return"translate("+t.source.x+", "+t.source.y+") rotate("+e+")"}));this.renderLinkText(r),this.renderLinkGlow(e),this.renderLinkArrow(t,{nodeRadius:25,arrowSize:4})}renderLinkArrow(t,e){const r=this;t.each((function(){var t=d3.select(this),n=t.select(".arrow"),o=t.select("text");n.attr("d",(function(t){var n={x:0,y:0},i=r.utils.rotation(t.source,t.target),s=o.node().getBBox(),a=r.utils.unitaryVector(t.source,t.target),d={x:.5*(t.target.x-t.source.x-(s.width+5)*a.x),y:.5*(t.target.y-t.source.y-(s.width+5)*a.y)},c=r.utils.unitaryNormalVector(t.source,t.target),l=r.utils.rotatePoint(n,{x:0+(e.nodeRadius+1)*a.x-c.x,y:0+(e.nodeRadius+1)*a.y-c.y},i),u=r.utils.rotatePoint(n,{x:d.x-c.x,y:d.y-c.y},i),h=r.utils.rotatePoint(n,{x:d.x,y:d.y},i),x=r.utils.rotatePoint(n,{x:0+(e.nodeRadius+1)*a.x,y:0+(e.nodeRadius+1)*a.y},i),y=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-d.x-c.x,y:t.target.y-t.source.y-d.y-c.y},i),g=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-c.x-a.x*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-c.y-a.y*e.arrowSize},i),f=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-c.x+(c.x-a.x)*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-c.y+(c.y-a.y)*e.arrowSize},i),p=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y},i),k=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x+(-c.x-a.x)*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y+(-c.y-a.y)*e.arrowSize},i),m=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-a.x*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-a.y*e.arrowSize},i),L=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-d.x,y:t.target.y-t.source.y-d.y},i);return"M "+l.x+" "+l.y+" L "+u.x+" "+u.y+" L "+h.x+" "+h.y+" L "+x.x+" "+x.y+" Z M "+y.x+" "+y.y+" L "+g.x+" "+g.y+" L "+f.x+" "+f.y+" L "+p.x+" "+p.y+" L "+k.x+" "+k.y+" L "+m.x+" "+m.y+" L "+L.x+" "+L.y+" Z"}))}))}renderLinkGlow(t){const e=this;t.attr("d",(function(t){var r={x:0,y:0},n=e.utils.rotation(t.source,t.target),o=e.utils.unitaryNormalVector(t.source,t.target),i=e.utils.rotatePoint(r,{x:0-o.x,y:0-o.y},n),s=e.utils.rotatePoint(r,{x:t.target.x-t.source.x-o.x,y:t.target.y-t.source.y-o.y},n),a=e.utils.rotatePoint(r,{x:t.target.x-t.source.x,y:t.target.y-t.source.y},n),d=e.utils.rotatePoint(r,{x:0,y:0},n);return"M "+i.x+" "+i.y+" L "+s.x+" "+s.y+" L "+a.x+" "+a.y+" L "+d.x+" "+d.y+" Z"}))}renderLinkText(t){const e=this;t.attr("transform",(function(t){var r=(e.utils.rotation(t.source,t.target)+360)%360,n=r>90&&r<270,o=e.utils.unitaryNormalVector(t.source,t.target),i=n?2:-3,s={x:.5*(t.target.x-t.source.x)+o.x*i,y:.5*(t.target.y-t.source.y)+o.y*i},a=e.utils.rotatePoint({x:0,y:0},s,r);return"translate("+a.x+", "+a.y+") rotate("+(n?180:0)+")"}))}}const unique=t=>t.filter((t,e,r)=>r.indexOf(t)===e);function renameItemDict(t,e){return t.map(t=>Object.entries(e).map(([e,r])=>(e===r||(Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(t,r)),delete t[r]),t))[0])}class Utils{rotation(t,e){return 180*Math.atan2(e.y-t.y,e.x-t.x)/Math.PI}unitaryVector(t,e,r){var n=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))/Math.sqrt(r||1);return{x:(e.x-t.x)/n,y:(e.y-t.y)/n}}unitaryNormalVector(t,e,r){var n=this.unitaryVector(t,e,r);return this.rotatePoint({x:0,y:0},n,90)}rotate(t,e,r,n,o){var i=Math.PI/180*o,s=Math.cos(i),a=Math.sin(i);return{x:s*(r-t)+a*(n-e)+t,y:s*(n-e)-a*(r-t)+e}}rotatePoint(t,e,r){return this.rotate(t.x,t.y,e.x,e.y,r)}}
+class Blooom{constructor(t,e,r){let n;[e,n]=this.transformData(e),this.config=new Config(this,n,r),this.handler=new Handler(this),this.renderer=new Renderer;const[o,i]=this.washData(e);this.container=this.initCanvas(t),this.simulation=this.initSimulation(o,i),this.links=this.initLinks(i),this.nodes=this.initNodes(o),this.registerInteraction(i),this.renderTick()}loadNeo4j(t){let e=[],r=[];return t.map(t=>t.graph).forEach(t=>{e=e.concat(t.nodes),r=r.concat(t.relationships)}),[{nodes:e,links:r},{linkSourceKey:"startNode",linkTargetKey:"endNode",nodeGroupsKey:"labels"}]}transformData(t){let e={};return"string"==typeof t&&(t=JSON.parse(t)),t[0].graph&&([t,e]=this.loadNeo4j(t)),[t,e]}washData(t){let e=[];const r=renameItemDict(t.links,{source:this.config.linkSourceKey,target:this.config.linkTargetKey}).map(t=>(e.push(t.source),e.push(t.target),Object.create(t)));e=unique(e);let n=[],o=[];const i=renameItemDict(t.nodes,{labels:this.config.nodeGroupsKey}).map(t=>n.indexOf(t.id)>=0||e.indexOf(t.id)<0?null:(n.push(t.id),o.push(t[this.config.nodeGroupsKey]),Object.create(t))).filter(t=>t);return this.existedGroups=Object.assign(...unique(o.flat()).map((t,e)=>({[t]:e}))),[i,r]}initCanvas(t){return this.svg=d3.select(t).html("").append("svg").attr("class","blooom").attr("width","100%").attr("height","100%"),this.width=this.svg.node().clientWidth,this.height=this.svg.node().clientHeight,this.svg.attr("viewBox",[0,0,this.width,this.height]),this.svg.append("g")}initSimulation(t,e){return d3.forceSimulation(t).velocityDecay(.1).force("link",d3.forceLink(e).id(t=>t.id)).force("charge",d3.forceManyBody().strength(-800)).force("center",d3.forceCenter(this.width/2,this.height/2)).force("collide",d3.forceCollide().radius(40).iterations(2))}initNodes(t){const e=this.container.selectAll(".node").data(t).enter().append("g").attr("class","node").call(this.handler.drag(this.simulation));return this.nodeGroup={circle:e.append("circle").attr("class","glow").attr("r",25),glow:e.append("circle").attr("class","circle").attr("r",25).attr("fill",t=>this.config.colors[this.config.getNodeClassIndex(t.labels)]).attr("stroke",t=>this.config.borderColors[this.config.getNodeClassIndex(t.labels)]),label:e.append("text").text(t=>this.config.getNodeText(t))},e}initLinks(t){var e=this.container.selectAll(".link").data(t).enter().append("g").attr("class","link");return this.linkGroup={glow:e.append("path").attr("class","glow"),arrow:e.append("path").attr("class","arrow"),text:e.append("text").text(t=>t[this.config.linkLabelProperty])},e}registerInteraction(t){const e=this;this.nodesLinked=[],t.forEach((function(t){e.nodesLinked[t.source.index+"-"+t.target.index]=!0,e.nodesLinked[t.target.index+"-"+t.source.index]=!0})),this.links.on("mouseenter",(function(t){e.handler.focusLink(t),e.config.linkMouseEnter&&e.config.linkMouseEnter(t,e)})).on("mouseleave",(function(t){e.handler.removeFocus(e.nodes,e.links),e.config.linkMouseLeave&&e.config.linkMouseLeave(t,e)})),this.nodes.on("contextmenu",t=>{e.handler.pinNode(e.nodes,t),t.fx=t.x,t.fy=t.y}).on("mouseenter",(function(t){e.handler.focusNode(t),e.config.nodeMouseEnter&&e.config.nodeMouseEnter(t,e)})).on("mouseleave",(function(t){e.handler.removeFocus(e.nodes,e.links),e.config.nodeMouseLeave&&e.config.nodeMouseLeave(t,e)})),this.svg.on("contextmenu",()=>d3.event.preventDefault()).call(this.handler.zoom()),this.svg.on("dblclick.zoom",null)}renderTick(){this.simulation.on("tick",()=>{this.renderer.renderLink(this.links,this.linkGroup.glow,this.linkGroup.text),this.nodes.attr("transform",t=>`translate(${t.x}, ${t.y})`)})}}class Config{nodeMouseEnter=null;nodeMouseLeave=null;linkMouseEnter=null;linkMouseLeave=null;colors=["#68bdf6","#6dce9e","#faafc2","#f2baf6","#ff928c","#fcea7e","#ffc766","#405f9e","#a5abb6","#78cecb","#b88cbb","#ced2d9","#e84646","#fa5f86","#ffab1a","#fcda19","#797b80","#c9d96f","#47991f","#70edee","#ff75ea"];linkSourceKey="source";linkTargetKey="target";nodeGroupsKey="group";linkLabelProperty="type";nodeLabelProperties=null;constructor(t,...e){const r=this;if(e)for(let t of e)Object.entries(t).forEach(([t,e])=>r[t]=e);this.graph=t,this.borderColors=this.colors.map(t=>d3.rgb(t).darker(.5))}getNodeLabel(t){return t.constructor===Array?t[0]:t}getNodeClassIndex(t){return this.graph.existedGroups[this.getNodeLabel(t)]}getNodeText(t){return t.properties[this.nodeLabelProperties[this.getNodeLabel(t.labels)]]}}class Handler{constructor(t){this.graph=t}focusLink(t){this.graph.nodes.each((function(e){e.index!=t.source.index&&e.index!=t.target.index&&this.classList.add("faded")})),this.graph.links.each((function(e){e.source.index==t.source.index&&e.target.index==t.target.index||this.classList.add("faded")}))}focusNode(t){const e=this;this.graph.nodes.each((function(r){r.index==t.index||e.graph.nodesLinked[r.index+"-"+t.index]||this.classList.add("faded")})),this.graph.links.each((function(e){e.source.index!=t.index&&e.target.index!=t.index&&this.classList.add("faded")}))}removeFocus(){this.graph.nodes.each((function(){this.classList.remove("faded")})),this.graph.links.each((function(){this.classList.remove("faded")}))}pinNode(t,e){this.graph.nodes.each((function(t){t.index===e.index&&this.classList.add("pinned")}))}removeNodePin(t){this.graph.nodes.each((function(e){e.index===t.index&&this.classList.remove("pinned")}))}zoom(){const t=this;return d3.zoom().scaleExtent([.1,2]).on("zoom",()=>{const e=+d3.event.transform.k;t.graph.nodeGroup.label.attr("opacity",e>.5?1:e<.4?0:10*(e-.4)),t.graph.linkGroup.text.attr("opacity",e>.5?1:e<.4?0:10*(e-.4)),t.graph.container.attr("transform",d3.event.transform)})}drag(t){const e=this;return d3.drag().on("start",(function(r){d3.event.active||t.alphaTarget(.3).restart(),e.removeNodePin(r),r.fx=r.x,r.fy=r.y})).on("drag",(function(t){t.fx=d3.event.x,t.fy=d3.event.y})).on("end",(function(e){d3.event.active||t.alphaTarget(0),e.fx=null,e.fy=null}))}}class Renderer{utils=new Utils;renderLink(t,e,r){const n=this;t.attr("transform",(function(t){var e=n.utils.rotation(t.source,t.target);return"translate("+t.source.x+", "+t.source.y+") rotate("+e+")"}));this.renderLinkText(r),this.renderLinkGlow(e),this.renderLinkArrow(t,{nodeRadius:25,arrowSize:4})}renderLinkArrow(t,e){const r=this;t.each((function(){var t=d3.select(this),n=t.select(".arrow"),o=t.select("text");n.attr("d",(function(t){var n={x:0,y:0},i=r.utils.rotation(t.source,t.target),s=o.node().getBBox(),a=r.utils.unitaryVector(t.source,t.target),d={x:.5*(t.target.x-t.source.x-(s.width+5)*a.x),y:.5*(t.target.y-t.source.y-(s.width+5)*a.y)},c=r.utils.unitaryNormalVector(t.source,t.target),l=r.utils.rotatePoint(n,{x:0+(e.nodeRadius+1)*a.x-c.x,y:0+(e.nodeRadius+1)*a.y-c.y},i),u=r.utils.rotatePoint(n,{x:d.x-c.x,y:d.y-c.y},i),h=r.utils.rotatePoint(n,{x:d.x,y:d.y},i),x=r.utils.rotatePoint(n,{x:0+(e.nodeRadius+1)*a.x,y:0+(e.nodeRadius+1)*a.y},i),y=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-d.x-c.x,y:t.target.y-t.source.y-d.y-c.y},i),g=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-c.x-a.x*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-c.y-a.y*e.arrowSize},i),f=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-c.x+(c.x-a.x)*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-c.y+(c.y-a.y)*e.arrowSize},i),p=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y},i),k=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x+(-c.x-a.x)*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y+(-c.y-a.y)*e.arrowSize},i),m=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-(e.nodeRadius+1)*a.x-a.x*e.arrowSize,y:t.target.y-t.source.y-(e.nodeRadius+1)*a.y-a.y*e.arrowSize},i),L=r.utils.rotatePoint(n,{x:t.target.x-t.source.x-d.x,y:t.target.y-t.source.y-d.y},i);return"M "+l.x+" "+l.y+" L "+u.x+" "+u.y+" L "+h.x+" "+h.y+" L "+x.x+" "+x.y+" Z M "+y.x+" "+y.y+" L "+g.x+" "+g.y+" L "+f.x+" "+f.y+" L "+p.x+" "+p.y+" L "+k.x+" "+k.y+" L "+m.x+" "+m.y+" L "+L.x+" "+L.y+" Z"}))}))}renderLinkGlow(t){const e=this;t.attr("d",(function(t){var r={x:0,y:0},n=e.utils.rotation(t.source,t.target),o=e.utils.unitaryNormalVector(t.source,t.target),i=e.utils.rotatePoint(r,{x:0-o.x,y:0-o.y},n),s=e.utils.rotatePoint(r,{x:t.target.x-t.source.x-o.x,y:t.target.y-t.source.y-o.y},n),a=e.utils.rotatePoint(r,{x:t.target.x-t.source.x,y:t.target.y-t.source.y},n),d=e.utils.rotatePoint(r,{x:0,y:0},n);return"M "+i.x+" "+i.y+" L "+s.x+" "+s.y+" L "+a.x+" "+a.y+" L "+d.x+" "+d.y+" Z"}))}renderLinkText(t){const e=this;t.attr("transform",(function(t){var r=(e.utils.rotation(t.source,t.target)+360)%360,n=r>90&&r<270,o=e.utils.unitaryNormalVector(t.source,t.target),i=n?2:-3,s={x:.5*(t.target.x-t.source.x)+o.x*i,y:.5*(t.target.y-t.source.y)+o.y*i},a=e.utils.rotatePoint({x:0,y:0},s,r);return"translate("+a.x+", "+a.y+") rotate("+(n?180:0)+")"}))}}const unique=t=>t.filter((t,e,r)=>r.indexOf(t)===e);function renameItemDict(t,e){return t.map(t=>Object.entries(e).map(([e,r])=>(e===r||(Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(t,r)),delete t[r]),t))[0])}class Utils{rotation(t,e){return 180*Math.atan2(e.y-t.y,e.x-t.x)/Math.PI}unitaryVector(t,e,r){var n=Math.sqrt(Math.pow(e.x-t.x,2)+Math.pow(e.y-t.y,2))/Math.sqrt(r||1);return{x:(e.x-t.x)/n,y:(e.y-t.y)/n}}unitaryNormalVector(t,e,r){var n=this.unitaryVector(t,e,r);return this.rotatePoint({x:0,y:0},n,90)}rotate(t,e,r,n,o){var i=Math.PI/180*o,s=Math.cos(i),a=Math.sin(i);return{x:s*(r-t)+a*(n-e)+t,y:s*(n-e)-a*(r-t)+e}}rotatePoint(t,e,r){return this.rotate(t.x,t.y,e.x,e.y,r)}}
 //# sourceMappingURL=main.es.browser.js.map

dist/main.js

@@ -137,3 +137,3 @@ "use strict";
     value: function initCanvas(selector) {
-      this.svg = d3.select(selector).html("").append("svg").attr("id", "blooom").attr("width", "100%").attr("height", "100%");
+      this.svg = d3.select(selector).html("").append("svg").attr("class", "blooom").attr("width", "100%").attr("height", "100%");
       this.width = this.svg.node().clientWidth;
@@ -196,6 +196,6 @@ this.height = this.svg.node().clientHeight;
         that.handler.focusLink(d);
-        that.config.linkMouseEnter && that.config.linkMouseEnter(d);
+        that.config.linkMouseEnter && that.config.linkMouseEnter(d, that);
       }).on("mouseleave", function (d) {
         that.handler.removeFocus(that.nodes, that.links);
-        that.config.linkMouseLeave && that.config.linkMouseLeave(d);
+        that.config.linkMouseLeave && that.config.linkMouseLeave(d, that);
       });
@@ -208,6 +208,6 @@ this.nodes.on("contextmenu", function (d) {
         that.handler.focusNode(d);
-        that.config.nodeMouseEnter && that.config.nodeMouseEnter(d);
+        that.config.nodeMouseEnter && that.config.nodeMouseEnter(d, that);
       }).on("mouseleave", function (d) {
         that.handler.removeFocus(that.nodes, that.links);
-        that.config.nodeMouseLeave && that.config.nodeMouseLeave(d);
+        that.config.nodeMouseLeave && that.config.nodeMouseLeave(d, that);
       });
@@ -214,0 +214,0 @@ this.svg.on("contextmenu", function () {

dist/main.min.js

@@ -1,2 +0,2 @@
-"use strict";const d3=require("d3");function _createForOfIteratorHelper(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw i}}}}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _iterableToArrayLimit(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==s.return||s.return()}finally{if(o)throw i}}return r}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}var Blooom=function(){function e(t,r,n){var o;_classCallCheck(this,e);var i=_slicedToArray(this.transformData(r),2);r=i[0],o=i[1],this.config=new Config(this,o,n),this.handler=new Handler(this),this.renderer=new Renderer;var a=_slicedToArray(this.washData(r),2),s=a[0],u=a[1];this.container=this.initCanvas(t),this.simulation=this.initSimulation(s,u),this.links=this.initLinks(u),this.nodes=this.initNodes(s),this.registerInteraction(u),this.renderTick()}return _createClass(e,[{key:"loadNeo4j",value:function(e){var t=[],r=[];return e.map((function(e){return e.graph})).forEach((function(e){t=t.concat(e.nodes),r=r.concat(e.relationships)})),[{nodes:t,links:r},{linkSourceKey:"startNode",linkTargetKey:"endNode",nodeGroupsKey:"labels"}]}},{key:"transformData",value:function(e){var t={};if("string"==typeof e&&(e=JSON.parse(e)),e[0].graph){var r=_slicedToArray(this.loadNeo4j(e),2);e=r[0],t=r[1]}return[e,t]}},{key:"washData",value:function(e){var t=this,r=[],n=renameItemDict(e.links,{source:this.config.linkSourceKey,target:this.config.linkTargetKey}).map((function(e){return r.push(e.source),r.push(e.target),Object.create(e)}));r=unique(r);var o=[],i=[],a=renameItemDict(e.nodes,{labels:this.config.nodeGroupsKey}).map((function(e){return o.indexOf(e.id)>=0||r.indexOf(e.id)<0?null:(o.push(e.id),i.push(e[t.config.nodeGroupsKey]),Object.create(e))})).filter((function(e){return e}));return this.existedGroups=Object.assign.apply(Object,_toConsumableArray(unique(i.flat()).map((function(e,t){return _defineProperty({},e,t)})))),[a,n]}},{key:"initCanvas",value:function(e){return this.svg=d3.select(e).html("").append("svg").attr("id","blooom").attr("width","100%").attr("height","100%"),this.width=this.svg.node().clientWidth,this.height=this.svg.node().clientHeight,this.svg.attr("viewBox",[0,0,this.width,this.height]),this.svg.append("g")}},{key:"initSimulation",value:function(e,t){return d3.forceSimulation(e).velocityDecay(.1).force("link",d3.forceLink(t).id((function(e){return e.id}))).force("charge",d3.forceManyBody().strength(-800)).force("center",d3.forceCenter(this.width/2,this.height/2)).force("collide",d3.forceCollide().radius(40).iterations(2))}},{key:"initNodes",value:function(e){var t=this,r=this.container.selectAll(".node").data(e).enter().append("g").attr("class","node").call(this.handler.drag(this.simulation));return this.nodeGroup={circle:r.append("circle").attr("class","glow").attr("r",25),glow:r.append("circle").attr("class","circle").attr("r",25).attr("fill",(function(e){return t.config.colors[t.config.getNodeClassIndex(e.labels)]})).attr("stroke",(function(e){return t.config.borderColors[t.config.getNodeClassIndex(e.labels)]})),label:r.append("text").text((function(e){return t.config.getNodeText(e)}))},r}},{key:"initLinks",value:function(e){var t=this,r=this.container.selectAll(".link").data(e).enter().append("g").attr("class","link");return this.linkGroup={glow:r.append("path").attr("class","glow"),arrow:r.append("path").attr("class","arrow"),text:r.append("text").text((function(e){return e[t.config.linkLabelProperty]}))},r}},{key:"registerInteraction",value:function(e){var t=this;this.nodesLinked=[],e.forEach((function(e){t.nodesLinked[e.source.index+"-"+e.target.index]=!0,t.nodesLinked[e.target.index+"-"+e.source.index]=!0})),this.links.on("mouseenter",(function(e){t.handler.focusLink(e),t.config.linkMouseEnter&&t.config.linkMouseEnter(e)})).on("mouseleave",(function(e){t.handler.removeFocus(t.nodes,t.links),t.config.linkMouseLeave&&t.config.linkMouseLeave(e)})),this.nodes.on("contextmenu",(function(e){t.handler.pinNode(t.nodes,e),e.fx=e.x,e.fy=e.y})).on("mouseenter",(function(e){t.handler.focusNode(e),t.config.nodeMouseEnter&&t.config.nodeMouseEnter(e)})).on("mouseleave",(function(e){t.handler.removeFocus(t.nodes,t.links),t.config.nodeMouseLeave&&t.config.nodeMouseLeave(e)})),this.svg.on("contextmenu",(function(){return d3.event.preventDefault()})).call(this.handler.zoom()),this.svg.on("dblclick.zoom",null)}},{key:"renderTick",value:function(){var e=this;this.simulation.on("tick",(function(){e.renderer.renderLink(e.links,e.linkGroup.glow,e.linkGroup.text),e.nodes.attr("transform",(function(e){return"translate(".concat(e.x,", ").concat(e.y,")")}))}))}}]),e}(),Config=function(){function e(t){_classCallCheck(this,e),_defineProperty(this,"nodeMouseEnter",null),_defineProperty(this,"nodeMouseLeave",null),_defineProperty(this,"linkMouseEnter",null),_defineProperty(this,"linkMouseLeave",null),_defineProperty(this,"colors",["#68bdf6","#6dce9e","#faafc2","#f2baf6","#ff928c","#fcea7e","#ffc766","#405f9e","#a5abb6","#78cecb","#b88cbb","#ced2d9","#e84646","#fa5f86","#ffab1a","#fcda19","#797b80","#c9d96f","#47991f","#70edee","#ff75ea"]),_defineProperty(this,"linkSourceKey","source"),_defineProperty(this,"linkTargetKey","target"),_defineProperty(this,"nodeGroupsKey","group"),_defineProperty(this,"linkLabelProperty","type"),_defineProperty(this,"nodeLabelProperties",null);for(var r=this,n=arguments.length,o=new Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];if(o){var a,s=_createForOfIteratorHelper(o);try{for(s.s();!(a=s.n()).done;){var u=a.value;Object.entries(u).forEach((function(e){var t=_slicedToArray(e,2),n=t[0],o=t[1];return r[n]=o}))}}catch(e){s.e(e)}finally{s.f()}}this.graph=t,this.borderColors=this.colors.map((function(e){return d3.rgb(e).darker(.5)}))}return _createClass(e,[{key:"getNodeLabel",value:function(e){return e.constructor===Array?e[0]:e}},{key:"getNodeClassIndex",value:function(e){return this.graph.existedGroups[this.getNodeLabel(e)]}},{key:"getNodeText",value:function(e){return e.properties[this.nodeLabelProperties[this.getNodeLabel(e.labels)]]}}]),e}(),Handler=function(){function e(t){_classCallCheck(this,e),this.graph=t}return _createClass(e,[{key:"focusLink",value:function(e){this.graph.nodes.each((function(t){t.index!=e.source.index&&t.index!=e.target.index&&this.classList.add("faded")})),this.graph.links.each((function(t){t.source.index==e.source.index&&t.target.index==e.target.index||this.classList.add("faded")}))}},{key:"focusNode",value:function(e){var t=this;this.graph.nodes.each((function(r){r.index==e.index||t.graph.nodesLinked[r.index+"-"+e.index]||this.classList.add("faded")})),this.graph.links.each((function(t){t.source.index!=e.index&&t.target.index!=e.index&&this.classList.add("faded")}))}},{key:"removeFocus",value:function(){this.graph.nodes.each((function(){this.classList.remove("faded")})),this.graph.links.each((function(){this.classList.remove("faded")}))}},{key:"pinNode",value:function(e,t){this.graph.nodes.each((function(e){e.index===t.index&&this.classList.add("pinned")}))}},{key:"removeNodePin",value:function(e){this.graph.nodes.each((function(t){t.index===e.index&&this.classList.remove("pinned")}))}},{key:"zoom",value:function(){var e=this;return d3.zoom().scaleExtent([.1,2]).on("zoom",(function(){var t=+d3.event.transform.k;e.graph.nodeGroup.label.attr("opacity",t>.5?1:t<.4?0:10*(t-.4)),e.graph.linkGroup.text.attr("opacity",t>.5?1:t<.4?0:10*(t-.4)),e.graph.container.attr("transform",d3.event.transform)}))}},{key:"drag",value:function(e){var t=this;return d3.drag().on("start",(function(r){d3.event.active||e.alphaTarget(.3).restart(),t.removeNodePin(r),r.fx=r.x,r.fy=r.y})).on("drag",(function(e){e.fx=d3.event.x,e.fy=d3.event.y})).on("end",(function(t){d3.event.active||e.alphaTarget(0),t.fx=null,t.fy=null}))}}]),e}(),Renderer=function(){function e(){_classCallCheck(this,e),_defineProperty(this,"utils",new Utils)}return _createClass(e,[{key:"renderLink",value:function(e,t,r){var n=this;e.attr("transform",(function(e){var t=n.utils.rotation(e.source,e.target);return"translate("+e.source.x+", "+e.source.y+") rotate("+t+")"}));this.renderLinkText(r),this.renderLinkGlow(t),this.renderLinkArrow(e,{nodeRadius:25,arrowSize:4})}},{key:"renderLinkArrow",value:function(e,t){var r=this;e.each((function(){var e=d3.select(this),n=e.select(".arrow"),o=e.select("text");n.attr("d",(function(e){var n={x:0,y:0},i=r.utils.rotation(e.source,e.target),a=o.node().getBBox(),s=r.utils.unitaryVector(e.source,e.target),u={x:.5*(e.target.x-e.source.x-(a.width+5)*s.x),y:.5*(e.target.y-e.source.y-(a.width+5)*s.y)},c=r.utils.unitaryNormalVector(e.source,e.target),l=r.utils.rotatePoint(n,{x:0+(t.nodeRadius+1)*s.x-c.x,y:0+(t.nodeRadius+1)*s.y-c.y},i),d=r.utils.rotatePoint(n,{x:u.x-c.x,y:u.y-c.y},i),f=r.utils.rotatePoint(n,{x:u.x,y:u.y},i),y=r.utils.rotatePoint(n,{x:0+(t.nodeRadius+1)*s.x,y:0+(t.nodeRadius+1)*s.y},i),h=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-u.x-c.x,y:e.target.y-e.source.y-u.y-c.y},i),x=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-c.x-s.x*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-c.y-s.y*t.arrowSize},i),p=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-c.x+(c.x-s.x)*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-c.y+(c.y-s.y)*t.arrowSize},i),g=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y},i),v=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x+(-c.x-s.x)*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y+(-c.y-s.y)*t.arrowSize},i),k=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-s.x*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-s.y*t.arrowSize},i),b=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-u.x,y:e.target.y-e.source.y-u.y},i);return"M "+l.x+" "+l.y+" L "+d.x+" "+d.y+" L "+f.x+" "+f.y+" L "+y.x+" "+y.y+" Z M "+h.x+" "+h.y+" L "+x.x+" "+x.y+" L "+p.x+" "+p.y+" L "+g.x+" "+g.y+" L "+v.x+" "+v.y+" L "+k.x+" "+k.y+" L "+b.x+" "+b.y+" Z"}))}))}},{key:"renderLinkGlow",value:function(e){var t=this;e.attr("d",(function(e){var r={x:0,y:0},n=t.utils.rotation(e.source,e.target),o=t.utils.unitaryNormalVector(e.source,e.target),i=t.utils.rotatePoint(r,{x:0-o.x,y:0-o.y},n),a=t.utils.rotatePoint(r,{x:e.target.x-e.source.x-o.x,y:e.target.y-e.source.y-o.y},n),s=t.utils.rotatePoint(r,{x:e.target.x-e.source.x,y:e.target.y-e.source.y},n),u=t.utils.rotatePoint(r,{x:0,y:0},n);return"M "+i.x+" "+i.y+" L "+a.x+" "+a.y+" L "+s.x+" "+s.y+" L "+u.x+" "+u.y+" Z"}))}},{key:"renderLinkText",value:function(e){var t=this;e.attr("transform",(function(e){var r=(t.utils.rotation(e.source,e.target)+360)%360,n=r>90&&r<270,o=t.utils.unitaryNormalVector(e.source,e.target),i=n?2:-3,a={x:.5*(e.target.x-e.source.x)+o.x*i,y:.5*(e.target.y-e.source.y)+o.y*i},s=t.utils.rotatePoint({x:0,y:0},a,r);return"translate("+s.x+", "+s.y+") rotate("+(n?180:0)+")"}))}}]),e}(),unique=function(e){return e.filter((function(e,t,r){return r.indexOf(e)===t}))};function renameItemDict(e,t){return e.map((function(e){return Object.entries(t).map((function(t){var r=_slicedToArray(t,2),n=r[0],o=r[1];return n===o||(Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(e,o)),delete e[o]),e}))[0]}))}var Utils=function(){function e(){_classCallCheck(this,e)}return _createClass(e,[{key:"rotation",value:function(e,t){return 180*Math.atan2(t.y-e.y,t.x-e.x)/Math.PI}},{key:"unitaryVector",value:function(e,t,r){var n=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))/Math.sqrt(r||1);return{x:(t.x-e.x)/n,y:(t.y-e.y)/n}}},{key:"unitaryNormalVector",value:function(e,t,r){var n=this.unitaryVector(e,t,r);return this.rotatePoint({x:0,y:0},n,90)}},{key:"rotate",value:function(e,t,r,n,o){var i=Math.PI/180*o,a=Math.cos(i),s=Math.sin(i);return{x:a*(r-e)+s*(n-t)+e,y:a*(n-t)-s*(r-e)+t}}},{key:"rotatePoint",value:function(e,t,r){return this.rotate(e.x,e.y,t.x,t.y,r)}}]),e}();module.exports=Blooom;
+"use strict";const d3=require("d3");function _createForOfIteratorHelper(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw i}}}}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _iterableToArrayLimit(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==s.return||s.return()}finally{if(o)throw i}}return r}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}var Blooom=function(){function e(t,r,n){var o;_classCallCheck(this,e);var i=_slicedToArray(this.transformData(r),2);r=i[0],o=i[1],this.config=new Config(this,o,n),this.handler=new Handler(this),this.renderer=new Renderer;var a=_slicedToArray(this.washData(r),2),s=a[0],u=a[1];this.container=this.initCanvas(t),this.simulation=this.initSimulation(s,u),this.links=this.initLinks(u),this.nodes=this.initNodes(s),this.registerInteraction(u),this.renderTick()}return _createClass(e,[{key:"loadNeo4j",value:function(e){var t=[],r=[];return e.map((function(e){return e.graph})).forEach((function(e){t=t.concat(e.nodes),r=r.concat(e.relationships)})),[{nodes:t,links:r},{linkSourceKey:"startNode",linkTargetKey:"endNode",nodeGroupsKey:"labels"}]}},{key:"transformData",value:function(e){var t={};if("string"==typeof e&&(e=JSON.parse(e)),e[0].graph){var r=_slicedToArray(this.loadNeo4j(e),2);e=r[0],t=r[1]}return[e,t]}},{key:"washData",value:function(e){var t=this,r=[],n=renameItemDict(e.links,{source:this.config.linkSourceKey,target:this.config.linkTargetKey}).map((function(e){return r.push(e.source),r.push(e.target),Object.create(e)}));r=unique(r);var o=[],i=[],a=renameItemDict(e.nodes,{labels:this.config.nodeGroupsKey}).map((function(e){return o.indexOf(e.id)>=0||r.indexOf(e.id)<0?null:(o.push(e.id),i.push(e[t.config.nodeGroupsKey]),Object.create(e))})).filter((function(e){return e}));return this.existedGroups=Object.assign.apply(Object,_toConsumableArray(unique(i.flat()).map((function(e,t){return _defineProperty({},e,t)})))),[a,n]}},{key:"initCanvas",value:function(e){return this.svg=d3.select(e).html("").append("svg").attr("class","blooom").attr("width","100%").attr("height","100%"),this.width=this.svg.node().clientWidth,this.height=this.svg.node().clientHeight,this.svg.attr("viewBox",[0,0,this.width,this.height]),this.svg.append("g")}},{key:"initSimulation",value:function(e,t){return d3.forceSimulation(e).velocityDecay(.1).force("link",d3.forceLink(t).id((function(e){return e.id}))).force("charge",d3.forceManyBody().strength(-800)).force("center",d3.forceCenter(this.width/2,this.height/2)).force("collide",d3.forceCollide().radius(40).iterations(2))}},{key:"initNodes",value:function(e){var t=this,r=this.container.selectAll(".node").data(e).enter().append("g").attr("class","node").call(this.handler.drag(this.simulation));return this.nodeGroup={circle:r.append("circle").attr("class","glow").attr("r",25),glow:r.append("circle").attr("class","circle").attr("r",25).attr("fill",(function(e){return t.config.colors[t.config.getNodeClassIndex(e.labels)]})).attr("stroke",(function(e){return t.config.borderColors[t.config.getNodeClassIndex(e.labels)]})),label:r.append("text").text((function(e){return t.config.getNodeText(e)}))},r}},{key:"initLinks",value:function(e){var t=this,r=this.container.selectAll(".link").data(e).enter().append("g").attr("class","link");return this.linkGroup={glow:r.append("path").attr("class","glow"),arrow:r.append("path").attr("class","arrow"),text:r.append("text").text((function(e){return e[t.config.linkLabelProperty]}))},r}},{key:"registerInteraction",value:function(e){var t=this;this.nodesLinked=[],e.forEach((function(e){t.nodesLinked[e.source.index+"-"+e.target.index]=!0,t.nodesLinked[e.target.index+"-"+e.source.index]=!0})),this.links.on("mouseenter",(function(e){t.handler.focusLink(e),t.config.linkMouseEnter&&t.config.linkMouseEnter(e,t)})).on("mouseleave",(function(e){t.handler.removeFocus(t.nodes,t.links),t.config.linkMouseLeave&&t.config.linkMouseLeave(e,t)})),this.nodes.on("contextmenu",(function(e){t.handler.pinNode(t.nodes,e),e.fx=e.x,e.fy=e.y})).on("mouseenter",(function(e){t.handler.focusNode(e),t.config.nodeMouseEnter&&t.config.nodeMouseEnter(e,t)})).on("mouseleave",(function(e){t.handler.removeFocus(t.nodes,t.links),t.config.nodeMouseLeave&&t.config.nodeMouseLeave(e,t)})),this.svg.on("contextmenu",(function(){return d3.event.preventDefault()})).call(this.handler.zoom()),this.svg.on("dblclick.zoom",null)}},{key:"renderTick",value:function(){var e=this;this.simulation.on("tick",(function(){e.renderer.renderLink(e.links,e.linkGroup.glow,e.linkGroup.text),e.nodes.attr("transform",(function(e){return"translate(".concat(e.x,", ").concat(e.y,")")}))}))}}]),e}(),Config=function(){function e(t){_classCallCheck(this,e),_defineProperty(this,"nodeMouseEnter",null),_defineProperty(this,"nodeMouseLeave",null),_defineProperty(this,"linkMouseEnter",null),_defineProperty(this,"linkMouseLeave",null),_defineProperty(this,"colors",["#68bdf6","#6dce9e","#faafc2","#f2baf6","#ff928c","#fcea7e","#ffc766","#405f9e","#a5abb6","#78cecb","#b88cbb","#ced2d9","#e84646","#fa5f86","#ffab1a","#fcda19","#797b80","#c9d96f","#47991f","#70edee","#ff75ea"]),_defineProperty(this,"linkSourceKey","source"),_defineProperty(this,"linkTargetKey","target"),_defineProperty(this,"nodeGroupsKey","group"),_defineProperty(this,"linkLabelProperty","type"),_defineProperty(this,"nodeLabelProperties",null);for(var r=this,n=arguments.length,o=new Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];if(o){var a,s=_createForOfIteratorHelper(o);try{for(s.s();!(a=s.n()).done;){var u=a.value;Object.entries(u).forEach((function(e){var t=_slicedToArray(e,2),n=t[0],o=t[1];return r[n]=o}))}}catch(e){s.e(e)}finally{s.f()}}this.graph=t,this.borderColors=this.colors.map((function(e){return d3.rgb(e).darker(.5)}))}return _createClass(e,[{key:"getNodeLabel",value:function(e){return e.constructor===Array?e[0]:e}},{key:"getNodeClassIndex",value:function(e){return this.graph.existedGroups[this.getNodeLabel(e)]}},{key:"getNodeText",value:function(e){return e.properties[this.nodeLabelProperties[this.getNodeLabel(e.labels)]]}}]),e}(),Handler=function(){function e(t){_classCallCheck(this,e),this.graph=t}return _createClass(e,[{key:"focusLink",value:function(e){this.graph.nodes.each((function(t){t.index!=e.source.index&&t.index!=e.target.index&&this.classList.add("faded")})),this.graph.links.each((function(t){t.source.index==e.source.index&&t.target.index==e.target.index||this.classList.add("faded")}))}},{key:"focusNode",value:function(e){var t=this;this.graph.nodes.each((function(r){r.index==e.index||t.graph.nodesLinked[r.index+"-"+e.index]||this.classList.add("faded")})),this.graph.links.each((function(t){t.source.index!=e.index&&t.target.index!=e.index&&this.classList.add("faded")}))}},{key:"removeFocus",value:function(){this.graph.nodes.each((function(){this.classList.remove("faded")})),this.graph.links.each((function(){this.classList.remove("faded")}))}},{key:"pinNode",value:function(e,t){this.graph.nodes.each((function(e){e.index===t.index&&this.classList.add("pinned")}))}},{key:"removeNodePin",value:function(e){this.graph.nodes.each((function(t){t.index===e.index&&this.classList.remove("pinned")}))}},{key:"zoom",value:function(){var e=this;return d3.zoom().scaleExtent([.1,2]).on("zoom",(function(){var t=+d3.event.transform.k;e.graph.nodeGroup.label.attr("opacity",t>.5?1:t<.4?0:10*(t-.4)),e.graph.linkGroup.text.attr("opacity",t>.5?1:t<.4?0:10*(t-.4)),e.graph.container.attr("transform",d3.event.transform)}))}},{key:"drag",value:function(e){var t=this;return d3.drag().on("start",(function(r){d3.event.active||e.alphaTarget(.3).restart(),t.removeNodePin(r),r.fx=r.x,r.fy=r.y})).on("drag",(function(e){e.fx=d3.event.x,e.fy=d3.event.y})).on("end",(function(t){d3.event.active||e.alphaTarget(0),t.fx=null,t.fy=null}))}}]),e}(),Renderer=function(){function e(){_classCallCheck(this,e),_defineProperty(this,"utils",new Utils)}return _createClass(e,[{key:"renderLink",value:function(e,t,r){var n=this;e.attr("transform",(function(e){var t=n.utils.rotation(e.source,e.target);return"translate("+e.source.x+", "+e.source.y+") rotate("+t+")"}));this.renderLinkText(r),this.renderLinkGlow(t),this.renderLinkArrow(e,{nodeRadius:25,arrowSize:4})}},{key:"renderLinkArrow",value:function(e,t){var r=this;e.each((function(){var e=d3.select(this),n=e.select(".arrow"),o=e.select("text");n.attr("d",(function(e){var n={x:0,y:0},i=r.utils.rotation(e.source,e.target),a=o.node().getBBox(),s=r.utils.unitaryVector(e.source,e.target),u={x:.5*(e.target.x-e.source.x-(a.width+5)*s.x),y:.5*(e.target.y-e.source.y-(a.width+5)*s.y)},c=r.utils.unitaryNormalVector(e.source,e.target),l=r.utils.rotatePoint(n,{x:0+(t.nodeRadius+1)*s.x-c.x,y:0+(t.nodeRadius+1)*s.y-c.y},i),d=r.utils.rotatePoint(n,{x:u.x-c.x,y:u.y-c.y},i),f=r.utils.rotatePoint(n,{x:u.x,y:u.y},i),y=r.utils.rotatePoint(n,{x:0+(t.nodeRadius+1)*s.x,y:0+(t.nodeRadius+1)*s.y},i),h=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-u.x-c.x,y:e.target.y-e.source.y-u.y-c.y},i),x=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-c.x-s.x*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-c.y-s.y*t.arrowSize},i),p=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-c.x+(c.x-s.x)*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-c.y+(c.y-s.y)*t.arrowSize},i),g=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y},i),v=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x+(-c.x-s.x)*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y+(-c.y-s.y)*t.arrowSize},i),k=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-(t.nodeRadius+1)*s.x-s.x*t.arrowSize,y:e.target.y-e.source.y-(t.nodeRadius+1)*s.y-s.y*t.arrowSize},i),b=r.utils.rotatePoint(n,{x:e.target.x-e.source.x-u.x,y:e.target.y-e.source.y-u.y},i);return"M "+l.x+" "+l.y+" L "+d.x+" "+d.y+" L "+f.x+" "+f.y+" L "+y.x+" "+y.y+" Z M "+h.x+" "+h.y+" L "+x.x+" "+x.y+" L "+p.x+" "+p.y+" L "+g.x+" "+g.y+" L "+v.x+" "+v.y+" L "+k.x+" "+k.y+" L "+b.x+" "+b.y+" Z"}))}))}},{key:"renderLinkGlow",value:function(e){var t=this;e.attr("d",(function(e){var r={x:0,y:0},n=t.utils.rotation(e.source,e.target),o=t.utils.unitaryNormalVector(e.source,e.target),i=t.utils.rotatePoint(r,{x:0-o.x,y:0-o.y},n),a=t.utils.rotatePoint(r,{x:e.target.x-e.source.x-o.x,y:e.target.y-e.source.y-o.y},n),s=t.utils.rotatePoint(r,{x:e.target.x-e.source.x,y:e.target.y-e.source.y},n),u=t.utils.rotatePoint(r,{x:0,y:0},n);return"M "+i.x+" "+i.y+" L "+a.x+" "+a.y+" L "+s.x+" "+s.y+" L "+u.x+" "+u.y+" Z"}))}},{key:"renderLinkText",value:function(e){var t=this;e.attr("transform",(function(e){var r=(t.utils.rotation(e.source,e.target)+360)%360,n=r>90&&r<270,o=t.utils.unitaryNormalVector(e.source,e.target),i=n?2:-3,a={x:.5*(e.target.x-e.source.x)+o.x*i,y:.5*(e.target.y-e.source.y)+o.y*i},s=t.utils.rotatePoint({x:0,y:0},a,r);return"translate("+s.x+", "+s.y+") rotate("+(n?180:0)+")"}))}}]),e}(),unique=function(e){return e.filter((function(e,t,r){return r.indexOf(e)===t}))};function renameItemDict(e,t){return e.map((function(e){return Object.entries(t).map((function(t){var r=_slicedToArray(t,2),n=r[0],o=r[1];return n===o||(Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(e,o)),delete e[o]),e}))[0]}))}var Utils=function(){function e(){_classCallCheck(this,e)}return _createClass(e,[{key:"rotation",value:function(e,t){return 180*Math.atan2(t.y-e.y,t.x-e.x)/Math.PI}},{key:"unitaryVector",value:function(e,t,r){var n=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))/Math.sqrt(r||1);return{x:(t.x-e.x)/n,y:(t.y-e.y)/n}}},{key:"unitaryNormalVector",value:function(e,t,r){var n=this.unitaryVector(e,t,r);return this.rotatePoint({x:0,y:0},n,90)}},{key:"rotate",value:function(e,t,r,n,o){var i=Math.PI/180*o,a=Math.cos(i),s=Math.sin(i);return{x:a*(r-e)+s*(n-t)+e,y:a*(n-t)-s*(r-e)+t}}},{key:"rotatePoint",value:function(e,t,r){return this.rotate(e.x,e.y,t.x,t.y,r)}}]),e}();module.exports=Blooom;
 //# sourceMappingURL=main.js.map

package.json

 {
   "name": "blooom",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Graph visualization tool for human.",
@@ -5,0 +5,0 @@ "main": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

571582

increased by0.03%

No dependency changes