@protomaze/time 1.4.3

package/layer/TimeSliderHistogramLayerOld.d.ts

@@ -0,0 +1,20 @@
+import { TimeSliderHistogram, TimeSliderHistogramAttributes, TimeSliderHistogramClassifier, TimeSliderHistogramOptions } from "../data/histogram/TimeSliderHistogram";
+import { TimeSliderInterval } from "../data/TimeSliderElement";
+import { TimeSliderModel } from "../data/TimeSliderModel";
+import { TimeSliderHistogramStyle } from "../style/TimeSliderHistogramStyle";
+import { TimeSliderIntervalsLayer } from "./TimeSliderIntervalsLayer";
+import { TimeSliderLayerOptions } from "./TimeSliderLayer";
+export type TimeSliderHistogramLayerOldOptions<M extends TimeSliderModel = TimeSliderModel> = TimeSliderLayerOptions<TimeSliderInterval<TimeSliderHistogramAttributes>, TimeSliderHistogramStyle> & {
+    classifier?: TimeSliderHistogramClassifier<M>;
+    classificationIsColor?: boolean;
+};
+export declare class TimeSliderHistogramLayerOld<M extends TimeSliderModel = TimeSliderModel> extends TimeSliderIntervalsLayer<TimeSliderInterval<TimeSliderHistogramAttributes>, TimeSliderHistogramStyle> {
+    private content;
+    private d;
+    histogram: TimeSliderHistogram;
+    constructor(content: M, options?: TimeSliderHistogramLayerOldOptions<M>);
+    createHistogram(options?: TimeSliderHistogramOptions<M>): TimeSliderHistogram;
+    get fixedBoxes(): boolean;
+    dispose(): void;
+    getDefaultStyle(): TimeSliderHistogramStyle;
+}

package/layer/TimeSliderHistogramLayerOld.js

@@ -0,0 +1 @@
+import{Disposables as t}from"../common/Disposables";import{TimeSliderDynamicHistogram as e}from"../data/histogram/TimeSliderDynamicHistogram";import{TimeSliderFixedHistogram as s}from"../data/histogram/TimeSliderFixedHistogram";import{TimeSliderIntervalsModel as i}from"../data/TimeSliderIntervalsModel";import{TimeSliderIntervalsLayer as r}from"./TimeSliderIntervalsLayer";export class TimeSliderHistogramLayerOld extends r{constructor(e,s){super(new i,s),this.content=e,this.d=new t;const r=this.createHistogram({classifier:s?.classifier,...s?.style});this.histogram=r,s?.classifier&&!s.labeler&&(s.classificationIsColor?this.labeler=t=>Math.abs(t.v[0]-t.v[1])+"":this.labeler=t=>{const e=Math.abs(t.v[0]-t.v[1]);return t.attributes?.classification+": "+e}),s?.classificationIsColor&&(this.styler=t=>{const e=t.attributes?.classification;return e?{fill:{color:e},border:{color:e}}:void 0}),this.d.add(this.on("loaded",t=>{t?r.start(this.timeSlider):r.stop()})),this.d.add(this.on("invalidateAll",()=>{r.average=!0===this.style.average,r.weighted=!0===this.style.weighted,r.inverted=!0===this.style.inverted,this.style.mode&&(r.mode=this.style.mode),r.classifier=this.style.classifier,this.style.classOrder&&(r.classOrder=this.style.classOrder)}))}createHistogram(t){return this.fixedBoxes?new s(this.model,this.content,t):new e(this.model,this.content,t)}get fixedBoxes(){return void 0!==this.style.mode?.fixed||void 0!==this.style.mode?.fixedUnit}dispose(){this.model.clear(),this.d.dispose()}getDefaultStyle(){return{}}}

package/layer/TimeSliderIntervalsLayer.d.ts

@@ -0,0 +1,7 @@
+import { TimeSliderInterval } from "../data/TimeSliderElement";
+import { TimeSliderIntervalsStyle } from "../style/TimeSliderIntervalsStyle";
+import { TimeSliderLayer, TimeSliderLayerOptions } from "./TimeSliderLayer";
+export type TimeSliderIntervalsLayerOptions = TimeSliderLayerOptions<TimeSliderInterval, TimeSliderIntervalsStyle>;
+export declare class TimeSliderIntervalsLayer<E extends TimeSliderInterval = TimeSliderInterval, S extends TimeSliderIntervalsStyle = TimeSliderIntervalsStyle> extends TimeSliderLayer<E, S> {
+    getDefaultStyle(): S;
+}

package/layer/TimeSliderIntervalsLayer.js

@@ -0,0 +1 @@
+import{TimeSliderLayer as e}from"./TimeSliderLayer";export class TimeSliderIntervalsLayer extends e{getDefaultStyle(){return{}}}

package/layer/TimeSliderLayer.d.ts

@@ -0,0 +1,66 @@
+import { TimeSliderElement } from "../data/TimeSliderElement";
+import { TimeSliderModel } from "../data/TimeSliderModel";
+import { TimeSlider } from "../engine/TimeSlider";
+import { TypedEventEmitter } from "../event/TypedEventEmitter";
+import { TimeSliderLabeler } from "../style/TimeSliderLabeler";
+import { TimeSliderStyle } from "../style/TimeSliderStyle";
+import { TimeSliderStyler } from "../style/TimeSliderStyler";
+import { YAxisSettings } from "../ticks/YAxisTicks";
+export type TimeSliderModelElement<M extends TimeSliderModel> = M extends TimeSliderModel<infer E> ? E : never;
+export type TimeSliderLayerOptions<E extends TimeSliderElement, S extends TimeSliderStyle> = {
+    id?: string;
+    name?: string;
+    min?: number;
+    max?: number;
+    visible?: boolean;
+    style?: S;
+    styler?: TimeSliderStyler<E, S>;
+    labeler?: TimeSliderLabeler<E>;
+    yAxis?: YAxisSettings;
+};
+export declare abstract class TimeSliderLayer<E extends TimeSliderElement = TimeSliderElement, S extends TimeSliderStyle = TimeSliderStyle> extends TypedEventEmitter<{
+    selection: E[];
+    name: string;
+    min: number;
+    max: number;
+    visible: boolean;
+    loaded?: boolean;
+    invalidate: string;
+    invalidateAll: void;
+}> {
+    model: TimeSliderModel<E>;
+    id: string;
+    private _min;
+    private _max;
+    private _name;
+    private _visible;
+    private _loaded;
+    private _timeSlider?;
+    private _styler?;
+    style: S;
+    labeler?: TimeSliderLabeler<E>;
+    yAxis: YAxisSettings;
+    constructor(model: TimeSliderModel<E>, options?: TimeSliderLayerOptions<E, S>);
+    get yAxisGroup(): string;
+    get styler(): TimeSliderStyler<E, S> | undefined;
+    set styler(newStyler: TimeSliderStyler<E, S> | undefined);
+    abstract getDefaultStyle(): S;
+    invalidate(elementOrId: string | {
+        id: string;
+    }): void;
+    invalidateAll(): void;
+    select(elements: E[]): void;
+    get min(): number;
+    set min(newMin: number);
+    get max(): number;
+    set max(newMax: number);
+    get timeSlider(): TimeSlider | undefined;
+    set timeSlider(timeSlider: TimeSlider | undefined);
+    get name(): string;
+    set name(newName: string);
+    get visible(): boolean;
+    set visible(isit: boolean);
+    get loaded(): boolean;
+    set loaded(isit: boolean);
+    private shouldModelLoad;
+}

package/layer/TimeSliderLayer.js

@@ -0,0 +1 @@
+import{v4 as i}from"uuid";import{TypedEventEmitter as t}from"../event/TypedEventEmitter";export class TimeSliderLayer extends t{constructor(t,e){super(),this.model=t,this._visible=!0,this._loaded=!1,this.id=e?.id||i(),this.style=e?.style||this.getDefaultStyle(),this._styler=e?.styler,this.labeler=e?.labeler,this.yAxis=e?.yAxis||{},this._name=e?.name||t.name||"Unknown",this._min=e?.min||0,this._max=e?.max||1,this._visible="boolean"!=typeof e?.visible||e.visible}get yAxisGroup(){return this.yAxis.group||this.id}get styler(){return this._styler}set styler(i){this._styler=i,this.invalidateAll()}invalidate(i){const t="string"==typeof i?i:i.id;this.emit("invalidate",t)}invalidateAll(){this.emit("invalidateAll")}select(i){this.emit("selection",i)}get min(){return this._min}set min(i){i!==this._min&&(this._min=i,this.emit("min",i))}get max(){return this._max}set max(i){i!==this._max&&(this._max=i,this.emit("max",i))}get timeSlider(){return this._timeSlider}set timeSlider(i){this._timeSlider=i}get name(){return this._name}set name(i){i!==this._name&&(this._name=i,this.emit("name",i))}get visible(){return this._visible}set visible(i){i!==this._visible&&(this._visible=i,this.emit("visible",i),this.shouldModelLoad())}get loaded(){return this._loaded}set loaded(i){i!==this._loaded&&(this._loaded=i,this.shouldModelLoad(),this.emit("loaded",i))}shouldModelLoad(){const i=this.loaded&&this.visible;this.model.loaded(this.id,i)}}

