@mulsense/xnew 0.6.7 → 0.7.0

package/dist/xnew.js

@@ -192,7 +192,7 @@
                     this.id = null;
                     this.time = { start: 0.0, processed: 0.0 };
                     (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 1.0);
-                    (_d = (_c = this.options).callback) === null || _d === void 0 ? void 0 : _d.call(_c);
+                    (_d = (_c = this.options).timeout) === null || _d === void 0 ? void 0 : _d.call(_c);
                     this.clear();
                 }, this.options.duration - this.time.processed);
                 this.time.start = Date.now();
@@ -519,16 +519,26 @@
         return { position };
     }
 
-    //----------------------------------------------------------------------------------------------------
-    // utils
-    //----------------------------------------------------------------------------------------------------
     const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
     class Unit {
-        constructor(parent, target, Component, props) {
+        constructor(parent, ...args) {
             var _a;
+            let target;
+            let Component;
+            let props;
+            if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement || typeof args[0] === 'string') {
+                target = args[0];
+                Component = args[1];
+                props = args[2];
+            }
+            else {
+                target = null;
+                Component = args[0];
+                props = args[1];
+            }
             const backup = Unit.currentUnit;
             Unit.currentUnit = this;
             parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
@@ -650,7 +660,7 @@
                     return element;
                 }
                 else {
-                    throw new Error(`xnew.nest: invalid html string [${target}]`);
+                    throw new Error(`xnew.nest: invalid tag string [${target}]`);
                 }
             }
         }
@@ -692,7 +702,7 @@
                     Object.defineProperty(unit._.defines, key, wrapper);
                     Object.defineProperty(unit, key, wrapper);
                 });
