@panyam/tsutils 0.0.64 → 0.0.66

package/lib/esm/scrolling.js

@@ -0,0 +1,190 @@
+import { Timer } from "./timer";
+export class HTMLElementScrollable {
+    constructor(element, vertical = true) {
+        this._scrollGroup = null;
+        this.vertical = true;
+        this.onScrollEventListener = this.onScrollEvent.bind(this);
+        this.onMouseEventListener = this.onMouseEvent.bind(this);
+        this.onTouchEventListener = this.onTouchEvent.bind(this);
+        this.element = element;
+        this.vertical = vertical;
+    }
+    attach(scrollGroup) {
+        if (this.element.scrollGroup == scrollGroup) {
+            return;
+        }
+        else if (this.element.scrollGroup) {
+            throw new Error("Detach element from ScrollGroup first.");
+        }
+        this.element.scrollGroup = scrollGroup;
+        this._scrollGroup = scrollGroup;
+        this.element.addEventListener("scroll", this.onScrollEventListener);
+        this.element.addEventListener("mousedown", this.onMouseEventListener);
+        this.element.addEventListener("mouseenter", this.onMouseEventListener);
+        this.element.addEventListener("mouseleave", this.onMouseEventListener);
+        this.element.addEventListener("touchstart", this.onTouchEventListener);
+    }
+    detach() {
+        this.element.scrollGroup = null;
+        this.element.removeEventListener("scroll", this.onScrollEventListener);
+        this.element.removeEventListener("mousedown", this.onMouseEventListener);
+        this.element.removeEventListener("mouseenter", this.onMouseEventListener);
+        this.element.removeEventListener("mouseleave", this.onMouseEventListener);
+        this.element.removeEventListener("touchstart", this.onTouchEventListener);
+    }
+    get scrollGroup() {
+        return this._scrollGroup;
+    }
+    get scrollOffset() {
+        if (this.vertical) {
+            return this.element.scrollTop;
+        }
+        else {
+            return this.element.scrollLeft;
+        }
+    }
+    set scrollOffset(value) {
+        if (this.vertical) {
+            this.element.scrollTop = value;
+        }
+        else {
+            this.element.scrollLeft = value;
+        }
+    }
+    get scrollSize() {
+        if (this.vertical) {
+            return this.element.scrollHeight;
+        }
+        else {
+            return this.element.scrollWidth;
+        }
+    }
+    get pageSize() {
+        if (this.vertical) {
+            return this.element.clientHeight;
+        }
+        else {
+            return this.element.clientWidth;
+        }
+    }
+    onScrollEvent(event) {
+        var _a;
+        (_a = this.scrollGroup) === null || _a === void 0 ? void 0 : _a.onScroll(this, event.timeStamp);
+    }
+    onTouchEvent(event) {
+        if (event.type == "touchstart" && this.scrollGroup) {
+            this.scrollGroup.focussedScrollable = this;
+        }
+    }
+    onMouseEvent(event) {
+        const element = event.target;
+        if (this.scrollGroup) {
+            if (event.type == "mouseenter") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+            else if (event.type == "mouseleave") {
+                this.scrollGroup.focussedScrollable = null;
+            }
+            else if (event.type == "mousedown") {
+                this.scrollGroup.focussedScrollable = this;
+            }
+        }
+    }
+}
+export class ScrollGroup {
+    constructor(debugLogs = false) {
+        this.debugLogs = debugLogs;
+        this.scrollables = [];
+        this._focussedScrollable = null;
+        this.leadScrollable = null;
+        this.lastScrolledAt = -1;
+        this.lastScrollOffset = 0;
+        this.idleThreshold = 300;
+        this.offsetDeltaThreshold = 5;
+        this.eventDeltaThreshold = 50;
+        this.scrollTimer = new Timer(500, this.onTimer.bind(this));
+    }
+    add(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index >= 0)
+            return;
+        scrollable.attach(this);
+        this.scrollables.push(scrollable);
+    }
+    remove(scrollable) {
+        const index = this.scrollables.indexOf(scrollable);
+        if (index < 0)
+            return;
+        this.detachAtIndex(index);
+    }
+    clear() {
+        for (let i = this.scrollables.length - 1; i >= 0; i--) {
+            this.detachAtIndex(i);
+        }
+    }
+    detachAtIndex(index) {
+        const scrollable = this.scrollables[index];
+        scrollable.detach();
+        this.scrollables.splice(index, 1);
+        return scrollable;
+    }
+    syncFollowersToLeader() {
+        const scrollable = this.leadScrollable;
+        if (scrollable != null) {
+            this.lastScrollOffset = scrollable.scrollOffset;
+            const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);
+            for (let i = this.scrollables.length - 1; i >= 0; i--) {
+                const other = this.scrollables[i];
+                const remOther = Math.max(1, other.scrollSize - other.pageSize);
+                if (other != scrollable) {
+                    other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;
+                }
+            }
+        }
+    }
+    set focussedScrollable(scrollable) {
+        this._focussedScrollable = scrollable;
+    }
+    onScroll(scrollable, timestamp) {
+        if (this.leadScrollable == null) {
+            this.setLeadScrollable(scrollable);
+        }
+        const leader = this.leadScrollable;
+        if (leader != null) {
+            const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);
+            const timeDelta = Math.abs(timestamp - this.lastScrolledAt);
+            if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {
+                this.lastScrolledAt = timestamp;
+                this.syncFollowersToLeader();
+            }
+        }
+    }
+    setLeadScrollable(scrollable) {
+        if (this.leadScrollable == null) {
+            this.leadScrollable = scrollable;
+            if (this.debugLogs)
+                console.log("Scrolling started with: ", scrollable);
+            this.scrollTimer.start();
+        }
+        else {
+            throw new Error("This should now happen");
+        }
+        return this.leadScrollable;
+    }
+    onTimer(ts) {
+        if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {
+            const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);
+            if (offsetDelta == 0) {
+                this.scrollingFinished(ts);
+            }
+        }
+    }
+    scrollingFinished(ts) {
+        if (this.debugLogs)
+            console.log("Scrolling Finished at: ", ts);
+        this.syncFollowersToLeader();
+        this.leadScrollable = null;
+        this.scrollTimer.stop();
+    }
+}
+//# sourceMappingURL=scrolling.js.map

