@mulsense/xnew 0.1.6 → 0.1.7

package/dist/xnew.js

@@ -223,7 +223,7 @@
     }
 
     //----------------------------------------------------------------------------------------------------
-    // Utils
+    // defines
     //----------------------------------------------------------------------------------------------------
     const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
     class UnitPromise {
@@ -798,61 +798,58 @@
         Unit.current._.captures.push({ checker, execute: Unit.wrap(Unit.current, (unit) => execute(unit)) });
     };
 
-    function UserEvent(self) {
-        const unit = xnew$1();
-        unit.on('pointerdown', (event) => self.emit('-pointerdown', { event, position: getPosition(self.element, event) }));
-        unit.on('pointermove', (event) => self.emit('-pointermove', { event, position: getPosition(self.element, event) }));
-        unit.on('pointerup', (event) => self.emit('-pointerup', { event, position: getPosition(self.element, event) }));
-        unit.on('wheel', (event) => self.emit('-wheel', { event, delta: { x: event.wheelDeltaX, y: event.wheelDeltaY } }));
+    function PointerEvent(unit) {
+        const internal = xnew$1();
+        internal.on('pointerdown', (event) => unit.emit('-pointerdown', { event, position: getPosition(unit.element, event) }));
+        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) }));
         const drag = xnew$1(DragEvent);
-        drag.on('-dragstart', (...args) => self.emit('-dragstart', ...args));
-        drag.on('-dragmove', (...args) => self.emit('-dragmove', ...args));
-        drag.on('-dragend', (...args) => self.emit('-dragend', ...args));
-        drag.on('-dragcancel', (...args) => self.emit('-dragcancel', ...args));
+        drag.on('-dragstart', (...args) => unit.emit('-dragstart', ...args));
+        drag.on('-dragmove', (...args) => unit.emit('-dragmove', ...args));
+        drag.on('-dragend', (...args) => unit.emit('-dragend', ...args));
+        drag.on('-dragcancel', (...args) => unit.emit('-dragcancel', ...args));
         const gesture = xnew$1(GestureEvent);
-        gesture.on('-gesturestart', (...args) => self.emit('-gesturestart', ...args));
-        gesture.on('-gesturemove', (...args) => self.emit('-gesturemove', ...args));
-        gesture.on('-gestureend', (...args) => self.emit('-gestureend', ...args));
-        gesture.on('-gesturecancel', (...args) => self.emit('-gesturecancel', ...args));
-        const keyborad = xnew$1(Keyboard);
-        keyborad.on('-keydown', (...args) => self.emit('-keydown', ...args));
-        keyborad.on('-keyup', (...args) => self.emit('-keyup', ...args));
-        keyborad.on('-arrowkeydown', (...args) => self.emit('-arrowkeydown', ...args));
-        keyborad.on('-arrowkeyup', (...args) => self.emit('-arrowkeyup', ...args));
+        gesture.on('-gesturestart', (...args) => unit.emit('-gesturestart', ...args));
+        gesture.on('-gesturemove', (...args) => unit.emit('-gesturemove', ...args));
+        gesture.on('-gestureend', (...args) => unit.emit('-gestureend', ...args));
+        gesture.on('-gesturecancel', (...args) => unit.emit('-gesturecancel', ...args));
     }
-    function DragEvent(self) {
+    function DragEvent(unit) {
         xnew$1().on('pointerdown', (event) => {
             const id = event.pointerId;
-            const position = getPosition(self.element, event);
+            const position = getPosition(unit.element, event);
             let previous = position;
             xnew$1(() => {
                 xnew$1.listener(window).on('pointermove', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
+                        const position = getPosition(unit.element, event);
                         const delta = { x: position.x - previous.x, y: position.y - previous.y };
-                        self.emit('-dragmove', { event, position, delta });
+                        unit.emit('-dragmove', { event, position, delta });
                         previous = position;
                     }
                 });
                 xnew$1.listener(window).on('pointerup', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
-                        self.emit('-dragend', { event, position, });
+                        const position = getPosition(unit.element, event);
+                        unit.emit('-dragend', { event, position, });
                         xnew$1.listener(window).off();
                     }
                 });
                 xnew$1.listener(window).on('pointercancel', (event) => {
                     if (event.pointerId === id) {
-                        const position = getPosition(self.element, event);
-                        self.emit('-dragcancel', { event, position, });
+                        const position = getPosition(unit.element, event);
+                        unit.emit('-dragcancel', { event, position, });
                         xnew$1.listener(window).off();
                     }
                 });
             });
-            self.emit('-dragstart', { event, position });
+            unit.emit('-dragstart', { event, position });
         });
     }
