2 lines
14 KiB
JavaScript
2 lines
14 KiB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("d3-random"),require("d3-selection"),require("d3-shape"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("nls-guilloche",["exports","@angular/core","d3-random","d3-selection","d3-shape","@angular/platform-browser"],e):e(t["nls-guilloche"]={},t.ng.core,null,null,null,t.ng.platformBrowser)}(this,function(t,i,a,r,n,e){"use strict";function h(n,r){var i,a,s,t,o={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return t={next:e(0),"throw":e(1),"return":e(2)},"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function e(e){return function(t){return function(t){if(i)throw new TypeError("Generator is already executing.");for(;o;)try{if(i=1,a&&(s=2&t[0]?a["return"]:t[0]?a["throw"]||((s=a["return"])&&s.call(a),0):a.next)&&!(s=s.call(a,t[1])).done)return s;switch(a=0,s&&(t=[2&t[0],s.value]),t[0]){case 0:case 1:s=t;break;case 4:return o.label++,{value:t[1],done:!1};case 5:o.label++,a=t[1],t=[0];continue;case 7:t=o.ops.pop(),o.trys.pop();continue;default:if(!(s=0<(s=o.trys).length&&s[s.length-1])&&(6===t[0]||2===t[0])){o=0;continue}if(3===t[0]&&(!s||t[1]>s[0]&&t[1]<s[3])){o.label=t[1];break}if(6===t[0]&&o.label<s[1]){o.label=s[1],s=t;break}if(s&&o.label<s[2]){o.label=s[2],o.ops.push(t);break}s[2]&&o.ops.pop(),o.trys.pop();continue}t=r.call(n,o)}catch(e){t=[6,e],a=0}finally{i=s=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([e,t])}}}function s(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,i,a=n.call(t),s=[];try{for(;(void 0===e||0<e--)&&!(r=a.next()).done;)s.push(r.value)}catch(o){i={error:o}}finally{try{r&&!r.done&&(n=a["return"])&&n.call(a)}finally{if(i)throw i.error}}return s}function o(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(s(arguments[e]));return t}var c=function(){function t(t){this.rendererFactory=t,this.renderer=t.createRenderer(null,null)}return Object.defineProperty(t.prototype,"get",{get:function(){return this.canvas},enumerable:!0,configurable:!0}),t.prototype.set=function(t){this.canvas=t},t.prototype.adjustToWindow=function(){this.canvas&&(this.renderer.setStyle(this.canvas,"width",this.canvas.innerWidth),this.renderer.setStyle(this.canvas,"height",this.canvas.innerHeight))},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[{type:i.RendererFactory2}]},t}(),p=function(){function t(){this.history=[]}return t.prototype.save=function(t,e){this.history.push({date:new Date,graphs:t,config:e,hash:this.hash(t)})},t.prototype.hash=function(t){return btoa(JSON.stringify(t))},t.prototype.list=function(){return this.history},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[]},t}(),u=function(){function t(){}return t.prototype.Δ=function(t,e){return Math.pow(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2),.5)},t.prototype.getClosestCenter=function(t,e){return this.Δ(t,e.start)<this.Δ(t,e.end)?e.start:e.end},t.prototype.getFarestCenter=function(t,e){return this.Δ(t,e.start)>this.Δ(t,e.end)?e.start:e.end},t.prototype.randomPoint=function(t,e){var n={min:t.center.x-t.width*e,max:t.center.x+t.width*e},r={min:t.center.y-t.height*e,max:t.center.y+t.height*e};return{x:a.randomUniform(n.min,n.max)(),y:a.randomUniform(r.min,r.max)()}},t.prototype.centerOfArea=function(t,e){return{x:.5*t,y:.5*e}},t.prototype.centerOfPoints=function(t,e){return{x:.5*(t.x+e.x),y:.5*(t.y+e.y)}},t.prototype.centerOfCurve=function(t){var e=this.medianPoint(t),n=e.next().value,r=e.next().value,i=this.angleRadians(n,r);return Object.assign(this.centerOfPoints(n,r),{ascent:i})},t.prototype.medianOfCurve=function(t){var e=this.medianPoint(t),n=e.next().value,r=e.next().value,i=e.next().value,a=this.angleRadians(r,i);return Object.assign(n,{ascent:a})},t.prototype.angleRadians=function(t,e){return Math.atan2(e.y-t.y,e.x-t.x)},t.prototype.angleDegree=function(t,e){return 180*this.angleRadians(t,e)/Math.PI},t.prototype.medianIndex=function(t){return Math.floor(.5*t.length)},t.prototype.medianPoint=function(e){var n,r;return h(this,function(t){switch(t.label){case 0:r=e.slice(),t.label=1;case 1:return r?(n=this.medianIndex(e),[4,r[n]]):[3,3];case 2:return t.sent(),r.splice(n,1),[3,1];case 3:return[2]}})},t.prototype.bounce=function(e,n,r){var i,a,s,o;return void 0===e&&(e=1),void 0===n&&(n=1),void 0===r&&(r=0),h(this,function(t){switch(t.label){case 0:i=Math.pow(10,n),a=2/i,s=0,t.label=1;case 1:return o=Math.PI*a*s+r,[4,Math.round(Math.sin(o)*e*i)/i];case 2:return t.sent(),s++,[3,1];case 3:return[2]}})},t.prototype.flipSign=function(e){var n;return void 0===e&&(e=!0),h(this,function(t){switch(t.label){case 0:n=e?1:-1,t.label=1;case 1:return[4,n*=-1];case 2:return t.sent(),[3,1];case 3:return[2]}})},t.decorators=[{type:i.Injectable}],t}(),l=function(){function t(t){this.math=t}return t.prototype.get=function(){return this.graphs},t.prototype.set=function(t){this.graphs=t},Object.defineProperty(t.prototype,"isAnimated",{get:function(){return this.animation},enumerable:!0,configurable:!0}),t.prototype.startAnimation=function(){this.animation=!0},t.prototype.stopAnimation=function(){this.animation=!1},t.prototype.spreadOrthogonal=function(e,n){var r,i,a,s;return h(this,function(t){switch(t.label){case 0:r=this.math.flipSign(),i=e,a=0,t.label=1;case 1:return s=r.next().value*n*a,[4,i=this.shiftPoint(i,e.ascent,s)];case 2:return t.sent(),a++,[3,1];case 3:return[2]}})},t.prototype.shiftPoint=function(t,e,n){return{x:Math.sin(e*Math.PI)*n+t.x,y:Math.cos(e*Math.PI)*n+t.y}},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[{type:u}]},t}(),f=function(){function t(t,e,n,r){this.canvasService=t,this.historyService=e,this.math=n,this.graphService=r,this.svgChange=new i.EventEmitter,this.graphChange=new i.EventEmitter,this.genLoadedAllGraphs=this.countLoadedGraphs(),this.resizingWindow=!1}return t.prototype.onResize=function(t){var e=this;clearTimeout(this.resizingWindow),this.resizingWindow=setTimeout(function(){e.canvas=e.adjustCanvas(),e.matrix=e.calcMatrix(),e.updateGraphs()},800)},t.prototype.ngOnChanges=function(t){this.canvas=this.adjustCanvas(),this.matrix=this.calcMatrix(),t.config&&this.updateGraphs(),this.restoredHistory&&this.restoredHistory.hash!==this.hash&&this.restoreGraph()},t.prototype.restoreGraph=function(){this.graphs=this.restoredHistory.graphs,this.hash=this.restoredHistory.hash},t.prototype.saveHistory=function(){this.hash=this.historyService.hash(this.graphs),this.historyService.save(this.graphs,this.config)},t.prototype.saveGraph=function(){this.graphService.set(this.graphs)},t.prototype.updateGraphs=function(){var e=this,t=this.shiftPoint(this.matrix.start,this.config.vectors.start),n=this.shiftPoint(this.matrix.end,this.config.vectors.end,!1);console.log(this.matrix);var r=[{color:this.config.colors.primary,start:t.next().value,end:n.next().value},{color:this.config.colors.secondary,start:n.next().value,end:t.next().value}];this.graphs=r.map(function(t){return function(){return v=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},v.apply(this,arguments)}({},e.adjustGraph(t),{spread:e.config.spread,interval:e.config.interval})}),this.hash=this.historyService.hash(this.graphs),this.saveHistory(),this.saveGraph()},t.prototype.adjustGraph=function(t){return Object.assign(t,{stroke:this.config.stroke,start:Object.assign(t.start,{direction:this.genVectorPoint(t.start.point,t.start.vector)}),end:Object.assign(t.end,{direction:this.genVectorPoint(t.end.point,t.end.vector)}),nodes:this.genRandomPoints(this.config.nodes)})},t.prototype.genRandomPoints=function(t){for(var e=[],n=0;n<this.config.nodes;n++)e.push(this.math.randomPoint(this.matrix,this.config.overlap));return e},t.prototype.flipflop=function(t){return"start"===t?"end":"start"},t.prototype.adjustCanvas=function(){return this.canvasService.set(this.canvas),this.canvasService.adjustToWindow(),this.svgElementRef.nativeElement},t.prototype.calcMatrix=function(){var t=this.canvas.getBoundingClientRect().width,e=this.canvas.getBoundingClientRect().height,n=this.math.centerOfArea(t,e);return{start:{x:0,y:e-this.config.vectors.spacing-this.config.margin.y},end:{x:t-this.config.vectors.spacing-this.config.margin.x,y:0},width:t,height:e,center:n}},t.prototype.genVectorPoint=function(t,e){var n=this.math.Δ(this.matrix.start,this.matrix.end)*this.config.vectors.range;return{x:n*Math.sin(Math.PI*e)+t.x,y:n*Math.cos(Math.PI*e)+t.y}},t.prototype.shiftPoint=function(e,n,r){var i,a;return void 0===r&&(r=!0),h(this,function(t){switch(t.label){case 0:i=this.shiftNumber(this.config.vectors.spacing,n,r),a=this.shiftNumber(this.config.vectors.spacing,n,r),t.label=1;case 1:return[4,{point:{x:Math.cos(Math.PI*n)*i.next().value+e.x,y:Math.sin(Math.PI*n)*a.next().value+e.y},vector:n}];case 2:return t.sent(),[3,1];case 3:return[2]}})},t.prototype.shiftNumber=function(e,t,n){var r,i,a;return void 0===n&&(n=!0),h(this,function(t){switch(t.label){case 0:i=r=0,a=this.math.flipSign(n),t.label=1;case 1:return[4,r=a.next().value*i*e+r];case 2:return t.sent(),i++,[3,1];case 3:return[2]}})},t.prototype.prepareGuillocheExport=function(t){this.genLoadedAllGraphs.next().value&&this.svgChange.emit(this.svgElementRef)},t.prototype.countLoadedGraphs=function(){var e;return h(this,function(t){switch(t.label){case 0:e=1,t.label=1;case 1:return e<this.graphs.length?[4,!1]:[3,3];case 2:return t.sent(),e++,[3,5];case 3:return[4,!0];case 4:t.sent(),e=1,t.label=5;case 5:return[3,1];case 6:return[2]}})},t.decorators=[{type:i.Component,args:[{selector:"nls-graphs",template:'<svg #svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"\nversion="1.1" shape-rendering="geometricPrecision">\n <g nlsGuilloche *ngFor="let graph of graphs" [graph]="graph" [animation]="animation"></g>\n</svg>\n',styles:[":host{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}"]}]}],t.ctorParameters=function(){return[{type:c},{type:p},{type:u},{type:l}]},t.propDecorators={config:[{type:i.Input}],restoredHistory:[{type:i.Input}],animation:[{type:i.Input}],svgChange:[{type:i.Output}],graphChange:[{type:i.Output}],svgElementRef:[{type:i.ViewChild,args:["svg"]}],onResize:[{type:i.HostListener,args:["window:resize",["$event"]]}]},t}(),d=function(){function t(t,e,n,r){this.canvasService=t,this.el=e,this.math=n,this.graphService=r}return t.prototype.ngOnDestroy=function(){this.group.selectAll("*").remove()},t.prototype.ngOnChanges=function(t){var n=this;if(this.group=r.select(this.el.nativeElement),this.canvas=r.select(this.canvasService.get),this.initialNodes=this.graph.nodes.slice(),this.initialCurve=o([this.graph.start.point,this.graph.start.direction],this.graph.nodes.slice(),[this.graph.end.direction,this.graph.end.point]),this.medianPoint=this.math.medianOfCurve(this.initialCurve),this.medianIndex=this.math.medianIndex(this.initialCurve),this.animation){this.graph.nodes=this.graph.nodes.slice().map(function(t,e){return{x:t.x,y:t.y,ascent:n.medianPoint.ascent+.5*e}}),this.bounces=this.initialNodes.map(function(t){var e=Math.round(150*Math.random());return n.math.bounce(e,3)});var e=0;this.animationInterval=setInterval(function(){n.animateGraph(e++%1e3/1e4)},this.graph.interval)}else this.animationInterval&&(this.bounce=null,clearInterval(this.animationInterval));this.group.selectAll("*").remove(),this.pathElements=[];this.spreadLines(o([this.graph.start.point,this.graph.start.direction],this.graph.nodes,[this.graph.end.direction,this.graph.end.point])).forEach(function(t,e){return n.drawGraph(t)})},t.prototype.animateGraph=function(r){var i=this;this.spreadLines(o([this.graph.start.point,this.graph.start.direction],this.graph.nodes.map(function(t,e){var n=t.ascent*Math.sin(Math.PI*r);return i.graphService.shiftPoint(t,n,i.bounces[e].next().value)}),[this.graph.end.direction,this.graph.end.point])).forEach(function(t,e){return i.updateGraph(t,e)})},t.prototype.spreadLines=function(n){for(var r=this,t=[],e=this.graphService.spreadOrthogonal(this.medianPoint,this.graph.spread.spacing),i=0;i<this.graph.spread.amount;i++)t.push(e.next().value);return t.map(function(t){var e=n.slice();return e.splice(r.medianIndex,1,t),e})},t.prototype.updateGraph=function(t,e){this.pathElements[e].attr("d",n.line().x(function(t){return t.x}).y(function(t){return t.y}).curve(n.curveBasis)(t))},t.prototype.drawGraph=function(t){this.group.attr("stroke",this.graph.color).attr("stroke-width",this.graph.stroke).attr("fill","none"),this.pathElements.push(this.group.append("path").attr("d",n.line().x(function(t){return t.x}).y(function(t){return t.y}).curve(n.curveBasis)(t)))},t.prototype.debugGraph=function(t){var r=this;t.forEach(function(t,e){var n=r.group.append("g");n.append("circle").attr("cx",t.x).attr("cy",t.y).attr("r",3).attr("fill-opacity",.6).attr("fill",r.graph.color),n.append("text").attr("x",t.x).attr("y",t.y).attr("dx",8).attr("dy",15).attr("fill",r.graph.color).text(e)})},t.decorators=[{type:i.Directive,args:[{selector:"[nlsGuilloche]"}]}],t.ctorParameters=function(){return[{type:c},{type:i.ElementRef},{type:u},{type:l}]},t.propDecorators={graph:[{type:i.Input}],animation:[{type:i.Input}]},t}(),g=function(){function t(t,e){this.math=t,this.historyService=e}return t.prototype.animate=function(t){var e=Object.assign({},t),n=Math.floor(.5*e.nodes.length),r=e.nodes[n];return e.nodes.splice(n,1,{x:r.x-2,y:r.y+2}),e},t.decorators=[{type:i.Injectable}],t.ctorParameters=function(){return[{type:u},{type:p}]},t}(),y=function(){function t(){}return t.decorators=[{type:i.NgModule,args:[{imports:[e.BrowserModule],declarations:[f,d],providers:[p,c,u,l],exports:[f,d]}]}],t}();t.NlsGraphsComponent=f,t.NlsGuillocheDirective=d,t.NlsAnimationService=g,t.NlsCanvasService=c,t.NlsGraphService=l,t.NlsHistoryService=p,t.NlsMathService=u,t.NlsGuillocheModule=y,Object.defineProperty(t,"__esModule",{value:!0})});
|
|
//# sourceMappingURL=nls-guilloche.umd.min.js.map
|