package/lib/esm/scrolling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolling.js","sourceRoot":"","sources":["../../src/scrolling.ts"],"names":[],"mappings":"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","sourcesContent":["import { Timer } from \"./timer\";\n\n/**\n * A scroll group allows one to \"connect\" multiple elements to be\n * scrolled synchronously.\n *\n * A typical usecase would be a div showing lines for a code editor\n * and one that shows a line numbers for a code editor.\n *\n * We could also have recursive relationships where elements in\n * a scroll group are connected to other items outside the scroll\n * group and the would form a super scroll group.  An example would\n * two UI components A and B that\n * a scroll group is synchronized\n */\n\ntype EventHandler = (evt: any) => void;\nexport interface Scrollable {\n  // Set or get the current scroll offset\n  scrollOffset: number;\n\n  // Get total scroll size\n  readonly scrollSize: number;\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  readonly pageSize: number;\n\n  // Detaches a scrollable from further use\n  attach(scrollGroup: ScrollGroup): void;\n  detach(): void;\n}\n\n/**\n * A wrapper for html elements that can be scrolled.\n */\nexport class HTMLElementScrollable implements Scrollable {\n  private _scrollGroup: ScrollGroup | null = null;\n  readonly element: HTMLElement;\n  private vertical = true;\n  private onScrollEventListener = this.onScrollEvent.bind(this) as EventListener;\n  private onMouseEventListener = this.onMouseEvent.bind(this) as EventListener;\n  private onTouchEventListener = this.onTouchEvent.bind(this) as EventListener;\n\n  constructor(element: HTMLElement, vertical = true) {\n    this.element = element;\n    this.vertical = vertical;\n  }\n\n  attach(scrollGroup: ScrollGroup): void {\n    if ((this.element as any).scrollGroup == scrollGroup) {\n      return;\n    } else if ((this.element as any).scrollGroup) {\n      throw new Error(\"Detach element from ScrollGroup first.\");\n    }\n    (this.element as any).scrollGroup = scrollGroup;\n    this._scrollGroup = scrollGroup;\n    this.element.addEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.addEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.addEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.addEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  detach(): void {\n    (this.element as any).scrollGroup = null;\n    this.element.removeEventListener(\"scroll\", this.onScrollEventListener);\n    this.element.removeEventListener(\"mousedown\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseenter\", this.onMouseEventListener);\n    this.element.removeEventListener(\"mouseleave\", this.onMouseEventListener);\n    this.element.removeEventListener(\"touchstart\", this.onTouchEventListener);\n  }\n\n  get scrollGroup(): ScrollGroup | null {\n    return this._scrollGroup;\n  }\n\n  // Set or get the current scroll offset\n  get scrollOffset(): number {\n    if (this.vertical) {\n      return this.element.scrollTop;\n    } else {\n      return this.element.scrollLeft;\n    }\n  }\n\n  set scrollOffset(value: number) {\n    if (this.vertical) {\n      this.element.scrollTop = value;\n    } else {\n      this.element.scrollLeft = value;\n    }\n  }\n\n  // Get total scroll size\n  get scrollSize(): number {\n    if (this.vertical) {\n      return this.element.scrollHeight;\n    } else {\n      return this.element.scrollWidth;\n    }\n  }\n\n  // Size of the current \"page\".\n  // Our scrollOffset + pageSize is always < scrollSize\n  get pageSize(): number {\n    if (this.vertical) {\n      return this.element.clientHeight;\n    } else {\n      return this.element.clientWidth;\n    }\n  }\n\n  onScrollEvent(event: Event): void {\n    /**\n     * Scroll events will be sent for all elements that are scrolling\n     * either programatically or invoked via gestures.\n     * It is not possible to know which of these it is and the problem\n     * with this is that by handling all events it could result in an\n     * infinite loop kicking each other off.\n     *\n     * So we need a way to be able differentiate scroll events between\n     * those that were the \"source\" and those that are \"followers\".\n     * We can try a few strategies here:\n     *\n     * 1. Take the first scroll event's target as the source\n     * and kick off a timer to check when scroll events stop.  As long\n     * as scroll events come from this source we update followers.\n     */\n    this.scrollGroup?.onScroll(this, event.timeStamp);\n  }\n\n  onTouchEvent(event: TouchEvent): void {\n    // console.log(`Touched Eeent(${event.type}): `, event);\n    if (event.type == \"touchstart\" && this.scrollGroup) {\n      this.scrollGroup.focussedScrollable = this;\n      // this.setLeadScrollable(this.focussedElement);\n    }\n  }\n\n  onMouseEvent(event: MouseEvent): void {\n    // console.log(`Mouse Event(${event.type}): `, event);\n    const element = event.target;\n    if (this.scrollGroup) {\n      if (event.type == \"mouseenter\") {\n        this.scrollGroup.focussedScrollable = this;\n      } else if (event.type == \"mouseleave\") {\n        this.scrollGroup.focussedScrollable = null;\n      } else if (event.type == \"mousedown\") {\n        this.scrollGroup.focussedScrollable = this;\n        // this.setLeadScrollable(this.focussedElement);\n      }\n    }\n  }\n}\n\nexport class ScrollGroup {\n  private scrollables: Scrollable[] = [];\n  private _focussedScrollable: Scrollable | null = null;\n  private leadScrollable: Scrollable | null = null;\n  private lastScrolledAt = -1;\n  private lastScrollOffset = 0;\n  private scrollTimer: Timer;\n\n  // If there has been no change in scroll offset within this\n  // time then we can assume scrolling has completed and this\n  // can be used to infer that scrolling has finished.\n  private idleThreshold = 300;\n\n  // Apply sync to followers if we have a scroll distance of atleast\n  // this much or time between last even has crossed the\n  // `eventDeltaThreshold`.\n  private offsetDeltaThreshold = 5;\n  private eventDeltaThreshold = 50;\n\n  constructor(public debugLogs = false) {\n    this.scrollTimer = new Timer(500, this.onTimer.bind(this));\n  }\n\n  add(scrollable: Scrollable): void {\n    // skip if already exists\n    const index = this.scrollables.indexOf(scrollable);\n    if (index >= 0) return;\n    scrollable.attach(this);\n    this.scrollables.push(scrollable);\n  }\n\n  remove(scrollable: Scrollable): void {\n    const index = this.scrollables.indexOf(scrollable);\n    if (index < 0) return;\n    this.detachAtIndex(index);\n  }\n\n  clear(): void {\n    for (let i = this.scrollables.length - 1; i >= 0; i--) {\n      this.detachAtIndex(i);\n    }\n  }\n\n  detachAtIndex(index: number): Scrollable {\n    const scrollable = this.scrollables[index];\n    scrollable.detach();\n    this.scrollables.splice(index, 1);\n    return scrollable;\n  }\n\n  syncFollowersToLeader(): void {\n    const scrollable = this.leadScrollable;\n    if (scrollable != null) {\n      this.lastScrollOffset = scrollable.scrollOffset;\n      // console.log(\"Scrolled: \", scrollable.scrollOffset, event);\n\n      // set the scroll position of all others\n      // TODO - should this happen in this handler itself?\n      const remScroll = Math.max(1, scrollable.scrollSize - scrollable.pageSize);\n      for (let i = this.scrollables.length - 1; i >= 0; i--) {\n        const other = this.scrollables[i];\n        const remOther = Math.max(1, other.scrollSize - other.pageSize);\n        /*\n        console.log(\"Scrollable: \", i, other);\n        console.log(\n          \"scrollOffset, scrollSize, pageSize: \",\n          other.scrollOffset,\n          other.scrollSize,\n          other.pageSize,\n          remOther,\n        );\n        */\n        if (other != scrollable) {\n          other.scrollOffset = (scrollable.scrollOffset * remOther) / remScroll;\n        }\n      }\n    }\n  }\n\n  set focussedScrollable(scrollable: Scrollable | null) {\n    this._focussedScrollable = scrollable;\n  }\n\n  onScroll(scrollable: Scrollable, timestamp: number): void {\n    if (this.leadScrollable == null) {\n      this.setLeadScrollable(scrollable);\n    }\n    const leader = this.leadScrollable;\n    if (leader != null) {\n      // update followers\n      const offsetDelta = Math.abs(leader.scrollOffset - this.lastScrollOffset);\n      const timeDelta = Math.abs(timestamp - this.lastScrolledAt);\n      if (offsetDelta > this.offsetDeltaThreshold || timeDelta > this.eventDeltaThreshold) {\n        this.lastScrolledAt = timestamp;\n        this.syncFollowersToLeader();\n      }\n    }\n  }\n\n  /**\n   * Sets the active scrollable to the focussed element.\n   */\n  public setLeadScrollable(scrollable: Scrollable): Scrollable | null {\n    if (this.leadScrollable == null) {\n      // scrolling has not begun yet so set it as the \"root\" scroller\n      this.leadScrollable = scrollable;\n      if (this.debugLogs) console.log(\"Scrolling started with: \", scrollable);\n      this.scrollTimer.start();\n    } else {\n      // What if there was an already active scrollable?\n      // This can happen if:\n      throw new Error(\"This should now happen\");\n    }\n    return this.leadScrollable;\n  }\n\n  onTimer(ts: number): void {\n    // Called with our timer\n    if (this.leadScrollable != null && ts - this.lastScrolledAt > this.idleThreshold) {\n      const offsetDelta = Math.abs(this.leadScrollable.scrollOffset - this.lastScrollOffset);\n      if (offsetDelta == 0) {\n        // No change in delta within a time window\n        this.scrollingFinished(ts);\n      }\n    }\n  }\n\n  protected scrollingFinished(ts: number): void {\n    if (this.debugLogs) console.log(\"Scrolling Finished at: \", ts);\n    // TODO - See if this can have a jerking effect\n    this.syncFollowersToLeader();\n    this.leadScrollable = null;\n    this.scrollTimer.stop();\n  }\n}\n"]}