-    function GestureEvent(self) {
+    function GestureEvent(unit) {
         const drag = xnew$1(DragEvent);
         let isActive = false;
         const map = new Map();
@@ -860,7 +857,7 @@
             map.set(event.pointerId, Object.assign({}, position));
             isActive = map.size === 2 ? true : false;
             if (isActive === true) {
-                self.emit('-gesturestart', {});
+                unit.emit('-gesturestart', {});
             }
         });
         drag.on('-dragmove', ({ event, position, delta }) => {
@@ -886,20 +883,20 @@
                 //         rotate = sign > 0.0 ? +angle : -angle;
                 //     }
                 // }
-                self.emit('-gesturemove', { event, position, delta, scale });
+                unit.emit('-gesturemove', { event, position, delta, scale });
             }
             map.set(event.pointerId, position);
         });
         drag.on('-dragend', ({ event }) => {
             if (isActive === true) {
-                self.emit('-gestureend', {});
+                unit.emit('-gestureend', {});
             }
             isActive = false;
             map.delete(event.pointerId);
         });
         drag.on('-dragcancel', ({ event }) => {
             if (isActive === true) {
-                self.emit('-gesturecancel', { event });
+                unit.emit('-gesturecancel', { event });
             }
             isActive = false;
             map.delete(event.pointerId);
@@ -912,21 +909,26 @@
             return others;
         }
     }
-    function Keyboard(self) {
+    function getPosition(element, event) {
+        const rect = element.getBoundingClientRect();
+        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    }
+
+    function KeyboardEvent(unit) {
         const state = {};
         xnew$1.listener(window).on('keydown', (event) => {
             state[event.code] = 1;
-            self.emit('-keydown', { event, code: event.code });
+            unit.emit('-keydown', { event, type: '-keydown', code: event.code });
         });
         xnew$1.listener(window).on('keyup', (event) => {
             state[event.code] = 0;
-            self.emit('-keyup', { event, code: event.code });
+            unit.emit('-keyup', { event, type: '-keyup', code: event.code });
         });
         xnew$1.listener(window).on('keydown', (event) => {
-            self.emit('-arrowkeydown', { event, code: event.code, vector: getVector() });
+            unit.emit('-arrowkeydown', { event, type: '-arrowkeydown', code: event.code, vector: getVector() });
         });
         xnew$1.listener(window).on('keyup', (event) => {
-            self.emit('-arrowkeyup', { event, code: event.code, vector: getVector() });
+            unit.emit('-arrowkeyup', { event, type: '-arrowkeyup', code: event.code, vector: getVector() });
         });
         function getVector() {
             return {
@@ -935,16 +937,12 @@
             };
         }
     }
-    function getPosition(element, event) {
-        const rect = element.getBoundingClientRect();
-        return { x: event.clientX - rect.left, y: event.clientY - rect.top };
-    }
 
     function Screen(screen, { width = 640, height = 480, fit = 'contain' } = {}) {
         const size = { width, height };
         const wrapper = xnew$1.nest('<div style="position: relative; width: 100%; height: 100%; overflow: hidden;">');
         const absolute = xnew$1.nest('<div style="position: absolute; margin: auto;">');
-        const canvas = xnew$1.nest(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none;">`);
+        const canvas = xnew$1(`<canvas width="${width}" height="${height}" style="width: 100%; height: 100%; vertical-align: bottom; user-select: none; user-drag: none;">`);
         xnew$1(wrapper, ResizeEvent).on('-resize', resize);
         resize();
         function resize() {
@@ -975,18 +973,15 @@
         }
         return {
             get canvas() {
-                return canvas;
+                return canvas.element;
             },
             resize(width, height) {
                 size.width = width;
                 size.height = height;
-                canvas.setAttribute('width', width + 'px');
-                canvas.setAttribute('height', height + 'px');
+                canvas.element.setAttribute('width', width + 'px');
+                canvas.element.setAttribute('height', height + 'px');
                 resize();
             },
-            get scale() {
-                return { x: size.width / canvas.clientWidth, y: size.height / canvas.clientHeight };
-            }
         };
     }
 
@@ -1039,14 +1034,14 @@
         };
     }
 
