molecule-2d-for-react
Version:
2D molecule visualization using React and D3
2 lines • 15.9 kB
JavaScript
module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/js/",t(0)}([function(e,t,n){e.exports=n(9)},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={getBondWidth:function(e){if(!e||isNaN(parseInt(e.bond,10)))throw new Error("Invalid input");if(e.bond<0)throw new Error("d.bond must be at least 0");return 4*e.bond-2+"px"},chooseColor:function(e,t){var n=e.category||e.color;return n?n:t},withDefault:function(e,t){return"undefined"==typeof e?t:e}};t.default=n},function(e,t){e.exports=require("d3")},function(e,t){e.exports=require("react")},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t,n){function r(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=p[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(l(r.parts[i],t))}else{for(var a=[],i=0;i<r.parts.length;i++)a.push(l(r.parts[i],t));p[r.id]={id:r.id,refs:1,parts:a}}}}function o(e){for(var t=[],n={},r=0;r<e.length;r++){var o=e[r],i=o[0],a=o[1],s=o[2],u=o[3],l={css:a,media:s,sourceMap:u};n[i]?n[i].parts.push(l):t.push(n[i]={id:i,parts:[l]})}return t}function i(e,t){var n=v(),r=g[g.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),g.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(t)}}function a(e){e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function u(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function l(e,t){var n,r,o;if(t.singleton){var i=m++;n=b||(b=s(t)),r=c.bind(null,n,i,!1),o=c.bind(null,n,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(t),r=d.bind(null,n),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=s(t),r=f.bind(null,n),o=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function c(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=k(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function f(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var p={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},y=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=h(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,m=0,g=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=y()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=o(e);return r(n,t),function(e){for(var i=[],a=0;a<n.length;a++){var s=n[a],u=p[s.id];u.refs--,i.push(u)}if(e){var l=o(e);r(l,t)}for(var a=0;a<i.length;a++){var u=i[a];if(0===u.refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete p[u.id]}}}};var k=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(3),l=r(u),c=n(2),f=n(1),d=r(f);n(13);var p=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.renderD3()}},{key:"componentDidUpdate",value:function(){this.renderD3()}},{key:"renderD3",value:function(){if(this.linksContainer){var e=(0,c.select)(this.linksContainer),t=e.selectAll(".link").data(this.props.links,function(e){return e.id}),n=t.enter().append("g").attr("class","link");n.append("line").attr("class","link-line"),e.selectAll(".link-line").attr("source",function(e){return"undefined"!=typeof e.source.id?e.source.id:e.source}).attr("target",function(e){return"undefined"!=typeof e.target.id?e.target.id:e.target}).style("stroke-width",d.default.getBondWidth).style("stroke-dasharray",function(e){return"dashed"===e.style?5:0}).style("stroke",function(e){return d.default.chooseColor(e,"black")}).style("opacity",function(e){if(0===e.bond)return 0}),n.append("text"),e.selectAll(".link").selectAll("text").attr("x",function(e){return e.source.x||0}).attr("y",function(e){return e.source.y||0}).attr("text-anchor","middle").text(function(){return" "}),n.filter(function(e){return e.bond>1}).append("line").attr("class","separator separator-double"),e.selectAll(".separator-double").style("stroke","#FFF").style("stroke-width",function(e){return 4*e.bond-5+"px"}),n.filter(function(e){return 3===e.bond}).append("line").attr("class","separator separator-triple"),e.selectAll(".separator-triple").style("stroke",function(e){return d.default.chooseColor(e,"black")}).style("stroke-width",function(){return d.default.getBondWidth(1)}),t.exit().remove()}}},{key:"render",value:function(){var e=this;return l.default.createElement("g",{className:"links-container",ref:function(t){e.linksContainer=t}})}}]),t}(l.default.Component);p.propTypes={links:l.default.PropTypes.arrayOf(l.default.PropTypes.object)},t.default=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(3),l=r(u),c=n(2),f=n(8),d=r(f),p=n(6),h=r(p),y=n(10),v=r(y),b=n(1),m=r(b),g=function(e){function t(e){o(this,t);var n=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.onClickNode=function(e){var t=n.state.selectedAtomIds.slice(0),r=t.indexOf(e.id);r!==-1?t.splice(r,1):t.push(e.id),n.setState({selectedAtomIds:t}),n.props.onChangeSelection(t)},n.onDragStartedNode=function(e){c.event.active||n.simulation.alphaTarget(.3).restart(),e.fx=e.x,e.fy=e.y},n.onDragEndedNode=function(e){c.event.active||n.simulation.alphaTarget(0),e.fx=null,e.fy=null},n.renderTransform=function(){if(n.svg){var e=(0,c.select)(n.svg);e.selectAll(".node").attr("transform",function(e){return"translate("+(e.x||0)+","+(e.y||0)+")"});var t=e.selectAll(".link");t.selectAll("line").attr("x1",function(e){return e.source.x||0}).attr("y1",function(e){return e.source.y||0}).attr("x2",function(e){return e.target.x||0}).attr("y2",function(e){return e.target.y||0}),t.selectAll("text").attr("x",function(e){return((e.source.x||0)+(e.target.x||0))/2}).attr("y",function(e){return((e.source.y||0)+(e.target.y||0))/2})}},n.state={selectedAtomIds:e.selectedAtomIds||[]},n}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.renderD3()}},{key:"componentWillReceiveProps",value:function(e){v.default.compareIds(this.state.selectedAtomIds,e.selectedAtomIds)||this.setState({selectedAtomIds:e.selectedAtomIds})}},{key:"componentDidUpdate",value:function(){this.renderD3()}},{key:"renderD3",value:function(){var e=this;this.simulation=(0,c.forceSimulation)().force("link",(0,c.forceLink)().distance(function(e){return m.default.withDefault(e.distance,20)}).strength(function(e){return m.default.withDefault(e.strength,1)})).force("charge",(0,c.forceManyBody)()).force("center",(0,c.forceCenter)(this.props.width/2,this.props.height/2)),this.simulation.nodes(this.nodes).on("tick",function(){return e.renderTransform()}),this.simulation.force("link").id(function(e){return e.id}).links(this.links)}},{key:"render",value:function(){var e=this;return this.nodes=v.default.updateModels(this.nodes||[],this.props.modelData.nodes),this.links=v.default.updateModels(this.links||[],this.props.modelData.links),l.default.createElement("svg",{ref:function(t){e.svg=t},width:this.props.width,height:this.props.height},l.default.createElement(h.default,{links:this.links}),l.default.createElement(d.default,{selectedAtomIds:this.state.selectedAtomIds,nodes:this.nodes,onClickNode:this.onClickNode,onDragStartedNode:this.onDragStartedNode,onDragEndedNode:this.onDragEndedNode}))}}]),t}(l.default.Component);g.defaultProps={width:500,height:500,selectedAtomIds:[],onChangeSelection:function(){}},g.propTypes={width:l.default.PropTypes.number,height:l.default.PropTypes.number,modelData:l.default.PropTypes.shape({nodes:l.default.PropTypes.array,links:l.default.PropTypes.array}).isRequired,selectedAtomIds:l.default.PropTypes.arrayOf(l.default.PropTypes.number),onChangeSelection:l.default.PropTypes.func},t.default=g},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(3),l=r(u),c=n(2),f=n(1),d=r(f);n(14);var p="#39f8ff",h=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.renderD3()}},{key:"componentDidUpdate",value:function(){this.renderD3()}},{key:"renderD3",value:function(){var e=this;if(this.nodesContainer){var n=(0,c.select)(this.nodesContainer),r=n.selectAll(".node").data(this.props.nodes,function(e){return e.id}),o=r.enter().append("g");o.attr("class","node").on("click",this.props.onClickNode).attr("index",function(e){return e.id}).call((0,c.drag)().on("start",this.props.onDragStartedNode).on("drag",t.onDragged).on("end",this.props.onDragEndedNode)),n.selectAll(".node").classed("selected",function(t){return e.props.selectedAtomIds.indexOf(t.id)!==-1?p:""});var i=(0,c.scaleSqrt)().range([0,6]);o.append("circle").attr("class","atom-circle").attr("r",function(e){return i(d.default.withDefault(e.size,1.5))}).style("fill",function(e){return d.default.chooseColor(e,"white")}),(0,c.selectAll)(".atom-circle").style("stroke",function(t){return e.props.selectedAtomIds.indexOf(t.id)!==-1?p:""}),o.append("text").attr("class","atom-label").attr("dy",".35em").attr("text-anchor","middle").text(function(e){return e.atom}),n.selectAll(".atom-label").attr("fill",function(t){var n=e.props.selectedAtomIds.indexOf(t.id)!==-1?p:"";return d.default.withDefault(t.textcolor,n)}),r.exit().remove()}}},{key:"render",value:function(){var e=this;return l.default.createElement("g",{className:"nodes-container",ref:function(t){e.nodesContainer=t}})}}],[{key:"onDragged",value:function(e){e.fx=c.event.x,e.fy=c.event.y}}]),t}(l.default.Component);h.propTypes={selectedAtomIds:l.default.PropTypes.arrayOf(l.default.PropTypes.number),nodes:l.default.PropTypes.arrayOf(l.default.PropTypes.object),onClickNode:l.default.PropTypes.func,onDragStartedNode:l.default.PropTypes.func,onDragEndedNode:l.default.PropTypes.func},t.default=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(7),i=r(o);t.default=i.default},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n={compareIds:function(e,t){if(!e.length&&t.length||e.length&&!t.length)return!1;var n=new Map;e.forEach(function(e){n.set(e,!1)});var r=!0,o=!1,i=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done);r=!0){var u=a.value;if(!n.has(u))return!1;n.set(u,!0)}}catch(e){o=!0,i=e}finally{try{!r&&s.return&&s.return()}finally{if(o)throw i}}var l=!0,c=!1,f=void 0;try{for(var d,p=n[Symbol.iterator]();!(l=(d=p.next()).done);l=!0){var h=d.value,y=h[1];if(!y)return!1}}catch(e){c=!0,f=e}finally{try{!l&&p.return&&p.return()}finally{if(c)throw f}}return!0},updateObjectInPlace:function(e,t){return Object.keys(t).forEach(function(r){e[r]instanceof Object&&t[r]instanceof Object?e[r]=n.updateObjectInPlace(e[r],t[r]):e[r]=t[r]}),e},updateModels:function(e,t){var r=n.compareIds(e.map(function(e){return e.id}),t.map(function(e){return e.id}));if(!r)return t;t.forEach(function(t){for(var r=!1,o=0;o<e.length;o+=1)if(e[o].id===t.id){e[o]=n.updateObjectInPlace(e[o],t),r=!0;break}r||e.push(t)});for(var o=function(n){var r=e[n],o=t.find(function(e){return e.id===r.id});o||(e.splice(n,1),n-=1),i=n},i=0;i<e.length;i+=1)o(i);return e}};t.default=n},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".link line{stroke:#696969}.link line.separator{stroke:#fff;stroke-width:2px}",""])},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".node text{font:10px sans-serif;pointer-events:none}",""])},function(e,t,n){var r=n(11);"string"==typeof r&&(r=[[e.id,r,""]]);n(5)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(12);"string"==typeof r&&(r=[[e.id,r,""]]);n(5)(r,{});r.locals&&(e.exports=r.locals)}]);
//# sourceMappingURL=bundle.js.map