package/layer/TimeSliderLayerLoader.d.ts

@@ -0,0 +1,8 @@
+import { TimeSlider } from "../engine/TimeSlider";
+import { TimeSliderEngine, TimeSliderEngineClass, TimeSliderEngineScene } from "../engine/TimeSliderEngine";
+import { TimeSliderLayer } from "./TimeSliderLayer";
+export interface TimeSliderLayerLoader<T extends TimeSliderEngine<any>> {
+    engineClass: TimeSliderEngineClass<T>;
+    canLoad(layer: TimeSliderLayer): boolean;
+    load(layer: TimeSliderLayer, scene: TimeSliderEngineScene<T>, engine: T, timeSlider: TimeSlider): () => void;
+}

package/layer/TimeSliderLayerLoader.js

@@ -0,0 +1 @@
+export{};

package/layer/TimeSliderPointsLayer.d.ts

@@ -0,0 +1,7 @@
+import { TimeSliderPoint } from "../data/TimeSliderElement";
+import { TimeSliderPointsStyle } from "../style/TimeSliderPointsStyle";
+import { TimeSliderLayer, TimeSliderLayerOptions } from "./TimeSliderLayer";
+export type TimeSliderPointsLayerOptions = TimeSliderLayerOptions<TimeSliderPoint, TimeSliderPointsStyle>;
+export declare class TimeSliderPointsLayer extends TimeSliderLayer<TimeSliderPoint, TimeSliderPointsStyle> {
+    getDefaultStyle(): TimeSliderPointsStyle;
+}

package/layer/TimeSliderPointsLayer.js

@@ -0,0 +1 @@
+import{TimeSliderLayer as e}from"./TimeSliderLayer";export class TimeSliderPointsLayer extends e{getDefaultStyle(){return{}}}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@protomaze/time",
+  "version": "1.4.3",
+  "description": "Protomaze Time sliders",
+  "main": "index.ts",
+  "types": "index.d.ts",
+  "files": [
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "compile": "tsc && node dev/copy_files.js && node dev/minify_files.js",
+    "pub": "npm version patch --no-git-tag-version && rimraf build && npm run compile && cd build && npm --registry http://localhost:4873/ publish",
+    "deploy": "rimraf build && npm run compile && cd build && npm publish --access public",
+    "build": "webpack --mode production && npm run deploy",
+    "release": "npm version patch --no-git-tag-version && npm run build",
+    "release:minor": "npm version minor --no-git-tag-version && npm run build",
+    "release:major": "npm version major --no-git-tag-version && npm run build"
+  },
+  "keywords": [
+    "webpack",
+    "typescript"
+  ],
+  "author": "Tom Crauwels",
+  "dependencies": {
+    "rbush": "^4.0.1",
+    "three": "0.178.0",
+    "uuid": "^14.0.1"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/rbush": "4.0.0",
+    "@types/react": "18.0.34",
+    "@types/react-dom": "18.0.11",
+    "@types/three": "0.178.0",
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^6.2.0",
+    "file-loader": "6.2.0",
+    "html-webpack-plugin": "^5.3.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "style-loader": "^3.2.1",
+    "terser": "^5.43.1",
+    "ts-loader": "^9.6.2",
+    "typescript": "^6.0.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  },
+  "overrides": {
+    "@types/scheduler": "< 0.23.0"
+  }
+}

package/react/ColoredSlider.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+export type AvailableListener = (available: number | null) => void;
+export type HoverListener = (hover: number | null) => void;
+export type ValueListener = (value: number) => void;
+export type ColoredSliderProps = {
+    matchWidth?: boolean;
+    railWidth?: number;
+    hoverWidth?: number;
+    handleColor?: string;
+    progressColor?: string;
+    railColor?: string;
+    hoverColor?: string;
+    availableColor?: string;
+    available?: number | null;
+    onAvailable?: AvailableListener;
+    hover?: number | null;
+    onHover?: HoverListener;
+    value?: number;
+    onValue?: ValueListener;
+    min?: number;
+    max?: number;
+} & React.InputHTMLAttributes<HTMLDivElement>;
+export interface ColoredSliderElement extends HTMLDivElement {
+    matchWidth: boolean;
+    railWidth: number;
+    hoverWidth: number;
+    handleColor: string;
+    progressColor: string;
+    railColor: string;
+    hoverColor: string;
+    availableColor: string;
+    value: number;
+    onValue: (listener: ValueListener) => () => void;
+    available: number | null;
+    onAvailable: (listener: AvailableListener) => () => void;
+    hover: number | null;
+    onHover: (listener: AvailableListener) => () => void;
+    min: number;
+    max: number;
+}
+export declare const ColoredSlider: React.ForwardRefExoticComponent<{
+    matchWidth?: boolean;
+    railWidth?: number;
+    hoverWidth?: number;
+    handleColor?: string;
+    progressColor?: string;
+    railColor?: string;
+    hoverColor?: string;
+    availableColor?: string;
+    available?: number | null;
+    onAvailable?: AvailableListener;
+    hover?: number | null;
+    onHover?: HoverListener;
+    value?: number;
+    onValue?: ValueListener;
+    min?: number;
+    max?: number;
+} & React.InputHTMLAttributes<HTMLDivElement> & React.RefAttributes<ColoredSliderElement>>;

package/react/ColoredSlider.js