-    function TabFrame(frame, { key } = {}) {
+    function TabFrame(frame, { select } = {}) {
         const internal = xnew$1((internal) => {
             const buttons = new Map();
             const contents = new Map();
             return { frame, buttons, contents };
         });
         xnew$1.context('xnew.tabframe', internal);
-        xnew$1.timeout(() => internal.emit('-select', { key: key !== null && key !== void 0 ? key : [...internal.buttons.keys()][0] }));
+        xnew$1.timeout(() => internal.emit('-select', { key: select !== null && select !== void 0 ? select : [...internal.buttons.keys()][0] }));
     }
     function TabButton(button, { key } = {}) {
         const internal = xnew$1.context('xnew.tabframe');
@@ -1183,18 +1178,30 @@
     function DragTarget(target, {} = {}) {
         const { frame, absolute } = xnew$1.context('xnew.dragframe');
         xnew$1.nest('<div>');
-        const user = xnew$1(absolute.parentElement, UserEvent);
+        const pointer = xnew$1(absolute.parentElement, PointerEvent);
         const current = { x: 0, y: 0 };
-        user.on('-dragstart', ({ event, position }) => {
-            current.x = parseFloat(absolute.style.left || '0') + position.x;
-            current.y = parseFloat(absolute.style.top || '0') + position.y;
+        const offset = { x: 0, y: 0 };
+        let dragged = false;
+        pointer.on('-dragstart', ({ event, position }) => {
+            if (target.element.contains(event.target) === false)
+                return;
+            dragged = true;
+            offset.x = position.x - parseFloat(absolute.style.left || '0');
+            offset.y = position.y - parseFloat(absolute.style.top || '0');
+            current.x = position.x - offset.x;
+            current.y = position.y - offset.y;
         });
-        user.on('-dragmove', ({ event, delta }) => {
+        pointer.on('-dragmove', ({ event, delta }) => {
+            if (dragged !== true)
+                return;
             current.x += delta.x;
             current.y += delta.y;
             absolute.style.left = `${current.x}px`;
             absolute.style.top = `${current.y}px`;
         });
+        pointer.on('-dragcancel -dragend', ({ event }) => {
+            dragged = false;
+        });
     }
 
     //----------------------------------------------------------------------------------------------------
@@ -1203,184 +1210,264 @@
     function SVGTemplate(self, { fill = null, fillOpacity = 0.8, stroke = null, strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' }) {
         xnew$1.nest(`<svg
         viewBox="0 0 100 100"
-        style="position: absolute; width: 100%; height: 100%; user-select: none;
+        style="position: absolute; width: 100%; height: 100%; pointer-select: none;
         ${fill ? `fill: ${fill}; fill-opacity: ${fillOpacity};` : ''}
         ${stroke ? `stroke: ${stroke}; stroke-opacity: ${strokeOpacity}; stroke-width: ${strokeWidth}; stroke-linejoin: ${strokeLinejoin};` : ''}
     ">`);
     }
-    function TouchStick(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<polygon points="50  7 40 18 60 18">');
-            xnew$1('<polygon points="50 93 40 83 60 83">');
-            xnew$1('<polygon points=" 7 50 18 40 18 60">');
-            xnew$1('<polygon points="93 50 83 40 83 60">');
-        });
-        const target = xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<circle cx="50" cy="50" r="23">');
-        });
-        const user = xnew$1(UserEvent);
-        user.on('-dragstart', ({ event, position }) => {
-            const vector = getVector(position);
-            target.element.style.filter = 'brightness(90%)';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-down', { vector });
-        });
-        user.on('-dragmove', ({ event, position }) => {
-            const vector = getVector(position);
-            target.element.style.filter = 'brightness(90%)';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-move', { vector });
-        });
-        user.on('-dragend', ({ event }) => {
-            const vector = { x: 0, y: 0 };
-            target.element.style.filter = '';
-            target.element.style.left = vector.x * size / 4 + 'px';
-            target.element.style.top = vector.y * size / 4 + 'px';
-            self.emit('-up', { vector });
-        });
-        function getVector(position) {
-            const x = position.x - size / 2;
-            const y = position.y - size / 2;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
-            const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
-            return { x: Math.cos(a) * d, y: Math.sin(a) * d };
+    function AnalogStick(self, { size, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
+        let internal;
+        let newsize;
+        if (size) {
+            newsize = size;
         }
-    }
-    function TouchDPad(self, { size = 130, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        const polygons = [
-            '<polygon points="50 50 35 35 35  5 37  3 63  3 65  5 65 35">',
-            '<polygon points="50 50 35 65 35 95 37 97 63 97 65 95 65 65">',
-            '<polygon points="50 50 35 35  5 35  3 37  3 63  5 65 35 65">',
-            '<polygon points="50 50 65 35 95 35 97 37 97 63 95 65 65 65">'
-        ];
-        const targets = polygons.map((polygon) => {
-            return xnew$1((self) => {
-                xnew$1.extend(SVGTemplate, { fill, fillOpacity });
-                xnew$1(polygon);
+        else {
+            newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+            xnew$1(self.element, ResizeEvent).on('-resize', () => {
+                newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+                internal === null || internal === void 0 ? void 0 : internal.reboot();
             });
-        });
-        xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<polyline points="35 35 35  5 37  3 63  3 65  5 65 35">');
-            xnew$1('<polyline points="35 65 35 95 37 97 63 97 65 95 65 65">');
-            xnew$1('<polyline points="35 35  5 35  3 37  3 63  5 65 35 65">');
-            xnew$1('<polyline points="65 35 95 35 97 37 97 63 95 65 65 65">');
-            xnew$1('<polygon points="50 11 42 20 58 20">');
-            xnew$1('<polygon points="50 89 42 80 58 80">');
-            xnew$1('<polygon points="11 50 20 42 20 58">');
-            xnew$1('<polygon points="89 50 80 42 80 58">');
-        });
-        const user = xnew$1(UserEvent);
-        user.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%)' : '';
-            targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
-            targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
-            self.emit('-down', { vector });
-        });
-        user.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%)' : '';
-            targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
-            targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
-            self.emit('-move', { vector });
-        });
-        user.on('-dragend', ({ event }) => {
-            const vector = { x: 0, y: 0 };
-            targets[0].element.style.filter = '';
-            targets[1].element.style.filter = '';
-            targets[2].element.style.filter = '';
-            targets[3].element.style.filter = '';
-            self.emit('-up', { vector });
-        });
-        function getVector(position) {
-            const x = position.x - size / 2;
-            const y = position.y - size / 2;
-            const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
-            const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (size / 4));
-            const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
-            vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
-            vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
-            return vector;
         }
+        internal = xnew$1(() => {
+            xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+            xnew$1((self) => {
+                xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+                xnew$1('<polygon points="50  7 40 18 60 18">');
+                xnew$1('<polygon points="50 93 40 83 60 83">');
+                xnew$1('<polygon points=" 7 50 18 40 18 60">');
+                xnew$1('<polygon points="93 50 83 40 83 60">');
+            });
+            const target = xnew$1((self) => {
+                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 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';
+                self.emit('-down', { vector });
+            });
+            pointer.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';
+                self.emit('-move', { vector });
+            });
+            pointer.on('-dragend', ({ event }) => {
+                const vector = { x: 0, y: 0 };
+                target.element.style.filter = '';
+                target.element.style.left = vector.x * newsize / 4 + 'px';
+                target.element.style.top = vector.y * newsize / 4 + 'px';
+                self.emit('-up', { vector });
+            });
+            function getVector(position) {
+                const x = position.x - newsize / 2;
+                const y = position.y - newsize / 2;
+                const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+                const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+                return { x: Math.cos(a) * d, y: Math.sin(a) * d };
+            }
+        });
     }