package/lib/esm/timer.d.ts

@@ -0,0 +1,12 @@
+declare type StepFunc = (ts: number) => void;
+export declare class Timer {
+    private refreshInterval;
+    private lastRefreshAt;
+    private updateLoop;
+    stepFunc: StepFunc;
+    constructor(refreshInterval: number, stepFunc: StepFunc);
+    stop(): void;
+    start(): void;
+    protected kickOffUpdate(): void;
+}
+export {};

package/lib/esm/timer.js

@@ -0,0 +1,41 @@
+export class Timer {
+    constructor(refreshInterval, stepFunc) {
+        this.refreshInterval = 1000;
+        this.lastRefreshAt = 0;
+        this.updateLoop = null;
+        this.refreshInterval = refreshInterval;
+        this.stepFunc = stepFunc;
+    }
+    stop() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+            this.updateLoop = null;
+        }
+    }
+    start() {
+        this.kickOffUpdate();
+    }
+    kickOffUpdate() {
+        if (this.updateLoop != null) {
+            cancelAnimationFrame(this.updateLoop);
+        }
+        this.updateLoop = requestAnimationFrame((timestamp) => {
+            if (this.updateLoop != null) {
+                if (timestamp - this.lastRefreshAt >= this.refreshInterval) {
+                    try {
+                        this.stepFunc(timestamp);
+                    }
+                    catch (err) {
+                        console.log("Error from Timer Handler: ", err);
+                        alert("Error from Timer Handler: " + err.message);
+                        return;
+                    }
+                    this.lastRefreshAt = timestamp;
+                }
+                this.updateLoop = null;
+                this.kickOffUpdate();
+            }
+        });
+    }
+}
+//# sourceMappingURL=timer.js.map

