[2] C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2
[2] var n=o.getZoomLevel()/100;return(t+o.getOffsetX())*n>this.mouseX&&(t+o.getOffsetX())*n<this.mouseX2&&(e+o.getOffsetY())*n>this.mouseY&&(e+o.getOff
setY())*n<this.mouseY2},SelectingAction}(p);e.SelectingAction=u;var f=function(t){function MoveCanvasAction(e,o,n){var i=t.call(this,e,o)||this;return
i.initialOffsetX=n.getOffsetX(),i.initialOffsetY=n.getOffsetY(),i}return n(MoveCanvasAction,t),MoveCanvasAction}(p);e.MoveCanvasAction=f;var g=function
(t){function MoveItemsAction(e,o,n){var i=t.call(this,e,o)||this;i.moved=!1,n.enableRepaintEntities(n.getDiagramModel().getSelectedItems());var r=n.get
DiagramModel().getSelectedItems();return r=r.filter(function(t){return!n.isModelLocked(t)}),i.selectionModels=r.map(function(t){return{model:t,initialX
:t.x,initialY:t.y}}),i}return n(MoveItemsAction,t),MoveItemsAction}(p);e.MoveItemsAction=g;var h=function(t){function DiagramWidget(e){var o=t.call(thi
s,e)||this;return o.onMouseMove=o.onMouseMove.bind(o),o.onMouseUp=o.onMouseUp.bind(o),o.state={action:null,wasMoved:!1,renderedNodes:!1,windowListener:
null,diagramEngineListener:null,document:null},o}return n(DiagramWidget,t),DiagramWidget.prototype.componentWillMount=function(){var t=this;this.setSta
te({diagramEngineListener:this.props.diagramEngine.addListener({repaintCanvas:function(){t.forceUpdate()}})})},DiagramWidget.prototype.componentWillUnm
ount=function(){this.props.diagramEngine.removeListener(this.state.diagramEngineListener),this.props.diagramEngine.setCanvas(null),window.removeEventLi
stener("keyup",this.state.windowListener),window.removeEventListener("mouseUp",this.onMouseUp),window.removeEventListener("mouseMove",this.onMouseMove)
},DiagramWidget.prototype.componentWillUpdate=function(t){this.props.diagramEngine.diagramModel.id!==t.diagramEngine.diagramModel.id&&(this.setState({r
enderedNodes:!1}),t.diagramEngine.diagramModel.rendered=!0),t.diagramEngine.diagramModel.rendered||(this.setState({renderedNodes:!1}),t.diagramEngine.d
iagramModel.rendered=!0)},DiagramWidget.prototype.componentDidUpdate=function(){this.state.renderedNodes||this.setState({renderedNodes:!0})},DiagramWid
get.prototype.componentDidMount=function(){var t=this;this.props.diagramEngine.setCanvas(this.refs.canvas),this.setState({document:document,renderedNod
es:!0,windowListener:window.addEventListener("keyup",function(e){46!==e.keyCode&&8!==e.keyCode||(s.forEach(t.props.diagramEngine.getDiagramModel().getS
electedItems(),function(e){t.props.diagramEngine.isModelLocked(e)||e.remove()}),t.forceUpdate())},!1)}),window.focus()},DiagramWidget.prototype.getMous
eElement=function(t){var e=t.target,o=this.props.diagramEngine.diagramModel,n=l.Toolkit.closest(e,".port[data-name]");if(n){var i=l.Toolkit.closest(e,"
.node[data-nodeid]");return{model:o.getNode(i.getAttribute("data-nodeid")).getPort(n.getAttribute("data-name")),element:n}}return(n=l.Toolkit.closest(e
,".point[data-id]"))?{model:o.getLink(n.getAttribute("data-linkid")).getPointModel(n.getAttribute("data-id")),element:n}:(n=l.Toolkit.closest(e,"[data-
linkid]"))?{model:o.getLink(n.getAttribute("data-linkid")),element:n}:(n=l.Toolkit.closest(e,".node[data-nodeid]"),n?{model:o.getNode(n.getAttribute("d
ata-nodeid")),element:n}:null)},DiagramWidget.prototype.fireAction=function(){this.state.action&&this.props.actionStillFiring&&this.props.actionStillFi
ring(this.state.action)},DiagramWidget.prototype.stopFiringAction=function(t){this.props.actionStoppedFiring&&!t&&this.props.actionStoppedFiring(this.s
tate.action),this.setState({action:null})},DiagramWidget.prototype.startFiringAction=function(t){var e=!0;this.props.actionStartedFiring&&(e=this.props
.actionStartedFiring(t)),e&&this.setState({action:t})},DiagramWidget.prototype.onMouseMove=function(t){var e=this,o=this.props.diagramEngine,n=o.getDia
gramModel();if(this.state.action instanceof u){var r=o.getRelativePoint(t.pageX,t.pageY);return s.forEach(n.getNodes(),function(t){e.state.action.conta
insElement(t.x,t.y,n)&&t.setSelected(!0)}),s.forEach(n.getLinks(),function(t){var o=!0;s.forEach(t.points,function(t){e.state.action.containsElement(t.
x,t.y,n)?t.setSelected(!0):o=!1}),o&&t.setSelected(!0)}),this.state.action.mouseX2=r.x,this.state.action.mouseY2=r.y,this.fireAction(),void this.setSta
te({action:this.state.action})}this.state.action instanceof g?(this.state.wasMoved||this.setState(i({},this.state,{wasMoved:!0})),s.forEach(this.state.
action.selectionModels,function(o){(o.model instanceof a.NodeModel||o.model instanceof a.PointModel)&&(o.model.x=o.initialX+(t.pageX-e.state.action.mou
seX)/(n.getZoomLevel()/100),o.model.y=o.initialY+(t.pageY-e.state.action.mouseY)/(n.getZoomLevel()/100))}),this.fireAction(),this.forceUpdate()):this.s
tate.action instanceof f&&this.props.allowCanvasTranslation&&(n.setOffset(this.state.action.initialOffsetX+(t.pageX-this.state.action.mouseX)/(n.getZoo
mLevel()/100),this.state.action.initialOffsetY+(t.pageY-this.state.action.mouseY)/(n.getZoomLevel()/100)),this.fireAction(),this.forceUpdate())},Diagra
mWidget.prototype.onMouseUp=function(t){var e=this.props.diagramEngine;e.getDiagramModel();if(this.state.action instanceof g){var o=this.getMouseElemen
t(t),n=!1;s.forEach(this.state.action.selectionModels,function(t){if(t.model instanceof a.PointModel&&o.model instanceof a.PortModel){n=!0;var e=t.mode
l.getLink();e.setTargetPort(o.model)}}),n||this.props.allowLooseLinks||s.forEach(this.state.action.selectionModels,function(t){if(t.model instanceof a.
PointModel){var e=t.model.getLink();e.isLastPoint(t.model)&&e.remove()}}),e.clearRepaintEntities(),this.stopFiringAction(!this.state.wasMoved)}else e.c
learRepaintEntities(),this.stopFiringAction();this.state.document.removeEventListener("mousemove",this.onMouseMove),this.state.document.removeEventList
ener("mouseup",this.onMouseUp)},DiagramWidget.prototype.render=function(){var t=this,e=this.props.diagramEngine,o=e.getDiagramModel();return r.DOM.div(
{ref:"canvas",className:"storm-diagrams-canvas",onWheel:function(n){t.props.allowCanvasZoom&&(n.preventDefault(),n.stopPropagation(),o.setZoomLevel(o.g
etZoomLevel()+n.deltaY/60),e.enableRepaintEntities([]),t.forceUpdate(),setTimeout(function(){t.forceUpdate()},100))},onMouseDown:function(n){t.setState
(i({},t.state,{wasMoved:!1})),e.clearRepaintEntities();var r=t.getMouseElement(n);if(null===r)if(n.shiftKey){var s=e.getRelativePoint(n.pageX,n.pageY);
t.startFiringAction(new u(s.x,s.y))}else o.clearSelection(),t.startFiringAction(new f(n.pageX,n.pageY,o));else if(r.model instanceof a.PortModel){var s
=e.getRelativeMousePoint(n),c=new a.LinkModel;c.setSourcePort(r.model),c.getFirstPoint().updateLocation(s),c.getLastPoint().updateLocation(s),o.clearSe
lection(),c.getLastPoint().setSelected(!0),o.addLink(c),t.startFiringAction(new g(n.pageX,n.pageY,e))}else n.shiftKey||r.model.isSelected()||o.clearSel
ection(),r.model.setSelected(!0),t.startFiringAction(new g(n.pageX,n.pageY,e));t.state.document.addEventListener("mousemove",t.onMouseMove),t.state.doc
ument.addEventListener("mouseup",t.onMouseUp)}},this.state.renderedNodes?r.createElement(c.LinkLayerWidget,{diagramEngine:e,pointAdded:function(n,i){t.
state.document.addEventListener("mousemove",t.onMouseMove),t.state.document.addEventListener("mouseup",t.onMouseUp),i.stopPropagation(),o.clearSelectio
n(n),t.setState({action:new g(i.pageX,i.pageY,e)})}}):null,r.createElement(d.NodeLayerWidget,{diagramEngine:e}),this.state.action instanceof u?r.DOM.di
v({className:"selector",style:{top:this.state.action.mouseY,left:this.state.action.mouseX,width:this.state.action.mouseX2-this.state.action.mouseX,heig
ht:this.state.action.mouseY2-this.state.action.mouseY}}):null)},DiagramWidget}(r.Component);h.defaultProps={diagramEngine:null,allowLooseLinks:!0,allow
CanvasTranslation:!0,allowCanvasZoom:!0},e.DiagramWidget=h},function(t,e,o){var n=o(24);t.exports=function(t,e,o){for(var i=o?t:t.parentNode;i&&i!==doc
ument;){if(n(i,e))return i;i=i.parentNode}}},function(t,e){function match(t,e){if(n)return n.call(t,e);for(var o=t.parentNode.querySelectorAll(e),i=0;i
<o.length;++i)if(o[i]==t)return!0;return!1}var o=Element.prototype,n=o.matchesSelector||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelec
tor||o.oMatchesSelector;t.exports=match},function(t,e,o){"use strict";function __export(t){for(var o in t)e.hasOwnProperty(o)||(e[o]=t[o])}__export(o(1
8)),__export(o(8)),__export(o(19)),__export(o(9)),__export(o(20)),__export(o(21)),__export(o(10)),__export(o(6)),__export(o(5)),__export(o(16)),__expor
t(o(7)),__export(o(4)),__export(o(2)),__export(o(3)),__export(o(17)),__export(o(22)),__export(o(11)),__export(o(12)),__export(o(13)),__export(o(14)),__
export(o(15))}])});
[2] ^
[2] ReferenceError: Element is not defined
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.o (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:2:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.<anonymous> (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at Object.AbstractInstanceFactory.getName (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
[2] at __webpack_require__ (C:\Users\User\Documents\blogs\webpack:\node_modules\storm-react-diagrams\dist\main.js:1:1)
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