@@ -0,0 +1 @@
+import e,{forwardRef as t,useCallback as n,useEffect as r,useImperativeHandle as o,useRef as i,useState as l}from"react";import{v4 as u}from"uuid";const a={pointerEvents:"none",position:"absolute",zIndex:99999,borderRadius:"4px",left:0,top:"50%",transform:"translateY(-50%)"};export const ColoredSlider=t(({handleColor:t,progressColor:c,railColor:d,hoverColor:h,availableColor:s,matchWidth:p,value:v,onValue:m,available:f,onAvailable:x,hover:g,onHover:w,railWidth:b,hoverWidth:y,min:C,max:M,...E},P)=>{const z=i(null),R=i(null),L=i(null),W=i(null),B=i(null),I=i(null),[k,D]=(i(E.id||u()),l(t||"#f44")),[S,A]=l(c||"#f44"),[U,X]=l(d||"#888"),[H,V]=l(h||"#f448 "),[$,O]=l(s||"#df08"),[Y,j]=l(b||4),[q,F]=l(y||8),[G,J]=l(p||!1),[K,N]=l(C||0),[Q,T]=l(M||100),[Z,_]=l(v||50),[ee,te]=l(!1),[ne,re]=l(!1),[oe,ie]=l(null),[le,ue]=l(f||null),ae=i(new Set),ce=i(new Set),de=i(new Set),he=i(K),se=i(Q),pe=i(!1);r(()=>{pe.current=ee},[ee]),r(()=>{he.current=K},[K]),r(()=>{se.current=Q},[Q]),r(()=>{void 0!==v&&ae.current.forEach(e=>e(v)),"number"==typeof v&&_(v)},[v]),r(()=>{"number"==typeof C&&N(C)},[C]),r(()=>{"number"==typeof M&&T(M)},[M]),r(()=>{void 0!==f&&ce.current.forEach(e=>e(f)),"number"==typeof f&&ue(f)},[f]),r(()=>{if(le&&z.current&&I.current){const e=z.current.getBoundingClientRect(),t=(le-K)/(Q-K);let n;p?(n=Math.max(0,Math.min(t,1)),I.current.style.width=`${Math.min(e.width,n*e.width+2)}px`):(n=Math.max(0,Math.min(t,1)),I.current.style.width=1===n?n*(e.width-16)+16+"px":n*(e.width-16)+8+"px")}ce.current.forEach(e=>e(le)),"function"==typeof x&&x(le)},[le,K,Q,ne]),r(()=>{if(oe){if(B.current&&z.current){const e=z.current.getBoundingClientRect(),t=Math.max(0,Math.min(oe,1));B.current.style.width=G?`${Math.min(e.width,t*e.width+2)}px`:oe>=1?t*(e.width-16)+16+"px":t*(e.width-16)+8+"px"}}else B.current&&(B.current.style.width="0px");de.current.forEach(e=>e(oe)),"function"==typeof w&&w(oe)},[oe,G]),o(P,()=>({...z.current,onValue:e=>(ae.current.add(e),()=>{ae.current.delete(e)}),get value(){return Z},set value(e){"function"==typeof m&&m(e),_(e)},get max(){return Q},set max(e){T(e)},get min(){return K},set min(e){N(e)},get matchWidth(){return G},set matchWidth(e){J(e)},get railWidth(){return Y},set railWidth(e){j(e)},get hoverWidth(){return q},set hoverWidth(e){F(e)},get hover(){return oe},set hover(e){ie(e)},onHover:e=>(de.current.add(e),()=>{de.current.delete(e)}),get available(){return le},set available(e){ue(e)},onAvailable:e=>(ce.current.add(e),()=>{ce.current.delete(e)}),get handleColor(){return k},set handleColor(e){D(e)},get progressColor(){return S},set progressColor(e){A(e)},get railColor(){return U},set railColor(e){X(e)},get hoverColor(){return H},set hoverColor(e){V(e)},get availableColor(){return $},set availableColor(e){O(e)}}),[]);const ve=n(e=>{if(z.current){const t=z.current.getBoundingClientRect();let n;if(p){const r=(e.clientX-t.left)/t.width,o=8/t.width;n=Math.max(o,Math.min(r,1-o))}else{const t=z.current.getBoundingClientRect(),r=(e.clientX-t.left-8)/(t.width-16);n=Math.max(0,Math.min(r,1))}const r=se.current-he.current,o=he.current+n*r;_(o),ae.current.forEach(e=>e(o)),"function"==typeof m&&m(o)}},[p]);r(()=>{if(z.current&&W.current&&R.current){const e=z.current.getBoundingClientRect(),t=(Z-K)/(Q-K);if(p){const n=8/e.width,r=Math.max(n,Math.min(t,1-n));W.current.style.width=r*e.width+"px",R.current.style.left=r*e.width+"px"}else{const n=Math.max(0,Math.min(t,1));W.current.style.width=n*(e.width-16)+8+"px",R.current.style.left=n*(e.width-16)+8+"px"}}},[K,Q,Z,ne]),r(()=>{const e=()=>{re(e=>!e)},t=new ResizeObserver(e);return z.current&&t.observe(z.current),window.addEventListener("resize",e),()=>{t.disconnect(),window.removeEventListener("resize",e)}},[]),r(()=>{if(ee){const e=e=>{e.preventDefault(),ve(e)},t=e=>{te(!1)};return document.addEventListener("pointermove",e),document.addEventListener("pointerup",t),()=>{document.removeEventListener("pointermove",e),document.removeEventListener("pointerup",t)}}},[ee,p]);const me=n(e=>{E.onPointerDown?.(e),e.preventDefault(),te(!0)},[E.onPointerDown]),fe=n(e=>{E.onPointerUp?.(e),ve(e)},[E.onPointerUp]),xe=n(e=>{E.onPointerMove?.(e);const t=e.target.getBoundingClientRect(),n=(e.clientX-t.left)/t.width;ie(Math.max(0,Math.min(1,n)))},[E.onPointerMove]),ge=n(e=>{E.onPointerLeave?.(e),ie(null)},[E.onPointerLeave]);return e.createElement("div",{...E,ref:z,onPointerDown:me,onPointerUp:fe,onPointerMove:E.onPointerMove&&xe,onPointerLeave:ge,style:{cursor:"pointer",padding:"8px 0",height:"8px",boxSizing:"content-box",touchAction:"none",...E.style}},e.createElement("div",{ref:L,style:{...a,width:"100%",height:(null===oe?Y:q)+"px",zIndex:99999,background:U,borderRadius:"4px"}}),e.createElement("div",{ref:I,style:{...a,height:(null===oe?Y:q)+"px",zIndex:999999,background:$}}),e.createElement("div",{ref:B,style:{...a,height:(null===oe?Y:q)+"px",zIndex:9999999,background:H}}),e.createElement("div",{ref:W,style:{...a,height:(null===oe?Y:q)+"px",zIndex:99999999,background:S}}),e.createElement("div",{ref:R,style:{pointerEvents:"none",position:"absolute",height:"16px",width:"16px",zIndex:999999999,background:k,transform:"translate(-8px, -4px)",borderRadius:"50%"}}))});