package/lib/esm/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/timer.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,KAAK;IAMhB,YAAY,eAAuB,EAAE,QAAkB;QAL/C,oBAAe,GAAG,IAAI,CAAC;QACvB,kBAAa,GAAG,CAAC,CAAC;QAClB,eAAU,GAAkB,IAAI,CAAC;QAIvC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAES,aAAa;QACrB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACvC;QACD,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,CAAC,SAAS,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;gBAC3B,IAAI,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,eAAe,EAAE;oBAC1D,IAAI;wBACF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;qBAC1B;oBAAC,OAAO,GAAQ,EAAE;wBACjB,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAAC;wBAC/C,KAAK,CAAC,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;wBAClD,OAAO;qBACR;oBACD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;iBAChC;gBACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["type StepFunc = (ts: number) => void;\n\nexport class Timer {\n  private refreshInterval = 1000;\n  private lastRefreshAt = 0;\n  private updateLoop: number | null = null;\n  stepFunc: StepFunc;\n\n  constructor(refreshInterval: number, stepFunc: StepFunc) {\n    this.refreshInterval = refreshInterval;\n    this.stepFunc = stepFunc;\n  }\n\n  stop(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n      this.updateLoop = null;\n    }\n  }\n\n  start(): void {\n    this.kickOffUpdate();\n  }\n\n  protected kickOffUpdate(): void {\n    if (this.updateLoop != null) {\n      cancelAnimationFrame(this.updateLoop);\n    }\n    this.updateLoop = requestAnimationFrame((timestamp) => {\n      if (this.updateLoop != null) {\n        if (timestamp - this.lastRefreshAt >= this.refreshInterval) {\n          try {\n            this.stepFunc(timestamp);\n          } catch (err: any) {\n            console.log(\"Error from Timer Handler: \", err);\n            alert(\"Error from Timer Handler: \" + err.message);\n            return;\n          }\n          this.lastRefreshAt = timestamp;\n        }\n        this.updateLoop = null;\n        this.kickOffUpdate();\n      }\n    });\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panyam/tsutils",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "author": "Sriram Panyam",
   "description": "Some basic TS utils for personal use",
   "homepage": "https://github.com/panyam/tsutils#readme",

package/lib/cjs/properties.d.ts

@@ -1,54 +0,0 @@
-import { Nullable } from "./types";
-export declare class PropertySchema {
-    name: string;
-    units: string;
-    defaultValue: any;
-    minValue: Nullable<number>;
-    maxValue: Nullable<number>;
-    beforeSetterName: Nullable<string>;
-    constructor(name: string, config: any);
-    validate(newValue: number): boolean;
-}
-export declare class Property {
-    readonly schema: PropertySchema;
-    currentValue: any;
-    beforeSetterFunc: any;
-    constructor(schema: PropertySchema);
-    clone(): Property;
-    get value(): any;
-    setValue(instance: any, value: any): boolean;
-}
-export declare class PropertyStore {
-    readonly __properties__: {
-        [key: string]: Property;
-    };
-    private eventBus;
-    getPropertyNames(): string[];
-    getProperty(name: string): Nullable<Property>;
-    setProperty(name: string, value: any): void;
-}
-export declare const mixinPropertyStore: (target: any) => {
-    new (): {
-        [x: string]: any;
-        readonly __properties__: {
-            [key: string]: Property;
-        };
-        getProperties(): {
-            [key: string]: Property;
-        };
-        getProperty(name: string): Property;
-        setProperty(name: string, value: any): void;
-    };
-    [x: string]: any;
-};
-interface PropertyParams<T> {
-    defaultValue?: Nullable<T>;
-    propertiesName?: string;
-    beforeSetterName?: Nullable<string>;
-    units?: string;
-    minValue?: Nullable<number>;
-    maxValue?: Nullable<number>;
-}
-export declare function property<T>({ propertiesName, defaultValue, beforeSetterName, units, minValue, maxValue, }?: PropertyParams<T>): (target: any, propertyKey: string) => void;
-export declare function propertyValidator<T>(propertyName: string, propertiesName?: string): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
-export {};

package/lib/cjs/properties.js

@@ -1,158 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.propertyValidator = exports.property = exports.mixinPropertyStore = exports.PropertyStore = exports.Property = exports.PropertySchema = void 0;
-const bus_1 = require("./comms/bus");
-const misc_1 = require("./misc");
-class PropertySchema {
-    constructor(name, config) {
-        this.units = "";
-        this.defaultValue = null;
-        this.minValue = null;
-        this.maxValue = null;
-        this.beforeSetterName = null;
-        this.name = name;
-        this.beforeSetterName = misc_1.ifDefined(config.beforeSetterName);
-        this.units = misc_1.ifDefined(config.units);
-        this.defaultValue = misc_1.ifDefined(config.defaultValue);
-        this.minValue = misc_1.ifDefined(config.minValue);
-        this.maxValue = misc_1.ifDefined(config.maxValue);
-    }
-    validate(newValue) {
-        if (this.minValue != null && newValue < this.minValue)
-            return false;
-        if (this.maxValue != null && newValue > this.maxValue)
-            return false;
-        return true;
-    }
-}
-exports.PropertySchema = PropertySchema;
-class Property {
-    constructor(schema) {
-        this.currentValue = null;
-        this.beforeSetterFunc = null;
-        this.schema = schema;
-    }
-    clone() {
-        const out = new Property(this.schema);
-        out.currentValue = this.currentValue;
-        return out;
-    }
-    get value() {
-        return this.currentValue;
-    }
-    setValue(instance, value) {
-        if (this.schema.beforeSetterName != null) {
-            if (this.beforeSetterFunc == null) {
-                const beforeSetterFunc = instance[this.schema.beforeSetterName];
-                if (beforeSetterFunc == null) {
-                    throw new Error("Cannot find beforeSetter function: " + this.schema.beforeSetterName);
-                }
-                this.beforeSetterFunc = beforeSetterFunc.bind(instance);
-            }
-            if (this.beforeSetterFunc(value) == false) {
-                return false;
-            }
-        }
-        if (!this.schema.validate(value)) {
-            return false;
-        }
-        this.currentValue = value;
-        return true;
-    }
-}
-exports.Property = Property;
-class PropertyStore {
-    constructor() {
-        this.__properties__ = {};
-        this.eventBus = bus_1.EventBus.getInstance();
-    }
-    getPropertyNames() {
-        return Object.keys(this.__properties__);
-    }
-    getProperty(name) {
-        this[name];
-        return this.__properties__[name] || null;
-    }
-    setProperty(name, value) {
-        if (this.__properties__[name]) {
-            const old = this.__properties__[name].value;
-            this.__properties__[name].setValue(this, value);
-            this.eventBus.emit("PropertyChange", {
-                name: name,
-                old: old,
-                current: value,
-            });
-        }
-    }
-}
-exports.PropertyStore = PropertyStore;
-const mixinPropertyStore = (target) => {
-    return class extends target {
-        constructor() {
-            super(...arguments);
-            this.__properties__ = {};
-        }
-        getProperties() {
-            return this.__properties__;
-        }
-        getProperty(name) {
-            return this.__properties__[name];
-        }
-        setProperty(name, value) {
-            if (this.__properties__[name]) {
-                this.__properties__[name].setValue(this, value);
-            }
-        }
-    };
-};
-exports.mixinPropertyStore = mixinPropertyStore;
-function ensureProperty(schema, instance, propertyKey, propertiesName = "__properties__") {
-    if (!instance[propertiesName]) {
-        throw new Error(`Property store (${propertiesName}) does not exist in target.`);
-    }
-    const propertiesMap = instance[propertiesName];
-    if (propertyKey in propertiesMap) {
-        return propertiesMap[propertyKey];
-    }
-    const property = (propertiesMap[propertyKey] = new Property(schema));
-    property.setValue(instance, schema.defaultValue);
-    return property;
-}
-function property({ propertiesName = "__properties__", defaultValue = null, beforeSetterName = null, units = "", minValue = null, maxValue = null, } = {}) {
-    return function (target, propertyKey) {
-        const root = target;
-        if (!(propertiesName in root)) {
-            root[propertiesName] = {};
-        }
-        const propertySchemas = root[propertiesName];
-        const newSchema = new PropertySchema(propertyKey, {
-            units: units,
-            beforeSetterName: beforeSetterName,
-            defaultValue: defaultValue,
-            minValue: minValue,
-            maxValue: maxValue,
-        });
-        if (propertyKey in propertySchemas) {
-        }
-        propertySchemas[propertyKey] = newSchema;
-        Object.defineProperty(target, propertyKey, {
-            get() {
-                const property = ensureProperty(newSchema, this, propertyKey, propertiesName);
-                return property.value;
-            },
-            set(newValue) {
-                const property = ensureProperty(newSchema, this, propertyKey, propertiesName);
-                property.setValue(this, newValue);
-            },
-            enumerable: true,
-            configurable: false,
-        });
-    };
-}
-exports.property = property;
-function propertyValidator(propertyName, propertiesName = "__properties__") {
-    return function (target, propertyKey, descriptor) {
-    };
-}
-exports.propertyValidator = propertyValidator;
-//# sourceMappingURL=properties.js.map

package/lib/cjs/properties.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"properties.js","sourceRoot":"","sources":["../../src/properties.ts"],"names":[],"mappings":"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","sourcesContent":["import { Nullable } from \"./types\";\nimport { EventBus } from \"./comms/bus\";\nimport { ifDefined } from \"./misc\";\n\nexport class PropertySchema {\n  // Name of the property\n  public name: string;\n  public units = \"\";\n  public defaultValue: any = null;\n  public minValue: Nullable<number> = null;\n  public maxValue: Nullable<number> = null;\n  public beforeSetterName: Nullable<string> = null;\n\n  constructor(name: string, config: any) {\n    this.name = name;\n    this.beforeSetterName = ifDefined(config.beforeSetterName);\n    this.units = ifDefined(config.units);\n    this.defaultValue = ifDefined(config.defaultValue);\n    this.minValue = ifDefined(config.minValue);\n    this.maxValue = ifDefined(config.maxValue);\n  }\n\n  validate(newValue: number): boolean {\n    if (this.minValue != null && newValue < this.minValue) return false;\n    if (this.maxValue != null && newValue > this.maxValue) return false;\n    // TODO - other validations\n    return true;\n  }\n}\n\n/**\n * Proprties are values required to fully resolve a component.\n * Like disk needs seek latency or capacity.\n */\nexport class Property {\n  // Value of the property\n  readonly schema: PropertySchema;\n  public currentValue: any = null;\n  public beforeSetterFunc: any = null;\n\n  constructor(schema: PropertySchema) {\n    this.schema = schema;\n  }\n\n  clone(): Property {\n    const out = new Property(this.schema);\n    out.currentValue = this.currentValue;\n    return out;\n  }\n\n  get value() {\n    return this.currentValue;\n  }\n\n  setValue(instance: any, value: any): boolean {\n    if (this.schema.beforeSetterName != null) {\n      if (this.beforeSetterFunc == null) {\n        const beforeSetterFunc = instance[this.schema.beforeSetterName];\n        if (beforeSetterFunc == null) {\n          throw new Error(\"Cannot find beforeSetter function: \" + this.schema.beforeSetterName);\n        }\n        this.beforeSetterFunc = beforeSetterFunc.bind(instance);\n      }\n      if (this.beforeSetterFunc(value) == false) {\n        // validation failed\n        return false;\n      }\n    }\n    if (!this.schema.validate(value)) {\n      return false;\n    }\n    this.currentValue = value;\n    return true;\n  }\n}\n\nexport class PropertyStore {\n  /**\n   * The properties for this Element\n   */\n  readonly __properties__: { [key: string]: Property } = {};\n\n  private eventBus = EventBus.getInstance();\n\n  getPropertyNames(): string[] {\n    // return Object.keys((this.constructor as any).__properties__);\n    return Object.keys(this.__properties__);\n  }\n\n  getProperty(name: string): Nullable<Property> {\n    (this as any)[name];\n    return this.__properties__[name] || null;\n  }\n\n  setProperty(name: string, value: any): void {\n    if (this.__properties__[name]) {\n      const old = this.__properties__[name].value;\n      this.__properties__[name].setValue(this, value);\n      // TODO: Maybe need a fully qualified name here.\n      this.eventBus.emit(\"PropertyChange\", {\n        name: name,\n        old: old,\n        current: value,\n      });\n    }\n  }\n}\n\nexport const mixinPropertyStore = (target: any) => {\n  return class extends target {\n    /**\n     * The properties for this Element\n     */\n    readonly __properties__: { [key: string]: Property } = {};\n\n    getProperties(): { [key: string]: Property } {\n      return this.__properties__;\n    }\n\n    getProperty(name: string): Property {\n      return this.__properties__[name];\n    }\n\n    setProperty(name: string, value: any): void {\n      if (this.__properties__[name]) {\n        this.__properties__[name].setValue(this, value);\n      }\n    }\n  };\n};\n\ninterface PropertyParams<T> {\n  defaultValue?: Nullable<T>;\n  propertiesName?: string;\n  beforeSetterName?: Nullable<string>;\n  units?: string;\n  minValue?: Nullable<number>;\n  maxValue?: Nullable<number>;\n}\n\nfunction ensureProperty<T>(\n  schema: PropertySchema,\n  instance: any,\n  propertyKey: string,\n  propertiesName = \"__properties__\",\n): Property {\n  if (!instance[propertiesName]) {\n    throw new Error(`Property store (${propertiesName}) does not exist in target.`);\n  }\n  const propertiesMap = instance[propertiesName];\n  if (propertyKey in propertiesMap) {\n    return propertiesMap[propertyKey];\n  }\n  const property = (propertiesMap[propertyKey] = new Property(schema));\n  property.setValue(instance, schema.defaultValue);\n  return property;\n}\n\n/**\n * property is a decorator factory.  It returns a decorator that can be applied to a property.\n * This decorator allows us to have some properties of an Element be treated specially (so it\n * can be reflected, configured/enumerated via UI).  This decorator in a way makes our Element\n * attributes metadata-able so we dont have to duplicate a property object and an attribute\n * manually.\n */\nexport function property<T>({\n  propertiesName = \"__properties__\",\n  defaultValue = null,\n  beforeSetterName = null,\n  units = \"\",\n  minValue = null,\n  maxValue = null,\n}: PropertyParams<T> = {}) {\n  return function (target: any, propertyKey: string) {\n    const root = target; // .constructor;\n    if (!(propertiesName in root)) {\n      root[propertiesName] = {};\n    }\n    const propertySchemas = root[propertiesName];\n    const newSchema = new PropertySchema(propertyKey, {\n      units: units,\n      beforeSetterName: beforeSetterName,\n      defaultValue: defaultValue,\n      minValue: minValue,\n      maxValue: maxValue,\n    });\n    if (propertyKey in propertySchemas) {\n      // throw new Error(\"Duplicate property: \" + propertyKey);\n    }\n    propertySchemas[propertyKey] = newSchema;\n\n    Object.defineProperty(target, propertyKey, {\n      get() {\n        const property = ensureProperty(newSchema, this, propertyKey, propertiesName);\n        return property.value;\n      },\n      set(newValue: any) {\n        const property = ensureProperty(newSchema, this, propertyKey, propertiesName);\n        property.setValue(this, newValue);\n      },\n      enumerable: true,\n      configurable: false,\n    });\n  };\n}\n\nexport function propertyValidator<T>(propertyName: string, propertiesName = \"__properties__\") {\n  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n    // const property = ensureProperty(this, propertyKey, null, propertiesName);\n    // property.setValue(\n  };\n}\n"]}

