@mulsense/xnew 0.5.1 → 0.5.3

package/dist/xnew.mjs

@@ -103,7 +103,6 @@ class AnimationTicker {
         const self = this;
         this.id = null;
         let previous = 0;
-        ticker();
         function ticker() {
             const delta = Date.now() - previous;
             if (delta > (1000 / fps) * 0.9) {
@@ -112,6 +111,7 @@ class AnimationTicker {
             }
             self.id = requestAnimationFrame(ticker);
         }
+        self.id = requestAnimationFrame(ticker);
     }
     clear() {
         if (this.id !== null) {
@@ -122,7 +122,6 @@ class AnimationTicker {
 }
 class Timer {
     constructor(options) {
-        var _a, _b;
         this.options = options;
         this.id = null;
         this.time = 0.0;
@@ -138,17 +137,17 @@ class Timer {
             else if (this.options.easing === 'ease-in') {
                 p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
             }
-            else if (this.options.easing === 'ease') {
-                p = (1.0 - Math.cos(p * Math.PI)) / 2.0; // todo
-            }
-            else if (this.options.easing === 'ease-in-out') {
-                p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+            else if (this.options.easing === 'ease' || this.options.easing === 'ease-in-out') {
+                // p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+                const bias = (this.options.easing === 'ease') ? 0.7 : 1.0;
+                const s = Math.pow(p, bias);
+                p = s * s * (3 - 2 * s);
             }
             (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, p);
         });
         this.visibilitychange = () => document.hidden === false ? this._start() : this._stop();
         document.addEventListener('visibilitychange', this.visibilitychange);
-        (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 0.0);
+        // this.options.transition?.(0.0);
         this.start();
     }
     clear() {
@@ -200,7 +199,7 @@ class Timer {
     }
 }
 
-class EventManager {
+class Eventor {
     constructor() {
         this.map = new MapMap();
     }
@@ -520,12 +519,93 @@ function pointer(element, event) {
 // utils
 //----------------------------------------------------------------------------------------------------
 const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
+class UnitPromise {
+    constructor(promise, component) {
+        this.promise = promise;
+        this.component = component;
+    }
+    then(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.then((...args) => Unit.scope(snapshot, callback, ...args));
+        return this;
+    }
+    catch(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.catch((...args) => Unit.scope(snapshot, callback, ...args));
+        return this;
+    }
+    finally(callback) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        this.promise = this.promise.finally(() => Unit.scope(snapshot, callback));
+        return this;
+    }
+}
+class UnitTimer {
+    constructor(options) {
+        this.stack = [];
+        this.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
+    }
+    clear() {
+        this.stack = [];
+        this.unit.finalize();
+    }
+    timeout(timeout, duration = 0) {
+        UnitTimer.execute(this, { timeout, duration, iterations: 1 });
+        return this;
+    }
+    iteration(timeout, duration = 0, iterations = -1) {
+        UnitTimer.execute(this, { timeout, duration, iterations });
+        return this;
+    }
+    transition(transition, duration = 0, easing) {
+        UnitTimer.execute(this, { transition, duration, iterations: 1, easing });
+        return this;
+    }
+    static execute(timer, options) {
+        if (timer.unit._.state === 'finalized') {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, { options, snapshot: Unit.snapshot(Unit.currentUnit) });
+        }
+        else if (timer.stack.length === 0) {
+            timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+        else {
+            timer.stack.push({ options, snapshot: Unit.snapshot(Unit.currentUnit) });
+        }
+    }
+    static next(timer) {
+        if (timer.stack.length > 0) {
+            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.stack.shift());
+            timer.unit.on('finalize', () => UnitTimer.next(timer));
+        }
+    }
+    static Component(unit, { options, snapshot }) {
+        let counter = 0;
+        const timer = new Timer({
+            transition: (p) => {
+                if (options.transition)
+                    Unit.scope(snapshot, options.transition, p);
+            },
+            timeout: () => {
+                if (options.transition)
+                    Unit.scope(snapshot, options.transition, 1.0);
+                if (options.timeout)
+                    Unit.scope(snapshot, options.timeout);
+                if (options.iterations && counter >= options.iterations - 1) {
+                    unit.finalize();
+                }
+                counter++;
+            }, duration: options.duration, iterations: options.iterations, easing: options.easing
+        });
+        unit.on('finalize', () => timer.clear());
+    }
+}
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
 class Unit {
-    constructor(parent, target, component, props, config) {
-        var _a, _b;
+    constructor(parent, target, component, props) {
+        var _a;
         let baseElement;
         if (target instanceof HTMLElement || target instanceof SVGElement) {
             baseElement = target;
@@ -540,15 +620,14 @@ class Unit {
         if (typeof component === 'function') {
             baseComponent = component;
         }
-        else if (typeof component === 'string') {
-            baseComponent = (unit) => { unit.element.textContent = component; };
+        else if (component !== undefined) {
+            baseComponent = (unit) => { unit.element.textContent = component.toString(); };
         }
         else {
             baseComponent = (unit) => { };
         }
         const baseContext = (_a = parent === null || parent === void 0 ? void 0 : parent._.currentContext) !== null && _a !== void 0 ? _a : { stack: null };
-        const protect = (_b = config === null || config === void 0 ? void 0 : config.protect) !== null && _b !== void 0 ? _b : false;
-        this._ = { parent, target, baseElement, baseContext, baseComponent, props, config: { protect } };
+        this._ = { parent, target, baseElement, baseContext, baseComponent, props };
         parent === null || parent === void 0 ? void 0 : parent._.children.push(this);
         Unit.initialize(this, null);
     }
@@ -577,7 +656,6 @@ class Unit {
         Unit.initialize(this, anchor);
     }
     static initialize(unit, anchor) {
-        var _a, _b;
         const backup = Unit.currentUnit;
         Unit.currentUnit = unit;
         unit._ = Object.assign(unit._, {
@@ -587,7 +665,8 @@ class Unit {
             anchor,
             state: 'invoked',
             tostart: true,
-            ancestors: [...(unit._.parent ? [unit._.parent] : []), ...((_b = (_a = unit._.parent) === null || _a === void 0 ? void 0 : _a._.ancestors) !== null && _b !== void 0 ? _b : [])],
+            protected: false,
+            ancestors: unit._.parent ? [unit._.parent, ...unit._.parent._.ancestors] : [],
             children: [],
             elements: [],
             promises: [],
@@ -595,7 +674,7 @@ class Unit {
             listeners: new MapMap(),
             defines: {},
             systems: { start: [], update: [], render: [], stop: [], finalize: [] },
-            eventManager: new EventManager(),
+            eventor: new Eventor(),
         });
         // nest html element
         if (typeof unit._.target === 'string') {
@@ -628,11 +707,8 @@ class Unit {
             unit._.state = 'finalized';
         }
     }
-    static nest(unit, htmlString, textContent) {
-        if (unit._.state !== 'invoked') {
-            throw new Error('This function can not be called after initialized.');
-        }
-        const match = htmlString.match(/<((\w+)[^>]*?)\/?>/);
+    static nest(unit, tag, textContent) {
+        const match = tag.match(/<((\w+)[^>]*?)\/?>/);
         if (match !== null) {
             let element;
             if (unit._.anchor !== null) {
@@ -646,20 +722,17 @@ class Unit {
             }
             unit._.currentElement = element;
             if (textContent !== undefined) {
-                element.textContent = textContent;
+                element.textContent = textContent.toString();
             }
             unit._.elements.push(element);
             return element;
         }
         else {
-            throw new Error(`Invalid html string: ${htmlString}`);
+            throw new Error(`xnew.nest: invalid html string [${tag}]`);
         }
     }
     static extend(unit, component, props) {
         var _a;
-        if (unit._.state !== 'invoked') {
-            throw new Error('This function can not be called after initialized.');
-        }
         unit._.components.push(component);
         Unit.component2units.add(component, unit);
         const backupComponent = unit._.currentComponent;
@@ -672,12 +745,13 @@ class Unit {
             }
             const descriptor = Object.getOwnPropertyDescriptor(defines, key);
             const wrapper = { configurable: true, enumerable: true };
+            const snapshot = Unit.snapshot(unit);
             if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
-                wrapper.get = Unit.wrap(unit, descriptor.get);
+                wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
             if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                wrapper.set = Unit.wrap(unit, descriptor.set);
+                wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
             if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                wrapper.value = Unit.wrap(unit, descriptor.value);
+                wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
             }
             else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
                 wrapper.writable = true;
@@ -730,10 +804,6 @@ class Unit {
         });
         Unit.rootUnit.on('finalize', () => ticker.clear());
     }
-    static wrap(unit, listener) {
-        const snapshot = Unit.snapshot(unit);
-        return (...args) => Unit.scope(snapshot, listener, ...args);
-    }
     static scope(snapshot, func, ...args) {
         if (snapshot.unit._.state === 'finalized') {
             return;
@@ -784,15 +854,16 @@ class Unit {
         types.forEach((type) => Unit.off(this, type, listener));
     }
     static on(unit, type, listener, options) {
+        const snapshot = Unit.snapshot(Unit.currentUnit);
+        const execute = (...args) => Unit.scope(snapshot, listener, ...args);
         if (SYSTEM_EVENTS.includes(type)) {
-            unit._.systems[type].push({ listener, execute: Unit.wrap(Unit.currentUnit, listener) });
+            unit._.systems[type].push({ listener, execute });
         }
         if (unit._.listeners.has(type, listener) === false) {
-            const execute = Unit.wrap(Unit.currentUnit, listener);
             unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
             Unit.type2units.add(type, unit);
             if (/^[A-Za-z]/.test(type)) {
-                unit._.eventManager.add(unit.element, type, execute, options);
+                unit._.eventor.add(unit.element, type, execute, options);
             }
         }
     }
@@ -806,7 +877,7 @@ class Unit {
                 return;
             unit._.listeners.delete(type, listener);
             if (/^[A-Za-z]/.test(type)) {
-                unit._.eventManager.remove(type, item.execute);
+                unit._.eventor.remove(type, item.execute);
             }
         });
         if (unit._.listeners.has(type) === false) {
@@ -819,7 +890,7 @@ class Unit {
         if (type[0] === '+') {
             (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                 var _a;
-                const find = [unit, ...unit._.ancestors].find(u => u._.config.protect === true);
+                const find = [unit, ...unit._.ancestors].find(u => u._.protected === true);
                 if (find === undefined || current._.ancestors.includes(find) === true || current === find) {
                     (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(...args));
                 }
@@ -836,92 +907,10 @@ Unit.component2units = new MapSet();
 // event
 //----------------------------------------------------------------------------------------------------
 Unit.type2units = new MapSet();
-//----------------------------------------------------------------------------------------------------
-// unit promise
-//----------------------------------------------------------------------------------------------------
-class UnitPromise {
-    constructor(promise, component) {
-        this.promise = promise;
-        this.component = component;
-    }
-    then(callback) {
-        this.promise = this.promise.then(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-    catch(callback) {
-        this.promise = this.promise.catch(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-    finally(callback) {
-        this.promise = this.promise.finally(Unit.wrap(Unit.currentUnit, callback));
-        return this;
-    }
-}
-//----------------------------------------------------------------------------------------------------
-// unit timer
-//----------------------------------------------------------------------------------------------------
-class UnitTimer {
-    constructor(options) {
-        this.stack = [];
-        this.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-    }
-    clear() {
-        this.stack = [];
-        this.unit.finalize();
-    }
-    timeout(timeout, duration = 0) {
-        UnitTimer.execute(this, { timeout, duration, iterations: 1 });
-        return this;
-    }
-    iteration(timeout, duration = 0, iterations = -1) {
-        UnitTimer.execute(this, { timeout, duration, iterations });
-        return this;
-    }
-    transition(transition, duration = 0, easing) {
-        UnitTimer.execute(this, { transition, duration, iterations: 1, easing });
-        return this;
-    }
-    static execute(timer, options) {
-        if (timer.unit._.state === 'finalized') {
-            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-        }
-        else if (timer.stack.length === 0) {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
-        }
-        else {
-            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
-        }
-    }
-    static next(timer) {
-        if (timer.stack.length > 0) {
-            timer.unit = new Unit(Unit.currentUnit, null, UnitTimer.Component, timer.stack.shift());
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
-        }
-    }
-    static Component(unit, options) {
-        let counter = 0;
-        const timer = new Timer({
-            transition: (p) => {
-                if (options.transition)
-                    Unit.scope(options.snapshot, options.transition, p);
-            },
-            timeout: () => {
-                if (options.transition)
-                    Unit.scope(options.snapshot, options.transition, 1.0);
-                if (options.timeout)
-                    Unit.scope(options.snapshot, options.timeout);
-                if (options.iterations && counter >= options.iterations - 1) {
-                    unit.finalize();
-                }
-                counter++;
-            }, duration: options.duration, iterations: options.iterations, easing: options.easing
-        });
-        unit.on('finalize', () => timer.clear());
-    }
-}
 
-function parseArguments(...args) {
+const xnew$1 = Object.assign(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
@@ -934,29 +923,26 @@ function parseArguments(...args) {
     }
     const component = args.shift();
     const props = args.shift();
-    return { target, component, props };
-}
-const xnew$1 = Object.assign(function (...args) {
-    if (Unit.rootUnit === undefined)
-        Unit.reset();
-    const { target, component, props } = parseArguments(...args);
-    return new Unit(Unit.currentUnit, target, component, props, { protect: false });
+    return new Unit(Unit.currentUnit, target, component, props);
 }, {
     /**
      * Creates a nested HTML/SVG element within the current component
-     * @param htmlString - HTML or SVG tag name (e.g., '<div>', '<span>', '<svg>')
+     * @param tag - HTML or SVG tag name (e.g., '<div>', '<span>', '<svg>')
      * @returns The created HTML/SVG element
      * @throws Error if called after component initialization
      * @example
      * const div = xnew.nest('<div>')
      * div.textContent = 'Hello'
      */
-    nest(htmlString, textContent) {
+    nest(tag, textContent) {
         try {
-            return Unit.nest(Unit.currentUnit, htmlString, textContent);
+            if (Unit.currentUnit._.state !== 'invoked') {
+                throw new Error('xnew.nest can not be called after initialized.');
+            }
+            return Unit.nest(Unit.currentUnit, tag, textContent);
         }
         catch (error) {
-            console.error('xnew.nest(htmlString: string): ', error);
+            console.error('xnew.nest(tag: string): ', error);
             throw error;
         }
     },
@@ -971,6 +957,9 @@ const xnew$1 = Object.assign(function (...args) {
      */
     extend(component, props) {
         try {
+            if (Unit.currentUnit._.state !== 'invoked') {
+                throw new Error('xnew.extend can not be called after initialized.');
+            }
             return Unit.extend(Unit.currentUnit, component, props);
         }
         catch (error) {
@@ -1105,6 +1094,15 @@ const xnew$1 = Object.assign(function (...args) {
             throw error;
         }
     },
+    /**
+     * 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
+     * @returns void
+     * @example
+     * xnew.emit('+globalevent', { data: 123 }); // Global event
+     * xnew.emit('-localevent', { data: 123 }); // Local event
+     */
     emit(type, ...args) {
         try {
             return Unit.emit(type, ...args);
@@ -1154,100 +1152,114 @@ const xnew$1 = Object.assign(function (...args) {
     transition(transition, duration = 0, easing = 'linear') {
         return new UnitTimer({ transition, duration, easing, iterations: 1 });
     },
-    protect(...args) {
-        if (Unit.rootUnit === undefined)
-            Unit.reset();
-        const { target, component, props } = parseArguments(...args);
-        return new Unit(Unit.currentUnit, target, component, props, { protect: true });
+    /**
+     * Call this method within a component function to enable protection.
+     * Protected components will not respond to global events emitted via xnew.emit,
+     * and will be excluded from xnew.find searches.
+     * @example
+     * function MyComponent(unit) {
+     *   xnew.protect();
+     *   // Component logic here
+     * }
+     */
+    protect() {
+        Unit.currentUnit._.protected = true;
     },
 });
 
 function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
     xnew$1.context('xnew.accordion', unit);
-    unit.on('-transition', ({ state }) => unit.state = state);
-    xnew$1.timeout(() => xnew$1.emit('-transition', { state: open ? 1.0 : 0.0 }));
+    let state = open ? 1.0 : 0.0;
+    let sign = open ? +1 : -1;
+    let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
     return {
-        state: open ? 1.0 : 0.0,
         toggle() {
-            if (unit.state === 1.0) {
-                unit.close();
-            }
-            else if (unit.state === 0.0) {
-                unit.open();
-            }
+            sign > 0 ? unit.close() : unit.open();
         },
         open() {
-            if (unit.state === 0.0) {
-                xnew$1.transition((x) => xnew$1.emit('-transition', { state: x }), duration, easing);
-            }
+            if (sign < 0)
+                transition();
         },
         close() {
-            if (unit.state === 1.0) {
-                xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing);
-            }
-        }
+            if (sign > 0)
+                transition();
+        },
+    };
+    function transition() {
+        sign *= -1;
+        const d = sign > 0 ? 1 - state : state;
+        timer.clear();
+        timer = xnew$1.transition((x) => {
+            const y = x < 1.0 ? (1 - x) * d : 0.0;
+            state = sign > 0 ? 1.0 - y : y;
+            xnew$1.emit('-transition', { state });
+        }, duration * d, easing);
+    }
+}
+function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
+    xnew$1.context('xnew.modal', unit);
+    let state = 0.0;
+    let timer = xnew$1.transition((x) => {
+        state = x;
+        xnew$1.emit('-transition', { state });
+    }, duration, easing);
+    return {
+        close() {
+            const d = state;
+            timer.clear();
+            timer = xnew$1.transition((x) => {
+                state = x < 1.0 ? (1 - x) * d : 0.0;
+                xnew$1.emit('-transition', { state });
+            }, duration * d, easing)
+                .timeout(() => unit.finalize());
+        },
     };
 }
 
-function Screen(unit, { width = 640, height = 480, fit = 'contain' } = {}) {
-    const size = { width, height };
-    const wrapper = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
-    unit.on('resize', resize);
+function Screen(unit, { width, height, fit = 'contain' } = {}) {
+    const size = { width: width !== null && width !== void 0 ? width : 800, height: height !== null && height !== void 0 ? height : 600 };
+    const outer = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
+    xnew$1().on('resize', resize);
     const absolute = xnew$1.nest('<div style="position: absolute; margin: auto; container-type: size; overflow: hidden;">');
-    const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none; pointer-events: auto;">`);
+    const canvas = xnew$1(`<canvas width="${size.width}" height="${size.height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none; pointer-events: auto;">`);
     resize();
     function resize() {
-        const aspect = size.width / size.height;
         const style = { width: '100%', height: '100%', top: 0, left: 0, bottom: 0, right: 0 };
         if (fit === 'contain') {
-            if (wrapper.clientWidth < wrapper.clientHeight * aspect) {
-                style.height = Math.floor(wrapper.clientWidth / aspect) + 'px';
+            const aspect = size.width / size.height;
+            if (outer.clientWidth < outer.clientHeight * aspect) {
+                style.height = Math.floor(outer.clientWidth / aspect) + 'px';
             }
             else {
-                style.width = Math.floor(wrapper.clientHeight * aspect) + 'px';
+                style.width = Math.floor(outer.clientHeight * aspect) + 'px';
             }
         }
         else if (fit === 'cover') {
-            if (wrapper.clientWidth < wrapper.clientHeight * aspect) {
-                style.width = Math.floor(wrapper.clientHeight * aspect) + 'px';
-                style.left = Math.floor((wrapper.clientWidth - wrapper.clientHeight * aspect) / 2) + 'px';
+            const aspect = size.width / size.height;
+            if (outer.clientWidth < outer.clientHeight * aspect) {
+                style.width = Math.floor(outer.clientHeight * aspect) + 'px';
+                style.left = Math.floor((outer.clientWidth - outer.clientHeight * aspect) / 2) + 'px';
                 style.right = 'auto';
             }
             else {
-                style.height = Math.floor(wrapper.clientWidth / aspect) + 'px';
-                style.top = Math.floor((wrapper.clientHeight - wrapper.clientWidth / aspect) / 2) + 'px';
+                style.height = Math.floor(outer.clientWidth / aspect) + 'px';
+                style.top = Math.floor((outer.clientHeight - outer.clientWidth / aspect) / 2) + 'px';
                 style.bottom = 'auto';
             }
         }
-        else ;
+        else if (fit === 'resize') {
+            size.width = outer.clientWidth > 0 ? outer.clientWidth : size.width;
+            size.height = outer.clientHeight > 0 ? outer.clientHeight : size.height;
+            console.log(size);
+            canvas.element.setAttribute('width', size.width + 'px');
+            canvas.element.setAttribute('height', size.height + 'px');
+        }
         Object.assign(absolute.style, style);
     }
     return {
         get canvas() {
             return canvas.element;
         },
-        resize(width, height) {
-            size.width = width;
-            size.height = height;
-            canvas.element.setAttribute('width', width + 'px');
-            canvas.element.setAttribute('height', height + 'px');
-            resize();
-        },
-    };
-}
-
-function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.modalframe', unit);
-    xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
-    unit.on('click', ({ event }) => unit.close());
-    unit.on('-transition', ({ state }) => unit.state = state);
-    xnew$1.transition((x) => xnew$1.emit('-transition', { state: x }), duration, easing);
-    return {
-        state: 0.0,
-        close() {
-            xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing)
-                .timeout(() => unit.finalize());
-        }
     };
 }
 
@@ -1302,7 +1314,7 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
         xnew$1.emit('-up', { type: '-up', vector });
     });
 }
-function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
+function DPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
     let newsize = Math.min(outer.clientWidth, outer.clientHeight);
     const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
@@ -1598,7 +1610,7 @@ const basics = {
     Modal,
     Accordion,
     AnalogStick,
-    DirectionalPad,
+    DPad,
 };
 const audio = {
     load(path) {

package/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.5.1",
+  "version": "0.5.3",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",