package/react/ColoredSliderExtendsInput.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export type AvailableListener = (available: number | null) => void;
+export type HoverListener = (hover: number | null) => void;
+export interface ColoredSliderInputElement extends HTMLInputElement {
+    matchWidth: boolean;
+    railWidth: number;
+    hoverWidth: number;
+    handleColor: string;
+    progressColor: string;
+    railColor: string;
+    hoverColor: string;
+    availableColor: string;
+    available: number | null;
+    onAvailable: (listener: AvailableListener) => () => void;
+    hover: number | null;
+    onHover: (listener: AvailableListener) => () => void;
+}
+export declare const ColoredSliderExtendsInput: React.ForwardRefExoticComponent<{
+    matchWidth?: boolean;
+    railWidth?: number;
+    hoverWidth?: number;
+    handleColor?: string;
+    progressColor?: string;
+    railColor?: string;
+    hoverColor?: string;
+    availableColor?: string;
+    available?: number | null;
+    onAvailable?: AvailableListener;
+    hover?: number | null;
+    onHover?: HoverListener;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<ColoredSliderInputElement>>;

package/react/ColoredSliderExtendsInput.js

@@ -0,0 +1 @@
+import e,{forwardRef as t,useEffect as n,useImperativeHandle as r,useRef as o,useState as l}from"react";import{v4 as i}from"uuid";const u={touchAction:"none",pointerEvents:"none",position:"absolute",zIndex:99999,borderRadius:"4px 0px 0px 4px"};export const ColoredSliderExtendsInput=t(({handleColor:t,progressColor:a,railColor:c,hoverColor:d,availableColor:p,matchWidth:s,available:h,onAvailable:x,hover:g,onHover:b,railWidth:m,hoverWidth:f,min:v,max:y,...w},k)=>{const C=o(null),E=o(null),$=o(null),R=o(null),z=o(null),W=o(null),M=o(w.id||i()),[I,A]=l(t||"#f44"),[B,F]=l(a||"#f44"),[L,H]=l(c||"#aaa8"),[S,X]=l(d||"#aaa8"),[N,O]=l(p||"#aaa8"),[j,q]=l(m||4),[D,G]=l(f||8),[J,K]=l(s||!1),[P,Q]=l(),[T,U]=l(null),[V,Y]=l(h||null),Z=o(new Set),_=o(new Set);n(()=>{if(V&&C.current&&W.current){const e=parseFloat(C.current.max)||100,t=parseFloat(C.current.min)||0,n=(V-t)/(e-t),r=Math.max(0,Math.min(n,1)),o=C.current.getBoundingClientRect();1===r?(W.current.style.width=r*(o.width-16)+16+"px",W.current.style.borderRadius="4px"):(W.current.style.width=r*(o.width-16)+8+"px",W.current.style.borderRadius="4px 0px 0px 4px")}Z.current.forEach(e=>e(V)),"function"==typeof x&&x(V)},[V]),n(()=>{if(T){if(z.current&&C.current){const e=C.current.getBoundingClientRect(),t=Math.max(0,Math.min(T,1));T>=1?(z.current.style.width=t*(e.width-16)+16+"px",z.current.style.borderRadius="4px"):(z.current.style.width=t*(e.width-16)+8+"px",z.current.style.borderRadius="4px 0px 0px 4px")}}else z.current&&(z.current.style.width="0px");_.current.forEach(e=>e(T)),"function"==typeof b&&b(T)},[T]),r(k,()=>({...C.current,get matchWidth(){return J},set matchWidth(e){K(e)},get railWidth(){return j},set railWidth(e){q(e)},get hoverWidth(){return D},set hoverWidth(e){G(e)},get hover(){return T},set hover(e){U(e)},onHover:e=>(_.current.add(e),()=>{_.current.delete(e)}),get available(){return V},set available(e){Y(e)},onAvailable:e=>(Z.current.add(e),()=>{Z.current.delete(e)}),get handleColor(){return I},set handleColor(e){A(e)},get progressColor(){return B},set progressColor(e){F(e)},get railColor(){return L},set railColor(e){H(e)},get hoverColor(){return S},set hoverColor(e){X(e)},get availableColor(){return N},set availableColor(e){O(e)}}),[]);const ee=()=>{if(C.current&&R.current&&E.current){const e=C.current.valueAsNumber,t=parseFloat(C.current.max)||100,n=parseFloat(C.current.min)||0,r=(e-n)/(t-n),o=C.current.getBoundingClientRect();R.current.style.width=r*(o.width-16)+8+"px",E.current.style.transform=`translateX(${r*(o.width-16)+8}px)`}};n(()=>{ee()},[v,y,w.value]),n(()=>{if(C.current)return C.current.addEventListener("input",ee),()=>{C.current?.removeEventListener("input",ee)}},[]);const te=()=>{if(C.current&&R.current&&E.current&&W.current&&z.current&&$.current){const e=C.current.getBoundingClientRect(),t=C.current.parentElement.getBoundingClientRect(),n=C.current.offsetHeight,r=.5*(null===T?j:D);$.current.style.width=`${e.width}px`,$.current.style.top=e.top-t.top+.5*n-r+"px",$.current.style.left=e.left-t.left+"px",W.current.style.top=e.top-t.top+.5*n-r+"px",W.current.style.left=e.left-t.left+"px",z.current.style.top=e.top-t.top+.5*n-r+"px",z.current.style.left=e.left-t.left+"px",R.current.style.top=e.top-t.top+.5*n-r+"px",R.current.style.left=e.left-t.left+"px",E.current.style.top=e.top-t.top+.5*n-8+"px",E.current.style.left=e.left-t.left-8+"px",ee()}};n(()=>{te()},[T,D,j]),n(()=>{te();const e=new ResizeObserver(te);return C.current&&e.observe(C.current),window.addEventListener("resize",te),()=>{e.disconnect(),window.removeEventListener("resize",te)}},[]);const ne=C.current?.id||M.current;return e.createElement(e.Fragment,null,e.createElement("style",null,`\n            /* Chrome */\n            input[id=${ne}]::-webkit-slider-thumb {\n                -webkit-appearance: none;\n                appearance: none;\n                background: ${I};\n                width: 16px;\n                height: 16px;\n                border-radius: 50%;\n                margin-top: -4px;\n                z-index: 9999999999;\n                cursor: pointer; */\n            }\n\n            input[id=${ne}]::-webkit-slider-runnable-track {\n                -webkit-appearance: none;\n                // height: 8px;\n                // background: ${L};\n                // border-radius: 4px;\n            }\n\n            /* Firefox */\n            input[id=${ne}]::-moz-range-progress {\n                background: #0000;\n                // background: ${B};\n            }\n\n            input[id=${ne}]::-moz-range-track {\n                background: #0000;\n                // background: ${L};\n            }\n                            \n            input[id=${ne}]::-moz-range-tooltip {\n                display: none;\n            }\n\n            /* IE */\n            input[id=${ne}] {\n                -ms-track-color: #0000;\n            }\n\n            input[id=${ne}]::-ms-fill-lower {\n                background: #0000;\n                // background: ${B};\n            }\n\n            input[id=${ne}]::-ms-fill-upper {\n                background: #0000;\n                // background: ${L};\n            }\n        `),e.createElement("input",{id:ne,...w,ref:C,type:"range",min:v,max:y,onMouseMove:e=>{const t=e.target.getBoundingClientRect(),n=(e.clientX-t.left-8)/(t.width-16);U(Math.max(0,Math.min(1,n)))},onMouseLeave:()=>U(null),style:{padding:"8px 0",position:"absolute",height:"8px",margin:0,...w.style,touchAction:"none",WebkitAppearance:"none",backgroundColor:"transparent"}}),e.createElement("div",{ref:$,style:{...u,height:(null===T?j:D)+"px",zIndex:99999,background:L,borderRadius:"4px"}}),e.createElement("div",{ref:W,style:{...u,height:(null===T?j:D)+"px",zIndex:999999,background:N}}),e.createElement("div",{ref:z,style:{...u,height:(null===T?j:D)+"px",zIndex:9999999,background:S}}),e.createElement("div",{ref:R,style:{...u,height:(null===T?j:D)+"px",zIndex:99999999,background:B}}),e.createElement("div",{ref:E,style:{pointerEvents:"none",position:"absolute",height:"16px",width:"16px",zIndex:999999999,background:I,touchAction:"none",borderRadius:"50%"}}))});

package/react/DateLabelWithPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function DateLabelWithPicker({ time, setTime, theme, ...props }: {
+    time: number;
+    setTime: (newTime: number) => void;
+    theme?: 'dark' | 'light';
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>): JSX.Element;

package/react/DateLabelWithPicker.js

@@ -0,0 +1 @@
+import e,{useEffect as t,useRef as r,useState as n}from"react";import{formatDateWithWeekDay as i}from"../common/TimeTools";import{LABEL_WITH_PICKER_HOVER_STYLE as o,LABEL_WITH_PICKER_SPAN_STYLE as a}from"./TimeLabelWithPicker";export function DateLabelWithPicker({time:c,setTime:l,theme:s,...u}){const m=r(c),p=r(null),[d,h]=n(!1);t(()=>{m.current=c},[c]),t(()=>{if(p.current){const e=()=>{const e=p.current.value,[t,r,n]=e.split("-").map(e=>parseInt(e)),i=new Date(m.current);i.setDate(n),i.setMonth(r-1),i.setFullYear(t),l(i.getTime())};return p.current.addEventListener("input",e),()=>{p.current?.removeEventListener("input",e)}}},[]);return e.createElement("div",{...u,style:{position:"relative",...u.style}},e.createElement("span",{style:d?o(s||"dark"):a(s||"dark"),onClick:()=>{if(p.current){const e=new Date(m.current),t=e.getDate().toString().padStart(2,"0"),r=(e.getMonth()+1).toString().padStart(2,"0"),n=e.getFullYear().toString().padStart(4,"0");p.current.value=n+"-"+r+"-"+t,p.current.showPicker()}},onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1)},i(c)),e.createElement("input",{type:"date",ref:p,style:{position:"absolute",left:"0px",visibility:"hidden",colorScheme:"dark"===s?"dark":"light"}}))}

package/react/DateRangeLabelWithPicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TimeSliderTimeRangeArray } from '../data/TimeSliderRange';
+export declare function DateRangeLabelWithPicker({ range, setRange, theme, ...props }: {
+    range: TimeSliderTimeRangeArray;
+    setRange: (newRange: TimeSliderTimeRangeArray) => void;
+    theme?: 'dark' | 'light';
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>): JSX.Element;

package/react/DateRangeLabelWithPicker.js

@@ -0,0 +1 @@
+import e,{useEffect as t,useRef as n,useState as r}from"react";import a from"./YearScroller";import{LABEL_WITH_PICKER_HOVER_STYLE as l,LABEL_WITH_PICKER_SPAN_STYLE as u}from"./TimeLabelWithPicker";export function DateRangeLabelWithPicker({range:c,setRange:i,theme:s,...g}){const p=n(c),m=n(null),d=n(null),h=n(null),D=n(null),S=n(null),[f,F]=r(!1);t(()=>{p.current=c},[c]),t(()=>{if(d.current){const e=()=>{const e=new Date(p.current[0]),t=new Date(p.current[1]-1),n=d.current.value,[r,a,l]=n.split("-").map(e=>parseInt(e));e.toDateString()===t.toDateString()&&(t.setDate(l),t.setMonth(a-1),t.setFullYear(r)),e.setDate(l),e.setMonth(a-1),e.setFullYear(r),i([e.getTime(),t.getTime()+1])};d.current.addEventListener("input",e)}if(h.current){const e=()=>{const e=new Date(p.current[0]),t=new Date(p.current[1]-1),n=h.current.value,[r,a,l]=n.split("-").map(e=>parseInt(e));t.setDate(l),t.setMonth(a-1),t.setFullYear(r),i([e.getTime(),t.getTime()+1])};h.current.addEventListener("input",e)}if(D.current){const e=()=>{const e=new Date(p.current[0]),t=new Date(p.current[1]-1),n=D.current.value,[r,a]=n.split("-").map(e=>parseInt(e));t.setDate(o(a-1,r)),t.setMonth(a-1),t.setFullYear(r),e.setMonth(a-1),e.setFullYear(r),i([e.getTime(),t.getTime()+1])};D.current.addEventListener("change",e),D.current.addEventListener("input",e)}if(S.current){const e=e=>{const t=new Date(p.current[0]),n=new Date(p.current[1]-1);n.setDate(o(11,e)),n.setFullYear(e),t.setFullYear(e),i([t.getTime(),n.getTime()+1])};S.current.onSelect(e)}},[]);const w=e=>{if(m.current){const t=m.current.getBoundingClientRect(),n=(e.clientX-t.left)/t.width;F(n<=.5?"start":"end")}};return e.createElement("div",{...g,style:{position:"relative",...g.style}},e.createElement("span",{ref:m,style:f?l(s||"dark"):u(s||"dark"),onClick:e=>{if(d.current&&h.current&&D.current&&S.current&&m.current){const t=new Date(p.current[0]);if(function(e){const[t,n]=e,r=new Date(t),a=new Date(n),l=new Date(n-1);return r.getFullYear()===l.getFullYear()&&r.getMonth()===l.getMonth()&&1===r.getDate()&&1===a.getDate()}(p.current)){const e=(t.getMonth()+1).toString().padStart(2,"0"),n=t.getFullYear().toString().padStart(4,"0");D.current.value=n+"-"+e,D.current.showPicker()}else if(function(e){const[t,n]=e,r=new Date(t),a=new Date(n),l=new Date(n-1);return r.getFullYear()===l.getFullYear()&&1===r.getDate()&&1===a.getDate()&&0===r.getMonth()&&0===a.getMonth()}(p.current)){const e=t.getFullYear();S.current.value=e,S.current.show()}else{const n=new Date(p.current[1]),r=m.current.getBoundingClientRect();if((e.clientX-r.left)/r.width<=.5||t.toDateString()===n.toDateString()){const e=t.getDate().toString().padStart(2,"0"),n=(t.getMonth()+1).toString().padStart(2,"0"),r=t.getFullYear().toString().padStart(4,"0");d.current.value=r+"-"+n+"-"+e,d.current.showPicker()}else{const e=n.getDate().toString().padStart(2,"0"),t=(n.getMonth()+1).toString().padStart(2,"0"),r=n.getFullYear().toString().padStart(4,"0");h.current.value=r+"-"+t+"-"+e,h.current.focus(),h.current.showPicker()}}}},onMouseMove:w,onMouseEnter:w,onMouseLeave:()=>F(!1)},function(t,n){const[r,a]=t,l=new Date(r),u=new Date(a),o=new Date(a-1),c=l.toLocaleString("default",{month:"short"}),i=o.toLocaleString("default",{month:"short"}),s=l.getDate().toString().padStart(2,"0"),g=o.getDate().toString().padStart(2,"0"),p={color:"#888"},m="end"===n?p:void 0,d="start"===n?p:void 0;return l.getFullYear()===o.getFullYear()?l.getMonth()===o.getMonth()?l.getDate()===o.getDate()?`${g} ${i} ${o.getFullYear()}`:1===l.getDate()&&1===u.getDate()?`${i} ${o.getFullYear()}`:e.createElement(e.Fragment,null,e.createElement("span",{style:m},`${s}`),e.createElement("span",null," - "),e.createElement("span",{style:d},`${g}`),e.createElement("span",null,` ${i} ${o.getFullYear()}`)):1===l.getDate()&&1===u.getDate()&&0===l.getMonth()&&0===u.getMonth()?`${o.getFullYear()}`:e.createElement(e.Fragment,null,e.createElement("span",{style:m},`${s} ${c}`),e.createElement("span",null," - "),e.createElement("span",{style:d},`${g} ${i}`),e.createElement("span",null,` ${o.getFullYear()}`)):1===l.getDate()&&1===u.getDate()&&0===l.getMonth()&&0===u.getMonth()?` ${l.getFullYear()} - ${o.getFullYear()}`:e.createElement(e.Fragment,null,e.createElement("span",{style:m},`${s} ${c} ${l.getFullYear()}`),e.createElement("span",null," - "),e.createElement("span",{style:d},`${g} ${i} ${o.getFullYear()}`))}(c,f)),e.createElement("input",{type:"date",ref:d,style:{position:"absolute",left:"0px",visibility:"hidden",colorScheme:"dark"===s?"dark":"light"}}),e.createElement("input",{type:"date",ref:h,style:{position:"absolute",right:"0px",visibility:"hidden",colorScheme:"dark"===s?"dark":"light"}}),e.createElement("input",{type:"month",ref:D,style:{position:"absolute",right:"0px",visibility:"hidden",colorScheme:"dark"===s?"dark":"light"}}),e.createElement(a,{ref:S}))}function o(e,t){if(e<0||e>11)throw new Error("Month must be between 0 and 11");if(1===e){return t%4==0&&t%100!=0||t%400==0?29:28}return[31,28,31,30,31,30,31,31,30,31,30,31][e]}

package/react/DeepMemoHook.d.ts

@@ -0,0 +1 @@
+export declare function useDeepMemo<T>(factory: () => T, deps: any[], cleanup?: (value: T) => void): T;

package/react/DeepMemoHook.js

@@ -0,0 +1 @@
+import{useEffect as e,useRef as r}from"react";function t(e,r){if(Object.is(e,r))return!0;if(typeof e!=typeof r)return!1;if("object"!=typeof e||null===e||null===r)return!1;if(Array.isArray(e))return!(!Array.isArray(r)||e.length!==r.length)&&e.every((e,n)=>t(e,r[n]));const n=Object.keys(e),u=Object.keys(r);return n.length===u.length&&n.every(n=>t(e[n],r[n]))}export function useDeepMemo(n,u,c){const o=r();return o.current&&t(o.current.deps,u)||(c&&o.current&&c(o.current.value),o.current={deps:u,value:n()}),e(()=>()=>{"function"==typeof c&&o.current&&c(o.current.value)},[]),o.current.value}

package/react/FullscreenButton.d.ts

@@ -0,0 +1 @@
+export declare const FullscreenButton: () => JSX.Element;

package/react/FullscreenButton.js

@@ -0,0 +1 @@
+import e,{useState as l,useEffect as n}from"react";import{MaterialIconButton as t}from"./MaterialIconButton";export const FullscreenButton=()=>{const[c,u]=l(!1);return n(()=>{c?function(){const e=document.documentElement;e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen()}():function(){const e=document;e.exitFullscreen?document.fullscreenElement&&document.hasFocus()&&document.exitFullscreen().catch(e=>{console.warn("Failed to exit fullscreen:",e)}):e.mozCancelFullScreen?e.mozCancelFullScreen():e.webkitExitFullscreen?e.webkitExitFullscreen():e.msExitFullscreen&&e.msExitFullscreen()}()},[c]),e.createElement(e.Fragment,null,c&&e.createElement(t,{iconName:"fullscreen_exit",onClick:()=>u(!1)}),!c&&e.createElement(t,{iconName:"fullscreen",onClick:()=>u(!0)}))};

package/react/MaterialIconButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function MaterialIconButton({ iconName, color, rotate, active, ...buttonProps }: {
+    color?: string;
+    active?: boolean;
+    iconName: string;
+    rotate?: number;
+} & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>): JSX.Element;

package/react/MaterialIconButton.js

@@ -0,0 +1 @@
+import o from"react";export function MaterialIconButton({iconName:t,color:e,rotate:n,active:r,...a}){const i={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"6px",backgroundColor:r?"#780":"#0008",color:e||(r?"#000":"#fff"),fontFamily:"Roboto, sans-serif",fontWeight:500,fontSize:"12px",letterSpacing:"0.5px",padding:"2px",border:"none",borderRadius:"4px",cursor:"pointer",boxShadow:"0 2px 4px rgba(0,0,0,0.2)",transition:"background-color 0.2s, box-shadow 0.2s"},l={backgroundColor:"#df0"},s={},c={fontVariationSettings:"'FILL' 1",transform:n?`rotateZ(${n}deg)`:void 0,color:e||(r?"#000":"#fff"),fontSize:"18px",lineHeight:1},f={color:"#000"},p={color:"#df0"},[d,u]=o.useState(!1),[g,x]=o.useState(!1),b={...i,...d?l:{},...g?s:{}},m={...c,...d?f:{},...g?p:{}};return o.createElement("button",{...a,style:b,onPointerEnter:()=>u(!0),onPointerLeave:()=>{u(!1),x(!1)},onPointerDown:()=>x(!0),onPointerUp:()=>x(!1)},o.createElement("span",{className:"material-symbols-outlined",style:m},t))}

package/react/MaterialTextButton.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare function MaterialTextButton({ children, text, color, onClick, active }: {
+    color?: string;
+    children?: ReactNode[];
+    text?: string;
+    onClick?: () => void;
+    active?: boolean;
+}): JSX.Element;

package/react/MaterialTextButton.js

@@ -0,0 +1 @@
+import o from"react";export function MaterialTextButton({children:e,text:t,color:n,onClick:r,active:i}){const a={height:"22px",display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"6px",backgroundColor:i?"#780":"#0008",color:n||(i?"#000":"#fff"),fontFamily:"Roboto, sans-serif",fontWeight:500,fontSize:"12px",letterSpacing:"0.5px",padding:"2px 4px",border:"none",borderRadius:"4px",cursor:"pointer",boxShadow:"0 2px 4px rgba(0,0,0,0.2)",transition:"background-color 0.2s, box-shadow 0.2s"},l={backgroundColor:"#df0"},s={},c={fontSize:"14px",lineHeight:1},p={color:"#000"},u={color:"#df0"},[x,d]=o.useState(!1),[f,g]=o.useState(!1),b={...a,...x?l:{},...f?s:{}},h={...c,...x?p:{},...f?u:{}};return o.createElement("button",{onClick:r,style:b,onMouseEnter:()=>d(!0),onMouseLeave:()=>{d(!1),g(!1)},onMouseDown:()=>g(!0),onMouseUp:()=>g(!1)},e,o.createElement("span",{style:h},t))}

package/react/PinchZoomHook.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A custom React hook to add pinch-to-zoom functionality to an element.
+ * @returns A tuple containing the ref to attach to the target element and the style object.
+ */
+export declare function usePinchZoom<T extends HTMLElement>(): [
+    React.RefObject<T | null>,
+    {
+        transform: string;
+    }
+];

package/react/PinchZoomHook.js

@@ -0,0 +1 @@
+import{useRef as e,useEffect as t,useState as n,useCallback as c}from"react";const r=(e,t)=>Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),s=(e,t)=>({x:(e.x+t.x)/2,y:(e.y+t.y)/2});export function usePinchZoom(){const u=e(null),[o,l]=n({scale:1,x:0,y:0}),a=e(0),h=e(1),i=e(null),v=c(e=>{if(2===e.touches.length&&u.current){e.preventDefault();const t={x:e.touches[0].clientX,y:e.touches[0].clientY},n={x:e.touches[1].clientX,y:e.touches[1].clientY};a.current=r(t,n),h.current=o.scale,i.current=s(t,n)}},[o.scale]),x=c(e=>{if(2===e.touches.length&&a.current>0&&u.current){e.preventDefault();const t={x:e.touches[0].clientX,y:e.touches[0].clientY},n={x:e.touches[1].clientX,y:e.touches[1].clientY},c=r(t,n)/a.current*h.current,u=s(t,n),o=u.x-(i.current?.x??0),v=u.y-(i.current?.y??0);l({scale:c,x:o,y:v})}},[]),y=c(()=>{a.current=0,i.current=null},[]);t(()=>{const e=u.current;if(e)return e.addEventListener("touchstart",v,{passive:!1}),e.addEventListener("touchmove",x,{passive:!1}),e.addEventListener("touchend",y),e.addEventListener("touchcancel",y),()=>{e.removeEventListener("touchstart",v),e.removeEventListener("touchmove",x),e.removeEventListener("touchend",y),e.removeEventListener("touchcancel",y)}},[v,x,y]);const d={transform:`translate(${o.x}px, ${o.y}px) scale(${o.scale})`};return[u,d]}