package/lib/esm/properties.d.ts

@@ -1,54 +0,0 @@
-import { Nullable } from "./types";
-export declare class PropertySchema {
-    name: string;
-    units: string;
-    defaultValue: any;
-    minValue: Nullable<number>;
-    maxValue: Nullable<number>;
-    beforeSetterName: Nullable<string>;
-    constructor(name: string, config: any);
-    validate(newValue: number): boolean;
-}
-export declare class Property {
-    readonly schema: PropertySchema;
-    currentValue: any;
-    beforeSetterFunc: any;
-    constructor(schema: PropertySchema);
-    clone(): Property;
-    get value(): any;
-    setValue(instance: any, value: any): boolean;
-}
-export declare class PropertyStore {
-    readonly __properties__: {
-        [key: string]: Property;
-    };
-    private eventBus;
-    getPropertyNames(): string[];
-    getProperty(name: string): Nullable<Property>;
-    setProperty(name: string, value: any): void;
-}
-export declare const mixinPropertyStore: (target: any) => {
-    new (): {
-        [x: string]: any;
-        readonly __properties__: {
-            [key: string]: Property;
-        };
-        getProperties(): {
-            [key: string]: Property;
-        };
-        getProperty(name: string): Property;
-        setProperty(name: string, value: any): void;
-    };
-    [x: string]: any;
-};
-interface PropertyParams<T> {
-    defaultValue?: Nullable<T>;
-    propertiesName?: string;
-    beforeSetterName?: Nullable<string>;
-    units?: string;
-    minValue?: Nullable<number>;
-    maxValue?: Nullable<number>;
-}
-export declare function property<T>({ propertiesName, defaultValue, beforeSetterName, units, minValue, maxValue, }?: PropertyParams<T>): (target: any, propertyKey: string) => void;
-export declare function propertyValidator<T>(propertyName: string, propertiesName?: string): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
-export {};