ctrl-fx 0.1.0 → 0.1.2

package/dist/internal/eventmgr.js

@@ -1,696 +0,0 @@
-import { containerEventTypes, eventTypes, } from '../dom/events';
-import { internalLocationFromLocation } from '../net/location';
-import { exhaustivenessCheck } from '../utils';
-import { currentLocation } from './locutils';
-// The framework's internal name for text input events is 'textinput', but the
-// DOM fires 'input'. Map before registering listeners and before comparing.
-function toNativeEventType(type) {
-    return type === 'textinput' ? 'input' : type;
-}
-function makeEventTypeKeyedRecord(eventTypes, defaultValue) {
-    const record = {};
-    for (const eventType of eventTypes) {
-        record[eventType] = defaultValue();
-    }
-    return record;
-}
-export function makeListenerCounts(eventTypes) {
-    return makeEventTypeKeyedRecord(eventTypes, () => ({
-        regular: 0,
-        capture: 0,
-    }));
-}
-function updateListenerChangeMap(map, eventType, capture) {
-    const existing = map.get(eventType);
-    if (existing) {
-        if (capture) {
-            existing.capture = true;
-        }
-        else {
-            existing.regular = true;
-        }
-    }
-    else {
-        map.set(eventType, {
-            capture: capture,
-            regular: !capture,
-        });
-    }
-}
-/** Given current counts of all listeners, adjust them for a specific node given
- * its old listeners and its new listeners. Return which listener counts have
- * dropped to zero and which listener counts have gone from zero to a positive
- * number. Also include a set of all the new event types.
- */
-export function adjustCountsAndGetListenerTypesToRemoveAndAdd(counts, oldListeners, newListeners) {
-    // iterate through old and new listeners to calculate the change in listener
-    // counts
-    const countDiffs = {};
-    oldListeners.forEach(listener => {
-        const capture = listener.options && listener.options.capture ? true : false;
-        const totals = countDiffs[listener._type];
-        const currDiff = capture ? totals?.capture : totals?.regular;
-        const newDiff = currDiff ? currDiff - 1 : -1;
-        if (totals) {
-            if (capture) {
-                totals.capture = newDiff;
-            }
-            else {
-                totals.regular = newDiff;
-            }
-        }
-        else {
-            countDiffs[listener._type] = {
-                regular: capture ? 0 : newDiff,
-                capture: capture ? newDiff : 0,
-            };
-        }
-    });
-    const allNewEvents = new Map();
-    newListeners.forEach(listener => {
-        const capture = listener.options && listener.options.capture ? true : false;
-        const totals = countDiffs[listener._type];
-        const currDiff = capture ? totals?.capture : totals?.regular;
-        const newDiff = currDiff ? currDiff + 1 : 1;
-        if (totals) {
-            if (capture) {
-                totals.capture = newDiff;
-            }
-            else {
-                totals.regular = newDiff;
-            }
-        }
-        else {
-            countDiffs[listener._type] = {
-                regular: capture ? 0 : newDiff,
-                capture: capture ? newDiff : 0,
-            };
-        }
-        updateListenerChangeMap(allNewEvents, listener._type, capture);
-    });
-    const toAdd = new Map();
-    const toRemove = new Map();
-    for (const [k, v] of Object.entries(countDiffs)) {
-        const tpe = k;
-        const diffTotals = v;
-        const currCount = counts[tpe];
-        currCount.capture = currCount.capture + diffTotals.capture;
-        currCount.regular = currCount.regular + diffTotals.regular;
-        // if currCount is now zero, and diff is negative, we no longer have any
-        // listeners of that type
-        if (currCount.capture === 0) {
-            if (diffTotals.capture < 0) {
-                updateListenerChangeMap(toRemove, tpe, true);
-            }
-        }
-        else if (currCount.capture > 0) {
-            if (diffTotals.capture === currCount.capture) {
-                updateListenerChangeMap(toAdd, tpe, true);
-            }
-        }
-        else {
-            throw new Error('EventListener counts out of sync (this indicates a ctrl-fx framework bug)');
-        }
-        // repeat for regular listeners
-        if (currCount.regular === 0) {
-            if (diffTotals.regular < 0) {
-                updateListenerChangeMap(toRemove, tpe, false);
-            }
-        }
-        else if (currCount.regular > 0) {
-            if (diffTotals.regular === currCount.regular) {
-                updateListenerChangeMap(toAdd, tpe, false);
-            }
-        }
-        else {
-            throw new Error('EventListener counts out of sync (this indicates a ctrl-fx framework bug)');
-        }
-    }
-    return { toRemove, toAdd, allNewEvents };
-}
-class EventManagerDelegate {
-    constructor(window, runEffect) {
-        Object.defineProperty(this, "window", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "runEffect", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.window = window;
-        this.runEffect = runEffect;
-    }
-    runListeners(ev, listeners) {
-        if (listeners.length) {
-            const listener = listeners[0];
-            if (toNativeEventType(listener.listener._type) === ev.type.toLowerCase() &&
-                (ev.eventPhase !== 1 || listener.listener.options.capture)) {
-                this.runListener(listener, ev, keepGoing => {
-                    if (keepGoing) {
-                        this.runListeners(ev, listeners.slice(1));
-                    }
-                    else {
-                        return;
-                    }
-                });
-            }
-            else {
-                this.runListeners(ev, listeners.slice(1));
-            }
-        }
-        else {
-            return;
-        }
-    }
-    runListener(listenerAndNode, ev, onComplete) {
-        let effect;
-        const listener = listenerAndNode.listener;
-        switch (listener._type) {
-            case 'focus':
-            case 'blur': {
-                effect = listener.effect;
-                break;
-            }
-            case 'change': {
-                let value = '';
-                let checked = false;
-                if (ev.target && 'tagName' in ev.target) {
-                    switch (ev.target.tagName) {
-                        case 'INPUT': {
-                            value = ev.target.value;
-                            checked = ev.target.checked;
-                            break;
-                        }
-                        case 'SELECT':
-                        case 'TEXTAREA': {
-                            value = ev.target.value;
-                            break;
-                        }
-                    }
-                }
-                const changeData = { value, checked };
-                effect = listener.effect(changeData);
-                break;
-            }
-            case 'click':
-            case 'dblclick':
-            case 'mouseenter':
-            case 'mouseleave':
-            case 'submit': {
-                effect = listener.effect;
-                break;
-            }
-            case 'mousemove': {
-                assertMouseMoveEvent(ev);
-                const mouseMoveData = {
-                    clientX: ev.clientX,
-                    clientY: ev.clientY,
-                    pageX: ev.pageX,
-                    pageY: ev.pageY,
-                    movementX: ev.movementX,
-                    movementY: ev.movementY,
-                };
-                effect = listener.effect(mouseMoveData);
-                break;
-            }
-            case 'wheel': {
-                assertWheelEvent(ev);
-                const wheelData = {
-                    deltaX: ev.deltaX,
-                    deltaY: ev.deltaY,
-                    deltaZ: ev.deltaZ,
-                    deltaMode: ev.deltaMode,
-                };
-                effect = listener.effect(wheelData);
-                break;
-            }
-            case 'scroll':
-            case 'scrollend': {
-                const owningNode = listenerAndNode.owningNode;
-                const scrollData = owningNode._type === 'InternalElementNode'
-                    ? {
-                        scrollTop: owningNode.realNode.scrollTop,
-                        scrollLeft: owningNode.realNode.scrollLeft,
-                    }
-                    : { scrollTop: 0, scrollLeft: 0 };
-                effect = listener.effect(scrollData);
-                break;
-            }
-            //console.log(ev.target && 'tagName' in ev.target && ev.target.tagName === 'INPUT')
-            case 'textinput': {
-                let textState;
-                if (ev.target && 'tagName' in ev.target) {
-                    switch (ev.target.tagName) {
-                        case 'INPUT':
-                        case 'TEXTAREA': {
-                            textState = {
-                                value: ev.target.value,
-                                selectionStart: ev.target.selectionStart,
-                                selectionEnd: ev.target.selectionEnd,
-                            };
-                            break;
-                        }
-                        case 'DIV': {
-                            textState = {
-                                value: ev.target.innerText,
-                                selectionStart: 0,
-                                selectionEnd: 0,
-                            };
-                            break;
-                        }
-                        default: {
-                            textState = {
-                                value: '',
-                                selectionStart: 0,
-                                selectionEnd: 0,
-                            };
-                        }
-                    }
-                }
-                else {
-                    textState = {
-                        value: '',
-                        selectionStart: 0,
-                        selectionEnd: 0,
-                    };
-                }
-                effect = listener.effect(textState);
-                break;
-            }
-            case 'touchmove':
-            case 'touchstart':
-            case 'touchend':
-            case 'touchcancel': {
-                assertTouchEvent(ev);
-                const touchData = [];
-                for (let i = 0; i < ev.touches.length; i++) {
-                    touchData.push({
-                        clientX: ev.touches[i].clientX,
-                        clientY: ev.touches[i].clientY,
-                        pageX: ev.touches[i].pageX,
-                        pageY: ev.touches[i].pageY,
-                    });
-                }
-                effect = listener.effect(touchData);
-                break;
-            }
-            case 'keydown':
-            case 'keyup': {
-                assertKeyEvent(ev);
-                const keyData = { key: ev.key, code: ev.code };
-                effect = listener.effect(keyData);
-                break;
-            }
-            case 'resize': {
-                const dimensions = {
-                    width: this.window.innerWidth,
-                    height: this.window.innerHeight,
-                };
-                effect = listener.onChange(dimensions);
-                break;
-            }
-            case 'popstate':
-            case 'locationchange': {
-                const loc = internalLocationFromLocation(currentLocation(this.window));
-                effect = listener.onChange(loc);
-                break;
-            }
-            case 'visibilitychange': {
-                const state = this.window.document.visibilityState;
-                effect = listener.onChange(state);
-                break;
-            }
-            case 'online':
-            case 'offline': {
-                effect = listener.effect;
-                break;
-            }
-            case 'custom': {
-                effect = listener.effect(ev.detail);
-                break;
-            }
-            default:
-                exhaustivenessCheck(listener);
-        }
-        this.runEffect(effect, listenerAndNode.owningNode, result => {
-            if (result !== undefined) {
-                if (result.preventDefault) {
-                    ev.preventDefault();
-                }
-                if (result.stopPropagation) {
-                    ev.stopImmediatePropagation();
-                    onComplete(false);
-                }
-                else {
-                    onComplete(true);
-                }
-            }
-            else {
-                onComplete(true);
-            }
-        });
-    }
-}
-function assertMouseMoveEvent(event) {
-    if (!('clientX' in event)) {
-        throw new Error('Event is not a mousemove event');
-    }
-}
-function assertWheelEvent(event) {
-    if (!('deltaX' in event)) {
-        throw new Error('Event is not a wheel event');
-    }
-}
-function assertTouchEvent(event) {
-    if (!(event.type.toLowerCase().startsWith('touch') && 'touches' in event)) {
-        throw new Error('Event is not a touch event');
-    }
-}
-function assertKeyEvent(event) {
-    if (!(event.type.toLowerCase().startsWith('key') &&
-        'key' in event &&
-        'code' in event)) {
-        throw new Error('Event is not a key event');
-    }
-}
-class ContainerEventManagerDelegate extends EventManagerDelegate {
-    constructor(window, runEffect) {
-        super(window, runEffect);
-        Object.defineProperty(this, "nodeLookupByEvent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: makeEventTypeKeyedRecord(containerEventTypes, () => new Set())
-        });
-        Object.defineProperty(this, "eventListeners", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "windowEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.onEvent(event);
-            }
-        });
-        Object.defineProperty(this, "windowCaptureEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.onEvent(event);
-            }
-        });
-        Object.defineProperty(this, "documentEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.onEvent(event);
-            }
-        });
-        Object.defineProperty(this, "documentCaptureEventListener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                this.onEvent(event);
-            }
-        });
-        Object.defineProperty(this, "counts", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.counts = makeListenerCounts(containerEventTypes);
-    }
-    onEvent(event) {
-        const eventType = event.type;
-        const nodeSet = this.nodeLookupByEvent[eventType];
-        if (!nodeSet) {
-            return;
-        }
-        const listenersToRun = [];
-        for (const node of nodeSet) {
-            const listeners = this.eventListeners.get(node);
-            if (listeners) {
-                listeners.forEach(listener => {
-                    if (listener._type === eventType &&
-                        (event.eventPhase !== 1 || listener.options.capture)) {
-                        listenersToRun.push({ listener, owningNode: node });
-                    }
-                });
-            }
-        }
-        this.runListeners(event, listenersToRun);
-        if (eventType === 'popstate') {
-            this.window.dispatchEvent(new Event('locationchange'));
-        }
-    }
-    setContainerListeners(node) {
-        if (node.containerListeners.length === 0) {
-            this.removeContainerListeners(node);
-            return;
-        }
-        const existingListeners = this.eventListeners.get(node);
-        const passive = node.containerListeners.reduce((acc, listener) => acc && (listener.options.passive ? true : false), true);
-        const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(this.counts, existingListeners || [], node.containerListeners);
-        containerEventTypes.forEach(ev => {
-            if (adjustments.allNewEvents.has(ev)) {
-                this.nodeLookupByEvent[ev].add(node);
-            }
-            else {
-                this.nodeLookupByEvent[ev].delete(node);
-            }
-        });
-        if (node.containerListeners.length > 0) {
-            this.eventListeners.set(node, [...node.containerListeners]);
-        }
-        else {
-            this.eventListeners.delete(node);
-        }
-        this.processAdjustments(adjustments, passive);
-    }
-    processAdjustments(adjustments, passive) {
-        for (const [ev, changes] of adjustments.toAdd) {
-            switch (ev) {
-                case 'resize':
-                case 'popstate':
-                case 'locationchange':
-                case 'online':
-                case 'offline': {
-                    if (changes.capture) {
-                        this.window.addEventListener(ev, this.windowCaptureEventListener, {
-                            capture: true,
-                            passive,
-                        });
-                    }
-                    if (changes.regular) {
-                        this.window.addEventListener(ev, this.windowEventListener, {
-                            capture: false,
-                            passive,
-                        });
-                    }
-                    break;
-                }
-                case 'keydown':
-                case 'keyup':
-                case 'visibilitychange': {
-                    if (changes.capture) {
-                        this.window.document.addEventListener(ev, this.documentCaptureEventListener, { capture: true, passive });
-                    }
-                    if (changes.regular) {
-                        this.window.document.addEventListener(ev, this.documentEventListener, { capture: false, passive });
-                    }
-                    break;
-                }
-                default: {
-                    exhaustivenessCheck(ev);
-                }
-            }
-        }
-    }
-    removeContainerListeners(node) {
-        const existingListeners = this.eventListeners.get(node);
-        if (!existingListeners) {
-            return;
-        }
-        const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(this.counts, existingListeners, []);
-        this.processAdjustments(adjustments, false);
-        // there should be no "adds", so we don't really care about  the value of
-        // passive
-        existingListeners.forEach(listener => {
-            this.nodeLookupByEvent[listener._type].delete(node);
-        });
-        this.eventListeners.delete(node);
-    }
-}
-class ElementEventManagerDelegate extends EventManagerDelegate {
-    constructor(window, runEffect) {
-        super(window, runEffect);
-        Object.defineProperty(this, "listeners", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "customHandlers", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-    }
-    setElementListeners(node) {
-        const standardListeners = node.eventListeners.filter((l) => l._type !== 'custom');
-        const customListeners = node.eventListeners.filter((l) => l._type === 'custom');
-        this.updateCustomListeners(node, customListeners);
-        if (standardListeners.length === 0) {
-            this.removeStandardListeners(node);
-            return;
-        }
-        let listenerInfo = this.listeners.get(node);
-        if (!listenerInfo) {
-            // eslint-disable-next-line @typescript-eslint/no-this-alias
-            const that = this;
-            listenerInfo = {
-                counts: makeListenerCounts(eventTypes),
-                listeners: [],
-                realListener(event) {
-                    const listeners = that.listeners.get(node)?.listeners;
-                    if (listeners) {
-                        that.runListeners(event, listeners.map(listener => ({
-                            listener,
-                            owningNode: node,
-                        })));
-                    }
-                },
-            };
-            this.listeners.set(node, listenerInfo);
-        }
-        const passive = standardListeners.reduce((acc, listener) => acc && (listener.options.passive ? true : false), true);
-        const adjustments = adjustCountsAndGetListenerTypesToRemoveAndAdd(listenerInfo.counts, listenerInfo.listeners, standardListeners);
-        listenerInfo.listeners = [...standardListeners];
-        for (const [tpe, info] of adjustments.toAdd) {
-            const domType = toNativeEventType(tpe);
-            if (info.regular) {
-                node.realNode.addEventListener(domType, listenerInfo.realListener, {
-                    capture: false,
-                    passive,
-                });
-            }
-            if (info.capture) {
-                node.realNode.addEventListener(domType, listenerInfo.realListener, {
-                    capture: true,
-                    passive,
-                });
-            }
-        }
-        for (const [tpe, info] of adjustments.toRemove) {
-            const domType = toNativeEventType(tpe);
-            if (info.regular) {
-                node.realNode.removeEventListener(domType, listenerInfo.realListener, false);
-            }
-            if (info.capture) {
-                node.realNode.removeEventListener(domType, listenerInfo.realListener, true);
-            }
-        }
-    }
-    updateCustomListeners(node, customListeners) {
-        const existingHandlers = this.customHandlers.get(node) ?? new Map();
-        const byName = new Map();
-        for (const l of customListeners) {
-            const arr = byName.get(l.eventName) ?? [];
-            arr.push(l);
-            byName.set(l.eventName, arr);
-        }
-        for (const [name, { realListener }] of existingHandlers) {
-            if (!byName.has(name)) {
-                node.realNode.removeEventListener(name, realListener, false);
-                existingHandlers.delete(name);
-            }
-        }
-        for (const [name, listeners] of byName) {
-            const existing = existingHandlers.get(name);
-            if (existing) {
-                existing.listeners = listeners;
-            }
-            else {
-                // eslint-disable-next-line @typescript-eslint/no-this-alias
-                const that = this;
-                const info = { listeners, realListener: null };
-                info.realListener = (ev) => {
-                    const detail = ev.detail;
-                    for (const l of info.listeners) {
-                        that.runEffect(l.effect(detail), node, result => {
-                            if (result?.stopPropagation)
-                                ev.stopImmediatePropagation();
-                            if (result?.preventDefault)
-                                ev.preventDefault();
-                        });
-                    }
-                };
-                existingHandlers.set(name, info);
-                node.realNode.addEventListener(name, info.realListener, {
-                    capture: false,
-                    passive: false,
-                });
-            }
-        }
-        if (existingHandlers.size > 0) {
-            this.customHandlers.set(node, existingHandlers);
-        }
-        else {
-            this.customHandlers.delete(node);
-        }
-    }
-    removeStandardListeners(node) {
-        const listenerInfo = this.listeners.get(node);
-        if (!listenerInfo) {
-            return;
-        }
-        for (const [eventType, info] of Object.entries(listenerInfo.counts)) {
-            const domType = toNativeEventType(eventType);
-            if (info.regular) {
-                node.realNode.removeEventListener(domType, listenerInfo.realListener, false);
-            }
-            if (info.capture) {
-                node.realNode.removeEventListener(domType, listenerInfo.realListener, true);
-            }
-        }
-        this.listeners.delete(node);
-    }
-}
-export class EventManager {
-    constructor(window, runEffect) {
-        Object.defineProperty(this, "containerDelegate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "elementDelegate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.containerDelegate = new ContainerEventManagerDelegate(window, runEffect);
-        this.elementDelegate = new ElementEventManagerDelegate(window, runEffect);
-    }
-    setContainerListeners(node) {
-        this.containerDelegate.setContainerListeners(node);
-    }
-    setElementListeners(node) {
-        this.elementDelegate.setElementListeners(node);
-    }
-}