321 lines
424 KiB
JavaScript
321 lines
424 KiB
JavaScript
|
|
function e(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(e){if(Array.isArray(e))return e}function n(t){if(Array.isArray(t))return e(t)}function r(e,t){if(!(e instanceof t))throw TypeError(`Cannot call a class as a function`)}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,`value`in r&&(r.writable=!0),Object.defineProperty(e,h(r.key),r)}}function a(e,t,n){return t&&i(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function o(e,t){var n=typeof Symbol<`u`&&e[Symbol.iterator]||e[`@@iterator`];if(!n){if(Array.isArray(e)||(n=_(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw TypeError(`Invalid attempt to iterate non-iterable instance.
|
||
|
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var a,o=!0,s=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return o=e.done,e},e:function(e){s=!0,a=e},f:function(){try{o||n.return==null||n.return()}finally{if(s)throw a}}}}function s(e,t,n){return(t=h(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){if(typeof Symbol<`u`&&e[Symbol.iterator]!=null||e[`@@iterator`]!=null)return Array.from(e)}function l(e,t){var n=e==null?null:typeof Symbol<`u`&&e[Symbol.iterator]||e[`@@iterator`];if(n!=null){var r,i,a,o,s=[],c=!0,l=!1;try{if(a=(n=n.call(e)).next,t===0){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(s.push(r.value),s.length!==t);c=!0);}catch(e){l=!0,i=e}finally{try{if(!c&&n.return!=null&&(o=n.return(),Object(o)!==o))return}finally{if(l)throw i}}return s}}function u(){throw TypeError(`Invalid attempt to destructure non-iterable instance.
|
||
|
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function d(){throw TypeError(`Invalid attempt to spread non-iterable instance.
|
||
|
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function f(e,n){return t(e)||l(e,n)||_(e,n)||u()}function p(e){return n(e)||c(e)||_(e)||d()}function m(e,t){if(typeof e!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t);if(typeof r!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return String(e)}function h(e){var t=m(e,`string`);return typeof t==`symbol`?t:t+``}function g(e){"@babel/helpers - typeof";return g=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},g(e)}function _(t,n){if(t){if(typeof t==`string`)return e(t,n);var r={}.toString.call(t).slice(8,-1);return r===`Object`&&t.constructor&&(r=t.constructor.name),r===`Map`||r===`Set`?Array.from(t):r===`Arguments`||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}var v=typeof window>`u`?null:window,y=v?v.navigator:null;v&&v.document;var b=g(``),x=g({}),S=g(function(){}),C=typeof HTMLElement>`u`?`undefined`:g(HTMLElement),w=function(e){return e&&e.instanceString&&E(e.instanceString)?e.instanceString():null},T=function(e){return e!=null&&g(e)==b},E=function(e){return e!=null&&g(e)===S},D=function(e){return!N(e)&&(Array.isArray?Array.isArray(e):e!=null&&e instanceof Array)},O=function(e){return e!=null&&g(e)===x&&!D(e)&&e.constructor===Object},k=function(e){return e!=null&&g(e)===x},A=function(e){return e!=null&&g(e)===g(1)&&!isNaN(e)},j=function(e){return A(e)&&Math.floor(e)===e},M=function(e){if(C!==`undefined`)return e!=null&&e instanceof HTMLElement},N=function(e){return P(e)||F(e)},P=function(e){return w(e)===`collection`&&e._private.single},F=function(e){return w(e)===`collection`&&!e._private.single},I=function(e){return w(e)===`core`},L=function(e){return w(e)===`stylesheet`},R=function(e){return w(e)===`event`},z=function(e){return e==null?!0:!!(e===``||e.match(/^\s+$/))},B=function(e){return typeof HTMLElement>`u`?!1:e instanceof HTMLElement},V=function(e){return O(e)&&A(e.x1)&&A(e.x2)&&A(e.y1)&&A(e.y2)},H=function(e){return k(e)&&E(e.then)},U=function(){return y&&y.userAgent.match(/msie|trident|edge/i)},W=function(e,t){t||=function(){if(arguments.length===1)return arguments[0];if(arguments.length===0)return`undefined`;for(var e=[],t=0;t<arguments.length;t++)e.push(arguments[t]);return e.join(`$`)};var n=function(){var r=this,i=arguments,a,o=t.apply(r,i),s=n.cache;return(a=s[o])||(a=s[o]=e.apply(r,i)),a};return n.cache={},n},G=W(function(e){return e.replace(/([A-Z])/g,function(e){return`-`+e.toLowerCase()})}),K=W(function(e){return e.replace(/(-\w)/g,function(e){return e[1].toUpperCase()})}),q=W(function(e,t){return e+t[0].toUpperCase()+t.substring(1)},function(e,t){return e+`$`+t}),ee=function(e){return z(e)?e:e.charAt(0).toUpperCase()+e.substring(1)},te=function(e,t){return e.slice(-1*t.length)===t},J=`(?:[-+]?(?:(?:\\d+|\\d*\\.\\d+)(?:[Ee][+-]?\\d+)?))`,ne=`rgb[a]?\\((`+J+`[%]?)\\s*,\\s*(`+J+`[%]?)\\s*,\\s*(`+J+`[%]?)(?:\\s*,\\s*(`+J+`))?\\)`,re=`rgb[a]?\\((?:`+J+`[%]?)\\s*,\\s*(?:`+J+`[%]?)\\s*,\\s*(?:`+J+`[%]?)(?:\\s*,\\s*(?:`+J+`))?\\)`,ie=`hsl[a]?\\((`+J+`)\\s*,\\s*(`+J+`[%])\\s*,\\s*(`+J+`[%])(?:\\s*,\\s*(`+J+`))?\\)`,ae=`hsl[a]?\\((?:`+J+`)\\s*,\\s*(?:`+J+`[%])\\s*,\\s*(?:`+J+`[%])(?:\\s*,\\s*(?:`+J+`))?\\)`,oe=`\\#[0-9a-fA-F]{3}`,se=`\\#[0-9a-fA-F]{6}`,ce=function(e,t){return e<t?-1:+(e>t)},le=function(e,t){return-1*ce(e,t)},Y=Object.assign==null?function(e){for(var t=arguments,n=1;n<t.length;n++){var r=t[n];if(r!=null)for(var i=Object.keys(r),a=0;a<i.length;a++){var o=i[a];e[o]=r[o]}}return e}:Object.assign.bind(Object),ue=function(e){if(!(!(e.length===4||e.length===7)||e[0]!==`#`)){var t=e.length===4,n,r,i,a=16;return t?(n=parseInt(e[1]+e[1],a),r=parseInt(e[2]+e[2],a),i=parseInt(e[3]+e[3],a)):(n=parseInt(e[1]+e[2],a),r=parseInt(e[3]+e[4],a),i=parseInt(e[5]+e[6],a)),[n,r,i]}},de=function(e){var t,n,r,i,a,o,s,c;function l(e,t,n){return n<0&&(n+=1),n>1&&--n,n<1/6?e+(t-e)*6*n:n<1/2?t:n<
|
||
|
|
`),f=e.pstyle(`text-max-width`).pfValue,p=e.pstyle(`text-overflow-wrap`).value===`anywhere`,m=[],h=/[\s\u200b]+|$/g,g=0;g<d.length;g++){var _=d[g],v=this.calculateLabelDimensions(e,_).width;if(p&&(_=_.split(``).join(u)),v>f){var y=_.matchAll(h),b=``,x=0,S=o(y),C;try{for(S.s();!(C=S.n()).done;){var w=C.value,T=w[0],E=_.substring(x,w.index);x=w.index+T.length;var D=b.length===0?E:b+E+T;this.calculateLabelDimensions(e,D).width<=f?b+=E+T:(b&&m.push(b),b=E+T)}}catch(e){S.e(e)}finally{S.f()}b.match(/^[\s\u200b]+$/)||m.push(b)}else m.push(_)}s(`labelWrapCachedLines`,m),i=s(`labelWrapCachedText`,m.join(`
|
||
|
|
`)),s(`labelWrapKey`,l)}else if(c===`ellipsis`){var O=e.pstyle(`text-max-width`).pfValue,k=``,A=`…`,j=!1;if(this.calculateLabelDimensions(e,i).width<O)return i;for(var M=0;M<i.length&&!(this.calculateLabelDimensions(e,k+i[M]+A).width>O);M++)k+=i[M],M===i.length-1&&(j=!0);return j||(k+=A),k}return i},kf.getLabelJustification=function(e){var t=e.pstyle(`text-justification`).strValue,n=e.pstyle(`text-halign`).strValue;if(t===`auto`)if(e.isNode())switch(n){case`left`:return`right`;case`right`:return`left`;default:return`center`}else return`center`;else return t},kf.calculateLabelDimensions=function(e,t){var n=this.cy.window().document,r=0,i=e.pstyle(`font-style`).strValue,a=e.pstyle(`font-size`).pfValue,o=e.pstyle(`font-family`).strValue,s=e.pstyle(`font-weight`).strValue,c=this.labelCalcCanvas,l=this.labelCalcCanvasContext;if(!c){c=this.labelCalcCanvas=n.createElement(`canvas`),l=this.labelCalcCanvasContext=c.getContext(`2d`);var u=c.style;u.position=`absolute`,u.left=`-9999px`,u.top=`-9999px`,u.zIndex=`-1`,u.visibility=`hidden`,u.pointerEvents=`none`}l.font=`${i} ${s} ${a}px ${o}`;for(var d=0,f=0,p=t.split(`
|
||
|
|
`),m=0;m<p.length;m++){var h=p[m],g=l.measureText(h),_=Math.ceil(g.width),v=a;d=Math.max(_,d),f+=v}return d+=r,f+=r,{width:d,height:f}},kf.calculateLabelAngle=function(e,t){var n=e._private.rscratch,r=e.isEdge(),i=t?t+`-`:``,a=e.pstyle(i+`text-rotation`),o=a.strValue;return o===`none`?0:r&&o===`autorotate`?n.labelAutoAngle:o===`autorotate`?0:a.pfValue},kf.calculateLabelAngles=function(e){var t=this,n=e.isEdge(),r=e._private.rscratch;r.labelAngle=t.calculateLabelAngle(e),n&&(r.sourceLabelAngle=t.calculateLabelAngle(e,`source`),r.targetLabelAngle=t.calculateLabelAngle(e,`target`))};var Nf={},Pf=28,Ff=!1;Nf.getNodeShape=function(e){var t=this,n=e.pstyle(`shape`).value;if(n===`cutrectangle`&&(e.width()<Pf||e.height()<Pf))return Ff||=(Bt("The `cutrectangle` node shape can not be used at small sizes so `rectangle` is used instead"),!0),`rectangle`;if(e.isParent())return n===`rectangle`||n===`roundrectangle`||n===`round-rectangle`||n===`cutrectangle`||n===`cut-rectangle`||n===`barrel`?n:`rectangle`;if(n===`polygon`){var r=e.pstyle(`shape-polygon-points`).value;return t.nodeShapes.makePolygon(r).name}return n};var If={};If.registerCalculationListeners=function(){var e=this.cy,t=e.collection(),n=this,r=function(e){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0;if(t.merge(e),n)for(var r=0;r<e.length;r++){var i=e[r]._private.rstyle;i.clean=!1,i.cleanConnected=!1}};n.binder(e).on(`bounds.* dirty.*`,function(e){var t=e.target;r(t)}).on(`style.* background.*`,function(e){var t=e.target;r(t,!1)});var i=function(i){if(i){var a=n.onUpdateEleCalcsFns;t.cleanStyle();for(var o=0;o<t.length;o++){var s=t[o],c=s._private.rstyle;s.isNode()&&!c.cleanConnected&&(r(s.connectedEdges()),c.cleanConnected=!0)}if(a)for(var l=0;l<a.length;l++){var u=a[l];u(i,t)}n.recalculateRenderedStyle(t),t=e.collection()}};n.flushRenderedStyleQueue=function(){i(!0)},n.beforeRender(i,n.beforeRenderPriorities.eleCalcs)},If.onUpdateEleCalcs=function(e){(this.onUpdateEleCalcsFns=this.onUpdateEleCalcsFns||[]).push(e)},If.recalculateRenderedStyle=function(e,t){var n=function(e){return e._private.rstyle.cleanConnected};if(e.length!==0){var r=[],i=[];if(!this.destroyed){t===void 0&&(t=!0);for(var a=0;a<e.length;a++){var o=e[a],s=o._private,c=s.rstyle;o.isEdge()&&(!n(o.source())||!n(o.target()))&&(c.clean=!1),o.isEdge()&&o.isBundledBezier()&&o.parallelEdges().some(function(e){return!e._private.rstyle.clean&&e.isBundledBezier()})&&(c.clean=!1),!(t&&c.clean||o.removed())&&o.pstyle(`display`).value!==`none`&&(s.group===`nodes`?i.push(o):r.push(o),c.clean=!0)}for(var l=0;l<i.length;l++){var u=i[l],d=u._private.rstyle,f=u.position();this.recalculateNodeLabelProjection(u),d.nodeX=f.x,d.nodeY=f.y,d.nodeW=u.pstyle(`width`).pfValue,d.nodeH=u.pstyle(`height`).pfValue}this.recalculateEdgeProjections(r);for(var p=0;p<r.length;p++){var m=r[p]._private,h=m.rstyle,g=m.rscratch;h.srcX=g.arrowStartX,h.srcY=g.arrowStartY,h.tgtX=g.arrowEndX,h.tgtY=g.arrowEndY,h.midX=g.midX,h.midY=g.midY,h.labelAngle=g.labelAngle,h.sourceLabelAngle=g.sourceLabelAngle,h.targetLabelAngle=g.targetLabelAngle}}}};var Lf={};Lf.updateCachedGrabbedEles=function(){var e=this.cachedZSortedEles;if(e){e.drag=[],e.nondrag=[];for(var t=[],n=0;n<e.length;n++){var r=e[n],i=r._private.rscratch;r.grabbed()&&!r.isParent()?t.push(r):i.inDragLayer?e.drag.push(r):e.nondrag.push(r)}for(var n=0;n<t.length;n++){var r=t[n];e.drag.push(r)}}},Lf.invalidateCachedZSortedEles=function(){this.cachedZSortedEles=null},Lf.getCachedZSortedEles=function(e){if(e||!this.cachedZSortedEles){var t=this.cy.mutableElements().toArray();t.sort(Yl),t.interactive=t.filter(function(e){return e.interactive()}),this.cachedZSortedEles=t,this.updateCachedGrabbedEles()}else t=this.cachedZSortedEles;return t};var Rf={};[Yd,Xd,wf,Ef,Df,kf,Nf,If,Lf].forEach(function(e){Y(Rf,e)});var zf={};zf.getCachedImage=function(e,t,n){var r=this,i=r.imageCache=r.imageCache||{},a=i[e];if(a)return a.image.complete||a.image.addEventListener(`load`,n),a.image;a=i[e]=i[e]||{};var o=a.image=new Image;o.addEventListener(`load`,n),o.addEventListener(`error`,function(){o.
|
||
|
|
float circleSD(vec2 p, float r) {
|
||
|
|
return distance(vec2(0), p) - r; // signed distance
|
||
|
|
}
|
||
|
|
`,Um=`
|
||
|
|
float rectangleSD(vec2 p, vec2 b) {
|
||
|
|
vec2 d = abs(p)-b;
|
||
|
|
return distance(vec2(0),max(d,0.0)) + min(max(d.x,d.y),0.0);
|
||
|
|
}
|
||
|
|
`,Wm=`
|
||
|
|
float roundRectangleSD(vec2 p, vec2 b, vec4 cr) {
|
||
|
|
cr.xy = (p.x > 0.0) ? cr.xy : cr.zw;
|
||
|
|
cr.x = (p.y > 0.0) ? cr.x : cr.y;
|
||
|
|
vec2 q = abs(p) - b + cr.x;
|
||
|
|
return min(max(q.x, q.y), 0.0) + distance(vec2(0), max(q, 0.0)) - cr.x;
|
||
|
|
}
|
||
|
|
`,Gm=`
|
||
|
|
float ellipseSD(vec2 p, vec2 ab) {
|
||
|
|
p = abs( p ); // symmetry
|
||
|
|
|
||
|
|
// find root with Newton solver
|
||
|
|
vec2 q = ab*(p-ab);
|
||
|
|
float w = (q.x<q.y)? 1.570796327 : 0.0;
|
||
|
|
for( int i=0; i<5; i++ ) {
|
||
|
|
vec2 cs = vec2(cos(w),sin(w));
|
||
|
|
vec2 u = ab*vec2( cs.x,cs.y);
|
||
|
|
vec2 v = ab*vec2(-cs.y,cs.x);
|
||
|
|
w = w + dot(p-u,v)/(dot(p-u,u)+dot(v,v));
|
||
|
|
}
|
||
|
|
|
||
|
|
// compute final point and distance
|
||
|
|
float d = length(p-ab*vec2(cos(w),sin(w)));
|
||
|
|
|
||
|
|
// return signed distance
|
||
|
|
return (dot(p/ab,p/ab)>1.0) ? d : -d;
|
||
|
|
}
|
||
|
|
`,Km={SCREEN:{name:`screen`,screen:!0},PICKING:{name:`picking`,picking:!0}},qm={IGNORE:1,USE_BB:2},Jm=0,Ym=1,Xm=2,Zm=3,Qm=4,$m=5,eh=6,th=7,nh=function(){function e(t,n,i){r(this,e),this.r=t,this.gl=n,this.maxInstances=i.webglBatchSize,this.atlasSize=i.webglTexSize,this.bgColor=i.bgColor,this.debug=i.webglDebug,this.batchDebugInfo=[],i.enableWrapping=!0,i.createTextureCanvas=fm,this.atlasManager=new Bm(t,i),this.batchManager=new Vm(i),this.simpleShapeOptions=new Map,this.program=this._createShaderProgram(Km.SCREEN),this.pickingProgram=this._createShaderProgram(Km.PICKING),this.vao=this._createVAO()}return a(e,[{key:`addAtlasCollection`,value:function(e,t){this.atlasManager.addAtlasCollection(e,t)}},{key:`addTextureAtlasRenderType`,value:function(e,t){this.atlasManager.addRenderType(e,t)}},{key:`addSimpleShapeRenderType`,value:function(e,t){this.simpleShapeOptions.set(e,t)}},{key:`invalidate`,value:function(e){var t=(arguments.length>1&&arguments[1]!==void 0?arguments[1]:{}).type,n=this.atlasManager;return t?n.invalidate(e,{filterType:function(e){return e===t},forceRedraw:!0}):n.invalidate(e)}},{key:`gc`,value:function(){this.atlasManager.gc()}},{key:`_createShaderProgram`,value:function(e){var t=this.gl,n=`#version 300 es
|
||
|
|
precision highp float;
|
||
|
|
|
||
|
|
uniform mat3 uPanZoomMatrix;
|
||
|
|
uniform int uAtlasSize;
|
||
|
|
|
||
|
|
// instanced
|
||
|
|
in vec2 aPosition; // a vertex from the unit square
|
||
|
|
|
||
|
|
in mat3 aTransform; // used to transform verticies, eg into a bounding box
|
||
|
|
in int aVertType; // the type of thing we are rendering
|
||
|
|
|
||
|
|
// the z-index that is output when using picking mode
|
||
|
|
in vec4 aIndex;
|
||
|
|
|
||
|
|
// For textures
|
||
|
|
in int aAtlasId; // which shader unit/atlas to use
|
||
|
|
in vec4 aTex; // x/y/w/h of texture in atlas
|
||
|
|
|
||
|
|
// for edges
|
||
|
|
in vec4 aPointAPointB;
|
||
|
|
in vec4 aPointCPointD;
|
||
|
|
in vec2 aLineWidth; // also used for node border width
|
||
|
|
|
||
|
|
// simple shapes
|
||
|
|
in vec4 aCornerRadius; // for round-rectangle [top-right, bottom-right, top-left, bottom-left]
|
||
|
|
in vec4 aColor; // also used for edges
|
||
|
|
in vec4 aBorderColor; // aLineWidth is used for border width
|
||
|
|
|
||
|
|
// output values passed to the fragment shader
|
||
|
|
out vec2 vTexCoord;
|
||
|
|
out vec4 vColor;
|
||
|
|
out vec2 vPosition;
|
||
|
|
// flat values are not interpolated
|
||
|
|
flat out int vAtlasId;
|
||
|
|
flat out int vVertType;
|
||
|
|
flat out vec2 vTopRight;
|
||
|
|
flat out vec2 vBotLeft;
|
||
|
|
flat out vec4 vCornerRadius;
|
||
|
|
flat out vec4 vBorderColor;
|
||
|
|
flat out vec2 vBorderWidth;
|
||
|
|
flat out vec4 vIndex;
|
||
|
|
|
||
|
|
void main(void) {
|
||
|
|
int vid = gl_VertexID;
|
||
|
|
vec2 position = aPosition; // TODO make this a vec3, simplifies some code below
|
||
|
|
|
||
|
|
if(aVertType == ${Jm}) {
|
||
|
|
float texX = aTex.x; // texture coordinates
|
||
|
|
float texY = aTex.y;
|
||
|
|
float texW = aTex.z;
|
||
|
|
float texH = aTex.w;
|
||
|
|
|
||
|
|
if(vid == 1 || vid == 2 || vid == 4) {
|
||
|
|
texX += texW;
|
||
|
|
}
|
||
|
|
if(vid == 2 || vid == 4 || vid == 5) {
|
||
|
|
texY += texH;
|
||
|
|
}
|
||
|
|
|
||
|
|
float d = float(uAtlasSize);
|
||
|
|
vTexCoord = vec2(texX / d, texY / d); // tex coords must be between 0 and 1
|
||
|
|
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * aTransform * vec3(position, 1.0), 1.0);
|
||
|
|
}
|
||
|
|
else if(aVertType == ${Qm} || aVertType == ${th}
|
||
|
|
|| aVertType == ${$m} || aVertType == ${eh}) { // simple shapes
|
||
|
|
|
||
|
|
// the bounding box is needed by the fragment shader
|
||
|
|
vBotLeft = (aTransform * vec3(0, 0, 1)).xy; // flat
|
||
|
|
vTopRight = (aTransform * vec3(1, 1, 1)).xy; // flat
|
||
|
|
vPosition = (aTransform * vec3(position, 1)).xy; // will be interpolated
|
||
|
|
|
||
|
|
// calculations are done in the fragment shader, just pass these along
|
||
|
|
vColor = aColor;
|
||
|
|
vCornerRadius = aCornerRadius;
|
||
|
|
vBorderColor = aBorderColor;
|
||
|
|
vBorderWidth = aLineWidth;
|
||
|
|
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * aTransform * vec3(position, 1.0), 1.0);
|
||
|
|
}
|
||
|
|
else if(aVertType == ${Ym}) {
|
||
|
|
vec2 source = aPointAPointB.xy;
|
||
|
|
vec2 target = aPointAPointB.zw;
|
||
|
|
|
||
|
|
// adjust the geometry so that the line is centered on the edge
|
||
|
|
position.y = position.y - 0.5;
|
||
|
|
|
||
|
|
// stretch the unit square into a long skinny rectangle
|
||
|
|
vec2 xBasis = target - source;
|
||
|
|
vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
|
||
|
|
vec2 point = source + xBasis * position.x + yBasis * aLineWidth[0] * position.y;
|
||
|
|
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * vec3(point, 1.0), 1.0);
|
||
|
|
vColor = aColor;
|
||
|
|
}
|
||
|
|
else if(aVertType == ${Xm}) {
|
||
|
|
vec2 pointA = aPointAPointB.xy;
|
||
|
|
vec2 pointB = aPointAPointB.zw;
|
||
|
|
vec2 pointC = aPointCPointD.xy;
|
||
|
|
vec2 pointD = aPointCPointD.zw;
|
||
|
|
|
||
|
|
// adjust the geometry so that the line is centered on the edge
|
||
|
|
position.y = position.y - 0.5;
|
||
|
|
|
||
|
|
vec2 p0, p1, p2, pos;
|
||
|
|
if(position.x == 0.0) { // The left side of the unit square
|
||
|
|
p0 = pointA;
|
||
|
|
p1 = pointB;
|
||
|
|
p2 = pointC;
|
||
|
|
pos = position;
|
||
|
|
} else { // The right side of the unit square, use same approach but flip the geometry upside down
|
||
|
|
p0 = pointD;
|
||
|
|
p1 = pointC;
|
||
|
|
p2 = pointB;
|
||
|
|
pos = vec2(0.0, -position.y);
|
||
|
|
}
|
||
|
|
|
||
|
|
vec2 p01 = p1 - p0;
|
||
|
|
vec2 p12 = p2 - p1;
|
||
|
|
vec2 p21 = p1 - p2;
|
||
|
|
|
||
|
|
// Find the normal vector.
|
||
|
|
vec2 tangent = normalize(normalize(p12) + normalize(p01));
|
||
|
|
vec2 normal = vec2(-tangent.y, tangent.x);
|
||
|
|
|
||
|
|
// Find the vector perpendicular to p0 -> p1.
|
||
|
|
vec2 p01Norm = normalize(vec2(-p01.y, p01.x));
|
||
|
|
|
||
|
|
// Determine the bend direction.
|
||
|
|
float sigma = sign(dot(p01 + p21, normal));
|
||
|
|
float width = aLineWidth[0];
|
||
|
|
|
||
|
|
if(sign(pos.y) == -sigma) {
|
||
|
|
// This is an intersecting vertex. Adjust the position so that there's no overlap.
|
||
|
|
vec2 point = 0.5 * width * normal * -sigma / dot(normal, p01Norm);
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * vec3(p1 + point, 1.0), 1.0);
|
||
|
|
} else {
|
||
|
|
// This is a non-intersecting vertex. Treat it like a mitre join.
|
||
|
|
vec2 point = 0.5 * width * normal * sigma * dot(normal, p01Norm);
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * vec3(p1 + point, 1.0), 1.0);
|
||
|
|
}
|
||
|
|
|
||
|
|
vColor = aColor;
|
||
|
|
}
|
||
|
|
else if(aVertType == ${Zm} && vid < 3) {
|
||
|
|
// massage the first triangle into an edge arrow
|
||
|
|
if(vid == 0)
|
||
|
|
position = vec2(-0.15, -0.3);
|
||
|
|
if(vid == 1)
|
||
|
|
position = vec2( 0.0, 0.0);
|
||
|
|
if(vid == 2)
|
||
|
|
position = vec2( 0.15, -0.3);
|
||
|
|
|
||
|
|
gl_Position = vec4(uPanZoomMatrix * aTransform * vec3(position, 1.0), 1.0);
|
||
|
|
vColor = aColor;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
gl_Position = vec4(2.0, 0.0, 0.0, 1.0); // discard vertex by putting it outside webgl clip space
|
||
|
|
}
|
||
|
|
|
||
|
|
vAtlasId = aAtlasId;
|
||
|
|
vVertType = aVertType;
|
||
|
|
vIndex = aIndex;
|
||
|
|
}
|
||
|
|
`,r=this.batchManager.getIndexArray(),i=dm(t,n,`#version 300 es
|
||
|
|
precision highp float;
|
||
|
|
|
||
|
|
// declare texture unit for each texture atlas in the batch
|
||
|
|
${r.map(function(e){return`uniform sampler2D uTexture${e};`}).join(`
|
||
|
|
`)}
|
||
|
|
|
||
|
|
uniform vec4 uBGColor;
|
||
|
|
uniform float uZoom;
|
||
|
|
|
||
|
|
in vec2 vTexCoord;
|
||
|
|
in vec4 vColor;
|
||
|
|
in vec2 vPosition; // model coordinates
|
||
|
|
|
||
|
|
flat in int vAtlasId;
|
||
|
|
flat in vec4 vIndex;
|
||
|
|
flat in int vVertType;
|
||
|
|
flat in vec2 vTopRight;
|
||
|
|
flat in vec2 vBotLeft;
|
||
|
|
flat in vec4 vCornerRadius;
|
||
|
|
flat in vec4 vBorderColor;
|
||
|
|
flat in vec2 vBorderWidth;
|
||
|
|
|
||
|
|
out vec4 outColor;
|
||
|
|
|
||
|
|
${Hm}
|
||
|
|
${Um}
|
||
|
|
${Wm}
|
||
|
|
${Gm}
|
||
|
|
|
||
|
|
vec4 blend(vec4 top, vec4 bot) { // blend colors with premultiplied alpha
|
||
|
|
return vec4(
|
||
|
|
top.rgb + (bot.rgb * (1.0 - top.a)),
|
||
|
|
top.a + (bot.a * (1.0 - top.a))
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
vec4 distInterp(vec4 cA, vec4 cB, float d) { // interpolate color using Signed Distance
|
||
|
|
// scale to the zoom level so that borders don't look blurry when zoomed in
|
||
|
|
// note 1.5 is an aribitrary value chosen because it looks good
|
||
|
|
return mix(cA, cB, 1.0 - smoothstep(0.0, 1.5 / uZoom, abs(d)));
|
||
|
|
}
|
||
|
|
|
||
|
|
void main(void) {
|
||
|
|
if(vVertType == ${Jm}) {
|
||
|
|
// look up the texel from the texture unit
|
||
|
|
${r.map(function(e){return`if(vAtlasId == ${e}) outColor = texture(uTexture${e}, vTexCoord);`}).join(`
|
||
|
|
else `)}
|
||
|
|
}
|
||
|
|
else if(vVertType == ${Zm}) {
|
||
|
|
// mimics how canvas renderer uses context.globalCompositeOperation = 'destination-out';
|
||
|
|
outColor = blend(vColor, uBGColor);
|
||
|
|
outColor.a = 1.0; // make opaque, masks out line under arrow
|
||
|
|
}
|
||
|
|
else if(vVertType == ${Qm} && vBorderWidth == vec2(0.0)) { // simple rectangle with no border
|
||
|
|
outColor = vColor; // unit square is already transformed to the rectangle, nothing else needs to be done
|
||
|
|
}
|
||
|
|
else if(vVertType == ${Qm} || vVertType == ${th}
|
||
|
|
|| vVertType == ${$m} || vVertType == ${eh}) { // use SDF
|
||
|
|
|
||
|
|
float outerBorder = vBorderWidth[0];
|
||
|
|
float innerBorder = vBorderWidth[1];
|
||
|
|
float borderPadding = outerBorder * 2.0;
|
||
|
|
float w = vTopRight.x - vBotLeft.x - borderPadding;
|
||
|
|
float h = vTopRight.y - vBotLeft.y - borderPadding;
|
||
|
|
vec2 b = vec2(w/2.0, h/2.0); // half width, half height
|
||
|
|
vec2 p = vPosition - vec2(vTopRight.x - b[0] - outerBorder, vTopRight.y - b[1] - outerBorder); // translate to center
|
||
|
|
|
||
|
|
float d; // signed distance
|
||
|
|
if(vVertType == ${Qm}) {
|
||
|
|
d = rectangleSD(p, b);
|
||
|
|
} else if(vVertType == ${th} && w == h) {
|
||
|
|
d = circleSD(p, b.x); // faster than ellipse
|
||
|
|
} else if(vVertType == ${th}) {
|
||
|
|
d = ellipseSD(p, b);
|
||
|
|
} else {
|
||
|
|
d = roundRectangleSD(p, b, vCornerRadius.wzyx);
|
||
|
|
}
|
||
|
|
|
||
|
|
// use the distance to interpolate a color to smooth the edges of the shape, doesn't need multisampling
|
||
|
|
// we must smooth colors inwards, because we can't change pixels outside the shape's bounding box
|
||
|
|
if(d > 0.0) {
|
||
|
|
if(d > outerBorder) {
|
||
|
|
discard;
|
||
|
|
} else {
|
||
|
|
outColor = distInterp(vBorderColor, vec4(0), d - outerBorder);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if(d > innerBorder) {
|
||
|
|
vec4 outerColor = outerBorder == 0.0 ? vec4(0) : vBorderColor;
|
||
|
|
vec4 innerBorderColor = blend(vBorderColor, vColor);
|
||
|
|
outColor = distInterp(innerBorderColor, outerColor, d);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
vec4 outerColor;
|
||
|
|
if(innerBorder == 0.0 && outerBorder == 0.0) {
|
||
|
|
outerColor = vec4(0);
|
||
|
|
} else if(innerBorder == 0.0) {
|
||
|
|
outerColor = vBorderColor;
|
||
|
|
} else {
|
||
|
|
outerColor = blend(vBorderColor, vColor);
|
||
|
|
}
|
||
|
|
outColor = distInterp(vColor, outerColor, d - innerBorder);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
outColor = vColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
${e.picking?`if(outColor.a == 0.0) discard;
|
||
|
|
else outColor = vIndex;`:``}
|
||
|
|
}
|
||
|
|
`);i.aPosition=t.getAttribLocation(i,`aPosition`),i.aIndex=t.getAttribLocation(i,`aIndex`),i.aVertType=t.getAttribLocation(i,`aVertType`),i.aTransform=t.getAttribLocation(i,`aTransform`),i.aAtlasId=t.getAttribLocation(i,`aAtlasId`),i.aTex=t.getAttribLocation(i,`aTex`),i.aPointAPointB=t.getAttribLocation(i,`aPointAPointB`),i.aPointCPointD=t.getAttribLocation(i,`aPointCPointD`),i.aLineWidth=t.getAttribLocation(i,`aLineWidth`),i.aColor=t.getAttribLocation(i,`aColor`),i.aCornerRadius=t.getAttribLocation(i,`aCornerRadius`),i.aBorderColor=t.getAttribLocation(i,`aBorderColor`),i.uPanZoomMatrix=t.getUniformLocation(i,`uPanZoomMatrix`),i.uAtlasSize=t.getUniformLocation(i,`uAtlasSize`),i.uBGColor=t.getUniformLocation(i,`uBGColor`),i.uZoom=t.getUniformLocation(i,`uZoom`),i.uTextures=[];for(var a=0;a<this.batchManager.getMaxAtlasesPerBatch();a++)i.uTextures.push(t.getUniformLocation(i,`uTexture${a}`));return i}},{key:`_createVAO`,value:function(){var e=[0,0,1,0,1,1,0,0,1,1,0,1];this.vertexCount=e.length/2;var t=this.maxInstances,n=this.gl,r=this.program,i=n.createVertexArray();return n.bindVertexArray(i),Tm(n,`vec2`,r.aPosition,e),this.transformBuffer=Dm(n,t,r.aTransform),this.indexBuffer=Em(n,t,`vec4`,r.aIndex),this.vertTypeBuffer=Em(n,t,`int`,r.aVertType),this.atlasIdBuffer=Em(n,t,`int`,r.aAtlasId),this.texBuffer=Em(n,t,`vec4`,r.aTex),this.pointAPointBBuffer=Em(n,t,`vec4`,r.aPointAPointB),this.pointCPointDBuffer=Em(n,t,`vec4`,r.aPointCPointD),this.lineWidthBuffer=Em(n,t,`vec2`,r.aLineWidth),this.colorBuffer=Em(n,t,`vec4`,r.aColor),this.cornerRadiusBuffer=Em(n,t,`vec4`,r.aCornerRadius),this.borderColorBuffer=Em(n,t,`vec4`,r.aBorderColor),n.bindVertexArray(null),i}},{key:`buffers`,get:function(){var e=this;return this._buffers||=Object.keys(this).filter(function(e){return te(e,`Buffer`)}).map(function(t){return e[t]}),this._buffers}},{key:`startFrame`,value:function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:Km.SCREEN;this.panZoomMatrix=e,this.renderTarget=t,this.batchDebugInfo=[],this.wrappedCount=0,this.simpleCount=0,this.startBatch()}},{key:`startBatch`,value:function(){this.instanceCount=0,this.batchManager.startBatch()}},{key:`endFrame`,value:function(){this.endBatch()}},{key:`_isVisible`,value:function(e,t){return e.visible()?t&&t.isVisible?t.isVisible(e):!0:!1}},{key:`drawTexture`,value:function(e,t,n){var r=this.atlasManager,i=this.batchManager,a=r.getRenderTypeOpts(n);if(this._isVisible(e,a)&&!(e.isEdge()&&!this._isValidEdge(e))){if(this.renderTarget.picking&&a.getTexPickingMode){var s=a.getTexPickingMode(e);if(s===qm.IGNORE)return;if(s==qm.USE_BB){this.drawPickingRectangle(e,t,n);return}}var c=o(r.getAtlasInfo(e,n)),l;try{for(c.s();!(l=c.n()).done;){var u=l.value,d=u.atlas,p=u.tex1,m=u.tex2;i.canAddToCurrentBatch(d)||this.endBatch();for(var h=i.getAtlasIndexForBatch(d),g=0,_=[[p,!0],[m,!1]];g<_.length;g++){var v=f(_[g],2),y=v[0],b=v[1];if(y.w!=0){var x=this.instanceCount;this.vertTypeBuffer.getView(x)[0]=Jm,ym(t,this.indexBuffer.getView(x));var S=this.atlasIdBuffer.getView(x);S[0]=h;var C=this.texBuffer.getView(x);C[0]=y.x,C[1]=y.y,C[2]=y.w,C[3]=y.h;var w=this.transformBuffer.getMatrixView(x);this.setTransformMatrix(e,w,a,u,b),this.instanceCount++,b||this.wrappedCount++,this.instanceCount>=this.maxInstances&&this.endBatch()}}}}catch(e){c.e(e)}finally{c.f()}}}},{key:`setTransformMatrix`,value:function(e,t,n,r){var i=arguments.length>4&&arguments[4]!==void 0?arguments[4]:!0,a=0;if(n.shapeProps&&n.shapeProps.padding&&(a=e.pstyle(n.shapeProps.padding).pfValue),r){var o=r.bb,s=r.tex1,c=r.tex2,l=s.w/(s.w+c.w);i||(l=1-l);var u=this._getAdjustedBB(o,a,i,l);this._applyTransformMatrix(t,u,n,e)}else{var d=n.getBoundingBox(e),f=this._getAdjustedBB(d,a,!0,1);this._applyTransformMatrix(t,f,n,e)}}},{key:`_applyTransformMatrix`,value:function(e,t,n,r){var i,a;jm(e);var o=n.getRotation?n.getRotation(r):0;if(o!==0){var s=n.getRotationPoint(r),c=s.x,l=s.y;Nm(e,e,[c,l]),Pm(e,e,o);var u=n.getRotationOffset(r);i=u.x+(t.xOffset||0),a=u.y+(t.yOffset||0)}else i=t.x1,a=t.y1;Nm(e,e,[i,a]),Fm(e,e,[t.w,t.h])}},{key:`_getAdjus
|