C3R.min.js

/**
 * @license
 * The MIT License
 * 
 * Copyright © 2018 Adam Kecskes
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.C3R={})}(this,function(e){"use strict";var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}}(),r=function(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)},a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},s=function(){function t(){o(this,t),this.class_name="c3r-"+t.id_counter++,this.properties=new Map,this.domElement=document.createElement("style")}return n(t,[{key:"init",value:function(){document.head.appendChild(this.domElement)}},{key:"unload",value:function(){document.head.removeChild(this.domElement)}},{key:"attach",value:function(e){e.classList.add(this.class_name)}},{key:"detach",value:function(e){e.classList.remove(this.class_name)}},{key:"setProperty",value:function(e,t){this.properties.set(e,t)}},{key:"setProperties",value:function(e){for(var t in e)this.setProperty(t,e[t])}},{key:"update",value:function(){this.domElement.innerHTML="."+this.class_name+"{"+Array.from(this.properties.entries()).map(function(e){return e.join(":")}).join(";")+"}"}},{key:"clone",value:function(){var e=new t;return e.properties=new Map(this.properties),e}}]),t}();s.id_counter=0;var t=function(){function e(){o(this,e),this.backgroundImageSrc=null,this.backgroundColor=null,this.opacity=1}return n(e,[{key:"apply",value:function(e){this.backgroundImageSrc?e.style.setProperty("--background-image","url('"+this.backgroundImageSrc+"')"):e.style.removeProperty("--background-image"),this.backgroundColor?e.style.setProperty("--background-color","rgba("+[Math.round(255*this.backgroundColor[0]),Math.round(255*this.backgroundColor[1]),Math.round(255*this.backgroundColor[2]),this.backgroundColor[3]].join()+")"):e.style.removeProperty("--background-color"),1==this.opacity?e.style.removeProperty("--opacity"):e.style.setProperty("--opacity",this.opacity)}}]),e}(),c=function(){function e(){o(this,e),this.matrix=mat4.create(),this.domElement=document.createElement("div"),this.material=null}return n(e,[{key:"updateMatrix",value:function(){this.domElement.style.transform="matrix3d("+this.matrix.join()+")"}},{key:"clearMatrix",value:function(){this.matrix=mat4.create(),this.domElement.style.transform=""}},{key:"updateMaterial",value:function(){this.material&&this.material.apply(this.domElement)}}],[{key:"getCommonAttributes",value:function(){return{position:"absolute",display:"block",transform:"matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)","transform-origin":"0 0","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none","-webkit-backface-visibility":"inherit","backface-visibility":"inherit"}}}]),e}(),N=function(){function r(e,t,i,n){o(this,r),this.p1=e,this.p2=t,this.p3=i,this.edges=null,this.norm=n||this.calculateNormal()}return n(r,[{key:"updateEdges",value:function(){this.edges||(this.edges=[vec3.sub(vec3.create(),this.p1,this.p2),vec3.sub(vec3.create(),this.p2,this.p3),vec3.sub(vec3.create(),this.p3,this.p1)])}},{key:"calculateNormal",value:function(){return this.updateEdges(),vec3.normalize(vec3.create(),vec3.cross(vec3.create(),this.edges[0],this.edges[1]))}},{key:"calculateEdgeLengths",value:function(){return vec3.fromValues(vec3.len(this.edges[0]),vec3.len(this.edges[1]),vec3.len(this.edges[2]))}},{key:"getTransformationTo",value:function(e){var t=mat4.fromValues(this.p1[0],this.p1[1],this.p1[2],1,this.p2[0],this.p2[1],this.p2[2],1,this.p3[0],this.p3[1],this.p3[2],1,this.norm[0],this.norm[1],this.norm[2],0),i=mat4.fromValues(e.p1[0],e.p1[1],e.p1[2],1,e.p2[0],e.p2[1],e.p2[2],1,e.p3[0],e.p3[1],e.p3[2],1,e.norm[0],e.norm[1],e.norm[2],0);return mat4.mul(mat4.create(),i,mat4.invert(mat4.create(),t))}}]),r}(),R=(document.documentElement.style,CSS.supports("mask-image: var(--background-image, none)"),CSS.supports("-webkit-mask-image: var(--background-image, none)"),CSS.supports("clip-path: polygon(50% 0%, 0% 100%, 100% 100%)")),q=CSS.supports("-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)"),l=function(e){return Math.max(250,Math.min(e,1200))},D=function(e,t,i){return(e[0]-i[0])*(t[1]-i[1])-(e[1]-i[1])*(t[0]-i[0])},h=function(e){function A(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null;o(this,A);var i=a(this,(A.__proto__||Object.getPrototypeOf(A)).call(this));return i.vertices=e,i.clipPath=[],i.simplify(),A.getClass().attach(i.domElement),i.getDomSize=l,i.block_width=0,i.block_height=0,i.contentElement=t||document.createElement("div"),A.getContentClass().attach(i.contentElement),i.domElement.appendChild(i.contentElement),i.uv_scale=vec2.fromValues(1,1),i.uv_offset=vec2.fromValues(0,0),i.maxi=0,i}return r(A,c),n(A,[{key:"simplify",value:function(){for(var e=[this.vertices[0]],t=1;t<this.vertices.length;t++){var i=t-1,n=(t+1)%this.vertices.length,r=this.vertices[i].position,o=this.vertices[t].position,a=this.vertices[n].position,s=vec3.sub(vec3.create(),r,o),c=vec3.sub(vec3.create(),o,a);vec3.normalize(s,s),vec3.normalize(c,c),Math.abs(vec3.dot(s,c))<.9999&&e.push(this.vertices[t])}this.vertices=e}},{key:"updateMatrix",value:function(){var e=new N(this.vertices[0].position,this.vertices[1].position,this.vertices[2].position);if(3==this.vertices.length){var t=e.calculateEdgeLengths();this.maxi=t.indexOf(Math.max.apply(Math,function(e){if(Array.isArray(e)){for(var t=0,i=Array(e.length);t<e.length;t++)i[t]=e[t];return i}return Array.from(e)}(t)));var i=this.maxi,n=(this.maxi+1)%3,r=(this.maxi+2)%3,o=t[i],a=t[n],s=t[r],c=-(a*a-s*s-o*o)/(2*o),l=Math.sqrt(s*s-c*c),h=c/o,u=this.getDomSize(o)/o;this.block_width=o*u,this.block_height=l*u,this.clipPath=[vec2.fromValues(0,0),vec2.fromValues(1,0),vec2.fromValues(h,1)];var m=[vec3.fromValues(0,0,0),vec3.fromValues(this.block_width,0,0),vec3.fromValues(c*u,this.block_height,0)];this.matrix=new N(m[i],m[n],m[r],[0,0,1]).getTransformationTo(e)}else{if(!(3<this.vertices.length))throw new Error("The polygon has not enough sides");var v=e.norm,p=Math.abs(vec3.dot(v,[0,0,1]))<.9?vec3.cross(vec3.create(),v,[0,0,1]):vec3.cross(vec3.create(),v,[0,1,0]),f=vec3.cross(vec3.create(),p,v),d=mat3.fromValues(p[0],p[1],p[2],f[0],f[1],f[2],v[0],v[1],v[2]),g=mat3.invert(mat3.create(),d);if(null===g)throw new Error("Degenerate triangle?");for(var y=this.vertices.map(function(e){return vec3.transformMat3(vec3.create(),e.position,g).slice(0,2)}),b=y.slice().sort(function(e,t){return e[0]==t[0]?e[1]-t[1]:e[0]-t[0]}),k=[],_=0;_<b.length;_++){for(;2<=k.length&&D(k[k.length-2],k[k.length-1],b[_])<=0;)k.pop();k.push(b[_])}for(var w=[],x=b.length-1;0<=x;x--){for(;2<=w.length&&D(w[w.length-2],w[w.length-1],b[x])<=0;)w.pop();w.push(b[x])}w.pop(),k.pop();for(var E=k.concat(w),C=Number.POSITIVE_INFINITY,P=[],M=(mat2.create(),mat2.create()),S=function(){var e=vec2.sub(vec2.create(),E[j],E[(j+1)%E.length]);vec2.normalize(e,e);var t=mat2.fromValues(e[0],e[1],e[1],-e[0]),i=mat2.invert(mat2.create(),t),n=E.map(function(e){return vec2.transformMat2(vec2.create(),e,i)}).map(function(e){return[e[0],e[0],e[1],e[1]]}).reduce(function(e,t){return[Math.min(e[0],t[0]),Math.max(e[1],t[1]),Math.min(e[2],t[2]),Math.max(e[3],t[3])]}),r=(n[1]-n[0])*(n[3]-n[2]);r<C&&(C=r,P=n,M=i)},j=0;j<E.length;j++)S();var V=P[1]-P[0],O=P[3]-P[2],T=1;T=O<V?this.getDomSize(V)/V:this.getDomSize(O)/O,this.block_width=V*T,this.block_height=O*T;var z=y.map(function(e){return vec2.sub(vec2.create(),vec2.transformMat2(vec2.create(),e,M),[P[0],P[2]])});this.clipPath=z.map(function(e){return vec2.fromValues(e[0]/V,e[1]/O)}),this.matrix=new N(vec3.fromValues(z[0][0]*T,z[0][1]*T,0),vec3.fromValues(z[1][0]*T,z[1][1]*T,0),vec3.fromValues(z[2][0]*T,z[2][1]*T,0)).getTransformationTo(e)}var I="polygon("+this.clipPath.map(function(e){return 100*e[0]+"% "+100*e[1]+"%"}).join()+")";R?this.domElement.style.clipPath=I:q&&(this.domElement.style["-webkit-clip-path"]=I),this.domElement.style.setProperty("--width",this.block_width+"px"),this.domElement.style.setProperty("--height",this.block_height+"px"),function e(t,i,n){null===t&&(t=Function.prototype);var r=Object.getOwnPropertyDescriptor(t,i);if(void 0===r){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,i,n)}if("value"in r)return r.value;var a=r.get;return void 0!==a?a.call(n):void 0}(A.prototype.__proto__||Object.getPrototypeOf(A.prototype),"updateMatrix",this).call(this)}},{key:"updateContent",value:function(){var i=this,e=this.vertices.map(function(e){var t=vec2.mul(vec2.create(),e.uv,i.uv_scale);return vec2.add(t,t,i.uv_offset),t}),t=e.map(function(e){return[e[0],e[0],e[1],e[1]]}).reduce(function(e,t){return[Math.min(e[0],t[0]),Math.max(e[1],t[1]),Math.min(e[2],t[2]),Math.max(e[3],t[3])]}),n=t[0],r=t[1],o=t[2],a=r-n,s=t[3]-o,c=1/a,l=1/s;this.contentElement.style.backgroundPosition="calc(var(--width) * "+-n*c+") calc(var(--height) * "+(1+o*l)+")",this.contentElement.style.backgroundSize=100*c+"% "+100*l+"%";var h=mat3.fromValues((e[0][0]-n)/a,1-(e[0][1]-o)/s,1,(e[1][0]-n)/a,1-(e[1][1]-o)/s,1,(e[2][0]-n)/a,1-(e[2][1]-o)/s,1),u=void 0,m=void 0,v=void 0;3==this.vertices.length?(u=this.maxi,m=(this.maxi+1)%3,v=(this.maxi+2)%3):(u=0,m=1,v=2);var p=mat3.fromValues(this.clipPath[u][0],this.clipPath[u][1],1,this.clipPath[m][0],this.clipPath[m][1],1,this.clipPath[v][0],this.clipPath[v][1],1),f=mat3.mul(mat3.create(),p,mat3.invert(mat3.create(),h)),d=this.block_height/this.block_width;this.contentElement.style.transform="translate("+[100*f[6]+"%",100*f[7]+"%"].join()+")matrix("+[f[0],f[1]*d,f[3]/d,f[4],0,0].join()+")"}}],[{key:"getClass",value:function(){return i||((i=new s).setProperties({width:"var(--width, 0px)",height:"var(--height, 0px)",opacity:"var(--opacity, 1)","transform-style":"flat",overflow:"hidden"}),i.setProperties(c.getCommonAttributes()),i.update(),i.init()),i}},{key:"getContentClass",value:function(){return u||((u=new s).setProperties({width:"100%",height:"100%","background-color":"var(--background-color, white)","background-image":"var(--background-image, none)","background-size":"100% 100%","background-blend-mode":"multiply",transform:"matrix(1, 0, 0, 1, 0, 0)","transform-origin":"0 0"}),u.update(),u.init()),u}}]),A}(),i=null,u=null,m=function(e){function t(){o(this,t);var e=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return t.getClass().attach(e.domElement),e.children=[],e.vert_cache=null,e.norm_cache=null,e.vec2tex=null,e}return r(t,c),n(t,[{key:"addChild",value:function(e){this.children.push(e),this.domElement.appendChild(e.domElement)}},{key:"removeChild",value:function(e){var t=this.children.indexOf(e);-1<t&&this.removeChildIndex(t)}},{key:"removeChildIndex",value:function(e){var t=this.children[e];this.children.splice(e,1),this.domElement.removeChild(t.domElement)}},{key:"clear",value:function(){for(var e=this.children.length;0<e--;)this.removeChildIndex(e)}},{key:"addPolygon",value:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,i=new h(e,t);return i.updateMatrix(),i.updateContent(),this.addChild(i),i}},{key:"pushPolygon",value:function(e){var i=this,t=new N(e[0].position,e[1].position,e[2].position).norm;if(this.vert_cache)if(vec3.equals(this.norm_cache,t)){for(var n=!1,r=0;r<this.vert_cache.length;r++){for(var o=this.vert_cache[r],a=0;a<e.length;a++){var s=e[a];if(vec2.equals(o.uv,s.uv)&&vec3.equals(o.position,s.position)){var c=this.vert_cache[(r+1)%this.vert_cache.length],l=e[(a+e.length-1)%e.length];if(vec2.equals(c.uv,l.uv)&&vec3.equals(c.position,l.position)){for(var h=this.vert_cache.slice(0,r+1),u=this.vert_cache.slice(r+1),m=[],v=1;v<e.length-1;v++)m.push(e[(a+v)%e.length]);if(!m.every(function(e){var t=vec3.transformMat4(vec3.create(),e.position,i.vec2tex).slice(0,2);return vec2.equals(t,e.uv)}))continue;this.vert_cache=h.concat(m,u),n=!0;break}}}if(n)break}n||this.flushPolygons()}else this.flushPolygons();this.vert_cache||(this.vert_cache=e,this.norm_cache=t,this.vec2tex=new N(e[0].position,e[1].position,e[2].position,t).getTransformationTo(new N(vec3.fromValues(this.vert_cache[0].uv[0],this.vert_cache[0].uv[1],0),vec3.fromValues(this.vert_cache[1].uv[0],this.vert_cache[1].uv[1],0),vec3.fromValues(this.vert_cache[2].uv[0],this.vert_cache[2].uv[1],0))))}},{key:"flushPolygons",value:function(){this.vert_cache&&(this.addPolygon(this.vert_cache),this.vert_cache=null,this.norm_cache=null,this.vec2tex=null)}}],[{key:"getClass",value:function(){return v||((v=new s).setProperties({width:"0px",height:"0px","transform-style":"preserve-3d",overflow:"visible"}),v.setProperties(c.getCommonAttributes()),v.update(),v.init()),v}}]),t}(),v=null,p=function(){function t(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:70;o(this,t),this.fov=e,this.matrix=mat4.create()}return n(t,[{key:"perspective_coefficient",get:function(){return 1/Math.tan(this.fov*Math.PI/360)}}]),t}(),f=function e(t,i,n,r){o(this,e),this.left=t,this.right=i,this.top=n,this.bottom=r,this.matrix=mat4.create()},d=CSS.supports("transform: translateZ(calc(100px * var(--mult-value,1)))"),g=function(e){function t(){o(this,t);var e=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return t.getClass().attach(e.domElement),e}return r(t,m),n(t,[{key:"updateMatrix",value:function(e){if(e instanceof p){var t=e.perspective_coefficient,i=void 0;i=d?"calc( "+t+" * var(--viewport-height) / 2 )":t*this.domElement.parentNode.offsetHeight/2+"px",this.domElement.style.transform="translateZ("+i+")scaleY(-1)matrix3d("+e.matrix.join()+")matrix3d("+this.matrix.join()+")"}else if(e instanceof f){var n=e.right-e.left,r=e.top-e.bottom,o=(e.right+e.left)/2,a=(e.top+e.bottom)/2,s=this.domElement.parentNode.offsetWidth,c=this.domElement.parentNode.offsetHeight;this.domElement.style.transform="scale("+[s/n,c/r].join()+")translate("+-o+","+-a+")scaleY(-1)matrix3d("+e.matrix.join()+")matrix3d("+this.matrix.join()+")"}}}],[{key:"getClass",value:function(){return y||((y=new s).setProperties({width:"100% !important",height:"100% !important",top:"50%",left:"50%","pointer-events":"none","-webkit-backface-visibility":"hidden !important","backface-visibility":"hidden !important"}),y.update(),y.init()),y}}]),t}(),y=null,b=CSS.supports("perspective: calc( 512px * 2 )"),k=function(){function e(){o(this,e),this.camera=new p,this.root=null,this.domElement=document.createElement("div"),e.getClass().attach(this.domElement),this.width=0,this.height=0,this.addRoot(new g)}return n(e,[{key:"updateCamera",value:function(){this.camera instanceof p?b?this.domElement.style.setProperty("perspective","calc( "+this.camera.perspective_coefficient+" * var(--viewport-height) / 2 )"):this.domElement.style.setProperty("perspective",this.camera.perspective_coefficient*this.domElement.offsetHeight/2+"px"):this.camera instanceof f&&this.domElement.style.removeProperty("perspective"),this.root.updateMatrix(this.camera)}},{key:"addRoot",value:function(e){this.root&&this.domElement.removeChild(e.domElement),this.root=e,this.domElement.appendChild(e.domElement),this.updateCamera()}},{key:"setSize",value:function(e,t){this.width==e&&this.height==t||(this.width=e,this.height=t,this.domElement.style.setProperty("--viewport-width",e+"px"),this.domElement.style.setProperty("--viewport-height",t+"px"))}},{key:"resetSize",value:function(){this.domElement.style.removeProperty("--viewport-width",width+"px"),this.domElement.style.removeProperty("--viewport-height",height+"px")}}],[{key:"getClass",value:function(){return _||((_=new s).setProperties({overflow:"hidden",position:"relative","--viewport-width":"100vw","--viewport-height":"100vh",width:"var(--viewport-width)",height:"var(--viewport-height)"}),_.update(),_.init()),_}}]),e}(),_=null,w=function(e){function i(e){o(this,i);var t=a(this,(i.__proto__||Object.getPrototypeOf(i)).call(this));return t.element=e,t.domElement.appendChild(e),t.elementScale=vec2.fromValues(1,1),t.elementCenter=vec2.fromValues(.5,.5),t.elementRotation=0,m.getClass().attach(t.domElement),i.getContentClass().attach(t.element),t.updateElementTransform(),t}return r(i,c),n(i,[{key:"setSize",value:function(e,t){this.element.style.width=e+"px",this.element.style.height=t+"px"}},{key:"setScale",value:function(e,t){this.elementScale=vec2.fromValues(e,t),this.updateElementTransform()}},{key:"setCenter",value:function(e,t){this.elementCenter=vec2.fromValues(e,t),this.updateElementTransform()}},{key:"updateElementTransform",value:function(){var e="scale("+this.elementScale[0]+","+-this.elementScale[1]+")",t="translate("+100*(.5-this.elementCenter[0])+"%,"+100*(this.elementCenter[1]-.5)+"%)",i=0==this.elementRotation?"":"rotate("+this.elementRotation+"rad)";this.element.style.transform="translate(-50%,-50%)"+e+t+i}},{key:"enablePointer",value:function(){this.element.style.pointerEvents="auto"}},{key:"disablePointer",value:function(){this.element.style.pointerEvents=""}}],[{key:"getContentClass",value:function(){return x||((x=new s).setProperties({"background-color":"var(--background-color, transparent)","background-image":"var(--background-image, white)","background-size":"100% 100%",opacity:"var(--opacity, 1)"}),x.update(),x.init()),x}}]),i}(),x=null;e.CSSClass=s,e.Material=t,e.Object3D=c,e.Group=m,e.RootObject=g,e.Container=k,e.Polygon=h,e.CustomElement=w,e.Triangle=N,e.Vertex=function e(t,i){o(this,e),this.position=t||vec3.create(),this.uv=i||vec2.create()},e.PerspectiveCamera=p,e.OrthographicCamera=f,Object.defineProperty(e,"__esModule",{value:!0})});