@mulsense/xnew 0.1.11 → 0.2.0

package/dist/xnew.mjs

@@ -99,17 +99,16 @@ class MapMap extends Map {
 // ticker
 //----------------------------------------------------------------------------------------------------
 class Ticker {
-    constructor(callback) {
+    constructor(callback, fps = 60) {
         const self = this;
         this.id = null;
         let previous = 0;
         ticker();
         function ticker() {
-            const time = Date.now();
-            const fps = 60;
-            if (time - previous > (1000 / fps) * 0.9) {
-                callback(time);
-                previous = time;
+            const delta = Date.now() - previous;
+            if (delta > (1000 / fps) * 0.9) {
+                callback();
+                previous += delta;
             }
             self.id = requestAnimationFrame(ticker);
         }
@@ -121,43 +120,35 @@ class Ticker {
         }
     }
 }
-//----------------------------------------------------------------------------------------------------
-// timer
-//----------------------------------------------------------------------------------------------------
 class Timer {
-    constructor(transition, timeout, duration, { loop = false, easing = 'linear' } = {}) {
+    constructor(options) {
         var _a;
-        this.transition = transition;
-        this.timeout = timeout;
-        this.duration = duration !== null && duration !== void 0 ? duration : 0;
-        this.loop = loop;
-        this.easing = easing;
+        this.options = options;
+        this.options.easing = (_a = this.options.easing) !== null && _a !== void 0 ? _a : 'linear';
         this.id = null;
         this.time = 0.0;
+        this.counter = 0;
         this.offset = 0.0;
         this.status = 0;
         this.ticker = new Ticker((time) => {
-            var _a;
-            let p = Math.min(this.elapsed() / this.duration, 1.0);
-            if (easing === 'ease-out') {
+            var _a, _b;
+            let p = Math.min(this.elapsed() / this.options.duration, 1.0);
+            if (this.options.easing === 'ease-out') {
                 p = Math.pow((1.0 - Math.pow((1.0 - p), 2.0)), 0.5);
             }
-            else if (easing === 'ease-in') {
+            else if (this.options.easing === 'ease-in') {
                 p = Math.pow((1.0 - Math.pow((1.0 - p), 0.5)), 2.0);
             }
-            else if (easing === 'ease') {
-                p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
+            else if (this.options.easing === 'ease') {
+                p = (1.0 - Math.cos(p * Math.PI)) / 2.0; // todo
             }
-            else if (easing === 'ease-in-out') {
+            else if (this.options.easing === 'ease-in-out') {
                 p = (1.0 - Math.cos(p * Math.PI)) / 2.0;
             }
-            (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, p);
+            (_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);
-        if (this.duration > 0.0) {
-            (_a = this.transition) === null || _a === void 0 ? void 0 : _a.call(this, 0.0);
-        }
         this.start();
     }
     clear() {
@@ -182,14 +173,24 @@ class Timer {
     _start() {
         if (this.status === 1 && this.id === null) {
             this.id = setTimeout(() => {
-                var _a, _b;
-                (_a = this.timeout) === null || _a === void 0 ? void 0 : _a.call(this);
-                (_b = this.transition) === null || _b === void 0 ? void 0 : _b.call(this, 1.0);
+                var _a, _b, _c, _d;
+                (_b = (_a = this.options).transition) === null || _b === void 0 ? void 0 : _b.call(_a, 1.0);
+                (_d = (_c = this.options).timeout) === null || _d === void 0 ? void 0 : _d.call(_c, this.counter);
                 this.id = null;
                 this.time = 0.0;
+                this.counter++;
                 this.offset = 0.0;
-                this.loop ? this.start() : this.clear();
-            }, this.duration - this.offset);
+                if (this.options.iterations === undefined) {
+                    this.start();
+                }
+                else if (this.options.iterations > 1) {
+                    this.options.iterations--;
+                    this.start();
+                }
+                else {
+                    this.clear();
+                }
+            }, this.options.duration - this.offset);
             this.time = Date.now();
         }
     }
@@ -206,7 +207,7 @@ class Timer {
 //----------------------------------------------------------------------------------------------------
 // utils
 //----------------------------------------------------------------------------------------------------
-const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+const SYSTEM_EVENTS = ['-start', '-update', '-stop', '-finalize'];
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
@@ -299,10 +300,9 @@ class Unit {
             elements: [],
             promises: [],
             components: [],
-            listeners1: new MapMap(),
-            listeners2: new MapMap(),
+            listeners: new MapMap(),
             defines: {},
-            systems: { start: [], update: [], stop: [], finalize: [] },
+            systems: { '-start': [], '-update': [], '-stop': [], '-finalize': [] },
         });
         // nest html element
         if (typeof unit._.target === 'string') {
@@ -318,9 +318,8 @@ class Unit {
         if (unit._.state !== 'finalized') {
             unit._.state = 'finalized';
             unit._.children.forEach((child) => child.finalize());
-            unit._.systems.finalize.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems['-finalize'].forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             unit.off();
-            Unit.suboff(unit, null);
             unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
             if (unit._.elements.length > 0) {
                 unit._.baseElement.removeChild(unit._.elements[0]);
@@ -389,7 +388,7 @@ class Unit {
         if (unit._.state === 'initialized' || unit._.state === 'stopped') {
             unit._.state = 'started';
             unit._.children.forEach((child) => Unit.start(child));
-            unit._.systems.start.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems['-start'].forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
         }
         else if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.start(child));
@@ -399,13 +398,13 @@ class Unit {
         if (unit._.state === 'started') {
             unit._.state = 'stopped';
             unit._.children.forEach((child) => Unit.stop(child));
-            unit._.systems.stop.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems['-stop'].forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
         }
     }
     static update(unit) {
         if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.update(child));
-            unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            unit._.systems['-update'].forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
         }
     }
     static reset() {
@@ -413,7 +412,7 @@ class Unit {
         (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
         Unit.current = Unit.root = new Unit(null, null);
         (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
-        Unit.ticker = new Ticker((time) => {
+        Unit.ticker = new Ticker(() => {
             Unit.start(Unit.root);
             Unit.update(Unit.root);
         });
@@ -463,9 +462,9 @@ class Unit {
             if (SYSTEM_EVENTS.includes(type)) {
                 this._.systems[type].push(listener);
             }
-            if (this._.listeners1.has(type, listener) === false) {
+            if (this._.listeners.has(type, listener) === false) {
                 const execute = Unit.wrap(Unit.current, listener);
-                this._.listeners1.set(type, listener, { element: this.element, execute });
+                this._.listeners.set(type, listener, { element: this.element, execute });
                 Unit.type2units.add(type, this);
                 if (/^[A-Za-z]/.test(type)) {
                     this.element.addEventListener(type, execute, options);
@@ -474,21 +473,21 @@ class Unit {
         });
     }
     off(type, listener) {
-        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners1.keys()];
+        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
         types.forEach((type) => {
             if (SYSTEM_EVENTS.includes(type)) {
                 this._.systems[type] = this._.systems[type].filter((lis) => listener ? lis !== listener : false);
             }
-            (listener ? [listener] : [...this._.listeners1.keys(type)]).forEach((listener) => {
-                const item = this._.listeners1.get(type, listener);
+            (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((listener) => {
+                const item = this._.listeners.get(type, listener);
                 if (item !== undefined) {
-                    this._.listeners1.delete(type, listener);
+                    this._.listeners.delete(type, listener);
                     if (/^[A-Za-z]/.test(type)) {
                         item.element.removeEventListener(type, item.execute);
                     }
                 }
             });
-            if (this._.listeners1.has(type) === false) {
+            if (this._.listeners.has(type) === false) {
                 Unit.type2units.delete(type, this);
             }
         });
@@ -498,34 +497,13 @@ class Unit {
         if (type[0] === '+') {
             (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                 var _a;
-                (_a = unit._.listeners1.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(...args));
+                (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.execute(...args));
             });
         }
         else if (type[0] === '-') {
-            (_b = this._.listeners1.get(type)) === null || _b === void 0 ? void 0 : _b.forEach((item) => item.execute(...args));
+            (_b = this._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach((item) => item.execute(...args));
         }
     }
-    static subon(unit, target, type, listener, options) {
-        type.trim().split(/\s+/).forEach((type) => {
-            if (unit._.listeners2.has(type, listener) === false) {
-                const execute = Unit.wrap(unit, listener);
-                unit._.listeners2.set(type, listener, { element: target, execute });
-                target.addEventListener(type, execute, options);
-            }
-        });
-    }
-    static suboff(unit, target, type, listener) {
-        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...unit._.listeners2.keys()];
-        types.forEach((type) => {
-            (listener ? [listener] : [...unit._.listeners2.keys(type)]).forEach((listener) => {
-                const item = unit._.listeners2.get(type, listener);
-                if (item !== undefined && (target === null || target === item.element)) {
-                    unit._.listeners2.delete(type, listener);
-                    item.element.removeEventListener(type, item.execute);
-                }
-            });
-        });
-    }
 }
 Unit.component2units = new MapSet();
 //----------------------------------------------------------------------------------------------------
@@ -554,54 +532,57 @@ class UnitPromise {
 // unit timer
 //----------------------------------------------------------------------------------------------------
 class UnitTimer {
-    constructor({ transition, timeout, duration, easing, loop }) {
+    constructor(options) {
         this.stack = [];
-        this.unit = new Unit(Unit.current, UnitTimer.Component, { snapshot: Unit.snapshot(Unit.current), transition, timeout, duration, easing, loop });
+        this.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
     }
     clear() {
         this.stack = [];
         this.unit.finalize();
     }
     timeout(timeout, duration = 0) {
-        UnitTimer.execute(this, { timeout, duration });
+        UnitTimer.execute(this, { timeout, duration, iterations: 1 });
         return this;
     }
     transition(transition, duration = 0, easing = 'linear') {
-        UnitTimer.execute(this, { transition, duration, easing });
+        UnitTimer.execute(this, { transition, duration, easing, iterations: 1 });
         return this;
     }
-    static execute(timer, { transition, timeout, duration, easing, loop }) {
+    static execute(timer, options) {
         if (timer.unit._.state === 'finalized') {
-            timer.unit = new Unit(Unit.current, UnitTimer.Component, { snapshot: Unit.snapshot(Unit.current), transition, timeout, duration, easing, loop });
+            timer.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
         }
         else if (timer.stack.length === 0) {
-            timer.stack.push({ snapshot: Unit.snapshot(Unit.current), transition, timeout, duration, easing, loop });
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
+            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
         }
         else {
-            timer.stack.push({ snapshot: Unit.snapshot(Unit.current), transition, timeout, duration, easing, loop });
+            timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
         }
     }
     static next(timer) {
         if (timer.stack.length > 0) {
             timer.unit = new Unit(Unit.current, UnitTimer.Component, timer.stack.shift());
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
-        }
-    }
-    static Component(unit, { snapshot, transition, timeout, duration, loop, easing }) {
-        const timer = new Timer((x) => {
-            if (transition !== undefined)
-                Unit.scope(snapshot, transition, x);
-        }, () => {
-            if (transition !== undefined)
-                Unit.scope(snapshot, transition, 1.0);
-            if (timeout !== undefined)
-                Unit.scope(snapshot, timeout);
-            if (loop === false) {
-                unit.finalize();
-            }
-        }, duration, { loop, easing });
-        unit.on('finalize', () => timer.clear());
+            timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
+        }
+    }
+    static Component(unit, options) {
+        const timer = new Timer({
+            transition: (x) => {
+                if (options.transition !== undefined)
+                    Unit.scope(options.snapshot, options.transition, x);
+            },
+            timeout: (count) => {
+                if (options.transition !== undefined)
+                    Unit.scope(options.snapshot, options.transition, 1.0);
+                if (options.timeout !== undefined)
+                    Unit.scope(options.snapshot, options.timeout);
+                if (options.iterations !== undefined && count >= options.iterations - 1) {
+                    unit.finalize();
+                }
+            }, duration: options.duration, iterations: options.iterations, easing: options.easing
+        });
+        unit.on('-finalize', () => timer.clear());
     }
 }
 
@@ -792,7 +773,7 @@ const xnew$1 = Object.assign(function (...args) {
      * // Cancel if needed: timer.clear()
      */
     timeout(timeout, duration = 0) {
-        return new UnitTimer({ timeout, duration });
+        return new UnitTimer({ timeout, duration, iterations: 1 });
     },
     /**
      * Executes a callback repeatedly at specified intervals, managed by component lifecycle
@@ -803,8 +784,8 @@ const xnew$1 = Object.assign(function (...args) {
      * const timer = xnew.interval(() => console.log('Tick'), 1000)
      * // Stop when needed: timer.clear()
      */
-    interval(timeout, duration) {
-        return new UnitTimer({ timeout, duration, loop: true });
+    interval(timeout, duration, iterations) {
+        return new UnitTimer({ timeout, duration, iterations });
     },
     /**
      * Creates a transition animation with easing, executing callback with progress values
@@ -820,27 +801,8 @@ const xnew$1 = Object.assign(function (...args) {
      * }, 300)
      */
     transition(transition, duration = 0, easing = 'linear') {
-        return new UnitTimer({ transition, duration, easing });
-    },
-    /**
-     * Creates an event listener manager for a target element with automatic cleanup
-     * @param target - Element, Window, or Document to attach listeners to
-     * @returns Object with on() and off() methods for managing event listeners
-     * @example
-     * const mouse = xnew.listener(window)
-     * mouse.on('mousemove', (e) => console.log(e.clientX, e.clientY))
-     * // Automatically cleaned up when component finalizes
-     */
-    listener(target) {
-        return {
-            on(type, listener, options) {
-                Unit.subon(Unit.current, target, type, listener, options);
-            },
-            off(type, listener) {
-                Unit.suboff(Unit.current, target, type, listener);
-            }
-        };
-    },
+        return new UnitTimer({ transition, duration, easing, iterations: 1 });
+    }
 });
 
 function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
@@ -931,34 +893,40 @@ function ResizeEvent(resize) {
     if (resize.element) {
         observer.observe(resize.element);
     }
-    resize.on('finalize', () => {
+    resize.on('-finalize', () => {
         if (resize.element) {
             observer.unobserve(resize.element);
         }
     });
 }
-function KeyboardEvent(unit) {
+function KeyboardEvent(keyboard) {
     const state = {};
-    xnew$1.listener(window).on('keydown', (event) => {
+    window.addEventListener('keydown', keydown);
+    window.addEventListener('keyup', keyup);
+    function keydown(event) {
         state[event.code] = 1;
-        unit.emit('-keydown', { event, type: '-keydown', code: event.code });
-    });
-    xnew$1.listener(window).on('keyup', (event) => {
+        keyboard.emit('-keydown', { event, type: '-keydown', code: event.code });
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+            keyboard.emit('-keydown:arrow', { event, type: '-keydown:arrow', code: event.code, vector: getVector() });
+        }
+    }
+    function keyup(event) {
         state[event.code] = 0;
-        unit.emit('-keyup', { event, type: '-keyup', code: event.code });
-    });
-    xnew$1.listener(window).on('keydown', (event) => {
-        unit.emit('-arrowkeydown', { event, type: '-arrowkeydown', code: event.code, vector: getVector() });
-    });
-    xnew$1.listener(window).on('keyup', (event) => {
-        unit.emit('-arrowkeyup', { event, type: '-arrowkeyup', code: event.code, vector: getVector() });
-    });
+        keyboard.emit('-keyup', { event, type: '-keyup', code: event.code });
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+            keyboard.emit('-keyup:arrow', { event, type: '-keyup:arrow', code: event.code, vector: getVector() });
+        }
+    }
     function getVector() {
         return {
             x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
             y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
         };
     }
+    keyboard.on('-finalize', () => {
+        window.removeEventListener('keydown', keydown);
+        window.removeEventListener('keyup', keyup);
+    });
 }
 function PointerEvent(unit) {
     const internal = xnew$1();
@@ -966,8 +934,32 @@ function PointerEvent(unit) {
     internal.on('pointermove', (event) => unit.emit('-pointermove', { event, position: getPosition(unit.element, event) }));
     internal.on('pointerup', (event) => unit.emit('-pointerup', { event, position: getPosition(unit.element, event) }));
     internal.on('wheel', (event) => unit.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
-    internal.on('mouseover', (event) => unit.emit('-mouseover', { event, position: getPosition(unit.element, event) }));
-    internal.on('mouseout', (event) => unit.emit('-mouseout', { event, position: getPosition(unit.element, event) }));
+    internal.on('click', (event) => unit.emit('-click', { event, position: getPosition(unit.element, event) }));
+    internal.on('pointerover', (event) => unit.emit('-pointerover', { event, position: getPosition(unit.element, event) }));
+    internal.on('pointerout', (event) => unit.emit('-pointerout', { event, position: getPosition(unit.element, event) }));
+    document.addEventListener('pointerdown', pointerdownoutside);
+    document.addEventListener('pointerup', pointerupoutside);
+    document.addEventListener('click', clickoutside);
+    unit.on('-finalize', () => {
+        document.removeEventListener('pointerdown', pointerdownoutside);
+        document.removeEventListener('pointerup', pointerupoutside);
+        document.removeEventListener('click', clickoutside);
+    });
+    function pointerdownoutside(event) {
+        if (unit.element.contains(event.target) === false) {
+            unit.emit('-pointerdown:outside', { event, position: getPosition(unit.element, event) });
+        }
+    }
+    function pointerupoutside(event) {
+        if (unit.element.contains(event.target) === false) {
+            unit.emit('-pointerup:outside', { event, position: getPosition(unit.element, event) });
+        }
+    }
+    function clickoutside(event) {
+        if (unit.element.contains(event.target) === false) {
+            unit.emit('-click:outside', { event, position: getPosition(unit.element, event) });
+        }
+    }
     const drag = xnew$1(DragEvent);
     drag.on('-dragstart', (...args) => unit.emit('-dragstart', ...args));
     drag.on('-dragmove', (...args) => unit.emit('-dragmove', ...args));
@@ -980,36 +972,50 @@ function PointerEvent(unit) {
     gesture.on('-gesturecancel', (...args) => unit.emit('-gesturecancel', ...args));
 }
 function DragEvent(unit) {
-    xnew$1().on('pointerdown', (event) => {
+    unit.on('pointerdown', pointerdown);
+    function pointerdown(event) {
         const id = event.pointerId;
         const position = getPosition(unit.element, event);
         let previous = position;
-        xnew$1(() => {
-            xnew$1.listener(window).on('pointermove', (event) => {
+        xnew$1((internal) => {
+            let connect = true;
+            window.addEventListener('pointermove', pointermove);
+            window.addEventListener('pointerup', pointerup);
+            window.addEventListener('pointercancel', pointercancel);
+            function pointermove(event) {
                 if (event.pointerId === id) {
                     const position = getPosition(unit.element, event);
                     const delta = { x: position.x - previous.x, y: position.y - previous.y };
                     unit.emit('-dragmove', { event, position, delta });
                     previous = position;
                 }
-            });
-            xnew$1.listener(window).on('pointerup', (event) => {
+            }
+            function pointerup(event) {
                 if (event.pointerId === id) {
                     const position = getPosition(unit.element, event);
                     unit.emit('-dragend', { event, position, });
-                    xnew$1.listener(window).off();
+                    remove();
                 }
-            });
-            xnew$1.listener(window).on('pointercancel', (event) => {
+            }
+            function pointercancel(event) {
                 if (event.pointerId === id) {
                     const position = getPosition(unit.element, event);
                     unit.emit('-dragcancel', { event, position, });
-                    xnew$1.listener(window).off();
+                    remove();
                 }
-            });
+            }
+            function remove() {
+                if (connect === true) {
+                    window.removeEventListener('pointermove', pointermove);
+                    window.removeEventListener('pointerup', pointerup);
+                    window.removeEventListener('pointercancel', pointercancel);
+                    connect = false;
+                }
+            }
+            internal.on('-finalize', remove);
         });
         unit.emit('-dragstart', { event, position });
-    });
+    }
 }
 function GestureEvent(unit) {
     const drag = xnew$1(DragEvent);
@@ -1415,7 +1421,7 @@ function initialize() {
 }
 const audio = {
     load(path) {
-        return new AudioFile(path);
+        return AudioFile.load(path);
     },
     synthesizer(props) {
         return new Synthesizer(props);
@@ -1441,43 +1447,69 @@ class AudioFile {
             .catch(() => {
             console.warn(`"${path}" could not be loaded.`);
         });
+        this.amp = context.createGain();
+        this.amp.gain.value = 1.0;
+        this.amp.connect(master);
+        this.fade = context.createGain();
+        this.fade.gain.value = 1.0;
+        this.fade.connect(this.amp);
+        this.source = null;
         this.start = null;
     }
-    // set volume(value: number) {
-    //     this.amp.gain.value = value;
-    // }
-    // get volume(): number {
-    //     return this.amp.gain.value;
-    // }
-    play(offset = 0, loop = false) {
+    set volume(value) {
+        this.amp.gain.value = value;
+    }
+    get volume() {
+        return this.amp.gain.value;
+    }
+    play({ offset = 0, loop = false, fade = 0 } = {}) {
         if (this.buffer !== undefined && this.start === null) {
             this.source = context.createBufferSource();
             this.source.buffer = this.buffer;
             this.source.loop = loop;
-            this.amp = context.createGain();
-            this.amp.gain.value = 1.0;
-            this.source.connect(this.amp);
-            this.amp.connect(master);
+            this.source.connect(this.fade);
             this.start = context.currentTime;
             this.source.playbackRate.value = 1;
             this.source.start(context.currentTime, offset / 1000);
+            // Apply fade-in effect if fade duration is specified
+            if (fade > 0) {
+                this.fade.gain.setValueAtTime(0, context.currentTime);
+                this.fade.gain.linearRampToValueAtTime(1.0, context.currentTime + fade / 1000);
+            }
             this.source.onended = () => {
-                var _a, _b;
+                var _a;
                 this.start = null;
                 (_a = this.source) === null || _a === void 0 ? void 0 : _a.disconnect();
-                (_b = this.amp) === null || _b === void 0 ? void 0 : _b.disconnect();
+                this.source = null;
             };
         }
     }
-    pause() {
-        var _a;
+    pause({ fade = 0 } = {}) {
+        var _a, _b;
         if (this.buffer !== undefined && this.start !== null) {
-            (_a = this.source) === null || _a === void 0 ? void 0 : _a.stop(context.currentTime);
             const elapsed = (context.currentTime - this.start) % this.buffer.duration * 1000;
+            // Apply fade-out effect if fade duration is specified
+            if (fade > 0) {
+                this.fade.gain.setValueAtTime(1.0, context.currentTime);
+                this.fade.gain.linearRampToValueAtTime(0, context.currentTime + fade / 1000);
+                (_a = this.source) === null || _a === void 0 ? void 0 : _a.stop(context.currentTime + fade / 1000);
+            }
+            else {
+                (_b = this.source) === null || _b === void 0 ? void 0 : _b.stop(context.currentTime);
+            }
             this.start = null;
             return elapsed;
         }
     }
+    static load(path) {
+        const music = new AudioFile(path);
+        return xnew$1.promise(music.promise).then(() => music);
+    }
+    static clear(file) {
+        var _a;
+        file.amp.disconnect();
+        (_a = file.source) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
 }
 const keymap = {
     'A0': 27.500, 'A#0': 29.135, 'B0': 30.868,
@@ -1562,7 +1594,7 @@ class Synthesizer {
             if (props.amp.envelope) {
                 const ADSR = props.amp.envelope.ADSR;
                 const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
-                const rate = adsr[0] === 0.0 ? 1.0 : Math.min(end / adsr[0], 1.0);
+                const rate = adsr[0] === 0.0 ? 1.0 : Math.min(end / (adsr[0] + 0.001), 1.0);
                 stop = start + Math.max((adsr[0] + adsr[1]) * rate, end) + adsr[3];
             }
             else {
@@ -1592,7 +1624,8 @@ class Synthesizer {
             }, 2000);
         }
         function stopEnvelope(param, base, amount, ADSR) {
-            const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(dv / (ADSR[0] / 1000), 1.0);
+            const end = dv > 0 ? dv : (context.currentTime - start);
+            const rate = ADSR[0] === 0.0 ? 1.0 : Math.min(end / (ADSR[0] / 1000), 1.0);
             if (rate < 1.0) {
                 param.cancelScheduledValues(start);
                 param.setValueAtTime(base, start);
@@ -1600,7 +1633,7 @@ class Synthesizer {
                 param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + (ADSR[0] + ADSR[1]) / 1000 * rate);
             }
             param.linearRampToValueAtTime(base + amount * rate * ADSR[2], start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv));
-            param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, dv) + ADSR[3] / 1000);
+            param.linearRampToValueAtTime(base, start + Math.max((ADSR[0] + ADSR[1]) / 1000 * rate, end) + ADSR[3] / 1000);
         }
         function startEnvelope(param, base, amount, ADSR) {
             param.value = base;

package/package.json

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