@mixer/webpack-bundle-compare
Version:
Tool to compare webpack bundle files
1 lines • 3.84 kB
JavaScript
(self.webpackChunk_mixer_webpack_bundle_compare=self.webpackChunk_mixer_webpack_bundle_compare||[]).push([[998],{5288:(e,t,o)=>{"use strict";o.d(t,{Z:()=>s});var r=o(3645),n=o.n(r)()((function(e){return e[1]}));n.push([e.id,"._2qrCn4I6Z_-CRVylzm6CyF{position:relative}._1W977oxh4sH1P0ikKQJnhC{position:absolute;top:0;right:0;display:flex;align-items:center;z-index:1}._1W977oxh4sH1P0ikKQJnhC button{background:none;border:none;outline:none !important;cursor:pointer;color:#fff;font-size:2em;margin-left:0.5em}\n",""]),n.locals={container:"_2qrCn4I6Z_-CRVylzm6CyF",controls:"_1W977oxh4sH1P0ikKQJnhC"};const s=n},6998:(e,t,o)=>{"use strict";o.r(t),o.d(t,{default:()=>d});var r=o(9058),n=o(7294),s=o(6116),i=o(3379),a=o.n(i),l=o(5288);a()(l.Z,{insert:"head",singleton:!1});const h=l.Z.locals||{};var c=o(6560);r.use(o(4867));class d extends n.PureComponent{constructor(){super(...arguments),this.state={filter:0},this.container=n.createRef(),this.zoomIn=this.createZoomFn(1),this.zoomOut=this.createZoomFn(-1),this.unfilter=()=>{this.container.current&&(this.draw(this.container.current,2),this.setState({filter:0}))}}componentDidMount(){this.mountTimeout=setTimeout((()=>this.draw(this.container.current)),10)}componentDidUpdate(e){e.edges===this.props.edges&&e.nodes===this.props.nodes||!this.container.current||this.draw(this.container.current)}componentWillUnmount(){clearTimeout(this.mountTimeout),this.graph&&this.graph.destroy()}render(){return n.createElement("div",{className:h.container},n.createElement("div",{ref:this.container,style:{width:this.props.width,height:this.props.height}}),n.createElement("div",{className:h.controls},1===this.state.filter&&n.createElement(n.Fragment,null,"For performance reasons, only part of the graph is shown."," ",n.createElement("a",{onClick:this.unfilter},"Click here")," to show the entire graph."),n.createElement("button",{onClick:this.zoomIn},n.createElement(s.OA5,null)),n.createElement("button",{onClick:this.zoomOut},n.createElement(s.CsA,null))))}createZoomFn(e){return t=>{if(this.graph){const o=this.graph.zoom()+e*(t.shiftKey?10:1);this.graph.zoom(Math.max(1,o))}}}draw(e,t=this.state.filter){let{nodes:o,edges:n}=this.props;o.length>100&&2!==t&&(o=o.slice(0,100),n=(0,c.Tt)(o,n),this.setState({filter:1})),this.graph&&this.graph.destroy();const s=r({container:e,boxSelectionEnabled:!1,autounselectify:!0,userZoomingEnabled:!1,layout:{name:"fcose",animate:!1,nodeSeparation:150,quality:"proof"},elements:{nodes:o,edges:n},style:[{selector:"node",style:{label:o.length<100?"data(label)":void 0,width:"data(width)",height:"data(width)",color:"data(fontColor)","font-size":5,"background-color":"data(bgColor)"}},{selector:"node.hover",style:{label:"data(label)","background-color":"#fff"}},{selector:"edge",style:{width:1.5,"line-color":"#5c2686","arrow-scale":.3,"source-arrow-color":"#5c2686","source-arrow-shape":"triangle","curve-style":"bezier"}},{selector:"edge.highlighted",style:{"line-color":"#fff","source-arrow-color":"#fff"}},{selector:"node.highlighted",style:{label:"data(label)"}}]});this.graph=s,this.attachPathHoverHandle(s),this.attachClickListeners(s),this.attachMouseoverStyles(s)}attachMouseoverStyles(e){e.on("mouseover","node",(e=>{e.target.addClass("hover")})),e.on("mouseout","node",(e=>{e.target.removeClass("hover")}))}attachClickListeners(e){const t=this.props.onClick;t&&e.on("tap","node",(e=>{const o=e.target;t(o.id())}))}attachPathHoverHandle(e){if(!this.props.rootNode)return;const t=e.collection("string"==typeof this.props.rootNode?[e.getElementById(this.props.rootNode)]:this.props.rootNode.map((t=>e.getElementById(t))));if(0===t.length)return;let o=null;e.on("mouseover","node",(r=>{o=e.elements().dijkstra({root:r.target,directed:!0}).pathTo(t),o.addClass("highlighted")})),e.on("mouseout","node",(()=>{o&&o.removeClass("highlighted")}))}}}}]);