@mulsense/xnew 0.1.12 → 0.2.0

package/README.md

@@ -13,7 +13,7 @@ providing a flexible architecture well-suited for applications with dynamic scen
 ### Via CDN
 Include the following script in your HTML file:
 ```html
-<script src="https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.js"></script>
+<script src="https://unpkg.com/@mulsense/xnew@0.2.x/dist/xnew.js"></script>
 ```
 
 ### Via CDN (ESM)
@@ -22,7 +22,7 @@ Use the ES module version with an import map:
 <script type="importmap">
 {
     "imports": {
-        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.mjs"
+        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.2.x/dist/xnew.mjs"
     }
 }
 </script>
@@ -37,7 +37,7 @@ import xnew from '@mulsense/xnew';
 ### Via npm
 Install `xnew` using npm:
 ```bash
-npm install @mulsense/xnew@0.1.x
+npm install @mulsense/xnew@0.2.x
 ```
 
 Then import it in your JavaScript file:

package/dist/addons/xmatter.js

@@ -23,7 +23,7 @@
         root.isActive = true;
         root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
         xnew.context('xmatter.object', root.engine.world);
-        self.on('update', () => {
+        self.on('-update', () => {
             if (root.isActive) {
                 Matter.Engine.update(root.engine);
             }
@@ -33,7 +33,7 @@
         const parent = xnew.context('xmatter.object');
         xnew.context('xmatter.object', object);
         Matter.Composite.add(parent, object);
-        self.on('finalize', () => {
+        self.on('-finalize', () => {
             Matter.Composite.remove(parent, object);
         });
     }

package/dist/addons/xmatter.mjs

@@ -20,7 +20,7 @@ function Root(self, { engine }) {
     root.isActive = true;
     root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
     xnew.context('xmatter.object', root.engine.world);
-    self.on('update', () => {
+    self.on('-update', () => {
         if (root.isActive) {
             Matter.Engine.update(root.engine);
         }
@@ -30,7 +30,7 @@ function Nest(self, { object }) {
     const parent = xnew.context('xmatter.object');
     xnew.context('xmatter.object', object);
     Matter.Composite.add(parent, object);
-    self.on('finalize', () => {
+    self.on('-finalize', () => {
         Matter.Composite.remove(parent, object);
     });
 }

package/dist/addons/xpixi.js

@@ -50,13 +50,6 @@
             var _a;
             return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
         },
-        capture() {
-            var _a, _b;
-            const render = (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.renderer;
-            const scene = (_b = xnew.context('xpixi.root')) === null || _b === void 0 ? void 0 : _b.scene;
-            const canvas = render.extract.canvas(scene);
-            return canvas.toDataURL('image/png', 1.0);
-        }
     };
     function Root(self, { canvas }) {
         const root = {};
@@ -76,7 +69,7 @@
         root.updates = [];
         root.scene = new PIXI__namespace.Container();
         xnew.context('xpixi.object', root.scene);
-        self.on('update', () => {
+        self.on('-update', () => {
             root.updates.forEach((update) => {
                 update();
             });
@@ -89,14 +82,14 @@
         const parent = xnew.context('xpixi.object');
         xnew.context('xpixi.object', object);
         parent.addChild(object);
-        self.on('finalize', () => {
+        self.on('-finalize', () => {
             parent.removeChild(object);
         });
     }
     function PreUpdate(self, callback) {
         const root = xnew.context('xpixi.root');
         root.updates.push(callback);
-        self.on('finalize', () => {
+        self.on('-finalize', () => {
             root.updates = root.updates.filter((update) => update !== callback);
         });
     }

package/dist/addons/xpixi.mjs

@@ -28,13 +28,6 @@ var xpixi = {
         var _a;
         return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
     },
-    capture() {
-        var _a, _b;
-        const render = (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.renderer;
-        const scene = (_b = xnew.context('xpixi.root')) === null || _b === void 0 ? void 0 : _b.scene;
-        const canvas = render.extract.canvas(scene);
-        return canvas.toDataURL('image/png', 1.0);
-    }
 };
 function Root(self, { canvas }) {
     const root = {};
@@ -54,7 +47,7 @@ function Root(self, { canvas }) {
     root.updates = [];
     root.scene = new PIXI.Container();
     xnew.context('xpixi.object', root.scene);
-    self.on('update', () => {
+    self.on('-update', () => {
         root.updates.forEach((update) => {
             update();
         });
@@ -67,14 +60,14 @@ function Nest(self, { object }) {
     const parent = xnew.context('xpixi.object');
     xnew.context('xpixi.object', object);
     parent.addChild(object);
-    self.on('finalize', () => {
+    self.on('-finalize', () => {
         parent.removeChild(object);
     });
 }
 function PreUpdate(self, callback) {
     const root = xnew.context('xpixi.root');
     root.updates.push(callback);
-    self.on('finalize', () => {
+    self.on('-finalize', () => {
         root.updates = root.updates.filter((update) => update !== callback);
     });
 }

package/dist/addons/xrapier2d.js

@@ -27,7 +27,7 @@
             }
             // xnew.extend(Nest, root.world);
         });
-        self.on('update', () => {
+        self.on('-update', () => {
             if (root.world) {
                 root.world.step();
             }
@@ -40,7 +40,7 @@
         console.log(temp, type, object);
         // Rapier2D objects (RigidBody, Collider, etc.) are already added to the world
         // when created, so we only need to handle removal on finalize
-        self.on('finalize', () => {
+        self.on('-finalize', () => {
             try {
                 // Check if object is a RigidBody
                 if (type === 'rigidBody') {

package/dist/addons/xrapier2d.mjs

@@ -24,7 +24,7 @@ function Root(self, { gravity, timestep }) {
         }
         // xnew.extend(Nest, root.world);
     });
-    self.on('update', () => {
+    self.on('-update', () => {
         if (root.world) {
             root.world.step();
         }
@@ -37,7 +37,7 @@ function Connect(self, { type, object }) {
     console.log(temp, type, object);
     // Rapier2D objects (RigidBody, Collider, etc.) are already added to the world
     // when created, so we only need to handle removal on finalize
-    self.on('finalize', () => {
+    self.on('-finalize', () => {
         try {
             // Check if object is a RigidBody
             if (type === 'rigidBody') {

package/dist/addons/xthree.js

@@ -57,7 +57,7 @@
         root.camera = camera !== null && camera !== void 0 ? camera : new THREE__namespace.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
         root.scene = new THREE__namespace.Scene();
         xnew.context('xthree.object', root.scene);
-        self.on('update', () => {
+        self.on('-update', () => {
             root.renderer.render(root.scene, root.camera);
         });
     }
@@ -66,7 +66,7 @@
         xnew.context('xthree.object', object);
         if (parent) {
             parent === null || parent === void 0 ? void 0 : parent.add(object);
-            self.on('finalize', () => {
+            self.on('-finalize', () => {
                 parent === null || parent === void 0 ? void 0 : parent.remove(object);
             });
         }

package/dist/addons/xthree.mjs

@@ -35,7 +35,7 @@ function Root(self, { canvas, camera }) {
     root.camera = camera !== null && camera !== void 0 ? camera : new THREE.PerspectiveCamera(45, root.renderer.domElement.width / root.renderer.domElement.height);
     root.scene = new THREE.Scene();
     xnew.context('xthree.object', root.scene);
-    self.on('update', () => {
+    self.on('-update', () => {
         root.renderer.render(root.scene, root.camera);
     });
 }
@@ -44,7 +44,7 @@ function Nest(self, { object }) {
     xnew.context('xthree.object', object);
     if (parent) {
         parent === null || parent === void 0 ? void 0 : parent.add(object);
-        self.on('finalize', () => {
+        self.on('-finalize', () => {
             parent === null || parent === void 0 ? void 0 : parent.remove(object);
         });
     }

package/dist/types/audio/audio.d.ts

@@ -1,18 +1,8 @@
 export declare const audio: {
-    load(path: string): AudioFile;
+    load(path: string): import("../core/unit").UnitPromise;
     synthesizer(props: SynthProps): Synthesizer;
     volume: number;
 };
-declare class AudioFile {
-    buffer?: AudioBuffer;
-    promise: Promise<void>;
-    source?: AudioBufferSourceNode;
-    amp?: GainNode;
-    start: number | null;
-    constructor(path: string);
-    play(offset?: number, loop?: boolean): void;
-    pause(): number | undefined;
-}
 type SynthProps = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;

package/dist/types/core/time.d.ts

@@ -1,6 +1,6 @@
 export declare class Ticker {
     private id;
-    constructor(callback: Function);
+    constructor(callback: Function, fps?: number);
     clear(): void;
 }
 export interface TimerOptions {

package/dist/types/core/xnew.d.ts

@@ -153,6 +153,5 @@ export declare const xnew: CreateUnit & {
      * }, 300)
      */
     transition(transition: Function, duration?: number, easing?: string): any;
-    style(text: string): void;
 };
 export {};

package/dist/xnew.d.ts

@@ -22,7 +22,7 @@ declare class MapMap<Key1, Key2, Value> extends Map<Key1, Map<Key2, Value>> {
 
 declare class Ticker {
     private id;
-    constructor(callback: Function);
+    constructor(callback: Function, fps?: number);
     clear(): void;
 }
 
@@ -257,7 +257,6 @@ declare const xnew$1: CreateUnit & {
      * }, 300)
      */
     transition(transition: Function, duration?: number, easing?: string): any;
-    style(text: string): void;
 };
 
 declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
@@ -360,20 +359,10 @@ declare function DirectionalPad(self: Unit, { size, diagonal, fill, fillOpacity,
 }): void;
 
 declare const audio: {
-    load(path: string): AudioFile;
+    load(path: string): UnitPromise;
     synthesizer(props: SynthProps): Synthesizer;
     volume: number;
 };
-declare class AudioFile {
-    buffer?: AudioBuffer;
-    promise: Promise<void>;
-    source?: AudioBufferSourceNode;
-    amp?: GainNode;
-    start: number | null;
-    constructor(path: string);
-    play(offset?: number, loop?: boolean): void;
-    pause(): number | undefined;
-}
 type SynthProps = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;

package/dist/xnew.js

@@ -105,17 +105,16 @@
     // 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);
             }
@@ -147,7 +146,7 @@
                     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;
+                    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;
@@ -214,7 +213,7 @@
     //----------------------------------------------------------------------------------------------------
     // utils
     //----------------------------------------------------------------------------------------------------
-    const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['-start', '-update', '-stop', '-finalize'];
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
@@ -309,7 +308,7 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], update: [], stop: [], finalize: [] },
+                systems: { '-start': [], '-update': [], '-stop': [], '-finalize': [] },
             });
             // nest html element
             if (typeof unit._.target === 'string') {
@@ -325,7 +324,7 @@
             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._.components.forEach((component) => Unit.component2units.delete(component, unit));
                 if (unit._.elements.length > 0) {
@@ -395,7 +394,7 @@
             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));
@@ -405,13 +404,13 @@
             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() {
@@ -419,7 +418,7 @@
             (_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);
             });
@@ -561,7 +560,7 @@
             }
             else if (timer.stack.length === 0) {
                 timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
-                timer.unit.on('finalize', () => { UnitTimer.next(timer); });
+                timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
             }
             else {
                 timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
@@ -570,7 +569,7 @@
         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); });
+                timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
             }
         }
         static Component(unit, options) {
@@ -589,7 +588,7 @@
                     }
                 }, duration: options.duration, iterations: options.iterations, easing: options.easing
             });
-            unit.on('finalize', () => timer.clear());
+            unit.on('-finalize', () => timer.clear());
         }
     }
 
@@ -809,15 +808,6 @@
          */
         transition(transition, duration = 0, easing = 'linear') {
             return new UnitTimer({ transition, duration, easing, iterations: 1 });
-        },
-        style(text) {
-            const unit = new Unit(Unit.current);
-            const style = document.createElement('style');
-            style.textContent = text;
-            document.head.appendChild(style);
-            unit.on('finalize', () => {
-                document.head.removeChild(style);
-            });
         }
     });
 
@@ -909,7 +899,7 @@
         if (resize.element) {
             observer.observe(resize.element);
         }
-        resize.on('finalize', () => {
+        resize.on('-finalize', () => {
             if (resize.element) {
                 observer.unobserve(resize.element);
             }
@@ -939,7 +929,7 @@
                 y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
             };
         }
-        keyboard.on('finalize', () => {
+        keyboard.on('-finalize', () => {
             window.removeEventListener('keydown', keydown);
             window.removeEventListener('keyup', keyup);
         });
@@ -950,8 +940,32 @@
         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));
@@ -1004,7 +1018,7 @@
                         connect = false;
                     }
                 }
-                internal.on('finalize', remove);
+                internal.on('-finalize', remove);
             });
             unit.emit('-dragstart', { event, position });
         }
@@ -1413,7 +1427,7 @@
     }
     const audio = {
         load(path) {
-            return new AudioFile(path);
+            return AudioFile.load(path);
         },
         synthesizer(props) {
             return new Synthesizer(props);
@@ -1439,43 +1453,69 @@
                 .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,
@@ -1560,7 +1600,7 @@
                 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 {
@@ -1590,7 +1630,8 @@
                 }, 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);
@@ -1598,7 +1639,7 @@
                     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/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);
         }
@@ -141,7 +140,7 @@ class Timer {
                 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;
+                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;
@@ -208,7 +207,7 @@ class Timer {
 //----------------------------------------------------------------------------------------------------
 // utils
 //----------------------------------------------------------------------------------------------------
-const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+const SYSTEM_EVENTS = ['-start', '-update', '-stop', '-finalize'];
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
@@ -303,7 +302,7 @@ class Unit {
             components: [],
             listeners: new MapMap(),
             defines: {},
-            systems: { start: [], update: [], stop: [], finalize: [] },
+            systems: { '-start': [], '-update': [], '-stop': [], '-finalize': [] },
         });
         // nest html element
         if (typeof unit._.target === 'string') {
@@ -319,7 +318,7 @@ 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._.components.forEach((component) => Unit.component2units.delete(component, unit));
             if (unit._.elements.length > 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);
         });
@@ -555,7 +554,7 @@ class UnitTimer {
         }
         else if (timer.stack.length === 0) {
             timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
-            timer.unit.on('finalize', () => { UnitTimer.next(timer); });
+            timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
         }
         else {
             timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
@@ -564,7 +563,7 @@ class UnitTimer {
     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); });
+            timer.unit.on('-finalize', () => { UnitTimer.next(timer); });
         }
     }
     static Component(unit, options) {
@@ -583,7 +582,7 @@ class UnitTimer {
                 }
             }, duration: options.duration, iterations: options.iterations, easing: options.easing
         });
-        unit.on('finalize', () => timer.clear());
+        unit.on('-finalize', () => timer.clear());
     }
 }
 
@@ -803,15 +802,6 @@ const xnew$1 = Object.assign(function (...args) {
      */
     transition(transition, duration = 0, easing = 'linear') {
         return new UnitTimer({ transition, duration, easing, iterations: 1 });
-    },
-    style(text) {
-        const unit = new Unit(Unit.current);
-        const style = document.createElement('style');
-        style.textContent = text;
-        document.head.appendChild(style);
-        unit.on('finalize', () => {
-            document.head.removeChild(style);
-        });
     }
 });
 
@@ -903,7 +893,7 @@ function ResizeEvent(resize) {
     if (resize.element) {
         observer.observe(resize.element);
     }
-    resize.on('finalize', () => {
+    resize.on('-finalize', () => {
         if (resize.element) {
             observer.unobserve(resize.element);
         }
@@ -933,7 +923,7 @@ function KeyboardEvent(keyboard) {
             y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
         };
     }
-    keyboard.on('finalize', () => {
+    keyboard.on('-finalize', () => {
         window.removeEventListener('keydown', keydown);
         window.removeEventListener('keyup', keyup);
     });
@@ -944,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));
@@ -998,7 +1012,7 @@ function DragEvent(unit) {
                     connect = false;
                 }
             }
-            internal.on('finalize', remove);
+            internal.on('-finalize', remove);
         });
         unit.emit('-dragstart', { event, position });
     }
@@ -1407,7 +1421,7 @@ function initialize() {
 }
 const audio = {
     load(path) {
-        return new AudioFile(path);
+        return AudioFile.load(path);
     },
     synthesizer(props) {
         return new Synthesizer(props);
@@ -1433,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,
@@ -1554,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 {
@@ -1584,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);
@@ -1592,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.12",
+  "version": "0.2.0",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",