package/react/PointerClick.d.ts

@@ -0,0 +1 @@
+export {};

package/react/PointerClick.js

@@ -0,0 +1 @@
+import{useRef as r,useCallback as m}from"react";

package/react/ReactTimeSlider.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { TimeSlider, TimeSliderOptions } from '../engine/TimeSlider';
+import { TimeSliderEngine } from '../engine/TimeSliderEngine';
+import { TimeSliderLayer } from '../layer/TimeSliderLayer';
+import { TimeSliderLayerLoader } from '../layer/TimeSliderLayerLoader';
+export type CurrentSliderProps = {
+    railWidth?: number;
+    hoverWidth?: number;
+    handleColor?: string;
+    progressColor?: string;
+    railColor?: string;
+    hoverColor?: string;
+    availableColor?: string;
+};
+export type ReactTimeSliderProps = TimeSliderOptions & {
+    showStats?: boolean;
+    timeRange?: [startTime: number, endTime: number];
+    onTimeRange?: (newRange: [startTime: number, endTime: number]) => void;
+    engine: TimeSliderEngine<any>;
+    layers: TimeSliderLayer[];
+    loaders?: TimeSliderLayerLoader<any>[];
+    verticalGap?: number;
+    noPlayButton?: boolean;
+    selectRangeButton?: boolean;
+    noTimeLabels?: boolean;
+    noRangeLabel?: boolean;
+    noDateLabels?: boolean;
+    canHideLabels?: boolean;
+    theme?: 'dark' | 'light';
+    currentSlider?: CurrentSliderProps;
+};
+export type ReactTimeSliderRef = {
+    timeSlider: TimeSlider;
+};
+export declare const ReactTimeSlider: React.ForwardRefExoticComponent<TimeSliderOptions & {
+    showStats?: boolean;
+    timeRange?: [startTime: number, endTime: number];
+    onTimeRange?: (newRange: [startTime: number, endTime: number]) => void;
+    engine: TimeSliderEngine<any>;
+    layers: TimeSliderLayer[];
+    loaders?: TimeSliderLayerLoader<any>[];
+    verticalGap?: number;
+    noPlayButton?: boolean;
+    selectRangeButton?: boolean;
+    noTimeLabels?: boolean;
+    noRangeLabel?: boolean;
+    noDateLabels?: boolean;
+    canHideLabels?: boolean;
+    theme?: "dark" | "light";
+    currentSlider?: CurrentSliderProps;
+} & React.RefAttributes<ReactTimeSliderRef>>;
+export declare function useMaterialIcons(style?: 'outlined' | 'sharp' | 'rounded' | 'two-tone' | 'filled'): void;