-    function TouchButton(self, { size = 80, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
-        strokeWidth /= (size / 100);
-        xnew$1.nest(`<div style="position: relative; width: ${size}px; height: ${size}px; cursor: pointer; user-select: none; overflow: hidden;">`);
-        const target = xnew$1((self) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<circle cx="50" cy="50" r="40">');
+    function DirectionalPad(self, { size, diagonal = true, fill = '#FFF', fillOpacity = 0.8, stroke = '#000', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round' } = {}) {
+        xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
+        let internal;
+        let newsize;
+        if (size) {
+            newsize = size;
+        }
+        else {
+            newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+            xnew$1(self.element, ResizeEvent).on('-resize', () => {
+                newsize = Math.min(self.element.clientWidth, self.element.clientHeight);
+                internal === null || internal === void 0 ? void 0 : internal.reboot();
+            });
+        }
+        internal = xnew$1(() => {
+            xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+            const polygons = [
+                '<polygon points="50 50 35 35 35  5 37  3 63  3 65  5 65 35">',
+                '<polygon points="50 50 35 65 35 95 37 97 63 97 65 95 65 65">',
+                '<polygon points="50 50 35 35  5 35  3 37  3 63  5 65 35 65">',
+                '<polygon points="50 50 65 35 95 35 97 37 97 63 95 65 65 65">'
+            ];
+            const targets = polygons.map((polygon) => {
+                return xnew$1((self) => {
+                    xnew$1.extend(SVGTemplate, { fill, fillOpacity });
+                    xnew$1(polygon);
+                });
+            });
+            xnew$1((self) => {
+                xnew$1.extend(SVGTemplate, { fill: 'none', stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+                xnew$1('<polyline points="35 35 35  5 37  3 63  3 65  5 65 35">');
+                xnew$1('<polyline points="35 65 35 95 37 97 63 97 65 95 65 65">');
+                xnew$1('<polyline points="35 35  5 35  3 37  3 63  5 65 35 65">');
+                xnew$1('<polyline points="65 35 95 35 97 37 97 63 95 65 65 65">');
+                xnew$1('<polygon points="50 11 42 20 58 20">');
+                xnew$1('<polygon points="50 89 42 80 58 80">');
+                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 vector = getVector(position);
+                targets[0].element.style.filter = (vector.y < 0) ? 'brightness(90%)' : '';
+                targets[1].element.style.filter = (vector.y > 0) ? 'brightness(90%)' : '';
+                targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+                targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+                self.emit('-down', { vector });
+            });
+            pointer.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%)' : '';
+                targets[2].element.style.filter = (vector.x < 0) ? 'brightness(90%)' : '';
+                targets[3].element.style.filter = (vector.x > 0) ? 'brightness(90%)' : '';
+                self.emit('-move', { vector });
+            });
+            pointer.on('-dragend', ({ event }) => {
+                const vector = { x: 0, y: 0 };
+                targets[0].element.style.filter = '';
+                targets[1].element.style.filter = '';
+                targets[2].element.style.filter = '';
+                targets[3].element.style.filter = '';
+                self.emit('-up', { vector });
+            });
+            function getVector(position) {
+                const x = position.x - newsize / 2;
+                const y = position.y - newsize / 2;
+                const a = (y !== 0 || x !== 0) ? Math.atan2(y, x) : 0;
+                const d = Math.min(1.0, Math.sqrt(x * x + y * y) / (newsize / 4));
+                const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
+                if (diagonal === true) {
+                    vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
+                    vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
+                }
+                else if (Math.abs(vector.x) > Math.abs(vector.y)) {
+                    vector.x = Math.abs(vector.x) > 0.5 ? Math.sign(vector.x) : 0;
+                    vector.y = 0;
+                }
+                else {
+                    vector.x = 0;
+                    vector.y = Math.abs(vector.y) > 0.5 ? Math.sign(vector.y) : 0;
+                }
+                return vector;
+            }
         });
-        const user = xnew$1(UserEvent);
-        user.on('-dragstart', (event) => {
-            target.element.style.filter = 'brightness(90%)';
-            self.emit('-down', event);
+    }
+
+    const context = new AudioContext();
+    const master = context.createGain();
+    master.gain.value = 1.0;
+    master.connect(context.destination);
+    function connect(params) {
+        const nodes = {};
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            nodes[key] = context[`create${type}`]();
+            const node = nodes[key];
+            Object.keys(props).forEach((name) => {
+                var _a;
+                if (((_a = node[name]) === null || _a === void 0 ? void 0 : _a.value) !== undefined) {
+                    node[name].value = props[name];
+                }
+                else {
+                    node[name] = props[name];
+                }
+            });
         });
-        user.on('-dragend', (event) => {
-            target.element.style.filter = '';
-            self.emit('-up', event);
+        Object.keys(params).forEach((key) => {
+            const [type, props, ...to] = params[key];
+            to.forEach((to) => {
+                let dest = null;
+                if (to.indexOf('.') > 0) {
+                    dest = nodes[to.split('.')[0]][to.split('.')[1]];
+                }
+                else if (nodes[to]) {
+                    dest = nodes[to];
+                }
+                else if (to === 'master') {
+                    dest = master;
+                }
+                nodes[key].connect(dest);
+            });
         });
+        return nodes;
     }
 
-    class Audio {
-        static initialize() {
-            var _a;
-            if (typeof window !== 'undefined' && window instanceof Window) {
-                Audio.context = new ((_a = window.AudioContext) !== null && _a !== void 0 ? _a : window.webkitAudioContext)();
-                Audio.master = Audio.context.createGain();
-                Audio.master.gain.value = 1.0;
-                Audio.master.connect(Audio.context.destination);
+    const store = new Map();
+    function load(path) {
+        return new AudioFile(path);
+    }
+    class AudioFile {
+        constructor(path) {
+            this.data = {};
+            if (store.has(path)) {
+                this.data = store.get(path);
             }
-        }
-        static connect(params) {
-            if (!Audio.context)
-                throw new Error("Audio context not initialized");
-            const nodes = {};
-            Object.keys(params).forEach((key) => {
-                const [type, props, ...to] = params[key];
-                nodes[key] = Audio.context[`create${type}`]();
-                Object.keys(props).forEach((name) => {
-                    var _a;
-                    if (((_a = nodes[key][name]) === null || _a === void 0 ? void 0 : _a.value) !== undefined) {
-                        nodes[key][name].value = props[name];
-                    }
-                    else {
-                        nodes[key][name] = props[name];
-                    }
-                });
-            });
-            Object.keys(params).forEach((key) => {
-                const [type, props, ...to] = params[key];
-                to.forEach((to) => {
-                    let dest = null;
-                    if (to.indexOf('.') > 0) {
-                        dest = nodes[to.split('.')[0]][to.split('.')[1]];
-                    }
-                    else if (nodes[to]) {
-                        dest = nodes[to];
-                    }
-                    else if (to === 'master') {
-                        dest = Audio.master;
-                    }
-                    nodes[key].connect(dest);
+            else {
+                this.data.buffer = null;
+                this.data.promise = fetch(path)
+                    .then((response) => response.arrayBuffer())
+                    .then((response) => context.decodeAudioData(response))
+                    .then((response) => {
+                    this.data.buffer = response;
+                    this.nodes.source.buffer = this.data.buffer;
+                })
+                    .catch(() => {
+                    console.warn(`"${path}" could not be loaded.`);
                 });
+                store.set(path, this.data);
+            }
+            this.startTime = null;
+            this.nodes = connect({
+                source: ['BufferSource', {}, 'volume'],
+                volume: ['Gain', { gain: 1.0 }, 'master'],
             });
-            return nodes;
+        }
+        isReady() {
+            return this.data.buffer ? true : false;
+        }
+        get promise() {
+            return this.data.promise;
+        }
+        set volume(value) {
+            this.nodes.volume.gain.value = value;
+        }
+        get volume() {
+            return this.nodes.volume.gain.value;
+        }
+        set loop(value) {
+            this.nodes.source.loop = value;
+        }
+        get loop() {
+            return this.nodes.source.loop;
+        }
+        play(offset = 0) {
+            if (this.startTime !== null)
+                return;
+            if (this.isReady()) {
+                this.startTime = context.currentTime;
+                this.nodes.source.playbackRate.value = 1;
+                this.nodes.source.start(context.currentTime, offset / 1000);
+            }
+            else {
+                this.promise.then(() => this.play());
+            }
+        }
+        pause() {
+            if (this.startTime === null)
+                return;
+            this.nodes.source.stop(context.currentTime);
+            const elapsed = (context.currentTime - this.startTime) % this.data.buffer.duration * 1000;
+            this.startTime = null;
+            return elapsed;
         }
     }
-    Audio.context = null;
-    Audio.master = null;
-    Audio.initialize();
 
     function synthesizer(props, effects) {
         return new Synthesizer(props, effects);
@@ -1404,30 +1491,20 @@
                 window.removeEventListener('mousedown', initialize, true);
             }
         }
-        constructor({ oscillator = null, filter = null, amp = null } = {}, { bmp = null, reverb = null, delay = null } = {}) {
+        constructor({ oscillator = null, filter = null, amp = null } = {}, { bmp = null, reverb = null } = {}) {
             this.oscillator = isObject(oscillator) ? oscillator : {};
             this.oscillator.type = setType(this.oscillator.type, ['sine', 'triangle', 'square', 'sawtooth']);
             this.oscillator.envelope = setEnvelope(this.oscillator.envelope, -36, +36);
             this.oscillator.LFO = setLFO(this.oscillator.LFO, 36);
             this.filter = isObject(filter) ? filter : {};
             this.filter.type = setType(this.filter.type, ['lowpass', 'highpass', 'bandpass']);
-            this.filter.Q = isNumber(this.filter.Q) ? clamp(this.filter.Q, 0, 32) : 0;
-            // cutoffはundefinedを使う
             this.filter.cutoff = isNumber(this.filter.cutoff) ? clamp(this.filter.cutoff, 4, 8192) : undefined;
-            this.filter.envelope = setEnvelope(this.filter.envelope, -36, +36);
-            this.filter.LFO = setLFO(this.filter.LFO, 36);
             this.amp = isObject(amp) ? amp : {};
             this.amp.envelope = setEnvelope(this.amp.envelope, 0, 1);
-            this.amp.LFO = setLFO(this.amp.LFO, 36);
             this.bmp = isNumber(bmp) ? clamp(bmp, 60, 240) : 120;
-            this.options = { bmp: this.bmp };
             this.reverb = isObject(reverb) ? reverb : {};
             this.reverb.time = isNumber(this.reverb.time) ? clamp(this.reverb.time, 0, 2000) : 0.0;
             this.reverb.mix = isNumber(this.reverb.mix) ? clamp(this.reverb.mix, 0, 1.0) : 0.0;
-            this.delay = isObject(delay) ? delay : {};
-            this.delay.time = isNumber(this.delay.time) ? clamp(this.delay.time, 0, 2000) : 0.0;
-            this.delay.feedback = isNumber(this.delay.feedback) ? clamp(this.delay.feedback, 0.0, 0.9) : 0.0;
-            this.delay.mix = isNumber(this.delay.mix) ? clamp(this.delay.mix, 0.0, 1.0) : 0.0;
             function setType(type, list, value = 0) {
                 return list.includes(type) ? type : list[value];
             }
@@ -1463,46 +1540,43 @@
         }
         press(frequency, duration = null, wait = 0.0) {
             frequency = typeof frequency === 'string' ? Synthesizer.keymap[frequency] : frequency;
-            duration = typeof duration === 'string' ? (Synthesizer.notemap[duration] * 60 / this.options.bmp) : (duration !== null ? (duration / 1000) : duration);
-            const start = Audio.context.currentTime + wait / 1000;
+            duration = typeof duration === 'string' ? (Synthesizer.notemap[duration] * 60 / this.bmp) : (duration !== null ? (duration / 1000) : duration);
+            const start = context.currentTime + wait / 1000;
             let stop = null;
-            const params = {};
+            const nodes = {};
+            nodes.oscillator = context.createOscillator();
+            nodes.amp = context.createGain();
+            nodes.amp.gain.value = 0.0;
+            nodes.target = context.createGain();
+            nodes.target.gain.value = 1.0;
+            nodes.amp.connect(nodes.target);
+            nodes.target.connect(master);
             if (this.filter.type && this.filter.cutoff) {
-                params.oscillator = ['Oscillator', {}, 'filter'];
-                params.filter = ['BiquadFilter', {}, 'amp'];
+                nodes.filter = context.createBiquadFilter();
+                nodes.oscillator.connect(nodes.filter);
+                nodes.filter.connect(nodes.amp);
             }
             else {
-                params.oscillator = ['Oscillator', {}, 'amp'];
+                nodes.oscillator.connect(nodes.amp);
             }
-            params.amp = ['Gain', { gain: 0.0 }, 'target'];
-            params.target = ['Gain', { gain: 1.0 }, 'master'];
             if (this.reverb.time > 0.0 && this.reverb.mix > 0.0) {
-                params.amp.push('convolver');
-                params.convolver = ['Convolver', { buffer: impulseResponse({ time: this.reverb.time }) }, 'convolverDepth'];
-                params.convolverDepth = ['Gain', { gain: 1.0 }, 'master'];
-            }
-            if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
-                params.amp.push('delay');
-                params.delay = ['Delay', {}, 'delayDepth', 'delayFeedback'];
-                params.delayDepth = ['Gain', { gain: 1.0 }, 'master'];
-                params.delayFeedback = ['Gain', { gain: this.delay.feedback }, 'delay'];
+                nodes.convolver = context.createConvolver();
+                nodes.convolver.buffer = impulseResponse({ time: this.reverb.time });
+                nodes.convolverDepth = context.createGain();
+                nodes.convolverDepth.gain.value = 1.0;
+                nodes.amp.connect(nodes.convolver);
+                nodes.convolver.connect(nodes.convolverDepth);
+                nodes.convolverDepth.connect(master);
             }
             if (this.oscillator.LFO) {
-                params.oscillatorLFO = ['Oscillator', {}, 'oscillatorLFODepth'];
-                params.oscillatorLFODepth = ['Gain', {}, 'oscillator.frequency'];
+                nodes.oscillatorLFO = context.createOscillator();
+                nodes.oscillatorLFODepth = context.createGain();
+                nodes.oscillatorLFO.connect(nodes.oscillatorLFODepth);
+                nodes.oscillatorLFODepth.connect(nodes.oscillator.frequency);
             }
-            if (this.filter.LFO) {
-                params.filterLFO = ['Oscillator', {}, 'filterLFODepth'];
-                params.filterLFODepth = ['Gain', {}, 'filter.frequency'];
-            }
-            if (this.amp.LFO) {
-                params.ampLFO = ['Oscillator', {}, 'ampLFODepth'];
-                params.ampLFODepth = ['Gain', {}, 'amp.gain'];
-            }
-            const nodes = Audio.connect(params);
             nodes.oscillator.type = this.oscillator.type;
             nodes.oscillator.frequency.value = clamp(frequency, 10.0, 5000.0);
-            if (this.filter.type && this.filter.cutoff) {
+            if (this.filter.type && this.filter.cutoff && nodes.filter) {
                 nodes.filter.type = this.filter.type;
                 nodes.filter.frequency.value = this.filter.cutoff;
             }
@@ -1510,39 +1584,17 @@
                 nodes.target.gain.value *= (1.0 - this.reverb.mix);
                 nodes.convolverDepth.gain.value *= this.reverb.mix;
             }
-            if (this.delay.time > 0.0 && this.delay.mix > 0.0) {
-                console.log(this.delay.time / 1000);
-                nodes.delay.delayTime.value = this.delay.time / 1000;
-                nodes.target.gain.value *= (1.0 - this.delay.mix);
-                nodes.delayDepth.gain.value *= this.delay.mix;
-            }
             {
-                if (this.oscillator.LFO) {
+                if (this.oscillator.LFO && nodes.oscillatorLFO && nodes.oscillatorLFODepth) {
                     nodes.oscillatorLFODepth.gain.value = frequency * (Math.pow(2.0, this.oscillator.LFO.amount / 12.0) - 1.0);
                     nodes.oscillatorLFO.type = this.oscillator.LFO.type;
                     nodes.oscillatorLFO.frequency.value = this.oscillator.LFO.rate;
                     nodes.oscillatorLFO.start(start);
                 }
-                if (this.filter.LFO) {
-                    nodes.filterLFODepth.gain.value = frequency * (Math.pow(2.0, this.filter.LFO.amount / 12.0) - 1.0);
-                    nodes.filterLFO.type = this.filter.LFO.type;
-                    nodes.filterLFO.frequency.value = this.filter.LFO.rate;
-                    nodes.filterLFO.start(start);
-                }
-                if (this.amp.LFO) {
-                    nodes.ampLFODepth.gain.value = this.amp.LFO.amount;
-                    nodes.ampLFO.type = this.amp.LFO.type;
-                    nodes.ampLFO.frequency.value = this.amp.LFO.rate;
-                    nodes.ampLFO.start(start);
-                }
                 if (this.oscillator.envelope) {
                     const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
                     startEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
                 }
-                if (this.filter.envelope) {
-                    const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
-                    startEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
-                }
                 if (this.amp.envelope) {
                     startEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
                 }
@@ -1552,7 +1604,7 @@
                 release.call(this);
             }
             function release() {
-                duration = duration !== null && duration !== void 0 ? duration : (Audio.context.currentTime - start);
+                duration = duration !== null && duration !== void 0 ? duration : (context.currentTime - start);
                 if (this.amp.envelope) {
                     const ADSR = this.amp.envelope.ADSR;
                     const adsr = [ADSR[0] / 1000, ADSR[1] / 1000, ADSR[2], ADSR[3] / 1000];
@@ -1562,20 +1614,13 @@
                 else {
                     stop = start + duration;
                 }
-                if (this.oscillator.LFO) {
+                if (nodes.oscillatorLFO) {
                     nodes.oscillatorLFO.stop(stop);
                 }
-                if (this.amp.LFO) {
-                    nodes.ampLFO.stop(stop);
-                }
                 if (this.oscillator.envelope) {
                     const amount = frequency * (Math.pow(2.0, this.oscillator.envelope.amount / 12.0) - 1.0);
                     stopEnvelope(nodes.oscillator.frequency, frequency, amount, this.oscillator.envelope.ADSR);
                 }
-                if (this.filter.envelope) {
-                    const amount = this.filter.cutoff * (Math.pow(2.0, this.filter.envelope.amount / 12.0) - 1.0);
-                    stopEnvelope(nodes.filter.frequency, this.filter.cutoff, amount, this.filter.envelope.ADSR);
-                }
                 if (this.amp.envelope) {
                     stopEnvelope(nodes.amp.gain, 0.0, this.amp.envelope.amount, this.amp.envelope.ADSR);
                 }
@@ -1621,8 +1666,8 @@
     };
     Synthesizer.initialize();
     function impulseResponse({ time, decay = 2.0 }) {
-        const length = Audio.context.sampleRate * time / 1000;
-        const impulse = Audio.context.createBuffer(2, length, Audio.context.sampleRate);
+        const length = context.sampleRate * time / 1000;
+        const impulse = context.createBuffer(2, length, context.sampleRate);
         const ch0 = impulse.getChannelData(0);
         const ch1 = impulse.getChannelData(1);
         for (let i = 0; i < length; i++) {
@@ -1634,8 +1679,9 @@
 
     const basics = {
         Screen,
-        UserEvent,
+        PointerEvent,
         ResizeEvent,
+        KeyboardEvent,
         ModalFrame,
         ModalContent,
         AccordionFrame,
@@ -1648,12 +1694,11 @@
         InputFrame,
         DragFrame,
         DragTarget,
-        TouchStick,
-        TouchDPad,
-        TouchButton,
+        AnalogStick,
+        DirectionalPad,
     };
     const audio = {
-        synthesizer
+        synthesizer, load
     };
     const xnew = Object.assign(xnew$1, {
         basics,