From 9502fba76892aa502439dee40b4a35ba2b089ef3 Mon Sep 17 00:00:00 2001 From: Pomax Date: Tue, 7 Mar 2017 08:14:26 -0800 Subject: [PATCH] forgot to localize the hash fragment ids --- article.js | 38 +++++++++++++++++------------------ components/BsplineGraphic.jsx | 1 - components/Navigation.jsx | 10 ++++++++- components/SectionHeader.jsx | 11 +++++++++- en-GB/article.js | 38 +++++++++++++++++------------------ index.html | 1 - ja-JP/article.js | 38 +++++++++++++++++------------------ lib/locale.js | 6 +++--- make-locales.js | 6 +++--- zh-CN/article.js | 37 +++++++++++++++++----------------- 10 files changed, 101 insertions(+), 85 deletions(-) diff --git a/article.js b/article.js index 79c303af..9cf81087 100644 --- a/article.js +++ b/article.js @@ -1,5 +1,5 @@ -!function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=287)}([function(e,t,n){"use strict";e.exports=n(25)},function(e,t,n){"use strict";function r(e,t,n,r,a,o,s,l){if(i(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,s,l],h=0;u=new Error(t.replace(/%s/g,function(){return c[h++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var i=function(e){};e.exports=r},function(e,t,n){var r=n(166),i=function(){this.data={},this.data=r};i.prototype={getSectionLocale:function(e){return this.data[e].locale},getContent:function(e,t){return this.data[e].getContent(t)},getTitle:function(e){return this.data[e].title}},e.exports=i},function(e,t,n){"use strict";var r=n(9),i=r;e.exports=i},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r-1){n.update();break}}else this.curve&&this.curve.update&&this.curve.update()}this.props.onMouseMove&&this.props.onMouseMove(e,this),this.dragging&&this.props.onMouseDrag&&this.props.onMouseDrag(e,this),this.props.static||this.playing||!this.props.draw||this.props.draw(this,this.curve)},mouseUp:function(e){return this.down=!1,this.movingPoint?(this.movingPoint=!1,this.mp=!1,void(this.props.onMouseUp&&this.props.onMouseUp(e,this))):void(this.props.onMouseUp&&this.props.onMouseUp(e,this))},onClick:function(e){o(e),this.mx=e.offsetX,this.my=e.offsetY,!this.dragging&&this.props.onClick&&this.props.onClick(e,this)},onKeyUp:function(e){this.props.onKeyUp&&(this.props.onKeyUp(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyDown:function(e){this.props.onKeyDown&&(this.props.onKeyDown(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyPress:function(e){this.props.onKeyPress&&(this.props.onKeyPress(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},reset:function(){this.refs.canvas.width=this.refs.canvas.width,this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.fillStyle="none";var e=this.getPixelRatio();this.ctx.scale(e,e),this.offset={x:0,y:0},this.colorSeed=0},setSize:function(e,t){this.defaultWidth=e,this.defaultHeight=t;var n=this.refs.canvas;n.style.width=this.panelCount*e+"px",n.style.height=t+"px";var r=this.getPixelRatio();n.width=this.panelCount*e*r,n.height=t*r,this.ctx.scale(r,r)},setCurves:function(e){this.setCurve(e)},setCurve:function(e){var t=[];e=e instanceof Array?e:Array.prototype.slice.call(arguments),e.forEach(function(e){t=t.concat(e.points)}),this.curve=1===e.length?e[0]:e,this.lpts=t},getPanelWidth:function(){return this.defaultWidth},getPanelHeight:function(){return this.defaultHeight},getDefaultQuadratic:function(){return new this.Bezier(70,250,20,110,250,60)},getDefaultCubic:function(){return new this.Bezier(120,160,35,200,220,260,220,40)},getPixelRatio:function(){return window.devicePixelRatio||1},toImage:function(){var e=this.refs.canvas.toDataURL(),t=new Image;return t.src=e,t.devicePixelRatio=this.getPixelRatio(),t},setPanelCount:function(e){this.panelCount=e;var t=this.refs.canvas;t.width=e*this.defaultWidth*this.getPixelRatio(),t.style.width=e*this.defaultWidth+"px"},setOffset:function(e){this.offset=e},setColor:function(e){this.ctx.strokeStyle=e},getColor:function(){return this.ctx.strokeStyle||"black"},setWeight:function(e){this.ctx.lineWidth=e},noColor:function(e){this.ctx.strokeStyle="transparent"},setRandomColor:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.strokeStyle=i.hsl(t,n,r).alpha(e).css()},setRandomFill:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.fillStyle=i.hsl(t,n,r).alpha(e).css()},setFill:function(e){this.ctx.fillStyle=e},getFill:function(){return this.ctx.fillStyle||"transparent"},noFill:function(){this.ctx.fillStyle="transparent"},drawSkeleton:function(e,t,n){t=t||{x:0,y:0};var r=e.points;if(r.length>2){this.ctx.strokeStyle="lightgrey",this.drawLine(r[0],r[1],t);for(var i=r.length-2,a=1;a should not have a "'+t+'" prop')}t.__esModule=!0,t.falsy=r;var i=n(0),a=i.PropTypes.func,o=i.PropTypes.object,s=i.PropTypes.arrayOf,l=i.PropTypes.oneOfType,u=i.PropTypes.element,c=i.PropTypes.shape,h=i.PropTypes.string,d=c({listen:a.isRequired,pushState:a.isRequired,replaceState:a.isRequired,go:a.isRequired});t.history=d;var f=c({pathname:h.isRequired,search:h.isRequired,state:o,action:h.isRequired,key:h});t.location=f;var p=l([a,h]);t.component=p;var m=l([p,o]);t.components=m;var g=l([o,u]);t.route=g;var v=l([g,s(g)]);t.routes=v,t.default={falsy:r,history:d,location:f,component:p,components:m,route:g}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=s.default(e),n="",r="",i=t.indexOf("#");i!==-1&&(r=t.substring(i),t=t.substring(0,i));var a=t.indexOf("?");return a!==-1&&(n=t.substring(a),t=t.substring(0,a)),""===t&&(t="/"),{pathname:t,search:n,hash:r}}t.__esModule=!0;var a=n(8),o=(r(a),n(72)),s=r(o);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){if(g){var t=e.node,n=e.children;if(n.length)for(var r=0;r1){for(var g=Array(m),v=0;v1){for(var y=Array(w),b=0;b0?void 0:f.default(!1),null!=c&&(a+=encodeURI(c))):"("===l?i+=1:")"===l?i-=1:":"===l.charAt(0)?(u=l.substring(1),c=t[u],null!=c||i>0?void 0:f.default(!1),null!=c&&(a+=encodeURIComponent(c))):a+=l;return a.replace(/\/+/g,"/")}t.__esModule=!0,t.compilePattern=s,t.matchPattern=l,t.getParamNames=u,t.getParams=c,t.formatPattern=h;var d=n(10),f=r(d),p={}},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,m)||(e[m]=f++,h[e[m]]={}),h[e[m]]}var i,a=n(5),o=n(47),s=n(223),l=n(85),u=n(256),c=n(58),h={},d=!1,f=0,p={topAbort:"abort",topAnimationEnd:u("animationend")||"animationend",topAnimationIteration:u("animationiteration")||"animationiteration",topAnimationStart:u("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:u("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},m="_reactListenersID"+String(Math.random()).slice(2),g=a({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(g.handleTopLevel),g.ReactEventListener=e}},setEnabled:function(e){g.ReactEventListener&&g.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!g.ReactEventListener||!g.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,i=r(n),a=o.registrationNameDependencies[e],s=0;s]/;e.exports=i},function(e,t,n){"use strict";var r,i=n(7),a=n(46),o=/^[ \r\n\t\f]/,s=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,l=n(54),u=l(function(e,t){if(e.namespaceURI!==a.svg||"innerHTML"in e)e.innerHTML=t;else{r=r||document.createElement("div"),r.innerHTML=""+t+"";for(var n=r.firstChild;n.firstChild;)e.appendChild(n.firstChild)}});if(i.canUseDOM){var c=document.createElement("div");c.innerHTML=" ",""===c.innerHTML&&(u=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&s.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),c=null}e.exports=u},function(e,t,n){"use strict";e.exports={preface:n(158),introduction:n(150),whatis:n(165),explanation:n(143),control:n(139),extended:n(144),matrix:n(151),decasteljau:n(141),flattening:n(146),splitting:n(162),matrixsplit:n(152),reordering:n(160),derivatives:n(142),pointvectors:n(156),components:n(138),extremities:n(145),boundingbox:n(124),aligning:n(120),tightbounds:n(163),inflections:n(148),canonical:n(132),arclength:n(122),arclengthapprox:n(123),tracing:n(164),intersections:n(149),curveintersection:n(140),abc:n(119),moulding:n(153),pointcurves:n(155),catmullconv:n(133),catmullmoulding:n(134),polybezier:n(157),shapes:n(161),projections:n(159),offsetting:n(154),graduatedoffset:n(147),circles:n(135),circles_cubic:n(136),arcapproximation:n(121),bsplines:n(127),comments:n(137)}},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function i(e,t){if(r(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var o=0;o-1?void 0:o("96",e),!u.plugins[n]){t.extractEvents?void 0:o("97",e),u.plugins[n]=t;var r=t.eventTypes;for(var a in r)i(r[a],t,a)?void 0:o("98",a,e)}}}function i(e,t,n){u.eventNameDispatchConfigs.hasOwnProperty(n)?o("99",n):void 0,u.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var i in r)if(r.hasOwnProperty(i)){var s=r[i];a(s,t,n)}return!0}return!!e.registrationName&&(a(e.registrationName,t,n),!0)}function a(e,t,n){u.registrationNameModules[e]?o("100",e):void 0,u.registrationNameModules[e]=t,u.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var o=n(4),s=(n(1),null),l={},u={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){s?o("101"):void 0,s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var i=e[n];l.hasOwnProperty(n)&&l[n]===i||(l[n]?o("102",n):void 0,l[n]=i,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return u.registrationNameModules[t.registrationName]||null;if(void 0!==t.phasedRegistrationNames){var n=t.phasedRegistrationNames;for(var r in n)if(n.hasOwnProperty(r)){var i=u.registrationNameModules[n[r]];if(i)return i}}return null},_resetEventPlugins:function(){s=null;for(var e in l)l.hasOwnProperty(e)&&delete l[e];u.plugins.length=0;var t=u.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=u.registrationNameModules;for(var i in r)r.hasOwnProperty(i)&&delete r[i]}};e.exports=u},function(e,t,n){"use strict";function r(e){return"topMouseUp"===e||"topTouchEnd"===e||"topTouchCancel"===e}function i(e){return"topMouseMove"===e||"topTouchMove"===e}function a(e){return"topMouseDown"===e||"topTouchStart"===e}function o(e,t,n,r){var i=e.type||"unknown-event";e.currentTarget=v.getNodeFromInstance(r),t?m.invokeGuardedCallbackWithCatch(i,n,e):m.invokeGuardedCallback(i,n,e),e.currentTarget=null}function s(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var i=0;i0&&r.length<20?n+" (keys: "+r.join(", ")+")":n}function a(e,t){var n=s.get(e);if(!n){return null}return n}var o=n(4),s=(n(17),n(32)),l=(n(11),n(13)),u=(n(1),n(3),{isMounted:function(e){var t=s.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){u.validateCallback(t,n);var i=a(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=a(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=a(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=a(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t,n){e._pendingElement=t,e._context=n,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?o("122",t,i(e)):void 0}});e.exports=u},function(e,t,n){"use strict";var r=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,i){MSApp.execUnsafeLocalFunction(function(){return e(t,n,r,i)})}:e};e.exports=r},function(e,t,n){"use strict";function r(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}e.exports=r},function(e,t,n){"use strict";function r(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=a[e];return!!r&&!!n[r]}function i(e){return r}var a={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=i},function(e,t,n){"use strict";function r(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}e.exports=r},function(e,t,n){"use strict";/** +!function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=287)}([function(e,t,n){"use strict";e.exports=n(25)},function(e,t,n){"use strict";function r(e,t,n,r,a,o,s,l){if(i(t),!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,s,l],h=0;u=new Error(t.replace(/%s/g,function(){return c[h++]})),u.name="Invariant Violation"}throw u.framesToPop=1,u}}var i=function(e){};e.exports=r},function(e,t,n){var r=n(166),i=function(){this.data={},this.data=r};i.prototype={getSectionLocale:function(e){return this.data[e].locale},getContent:function(e,t){return this.data[e].getContent(t)},getTitle:function(e){return this.data[e].title}},console.log(i),e.exports=i},function(e,t,n){"use strict";var r=n(10),i=r;e.exports=i},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r-1){n.update();break}}else this.curve&&this.curve.update&&this.curve.update()}this.props.onMouseMove&&this.props.onMouseMove(e,this),this.dragging&&this.props.onMouseDrag&&this.props.onMouseDrag(e,this),this.props.static||this.playing||!this.props.draw||this.props.draw(this,this.curve)},mouseUp:function(e){return this.down=!1,this.movingPoint?(this.movingPoint=!1,this.mp=!1,void(this.props.onMouseUp&&this.props.onMouseUp(e,this))):void(this.props.onMouseUp&&this.props.onMouseUp(e,this))},onClick:function(e){o(e),this.mx=e.offsetX,this.my=e.offsetY,!this.dragging&&this.props.onClick&&this.props.onClick(e,this)},onKeyUp:function(e){this.props.onKeyUp&&(this.props.onKeyUp(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyDown:function(e){this.props.onKeyDown&&(this.props.onKeyDown(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},onKeyPress:function(e){this.props.onKeyPress&&(this.props.onKeyPress(e,this),!this.playing&&this.props.draw&&this.props.draw(this,this.curve))},reset:function(){this.refs.canvas.width=this.refs.canvas.width,this.ctx.strokeStyle="black",this.ctx.lineWidth=1,this.ctx.fillStyle="none";var e=this.getPixelRatio();this.ctx.scale(e,e),this.offset={x:0,y:0},this.colorSeed=0},setSize:function(e,t){this.defaultWidth=e,this.defaultHeight=t;var n=this.refs.canvas;n.style.width=this.panelCount*e+"px",n.style.height=t+"px";var r=this.getPixelRatio();n.width=this.panelCount*e*r,n.height=t*r,this.ctx.scale(r,r)},setCurves:function(e){this.setCurve(e)},setCurve:function(e){var t=[];e=e instanceof Array?e:Array.prototype.slice.call(arguments),e.forEach(function(e){t=t.concat(e.points)}),this.curve=1===e.length?e[0]:e,this.lpts=t},getPanelWidth:function(){return this.defaultWidth},getPanelHeight:function(){return this.defaultHeight},getDefaultQuadratic:function(){return new this.Bezier(70,250,20,110,250,60)},getDefaultCubic:function(){return new this.Bezier(120,160,35,200,220,260,220,40)},getPixelRatio:function(){return window.devicePixelRatio||1},toImage:function(){var e=this.refs.canvas.toDataURL(),t=new Image;return t.src=e,t.devicePixelRatio=this.getPixelRatio(),t},setPanelCount:function(e){this.panelCount=e;var t=this.refs.canvas;t.width=e*this.defaultWidth*this.getPixelRatio(),t.style.width=e*this.defaultWidth+"px"},setOffset:function(e){this.offset=e},setColor:function(e){this.ctx.strokeStyle=e},getColor:function(){return this.ctx.strokeStyle||"black"},setWeight:function(e){this.ctx.lineWidth=e},noColor:function(e){this.ctx.strokeStyle="transparent"},setRandomColor:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.strokeStyle=i.hsl(t,n,r).alpha(e).css()},setRandomFill:function(e){e="undefined"==typeof e?1:e;var t=this.colorSeed%360,n=1,r=.34;this.colorSeed+=87,this.ctx.fillStyle=i.hsl(t,n,r).alpha(e).css()},setFill:function(e){this.ctx.fillStyle=e},getFill:function(){return this.ctx.fillStyle||"transparent"},noFill:function(){this.ctx.fillStyle="transparent"},drawSkeleton:function(e,t,n){t=t||{x:0,y:0};var r=e.points;if(r.length>2){this.ctx.strokeStyle="lightgrey",this.drawLine(r[0],r[1],t);for(var i=r.length-2,a=1;a should not have a "'+t+'" prop')}t.__esModule=!0,t.falsy=r;var i=n(0),a=i.PropTypes.func,o=i.PropTypes.object,s=i.PropTypes.arrayOf,l=i.PropTypes.oneOfType,u=i.PropTypes.element,c=i.PropTypes.shape,h=i.PropTypes.string,d=c({listen:a.isRequired,pushState:a.isRequired,replaceState:a.isRequired,go:a.isRequired});t.history=d;var f=c({pathname:h.isRequired,search:h.isRequired,state:o,action:h.isRequired,key:h});t.location=f;var p=l([a,h]);t.component=p;var m=l([p,o]);t.components=m;var g=l([o,u]);t.route=g;var v=l([g,s(g)]);t.routes=v,t.default={falsy:r,history:d,location:f,component:p,components:m,route:g}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=s.default(e),n="",r="",i=t.indexOf("#");i!==-1&&(r=t.substring(i),t=t.substring(0,i));var a=t.indexOf("?");return a!==-1&&(n=t.substring(a),t=t.substring(0,a)),""===t&&(t="/"),{pathname:t,search:n,hash:r}}t.__esModule=!0;var a=n(8),o=(r(a),n(72)),s=r(o);t.default=i,e.exports=t.default},function(e,t,n){"use strict";function r(e){if(g){var t=e.node,n=e.children;if(n.length)for(var r=0;r1){for(var g=Array(m),v=0;v1){for(var y=Array(w),b=0;b0?void 0:f.default(!1),null!=c&&(a+=encodeURI(c))):"("===l?i+=1:")"===l?i-=1:":"===l.charAt(0)?(u=l.substring(1),c=t[u],null!=c||i>0?void 0:f.default(!1),null!=c&&(a+=encodeURIComponent(c))):a+=l;return a.replace(/\/+/g,"/")}t.__esModule=!0,t.compilePattern=s,t.matchPattern=l,t.getParamNames=u,t.getParams=c,t.formatPattern=h;var d=n(11),f=r(d),p={}},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,m)||(e[m]=f++,h[e[m]]={}),h[e[m]]}var i,a=n(5),o=n(47),s=n(223),l=n(85),u=n(256),c=n(58),h={},d=!1,f=0,p={topAbort:"abort",topAnimationEnd:u("animationend")||"animationend",topAnimationIteration:u("animationiteration")||"animationiteration",topAnimationStart:u("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:u("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},m="_reactListenersID"+String(Math.random()).slice(2),g=a({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(g.handleTopLevel),g.ReactEventListener=e}},setEnabled:function(e){g.ReactEventListener&&g.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!g.ReactEventListener||!g.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,i=r(n),a=o.registrationNameDependencies[e],s=0;s]/;e.exports=i},function(e,t,n){"use strict";var r,i=n(7),a=n(46),o=/^[ \r\n\t\f]/,s=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,l=n(54),u=l(function(e,t){if(e.namespaceURI!==a.svg||"innerHTML"in e)e.innerHTML=t;else{r=r||document.createElement("div"),r.innerHTML=""+t+"";for(var n=r.firstChild;n.firstChild;)e.appendChild(n.firstChild)}});if(i.canUseDOM){var c=document.createElement("div");c.innerHTML=" ",""===c.innerHTML&&(u=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&s.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),c=null}e.exports=u},function(e,t,n){"use strict";e.exports={preface:n(158),introduction:n(150),whatis:n(165),explanation:n(143),control:n(139),extended:n(144),matrix:n(151),decasteljau:n(141),flattening:n(146),splitting:n(162),matrixsplit:n(152),reordering:n(160),derivatives:n(142),pointvectors:n(156),components:n(138),extremities:n(145),boundingbox:n(124),aligning:n(120),tightbounds:n(163),inflections:n(148),canonical:n(132),arclength:n(122),arclengthapprox:n(123),tracing:n(164),intersections:n(149),curveintersection:n(140),abc:n(119),moulding:n(153),pointcurves:n(155),catmullconv:n(133),catmullmoulding:n(134),polybezier:n(157),shapes:n(161),projections:n(159),offsetting:n(154),graduatedoffset:n(147),circles:n(135),circles_cubic:n(136),arcapproximation:n(121),bsplines:n(127),comments:n(137)}},function(e,t,n){"use strict";function r(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function i(e,t){if(r(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),i=Object.keys(t);if(n.length!==i.length)return!1;for(var o=0;o-1?void 0:o("96",e),!u.plugins[n]){t.extractEvents?void 0:o("97",e),u.plugins[n]=t;var r=t.eventTypes;for(var a in r)i(r[a],t,a)?void 0:o("98",a,e)}}}function i(e,t,n){u.eventNameDispatchConfigs.hasOwnProperty(n)?o("99",n):void 0,u.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var i in r)if(r.hasOwnProperty(i)){var s=r[i];a(s,t,n)}return!0}return!!e.registrationName&&(a(e.registrationName,t,n),!0)}function a(e,t,n){u.registrationNameModules[e]?o("100",e):void 0,u.registrationNameModules[e]=t,u.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var o=n(4),s=(n(1),null),l={},u={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){s?o("101"):void 0,s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var i=e[n];l.hasOwnProperty(n)&&l[n]===i||(l[n]?o("102",n):void 0,l[n]=i,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return u.registrationNameModules[t.registrationName]||null;if(void 0!==t.phasedRegistrationNames){var n=t.phasedRegistrationNames;for(var r in n)if(n.hasOwnProperty(r)){var i=u.registrationNameModules[n[r]];if(i)return i}}return null},_resetEventPlugins:function(){s=null;for(var e in l)l.hasOwnProperty(e)&&delete l[e];u.plugins.length=0;var t=u.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=u.registrationNameModules;for(var i in r)r.hasOwnProperty(i)&&delete r[i]}};e.exports=u},function(e,t,n){"use strict";function r(e){return"topMouseUp"===e||"topTouchEnd"===e||"topTouchCancel"===e}function i(e){return"topMouseMove"===e||"topTouchMove"===e}function a(e){return"topMouseDown"===e||"topTouchStart"===e}function o(e,t,n,r){var i=e.type||"unknown-event";e.currentTarget=v.getNodeFromInstance(r),t?m.invokeGuardedCallbackWithCatch(i,n,e):m.invokeGuardedCallback(i,n,e),e.currentTarget=null}function s(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var i=0;i0&&r.length<20?n+" (keys: "+r.join(", ")+")":n}function a(e,t){var n=s.get(e);if(!n){return null}return n}var o=n(4),s=(n(17),n(32)),l=(n(12),n(13)),u=(n(1),n(3),{isMounted:function(e){var t=s.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){u.validateCallback(t,n);var i=a(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=a(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=a(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=a(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t,n){e._pendingElement=t,e._context=n,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?o("122",t,i(e)):void 0}});e.exports=u},function(e,t,n){"use strict";var r=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,i){MSApp.execUnsafeLocalFunction(function(){return e(t,n,r,i)})}:e};e.exports=r},function(e,t,n){"use strict";function r(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}e.exports=r},function(e,t,n){"use strict";function r(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=a[e];return!!r&&!!n[r]}function i(e){return r}var a={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=i},function(e,t,n){"use strict";function r(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}e.exports=r},function(e,t,n){"use strict";/** * Checks if an event is supported in the current execution environment. * * NOTE: This will not work correctly for non-generic events such as `change`, @@ -13,24 +13,24 @@ var r=o.registrationNameModules[n];r&&r.willDeleteListener&&r.willDeleteListener * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT */ -function r(e,t){if(!a.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var o=document.createElement("div");o.setAttribute(n,"return;"),r="function"==typeof o[n]}return!r&&i&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var i,a=n(7);a.canUseDOM&&(i=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";function r(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var i=typeof e,a=typeof t;return"string"===i||"number"===i?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}e.exports=r},function(e,t,n){"use strict";var r=(n(5),n(9)),i=(n(3),r);e.exports=i},function(e,t,n){"use strict";function r(e,t,n){function r(){o=!0,n.apply(this,arguments)}function i(){o||(a=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e){for(var t in e)if(e.hasOwnProperty(t))return!0;return!1}function o(e){return function(){function t(e,t){var n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];return g.default(e,t,n,k.location,k.routes,k.params)}function n(e){var t=e.pathname,n=e.query,r=e.state;return C.createLocation(C.createPath(t,n),r,u.REPLACE)}function r(e,t){S&&S.location===e?o(S,t):b.default(x,e,function(n,r){n?t(n):r?o(s({},r,{location:e}),t):t()})}function o(e,t){var r=f.default(k,e),i=r.leaveRoutes,a=r.enterRoutes;p.runLeaveHooks(i),p.runEnterHooks(a,e,function(r,i){r?t(r):i?t(null,n(i)):w.default(e,function(n,r){n?t(n):t(null,null,k=s({},e,{components:r}))})})}function l(e){return e.__id__||(e.__id__=P++)}function c(e){return e.reduce(function(e,t){return e.push.apply(e,T[l(t)]),e},[])}function d(e,t){b.default(x,e,function(n,r){if(null==r)return void t();S=s({},r,{location:e});for(var i=c(f.default(k,S).leaveRoutes),a=void 0,o=0,l=i.length;null==a&&o4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==o&&8!==o&&9!==o&&12!==o&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===o||12===o)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],u=0,h=s?3:2;u1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};d.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return n<2?e:e+t[n%2]}),new d(t)):new d(t)},d.quadraticFromPoints=function(e,n,r,i){if("undefined"==typeof i&&(i=.5),0===i)return new d(n,n,r);if(1===i)return new d(e,n,n);var a=t(2,e,n,r,i);return new d(e,a.A,r)},d.cubicFromPoints=function(e,n,r,i,a){"undefined"==typeof i&&(i=.5);var o=t(3,e,n,r,i);"undefined"==typeof a&&(a=c.dist(n,o.C));var s=a*(1-i)/i,l=c.dist(e,r),u=(r.x-e.x)/l,h=(r.y-e.y)/l,f=a*u,p=a*h,m=s*u,g=s*h,v={x:n.x-f,y:n.y-p},w={x:n.x+m,y:n.y+g},y=o.A,b={x:y.x+(v.x-y.x)/(1-i),y:y.y+(v.y-y.y)/(1-i)},_={x:y.x+(w.x-y.x)/i,y:y.y+(w.y-y.y)/i},x={x:e.x+(b.x-e.x)/i,y:e.y+(b.y-e.y)/i},E={x:r.x+(_.x-r.x)/(1-i),y:r.y+(_.y-r.y)/(1-i)};return new d(e,x,E,r)};var f=function(){return c};d.getUtils=f,d.prototype={getUtils:f,valueOf:function(){return this.toString()},toString:function(){return c.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,i=["M",n,r,2===this.order?"Q":"C"],a=1,o=t.length;a1;t--,n--){for(var r,i=[],a=0;a0},length:function(){return c.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;t<=e;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),i=[],a=0,o=0;o1;){for(var d=0;d1;){for(r=[],o=0,s=n.length-1;o=0&&e<=1}),i=i.concat(r[n].sort())}.bind(this)),i=i.sort().filter(function(e,t){return i.indexOf(e)===t}),r.values=i,r},bbox:function(){var e=this.extrema(),t={};return this.dims.forEach(function(n){t[n]=c.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return c.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),i={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(i.z=n.z+r.z*t),i}if(this._linear){var a=this.normal(0),o=this.points.map(function(t){var n={x:t.x+e*a.x,y:t.y+e*a.y};return t.z&&r.z&&(n.z=t.z+e*a.z),n});return[new d(o)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=c.angle(this.points[0],this.points[3],this.points[1]),t=c.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&t<0||e<0&&t>0)return!1}var n=this.normal(0),i=this.normal(1),a=n.x*i.x+n.y*i.y;this._3d&&(a+=n.z*i.z);var s=r(o(a));return s1,s.endcap.virtual=a0&&(i=i.concat(t))}),i},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,i){var a=(i-n)/4,o=this.get(n+a),s=this.get(i-a),l=c.dist(e,t),u=c.dist(e,o),h=c.dist(e,s);return r(u-l)+r(h-l)},_iterate:function(e,t){var n,r=0,i=1;do{n=0,i=1;var a,o,s,l,u,h=this.get(r),d=!1,f=!1,p=i,m=1,g=0;do{f=d,l=s,p=(r+i)/2,g++,a=this.get(p),o=this.get(i),s=c.getccenter(h,a,o),s.interval={start:r,end:i};var v=this._error(s,h,r,i);if(d=v<=e,u=f&&!d,u||(m=i),d){if(i>=1){m=1,l=s;break}i+=(i-r)/2}else i=p}while(!u&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(i<1);return t}},e.exports=d}()},function(e,t,n){!function(){"use strict";var t=Math.abs,r=Math.cos,i=Math.sin,a=Math.acos,o=Math.atan2,s=Math.sqrt,l=Math.pow,u=function(e){return e<0?-l(-e,1/3):l(e,1/3)},c=Math.PI,h=2*c,d=c/2,f=1e-6,p={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),s(r)},between:function(e,t,n){return t<=e&&e<=n||p.approximately(e,t)||p.approximately(e,n)},approximately:function(e,n,r){return t(e-n)<=(r||f)},length:function(e){var t,n,r=.5,i=0,a=p.Tvalues.length;for(t=0;ta.x.min&&(t=a.x.min),n>a.y.min&&(n=a.y.min),r0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t,n){var r=t.points.length,i=e.points.length,a=p.makeline(t.points[r-1],e.points[0]),o=p.makeline(e.points[i-1],t.points[0]),s={startcap:a,forward:e,back:t,endcap:o,bbox:p.findbbox([a,e,t,o])},l=p;return s.intersections=function(e){return l.shapeintersections(s,s.bbox,e,e.bbox,n)},s},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,i,a=0x10000000000000000,o=-a;n.indexOf(0)===-1&&(n=[0].concat(n)),n.indexOf(1)===-1&&n.push(1);for(var s=0,l=n.length;so&&(o=i[t]);return{min:a,mid:(a+o)/2,max:o,size:o-a}},align:function(e,t){var n=t.p1.x,a=t.p1.y,s=-o(t.p2.y-a,t.p2.x-n),l=function(e){return{x:(e.x-n)*r(s)-(e.y-a)*i(s),y:(e.x-n)*i(s)+(e.y-a)*r(s)}};return e.map(l)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,i=p.align(e,t),o=function(e){return 0<=e&&e<=1};if(2===n){var l=i[0].y,c=i[1].y,d=i[2].y,f=l-2*c+d;if(0!==f){var m=-s(c*c-l*d),g=-l+c,v=-(m+g)/f,w=-(-m+g)/f;return[v,w].filter(o)}return c!==d&&0===f?[(2*c-d)/2*(c-d)].filter(o):[]}var y,v,b,_,x,E=i[0].y,C=i[1].y,k=i[2].y,S=i[3].y,f=-E+3*C-3*k+S,l=(3*E-6*C+3*k)/f,c=(-3*E+3*C)/f,d=E/f,i=(3*c-l*l)/3,P=i/3,T=(2*l*l*l-9*l*c+27*d)/27,N=T/2,M=N*N+P*P*P;if(M<0){var I=-i/3,L=I*I*I,A=s(L),O=-T/(2*A),B=O<-1?-1:O>1?1:O,z=a(B),D=u(A),R=2*D;return b=R*r(z/3)-l/3,_=R*r((z+h)/3)-l/3,x=R*r((z+2*h)/3)-l/3,[b,_,x].filter(o)}if(0===M)return y=N<0?u(-N):-u(N),b=2*y-l/3,_=-y-l/3,[b,_].filter(o);var j=s(M);return y=u(-N+j),v=u(N+j),[y-v-l/3].filter(o)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],i=t-2*n+r;if(0!==i){var a=-s(n*n-t*r),o=-t+n,l=-(a+o)/i,u=-(-a+o)/i;return[l,u]}return n!==r&&0===i?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},inflections:function(e){if(e.length<4)return[];var t=p.align(e,{p1:e[0],p2:e.slice(-1)[0]}),n=t[2].x*t[1].y,r=t[3].x*t[1].y,i=t[1].x*t[2].y,a=t[3].x*t[2].y,o=18*(-3*n+2*r+3*i-a),s=18*(3*n-r-3*i),l=18*(i-n);if(p.approximately(o,0))return[];var u=s*s-4*o*l,c=Math.sqrt(u),a=2*o;return p.approximately(a,0)?[]:[(c-s)/a,-(s+c)/a].filter(function(e){return 0<=e&&e<=1})},bboxoverlap:function(e,n){var r,i,a,o,s,l=["x","y"],u=l.length;for(r=0;r=s)return!1;return!0},expandbox:function(e,t){t.x.mine.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t,n){var r=e.bbox(),i=t.bbox(),a=1e5,o=n||.5;if(r.x.size+r.y.sizeN||N>M)&&(T+=h),T>M&&(a=M,M=T,T=a)):M1)for(var n=1;n.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var o,s=g.createElement(R,{child:t});if(e){var l=x.get(e);o=l._processChildContext(l._context)}else o=P;var c=d(n);if(c){var h=c._currentElement,p=h.props.child;if(M(p,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return j._updateRootComponent(c,s,o,n,v),m}j.unmountComponentAtNode(n)}var w=i(n),y=w&&!!a(w),b=u(n),_=y&&!c&&!b,E=j._renderNewRootComponent(s,n,_,o)._renderedComponent.getPublicInstance();return r&&r.call(E),E},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){u(e),1===e.nodeType&&e.hasAttribute(L);return!1}return delete z[t._instance.rootID],S.batchedUpdates(l,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,o){if(c(t)?void 0:f("41"),a){var s=i(t);if(E.canReuseMarkup(e,s))return void w.precacheNode(n,s);var l=s.getAttribute(E.CHECKSUM_ATTR_NAME);s.removeAttribute(E.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(E.CHECKSUM_ATTR_NAME,l);var h=e,d=r(h,u),m=" (client) "+h.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);t.nodeType===O?f("42",m):void 0}if(t.nodeType===O?f("43"):void 0,o.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);p.insertTreeBefore(t,e,null)}else N(t,e),w.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(4),i=n(25),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:i.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void r("26",e)}});e.exports=a},function(e,t,n){"use strict";var r={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){r.currentScrollLeft=e.x,r.currentScrollTop=e.y}};e.exports=r},function(e,t,n){"use strict";function r(e,t){return null==t?i("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var i=n(4);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=r},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===i.COMPOSITE;)e=e._renderedComponent;return t===i.HOST?e._renderedComponent:t===i.EMPTY?null:void 0}var i=n(84);e.exports=r},function(e,t,n){"use strict";function r(){return!a&&i.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var i=n(7),a=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function i(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=u.create(a);else if("object"==typeof e){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var d="";d+=r(s._owner),o("130",null==l?l:typeof l,d)}"string"==typeof s.type?n=c.createInternalComponent(s):i(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new h(s)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):o("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var o=n(4),s=n(5),l=n(207),u=n(79),c=n(81),h=(n(254),n(1),n(3),function(e){this.construct(e)});s(h.prototype,l,{_instantiateReactComponent:a}),e.exports=a},function(e,t,n){"use strict";function r(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!i[e.type]:"textarea"===t}var i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=r},function(e,t,n){"use strict";var r=n(7),i=n(38),a=n(39),o=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void a(e,i(t))})),e.exports=o},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?u.escape(e.key):t.toString(36)}function i(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||"object"===d&&e.$$typeof===s)return n(a,e,""===t?c+r(e,0):t),1;var f,p,m=0,g=""===t?c:t+h;if(Array.isArray(e))for(var v=0;v=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}function s(e){return 0===e.button}function l(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function u(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t=0;r--){var i=e[r],a=i.path||"";if(n=a.replace(/\/*$/,"/")+n,0===a.indexOf("/"))break}return"/"+n},g.propTypes={path:p,from:p,to:p.isRequired,query:m,state:m,onEnter:d.falsy,children:d.falsy},t.default=g,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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)}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;th-1)throw new Error("degree must be less than or equal to point count - 1");if(!i)for(i=[],s=0;sm)throw new Error("out of bounds");for(u=f[0];u=r[u]&&e<=r[u+1]);u++);var g=[];for(s=0;su-t-1+c;s--)for(v=(e-r[s])/(r[s+t+1-c]-r[s]),l=0;l0||r0?[["dictionary",r.definitions],i]:i},deserialize:function(e,t,n,r){var i=e,a=!n;if(n=n||{},Array.isArray(e)){var o=e[0],l="dictionary"===o;if(1==e.length&&/^#/.test(o))return n.dictionary[o];o=s.exports[o],i=[],r&&(n.dictionary=i);for(var u=o?1:0,c=e.length;ue.length&&(n=e.length);for(var s=0;s=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e){for(var t in e)if(e.hasOwnProperty(t))return!0;return!1}function o(e){return function(){function t(e,t){var n=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];return g.default(e,t,n,k.location,k.routes,k.params)}function n(e){var t=e.pathname,n=e.query,r=e.state;return C.createLocation(C.createPath(t,n),r,u.REPLACE)}function r(e,t){S&&S.location===e?o(S,t):b.default(x,e,function(n,r){n?t(n):r?o(s({},r,{location:e}),t):t()})}function o(e,t){var r=f.default(k,e),i=r.leaveRoutes,a=r.enterRoutes;p.runLeaveHooks(i),p.runEnterHooks(a,e,function(r,i){r?t(r):i?t(null,n(i)):w.default(e,function(n,r){n?t(n):t(null,null,k=s({},e,{components:r}))})})}function l(e){return e.__id__||(e.__id__=P++)}function c(e){return e.reduce(function(e,t){return e.push.apply(e,T[l(t)]),e},[])}function d(e,t){b.default(x,e,function(n,r){if(null==r)return void t();S=s({},r,{location:e});for(var i=c(f.default(k,S).leaveRoutes),a=void 0,o=0,l=i.length;null==a&&o4){if(1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");a=!0}}else if(6!==o&&8!==o&&9!==o&&12!==o&&1!==arguments.length)throw new Error("Only new Bezier(point[]) is accepted for 4th and higher order curves");var s=!a&&(9===o||12===o)||e&&e[0]&&"undefined"!=typeof e[0].z;this._3d=s;for(var l=[],u=0,h=s?3:2;u1e-4)return void(e._linear=!1);e._linear=!0}(this),this._t1=0,this._t2=1,this.update()};d.fromSVG=function(e){var t=e.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g).map(parseFloat),n=/[cq]/.test(e);return n?(t=t.map(function(e,n){return n<2?e:e+t[n%2]}),new d(t)):new d(t)},d.quadraticFromPoints=function(e,n,r,i){if("undefined"==typeof i&&(i=.5),0===i)return new d(n,n,r);if(1===i)return new d(e,n,n);var a=t(2,e,n,r,i);return new d(e,a.A,r)},d.cubicFromPoints=function(e,n,r,i,a){"undefined"==typeof i&&(i=.5);var o=t(3,e,n,r,i);"undefined"==typeof a&&(a=c.dist(n,o.C));var s=a*(1-i)/i,l=c.dist(e,r),u=(r.x-e.x)/l,h=(r.y-e.y)/l,f=a*u,p=a*h,m=s*u,g=s*h,v={x:n.x-f,y:n.y-p},w={x:n.x+m,y:n.y+g},y=o.A,b={x:y.x+(v.x-y.x)/(1-i),y:y.y+(v.y-y.y)/(1-i)},_={x:y.x+(w.x-y.x)/i,y:y.y+(w.y-y.y)/i},x={x:e.x+(b.x-e.x)/i,y:e.y+(b.y-e.y)/i},E={x:r.x+(_.x-r.x)/(1-i),y:r.y+(_.y-r.y)/(1-i)};return new d(e,x,E,r)};var f=function(){return c};d.getUtils=f,d.prototype={getUtils:f,valueOf:function(){return this.toString()},toString:function(){return c.pointsToString(this.points)},toSVG:function(e){if(this._3d)return!1;for(var t=this.points,n=t[0].x,r=t[0].y,i=["M",n,r,2===this.order?"Q":"C"],a=1,o=t.length;a1;t--,n--){for(var r,i=[],a=0;a0},length:function(){return c.length(this.derivative.bind(this))},_lut:[],getLUT:function(e){if(e=e||100,this._lut.length===e)return this._lut;this._lut=[];for(var t=0;t<=e;t++)this._lut.push(this.compute(t/e));return this._lut},on:function(e,t){t=t||5;for(var n,r=this.getLUT(),i=[],a=0,o=0;o1;){for(var d=0;d1;){for(r=[],o=0,s=n.length-1;o=0&&e<=1}),i=i.concat(r[n].sort())}.bind(this)),i=i.sort().filter(function(e,t){return i.indexOf(e)===t}),r.values=i,r},bbox:function(){var e=this.extrema(),t={};return this.dims.forEach(function(n){t[n]=c.getminmax(this,n,e[n])}.bind(this)),t},overlaps:function(e){var t=this.bbox(),n=e.bbox();return c.bboxoverlap(t,n)},offset:function(e,t){if("undefined"!=typeof t){var n=this.get(e),r=this.normal(e),i={c:n,n:r,x:n.x+r.x*t,y:n.y+r.y*t};return this._3d&&(i.z=n.z+r.z*t),i}if(this._linear){var a=this.normal(0),o=this.points.map(function(t){var n={x:t.x+e*a.x,y:t.y+e*a.y};return t.z&&r.z&&(n.z=t.z+e*a.z),n});return[new d(o)]}var s=this.reduce();return s.map(function(t){return t.scale(e)})},simple:function(){if(3===this.order){var e=c.angle(this.points[0],this.points[3],this.points[1]),t=c.angle(this.points[0],this.points[3],this.points[2]);if(e>0&&t<0||e<0&&t>0)return!1}var n=this.normal(0),i=this.normal(1),a=n.x*i.x+n.y*i.y;this._3d&&(a+=n.z*i.z);var s=r(o(a));return s1,s.endcap.virtual=a0&&(i=i.concat(t))}),i},arcs:function(e){e=e||.5;var t=[];return this._iterate(e,t)},_error:function(e,t,n,i){var a=(i-n)/4,o=this.get(n+a),s=this.get(i-a),l=c.dist(e,t),u=c.dist(e,o),h=c.dist(e,s);return r(u-l)+r(h-l)},_iterate:function(e,t){var n,r=0,i=1;do{n=0,i=1;var a,o,s,l,u,h=this.get(r),d=!1,f=!1,p=i,m=1,g=0;do{f=d,l=s,p=(r+i)/2,g++,a=this.get(p),o=this.get(i),s=c.getccenter(h,a,o),s.interval={start:r,end:i};var v=this._error(s,h,r,i);if(d=v<=e,u=f&&!d,u||(m=i),d){if(i>=1){m=1,l=s;break}i+=(i-r)/2}else i=p}while(!u&&n++<100);if(n>=100){console.error("arc abstraction somehow failed...");break}l=l?l:s,t.push(l),r=m}while(i<1);return t}},e.exports=d}()},function(e,t,n){!function(){"use strict";var t=Math.abs,r=Math.cos,i=Math.sin,a=Math.acos,o=Math.atan2,s=Math.sqrt,l=Math.pow,u=function(e){return e<0?-l(-e,1/3):l(e,1/3)},c=Math.PI,h=2*c,d=c/2,f=1e-6,p={Tvalues:[-.06405689286260563,.06405689286260563,-.1911188674736163,.1911188674736163,-.3150426796961634,.3150426796961634,-.4337935076260451,.4337935076260451,-.5454214713888396,.5454214713888396,-.6480936519369755,.6480936519369755,-.7401241915785544,.7401241915785544,-.820001985973903,.820001985973903,-.8864155270044011,.8864155270044011,-.9382745520027328,.9382745520027328,-.9747285559713095,.9747285559713095,-.9951872199970213,.9951872199970213],Cvalues:[.12793819534675216,.12793819534675216,.1258374563468283,.1258374563468283,.12167047292780339,.12167047292780339,.1155056680537256,.1155056680537256,.10744427011596563,.10744427011596563,.09761865210411388,.09761865210411388,.08619016153195327,.08619016153195327,.0733464814110803,.0733464814110803,.05929858491543678,.05929858491543678,.04427743881741981,.04427743881741981,.028531388628933663,.028531388628933663,.0123412297999872,.0123412297999872],arcfn:function(e,t){var n=t(e),r=n.x*n.x+n.y*n.y;return"undefined"!=typeof n.z&&(r+=n.z*n.z),s(r)},between:function(e,t,n){return t<=e&&e<=n||p.approximately(e,t)||p.approximately(e,n)},approximately:function(e,n,r){return t(e-n)<=(r||f)},length:function(e){var t,n,r=.5,i=0,a=p.Tvalues.length;for(t=0;ta.x.min&&(t=a.x.min),n>a.y.min&&(n=a.y.min),r0&&(o.c1=t,o.c2=r,o.s1=e,o.s2=n,a.push(o))}})}),a},makeshape:function(e,t,n){var r=t.points.length,i=e.points.length,a=p.makeline(t.points[r-1],e.points[0]),o=p.makeline(e.points[i-1],t.points[0]),s={startcap:a,forward:e,back:t,endcap:o,bbox:p.findbbox([a,e,t,o])},l=p;return s.intersections=function(e){return l.shapeintersections(s,s.bbox,e,e.bbox,n)},s},getminmax:function(e,t,n){if(!n)return{min:0,max:0};var r,i,a=0x10000000000000000,o=-a;n.indexOf(0)===-1&&(n=[0].concat(n)),n.indexOf(1)===-1&&n.push(1);for(var s=0,l=n.length;so&&(o=i[t]);return{min:a,mid:(a+o)/2,max:o,size:o-a}},align:function(e,t){var n=t.p1.x,a=t.p1.y,s=-o(t.p2.y-a,t.p2.x-n),l=function(e){return{x:(e.x-n)*r(s)-(e.y-a)*i(s),y:(e.x-n)*i(s)+(e.y-a)*r(s)}};return e.map(l)},roots:function(e,t){t=t||{p1:{x:0,y:0},p2:{x:1,y:0}};var n=e.length-1,i=p.align(e,t),o=function(e){return 0<=e&&e<=1};if(2===n){var l=i[0].y,c=i[1].y,d=i[2].y,f=l-2*c+d;if(0!==f){var m=-s(c*c-l*d),g=-l+c,v=-(m+g)/f,w=-(-m+g)/f;return[v,w].filter(o)}return c!==d&&0===f?[(2*c-d)/2*(c-d)].filter(o):[]}var y,v,b,_,x,E=i[0].y,C=i[1].y,k=i[2].y,S=i[3].y,f=-E+3*C-3*k+S,l=(3*E-6*C+3*k)/f,c=(-3*E+3*C)/f,d=E/f,i=(3*c-l*l)/3,P=i/3,T=(2*l*l*l-9*l*c+27*d)/27,N=T/2,M=N*N+P*P*P;if(M<0){var I=-i/3,L=I*I*I,A=s(L),O=-T/(2*A),B=O<-1?-1:O>1?1:O,z=a(B),D=u(A),R=2*D;return b=R*r(z/3)-l/3,_=R*r((z+h)/3)-l/3,x=R*r((z+2*h)/3)-l/3,[b,_,x].filter(o)}if(0===M)return y=N<0?u(-N):-u(N),b=2*y-l/3,_=-y-l/3,[b,_].filter(o);var j=s(M);return y=u(-N+j),v=u(N+j),[y-v-l/3].filter(o)},droots:function(e){if(3===e.length){var t=e[0],n=e[1],r=e[2],i=t-2*n+r;if(0!==i){var a=-s(n*n-t*r),o=-t+n,l=-(a+o)/i,u=-(-a+o)/i;return[l,u]}return n!==r&&0===i?[(2*n-r)/(2*(n-r))]:[]}if(2===e.length){var t=e[0],n=e[1];return t!==n?[t/(t-n)]:[]}},inflections:function(e){if(e.length<4)return[];var t=p.align(e,{p1:e[0],p2:e.slice(-1)[0]}),n=t[2].x*t[1].y,r=t[3].x*t[1].y,i=t[1].x*t[2].y,a=t[3].x*t[2].y,o=18*(-3*n+2*r+3*i-a),s=18*(3*n-r-3*i),l=18*(i-n);if(p.approximately(o,0))return[];var u=s*s-4*o*l,c=Math.sqrt(u),a=2*o;return p.approximately(a,0)?[]:[(c-s)/a,-(s+c)/a].filter(function(e){return 0<=e&&e<=1})},bboxoverlap:function(e,n){var r,i,a,o,s,l=["x","y"],u=l.length;for(r=0;r=s)return!1;return!0},expandbox:function(e,t){t.x.mine.x.max&&(e.x.max=t.x.max),t.y.max>e.y.max&&(e.y.max=t.y.max),t.z&&t.z.max>e.z.max&&(e.z.max=t.z.max),e.x.mid=(e.x.min+e.x.max)/2,e.y.mid=(e.y.min+e.y.max)/2,e.z&&(e.z.mid=(e.z.min+e.z.max)/2),e.x.size=e.x.max-e.x.min,e.y.size=e.y.max-e.y.min,e.z&&(e.z.size=e.z.max-e.z.min)},pairiteration:function(e,t,n){var r=e.bbox(),i=t.bbox(),a=1e5,o=n||.5;if(r.x.size+r.y.sizeN||N>M)&&(T+=h),T>M&&(a=M,M=T,T=a)):M1)for(var n=1;n.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var o,s=g.createElement(R,{child:t});if(e){var l=x.get(e);o=l._processChildContext(l._context)}else o=P;var c=d(n);if(c){var h=c._currentElement,p=h.props.child;if(M(p,t)){var m=c._renderedComponent.getPublicInstance(),v=r&&function(){r.call(m)};return j._updateRootComponent(c,s,o,n,v),m}j.unmountComponentAtNode(n)}var w=i(n),y=w&&!!a(w),b=u(n),_=y&&!c&&!b,E=j._renderNewRootComponent(s,n,_,o)._renderedComponent.getPublicInstance();return r&&r.call(E),E},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){u(e),1===e.nodeType&&e.hasAttribute(L);return!1}return delete z[t._instance.rootID],S.batchedUpdates(l,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,a,o){if(c(t)?void 0:f("41"),a){var s=i(t);if(E.canReuseMarkup(e,s))return void w.precacheNode(n,s);var l=s.getAttribute(E.CHECKSUM_ATTR_NAME);s.removeAttribute(E.CHECKSUM_ATTR_NAME);var u=s.outerHTML;s.setAttribute(E.CHECKSUM_ATTR_NAME,l);var h=e,d=r(h,u),m=" (client) "+h.substring(d-20,d+20)+"\n (server) "+u.substring(d-20,d+20);t.nodeType===O?f("42",m):void 0}if(t.nodeType===O?f("43"):void 0,o.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);p.insertTreeBefore(t,e,null)}else N(t,e),w.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(4),i=n(25),a=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:i.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void r("26",e)}});e.exports=a},function(e,t,n){"use strict";var r={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){r.currentScrollLeft=e.x,r.currentScrollTop=e.y}};e.exports=r},function(e,t,n){"use strict";function r(e,t){return null==t?i("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var i=n(4);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=r},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===i.COMPOSITE;)e=e._renderedComponent;return t===i.HOST?e._renderedComponent:t===i.EMPTY?null:void 0}var i=n(84);e.exports=r},function(e,t,n){"use strict";function r(){return!a&&i.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var i=n(7),a=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function i(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,t){var n;if(null===e||e===!1)n=u.create(a);else if("object"==typeof e){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var d="";d+=r(s._owner),o("130",null==l?l:typeof l,d)}"string"==typeof s.type?n=c.createInternalComponent(s):i(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new h(s)}else"string"==typeof e||"number"==typeof e?n=c.createInstanceForText(e):o("131",typeof e);return n._mountIndex=0,n._mountImage=null,n}var o=n(4),s=n(5),l=n(207),u=n(79),c=n(81),h=(n(254),n(1),n(3),function(e){this.construct(e)});s(h.prototype,l,{_instantiateReactComponent:a}),e.exports=a},function(e,t,n){"use strict";function r(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!i[e.type]:"textarea"===t}var i={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=r},function(e,t,n){"use strict";var r=n(7),i=n(38),a=n(39),o=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(o=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void a(e,i(t))})),e.exports=o},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?u.escape(e.key):t.toString(36)}function i(e,t,n,a){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||"object"===d&&e.$$typeof===s)return n(a,e,""===t?c+r(e,0):t),1;var f,p,m=0,g=""===t?c:t+h;if(Array.isArray(e))for(var v=0;v=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}function s(e){return 0===e.button}function l(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}function u(e){for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}t.__esModule=!0;var c=Object.assign||function(e){for(var t=1;t=0;r--){var i=e[r],a=i.path||"";if(n=a.replace(/\/*$/,"/")+n,0===a.indexOf("/"))break}return"/"+n},g.propTypes={path:p,from:p,to:p.isRequired,query:m,state:m,onEnter:d.falsy,children:d.falsy},t.default=g,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}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)}t.__esModule=!0;var o=Object.assign||function(e){for(var t=1;th-1)throw new Error("degree must be less than or equal to point count - 1");if(!i)for(i=[],s=0;sm)throw new Error("out of bounds");for(u=f[0];u=r[u]&&e<=r[u+1]);u++);var g=[];for(s=0;su-t-1+c;s--)for(v=(e-r[s])/(r[s+t+1-c]-r[s]),l=0;l0||r0?[["dictionary",r.definitions],i]:i},deserialize:function(e,t,n,r){var i=e,a=!n;if(n=n||{},Array.isArray(e)){var o=e[0],l="dictionary"===o;if(1==e.length&&/^#/.test(o))return n.dictionary[o];o=s.exports[o],i=[],r&&(n.dictionary=i);for(var u=o?1:0,c=e.length;ue.length&&(n=e.length);for(var s=0;s0){var i=this._eventTypes,a=i&&i[r],o=a&&a[n];o&&o.call(this,r)}},statics:{inject:function e(t){var n=t._events;if(n){var r={};s.each(n,function(e,n){var i="string"==typeof e,a=i?e:n,o=s.capitalize(a),l=a.substring(2).toLowerCase();r[l]=i?{}:e,a="_"+a,t["get"+o]=function(){return this[a]},t["set"+o]=function(e){var t=this[a];t&&this.off(l,t),e&&this.on(l,e),this[a]=e}}),t._eventTypes=r}return e.base.apply(this,arguments)}}},u=s.extend({_class:"PaperScope",initialize:function e(){a=this,this.settings=new s({applyMatrix:!0,handleSize:4,hitTolerance:0}),this.project=null,this.projects=[],this.tools=[],this.palettes=[],this._id=e._id++,e._scopes[this._id]=this;var t=e.prototype;if(!this.support){var n=ne.getContext(1,1);t.support={nativeDash:"setLineDash"in n||"mozDash"in n,nativeBlendModes:re.nativeModes},ne.release(n)}if(!this.browser){var r=navigator.userAgent.toLowerCase(),i=(/(win)/.exec(r)||/(mac)/.exec(r)||/(linux)/.exec(r)||[])[0],o=t.browser={platform:i};i&&(o[i]=!0),r.replace(/(opera|chrome|safari|webkit|firefox|msie|trident|atom)\/?\s*([.\d]+)(?:.*version\/([.\d]+))?(?:.*rv\:([.\d]+))?/g,function(e,t,n,r,i){if(!o.chrome){var a="opera"===t?r:n;"trident"===t&&(a=i,t="msie"),o.version=a,o.versionNumber=parseFloat(a),o.name=t,o[t]=!0}}),o.chrome&&delete o.webkit,o.atom&&delete o.chrome}},version:"0.9.25",getView:function(){return this.project&&this.project.getView()},getPaper:function(){return this},execute:function(e,t,n){a.PaperScript.execute(e,this,t,n),K.updateFocus()},install:function(e){var t=this;s.each(["project","view","tool"],function(n){s.define(e,n,{configurable:!0,get:function(){return t[n]}})});for(var n in this)!/^_/.test(n)&&this[n]&&(e[n]=this[n])},setup:function(e){return a=this,this.project=new x(e),this},activate:function(){a=this},clear:function(){for(var e=this.projects.length-1;e>=0;e--)this.projects[e].remove();for(var e=this.tools.length-1;e>=0;e--)this.tools[e].remove();for(var e=this.palettes.length-1;e>=0;e--)this.palettes[e].remove()},remove:function(){this.clear(),delete u._scopes[this._id]},statics:new function(){function e(e){return e+="Attribute",function(t,n){return t[e](n)||t[e]("data-paper-"+n)}}return{_scopes:{},_id:0,get:function(e){return this._scopes[e]||null},getAttribute:e("get"),hasAttribute:e("has")}}}),c=s.extend(l,{initialize:function(e){this._scope=a,this._index=this._scope[this._list].push(this)-1,!e&&this._scope[this._reference]||this.activate()},activate:function(){if(!this._scope)return!1;var e=this._scope[this._reference];return e&&e!==this&&e.emit("deactivate"),this._scope[this._reference]=this,this.emit("activate",e),!0},isActive:function(){return this._scope[this._reference]===this},remove:function(){return null!=this._index&&(s.splice(this._scope[this._list],null,this._index,1),this._scope[this._reference]==this&&(this._scope[this._reference]=null),this._scope=null,!0)}}),h=s.extend({initialize:function(e){this.precision=e||5,this.multiplier=Math.pow(10,this.precision)},number:function(e){return Math.round(e*this.multiplier)/this.multiplier},pair:function(e,t,n){return this.number(e)+(n||",")+this.number(t)},point:function(e,t){return this.number(e.x)+(t||",")+this.number(e.y)},size:function(e,t){return this.number(e.width)+(t||",")+this.number(e.height)},rectangle:function(e,t){return this.point(e,t)+(t||",")+this.size(e,t)}});h.instance=new h;var d=new function(){function e(e,t,n){return en?n:e}var t=[[.5773502691896257],[0,.7745966692414834],[.33998104358485626,.8611363115940526],[0,.5384693101056831,.906179845938664],[.2386191860831969,.6612093864662645,.932469514203152],[0,.4058451513773972,.7415311855993945,.9491079123427585],[.1834346424956498,.525532409916329,.7966664774136267,.9602898564975363],[0,.3242534234038089,.6133714327005904,.8360311073266358,.9681602395076261],[.14887433898163122,.4333953941292472,.6794095682990244,.8650633666889845,.9739065285171717],[0,.26954315595234496,.5190961292068118,.7301520055740494,.8870625997680953,.978228658146057],[.1252334085114689,.3678314989981802,.5873179542866175,.7699026741943047,.9041172563704749,.9815606342467192],[0,.2304583159551348,.44849275103644687,.6423493394403402,.8015780907333099,.9175983992229779,.9841830547185881],[.10805494870734367,.31911236892788974,.5152486363581541,.6872929048116855,.827201315069765,.9284348836635735,.9862838086968123],[0,.20119409399743451,.3941513470775634,.5709721726085388,.7244177313601701,.8482065834104272,.937273392400706,.9879925180204854],[.09501250983763744,.2816035507792589,.45801677765722737,.6178762444026438,.755404408355003,.8656312023878318,.9445750230732326,.9894009349916499]],n=[[1],[.8888888888888888,.5555555555555556],[.6521451548625461,.34785484513745385],[.5688888888888889,.47862867049936647,.23692688505618908],[.46791393457269104,.3607615730481386,.17132449237917036],[.4179591836734694,.3818300505051189,.27970539148927664,.1294849661688697],[.362683783378362,.31370664587788727,.22238103445337448,.10122853629037626],[.3302393550012598,.31234707704000286,.26061069640293544,.1806481606948574,.08127438836157441],[.29552422471475287,.26926671930999635,.21908636251598204,.1494513491505806,.06667134430868814],[.2729250867779006,.26280454451024665,.23319376459199048,.18629021092773426,.1255803694649046,.05566856711617366],[.24914704581340277,.2334925365383548,.20316742672306592,.16007832854334622,.10693932599531843,.04717533638651183],[.2325515532308739,.22628318026289723,.2078160475368885,.17814598076194574,.13887351021978725,.09212149983772845,.04048400476531588],[.2152638534631578,.2051984637212956,.18553839747793782,.15720316715819355,.12151857068790319,.08015808715976021,.03511946033175186],[.2025782419255613,.19843148532711158,.1861610000155622,.16626920581699392,.13957067792615432,.10715922046717194,.07036604748810812,.03075324199611727],[.1894506104550685,.18260341504492358,.16915651939500254,.14959598881657674,.12462897125553388,.09515851168249279,.062253523938647894,.027152459411754096]],r=Math.abs,i=Math.sqrt,a=Math.pow,o=1e-12,s=1.12e-16;return{TOLERANCE:1e-6,EPSILON:o,MACHINE_EPSILON:s,CURVETIME_EPSILON:4e-7,GEOMETRIC_EPSILON:2e-7,WINDING_EPSILON:2e-7,TRIGONOMETRIC_EPSILON:1e-7,CLIPPING_EPSILON:1e-7,KAPPA:4*(i(2)-1)/3,isZero:function(e){return e>=-o&&e<=o},integrate:function(e,r,i,a){for(var o=t[a-2],s=n[a-2],l=.5*(i-r),u=l+r,c=0,h=a+1>>1,d=1&a?s[c++]*e(u):0;c0?(a=n,n=h<=i?.5*(i+a):h):(i=n,n=h>=a?.5*(i+a):h)}return n},solveQuadratic:function(t,n,l,u,c,h){var d,f,p=0,m=c-o,g=h+o,v=1/0,w=n;if(n/=-2,f=n*n-t*l,0!==f&&r(f)=-s){var _=f<0?0:i(f),x=n+(n<0?-_:_);0===x?(d=l/t,v=-d):(d=x/t,v=l/x)}return isFinite(d)&&(null==c||d>m&&dm&&v0?1.3247179572*Math.max(x,i(_)):x,w=p-E*x,w!==p){do if(p=w,C=t*p,m=C+n,g=m*p+l,b=(C+m)*p+g,y=g*p+u,w=0===b?p:p-y/b/k,w===p){p=w;break}while(E*w>E*p);r(t)*p*p>r(u/p)&&(g=-u/p,m=(g-l)/p)}}var v=d.solveQuadratic(t,m,g,c,h,f);return isFinite(p)&&(0===v||p!==c[v-1])&&(null==h||p>h-o&&p1?e[1]:e[0]):null!=e.x?(this.x=e.x,this.y=e.y):null!=e.width?(this.x=e.width,this.y=e.height):null!=e.angle?(this.x=e.length,this.y=0,this.setAngle(e.angle)):(this.x=this.y=0,this.__read&&(this.__read=0)),this.__read&&(this.__read=1))},set:function(e,t){return this.x=e,this.y=t,this},equals:function(e){return this===e||e&&(this.x===e.x&&this.y===e.y||Array.isArray(e)&&this.x===e[0]&&this.y===e[1])||!1},clone:function(){return new p(this.x,this.y)},toString:function(){var e=h.instance;return"{ x: "+e.number(this.x)+", y: "+e.number(this.y)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.x),t.number(this.y)]},getLength:function(){return Math.sqrt(this.x*this.x+this.y*this.y)},setLength:function(e){if(this.isZero()){var t=this._angle||0;this.set(Math.cos(t)*e,Math.sin(t)*e)}else{var n=e/this.getLength();d.isZero(n)&&this.getAngle(),this.set(this.x*n,this.y*n)}},getAngle:function(){return 180*this.getAngleInRadians.apply(this,arguments)/Math.PI},setAngle:function(e){this.setAngleInRadians.call(this,e*Math.PI/180)},getAngleInDegrees:"#getAngle",setAngleInDegrees:"#setAngle",getAngleInRadians:function(){if(arguments.length){var e=p.read(arguments),t=this.getLength()*e.getLength();if(d.isZero(t))return NaN;var n=this.dot(e)/t;return Math.acos(n<-1?-1:n>1?1:n)}return this.isZero()?this._angle||0:this._angle=Math.atan2(this.y,this.x)},setAngleInRadians:function(e){if(this._angle=e,!this.isZero()){var t=this.getLength();this.set(Math.cos(e)*t,Math.sin(e)*t)}},getQuadrant:function(){return this.x>=0?this.y>=0?1:4:this.y>=0?2:3}},{beans:!1,getDirectedAngle:function(){var e=p.read(arguments);return 180*Math.atan2(this.cross(e),this.dot(e))/Math.PI},getDistance:function(){var e=p.read(arguments),t=e.x-this.x,n=e.y-this.y,r=t*t+n*n,i=s.read(arguments);return i?r:Math.sqrt(r)},normalize:function(e){e===o&&(e=1);var t=this.getLength(),n=0!==t?e/t:0,r=new p(this.x*n,this.y*n);return n>=0&&(r._angle=this._angle),r},rotate:function(e,t){if(0===e)return this.clone();e=e*Math.PI/180;var n=t?this.subtract(t):this,r=Math.sin(e),i=Math.cos(e);return n=new p(n.x*i-n.y*r,n.x*r+n.y*i),t?n.add(t):n},transform:function(e){return e?e._transformPoint(this):this},add:function(){var e=p.read(arguments);return new p(this.x+e.x,this.y+e.y)},subtract:function(){var e=p.read(arguments);return new p(this.x-e.x,this.y-e.y)},multiply:function(){var e=p.read(arguments);return new p(this.x*e.x,this.y*e.y)},divide:function(){var e=p.read(arguments);return new p(this.x/e.x,this.y/e.y)},modulo:function(){var e=p.read(arguments);return new p(this.x%e.x,this.y%e.y)},negate:function(){return new p(-this.x,-this.y)},isInside:function(){return w.read(arguments).contains(this)},isClose:function(){var e=p.read(arguments),t=s.read(arguments);return this.getDistance(e)1?e[1]:e[0]):null!=e.width?(this.width=e.width,this.height=e.height):null!=e.x?(this.width=e.x,this.height=e.y):(this.width=this.height=0,this.__read&&(this.__read=0)),this.__read&&(this.__read=1))},set:function(e,t){return this.width=e,this.height=t,this},equals:function(e){return e===this||e&&(this.width===e.width&&this.height===e.height||Array.isArray(e)&&this.width===e[0]&&this.height===e[1])||!1},clone:function(){return new g(this.width,this.height)},toString:function(){var e=h.instance;return"{ width: "+e.number(this.width)+", height: "+e.number(this.height)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.width),t.number(this.height)]},add:function(){var e=g.read(arguments);return new g(this.width+e.width,this.height+e.height)},subtract:function(){var e=g.read(arguments);return new g(this.width-e.width,this.height-e.height)},multiply:function(){var e=g.read(arguments);return new g(this.width*e.width,this.height*e.height)},divide:function(){var e=g.read(arguments);return new g(this.width/e.width,this.height/e.height)},modulo:function(){var e=g.read(arguments);return new g(this.width%e.width,this.height%e.height)},negate:function(){return new g(-this.width,-this.height)},isZero:function(){return d.isZero(this.width)&&d.isZero(this.height)},isNaN:function(){return isNaN(this.width)||isNaN(this.height)},statics:{min:function(e,t){return new g(Math.min(e.width,t.width),Math.min(e.height,t.height))},max:function(e,t){return new g(Math.max(e.width,t.width),Math.max(e.height,t.height))},random:function(){return new g(Math.random(),Math.random())}}},s.each(["round","ceil","floor","abs"],function(e){var t=Math[e];this[e]=function(){return new g(t(this.width),t(this.height))}},{})),v=g.extend({initialize:function(e,t,n,r){this._width=e,this._height=t,this._owner=n,this._setter=r},set:function(e,t,n){return this._width=e,this._height=t,n||this._owner[this._setter](this),this},getWidth:function(){return this._width},setWidth:function(e){this._width=e,this._owner[this._setter](this)},getHeight:function(){return this._height},setHeight:function(e){this._height=e,this._owner[this._setter](this)}}),w=s.extend({_class:"Rectangle",_readIndex:!0,beans:!0,initialize:function(e,t,n,r){var i=typeof e,a=0;if("number"===i?(this.x=e,this.y=t,this.width=n,this.height=r,a=4):"undefined"===i||null===e?(this.x=this.y=this.width=this.height=0,a=null===e?1:0):1===arguments.length&&(Array.isArray(e)?(this.x=e[0],this.y=e[1],this.width=e[2],this.height=e[3],a=1):e.x!==o||e.width!==o?(this.x=e.x||0,this.y=e.y||0,this.width=e.width||0,this.height=e.height||0,a=1):e.from===o&&e.to===o&&(this.x=this.y=this.width=this.height=0,this._set(e),a=1)),!a){var l=p.readNamed(arguments,"from"),u=s.peek(arguments);if(this.x=l.x,this.y=l.y,u&&u.x!==o||s.hasNamed(arguments,"to")){var c=p.readNamed(arguments,"to");this.width=c.x-l.x,this.height=c.y-l.y,this.width<0&&(this.x=c.x,this.width=-this.width),this.height<0&&(this.y=c.y,this.height=-this.height)}else{var h=g.read(arguments);this.width=h.width,this.height=h.height}a=arguments.__index}this.__read&&(this.__read=a)},set:function(e,t,n,r){return this.x=e,this.y=t,this.width=n,this.height=r,this},clone:function(){return new w(this.x,this.y,this.width,this.height)},equals:function(e){var t=s.isPlainValue(e)?w.read(arguments):e;return t===this||t&&this.x===t.x&&this.y===t.y&&this.width===t.width&&this.height===t.height||!1},toString:function(){var e=h.instance;return"{ x: "+e.number(this.x)+", y: "+e.number(this.y)+", width: "+e.number(this.width)+", height: "+e.number(this.height)+" }"},_serialize:function(e){var t=e.formatter;return[t.number(this.x),t.number(this.y),t.number(this.width),t.number(this.height)]},getPoint:function(e){var t=e?p:m;return new t(this.x,this.y,this,"setPoint")},setPoint:function(){var e=p.read(arguments);this.x=e.x,this.y=e.y},getSize:function(e){var t=e?g:v;return new t(this.width,this.height,this,"setSize")},setSize:function(){var e=g.read(arguments);this._fixX&&(this.x+=(this.width-e.width)*this._fixX),this._fixY&&(this.y+=(this.height-e.height)*this._fixY),this.width=e.width,this.height=e.height,this._fixW=1,this._fixH=1},getLeft:function(){return this.x},setLeft:function(e){this._fixW||(this.width-=e-this.x),this.x=e,this._fixX=0},getTop:function(){return this.y},setTop:function(e){this._fixH||(this.height-=e-this.y),this.y=e,this._fixY=0},getRight:function(){return this.x+this.width},setRight:function(e){this._fixX!==o&&1!==this._fixX&&(this._fixW=0),this._fixW?this.x=e-this.width:this.width=e-this.x,this._fixX=1},getBottom:function(){return this.y+this.height},setBottom:function(e){this._fixY!==o&&1!==this._fixY&&(this._fixH=0),this._fixH?this.y=e-this.height:this.height=e-this.y,this._fixY=1},getCenterX:function(){return this.x+.5*this.width},setCenterX:function(e){this.x=e-.5*this.width,this._fixX=.5},getCenterY:function(){return this.y+.5*this.height},setCenterY:function(e){this.y=e-.5*this.height,this._fixY=.5},getCenter:function(e){var t=e?p:m;return new t(this.getCenterX(),this.getCenterY(),this,"setCenter")},setCenter:function(){var e=p.read(arguments);return this.setCenterX(e.x),this.setCenterY(e.y),this},getArea:function(){return this.width*this.height},isEmpty:function(){return 0===this.width||0===this.height},contains:function(e){return e&&e.width!==o||4==(Array.isArray(e)?e:arguments).length?this._containsRectangle(w.read(arguments)):this._containsPoint(p.read(arguments))},_containsPoint:function(e){var t=e.x,n=e.y;return t>=this.x&&n>=this.y&&t<=this.x+this.width&&n<=this.y+this.height},_containsRectangle:function(e){var t=e.x,n=e.y;return t>=this.x&&n>=this.y&&t+e.width<=this.x+this.width&&n+e.height<=this.y+this.height},intersects:function(){var e=w.read(arguments);return e.x+e.width>this.x&&e.y+e.height>this.y&&e.x=this.x&&e.y+e.height>=this.y&&e.x<=this.x+this.width&&e.y<=this.y+this.height},intersect:function(){var e=w.read(arguments),t=Math.max(this.x,e.x),n=Math.max(this.y,e.y),r=Math.min(this.x+this.width,e.x+e.width),i=Math.min(this.y+this.height,e.y+e.height);return new w(t,n,r-t,i-n)},unite:function(){var e=w.read(arguments),t=Math.min(this.x,e.x),n=Math.min(this.y,e.y),r=Math.max(this.x+this.width,e.x+e.width),i=Math.max(this.y+this.height,e.y+e.height);return new w(t,n,r-t,i-n)},include:function(){var e=p.read(arguments),t=Math.min(this.x,e.x),n=Math.min(this.y,e.y),r=Math.max(this.x+this.width,e.x),i=Math.max(this.y+this.height,e.y);return new w(t,n,r-t,i-n)},expand:function(){var e=g.read(arguments),t=e.width,n=e.height;return new w(this.x-t/2,this.y-n/2,this.width+t,this.height+n)},scale:function(e,t){return this.expand(this.width*e-this.width,this.height*(t===o?e:t)-this.height)}},s.each([["Top","Left"],["Top","Right"],["Bottom","Left"],["Bottom","Right"],["Left","Center"],["Top","Center"],["Right","Center"],["Bottom","Center"]],function(e,t){var n=e.join(""),r=/^[RL]/.test(n);t>=4&&(e[1]+=r?"Y":"X");var i=e[r?0:1],a=e[r?1:0],o="get"+i,s="get"+a,l="set"+i,u="set"+a,c="get"+n,h="set"+n;this[c]=function(e){var t=e?p:m;return new t(this[o](),this[s](),this,h)},this[h]=function(){var e=p.read(arguments);this[l](e.x),this[u](e.y)}},{beans:!0})),y=w.extend({initialize:function(e,t,n,r,i,a){this.set(e,t,n,r,!0),this._owner=i,this._setter=a},set:function(e,t,n,r,i){return this._x=e,this._y=t,this._width=n,this._height=r,i||this._owner[this._setter](this),this}},new function(){var e=w.prototype;return s.each(["x","y","width","height"],function(e){var t=s.capitalize(e),n="_"+e;this["get"+t]=function(){return this[n]},this["set"+t]=function(e){this[n]=e,this._dontNotify||this._owner[this._setter](this)}},s.each(["Point","Size","Center","Left","Top","Right","Bottom","CenterX","CenterY","TopLeft","TopRight","BottomLeft","BottomRight","LeftCenter","TopCenter","RightCenter","BottomCenter"],function(t){var n="set"+t;this[n]=function(){this._dontNotify=!0,e[n].apply(this,arguments),this._dontNotify=!1,this._owner[this._setter](this)}},{isSelected:function(){return this._owner._boundsSelected},setSelected:function(e){var t=this._owner;t.setSelected&&(t._boundsSelected=e,t.setSelected(e||t._selectedSegmentState>0))}}))}),b=s.extend({_class:"Matrix",initialize:function e(t){var n=arguments.length,r=!0;if(6===n?this.set.apply(this,arguments):1===n?t instanceof e?this.set(t._a,t._c,t._b,t._d,t._tx,t._ty):Array.isArray(t)?this.set.apply(this,t):r=!1:0===n?this.reset():r=!1,!r)throw new Error("Unsupported matrix parameters")},set:function(e,t,n,r,i,a,o){return this._a=e,this._c=t,this._b=n,this._d=r,this._tx=i,this._ty=a,o||this._changed(),this},_serialize:function(e){return s.serialize(this.getValues(),e)},_changed:function(){var e=this._owner;e&&(e._applyMatrix?e.transform(null,!0):e._changed(9))},clone:function(){return new b(this._a,this._c,this._b,this._d,this._tx,this._ty)},equals:function(e){return e===this||e&&this._a===e._a&&this._b===e._b&&this._c===e._c&&this._d===e._d&&this._tx===e._tx&&this._ty===e._ty||!1},toString:function(){var e=h.instance;return"[["+[e.number(this._a),e.number(this._b),e.number(this._tx)].join(", ")+"], ["+[e.number(this._c),e.number(this._d),e.number(this._ty)].join(", ")+"]]"},reset:function(e){return this._a=this._d=1,this._c=this._b=this._tx=this._ty=0,e||this._changed(),this},apply:function(e,t){var n=this._owner;return!!n&&(n.transform(null,!0,s.pick(e,!0),t),this.isIdentity())},translate:function(){var e=p.read(arguments),t=e.x,n=e.y;return this._tx+=t*this._a+n*this._b,this._ty+=t*this._c+n*this._d,this._changed(),this},scale:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0});return t&&this.translate(t),this._a*=e.x,this._c*=e.x,this._b*=e.y,this._d*=e.y,t&&this.translate(t.negate()),this._changed(),this},rotate:function(e){e*=Math.PI/180;var t=p.read(arguments,1),n=t.x,r=t.y,i=Math.cos(e),a=Math.sin(e),o=n-n*i+r*a,s=r-n*a-r*i,l=this._a,u=this._b,c=this._c,h=this._d;return this._a=i*l+a*u,this._b=-a*l+i*u,this._c=i*c+a*h,this._d=-a*c+i*h,this._tx+=o*l+s*u,this._ty+=o*c+s*h,this._changed(),this},shear:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0});t&&this.translate(t);var n=this._a,r=this._c;return this._a+=e.y*this._b,this._c+=e.y*this._d,this._b+=e.x*n,this._d+=e.x*r,t&&this.translate(t.negate()),this._changed(),this},skew:function(){var e=p.read(arguments),t=p.read(arguments,0,{readNull:!0}),n=Math.PI/180,r=new p(Math.tan(e.x*n),Math.tan(e.y*n));return this.shear(r,t)},concatenate:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=e._a,o=e._b,s=e._c,l=e._d,u=e._tx,c=e._ty;return this._a=a*t+s*n,this._b=o*t+l*n,this._c=a*r+s*i,this._d=o*r+l*i,this._tx+=u*t+c*n,this._ty+=u*r+c*i,this._changed(),this},preConcatenate:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=this._tx,o=this._ty,s=e._a,l=e._b,u=e._c,c=e._d,h=e._tx,d=e._ty;return this._a=s*t+l*r,this._b=s*n+l*i,this._c=u*t+c*r,this._d=u*n+c*i,this._tx=s*a+l*o+h,this._ty=u*a+c*o+d,this._changed(),this},chain:function(e){var t=this._a,n=this._b,r=this._c,i=this._d,a=this._tx,o=this._ty,s=e._a,l=e._b,u=e._c,c=e._d,h=e._tx,d=e._ty;return new b(s*t+u*n,s*r+u*i,l*t+c*n,l*r+c*i,a+h*t+d*n,o+h*r+d*i)},isIdentity:function(){return 1===this._a&&0===this._c&&0===this._b&&1===this._d&&0===this._tx&&0===this._ty},orNullIfIdentity:function(){return this.isIdentity()?null:this},isInvertible:function(){return!!this._getDeterminant()},isSingular:function(){return!this._getDeterminant()},transform:function(e,t,n){return arguments.length<3?this._transformPoint(p.read(arguments)):this._transformCoordinates(e,t,n)},_transformPoint:function(e,t,n){var r=e.x,i=e.y;return t||(t=new p),t.set(r*this._a+i*this._b+this._tx,r*this._c+i*this._d+this._ty,n)},_transformCoordinates:function(e,t,n){for(var r=0,i=0,a=2*n;ra[l]&&(a[l]=s)}return t||(t=new w),t.set(i[0],i[1],a[0]-i[0],a[1]-i[1],n)},inverseTransform:function(){return this._inverseTransform(p.read(arguments))},_getDeterminant:function(){var e=this._a*this._d-this._b*this._c;return isFinite(e)&&!d.isZero(e)&&isFinite(this._tx)&&isFinite(this._ty)?e:null},_inverseTransform:function(e,t,n){var r=this._getDeterminant();if(!r)return null;var i=e.x-this._tx,a=e.y-this._ty;return t||(t=new p),t.set((i*this._d-a*this._b)/r,(a*this._a-i*this._c)/r,n)},decompose:function(){var e=this._a,t=this._b,n=this._c,r=this._d;if(d.isZero(e*r-t*n))return null;var i=Math.sqrt(e*e+t*t);e/=i,t/=i;var a=e*n+t*r;n-=e*a,r-=t*a;var o=Math.sqrt(n*n+r*r);return n/=o,r/=o,a/=o,e*r=4?(this._px=e,this._py=t,this._vx=n,this._vy=r,a=i):(this._px=e.x,this._py=e.y,this._vx=t.x,this._vy=t.y,a=n),a||(this._vx-=this._px,this._vy-=this._py)},getPoint:function(){return new p(this._px,this._py)},getVector:function(){return new p(this._vx,this._vy)},getLength:function(){return this.getVector().getLength()},intersect:function(e,t){return _.intersect(this._px,this._py,this._vx,this._vy,e._px,e._py,e._vx,e._vy,!0,t)},getSide:function(e,t){return _.getSide(this._px,this._py,this._vx,this._vy,e.x,e.y,!0,t)},getDistance:function(e){return Math.abs(_.getSignedDistance(this._px,this._py,this._vx,this._vy,e.x,e.y,!0))},isCollinear:function(e){return p.isCollinear(this._vx,this._vy,e._vx,e._vy)},isOrthogonal:function(e){return p.isOrthogonal(this._vx,this._vy,e._vx,e._vy)},statics:{intersect:function(e,t,n,r,i,a,o,s,l,u){l||(n-=e,r-=t,o-=i,s-=a);var c=n*s-r*o;if(!d.isZero(c)){var h=e-i,f=t-a,m=(o*f-s*h)/c,g=(n*f-r*h)/c,v=1e-12,w=-v,y=1+v;if(u||w=1?1:m),new p(e+m*n,t+m*r)}},getSide:function(e,t,n,r,i,a,o,s){o||(n-=e,r-=t);var l=i-e,u=a-t,c=l*r-u*n;return 0!==c||s||(c=(l*n+l*n)/(n*n+r*r),c>=0&&c<=1&&(c=0)),c<0?-1:c>0?1:0},getSignedDistance:function(e,t,n,r,i,a,o){return o||(n-=e,r-=t),0===n?r>0?i-e:e-i:0===r?n<0?a-t:t-a:((i-e)*r-(a-t)*n)/Math.sqrt(n*n+r*r)}}}),x=c.extend({_class:"Project",_list:"projects",_reference:"project",initialize:function(e){c.call(this,!0),this.layers=[],this._activeLayer=null,this.symbols=[],this._currentStyle=new G(null,null,this),this._view=K.create(this,e||ne.getCanvas(1,1)),this._selectedItems={},this._selectedItemCount=0,this._updateVersion=0},_serialize:function(e,t){return s.serialize(this.layers,e,!0,t)},clear:function(){for(var e=this.layers.length-1;e>=0;e--)this.layers[e].remove();this.symbols=[]},isEmpty:function(){return 0===this.layers.length},remove:function e(){return!!e.base.call(this)&&(this._view&&this._view.remove(),!0)},getView:function(){return this._view},getCurrentStyle:function(){return this._currentStyle},setCurrentStyle:function(e){this._currentStyle.initialize(e)},getIndex:function(){return this._index},getOptions:function(){return this._scope.settings},getActiveLayer:function(){return this._activeLayer||new S({project:this})},getSelectedItems:function(){var e=[];for(var t in this._selectedItems){var n=this._selectedItems[t];n.isInserted()&&e.push(n)}return e},insertChild:function(e,t,n){return t instanceof S?(t._remove(!1,!0),s.splice(this.layers,[t],e,0),t._setProject(this,!0),this._changes&&t._changed(5),this._activeLayer||(this._activeLayer=t)):t instanceof C?(this._activeLayer||this.insertChild(e,new S(C.NO_INSERT))).insertChild(e,t,n):t=null,t},addChild:function(e,t){return this.insertChild(o,e,t)},_updateSelection:function(e){var t=e._id,n=this._selectedItems;e._selected?n[t]!==e&&(this._selectedItemCount++,n[t]=e):n[t]===e&&(this._selectedItemCount--,delete n[t])},selectAll:function(){for(var e=this.layers,t=0,n=e.length;t=0;n--){var r=this.layers[n]._hitTest(e,t);if(r)return r}return null},getItems:function(e){return C._getItems(this.layers,e)},getItem:function(e){return C._getItems(this.layers,e,null,null,!0)[0]||null},importJSON:function(e){this.activate();var t=this._activeLayer;return s.importJSON(e,t&&t.isEmpty()&&t)},draw:function(e,t,n){this._updateVersion++,e.save(),t.applyToContext(e);for(var r=new s({offset:new p(0,0),pixelRatio:n,viewMatrix:t.isIdentity()?null:t,matrices:[new b],updateMatrix:!0}),i=0,a=this.layers,o=a.length;i0){e.save(),e.strokeWidth=1;var l=this._selectedItems,u=this._scope.settings.handleSize,c=this._updateVersion;for(var h in l)l[h]._drawSelection(e,t,u,l,c);e.restore()}}}),E=s.extend({_class:"Symbol",initialize:function(e,t){this._id=f.get(),this.project=a.project,this.project.symbols.push(this),e&&this.setDefinition(e,t)},_serialize:function(e,t){return t.add(this,function(){return s.serialize([this._class,this._definition],e,!1,t)})},_changed:function(e){8&e&&C._clearBoundsCache(this),1&e&&(this.project._needsUpdate=!0)},getDefinition:function(){return this._definition},setDefinition:function(e,t){e._parentSymbol&&(e=e.clone()),this._definition&&(this._definition._parentSymbol=null), this._definition=e,e.remove(),e.setSelected(!1),t||e.setPosition(new p),e._parentSymbol=this,this._changed(9)},place:function(e){return new N(this,e)},clone:function(){return new E(this._definition.clone(!1))},equals:function(e){return e===this||e&&this.definition.equals(e.definition)||!1}}),C=s.extend(l,{statics:{extend:function e(t){return t._serializeFields&&(t._serializeFields=new s(this.prototype._serializeFields,t._serializeFields)),e.base.apply(this,arguments)},NO_INSERT:{insert:!1}},_class:"Item",_applyMatrix:!0,_canApplyMatrix:!0,_boundsSelected:!1,_selectChildren:!1,_serializeFields:{name:null,applyMatrix:null,matrix:new b,pivot:null,locked:!1,visible:!0,blendMode:"normal",opacity:1,guide:!1,selected:!1,clipMask:!1,data:{}},initialize:function(){},_initialize:function(e,t){var n=e&&s.isPlainObject(e),r=n&&e.internal===!0,i=this._matrix=new b,o=n&&e.project||a.project;return r||(this._id=f.get()),this._applyMatrix=this._canApplyMatrix&&a.settings.applyMatrix,t&&i.translate(t),i._owner=this,this._style=new G(o._currentStyle,this,o),this._project||(r||n&&e.insert===!1?this._setProject(o):n&&e.parent?this.setParent(e.parent):(o._activeLayer||new S).addChild(this)),n&&e!==C.NO_INSERT&&this._set(e,{insert:!0,project:!0,parent:!0},!0),n},_events:s.each(["onMouseDown","onMouseUp","onMouseDrag","onClick","onDoubleClick","onMouseMove","onMouseEnter","onMouseLeave"],function(e){this[e]={install:function(e){this.getView()._installEvent(e)},uninstall:function(e){this.getView()._uninstallEvent(e)}}},{onFrame:{install:function(){this.getView()._animateItem(this,!0)},uninstall:function(){this.getView()._animateItem(this,!1)}},onLoad:{}}),_serialize:function(e,t){function n(n){for(var a in n){var o=i[a];s.equals(o,"leading"===a?1.2*n.fontSize:n[a])||(r[a]=s.serialize(o,e,"data"!==a,t))}}var r={},i=this;return n(this._serializeFields),this instanceof k||n(this._style._defaults),[this._class,r]},_changed:function(e){var t=this._parentSymbol,n=this._parent||t,r=this._project;if(8&e&&(this._bounds=this._position=this._decomposed=this._globalMatrix=this._currentPath=o),n&&40&e&&C._clearBoundsCache(n),2&e&&C._clearBoundsCache(this),r&&(1&e&&(r._needsUpdate=!0),r._changes)){var i=r._changesById[this._id];i?i.flags|=e:(i={item:this,flags:e},r._changesById[this._id]=i,r._changes.push(i))}t&&t._changed(e)},set:function(e){return e&&this._set(e),this},getId:function(){return this._id},getName:function(){return this._name},setName:function(e,t){if(this._name&&this._removeNamed(),e===+e+"")throw new Error("Names consisting only of numbers are not supported.");var n=this._parent;if(e&&n){for(var r=n._children,i=n._namedChildren,a=e,s=1;t&&r[e];)e=a+" "+s++;(i[e]=i[e]||[]).push(this),r[e]=this}this._name=e||o,this._changed(128)},getStyle:function(){return this._style},setStyle:function(e){this.getStyle().set(e)}},s.each(["locked","visible","blendMode","opacity","guide"],function(e){var t=s.capitalize(e),e="_"+e;this["get"+t]=function(){return this[e]},this["set"+t]=function(t){t!=this[e]&&(this[e]=t,this._changed("_locked"===e?128:129))}},{}),{beans:!0,_locked:!1,_visible:!0,_blendMode:"normal",_opacity:1,_guide:!1,isSelected:function(){if(this._selectChildren)for(var e=this._children,t=0,n=e.length;t=0;t--)if(this._children[t].contains(e))return!0;return!1}return e.isInside(this.getInternalBounds())},isInside:function(){return w.read(arguments).contains(this.getBounds())},_asPathItem:function(){return new z.Rectangle({rectangle:this.getInternalBounds(),matrix:this._matrix,insert:!1})},intersects:function(e,t){return e instanceof C&&this._asPathItem().getIntersections(e._asPathItem(),null,t||e._matrix,!0).length>0},hitTest:function(){return this._hitTest(p.read(arguments),M.getOptions(s.read(arguments)))},_hitTest:function(e,t){function n(t,n){var r=d["get"+n]();if(e.subtract(r).divide(l).length<=1)return new M(t,h,{name:s.hyphenate(n),point:r})}if(this._locked||!this._visible||this._guide&&!t.guides||this.isEmpty())return null;var r=this._matrix,i=t._totalMatrix,a=this.getView(),o=t._totalMatrix=i?i.chain(r):this.getGlobalMatrix().preConcatenate(a._matrix),l=t._tolerancePadding=new g(z._getPenPadding(1,o.inverted())).multiply(Math.max(t.tolerance,1e-6));if(e=r._inverseTransform(e),!this._children&&!this.getInternalRoughBounds().expand(l.multiply(2))._containsPoint(e))return null;var u,c=!(t.guides&&!this._guide||t.selected&&!this._selected||t.type&&t.type!==s.hyphenate(this._class)||t.class&&!(this instanceof t.class)),h=this;if(c&&(t.center||t.bounds)&&this._parent){var d=this.getInternalBounds();if(t.center&&(u=n("center","Center")),!u&&t.bounds)for(var f=["TopLeft","TopRight","BottomLeft","BottomRight","LeftCenter","TopCenter","RightCenter","BottomCenter"],p=0;p<8&&!u;p++)u=n("bounds",f[p])}var m=!u&&this._children;if(m)for(var v=this._getChildHitTestOptions(t),p=m.length-1;p>=0&&!u;p--)u=m[p]._hitTest(e,v);return!u&&c&&(u=this._hitTestSelf(e,t)),u&&u.point&&(u.point=r.transform(u.point)),t._totalMatrix=i,u},_getChildHitTestOptions:function(e){return e},_hitTestSelf:function(e,t){if(t.fill&&this.hasFill()&&this._contains(e))return new M("fill",this)},matches:function(e,t){function n(e,t){for(var r in e)if(e.hasOwnProperty(r)){var i=e[r],a=t[r];if(s.isPlainObject(i)&&s.isPlainObject(a)){if(!n(i,a))return!1}else if(!s.equals(i,a))return!1}return!0}var r=typeof e;if("object"===r){for(var i in e)if(e.hasOwnProperty(i)&&!this.matches(i,e[i]))return!1}else{if("function"===r)return e(this);var a=/^(empty|editable)$/.test(e)?this["is"+s.capitalize(e)]():"type"===e?s.hyphenate(this._class):this[e];if(/^(constructor|class)$/.test(e)){if(!(this instanceof t))return!1}else if(t instanceof RegExp){if(!t.test(a))return!1}else if("function"==typeof t){if(!t(a))return!1}else if(s.isPlainObject(t)){if(!n(t,a))return!1}else if(!s.equals(a,t))return!1}return!0},getItems:function(e){return C._getItems(this._children,e,this._matrix)},getItem:function(e){return C._getItems(this._children,e,this._matrix,null,!0)[0]||null},statics:{_getItems:function e(t,n,r,i,a){if(!i&&"object"==typeof n){var o=n.overlapping,l=n.inside,u=o||l,c=u&&w.read([u]);i={items:[],inside:!!l,overlapping:!!o,rect:c,path:o&&new z.Rectangle({rectangle:c,insert:!1})},u&&(n=s.set({},n,{inside:!0,overlapping:!0}))}var h=i&&i.items,c=i&&i.rect;r=c&&(r||new b);for(var d=0,f=t&&t.length;d0)break}return h}}},{importJSON:function(e){var t=s.importJSON(e,this);return t!==this?this.addChild(t):t},addChild:function(e,t){return this.insertChild(o,e,t)},insertChild:function(e,t,n){var r=t?this.insertChildren(e,[t],n):null;return r&&r[0]},addChildren:function(e,t){return this.insertChildren(this._children.length,e,t)},insertChildren:function(e,t,n,r){var i=this._children;if(i&&t&&t.length>0){t=Array.prototype.slice.apply(t);for(var a=t.length-1;a>=0;a--){var o=t[a];if(!r||o instanceof r){var l=o._parent===this&&o._index=0;r--)n[r]._remove(!0,!1);return n.length>0&&this._changed(11),n},clear:"#removeChildren",reverseChildren:function(){if(this._children){this._children.reverse();for(var e=0,t=this._children.length;e0},isInserted:function(){return!!this._parent&&this._parent.isInserted()},isAbove:function(e){return this._getOrder(e)===-1},isBelow:function(e){return 1===this._getOrder(e)},isParent:function(e){return this._parent===e},isChild:function(e){return e&&e._parent===this},isDescendant:function(e){for(var t=this;t=t._parent;)if(t==e)return!0;return!1},isAncestor:function(e){return!!e&&e.isDescendant(this)},isSibling:function(e){return this._parent===e._parent},isGroupedWith:function(e){for(var t=this._parent;t;){if(t._parent&&/^(Group|Layer|CompoundPath)$/.test(t._class)&&e.isDescendant(t))return!0;t=t._parent}return!1},translate:function(){var e=new b;return this.transform(e.translate.apply(e,arguments))},rotate:function(e){return this.transform((new b).rotate(e,p.read(arguments,1,{readNull:!0})||this.getPosition(!0)))}},s.each(["scale","shear","skew"],function(e){this[e]=function(){var t=p.read(arguments),n=p.read(arguments,0,{readNull:!0});return this.transform((new b)[e](t,n||this.getPosition(!0)))}},{}),{transform:function(e,t,n,r){e&&e.isIdentity()&&(e=null);var i=this._matrix,a=(t||this._applyMatrix)&&(!i.isIdentity()||e||t&&n&&this._children);if(!e&&!a)return this;if(e&&i.preConcatenate(e),a=a&&this._transformContent(i,n,r)){var o=this._pivot,s=this._style,l=s.getFillColor(!0),u=s.getStrokeColor(!0);o&&i._transformPoint(o,o,!0),l&&l.transform(i),u&&u.transform(i),i.reset(!0),r&&this._canApplyMatrix&&(this._applyMatrix=!0)}var c=this._bounds,h=this._position;this._changed(9);var d=c&&e&&e.decompose();if(d&&!d.shearing&&d.rotation%90===0){for(var f in c){var p=c[f];!a&&p._internal||e._transformBounds(p,p)}var m=this._boundsGetter,p=c[m&&m.getBounds||m||"getBounds"];p&&(this._position=p.getCenter(!0)),this._bounds=c}else e&&h&&(this._position=e._transformPoint(h,h));return this},_transformContent:function(e,t,n){var r=this._children;if(r){for(var i=0,a=r.length;ii:r0){e.strokeStyle=r.toCanvasStyle(e),e.lineWidth=o;var s=t.getStrokeJoin(),l=t.getStrokeCap(),u=t.getMiterLimit();if(s&&(e.lineJoin=s),l&&(e.lineCap=l),u&&(e.miterLimit=u),a.support.nativeDash){var c=t.getDashArray(),h=t.getDashOffset();c&&c.length&&("setLineDash"in e?(e.setLineDash(c),e.lineDashOffset=h):(e.mozDash=c,e.mozDashOffset=h))}}}if(i){var d=t.getShadowBlur();if(d>0){e.shadowColor=i.toCanvasStyle(e),e.shadowBlur=d;var f=this.getShadowOffset();e.shadowOffsetX=f.x,e.shadowOffsetY=f.y}}},draw:function(e,t,n){function r(e){return o?o.chain(e):e}var i=this._updateVersion=this._project._updateVersion;if(this._visible&&0!==this._opacity){var a=t.matrices,o=t.viewMatrix,s=this._matrix,l=a[a.length-1].chain(s);if(l.isInvertible()){a.push(l),t.updateMatrix&&(l._updateVersion=i,this._globalMatrix=l);var u,c,h,d=this._blendMode,f=this._opacity,p="normal"===d,m=re.nativeModes[d],g=p&&1===f||t.dontStart||t.clip||(m||p&&f<1)&&this._canComposite(),v=t.pixelRatio||1;if(!g){var w=this.getStrokeBounds(r(l));if(!w.width||!w.height)return;h=t.offset,c=t.offset=w.getTopLeft().floor(),u=e,e=ne.getContext(w.getSize().ceil().add(1).multiply(v)),1!==v&&e.scale(v,v)}e.save();var y=n?n.chain(s):!this.getStrokeScaling(!0)&&r(l),b=!g&&t.clipItem,_=!y||b;if(g?(e.globalAlpha=f,m&&(e.globalCompositeOperation=d)):_&&e.translate(-c.x,-c.y),_&&(g?s:r(l)).applyToContext(e),b&&t.clipItem.draw(e,t.extend({clip:!0})),y){e.setTransform(v,0,0,v,0,0);var x=t.offset;x&&e.translate(-x.x,-x.y)}this._draw(e,t,y),e.restore(),a.pop(),t.clip&&!t.dontFinish&&e.clip(),g||(re.process(d,e,u,f,c.subtract(h).multiply(v)),ne.release(e),t.offset=h)}}},_isUpdated:function(e){var t=this._parent;if(t instanceof D)return t._isUpdated(e);var n=this._updateVersion===e;return!n&&t&&t._visible&&t._isUpdated(e)&&(this._updateVersion=e,n=!0),n},_drawSelection:function(e,t,n,r,i){if((this._drawSelected||this._boundsSelected)&&this._isUpdated(i)){var a=this.getSelectedColor(!0)||this.getLayer().getSelectedColor(!0),o=t.chain(this.getGlobalMatrix(!0));if(e.strokeStyle=e.fillStyle=a?a.toCanvasStyle(e):"#009dec",this._drawSelected&&this._drawSelected(e,o,r),this._boundsSelected){var s=n/2,l=o._transformCorners(this.getInternalBounds());e.beginPath();for(var u=0;u<8;u++)e[0===u?"moveTo":"lineTo"](l[u],l[++u]);e.closePath(),e.stroke();for(var u=0;u<8;u++)e.fillRect(l[u]-s,l[++u]-s,n,n)}}},_canComposite:function(){return!1}},s.each(["down","drag","up","move"],function(e){this["removeOn"+s.capitalize(e)]=function(){var t={};return t[e]=!0,this.removeOn(t)}},{removeOn:function(e){for(var t in e)if(e[t]){var n="mouse"+t,r=this._project,i=r._removeSets=r._removeSets||{};i[n]=i[n]||{},i[n][this._id]=this}return this}})),k=C.extend({_class:"Group",_selectChildren:!0,_serializeFields:{children:[]},initialize:function(e){this._children=[],this._namedChildren={},this._initialize(e)||this.addChildren(Array.isArray(e)?e:arguments)},_changed:function e(t){e.base.call(this,t),1026&t&&(this._clipItem=o)},_getClipItem:function(){var e=this._clipItem;if(e===o){e=null;for(var t=0,n=this._children.length;t1?1:-1),s=o.multiply(i),l=s.subtract(o.multiply(r)),u=new w(s,l);if((n?u.expand(n):u).contains(t))return l}}function t(e,t){var n=e.getAngleInRadians(),r=2*t.width,i=2*t.height,a=r*Math.sin(n),o=i*Math.cos(n);return r*i/(2*Math.sqrt(a*a+o*o))}return{_contains:function t(n){if("rectangle"===this._type){var r=e(this,n);return r?n.subtract(r).divide(this._radius).getLength()<=1:t.base.call(this,n)}return n.divide(this.size).getLength()<=.5},_hitTestSelf:function n(r,i){var a=!1;if(this.hasStroke()){var o=this._type,s=this._radius,l=this.getStrokeWidth()+2*i.tolerance;if("rectangle"===o){var u=e(this,r,l);if(u){var c=r.subtract(u);a=2*Math.abs(c.getLength()-t(c,s))<=l}else{var h=new w(this._size).setCenter(0,0),d=h.expand(l),f=h.expand(-l);a=d._containsPoint(r)&&!f._containsPoint(r)}}else"ellipse"===o&&(s=t(r,s)),a=2*Math.abs(r.getLength()-s)<=l}return a?new M("stroke",this):n.base.apply(this,arguments)}}},{statics:new function(){function e(e,t,n,r,i){var a=new P(s.getNamed(i));return a._type=e,a._size=n,a._radius=r,a.translate(t)}return{Circle:function(){var t=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"radius");return e("circle",t,new g(2*n),n,arguments)},Rectangle:function(){var t=w.readNamed(arguments,"rectangle"),n=g.min(g.readNamed(arguments,"radius"),t.getSize(!0).divide(2));return e("rectangle",t.getCenter(!0),t.getSize(!0),n,arguments)},Ellipse:function(){var t=P._readEllipse(arguments),n=t.radius;return e("ellipse",t.center,n.multiply(2),n,arguments)},_readEllipse:function(e){var t,n;if(s.hasNamed(e,"radius"))t=p.readNamed(e,"center"),n=g.readNamed(e,"radius");else{var r=w.readNamed(e,"rectangle");t=r.getCenter(!0),n=r.getSize(!0).divide(2)}return{center:t,radius:n}}}}}),T=C.extend({_class:"Raster",_applyMatrix:!1,_canApplyMatrix:!1,_boundsGetter:"getBounds",_boundsSelected:!0,_serializeFields:{crossOrigin:null,source:null},initialize:function(e,t){this._initialize(e,t!==o&&p.read(arguments,1))||("string"==typeof e?this.setSource(e):this.setImage(e)),this._size||(this._size=new g,this._loaded=!1)},_equals:function(e){return this.getSource()===e.getSource()},clone:function(e){var t=new T(C.NO_INSERT),n=this._image,r=this._canvas;if(n)t.setImage(n);else if(r){var i=ne.getCanvas(this._size);i.getContext("2d").drawImage(r,0,0),t.setImage(i)}return t._crossOrigin=this._crossOrigin,this._clone(t,e)},getSize:function(){var e=this._size;return new v(e?e.width:0,e?e.height:0,this,"setSize")},setSize:function(){var e=g.read(arguments);if(!e.equals(this._size))if(e.width>0&&e.height>0){var t=this.getElement();this.setImage(ne.getCanvas(e)),t&&this.getContext(!0).drawImage(t,0,0,e.width,e.height)}else this._canvas&&ne.release(this._canvas),this._size=e.clone()},getWidth:function(){return this._size?this._size.width:0},setWidth:function(e){this.setSize(e,this.getHeight())},getHeight:function(){return this._size?this._size.height:0},setHeight:function(e){this.setSize(this.getWidth(),e)},isEmpty:function(){var e=this._size;return!e||0===e.width&&0===e.height},getResolution:function(){var e=this._matrix,t=new p(0,0).transform(e),n=new p(1,0).transform(e).subtract(t),r=new p(0,1).transform(e).subtract(t);return new g(72/n.getLength(),72/r.getLength())},getPpi:"#getResolution",getImage:function(){return this._image},setImage:function(e){this._canvas&&ne.release(this._canvas),e&&e.getContext?(this._image=null,this._canvas=e,this._loaded=!0):(this._image=e,this._canvas=null,this._loaded=e&&e.complete),this._size=new g(e?e.naturalWidth||e.width:0,e?e.naturalHeight||e.height:0),this._context=null,this._changed(521)},getCanvas:function(){if(!this._canvas){var e=ne.getContext(this._size);try{this._image&&e.drawImage(this._image,0,0),this._canvas=e.canvas}catch(t){ne.release(e)}}return this._canvas},setCanvas:"#setImage",getContext:function(e){return this._context||(this._context=this.getCanvas().getContext("2d")),e&&(this._image=null,this._changed(513)),this._context},setContext:function(e){this._context=e},getSource:function(){return this._image&&this._image.src||this.toDataURL()},setSource:function(e){function t(){var e=r.getView();e&&(a=e._scope,r.setImage(n),r.emit("load"),e.update())}var n,r=this,i=this._crossOrigin;n=document.getElementById(e)||new Image,i&&(n.crossOrigin=i),n.naturalWidth&&n.naturalHeight?setTimeout(t,0):(X.add(n,{load:t}),n.src||(n.src=e)),this.setImage(n)},getCrossOrigin:function(){return this._image&&this._image.crossOrigin||this._crossOrigin||""; },setCrossOrigin:function(e){this._crossOrigin=e,this._image&&(this._image.crossOrigin=e)},getElement:function(){return this._canvas||this._loaded&&this._image}},{beans:!1,getSubCanvas:function(){var e=w.read(arguments),t=ne.getContext(e.getSize());return t.drawImage(this.getCanvas(),e.x,e.y,e.width,e.height,0,0,e.width,e.height),t.canvas},getSubRaster:function(){var e=w.read(arguments),t=new T(C.NO_INSERT);return t.setImage(this.getSubCanvas(e)),t.translate(e.getCenter().subtract(this.getSize().divide(2))),t._matrix.preConcatenate(this._matrix),t.insertAbove(this),t},toDataURL:function(){var e=this._image&&this._image.src;if(/^data:/.test(e))return e;var t=this.getCanvas();return t?t.toDataURL.apply(t,arguments):null},drawImage:function(e){var t=p.read(arguments,1);this.getContext(!0).drawImage(e,t.x,t.y)},getAverageColor:function(e){var t,n;e?e instanceof B?(n=e,t=e.getBounds()):e.width?t=new w(e):e.x&&(t=new w(e.x-.5,e.y-.5,1,1)):t=this.getBounds();var r=32,i=Math.min(t.width,r),a=Math.min(t.height,r),o=T._sampleContext;o?o.clearRect(0,0,r+1,r+1):o=T._sampleContext=ne.getContext(new g(r)),o.save();var l=(new b).scale(i/t.width,a/t.height).translate(-t.x,-t.y);l.applyToContext(o),n&&n.draw(o,new s({clip:!0,matrices:[l]})),this._matrix.applyToContext(o);var u=this.getElement(),c=this._size;u&&o.drawImage(u,-c.width/2,-c.height/2),o.restore();for(var h=o.getImageData(.5,.5,Math.ceil(i),Math.ceil(a)).data,d=[0,0,0],f=0,p=0,m=h.length;p0?r[i-1]:t._closed?r[r.length-1]:null)||n._changed(),e&&e!==this._point&&e!==this._handleOut||!(n=r[i])||n._changed()),t._changed(25)}},getPoint:function(){return this._point},setPoint:function(){var e=p.read(arguments);this._point.set(e.x,e.y)},getHandleIn:function(){return this._handleIn},setHandleIn:function(){var e=p.read(arguments);this._handleIn.set(e.x,e.y)},getHandleOut:function(){return this._handleOut},setHandleOut:function(){var e=p.read(arguments);this._handleOut.set(e.x,e.y)},hasHandles:function(){return!this._handleIn.isZero()||!this._handleOut.isZero()},clearHandles:function(){this._handleIn.set(0,0),this._handleOut.set(0,0)},_selectionState:0,isSelected:function(e){var t=this._selectionState;return e?e===this._point?!!(4&t):e===this._handleIn?!!(1&t):e===this._handleOut&&!!(2&t):!!(7&t)},setSelected:function(e,t){var n=this._path,e=!!e,r=this._selectionState,i=r,a=t?t===this._point?4:t===this._handleIn?1:t===this._handleOut?2:0:7;e?r|=a:r&=~a,this._selectionState=r,n&&r!==i&&(n._updateSelection(this,i,r),n._changed(129))},getIndex:function(){return this._index!==o?this._index:null},getPath:function(){return this._path||null},getCurve:function(){var e=this._path,t=this._index;return e?(t>0&&!e._closed&&t===e._segments.length-1&&t--,e.getCurves()[t]||null):null},getLocation:function(){var e=this.getCurve();return e?new O(e,this===e._segment1?0:1):null},getNext:function(){var e=this._path&&this._path._segments;return e&&(e[this._index+1]||this._path._closed&&e[0])||null},getPrevious:function(){var e=this._path&&this._path._segments;return e&&(e[this._index-1]||this._path._closed&&e[e.length-1])||null},isFirst:function(){return 0===this._index},isLast:function(){var e=this._path;return e&&this._index===e._segments.length-1||!1},reverse:function(){var e=this._handleIn,t=this._handleOut,n=e._x,r=e._y;e.set(t._x,t._y),t.set(n,r)},reversed:function(){return new I(this._point,this._handleOut,this._handleIn)},remove:function(){return!!this._path&&!!this._path.removeSegment(this._index)},clone:function(){return new I(this._point,this._handleIn,this._handleOut)},equals:function(e){return e===this||e&&this._class===e._class&&this._point.equals(e._point)&&this._handleIn.equals(e._handleIn)&&this._handleOut.equals(e._handleOut)||!1},toString:function(){var e=["point: "+this._point];return this._handleIn.isZero()||e.push("handleIn: "+this._handleIn),this._handleOut.isZero()||e.push("handleOut: "+this._handleOut),"{ "+e.join(", ")+" }"},transform:function(e){this._transformCoordinates(e,new Array(6),!0),this._changed()},_transformCoordinates:function(e,t,n){var r=this._point,i=n&&this._handleIn.isZero()?null:this._handleIn,a=n&&this._handleOut.isZero()?null:this._handleOut,o=r._x,s=r._y,l=2;return t[0]=o,t[1]=s,i&&(t[l++]=i._x+o,t[l++]=i._y+s),a&&(t[l++]=a._x+o,t[l++]=a._y+s),e&&(e._transformCoordinates(t,t,l/2),o=t[0],s=t[1],n?(r._x=o,r._y=s,l=2,i&&(i._x=t[l++]-o,i._y=t[l++]-s),a&&(a._x=t[l++]-o,a._y=t[l++]-s)):(i||(t[l++]=o,t[l++]=s),a||(t[l++]=o,t[l++]=s))),t}}),L=p.extend({initialize:function(e,t,n){var r,i,a;if(e)if((r=e[0])!==o)i=e[1];else{var s=e;(r=s.x)===o&&(s=p.read(arguments),r=s.x),i=s.y,a=s.selected}else r=i=0;this._x=r,this._y=i,this._owner=t,t[n]=this,a&&this.setSelected(!0)},set:function(e,t){return this._x=e,this._y=t,this._owner._changed(this),this},_serialize:function(e){var t=e.formatter,n=t.number(this._x),r=t.number(this._y);return this.isSelected()?{x:n,y:r,selected:!0}:[n,r]},getX:function(){return this._x},setX:function(e){this._x=e,this._owner._changed(this)},getY:function(){return this._y},setY:function(e){this._y=e,this._owner._changed(this)},isZero:function(){return d.isZero(this._x)&&d.isZero(this._y)},setSelected:function(e){this._owner.setSelected(e,this)},isSelected:function(){return this._owner.isSelected(this)}}),A=s.extend({_class:"Curve",initialize:function(e,t,n,r,i,a,o,s){var l,u,c,h,d,f,p=arguments.length;3===p?(this._path=e,l=t,u=n):0===p?(l=new I,u=new I):1===p?"segment1"in e?(l=new I(e.segment1),u=new I(e.segment2)):"point1"in e?(c=e.point1,d=e.handle1,f=e.handle2,h=e.point2):Array.isArray(e)&&(c=[e[0],e[1]],h=[e[6],e[7]],d=[e[2]-e[0],e[3]-e[1]],f=[e[4]-e[6],e[5]-e[7]]):2===p?(l=new I(e),u=new I(t)):4===p?(c=e,d=t,f=n,h=r):8===p&&(c=[e,t],h=[o,s],d=[n-e,r-t],f=[i-o,a-s]),this._segment1=l||new I(c,null,d),this._segment2=u||new I(h,f,null)},_serialize:function(e){return s.serialize(this.hasHandles()?[this.getPoint1(),this.getHandle1(),this.getHandle2(),this.getPoint2()]:[this.getPoint1(),this.getPoint2()],e,!0)},_changed:function(){this._length=this._bounds=o},clone:function(){return new A(this._segment1,this._segment2)},toString:function(){var e=["point1: "+this._segment1._point];return this._segment1._handleOut.isZero()||e.push("handle1: "+this._segment1._handleOut),this._segment2._handleIn.isZero()||e.push("handle2: "+this._segment2._handleIn),e.push("point2: "+this._segment2._point),"{ "+e.join(", ")+" }"},remove:function(){var e=!1;if(this._path){var t=this._segment2,n=t._handleOut;e=t.remove(),e&&this._segment1._handleOut.set(n.x,n.y)}return e},getPoint1:function(){return this._segment1._point},setPoint1:function(){var e=p.read(arguments);this._segment1._point.set(e.x,e.y)},getPoint2:function(){return this._segment2._point},setPoint2:function(){var e=p.read(arguments);this._segment2._point.set(e.x,e.y)},getHandle1:function(){return this._segment1._handleOut},setHandle1:function(){var e=p.read(arguments);this._segment1._handleOut.set(e.x,e.y)},getHandle2:function(){return this._segment2._handleIn},setHandle2:function(){var e=p.read(arguments);this._segment2._handleIn.set(e.x,e.y)},getSegment1:function(){return this._segment1},getSegment2:function(){return this._segment2},getPath:function(){return this._path},getIndex:function(){return this._segment1._index},getNext:function(){var e=this._path&&this._path._curves;return e&&(e[this._segment1._index+1]||this._path._closed&&e[0])||null},getPrevious:function(){var e=this._path&&this._path._curves;return e&&(e[this._segment1._index-1]||this._path._closed&&e[e.length-1])||null},isFirst:function(){return 0===this._segment1._index},isLast:function(){var e=this._path;return e&&this._segment1._index===e._curves.length-1||!1},isSelected:function(){return this.getPoint1().isSelected()&&this.getHandle2().isSelected()&&this.getHandle2().isSelected()&&this.getPoint2().isSelected()},setSelected:function(e){this.getPoint1().setSelected(e),this.getHandle1().setSelected(e),this.getHandle2().setSelected(e),this.getPoint2().setSelected(e)},getValues:function(e){return A.getValues(this._segment1,this._segment2,e)},getPoints:function(){for(var e=this.getValues(),t=[],n=0;n<8;n+=2)t.push(new p(e[n],e[n+1]));return t},getLength:function(){return null==this._length&&(this._length=A.getLength(this.getValues(),0,1)),this._length},getArea:function(){return A.getArea(this.getValues())},getLine:function(){return new _(this._segment1._point,this._segment2._point)},getPart:function(e,t){return new A(A.getPart(this.getValues(),e,t))},getPartLength:function(e,t){return A.getLength(this.getValues(),e,t)},getIntersections:function(e){return A._getIntersections(this.getValues(),e&&e!==this?e.getValues():null,this,e,[],{})},_getParameter:function(e,t){return t?e:e&&e.curve===this?e.parameter:e===o&&t===o?.5:this.getParameterAt(e,0)},divide:function(e,t,n){var r=this._getParameter(e,t),i=4e-7,a=1-i,o=null;if(r>=i&&r<=a){var s=A.subdivide(this.getValues(),r),l=s[0],u=s[1],c=n||this.hasHandles(),h=this._segment1,d=this._segment2,f=this._path;c&&(h._handleOut.set(l[2]-l[0],l[3]-l[1]),d._handleIn.set(u[4]-u[6],u[5]-u[7]));var m=l[6],g=l[7],v=new I(new p(m,g),c&&new p(l[4]-m,l[5]-g),c&&new p(u[2]-m,u[3]-g));f?(f.insert(h._index+1,v),o=this.getNext()):(this._segment2=v,o=new A(v,d))}return o},split:function(e,t){return this._path?this._path.split(this._segment1._index,this._getParameter(e,t)):null},reversed:function(){return new A(this._segment2.reversed(),this._segment1.reversed())},clearHandles:function(){this._segment1._handleOut.set(0,0),this._segment2._handleIn.set(0,0)},statics:{getValues:function(e,t,n){var r=e._point,i=e._handleOut,a=t._handleIn,o=t._point,s=[r._x,r._y,r._x+i._x,r._y+i._y,o._x+a._x,o._y+a._y,o._x,o._y];return n&&n._transformCoordinates(s,s,4),s},subdivide:function(e,t){var n=e[0],r=e[1],i=e[2],a=e[3],s=e[4],l=e[5],u=e[6],c=e[7];t===o&&(t=.5);var h=1-t,d=h*n+t*i,f=h*r+t*a,p=h*i+t*s,m=h*a+t*l,g=h*s+t*u,v=h*l+t*c,w=h*d+t*p,y=h*f+t*m,b=h*p+t*g,_=h*m+t*v,x=h*w+t*b,E=h*y+t*_;return[[n,r,d,f,w,y,x,E],[x,E,b,_,g,v,u,c]]},solveCubic:function(e,t,n,r,i,a){var o=e[t],s=e[t+2],l=e[t+4],u=e[t+6],c=3*(s-o),h=3*(l-s)-c,f=u-o-c-h;return d.solveCubic(f,h,c,o-n,r,i,a)},getParameterOf:function(e,t){var n=new p(e[0],e[1]),r=new p(e[6],e[7]),i=1e-12,a=t.isClose(n,i)?0:t.isClose(r,i)?1:null;if(null!==a)return a;for(var o=[t.x,t.y],s=[],l=2e-7,u=0;u<2;u++)for(var c=A.solveCubic(e,u,o[u],s,0,1),h=0;h=0&&n<=1){var r=t.getDistance(A.getPoint(e,n),!0);if(r.999999999999?1:A.getParameterOf(e,new p(r+c*s,i+c*l))}for(var h=100,d=1/0,f=0,m=0;m<=h;m++)n(m/h);for(var g=1/(2*h);g>4e-7;)n(f-g)||n(f+g)||(g/=2);return f},getPart:function(e,t,n){var r=t>n;if(r){var i=t;t=n,n=i}return t>0&&(e=A.subdivide(e,t)[1]),n<1&&(e=A.subdivide(e,(n-t)/(1-t))[0]),r?[e[6],e[7],e[4],e[5],e[2],e[3],e[0],e[1]]:e},hasHandles:function(e){var t=d.isZero;return!(t(e[0]-e[2])&&t(e[1]-e[3])&&t(e[4]-e[6])&&t(e[5]-e[7]))},isFlatEnough:function(e,t){var n=e[0],r=e[1],i=e[2],a=e[3],o=e[4],s=e[5],l=e[6],u=e[7],c=3*i-2*n-l,h=3*a-2*r-u,d=3*o-2*l-n,f=3*s-2*u-r;return Math.max(c*c,d*d)+Math.max(h*h,f*f)<10*t*t},getArea:function(e){var t=e[0],n=e[1],r=e[6],i=e[7],a=(e[2]+t)/2,o=(e[3]+n)/2,s=(e[4]+e[6])/2,l=(e[5]+e[7])/2;return 6*((t-a)*(o+n)+(a-s)*(l+o)+(s-r)*(i+l))/10},getBounds:function(e){for(var t=e.slice(0,2),n=t.slice(),r=[0,0],i=0;i<2;i++)A._addBounds(e[i],e[i+2],e[i+4],e[i+6],i,0,t,n,r);return new w(t[0],t[1],n[0]-t[0],n[1]-t[1])},_addBounds:function(e,t,n,r,i,a,o,s,l){function u(e,t){var n=e-t,r=e+t;ns[i]&&(s[i]=r)}var c=3*(t-n)-e+r,h=2*(e+n)-4*t,f=t-e,p=d.solveQuadratic(c,h,f,l),m=4e-7,g=1-m;u(r,0);for(var v=0;v=0&&i<=1&&a<=0&&a>=-1}return!1},isLinear:function(e,t,n){var r=e.divide(3);return t.equals(r)&&n.negate().equals(r)}},function(e,t){this[t]=function(){var t=this._segment1,n=this._segment2;return e(n._point.subtract(t._point),t._handleOut,n._handleIn)},this.statics[t]=function(t){var n=t[0],r=t[1],i=t[6],a=t[7];return e(new p(i-n,a-r),new p(t[2]-n,t[3]-r),new p(t[4]-i,t[5]-a))}},{statics:{},hasHandles:function(){return!this._segment1._handleOut.isZero()||!this._segment2._handleIn.isZero()},isCollinear:function(e){return e&&this.isStraight()&&e.isStraight()&&this.getLine().isCollinear(e.getLine())},isHorizontal:function(){return this.isStraight()&&Math.abs(this.getTangentAt(.5,!0).y)<1e-7},isVertical:function(){return this.isStraight()&&Math.abs(this.getTangentAt(.5,!0).x)<1e-7}}),{beans:!1,getParameterAt:function(e,t){return A.getParameterAt(this.getValues(),e,t)},getParameterOf:function(){return A.getParameterOf(this.getValues(),p.read(arguments))},getLocationAt:function(e,t){var n=t?e:this.getParameterAt(e);return null!=n&&n>=0&&n<=1?new O(this,n):null},getLocationOf:function(){return this.getLocationAt(this.getParameterOf(p.read(arguments)),!0)},getOffsetOf:function(){var e=this.getLocationOf.apply(this,arguments);return e?e.getOffset():null},getNearestLocation:function(){var e=p.read(arguments),t=this.getValues(),n=A.getNearestParameter(t,e),r=A.getPoint(t,n);return new O(this,n,r,null,e.getDistance(r))},getNearestPoint:function(){return this.getNearestLocation.apply(this,arguments).getPoint()}},new function(){var e=["getPoint","getTangent","getNormal","getWeightedTangent","getWeightedNormal","getCurvature"];return s.each(e,function(e){this[e+"At"]=function(t,n){var r=this.getValues();return A[e](r,n?t:A.getParameterAt(r,t,0))}},{statics:{evaluateMethods:e}})},new function(){function e(e){var t=e[0],n=e[1],r=e[2],i=e[3],a=e[4],o=e[5],s=e[6],l=e[7],u=9*(r-a)+3*(s-t),c=6*(t+a)-12*r,h=3*(r-t),d=9*(i-o)+3*(l-n),f=6*(n+o)-12*i,p=3*(i-n);return function(e){var t=(u*e+c)*e+h,n=(d*e+f)*e+p;return Math.sqrt(t*t+n*n)}}function t(e,t){return Math.max(2,Math.min(16,Math.ceil(32*Math.abs(t-e))))}function n(e,t,n,r){if(null==t||t<0||t>1)return null;var i,a,o=e[0],s=e[1],l=e[2],u=e[3],c=e[4],h=e[5],d=e[6],f=e[7],m=4e-7,g=1-m;if(0===n&&(tg)){var v=tg?(i=3*(d-c),a=3*(f-h)):(i=(3*b*t+2*y)*t+w,a=(3*E*t+2*x)*t+_),r){0===i&&0===a&&(tg)&&(i=c-l,a=h-u);var C=Math.sqrt(i*i+a*a);C&&(i/=C,a/=C)}if(3===n){var k=6*b*t+2*y,S=6*E*t+2*x,P=Math.pow(i*i+a*a,1.5);i=0!==P?(i*S-a*k)/P:0,a=0}}}return 2===n?new p(a,-i):new p(i,a)}return{statics:{getLength:function(n,r,i){if(r===o&&(r=0),i===o&&(i=1),0===r&&1===i&&A.isStraight(n)){var a=n[6]-n[0],s=n[7]-n[1];return Math.sqrt(a*a+s*s)}var l=e(n);return d.integrate(l,r,i,t(r,i))},getParameterAt:function(n,r,i){function a(e){return m+=d.integrate(h,i,e,t(i,e)),i=e,m-r}if(i===o&&(i=r<0?1:0),0===r)return i;var s=Math.abs,l=r>0,u=l?i:0,c=l?1:i,h=e(n),f=d.integrate(h,u,c,t(u,c));if(s(r-f)<1e-12)return l?c:u;if(s(r)>f)return null;var p=r/f,m=0;return d.findRoot(a,h,i+p,u,c,32,1e-12)},getPoint:function(e,t){return n(e,t,0,!1)},getTangent:function(e,t){return n(e,t,1,!0)},getWeightedTangent:function(e,t){return n(e,t,1,!1)},getNormal:function(e,t){return n(e,t,2,!0)},getWeightedNormal:function(e,t){return n(e,t,2,!1)},getCurvature:function(e,t){return n(e,t,3,!1).x}}}},new function(){function e(e,t,n,r,i,a,o,s,l,u,c){var h=t.startConnected,d=t.endConnected,f=4e-7,p=1-f;if(null==i&&(i=A.getParameterOf(n,a)),null!==i&&i>=(h?f:0)&&i<=(d?p:1)&&(null==l&&(l=A.getParameterOf(o,u)),null!==l&&l>=(d?f:0)&&l<=(h?p:1))){var m=t.renormalize;if(m){var g=m(i,l);i=g[0],l=g[1]}var v=new O(r,i,a||A.getPoint(n,i),c),w=new O(s,l,u||A.getPoint(o,l),c),y=v.getPath()===w.getPath()&&v.getIndex()>w.getIndex(),b=y?w:v,_=t.include;v._intersection=w,w._intersection=v,_&&!_(b)||O.insert(e,b,!0)}}function t(i,a,o,s,l,u,c,h,d,f,p,m,g){if(!(++g>=24)){var v,w,y=a[0],b=a[1],x=a[6],E=a[7],C=_.getSignedDistance,k=C(y,b,x,E,a[2],a[3]),S=C(y,b,x,E,a[4],a[5]),P=k*S>0?.75:4/9,T=P*Math.min(0,k,S),N=P*Math.max(0,k,S),M=C(y,b,x,E,i[0],i[1]),I=C(y,b,x,E,i[2],i[3]),L=C(y,b,x,E,i[4],i[5]),O=C(y,b,x,E,i[6],i[7]),B=n(M,I,L,O),z=B[0],D=B[1];if(null!=(v=r(z,D,T,N))&&null!=(w=r(z.reverse(),D.reverse(),T,N))){i=A.getPart(i,v,w);var R=w-v,j=c+(h-c)*v,F=c+(h-c)*w;if(p>.5&&R>.5)if(F-j>f-d){var q=A.subdivide(i,.5),V=j+(F-j)/2;t(a,q[0],s,o,l,u,d,f,j,V,R,!m,g),t(a,q[1],s,o,l,u,d,f,V,F,R,!m,g)}else{var q=A.subdivide(a,.5),V=d+(f-d)/2;t(q[0],i,s,o,l,u,d,V,j,F,R,!m,g),t(q[1],i,s,o,l,u,V,f,j,F,R,!m,g)}else if(Math.max(f-d,F-j)<1e-7){var U=j+(F-j)/2,W=d+(f-d)/2;i=o.getValues(),a=s.getValues(),e(l,u,m?a:i,m?s:o,m?W:U,null,m?i:a,m?o:s,m?U:W,null)}else R>1e-12&&t(a,i,s,o,l,u,d,f,j,F,R,!m,g)}}}function n(e,t,n,r){var i,a=[0,e],o=[1/3,t],s=[2/3,n],l=[1,r],u=t-(2*e+r)/3,c=n-(e+2*r)/3;if(u*c<0)i=[[a,o,l],[a,s,l]];else{var h=u/c;i=[h>=2?[a,o,l]:h<=.5?[a,s,l]:[a,o,s,l],[a,l]]}return(u||c)<0?i.reverse():i}function r(e,t,n,r){return e[0][1]r?i(t,!1,r):e[0][0]}function i(e,t,n){for(var r=e[0][0],i=e[0][1],a=1,o=e.length;a=n:l<=n)return l===n?s:r+(n-i)*(s-r)/(l-i);r=s,i=l}return null}function a(t,n,r,i,a,o){for(var s=A.isStraight(t),l=s?n:t,u=s?t:n,c=u[0],h=u[1],f=u[6],p=u[7],m=f-c,g=p-h,v=Math.atan2(-g,m),w=Math.sin(v),y=Math.cos(v),b=[],_=0;_<8;_+=2){var x=l[_]-c,E=l[_+1]-h;b.push(x*y-E*w,x*w+E*y)}for(var C=[],k=A.solveCubic(b,1,0,C,0,1),_=0;_d.CURVETIME_EPSILON)&&e(a,o,t,r,M,s?N:P,n,i,I,s?P:N)}}}function o(t,n,r,i,a,o){var s=_.intersect(t[0],t[1],t[6],t[7],n[0],n[1],n[6],n[7]);s&&e(a,o,t,r,null,s,n,i,null,s)}return{statics:{_getIntersections:function(n,r,i,s,l,u){if(!r)return A._getSelfIntersection(n,i,l,u);var c=n[0],h=n[1],d=n[6],f=n[7],m=r[0],g=r[1],v=r[6],w=r[7],y=(3*n[2]+c)/4,b=(3*n[3]+h)/4,_=(3*n[4]+d)/4,x=(3*n[5]+f)/4,E=(3*r[2]+m)/4,C=(3*r[3]+g)/4,k=(3*r[4]+v)/4,S=(3*r[5]+w)/4,P=Math.min,T=Math.max;if(!(T(c,y,_,d)>=P(m,E,k,v)&&P(c,y,_,d)<=T(m,E,k,v)&&T(h,b,x,f)>=P(g,C,S,w)&&P(h,b,x,f)<=T(g,C,S,w)))return l;if(!u.startConnected&&!u.endConnected){var N=A.getOverlaps(n,r);if(N){for(var M=0;M<2;M++){var I=N[M];e(l,u,n,i,I[0],null,r,s,I[1],null,!0)}return l}}var L=A.isStraight(n),O=A.isStraight(r),B=L&&O,z=1e-12,D=l.length;if((B?o:L||O?a:t)(n,r,i,s,l,u,0,1,0,1,0,!1,0),B&&l.length>D)return l;var R=new p(c,h),j=new p(d,f),F=new p(m,g),q=new p(v,w);return R.isClose(F,z)&&e(l,u,n,i,0,R,r,s,0,F),!u.startConnected&&R.isClose(q,z)&&e(l,u,n,i,0,R,r,s,1,q),!u.endConnected&&j.isClose(F,z)&&e(l,u,n,i,1,j,r,s,0,F),j.isClose(q,z)&&e(l,u,n,i,1,j,r,s,1,q),l},_getSelfIntersection:function(e,t,n,r){var i=e[0],a=e[1],o=e[2],s=e[3],l=e[4],u=e[5],c=e[6],h=e[7],f=new _(i,a,c,h,!1),m=f.getSide(new p(o,s),!0),g=f.getSide(new p(l,u),!0);if(m===g){var v=(i-l)*(s-h)+(o-c)*(u-a);if(v*m>0)return n}var w=c-3*l+3*o-i,y=l-2*o+i,b=o-i,x=h-3*u+3*s-a,E=u-2*s+a,C=s-a,k=x*b-w*C,S=x*y-w*E,P=E*b-y*C;if(k*k-4*S*P<0){var T,N=[],M=d.solveCubic(w*w+x*x,3*(w*y+x*E),2*(y*y+E*E)+w*b+x*C,y*b+E*C,N,0,1);if(M>0){for(var I=0,L=0;IL&&(L=O,T=N[I])}var B=A.subdivide(e,T);r.endConnected=!0,r.renormalize=function(e,t){return[e*T,t*(1-T)+T]},A._getIntersections(B[0],B[1],t,t,n,r)}}return n},getOverlaps:function(e,t){function n(e){var t=e[6]-e[0],n=e[7]-e[1];return t*t+n*n}var r=Math.abs,i=4e-7,a=2e-7,o=A.isStraight(e),s=A.isStraight(t),l=o&&s;if(l){var u=n(e)a||d.getDistance(new p(h[6],h[7]))>a)return null}else if(o^s)return null;for(var f=[e,t],m=[],g=0,v=0;g<2&&m.length<2;g+=0===v?0:1,v^=1){var w=A.getParameterOf(f[1^g],new p(f[g][0===v?0:6],f[g][0===v?1:7]));if(null!=w){var y=0===g?[v,w]:[w,v];(0===m.length||r(y[0]-m[0][0])>i&&r(y[1]-m[0][1])>i)&&m.push(y)}if(1===g&&0===m.length)break}if(2!==m.length)m=null;else if(!l){var b=A.getPart(e,m[0][0],m[1][0]),x=A.getPart(t,m[0][1],m[1][1]);(r(x[2]-b[2])>a||r(x[3]-b[3])>a||r(x[4]-b[4])>a||r(x[5]-b[5])>a)&&(m=null)}return m}}}}),O=s.extend({_class:"CurveLocation",beans:!0,initialize:function e(t,n,r,i,a){if(n>.9999996){var o=t.getNext();o&&(n=0,t=o)}this._id=f.get(e),this._setCurve(t),this._parameter=n,this._point=r||t.getPointAt(n,!0),this._overlap=i,this._distance=a,this._intersection=this._next=this._prev=null},_setCurve:function(e){var t=e._path;this._version=t?t._version:0,this._curve=e,this._segment=null,this._segment1=e._segment1,this._segment2=e._segment2},_setSegment:function(e){this._setCurve(e.getCurve()),this._segment=e,this._parameter=e===this._segment1?0:1,this._point=e._point.clone()},getSegment:function(){var e=this.getCurve(),t=this._segment;if(!t){var n=this.getParameter();0===n?t=e._segment1:1===n?t=e._segment2:null!=n&&(t=e.getPartLength(0,n)t&&et&&e<=c||e>=-c&&e=i&&n<=a||r>=i&&r<=a)return!this.isTouching();var o=this.getCurve(),s=o.getPrevious(),l=t.getCurve(),u=l.getPrevious(),c=Math.PI;if(!s||!u)return!1;var h=s.getTangentAt(a,!0).negate().getAngleInRadians(),d=o.getTangentAt(i,!0).getAngleInRadians(),f=u.getTangentAt(a,!0).negate().getAngleInRadians(),p=l.getTangentAt(i,!0).getAngleInRadians();return e(f,h,d)^e(p,h,d)&&e(f,d,h)^e(p,d,h)},isOverlap:function(){return!!this._overlap}},s.each(A.evaluateMethods,function(e){var t=e+"At";this[e]=function(){var e=this.getParameter(),n=this.getCurve();return null!=e&&n&&n[t](e,!0)}},{preserve:!0}),new function(){function e(e,t,n){function r(n,r){for(var a=n+r;a>=-1&&a<=i;a+=r){var o=e[(a%i+i)%i];if(!t.getPoint().isClose(o.getPoint(),2e-7))break;if(t.equals(o))return o}return null}for(var i=e.length,a=0,o=i-1;a<=o;){var s,l=a+o>>>1,u=e[l];if(n&&(s=t.equals(u)?u:r(l,-1)||r(l,1)))return t._overlap&&(s._overlap=s._intersection._overlap=!0),s;var c=t.getPath(),h=u.getPath(),d=c===h?t.getIndex()+t.getParameter()-(u.getIndex()+u.getParameter()):c._id-h._id;d<0?o=l-1:a=l+1}return e.splice(a,0,t),t}return{statics:{insert:e,expand:function(t){for(var n=t.slice(),r=0,i=t.length;r0?this.setSegments(t):(this._curves=o,this._selectedSegmentState=0,t||"string"!=typeof e||(this.setPathData(e),e=null)),this._initialize(!t&&e)},_equals:function(e){return this._closed===e._closed&&s.equals(this._segments,e._segments)},clone:function(e){var t=new z(C.NO_INSERT);return t.setSegments(this._segments),t._closed=this._closed,this._clockwise!==o&&(t._clockwise=this._clockwise),this._clone(t,e)},_changed:function e(t){if(e.base.call(this,t),8&t){var n=this._parent;if(n&&(n._currentPath=o),this._length=this._area=this._clockwise=this._monoCurves=o,16&t)this._version++;else if(this._curves)for(var r=0,i=this._curves.length;r0&&this._add(I.readAll(e)),t&&this.setFullySelected(!0)},getFirstSegment:function(){return this._segments[0]},getLastSegment:function(){ return this._segments[this._segments.length-1]},getCurves:function(){var e=this._curves,t=this._segments;if(!e){var n=this._countCurves();e=this._curves=new Array(n);for(var r=0;r0&&(n(d[0],!0),v.push("z")),v.join("")}},{isEmpty:function(){return 0===this._segments.length},_transformContent:function(e){for(var t=new Array(6),n=0,r=this._segments.length;n0?e-1:e},add:function(e){return arguments.length>1&&"number"!=typeof e?this._add(I.readAll(arguments)):this._add([I.read(arguments)])[0]},insert:function(e,t){return arguments.length>2&&"number"!=typeof t?this._add(I.readAll(arguments,1),e):this._add([I.read(arguments,1)],e)[0]},addSegment:function(){return this._add([I.read(arguments)])[0]},insertSegment:function(e){return this._add([I.read(arguments,1)],e)[0]},addSegments:function(e){return this._add(I.readAll(e))},insertSegments:function(e,t){return this._add(I.readAll(t),e)},removeSegment:function(e){return this.removeSegments(e,e+1)[0]||null},removeSegments:function(e,t,n){e=e||0,t=s.pick(t,this._segments.length);var r=this._segments,i=this._curves,a=r.length,o=r.splice(e,t-e),l=o.length;if(!l)return o;for(var u=0;u0&&t===a+(this._closed?1:0)?e-1:e,i=i.splice(d,l);n&&(o._curves=i.slice(1)),this._adjustCurves(d,d)}return this._changed(25),o},clear:"#removeSegments",hasHandles:function(){for(var e=this._segments,t=0,n=e.length;t=0},setClockwise:function(e){this.isClockwise()!=(e=!!e)&&this.reverse(),this._clockwise=e},isFullySelected:function(){var e=this._segments.length;return this._selected&&e>0&&this._selectedSegmentState===7*e},setFullySelected:function(e){e&&this._selectSegments(!0),this.setSelected(e)},setSelected:function e(t){t||this._selectSegments(!1),e.base.call(this,t)},_selectSegments:function(e){var t=this._segments.length;this._selectedSegmentState=e?7*t:0;for(var n=0;n0&&this.setSelected(!0)},flatten:function(e){for(var t=new R(this,64,.1),n=0,r=t.length/Math.ceil(t.length/e),i=t.length+(this._closed?-r:r)/2,a=[];n<=i;)a.push(new I(t.getPointAt(n))),n+=r;this.setSegments(a)},reduce:function(){for(var e=this.getCurves(),t=e.length-1;t>=0;t--){var n=e[t];n.hasHandles()||0!==n.getLength()&&!n.isCollinear(n.getNext())||n.remove()}return this},simplify:function(e){if(this._segments.length>2){var t=new j(this,e||2.5);this.setSegments(t.fit())}},split:function(e,t){if(null===t)return null;if(1===arguments.length){var n=e;if("number"==typeof n&&(n=this.getLocationAt(n)),!n)return null;e=n.index,t=n.parameter}var r=4e-7,i=1-r;t>=i&&(e++,t--);var a=this.getCurves();if(e>=0&&e=r&&a[e++].divide(t,!0);var o,s=this.removeSegments(e,this._segments.length,!0);return this._closed?(this.setClosed(!1),o=this):(o=new z(C.NO_INSERT),o.insertAbove(this,!0),this._clone(o)),o._add(s,0),this.addSegment(s[0]),o}return null},reverse:function(){this._segments.reverse();for(var e=0,t=this._segments.length;e0&&t._index0||E?0:null;if(null!==C&&(C>0?(s=m.getStrokeJoin(),l=m.getStrokeCap(),u=C*m.getMiterLimit(),b=y.add(new p(C,C))):s=l="round"),!t.ends||t.segments||w){if(t.segments||t.handles)for(var k=0;k1?o(h.getSegment())||(h=null):n(h.getPoint(),b)||(h=null)}if(!h&&"miter"===s&&v>1)for(var k=0;ke)return a.getLocationAt(e-l)}return n.length>0&&e<=this.getLength()?new O(n[n.length-1],1):null},getNearestLocation:function(){for(var e=p.read(arguments),t=this.getCurves(),n=1/0,r=null,i=0,a=t.length;i0&&r(d[0])}return{_draw:function(e,n,r){function i(e){return h[(e%d+d)%d]}var o=n.dontStart,s=n.dontFinish||n.clip,l=this.getStyle(),u=l.hasFill(),c=l.hasStroke(),h=l.getDashArray(),d=!a.support.nativeDash&&c&&h&&h.length;if(o||e.beginPath(),!o&&this._currentPath?e.currentPath=this._currentPath:(u||c&&!d||s)&&(t(e,this,r),this._closed&&e.closePath(),o||(this._currentPath=e.currentPath)),!s&&(u||c)&&(this._setStyles(e),u&&(e.fill(l.getWindingRule()),e.shadowColor="rgba(0,0,0,0)"),c)){if(d){o||e.beginPath();var f,p=new R(this,32,.25,r),m=p.length,g=-l.getDashOffset(),v=0;for(g%=m;g>0;)g-=i(v--)+i(v--);for(;g0||f>0)&&p.drawPart(e,Math.max(g,0),Math.max(f,0)),g=f+i(v++)}e.stroke()}},_drawSelected:function(n,r){n.beginPath(),t(n,this,r),n.stroke(),e(n,this._segments,r,a.settings.handleSize)}}},new function(){function e(e){var t=e.length,n=[],r=[],i=2;n[0]=e[0]/i;for(var a=1;a1&&(C*=M,k*=M,S=C*C,P=k*k),M=(S*P-S*N-P*T)/(S*N+P*T),E(M)<1e-12&&(M=0),M<0)throw new Error("Cannot create an arc with the given arguments");n=new p(C*x/k,-k*y/C).multiply((v===h?-1:1)*Math.sqrt(M)).rotate(m).add(d),a=(new b).translate(n).rotate(m).scale(C,k),i=a._inverseTransform(l),r=i.getDirectedAngle(a._inverseTransform(u)),!h&&r>0?r-=360:h&&r<0&&(r+=360)}if(t){var L=new _(l.add(t).divide(2),t.subtract(l).rotate(90),!0),A=new _(t.add(u).divide(2),u.subtract(t).rotate(90),!0),O=new _(l,u),B=O.getSide(t);if(n=L.intersect(A,!0),!n){if(!B)return this.lineTo(u);throw new Error("Cannot create an arc with the given arguments")}i=l.subtract(n),r=i.getDirectedAngle(u.subtract(n));var z=O.getSide(n);0===z?r=B*Math.abs(r):B===z&&(r+=r<0?360:-360)}for(var D=Math.abs(r),R=D>=360?4:Math.ceil(D/90),j=r/R,F=j*Math.PI/360,q=4/3*Math.sin(F)/(1+Math.cos(F)),V=[],U=0;U<=R;U++){var w=u,W=null;if(U0&&(s(e[0],f),s(e[e.length-1],f)),h},_getPenPadding:function(e,t){if(!t)return[e,e];var n=t.shiftless(),r=n.transform(new p(e,0)),i=n.transform(new p(0,e)),a=r.getAngleInRadians(),o=r.getLength(),s=i.getLength(),l=Math.sin(a),u=Math.cos(a),c=Math.tan(a),h=-Math.atan(s*c/o),d=Math.atan(s/(c*o));return[Math.abs(o*Math.cos(h)*u-s*Math.sin(h)*l),Math.abs(s*Math.sin(d)*u+o*Math.cos(d)*l)]},_addBevelJoin:function(e,t,n,r,i,a){var o=e.getCurve(),s=o.getPrevious(),l=o.getPointAt(0,!0),u=s.getNormalAt(1,!0),c=o.getNormalAt(0,!0),h=u.getDirectedAngle(c)<0?-n:n;if(u.setLength(h),c.setLength(h),a&&(i(l),i(l.add(u))),"miter"===t){var d=new _(l.add(u),new p(-u.y,u.x),!0).intersect(new _(l.add(c),new p(-c.y,c.x),!0),!0);if(d&&l.getDistance(d)<=r&&(i(d),!a))return}a||i(l.add(u)),i(l.add(c))},_addSquareCap:function(e,t,n,r,i){var a=e._point,o=e.getLocation(),s=o.getNormal().multiply(n);i&&(r(a.subtract(s)),r(a.add(s))),"square"===t&&(a=a.add(s.rotate(0===o.getParameter()?-90:90))),r(a.add(s)),r(a.subtract(s))},getHandleBounds:function(e,t,n,r,i,a){for(var o=new Array(6),s=1/0,l=-s,u=s,c=l,h=0,d=e.length;hl&&(l=x),Ec&&(c=C)}}return new w(s,u,l-s,c-u)},getRoughBounds:function(e,t,n,r){var i=n.hasStroke()?n.getStrokeWidth()/2:0,a=i;return i>0&&("miter"===n.getStrokeJoin()&&(a=i*n.getMiterLimit()),"square"===n.getStrokeCap()&&(a=Math.max(a,i*Math.sqrt(2)))),z.getHandleBounds(e,t,n,r,z._getPenPadding(i,r),z._getPenPadding(a,r))}}});z.inject({statics:new function(){function e(e,t,n){var r=s.getNamed(n),i=new z(r&&r.insert===!1&&C.NO_INSERT);return i._add(e),i._closed=t,i.set(r)}function t(t,n,i){for(var a=new Array(4),o=0;o<4;o++){var s=r[o];a[o]=new I(s._point.multiply(n).add(t),s._handleIn.multiply(n),s._handleOut.multiply(n))}return e(a,!0,i)}var n=.5522847498307936,r=[new I([-1,0],[0,n],[0,-n]),new I([0,-1],[-n,0],[n,0]),new I([1,0],[0,-n],[0,n]),new I([0,1],[n,0],[-n,0])];return{Line:function(){return e([new I(p.readNamed(arguments,"from")),new I(p.readNamed(arguments,"to"))],!1,arguments)},Circle:function(){var e=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"radius");return t(e,new g(n),arguments)},Rectangle:function(){var t,r=w.readNamed(arguments,"rectangle"),i=g.readNamed(arguments,"radius",0,{readNull:!0}),a=r.getBottomLeft(!0),o=r.getTopLeft(!0),s=r.getTopRight(!0),l=r.getBottomRight(!0);if(!i||i.isZero())t=[new I(a),new I(o),new I(s),new I(l)];else{i=g.min(i,r.getSize(!0).divide(2));var u=i.width,c=i.height,h=u*n,d=c*n;t=[new I(a.add(u,0),null,[-h,0]),new I(a.subtract(0,c),[0,d]),new I(o.add(0,c),null,[0,-d]),new I(o.add(u,0),[-h,0],null),new I(s.subtract(u,0),null,[h,0]),new I(s.add(0,c),[0,-d],null),new I(l.subtract(0,c),null,[0,d]),new I(l.subtract(u,0),[h,0])]}return e(t,!0,arguments)},RoundRectangle:"#Rectangle",Ellipse:function(){var e=P._readEllipse(arguments);return t(e.center,e.radius,arguments)},Oval:"#Ellipse",Arc:function(){var e=p.readNamed(arguments,"from"),t=p.readNamed(arguments,"through"),n=p.readNamed(arguments,"to"),r=s.getNamed(arguments),i=new z(r&&r.insert===!1&&C.NO_INSERT);return i.moveTo(e),i.arcTo(t,n),i.set(r)},RegularPolygon:function(){for(var t=p.readNamed(arguments,"center"),n=s.readNamed(arguments,"sides"),r=s.readNamed(arguments,"radius"),i=360/n,a=!(n%3),o=new p(0,a?-r:r),l=a?-1:.5,u=new Array(n),c=0;c=0;i--){var a=n[i];a instanceof D&&(n.splice.apply(n,[i,1].concat(a.removeChildren())),a.remove())}n=e.base.call(this,t,n,r,z);for(var i=0,s=!r&&n&&n.length;i=0;n--){var r=t[n].reduce();r.isEmpty()&&t.splice(n,1)}if(0===t.length){var r=new z(C.NO_INSERT);return r.insertAbove(this),r.setStyle(this._style),this.remove(),r}return e.base.call(this)},isClockwise:function(){var e=this.getFirstChild();return e&&e.isClockwise()},setClockwise:function(e){this.isClockwise()!==!!e&&this.reverse()},getFirstSegment:function(){var e=this.getFirstChild();return e&&e.getFirstSegment()},getLastSegment:function(){var e=this.getLastChild();return e&&e.getLastSegment()},getCurves:function(){for(var e=this._children,t=[],n=0,r=e.length;n=0;h--){var d=l[h].split();d&&(a(d)&&d.getFirstSegment().setHandleIn(0,0),o.getLastSegment().setHandleOut(0,0))}return a(o),t(k,c,n,r)}function i(e,t){for(var n=e;n;){if(n===t)return;n=n._prev}for(;e._next&&e._next!==t;)e=e._next;if(!e._next){for(;t._prev;)t=t._prev;e._next=t,t._prev=e}}function a(e){for(var t,n,r=4e-7,a=1-r,o=!1,s=[],l=e.length-1;l>=0;l--){var u=e[l],c=u._curve,h=u._parameter,d=h;c!==t?o=!c.hasHandles():n>0&&(h/=n);var f;ha?f=c._segment2:(f=c.divide(h,!0,!0)._segment1,o&&s.push(f)),u._setSegment(f);var p=f._intersection,m=u._intersection;if(p){i(p,m);for(var g=p;g;)i(g._intersection,p),g=g._next}else f._intersection=m;t=c,n=d}for(var l=0,v=s.length;l0)for(var E=f.length-1;E>=0;E--){var C=A.getPoint(x,f[E]).y;Cg?g=C:C>y&&C-(1/0)&&(c=o(new p(l,g),t,!1,r)),v<1/0&&(h=o(new p(l,v),t,!1,r))}else for(var k,S,P=l-i,T=l+i,N=!1,b=0,_=t.length;b<_;b++){var M=t[b],x=M.values,I=M.winding;if(I&&(1===I&&u>=x[1]&&u<=x[7]||u>=x[7]&&u<=x[1])&&1===A.solveCubic(x,1,u,f,0,1)){var L=f[0];if(!(L>s&&N&&M.next!==t[b+1]||Ls&&M.previous===k)){var O=A.getPoint(x,L).x,B=A.getTangent(x,L).y,z=!1;d.isZero(B)&&!A.isStraight(x)||Ls&&B*A.getTangent(M.next.values,0).y<0?r&&O>=P&&O<=T&&(++c,++h,z=!0):O<=P?(c+=I,z=!0):O>=T&&(h+=I,z=!0),M.previous!==t[b-1]&&(N=L=0;E--)s[E].segment._winding=x}function l(e,t){function n(e,t){if(e._visited)return!1;if(!c)return!0;var n=e._winding,r=e._intersection;return r&&t&&h&&r.isOverlap()&&(n=h[n]||n),c(n)}function r(e){return e===o||e===s}function i(e,t){if(!e._next)return e;for(;e;){var i=e._segment,a=i.getNext(),o=a._intersection;if(r(a)||!i._visited&&!a._visited&&(!c||(!t||n(i))&&(!(t&&o&&o.isOverlap())&&n(a)||!t&&o&&n(o._segment))))return e;e=e._next}return null}function a(e,t){for(;e;){var n=e._segment;if(r(n))return n;e=e[t?"_next":"_prev"]}}for(var o,s,l=[],c=u[t],h={unite:{1:2},intersect:{2:1}}[t],f=0,p=e.length;fi?-1:1,previous:n,next:null};n&&(n.next=a),r.push(a),n=a}function t(t){if(0!==A.getLength(t)){var n=t[1],r=t[3],i=t[5],a=t[7];if(A.isStraight(t))e(t);else{var o=3*(r-i)-n+a,s=2*(n+i)-4*r,l=r-n,u=4e-7,c=1-u,h=[],f=d.solveQuadratic(o,s,l,h,u,c);if(0===f)e(t);else{h.sort();var p=h[0],m=A.subdivide(t,p);e(m[0]),f>1&&(p=(h[1]-p)/(1-p),m=A.subdivide(m[1],p),e(m[0])),e(m[1])}}}}var n,r=this._monoCurves;if(!r){r=this._monoCurves=[];for(var i=this.getCurves(),a=this._segments,o=0,s=i.length;o1){var l=a[a.length-1]._point,u=a[0]._point,c=l._x,h=l._y,f=u._x,p=u._y;t([c,h,c,h,f,p,f,p])}if(r.length>0){var m=r[0],g=r[r.length-1];m.previous=g,g.next=m}}return r},getInteriorPoint:function(){var e=this.getBounds(),t=e.getCenter(!0);if(!this.contains(t)){for(var n=this._getMonoCurves(),r=[],i=t.y,a=[],o=0,s=n.length;o=l[1]&&i<=l[7]||i>=l[7]&&i<=l[1])&&A.solveCubic(l,1,i,r,0,1)>0)for(var u=r.length-1;u>=0;u--)a.push(A.getPoint(l,r[u]).x);if(a.length>1)break}t.x=(a[0]+a[1])/2}return t},reorient:function(){return this.setClockwise(!0),this}}),D.inject({_getMonoCurves:function(){for(var e=this._children,t=[],n=0,r=e.length;n0){this.addChildren(e);for(var t=e[0].isClockwise(),n=1,r=e.length;n=0;o--)e[o].contains(i)&&a++;e[n].setClockwise(a%2===0&&t)}}return this}});var R=s.extend({ _class:"PathIterator",initialize:function(e,t,n,r){function i(e,t){var n=A.getValues(e,t,r);s.push(n),a(n,e._index,0,1)}function a(e,t,r,i){if(i-r>c&&!A.isFlatEnough(e,n||.25)){var o=A.subdivide(e,.5),s=(r+i)/2;a(o[0],t,r,s),a(o[1],t,s,i)}else{var h=e[6]-e[0],d=e[7]-e[1],f=Math.sqrt(h*h+d*d);f>1e-6&&(u+=f,l.push({offset:u,value:i,index:t}))}}for(var o,s=[],l=[],u=0,c=1/(t||32),h=e._segments,d=h[0],f=1,p=h.length;f=e){this.index=t;var a=this.parts[t-1],o=a&&a.index==i.index?a.value:0,s=a?a.offset:0;return{value:o+(i.value-o)*(e-s)/(i.offset-s),index:i.index}}}var i=this.parts[this.parts.length-1];return{value:1,index:i.index}},drawPart:function(e,t,n){t=this.getParameterAt(t),n=this.getParameterAt(n);for(var r=t.index;r<=n.index;r++){var i=A.getPart(this.curves[r],r==t.index?t.value:0,r==n.index?n.value:1);r==t.index&&e.moveTo(i[0],i[1]),e.bezierCurveTo.apply(e,i.slice(2))}}},s.each(A.evaluateMethods,function(e){this[e+"At"]=function(t,n){var r=this.getParameterAt(t);return A[e](this.curves[r.index],r.value,n)}},{})),j=s.extend({initialize:function(e,t){for(var n,r=this.points=[],i=e._segments,a=0,o=i.length;a0?[new I(e[0])]:[];return t>1&&this.fitCubic(0,t-1,e[1].subtract(e[0]).normalize(),e[t-2].subtract(e[t-1]).normalize()),this.closed&&(n.shift(),n.pop()),n},fitCubic:function(e,t,n,r){if(t-e==1){var i=this.points[e],a=this.points[t],o=i.getDistance(a)/3;return void this.addCurve([i,i.add(n.normalize(o)),a.add(r.normalize(o)),a])}for(var s,l=this.chordLengthParameterize(e,t),u=Math.max(this.error,this.error*this.error),c=!0,h=0;h<=4;h++){var d=this.generateBezier(e,t,l,n,r),f=this.findMaxError(e,t,d,l);if(f.error=u)break;c=this.reparameterize(e,t,l,d),u=f.error}var p=this.points[s-1].subtract(this.points[s]),m=this.points[s].subtract(this.points[s+1]),g=p.add(m).divide(2).normalize();this.fitCubic(e,s,n,g),this.fitCubic(s,t,g.negate(),r)},addCurve:function(e){var t=this.segments[this.segments.length-1];t.setHandleOut(e[1].subtract(e[0])),this.segments.push(new I(e[3],e[2].subtract(e[3])))},generateBezier:function(e,t,n,r,i){for(var a=1e-12,o=this.points[e],s=this.points[t],l=[[0,0],[0,0]],u=[0,0],c=0,h=t-e+1;ca){var k=l[0][0]*u[1]-l[1][0]*u[0],S=u[0]*l[1][1]-u[1]*l[0][1];x=S/C,E=k/C}else{var P=l[0][0]+l[0][1],T=l[1][0]+l[1][1];x=E=Math.abs(P)>a?u[0]/P:Math.abs(T)>a?u[1]/T:0}var N,M,I=s.getDistance(o),L=a*I;if(xI*I&&(x=E=I/3,N=M=null)}return[o,o.add(N||r.normalize(x)),s.add(M||i.normalize(E)),s]},reparameterize:function(e,t,n,r){for(var i=e;i<=t;i++)n[i-e]=this.findRoot(r,this.points[i],n[i-e]);for(var i=1,a=n.length;i=a&&(a=u,i=o)}return{error:a,index:i}}}),F=C.extend({_class:"TextItem",_boundsSelected:!0,_applyMatrix:!1,_canApplyMatrix:!1,_serializeFields:{content:null},_boundsGetter:"getBounds",initialize:function(e){this._content="",this._lines=[];var t=e&&s.isPlainObject(e)&&e.x===o&&e.y===o;this._initialize(t&&e,!t&&p.read(arguments))},_equals:function(e){return this._content===e._content},_clone:function e(t,n,r){return t.setContent(this._content),e.base.call(this,t,n,r)},getContent:function(){return this._content},setContent:function(e){this._content=""+e,this._lines=this._content.split(/\r\n|\n|\r/gm),this._changed(265)},isEmpty:function(){return!this._content},getCharacterStyle:"#getStyle",setCharacterStyle:"#setStyle",getParagraphStyle:"#getStyle",setParagraphStyle:"#setStyle"}),q=F.extend({_class:"PointText",initialize:function(){F.apply(this,arguments)},clone:function(e){return this._clone(new q(C.NO_INSERT),e)},getPoint:function(){var e=this._matrix.getTranslation();return new m(e.x,e.y,this,"setPoint")},setPoint:function(){var e=p.read(arguments);this.translate(e.subtract(this._matrix.getTranslation()))},_draw:function(e){if(this._content){this._setStyles(e);var t=this._style,n=this._lines,r=t.getLeading(),i=e.shadowColor;e.font=t.getFontStyle(),e.textAlign=t.getJustification();for(var a=0,o=n.length;a1&&(l-=1),o[s]=6*l<1?a+6*(i-a)*l:2*l<1?i:3*l<2?a+(i-a)*(2/3-l)*6:a}return o},"rgb-gray":function(e,t,n){return[.2989*e+.587*t+.114*n]},"gray-rgb":function(e){return[e,e,e]},"gray-hsb":function(e){return[0,0,e]},"gray-hsl":function(e){return[0,0,e]},"gradient-rgb":function(){return[]},"rgb-gradient":function(){return[]}};return s.each(n,function(e,t){r[t]=[],s.each(e,function(e,i){var a=s.capitalize(e),o=/^(hue|saturation)$/.test(e),l=r[t][i]="gradient"===e?function(e){var t=this._components[0];return e=U.read(Array.isArray(e)?e:arguments,0,{readNull:!0}),t!==e&&(t&&t._removeOwner(this),e&&e._addOwner(this)),e}:"gradient"===t?function(){return p.read(arguments,0,{readNull:"highlight"===e,clone:!0})}:function(e){return null==e||isNaN(e)?0:e};this["get"+a]=function(){return this._type===t||o&&/^hs[bl]$/.test(this._type)?this._components[i]:this._convert(t)[i]},this["set"+a]=function(e){this._type===t||o&&/^hs[bl]$/.test(this._type)||(this._components=this._convert(t),this._properties=n[t],this._type=t),this._components[i]=l.call(this,e),this._changed()}},this)},{_class:"Color",_readIndex:!0,initialize:function t(i){var a,o,s,l,u=Array.prototype.slice,c=arguments,h=0;Array.isArray(i)&&(c=i,i=c[0]);var d=null!=i&&typeof i;if("string"===d&&i in n&&(a=i,i=c[1],Array.isArray(i)?(o=i,s=c[2]):(this.__read&&(h=1),c=u.call(c,1),d=typeof i)),!o){if(l="number"===d?c:"object"===d&&null!=i.length?i:null){a||(a=l.length>=3?"rgb":"gray");var p=n[a].length;s=l[p],this.__read&&(h+=l===arguments?p+(null!=s?1:0):1),l.length>p&&(l=u.call(l,0,p))}else if("string"===d)a="rgb",o=e(i),4===o.length&&(s=o[3],o.length--);else if("object"===d)if(i.constructor===t){if(a=i._type,o=i._components.slice(),s=i._alpha,"gradient"===a)for(var m=1,g=o.length;m1?1:e))}var n=this._convert("rgb"),r=e||null==this._alpha?1:this._alpha;return n=[t(n[0]),t(n[1]),t(n[2])],r<1&&n.push(r<0?0:r),e?"#"+((1<<24)+(n[0]<<16)+(n[1]<<8)+n[2]).toString(16).slice(1):(4==n.length?"rgba(":"rgb(")+n.join(",")+")"},toCanvasStyle:function(e){if(this._canvasStyle)return this._canvasStyle;if("gradient"!==this._type)return this._canvasStyle=this.toCSS();var t,n=this._components,r=n[0],i=r._stops,a=n[1],o=n[2];if(r._radial){var s=o.getDistance(a),l=n[3];if(l){var u=l.subtract(a);u.getLength()>s&&(l=a.add(u.normalize(s-.1)))}var c=l||a;t=e.createRadialGradient(c.x,c.y,0,a.x,a.y,s)}else t=e.createLinearGradient(a.x,a.y,o.x,o.y);for(var h=0,d=i.length;h0&&!(t instanceof D))for(var r=0,s=n.length;r0},hasShadow:function(){return!!this.getShadowColor()&&this.getShadowBlur()>0},getView:function(){return this._project.getView()},getFontStyle:function(){var e=this.getFontSize();return this.getFontWeight()+" "+e+(/[a-z]/i.test(e+"")?" ":"px ")+this.getFontFamily()},getFont:"#getFontFamily",setFont:"#setFontFamily",getLeading:function e(){var t=e.base.call(this),n=this.getFontSize();return/pt|em|%|px/.test(n)&&(n=this.getView().getPixelSize(n)),null!=t?t:1.2*n}}),H=new function(){function e(e,t,n,r){for(var i=["","webkit","moz","Moz","ms","o"],a=t[0].toUpperCase()+t.substring(1),o=0;o<6;o++){var s=i[o],l=s?s+a:t;if(l in e){if(!n)return e[l];e[l]=r;break}}}return{getStyles:function(e){var t=e&&9!==e.nodeType?e.ownerDocument:e,n=t&&t.defaultView;return n&&n.getComputedStyle(e,"")},getBounds:function(e,t){var n,r=e.ownerDocument,i=r.body,a=r.documentElement;try{n=e.getBoundingClientRect()}catch(e){n={left:0,top:0,width:0,height:0}}var o=n.left-(a.clientLeft||i.clientLeft||0),s=n.top-(a.clientTop||i.clientTop||0);if(!t){var l=r.defaultView;o+=l.pageXOffset||a.scrollLeft||i.scrollLeft,s+=l.pageYOffset||a.scrollTop||i.scrollTop}return new w(o,s,n.width,n.height)},getViewportBounds:function(e){var t=e.ownerDocument,n=t.defaultView,r=t.documentElement;return new w(0,0,n.innerWidth||r.clientWidth,n.innerHeight||r.clientHeight)},getOffset:function(e,t){return H.getBounds(e,t).getPoint()},getSize:function(e){return H.getBounds(e,!0).getSize()},isInvisible:function(e){return H.getSize(e).equals(new g(0,0))},isInView:function(e){return!H.isInvisible(e)&&H.getViewportBounds(e).intersects(H.getBounds(e,!0))},getPrefixed:function(t,n){return e(t,n)},setPrefixed:function(t,n,r){if("object"==typeof n)for(var i in n)e(t,i,!0,n[i]);else e(t,n,!0,r)}}},X={add:function(e,t){for(var n in t)for(var r=t[n],i=n.split(/[\s,]+/g),a=0,o=i.length;a=0;t--){var o=i[t],s=o[0],l=o[1];(!l||("true"==u.getAttribute(l,"keepalive")||a)&&H.isInView(l))&&(i.splice(t,1),s())}n&&(i.length?n(e):r=!1)}var t,n=H.getPrefixed(window,"requestAnimationFrame"),r=!1,i=[],a=!0;return X.add(window,{focus:function(){a=!0},blur:function(){a=!1}}),function(a,o){i.push([a,o]),n?r||(n(e),r=!0):t||(t=setInterval(e,1e3/60))}};var K=s.extend(l,{_class:"View",initialize:function e(t,n){function r(e){return n[e]||parseInt(n.getAttribute(e),10)}function i(){var e=H.getSize(n);return e.isNaN()||e.isZero()?new g(r("width"),r("height")):e}this._project=t,this._scope=t._scope,this._element=n;var a;this._pixelRatio||(this._pixelRatio=window.devicePixelRatio||1),this._id=n.getAttribute("id"),null==this._id&&n.setAttribute("id",this._id="view-"+e._id++),X.add(n,this._viewEvents);var o="none";if(H.setPrefixed(n.style,{userSelect:o,touchAction:o,touchCallout:o,contentZooming:o,userDrag:o,tapHighlightColor:"rgba(0,0,0,0)"}),u.hasAttribute(n,"resize")){var s=this;X.add(window,this._windowEvents={resize:function(){s.setViewSize(i())}})}if(this._setViewSize(a=i()),u.hasAttribute(n,"stats")&&"undefined"!=typeof Stats){this._stats=new Stats;var l=this._stats.domElement,c=l.style,h=H.getOffset(n);c.position="absolute",c.left=h.x+"px",c.top=h.y+"px",document.body.appendChild(l)}e._views.push(this),e._viewsById[this._id]=this,this._viewSize=a,(this._matrix=new b)._owner=this,this._zoom=1,e._focused||(e._focused=this),this._frameItems={},this._frameItemCount=0},remove:function(){return!!this._project&&(K._focused===this&&(K._focused=null),K._views.splice(K._views.indexOf(this),1),delete K._viewsById[this._id],this._project._view===this&&(this._project._view=null),X.remove(this._element,this._viewEvents),X.remove(window,this._windowEvents),this._element=this._project=null,this.off("frame"),this._animate=!1,this._frameItems={},!0)},_events:s.each(["onResize","onMouseDown","onMouseUp","onMouseMove"],function(e){this[e]={install:function(e){this._installEvent(e)},uninstall:function(e){this._uninstallEvent(e)}}},{onFrame:{install:function(){this.play()},uninstall:function(){this.pause()}}}),_animate:!1,_time:0,_count:0,_requestFrame:function(){var e=this;X.requestAnimationFrame(function(){e._requested=!1,e._animate&&(e._requestFrame(),e._handleFrame())},this._element),this._requested=!0},_handleFrame:function(){a=this._scope;var e=Date.now()/1e3,t=this._before?e-this._before:0;this._before=e,this._handlingFrame=!0,this.emit("frame",new s({delta:t,time:this._time+=t,count:this._count++})),this._stats&&this._stats.update(),this._handlingFrame=!1,this.update()},_animateItem:function(e,t){var n=this._frameItems;t?(n[e._id]={item:e,time:0,count:0},1===++this._frameItemCount&&this.on("frame",this._handleFrameItems)):(delete n[e._id],0===--this._frameItemCount&&this.off("frame",this._handleFrameItems))},_handleFrameItems:function(e){for(var t in this._frameItems){var n=this._frameItems[t];n.item.emit("frame",new s(e,{time:n.time+=e.delta,count:n.count++}))}},_update:function(){this._project._needsUpdate=!0,this._handlingFrame||(this._animate?this._handleFrame():this.update())},_changed:function(e){1&e&&(this._project._needsUpdate=!0)},_transform:function(e){this._matrix.concatenate(e),this._bounds=null,this._update()},getElement:function(){return this._element},getPixelRatio:function(){return this._pixelRatio},getResolution:function(){return 72*this._pixelRatio},getViewSize:function(){var e=this._viewSize;return new v(e.width,e.height,this,"setViewSize")},setViewSize:function(){var e=g.read(arguments),t=e.subtract(this._viewSize);t.isZero()||(this._viewSize.set(e.width,e.height),this._setViewSize(e),this._bounds=null,this.emit("resize",{size:e,delta:t}),this._update())},_setViewSize:function(e){var t=this._element;t.width=e.width,t.height=e.height},getBounds:function(){return this._bounds||(this._bounds=this._matrix.inverted()._transformBounds(new w(new p,this._viewSize))),this._bounds},getSize:function(){return this.getBounds().getSize()},getCenter:function(){return this.getBounds().getCenter()},setCenter:function(){var e=p.read(arguments);this.scrollBy(e.subtract(this.getCenter()))},getZoom:function(){return this._zoom},setZoom:function(e){this._transform((new b).scale(e/this._zoom,this.getCenter())),this._zoom=e},isVisible:function(){return H.isInView(this._element)},scrollBy:function(){this._transform((new b).translate(p.read(arguments).negate()))},play:function(){this._animate=!0,this._requested||this._requestFrame()},pause:function(){this._animate=!1},draw:function(){this.update()},projectToView:function(){return this._matrix._transformPoint(p.read(arguments))},viewToProject:function(){return this._matrix._inverseTransform(p.read(arguments))}},{statics:{_views:[],_viewsById:{},_id:0,create:function(e,t){return"string"==typeof t&&(t=document.getElementById(t)),new Q(e,t)}}},new function(){function e(e){var t=X.getTarget(e);return t.getAttribute&&K._viewsById[t.getAttribute("id")]}function t(e,t){return e.viewToProject(X.getOffset(t,e._element))}function n(){if(!K._focused||!K._focused.isVisible())for(var e=0,t=K._views.length;ethis._maxDistance&&(this._maxDistance=e)},getMaxDistance:function(){return this._maxDistance},setMaxDistance:function(e){this._maxDistance=e,null!=this._minDistance&&null!=e&&er)t=this._point.add(l.normalize(r));else if(o)return!1}if(a&&t.equals(this._point))return!1}switch(this._lastPoint=i&&"mousemove"==e?t:this._point,this._point=t,e){case"mousedown":this._lastPoint=this._downPoint,this._downPoint=this._point,this._downCount++;break;case"mouseup":this._lastPoint=this._downPoint}return this._count=i?0:this._count+1,!0},_fireEvent:function(e,t){var n=a.project._removeSets;if(n){"mouseup"===e&&(n.mousedrag=null);var r=n[e];if(r){for(var i in r){var o=r[i];for(var s in n){var l=n[s];l&&l!=r&&delete l[o._id]}o.remove()}n[e]=null}}return this.responds(e)&&this.emit(e,new ee(this,e,t))},_handleEvent:function(e,t,n){a=this._scope;var r=!1;switch(e){case"mousedown":this._updateEvent(e,t,null,null,!0,!1,!1),r=this._fireEvent(e,n);break;case"mousedrag":for(var i=!1,o=!1;this._updateEvent(e,t,this.minDistance,this.maxDistance,!1,i,o);)r=this._fireEvent(e,n)||r,i=!0,o=!0;break;case"mouseup":!t.equals(this._point)&&this._updateEvent("mousedrag",t,this.minDistance,this.maxDistance,!1,!1,!1)&&(r=this._fireEvent("mousedrag",n)),this._updateEvent(e,t,null,this.maxDistance,!1,!1,!1),r=this._fireEvent(e,n)||r,this._updateEvent(e,t,null,null,!0,!1,!1),this._firstMove=!0;break;case"mousemove":for(;this._updateEvent(e,t,this.minDistance,this.maxDistance,this._firstMove,!0,!1);)r=this._fireEvent(e,n)||r,this._firstMove=!1}return r&&n.preventDefault(),r}}),{request:function(e,t,n,r){r=r===o||r;var i=new(window.ActiveXObject||XMLHttpRequest)("Microsoft.XMLHTTP");return i.open(e.toUpperCase(),t,r),"overrideMimeType"in i&&i.overrideMimeType("text/plain"),i.onreadystatechange=function(){if(4===i.readyState){var e=i.status;if(0!==e&&200!==e)throw new Error("Could not load "+t+" (Error "+e+")");n.call(i,i.responseText)}},i.send(null)}}),ne={canvases:[],getCanvas:function(e,t){var n,r=!0;"object"==typeof e&&(t=e.height,e=e.width),n=this.canvases.length?this.canvases.pop():document.createElement("canvas");var i=n.getContext("2d");return n.width===e&&n.height===t?r&&i.clearRect(0,0,e+1,t+1):(n.width=e,n.height=t),i.save(),n},getContext:function(e,t){return this.getCanvas(e,t).getContext("2d")},release:function(e){var t=e.canvas?e.canvas:e;t.getContext("2d").restore(),this.canvases.push(t)}},re=new function(){function e(e,t,n){return.2989*e+.587*t+.114*n}function t(t,n,r,i){var a=i-e(t,n,r);f=t+a,p=n+a,m=r+a;var i=e(f,p,m),o=g(f,p,m),s=v(f,p,m);if(o<0){var l=i-o;f=i+(f-i)*i/l,p=i+(p-i)*i/l,m=i+(m-i)*i/l}if(s>255){var u=255-i,c=s-i;f=i+(f-i)*u/c,p=i+(p-i)*u/c,m=i+(m-i)*u/c}}function n(e,t,n){return v(e,t,n)-g(e,t,n)}function r(e,t,n,r){var i,a=[e,t,n],o=v(e,t,n),s=g(e,t,n);s=s===e?0:s===t?1:2,o=o===e?0:o===t?1:2,i=0===g(s,o)?1===v(s,o)?2:1:0,a[o]>a[s]?(a[i]=(a[i]-a[s])*r/(a[o]-a[s]),a[o]=r):a[i]=a[o]=0,a[s]=0,f=a[0],p=a[1],m=a[2]}var i,a,o,l,u,c,h,d,f,p,m,g=Math.min,v=Math.max,w=Math.abs,y={multiply:function(){f=u*i/255,p=c*a/255,m=h*o/255},screen:function(){f=u+i-u*i/255,p=c+a-c*a/255,m=h+o-h*o/255},overlay:function(){f=u<128?2*u*i/255:255-2*(255-u)*(255-i)/255,p=c<128?2*c*a/255:255-2*(255-c)*(255-a)/255,m=h<128?2*h*o/255:255-2*(255-h)*(255-o)/255},"soft-light":function(){var e=i*u/255;f=e+u*(255-(255-u)*(255-i)/255-e)/255,e=a*c/255,p=e+c*(255-(255-c)*(255-a)/255-e)/255,e=o*h/255,m=e+h*(255-(255-h)*(255-o)/255-e)/255},"hard-light":function(){f=i<128?2*i*u/255:255-2*(255-i)*(255-u)/255,p=a<128?2*a*c/255:255-2*(255-a)*(255-c)/255,m=o<128?2*o*h/255:255-2*(255-o)*(255-h)/255},"color-dodge":function(){f=0===u?0:255===i?255:g(255,255*u/(255-i)),p=0===c?0:255===a?255:g(255,255*c/(255-a)),m=0===h?0:255===o?255:g(255,255*h/(255-o))},"color-burn":function(){f=255===u?255:0===i?0:v(0,255-255*(255-u)/i),p=255===c?255:0===a?0:v(0,255-255*(255-c)/a),m=255===h?255:0===o?0:v(0,255-255*(255-h)/o)},darken:function(){f=ui?u:i,p=c>a?c:a,m=h>o?h:o},difference:function(){f=u-i,f<0&&(f=-f),p=c-a,p<0&&(p=-p),m=h-o,m<0&&(m=-m)},exclusion:function(){f=u+i*(255-u-u)/255,p=c+a*(255-c-c)/255,m=h+o*(255-h-h)/255},hue:function(){r(i,a,o,n(u,c,h)),t(f,p,m,e(u,c,h))},saturation:function(){r(u,c,h,n(i,a,o)),t(f,p,m,e(u,c,h))},luminosity:function(){t(u,c,h,e(i,a,o))},color:function(){t(i,a,o,e(u,c,h))},add:function(){f=g(u+i,255),p=g(c+a,255),m=g(h+o,255)},subtract:function(){f=v(u-i,0),p=v(c-a,0),m=v(h-o,0)},average:function(){f=(u+i)/2,p=(c+a)/2,m=(h+o)/2},negation:function(){f=255-w(255-i-u),p=255-w(255-a-c),m=255-w(255-o-h)}},b=this.nativeModes=s.each(["source-over","source-in","source-out","source-atop","destination-over","destination-in","destination-out","destination-atop","lighter","darker","copy","xor"],function(e){this[e]=!0},{}),_=ne.getContext(1,1);s.each(y,function(e,t){var n="darken"===t,r=!1;_.save();try{_.fillStyle=n?"#300":"#a00",_.fillRect(0,0,1,1),_.globalCompositeOperation=t,_.globalCompositeOperation===t&&(_.fillStyle=n?"#a00":"#300",_.fillRect(0,0,1,1),r=_.getImageData(0,0,1,1).data[0]!==n?170:51)}catch(e){}_.restore(),b[t]=r}),ne.release(_),this.process=function(e,t,n,r,s){var g=t.canvas,v="normal"===e;if(v||b[e])n.save(),n.setTransform(1,0,0,1,0,0),n.globalAlpha=r,v||(n.globalCompositeOperation=e),n.drawImage(g,s.x,s.y),n.restore();else{var w=y[e];if(!w)return;for(var _=n.getImageData(s.x,s.y,g.width,g.height),x=_.data,E=t.getImageData(0,0,g.width,g.height).data,C=0,k=x.length;C=3){s=e._closed?"polygon":"polyline";for(var c=[],h=0,d=l.length;h1||/z\S+/i.test(t)?new D(n):new z(n)}function c(n,r){var i,a=(e(n,"href",!0)||"").substring(1),o="radialgradient"===r;if(a)i=N[a].getGradient();else{for(var s=n.childNodes,l=[],u=0,c=s.length;u0&&this.weights;t.beginPath();var r=i(0,this.degree,e,this.knots,n);t.moveTo(r[0],r[1]);for(var a=.01;a<1;a+=.01)r=i(a,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]);r=i(1,this.degree,e,this.knots,n),t.lineTo(r[0],r[1]),t.stroke(),t.closePath()},drawKnots:function(e){var t=this,n=this.knots,r=this.weights.length>0&&this.weights;n.forEach(function(a,o){if(!(on.length-1-t.degree)){var s=i(a,t.degree,e,n,r,!1,!0);t.circle(s[0],s[1],3)}})},drawNodes:function(e){var t,n=this;this.stroke(150),this.nodes.forEach(function(r,a){try{t=i(r,n.degree,e,n.knots,!1,!1,!0),n.line(t[0],t[1],e[a][0],e[a++][1])}catch(e){console.error(e)}})},formKnots:function(e,t){if(t=t===!0,!t)return this.formUniformKnots(e);var n,r=e.length,i=[],a=r-this.degree;for(n=1;n=0;n--)t.push(n);return t.reverse()},formNodes:function(e,t){var n,r,i,a=[this.degree,e.length-1-this.degree],o=[];for(r=0;re[a[1]]||o.push(n)}return o},formWeights:function(e){var t=[];return e.forEach(function(e){return t.push(1)}),t},setDegree:function(e){this.degree+=e,this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)},near:function(e,t,n){var r=e.x-t,i=e.y-n,a=Math.sqrt(r*r+i*i);return a1&&this.setDegree(-1),this.redraw()},keyUp:function(){},keyPressed:function(){},mouseDown:function(){this.isMouseDown=!0,this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp||(this.points.push({x:this.mouseX,y:this.mouseY}),this.knots=this.formKnots(this.points),this.nodes=this.formNodes(this.knots,this.points)),this.redraw()},mouseUp:function(){this.isMouseDown=!1,this.cp=!1,this.redraw()},mouseDrag:function(){this.cp&&(this.cp.x=this.mouseX,this.cp.y=this.mouseY,this.redraw())},mouseMove:function(){},scrolled:function(e){if(this.cp=this.getCurrentPoint(this.mouseX,this.mouseY),this.cp){var t=this.points.indexOf(this.cp);this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),t=this.points.indexOf(this.cp,t+1),t!==-1&&this.weights.length>t&&(this.weights[t]+=.1*e,this.weights[t]<0&&(this.weights[t]=0)),this.redraw()}},setKeyboardValues:function(e){e.ctrlKey||e.metaKey||e.altKey||e.preventDefault(),this.key=e.key,this.keyCode=e.code},setMouseValues:function(e){var t=this.cvs.getBoundingClientRect();this.mouseX=e.clientX-t.left,this.mouseY=e.clientY-t.top},size:function(e,t){this.width=0|e,this.height=0|(t||e),this.cvs.width=this.width,this.cvs.height=this.height,this.ctx=this.cvs.getContext("2d")},redraw:function(){this.draw()},clear:function(){this.ctx.clearRect(0,0,this.width,this.height)},grid:function(e){e=(0|(e||10))+.5,this.stroke(200,200,220);for(var t=e;t-1&&{to:s[e],title:o[s[e]].getDefaultProps().title};var t=this.props.next;return t=t=s)return null;var c={type:t,min:n,max:i,step:a,value:l,onChange:function(t){var n=e.state.weights;n[u]=t.target.value,o&&u.95)&&(t.t=!1),t.redraw()},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[0].y-=10,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelHeight();if(e.setColor("black"),e.t){e.drawCircle(e.curve.get(e.t),3),e.setColor("lightgrey");var r,i,a,o=e.drawHull(t,e.t),s=e.utils; -6===o.length?(r=t.points[1],i=o[5],a=s.lli4(r,i,t.points[0],t.points[2]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[2])):10===o.length&&(r=o[5],i=o[9],a=s.lli4(r,i,t.points[0],t.points[3]),e.setColor("lightgrey"),e.drawLine(t.points[0],t.points[3])),e.setColor("#00FF00"),e.drawLine(r,i),e.setColor("red"),e.drawLine(i,a),e.setColor("black"),e.drawCircle(a,3),e.setFill("black"),e.text("A",{x:10+r.x,y:r.y}),e.text("B (t = "+e.utils.round(e.t,2)+")",{x:10+i.x,y:i.y}),e.text("C",{x:10+a.x,y:a.y});var l=s.dist(r,i),u=s.dist(i,a),c=l/u;e.text("d1 (A-B): "+s.round(l,2)+", d2 (B-C): "+s.round(u,2)+", ratio (d1/d2): "+s.round(c,4),{x:10,y:n-7})}},setCT:function(e,t){t.t=e.offsetX/t.getPanelWidth()},drawCTgraph:function(e){e.reset(),e.setColor("black");var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"u",0,1),e.setColor("blue");var i=function(t){var i=e.u(t),a={x:n+t*r,y:n+i*r};return a};if(e.drawFunction(i),e.t){var a=e.u(e.t),o=e.utils.round(a,3),s=e.utils.round(1-a,3),l=i(e.t);e.drawLine({x:l.x,y:n},l),e.drawLine({x:n,y:l.y},l),e.drawCircle(l,3),e.setFill("blue"),e.text(" t = "+e.utils.round(e.t,3),{x:l.x+10,y:l.y-7}),e.text("u(t) = "+e.utils.round(a,3),{x:l.x+10,y:l.y+7}),e.setFill("black"),e.text("C = "+o+" * start + "+s+" * end",{x:t/2-n,y:n+r})}},drawQCT:function(e){e.u=e.u||function(e){var t=(e-1)*(e-1),n=2*e*e-2*e+1;return t/n},this.drawCTgraph(e)},drawCCT:function(e){e.u=e.u||function(e){var t=(1-e)*(1-e)*(1-e),n=e*e*e+t;return t/n},this.drawCTgraph(e)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="aligning",s=r.createClass({displayName:"Aligning",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},align:function(e,t){var n=t.p1.x,r=t.p1.y,i=-Math.atan2(t.p2.y-r,t.p2.x-n),a=Math.cos,o=Math.sin,s=function(e){return{x:(e.x-n)*a(i)-(e.y-r)*o(i),y:(e.x-n)*o(i)+(e.y-r)*a(i)}};return e.map(s)},draw:function(e,t){e.setPanelCount(2),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.points,r={p1:n[0],p2:n[n.length-1]},i=this.align(n,r),a=new e.Bezier(i),o=e.getPanelWidth(),s=e.getPanelHeight(),l={x:o,y:0};e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:s},l),l.x+=o/4,l.y+=s/2,e.setColor("grey"),e.drawLine({x:0,y:-s/2},{x:0,y:s/2},l),e.drawLine({x:-o/4,y:0},{x:o,y:0},l),e.setFill("grey"),e.setColor("black"),e.drawSkeleton(a,l),e.drawCurve(a,l)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=n(15),s=Math.atan2,l=Math.PI,u=2*l,c=Math.cos,h=Math.sin,d=r.createClass({displayName:"Introduction",statics:{keyHandlingOptions:{propName:"error",values:{38:.1,40:-.1},controller:function(e){e.error<.1&&(e.error=.1)}}},getDefaultProps:function(){return{title:"Approximating Bézier curves with circular arcs"}},setupCircle:function(e){var t=new e.Bezier(70,70,140,40,240,130);e.setCurve(t)},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.error=.5},getCCenter:function(e,t,n,r){var i,a=n.x-t.x,o=n.y-t.y,d=r.x-n.x,f=r.y-n.y,p=a*c(l/2)-o*h(l/2),m=a*h(l/2)+o*c(l/2),g=d*c(l/2)-f*h(l/2),v=d*h(l/2)+f*c(l/2),w=(t.x+n.x)/2,y=(t.y+n.y)/2,b=(n.x+r.x)/2,_=(n.y+r.y)/2,x=w+p,E=y+m,C=b+g,k=_+v,S=e.utils.lli8(w,y,x,E,b,_,C,k),P=e.utils.dist(S,t),T=s(t.y-S.y,t.x-S.x),N=s(n.y-S.y,n.x-S.x),M=s(r.y-S.y,r.x-S.x);return TN||N>M)&&(T+=u),T>M&&(i=M,M=T,T=i)):M s + L - order; i--) {\n let numerator = t - knots[i]\n let denominator = knots[i - L + order] - knots[i]\n let alpha = numerator / denominator\n let v[i] = alpha * v[i] + (1-alpha) * v[i-1]\n }\n }"),r.createElement("p",null,'(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at ',r.createElement("code",null,"i=s")," at each level of the interpolation, and we stop when ",r.createElement("code",null,"i = s - order + level"),", so we always end up with a value for ",r.createElement("code",null,"i")," such that those ",r.createElement("code",null,"v[i-1]")," don't try to use an array index that doesn't exist)"),r.createElement("h2",null,"Open vs. closed paths"),r.createElement("p",null,"Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are ",r.createElement("em",null,"the same point"),". However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order ",r.createElement("code",null,"d")," B-Spline, we need to make the last ",r.createElement("code",null,"d")," point the same as the first ",r.createElement("code",null,"d")," points. And the easiest way to do this is to simply append ",r.createElement("code",null,"points.splice(0,d)")," to ",r.createElement("code",null,"points"),". Done!"),r.createElement("p",null,'Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for ',r.createElement("code",null,"points[0]")," and ",r.createElement("code",null,"points[n-k]")," etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects."),r.createElement("h2",null,"Manipulating the curve through the knot vector"),r.createElement("p",null,"The most important thing to understand when it comes to B-Splines is that they work ",r.createElement("em",null,"because"),' of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the ',r.createElement("em",null,"values")," that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:"),r.createElement("ol",null,r.createElement("li",null,"we can use a uniform knot vector, with equally spaced intervals,"),r.createElement("li",null,"we can use a non-uniform knot vector, without enforcing equally spaced internvals,"),r.createElement("li",null,'we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and'),r.createElement("li",null,"we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.")),r.createElement("h3",null,"Uniform B-Splines"),r.createElement("p",null,"The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines ",r.createElement("em",null,"the same intervals"),", or even [0,2,3,...,18,20,22], which also defines ",r.createElement("em",null,"the same intervals"),", just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature."),r.createElement("div",{ -className:"two-column"},r.createElement(o,{ref:"uniform-spline"}),r.createElement(i,{sketch:n(131),controller:function(t,n){return e.bindKnots(t,n,"uniform-spline")}})),r.createElement("p",null,"This is an important point: the intervals that the knot vector defines are ",r.createElement("em",null,"relative")," intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve."),r.createElement("p",null,"The problem with uniform knot vectors is that, as we need ",r.createElement("code",null,"order"),' control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...'),r.createElement("h3",null,"Reducing local curve complexity by collapsing intervals"),r.createElement("p",null,"By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for ever interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing ",r.createElement("code",null,"order"),' knots creates a situation where all continuity is lost and the curve "kinks".'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"center-cut-bspline"}),r.createElement(i,{sketch:n(126),controller:function(t,n){return e.bindKnots(t,n,"center-cut-bspline")}})),r.createElement("h3",null,"Open-Uniform B-Splines"),r.createElement("p",null,"By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:"),r.createElement("p",null,"For any curve of degree ",r.createElement("code",null,"D")," with control points ",r.createElement("code",null,"N"),", we can define a knot vector of length ",r.createElement("code",null,"N+D+1")," in which the values ",r.createElement("code",null,"0 ... D+1")," are the same, the values ",r.createElement("code",null,"D+1 ... N+1"),' follow the "uniform" pattern, and the values ',r.createElement("code",null,"N+1 ... N+D+1"),' are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.'),r.createElement("div",{className:"two-column"},r.createElement(o,{ref:"open-uniform-bspline"}),r.createElement(i,{sketch:n(129),controller:function(t,n){return e.bindKnots(t,n,"open-uniform-bspline")}})),r.createElement("h3",null,"Non-uniform B-Splines"),r.createElement("p",null,'This is essentialy the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value ',r.createElement("code",null,"knots[k+1]"),"should be equal to, or greater than ",r.createElement("code",null,"knots[k]"),"."),r.createElement("h2",null,"One last thing: Rational B-Splines"),r.createElement("p",null,'While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that\'s "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.'),r.createElement("div",{className:"two-column"},r.createElement(s,{ref:"rational-uniform-bspline-weights"}),r.createElement(i,{scrolling:!0,sketch:n(130),controller:function(t,n,r,i){e.bindWeights(t,r,i,"rational-uniform-bspline-weights")}})),r.createElement("p",null,'Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.'),r.createElement("p",null,"While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last."),r.createElement("h2",null,"Extending our implementation to cover rational splines"),r.createElement("p",null,"The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension."),r.createElement("p",null,"For example, a 2D point ",r.createElement("code",null,"(x,y)")," with weight ",r.createElement("code",null,"w")," becomes a 3D point ",r.createElement("code",null,"(w * x, w * y, w)"),"."),r.createElement("p",null,"We then run the same algorithm as before, which will automaticall perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate."),r.createElement("p",null,'In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point\'s derived weight ',r.createElement("code",null,"w'")," and divide all the regular coordinate dimensions by it, then throw away the weight information."),r.createElement("p",null,"Based on our previous example, we take the final 3D point ",r.createElement("code",null,"(x', y', w')"),", which we then turn back into a 2D point by computing ",r.createElement("code",null,"(x'/w', y'/w')"),". And that's it, we're done!"))}});e.exports=l},function(e,t,n){"use strict";var r=["#C00","#CC0","#0C0","#0CC","#00C","#C0C","#600","#660","#060","#066","#006","#606"];e.exports={degree:3,activeDistance:9,cache:{N:[]},setup:function(){this.size(600,300),this.points=[{x:0,y:0},{x:100,y:-100},{x:200,y:100},{x:300,y:-100},{x:400,y:100},{x:500,y:0}],this.knots=this.formKnots(this.points),this.props.controller&&this.props.controller(this,this.knots),this.draw()},draw:function(){this.clear();var e=25;this.grid(e),this.stroke(0),this.line(e,0,e,this.height);var t=this.height-e;this.line(0,t,this.width,t);for(var n=this.degree,r=this.points.length||4,i=0;i-10&&(l.push({x:i*u,y:i*c}),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a)),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("Curve form has cusp →",{x:n/2-2*i,y:r/2+i/2.5}),e.setColor("#FF00FF"),e.setFill(e.getColor());var h=Math.sqrt;for(o=1;o>=0;o-=.005)l.push({x:i*u,y:i*c}),s=.5*(h(3)*h(4*o-o*o)-o),e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;for(l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 1",{x:n/2+i/4,y:r/2+i/1.5}),e.setColor("#3300FF"),e.setFill(e.getColor()),o=0;o>-n;o-=.01)l.push({x:i*u,y:i*c}),s=(-o*o+3*o)/3,e.drawLine({x:i*u,y:i*c},{x:i*o,y:i*s},a),u=o,c=s;l.push({x:i*u,y:i*c}),e.text("← Curve forms a loop at t = 0",{x:n/2-i+10,y:r/2-1.25*i}),e.setColor("transparent"),e.setFill("rgba(255,120,100,0.2)"),e.drawPath(l,a),l=[{x:-n/2,y:i},{x:n/2,y:i},{x:n/2,y:r},{x:-n/2,y:r}],e.setFill("rgba(0,200,0,0.2)"),e.drawPath(l,a),e.setColor("black"),e.setFill(e.getColor()),e.text("← Curve form has one inflection →",{x:n/2-i,y:r/2+1.75*i}),e.text("← Plain curve ↕",{x:n/2+i/2,y:r/6}),e.text("↕ Double inflection",{x:10,y:r/2-10}),e._map_image=e.toImage(),e._map_loaded=!0},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="catmullconv",s=r.createClass({displayName:"CatmullRomConversion",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="catmullmoulding",s=n(15),l=r.createClass({displayName:"CatmullRomMoulding",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:a.getTitle(o)}},setup:function(e){e.setPanelCount(3),e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}],e.distance=0},convert:function(e,t,n,r){var i=.5;return[t,{x:t.x+(n.x-e.x)/(6*i),y:t.y+(n.y-e.y)/(6*i)},{x:n.x-(r.x-t.x)/(6*i),y:n.y-(r.y-t.y)/(6*i)},n]},draw:function(e){e.reset(),e.setColor("lightblue"),e.drawGrid(10,10);var t=e.lpts;e.setColor("black"),e.setFill("black"),t.forEach(function(t,n){e.drawCircle(t,3),e.text("point "+(n+1),t,{x:10,y:7})});var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0};e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),t.forEach(function(t,n){e.drawCircle(t,3,i)});var a=t[0],o=t[1],s=t[2],l=s.x-a.x,u=s.y-a.y,c=Math.sqrt(l*l+u*u);l/=c,u/=c,e.drawLine(a,s,i);var h={x:a.x+(s.x-o.x)-e.distance*l,y:a.y+(s.y-o.y)-e.distance*u},d={x:a.x+(s.x-o.x)+e.distance*l,y:a.y+(s.y-o.y)+e.distance*u},f=e.utils.lli4(a,s,o,{x:(h.x+d.x)/2,y:(h.y+d.y)/2});e.setColor("blue"),e.drawCircle(f,3,i),e.drawLine(t[1],f,i),e.setColor("#666"),e.drawLine(f,h,i),e.drawLine(f,d,i),e.setFill("blue"),e.text("p0",h,{x:-20+i.x,y:i.y+2}),e.text("p4",d,{x:10+i.x,y:i.y+2}),e.setColor("red"),e.drawCircle(h,3,i),e.drawLine(o,h,i),e.drawLine(a,{x:a.x+(o.x-h.x)/5,y:a.y+(o.y-h.y)/5},i),e.setColor("#00FF00"),e.drawCircle(d,3,i),e.drawLine(o,d,i),e.drawLine(s,{x:s.x+(d.x-o.x)/5,y:s.y+(d.y-o.y)/5},i);var p=new e.Bezier(this.convert(h,a,o,s)),m=new e.Bezier(this.convert(a,o,s,d));e.setColor("lightgrey"),e.drawCurve(p,i),e.drawCurve(m,i),i.x+=n,e.setColor("lightblue"),e.drawGrid(10,10,i),e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawCurve(p,i),e.drawCurve(m,i),e.drawPoints(p.points,i),e.drawPoints(m.points,i),e.setColor("lightgrey"),e.drawLine(p.points[0],p.points[1],i),e.drawLine(p.points[2],m.points[1],i),e.drawLine(m.points[2],m.points[3],i)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.sin,s=Math.cos,l=r.createClass({displayName:"Circles",getDefaultProps:function(){return{title:"Circles and quadratic Bézier curves"}},setup:function(e){e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=20,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t))},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("red"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n),e.setColor("black"),e.drawSkeleton(t),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2,i=Math.atan2(r,n),a=t.curve.points,l=t.r,u=(s(i)-1)/o(i);a[1]={x:t.w/2+l*(s(i)-u*o(i)),y:t.w/2+l*(o(i)+u*s(i))},a[2]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?"),r.createElement("p",null,"You approximate."),r.createElement("p",null,"We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie."),r.createElement("p",null,"Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point."),r.createElement("p",null,"First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:"),r.createElement(i,{preset:"arcfitting",title:"Quadratic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,"As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint."),r.createElement("p",null,"We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle ",r.createElement("i",null,"φ"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",width:"183.39999999999998rem",height:"42rem"})),r.createElement("p",null,"What we want to find is the intersection of the tangents, so we want a point C such that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/5660e8512b07dbac7fcf04633de8002fa25aa962.svg",width:"298.2rem",height:"42rem"})),r.createElement("p",null,"i.e. we want a point that lies on the vertical line through S (at some distance ",r.createElement("i",null,"a")," from S) and also lies on the tangent line through E (at some distance ",r.createElement("i",null,"b")," from E). Solving this gives us:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/d16e7a1c1e9686e1afb82f4ffcec07078d264565.svg",width:"229.6rem",height:"42rem"})),r.createElement("p",null,"First we solve for ",r.createElement("i",null,"b"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3128b31a874166ebe4479d3002d70f280de375a1.svg",width:"588rem",height:"18.2rem"})),r.createElement("p",null,"which yields:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/02b158f9ef2191b970dc2fe69c0903eba2b1f8b5.svg",width:"106.39999999999999rem",height:"40.599999999999994rem"})),r.createElement("p",null,"which we can then substitute in the expression for ",r.createElement("i",null,"a"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3bd9c2d6740ff530aabcbe60252742032af816e9.svg",width:"242.2rem",height:"204.39999999999998rem"})),r.createElement("p",null,"A quick check shows that plugging these values for ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b")," into the expressions for C",r.createElement("sub",null,"x")," and C",r.createElement("sub",null,"y"),' give the same x/y coordinates for both "',r.createElement("i",null,"a"),' away from A" and "',r.createElement("i",null,"b")," away from B\", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for ",r.createElement("i",null,"t=0.5")," (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",width:"197.39999999999998rem",height:"33.599999999999994rem"})),r.createElement("p",null,"We compute T, observing that if ",r.createElement("i",null,"t=0.5"),", the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/bc50559ff8bd9062694a449aae5f6f85f91de909.svg",width:"264.59999999999997rem",height:"36.4rem"})),r.createElement("p",null,"Which, worked out for the x and y components, gives:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c7fca7664a3acb855eeaaf412aa2331202f41097.svg",width:"428.4rem",height:"81.19999999999999rem"})),r.createElement("p",null,"And the distance between these two is the standard Euclidean distance:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3251cd91a1cffc27a1695ece4c13cc651d7007fb.svg",width:"418.59999999999997rem",height:"161rem"})),r.createElement("p",null,"So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi.gif",height:"190px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:")),r.createElement("td",null,this.props.showhref?"http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4":null,r.createElement("p",null,r.createElement("img",{src:"images/arc-q-pi4.gif",height:"174px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ¼π:"))))),r.createElement("p",null,"We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at ",r.createElement("i",null,"t=0.5")," means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!"),r.createElement("p",null,"In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/61a938fa10b77e8c41c3c064ed39bd1145d6bbcc.svg",width:"259rem",height:"56rem"})),r.createElement("p",null,"And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves). "),r.createElement("p",null,"The bottom line? ",r.createElement("strong",null,"Quadratic curves are kind of lousy")," if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves."))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.sin,s=Math.cos,l=Math.tan,u=r.createClass({displayName:"CirclesCubic",getDefaultProps:function(){return{title:"Circles and cubic Bézier curves"}},setup:function(e){e.setSize(400,400),e.w=e.getPanelWidth(),e.h=e.getPanelHeight(),e.pad=80,e.r=e.w/2-e.pad,e.mousePt=!1,e.angle=0;var t={x:e.w-e.pad,y:e.h/2};e.setCurve(new e.Bezier(t,t,t,t))},guessCurve:function(e,t,n){var r={x:(e.x+n.x)/2,y:(e.y+n.y)/2},i={x:t.x+(t.x-r.x)/3,y:t.y+(t.y-r.y)/3},a=(n.x-e.x)/4,o=(n.y-e.y)/4,s={x:t.x-a,y:t.y-o},l={x:t.x+a,y:t.y+o},u={x:i.x+2*(s.x-i.x),y:i.y+2*(s.y-i.y)},c={x:i.x+2*(l.x-i.x),y:i.y+2*(l.y-i.y)},h={x:e.x+2*(u.x-e.x),y:e.y+2*(u.y-e.y)},d={x:n.x+2*(c.x-n.x),y:n.y+2*(c.y-n.y)};return[h,d]},draw:function(e,t){e.reset(),e.setColor("lightgrey"),e.drawGrid(1,1),e.setColor("rgba(255,0,0,0.4)"),e.drawCircle({x:e.w/2,y:e.h/2},e.r),e.setColor("transparent"),e.setFill("rgba(100,255,100,0.4)");var n={x:e.w/2,y:e.h/2,r:e.r,s:e.angle<0?e.angle:0,e:e.angle<0?0:e.angle};e.drawArc(n);var r={x:e.w/2+e.r*s(e.angle/2),y:e.w/2+e.r*o(e.angle/2)},i=t.points[0],a=t.points[3],l=this.guessCurve(i,r,a),u=new e.Bezier([i,l[0],l[1],a]);e.setColor("rgb(140,140,255)"),e.drawLine(u.points[0],u.points[1]),e.drawLine(u.points[1],u.points[2]),e.drawLine(u.points[2],u.points[3]),e.setColor("blue"),e.drawCurve(u),e.drawCircle(u.points[1],3),e.drawCircle(u.points[2],3),e.drawSkeleton(t),e.setColor("black"),e.drawLine(t.points[1],t.points[2]),e.drawCurve(t)},onMouseMove:function(e,t){var n=e.offsetX-t.w/2,r=e.offsetY-t.h/2;if(!(n>t.w/2)){var i=Math.atan2(r,n);i<0&&(i=2*Math.PI+i);var a=t.curve.points,u=t.r,c=4*l(i/4)/3;a[1]={x:t.w/2+u,y:t.w/2+u*c},a[2]={x:t.w/2+t.r*(s(i)+c*o(i)),y:t.w/2+t.r*(o(i)-c*s(i))},a[3]={x:t.w/2+t.r*s(i),y:t.w/2+t.r*o(i)},t.setCurve(new t.Bezier(a)),t.angle=i}},drawCircle:function(e){e.setSize(325,325),e.reset();var t=e.getPanelWidth(),n=e.getPanelHeight(),r=60,i=t/2-r,a=.55228,o={x:-r/2,y:-r/4},s=new e.Bezier([{x:t/2+i,y:n/2},{x:t/2+i,y:n/2+a*i},{x:t/2+a*i,y:n/2+i},{x:t/2,y:n/2+i}]);e.setColor("lightgrey"),e.drawLine({x:0,y:n/2},{x:t+r,y:n/2},o),e.drawLine({x:t/2,y:0},{x:t/2,y:n+r},o);var l=s.points;e.setColor("red"),e.drawPoint(l[0],o),e.drawPoint(l[1],o),e.drawPoint(l[2],o),e.drawPoint(l[3],o),e.drawCurve(s,o),e.setColor("rgb(255,160,160)"),e.drawLine(l[0],l[1],o),e.drawLine(l[1],l[2],o),e.drawLine(l[2],l[3],o),e.setFill("red"),e.text(l[0].x-t/2+","+(l[0].y-n/2),{x:l[0].x+7,y:l[0].y+3},o),e.text(l[1].x-t/2+","+(l[1].y-n/2),{x:l[1].x+7,y:l[1].y+3},o),e.text(l[2].x-t/2+","+(l[2].y-n/2),{x:l[2].x+7,y:l[2].y+7},o),e.text(l[3].x-t/2+","+(l[3].y-n/2),{x:l[3].x,y:l[3].y+13},o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("blue"),e.drawCurve(s,o),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setFill("blue"),e.text("reflected",{x:l[2].x-r/2,y:l[2].y+13},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),l.forEach(function(e){e.y=-(e.y-n)}),e.setColor("green"),e.drawCurve(s,o),l.forEach(function(e){e.x=-(e.x-t)}),e.setColor("purple"),e.drawCurve(s,o),e.drawLine(l[1],l[0],o),e.drawPoint(l[1],o),e.setFill("purple"),e.text("reflected",{x:l[1].x+10,y:l[1].y+3},o),e.setColor("rgb(200,200,255)"),e.drawLine(l[2],l[3],o),e.drawPoint(l[2],o),e.setColor("black"),e.setFill("black"),e.drawLine({x:t/2,y:n/2},{x:t/2+i-2,y:n/2},o),e.drawLine({x:t/2,y:n/2},{x:t/2,y:n/2+i-2},o),e.text("r = "+i,{x:t/2+i/3,y:n/2+10},o)},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?"),r.createElement("p",null,'For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle\'s tangent lines at the start and end point.'),r.createElement("p",null,'The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points. However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won\'t be all that useful: guessing the solution based on knowing the solution is not really guessing.'),r.createElement("p",null,'So have a graphical look at a "bad" guess versus the true fit, where we\'ll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:'),r.createElement(i,{preset:"arcfitting",title:"Cubic Bézier arc approximation",setup:this.setup,draw:this.draw,onMouseMove:this.onMouseMove}),r.createElement("p",null,'We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.'),r.createElement("p",null,'We can already seethat cubic curves are a lot better than quadratic curves, and don\'t look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!'),r.createElement("p",null,'So, maths time again: how okay is "okay"? Let\'s apply some more maths to find out.'),r.createElement("p",null,"Unlike for the quadratic curve, we can't use ",r.createElement("i",null,"t=0.5")," as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different ",r.createElement("i",null,"t")," value. If we run some analysis on the curve we find that the actual ",r.createElement("i",null,"t"),' value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don\'t know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.'),r.createElement("p",null,"So instead of walking you through the derivation for that value, let's simply take that ",r.createElement("i",null,"t")," value and see what the error is for circular arcs with an angle ranging from 0 to 2π:"),r.createElement("table",null,r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",null,r.createElement("p",null,r.createElement("img",{ -src:"images/arc-c-2pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ 2π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ π:")),r.createElement("td",null,r.createElement("p",null,r.createElement("img",{src:"images/arc-c-pi2.gif",height:"187px"})),r.createElement("p",null,"plotted for 0 ≤ φ ≤ ½π:"))))),r.createElement("p",null,"We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two \"bulge\" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!"),r.createElement("p",null,'In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it\'s generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won\'t notice that it\'s not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.'),r.createElement("p",null,'So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they\'re the same as for the quadratic attempt:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ef34ab8f466ed3294895135a346b55ada05d779d.svg",width:"183.39999999999998rem",height:"42rem"})),r.createElement("p",null,"But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4df65dae78bc5a0e6c5f23a2faae9a9d7a8b39b3.svg",width:"118.99999999999999rem",height:"42rem"})),r.createElement("p",null,'where "a" is some scaling factor, and:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/cb32f8f9c3ae2b264a48003c237a798d02dc8935.svg",width:"170.79999999999998rem",height:"42rem"})),r.createElement("p",null,'where "b" is also some scaling factor.'),r.createElement("p",null,"Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonoetric identities, so if you just want to see the final result just skip past the next section!"),r.createElement("div",{className:"note"},r.createElement("h2",null,"Let's do this thing."),r.createElement("p",null,"Unlike for the quadratic case, we need some more information in order to compute ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),", since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C",r.createElement("sub",null,"1")," will apply to C",r.createElement("sub",null,"2")," as well (rotated along its tangent), so we'll focus on finding the location of C",r.createElement("sub",null,"1")," only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem."),r.createElement("p",null,"If we look at the triangle that is formed between our starting point, or initial guess C",r.createElement("sub",null,"1"),"and our real C",r.createElement("sub",null,"1"),", there's something funny going on: if we treat the line ","{","start,guess","}"," as our opposite side, the line ","{","guess,real","}"," as our adjacent side, with ","{","start,real","}"," our hypothenuse, then the angle for the corner hypothenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is ","{","start,guess","}",", so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve ",r.createElement("i",null,"t=0.5")," value."),r.createElement("p",null,"The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using ",r.createElement("i",null,"t=0.5"),' as our point "B" in the "A,B,C" projection, then we know the length of the line segment ',"{","C,A","}",", since it's d",r.createElement("sub",null,"1")," = ","{","A,B","}"," + d",r.createElement("sub",null,"2")," = ","{","B,C","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/b15a274c1e0a6aeeaf517b5d2c8ee0a7997dd617.svg",width:"417.2rem",height:"42rem"})),r.createElement("p",null,"So that just leaves us to find the distance from ",r.createElement("i",null,"t=0.5")," to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our ",r.createElement("i",null,"t=0.5")," point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0b80423188012451e0400f473c19729eb2bad654.svg",width:"197.39999999999998rem",height:"33.599999999999994rem"})),r.createElement("p",null,"And the distance from the origin to the line start/end is another application of angles, since the triangle ","{","origin,start,C","}"," has known angles, and two known sides. We can find the length of the line ","{","origin,C","}",", which lets us trivially compute the coordinate for C:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/9be55fb38d5d30bbc6c7140afb1c7bc097bc044e.svg",width:"274.4rem",height:"70rem"})),r.createElement("p",null,"With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector ","{","start,guess","}",":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/262f2eca63105779f30a0a5445cf76f60786039a.svg",width:"417.2rem",height:"50.4rem"})),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0e83ebbac13a84ef6036bf4be57b3d1b6cb316f8.svg",width:"221.2rem",height:"49rem"})),r.createElement("p",null,"Which means we can now determine the distance ","{","start,guessed","}",", which is the same as the distance","{","C,A","}",", and use that to determine the vertical distance from our start point to our C",r.createElement("sub",null,"1"),":"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c87e454fb11ef7f15c7386e83ca1ce41a004d8a7.svg",width:"264.59999999999997rem",height:"58.8rem"})),r.createElement("p",null,"And after this tedious detour to find the coordinate for C",r.createElement("sub",null,"1"),", we can find C",r.createElement("sub",null,"2")," fairly simply, since it's lies at distance -C",r.createElement("sub",null,"1y")," along the end point's tangent:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/25f027074b6af8ca7b640e27636e3bf89c28afdb.svg",width:"550.1999999999999rem",height:"82.6rem"})),r.createElement("p",null,"And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.")),r.createElement("p",null,"So, to recap, given an angle φ, the new control coordinates are:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c4d82e44d1c67dda8ba26aa6da0f406d05eba618.svg",width:"215.6rem",height:"42rem"})),r.createElement("p",null,"and"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3a4b1ee00eebb7697e5513ef9df673928913252e.svg",width:"337.4rem",height:"42rem"})),r.createElement("p",null,'And, because the "quarter curve" special case comes up so incredibly often, let\'s look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/63e0936b4849d4cdbb9a2e0909181259be951e4d.svg",width:"432.59999999999997rem",height:"35rem"})),r.createElement("p",null,"Which, in decimal values, rounded to six significant digits, is:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/fd12e65204a31319b66355c6ff99e6b3d9603b05.svg",width:"432.59999999999997rem",height:"16.799999999999997rem"})),r.createElement("p",null,"Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:"),r.createElement(i,{preset:"simple",title:"Cubic Bézier circle approximation",draw:this.drawCircle,static:!0}))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i={width:"calc(960px + 2em)",marginTop:0,borderTop:"1px solid rgba(255, 0, 0, 0.5)",paddingTop:"3em"},a=r.createElement("section",{id:"comments",style:i},r.createElement("h2",null,"Comments and questions"),r.createElement("p",null,"If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you can always ",r.createElement("a",{className:"link",href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"buy me a coffee"),", however much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!"),r.createElement("div",{id:"disqus_thread"})),o=r.createClass({displayName:"CommentsAndQuestions",getDefaultProps:function(){return{title:"Comments and Questions"}},componentDidMount:function(){if("undefined"!=typeof document){var e=document.createElement("script");e.setAttribute("async","async"),e.src="lib/site/disqus.js",document.head.appendChild(e)}},render:function(){return a}});e.exports=o},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="components",s=r.createClass({displayName:"Components",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(l),s),s.x+=a-r;var u=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r,e.drawCurve(new e.Bezier(u),s)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="control",s=r.createClass({displayName:"Control",getDefaultProps:function(){return{title:a.getTitle(o)}},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},drawFunction:function(e,t,n,r){e.setRandomColor(),e.drawFunction(r),e.setFill(e.getColor()),t&&e.text(t,n)},drawLerpBox:function(e,t,n,r){e.noColor(),e.setFill("rgba(0,0,100,0.2)");var i={x:r.x-5,y:n},a={x:r.x+5,y:t};e.drawRect(i,a),e.setColor("black")},drawLerpPoint:function(e,t,n,r,i){i.y=n+t*r,e.drawCircle(i,3),e.setFill("black"),e.text((1e4*t|0)/100+"%",{x:i.x+10,y:i.y+4}),e.noFill()},drawQuadraticLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,2*(1-a)*a,n,r,i),this.drawLerpPoint(e,a*a,n,r,i)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-1.5*n,y:t/2+n},function(e){return{x:n+e*r,y:n+2*r*(1-e)*e}}),this.drawFunction(e,"third term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e}})},drawCubicLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i=e.hover;if(i&&i.x>=n&&i.x<=t-n){this.drawLerpBox(e,t,n,i);var a=(i.x-n)/r;this.drawLerpPoint(e,(1-a)*(1-a)*(1-a),n,r,i),this.drawLerpPoint(e,3*(1-a)*(1-a)*a,n,r,i),this.drawLerpPoint(e,3*(1-a)*a*a,n,r,i),this.drawLerpPoint(e,a*a*a,n,r,i)}this.drawFunction(e,"first term",{x:2*n,y:r},function(e){return{x:n+e*r,y:n+r*(1-e)*(1-e)*(1-e)}}),this.drawFunction(e,"second term",{x:t/2-4*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*(1-e)*e}}),this.drawFunction(e,"third term",{x:t/2+2*n,y:t/2},function(e){return{x:n+e*r,y:n+3*r*(1-e)*e*e}}),this.drawFunction(e,"fourth term",{x:r-2.5*n,y:r},function(e){return{x:n+e*r,y:n+r*e*e*e}})},draw15thLerp:function(e){e.reset();var t=e.getPanelWidth(),n=20,r=t-2*n;e.drawAxes(n,"t",0,1,"S","0%","100%");var i,a=[1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1],o=e.hover;if(o&&o.x>=n&&o.x<=t-n)for(this.drawLerpBox(e,t,n,o),i=0;i<=15;i++){var s=(o.x-n)/r,l=a[i]*Math.pow(1-s,15-i)*Math.pow(s,i);this.drawLerpPoint(e,l,n,r,o)}for(i=0;i<=15;i++){var u=!1,c=!1;0===i&&(u="first term",c={x:n+5,y:r}),15===i&&(u="last term",c={x:t-3.5*n,y:r}),this.drawFunction(e,u,c,function(e){return{x:n+e*r,y:n+r*a[i]*Math.pow(1-e,15-i)*Math.pow(e,i)}})}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="curveintersection",s=Math.abs,l=r.createClass({displayName:"CurveIntersections",getDefaultProps:function(){return{title:a.getTitle(o)}},setup:function(e){this.api=e,e.setPanelCount(3);var t=new e.Bezier(10,100,90,30,40,140,220,220),n=new e.Bezier(5,150,180,20,80,250,210,190);e.setCurve(t,n),this.pairReset()},pairReset:function(){this.prevstep=0,this.step=0},draw:function(e,t){var n=this;e.reset();var r={x:0,y:0};t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var i=e.getPanelWidth(),a=e.getPanelHeight();if(r.x+=i,e.drawLine({x:0,y:0},{x:0,y:a},r),0===this.step&&(this.pairs=[{c1:t[0],c2:t[1]}]),this.step!==this.prevstep){var o=this.pairs;this.pairs=[],this.finals=[],o.forEach(function(t){if(t.c1.length()<.6&&t.c2.length()<.6)return n.finals.push(t);var i=t.c1.split(.5);e.setColor("black"),e.drawCurve(t.c1,r),e.setColor("red"),e.drawbbox(i.left.bbox(),r),e.drawbbox(i.right.bbox(),r);var a=t.c2.split(.5);e.setColor("black"),e.drawCurve(t.c2,r),e.setColor("blue"),e.drawbbox(a.left.bbox(),r),e.drawbbox(a.right.bbox(),r),i.left.overlaps(a.left)&&n.pairs.push({c1:i.left,c2:a.left}),i.left.overlaps(a.right)&&n.pairs.push({c1:i.left,c2:a.right}),i.right.overlaps(a.left)&&n.pairs.push({c1:i.right,c2:a.left}),i.right.overlaps(a.right)&&n.pairs.push({c1:i.right,c2:a.right})}),this.prevstep=this.step}else this.pairs.forEach(function(t){e.setColor("black"),e.drawCurve(t.c1,r),e.drawCurve(t.c2,r),e.setColor("red"),e.drawbbox(t.c1.bbox(),r),e.setColor("blue"),e.drawbbox(t.c2.bbox(),r)});0===this.pairs.length&&(this.pairReset(),this.draw(e,t)),r.x+=i,e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:a},r);var l,u,c=t[0].intersects(t[1]).map(function(e){var t=e.split("/").map(function(e){return parseFloat(e)});return{t1:t[0],t2:t[1]}}),h=c[0],d=function(e,t){return s(e.t1-t.t1)<.01&&s(e.t2-t.t2)<.01};for(u=1;u.95)&&(e.text("t = "+Math.round(h),{x:c.x+1.25*s*Math.cos(h)-10,y:c.y+1.25*l*Math.sin(h)+5}),e.drawCircle(u,2,c))}},render:function(){return r.createElement("section",null,o.getContent(s,this))}});e.exports=i(l)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="extended",s=r.createClass({displayName:"Explanation",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=new e.Bezier(70,155,20,110,100,75);e.setCurve(t)},setupCubic:function(e){var t=new e.Bezier(60,105,75,30,215,115,140,160);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("lightgrey");var n,r,i=.05,a=-10,o=t.get(a-i);for(n=a;n<=i;n+=i)r=t.get(n),e.drawLine(o,r),o=r;o=t.get(1);var s=10;for(n=1+i;n<=s;n+=i)r=t.get(n),e.drawLine(o,r),o=r},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="extremities",s=r.createClass({displayName:"Extremities",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();t.points[2].x=210,e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.setPanelCount(3),e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=t.order+1,r=20,i=t.points,a=e.getPanelWidth(),o=e.getPanelHeight(),s={x:a,y:0},l=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.x}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"x",0,a,s),s.x+=r;var u=new e.Bezier(l);e.drawCurve(u,s),e.setColor("red"),u.extrema().y.forEach(function(t){var n=u.get(t);e.drawCircle(n,3,s)}),s.x+=a-r;var c=JSON.parse(JSON.stringify(i)).map(function(e,t){return{x:a*t/n,y:e.y}});e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:o},s),e.drawAxes(r,"t",0,1,"y",0,a,s),s.x+=r;var h=new e.Bezier(c);e.drawCurve(h,s),e.setColor("red"),h.extrema().y.forEach(function(t){var n=h.get(t);e.drawCircle(n,3,s)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="flattening",s=n(15),l=r.createClass({displayName:"Flattening",statics:{keyHandlingOptions:{propName:"steps",values:{38:1,40:-1},controller:function(e){e.steps<1&&(e.steps=1)}}},getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t),e.steps=3},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t),e.steps=5},drawFlattened:function(e,t){e.reset(),e.setColor("#DDD"),e.drawSkeleton(t),e.setColor("#DDD"),e.drawCurve(t);for(var n,r=1/e.steps,i=t.points[0],a=r;a<1+r;a+=r)n=t.get(Math.min(a,1)),e.setColor("red"),e.drawLine(i,n),i=n;e.setFill("black"),e.text("Curve approximation using "+e.steps+" segments",{x:10,y:15})},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.steps+=n,t.steps<1&&(t.steps=1))},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s(l)},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=n(15),s=r.createClass({displayName:"GraduatedOffsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Graduated curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("blue");var n=t.outline(0,0,e.distance,e.distance);n.curves.forEach(function(t){return e.drawCurve(t)})},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"What if we want to do graduated offsetting, starting at some distance ",r.createElement("i",null,"s")," but ending at some other distance ",r.createElement("i",null,"e"),'? well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.'),r.createElement("p",null,'Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the\\ current" sub-curve ',r.createElement("i",null,"S")," (and if the current sub-curve is the first one, ",r.createElement("i",null,"S")," is zero), and we call the full length of our original curve ",r.createElement("i",null,"L"),", then we get the following graduation values:"),r.createElement("ul",null,r.createElement("li",null,"start: map ",r.createElement("i",null,"S")," from interval (",r.createElement("i",null,"0,L"),") to interval ",r.createElement("i",null,"(s,e)")),r.createElement("li",null,"c1: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d1"),", 0,L, s,e)"),", d1 = distance along curve to projection of c1"),r.createElement("li",null,"c2: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+d2"),", 0,L, s,e)"),", d2 = distance along curve to projection of c2"),r.createElement("li",null,"..."),r.createElement("li",null,"end: ",r.createElement("i",null,"map(",r.createElement("strong",null,"S+length(subcurve)"),", 0,L, s,e)"))),r.createElement("p",null,"At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):"),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="inflections",s=r.createClass({displayName:"ABC",getDefaultProps:function(){return{title:a.getTitle(o)}},setupCubic:function(e){var t=new e.Bezier(135,25,25,135,215,75,215,240);e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t),e.setColor("red"),t.inflections().forEach(function(n){e.drawCircle(t.get(n),5)})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="intersections",s=Math.min,l=Math.max,u=r.createClass({displayName:"Intersections",getDefaultProps:function(){return{title:"Intersections"}},setupLines:function(e){var t=new e.Bezier([50,50,150,110]),n=new e.Bezier([50,250,170,170]);e.setCurve(t,n)},drawLineIntersection:function(e,t){e.reset();var n=e.utils.lli4,r=n(t[0].points[0],t[0].points[1],t[1].points[0],t[1].points[1]),i=0;t.forEach(function(t){if(e.drawSkeleton(t),e.setColor("black"),r){var n=t.points,a=s(n[0].x,n[1].x),o=s(n[0].y,n[1].y),u=l(n[0].x,n[1].x),c=l(n[0].y,n[1].y);a<=r.x&&o<=r.y&&u>=r.x&&c>=r.y&&(e.setColor("#00FF00"),i++)}e.drawCurve(t)}),r&&(e.setColor(i<2?"red":"#00FF00"),e.drawCircle(r,3))},setupQuadratic:function(e){var t=e.getDefaultQuadratic(),n=new e.Bezier([15,250,220,20]);e.setCurve(t,n)},setupCubic:function(e){var t=new e.Bezier([100,240,30,60,210,230,160,30]),n=new e.Bezier([25,260,230,20]);e.setCurve(t,n)},draw:function(e,t){e.reset(),t.forEach(function(t){e.drawSkeleton(t),e.drawCurve(t)});var n=e.utils,r={p1:t[1].points[0],p2:t[1].points[1]},i=n.align(t[0].points,r),a=new e.Bezier(i),o=n.roots(a.points);o.forEach(function(n){var r=t[0].get(n);e.drawCircle(r,3),e.text("t = "+n,{x:r.x+5,y:r.y+10})})},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=u},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="introduction",s=r.createClass({displayName:"Introduction",getDefaultProps:function(){return{title:a.getTitle(o)}},drawQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},drawCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},drawCurve:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="matrix",s=r.createClass({displayName:"Matrix",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="matrixsplit",s=r.createClass({displayName:"MatrixSplit",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="moulding",s=Math.abs,l=r.createClass({displayName:"Moulding",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){e.setPanelCount(3);var t=e.getDefaultQuadratic();t.points[2].x-=30,e.setCurve(t)},setupCubic:function(e){e.setPanelCount(3);var t=new e.Bezier([100,230,30,160,200,50,210,160]);t.points[2].y-=20,e.setCurve(t),e.lut=t.getLUT(100)},saveCurve:function(e,t){t.t&&(t.setCurve(t.newcurve),t.t=!1,t.redraw())},findTValue:function(e,t){var n=t.curve.on({x:e.offsetX,y:e.offsetY},7);return!(n<.05||n>.95)&&n},markQB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=2*n,i=r*n-r,a=i+1,o=s(i/a),l=t.curve,u=t.A=l.points[1],c=t.B=l.get(n);t.C=t.utils.lli4(u,c,l.points[0],l.points[2]),t.ratio=o}},markCB:function(e,t){if(t.t=this.findTValue(e,t),t.t){var n=t.t,r=1-n,i=n*n*n,a=r*r*r,o=i+a,l=o-1,u=s(l/o),c=t.curve,h=c.hull(n),d=t.A=h[5],f=t.B=c.get(n);t.db=c.derivative(n),t.C=t.utils.lli4(d,f,c.points[0],c.points[3]),t.ratio=u}},drag:function(e,t){if(t.t){var n=t.newB={x:e.offsetX,y:e.offsetY};t.newA={x:n.x-(t.C.x-n.x)/t.ratio,y:n.y-(t.C.y-n.y)/t.ratio}}},dragQB:function(e,t){t.t&&(this.drag(e,t),t.update=[t.newA])},dragCB:function(e,t){if(t.t){this.drag(e,t);var n=t.curve,r=n.hull(t.t),i=t.B,a=r[7],o=r[8],s={x:a.x-i.x,y:a.y-i.y},l={x:o.x-i.x,y:o.y-i.y},u=n.points,c={x:t.newB.x+s.x,y:t.newB.y+s.y},h={x:t.newA.x-(t.newA.x-c.x)/(1-t.t),y:t.newA.y-(t.newA.y-c.y)/(1-t.t)},d={x:t.newB.x+l.x,y:t.newB.y+l.y},f={x:t.newA.x+(d.x-t.newA.x)/t.t,y:t.newA.y+(d.y-t.newA.y)/t.t},p={x:u[0].x+(h.x-u[0].x)/t.t,y:u[0].y+(h.y-u[0].y)/t.t},m={x:u[3].x-(u[3].x-f.x)/(1-t.t),y:u[3].y-(u[3].y-f.y)/(1-t.t)};t.p1=c,t.p2=d,t.sc1=h,t.sc2=f,t.nc1=p,t.nc2=m,t.update=[p,m]}},drawMould:function(e,t){e.reset(),e.drawSkeleton(t),e.drawCurve(t);var n=e.getPanelWidth(),r=e.getPanelHeight(),i={x:n,y:0},a=e.utils.round;if(e.setColor("black"),e.drawLine({x:0,y:0},{x:0,y:r},i),e.drawLine({x:n,y:0},{x:n,y:r},i),e.t){e.drawCircle(t.get(e.t),3),e.npts=[t.points[0]].concat(e.update).concat([t.points.slice(-1)[0]]),e.newcurve=new e.Bezier(e.npts),e.setColor("lightgrey"),e.drawCurve(e.newcurve);var o=e.drawHull(e.newcurve,e.t,i);if(e.drawLine(e.npts[0],e.npts.slice(-1)[0],i),e.drawLine(e.newA,e.newB,i),e.setColor("grey"),e.drawCircle(e.newA,3,i),e.setColor("blue"),e.drawCircle(e.B,3,i),e.drawCircle(e.C,3,i),e.drawCircle(e.newB,3,i),e.drawLine(e.B,e.C,i),e.drawLine(e.newB,e.C,i),e.setFill("black"),e.text("A'",e.newA,{x:i.x+7,y:i.y+1}),e.text("start",t.get(0),{x:i.x+7,y:i.y+1}),e.text("end",t.get(1),{x:i.x+7,y:i.y+1}),e.setFill("blue"),e.text("B'",e.newB,{x:i.x+7,y:i.y+1}),e.text("B, at t = "+a(e.t,2),e.B,{x:i.x+7,y:i.y+1}),e.text("C",e.C,{x:i.x+7,y:i.y+1}),3===t.order){var s=t.hull(e.t);e.drawLine(s[7],s[8],i),e.drawLine(o[7],o[8],i),e.drawCircle(o[7],3,i),e.drawCircle(o[8],3,i),e.text("e1",o[7],{x:i.x+7,y:i.y+1}),e.text("e2",o[8],{x:i.x+7,y:i.y+1})}i.x+=n,e.setColor("lightgrey"),e.drawSkeleton(e.newcurve,i),e.setColor("black"),e.drawCurve(e.newcurve,i)}else i.x+=n,e.drawCurve(t,i)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=n(15),s=r.createClass({displayName:"Offsetting",statics:{keyHandlingOptions:{propName:"distance",values:{38:1,40:-1}}},getDefaultProps:function(){return{title:"Curve offsetting"}},setup:function(e,t){e.setCurve(t),e.distance=20},setupQuadratic:function(e){var t=e.getDefaultQuadratic();this.setup(e,t)},setupCubic:function(e){var t=e.getDefaultCubic();this.setup(e,t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n=t.reduce();n.forEach(function(t){e.setRandomColor(),e.drawCurve(t),e.drawCircle(t.points[0],1)});var r=n.slice(-1)[0];e.drawPoint(r.points[3]||r.points[2]),e.setColor("red");var i=t.offset(e.distance);i.forEach(function(t){e.drawPoint(t.points[0]),e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2]),e.setColor("blue"),i=t.offset(-e.distance),i.forEach(function(t){e.drawPoint(t.points[0]), -e.drawCurve(t)}),r=i.slice(-1)[0],e.drawPoint(r.points[3]||r.points[2])},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Perhaps you are like me, and you've been writing various small programs that use Bézier curves in some way or another, and at some point you make the step to implementing path extrusion. But you don't want to do it pixel based, you want to stay in the vector world. You find that extruding lines is relatively easy, and tracing outlines is coming along nicely (although junction caps and fillets are a bit of a hassle), and then decide to do things properly and add Bézier curves to the mix. Now you have a problem."),r.createElement("p",null,"Unlike lines, you can't simply extrude a Bézier curve by taking a copy and moving it around, because of the curvatures; rather than a uniform thickness you get an extrusion that looks too thin in places, if you're lucky, but more likely will self-intersect. The trick, then, is to scale the curve, rather than simply copying it. But how do you scale a Bézier curve?"),r.createElement("p",null,"Bottom line: ",r.createElement("strong",null,"you can't"),". So you cheat. We're not going to do true curve scaling, or rather curve offsetting, because that's impossible. Instead we're going to try to generate 'looks good enough' offset curves."),r.createElement("div",{className:"note"},r.createElement("h2",null,'"What do you mean, you can\'t. Prove it."'),r.createElement("p",null,'First off, when I say "you can\'t" what I really mean is "you can\'t offset a Bézier curve with another Bézier curve". not even by using a really high order curve. You can find the function that describes the offset curve, but it won\'t be a polynomial, and as such it cannot be represented as a Bézier curve, which',r.createElement("strong",null,"has")," to be a polynomial. Let's look at why this is:"),r.createElement("p",null,"From a mathematical point of view, an offset curve ",r.createElement("i",null,"O(t)")," is a curve such that, given our original curve",r.createElement("i",null,"B(t)"),", any point on ",r.createElement("i",null,"O(t)")," is a fixed distance ",r.createElement("i",null,"d")," away from coordinate ",r.createElement("i",null,"B(t)"),". So let's math that:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3aff5cef0028337bbb48ae64ad30000c4d5e238f.svg",width:"113.39999999999999rem",height:"16.799999999999997rem"})),r.createElement("p",null,"However, we're working in 2D, and ",r.createElement("i",null,"d")," is a single value, so we want to turn it into a vector. If we want a point distance ",r.createElement("i",null,"d"),' "away" from the curve ',r.createElement("i",null,"B(t)")," then what we really mean is that we want a point at ",r.createElement("i",null,"d"),' times the "normal vector" from point ',r.createElement("i",null,"B(t)"),', where the "normal" is a vector that runs perpendicular ("at a right angle") to the tangent at ',r.createElement("i",null,"B(t)"),". Easy enough:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/2cf48e2f8525258a3fa0fe4f10ec2acef67104b3.svg",width:"158.2rem",height:"16.799999999999997rem"})),r.createElement("p",null,"Now this still isn't very useful unless we know what the formula for ",r.createElement("i",null,"N(t)")," is, so let's find out.",r.createElement("i",null,"N(t)")," runs perpendicular to the original curve tangent, and we know that the tangent is simply",r.createElement("i",null,"B'(t)"),", so we could just rotate that 90 degrees and be done with it. However, we need to ensure that ",r.createElement("i",null,"N(t)")," has the same magnitude for every ",r.createElement("i",null,"t"),", or the offset curve won't be at a uniform distance, thus not being an offset curve at all. The easiest way to guarantee this is to make sure",r.createElement("i",null,"N(t)")," always has length 1, which we can achieve by dividing ",r.createElement("i",null,"B'(t)")," by its magnitude:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/4941ecbff4c50732ba66fec53307456fc605f032.svg",width:"125.99999999999999rem",height:"42rem"})),r.createElement("p",null,"Determining the length requires computing an arc length, and this is where things get Tricky with a capital T. First off, to compute arc length from some start ",r.createElement("i",null,"a")," to end ",r.createElement("i",null,"b"),', we must use the formula we saw earlier. Noting that "length" is usually denoted with double vertical bars:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/f6d8c2965b02363e092acb00bbc1398cfbb170a4.svg",width:"177.79999999999998rem",height:"37.8rem"})),r.createElement("p",null,"So if we want the length of the tangent, we plug in ",r.createElement("i",null,"B'(t)"),", with ",r.createElement("i",null,"t = 0")," as start and",r.createElement("i",null,"t = 1")," as end:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/1f024282044316a9e4b3de2c855d2ceb96aff056.svg",width:"219.79999999999998rem",height:"37.8rem"})),r.createElement("p",null,"And that's where things go wrong. It doesn't even really matter what the second derivative for ",r.createElement("i",null,"B(t)"),"is, that square root is screwing everything up, because it turns our nice polynomials into things that are no longer polynomials."),r.createElement("p",null,"There is a small class of polynomials where the square root is also a polynomial, but they're utterly useless to us: any polynomial with unweighted binomial coefficients has a square root that is also a polynomial. Now, you might think that Bézier curves are just fine because they do, but they don't; remember that only the ",r.createElement("strong",null,"base")," function has binomial coefficients. That's before we factor in our coordinates, which turn it into a non-binomial polygon. The only way to make sure the functions stay binomial is to make all our coordinates have the same value. And that's not a curve, that's a point. We can already create offset curves for points, we call them circles, and they have much simpler functions than Bézier curves."),r.createElement("p",null,"So, since the tangent length isn't a polynomial, the normalised tangent won't be a polynomial either, which means ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that ",r.createElement("i",null,"d")," times ",r.createElement("i",null,"N(t)")," won't be a polynomial, which means that, ultimately, ",r.createElement("i",null,"O(t)")," won't be a polynomial, which means that even if we can determine the function for ",r.createElement("i",null,"O(t)")," just fine (and that's far from trivial!), it simply cannot be represented as a Bézier curve."),r.createElement("p",null,"And that's one reason why Bézier curves are tricky: there are actually a ",r.createElement("i",null,"lot")," of curves that cannot be represent as a Bézier curve at all. They can't even model their own offset curves. They're weird that way. So how do all those other programs do it? Well, much like we're about to do, they cheat. We're going to approximate an offset curve in a way that will look relatively close to what the real offset curve would look like, if we could compute it.")),r.createElement("p",null,'So, you cannot offset a Bézier curve perfectly with another Bézier curve, no matter how high-order you make that other Bézier curve. However, we can chop up a curve into "safe" sub-curves (where safe means that all the control points are always on a single side of the baseline, and the midpoint of the curve at ',r.createElement("i",null,"t=0.5")," is roughly in the centre of the polygon defined by the curve coordinates) and then point-scale those sub-curves with respect to the curve's scaling origin (which is the intersection of the point normals at the start and end points)."),r.createElement("p",null,"A good way to do this reduction is to first find the curve's extreme points, as explained in the earlier section on curve extremities, and use these as initial splitting points. After this initial split, we can check each individual segment to see if it's \"safe enough\" based on where the center of the curve is. If the on-curve point for ",r.createElement("i",null,"t=0.5")," is too far off from the center, we simply split the segment down the middle. Generally this is more than enough to end up with safe segments."),r.createElement("p",null,"The following graphics show off curve offsetting, and you can use your up and down arrow keys to control the distance at which the curve gets offset. The curve first gets reduced to safe segments, each of which is then offset at the desired distance. Especially for simple curves, particularly easily set up for quadratic curves, no reduction is necessary, but the more twisty the curve gets, the more the curve needs to be reduced in order to get segments that can safely be scaled."),r.createElement(i,{preset:"simple",title:"Offsetting a quadratic Bézier curve",setup:this.setupQuadratic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement(i,{preset:"simple",title:"Offsetting a cubic Bézier curve",setup:this.setupCubic,draw:this.draw,onKeyDown:this.props.onKeyDown}),r.createElement("p",null,"You may notice that this may still lead to small 'jumps' in the sub-curves when moving the curve around. This is caused by the fact that we're still performing a naive form of offsetting, moving the control points the same distance as the start and end points. If the curve is large enough, this may still lead to incorrect offsets."))}});e.exports=o(s)},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="pointcurves",s=Math.abs,l=r.createClass({displayName:"PointCurves",getDefaultProps:function(){return{title:a.getTitle(o)}},setup:function(e){e.lpts=[{x:56,y:153},{x:144,y:83},{x:188,y:185}]},onClick:function(e,t){3==t.lpts.length&&(t.lpts=[]),t.lpts.push({x:e.offsetX,y:e.offsetY}),t.redraw()},getQRatio:function(e){var t=2*e,n=t*e-t,r=n+1;return s(n/r)},getCRatio:function(e){var t=1-e,n=e*e*e,r=t*t*t,i=n+r,a=i-1;return s(a/i)},drawQuadratic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setColor("lightblue"),e.drawGrid(10,10),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,3);var s=this.getQRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s};t=new e.Bezier([r,l,i]),e.setColor("lightgrey"),e.drawLine(l,a),e.drawLine(l,r),e.drawLine(l,i),e.setColor("black"),e.drawCircle(l,1),e.drawCurve(t)}},drawCubic:function(e,t){var n=["start","t=0.5","end"];if(e.reset(),e.setFill("black"),e.setColor("black"),e.lpts.forEach(function(t,r){e.drawCircle(t,3),e.text(n[r],t,{x:5,y:2})}),e.setColor("lightblue"),e.drawGrid(10,10),3===e.lpts.length){var r=e.lpts[0],i=e.lpts[2],a=e.lpts[1],o={x:(r.x+i.x)/2,y:(r.y+i.y)/2};e.setColor("blue"),e.drawLine(r,i),e.drawLine(a,o),e.drawCircle(o,1);var s=this.getCRatio(.5),l={x:a.x+(a.x-o.x)/s,y:a.y+(a.y-o.y)/s},u=e.utils.dist(r,i),c=u/8,h=e.utils.dist(a,o),d=4,f=c+h/d,p=f*(i.x-r.x)/u,m=f*(i.y-r.y)/u,g={x:a.x-p,y:a.y-m},v={x:a.x+p,y:a.y+m},w={x:l.x+2*(g.x-l.x),y:l.y+2*(g.y-l.y)},y={x:l.x+2*(v.x-l.x),y:l.y+2*(v.y-l.y)},b={x:r.x+2*(w.x-r.x),y:r.y+2*(w.y-r.y)},_={x:i.x+2*(y.x-i.x),y:i.y+2*(y.y-i.y)};t=new e.Bezier([r,b,_,i]),e.drawLine(g,v),e.setColor("lightgrey"),e.drawLine(l,o),e.drawLine(l,w),e.drawLine(l,y),e.drawLine(r,b),e.drawLine(i,_),e.drawLine(b,_),e.setColor("black"),e.drawCircle(l,1),e.drawCircle(b,1),e.drawCircle(_,1),e.drawCurve(t)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=l},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="pointvectors",s=r.createClass({displayName:"PointVectors",getDefaultProps:function(){return{title:a.getTitle(o)}},setupQuadratic:function(e){var t=e.getDefaultQuadratic();e.setCurve(t)},setupCubic:function(e){var t=e.getDefaultCubic();e.setCurve(t)},draw:function(e,t){e.reset(),e.drawSkeleton(t);var n,r,i,a,o,s,l=20;for(n=0;n<=10;n++)r=n/10,i=t.get(r),a=t.derivative(r),s=Math.sqrt(a.x*a.x+a.y*a.y),a={x:a.x/s,y:a.y/s},o=t.normal(r),e.setColor("blue"),e.drawLine(i,{x:i.x+a.x*l,y:i.y+a.y*l}),e.setColor("red"),e.drawLine(i,{x:i.x+o.x*l,y:i.y+o.y*l}),e.setColor("black"),e.drawCircle(i,3)},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=Math.atan2,s=Math.sqrt,l=Math.sin,u=Math.cos,c=r.createClass({displayName:"PolyBezier",getDefaultProps:function(){return{title:"Forming poly-Bézier curves"}},setupQuadratic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=[{x:r,y:a},{x:t-a,y:a},{x:t-a,y:i},{x:t-a,y:n-a},{x:r,y:n-a},{x:a,y:n-a},{x:a,y:i},{x:a,y:a}];e.lpts=o},setupCubic:function(e){var t=e.getPanelWidth(),n=e.getPanelHeight(),r=t/2,i=n/2,a=40,o=(t-2*a)/2,s=.55228,l=s*o,u=[{x:r,y:a},{x:r+l,y:a},{x:t-a,y:i-l},{x:t-a,y:i},{x:t-a,y:i+l},{x:r+l,y:n-a},{x:r,y:n-a},{x:r-l,y:n-a},{x:a,y:i+l},{x:a,y:i},{x:a,y:i-l},{x:r-l,y:a}];e.lpts=u},movePointsQuadraticLD:function(e,t){for(var n,r,i,a=1;a<4;a++)n=t+(2*a-2)+e.lpts.length,n=e.lpts[n%e.lpts.length],r=t+(2*a-1),r=e.lpts[r%e.lpts.length],i=t+2*a,i=e.lpts[i%e.lpts.length],i.x=r.x+(r.x-n.x),i.y=r.y+(r.y-n.y);i=t+6,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicLD:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n],n.x=r.x+(r.x-e.mp.x),n.y=r.y+(r.y-e.mp.y)},linkDerivatives:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticLD(t,r):r%3!==0&&this.movePointsCubicLD(t,r)}},movePointsQuadraticDirOnly:function(e,t){var n,r,i;[-1,1].forEach(function(a){n=e.mp,r=t+a+e.lpts.length,r=e.lpts[r%e.lpts.length],i=t+2*a+e.lpts.length,i=e.lpts[i%e.lpts.length];var c=o(r.y-n.y,r.x-n.x),h=i.x-r.x,d=i.y-r.y,f=s(h*h+d*d);i.x=r.x+f*u(c),i.y=r.y+f*l(c)}),i=t+4,i=e.lpts[i%e.lpts.length],e.problem=i},movePointsCubicDirOnly:function(e,t){var n,r;t%3===1?(r=t-1,r+=r<0?e.lpts.length:0,n=t-2,n+=n<0?e.lpts.length:0):(r=(t+1)%e.lpts.length,n=(t+2)%e.lpts.length),r=e.lpts[r],n=e.lpts[n];var i=o(r.y-e.mp.y,r.x-e.mp.x),a=n.x-r.x,c=n.y-r.y,h=s(a*a+c*c);n.x=r.x+h*u(i),n.y=r.y+h*l(i)},linkDirection:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0&&this.movePointsQuadraticDirOnly(t,r):r%3!==0&&this.movePointsCubicDirOnly(t,r)}},bufferPoints:function(e,t){t.bpts=JSON.parse(JSON.stringify(t.lpts))},moveQuadraticPoint:function(e,t){this.moveCubicPoint(e,t),[-1,1].forEach(function(n){var r=t-n+e.lpts.length;r=e.lpts[r%e.lpts.length];var i=t-2*n+e.lpts.length;i=e.lpts[i%e.lpts.length];var a=t-3*n+e.lpts.length;a=e.lpts[a%e.lpts.length];var c=o(i.y-r.y,i.x-r.x),h=a.x-i.x,d=a.y-i.y,f=s(h*h+d*d);a.x=i.x+f*u(c),a.y=i.y+f*l(c)});var n=t+4;n=e.lpts[n%e.lpts.length],e.problem=n},moveCubicPoint:function(e,t){var n=e.bpts[t],r=e.lpts[t],i=r.x-n.x,a=r.y-n.y,o=e.lpts.length,s=t-1+o,l=t+1,u=e.bpts[s%o],c=e.bpts[l%o],h=e.lpts[s%o],d=e.lpts[l%o];return h.x=u.x+i,h.y=u.y+a,d.x=c.x+i,d.y=c.y+a,{x:i,y:a}},modelCurve:function(e,t){if(t.mp){var n=8===t.lpts.length,r=t.mp_idx;n?r%2!==0?this.movePointsQuadraticDirOnly(t,r):this.moveQuadraticPoint(t,r):r%3!==0?this.movePointsCubicDirOnly(t,r):this.moveCubicPoint(t,r)}},draw:function(e,t){e.reset();var n=e.lpts,r=8===n.length,i=r?new e.Bezier(n[0],n[1],n[2]):new e.Bezier(n[0],n[1],n[2],n[3]);e.drawSkeleton(i,!1,!0),e.drawCurve(i);var a=r?new e.Bezier(n[2],n[3],n[4]):new e.Bezier(n[3],n[4],n[5],n[6]);e.drawSkeleton(a,!1,!0),e.drawCurve(a);var o=r?new e.Bezier(n[4],n[5],n[6]):new e.Bezier(n[6],n[7],n[8],n[9]);e.drawSkeleton(o,!1,!0),e.drawCurve(o);var s=r?new e.Bezier(n[6],n[7],n[0]):new e.Bezier(n[9],n[10],n[11],n[0]);e.drawSkeleton(s,!1,!0),e.drawCurve(s),e.problem&&(e.setColor("red"),e.drawCircle(e.problem,5))},render:function(){return r.createElement("section",null,r.createElement(a,this.props),r.createElement("p",null,"Much like lines can be chained together to form polygons, Bézier curves can be chained together to form poly-Béziers, and the only trick required is to make sure that:"),r.createElement("ol",null,r.createElement("li",null,"the end point of each section is the starting point of the following section, and"),r.createElement("li",null,"the derivatives across that dual point line up.")),r.createElement("p",null,"Unless, of course, you want discontinuities; then you don't even need 2."),r.createElement("p",null,"We'll cover three forms of poly-Bézier curves in this section. First, we'll look at the kind that just follows point 1. where the end point of a segment is the same point as the start point of the next segment. This leads to poly-Béziers that are pretty hard to work with, but they're the easiest to implement:"),r.createElement(i,{preset:"poly",title:"Unlinked quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw}),r.createElement(i,{preset:"poly",title:"Unlinked cubic poly-Bézier",setup:this.setupCubic,draw:this.draw}),r.createElement("p",null,'Dragging the control points around only affects the curve segments that the control point belongs to, and moving an on-curve point leaves the control points where they are, which is not the most useful for practical modelling purposes. So, let\'s add in the logic we need to make things a little better. We\'ll start by linking up control points by ensuring that the "incoming" derivative at an on-curve point is the same as it\'s "outgoing" derivative:'),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/37740bb1a0b7b1ff48bf3454e52295fc717cacbb.svg",width:"130.2rem",height:"18.2rem"})),r.createElement("p",null,"We can effect this quite easily, because we know that the vector from a curve's last control point to its last on-curve point is equal to the derivative vector. If we want to ensure that the first control point of the next curve matches that, all we have to do is mirror that last control point through the last on-curve point. And mirroring any point A through any point B is really simple:"),r.createElement("p",null,r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ce6e3939608c4ed0598107b06543c2301b91bb7f.svg",width:"319.2rem",height:"42rem"})),r.createElement("p",null,"So let's implement that and see what it gets us. The following two graphics show a quadratic and a cubic poly-Bézier curve again, but this time moving the control points around moves others, too. However, you might see something unexpected going on for quadratic curves..."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDerivatives}),r.createElement("p",null,"As you can see, quadratic curves are particularly ill-suited for poly-Bézier curves, as all the control points are effectively linked. Move one of them, and you move all of them. Not only that, but if we move the on-curve points, it's possible to get a situation where a control point's positions is different depending on whether it's the reflection of its left or right neighbouring control point: we can't even form a proper rule-conforming curve! This means that we cannot use quadratic poly-Béziers for anything other than really, really simple shapes. And even then, they're probably the wrong choice. Cubic curves are pretty decent, but the fact that the derivatives are linked means we can't manipulate curves as well as we might if we relaxed the constraints a little."),r.createElement("p",null,"So: let's relax the requirement a little."),r.createElement("p",null,"We can change the constraint so that we still preserve the ",r.createElement("em",null,"angle")," of the derivatives across sections (so transitions from one section to the next will still look natural), but give up the requirement that they should also have the same ",r.createElement("em",null,"vector length"),". Doing so will give us a much more useful kind of poly-Bézier curve:"),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseMove:this.linkDirection}),r.createElement("p",null,"Cubic curves are now better behaved when it comes to dragging control points around, but the quadratic poly-Bézier still has the problem that moving one control points will move the control points and may ending up defining \"the next\" control point in a way that doesn't work. Quadratic curves really aren't very useful to work with..."),r.createElement("p",null,"Finally, we also want to make sure that moving the on-curve coordinates preserves the relative positions of the associated control points. With that, we get to the kind of curve control that you might be familiar with from applications like Photoshop, Inkscape, Blender, etc."),r.createElement(i,{preset:"poly",title:"Loosely connected quadratic poly-Bézier",setup:this.setupQuadratic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement(i,{preset:"poly",title:"Loosely connected cubic poly-Bézier",setup:this.setupCubic,draw:this.draw,onMouseDown:this.bufferPoints,onMouseMove:this.modelCurve}),r.createElement("p",null,'Again, we see that cubic curves are now rather nice to work with, but quadratic curves have a new, very serious problem: we can move an on-curve point in such a way that we can\'t compute what needs to "happen next". Move the top point down, below the left and right points, for instance. There is no way to preserve correct control points without a kink at the bottom point. Quadratic curves: just not that good...'),r.createElement("p",null,'A final improvement is to offer fine-level control over which points behave which, so that you can have "kinks" or individually controlled segments when you need them, with nicely well-behaved curves for the rest of the path. Implementing that, is left as an excercise for the reader.'))}});e.exports=c},function(e,t,n){"use strict";var r=n(0),i=n(2),a=new i,o="preface",s=r.createClass({displayName:"Preface",getDefaultProps:function(){return{title:a.getTitle(o)}},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12),o=r.createClass({displayName:"Projections",getDefaultProps:function(){return{title:"Projecting a point onto a Bézier curve"}},setup:function(e){e.setSize(320,320);var t=new e.Bezier([{x:248,y:188},{x:218,y:294},{x:45,y:290},{x:12,y:236},{x:14,y:82},{x:186,y:177},{x:221,y:90},{x:18,y:156},{x:34,y:57},{x:198,y:18}]);e.setCurve(t),e._lut=t.getLUT()},findClosest:function(e,t,n){var r,i,a=e.length,o=n(e[0],t),s=0;for(r=1;r1;){for(var o=0;of){r--;break}r<0&&(r=0),r===c.length&&(r=c.length-1),d.push(c[r])}for(n=0;n0;o-=e.step)a=o/100,a>1||(e.setRandomColor(),n={x:d.x+a*(f.x-d.x),y:d.y+a*(f.y-d.y)},r={x:f.x+a*(p.x-f.x),y:f.y+a*(p.y-f.y)},i={x:n.x+a*(r.x-n.x),y:n.y+a*(r.y-n.y)},m={x:0,y:0},e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(d,n,m),e.drawLine(f,r,m),e.setWeight(1),m.x+=c,e.drawCircle(n,3,m),e.drawCircle(r,3,m),e.setWeight(.5),e.drawLine(n,r,m),e.setWeight(1.5),e.drawLine(n,i,m),e.setWeight(1),e.drawCircle(i,3,m),m.x+=c,e.drawCircle(i,3,m),e.text(o+"%, or t = "+e.utils.round(a,2),{x:i.x+10+m.x,y:i.y+10+m.y}))},values:{38:1,40:-1},onKeyDown:function(e,t){var n=this.values[e.keyCode];n&&(e.preventDefault(),t.step+=n,t.step<1&&(t.step=1))},render:function(){return r.createElement("section",null,a.getContent(o,this))}});e.exports=s},function(e,t,n){"use strict";var r=n(0),i=n(14),a=n(12);e.exports={preface:{locale:"en-GB",title:"Preface",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"preface",title:"Preface"}),r.createElement("p",null,"In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories: straight lines, and curves. The first of these are as easy to draw as they are easy to make a computer draw. Give a computer the first and last point in the line, and BAM! straight line. No questions asked."),r.createElement("p",null,"Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless there is a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned, all lines are \"functions\", regardless of whether they're straight or curves. However, that does mean that we need to come up with fast-to-compute functions that lead to nice looking curves on a computer. There's a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention, and is used in pretty much anything that can draw curves: \"Bézier\" curves"),r.createElement("p",null,"They're named after ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Pierre_B%C3%A9zier"},"Pierre Bézier"),', who is principally responsible for getting them known to the world as a curve well-suited for design work (working for Renault and publishing his investigations in 1962), although he was not the first, or only one, to "invent" these type of curves. One might be tempted to say that the mathematician ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Paul_de_Casteljau"},"Paul de Casteljau"),' was first, investigating the nature of these curves in 1959 while working at Citroën, coming up with a really elegant way of figuring out how to draw them. However, de Casteljau did not publish his work, making the question "who was first" hard to answer in any absolute sense. Or is it? Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by ',r.createElement("a",{href:"https://en.wikipedia.org/wiki/Sergei_Natanovich_Bernstein"},"Sergei Natanovich Bernstein"),", with publications on them at least as far back as 1912. Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop \"paths\" or worked with vector drawing programs like Flash, Illustrator or nkscape, those curves you've been drawing are Bézier curves."),r.createElement("p",null,"So, what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want when you do with these curves? That's what this page is for. Prepare to be mathed!"),r.createElement("p",null,"—Pomax (or in the tweetworld, ",r.createElement("a",{href:"https://twitter.com/TheRealPomax"},"@TheRealPomax"),")"),r.createElement("div",{className:"note"},r.createElement("h2",{id:"note-virtually-all-b-zier-graphics-are-interactive-"},"Note: virtually all Bézier graphics are interactive."),r.createElement("p",null,"This page uses interactive examples, relying heavily on ",r.createElement("a",{href:"http://pomax.github.io/bezierjs"},"Bezier.js"),', as well as "real" maths (in LaTeX form) which is typeset using the most excellent ',r.createElement("a",{href:"http://MathJax.org"},"MathJax")," library. The page is generated offline as a React application, using Webpack, which has made adding \"view source\" options considerably more challenging. I'm still trying to figure out how to add them back in, but it didn't feel like it should hold up deploying this update compared to the previous years' version."),r.createElement("h2",{id:"this-book-is-open-source-"},"This book is open source."),r.createElement("p",null,"This book is an open source software project, and lives on two github repositorites. The first is ",r.createElement("a",{href:"https://github.com/pomax/bezierinfo"},"https://github.com/pomax/bezierinfo")," and is the purely-for-presentation version you are viewing right now. The other repository is ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2"},"https://github.com/pomax/BezierInfo-2"),", which is the development version, housing all the html, javascript, and css. You can fork either of these, and pretty much do with them as you please, except for passing it off as your own work wholesale, of course =)"),r.createElement("h2",{id:"how-complicated-is-the-maths-going-to-be-"},"How complicated is the maths going to be?"),r.createElement("p",null,"Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be ",r.createElement("em",null,"far"),' more complicated maths, but if you don\'t feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.'),r.createElement("h2",{id:"questions-comments-"},"Questions, comments:"),r.createElement("p",null,"If you have suggestions for new sections, hit up the ",r.createElement("a",{href:"https://github.com/pomax/BezierInfo-2/issues"},"Github issue tracker")," (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical \"select this section of text and hit the 'question' button to ask a question about it\" system. We'll see."),r.createElement("h2",{id:"buy-me-a-coffee-"},"Buy me a coffee?"),r.createElement("p",null,"If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you can always ",r.createElement("a",{href:"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW"},"buy me a coffee"),", however-much a coffee is where you live. This work has grown over the years, from a small primer to a 70ish print-page-equivalent reader on the subject of Bézier curves, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!")))}},introduction:{locale:"en-GB",title:"A lightning introduction",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"introduction",title:"A lightning introduction",number:"1"}),r.createElement("p",null,"Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more \"intermediate\" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do."),r.createElement("div",{className:"figure"},r.createElement(i,{inline:!0,title:"Quadratic Bézier curves",setup:e.drawQuadratic,draw:e.drawCurve}),r.createElement(i,{inline:!0,title:"Cubic Bézier curves",setup:e.drawCubic,draw:e.drawCurve})),r.createElement("p",null,"These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, the Gimp, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (ttf/otf). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!"))}},whatis:{locale:"en-GB",title:"So what makes a Bézier Curve?",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"whatis",title:"So what makes a Bézier Curve?",number:"2"}),r.createElement("p",null,"Playing with the points for curves may have given you a feel for how Bézier curves behave, but what ",r.createElement("em",null,"are")," Bézier curves, really? There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other uses really simple maths. So... let's start with the simple explanation:"),r.createElement("p",null,"Bezier curves are the result of ",r.createElement("a",{href:"https://en.wikipedia.org/wiki/Linear_interpolation"},"linear interpolations"),". That sounds complicated but you've been doing linear interpolation since you were very young: any time you had to point at something between two other things, you've been applying linear interpolation. It's simply \"picking a point between two points\"."),r.createElement("p",null,"If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8090904d6448ed0c8e6151aecf62f361d51ead96.svg",width:"526.4rem",height:"107.8rem"}),r.createElement("p",null,"So let's look at that in action: the following graphic is interactive in that you can use your up and down arrow keys to increase or decrease the interpolation ratio, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives use two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all ratios taken together— form our Bézier curve:"),r.createElement(i,{title:"Linear Interpolation leading to Bézier curves",setup:e.setup,draw:e.draw,onKeyDown:e.onKeyDown}),r.createElement("p",null,"And that brings us to the complicated maths: calculus."),r.createElement("p",null,'While it doesn\'t look like that\'s what we\'ve just done, we actually just drew a quadratic curve, in steps, rather than in a single go. One of the fascinating parts about Bézier curves is that they can both be described in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations of [...]. That, in turn, means we can look at what these curves can do based on both "real maths" (by examining the functions, their derivatives, and all that stuff), as well as by looking at the "mechanical" composition (which tells us that a curve will never extend beyond the points we used to construct it, for instance)'),r.createElement("p",null,"So let's start looking at Bézier curves a bit more in depth. Their mathematical expressions, the properties we can derive from those, and the various things we can do to, and with, Bézier curves."))}},explanation:{locale:"en-GB",title:"The mathematics of Bézier curves",getContent:function(e){return r.createElement("section",null,r.createElement(a,{name:"explanation",title:"The mathematics of Bézier curves",number:"3"}),r.createElement("p",null,'Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a ',r.createElement("strong",null,"single")," output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say \"alright, well, we want multiple values coming out, so we'll just use more than one function\". An illustration: Let's say we have a function that maps some value, let's call it ",r.createElement("i",null,"x"),", to some other value, using some kind of number manipulation:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/785e792c343b71d4e674ac94d8800940b30917ac.svg",width:"100.8rem",height:"18.2rem"}),r.createElement("p",null,"The notation ",r.createElement("i",null,"f(x)")," is the standard way to show that it's a function (by convention called ",r.createElement("i",null,"f")," if we're only listing one) and its output changes based on one variable (in this case, ",r.createElement("i",null,"x"),"). Change ",r.createElement("i",null,"x"),", and the output for ",r.createElement("i",null,"f(x)")," changes."),r.createElement("p",null,"So far so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/0dfe7562b43441e72201ff4cdd2e8b6e2e3ecb2d.svg",width:"98rem",height:"37.8rem"}),r.createElement("p",null,"There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for ",r.createElement("i",null,"a"),", we're not going to change the output value for ",r.createElement("i",null,"f(b)"),", since ",r.createElement("i",null,"a")," isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ed6f533530199d1e99b3319ba137c1327b0459c0.svg",width:"105rem",height:"42rem"}),r.createElement("p",null,"Multiple functions, but only one variable. If we change the value for ",r.createElement("i",null,"t"),", we change the outcome of both ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)"),". You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels ",r.createElement("i",null,"f",r.createElement("sub",null,"a"),"(t)")," and ",r.createElement("i",null,"f",r.createElement("sub",null,"b"),"(t)")," with what we usually mean with them for parametric curves, things might be a lot more obvious:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/ea632ea75d6a2aeb6fe69c07feb6e76f81884746.svg",width:"81.19999999999999rem",height:"42rem"}),r.createElement("p",null,"There we go. ",r.createElement("i",null,"x"),"/",r.createElement("i",null,"y")," coordinates, linked through some mystery value ",r.createElement("i",null,"t"),"."),r.createElement("p",null,"So, parametric curves don't define a ",r.createElement("i",null,"y")," coordinate in terms of an ",r.createElement("i",null,"x"),' coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of ',r.createElement("i",null,"t"),", then with every change we get ",r.createElement("strong",null,"two")," values, which we can use as (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range ",r.createElement("i",null,"t")," from negative to positive infinity, and the resulting (",r.createElement("i",null,"x"),",",r.createElement("i",null,"y"),") coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for ",r.createElement("i",null,"t")," from 0 to 5, we get this (use your up and down arrow keys to change the plot end value):"),r.createElement(i,{preset:"empty",title:"A (partial) circle: x=sin(t), y=cos(t)",static:!0,setup:e.setup,draw:e.draw,onKeyDown:e.props.onKeyDown}),r.createElement("p",null,"Bézier curves are (one in many classes of) parametric functions, and are characterised by using the same base function for all its dimensions. Unlike the above example, where the ",r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),' values use different functions (one uses a sine, the other a cosine), Bézier curves use the "binomial polynomial" for both ',r.createElement("i",null,"x")," and ",r.createElement("i",null,"y"),". So what are binomial polynomials?"),r.createElement("p",null,"You may remember polynomials from high school, where they're those sums that look like:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/3e8b26cf8833db7089d65e9c6b3953a3140bb19f.svg",width:"224rem",height:"21rem"}),r.createElement("p",null,"If they have a highest order term ",r.createElement("i",null,"x³")," they're called \"cubic\" polynomials, if it's ",r.createElement("i",null,"x²")," it's a \"square\" polynomial, if it's just ",r.createElement("i",null,"x")," it's a line (and if there aren't even any terms with ",r.createElement("i",null,"x")," it's not a polynomial!)"),r.createElement("p",null,"Bézier curves are polynomials of ",r.createElement("i",null,"t"),", rather than ",r.createElement("i",null,"x"),", with the value for ",r.createElement("i",null,"t")," fixed being between 0 and 1, with coefficients ",r.createElement("i",null,"a"),", ",r.createElement("i",null,"b"),' etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values:'),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/565d935cab46bc995f53190102dadfdd1afc08f6.svg",width:"385rem",height:"68.6rem"}),r.createElement("p",null,"I know what you're thinking: that doesn't look too simple, but if we remove ",r.createElement("i",null,"t"),' and add in "times one", things suddenly look pretty easy. Check out these binomial terms:'),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/8c618738924e53a313a31fa407b3d91155525ee1.svg",width:"219.79999999999998rem",height:"91rem"}),r.createElement("p",null,'Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together". Now ',r.createElement("i",null,"that's")," easy to remember."),r.createElement("p",null,"There's an equally simple way to figure out how the polynomial terms work: if we rename ",r.createElement("i",null,"(1-t)")," to ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"t")," to ",r.createElement("i",null,"b"),", and remove the weights for a moment, we get this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/c8740a3a9a63b592e1480883a54024ebdaffaf05.svg",width:"316.4rem",height:"62.99999999999999rem"}),r.createElement("p",null,"It's basically just a sum of \"every combination of ",r.createElement("i",null,"a")," and ",r.createElement("i",null,"b"),'", progressively replacing ',r.createElement("i",null,"a"),"'s with ",r.createElement("i",null,"b"),"'s after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this:"),r.createElement("img",{className:"LaTeX SVG",src:"images/latex/444a01611e5709f702c36f6ca17aa2761c0877a9.svg",width:"315rem",height:"57.4rem"}),r.createElement("p",null,"And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...= and ending at the value listed on top of the Σ)."),r.createElement("div",{className:"howtocode"},r.createElement("h3",{id:"how-to-implement-the-basis-function"},"How to implement the basis function"),r.createElement("p",null,"We could naively implement the basis function as a mathematical construct, using the function as our guide, like this:"),r.createElement("pre",null,"function Bezier(n,t):\n sum = 0\n for(k=0; k= lut.length):\n s = lut.length\n nextRow = new array(size=s+1)\n nextRow[0] = 1\n for(i=1, prev=s-1; i