@protomaze/time 1.5.2 → 1.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@protomaze/time",
3
- "version": "1.5.2",
3
+ "version": "1.5.4",
4
4
  "description": "Protomaze Time sliders",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -1,6 +1,15 @@
1
1
  import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
2
2
  import { TimeSliderTimeRangeWithDuration, TimeSliderValueRange } from "../data/TimeSliderRange";
3
3
  import { TimeSliderEngine } from "../engine/TimeSliderEngine";
4
+ /**
5
+ * The 3D engine zooms by scaling its camera (x by the visible duration, y by the value range).
6
+ * three r185+ leaves the camera's scale out of its view matrix (matrixWorldInverse), which drops
7
+ * that zoom, so this camera always uses the full inverse of its world matrix, as three 0.178 did.
8
+ */
9
+ export declare class ScaledPerspectiveCamera extends PerspectiveCamera {
10
+ updateMatrixWorld(force?: boolean): void;
11
+ updateWorldMatrix(updateParents: boolean, updateChildren: boolean, ...rest: unknown[]): void;
12
+ }
4
13
  export declare class Three3DTimeSliderEngine extends TimeSliderEngine<Scene> {
5
14
  camera: PerspectiveCamera;
6
15
  renderer?: WebGLRenderer;
@@ -1 +1 @@
1
- import{BufferGeometry as e,GridHelper as s,Group as t,Line as i,LineBasicMaterial as o,Mesh as a,MeshBasicMaterial as n,PerspectiveCamera as r,PlaneGeometry as d,Scene as h,Vector2 as l,Vector3 as m,WebGLRenderer as c}from"three";import p from"three/examples/jsm/libs/stats.module.js";import{Disposables as w}from"../common/Disposables.js";import{getStartOfWeek as u}from"../common/TimeTools.js";import{TimeSliderEngine as f}from"../engine/TimeSliderEngine.js";import{ONE_MONTH as x,ONE_SECOND as b,ONE_WEEK as v}from"../ticks/TimeSliderConstants.js";import{TimeTicksBar as g}from"../ticks/TimeTicksBar.js";export class Three3DTimeSliderEngine extends f{constructor(){super(new h),this.camera=new r}showStats(e){if(this.container)if(e){this.stats=new p;const e=this.stats.dom;e.style.position="absolute",e.style.top="auto",e.style.bottom="32px",e.style.left="8px",this.container.appendChild(e),this.statsDom=e}else this.statsDom&&(this.container.removeChild(this.statsDom),this.statsDom=void 0,this.stats=void 0)}setTheme(e){super.setTheme(e),this.onThemeChange?.(e)}async init(r){const h=new c({antialias:!0});this.renderer=h,this.disposables=new w,this.container=r,this.renderer.setClearColor("#111"),r.appendChild(h.domElement),this.disposables.add(()=>r.removeChild(h.domElement)),this.camera.position.z=2.073,this.container.addEventListener("keydown",e=>{const s=1/this.camera.scale.x;"KeyQ"===e.code&&(e.preventDefault(),this.camera.rotateY(s)),"KeyE"===e.code&&(e.preventDefault(),this.camera.rotateY(-s))});const l=new t,p=new t;l.scale.x=b,l.position.z=.9,this.scene.add(l);const f=new d(100,1),y=new n({color:"#444"}),T=new a(f,y);T.position.z=.5,T.position.y=-.001,T.rotateX(-.5*Math.PI),l.add(T);const z=new a(f,y);z.position.z=.5,z.position.y=-.001,z.rotateX(-.5*Math.PI),p.add(z);const C=new o({color:"#444"}),j=(new e).setFromPoints([new m(0,0,0),new m(0,1,0),new m(0,1,1)]),D=(new e).setFromPoints([new m(-1,0,0),new m(1,0,0)]),S=new i(D,C),V=new i(D,C);V.position.y=1,p.add(S),p.add(V),p.position.z=.9,this.scene.add(p);const k=[],P=new o({color:"#000"}),E=(new e).setFromPoints([new m(0,0,1),new m(0,0,-1e3)]),M=new t;p.add(M);const F=[];let R,I,X,K;const O=()=>{Date.now();const e=this.getSize().width,{startTime:s,duration:t,endTime:o}=this.getTimeRange(),a=t,[n]=g.getSpacing(e,a),r=.5*(o+s);if(n<x){p.visible=!1,l.scale.x=n;let e=r%n;n>=v&&(e=r-u(r)),l.position.x=-e,l.visible=!0}else{l.visible=!1;let e=0,a=0;g.generateTicks(n,s-3*t,o+3*t,(n,r)=>{s-t<=n&&n<=o+t&&(k[e]||(k[e]=new i(j,C),p.add(k[e])),k[e].position.x=n,k[e].visible=!0,e++),F[a]||(F[a]=new i(E,P),p.add(F[a])),F[a].position.x=n,F[a].visible=!0,a++});for(let e=a;e<F.length;e++)F[e].visible=!1;for(let s=e;s<k.length;s++)k[s].visible=!1;K&&(K.scale.x=1e3*t),z.scale.x=t,z.position.x=r,K&&(K.position.x=-500*t),S.scale.x=1e3*t,V.scale.x=1e3*t,p.position.x=-r,p.visible=!0}};this.onThemeChange=e=>{const t="dark"===e?"#000":"#fff",i="dark"===e?"#444":"#bbb";this.renderer?.setClearColor("dark"===e?"#111":"#eee"),R&&l.remove(R),R?.dispose(),R=new s(1e3,1e3,t,t),l.add(R),X&&l.remove(X),X?.dispose(),X=new s(1e3,1e3,i,i),X.position.z=500,X.position.y=1,l.add(X),I&&l.remove(I),I?.dispose(),I=new s(1e3,1e3,i,i),I.position.y=-499,I.rotateX(-.5*Math.PI),l.add(I),K&&p.remove(K),K?.dispose(),K=new s(200,200,t,t),K.position.z=-101,p.add(K),y.color.set(i),C.color.set(i),P.color.set(t),O()},this.onThemeChange(this.theme),this.disposables.add(this.on("time",O)),this.disposables.add(this.on("size",O)),this.updateValueRange({minValue:0,maxValue:1});let Y=!0;this.disposables.add(()=>Y=!1),this.disposables.add(()=>this.scene.clear()),this.disposables.add(()=>h.dispose());const q=()=>{Y&&(h.render(this.scene,this.camera),this.stats&&this.stats.update(),requestAnimationFrame(q))};q()}updateTimeRange(e){const s=this.camera.scale.x,{duration:t}=e;this.camera.scale.x=t,s!==t&&(this.camera.rotation.y=this.camera.rotation.y*s/t),this.camera.updateProjectionMatrix()}updateValueRange(e){const s=e.maxValue-e.minValue;this.camera.scale.y=s,this.camera.position.y=e.minValue+.5*s,this.camera.updateProjectionMatrix()}updateSize(e,s){this.renderer?.setSize(e,s,!0)}destroy(){this.disposables?.dispose()}setHorizontalCompression(e){if(!this.renderer)return;if(e<=1)return void this.camera.clearViewOffset();const{width:s,height:t}=this.renderer.getSize(new l),i=s*e,o=t,a=(i-s)/2,n=s,r=t;this.camera.setViewOffset(i,o,a,0,n,r)}}
1
+ import{BufferGeometry as e,GridHelper as t,Group as s,Line as i,LineBasicMaterial as o,Mesh as a,MeshBasicMaterial as n,PerspectiveCamera as r,PlaneGeometry as d,Scene as l,Vector2 as h,Vector3 as m,WebGLRenderer as c}from"three";import p from"three/examples/jsm/libs/stats.module.js";import{Disposables as w}from"../common/Disposables.js";import{getStartOfWeek as x}from"../common/TimeTools.js";import{TimeSliderEngine as u}from"../engine/TimeSliderEngine.js";import{ONE_MONTH as v,ONE_SECOND as f,ONE_WEEK as b}from"../ticks/TimeSliderConstants.js";import{TimeTicksBar as y}from"../ticks/TimeTicksBar.js";export class ScaledPerspectiveCamera extends r{updateMatrixWorld(e){super.updateMatrixWorld(e),this.matrixWorldInverse.copy(this.matrixWorld).invert()}updateWorldMatrix(e,t,...s){super.updateWorldMatrix(e,t,...s),this.matrixWorldInverse.copy(this.matrixWorld).invert()}}export class Three3DTimeSliderEngine extends u{constructor(){super(new l),this.camera=new ScaledPerspectiveCamera}showStats(e){if(this.container)if(e){this.stats=new p;const e=this.stats.dom;e.style.position="absolute",e.style.top="auto",e.style.bottom="32px",e.style.left="8px",this.container.appendChild(e),this.statsDom=e}else this.statsDom&&(this.container.removeChild(this.statsDom),this.statsDom=void 0,this.stats=void 0)}setTheme(e){super.setTheme(e),this.onThemeChange?.(e)}async init(r){const l=new c({antialias:!0});this.renderer=l,this.disposables=new w,this.container=r,this.renderer.setClearColor("#111"),r.appendChild(l.domElement),this.disposables.add(()=>r.removeChild(l.domElement)),this.camera.position.z=2.073,this.container.addEventListener("keydown",e=>{const t=1/this.camera.scale.x;"KeyQ"===e.code&&(e.preventDefault(),this.camera.rotateY(t)),"KeyE"===e.code&&(e.preventDefault(),this.camera.rotateY(-t))});const h=new s,p=new s;h.scale.x=f,h.position.z=.9,this.scene.add(h);const u=new d(100,1),g=new n({color:"#444"}),T=new a(u,g);T.position.z=.5,T.position.y=-.001,T.rotateX(-.5*Math.PI),h.add(T);const C=new a(u,g);C.position.z=.5,C.position.y=-.001,C.rotateX(-.5*Math.PI),p.add(C);const z=new o({color:"#444"}),S=(new e).setFromPoints([new m(0,0,0),new m(0,1,0),new m(0,1,1)]),P=(new e).setFromPoints([new m(-1,0,0),new m(1,0,0)]),j=new i(P,z),D=new i(P,z);D.position.y=1,p.add(j),p.add(D),p.position.z=.9,this.scene.add(p);const M=[],V=new o({color:"#000"}),k=(new e).setFromPoints([new m(0,0,1),new m(0,0,-1e3)]),W=new s;p.add(W);const E=[];let I,F,R,X;const K=()=>{Date.now();const e=this.getSize().width,{startTime:t,duration:s,endTime:o}=this.getTimeRange(),a=s,[n]=y.getSpacing(e,a),r=.5*(o+t);if(n<v){p.visible=!1,h.scale.x=n;let e=r%n;n>=b&&(e=r-x(r)),h.position.x=-e,h.visible=!0}else{h.visible=!1;let e=0,a=0;y.generateTicks(n,t-3*s,o+3*s,(n,r)=>{t-s<=n&&n<=o+s&&(M[e]||(M[e]=new i(S,z),p.add(M[e])),M[e].position.x=n,M[e].visible=!0,e++),E[a]||(E[a]=new i(k,V),p.add(E[a])),E[a].position.x=n,E[a].visible=!0,a++});for(let e=a;e<E.length;e++)E[e].visible=!1;for(let t=e;t<M.length;t++)M[t].visible=!1;X&&(X.scale.x=1e3*s),C.scale.x=s,C.position.x=r,X&&(X.position.x=-500*s),j.scale.x=1e3*s,D.scale.x=1e3*s,p.position.x=-r,p.visible=!0}};this.onThemeChange=e=>{const s="dark"===e?"#000":"#fff",i="dark"===e?"#444":"#bbb";this.renderer?.setClearColor("dark"===e?"#111":"#eee"),I&&h.remove(I),I?.dispose(),I=new t(1e3,1e3,s,s),h.add(I),R&&h.remove(R),R?.dispose(),R=new t(1e3,1e3,i,i),R.position.z=500,R.position.y=1,h.add(R),F&&h.remove(F),F?.dispose(),F=new t(1e3,1e3,i,i),F.position.y=-499,F.rotateX(-.5*Math.PI),h.add(F),X&&p.remove(X),X?.dispose(),X=new t(200,200,s,s),X.position.z=-101,p.add(X),g.color.set(i),z.color.set(i),V.color.set(s),K()},this.onThemeChange(this.theme),this.disposables.add(this.on("time",K)),this.disposables.add(this.on("size",K)),this.updateValueRange({minValue:0,maxValue:1});let O=!0;this.disposables.add(()=>O=!1),this.disposables.add(()=>this.scene.clear()),this.disposables.add(()=>l.dispose());const Y=()=>{O&&(l.render(this.scene,this.camera),this.stats&&this.stats.update(),requestAnimationFrame(Y))};Y()}updateTimeRange(e){const t=this.camera.scale.x,{duration:s}=e;this.camera.scale.x=s,t!==s&&(this.camera.rotation.y=this.camera.rotation.y*t/s),this.camera.updateProjectionMatrix()}updateValueRange(e){const t=e.maxValue-e.minValue;this.camera.scale.y=t,this.camera.position.y=e.minValue+.5*t,this.camera.updateProjectionMatrix()}updateSize(e,t){this.renderer?.setSize(e,t,!0)}destroy(){this.disposables?.dispose()}setHorizontalCompression(e){if(!this.renderer)return;if(e<=1)return void this.camera.clearViewOffset();const{width:t,height:s}=this.renderer.getSize(new h),i=t*e,o=s,a=(i-t)/2,n=t,r=s;this.camera.setViewOffset(i,o,a,0,n,r)}}
@@ -1 +1 @@
1
- import{BoxGeometry as e,Color as n,DoubleSide as t,InstancedMesh as o,Object3D as i,ShaderMaterial as l,Vector2 as r}from"three";import{Disposables as a}from"../../common/Disposables.js";import{toGLSLColor as s,toGLSLFloat as d}from"../../common/GlslTools.js";import{getTimePartsInHours as c}from"../../common/TimeTools.js";import{TimeSliderSplittingFixedHistogram as m}from"../../data/histogram/TimeSliderSplittingFixedHistogram.js";import{TimeSliderHistogramLayer as f}from"../../layer/TimeSliderHistogramLayer.js";import{TimeSliderIntervalsLayer as v}from"../../layer/TimeSliderIntervalsLayer.js";import{Three3DTimeSliderEngine as g}from"../Three3DTimeSliderEngine.js";import{GrowingInstanceMatrix as h}from"./GrowingInstanceMatrix.js";const p=123456;export class Three3DIntervalsTimeLayerLoader{constructor(){this.engineClass=g,this.followsLayerBand=!0}canLoad(e){return e instanceof v}load(v,g,u,x){return this.canLoad(v)?function(v,g,u,x){const b=new a,y=v.model,{material:S,dispose:w}=(v.style,function(e,o,i){const v=void 0!==e.styler,g=function(e){return e instanceof f&&void 0!==e.histogram.classifier&&e.histogram instanceof m}(e),h=new a,u=()=>{const n=e.style,t=n.border?n.border.width||1:0,o="boolean"!=typeof n.border?.centered||n.border?.centered;let i="",l="";if(g){const n=e.maxClassifications||4;for(let e=0;e<n;e+=4)i+=`attribute vec4 split${e/4};`,i+=`flat out vec4 vSplit${e/4};`,l+=`vSplit${e/4} = split${e/4};`;console.log("createVertexShader",{splitAttributes:i,maxSplits:n})}return`\n // precision mediump float;\n // precision highp float;\n \n uniform vec2 layerRange;\n const bool borderCentered = ${o};\n const float borderWidth = ${d(t)};\n const float infinityDuration = ${d(p)};\n const float msInHour = 3600000.0;\n\n ${i}\n\n uniform vec2 originTime;\n uniform vec2 nowTime;\n uniform vec2 valueRange;\n uniform int selection;\n uniform vec2 worldPerPixel;\n // uniform float split;\n // attribute float split;\n \n ${v?"attribute vec3 borderColor;":""}\n ${v?"varying vec3 fillColor;":""}\n ${v?"varying vec3 strokeColor;":""}\n varying vec2 vUv;\n\n // flat out float vSplit;\n flat out int vSelected;\n flat out int vTopBottom;\n flat out vec2 vSize;\n flat out vec2 vTransform;\n\n void main() {\n ${v?"fillColor = instanceColor;":""}\n ${v?"strokeColor = borderColor;":""}\n vUv = uv;\n // vSplit = split;\n ${l}\n \n bool selected = gl_InstanceID == selection;\n vSelected = selected ? 1 : 0;\n\n float minValue = valueRange.x;\n float valueSize = valueRange.y - minValue;\n\n float width = length(instanceMatrix[0].xyz);\n float height = length(instanceMatrix[1].xyz) / valueSize;\n float depth = length(instanceMatrix[2].xyz);\n\n height *= (layerRange.y - layerRange.x);\n\n if (selected) {\n depth += 0.00001;\n }\n\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n pos.x = relativeTime;\n \n pos.y = layerRange.x + ((pos.y - minValue) / valueSize) * (layerRange.y - layerRange.x);\n pos.z = 1.0 - 0.5 * depth;\n \n if (selected) {\n pos.z += 0.00001;\n }\n\n if (borderCentered) {\n vec3 borderOffset = borderWidth * vec3(worldPerPixel, 0.0);\n width += borderOffset.x;\n height += borderOffset.y;\n depth += borderOffset.z;\n }\n\n // Analyze the normal to determine the face\n // Use abs() to handle both positive and negative directions\n vec3 absNormal = abs(normal);\n\n if (absNormal.x > 0.99) {\n // Side is on the X-axis (left/right face)\n // The 2D plane is defined by the geometry's Depth and Height\n vSize = vec2(depth, height);\n vTransform = vec2(0.001, worldPerPixel.y);\n vTopBottom = 0;\n } else if (absNormal.y > 0.99) {\n // Side is on the Y-axis (top/bottom face)\n // The 2D plane is defined by the geometry's Width and Depth\n vSize = vec2(width, depth);\n vTransform = vec2(worldPerPixel.x, 0.001);\n vTopBottom = normal.y > 0.99 ? 1 : 2;\n } else {\n // Side is on the Z-axis (front/back face)\n // The 2D plane is defined by the geometry's Width and Height\n vSize = vec2(width, height);\n vTransform = vec2(worldPerPixel);\n vTopBottom = 0;\n }\n\n mat4 adjustedInstanceMatrix = instanceMatrix;\n adjustedInstanceMatrix[0].xyz *= width / length(instanceMatrix[0].xyz);\n adjustedInstanceMatrix[1].xyz *= height / length(instanceMatrix[1].xyz);\n adjustedInstanceMatrix[2].xyz *= depth / length(instanceMatrix[2].xyz);\n adjustedInstanceMatrix[3].xyz = pos;\n \n vec4 localPos = adjustedInstanceMatrix * vec4(position, 1.0);\n gl_Position = projectionMatrix * modelViewMatrix * localPos;\n }\n `},x=()=>{const t=e.style,o=new n(t.fill?.color||"#df0"),i=t.fill?.opacity||.5,l=new n(t.border?.color||"#000"),r=t.border?t.border.opacity||1:0,a=t.border?t.border.width||1:0,c="number"==typeof t.border?.smoothing?Math.max(0,t.border.smoothing):1;let m="";if(g){const n=e.maxClassifications||4,t=e.classificationColors||[];m+=`const int maxSplits = ${n};`;let o="",i="";for(let e=0;e<t.length;e++)m+=`\n const vec3 splitColor${e} = ${s(t[e]||"#777")};\n `,i+=`\n if (idx == ${e}) return splitColor${e};\n `;for(let e=0;e<n;e+=4)m+=`\n flat in vec4 vSplit${e/4};\n `,o+=`\n if (idx < ${e+4}) return vSplit${e/4}[idx - ${e}];\n `;m+=`\n float getSplit(int idx) {\n ${o}\n return 0.0;\n }\n vec3 getSplitColor(int idx) {\n ${i}\n return fillColor; // Fallback to default fill color\n }\n `,console.log("createFragmentShader",{splitVars:m,maxSplits:n,classificationColors:t})}return`\n // precision mediump float;\n // precision highp float;\n const float fillOpacity = ${d(i)};\n const float borderOpacity = ${d(r)};\n const float borderWidth = ${d(a)};\n const float borderSmoothing = ${d(c)};\n const bool borderSidesVertical = ${"vertical"===t.border?.sides?"true":"false"};\n\n ${v?"varying vec3 fillColor;":`const vec3 fillColor = vec3(${d(o.r)},${d(o.g)},${d(o.b)});`}\n ${v?"varying vec3 strokeColor;":`const vec3 strokeColor = vec3(${d(l.r)},${d(l.g)},${d(l.b)});`}\n\n varying vec2 vUv;\n flat in int vSelected;\n flat in int vTopBottom;\n flat in vec2 vSize;\n flat in vec2 vTransform;\n\n ${m}\n\n // Coverage of the inside of an edge at lo; smoothing 0 gives a hard step (smoothstep is undefined for equal edges).\n float edgeAlpha(float lo, float smoothing, float x) {\n return smoothing > 0.0 ? smoothstep(lo, lo + smoothing, x) : step(lo, x);\n }\n\n void main() {\n ${g?"\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n vec3 segmentFillColor;\n float segmentStart = 0.0;\n float segmentEnd = 1.0;\n if (vTopBottom < 1) {\n // Determine which segment the current fragment is in\n int segment = 0;\n for (int i = 0; i < maxSplits; i++) {\n float spliti = getSplit(i);\n if (vUv.y <= spliti) {\n segmentEnd = spliti;\n segment = i;\n break;\n }\n else {\n segmentStart = spliti;\n }\n // if (vUv.y <= segmentStart + spliti) {\n // segmentEnd = segmentStart + spliti;\n // segment = i;\n // break;\n // }\n // else {\n // segmentStart += spliti;\n // }\n }\n\n // if (segment == 0 && segmentStart > 0.0) {\n // segmentEnd = 1.0;\n // for (int i = maxSplits - 1; i >= 0; i--) {\n // float spliti = getSplit(i);\n // if (spliti > 0.0) {\n // segmentStart = 1.0 - spliti;\n // segment = i;\n // break;\n // }\n // }\n // }\n \n segmentFillColor = getSplitColor(segment);\n }\n else if (vTopBottom < 2) {\n // Determine the last segment with a value\n int segment = 0;\n for (int i = maxSplits - 1; i >= 0; i--) {\n if (getSplit(i) < 0.99999) {\n segment = i + 1;\n break;\n }\n }\n segmentFillColor = getSplitColor(segment);\n }\n else {\n // Determine the first segment with a value\n int segment = 0;\n for (int i = 0; i < maxSplits; i++) {\n if (getSplit(i) > 0.0) {\n segment = i;\n break;\n }\n }\n segmentFillColor = getSplitColor(segment);\n }\n\n vec3 segmentBorderColor = segmentFillColor;\n float segmentSize = segmentEnd - segmentStart;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * vTransform;\n // Half border UV width if centered, full if inside-only\n vec2 bw = (bwWorld / vSize) / vec2(1.0, segmentSize);\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * vTransform / vSize;\n\n // Adjust UV coordinates for the current segment (y-axis only)\n float uvYAdjusted = (vUv.y - segmentStart) / segmentSize;\n\n // Calculate alpha for borders and fill for the adjusted UV\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n // borderSidesVertical: skip the border between stacked segments (top/bottom), keep only left/right.\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, uvYAdjusted) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - uvYAdjusted);\n float fillAlpha = alphaX * alphaY;\n\n vec3 color = mix(segmentBorderColor, segmentFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = vec4(color, alpha);\n ":"\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * vTransform;\n\n // Half border UV width if centered, full if inside-only\n vec2 bw = bwWorld / vSize;\n\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * vTransform / vSize;\n\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, vUv.y) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - vUv.y);\n\n float fillAlpha = alphaX * alphaY;\n\n vec3 color = mix(finalBorderColor, finalFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = vec4(color, alpha);\n "}\n }\n `},b=new l({transparent:!0,side:t,uniforms:{worldPerPixel:{value:new r(i.camera.scale.x/i.getSize().width,i.camera.scale.y/i.getSize().height)},layerRange:{value:new r(e.min,e.max)},selection:{value:-1},valueRange:{value:new r(0,1)},originTime:{value:new r(0,0)}},vertexShader:u(),fragmentShader:x()}),y=()=>{b.uniforms.worldPerPixel.value.set(i.camera.scale.x/i.getSize().width,i.camera.scale.y/i.getSize().height)},S=()=>{const e=i.getTimeRange(),n=e.startTime+.5*e.duration,[t,o]=c(n);b.uniforms.originTime.value.set(t,o)},w=()=>{const n=o.valueRanges.get(e.yAxis.group||e.id);if(n){const e=b.uniforms.valueRange.value;e.x===n.min&&e.y===n.max||b.uniforms.valueRange.value.set(n.min,n.max)}},C=()=>{y(),S()};h.add(o.on("valueRanges",w)),h.add(i.on("time",C)),h.add(i.on("value",y)),h.add(i.on("size",y)),h.add(e.on("loaded",w)),h.add(e.on("visible",w));const T=()=>b.uniforms.layerRange.value.set(e.min,e.max);return h.add(e.on("min",T)),h.add(e.on("max",T)),S(),w(),h.add(e.on("invalidateAll",()=>{b.vertexShader=u(),b.fragmentShader=x(),b.needsUpdate=!0})),{material:b,dispose:()=>h.dispose()}}(v,u,x));b.add(w);const C=new e(1,1,1),T=new o(C,S,y.data.length);T.frustumCulled=!1,T.receiveShadow=!0,T.castShadow=!0;const $=function(e,n,t){const o=new h(n,e=>{const n=new i,t=.5*(e.t[0]+e.t[1]),[o,l]=c(t),r=e.v[1]-e.v[0],a=e.v[0]+.5*r;n.position.set(o,a,l);const s=e.t[1]-e.t[0];return n.scale.set(s,r,.1),n.updateMatrix(),n.matrix},t);return o.registerMesh(e),o}(T,y,{colorProvider:v.styler?e=>{const n=v.styler(e);return n?{fill:n.fill?.color,stroke:n.border?.color}:void 0}:void 0,defaultFill:v.style.fill?.color,defaultBorder:v.style.border?.color,splitProvider:v instanceof f&&v.histogram instanceof m?e=>e.attributes.splits||[1]:void 0,maxSplits:v instanceof f?v.maxClassifications:void 0});b.add(()=>$.dispose()),u.selectionOptions.highlight&&b.add(v.on("selection",e=>{if(e.length>0){const n=$.getIndex(e[0]);S.uniforms.selection.value="number"==typeof n?n:-1}else S.uniforms.selection.value=-1}));return g.add(T),b.add(()=>g.remove(T)),b.disposeLater()}(v,g,x,u):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:v}),()=>{})}}
1
+ import{BoxGeometry as e,Color as n,DoubleSide as t,InstancedMesh as o,Object3D as i,ShaderMaterial as l,Vector2 as r}from"three";import{Disposables as a}from"../../common/Disposables.js";import{toGLSLColor as s,toGLSLFloat as d}from"../../common/GlslTools.js";import{getTimePartsInHours as c}from"../../common/TimeTools.js";import{TimeSliderSplittingFixedHistogram as m}from"../../data/histogram/TimeSliderSplittingFixedHistogram.js";import{TimeSliderHistogramLayer as f}from"../../layer/TimeSliderHistogramLayer.js";import{TimeSliderIntervalsLayer as v}from"../../layer/TimeSliderIntervalsLayer.js";import{Three3DTimeSliderEngine as g}from"../Three3DTimeSliderEngine.js";import{GrowingInstanceMatrix as h}from"./GrowingInstanceMatrix.js";const p=123456;export class Three3DIntervalsTimeLayerLoader{constructor(){this.engineClass=g,this.followsLayerBand=!0}canLoad(e){return e instanceof v}load(v,g,u,x){return this.canLoad(v)?function(v,g,u,x){const b=new a,y=v.model,{material:S,dispose:w}=(v.style,function(e,o,i){const v=void 0!==e.styler,g=function(e){return e instanceof f&&void 0!==e.histogram.classifier&&e.histogram instanceof m}(e),h=new a,u=()=>{const n=e.style,t=n.border?n.border.width||1:0,o="boolean"!=typeof n.border?.centered||n.border?.centered;let i="",l="";if(g){const n=e.maxClassifications||4;for(let e=0;e<n;e+=4)i+=`attribute vec4 split${e/4};`,i+=`flat out vec4 vSplit${e/4};`,l+=`vSplit${e/4} = split${e/4};`;console.log("createVertexShader",{splitAttributes:i,maxSplits:n})}return`\n // precision mediump float;\n // precision highp float;\n \n uniform vec2 layerRange;\n const bool borderCentered = ${o};\n const float borderWidth = ${d(t)};\n const float infinityDuration = ${d(p)};\n const float msInHour = 3600000.0;\n\n ${i}\n\n uniform vec2 originTime;\n uniform vec2 nowTime;\n uniform vec2 valueRange;\n uniform int selection;\n uniform vec2 worldPerPixel;\n // uniform float split;\n // attribute float split;\n \n ${v?"attribute vec3 borderColor;":""}\n ${v?"varying vec3 fillColor;":""}\n ${v?"varying vec3 strokeColor;":""}\n varying vec2 vUv;\n\n // flat out float vSplit;\n flat out int vSelected;\n flat out int vTopBottom;\n flat out vec2 vSize;\n flat out vec2 vTransform;\n\n void main() {\n ${v?"fillColor = instanceColor;":""}\n ${v?"strokeColor = borderColor;":""}\n vUv = uv;\n // vSplit = split;\n ${l}\n \n bool selected = gl_InstanceID == selection;\n vSelected = selected ? 1 : 0;\n\n float minValue = valueRange.x;\n float valueSize = valueRange.y - minValue;\n\n float width = length(instanceMatrix[0].xyz);\n float height = length(instanceMatrix[1].xyz) / valueSize;\n float depth = length(instanceMatrix[2].xyz);\n\n height *= (layerRange.y - layerRange.x);\n\n if (selected) {\n depth += 0.00001;\n }\n\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n pos.x = relativeTime;\n \n pos.y = layerRange.x + ((pos.y - minValue) / valueSize) * (layerRange.y - layerRange.x);\n pos.z = 1.0 - 0.5 * depth;\n \n if (selected) {\n pos.z += 0.00001;\n }\n\n if (borderCentered) {\n vec3 borderOffset = borderWidth * vec3(worldPerPixel, 0.0);\n width += borderOffset.x;\n height += borderOffset.y;\n depth += borderOffset.z;\n }\n\n // Analyze the normal to determine the face\n // Use abs() to handle both positive and negative directions\n vec3 absNormal = abs(normal);\n\n if (absNormal.x > 0.99) {\n // Side is on the X-axis (left/right face)\n // The 2D plane is defined by the geometry's Depth and Height\n vSize = vec2(depth, height);\n vTransform = vec2(0.001, worldPerPixel.y);\n vTopBottom = 0;\n } else if (absNormal.y > 0.99) {\n // Side is on the Y-axis (top/bottom face)\n // The 2D plane is defined by the geometry's Width and Depth\n vSize = vec2(width, depth);\n vTransform = vec2(worldPerPixel.x, 0.001);\n vTopBottom = normal.y > 0.99 ? 1 : 2;\n } else {\n // Side is on the Z-axis (front/back face)\n // The 2D plane is defined by the geometry's Width and Height\n vSize = vec2(width, height);\n vTransform = vec2(worldPerPixel);\n vTopBottom = 0;\n }\n\n mat4 adjustedInstanceMatrix = instanceMatrix;\n adjustedInstanceMatrix[0].xyz *= width / length(instanceMatrix[0].xyz);\n adjustedInstanceMatrix[1].xyz *= height / length(instanceMatrix[1].xyz);\n adjustedInstanceMatrix[2].xyz *= depth / length(instanceMatrix[2].xyz);\n adjustedInstanceMatrix[3].xyz = pos;\n \n vec4 localPos = adjustedInstanceMatrix * vec4(position, 1.0);\n gl_Position = projectionMatrix * modelViewMatrix * localPos;\n }\n `},x=()=>{const t=e.style,o=new n(t.fill?.color||"#df0"),i=t.fill?.opacity||.5,l=new n(t.border?.color||"#000"),r=t.border?t.border.opacity||1:0,a=t.border?t.border.width||1:0,c="number"==typeof t.border?.smoothing?Math.max(0,t.border.smoothing):1;let m="";if(g){const n=e.maxClassifications||4,t=e.classificationColors||[];m+=`const int maxSplits = ${n};`;let o="",i="";for(let e=0;e<t.length;e++)m+=`\n const vec3 splitColor${e} = ${s(t[e]||"#777")};\n `,i+=`\n if (idx == ${e}) return splitColor${e};\n `;for(let e=0;e<n;e+=4)m+=`\n flat in vec4 vSplit${e/4};\n `,o+=`\n if (idx < ${e+4}) return vSplit${e/4}[idx - ${e}];\n `;m+=`\n float getSplit(int idx) {\n ${o}\n return 0.0;\n }\n vec3 getSplitColor(int idx) {\n ${i}\n return fillColor; // Fallback to default fill color\n }\n `,console.log("createFragmentShader",{splitVars:m,maxSplits:n,classificationColors:t})}return`\n // precision mediump float;\n // precision highp float;\n const float fillOpacity = ${d(i)};\n const float borderOpacity = ${d(r)};\n const float borderWidth = ${d(a)};\n const float borderSmoothing = ${d(c)};\n const bool borderSidesVertical = ${"vertical"===t.border?.sides?"true":"false"};\n\n ${v?"varying vec3 fillColor;":`const vec3 fillColor = vec3(${d(o.r)},${d(o.g)},${d(o.b)});`}\n ${v?"varying vec3 strokeColor;":`const vec3 strokeColor = vec3(${d(l.r)},${d(l.g)},${d(l.b)});`}\n\n varying vec2 vUv;\n flat in int vSelected;\n flat in int vTopBottom;\n flat in vec2 vSize;\n flat in vec2 vTransform;\n\n ${m}\n\n // Coverage of the inside of an edge at lo; smoothing 0 gives a hard step (smoothstep is undefined for equal edges).\n float edgeAlpha(float lo, float smoothing, float x) {\n return smoothing > 0.0 ? smoothstep(lo, lo + smoothing, x) : step(lo, x);\n }\n\n void main() {\n ${g?"\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n vec3 segmentFillColor;\n float segmentStart = 0.0;\n float segmentEnd = 1.0;\n if (vTopBottom < 1) {\n // Determine which segment the current fragment is in\n int segment = 0;\n for (int i = 0; i < maxSplits; i++) {\n float spliti = getSplit(i);\n if (vUv.y <= spliti) {\n segmentEnd = spliti;\n segment = i;\n break;\n }\n else {\n segmentStart = spliti;\n }\n // if (vUv.y <= segmentStart + spliti) {\n // segmentEnd = segmentStart + spliti;\n // segment = i;\n // break;\n // }\n // else {\n // segmentStart += spliti;\n // }\n }\n\n // if (segment == 0 && segmentStart > 0.0) {\n // segmentEnd = 1.0;\n // for (int i = maxSplits - 1; i >= 0; i--) {\n // float spliti = getSplit(i);\n // if (spliti > 0.0) {\n // segmentStart = 1.0 - spliti;\n // segment = i;\n // break;\n // }\n // }\n // }\n \n segmentFillColor = getSplitColor(segment);\n }\n else if (vTopBottom < 2) {\n // Determine the last segment with a value\n int segment = 0;\n for (int i = maxSplits - 1; i >= 0; i--) {\n if (getSplit(i) < 0.99999) {\n segment = i + 1;\n break;\n }\n }\n segmentFillColor = getSplitColor(segment);\n }\n else {\n // Determine the first segment with a value\n int segment = 0;\n for (int i = 0; i < maxSplits; i++) {\n if (getSplit(i) > 0.0) {\n segment = i;\n break;\n }\n }\n segmentFillColor = getSplitColor(segment);\n }\n\n vec3 segmentBorderColor = segmentFillColor;\n float segmentSize = segmentEnd - segmentStart;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * vTransform;\n // Half border UV width if centered, full if inside-only\n vec2 bw = (bwWorld / vSize) / vec2(1.0, segmentSize);\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * vTransform / vSize;\n\n // Adjust UV coordinates for the current segment (y-axis only)\n float uvYAdjusted = (vUv.y - segmentStart) / segmentSize;\n\n // Calculate alpha for borders and fill for the adjusted UV\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n // borderSidesVertical: skip the border between stacked segments (top/bottom), keep only left/right.\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, uvYAdjusted) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - uvYAdjusted);\n float fillAlpha = alphaX * alphaY;\n\n vec3 color = mix(segmentBorderColor, segmentFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = linearToOutputTexel(vec4(color, alpha));\n ":"\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * vTransform;\n\n // Half border UV width if centered, full if inside-only\n vec2 bw = bwWorld / vSize;\n\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * vTransform / vSize;\n\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, vUv.y) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - vUv.y);\n\n float fillAlpha = alphaX * alphaY;\n\n vec3 color = mix(finalBorderColor, finalFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = linearToOutputTexel(vec4(color, alpha));\n "}\n }\n `},b=new l({transparent:!0,side:t,uniforms:{worldPerPixel:{value:new r(i.camera.scale.x/i.getSize().width,i.camera.scale.y/i.getSize().height)},layerRange:{value:new r(e.min,e.max)},selection:{value:-1},valueRange:{value:new r(0,1)},originTime:{value:new r(0,0)}},vertexShader:u(),fragmentShader:x()}),y=()=>{b.uniforms.worldPerPixel.value.set(i.camera.scale.x/i.getSize().width,i.camera.scale.y/i.getSize().height)},S=()=>{const e=i.getTimeRange(),n=e.startTime+.5*e.duration,[t,o]=c(n);b.uniforms.originTime.value.set(t,o)},w=()=>{const n=o.valueRanges.get(e.yAxis.group||e.id);if(n){const e=b.uniforms.valueRange.value;e.x===n.min&&e.y===n.max||b.uniforms.valueRange.value.set(n.min,n.max)}},C=()=>{y(),S()};h.add(o.on("valueRanges",w)),h.add(i.on("time",C)),h.add(i.on("value",y)),h.add(i.on("size",y)),h.add(e.on("loaded",w)),h.add(e.on("visible",w));const T=()=>b.uniforms.layerRange.value.set(e.min,e.max);return h.add(e.on("min",T)),h.add(e.on("max",T)),S(),w(),h.add(e.on("invalidateAll",()=>{b.vertexShader=u(),b.fragmentShader=x(),b.needsUpdate=!0})),{material:b,dispose:()=>h.dispose()}}(v,u,x));b.add(w);const C=new e(1,1,1),T=new o(C,S,y.data.length);T.frustumCulled=!1,T.receiveShadow=!0,T.castShadow=!0;const $=function(e,n,t){const o=new h(n,e=>{const n=new i,t=.5*(e.t[0]+e.t[1]),[o,l]=c(t),r=e.v[1]-e.v[0],a=e.v[0]+.5*r;n.position.set(o,a,l);const s=e.t[1]-e.t[0];return n.scale.set(s,r,.1),n.updateMatrix(),n.matrix},t);return o.registerMesh(e),o}(T,y,{colorProvider:v.styler?e=>{const n=v.styler(e);return n?{fill:n.fill?.color,stroke:n.border?.color}:void 0}:void 0,defaultFill:v.style.fill?.color,defaultBorder:v.style.border?.color,splitProvider:v instanceof f&&v.histogram instanceof m?e=>e.attributes.splits||[1]:void 0,maxSplits:v instanceof f?v.maxClassifications:void 0});b.add(()=>$.dispose()),u.selectionOptions.highlight&&b.add(v.on("selection",e=>{if(e.length>0){const n=$.getIndex(e[0]);S.uniforms.selection.value="number"==typeof n?n:-1}else S.uniforms.selection.value=-1}));return g.add(T),b.add(()=>g.remove(T)),b.disposeLater()}(v,g,x,u):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:v}),()=>{})}}
@@ -1 +1 @@
1
- import{BoxGeometry as e,Color as n,DoubleSide as o,InstancedMesh as i,Object3D as t,Points as r,ShaderMaterial as l,Vector2 as a}from"three";import{Disposables as c}from"../../common/Disposables.js";import{toGLSLColor as s,toGLSLFloat as d}from"../../common/GlslTools.js";import{getTimePartsInHours as f,SPLIT_TIME_3 as v,SPLIT_TIME_3_POW2 as m}from"../../common/TimeTools.js";import{TimeSliderPointsLayer as g}from"../../layer/TimeSliderPointsLayer.js";import{Three3DTimeSliderEngine as p}from"../Three3DTimeSliderEngine.js";import{GrowingBufferGeometry as h}from"./GrowingBufferGeometry.js";import{GrowingInstanceMatrix as u}from"./GrowingInstanceMatrix.js";export class Three3DPointsTimeLayerLoader{constructor(){this.engineClass=p}canLoad(e){return e instanceof g}load(e,n,o){return this.canLoad(e)?function(e,n,o){const i=new c,v=o.getValueRange(),m=v.maxValue-v.minValue,g={offset:v.minValue+(e.min||0)*m,scale:(e.max||1)-(e.min||0)},p=function(e,n){return new h(e,e=>{const o=.01*(n.offset+e.v*n.scale),[i,t]=f(e.t);return[i,o,t]})}(e.model,g),P=function(e,n){return new u(e,o=>{const i=e.getNeightbor(o,-1);if(i){const e=new t,r=.5*(i.t+o.t),l=.01*(n.offset+i.v*n.scale),a=.01*(n.offset+o.v*n.scale),c=.5*(l+a),s=o.t-i.t,d=a-l,[v,m]=f(r);return e.position.set(v,c,m),e.scale.set(s,d,d<0?1:0),e.updateMatrix(),e.matrix}return null})}(e.model,g);e.style.line&&i.add(x(e,n,o,P));e.style.point&&i.add(function(e,n,o,i){const t=new c,v=e.style;if(!v.point)throw"cannot happen";if(v.point.multipass){const r=v.point.color||"#df0",l=v.point.opacity||1,a=v.point.size||12,c=v.point.border?.color||"#000",s=v.point.border?.opacity||1,d=v.point.border?v.point.border?.width||2:0,f=v.point.core?.color||"#f00",m=v.point.core?.opacity||1,g=v.point.core?v.point.core?.size||4:0;v.point.border&&t.add(y(e,n,o,i,c,s,a)),t.add(y(e,n,o,i,r,l,a-2*d)),v.point.core&&t.add(y(e,n,o,i,f,m,g))}else{const c=new l({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new a(0,0)}}}),v=()=>{const n=e.style.point,o=n.color||"#df0",i=n.opacity||1,t=n.size||12,r=n.border?.color||"#000",l=n.border?.opacity||1,a=n.border?n.border?.width||2:0,f=n.core?.color||"#f00",v=n.core?.opacity||1,m=n.core?n.core?.size||4:0;c.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${d(t)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n void main() {\n // Option 1:\n // const count = geometry.attributes.position.count;\n // const indices = new Float32Array(count);\n // for(let i = 0; i < count; i++) indices[i] = i;\n // geometry.setAttribute('pointIndex', new THREE.BufferAttribute(indices, 1));\n \n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n \n // float day = position.x;\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n \n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n \n // gl_PointSize = selected ? 2.0 * iconSize : iconSize;\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n\n // gl_PointSize = 1.0;\n }\n `,c.fragmentShader=`\n // precision mediump float;\n \n const vec3 fillColor = ${s(o)};\n const float fillOpacity = ${d(i)};\n const float iconSize = ${d(t)};\n const vec3 borderColor = ${s(r)};\n const float borderOpacity = ${d(l)};\n const float borderWidth = ${d(a)};\n const vec3 coreColor = ${s(f)};\n const float coreOpacity = ${d(v)};\n const float coreSize = ${d(m)};\n \n flat in int vSelected;\n \n void main() {\n vec3 finalFillColor = mix(fillColor, vec3(1.0, 0.0, 1.0), float(vSelected));\n vec3 finalBorderColor = mix(borderColor, vec3(0.0, 1.0, 1.0), float(vSelected));\n \n // bool selected = vSelected > 0;\n // vec3 finalFillColor = selected ? vec3(1.0,0.0,1.0) : fillColor;\n // vec3 finalBorderColor = selected ? vec3(0.0,1.0,1.0) : borderColor;\n \n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n float dist = dot(uv, uv);\n\n // Circle mask\n if (dist > 1.0) discard;\n \n \n // // NO AA\n // if (dist > 1.0) {\n // gl_FragColor = vec4(0.0);\n // return;\n // }\n // if (dist > 2.0 * (borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // if (dist > 1.0 - (2.0 * borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else if (dist < (2.0 * coreSize / iconSize)) {\n // gl_FragColor = vec4(innerColor, fillOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n \n // Convert thicknesses to radii (in normalized distance)\n float coreRadius = coreSize / iconSize;\n float fillRadius = 1.0 - (2.0 * borderWidth) / iconSize;\n\n // Convert to squared radius\n float coreR2 = coreRadius * coreRadius;\n float fillR2 = fillRadius * fillRadius;\n\n float smoothing = fwidth(dist);\n // float smoothing = 0.0;\n \n // Step 1: Inner to fill\n float edgeInner = smoothstep(coreR2 - smoothing, coreR2 + smoothing, dist);\n vec3 coreFillColor = mix(coreColor, fillColor, edgeInner);\n float coreFillAlpha = mix(coreOpacity, fillOpacity, edgeInner);\n \n // Step 2: Fill to border\n float edgeOuter = smoothstep(fillR2 - smoothing, fillR2 + smoothing, dist);\n vec3 finalColor = mix(coreFillColor, borderColor, edgeOuter);\n float finalAlpha = mix(coreFillAlpha, borderOpacity, edgeOuter);\n \n gl_FragColor = vec4(finalColor, finalAlpha);\n \n \n \n \n // // ORIGINAL (2 colors: fill & border)\n // // Smooth border width in world units (relative to icon size)\n // float borderWorld = 2.0 * borderWidth / iconSize;\n // float smoothing = fwidth(dist) * 1.0; // fwidth = derivative for AA width\n \n // // Blend factor: 0 = inside, 1 = outside (border edge)\n // float edge = smoothstep(1.0 - borderWorld - smoothing, 1.0 - borderWorld + smoothing, dist);\n \n // // Mix border and fill based on smoothed edge\n // vec3 color = mix(finalFillColor, finalBorderColor, edge);\n // float alpha = mix(fillOpacity, borderOpacity, edge);\n \n // gl_FragColor = vec4(color, alpha);\n }\n `,c.needsUpdate=!0};v(),t.add(e.on("invalidate",v));const m=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=f(n);c.uniforms.originTime.value.set(i,t)};t.add(o.on("time",m)),m();const g=new r(i,c);g.frustumCulled=!1,t.add(e.on("selection",e=>{if(e.length>0){const n=i.elementIndex(e[0]);c.uniforms.selection.value="number"==typeof n?n:-1}else c.uniforms.selection.value=-1})),n.add(g),t.add(()=>n.remove(g))}return t.disposeLater()}(e,n,o,p));return i.disposeLater()}(e,n,o):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:e}),()=>{})}}function x(n,t,r,v,m){const g=new c,p=n.style,h=void 0!==p.line?.border;!m&&h&&g.add(x(n,t,r,v,!0));const u=new l({transparent:!0,side:o,uniforms:{worldPerPixel:{value:new a(r.camera.scale.x/r.getSize().width,r.camera.scale.y/r.getSize().height)},originTime:{value:new a}}}),y=()=>{const e=p.line?.color||"#df0",n=p.line?.border?.color||"#000",o=p.line?.width||4,i=p.line?.border?.width||1,t=p.line?.opacity||1,r=p.line?.border?.opacity||1,l=h&&m?n:e,a=h&&m?r:t,c=h?o-(m?0:2*i):o,f=void 0!==p.area&&(m||!h),v=p.area?.color||"#df0",g=p.area?.opacity||1;u.vertexShader=`\n // precision mediump float;\n \n const float lineWidth = ${d(c)};\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying vec2 vUv;\n varying float vLength;\n varying float vHeight;\n \n varying float vAspect;\n varying float vBackArea;\n\n void main() {\n vUv = uv;\n vBackArea = position.z;\n\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n\n vLength = size.x;\n vHeight = size.y;\n\n vAspect = (size.x / worldPerPixel.x) / (size.y / worldPerPixel.y);\n\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) > 0.0) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n // vMsHour = pos.z / 3600000.0;\n // vMsHour = mod(pos.z, 60000.0) / 60000.0;\n\n float deltaDay = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaDay * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.95;\n\n // Step 1: direction in screen space\n vec2 dirScreen = size / worldPerPixel;\n\n // Step 2: perpendicular direction in screen space\n vec2 perpScreen = normalize(vec2(-dirScreen.y, dirScreen.x)); // 90° rotation\n\n // Step 3: offset in screen space (lineWidth = pixels)\n vec2 offsetScreen = perpScreen * 0.5 * lineWidth;\n\n // Step 4: convert offset back to world space\n vec2 offsetWorld = offsetScreen * worldPerPixel;\n \n // vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld;\n \n vec2 cornerScreen = normalize(dirScreen) * 0.5 * lineWidth;\n vec2 cornerWorld = cornerScreen * worldPerPixel;\n vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld + 2.0 * position.x * cornerWorld;\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0999 * position.z);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,u.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const float lineWidth = ${d(c)};\n const vec3 fillColor = ${s(l)};\n const vec3 areaColor = ${s(v)};\n const float areaOpacity = ${d(g)};\n const float fillOpacity = ${d(a)};\n const bool showArea = ${f};\n uniform vec2 worldPerPixel;\n \n varying float vAspect;\n varying vec2 vUv;\n varying float vLength;\n varying float vHeight;\n varying float vBackArea;\n\n void main() {\n if (vBackArea < 0.48) {\n if (showArea) {\n float backRatio = 2.0 * vBackArea;\n if (vBackArea < 0.0) {\n backRatio = 0.0;\n }\n float alpha = mix(0.0, 1.0, backRatio);\n gl_FragColor = vec4(areaColor, alpha);\n }\n else {\n discard;\n }\n }\n else {\n // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), vUv.x);\n // gl_FragColor = vec4(color,1.0);\n\n float lengthPx = vLength / worldPerPixel.x;\n float heightPx = vHeight / worldPerPixel.y;\n float distPx = sqrt(pow(lengthPx, 2.0) + pow(heightPx, 2.0));\n\n // vec2 sizePx = vec2(lineWidth + vLength / worldPerPixel.x, lineWidth);\n vec2 sizePx = vec2(lineWidth + distPx, lineWidth);\n // vec2 sizePx = vec2(lineWidth + vLength / worldPerPixel.x, lineWidth);\n\n // float lengthPx = lineWidth + vLength / worldPerPixel.x;\n // float heightPx = lineWidth;\n float radiusPx = 0.5 * sizePx.y;\n // vec2 uvPx = vec2(vUv.x * lengthPx, vUv.y * heightPx);\n vec2 uvPx = vUv * sizePx;\n\n \n // vec3 invertedColor = vec3(1.0 - fillColor.r, 1.0 - fillColor.g, 1.0 - fillColor.b);\n // vec3 minuteColor = mix(fillColor, invertedColor, vMsHour);\n\n // Left end circle\n if (uvPx.x < radiusPx) {\n vec2 center = vec2(radiusPx, radiusPx); // center of left circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n\n gl_FragColor = vec4(fillColor, fillOpacity);\n // gl_FragColor = vec4(0.0,1.0,1.0,1.0);\n\n\n // gl_FragColor = vec4(minuteColor, fillOpacity);\n\n // if (dist > radiusPx - borderWidth) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // gl_FragColor = vec4(0.0,1.0,1.0,1.0);\n }\n\n // Right end circle\n else if (uvPx.x > sizePx.x - radiusPx) {\n discard;\n vec2 center = vec2(sizePx.x - radiusPx, radiusPx); // center of right circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n // gl_FragColor = vec4(1.0,0.0,1.0,1.0);\n \n gl_FragColor = vec4(fillColor, fillOpacity);\n }\n\n else {\n \n gl_FragColor = vec4(fillColor, fillOpacity);\n // gl_FragColor = vec4(minuteColor, fillOpacity);\n \n\n // // float radiusX = (vHeight * worldPerPixel.y) / (vLength * worldPerPixel.x);\n \n // // float radius = 0.5; // Half of the full height\n\n // // // Left end circle\n // // if (vUv.x < radius) {\n // // vec2 center = vec2(radius, 0.5); // center of left circle\n // // float dist = distance(vUv, center);\n // // if (dist > radius) discard;\n // // }\n\n // // // Right end circle\n // // else if (vUv.x > 1.0 - radius) {\n // // vec2 center = vec2(1.0 - radius, 0.5); // center of right circle\n // // float dist = distance(vUv, center);\n // // if (dist > radius) discard;\n // // }\n\n // // vec2 sizePx = vec2(vLength / worldPerPixel.x, lineWidth);\n // // vec2 size = vec2(vLength, lineWidth * worldPerPixel.y);\n // // vec2 bw = borderWidth * worldPerPixel / size;\n // // vec2 bw = borderWidth * sizePx;\n\n // float bwy = borderWidth / sizePx.y;\n\n // float smoothingPixels = 1.5;\n // // vec2 smoothing = smoothingPixels * worldPerPixel / size;\n // // vec2 smoothing = smoothingPixels * sizePx;\n // float smoothingY = smoothingPixels / sizePx.y;\n\n // float alphaX = 1.0;\n // float alphaY = smoothstep(bwy, bwy + smoothingY, vUv.y) *\n // smoothstep(1.0 - bwy, 1.0 - bwy - smoothingY, vUv.y);\n // // float alphaY = smoothstep(bw.y, bw.y + smoothing.y, vUv.y) *\n // // smoothstep(1.0 - bw.y, 1.0 - bw.y - smoothing.y, vUv.y);\n \n // float fillAlpha = alphaX * alphaY;\n // float borderAlpha = 1.0 - fillAlpha;\n\n // vec3 color = mix(borderColor, fillColor, fillAlpha);\n\n // // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), vUv.x);\n // // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), uvPx.x / sizePx.x);\n // float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n // gl_FragColor = vec4(color, alpha);\n }\n }\n }\n `};y(),g.add(n.on("invalidate",y));const P=()=>{u.uniforms.worldPerPixel.value.set(r.camera.scale.x/r.getSize().width,r.camera.scale.y/r.getSize().height)},b=()=>{P();const e=r.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=f(n);u.uniforms.originTime.value.set(o,i)};g.add(r.on("time",b)),g.add(r.on("value",P)),g.add(r.on("size",P)),b();const w=new e(1,1,1),C=new i(w,u,n.model.data.length);return v.registerMesh(C),C.frustumCulled=!1,t.add(C),g.add(()=>t.remove(C)),g.disposeLater()}function y(e,n,o,i,t,g,p){const h=new c;if(!e.style.point)throw"cannot happen";const u=new l({transparent:!0,uniforms:{selection:{value:-1},origin:{value:new a(0,0)}}}),x=()=>{u.vertexShader=`\n precision highp float;\n\n const float iconSize = ${d(p)};\n \n uniform vec3 origin;\n uniform int selection;\n \n flat out int vSelected;\n \n // const float SPLIT_PART = ${v}.0;\n // const float SPLIT_PART_X2 = ${m}.0;\n const float msInHour = 3600000.0;\n\n void main() {\n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n\n // float value = 0.5;\n // vec3 delta = position - origin;\n // float relativeTime = delta.x * SPLIT_PART_X2 + delta.y * SPLIT_PART + delta.z;\n\n float hours = position.x;\n float value = position.y;\n float ms = position.z;\n\n float deltaHours = hours - origin.x;\n float deltaMs = ms - origin.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n }\n `,u.fragmentShader=`\n precision highp float;\n\n const vec3 color = ${s(t)};\n const float opacity = ${d(g)};\n \n flat in int vSelected;\n\n void main() { \n // Convert point coords from [0,1] to [-1,1]\n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n\n // Compute squared distance from center\n float dist = dot(uv, uv);\n \n if (dist > 1.0) discard; // circle mask\n\n // Edge smoothing (anti-aliasing)\n float smoothing = fwidth(dist); // Automatic smoothing width\n float alpha = smoothstep(1.0, 1.0 - smoothing, dist); // Inverted for solid center\n\n gl_FragColor = vec4(color, alpha * opacity);\n }\n `,u.needsUpdate=!0};x(),h.add(e.on("invalidate",x));const y=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=f(n);u.uniforms.origin.value.set(i,t)};h.add(o.on("time",y)),y();const P=new r(i,u);return P.frustumCulled=!1,h.add(e.on("selection",e=>{if(e.length>0){const n=i.elementIndex(e[0]);u.uniforms.selection.value="number"==typeof n?n:-1}else u.uniforms.selection.value=-1})),n.add(P),h.add(()=>n.remove(P)),h.disposeLater()}
1
+ import{BoxGeometry as e,Color as n,DoubleSide as o,InstancedMesh as i,Object3D as t,Points as r,ShaderMaterial as l,Vector2 as a}from"three";import{Disposables as c}from"../../common/Disposables.js";import{toGLSLColor as s,toGLSLFloat as d}from"../../common/GlslTools.js";import{getTimePartsInHours as f,SPLIT_TIME_3 as v,SPLIT_TIME_3_POW2 as m}from"../../common/TimeTools.js";import{TimeSliderPointsLayer as p}from"../../layer/TimeSliderPointsLayer.js";import{Three3DTimeSliderEngine as g}from"../Three3DTimeSliderEngine.js";import{GrowingBufferGeometry as u}from"./GrowingBufferGeometry.js";import{GrowingInstanceMatrix as h}from"./GrowingInstanceMatrix.js";export class Three3DPointsTimeLayerLoader{constructor(){this.engineClass=g}canLoad(e){return e instanceof p}load(e,n,o){return this.canLoad(e)?function(e,n,o){const i=new c,v=o.getValueRange(),m=v.maxValue-v.minValue,p={offset:v.minValue+(e.min||0)*m,scale:(e.max||1)-(e.min||0)},g=function(e,n){return new u(e,e=>{const o=.01*(n.offset+e.v*n.scale),[i,t]=f(e.t);return[i,o,t]})}(e.model,p),P=function(e,n){return new h(e,o=>{const i=e.getNeightbor(o,-1);if(i){const e=new t,r=.5*(i.t+o.t),l=.01*(n.offset+i.v*n.scale),a=.01*(n.offset+o.v*n.scale),c=.5*(l+a),s=o.t-i.t,d=a-l,[v,m]=f(r);return e.position.set(v,c,m),e.scale.set(s,d,d<0?1:0),e.updateMatrix(),e.matrix}return null})}(e.model,p);e.style.line&&i.add(x(e,n,o,P));e.style.point&&i.add(function(e,n,o,i){const t=new c,v=e.style;if(!v.point)throw"cannot happen";if(v.point.multipass){const r=v.point.color||"#df0",l=v.point.opacity||1,a=v.point.size||12,c=v.point.border?.color||"#000",s=v.point.border?.opacity||1,d=v.point.border?v.point.border?.width||2:0,f=v.point.core?.color||"#f00",m=v.point.core?.opacity||1,p=v.point.core?v.point.core?.size||4:0;v.point.border&&t.add(y(e,n,o,i,c,s,a)),t.add(y(e,n,o,i,r,l,a-2*d)),v.point.core&&t.add(y(e,n,o,i,f,m,p))}else{const c=new l({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new a(0,0)}}}),v=()=>{const n=e.style.point,o=n.color||"#df0",i=n.opacity||1,t=n.size||12,r=n.border?.color||"#000",l=n.border?.opacity||1,a=n.border?n.border?.width||2:0,f=n.core?.color||"#f00",v=n.core?.opacity||1,m=n.core?n.core?.size||4:0;c.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${d(t)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n void main() {\n // Option 1:\n // const count = geometry.attributes.position.count;\n // const indices = new Float32Array(count);\n // for(let i = 0; i < count; i++) indices[i] = i;\n // geometry.setAttribute('pointIndex', new THREE.BufferAttribute(indices, 1));\n \n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n \n // float day = position.x;\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n \n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n \n // gl_PointSize = selected ? 2.0 * iconSize : iconSize;\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n\n // gl_PointSize = 1.0;\n }\n `,c.fragmentShader=`\n // precision mediump float;\n \n const vec3 fillColor = ${s(o)};\n const float fillOpacity = ${d(i)};\n const float iconSize = ${d(t)};\n const vec3 borderColor = ${s(r)};\n const float borderOpacity = ${d(l)};\n const float borderWidth = ${d(a)};\n const vec3 coreColor = ${s(f)};\n const float coreOpacity = ${d(v)};\n const float coreSize = ${d(m)};\n \n flat in int vSelected;\n \n void main() {\n vec3 finalFillColor = mix(fillColor, vec3(1.0, 0.0, 1.0), float(vSelected));\n vec3 finalBorderColor = mix(borderColor, vec3(0.0, 1.0, 1.0), float(vSelected));\n \n // bool selected = vSelected > 0;\n // vec3 finalFillColor = selected ? vec3(1.0,0.0,1.0) : fillColor;\n // vec3 finalBorderColor = selected ? vec3(0.0,1.0,1.0) : borderColor;\n \n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n float dist = dot(uv, uv);\n\n // Circle mask\n if (dist > 1.0) discard;\n \n \n // // NO AA\n // if (dist > 1.0) {\n // gl_FragColor = vec4(0.0);\n // return;\n // }\n // if (dist > 2.0 * (borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // if (dist > 1.0 - (2.0 * borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else if (dist < (2.0 * coreSize / iconSize)) {\n // gl_FragColor = vec4(innerColor, fillOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n \n // Convert thicknesses to radii (in normalized distance)\n float coreRadius = coreSize / iconSize;\n float fillRadius = 1.0 - (2.0 * borderWidth) / iconSize;\n\n // Convert to squared radius\n float coreR2 = coreRadius * coreRadius;\n float fillR2 = fillRadius * fillRadius;\n\n float smoothing = fwidth(dist);\n // float smoothing = 0.0;\n \n // Step 1: Inner to fill\n float edgeInner = smoothstep(coreR2 - smoothing, coreR2 + smoothing, dist);\n vec3 coreFillColor = mix(coreColor, fillColor, edgeInner);\n float coreFillAlpha = mix(coreOpacity, fillOpacity, edgeInner);\n \n // Step 2: Fill to border\n float edgeOuter = smoothstep(fillR2 - smoothing, fillR2 + smoothing, dist);\n vec3 finalColor = mix(coreFillColor, borderColor, edgeOuter);\n float finalAlpha = mix(coreFillAlpha, borderOpacity, edgeOuter);\n \n gl_FragColor = linearToOutputTexel(vec4(finalColor, finalAlpha));\n \n \n \n \n // // ORIGINAL (2 colors: fill & border)\n // // Smooth border width in world units (relative to icon size)\n // float borderWorld = 2.0 * borderWidth / iconSize;\n // float smoothing = fwidth(dist) * 1.0; // fwidth = derivative for AA width\n \n // // Blend factor: 0 = inside, 1 = outside (border edge)\n // float edge = smoothstep(1.0 - borderWorld - smoothing, 1.0 - borderWorld + smoothing, dist);\n \n // // Mix border and fill based on smoothed edge\n // vec3 color = mix(finalFillColor, finalBorderColor, edge);\n // float alpha = mix(fillOpacity, borderOpacity, edge);\n \n // gl_FragColor = vec4(color, alpha);\n }\n `,c.needsUpdate=!0};v(),t.add(e.on("invalidate",v));const m=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=f(n);c.uniforms.originTime.value.set(i,t)};t.add(o.on("time",m)),m();const p=new r(i,c);p.frustumCulled=!1,t.add(e.on("selection",e=>{if(e.length>0){const n=i.elementIndex(e[0]);c.uniforms.selection.value="number"==typeof n?n:-1}else c.uniforms.selection.value=-1})),n.add(p),t.add(()=>n.remove(p))}return t.disposeLater()}(e,n,o,g));return i.disposeLater()}(e,n,o):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:e}),()=>{})}}function x(n,t,r,v,m){const p=new c,g=n.style,u=void 0!==g.line?.border;!m&&u&&p.add(x(n,t,r,v,!0));const h=new l({transparent:!0,side:o,uniforms:{worldPerPixel:{value:new a(r.camera.scale.x/r.getSize().width,r.camera.scale.y/r.getSize().height)},originTime:{value:new a}}}),y=()=>{const e=g.line?.color||"#df0",n=g.line?.border?.color||"#000",o=g.line?.width||4,i=g.line?.border?.width||1,t=g.line?.opacity||1,r=g.line?.border?.opacity||1,l=u&&m?n:e,a=u&&m?r:t,c=u?o-(m?0:2*i):o,f=void 0!==g.area&&(m||!u),v=g.area?.color||"#df0",p=g.area?.opacity||1;h.vertexShader=`\n // precision mediump float;\n \n const float lineWidth = ${d(c)};\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying vec2 vUv;\n varying float vLength;\n varying float vHeight;\n \n varying float vAspect;\n varying float vBackArea;\n\n void main() {\n vUv = uv;\n vBackArea = position.z;\n\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n\n vLength = size.x;\n vHeight = size.y;\n\n vAspect = (size.x / worldPerPixel.x) / (size.y / worldPerPixel.y);\n\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) > 0.0) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n // vMsHour = pos.z / 3600000.0;\n // vMsHour = mod(pos.z, 60000.0) / 60000.0;\n\n float deltaDay = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaDay * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.95;\n\n // Step 1: direction in screen space\n vec2 dirScreen = size / worldPerPixel;\n\n // Step 2: perpendicular direction in screen space\n vec2 perpScreen = normalize(vec2(-dirScreen.y, dirScreen.x)); // 90° rotation\n\n // Step 3: offset in screen space (lineWidth = pixels)\n vec2 offsetScreen = perpScreen * 0.5 * lineWidth;\n\n // Step 4: convert offset back to world space\n vec2 offsetWorld = offsetScreen * worldPerPixel;\n \n // vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld;\n \n vec2 cornerScreen = normalize(dirScreen) * 0.5 * lineWidth;\n vec2 cornerWorld = cornerScreen * worldPerPixel;\n vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld + 2.0 * position.x * cornerWorld;\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0999 * position.z);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,h.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const float lineWidth = ${d(c)};\n const vec3 fillColor = ${s(l)};\n const vec3 areaColor = ${s(v)};\n const float areaOpacity = ${d(p)};\n const float fillOpacity = ${d(a)};\n const bool showArea = ${f};\n uniform vec2 worldPerPixel;\n \n varying float vAspect;\n varying vec2 vUv;\n varying float vLength;\n varying float vHeight;\n varying float vBackArea;\n\n void main() {\n if (vBackArea < 0.48) {\n if (showArea) {\n float backRatio = 2.0 * vBackArea;\n if (vBackArea < 0.0) {\n backRatio = 0.0;\n }\n float alpha = mix(0.0, 1.0, backRatio);\n gl_FragColor = linearToOutputTexel(vec4(areaColor, alpha));\n }\n else {\n discard;\n }\n }\n else {\n // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), vUv.x);\n // gl_FragColor = vec4(color,1.0);\n\n float lengthPx = vLength / worldPerPixel.x;\n float heightPx = vHeight / worldPerPixel.y;\n float distPx = sqrt(pow(lengthPx, 2.0) + pow(heightPx, 2.0));\n\n // vec2 sizePx = vec2(lineWidth + vLength / worldPerPixel.x, lineWidth);\n vec2 sizePx = vec2(lineWidth + distPx, lineWidth);\n // vec2 sizePx = vec2(lineWidth + vLength / worldPerPixel.x, lineWidth);\n\n // float lengthPx = lineWidth + vLength / worldPerPixel.x;\n // float heightPx = lineWidth;\n float radiusPx = 0.5 * sizePx.y;\n // vec2 uvPx = vec2(vUv.x * lengthPx, vUv.y * heightPx);\n vec2 uvPx = vUv * sizePx;\n\n \n // vec3 invertedColor = vec3(1.0 - fillColor.r, 1.0 - fillColor.g, 1.0 - fillColor.b);\n // vec3 minuteColor = mix(fillColor, invertedColor, vMsHour);\n\n // Left end circle\n if (uvPx.x < radiusPx) {\n vec2 center = vec2(radiusPx, radiusPx); // center of left circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n\n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n // gl_FragColor = vec4(0.0,1.0,1.0,1.0);\n\n\n // gl_FragColor = vec4(minuteColor, fillOpacity);\n\n // if (dist > radiusPx - borderWidth) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // gl_FragColor = vec4(0.0,1.0,1.0,1.0);\n }\n\n // Right end circle\n else if (uvPx.x > sizePx.x - radiusPx) {\n discard;\n vec2 center = vec2(sizePx.x - radiusPx, radiusPx); // center of right circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n // gl_FragColor = vec4(1.0,0.0,1.0,1.0);\n \n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n }\n\n else {\n \n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n // gl_FragColor = vec4(minuteColor, fillOpacity);\n \n\n // // float radiusX = (vHeight * worldPerPixel.y) / (vLength * worldPerPixel.x);\n \n // // float radius = 0.5; // Half of the full height\n\n // // // Left end circle\n // // if (vUv.x < radius) {\n // // vec2 center = vec2(radius, 0.5); // center of left circle\n // // float dist = distance(vUv, center);\n // // if (dist > radius) discard;\n // // }\n\n // // // Right end circle\n // // else if (vUv.x > 1.0 - radius) {\n // // vec2 center = vec2(1.0 - radius, 0.5); // center of right circle\n // // float dist = distance(vUv, center);\n // // if (dist > radius) discard;\n // // }\n\n // // vec2 sizePx = vec2(vLength / worldPerPixel.x, lineWidth);\n // // vec2 size = vec2(vLength, lineWidth * worldPerPixel.y);\n // // vec2 bw = borderWidth * worldPerPixel / size;\n // // vec2 bw = borderWidth * sizePx;\n\n // float bwy = borderWidth / sizePx.y;\n\n // float smoothingPixels = 1.5;\n // // vec2 smoothing = smoothingPixels * worldPerPixel / size;\n // // vec2 smoothing = smoothingPixels * sizePx;\n // float smoothingY = smoothingPixels / sizePx.y;\n\n // float alphaX = 1.0;\n // float alphaY = smoothstep(bwy, bwy + smoothingY, vUv.y) *\n // smoothstep(1.0 - bwy, 1.0 - bwy - smoothingY, vUv.y);\n // // float alphaY = smoothstep(bw.y, bw.y + smoothing.y, vUv.y) *\n // // smoothstep(1.0 - bw.y, 1.0 - bw.y - smoothing.y, vUv.y);\n \n // float fillAlpha = alphaX * alphaY;\n // float borderAlpha = 1.0 - fillAlpha;\n\n // vec3 color = mix(borderColor, fillColor, fillAlpha);\n\n // // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), vUv.x);\n // // vec3 color = mix(vec3(0.0,1.0,0.0),vec3(1.0,0.0,0.0), uvPx.x / sizePx.x);\n // float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n // gl_FragColor = vec4(color, alpha);\n }\n }\n }\n `};y(),p.add(n.on("invalidate",y));const P=()=>{h.uniforms.worldPerPixel.value.set(r.camera.scale.x/r.getSize().width,r.camera.scale.y/r.getSize().height)},b=()=>{P();const e=r.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=f(n);h.uniforms.originTime.value.set(o,i)};p.add(r.on("time",b)),p.add(r.on("value",P)),p.add(r.on("size",P)),b();const w=new e(1,1,1),C=new i(w,h,n.model.data.length);return v.registerMesh(C),C.frustumCulled=!1,t.add(C),p.add(()=>t.remove(C)),p.disposeLater()}function y(e,n,o,i,t,p,g){const u=new c;if(!e.style.point)throw"cannot happen";const h=new l({transparent:!0,uniforms:{selection:{value:-1},origin:{value:new a(0,0)}}}),x=()=>{h.vertexShader=`\n precision highp float;\n\n const float iconSize = ${d(g)};\n \n uniform vec3 origin;\n uniform int selection;\n \n flat out int vSelected;\n \n // const float SPLIT_PART = ${v}.0;\n // const float SPLIT_PART_X2 = ${m}.0;\n const float msInHour = 3600000.0;\n\n void main() {\n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n\n // float value = 0.5;\n // vec3 delta = position - origin;\n // float relativeTime = delta.x * SPLIT_PART_X2 + delta.y * SPLIT_PART + delta.z;\n\n float hours = position.x;\n float value = position.y;\n float ms = position.z;\n\n float deltaHours = hours - origin.x;\n float deltaMs = ms - origin.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n }\n `,h.fragmentShader=`\n precision highp float;\n\n const vec3 color = ${s(t)};\n const float opacity = ${d(p)};\n \n flat in int vSelected;\n\n void main() { \n // Convert point coords from [0,1] to [-1,1]\n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n\n // Compute squared distance from center\n float dist = dot(uv, uv);\n \n if (dist > 1.0) discard; // circle mask\n\n // Edge smoothing (anti-aliasing)\n float smoothing = fwidth(dist); // Automatic smoothing width\n float alpha = smoothstep(1.0, 1.0 - smoothing, dist); // Inverted for solid center\n\n gl_FragColor = linearToOutputTexel(vec4(color, alpha * opacity));\n }\n `,h.needsUpdate=!0};x(),u.add(e.on("invalidate",x));const y=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=f(n);h.uniforms.origin.value.set(i,t)};u.add(o.on("time",y)),y();const P=new r(i,h);return P.frustumCulled=!1,u.add(e.on("selection",e=>{if(e.length>0){const n=i.elementIndex(e[0]);h.uniforms.selection.value="number"==typeof n?n:-1}else h.uniforms.selection.value=-1})),n.add(P),u.add(()=>n.remove(P)),u.disposeLater()}
@@ -1 +1 @@
1
- import{Color as e,InstancedMesh as o,Object3D as n,PlaneGeometry as r,ShaderMaterial as t,Vector2 as i}from"three";import{Disposables as l}from"../../common/Disposables.js";import{toGLSLFloat as a}from"../../common/GlslTools.js";import{getTimePartsInHours as s}from"../../common/TimeTools.js";import{TimeSliderIntervalsLayer as d}from"../../layer/TimeSliderIntervalsLayer.js";import{GrowingInstanceMatrix as c}from"./GrowingInstanceMatrix.js";import{ThreeTimeLayerLoader as m}from"./ThreeTimeLayerLoader.js";const v=123456;export class ThreeIntervalsTimeLayerLoader extends m{constructor(){super(...arguments),this.followsLayerBand=!0}canLoad(e){return e instanceof d}load(d,m,f,u){return this.canLoad(d)?function(d,m,f,u){const g=new l,h=d.model,{material:p,dispose:x}=function(o,n,r){const d=void 0!==o.styler,c=new l,m=()=>{const e=o.style,n=e.border?e.border.width||1:0;return`\n // precision mediump float;\n // precision highp float;\n \n const bool borderCentered = ${"boolean"!=typeof e.border?.centered||e.border?.centered};\n const float borderWidth = ${a(n)};\n uniform vec2 layerRange;\n const float infinityDuration = ${a(v)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform vec2 valueRange;\n uniform int selection;\n uniform vec2 worldPerPixel;\n \n ${d?"attribute vec3 borderColor;":""}\n ${d?"varying vec3 fillColor;":""}\n ${d?"varying vec3 strokeColor;":""}\n \n varying vec2 vUv;\n flat out int vSelected;\n flat out vec2 vSize;\n\n void main() {\n ${d?"fillColor = instanceColor;":""}\n ${d?"strokeColor = borderColor;":""}\n vUv = uv;\n \n bool selected = gl_InstanceID == selection;\n vSelected = selected ? 1 : 0;\n\n float minValue = valueRange.x;\n float valueSize = valueRange.y - minValue;\n \n vSize.x = length(instanceMatrix[0].xyz);\n vSize.y = length(instanceMatrix[1].xyz) / valueSize;\n\n vSize.y *= (layerRange.y - layerRange.x);\n \n vec3 pos = vec3(instanceMatrix[3].xyz);\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.y = layerRange.x + ((pos.y - minValue) / valueSize) * (layerRange.y - layerRange.x);\n pos.z = 0.0;\n \n if (selected) {\n pos.z += 0.0001;\n }\n\n if (borderCentered) {\n vec3 borderOffset = borderWidth * vec3(worldPerPixel, 0.0);\n vSize += borderOffset.xy;\n }\n \n mat4 adjustedInstanceMatrix = instanceMatrix;\n adjustedInstanceMatrix[0].xyz *= vSize.x / length(instanceMatrix[0].xyz);\n adjustedInstanceMatrix[1].xyz *= vSize.y / length(instanceMatrix[1].xyz);\n adjustedInstanceMatrix[3].xyz = pos;\n \n vec4 localPos = adjustedInstanceMatrix * vec4(position, 1.0);\n gl_Position = projectionMatrix * modelViewMatrix * localPos;\n }\n `},f=()=>{const n=o.style,r=new e(n.fill?.color||"#df0"),t=n.fill?.opacity||.5,i=new e(n.border?.color||"#000"),l=n.border?n.border.opacity||1:0,s=n.border?n.border.width||1:0,c="number"==typeof n.border?.smoothing?Math.max(0,n.border.smoothing):1.5;return`\n // precision mediump float;\n // precision highp float;\n\n const float fillOpacity = ${a(t)};\n const float borderOpacity = ${a(l)};\n const float borderWidth = ${a(s)};\n const float borderSmoothing = ${a(c)};\n const bool borderSidesVertical = ${"vertical"===n.border?.sides?"true":"false"};\n\n ${d?"varying vec3 fillColor;":`const vec3 fillColor = vec3(${a(r.r)},${a(r.g)},${a(r.b)});`}\n ${d?"varying vec3 strokeColor;":`const vec3 strokeColor = vec3(${a(i.r)},${a(i.g)},${a(i.b)});`}\n \n uniform vec2 worldPerPixel;\n \n varying vec2 vUv;\n flat in int vSelected;\n flat in vec2 vSize;\n\n // Coverage of the inside of an edge at lo; smoothing 0 gives a hard step (smoothstep is undefined for equal edges).\n float edgeAlpha(float lo, float smoothing, float x) {\n return smoothing > 0.0 ? smoothstep(lo, lo + smoothing, x) : step(lo, x);\n }\n\n void main() {\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * worldPerPixel;\n\n // Half border UV width if centered, full if inside-only\n vec2 bw = bwWorld / vSize;\n\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * worldPerPixel / vSize;\n\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, vUv.y) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - vUv.y);\n\n float fillAlpha = alphaX * alphaY;\n float borderAlpha = 1.0 - fillAlpha;\n\n vec3 color = mix(finalBorderColor, finalFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = vec4(color, alpha);\n }\n `},u=new t({transparent:!0,uniforms:{worldPerPixel:{value:new i((n.camera.right-n.camera.left)/n.getSize().width,(n.camera.top-n.camera.bottom)/n.getSize().height)},layerRange:{value:new i(o.min,o.max)},selection:{value:-1},valueRange:{value:new i(0,1)},originTime:{value:new i(0,0)}},vertexShader:m(),fragmentShader:f()}),g=()=>{u.uniforms.worldPerPixel.value.set((n.camera.right-n.camera.left)/n.getSize().width,(n.camera.top-n.camera.bottom)/n.getSize().height)},h=()=>{const e=n.getTimeRange(),o=e.startTime+.5*e.duration,[r,t]=s(o);u.uniforms.originTime.value.set(r,t)},p=()=>{const e=r.valueRanges.get(o.yAxis.group||o.id);if(e){const o=u.uniforms.valueRange.value;o.x===e.min&&o.y===e.max||u.uniforms.valueRange.value.set(e.min,e.max)}},x=()=>{g(),h(),p()};c.add(r.on("valueRanges",p)),c.add(n.on("time",x)),c.add(n.on("value",g)),c.add(n.on("size",g)),c.add(o.on("loaded",p)),c.add(o.on("visible",p));const y=()=>u.uniforms.layerRange.value.set(o.min,o.max);return c.add(o.on("min",y)),c.add(o.on("max",y)),h(),p(),c.add(o.on("invalidate",()=>{u.vertexShader=m(),u.fragmentShader=f(),u.needsUpdate=!0})),{material:u,dispose:()=>c.dispose()}}(d,m,u);g.add(x);const y=new r(1,1),b=new o(y,p,h.data.length);b.frustumCulled=!1;const w=function(e,o,r,t,i){const l=new c(o,e=>{const o=new n,r=e.v[1]-e.v[0],t=e.v[0]+.5*r,i=.5*(e.t[0]+e.t[1]),[l,a]=s(i);o.position.set(l,t,a);const d=e.t[1]-e.t[0];return o.scale.set(d,r,.1),o.updateMatrix(),o.matrix},i);return l.registerMesh(e),l}(b,h,d.min,d.max,{colorProvider:d.styler?e=>{const o=d.styler(e);return o?{fill:o.fill?.color,stroke:o.border?.color}:void 0}:void 0,defaultFill:d.style.fill?.color,defaultBorder:d.style.border?.color});u.selectionOptions.highlight&&g.add(d.on("selection",e=>{if(e.length>0){const o=w.getIndex(e[0]);p.uniforms.selection.value="number"==typeof o?o:-1}else p.uniforms.selection.value=-1}));return f.add(b),g.add(()=>f.remove(b)),g.disposeLater()}(d,f,m,u):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:d}),()=>{})}}
1
+ import{Color as e,InstancedMesh as o,Object3D as n,PlaneGeometry as r,ShaderMaterial as t,Vector2 as l}from"three";import{Disposables as i}from"../../common/Disposables.js";import{toGLSLFloat as a}from"../../common/GlslTools.js";import{getTimePartsInHours as s}from"../../common/TimeTools.js";import{TimeSliderIntervalsLayer as d}from"../../layer/TimeSliderIntervalsLayer.js";import{GrowingInstanceMatrix as c}from"./GrowingInstanceMatrix.js";import{ThreeTimeLayerLoader as m}from"./ThreeTimeLayerLoader.js";const v=123456;export class ThreeIntervalsTimeLayerLoader extends m{constructor(){super(...arguments),this.followsLayerBand=!0}canLoad(e){return e instanceof d}load(d,m,f,u){return this.canLoad(d)?function(d,m,f,u){const g=new i,h=d.model,{material:p,dispose:x}=function(o,n,r){const d=void 0!==o.styler,c=new i,m=()=>{const e=o.style,n=e.border?e.border.width||1:0;return`\n // precision mediump float;\n // precision highp float;\n \n const bool borderCentered = ${"boolean"!=typeof e.border?.centered||e.border?.centered};\n const float borderWidth = ${a(n)};\n uniform vec2 layerRange;\n const float infinityDuration = ${a(v)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform vec2 valueRange;\n uniform int selection;\n uniform vec2 worldPerPixel;\n \n ${d?"attribute vec3 borderColor;":""}\n ${d?"varying vec3 fillColor;":""}\n ${d?"varying vec3 strokeColor;":""}\n \n varying vec2 vUv;\n flat out int vSelected;\n flat out vec2 vSize;\n\n void main() {\n ${d?"fillColor = instanceColor;":""}\n ${d?"strokeColor = borderColor;":""}\n vUv = uv;\n \n bool selected = gl_InstanceID == selection;\n vSelected = selected ? 1 : 0;\n\n float minValue = valueRange.x;\n float valueSize = valueRange.y - minValue;\n \n vSize.x = length(instanceMatrix[0].xyz);\n vSize.y = length(instanceMatrix[1].xyz) / valueSize;\n\n vSize.y *= (layerRange.y - layerRange.x);\n \n vec3 pos = vec3(instanceMatrix[3].xyz);\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.y = layerRange.x + ((pos.y - minValue) / valueSize) * (layerRange.y - layerRange.x);\n pos.z = 0.0;\n \n if (selected) {\n pos.z += 0.0001;\n }\n\n if (borderCentered) {\n vec3 borderOffset = borderWidth * vec3(worldPerPixel, 0.0);\n vSize += borderOffset.xy;\n }\n \n mat4 adjustedInstanceMatrix = instanceMatrix;\n adjustedInstanceMatrix[0].xyz *= vSize.x / length(instanceMatrix[0].xyz);\n adjustedInstanceMatrix[1].xyz *= vSize.y / length(instanceMatrix[1].xyz);\n adjustedInstanceMatrix[3].xyz = pos;\n \n vec4 localPos = adjustedInstanceMatrix * vec4(position, 1.0);\n gl_Position = projectionMatrix * modelViewMatrix * localPos;\n }\n `},f=()=>{const n=o.style,r=new e(n.fill?.color||"#df0"),t=n.fill?.opacity||.5,l=new e(n.border?.color||"#000"),i=n.border?n.border.opacity||1:0,s=n.border?n.border.width||1:0,c="number"==typeof n.border?.smoothing?Math.max(0,n.border.smoothing):1.5;return`\n // precision mediump float;\n // precision highp float;\n\n const float fillOpacity = ${a(t)};\n const float borderOpacity = ${a(i)};\n const float borderWidth = ${a(s)};\n const float borderSmoothing = ${a(c)};\n const bool borderSidesVertical = ${"vertical"===n.border?.sides?"true":"false"};\n\n ${d?"varying vec3 fillColor;":`const vec3 fillColor = vec3(${a(r.r)},${a(r.g)},${a(r.b)});`}\n ${d?"varying vec3 strokeColor;":`const vec3 strokeColor = vec3(${a(l.r)},${a(l.g)},${a(l.b)});`}\n \n uniform vec2 worldPerPixel;\n \n varying vec2 vUv;\n flat in int vSelected;\n flat in vec2 vSize;\n\n // Coverage of the inside of an edge at lo; smoothing 0 gives a hard step (smoothstep is undefined for equal edges).\n float edgeAlpha(float lo, float smoothing, float x) {\n return smoothing > 0.0 ? smoothstep(lo, lo + smoothing, x) : step(lo, x);\n }\n\n void main() {\n bool selected = vSelected > 0;\n vec3 finalFillColor = selected ? vec3(1.0 - fillColor) : fillColor;\n vec3 finalBorderColor = selected ? vec3(1.0 - strokeColor) : strokeColor;\n\n // Half border size in world units\n vec2 bwWorld = borderWidth * worldPerPixel;\n\n // Half border UV width if centered, full if inside-only\n vec2 bw = bwWorld / vSize;\n\n float smoothingPixels = borderSmoothing;\n vec2 smoothing = smoothingPixels * worldPerPixel / vSize;\n\n float alphaX = edgeAlpha(bw.x, smoothing.x, vUv.x) *\n edgeAlpha(bw.x, smoothing.x, 1.0 - vUv.x);\n float alphaY = borderSidesVertical ? 1.0 : edgeAlpha(bw.y, smoothing.y, vUv.y) *\n edgeAlpha(bw.y, smoothing.y, 1.0 - vUv.y);\n\n float fillAlpha = alphaX * alphaY;\n float borderAlpha = 1.0 - fillAlpha;\n\n vec3 color = mix(finalBorderColor, finalFillColor, fillAlpha);\n float alpha = mix(borderOpacity, fillOpacity, fillAlpha);\n\n gl_FragColor = linearToOutputTexel(vec4(color, alpha));\n }\n `},u=new t({transparent:!0,uniforms:{worldPerPixel:{value:new l((n.camera.right-n.camera.left)/n.getSize().width,(n.camera.top-n.camera.bottom)/n.getSize().height)},layerRange:{value:new l(o.min,o.max)},selection:{value:-1},valueRange:{value:new l(0,1)},originTime:{value:new l(0,0)}},vertexShader:m(),fragmentShader:f()}),g=()=>{u.uniforms.worldPerPixel.value.set((n.camera.right-n.camera.left)/n.getSize().width,(n.camera.top-n.camera.bottom)/n.getSize().height)},h=()=>{const e=n.getTimeRange(),o=e.startTime+.5*e.duration,[r,t]=s(o);u.uniforms.originTime.value.set(r,t)},p=()=>{const e=r.valueRanges.get(o.yAxis.group||o.id);if(e){const o=u.uniforms.valueRange.value;o.x===e.min&&o.y===e.max||u.uniforms.valueRange.value.set(e.min,e.max)}},x=()=>{g(),h(),p()};c.add(r.on("valueRanges",p)),c.add(n.on("time",x)),c.add(n.on("value",g)),c.add(n.on("size",g)),c.add(o.on("loaded",p)),c.add(o.on("visible",p));const y=()=>u.uniforms.layerRange.value.set(o.min,o.max);return c.add(o.on("min",y)),c.add(o.on("max",y)),h(),p(),c.add(o.on("invalidate",()=>{u.vertexShader=m(),u.fragmentShader=f(),u.needsUpdate=!0})),{material:u,dispose:()=>c.dispose()}}(d,m,u);g.add(x);const y=new r(1,1),b=new o(y,p,h.data.length);b.frustumCulled=!1;const w=function(e,o,r,t,l){const i=new c(o,e=>{const o=new n,r=e.v[1]-e.v[0],t=e.v[0]+.5*r,l=.5*(e.t[0]+e.t[1]),[i,a]=s(l);o.position.set(i,t,a);const d=e.t[1]-e.t[0];return o.scale.set(d,r,.1),o.updateMatrix(),o.matrix},l);return i.registerMesh(e),i}(b,h,d.min,d.max,{colorProvider:d.styler?e=>{const o=d.styler(e);return o?{fill:o.fill?.color,stroke:o.border?.color}:void 0}:void 0,defaultFill:d.style.fill?.color,defaultBorder:d.style.border?.color});u.selectionOptions.highlight&&g.add(d.on("selection",e=>{if(e.length>0){const o=w.getIndex(e[0]);p.uniforms.selection.value="number"==typeof o?o:-1}else p.uniforms.selection.value=-1}));return f.add(b),g.add(()=>f.remove(b)),g.disposeLater()}(d,f,m,u):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:d}),()=>{})}}
@@ -1 +1 @@
1
- import{InstancedMesh as e,Object3D as n,PlaneGeometry as o,Points as i,ShaderMaterial as t,Vector2 as r}from"three";import{Disposables as l}from"../../common/Disposables.js";import{toGLSLColor as a,toGLSLFloat as s}from"../../common/GlslTools.js";import{getTimePartsInHours as c}from"../../common/TimeTools.js";import{TimeSliderPointsLayer as d}from"../../layer/TimeSliderPointsLayer.js";import{GrowingBufferGeometry as f}from"./GrowingBufferGeometry.js";import{GrowingInstanceMatrix as m}from"./GrowingInstanceMatrix.js";import{ThreeTimeLayerLoader as v}from"./ThreeTimeLayerLoader.js";export class ThreePointsTimeLayerLoader extends v{canLoad(e){return e instanceof d}load(d,v,g){return this.canLoad(d)?function(d,v,g){const h=new l,x=g.getValueRange(),y=x.maxValue-x.minValue,z={offset:x.minValue+(d.min||0)*y,scale:(d.max||1)-(d.min||0)},P=function(e,n){return new f(e,e=>{const o=.01*(n.offset+e.v*n.scale),[i,t]=c(e.t);return[i,o,t]})}(d.model,z),S=function(e,o){return new m(e,i=>{const t=e.getNeightbor(i,-1);if(t){const e=new n,r=.5*(t.t+i.t),l=.01*(o.offset+t.v*o.scale),a=.01*(o.offset+i.v*o.scale),s=.5*(l+a),d=i.t-t.t,f=a-l,[m,v]=c(r);return e.position.set(m,s,v),e.scale.set(d,Math.abs(f),f<0?1:2),e.updateMatrix(),e.matrix}return null})}(d.model,z);d.style.area&&h.add(function(n,i,d,f){const m=new l,v=e=>{const n=e.min||0,o=(e.max||1)-(e.min||0),i=e.style,t=i.area?.color||"#df0",r=i.area?.opacity||.5,l=i.area?.base||!1,c=i.area?.height||.1;p.vertexShader=`\n // precision mediump float;\n \n const float baseLine = ${s(n)};\n const float height = ${s(o)};\n const bool toBase = ${l};\n const float areaHeight = ${s(c)};\n\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying float vHeight;\n\n void main() {\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) < 1.5) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.0;\n \n vec2 rotScaleOffset = toBase ? vec2(\n position.x * size.x,\n (position.y + 0.5) * position.x * size.y + (position.y - 0.5) * (pos.y - baseLine) // This is to fill the area to the baseline\n ) : vec2(\n position.x * size.x,\n position.x * size.y + (position.y - 0.5) * areaHeight * height\n );\n\n vHeight = (position.y + 0.5);\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,p.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const vec3 fillColor = ${a(t)};\n const float fillOpacity = ${s(r)};\n\n varying float vHeight;\n\n void main() {\n gl_FragColor = vec4(fillColor, fillOpacity * vHeight);\n }\n `,p.needsUpdate=!0},p=new t({transparent:!0,uniforms:{worldPerPixel:{value:new r((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},originTime:{value:new r(0,0)}}});v(n),n.on("invalidate",()=>{v(n)});const u=()=>{p.uniforms.worldPerPixel.value.set((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},g=()=>{u();const e=d.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=c(n);p.uniforms.originTime.value.set(o,i)};m.add(d.on("time",g)),m.add(d.on("value",u)),m.add(d.on("size",u)),g();const h=new o(1,1),x=new e(h,p,n.model.data.length);return f.registerMesh(x),x.frustumCulled=!1,i.add(x),m.add(()=>i.remove(x)),m.disposeLater()}(d,v,g,S));d.style.line&&h.add(p(d,v,g,S));d.style.point&&h.add(function(e,n,o,d){const f=new l,m=e.style;if(!m.point)throw"cannot happen";if(m.point.multipass){const i=m.point.color||"#df0",t=m.point.opacity||1,r=m.point.size||12,l=m.point.border?.color||"#000",a=m.point.border?.opacity||1,s=m.point.border?m.point.border?.width||2:0,c=m.point.core?.color||"#f00",v=m.point.core?.opacity||1,p=m.point.core?m.point.core?.size||4:0;m.point.border&&f.add(u(e,n,o,d,l,a,r)),f.add(u(e,n,o,d,i,t,r-2*s)),m.point.core&&f.add(u(e,n,o,d,c,v,p))}else{const l=new t({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new r(0,0)}}}),m=()=>{const n=e.style.point,o=n.color||"#df0",i=n.opacity||1,t=n.size||12,r=n.border?.color||"#000",c=n.border?.opacity||1,d=n.border?n.border?.width||2:0,f=n.core?.color||"#f00",m=n.core?.opacity||1,v=n.core?n.core?.size||4:0;l.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${s(t)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n void main() {\n // Option 1:\n // const count = geometry.attributes.position.count;\n // const indices = new Float32Array(count);\n // for(let i = 0; i < count; i++) indices[i] = i;\n // geometry.setAttribute('pointIndex', new THREE.BufferAttribute(indices, 1));\n \n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n \n // float day = position.x;\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n \n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n \n // gl_PointSize = selected ? 2.0 * iconSize : iconSize;\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n\n // gl_PointSize = 1.0;\n }\n `,l.fragmentShader=`\n // precision mediump float;\n \n const vec3 fillColor = ${a(o)};\n const float fillOpacity = ${s(i)};\n const float iconSize = ${s(t)};\n const vec3 borderColor = ${a(r)};\n const float borderOpacity = ${s(c)};\n const float borderWidth = ${s(d)};\n const vec3 coreColor = ${a(f)};\n const float coreOpacity = ${s(m)};\n const float coreSize = ${s(v)};\n \n flat in int vSelected;\n \n void main() {\n vec3 finalFillColor = mix(fillColor, vec3(1.0, 0.0, 1.0), float(vSelected));\n vec3 finalBorderColor = mix(borderColor, vec3(0.0, 1.0, 1.0), float(vSelected));\n \n // bool selected = vSelected > 0;\n // vec3 finalFillColor = selected ? vec3(1.0,0.0,1.0) : fillColor;\n // vec3 finalBorderColor = selected ? vec3(0.0,1.0,1.0) : borderColor;\n \n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n float dist = dot(uv, uv);\n\n // Circle mask\n if (dist > 1.0) discard;\n \n \n // // NO AA\n // if (dist > 1.0) {\n // gl_FragColor = vec4(0.0);\n // return;\n // }\n // if (dist > 2.0 * (borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // if (dist > 1.0 - (2.0 * borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else if (dist < (2.0 * coreSize / iconSize)) {\n // gl_FragColor = vec4(innerColor, fillOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n \n // Convert thicknesses to radii (in normalized distance)\n float coreRadius = coreSize / iconSize;\n float fillRadius = 1.0 - (2.0 * borderWidth) / iconSize;\n\n // Convert to squared radius\n float coreR2 = coreRadius * coreRadius;\n float fillR2 = fillRadius * fillRadius;\n\n float smoothing = fwidth(dist);\n // float smoothing = 0.0;\n \n // Step 1: Inner to fill\n float edgeInner = smoothstep(coreR2 - smoothing, coreR2 + smoothing, dist);\n vec3 coreFillColor = mix(coreColor, fillColor, edgeInner);\n float coreFillAlpha = mix(coreOpacity, fillOpacity, edgeInner);\n \n // Step 2: Fill to border\n float edgeOuter = smoothstep(fillR2 - smoothing, fillR2 + smoothing, dist);\n vec3 finalColor = mix(coreFillColor, borderColor, edgeOuter);\n float finalAlpha = mix(coreFillAlpha, borderOpacity, edgeOuter);\n \n gl_FragColor = vec4(finalColor, finalAlpha);\n \n \n \n \n // // ORIGINAL (2 colors: fill & border)\n // // Smooth border width in world units (relative to icon size)\n // float borderWorld = 2.0 * borderWidth / iconSize;\n // float smoothing = fwidth(dist) * 1.0; // fwidth = derivative for AA width\n \n // // Blend factor: 0 = inside, 1 = outside (border edge)\n // float edge = smoothstep(1.0 - borderWorld - smoothing, 1.0 - borderWorld + smoothing, dist);\n \n // // Mix border and fill based on smoothed edge\n // vec3 color = mix(finalFillColor, finalBorderColor, edge);\n // float alpha = mix(fillOpacity, borderOpacity, edge);\n \n // gl_FragColor = vec4(color, alpha);\n }\n `,l.needsUpdate=!0};m(),f.add(e.on("invalidate",m));const v=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=c(n);l.uniforms.originTime.value.set(i,t)};f.add(o.on("time",v)),v();const p=new i(d,l);p.frustumCulled=!1,f.add(e.on("selection",e=>{if(e.length>0){const n=d.elementIndex(e[0]);l.uniforms.selection.value="number"==typeof n?n:-1}else l.uniforms.selection.value=-1})),n.add(p),f.add(()=>n.remove(p))}return f.disposeLater()}(d,v,g,P));return h.disposeLater()}(d,v,g):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:d}),()=>{})}}function p(n,i,d,f,m){const v=new l,u=n.style,g=void 0!==u.line?.border;!m&&g&&v.add(p(n,i,d,f,!0));const h=new t({transparent:!0,uniforms:{worldPerPixel:{value:new r((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},originTime:{value:new r}}}),x=()=>{const e=u.line?.color||"#df0",n=u.line?.border?.color||"#000",o=u.line?.width||4,i=u.line?.border?.width||1,t=u.line?.opacity||1,r=u.line?.border?.opacity||1,l=g&&m?n:e,c=g&&m?r:t,d=g?o-(m?0:2*i):o;h.vertexShader=`\n // precision mediump float;\n \n const float lineWidth = ${s(d)};\n const float msPerHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying vec2 vUv;\n flat out float vLength;\n flat out float vHeight;\n flat out float vAspect;\n\n void main() {\n vUv = uv;\n\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n\n vLength = size.x;\n vHeight = size.y;\n\n vAspect = (size.x / worldPerPixel.x) / (size.y / worldPerPixel.y);\n\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) < 1.5) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n float deltaDay = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaDay * msPerHour + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.0;\n\n // Step 1: direction in screen space\n vec2 dirScreen = size / worldPerPixel;\n\n // Step 2: perpendicular direction in screen space\n vec2 perpScreen = normalize(vec2(-dirScreen.y, dirScreen.x)); // 90° rotation\n\n // Step 3: offset in screen space (lineWidth = pixels)\n vec2 offsetScreen = perpScreen * 0.5 * lineWidth;\n\n // Step 4: convert offset back to world space\n vec2 offsetWorld = offsetScreen * worldPerPixel;\n \n // vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld;\n \n vec2 cornerScreen = normalize(dirScreen) * 0.5 * lineWidth;\n vec2 cornerWorld = cornerScreen * worldPerPixel;\n vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld + 2.0 * position.x * cornerWorld;\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,h.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const vec3 fillColor = ${a(l)};\n const float lineWidth = ${s(d)};\n const float fillOpacity = ${s(c)};\n\n uniform vec2 worldPerPixel;\n \n varying vec2 vUv;\n flat in float vLength;\n flat in float vHeight;\n flat in float vAspect;\n\n void main() {\n float lengthPx = vLength / worldPerPixel.x;\n float heightPx = vHeight / worldPerPixel.y;\n float distPx = sqrt(pow(lengthPx, 2.0) + pow(heightPx, 2.0));\n\n vec2 sizePx = vec2(lineWidth + distPx, lineWidth);\n float radiusPx = 0.5 * sizePx.y;\n vec2 uvPx = vUv * sizePx;\n\n // Left end circle\n if (uvPx.x < radiusPx) {\n vec2 center = vec2(radiusPx, radiusPx); // center of left circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n\n gl_FragColor = vec4(fillColor, fillOpacity);\n }\n\n // Right end circle\n else if (uvPx.x > sizePx.x - radiusPx) {\n discard;\n vec2 center = vec2(sizePx.x - radiusPx, radiusPx); // center of right circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n // gl_FragColor = vec4(1.0,0.0,1.0,1.0);\n \n gl_FragColor = vec4(fillColor, fillOpacity);\n }\n\n else {\n gl_FragColor = vec4(fillColor, fillOpacity);\n }\n }\n `};x(),v.add(n.on("invalidate",x));const y=()=>{h.uniforms.worldPerPixel.value.set((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},z=()=>{y();const e=d.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=c(n);h.uniforms.originTime.value.set(o,i)};v.add(d.on("time",z)),v.add(d.on("value",y)),v.add(d.on("size",y)),z();const P=new o(1,1),S=new e(P,h,n.model.data.length);return f.registerMesh(S),S.frustumCulled=!1,i.add(S),v.add(()=>i.remove(S)),v.disposeLater()}function u(e,n,o,d,f,m,v){const p=new l;if(!e.style.point)throw"cannot happen";const u=new t({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new r(0,0)}}}),g=()=>{u.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${s(v)};\n \n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n const float msInHour = 3600000.0;\n\n void main() {\n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n\n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n }\n `,u.fragmentShader=`\n // precision mediump float;\n\n const vec3 color = ${a(f)};\n const float opacity = ${s(m)};\n \n flat in int vSelected;\n\n void main() { \n // Convert point coords from [0,1] to [-1,1]\n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n\n // Compute squared distance from center\n float dist = dot(uv, uv);\n \n if (dist > 1.0) discard; // circle mask\n\n // Edge smoothing (anti-aliasing)\n float smoothing = fwidth(dist); // Automatic smoothing width\n float alpha = smoothstep(1.0, 1.0 - smoothing, dist); // Inverted for solid center\n\n gl_FragColor = vec4(color, alpha * opacity);\n }\n `,u.needsUpdate=!0};g(),p.add(e.on("invalidate",g));const h=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=c(n);u.uniforms.originTime.value.set(i,t)};p.add(o.on("time",h)),h();const x=new i(d,u);return x.frustumCulled=!1,p.add(e.on("selection",e=>{if(e.length>0){const n=d.elementIndex(e[0]);u.uniforms.selection.value="number"==typeof n?n:-1}else u.uniforms.selection.value=-1})),n.add(x),p.add(()=>n.remove(x)),p.disposeLater()}
1
+ import{InstancedMesh as e,Object3D as n,PlaneGeometry as o,Points as i,ShaderMaterial as t,Vector2 as r}from"three";import{Disposables as l}from"../../common/Disposables.js";import{toGLSLColor as a,toGLSLFloat as s}from"../../common/GlslTools.js";import{getTimePartsInHours as c}from"../../common/TimeTools.js";import{TimeSliderPointsLayer as d}from"../../layer/TimeSliderPointsLayer.js";import{GrowingBufferGeometry as f}from"./GrowingBufferGeometry.js";import{GrowingInstanceMatrix as m}from"./GrowingInstanceMatrix.js";import{ThreeTimeLayerLoader as p}from"./ThreeTimeLayerLoader.js";export class ThreePointsTimeLayerLoader extends p{canLoad(e){return e instanceof d}load(d,p,g){return this.canLoad(d)?function(d,p,g){const h=new l,x=g.getValueRange(),y=x.maxValue-x.minValue,z={offset:x.minValue+(d.min||0)*y,scale:(d.max||1)-(d.min||0)},P=function(e,n){return new f(e,e=>{const o=.01*(n.offset+e.v*n.scale),[i,t]=c(e.t);return[i,o,t]})}(d.model,z),S=function(e,o){return new m(e,i=>{const t=e.getNeightbor(i,-1);if(t){const e=new n,r=.5*(t.t+i.t),l=.01*(o.offset+t.v*o.scale),a=.01*(o.offset+i.v*o.scale),s=.5*(l+a),d=i.t-t.t,f=a-l,[m,p]=c(r);return e.position.set(m,s,p),e.scale.set(d,Math.abs(f),f<0?1:2),e.updateMatrix(),e.matrix}return null})}(d.model,z);d.style.area&&h.add(function(n,i,d,f){const m=new l,p=e=>{const n=e.min||0,o=(e.max||1)-(e.min||0),i=e.style,t=i.area?.color||"#df0",r=i.area?.opacity||.5,l=i.area?.base||!1,c=i.area?.height||.1;v.vertexShader=`\n // precision mediump float;\n \n const float baseLine = ${s(n)};\n const float height = ${s(o)};\n const bool toBase = ${l};\n const float areaHeight = ${s(c)};\n\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying float vHeight;\n\n void main() {\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) < 1.5) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n float deltaHours = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaHours * 3600000.0 + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.0;\n \n vec2 rotScaleOffset = toBase ? vec2(\n position.x * size.x,\n (position.y + 0.5) * position.x * size.y + (position.y - 0.5) * (pos.y - baseLine) // This is to fill the area to the baseline\n ) : vec2(\n position.x * size.x,\n position.x * size.y + (position.y - 0.5) * areaHeight * height\n );\n\n vHeight = (position.y + 0.5);\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,v.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const vec3 fillColor = ${a(t)};\n const float fillOpacity = ${s(r)};\n\n varying float vHeight;\n\n void main() {\n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity * vHeight));\n }\n `,v.needsUpdate=!0},v=new t({transparent:!0,uniforms:{worldPerPixel:{value:new r((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},originTime:{value:new r(0,0)}}});p(n),n.on("invalidate",()=>{p(n)});const u=()=>{v.uniforms.worldPerPixel.value.set((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},g=()=>{u();const e=d.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=c(n);v.uniforms.originTime.value.set(o,i)};m.add(d.on("time",g)),m.add(d.on("value",u)),m.add(d.on("size",u)),g();const h=new o(1,1),x=new e(h,v,n.model.data.length);return f.registerMesh(x),x.frustumCulled=!1,i.add(x),m.add(()=>i.remove(x)),m.disposeLater()}(d,p,g,S));d.style.line&&h.add(v(d,p,g,S));d.style.point&&h.add(function(e,n,o,d){const f=new l,m=e.style;if(!m.point)throw"cannot happen";if(m.point.multipass){const i=m.point.color||"#df0",t=m.point.opacity||1,r=m.point.size||12,l=m.point.border?.color||"#000",a=m.point.border?.opacity||1,s=m.point.border?m.point.border?.width||2:0,c=m.point.core?.color||"#f00",p=m.point.core?.opacity||1,v=m.point.core?m.point.core?.size||4:0;m.point.border&&f.add(u(e,n,o,d,l,a,r)),f.add(u(e,n,o,d,i,t,r-2*s)),m.point.core&&f.add(u(e,n,o,d,c,p,v))}else{const l=new t({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new r(0,0)}}}),m=()=>{const n=e.style.point,o=n.color||"#df0",i=n.opacity||1,t=n.size||12,r=n.border?.color||"#000",c=n.border?.opacity||1,d=n.border?n.border?.width||2:0,f=n.core?.color||"#f00",m=n.core?.opacity||1,p=n.core?n.core?.size||4:0;l.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${s(t)};\n const float msInHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n void main() {\n // Option 1:\n // const count = geometry.attributes.position.count;\n // const indices = new Float32Array(count);\n // for(let i = 0; i < count; i++) indices[i] = i;\n // geometry.setAttribute('pointIndex', new THREE.BufferAttribute(indices, 1));\n \n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n \n // float day = position.x;\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n \n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n \n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n \n // gl_PointSize = selected ? 2.0 * iconSize : iconSize;\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n\n // gl_PointSize = 1.0;\n }\n `,l.fragmentShader=`\n // precision mediump float;\n \n const vec3 fillColor = ${a(o)};\n const float fillOpacity = ${s(i)};\n const float iconSize = ${s(t)};\n const vec3 borderColor = ${a(r)};\n const float borderOpacity = ${s(c)};\n const float borderWidth = ${s(d)};\n const vec3 coreColor = ${a(f)};\n const float coreOpacity = ${s(m)};\n const float coreSize = ${s(p)};\n \n flat in int vSelected;\n \n void main() {\n vec3 finalFillColor = mix(fillColor, vec3(1.0, 0.0, 1.0), float(vSelected));\n vec3 finalBorderColor = mix(borderColor, vec3(0.0, 1.0, 1.0), float(vSelected));\n \n // bool selected = vSelected > 0;\n // vec3 finalFillColor = selected ? vec3(1.0,0.0,1.0) : fillColor;\n // vec3 finalBorderColor = selected ? vec3(0.0,1.0,1.0) : borderColor;\n \n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n float dist = dot(uv, uv);\n\n // Circle mask\n if (dist > 1.0) discard;\n \n \n // // NO AA\n // if (dist > 1.0) {\n // gl_FragColor = vec4(0.0);\n // return;\n // }\n // if (dist > 2.0 * (borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n // if (dist > 1.0 - (2.0 * borderWidth / iconSize)) {\n // gl_FragColor = vec4(borderColor, borderOpacity);\n // }\n // else if (dist < (2.0 * coreSize / iconSize)) {\n // gl_FragColor = vec4(innerColor, fillOpacity);\n // }\n // else {\n // gl_FragColor = vec4(fillColor, fillOpacity);\n // }\n \n // Convert thicknesses to radii (in normalized distance)\n float coreRadius = coreSize / iconSize;\n float fillRadius = 1.0 - (2.0 * borderWidth) / iconSize;\n\n // Convert to squared radius\n float coreR2 = coreRadius * coreRadius;\n float fillR2 = fillRadius * fillRadius;\n\n float smoothing = fwidth(dist);\n // float smoothing = 0.0;\n \n // Step 1: Inner to fill\n float edgeInner = smoothstep(coreR2 - smoothing, coreR2 + smoothing, dist);\n vec3 coreFillColor = mix(coreColor, fillColor, edgeInner);\n float coreFillAlpha = mix(coreOpacity, fillOpacity, edgeInner);\n \n // Step 2: Fill to border\n float edgeOuter = smoothstep(fillR2 - smoothing, fillR2 + smoothing, dist);\n vec3 finalColor = mix(coreFillColor, borderColor, edgeOuter);\n float finalAlpha = mix(coreFillAlpha, borderOpacity, edgeOuter);\n \n gl_FragColor = linearToOutputTexel(vec4(finalColor, finalAlpha));\n \n \n \n \n // // ORIGINAL (2 colors: fill & border)\n // // Smooth border width in world units (relative to icon size)\n // float borderWorld = 2.0 * borderWidth / iconSize;\n // float smoothing = fwidth(dist) * 1.0; // fwidth = derivative for AA width\n \n // // Blend factor: 0 = inside, 1 = outside (border edge)\n // float edge = smoothstep(1.0 - borderWorld - smoothing, 1.0 - borderWorld + smoothing, dist);\n \n // // Mix border and fill based on smoothed edge\n // vec3 color = mix(finalFillColor, finalBorderColor, edge);\n // float alpha = mix(fillOpacity, borderOpacity, edge);\n \n // gl_FragColor = vec4(color, alpha);\n }\n `,l.needsUpdate=!0};m(),f.add(e.on("invalidate",m));const p=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=c(n);l.uniforms.originTime.value.set(i,t)};f.add(o.on("time",p)),p();const v=new i(d,l);v.frustumCulled=!1,f.add(e.on("selection",e=>{if(e.length>0){const n=d.elementIndex(e[0]);l.uniforms.selection.value="number"==typeof n?n:-1}else l.uniforms.selection.value=-1})),n.add(v),f.add(()=>n.remove(v))}return f.disposeLater()}(d,p,g,P));return h.disposeLater()}(d,p,g):(console.error("Layer not supported by ThreePointsTimeLayerLoader",{layer:d}),()=>{})}}function v(n,i,d,f,m){const p=new l,u=n.style,g=void 0!==u.line?.border;!m&&g&&p.add(v(n,i,d,f,!0));const h=new t({transparent:!0,uniforms:{worldPerPixel:{value:new r((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},originTime:{value:new r}}}),x=()=>{const e=u.line?.color||"#df0",n=u.line?.border?.color||"#000",o=u.line?.width||4,i=u.line?.border?.width||1,t=u.line?.opacity||1,r=u.line?.border?.opacity||1,l=g&&m?n:e,c=g&&m?r:t,d=g?o-(m?0:2*i):o;h.vertexShader=`\n // precision mediump float;\n \n const float lineWidth = ${s(d)};\n const float msPerHour = 3600000.0;\n\n uniform vec2 originTime;\n uniform vec2 worldPerPixel;\n\n varying vec2 vUv;\n flat out float vLength;\n flat out float vHeight;\n flat out float vAspect;\n\n void main() {\n vUv = uv;\n\n vec2 size = vec2(length(instanceMatrix[0].xyz), length(instanceMatrix[1].xyz));\n\n vLength = size.x;\n vHeight = size.y;\n\n vAspect = (size.x / worldPerPixel.x) / (size.y / worldPerPixel.y);\n\n // TODO may be better to use attributes... Check later when implementing raycasting\n if (length(instanceMatrix[2].xyz) < 1.5) {\n size.y *= -1.0;\n }\n\n // Reconstruct time\n vec3 pos = vec3(instanceMatrix[3].xyz);\n\n float deltaDay = pos.x - originTime.x;\n float deltaMs = pos.z - originTime.y;\n float relativeTime = deltaDay * msPerHour + deltaMs;\n pos.x = relativeTime;\n pos.z = 0.0;\n\n // Step 1: direction in screen space\n vec2 dirScreen = size / worldPerPixel;\n\n // Step 2: perpendicular direction in screen space\n vec2 perpScreen = normalize(vec2(-dirScreen.y, dirScreen.x)); // 90° rotation\n\n // Step 3: offset in screen space (lineWidth = pixels)\n vec2 offsetScreen = perpScreen * 0.5 * lineWidth;\n\n // Step 4: convert offset back to world space\n vec2 offsetWorld = offsetScreen * worldPerPixel;\n \n // vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld;\n \n vec2 cornerScreen = normalize(dirScreen) * 0.5 * lineWidth;\n vec2 cornerWorld = cornerScreen * worldPerPixel;\n vec2 rotScaleOffset = position.x * size + 2.0 * position.y * offsetWorld + 2.0 * position.x * cornerWorld;\n\n vec3 totalPos = pos + vec3(rotScaleOffset.xy, 0.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(totalPos, 1.0);\n }\n `,h.fragmentShader=`\n // precision mediump float;\n // precision highp float;\n\n const vec3 fillColor = ${a(l)};\n const float lineWidth = ${s(d)};\n const float fillOpacity = ${s(c)};\n\n uniform vec2 worldPerPixel;\n \n varying vec2 vUv;\n flat in float vLength;\n flat in float vHeight;\n flat in float vAspect;\n\n void main() {\n float lengthPx = vLength / worldPerPixel.x;\n float heightPx = vHeight / worldPerPixel.y;\n float distPx = sqrt(pow(lengthPx, 2.0) + pow(heightPx, 2.0));\n\n vec2 sizePx = vec2(lineWidth + distPx, lineWidth);\n float radiusPx = 0.5 * sizePx.y;\n vec2 uvPx = vUv * sizePx;\n\n // Left end circle\n if (uvPx.x < radiusPx) {\n vec2 center = vec2(radiusPx, radiusPx); // center of left circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n\n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n }\n\n // Right end circle\n else if (uvPx.x > sizePx.x - radiusPx) {\n discard;\n vec2 center = vec2(sizePx.x - radiusPx, radiusPx); // center of right circle\n float dist = distance(uvPx, center);\n if (dist > radiusPx) discard;\n // gl_FragColor = vec4(1.0,0.0,1.0,1.0);\n \n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n }\n\n else {\n gl_FragColor = linearToOutputTexel(vec4(fillColor, fillOpacity));\n }\n }\n `};x(),p.add(n.on("invalidate",x));const y=()=>{h.uniforms.worldPerPixel.value.set((d.camera.right-d.camera.left)/d.getSize().width,(d.camera.top-d.camera.bottom)/d.getSize().height)},z=()=>{y();const e=d.getTimeRange(),n=e.startTime+.5*e.duration,[o,i]=c(n);h.uniforms.originTime.value.set(o,i)};p.add(d.on("time",z)),p.add(d.on("value",y)),p.add(d.on("size",y)),z();const P=new o(1,1),S=new e(P,h,n.model.data.length);return f.registerMesh(S),S.frustumCulled=!1,i.add(S),p.add(()=>i.remove(S)),p.disposeLater()}function u(e,n,o,d,f,m,p){const v=new l;if(!e.style.point)throw"cannot happen";const u=new t({transparent:!0,uniforms:{selection:{value:-1},originTime:{value:new r(0,0)}}}),g=()=>{u.vertexShader=`\n // precision mediump float;\n\n const float iconSize = ${s(p)};\n \n uniform vec2 originTime;\n uniform int selection;\n \n flat out int vSelected;\n \n const float msInHour = 3600000.0;\n\n void main() {\n // Option 2: Use gl_VertexID (WebGL2 only)\n bool selected = gl_VertexID == selection;\n vSelected = selected ? 1 : 0;\n\n float hours = position.x;\n float value = position.y;\n float time = position.z;\n\n float deltaHours = hours - originTime.x;\n float deltaMs = time - originTime.y;\n float relativeTime = deltaHours * msInHour + deltaMs;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(relativeTime, value, 1.0, 1.0);\n\n gl_PointSize = mix(iconSize, 2.0 * iconSize, float(vSelected));\n }\n `,u.fragmentShader=`\n // precision mediump float;\n\n const vec3 color = ${a(f)};\n const float opacity = ${s(m)};\n \n flat in int vSelected;\n\n void main() { \n // Convert point coords from [0,1] to [-1,1]\n vec2 uv = gl_PointCoord * 2.0 - 1.0;\n\n // Compute squared distance from center\n float dist = dot(uv, uv);\n \n if (dist > 1.0) discard; // circle mask\n\n // Edge smoothing (anti-aliasing)\n float smoothing = fwidth(dist); // Automatic smoothing width\n float alpha = smoothstep(1.0, 1.0 - smoothing, dist); // Inverted for solid center\n\n gl_FragColor = linearToOutputTexel(vec4(color, alpha * opacity));\n }\n `,u.needsUpdate=!0};g(),v.add(e.on("invalidate",g));const h=()=>{const e=o.getTimeRange(),n=e.startTime+.5*e.duration,[i,t]=c(n);u.uniforms.originTime.value.set(i,t)};v.add(o.on("time",h)),h();const x=new i(d,u);return x.frustumCulled=!1,v.add(e.on("selection",e=>{if(e.length>0){const n=d.elementIndex(e[0]);u.uniforms.selection.value="number"==typeof n?n:-1}else u.uniforms.selection.value=-1})),n.add(x),v.add(()=>n.remove(x)),v.disposeLater()}