package/react/ReactTimeSlider.js

@@ -0,0 +1 @@
+import e,{forwardRef as t,useCallback as n,useEffect as r,useImperativeHandle as i,useLayoutEffect as a,useMemo as o,useRef as l,useState as s}from"react";import{Disposables as c}from"../common/Disposables";import{formatDuration as m}from"../common/TimeTools";import{TimeSlider as d}from"../engine/TimeSlider";import{ONE_YEAR as p}from"../ticks/TimeSliderConstants";import{ColoredSlider as u}from"./ColoredSlider";import{DateLabelWithPicker as h}from"./DateLabelWithPicker";import{DateRangeLabelWithPicker as g}from"./DateRangeLabelWithPicker";import{MaterialIconButton as f}from"./MaterialIconButton";import{MaterialTextButton as x}from"./MaterialTextButton";import{TimeLabelWithPicker as w}from"./TimeLabelWithPicker";const y={padding:"4px 8px",background:"#0008",borderRadius:"4px",color:"#fff",fontFamily:"monospace",fontSize:"12px"},v=[Date.now()-p,Date.now()];function E(e,t){return e[0]===t[0]&&e[1]===t[1]}function b(e){return JSON.stringify(e)}export const ReactTimeSlider=t(({timeRange:t,onTimeRange:n,selectRangeButton:a,noPlayButton:p,noTimeLabels:C,noRangeLabel:k,noDateLabels:R,theme:L,canHideLabels:S,verticalGap:N,engine:I,layers:_,loaders:D,showStats:z,currentSlider:M,...B},P)=>{const W=o(()=>new d(B),[]);r(()=>{B?.showCurrent&&(W.showCurrent=B?.showCurrent)},[B.showCurrent]),r(()=>{B?.showTicks&&(W.showTicks=B?.showTicks)},[B.showTicks]),r(()=>{B?.playSpeed&&(W.playSpeed=B?.playSpeed)},[B.playSpeed]),r(()=>{B?.liveRange&&(W.liveRange=B?.liveRange)},[B.liveRange]);const F=N||4,G=22+F+8+"px",H=22+F+22+F+8+"px",O=l(null),X=l(null),A=l(null),[J,U]=s(!1),[V,Y]=s(!1),[$,j]=s(!1),[q,K]=s(!1),[Q,Z]=s(!1),[ee,te]=s(Date.now()),ne=l(null);useMaterialIcons();const[re,ie]=s(t||v),ae=l(t||v),oe=void 0!==t,le=l(new Set),[se,ce]=s(!1);r(()=>{if(oe){const e=b(t);if(J&&!E(t,ae.current)&&!le.current.has(e)){ae.current=t;const[e,n]=t;W.setTimeRange({startTime:e,endTime:n})}le.current.delete(e)}},[J,t,oe]),r(()=>{const e=new c;return e.add(W.on("time",e=>{const{startTime:t,endTime:r}=e,i=[t,r];E(i,ae.current)||(ae.current=i,le.current.add(b(i)),ie(i),n?.(i))})),e.disposeLater()},[W]),r(()=>{U(!1);const e=new c;return W.init(X.current).then(()=>U(!0)),e.add(W.on("time",e=>{if(e.startTime!==ae.current[0]||e.endTime!==ae.current[1]){const{startTime:t,endTime:r}=e,i=[t,r];ae.current=i,ie(i),n?.(i)}})),e.add(W.on("playing",Y)),e.add(W.on("live",j)),e.add(W.on("current",te)),e.disposeLater()},[W]),r(()=>{D?.forEach(e=>W.addLayerLoader(e))},[D]),r(()=>{"boolean"==typeof B.showCurrent&&(W.showCurrent=B.showCurrent)},[B.showCurrent]),i(P,()=>({get timeSlider(){return W}})),r(()=>{if(B.showCurrent){const e=setInterval(()=>{A.current&&(A.current.available=Date.now())},10);return()=>clearInterval(e)}},[B.showCurrent]),r(()=>{J&&W.showStats(!0===z)},[J,z]),r(()=>{},[J]),r(()=>{J&&W.setEngine(I)},[J,I]),r(()=>{if(J){const e=new Set,t=new Set;W.getLayers().forEach(e=>t.add(e.id)),_.forEach(n=>{t.delete(n.id),e.add(n.id)}),W.getLayers().forEach(t=>e.delete(t.id));const n=_.filter(t=>e.has(t.id)),r=W.getLayers().filter(e=>t.has(e.id));r.length===W.getLayers().length&&n.length>0&&W.setTimeRange(n[0].model.getTimeRange()),r.forEach(e=>W.removeLayer(e)),n.forEach(e=>W.addLayer(e))}},[J,_]);r(()=>{const e=e=>{ne.current&&e.target&&e.target.parentElement?.getAttribute("layerpanelbutton")!==W.id&&!ne.current.contains(e.target)&&Z(!1)};if(Q)return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[Q]);const me=e=>{const t=W.current,{duration:n,startTime:r}=W.getTimeRange(),i=(t-r)/n;i>1||i<0?W.setTimeRange({startTime:e-.5*n,endTime:e+.5*n}):W.setTimeRange({startTime:e-i*n,endTime:e+(1-i)*n}),W.setCurrent(e)};r(()=>{const e=()=>{if(O.current){let e=560;B.showCurrent&&(e+=160),p&&(e-=30),k&&(e-=160),C&&(e-=140),R&&(e-=185);const t=O.current.getBoundingClientRect().width;K(t<e)}};e();const t=new ResizeObserver(e);return O.current&&t.observe(O.current),window.addEventListener("resize",e),()=>{t.disconnect(),window.removeEventListener("resize",e)}},[B.showCurrent,p,k,C,R]);let de=42;B.showCurrent&&(de+=4),q&&!S&&(de+=26);const pe="dark"===L;return r(()=>{L&&W.setTheme(L)},[L]),e.createElement("div",{ref:O,style:{display:"block",position:"relative",borderRadius:"inherit",background:pe?"#222":"#ddd",width:"100%",height:"100%",padding:"8px",boxSizing:"border-box"}},Q&&e.createElement("div",{ref:ne,style:{position:"absolute",top:G,left:"8px",maxWidth:"200px",display:"flex",gap:"8px",alignItems:"center",paddingRight:"8px",paddingBottom:"8px",paddingTop:"8px",flexDirection:"column",zIndex:1e3,background:pe?"#222":"#ddd"}},W.getLayers().map(t=>e.createElement(T,{key:t.id,layer:t,timeSlider:W,isDarkMode:pe}))),e.createElement("div",{style:{position:"absolute",top:"8px",left:"8px",display:"flex",gap:"8px",alignItems:"center"}},e.createElement(f,{layerpanelbutton:W.id,iconName:"layers",onClick:e=>Z(e=>!e)}),e.createElement(f,{iconName:"skip_previous",onClick:()=>W.up({animate:1e3}),rotate:90}),!q&&!k&&e.createElement("span",{style:{...y}},m(re)),e.createElement(f,{iconName:"arrow_range",onClick:()=>W.fit({animate:3e3})}),a&&e.createElement(f,{iconName:"ink_selection",active:se,onClick:()=>{ce(!0),W.startSelectingRange(()=>ce(!1))}})),q&&!S&&B.showCurrent&&!k&&e.createElement("div",{style:{position:"absolute",top:G,left:"8px",display:"flex",gap:"8px",height:"22px"}},e.createElement("span",{style:{...y}},m(re))),q&&!S&&!B.showCurrent&&!k&&e.createElement("div",{style:{position:"absolute",top:"8px",left:"50%",transform:"translateX(-50%)",display:"flex",gap:"8px",height:"22px"}},e.createElement("span",{style:{...y}},m(re))),(!q||!S)&&e.createElement("div",{style:{position:"absolute",top:q?G:"8px",right:q?"8px":"50%",transform:q?void 0:"translateX(50%)",padding:0,display:"flex",gap:"8px",height:"22px",width:!q||B.showCurrent?void 0:"calc(100% - 16px)"}},!B.showCurrent&&(!C||!C)&&e.createElement(e.Fragment,null,!C&&e.createElement(w,{theme:L,time:re[0],setTime:e=>W.setTimeRange({startTime:e})}),q&&!C&&!R&&!B.showCurrent&&e.createElement("div",{style:{flexGrow:1}}),!R&&e.createElement(g,{theme:L,range:[re[0],re[1]],setRange:e=>W.setTimeRange({startTime:e[0],endTime:e[1]})}),q&&!C&&!R&&!B.showCurrent&&e.createElement("div",{style:{flexGrow:1}}),!C&&e.createElement(w,{theme:L,time:re[1]-1,setTime:e=>W.setTimeRange({endTime:e+1})})),B.showCurrent&&e.createElement(e.Fragment,null,!R&&e.createElement(h,{theme:L,time:ee,setTime:me}),!C&&e.createElement(w,{theme:L,time:ee,setTime:me}))),e.createElement("div",{style:{position:"absolute",top:"8px",right:"8px",display:"flex",gap:"8px",alignItems:"center"}},B.showCurrent&&e.createElement(e.Fragment,null,e.createElement(x,{text:"Live",onClick:()=>{W.live?W.pause():W.setLive(!0)},color:$?"#fff":pe?"#888":"#bbb"},e.createElement("span",{className:"material-symbols-outlined",style:{fontSize:"18px",zIndex:1,lineHeight:1}},"radio_button_unchecked"),$&&e.createElement("span",{className:"material-symbols-outlined",style:{fontSize:"18px",lineHeight:1,marginLeft:"-24px",color:"red"}},"radio_button_checked"))),e.createElement(f,{iconName:"skip_previous",onClick:()=>W.previous({animate:1e3})}),!p&&!V&&e.createElement(f,{iconName:"play_arrow",onClick:()=>W.play()}),!p&&V&&e.createElement(f,{iconName:"pause",onClick:()=>W.pause()}),e.createElement(f,{iconName:"skip_next",onClick:()=>W.next({animate:1e3})})),B.showCurrent&&e.createElement(u,{ref:A,value:ee,min:re[0],max:re[1],onValue:e=>{W.pause(),W.setCurrent(e)},onPointerMove:e=>W.updateHover({x:e.clientX,y:e.clientY}),onPointerLeave:()=>W.updateHover(null),matchWidth:!0,style:{width:"calc(100% - 16px)",left:"8px",position:"absolute",bottom:"26px",zIndex:1},...M}),e.createElement("div",{ref:X,style:{position:"absolute",top:q&&!S?H:G,left:"8px",borderRadius:"inherit",width:"calc(100% - 16px)",height:`calc(100% - ${de}px)`,background:pe?"#111":"#eee",overflow:"hidden"}}))});function T({layer:t,timeSlider:n,isDarkMode:i}){const[a,o]=s(t.visible);return r(()=>{t.on("visible",e=>o(e))},[]),e.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center",background:i?"#222":"#ddd",borderRadius:"4px",width:"100%"}},a&&e.createElement(f,{iconName:"visibility",onClick:()=>t.visible=!1}),!a&&e.createElement(f,{iconName:"visibility_off",color:"#888",onClick:()=>t.visible=!0}),e.createElement("span",{style:{...y,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",flexGrow:1,minWidth:0}},t.name||t.constructor.name+"#"+t.id.slice(t.id.length-4).toUpperCase()),e.createElement(f,{iconName:"center_focus_weak",onClick:()=>n.fit({animate:3e3,range:t.model.getTimeRange()})}))}export function useMaterialIcons(e="outlined"){r(()=>{const e=document.createElement("link");return e.rel="stylesheet",e.href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200",document.head.appendChild(e),()=>{document.head.removeChild(e)}},[e])}

package/react/TimeLabelWithPicker.d.ts

@@ -0,0 +1,8 @@
+import React, { CSSProperties } from 'react';
+export declare const LABEL_WITH_PICKER_SPAN_STYLE: (theme: 'dark' | 'light') => CSSProperties;
+export declare const LABEL_WITH_PICKER_HOVER_STYLE: (theme: 'dark' | 'light') => CSSProperties;
+export declare function TimeLabelWithPicker({ time, setTime, theme, ...props }: {
+    time: number;
+    setTime: (newTime: number) => void;
+    theme?: 'dark' | 'light';
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>): JSX.Element;

package/react/TimeLabelWithPicker.js

@@ -0,0 +1 @@
+import e,{useEffect as t,useRef as o,useState as r}from"react";import{formatTime as n}from"../common/TimeTools";export const LABEL_WITH_PICKER_SPAN_STYLE=e=>({padding:"4px 8px",background:"#0008",borderRadius:"4px",color:"#fff",fontFamily:"monospace",fontSize:"12px",cursor:"pointer"});export const LABEL_WITH_PICKER_HOVER_STYLE=e=>({padding:"4px 8px",background:"#0008",borderRadius:"4px",color:"#fff",fontFamily:"monospace",fontSize:"12px",cursor:"pointer",background:"#df0",color:"#000",fontWeight:"bold"});export function TimeLabelWithPicker({time:i,setTime:c,theme:p,...a}){const s=o(i),u=o(null),[d,l]=r(!1);t(()=>{s.current=i},[i]),t(()=>{if(u.current){const e=()=>{const e=u.current.value,[t,o,r]=e.split(":").map(e=>parseInt(e)),n=new Date(s.current);n.setHours(t),n.setMinutes(o),n.setSeconds(r),c(n.getTime())};return u.current.addEventListener("input",e),()=>{u.current?.removeEventListener("input",e)}}},[]);return e.createElement("div",{...a,style:{position:"relative",...a.style}},e.createElement("span",{style:d?{padding:"4px 8px",background:"#0008",borderRadius:"4px",color:"#fff",fontFamily:"monospace",fontSize:"12px",cursor:"pointer",background:"#df0",color:"#000",fontWeight:"bold"}:{padding:"4px 8px",background:"#0008",borderRadius:"4px",color:"#fff",fontFamily:"monospace",fontSize:"12px",cursor:"pointer"},onClick:()=>{if(u.current){const e=new Date(s.current),t=e.getHours().toString().padStart(2,"0"),o=e.getMinutes().toString().padStart(2,"0"),r=e.getSeconds().toString().padStart(2,"0");u.current.value=t+":"+o+":"+r,u.current.showPicker()}},onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1)},n(i)),e.createElement("input",{ref:u,step:1,type:"time",style:{position:"absolute",left:"0px",visibility:"hidden",colorScheme:"dark"===p?"dark":"light"}}))}

package/react/YearScroller.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from "react";
+export type YearScrollerRef = {
+    value: number;
+    show: () => void;
+    hide: () => void;
+    onSelect: (callback: (year: number) => void) => void;
+};
+type Props = {
+    initialYear?: number;
+    style?: CSSProperties;
+};
+declare const YearScroller: React.ForwardRefExoticComponent<Props & React.RefAttributes<YearScrollerRef>>;
+export default YearScroller;

package/react/YearScroller.js

@@ -0,0 +1 @@
+import e,{forwardRef as t,useEffect as n,useImperativeHandle as o,useRef as r,useState as l}from"react";import{createPortal as c}from"react-dom";function i(e,t,n){const o=e-(t||50),r=e+(n||50);return Array.from({length:r-o+1},(e,t)=>o+t)}const s=(new Date).getFullYear(),d=t(({initialYear:t,style:d},a)=>{const u=r(null),p=r(null),[f,m]=l({top:0,left:0}),[g,y]=l(t||s),[h,x]=l(t||s),[v,b]=l(i(t||s)),[E,k]=l(!1),[w,C]=l(0),I=r(()=>{});o(a,()=>({get value(){return g},set value(e){y(e)},show:()=>{if(p.current){const e=p.current.getBoundingClientRect();m({top:e.top-60,left:e.left}),k(!0)}},hide:()=>k(!1),onSelect:e=>{I.current=e}})),n(()=>{const e=e=>{if(u.current){const{left:t,top:n,right:o,bottom:r}=u.current.getBoundingClientRect(),{clientX:l,clientY:c}=e;(l<t||l>o||c<n||c>r)&&k(!1)}};return document.body.addEventListener("pointerdown",e),()=>{document.body.removeEventListener("pointerdown",e)}},[]),n(()=>{const e=i(g);C(0),b(e)},[E,g]),n(()=>{if(E&&u.current){let e=0;w>0&&(e=-48),w<0&&(e=48),u.current.scrollTop=1152-w+e}},[E,g,v,w]);const T=document.getElementById("year-scroller-root")||(()=>{const e=document.createElement("div");return e.id="year-scroller-root",document.body.appendChild(e),e})();return e.createElement(e.Fragment,null,e.createElement("div",{ref:p,style:{display:"inline-block"}}),E&&c(e.createElement("div",{ref:u,onMouseLeave:()=>x(g),onScroll:()=>{const e=u.current;if(e)if(e.scrollTop<120){const t=i(v[0]);C(-e.scrollTop),b(t)}else if(e.scrollHeight-e.scrollTop-e.clientHeight<120){const t=i(v[v.length-1]);C(e.scrollHeight-e.scrollTop-e.clientHeight),b(t)}},style:{display:"flex",alignItems:"center",flexDirection:"column",zIndex:1e3,background:"#222",colorScheme:"dark",position:"fixed",top:f.top,left:f.left,width:"72px",height:"120px",overflowY:"auto",fontFamily:"sans-serif",borderRadius:"4px",justifyItems:"center",...d}},v.map(t=>e.createElement("div",{style:{alignItems:"center",background:"#222",padding:"2px 4px",width:"calc(100% - 8px)"},onMouseEnter:()=>x(t),onClick:()=>(e=>{y(e),x(e),I.current?.(e),k(!1)})(t)},e.createElement("span",{key:t,style:{padding:"4px 8px",borderRadius:"4px",fontFamily:"monospace",fontSize:"12px",height:"12px",display:"flex",alignItems:"center",justifyContent:"center",color:t===g||t===h?"#000":"#ddd",backgroundColor:t===h?"#df0":t===g?"#780":"#111",cursor:"pointer"}},t)))),T))});export default d;

package/style/TimeSliderColors.d.ts

@@ -0,0 +1,6 @@
+export declare const MAGNITUDE_COLORS: string[];
+export declare function getMagnitudeColors(): string[];
+export declare function getUltraFadedMagnitudeColors(): string[];
+export declare function getVeryFadedMagnitudeColors(): string[];
+export declare function getFadedMagnitudeColors(): string[];
+export declare function getMagnitudeColors2(): string[];

package/style/TimeSliderColors.js

@@ -0,0 +1 @@
+export const MAGNITUDE_COLORS=[...getMagnitudeColors(),...getUltraFadedMagnitudeColors()];export function getMagnitudeColors(){return["#a0f","#0af","#0ff","#0fa","#af0","#ff0","#fa0","#f00","#f0a","#f0f"]}export function getUltraFadedMagnitudeColors(){return["#edf","#def","#dff","#dfe","#efd","#ffd","#fed","#fdd","#fde","#fdf"]}export function getVeryFadedMagnitudeColors(){return["#dbf","#bdf","#bff","#bfd","#dfb","#ffb","#fdb","#fbb","#fbd","#fbf"]}export function getFadedMagnitudeColors(){return["#b7f","#7bf","#7ff","#7fb","#bf7","#ff7","#fb7","#f77","#f7b","#f7f"]}export function getMagnitudeColors2(){return["#00b","#00f","#04f","#07f","#0bf","#0ff","#4ff","#7ff","#bff","#fff"]}

package/style/TimeSliderHistogramStyle.d.ts

@@ -0,0 +1,3 @@
+import { TimeSliderHistogramOptions } from "../data/histogram/TimeSliderHistogram";
+import { TimeSliderIntervalsStyle } from "./TimeSliderIntervalsStyle";
+export type TimeSliderHistogramStyle = TimeSliderIntervalsStyle & TimeSliderHistogramOptions;

package/style/TimeSliderHistogramStyle.js

@@ -0,0 +1 @@
+export{};

package/style/TimeSliderIntervalsStyle.d.ts

@@ -0,0 +1,13 @@
+import { TimeSliderStyle } from "./TimeSliderStyle";
+export type TimeSliderIntervalsStyle = TimeSliderStyle & {
+    fill?: {
+        color?: string;
+        opacity?: number;
+    };
+    border?: {
+        centered?: boolean;
+        color?: string;
+        opacity?: number;
+        width?: number;
+    };
+};

package/style/TimeSliderIntervalsStyle.js

@@ -0,0 +1 @@
+export{};

package/style/TimeSliderLabeler.d.ts

@@ -0,0 +1,2 @@
+import { TimeSliderElement } from "../data/TimeSliderElement";
+export type TimeSliderLabeler<E extends TimeSliderElement = TimeSliderElement> = (element: E, t: number, v: number) => string | undefined | null | HTMLDivElement;

package/style/TimeSliderLabeler.js

@@ -0,0 +1 @@
+export{};