ctrl-fx 0.0.1 → 0.1.0

package/dist/internal/eventmgr.js

@@ -0,0 +1,696 @@
+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);
+    }
+}