@mulsense/xnew 0.4.0 → 0.4.2

package/dist/xnew.js

@@ -104,7 +104,7 @@
     //----------------------------------------------------------------------------------------------------
     // ticker
     //----------------------------------------------------------------------------------------------------
-    class Ticker {
+    class AnimationTicker {
         constructor(callback, fps = 60) {
             const self = this;
             this.id = null;
@@ -135,7 +135,7 @@
             this.counter = 0;
             this.offset = 0.0;
             this.status = 0;
-            this.ticker = new Ticker((time) => {
+            this.ticker = new AnimationTicker((time) => {
                 var _a, _b;
                 let p = Math.min(this.elapsed() / this.options.duration, 1.0);
                 if (this.options.easing === 'ease-out') {
@@ -206,7 +206,7 @@
         }
     }
 
-    const SYSTEM_EVENTS = ['start', 'process', 'update', 'stop', 'finalize'];
+    const SYSTEM_EVENTS = ['start', 'update', 'render', 'stop', 'finalize'];
 
     class EventManager {
         constructor() {
@@ -272,12 +272,12 @@
             };
         }
         resize(props) {
-            const observer = new ResizeObserver(xnew$1.scope((entries) => {
+            const observer = new ResizeObserver((entries) => {
                 for (const entry of entries) {
                     props.listener({ type: 'resize' });
                     break;
                 }
-            }));
+            });
             observer.observe(props.element);
             return () => {
                 observer.unobserve(props.element);
@@ -416,7 +416,7 @@
             const element = props.element;
             const options = props.options;
             const dragstart = ({ event, position }) => {
-                map.set(event.pointerId, Object.assign({}, position));
+                map.set(event.pointerId, position);
                 isActive = map.size === 2 ? true : false;
                 if (isActive === true && props.type === 'gesturestart') {
                     props.listener({ event, type: props.type });
@@ -452,11 +452,11 @@
                 map.set(event.pointerId, position);
             };
             const dragend = ({ event }) => {
-                if (isActive === true) {
+                map.delete(event.pointerId);
+                if (isActive === true && props.type === 'gestureend') {
                     props.listener({ event, type: props.type, scale: 1.0 });
                 }
                 isActive = false;
-                map.delete(event.pointerId);
             };
             this.add({ element, options, type: 'dragstart', listener: dragstart });
             this.add({ element, options, type: 'dragmove', listener: dragmove });
@@ -598,8 +598,8 @@
         }
         static initialize(unit, anchor) {
             var _a, _b;
-            const backup = Unit.current;
-            Unit.current = unit;
+            const backup = Unit.currentUnit;
+            Unit.currentUnit = unit;
             unit._ = Object.assign(unit._, {
                 currentElement: unit._.baseElement,
                 currentContext: unit._.baseContext,
@@ -615,7 +615,7 @@
                 components: [],
                 listeners: new MapMap(),
                 defines: {},
-                systems: { start: [], process: [], update: [], stop: [], finalize: [] },
+                systems: { start: [], update: [], render: [], stop: [], finalize: [] },
                 eventManager: new EventManager(),
             });
             // nest html element
@@ -626,13 +626,13 @@
             Unit.extend(unit, unit._.baseComponent, unit._.props);
             // whether the unit promise was resolved
             Promise.all(unit._.promises.map(p => p.promise)).then(() => unit._.state = 'initialized');
-            Unit.current = backup;
+            Unit.currentUnit = backup;
         }
         static finalize(unit) {
             if (unit._.state !== 'finalized' && unit._.state !== 'finalizing') {
                 unit._.state = 'finalizing';
                 unit._.children.forEach((child) => child.finalize());
-                unit._.systems.finalize.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.finalize.forEach(({ execute }) => execute());
                 unit.off();
                 unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
                 if (unit._.elements.length > 0) {
@@ -712,7 +712,7 @@
             if (unit._.state === 'initialized' || unit._.state === 'stopped') {
                 unit._.state = 'started';
                 unit._.children.forEach((child) => Unit.start(child));
-                unit._.systems.start.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.start.forEach(({ execute }) => execute());
             }
             else if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.start(child));
@@ -722,31 +722,31 @@
             if (unit._.state === 'started') {
                 unit._.state = 'stopped';
                 unit._.children.forEach((child) => Unit.stop(child));
-                unit._.systems.stop.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.stop.forEach(({ execute }) => execute());
             }
         }
         static update(unit) {
-            if (unit._.state === 'started' || unit._.state === 'stopped') {
+            if (unit._.state === 'started') {
                 unit._.children.forEach((child) => Unit.update(child));
-                unit._.systems.update.forEach((listener) => Unit.scope(Unit.snapshot(unit), listener));
+                unit._.systems.update.forEach(({ execute }) => execute());
             }
         }
-        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 render(unit) {
+            if (unit._.state === 'started' || unit._.state === 'started' || unit._.state === 'stopped') {
+                unit._.children.forEach((child) => Unit.render(child));
+                unit._.systems.render.forEach(({ execute }) => execute());
             }
         }
         static reset() {
-            var _a, _b;
-            (_a = Unit.root) === null || _a === void 0 ? void 0 : _a.finalize();
-            Unit.current = Unit.root = new Unit(null, null);
-            (_b = Unit.ticker) === null || _b === void 0 ? void 0 : _b.clear();
-            Unit.ticker = new Ticker(() => {
-                Unit.start(Unit.root);
-                Unit.process(Unit.root);
-                Unit.update(Unit.root);
+            var _a;
+            (_a = Unit.rootUnit) === null || _a === void 0 ? void 0 : _a.finalize();
+            Unit.currentUnit = Unit.rootUnit = new Unit(null, null);
+            const ticker = new AnimationTicker(() => {
+                Unit.start(Unit.rootUnit);
+                Unit.update(Unit.rootUnit);
+                Unit.render(Unit.rootUnit);
             });
+            Unit.rootUnit.on('finalize', () => ticker.clear());
         }
         static wrap(unit, listener) {
             const snapshot = Unit.snapshot(unit);
@@ -756,25 +756,27 @@
             if (snapshot.unit._.state === 'finalized') {
                 return;
             }
-            const current = Unit.current;
+            const currentUnit = Unit.currentUnit;
             const backup = Unit.snapshot(snapshot.unit);
             try {
-                Unit.current = snapshot.unit;
+                Unit.currentUnit = snapshot.unit;
                 snapshot.unit._.currentContext = snapshot.context;
                 snapshot.unit._.currentElement = snapshot.element;
+                snapshot.unit._.currentComponent = snapshot.component;
                 return func(...args);
             }
             catch (error) {
                 throw error;
             }
             finally {
-                Unit.current = current;
+                Unit.currentUnit = currentUnit;
                 snapshot.unit._.currentContext = backup.context;
                 snapshot.unit._.currentElement = backup.element;
+                snapshot.unit._.currentComponent = backup.component;
             }
         }
         static snapshot(unit) {
-            return { unit, context: unit._.currentContext, element: unit._.currentElement };
+            return { unit, context: unit._.currentContext, element: unit._.currentElement, component: unit._.currentComponent };
         }
         static context(unit, key, value) {
             if (value !== undefined) {
@@ -792,43 +794,46 @@
             return [...((_a = Unit.component2units.get(component)) !== null && _a !== void 0 ? _a : [])];
         }
         on(type, listener, options) {
-            type.trim().split(/\s+/).forEach((type) => {
-                if (SYSTEM_EVENTS.includes(type)) {
-                    this._.systems[type].push(listener);
-                }
-                if (this._.listeners.has(type, listener) === false) {
-                    const execute = Unit.wrap(Unit.current, listener);
-                    this._.listeners.set(type, listener, { element: this.element, execute });
-                    Unit.type2units.add(type, this);
-                    if (/^[A-Za-z]/.test(type)) {
-                        this._.eventManager.add({ element: this.element, type, listener: execute, options });
-                    }
-                }
-            });
+            const types = type.trim().split(/\s+/);
+            types.forEach((type) => Unit.on(this, type, listener, options));
         }
         off(type, listener) {
             const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
-            types.forEach((type) => {
-                if (SYSTEM_EVENTS.includes(type)) {
-                    this._.systems[type] = this._.systems[type].filter((lis) => listener ? lis !== listener : false);
+            types.forEach((type) => Unit.off(this, type, listener));
+        }
+        static on(unit, type, listener, options) {
+            if (SYSTEM_EVENTS.includes(type)) {
+                unit._.systems[type].push({ listener, execute: Unit.wrap(Unit.currentUnit, listener) });
+            }
+            if (unit._.listeners.has(type, listener) === false) {
+                const execute = Unit.wrap(Unit.currentUnit, listener);
+                unit._.listeners.set(type, listener, { element: unit.element, component: unit._.currentComponent, execute });
+                Unit.type2units.add(type, unit);
+                if (/^[A-Za-z]/.test(type)) {
+                    unit._.eventManager.add({ element: unit.element, type, listener: execute, options });
                 }
-                (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((listener) => {
-                    const item = this._.listeners.get(type, listener);
-                    if (item === undefined)
-                        return;
-                    this._.listeners.delete(type, listener);
-                    if (/^[A-Za-z]/.test(type)) {
-                        this._.eventManager.remove({ type, listener: item.execute });
-                    }
-                });
-                if (this._.listeners.has(type) === false) {
-                    Unit.type2units.delete(type, this);
+            }
+        }
+        static off(unit, type, listener) {
+            if (SYSTEM_EVENTS.includes(type)) {
+                unit._.systems[type] = unit._.systems[type].filter(({ listener: lis }) => listener ? lis !== listener : false);
+            }
+            (listener ? [listener] : [...unit._.listeners.keys(type)]).forEach((listener) => {
+                const item = unit._.listeners.get(type, listener);
+                if (item === undefined)
+                    return;
+                unit._.listeners.delete(type, listener);
+                if (/^[A-Za-z]/.test(type)) {
+                    unit._.eventManager.remove({ type, listener: item.execute });
                 }
             });
+            if (unit._.listeners.has(type) === false) {
+                Unit.type2units.delete(type, unit);
+            }
         }
         static emit(type, ...args) {
             var _a, _b;
-            const current = Unit.current;
+            const current = Unit.currentUnit;
             if (type[0] === '+') {
                 (_a = Unit.type2units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
                     var _a;
@@ -843,6 +848,7 @@
             }
         }
     }
+    Unit.currentComponent = () => { };
     Unit.component2units = new MapSet();
     //----------------------------------------------------------------------------------------------------
     // event
@@ -857,15 +863,15 @@
             this.component = component;
         }
         then(callback) {
-            this.promise = this.promise.then(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.then(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
         catch(callback) {
-            this.promise = this.promise.catch(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.catch(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
         finally(callback) {
-            this.promise = this.promise.finally(Unit.wrap(Unit.current, callback));
+            this.promise = this.promise.finally(Unit.wrap(Unit.currentUnit, callback));
             return this;
         }
     }
@@ -875,7 +881,7 @@
     class UnitTimer {
         constructor(options) {
             this.stack = [];
-            this.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+            this.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
         }
         clear() {
             this.stack = [];
@@ -895,19 +901,19 @@
         }
         static execute(timer, options) {
             if (timer.unit._.state === 'finalized') {
-                timer.unit = new Unit(Unit.current, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
             }
             else if (timer.stack.length === 0) {
-                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
                 timer.unit.on('finalize', () => { UnitTimer.next(timer); });
             }
             else {
-                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.current) }, options));
+                timer.stack.push(Object.assign({ snapshot: Unit.snapshot(Unit.currentUnit) }, options));
             }
         }
         static next(timer) {
             if (timer.stack.length > 0) {
-                timer.unit = new Unit(Unit.current, UnitTimer.Component, timer.stack.shift());
+                timer.unit = new Unit(Unit.currentUnit, UnitTimer.Component, timer.stack.shift());
                 timer.unit.on('finalize', () => { UnitTimer.next(timer); });
             }
         }
@@ -934,10 +940,10 @@
     }
 
     const xnew$1 = Object.assign(function (...args) {
-        if (Unit.root === undefined) {
+        if (Unit.rootUnit === undefined) {
             Unit.reset();
         }
-        return new Unit(Unit.current, ...args);
+        return new Unit(Unit.currentUnit, ...args);
     }, {
         /**
          * Creates a nested HTML/SVG element within the current component
@@ -950,7 +956,7 @@
          */
         nest(tag) {
             try {
-                return Unit.nest(Unit.current, tag);
+                return Unit.nest(Unit.currentUnit, tag);
             }
             catch (error) {
                 console.error('xnew.nest(tag: string): ', error);
@@ -968,7 +974,7 @@
          */
         extend(component, props) {
             try {
-                return Unit.extend(Unit.current, component, props);
+                return Unit.extend(Unit.currentUnit, component, props);
             }
             catch (error) {
                 console.error('xnew.extend(component: Function, props?: Object): ', error);
@@ -989,7 +995,7 @@
          */
         context(key, value = undefined) {
             try {
-                return Unit.context(Unit.current, key, value);
+                return Unit.context(Unit.currentUnit, key, value);
             }
             catch (error) {
                 console.error('xnew.context(key: string, value?: any): ', error);
@@ -1005,9 +1011,9 @@
          */
         promise(promise) {
             try {
-                const component = Unit.current._.currentComponent;
-                Unit.current._.promises.push(new UnitPromise(promise, component));
-                return Unit.current._.promises[Unit.current._.promises.length - 1];
+                const component = Unit.currentUnit._.currentComponent;
+                Unit.currentUnit._.promises.push(new UnitPromise(promise, component));
+                return Unit.currentUnit._.promises[Unit.currentUnit._.promises.length - 1];
             }
             catch (error) {
                 console.error('xnew.promise(promise: Promise<any>): ', error);
@@ -1023,8 +1029,8 @@
          */
         then(callback) {
             try {
-                const component = Unit.current._.currentComponent;
-                const promises = Unit.current._.promises;
+                const component = Unit.currentUnit._.currentComponent;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .then((results) => {
                     callback(results.filter((_result, index) => promises[index].component !== null && promises[index].component === component));
@@ -1044,7 +1050,7 @@
          */
         catch(callback) {
             try {
-                const promises = Unit.current._.promises;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .catch(callback);
             }
@@ -1062,7 +1068,7 @@
          */
         finally(callback) {
             try {
-                const promises = Unit.current._.promises;
+                const promises = Unit.currentUnit._.promises;
                 return new UnitPromise(Promise.all(promises.map(p => p.promise)), null)
                     .finally(callback);
             }
@@ -1081,7 +1087,7 @@
          * }), 1000)
          */
         scope(callback) {
-            const snapshot = Unit.snapshot(Unit.current);
+            const snapshot = Unit.snapshot(Unit.currentUnit);
             return (...args) => Unit.scope(snapshot, callback, ...args);
         },
         /**
@@ -1152,73 +1158,54 @@
             return new UnitTimer({ transition, duration, easing, iterations: 1 });
         },
         protect() {
-            Unit.current._.protected = true;
+            Unit.currentUnit._.protected = true;
         }
     });
 
-    function AccordionFrame(frame, { open = false, duration = 200, easing = 'ease' } = {}) {
+    function AccordionFrame(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
         const internal = xnew$1((internal) => {
             return {
-                frame, open, rate: 0.0,
-                emit(type, ...args) { xnew$1.emit(type, ...args); }
+                frame: unit, open, rate: 0.0,
+                transition(rate) {
+                    xnew$1.emit('-transition', { rate });
+                }
             };
         });
         xnew$1.context('xnew.accordionframe', internal);
-        internal.on('-transition', ({ rate }) => internal.rate = rate);
-        internal.emit('-transition', { rate: open ? 1.0 : 0.0 });
+        internal.on('-transition', ({ rate }) => {
+            internal.rate = rate;
+            xnew$1.emit('-transition', { rate });
+        });
+        xnew$1.timeout(() => {
+            internal.transition(open ? 1.0 : 0.0);
+        });
         return {
             toggle() {
                 if (internal.rate === 1.0) {
-                    frame.close();
+                    unit.close();
                 }
                 else if (internal.rate === 0.0) {
-                    frame.open();
+                    unit.open();
                 }
             },
             open() {
                 if (internal.rate === 0.0) {
-                    xnew$1.transition((x) => internal.emit('-transition', { rate: x }), duration, easing);
+                    xnew$1.transition((x) => internal.transition(x), duration, easing);
                 }
             },
             close() {
                 if (internal.rate === 1.0) {
-                    xnew$1.transition((x) => internal.emit('-transition', { rate: 1.0 - x }), duration, easing);
+                    xnew$1.transition((x) => internal.transition(1.0 - x), duration, easing);
                 }
             }
         };
     }
-    function AccordionHeader(header, {} = {}) {
-        const internal = xnew$1.context('xnew.accordionframe');
-        xnew$1.nest('<button style="display: flex; align-items: center; margin: 0; padding: 0; width: 100%; text-align: left; border: none; font: inherit; color: inherit; background: none; cursor: pointer;">');
-        header.on('click', () => internal.frame.toggle());
-    }
-    function AccordionBullet(bullet, { type = 'arrow' } = {}) {
-        const internal = xnew$1.context('xnew.accordionframe');
-        xnew$1.nest('<div style="display:inline-block; position: relative; width: 0.55em; margin: 0 0.3em;">');
-        if (type === 'arrow') {
-            const arrow = xnew$1(`<div style="width: 100%; height: 0.55em; border-right: 0.12em solid currentColor; border-bottom: 0.12em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            arrow.element.style.transform = `rotate(${internal.rate * 90 - 45}deg)`;
-            internal.on('-transition', ({ rate }) => {
-                arrow.element.style.transform = `rotate(${rate * 90 - 45}deg)`;
-            });
-        }
-        else if (type === 'plusminus') {
-            const line1 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            const line2 = xnew$1(`<div style="position: absolute; width: 100%; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; box-sizing: border-box; transform-origin: center;">`);
-            line2.element.style.transform = `rotate(90deg)`;
-            line2.element.style.opacity = `${1.0 - internal.rate}`;
-            internal.on('-transition', ({ rate }) => {
-                line1.element.style.transform = `rotate(${90 + rate * 90}deg)`;
-                line2.element.style.transform = `rotate(${rate * 180}deg)`;
-            });
-        }
-    }
-    function AccordionContent(content, {} = {}) {
+    function AccordionContent(unit, {} = {}) {
         const internal = xnew$1.context('xnew.accordionframe');
         xnew$1.nest(`<div style="display: ${internal.open ? 'block' : 'none'};">`);
         xnew$1.nest('<div style="padding: 0; display: flex; flex-direction: column; box-sizing: border-box;">');
         internal.on('-transition', ({ rate }) => {
-            content.transition({ element: content.element, rate });
+            unit.transition({ element: unit.element, rate });
         });
         return {
             transition({ element, rate }) {
@@ -1317,68 +1304,6 @@
         };
     }
 
-    function TabFrame(frame, { select } = {}) {
-        const internal = xnew$1((internal) => {
-            const buttons = new Map();
-            const contents = new Map();
-            return {
-                frame, buttons, contents,
-                emit(type, ...args) { xnew$1.emit(type, ...args); }
-            };
-        });
-        xnew$1.context('xnew.tabframe', internal);
-        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');
-        const div = xnew$1.nest('<div>');
-        key = key !== null && key !== void 0 ? key : (internal.buttons.size).toString();
-        internal.buttons.set(key, button);
-        button.on('click', () => {
-            internal.emit('-select', { key });
-        });
-        internal.on('-select', ({ key }) => {
-            const select = internal.buttons.get(key);
-            if (select === button) {
-                button.select({ element: div });
-            }
-            else {
-                button.deselect({ element: div });
-            }
-        });
-        return {
-            select({ element }) {
-                Object.assign(element.style, { opacity: 1.0, cursor: 'text' });
-            },
-            deselect({ element }) {
-                Object.assign(element.style, { opacity: 0.6, cursor: 'pointer' });
-            }
-        };
-    }
-    function TabContent(content, { key } = {}) {
-        const internal = xnew$1.context('xnew.tabframe');
-        const div = xnew$1.nest('<div style="display: none;">');
-        key = key !== null && key !== void 0 ? key : (internal.contents.size).toString();
-        internal.contents.set(key, content);
-        internal.on('-select', ({ key }) => {
-            const select = internal.contents.get(key);
-            if (select === content) {
-                content.select({ element: div });
-            }
-            else {
-                content.deselect({ element: div });
-            }
-        });
-        return {
-            select({ element }) {
-                Object.assign(element.style, { display: 'block' });
-            },
-            deselect({ element }) {
-                Object.assign(element.style, { display: 'none' });
-            }
-        };
-    }
-
     function DragFrame(frame, { x = 0, y = 0 } = {}) {
         const absolute = xnew$1.nest(`<div style="position: absolute; top: ${y}px; left: ${x}px;">`);
         xnew$1.context('xnew.dragframe', { frame, absolute });
@@ -3472,12 +3397,7 @@
         ModalFrame,
         ModalContent,
         AccordionFrame,
-        AccordionHeader,
-        AccordionBullet,
         AccordionContent,
-        TabFrame,
-        TabButton,
-        TabContent,
         TextStream,
         DragFrame,
         DragTarget,