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