@protomaze/time 1.5.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protomaze/time",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "Protomaze Time sliders",
   "main": "index.js",
   "types": "index.d.ts",

package/three/Three3DTimeSliderEngine.d.ts

@@ -1,6 +1,15 @@
 import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
 import { TimeSliderTimeRangeWithDuration, TimeSliderValueRange } from "../data/TimeSliderRange";
 import { TimeSliderEngine } from "../engine/TimeSliderEngine";
+/**
+ * The 3D engine zooms by scaling its camera (x by the visible duration, y by the value range).
+ * three r185+ leaves the camera's scale out of its view matrix (matrixWorldInverse), which drops
+ * that zoom, so this camera always uses the full inverse of its world matrix, as three 0.178 did.
+ */
+export declare class ScaledPerspectiveCamera extends PerspectiveCamera {
+    updateMatrixWorld(force?: boolean): void;
+    updateWorldMatrix(updateParents: boolean, updateChildren: boolean, ...rest: unknown[]): void;
+}
 export declare class Three3DTimeSliderEngine extends TimeSliderEngine<Scene> {
     camera: PerspectiveCamera;
     renderer?: WebGLRenderer;

package/three/Three3DTimeSliderEngine.js

@@ -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)}}
+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)}}