-                return defines;
+                return Object.assign({}, unit._.defines);
             }
         }
         static start(unit) {
@@ -729,7 +739,7 @@
         static reset() {
             var _a;
             (_a = Unit.rootUnit) === null || _a === void 0 ? void 0 : _a.finalize();
-            Unit.currentUnit = Unit.rootUnit = new Unit(null, null);
+            Unit.currentUnit = Unit.rootUnit = new Unit(null);
             const ticker = new AnimationTicker(() => {
                 Unit.start(Unit.rootUnit);
                 Unit.update(Unit.rootUnit);
@@ -769,7 +779,7 @@
         }
         static getContext(unit, key) {
             for (let context = unit._.currentContext; context.previous !== null; context = context.previous) {
-                if (context.value === Unit.currentUnit && key === Unit.currentUnit._.currentComponent)
+                if (context.value === Unit.currentUnit)
                     continue;
                 if (context.key === key)
                     return context.value;
@@ -848,13 +858,13 @@
     // extensions
     //----------------------------------------------------------------------------------------------------
     class UnitPromise {
-        constructor(promise, Component) {
-            this.promise = promise;
-            this.Component = Component;
-        }
+        constructor(promise) { this.promise = promise; }
         then(callback) { return this.wrap('then', callback); }
         catch(callback) { return this.wrap('catch', callback); }
         finally(callback) { return this.wrap('finally', callback); }
+        static all(promises) {
+            return new UnitPromise(Promise.all(promises.map(p => p.promise)));
+        }
         wrap(key, callback) {
             const snapshot = Unit.snapshot(Unit.currentUnit);
             this.promise = this.promise[key]((...args) => Unit.scope(snapshot, callback, ...args));
@@ -872,11 +882,11 @@
             (_a = this.unit) === null || _a === void 0 ? void 0 : _a.finalize();
             this.unit = null;
         }
-        timeout(callback, duration = 0) {
-            return UnitTimer.execute(this, { callback, duration }, 1);
+        timeout(timeout, duration = 0) {
+            return UnitTimer.execute(this, { timeout, duration }, 1);
         }
-        interval(callback, duration = 0, iterations = 0) {
-            return UnitTimer.execute(this, { callback, duration }, iterations);
+        interval(timeout, duration = 0, iterations = 0) {
+            return UnitTimer.execute(this, { timeout, duration }, iterations);
         }
         transition(transition, duration = 0, easing) {
             return UnitTimer.execute(this, { transition, duration, easing }, 1);
@@ -884,7 +894,7 @@
         static execute(timer, options, iterations) {
             const props = { options, iterations, snapshot: Unit.snapshot(Unit.currentUnit) };
             if (timer.unit === null || timer.unit._.state === 'finalized') {
-                timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, props);
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, props);
             }
             else if (timer.queue.length === 0) {
                 timer.queue.push(props);
@@ -897,18 +907,18 @@
         }
         static next(timer) {
             if (timer.queue.length > 0) {
-                timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.queue.shift());
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, timer.queue.shift());
                 timer.unit.on('finalize', () => UnitTimer.next(timer));
             }
         }
         static Component(unit, { options, iterations, snapshot }) {
             let counter = 0;
-            let timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
-            function callback() {
-                if (options.callback)
-                    Unit.scope(snapshot, options.callback);
+            let timer = new Timer({ timeout, transition, duration: options.duration, easing: options.easing });
+            function timeout() {
+                if (options.timeout)
+                    Unit.scope(snapshot, options.timeout);
                 if (iterations <= 0 || counter < iterations - 1) {
-                    timer = new Timer({ callback, transition, duration: options.duration, easing: options.easing });
+                    timer = new Timer({ timeout, transition, duration: options.duration, easing: options.easing });
                 }
                 else {
                     unit.finalize();
@@ -923,29 +933,31 @@
         }
     }
 
-    const xnew$1 = Object.assign(function (...args) {
+    const xnew$1 = Object.assign(
+    /**
+     * creates a new Unit component
+     * xnew(Component?: Function | string, props?: Object): Unit;
+     * xnew(target: HTMLElement | SVGElement | string, Component?: Function | string, props?: Object): Unit;
+     * @param target - HTMLElement | SVGElement, or HTML tag for new element
+     * @param Component - component function
+     * @param props - properties for component function
+     * @returns a new Unit instance
+     * @example
+     * const unit = xnew(MyComponent, { data: 0 })
+     * const unit = xnew(element, MyComponent, { data: 0 })
+     * const unit = xnew('<div>', MyComponent, { data: 0 })
+     */
+    function (...args) {
         if (Unit.rootUnit === undefined)
             Unit.reset();
-        let target;
-        if (args[0] instanceof HTMLElement || args[0] instanceof SVGElement) {
-            target = args.shift(); // an existing html element
-        }
-        else if (typeof args[0] === 'string' && args[0].match(/<((\w+)[^>]*?)\/?>/)) {
-            target = args.shift();
-        }
-        else {
-            target = null;
-        }
-        const Component = args.shift();
-        const props = args.shift();
-        const unit = new Unit(Unit.currentUnit, target, Component, props);
-        return unit;
+        return new Unit(Unit.currentUnit, ...args);
     }, {
         /**
-         * Creates a nested HTML/SVG element within the current component
-         * @param target - HTML or SVG tag string (e.g., '<div class="my-class">', '<span style="color:red">', '<svg viewBox="0 0 24 24">')
-         * @returns The created HTML/SVG element
-         * @throws Error if called after component initialization
+         * Creates a child HTML/SVG element inside the current component's element.
+         * Must be called during component initialization (before setup completes).
+         * @param target - An existing HTML/SVG element, or a tag string like `'<div>'`
+         * @returns The provided element, or the newly created element
+         * @throws Error if called after the component has finished initializing
          * @example
          * const div = xnew.nest('<div>')
          * div.textContent = 'Hello'
@@ -958,7 +970,7 @@
                 return Unit.nest(Unit.currentUnit, target);
             }
             catch (error) {
-                console.error('xnew.nest(target: HTMLElement | SVGElement | string): ', error);
+                console.error('xnew.nest(target: UnitElement | string): ', error);
                 throw error;
             }
         },
@@ -984,17 +996,25 @@
                 throw error;
             }
         },
+        append(parent, ...args) {
+            try {
+                new Unit(parent, ...args);
+            }
+            catch (error) {
+                console.error('xnew.append(parent: Unit, ...args: UnitArgs): ', error);
+                throw error;
+            }
+        },
         /**
-         * Gets a context value that can be accessed in follow context
-         * @param key - component function
-         * @returns The context value
+         * Gets the Unit instance associated with the given component in the ancestor context chain
+         * @param key - component function used as context key
+         * @returns The Unit instance registered with the given component, or undefined if not found
          * @example
-         * // Create unit
-         * const a = xnew(A);
-         * ------------------------------
+         * // Create parent unit with component A
+         * const parent = xnew(A);
          *
-         * // Get context in child
-         * const a = xnew.context(A)
+         * // Inside a child component, get the parent unit
+         * const parentUnit = xnew.context(A)
          */
         context(key) {
             try {
@@ -1007,24 +1027,22 @@
         },
         /**
          * Registers a promise with the current component for lifecycle management
-         * @param promise - Promise to register
+         * @param promise - A Promise, async function, or Unit to register
          * @returns UnitPromise wrapper for chaining
          * @example
          * xnew.promise(fetchData()).then(data => console.log(data))
          */
         promise(promise) {
             try {
-                const Component = Unit.currentUnit._.currentComponent;
                 let unitPromise;
                 if (promise instanceof Unit) {
-                    unitPromise = new UnitPromise(Promise.all(promise._.promises.map(p => p.promise)), Component)
-                        .then(() => promise._.results);
+                    unitPromise = UnitPromise.all(promise._.promises).then(() => promise._.results);
                 }
                 else if (promise instanceof Promise) {
-                    unitPromise = new UnitPromise(promise, Component);
+                    unitPromise = new UnitPromise(promise);
                 }
                 else {
-                    unitPromise = new UnitPromise(new Promise(xnew$1.scope(promise)), Component);
+                    unitPromise = new UnitPromise(new Promise(xnew$1.scope(promise)));
                 }
                 Unit.currentUnit._.promises.push(unitPromise);
                 return unitPromise;
@@ -1044,8 +1062,7 @@
         then(callback) {
             try {
                 const currentUnit = Unit.currentUnit;
-                return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
-                    .then(() => callback(currentUnit._.results));
+                return UnitPromise.all(Unit.currentUnit._.promises).then(() => callback(currentUnit._.results));
             }
             catch (error) {
                 console.error('xnew.then(callback: Function): ', error);
@@ -1061,7 +1078,7 @@
          */
         catch(callback) {
             try {
-                return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
+                return UnitPromise.all(Unit.currentUnit._.promises)
                     .catch(callback);
             }
             catch (error) {
@@ -1070,35 +1087,67 @@
             }
         },
         /**
-         * Commits a value to the current unit's promise results
-         * @param object - object to commit to the promise
-         * @returns void
+         * Executes callback after all registered promises settle (resolve or reject)
+         * @param callback - Function to call after promises settle
+         * @returns UnitPromise for chaining
          * @example
-         * xnew.commit({ data: 123});
+         * xnew.finally(() => console.log('All promises settled'))
          */
-        commit(object) {
+        finally(callback) {
             try {
-                Object.assign(Unit.currentUnit._.results, object);
+                return UnitPromise.all(Unit.currentUnit._.promises).finally(callback);
             }
             catch (error) {
-                console.error('xnew.commit(object?: Record<string, any>): ', error);
+                console.error('xnew.finally(callback: Function): ', error);
                 throw error;
             }
         },
+        resolvers() {
+            let state = null;
+            let resolve = null;
+            let reject = null;
+            const unitPromise = new UnitPromise(new Promise((res, rej) => {
+                if (state === 'resolved') {
+                    res(null);
+                }
+                else if (state === 'rejected') {
+                    rej();
+                }
+                else {
+                    resolve = res;
+                    reject = rej;
+                    state = 'pending';
+                }
+            }));
+            Unit.currentUnit._.promises.push(unitPromise);
+            return {
+                resolve() {
+                    if (state === 'pending') {
+                        resolve === null || resolve === void 0 ? void 0 : resolve(null);
+                    }
+                    state = 'resolved';
+                },
+                reject() {
+                    if (state === 'pending') {
+                        reject === null || reject === void 0 ? void 0 : reject();
+                    }
+                    state = 'rejected';
+                }
+            };
+        },
         /**
-         * Executes callback after all registered promises settle (resolve or reject)
-         * @param callback - Function to call after promises settle
-         * @returns UnitPromise for chaining
+         * Outputs a value to the current unit's promise results
+         * @param object - object to output for the promise
+         * @returns void
          * @example
-         * xnew.finally(() => console.log('All promises settled'))
+         * xnew.output({ data: 123});
          */
-        finally(callback) {
+        output(object) {
             try {
-                return new UnitPromise(Promise.all(Unit.currentUnit._.promises.map(p => p.promise)), null)
-                    .finally(callback);
+                Object.assign(Unit.currentUnit._.results, object);
             }
             catch (error) {
-                console.error('xnew.finally(callback: Function): ', error);
+                console.error('xnew.output(object?: Record<string, any>): ', error);
                 throw error;
             }
         },
@@ -1136,7 +1185,7 @@
         /**
          * Emits a custom event to components
          * @param type - Event type to emit (prefix with '+' for global events, '-' for local events)
-         * @param args - Additional arguments to pass to event listeners
+         * @param props - Event properties object to pass to listeners
          * @returns void
          * @example
          * xnew.emit('+globalevent', { data: 123 }); // Global event
@@ -1153,7 +1202,7 @@
         },
         /**
          * Executes a callback once after a delay, managed by component lifecycle
-         * @param callback - Function to execute after Duration
+         * @param callback - Function to execute after duration
          * @param duration - Duration in milliseconds
          * @returns Object with clear() method to cancel the timeout
          * @example
@@ -1262,7 +1311,8 @@
         });
     }
 
-    function Screen(unit, { aspect, fit = 'contain' } = {}) {
+    function Screen(unit, { width = 800, height = 600, fit = 'contain' } = {}) {
+        const aspect = width / height;
         xnew$1.nest('<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size; overflow: hidden;">');
         xnew$1.nest(`<div style="position: relative; aspect-ratio: ${aspect}; container-type: size; overflow: hidden;">`);
         if (fit === 'contain') {
@@ -1272,6 +1322,10 @@
             unit.element.style.flexShrink = '0';
             unit.element.style.width = `max(100cqw, calc(100cqh * ${aspect}))`;
         }
+        const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom;">`);
+        return {
+            get canvas() { return canvas.element; },
+        };
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1280,14 +1334,14 @@
     function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = null, fillOpacity = 0.8 }) {
         xnew$1.nest(`<svg
         viewBox="0 0 64 64"
-        style="position: absolute; width: 100%; height: 100%; user-select: none;
+        style="position: absolute; width: 100%; height: 100%; user-select: none; -webkit-user-select: none;
         stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
     ">`);
     }
     function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
         xnew$1((unit) => {
             xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
             xnew$1('<polygon points="32  7 27 13 37 13">');
@@ -1323,7 +1377,7 @@
     }
     function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 1, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         xnew$1.nest(`<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container-type: size;">`);
-        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1.nest(`<div style="width: min(100cqw, 100cqh); aspect-ratio: 1; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; overflow: hidden;">`);
         const polygons = [
             '<polygon points="32 32 23 23 23  4 24  3 40  3 41  4 41 23">',
             '<polygon points="32 32 23 41 23 60 24 61 40 61 41 60 41 41">',
@@ -1556,6 +1610,8 @@
         }
     }
 
+    function Scene(unit) {
+    }
     function Flow(unit) {
         let scene = null;
         return {
@@ -1565,15 +1621,52 @@
             get scene() {
                 return scene;
             },
-            next(Component, props) {
-                var _a;
-                // scene change
-                (_a = unit.scene) === null || _a === void 0 ? void 0 : _a.finalize();
-                unit.scene = xnew$1(Component, props);
-            }
+            next(Component, props, callback) {
+                callback = callback !== null && callback !== void 0 ? callback : defaultCallback;
+                callback(scene, create);
+                function defaultCallback(current, create) {
+                    current === null || current === void 0 ? void 0 : current.finalize();
+                    create();
+                }
+                function create() {
+                    scene = xnew$1((unit) => {
+                        xnew$1.extend(Scene);
+                        xnew$1.extend(Component, props);
+                    });
+                    return scene;
+                }
+            },
         };
     }
 
+    class XImage {
+        constructor(...args) {
+            if (args[0] instanceof HTMLCanvasElement) {
+                this.canvas = args[0];
+            }
+            else {
+                const canvas = document.createElement('canvas');
+                canvas.width = args[0];
+                canvas.height = args[1];
+                this.canvas = canvas;
+            }
+        }
+        clip(x, y, width, height) {
+            var _a;
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(this.canvas, x, y, width, height, 0, 0, width, height);
+            return new XImage(canvas);
+        }
+        download(filename) {
+            const link = document.createElement('a');
+            link.download = filename;
+            link.href = this.canvas.toDataURL('image/png');
+            link.click();
+        }
+    }
+
     const context = new window.AudioContext();
     const master = context.createGain();
     //----------------------------------------------------------------------------------------------------
@@ -1807,6 +1900,7 @@
         Accordion,
         Popup,
         Flow,
+        Scene,
     };
     const audio = {
         load(path) {
@@ -1835,7 +1929,12 @@
             master.gain.value = value;
         }
     };
-    const xnew = Object.assign(xnew$1, { basics, audio });
+    const image = {
+        from(canvas) {
+            return new XImage(canvas);
+        }
+    };
+    const xnew = Object.assign(xnew$1, { basics, audio, image });
 
     return xnew;