multyx-client 0.1.1 → 0.1.3

package/dist/items/list.js

@@ -1,31 +1,104 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
+const _1 = require(".");
 const utils_1 = require("../utils");
-const object_1 = require("./object");
-class MultyxClientList extends object_1.default {
+const router_1 = require("./router");
+const message_1 = require("../message");
+class MultyxClientList {
+    addEditCallback(callback) {
+        this.editCallbacks.push(callback);
+    }
     get value() {
+        var _b;
         const parsed = [];
         for (let i = 0; i < this.length; i++)
-            parsed[i] = this.get(i).value;
+            parsed[i] = (_b = this.get(i)) === null || _b === void 0 ? void 0 : _b.value;
         return parsed;
     }
+    get length() {
+        return this.list.length;
+    }
+    set length(length) {
+        this.list.length = length;
+    }
+    /**
+     * Shifting operations are needed to ensure that operations on elements in
+     * the list do not need to worry about the index of the element.
+     *
+     * Instead of changing each element's value when shifting, these shift
+     * operations are used to ensure that each MultyxClientItem stays the same
+     * @param index Index to shift from, -1 if special operation
+     * @param shift Shift amount, positive for right, negative for left
+     */
+    handleShiftOperation(index, shift) {
+        const operation = index >= 0
+            ? shift >= 0 ? 'right' : 'left'
+            : shift == 0 ? 'reverse' : shift < 0 ? 'length' : 'unknown';
+        switch (operation) {
+            // Reverse the array
+            case 'reverse':
+                for (let i = 0; i < Math.floor(this.length / 2); i++) {
+                    const temp = this.list[i];
+                    this.list[i] = this.list[this.length - 1 - i];
+                    this.list[this.length - 1 - i] = temp;
+                }
+                break;
+            // Shift items to the left
+            case 'left':
+                for (let i = index; i < this.length; i++) {
+                    if (i + shift < 0)
+                        continue;
+                    this.list[i + shift] = this.list[i];
+                }
+                break;
+            // Shift items to the right
+            case 'right':
+                for (let i = this.length - 1; i >= index; i--) {
+                    this.list[i + shift] = this.list[i];
+                }
+                break;
+            // Alter the length of the array
+            case 'length':
+                this.length += shift;
+                break;
+            // Unknown operation
+            default:
+                if (this.multyx.options.verbose) {
+                    console.error("Unknown shift operation: " + operation);
+                }
+        }
+    }
     constructor(multyx, list, propertyPath = [], editable) {
-        super(multyx, {}, propertyPath, editable);
+        this.editCallbacks = [];
         this.toString = () => this.value.toString();
         this.valueOf = () => this.value;
         this[_a] = () => this.value;
-        this.length = 0;
-        this.push(...(list instanceof utils_1.EditWrapper ? list.value.map(x => new utils_1.EditWrapper(x)) : list));
+        this.list = [];
+        this.propertyPath = propertyPath;
+        this.multyx = multyx;
+        this.editable = editable;
+        const isEditWrapper = list instanceof utils_1.EditWrapper;
+        if (list instanceof MultyxClientList)
+            list = list.value;
+        if (list instanceof utils_1.EditWrapper)
+            list = list.value;
+        for (let i = 0; i < list.length; i++) {
+            this.set(i, isEditWrapper
+                ? new utils_1.EditWrapper(list[i])
+                : list[i]);
+        }
         return new Proxy(this, {
             has: (o, p) => {
-                if (p in o)
-                    return true;
-                return o.has(p);
+                if (typeof p == 'number')
+                    return o.has(p);
+                return p in o;
             },
             get: (o, p) => {
                 if (p in o)
                     return o[p];
+                if (!isNaN(parseInt(p)))
+                    p = parseInt(p);
                 return o.get(p);
             },
             set: (o, p, v) => {
@@ -33,42 +106,116 @@ class MultyxClientList extends object_1.default {
                     o[p] = v;
                     return true;
                 }
-                return o.set(p, v);
+                return !!o.set(p, v);
             },
             deleteProperty: (o, p) => {
-                return o.delete(p, false);
+                if (typeof p == 'number')
+                    return o.delete(p);
+                return false;
             }
         });
     }
+    has(index) {
+        return index >= 0 && index < this.length;
+    }
+    get(index) {
+        if (typeof index === 'number')
+            return this.list[index];
+        if (index.length == 0)
+            return this;
+        if (index.length == 1)
+            return this.list[parseInt(index[0])];
+        const item = this.list[parseInt(index[0])];
+        if (!item || (item instanceof _1.MultyxClientValue))
+            return undefined;
+        return item.get(index.slice(1));
+    }
+    recursiveSet(path, value) {
+        if (path.length == 0) {
+            if (this.multyx.options.verbose) {
+                console.error(`Attempting to edit MultyxClientList with no path. Setting '${this.propertyPath.join('.')}' to ${value}`);
+            }
+            return false;
+        }
+        if (path[0] == "shift" && value instanceof utils_1.EditWrapper) {
+            this.handleShiftOperation(parseInt(path[1]), value.value);
+            return true;
+        }
+        if (path.length == 1)
+            return this.set(parseInt(path[0]), value);
+        let next = this.get(parseInt(path[0]));
+        if (next instanceof _1.MultyxClientValue || next == undefined) {
+            this.set(parseInt(path[0]), new utils_1.EditWrapper({}));
+            next = this.get(parseInt(path[0]));
+        }
+        return next.set(path.slice(1), value);
+    }
     set(index, value) {
-        if (typeof index == 'string')
-            index = parseInt(index);
+        if (Array.isArray(index))
+            return this.recursiveSet(index, value);
+        const oldValue = this.get(index);
+        const serverSet = value instanceof utils_1.EditWrapper;
+        const allowed = serverSet || this.editable;
+        if (serverSet || (0, _1.IsMultyxClientItem)(value))
+            value = value.value;
         if (value === undefined)
-            return this.delete(index, false);
-        if (value instanceof utils_1.EditWrapper && value.value === undefined)
-            return this.delete(index, true);
-        const result = super.set(index, value);
-        if (result && index >= this.length)
-            this.length = index + 1;
-        return result;
+            return this.delete(index, serverSet);
+        // If value is a MultyxClientValue, set the value
+        if (this.list[index] instanceof _1.MultyxClientValue && typeof value != 'object') {
+            return this.list[index].set(serverSet ? new utils_1.EditWrapper(value) : value);
+        }
+        // Attempting to edit property not editable to client
+        if (!allowed) {
+            if (this.multyx.options.verbose) {
+                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + index}' to ${value}`);
+            }
+            return false;
+        }
+        this.list[index] = new ((0, router_1.default)(value))(this.multyx, serverSet ? new utils_1.EditWrapper(value) : value, [...this.propertyPath, index.toString()], this.editable);
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        if (this.multyx.events.has(propSymbol)) {
+            this.multyx[utils_1.Done].push(...this.multyx.events.get(propSymbol).map(e => () => e(this.list[index])));
+        }
+        // We have to push into queue, since object may not be fully created
+        // and there may still be more updates to parse
+        for (const listener of this.editCallbacks) {
+            this.multyx[utils_1.Add](() => listener(index, this.get(index), oldValue));
+        }
+        return true;
     }
     delete(index, native = false) {
+        const oldValue = this.get(index);
         if (typeof index == 'string')
             index = parseInt(index);
-        const res = super.delete(index, native);
-        if (res)
-            this.length = this.reduce((a, c, i) => c !== undefined ? i + 1 : a, 0);
-        return res;
+        if (!this.editable && !native) {
+            if (this.multyx.options.verbose) {
+                console.error(`Attempting to delete property that is not editable. Deleting '${this.propertyPath.join('.') + '.' + index}'`);
+            }
+            return false;
+        }
+        delete this.list[index];
+        for (const listener of this.editCallbacks) {
+            this.multyx[utils_1.Add](() => listener(index, undefined, oldValue));
+        }
+        if (!native) {
+            this.multyx.ws.send(message_1.Message.Native({
+                instruction: 'edit',
+                path: [...this.propertyPath, index.toString()],
+                value: undefined
+            }));
+        }
+        return true;
     }
     /**
-     * Create a callback function that gets called for any current or future element in list
-     * @param callbackfn Function to call for every element
+     * Wait for a specific index to be set
+     * @param index Index to wait for
+     * @returns Promise that resolves when the value is set
      */
-    forAll(callbackfn) {
-        for (let i = 0; i < this.length; i++) {
-            callbackfn(this.get(i), i);
-        }
-        super.forAll((key, value) => callbackfn(value, key));
+    await(index) {
+        if (this.has(index))
+            return Promise.resolve(this.get(index));
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        return new Promise(res => this.multyx.on(propSymbol, res));
     }
     /* All general array methods */
     push(...items) {
@@ -144,8 +291,9 @@ class MultyxClientList extends object_1.default {
         }
     }
     map(callbackfn) {
+        const mapped = [];
         for (let i = 0; i < this.length; i++) {
-            this.set(i, callbackfn(this.get(i), i, this));
+            mapped.push(callbackfn(this.get(i), i, this));
         }
     }
     flat() {
@@ -214,20 +362,6 @@ class MultyxClientList extends object_1.default {
         }
         return -1;
     }
-    deorder() {
-        const values = [];
-        for (const index in this.object) {
-            values.push(this.get(index));
-        }
-        return values;
-    }
-    deorderEntries() {
-        const values = [];
-        for (const index in this.object) {
-            values.push([parseInt(index), this.get(index)]);
-        }
-        return values;
-    }
     entries() {
         const entryList = [];
         for (let i = 0; i < this.length; i++) {
@@ -238,6 +372,12 @@ class MultyxClientList extends object_1.default {
     keys() {
         return Array(this.length).fill(0).map((_, i) => i);
     }
+    [utils_1.Unpack](constraints) {
+        var _b;
+        for (let i = 0; i < this.length; i++) {
+            (_b = this.get(i)) === null || _b === void 0 ? void 0 : _b[utils_1.Unpack](constraints[i]);
+        }
+    }
     /* Native methods to allow MultyxClientList to be treated as array */
     [Symbol.iterator]() {
         const values = [];

package/dist/items/object.d.ts

@@ -1,27 +1,31 @@
 import { RawObject } from '../types';
-import { EditWrapper, Unpack } from "../utils";
+import { Edit, EditWrapper, Unpack } from "../utils";
 import type Multyx from '../index';
-import type { MultyxClientItem } from ".";
+import { type MultyxClientItem } from ".";
 export default class MultyxClientObject {
     protected object: RawObject<MultyxClientItem>;
     private multyx;
     propertyPath: string[];
     editable: boolean;
-    private setterListeners;
+    private editCallbacks;
     get value(): {};
+    addEditCallback(callback: (key: any, value: any) => void): void;
+    [Edit](updatePath: string[], value: any): void;
     constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[], editable: boolean);
     has(property: any): boolean;
-    get(property: any): MultyxClientItem;
-    set(property: any, value: any): boolean;
+    get(property: string | string[]): MultyxClientItem;
+    private recursiveSet;
+    set(property: string | string[], value: any): boolean;
     delete(property: any, native?: boolean): boolean;
-    /**
-     * Create a callback function that gets called for any current or future property in object
-     * @param callbackfn Function to call for every property
-     */
-    forAll(callbackfn: (key: any, value: any) => void): void;
     keys(): any[];
     values(): any[];
     entries(): [any, any][];
+    /**
+     * Wait for a specific property to be set
+     * @param property Property to wait for
+     * @returns Promise that resolves when the value is set
+     */
+    await(property: string): Promise<unknown>;
     /**
      * Unpack constraints from server
      * @param constraints Packed constraints object mirroring MultyxClientObject shape

package/dist/items/object.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const message_1 = require("../message");
 const utils_1 = require("../utils");
+const _1 = require(".");
 const router_1 = require("./router");
 const value_1 = require("./value");
 class MultyxClientObject {
@@ -11,17 +12,36 @@ class MultyxClientObject {
             parsed[prop] = this.object[prop];
         return parsed;
     }
+    addEditCallback(callback) {
+        this.editCallbacks.push(callback);
+    }
+    [utils_1.Edit](updatePath, value) {
+        if (updatePath.length == 1) {
+            this.set(updatePath[0], new utils_1.EditWrapper(value));
+            return;
+        }
+        if (updatePath.length == 0 && this.multyx.options.verbose) {
+            console.error("Update path is empty. Attempting to edit MultyxClientObject with no path.");
+        }
+        if (!this.has(updatePath[0])) {
+            this.set(updatePath[0], new utils_1.EditWrapper({}));
+        }
+        this.get(updatePath[0])[utils_1.Edit](updatePath.slice(1), value);
+    }
     constructor(multyx, object, propertyPath = [], editable) {
+        this.editCallbacks = [];
         this.object = {};
         this.propertyPath = propertyPath;
         this.multyx = multyx;
         this.editable = editable;
-        this.setterListeners = [];
+        const isEditWrapper = object instanceof utils_1.EditWrapper;
         if (object instanceof MultyxClientObject)
             object = object.value;
-        for (const prop in (object instanceof utils_1.EditWrapper ? object.value : object)) {
-            this.set(prop, object instanceof utils_1.EditWrapper
-                ? new utils_1.EditWrapper(object.value[prop])
+        if (object instanceof utils_1.EditWrapper)
+            object = object.value;
+        for (const prop in object) {
+            this.set(prop, isEditWrapper
+                ? new utils_1.EditWrapper(object[prop])
                 : object[prop]);
         }
         if (this.constructor !== MultyxClientObject)
@@ -51,41 +71,65 @@ class MultyxClientObject {
         return property in this.object;
     }
     get(property) {
-        return this.object[property];
+        if (typeof property === 'string')
+            return this.object[property];
+        if (property.length == 0)
+            return this;
+        if (property.length == 1)
+            return this.object[property[0]];
+        const next = this.object[property[0]];
+        if (!next || (next instanceof value_1.default))
+            return undefined;
+        return next.get(property.slice(1));
+    }
+    recursiveSet(path, value) {
+        if (path.length == 0) {
+            if (this.multyx.options.verbose) {
+                console.error(`Attempting to edit MultyxClientObject with no path. Setting '${this.propertyPath.join('.')}' to ${value}`);
+            }
+            return false;
+        }
+        if (path.length == 1)
+            return this.set(path[0], value);
+        let next = this.get(path[0]);
+        if (next instanceof value_1.default || next == undefined) {
+            if (isNaN(parseInt(path[1]))) {
+                this.set(path[0], new utils_1.EditWrapper({}));
+                next = this.get(path[0]);
+            }
+            else {
+                this.set(path[0], new utils_1.EditWrapper([]));
+                next = this.get(path[0]);
+            }
+        }
+        return next.set(path.slice(1), value);
     }
     set(property, value) {
+        if (Array.isArray(property))
+            return this.recursiveSet(property, value);
+        const serverSet = value instanceof utils_1.EditWrapper;
+        const allowed = serverSet || this.editable;
+        if (serverSet || (0, _1.IsMultyxClientItem)(value))
+            value = value.value;
         if (value === undefined)
-            return this.delete(property);
+            return this.delete(property, serverSet);
         // Only create new MultyxClientItem when needed
-        if (this.object[property] instanceof value_1.default)
-            return this.object[property].set(value);
-        // If value was deleted by the server
-        if (value instanceof utils_1.EditWrapper && value.value === undefined)
-            return this.delete(property, true);
+        if (this.object[property] instanceof value_1.default && typeof value != 'object') {
+            return this.object[property].set(serverSet ? new utils_1.EditWrapper(value) : value);
+        }
         // Attempting to edit property not editable to client
-        if (!(value instanceof utils_1.EditWrapper) && !this.editable) {
+        if (!allowed) {
             if (this.multyx.options.verbose) {
                 console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + property}' to ${value}`);
             }
             return false;
         }
         // Creating a new value
-        this.object[property] = new ((0, router_1.default)(value instanceof utils_1.EditWrapper ? value.value : value))(this.multyx, value, [...this.propertyPath, property], this.editable);
-        // We have to push into queue, since object may not be fully created
-        // and there may still be more updates to parse
-        for (const listener of this.setterListeners) {
-            this.multyx[utils_1.Add](() => {
-                if (this.has(property))
-                    listener(property, this.get(property));
-            });
+        this.object[property] = new ((0, router_1.default)(value))(this.multyx, serverSet ? new utils_1.EditWrapper(value) : value, [...this.propertyPath, property], this.editable);
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        if (this.multyx.events.has(propSymbol)) {
+            this.multyx[utils_1.Done].push(...this.multyx.events.get(propSymbol).map(e => () => e(this.object[property])));
         }
-        // Relay change to server if not edit wrapped
-        if (!(value instanceof utils_1.EditWrapper))
-            this.multyx.ws.send(message_1.Message.Native({
-                instruction: 'edit',
-                path: this.propertyPath,
-                value: this.object[property].value
-            }));
         return true;
     }
     delete(property, native = false) {
@@ -106,16 +150,6 @@ class MultyxClientObject {
         }
         return true;
     }
-    /**
-     * Create a callback function that gets called for any current or future property in object
-     * @param callbackfn Function to call for every property
-     */
-    forAll(callbackfn) {
-        for (let prop in this.object) {
-            callbackfn(prop, this.get(prop));
-        }
-        this.setterListeners.push(callbackfn);
-    }
     keys() {
         return Object.keys(this.object);
     }
@@ -129,13 +163,25 @@ class MultyxClientObject {
         }
         return entryList;
     }
+    /**
+     * Wait for a specific property to be set
+     * @param property Property to wait for
+     * @returns Promise that resolves when the value is set
+     */
+    await(property) {
+        if (this.has(property))
+            return Promise.resolve(this.get(property));
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        return new Promise(res => this.multyx.on(propSymbol, res));
+    }
     /**
      * Unpack constraints from server
      * @param constraints Packed constraints object mirroring MultyxClientObject shape
      */
     [utils_1.Unpack](constraints) {
+        var _a;
         for (const prop in constraints) {
-            this.object[prop][utils_1.Unpack](constraints[prop]);
+            (_a = this.object[prop]) === null || _a === void 0 ? void 0 : _a[utils_1.Unpack](constraints[prop]);
         }
     }
 }

package/dist/items/value.d.ts

@@ -1,6 +1,6 @@
 import type Multyx from '../';
 import { Constraint, RawObject, Value } from "../types";
-import { EditWrapper, Unpack } from '../utils';
+import { Edit, EditWrapper, Unpack } from '../utils';
 export default class MultyxClientValue {
     private _value;
     private multyx;
@@ -9,22 +9,21 @@ export default class MultyxClientValue {
     constraints: {
         [key: string]: Constraint;
     };
-    private interpolator;
+    private readModifiers;
+    private editCallbacks;
     get value(): Value;
     set value(v: Value);
+    addReadModifier(modifier: (value: Value) => Value): void;
+    addEditCallback(callback: (value: Value, previousValue: Value) => void): void;
+    [Edit](updatePath: string[], value: any): void;
     constructor(multyx: Multyx, value: Value | EditWrapper<Value>, propertyPath: string[], editable: boolean);
     set(value: Value | EditWrapper<Value>): boolean;
+    bindElement(element: HTMLElement): void;
     /**
      * Unpack constraints sent from server and store
      * @param constraints Packed constraints from server
      */
     [Unpack](constraints: RawObject): void;
-    /**
-     * Linearly interpolate value across frames
-     * Will run 1 frame behind on average
-     */
-    Lerp(): void;
-    PredictiveLerp(): void;
     toString: () => string;
     valueOf: () => Value;
     [Symbol.toPrimitive]: () => Value;

package/dist/items/value.js

@@ -5,16 +5,25 @@ const message_1 = require("../message");
 const utils_1 = require("../utils");
 class MultyxClientValue {
     get value() {
-        if (this.interpolator)
-            return this.interpolator.get();
-        return this._value;
+        return this.readModifiers.reduce((value, modifier) => modifier(value), this._value);
     }
     set value(v) {
         this._value = v;
-        if (this.interpolator)
-            this.interpolator.set();
+    }
+    addReadModifier(modifier) {
+        this.readModifiers.push(modifier);
+    }
+    addEditCallback(callback) {
+        this.editCallbacks.push(callback);
+    }
+    [utils_1.Edit](updatePath, value) {
+        if (updatePath.length != 0)
+            return;
+        this.set(new utils_1.EditWrapper(value));
     }
     constructor(multyx, value, propertyPath = [], editable) {
+        this.readModifiers = [];
+        this.editCallbacks = [];
         /* Native methods to allow MultyxValue to be treated as primitive */
         this.toString = () => this.value.toString();
         this.valueOf = () => this.value;
@@ -24,10 +33,16 @@ class MultyxClientValue {
         this.multyx = multyx;
         this.constraints = {};
         this.set(value);
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.'));
+        if (this.multyx.events.has(propSymbol)) {
+            this.multyx[utils_1.Done].push(...this.multyx.events.get(propSymbol).map(e => () => e(this.value)));
+        }
     }
     set(value) {
         if (value instanceof utils_1.EditWrapper) {
+            const oldValue = this.value;
             this.value = value.value;
+            this.editCallbacks.forEach(fn => fn(value.value, oldValue));
             return true;
         }
         // Attempting to edit property not editable to client
@@ -60,6 +75,13 @@ class MultyxClientValue {
         }));
         return true;
     }
+    bindElement(element) {
+        this.addEditCallback((value, previousValue) => {
+            if (value !== previousValue) {
+                element.innerText = value.toString();
+            }
+        });
+    }
     /**
      * Unpack constraints sent from server and store
      * @param constraints Packed constraints from server
@@ -72,60 +94,6 @@ class MultyxClientValue {
             this.constraints[cname] = constraint;
         }
     }
-    /**
-     * Linearly interpolate value across frames
-     * Will run 1 frame behind on average
-     */
-    Lerp() {
-        this.interpolator = {
-            history: [
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() }
-            ],
-            get: () => {
-                const [e, s] = this.interpolator.history;
-                const ratio = Math.min(1, (Date.now() - e.time) / Math.min(250, e.time - s.time));
-                if (Number.isNaN(ratio) || typeof e.value != 'number' || typeof s.value != 'number')
-                    return e.value;
-                return e.value * ratio + s.value * (1 - ratio);
-            },
-            set: () => {
-                this.interpolator.history.pop();
-                this.interpolator.history.unshift({
-                    value: this._value,
-                    time: Date.now()
-                });
-            }
-        };
-    }
-    PredictiveLerp() {
-        this.interpolator = {
-            history: [
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() },
-                { value: this._value, time: Date.now() }
-            ],
-            get: () => {
-                const [e, s, p] = this.interpolator.history;
-                const ratio = Math.min(1, (Date.now() - e.time) / (e.time - s.time));
-                if (Number.isNaN(ratio) || typeof p.value != 'number')
-                    return e.value;
-                if (typeof e.value != 'number' || typeof s.value != 'number')
-                    return e.value;
-                // Speed changed too fast, don't interpolate, return new value
-                if (Math.abs((e.value - s.value) / (s.value - p.value) - 1) > 0.2)
-                    return e.value;
-                return e.value * (1 + ratio) - s.value * ratio;
-            },
-            set: () => {
-                this.interpolator.history.pop();
-                this.interpolator.history.unshift({
-                    value: this._value,
-                    time: Date.now()
-                });
-            }
-        };
-    }
 }
 _a = Symbol.toPrimitive;
 exports.default = MultyxClientValue;