npm - @mulsense/xnew - Versions diffs - 0.4.4 → 0.4.5 - Mend

@mulsense/xnew 0.4.4 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/xnew.d.ts CHANGED Viewed

@@ -277,7 +277,7 @@ declare const xnew$1: CreateUnit & {
     protect(): void;
 };
-declare function AccordionFrame(unit: Unit, { open, duration, easing }?: {
+declare function Accordion(unit: Unit, { open, duration, easing }?: {
     open?: boolean;
     duration?: number;
     easing?: string;
@@ -287,7 +287,6 @@ declare function AccordionFrame(unit: Unit, { open, duration, easing }?: {
     open(): void;
     close(): void;
 };
-declare function AccordionContent(unit: Unit, {}?: {}): void;
 declare function Screen(unit: Unit, { width, height, fit }?: {
     width?: number | undefined;
@@ -298,24 +297,6 @@ declare function Screen(unit: Unit, { width, height, fit }?: {
     resize(width: number, height: number): void;
 };
-declare function ModalFrame(unit: Unit, { duration, easing }?: {
-    duration?: number;
-    easing?: string;
-}): {
-    close(): void;
-};
-declare function ModalContent(content: Unit, { background }?: {
-    background?: string;
-}): void;
-declare function DragFrame(unit: Unit, { x, y }?: {
-    x?: number;
-    y?: number;
-}): {
-    absolute: HTMLElement | SVGElement;
-};
-declare function DragTarget(unit: Unit, {}?: {}): void;
 declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
     stroke?: string;
     strokeOpacity?: number;
@@ -343,13 +324,9 @@ declare function TextStream(unit: Unit, { text, speed, fade }?: {
 declare const basics: {
     Screen: typeof Screen;
-    ModalFrame: typeof ModalFrame;
-    ModalContent: typeof ModalContent;
-    AccordionFrame: typeof AccordionFrame;
-    AccordionContent: typeof AccordionContent;
+    Modal: any;
+    Accordion: typeof Accordion;
     TextStream: typeof TextStream;
-    DragFrame: typeof DragFrame;
-    DragTarget: typeof DragTarget;
     AnalogStick: typeof AnalogStick;
     DirectionalPad: typeof DirectionalPad;
 };

package/dist/xnew.js CHANGED Viewed

@@ -941,9 +941,8 @@
     }
     const xnew$1 = Object.assign(function (...args) {
-        if (Unit.rootUnit === undefined) {
+        if (Unit.rootUnit === undefined)
             Unit.reset();
-        }
         return new Unit(Unit.currentUnit, ...args);
     }, {
         /**
@@ -1163,8 +1162,8 @@
         }
     });
-    function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
-        xnew$1.context('xnew.accordionframe', unit);
+    function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
+        xnew$1.context('xnew.accordion', unit);
         unit.on('-transition', ({ state }) => {
             unit.state = state;
         });
@@ -1193,23 +1192,6 @@
             }
         };
     }
-    function AccordionContent(unit, {} = {}) {
-        const frame = xnew$1.context('xnew.accordionframe');
-        const outer = xnew$1.nest(`<div style="display: ${frame.state === 1.9 ? 'block' : 'none'};">`);
-        const inner = xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
-        frame.on('-transition', ({ state }) => {
-            outer.style.display = 'block';
-            if (state === 0.0) {
-                outer.style.display = 'none';
-            }
-            else if (state < 1.0) {
-                Object.assign(outer.style, { height: inner.offsetHeight * state + 'px', overflow: 'hidden', opacity: state });
-            }
-            else {
-                Object.assign(outer.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
-            }
-        });
-    }
     function Screen(unit, { width = 640, height = 480, fit = 'contain' } = {}) {
         const size = { width, height };
@@ -1258,7 +1240,7 @@
         };
     }
-    function ModalFrame(unit, { duration = 200, easing = 'ease' } = {}) {
+    function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
         xnew$1.context('xnew.modalframe', unit);
         xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
         unit.on('click', ({ event }) => unit.close());
@@ -1266,57 +1248,13 @@
             xnew$1.emit('-transition', { state: x });
         }, duration, easing);
         return {
+            state: 0.0,
             close() {
                 xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing)
                     .timeout(() => unit.finalize());
             }
         };
     }
-    function ModalContent(content, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
-        const frame = xnew$1.context('xnew.modalframe');
-        const outer = xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0; background: ${background}">`);
-        xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
-        frame.on('click', ({ event }) => event.stopPropagation());
-        frame.on('-transition', ({ state }) => {
-            outer.style.opacity = state.toString();
-        });
-    }
-    function DragFrame(unit, { x = 0, y = 0 } = {}) {
-        const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
-        xnew$1.context('xnew.dragframe', unit);
-        return {
-            absolute,
-        };
-    }
-    function DragTarget(unit, {} = {}) {
-        const frame = xnew$1.context('xnew.dragframe');
-        const current = { x: 0, y: 0 };
-        const offset = { x: 0, y: 0 };
-        let dragged = false;
-        const target = xnew$1(frame.absolute.parentElement);
-        target.on('dragstart', ({ event, position }) => {
-            if (unit.element.contains(event.target) === false)
-                return;
-            dragged = true;
-            offset.x = position.x - parseFloat(frame.absolute.style.left || '0');
-            offset.y = position.y - parseFloat(frame.absolute.style.top || '0');
-            current.x = position.x - offset.x;
-            current.y = position.y - offset.y;
-        });
-        target.on('dragmove', ({ event, delta }) => {
-            if (dragged !== true)
-                return;
-            current.x += delta.x;
-            current.y += delta.y;
-            frame.absolute.style.left = `${current.x}px`;
-            frame.absolute.style.top = `${current.y}px`;
-        });
-        target.on('dragend', ({ event }) => {
-            dragged = false;
-        });
-        xnew$1.nest('<div>');
-    }
     //----------------------------------------------------------------------------------------------------
     // controller
@@ -1331,139 +1269,109 @@
     }
     function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-        const internal = xnew$1((unit) => {
-            let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-            xnew$1(outer).on('resize', () => {
-                newsize = Math.min(outer.clientWidth, outer.clientHeight);
-                inner.style.width = `${newsize}px`;
-                inner.style.height = `${newsize}px`;
-            });
-            xnew$1((unit) => {
-                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((unit) => {
-                xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-                xnew$1('<circle cx="50" cy="50" r="23">');
-            });
-            unit.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 });
-            });
-            unit.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 });
-            });
-            unit.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';
-                xnew$1.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 };
-            }
+        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
+        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1(outer).on('resize', () => {
+            newsize = Math.min(outer.clientWidth, outer.clientHeight);
+            inner.style.width = `${newsize}px`;
+            inner.style.height = `${newsize}px`;
+        });
+        xnew$1((unit) => {
+            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((unit) => {
+            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+            xnew$1('<circle cx="50" cy="50" r="23">');
+        });
+        unit.on('dragstart dragmove', ({ type, 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;
+            const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
+            target.element.style.filter = 'brightness(90%)';
+            target.element.style.left = `${vector.x * newsize / 4}px`;
+            target.element.style.top = `${vector.y * newsize / 4}px`;
+            const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
+            xnew$1.emit(nexttype, { type: nexttype, vector });
+        });
+        unit.on('dragend', () => {
+            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`;
+            xnew$1.emit('-up', { type: '-up', vector });
         });
-        internal.on('-down', (...args) => xnew$1.emit('-down', ...args));
-        internal.on('-move', (...args) => xnew$1.emit('-move', ...args));
-        internal.on('-up', (...args) => xnew$1.emit('-up', ...args));
     }
     function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
         const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-        const internal = xnew$1((unit) => {
-            let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-            xnew$1(outer).on('resize', () => {
-                newsize = Math.min(outer.clientWidth, outer.clientHeight);
-                inner.style.width = `${newsize}px`;
-                inner.style.height = `${newsize}px`;
-            });
-            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((unit) => {
-                    xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
-                    xnew$1(polygon);
-                });
-            });
-            xnew$1((unit) => {
-                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">');
-            });
-            unit.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%)' : '';
-                xnew$1.emit('-down', { vector });
-            });
-            unit.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%)' : '';
-                xnew$1.emit('-move', { vector });
-            });
-            unit.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 = '';
-                xnew$1.emit('-up', { vector });
+        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
+        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+        xnew$1(outer).on('resize', () => {
+            newsize = Math.min(outer.clientWidth, outer.clientHeight);
+            inner.style.width = `${newsize}px`;
+            inner.style.height = `${newsize}px`;
+        });
+        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((unit) => {
+                xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
+                xnew$1(polygon);
             });
-            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;
+        });
+        xnew$1((unit) => {
+            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">');
+        });
+        unit.on('dragstart dragmove', ({ type, 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;
+            }
+            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%)' : '';
+            const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
+            xnew$1.emit(nexttype, { type: nexttype, vector });
+        });
+        unit.on('dragend', () => {
+            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 = '';
+            xnew$1.emit('-up', { type: '-up', vector });
         });
-        internal.on('-down', (...args) => xnew$1.emit('-down', ...args));
-        internal.on('-move', (...args) => xnew$1.emit('-move', ...args));
-        internal.on('-up', (...args) => xnew$1.emit('-up', ...args));
     }
     function TextStream(unit, { text = '', speed = 50, fade = 300 } = {}) {
@@ -1513,13 +1421,9 @@
     const basics = {
         Screen,
-        ModalFrame,
-        ModalContent,
-        AccordionFrame,
-        AccordionContent,
+        Modal,
+        Accordion,
         TextStream,
-        DragFrame,
-        DragTarget,
         AnalogStick,
         DirectionalPad,
     };

package/dist/xnew.mjs CHANGED Viewed

@@ -935,9 +935,8 @@ class UnitTimer {
 }
 const xnew$1 = Object.assign(function (...args) {
-    if (Unit.rootUnit === undefined) {
+    if (Unit.rootUnit === undefined)
         Unit.reset();
-    }
     return new Unit(Unit.currentUnit, ...args);
 }, {
     /**
@@ -1157,8 +1156,8 @@ const xnew$1 = Object.assign(function (...args) {
     }
 });
-function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.accordionframe', unit);
+function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
+    xnew$1.context('xnew.accordion', unit);
     unit.on('-transition', ({ state }) => {
         unit.state = state;
     });
@@ -1187,23 +1186,6 @@ function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' }
         }
     };
 }
-function AccordionContent(unit, {} = {}) {
-    const frame = xnew$1.context('xnew.accordionframe');
-    const outer = xnew$1.nest(`<div style="display: ${frame.state === 1.9 ? 'block' : 'none'};">`);
-    const inner = xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
-    frame.on('-transition', ({ state }) => {
-        outer.style.display = 'block';
-        if (state === 0.0) {
-            outer.style.display = 'none';
-        }
-        else if (state < 1.0) {
-            Object.assign(outer.style, { height: inner.offsetHeight * state + 'px', overflow: 'hidden', opacity: state });
-        }
-        else {
-            Object.assign(outer.style, { height: 'auto', overflow: 'visible', opacity: 1.0 });
-        }
-    });
-}
 function Screen(unit, { width = 640, height = 480, fit = 'contain' } = {}) {
     const size = { width, height };
@@ -1252,7 +1234,7 @@ function Screen(unit, { width = 640, height = 480, fit = 'contain' } = {}) {
     };
 }
-function ModalFrame(unit, { duration = 200, easing = 'ease' } = {}) {
+function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
     xnew$1.context('xnew.modalframe', unit);
     xnew$1.nest('<div style="position: fixed; inset: 0; z-index: 1000;">');
     unit.on('click', ({ event }) => unit.close());
@@ -1260,57 +1242,13 @@ function ModalFrame(unit, { duration = 200, easing = 'ease' } = {}) {
         xnew$1.emit('-transition', { state: x });
     }, duration, easing);
     return {
+        state: 0.0,
         close() {
             xnew$1.transition((x) => xnew$1.emit('-transition', { state: 1.0 - x }), duration, easing)
                 .timeout(() => unit.finalize());
         }
     };
 }
-function ModalContent(content, { background = 'rgba(0, 0, 0, 0.1)' } = {}) {
-    const frame = xnew$1.context('xnew.modalframe');
-    const outer = xnew$1.nest(`<div style="width: 100%; height: 100%; opacity: 0; background: ${background}">`);
-    xnew$1.nest('<div style="position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;">');
-    frame.on('click', ({ event }) => event.stopPropagation());
-    frame.on('-transition', ({ state }) => {
-        outer.style.opacity = state.toString();
-    });
-}
-function DragFrame(unit, { x = 0, y = 0 } = {}) {
-    const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
-    xnew$1.context('xnew.dragframe', unit);
-    return {
-        absolute,
-    };
-}
-function DragTarget(unit, {} = {}) {
-    const frame = xnew$1.context('xnew.dragframe');
-    const current = { x: 0, y: 0 };
-    const offset = { x: 0, y: 0 };
-    let dragged = false;
-    const target = xnew$1(frame.absolute.parentElement);
-    target.on('dragstart', ({ event, position }) => {
-        if (unit.element.contains(event.target) === false)
-            return;
-        dragged = true;
-        offset.x = position.x - parseFloat(frame.absolute.style.left || '0');
-        offset.y = position.y - parseFloat(frame.absolute.style.top || '0');
-        current.x = position.x - offset.x;
-        current.y = position.y - offset.y;
-    });
-    target.on('dragmove', ({ event, delta }) => {
-        if (dragged !== true)
-            return;
-        current.x += delta.x;
-        current.y += delta.y;
-        frame.absolute.style.left = `${current.x}px`;
-        frame.absolute.style.top = `${current.y}px`;
-    });
-    target.on('dragend', ({ event }) => {
-        dragged = false;
-    });
-    xnew$1.nest('<div>');
-}
 //----------------------------------------------------------------------------------------------------
 // controller
@@ -1325,139 +1263,109 @@ function SVGTemplate(self, { stroke = 'currentColor', strokeOpacity = 0.8, strok
 }
 function AnalogStick(unit, { stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-    const internal = xnew$1((unit) => {
-        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-        xnew$1(outer).on('resize', () => {
-            newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            inner.style.width = `${newsize}px`;
-            inner.style.height = `${newsize}px`;
-        });
-        xnew$1((unit) => {
-            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((unit) => {
-            xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
-            xnew$1('<circle cx="50" cy="50" r="23">');
-        });
-        unit.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 });
-        });
-        unit.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 });
-        });
-        unit.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';
-            xnew$1.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 };
-        }
+    let newsize = Math.min(outer.clientWidth, outer.clientHeight);
+    const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+    xnew$1(outer).on('resize', () => {
+        newsize = Math.min(outer.clientWidth, outer.clientHeight);
+        inner.style.width = `${newsize}px`;
+        inner.style.height = `${newsize}px`;
+    });
+    xnew$1((unit) => {
+        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((unit) => {
+        xnew$1.extend(SVGTemplate, { fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin });
+        xnew$1('<circle cx="50" cy="50" r="23">');
+    });
+    unit.on('dragstart dragmove', ({ type, 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;
+        const vector = { x: Math.cos(a) * d, y: Math.sin(a) * d };
+        target.element.style.filter = 'brightness(90%)';
+        target.element.style.left = `${vector.x * newsize / 4}px`;
+        target.element.style.top = `${vector.y * newsize / 4}px`;
+        const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
+        xnew$1.emit(nexttype, { type: nexttype, vector });
+    });
+    unit.on('dragend', () => {
+        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`;
+        xnew$1.emit('-up', { type: '-up', vector });
     });
-    internal.on('-down', (...args) => xnew$1.emit('-down', ...args));
-    internal.on('-move', (...args) => xnew$1.emit('-move', ...args));
-    internal.on('-up', (...args) => xnew$1.emit('-up', ...args));
 }
 function DirectionalPad(unit, { diagonal = true, stroke = 'currentColor', strokeOpacity = 0.8, strokeWidth = 2, strokeLinejoin = 'round', fill = '#FFF', fillOpacity = 0.8 } = {}) {
     const outer = xnew$1.nest(`<div style="position: relative; width: 100%; height: 100%;">`);
-    const internal = xnew$1((unit) => {
-        let newsize = Math.min(outer.clientWidth, outer.clientHeight);
-        const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
-        xnew$1(outer).on('resize', () => {
-            newsize = Math.min(outer.clientWidth, outer.clientHeight);
-            inner.style.width = `${newsize}px`;
-            inner.style.height = `${newsize}px`;
-        });
-        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((unit) => {
-                xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
-                xnew$1(polygon);
-            });
-        });
-        xnew$1((unit) => {
-            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">');
-        });
-        unit.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%)' : '';
-            xnew$1.emit('-down', { vector });
-        });
-        unit.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%)' : '';
-            xnew$1.emit('-move', { vector });
-        });
-        unit.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 = '';
-            xnew$1.emit('-up', { vector });
+    let newsize = Math.min(outer.clientWidth, outer.clientHeight);
+    const inner = xnew$1.nest(`<div style="position: absolute; width: ${newsize}px; height: ${newsize}px; margin: auto; inset: 0; cursor: pointer; pointer-select: none; pointer-events: auto; overflow: hidden;">`);
+    xnew$1(outer).on('resize', () => {
+        newsize = Math.min(outer.clientWidth, outer.clientHeight);
+        inner.style.width = `${newsize}px`;
+        inner.style.height = `${newsize}px`;
+    });
+    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((unit) => {
+            xnew$1.extend(SVGTemplate, { stroke: 'none', fill, fillOpacity });
+            xnew$1(polygon);
         });
-        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;
+    });
+    xnew$1((unit) => {
+        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">');
+    });
+    unit.on('dragstart dragmove', ({ type, 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;
+        }
+        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%)' : '';
+        const nexttype = { dragstart: '-down', dragmove: '-move' }[type];
+        xnew$1.emit(nexttype, { type: nexttype, vector });
+    });
+    unit.on('dragend', () => {
+        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 = '';
+        xnew$1.emit('-up', { type: '-up', vector });
     });
-    internal.on('-down', (...args) => xnew$1.emit('-down', ...args));
-    internal.on('-move', (...args) => xnew$1.emit('-move', ...args));
-    internal.on('-up', (...args) => xnew$1.emit('-up', ...args));
 }
 function TextStream(unit, { text = '', speed = 50, fade = 300 } = {}) {
@@ -1507,13 +1415,9 @@ function TextStream(unit, { text = '', speed = 50, fade = 300 } = {}) {
 const basics = {
     Screen,
-    ModalFrame,
-    ModalContent,
-    AccordionFrame,
-    AccordionContent,
+    Modal,
+    Accordion,
     TextStream,
-    DragFrame,
-    DragTarget,
     AnalogStick,
     DirectionalPad,
 };

package/package.json CHANGED Viewed

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