@mulsense/xnew 0.3.5 → 0.3.7

package/dist/addons/xmatter.js

@@ -21,7 +21,7 @@
         const root = {};
         xnew.context('xmatter.root', root);
         root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
-        unit.on('update', () => {
+        unit.on('process', () => {
             Matter.Engine.update(root.engine);
         });
     }

package/dist/addons/xmatter.mjs

@@ -18,7 +18,7 @@ function Root(unit, { engine }) {
     const root = {};
     xnew.context('xmatter.root', root);
     root.engine = engine !== null && engine !== void 0 ? engine : Matter.Engine.create();
-    unit.on('update', () => {
+    unit.on('process', () => {
         Matter.Engine.update(root.engine);
     });
 }

package/dist/addons/xpixi.js

@@ -51,7 +51,7 @@
             return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
         },
     };
-    function Root(self, { canvas }) {
+    function Root(unit, { canvas }) {
         const root = {};
         xnew.context('xpixi.root', root);
         root.canvas = canvas;
@@ -63,7 +63,7 @@
         root.updates = [];
         root.scene = new PIXI__namespace.Container();
         xnew.context('xpixi.object', root.scene);
-        self.on('update', () => {
+        unit.on('update', () => {
             root.updates.forEach((update) => {
                 update();
             });
@@ -72,18 +72,18 @@
             }
         });
     }
-    function Nest(self, { object }) {
+    function Nest(unit, { object }) {
         const parent = xnew.context('xpixi.object');
         xnew.context('xpixi.object', object);
         parent.addChild(object);
-        self.on('finalize', () => {
+        unit.on('finalize', () => {
             parent.removeChild(object);
         });
     }
-    function PreUpdate(self, callback) {
+    function PreUpdate(unit, callback) {
         const root = xnew.context('xpixi.root');
         root.updates.push(callback);
-        self.on('finalize', () => {
+        unit.on('finalize', () => {
             root.updates = root.updates.filter((update) => update !== callback);
         });
     }

package/dist/addons/xpixi.mjs

@@ -29,7 +29,7 @@ var xpixi = {
         return (_a = xnew.context('xpixi.root')) === null || _a === void 0 ? void 0 : _a.canvas;
     },
 };
-function Root(self, { canvas }) {
+function Root(unit, { canvas }) {
     const root = {};
     xnew.context('xpixi.root', root);
     root.canvas = canvas;
@@ -41,7 +41,7 @@ function Root(self, { canvas }) {
     root.updates = [];
     root.scene = new PIXI.Container();
     xnew.context('xpixi.object', root.scene);
-    self.on('update', () => {
+    unit.on('update', () => {
         root.updates.forEach((update) => {
             update();
         });
@@ -50,18 +50,18 @@ function Root(self, { canvas }) {
         }
     });
 }
-function Nest(self, { object }) {
+function Nest(unit, { object }) {
     const parent = xnew.context('xpixi.object');
     xnew.context('xpixi.object', object);
     parent.addChild(object);
-    self.on('finalize', () => {
+    unit.on('finalize', () => {
         parent.removeChild(object);
     });
 }
-function PreUpdate(self, callback) {
+function PreUpdate(unit, callback) {
     const root = xnew.context('xpixi.root');
     root.updates.push(callback);
-    self.on('finalize', () => {
+    unit.on('finalize', () => {
         root.updates = root.updates.filter((update) => update !== callback);
     });
 }

package/dist/addons/xrapier2d.js

@@ -19,7 +19,7 @@
         xnew.promise(RAPIER.init()).then(() => {
             root.world = new RAPIER.World(gravity);
         });
-        self.on('update', () => {
+        self.on('process', () => {
             root.world.step();
         });
     }

package/dist/addons/xrapier2d.mjs

@@ -16,7 +16,7 @@ function Root(self, { gravity }) {
     xnew.promise(RAPIER.init()).then(() => {
         root.world = new RAPIER.World(gravity);
     });
-    self.on('update', () => {
+    self.on('process', () => {
         root.world.step();
     });
 }

package/dist/addons/xrapier3d.js

@@ -5,27 +5,22 @@
 })(this, (function (xnew, RAPIER) { 'use strict';
 
     var xrapier3d = {
-        initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 }, timestep = null } = {}) {
-            xnew.extend(Root, { gravity, timestep });
+        initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 } } = {}) {
+            xnew.extend(Root, { gravity });
         },
         get world() {
             var _a;
             return (_a = xnew.context('xrapier3d.root')) === null || _a === void 0 ? void 0 : _a.world;
         },
     };
-    function Root(self, { gravity, timestep }) {
+    function Root(self, { gravity }) {
         const root = {};
         xnew.context('xrapier3d.root', root);
         xnew.promise(RAPIER.init()).then(() => {
             root.world = new RAPIER.World(gravity);
-            if (timestep !== null) {
-                root.world.timestep = timestep;
-            }
         });
-        self.on('update', () => {
-            if (root.world) {
-                root.world.step();
-            }
+        self.on('process', () => {
+            root.world.step();
         });
     }
 

package/dist/addons/xrapier3d.mjs

@@ -2,27 +2,22 @@ import xnew from '@mulsense/xnew';
 import RAPIER from '@dimforge/rapier3d-compat';
 
 var xrapier3d = {
-    initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 }, timestep = null } = {}) {
-        xnew.extend(Root, { gravity, timestep });
+    initialize({ gravity = { x: 0.0, y: 9.81, z: 0.0 } } = {}) {
+        xnew.extend(Root, { gravity });
     },
     get world() {
         var _a;
         return (_a = xnew.context('xrapier3d.root')) === null || _a === void 0 ? void 0 : _a.world;
     },
 };
-function Root(self, { gravity, timestep }) {
+function Root(self, { gravity }) {
     const root = {};
     xnew.context('xrapier3d.root', root);
     xnew.promise(RAPIER.init()).then(() => {
         root.world = new RAPIER.World(gravity);
-        if (timestep !== null) {
-            root.world.timestep = timestep;
-        }
     });
-    self.on('update', () => {
-        if (root.world) {
-            root.world.step();
-        }
+    self.on('process', () => {
+        root.world.step();
     });
 }
 

package/dist/addons/xthree.js

@@ -64,12 +64,10 @@
     function Nest(unit, { object }) {
         const parent = xnew.context('xthree.object');
         xnew.context('xthree.object', object);
-        if (parent) {
-            parent === null || parent === void 0 ? void 0 : parent.add(object);
-            unit.on('finalize', () => {
-                parent === null || parent === void 0 ? void 0 : parent.remove(object);
-            });
-        }
+        parent.add(object);
+        unit.on('finalize', () => {
+            parent.remove(object);
+        });
     }
 
     return xthree;

package/dist/addons/xthree.mjs

@@ -42,12 +42,10 @@ function Root(unit, { canvas, camera }) {
 function Nest(unit, { object }) {
     const parent = xnew.context('xthree.object');
     xnew.context('xthree.object', object);
-    if (parent) {
-        parent === null || parent === void 0 ? void 0 : parent.add(object);
-        unit.on('finalize', () => {
-            parent === null || parent === void 0 ? void 0 : parent.remove(object);
-        });
-    }
+    parent.add(object);
+    unit.on('finalize', () => {
+        parent.remove(object);
+    });
 }
 
 export { xthree as default };

package/dist/xnew.d.ts

@@ -81,6 +81,7 @@ declare class Unit {
     static start(unit: Unit): void;
     static stop(unit: Unit): void;
     static update(unit: Unit): void;
+    static process(unit: Unit): void;
     static root: Unit;
     static current: Unit;
     static ticker: Ticker;
@@ -276,8 +277,6 @@ declare function AccordionContent(content: Unit, {}?: {}): {
 
 declare function ResizeEvent(resize: Unit): void;
 declare function DirectEvent(unit: Unit): void;
-declare function KeyboardEvent(keyboard: Unit): void;
-declare function PointerEvent(unit: Unit): void;
 
 declare function Screen(screen: Unit, { width, height, fit }?: {
     width?: number | undefined;
@@ -729,10 +728,8 @@ declare class Synthesizer {
 
 declare const basics: {
     Screen: typeof Screen;
-    PointerEvent: typeof PointerEvent;
     DirectEvent: typeof DirectEvent;
     ResizeEvent: typeof ResizeEvent;
-    KeyboardEvent: typeof KeyboardEvent;
     ModalFrame: typeof ModalFrame;
     ModalContent: typeof ModalContent;
     AccordionFrame: typeof AccordionFrame;

package/dist/xnew.js

@@ -209,7 +209,7 @@
     //----------------------------------------------------------------------------------------------------
     // utils
     //----------------------------------------------------------------------------------------------------
-    const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
     //----------------------------------------------------------------------------------------------------
     // unit
     //----------------------------------------------------------------------------------------------------
@@ -302,7 +302,7 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], process: [], update: [], stop: [], finalize: [] },
             });
             // nest html element
             if (typeof unit._.target === 'string') {
@@ -412,11 +412,17 @@
             }
         }
         static update(unit) {
-            if (unit._.state === 'started') {
+            if (unit._.state === 'started' || unit._.state === 'stopped') {
                 unit._.children.forEach((child) => Unit.update(child));
                 unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
             }
         }
+        static process(unit) {
+            if (unit._.state === 'started') {
+                unit._.children.forEach((child) => Unit.process(child));
+                unit._.systems.process.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+            }
+        }
         static reset() {
             var _a, _b;
             (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
@@ -424,6 +430,7 @@
             (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
             Unit.ticker = new Ticker(() => {
                 Unit.start(Unit.root);
+                Unit.process(Unit.root);
                 Unit.update(Unit.root);
             });
         }
@@ -935,6 +942,8 @@
     function DirectEvent(unit) {
         const state = {};
         const keydown = xnew$1.scope((event) => {
+            if (event.repeat)
+                return;
             state[event.code] = 1;
             xnew$1.emit('-keydown', { event, type: '-keydown', code: event.code });
             if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
@@ -1002,78 +1011,6 @@
         gesture.on('-gestureend', (...args) => xnew$1.emit('-gestureend', ...args));
         gesture.on('-gesturecancel', (...args) => xnew$1.emit('-gesturecancel', ...args));
     }
-    function KeyboardEvent(keyboard) {
-        const state = {};
-        const keydown = xnew$1.scope((event) => {
-            state[event.code] = 1;
-            xnew$1.emit('-keydown', { event, type: '-keydown', code: event.code });
-            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-                xnew$1.emit('-keydown.arrow', { event, type: '-keydown.arrow', code: event.code, vector: getVector() });
-            }
-        });
-        const keyup = xnew$1.scope((event) => {
-            state[event.code] = 0;
-            xnew$1.emit('-keyup', { event, type: '-keyup', code: event.code });
-            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-                xnew$1.emit('-keyup.arrow', { event, type: '-keyup.arrow', code: event.code, vector: getVector() });
-            }
-        });
-        window.addEventListener('keydown', keydown);
-        window.addEventListener('keyup', keyup);
-        keyboard.on('finalize', () => {
-            window.removeEventListener('keydown', keydown);
-            window.removeEventListener('keyup', keyup);
-        });
-        function getVector() {
-            return {
-                x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
-                y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
-            };
-        }
-    }
-    function PointerEvent(unit) {
-        const internal = xnew$1();
-        internal.on('pointerdown', (event) => xnew$1.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointermove', (event) => xnew$1.emit('-pointermove', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerup', (event) => xnew$1.emit('-pointerup', { event, position: getPosition(unit.element, event) }));
-        internal.on('wheel', (event) => xnew$1.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
-        internal.on('click', (event) => xnew$1.emit('-click', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerover', (event) => xnew$1.emit('-pointerover', { event, position: getPosition(unit.element, event) }));
-        internal.on('pointerout', (event) => xnew$1.emit('-pointerout', { event, position: getPosition(unit.element, event) }));
-        const pointerdownoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-pointerdown.outside', { event, position: getPosition(unit.element, event) });
-            }
-        });
-        const pointerupoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-pointerup.outside', { event, position: getPosition(unit.element, event) });
-            }
-        });
-        const clickoutside = xnew$1.scope((event) => {
-            if (unit.element.contains(event.target) === false) {
-                xnew$1.emit('-click.outside', { 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);
-        });
-        const drag = xnew$1(DragEvent);
-        drag.on('-dragstart', (...args) => xnew$1.emit('-dragstart', ...args));
-        drag.on('-dragmove', (...args) => xnew$1.emit('-dragmove', ...args));
-        drag.on('-dragend', (...args) => xnew$1.emit('-dragend', ...args));
-        drag.on('-dragcancel', (...args) => xnew$1.emit('-dragcancel', ...args));
-        const gesture = xnew$1(GestureEvent);
-        gesture.on('-gesturestart', (...args) => xnew$1.emit('-gesturestart', ...args));
-        gesture.on('-gesturemove', (...args) => xnew$1.emit('-gesturemove', ...args));
-        gesture.on('-gestureend', (...args) => xnew$1.emit('-gestureend', ...args));
-        gesture.on('-gesturecancel', (...args) => xnew$1.emit('-gesturecancel', ...args));
-    }
     function DragEvent(unit) {
         const pointerdown = xnew$1.scope((event) => {
             const id = event.pointerId;
@@ -1332,11 +1269,11 @@
     function DragTarget(target, {} = {}) {
         const { frame, absolute } = xnew$1.context('xnew.dragframe');
         xnew$1.nest('<div>');
-        const pointer = xnew$1(absolute.parentElement, PointerEvent);
+        const direct = xnew$1(absolute.parentElement, DirectEvent);
         const current = { x: 0, y: 0 };
         const offset = { x: 0, y: 0 };
         let dragged = false;
-        pointer.on('-dragstart', ({ event, position }) => {
+        direct.on('-dragstart', ({ event, position }) => {
             if (target.element.contains(event.target) === false)
                 return;
             dragged = true;
@@ -1345,7 +1282,7 @@
             current.x = position.x - offset.x;
             current.y = position.y - offset.y;
         });
-        pointer.on('-dragmove', ({ event, delta }) => {
+        direct.on('-dragmove', ({ event, delta }) => {
             if (dragged !== true)
                 return;
             current.x += delta.x;
@@ -1353,7 +1290,7 @@
             absolute.style.left = `${current.x}px`;
             absolute.style.top = `${current.y}px`;
         });
-        pointer.on('-dragcancel -dragend', ({ event }) => {
+        direct.on('-dragcancel -dragend', ({ event }) => {
             dragged = false;
         });
     }
@@ -1390,22 +1327,22 @@
                 xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
                 xnew$1('<circle cx="50" cy="50" r="23">');
             });
-            const pointer = xnew$1(PointerEvent);
-            pointer.on('-dragstart', ({ event, position }) => {
+            const direct = xnew$1(DirectEvent);
+            direct.on('-dragstart', ({ event, position }) => {
                 const vector = getVector(position);
                 target.element.style.filter = 'brightness(90%)';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
                 target.element.style.top = vector.y * newsize / 4 + 'px';
                 xnew$1.emit('-down', { vector });
             });
-            pointer.on('-dragmove', ({ event, position }) => {
+            direct.on('-dragmove', ({ event, position }) => {
                 const vector = getVector(position);
                 target.element.style.filter = 'brightness(90%)';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
                 target.element.style.top = vector.y * newsize / 4 + 'px';
                 xnew$1.emit('-move', { vector });
             });
-            pointer.on('-dragend', ({ event }) => {
+            direct.on('-dragend', ({ event }) => {
                 const vector = { x: 0, y: 0 };
                 target.element.style.filter = '';
                 target.element.style.left = vector.x * newsize / 4 + 'px';
@@ -1457,8 +1394,8 @@
                 xnew$1('<polygon points="11 50 20 42 20 58">');
                 xnew$1('<polygon points="89 50 80 42 80 58">');
             });
-            const pointer = xnew$1(PointerEvent);
-            pointer.on('-dragstart', ({ event, position }) => {
+            const direct = xnew$1(DirectEvent);
+            direct.on('-dragstart', ({ event, position }) => {
                 const vector = getVector(position);
                 targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
                 targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1466,7 +1403,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-down', { vector });
             });
-            pointer.on('-dragmove', ({ event, position }) => {
+            direct.on('-dragmove', ({ event, position }) => {
                 const vector = getVector(position);
                 targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
                 targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1474,7 +1411,7 @@
                 targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
                 xnew$1.emit('-move', { vector });
             });
-            pointer.on('-dragend', ({ event }) => {
+            direct.on('-dragend', ({ event }) => {
                 const vector = { x: 0, y: 0 };
                 targets[0].element.style.filter = '';
                 targets[1].element.style.filter = '';
@@ -1536,7 +1473,7 @@
         });
         xnew$1.timeout(() => {
             xnew$1(document.body).on('click wheel', action);
-            xnew$1(KeyboardEvent).on('-keydown', action);
+            xnew$1(DirectEvent).on('-keydown', action);
         }, 100);
         function action() {
             if (state === 0) {
@@ -3417,7 +3354,7 @@
 
     function VolumeController(unit, {} = {}) {
         xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; container-type: size;">`);
-        xnew$1.extend(PointerEvent);
+        xnew$1.extend(DirectEvent);
         unit.on('-pointerdown', ({ event }) => event.stopPropagation());
         const slider = xnew$1(`<input type="range" min="0" max="100" value="${master.gain.value * 100}"
     style="display: none; width: calc(96cqw - 100cqh); margin: 0 2cqw; cursor: pointer; pointer-events: auto;"
@@ -3442,10 +3379,8 @@
 
     const basics = {
         Screen,
-        PointerEvent,
         DirectEvent,
         ResizeEvent,
-        KeyboardEvent,
         ModalFrame,
         ModalContent,
         AccordionFrame,

package/dist/xnew.mjs

@@ -203,7 +203,7 @@ class Timer {
 //----------------------------------------------------------------------------------------------------
 // utils
 //----------------------------------------------------------------------------------------------------
-const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
+const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
 //----------------------------------------------------------------------------------------------------
 // unit
 //----------------------------------------------------------------------------------------------------
@@ -296,7 +296,7 @@ class Unit {
             components: [],
             listeners: new MapMap(),
             defines: {},
-            systems: { start: [], update: [], stop: [], finalize: [] },
+            systems: { start: [], process: [], update: [], stop: [], finalize: [] },
         });
         // nest html element
         if (typeof unit._.target === 'string') {
@@ -406,11 +406,17 @@ class Unit {
         }
     }
     static update(unit) {
-        if (unit._.state === 'started') {
+        if (unit._.state === 'started' || unit._.state === 'stopped') {
             unit._.children.forEach((child) => Unit.update(child));
             unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
         }
     }
+    static process(unit) {
+        if (unit._.state === 'started') {
+            unit._.children.forEach((child) => Unit.process(child));
+            unit._.systems.process.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+        }
+    }
     static reset() {
         var _a, _b;
         (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
@@ -418,6 +424,7 @@ class Unit {
         (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
         Unit.ticker = new Ticker(() => {
             Unit.start(Unit.root);
+            Unit.process(Unit.root);
             Unit.update(Unit.root);
         });
     }
@@ -929,6 +936,8 @@ function ResizeEvent(resize) {
 function DirectEvent(unit) {
     const state = {};
     const keydown = xnew$1.scope((event) => {
+        if (event.repeat)
+            return;
         state[event.code] = 1;
         xnew$1.emit('-keydown', { event, type: '-keydown', code: event.code });
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
@@ -996,78 +1005,6 @@ function DirectEvent(unit) {
     gesture.on('-gestureend', (...args) => xnew$1.emit('-gestureend', ...args));
     gesture.on('-gesturecancel', (...args) => xnew$1.emit('-gesturecancel', ...args));
 }
-function KeyboardEvent(keyboard) {
-    const state = {};
-    const keydown = xnew$1.scope((event) => {
-        state[event.code] = 1;
-        xnew$1.emit('-keydown', { event, type: '-keydown', code: event.code });
-        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-            xnew$1.emit('-keydown.arrow', { event, type: '-keydown.arrow', code: event.code, vector: getVector() });
-        }
-    });
-    const keyup = xnew$1.scope((event) => {
-        state[event.code] = 0;
-        xnew$1.emit('-keyup', { event, type: '-keyup', code: event.code });
-        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-            xnew$1.emit('-keyup.arrow', { event, type: '-keyup.arrow', code: event.code, vector: getVector() });
-        }
-    });
-    window.addEventListener('keydown', keydown);
-    window.addEventListener('keyup', keyup);
-    keyboard.on('finalize', () => {
-        window.removeEventListener('keydown', keydown);
-        window.removeEventListener('keyup', keyup);
-    });
-    function getVector() {
-        return {
-            x: (state['ArrowLeft'] ? -1 : 0) + (state['ArrowRight'] ? +1 : 0),
-            y: (state['ArrowUp'] ? -1 : 0) + (state['ArrowDown'] ? +1 : 0)
-        };
-    }
-}
-function PointerEvent(unit) {
-    const internal = xnew$1();
-    internal.on('pointerdown', (event) => xnew$1.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
-    internal.on('pointermove', (event) => xnew$1.emit('-pointermove', { event, position: getPosition(unit.element, event) }));
-    internal.on('pointerup', (event) => xnew$1.emit('-pointerup', { event, position: getPosition(unit.element, event) }));
-    internal.on('wheel', (event) => xnew$1.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
-    internal.on('click', (event) => xnew$1.emit('-click', { event, position: getPosition(unit.element, event) }));
-    internal.on('pointerover', (event) => xnew$1.emit('-pointerover', { event, position: getPosition(unit.element, event) }));
-    internal.on('pointerout', (event) => xnew$1.emit('-pointerout', { event, position: getPosition(unit.element, event) }));
-    const pointerdownoutside = xnew$1.scope((event) => {
-        if (unit.element.contains(event.target) === false) {
-            xnew$1.emit('-pointerdown.outside', { event, position: getPosition(unit.element, event) });
-        }
-    });
-    const pointerupoutside = xnew$1.scope((event) => {
-        if (unit.element.contains(event.target) === false) {
-            xnew$1.emit('-pointerup.outside', { event, position: getPosition(unit.element, event) });
-        }
-    });
-    const clickoutside = xnew$1.scope((event) => {
-        if (unit.element.contains(event.target) === false) {
-            xnew$1.emit('-click.outside', { 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);
-    });
-    const drag = xnew$1(DragEvent);
-    drag.on('-dragstart', (...args) => xnew$1.emit('-dragstart', ...args));
-    drag.on('-dragmove', (...args) => xnew$1.emit('-dragmove', ...args));
-    drag.on('-dragend', (...args) => xnew$1.emit('-dragend', ...args));
-    drag.on('-dragcancel', (...args) => xnew$1.emit('-dragcancel', ...args));
-    const gesture = xnew$1(GestureEvent);
-    gesture.on('-gesturestart', (...args) => xnew$1.emit('-gesturestart', ...args));
-    gesture.on('-gesturemove', (...args) => xnew$1.emit('-gesturemove', ...args));
-    gesture.on('-gestureend', (...args) => xnew$1.emit('-gestureend', ...args));
-    gesture.on('-gesturecancel', (...args) => xnew$1.emit('-gesturecancel', ...args));
-}
 function DragEvent(unit) {
     const pointerdown = xnew$1.scope((event) => {
         const id = event.pointerId;
@@ -1326,11 +1263,11 @@ function DragFrame(frame, { x = 0, y = 0 } = {}) {
 function DragTarget(target, {} = {}) {
     const { frame, absolute } = xnew$1.context('xnew.dragframe');
     xnew$1.nest('<div>');
-    const pointer = xnew$1(absolute.parentElement, PointerEvent);
+    const direct = xnew$1(absolute.parentElement, DirectEvent);
     const current = { x: 0, y: 0 };
     const offset = { x: 0, y: 0 };
     let dragged = false;
-    pointer.on('-dragstart', ({ event, position }) => {
+    direct.on('-dragstart', ({ event, position }) => {
         if (target.element.contains(event.target) === false)
             return;
         dragged = true;
@@ -1339,7 +1276,7 @@ function DragTarget(target, {} = {}) {
         current.x = position.x - offset.x;
         current.y = position.y - offset.y;
     });
-    pointer.on('-dragmove', ({ event, delta }) => {
+    direct.on('-dragmove', ({ event, delta }) => {
         if (dragged !== true)
             return;
         current.x += delta.x;
@@ -1347,7 +1284,7 @@ function DragTarget(target, {} = {}) {
         absolute.style.left = `${current.x}px`;
         absolute.style.top = `${current.y}px`;
     });
-    pointer.on('-dragcancel -dragend', ({ event }) => {
+    direct.on('-dragcancel -dragend', ({ event }) => {
         dragged = false;
     });
 }
@@ -1384,22 +1321,22 @@ function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strok
             xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
             xnew$1('<circle cx="50" cy="50" r="23">');
         });
-        const pointer = xnew$1(PointerEvent);
-        pointer.on('-dragstart', ({ event, position }) => {
+        const direct = xnew$1(DirectEvent);
+        direct.on('-dragstart', ({ event, position }) => {
             const vector = getVector(position);
             target.element.style.filter = 'brightness(90%)';
             target.element.style.left = vector.x * newsize / 4 + 'px';
             target.element.style.top = vector.y * newsize / 4 + 'px';
             xnew$1.emit('-down', { vector });
         });
-        pointer.on('-dragmove', ({ event, position }) => {
+        direct.on('-dragmove', ({ event, position }) => {
             const vector = getVector(position);
             target.element.style.filter = 'brightness(90%)';
             target.element.style.left = vector.x * newsize / 4 + 'px';
             target.element.style.top = vector.y * newsize / 4 + 'px';
             xnew$1.emit('-move', { vector });
         });
-        pointer.on('-dragend', ({ event }) => {
+        direct.on('-dragend', ({ event }) => {
             const vector = { x: 0, y: 0 };
             target.element.style.filter = '';
             target.element.style.left = vector.x * newsize / 4 + 'px';
@@ -1451,8 +1388,8 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             xnew$1('<polygon points="11 50 20 42 20 58">');
             xnew$1('<polygon points="89 50 80 42 80 58">');
         });
-        const pointer = xnew$1(PointerEvent);
-        pointer.on('-dragstart', ({ event, position }) => {
+        const direct = xnew$1(DirectEvent);
+        direct.on('-dragstart', ({ event, position }) => {
             const vector = getVector(position);
             targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
             targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1460,7 +1397,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
             xnew$1.emit('-down', { vector });
         });
-        pointer.on('-dragmove', ({ event, position }) => {
+        direct.on('-dragmove', ({ event, position }) => {
             const vector = getVector(position);
             targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
             targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
@@ -1468,7 +1405,7 @@ function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', stroke
             targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
             xnew$1.emit('-move', { vector });
         });
-        pointer.on('-dragend', ({ event }) => {
+        direct.on('-dragend', ({ event }) => {
             const vector = { x: 0, y: 0 };
             targets[0].element.style.filter = '';
             targets[1].element.style.filter = '';
@@ -1530,7 +1467,7 @@ function TextStream(unit, { text = '', speed = 50, fade = 300 } = {}) {
     });
     xnew$1.timeout(() => {
         xnew$1(document.body).on('click wheel', action);
-        xnew$1(KeyboardEvent).on('-keydown', action);
+        xnew$1(DirectEvent).on('-keydown', action);
     }, 100);
     function action() {
         if (state === 0) {
@@ -3411,7 +3348,7 @@ const icons = {
 
 function VolumeController(unit, {} = {}) {
     xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; container-type: size;">`);
-    xnew$1.extend(PointerEvent);
+    xnew$1.extend(DirectEvent);
     unit.on('-pointerdown', ({ event }) => event.stopPropagation());
     const slider = xnew$1(`<input type="range" min="0" max="100" value="${master.gain.value * 100}"
     style="display: none; width: calc(96cqw - 100cqh); margin: 0 2cqw; cursor: pointer; pointer-events: auto;"
@@ -3436,10 +3373,8 @@ function VolumeController(unit, {} = {}) {
 
 const basics = {
     Screen,
-    PointerEvent,
     DirectEvent,
     ResizeEvent,
-    KeyboardEvent,
     ModalFrame,
     ModalContent,
     AccordionFrame,

package/package.json

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