jpf-mobx 1.0.6

package/src/framework/ViewModel.ts

@@ -0,0 +1,478 @@
+import { userAgent } from "./userAgent";
+import { EventListeners, UiElementEventMap, IEventListenerOptions, IGenericEventListener, mouseEvents, touchEvents, isGlobalEvent } from "./event";
+import { Attributes, AttributesSubscribable } from "./attributes";
+import { extend } from "jquery";
+import { Style, StyleSubscribable } from "./style";
+import { isSubscribable, unwrap, Subscribable } from "./observable";
+import { autorun, IReactionDisposer } from "mobx";
+
+export interface WebSocketMessageHandler {
+    handleWebSocketMessage: (message: any) => void;
+}
+
+export function handleWebSocketMessage(object: object, message: any) {
+    bubbleDownObjectTreeAndExecuteHandler(
+        object,
+        (object) => {
+            const webSocketMessageHandler = object as WebSocketMessageHandler;
+            if (webSocketMessageHandler.handleWebSocketMessage && typeof webSocketMessageHandler.handleWebSocketMessage === "function") {
+                //Call the handleWebSocketMessage method
+                webSocketMessageHandler.handleWebSocketMessage(message);
+            }
+        }
+    );
+}
+
+//This function bubbles down an object tree
+//The given handler is executed on the given object and all its child properties of type object
+export function bubbleDownObjectTreeAndExecuteHandler(object: object, handler: (object) => void) {
+    //Find out if the object is an array
+    if (object.constructor === Array) {
+        for (const arrayEntry of object as Array<any>) {
+            if (typeof arrayEntry === "object") {
+                bubbleDownObjectTreeAndExecuteHandler(arrayEntry, handler);
+            }
+        }
+    } else {
+        //Find out if the object implements the WebSocketMessageHandler interface
+        if (isSubscribable(object)) {
+            var unwrapped = unwrap(object);
+            if (typeof unwrapped === "object") {
+                bubbleDownObjectTreeAndExecuteHandler(unwrapped, handler);
+            }
+        } else {
+            handler(object);
+            //Find out if the object has properties of type object
+            for (const key in Object.keys(object)) {
+                const property = object[key];
+                if (property && typeof property === "object") {
+                    //Call handleWebSocketMessage method on the property to bubble down the object tree.
+                    bubbleDownObjectTreeAndExecuteHandler(property, handler);
+                }
+            }
+        }
+    }
+}
+
+//#region Null check
+export function isNullOrUndefined(value): boolean {
+    return value === null || typeof value === "undefined";
+}
+
+export interface Properties {
+    attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | Subscribable<boolean>;
+    disabled?: boolean | Subscribable<boolean>;
+    innerHtml?: any | Subscribable<any>;
+    textContent?: string | Subscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: EventListeners;
+    viewType?: string;
+    focused?: boolean | Subscribable<boolean>;
+}
+
+export abstract class ViewModel implements Properties {
+    //protected constructor(properties?: Properties) {
+    //    this.setProperties(this, properties);
+    //}
+    protected setProperties<TProperties>(object: object, properties?: TProperties) {
+        if (properties) {
+            Object.keys(properties).forEach((property) => {
+                object[property] = properties[property];
+            });
+        }
+    }
+
+    attributes?: Attributes | AttributesSubscribable;
+    classNames?: Array<string> | Subscribable<Array<string>>;
+    style?: Style | StyleSubscribable;
+    visible?: boolean | Subscribable<boolean>;
+    disabled?: boolean | Subscribable<boolean>;
+    innerHtml?: any | Subscribable<any>;
+    textContent?: string | Subscribable<string>;
+    addViewModelToDataObject?: boolean;
+    userSelectable?: boolean;
+    eventListeners?: EventListeners;
+    viewType?: string;
+    focused?: boolean | Subscribable<boolean>;
+}
+
+//#region ViewModel helper functions
+
+//Function to merge two viewModels. The source is applied to the target. Corresponding properties are overwritten in the target.
+export function extendProperties<TResult = Properties, TTarget = Properties, TSource = Properties>(target: TTarget, source: TSource): TResult {
+    return extend(true, target, source) as any as TResult;
+}
+
+//Functions to bind the viewModel to a html element
+export function applyBindings(properties: Properties, element: HTMLElement, subscriptions: Array<IReactionDisposer>) {
+    element.setAttribute("viewtype", properties.viewType || "View");
+
+    if (properties.classNames) {
+
+        const subscription = autorun(() => {
+            applyClassesToElement(unwrap(properties.classNames), true, element);
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+
+        //applyClassesToElement(unwrap<string[]>(properties.classNames), true, element);
+
+        //if (isSubscribable(properties.classNames)) {
+        //    const subscription = properties.classNames.subscribe((classNames: Array<string>) => {
+        //        applyClassesToElement(classNames, true, element);
+        //    });
+
+        //    if (subscriptions) {
+        //        subscriptions.push(subscription);
+        //    }
+        //}
+    }
+
+    if (properties.attributes) {
+        Object.keys(properties.attributes).forEach((key) => {
+            var value = properties.attributes[key];
+
+            const subscription = autorun(() => {
+                applyAttributeToElement(key as keyof Attributes, unwrap(value), element);
+            });
+
+            if (subscriptions) {
+                subscriptions.push(subscription);
+            }
+
+            //applyAttributeToElement(key as keyof Attributes, unwrap(value), element);
+            //if (isSubscribable(value)) {
+            //    const subscription = value.subscribe((newValue: string) => {
+            //        applyAttributeToElement(key as keyof Attributes, newValue, element);
+            //    });
+
+            //    if (subscriptions) {
+            //        subscriptions.push(subscription);
+            //    }
+            //}
+        });
+    }
+
+    if (properties.style) {
+        Object.keys(properties.style).forEach((key) => {
+            const style = properties.style[key];
+
+            const subscription = autorun(() => {
+                element.style[key] = unwrap(style);
+            });
+
+            if (subscriptions) {
+                subscriptions.push(subscription);
+            }
+
+            //element.style[key] = unwrap(style);
+            //if (isSubscribable(style)) {
+            //    const subscription = style.subscribe((newStyle) => {
+            //        element.style[key] = newStyle;
+            //    });
+
+            //    if (subscriptions) {
+            //        subscriptions.push(subscription);
+            //    }
+            //}
+        });
+    }
+
+    if (!isNullOrUndefined(properties.innerHtml)) {
+
+        const subscription = autorun(() => {
+            element.innerHTML = unwrap(properties.innerHtml);
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+
+        //element.innerHTML = unwrap(properties.innerHtml);
+        //if (isSubscribable(properties.innerHtml)) {
+        //    const subscription = properties.innerHtml.subscribe((innerHtml: string) => {
+        //        element.innerHTML = innerHtml;
+        //    });
+
+        //    if (subscriptions) {
+        //        subscriptions.push(subscription);
+        //    }
+        //}
+    }
+
+    if (!isNullOrUndefined(properties.textContent)) {
+        const subscription = autorun(() => {
+            var textContent = unwrap<string>(properties.textContent);
+
+            if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+                element.firstChild.nodeValue = textContent;
+            } else {
+                element.textContent = unwrap(properties.textContent);
+            }
+        });
+
+        if (subscriptions) {
+            subscriptions.push(subscription);
+        }
+
+        //element.textContent = unwrap(properties.textContent);
+        //if (isSubscribable(properties.textContent)) {
+        //    const subscription = properties.textContent.subscribe((textContent: string) => {
+        //        if (element.hasChildNodes() && element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+        //            //The first child is a text node so the most efficient way is to use the nodeValue property
+        //            element.firstChild.nodeValue = textContent;
+        //        } else {
+        //            element.textContent = textContent;
+        //        }
+        //    });
+
+        //    if (subscriptions) {
+        //        subscriptions.push(subscription);
+        //    }
+        //}
+    }
+
+    //Find out if the element is none selectable
+    if (properties.userSelectable === false) {
+        applyEventListenerToElement("selectstart", () => { return false; }, { passive: true }, element);
+        element.style.userSelect = "none";
+    }
+
+    if (properties.addViewModelToDataObject) {
+        if (!element["data"]) {
+            element["data"] = {};
+        }
+        element["data"].viewModel = properties;
+    }
+
+    if (properties.eventListeners) {
+        applyEventListenersToElement(properties, element);
+    }
+
+
+    const subscriptionVisible = autorun(() => {
+        applyVisibilityToElement(unwrap(properties.visible), element);
+    });
+
+    if (subscriptions) {
+        subscriptions.push(subscriptionVisible);
+    }
+
+    //applyVisibilityToElement(unwrap(properties.visible), element);
+    //if (isSubscribable(properties.visible)) {
+    //    const subscription = properties.visible.subscribe((visible) => {
+    //        applyVisibilityToElement(visible, element);
+    //    });
+
+    //    if (subscriptions) {
+    //        subscriptions.push(subscription);
+    //    }
+    //}
+
+
+    const subscriptionDisabled = autorun(() => {
+        applyDisabledToElement(unwrap(properties.disabled), element);
+    });
+
+    if (subscriptions) {
+        subscriptions.push(subscriptionDisabled);
+    }
+
+    //applyDisabledToElement(unwrap(properties.disabled), element);
+    //if (isSubscribable(properties.disabled)) {
+    //    const subscription = properties.disabled.subscribe((disabled) => {
+    //        applyDisabledToElement(disabled, element);
+    //    });
+
+    //    if (subscriptions) {
+    //        subscriptions.push(subscription);
+    //    }
+    //}
+
+
+    const subscriptionFocus = autorun(() => {
+        applyFocusToElement(unwrap(properties.focused), element);
+    });
+    if (subscriptions) {
+        subscriptions.push(subscriptionFocus);
+    }
+
+    //applyFocusToElement(unwrap(properties.focused), element);
+    //if (isSubscribable(properties.focused)) {
+    //    const subscription = properties.focused.subscribe((focused) => {
+    //        applyFocusToElement(focused, element);
+    //    });
+
+    //    if (subscriptions) {
+    //        subscriptions.push(subscription);
+    //    }
+    //}
+}
+
+function applyVisibilityToElement(visible: boolean, element: HTMLElement) {
+    if (visible === false) {
+        element.classList.add("hidden");
+    } else {
+        element.classList.remove("hidden");
+    }
+}
+
+function applyDisabledToElement(disabled: boolean, element: HTMLElement) {
+    if (disabled) {
+        element.setAttribute("disabled", "disabled");
+    } else {
+        element.removeAttribute("disabled");
+    }
+}
+
+function applyEventListenersToElement(viewModel: Properties, element: HTMLElement) {
+    //Add the eventListeners to the element
+    const clickEventListeners = new Array<IGenericEventListener>();
+    const doubleClickEventListeners = new Array<IGenericEventListener>();
+
+    Object.entries(viewModel.eventListeners).forEach((entry) => {
+        var eventName = entry[0] as keyof UiElementEventMap;
+        var eventListener = entry[1] as IGenericEventListener;
+
+        if (eventName === "click") {
+            clickEventListeners.push(eventListener);
+            return;
+        }
+        if (eventName === "dblclick") {
+            doubleClickEventListeners.push(eventListener);
+            return;
+        }
+
+        if (eventName === "dragstart") {
+            element.setAttribute("draggable", "true");
+        }
+
+        if (isGlobalEvent(eventName)) {
+            applyEventListenerToElement(
+                eventName,
+                (event: Event) => {
+                    if (eventListener.options) {
+                        const options = eventListener.options as IEventListenerOptions;
+                        const keyEvent = event as KeyboardEvent;
+                        if (options.altKey && !keyEvent.altKey) {
+                            return;
+                        }
+                        if (options.shiftKey && !keyEvent.shiftKey) {
+                            return;
+                        }
+                        if (options.ctrlKey && !keyEvent.ctrlKey) {
+                            return;
+                        }
+                        if (options.eventKey && options.eventKey !== keyEvent.key) {
+                            return;
+                        }
+                    }
+
+                    eventListener.listener.call(viewModel, event);
+                },
+                eventListener.options,
+                element
+            );
+        }
+        else if (mouseEvents[eventName] && userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+        else if (touchEvents[eventName] && userAgent.device.supportsTouchEvents) {
+            applyEventListenerToElement(eventName, eventListener.listener, eventListener.options, element);
+        }
+    });
+
+    clickEventListeners.forEach((clickEventListener) => {
+        if (userAgent.device.supportsTouchEvents) {
+            // ReSharper disable once Html.EventNotResolved
+            applyEventListenerToElement("tap", clickEventListener.listener, clickEventListener.options, element);
+        }
+        if (userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("click", clickEventListener.listener, clickEventListener.options, element);
+        }
+    });
+
+    doubleClickEventListeners.forEach((doubleClickEventListener) => {
+        if (userAgent.device.supportsTouchEvents) {
+            // ReSharper disable once Html.EventNotResolved
+            applyEventListenerToElement("dbltap", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+        if (userAgent.device.supportsMouseEvents) {
+            applyEventListenerToElement("dblclick", doubleClickEventListener.listener, doubleClickEventListener.options, element);
+        }
+    });
+}
+
+function applyEventListenerToElement(type: keyof UiElementEventMap, listener: (event: any) => any, options: IEventListenerOptions, element: HTMLElement) {
+    if (!type) {
+        throw new Error("type is mandatory");
+    }
+    if (!listener) {
+        throw new Error("listener is mandatory");
+    }
+    if (!options) {
+        options = {};
+    }
+    if (!options.passive) {
+        options.passive = false;
+    }
+    if (!options.once) {
+        options.once = false;
+    }
+
+    if (element.addEventListener) {
+        element.addEventListener(
+            type,
+            (event) => {
+                listener.call(event);
+            },
+            {
+                passive: options.passive,
+                once: options.once
+            });
+    } else if (element["attachEvent"]) {
+        element["attachEvent"](
+            type,
+            (event) => {
+                listener(event);
+            }
+        );
+    } else {
+        throw "Your browser does not support 'addEventListener'";
+    }
+}
+
+function applyClassesToElement(classNames: string[], replace: boolean, element: HTMLElement) {
+    //If all existing classes need to be replace we reset the classes object to an empty object
+    if (replace) {
+        element.className = "";
+    }
+
+    //Add all the classNames to the classes object
+    if (classNames) {
+        classNames.forEach((className) => {
+            element.classList.add(className);
+        });
+    }
+}
+
+function applyAttributeToElement(name: keyof Attributes, value: string, element: HTMLElement) {
+    if (isNullOrUndefined(value)) {
+        element.removeAttribute(name);
+    } else {
+        element.setAttribute(name, value);
+    }
+}
+
+function applyFocusToElement(focused: boolean, element: HTMLElement) {
+    if (focused) {
+        element.focus();
+    }
+}
+//#endregion

package/src/framework/attributes.ts

@@ -0,0 +1,92 @@
+import { Subscribable } from "./observable";
+import { PreserveAspectRatio } from "./types";
+
+export interface Attributes {
+    alt?: string,
+    disabled?: string,
+    href?: string,
+    target?: string,
+    id?: string,
+    src?: string,
+    title?: string,
+    class?: string,
+    tabindex?: number,
+    draggable?: string,
+    placeholder?: string,
+    for?: string,
+    type?: string,
+    value?: string,
+    view?: string,
+    checked?: string;
+    enctype?: string;
+    name?: string;
+    multiple?: boolean;
+    ["aria-label"]?: string;
+    cx?: number | string;
+    cy?: number | string;
+    r?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+    x?: number | string;
+    x1?: number | string;
+    x2?: number | string;
+    y?: number | string;
+    y1?: number | string;
+    y2?: number | string;
+    width?: number | string;
+    height?: number | string;
+    patternUnits?: string;
+    patternTransform?: string;
+    points?: string;
+    viewBox?: string;
+    dx?: number | string;
+    dy?: number | string;
+    rotate?: string;
+    preserveAspectRatio?: PreserveAspectRatio;
+    xmlns?: string;
+}
+
+export interface AttributesSubscribable {
+    alt?: string | Subscribable<string>,
+    disabled?: string | Subscribable<string>,
+    href?: string | Subscribable<string>,
+    target?: string | Subscribable<string>,
+    id?: string | Subscribable<string>,
+    src?: string | Subscribable<string>,
+    title?: string | Subscribable<string>,
+    class?: string | Subscribable<string>,
+    tabindex?: number | Subscribable<number>,
+    draggable?: string | Subscribable<string>,
+    placeholder?: string | Subscribable<string>,
+    for?: string | Subscribable<string>,
+    type?: string | Subscribable<string>,
+    value?: string | Subscribable<string>,
+    view?: string | Subscribable<string>,
+    checked?: string | Subscribable<string>;
+    enctype?: string | Subscribable<string>;
+    name?: string | Subscribable<string>;
+    multiple?: boolean | Subscribable<boolean>;
+    ["aria-label"]?: string | Subscribable<string>;
+    cx?: number | string | Subscribable<number | string>;
+    cy?: number | string | Subscribable<number | string>;
+    r?: number | string | Subscribable<number | string>;
+    rx?: number | string | Subscribable<number | string>;
+    ry?: number | string | Subscribable<number | string>;
+    x?: number | string | Subscribable<number | string>;
+    x1?: number | string | Subscribable<number | string>;
+    x2?: number | string | Subscribable<number | string>;
+    y?: number | string | Subscribable<number | string>;
+    y1?: number | string | Subscribable<number | string>;
+    y2?: number | string | Subscribable<number | string>;
+    width?: number | string | Subscribable<number | string>;
+    height?: number | string | Subscribable<number | string>;
+    patternUnits?: string | Subscribable<string>;
+    patternTransform?: string | Subscribable<string>;
+    points?: string | Subscribable<string>;
+    viewBox?: string | Subscribable<string>;
+    dx?: number | string | Subscribable<number | string>;
+    dy?: number | string | Subscribable<number | string>;
+    rotate?: string | Subscribable<string>;
+    preserveAspectRatio?: PreserveAspectRatio | Subscribable<PreserveAspectRatio>;
+    xmlns?: string| Subscribable<string>;
+}

package/src/framework/event.ts

@@ -0,0 +1,98 @@
+import * as leaflet from "leaflet";
+
+export const mouseEvents = {
+    click: true,
+    contextmenu: true,
+    mousedown: true,
+    mouseenter: true,
+    mouseleave: true,
+    mousemove: true,
+    mouseout: true,
+    mouseover: true,
+    mouseup: true
+};
+
+export const touchEvents = {
+    touchcancel: true,
+    touchend: true,
+    touchmove: true,
+    touchstart: true,
+    longtap: true,
+    swipeleft: true,
+    swiperight: true,
+    swipeup: true,
+    swipedown: true
+};
+
+export function isGlobalEvent(event: keyof UiElementEventMap): boolean {
+    return !(mouseEvents[event] || touchEvents[event]);
+}
+
+export interface UiElementEventMap extends HTMLElementEventMap {
+    "tap": Event;
+    "dbltap": Event;
+    "longtap": Event;
+    "swipeleft": Event;
+    "swiperight": Event;
+    "swipeup": Event;
+    "swipedown": Event;
+    "textInput": Event;
+}
+
+export interface IMouseEventListener extends IEventListener {
+    listener: (event: MouseEvent) => void;
+}
+
+export interface IFocusEventListener extends IEventListener {
+    listener: (event: FocusEvent) => void;
+}
+
+export interface IContextMenuEventListener extends IEventListener {
+    listener: (event: PointerEvent) => void
+}
+
+export interface ILeafletEventListener extends IEventListener {
+    listener: (event: leaflet.LeafletEvent) => void
+}
+
+export interface IGenericEventListener extends IEventListener {
+    listener: (event: Event) => void;
+}
+
+export interface IEventListener {
+    options?: IEventListenerOptions
+}
+
+export interface MouseEventListeners {
+    click?: IMouseEventListener;
+}
+
+export interface FocusEventListeners {
+    focusout?: IFocusEventListener;
+}
+
+export interface ContextMenuEventListeners {
+    contextMenu?: IContextMenuEventListener;
+}
+
+export interface LeafletEventListeners {
+    zoomend?: ILeafletEventListener;
+    moveend?: ILeafletEventListener;
+}
+
+export interface EventListeners extends MouseEventListeners, FocusEventListeners, ContextMenuEventListeners, LeafletEventListeners {
+    change?: IGenericEventListener;
+    load?: IGenericEventListener;
+}
+
+type EventKey = "Enter" | "ArrowDown" | "ArrowUp" | "ArrowLeft" | "ArrowRight";
+
+export interface IEventListenerOptions extends AddEventListenerOptions {
+    eventKey?: EventKey;
+    altKey?: boolean;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    mouseLeft?: boolean;
+    mouseMiddle?: boolean;
+    mouseRight?: boolean;
+}