react-archer/dist/react-archer.js

Draw arrows between DOM elements in React

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactArcher=e(require("react")):t.ReactArcher=e(t.React)}(window,function(t){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="dist/",r(r.s=3)}([function(e,r){e.exports=t},function(t,e,r){"use strict";(function(t){var r=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var r=-1;return t.some(function(t,n){return t[0]===e&&(r=n,!0)}),r}return function(){function e(){this.__entries__=[]}var r={size:{configurable:!0}};return r.size.get=function(){return this.__entries__.length},e.prototype.get=function(e){var r=t(this.__entries__,e),n=this.__entries__[r];return n&&n[1]},e.prototype.set=function(e,r){var n=t(this.__entries__,e);~n?this.__entries__[n][1]=r:this.__entries__.push([e,r])},e.prototype.delete=function(e){var r=this.__entries__,n=t(r,e);~n&&r.splice(n,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var r=0,n=this.__entries__;r<n.length;r+=1){var o=n[r];t.call(e,o[1],o[0])}},Object.defineProperties(e.prototype,r),e}()}(),n="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o=void 0!==t&&t.Math===Math?t:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),i="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout(function(){return t(Date.now())},1e3/60)},a=2,s=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,u=function(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var r=!1,n=!1,o=0;function s(){r&&(r=!1,t()),n&&u()}function c(){i(s)}function u(){var t=Date.now();if(r){if(t-o<a)return;n=!0}else r=!0,n=!1,setTimeout(c,e);o=t}return u}(this.refresh.bind(this),20)};u.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},u.prototype.removeObserver=function(t){var e=this.observers_,r=e.indexOf(t);~r&&e.splice(r,1),!e.length&&this.connected_&&this.disconnect_()},u.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},u.prototype.updateObservers_=function(){var t=this.observers_.filter(function(t){return t.gatherActive(),t.hasActive()});return t.forEach(function(t){return t.broadcastActive()}),t.length>0},u.prototype.connect_=function(){n&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},u.prototype.disconnect_=function(){n&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},u.prototype.onTransitionEnd_=function(t){var e=t.propertyName;void 0===e&&(e=""),s.some(function(t){return!!~e.indexOf(t)})&&this.refresh()},u.getInstance=function(){return this.instance_||(this.instance_=new u),this.instance_},u.instance_=null;var f=function(t,e){for(var r=0,n=Object.keys(e);r<n.length;r+=1){var o=n[r];Object.defineProperty(t,o,{value:e[o],enumerable:!1,writable:!1,configurable:!0})}return t},h=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},l=m(0,0,0,0);function p(t){return parseFloat(t)||0}function d(t){for(var e=[],r=arguments.length-1;r-- >0;)e[r]=arguments[r+1];return e.reduce(function(e,r){return e+p(t["border-"+r+"-width"])},0)}function y(t){var e=t.clientWidth,r=t.clientHeight;if(!e&&!r)return l;var n=h(t).getComputedStyle(t),o=function(t){for(var e={},r=0,n=["top","right","bottom","left"];r<n.length;r+=1){var o=n[r],i=t["padding-"+o];e[o]=p(i)}return e}(n),i=o.left+o.right,a=o.top+o.bottom,s=p(n.width),c=p(n.height);if("border-box"===n.boxSizing&&(Math.round(s+i)!==e&&(s-=d(n,"left","right")+i),Math.round(c+a)!==r&&(c-=d(n,"top","bottom")+a)),!function(t){return t===h(t).document.documentElement}(t)){var u=Math.round(s+i)-e,f=Math.round(c+a)-r;1!==Math.abs(u)&&(s-=u),1!==Math.abs(f)&&(c-=f)}return m(o.left,o.top,s,c)}var b="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof h(t).SVGGraphicsElement}:function(t){return t instanceof h(t).SVGElement&&"function"==typeof t.getBBox};function v(t){return n?b(t)?function(t){var e=t.getBBox();return m(0,0,e.width,e.height)}(t):y(t):l}function m(t,e,r,n){return{x:t,y:e,width:r,height:n}}var w=function(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=m(0,0,0,0),this.target=t};w.prototype.isActive=function(){var t=v(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},w.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t};var g=function(t,e){var r=function(t){var e=t.x,r=t.y,n=t.width,o=t.height,i="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,a=Object.create(i.prototype);return f(a,{x:e,y:r,width:n,height:o,top:r,right:e+n,bottom:o+r,left:e}),a}(e);f(this,{target:t,contentRect:r})},_=function(t,e,n){if(this.activeObservations_=[],this.observations_=new r,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n};_.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new w(t)),this.controller_.addObserver(this),this.controller_.refresh())}},_.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},_.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},_.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},_.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map(function(t){return new g(t.target,t.broadcastRect())});this.callback_.call(t,e,t),this.clearActive()}},_.prototype.clearActive=function(){this.activeObservations_.splice(0)},_.prototype.hasActive=function(){return this.activeObservations_.length>0};var O="undefined"!=typeof WeakMap?new WeakMap:new r,E=function(t){if(!(this instanceof E))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var e=u.getInstance(),r=new _(t,e,this);O.set(this,r)};["observe","unobserve","disconnect"].forEach(function(t){E.prototype[t]=function(){return(e=O.get(this))[t].apply(e,arguments);var e}});var x=void 0!==o.ResizeObserver?o.ResizeObserver:E;e.a=x}).call(this,r(2))},function(t,e){var r;r=function(){return this}();try{r=r||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(r=window)}t.exports=r},function(t,e,r){"use strict";r.r(e);var n=r(0),o=r.n(n),i=r(1);function a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function s(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var c=function(){function t(e,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),s(this,"x",void 0),s(this,"y",void 0),this.x=e,this.y=r}return function(t,e,r){e&&a(t.prototype,e),r&&a(t,r)}(t,[{key:"add",value:function(e){return new t(this.x+e.x,this.y+e.y)}},{key:"substract",value:function(e){return new t(this.x-e.x,this.y-e.y)}}]),t}();var u=function(t){var e=t.startingPoint,r=t.startingAnchor,n=t.endingPoint,i=t.endingAnchor,a=t.strokeColor,s=t.arrowLength,c=t.strokeWidth,u=t.arrowLabel,f=t.arrowMarkerId,h=2*s,l=e.x,p=e.y,d=function(t,e,r,n,o){var i=function(t){switch(t){case"left":return{arrowX:-1,arrowY:0};case"right":return{arrowX:1,arrowY:0};case"top":return{arrowX:0,arrowY:-1};case"bottom":return{arrowX:0,arrowY:1};default:return{arrowX:0,arrowY:0}}}(o);return{xe:t+i.arrowX*r*n/2,ye:e+i.arrowY*r*n/2}}(n.x,n.y,h,c,i),y=d.xe,b=d.ye,v=function(t,e,r,n,o){return"top"===o||"bottom"===o?{xa1:t,ya1:e+(n-e)/2}:"left"===o||"right"===o?{xa1:t+(r-t)/2,ya1:e}:{xa1:t,ya1:e}}(l,p,y,b,r),m=v.xa1,w=v.ya1,g=function(t,e,r,n,o){return"top"===o||"bottom"===o?{xa2:r,ya2:n-(n-e)/2}:"left"===o||"right"===o?{xa2:r-(r-t)/2,ya2:n}:{xa2:r,ya2:n}}(l,p,y,b,i),_=g.xa2,O=g.ya2,E="M".concat(l,",").concat(p," ")+"C".concat(m,",").concat(w," ").concat(_,",").concat(O," ")+"".concat(y,",").concat(b),x=function(t,e,r,n){var o=Math.abs(r-t),i=Math.abs(n-e);return{xl:r>t?t:r,yl:n>e?e:n,wl:o,hl:i}}(l,p,y,b),j=x.xl,k=x.yl,P=x.wl,S=x.hl;return o.a.createElement("g",null,o.a.createElement("path",{d:E,style:{fill:"none",stroke:a,strokeWidth:c},markerEnd:"url(".concat(location.href,"#").concat(f,")")}),u&&o.a.createElement("foreignObject",{x:j,y:k,width:P,height:S},o.a.createElement("div",{style:{width:P,height:S,display:"flex",alignItems:"center",justifyContent:"center"}},o.a.createElement("div",null,u))))};function f(t){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function h(t){return function(t){if(Array.isArray(t)){for(var e=0,r=new Array(t.length);e<t.length;e++)r[e]=t[e];return r}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),n.forEach(function(e){v(t,e,r[e])})}return t}function p(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function d(t){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function y(t,e){return(y=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function b(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function v(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var m={position:"absolute",width:"100%",height:"100%",top:0,left:0};function w(t){return new c(t.left,t.top)}var g=o.a.createContext({}),_=g.Provider,O=g.Consumer,E=function(t){function e(t){var r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),v(b(b(r=function(t,e){return!e||"object"!==f(e)&&"function"!=typeof e?b(t):e}(this,d(e).call(this,t)))),"arrowMarkerId",void 0),v(b(b(r)),"refreshScreen",function(){r.setState(l({},r.state))}),v(b(b(r)),"storeParent",function(t){r.state.parent||r.setState(function(e){return l({},e,{parent:t})})}),v(b(b(r)),"getRectFromRef",function(t){return t?t.getBoundingClientRect():null}),v(b(b(r)),"getParentCoordinates",function(){var t=r.getRectFromRef(r.state.parent);return t?w(t):new c(0,0)}),v(b(b(r)),"getPointCoordinatesFromAnchorPosition",function(t,e,n){var o=r.getRectFromRef(r.state.refs[e]);return o?function(t,e){switch(t){case"top":return w(e).add(new c(e.width/2,0));case"bottom":return w(e).add(new c(e.width/2,e.height));case"left":return w(e).add(new c(0,e.height/2));case"right":return w(e).add(new c(e.width,e.height/2));default:return new c(0,0)}}(t,o).substract(n):new c(0,0)}),v(b(b(r)),"registerTransition",function(t,e){var n=h(r.state.fromTo),o=l({},e,{from:l({},e.from,{id:t})});n.push(o),r.setState(function(t){return{fromTo:h(t.fromTo).concat(h(n))}})}),v(b(b(r)),"registerChild",function(t,e){r.state.refs[t]||(r.state.observer.observe(e),r.setState(function(r){return{refs:l({},r.refs,v({},t,e))}}))}),v(b(b(r)),"computeArrows",function(){var t=r.getParentCoordinates();return r.state.fromTo.map(function(e){var n=e.from,i=e.to,a=e.label,s=n.anchor,c=r.getPointCoordinatesFromAnchorPosition(n.anchor,n.id,t),f=i.anchor,h=r.getPointCoordinatesFromAnchorPosition(i.anchor,i.id,t);return o.a.createElement(u,{key:JSON.stringify({from:n,to:i}),startingPoint:c,startingAnchor:s,endingPoint:h,endingAnchor:f,strokeColor:r.props.strokeColor,arrowLength:r.props.arrowLength,strokeWidth:r.props.strokeWidth,arrowLabel:a,arrowMarkerId:r.arrowMarkerId})})});var n=new i.a(function(){r.refreshScreen()});r.state={refs:{},fromTo:[],observer:n,parent:null};var a=Math.random().toString().slice(2);return r.arrowMarkerId="arrow".concat(a),r}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&y(t,e)}(e,o.a.Component),function(t,e,r){e&&p(t.prototype,e),r&&p(t,r)}(e,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.refreshScreen)}},{key:"componentWillUnmount",value:function(){var t=this;Object.keys(this.state.refs).map(function(e){t.state.observer.unobserve(t.state.refs[e])}),window.removeEventListener("resize",this.refreshScreen)}},{key:"render",value:function(){var t=this.computeArrows(),e="M0,0 L0,".concat(this.props.arrowThickness," L").concat(this.props.arrowLength-1,",").concat(this.props.arrowThickness/2," z");return o.a.createElement(_,{value:{registerTransition:this.registerTransition,registerChild:this.registerChild}},o.a.createElement("div",{style:l({},this.props.style,{position:"relative"}),className:this.props.className},o.a.createElement("svg",{style:m},o.a.createElement("defs",null,o.a.createElement("marker",{id:this.arrowMarkerId,markerWidth:this.props.arrowLength,markerHeight:this.props.arrowThickness,refX:"0",refY:this.props.arrowThickness/2,orient:"auto",markerUnits:"strokeWidth"},o.a.createElement("path",{d:e,fill:this.props.strokeColor}))),t),o.a.createElement("div",{ref:this.storeParent},this.props.children)))}}]),e}();v(E,"defaultProps",{arrowLength:10,arrowThickness:6,strokeColor:"#f00",strokeWidth:2});var x=E;function j(t){return(j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function k(){return(k=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function P(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function S(t){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function A(t,e){return(A=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function M(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function T(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var C=function(t){var e=(t||[]).map(function(t){return t.label&&t.label.props?JSON.stringify(t.label.props):JSON.stringify(t.label)});return JSON.stringify(e)},R=function(t){function e(){var t,r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var n=arguments.length,o=new Array(n),i=0;i<n;i++)o[i]=arguments[i];return T(M(M(r=function(t,e){return!e||"object"!==j(e)&&"function"!=typeof e?M(t):e}(this,(t=S(e)).call.apply(t,[this].concat(o))))),"onRefUpdate",function(t){t&&r.props.context.registerChild&&r.props.context.registerChild(r.props.id,t)}),r}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&A(t,e)}(e,o.a.Component),function(t,e,r){e&&P(t.prototype,e),r&&P(t,r)}(e,[{key:"componentWillReceiveProps",value:function(t){C(this.props.relations)!==C(t.relations)&&this.registerAllTransitions(t.relations)}},{key:"componentDidMount",value:function(){this.props.relations&&this.registerAllTransitions(this.props.relations)}},{key:"registerAllTransitions",value:function(t){var e=this;t.forEach(function(t){e.props.context.registerTransition&&e.props.context.registerTransition(e.props.id,t)})}},{key:"render",value:function(){return o.a.createElement("div",{style:function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),n.forEach(function(e){T(t,e,r[e])})}return t}({},this.props.style,{position:"relative"}),className:this.props.className,ref:this.onRefUpdate},this.props.children)}}]),e}(),L=function(t){return o.a.createElement(O,null,function(e){return o.a.createElement(R,k({},t,{context:e}))})};r.d(e,"ArcherElement",function(){return L}),r.d(e,"ArcherContainer",function(){return x})}])});