jpf-mobx 1.0.6

package/src/controls/svg/index.ts

@@ -0,0 +1,13 @@
+//export * from "./Circle/Circle";
+//export * from "./Ellipse/Ellipse";
+//export * from "./ForeignObject/ForeignObject";
+//export * from "./Group/Group";
+//export * from "./Line/Line";
+//export * from "./Pattern/Pattern";
+//export * from "./Polygon/Polygon";
+//export * from "./Polyline/Polyline";
+//export * from "./Rectangle/Rectangle";
+//export * from "./Svg/Svg";
+//export * from "./Text/Text";
+//export * from "./Title/Title";
+//export * from "./svg";

package/src/controls/svg/svg.ts

@@ -0,0 +1,20 @@
+//import { Subscribable, isSubscribable, unwrap, computed } from "knockout";
+
+//export interface SvgPoint {
+//    x: number;
+//    y: number;
+//}
+
+//export function serializePoints(points: Array<SvgPoint> | Subscribable<Array<SvgPoint>>): string | Subscribable<string> {
+//    if (points) {
+//        if (isSubscribable(points)) {
+//            return computed<string>(
+//                () => {
+//                    return unwrap(points).map((point) => { return point.x + "," + point.y }).join(" ");
+//                }
+//            );
+//        }
+//        return unwrap(points).map((point) => { return point.x + "," + point.y }).join(" ");
+//    }
+//    return null;
+//}

package/src/framework/View.ts

@@ -0,0 +1,226 @@
+import "tocca";
+import { Subscribable, unwrap, isSubscribable } from "./observable";
+import { ViewModel, applyBindings as applyViewModelToElement } from "./ViewModel";
+import { reaction, IReactionDisposer } from "mobx";
+
+const htmlTags = {
+    a: true,
+    div: true,
+    img: true,
+    pre: true,
+    form: true,
+    span: true,
+    input: true,
+    button: true,
+    select: true,
+    textarea: true
+}
+
+const svgTags = {
+    g: true,
+    svg: true,
+    rect: true,
+    text: true,
+    line: true,
+    title: true,
+    circle: true,
+    pattern: true,
+    ellipse: true,
+    polygon: true,
+    polyline: true,
+    foreignObject: true
+}
+
+type TagName = keyof typeof htmlTags | keyof typeof svgTags;
+
+const svgNamespace = "http://www.w3.org/2000/svg";
+
+//#region View class
+export interface IView {
+    render(): HTMLElement;
+    dispose(): void;
+}
+
+export interface ViewOptions<TProperties> {
+    tagName: TagName;
+    properties?: TProperties;
+    children?: Array<IView> | Subscribable<Array<IView>>;
+}
+
+export class View<TProperties = any> implements IView {
+    constructor(properties: ViewOptions<TProperties>) {
+        this.tagName = properties.tagName;
+        this.properties = properties.properties;
+        this.optionsChildren = properties.children;
+        this.children = unwrap(properties.children);
+    }
+
+    // #region Private members
+    private readonly tagName: TagName;
+    private readonly optionsChildren: Array<IView> | Subscribable<Array<IView>>;
+    private children = new Array<IView>();
+
+
+    private buildChildren() {
+        if (this.element && this.children && this.children.length > 0) {
+            //Create a documentFragment to reduce browser repaints
+            const documentFragment = document.createDocumentFragment();
+            this.children.forEach((childView) => {
+                documentFragment.appendChild(childView.render());
+            });
+
+            //Add the documentFragment to the dom
+            this.element.appendChild(documentFragment);
+        }
+    }
+    // #endregion
+
+    // #region Protected members
+    protected element: HTMLElement;
+    protected readonly properties: TProperties;
+    protected readonly disposers = new Array<IReactionDisposer>();
+
+    protected build(): void {
+        applyViewModelToElement(this.properties, this.element, this.disposers);
+
+        if (this.children) {
+            this.buildChildren();
+        }
+
+
+        //Find out if the options.Children are observable.
+        if (isSubscribable(this.optionsChildren)) {
+
+            this.disposers.push(
+                reaction(
+                    () => unwrap(this.optionsChildren),
+                    (children: IView[]) => {
+                        this.setChildren(...children);
+                    }
+                )
+            );
+
+            //this.subscriptions.push(
+            //    this.optionsChildren.subscribe((children) => {
+            //        this.setChildren(...children);
+            //    })
+            //);
+        }
+    }
+
+    protected remove(): void {
+        if (this.element) {
+            if (this.element.remove) {
+                this.element.remove();
+            } else {
+                if (this.element.parentElement) {
+                    this.element.parentElement.removeChild(this.element);
+                }
+            }
+
+            this.element = null;
+        }
+    }
+
+    protected addChild(child: IView): View<TProperties> {
+        this.children.push(child);
+        this.buildChildren();
+        return this;
+    }
+
+    protected setChildren(...children: Array<IView>): View<TProperties> {
+        this.empty();
+
+        this.children = children;
+        this.buildChildren();
+
+        return this;
+    }
+
+    protected empty(): void {
+        this.children = [];
+
+        if (this.element) {
+            this.element.innerHTML = "";
+            while (this.element.firstChild) {
+                this.element.removeChild(this.element.firstChild);
+            }
+        }
+    }
+    // #endregion
+
+    // #region Public members
+    render(): HTMLElement {
+        if (this.element) {
+            //If the element has already been rendered we remove the element from the dom
+            this.remove();
+        }
+
+        //Check if the build property is pointing to a function.
+        if (typeof this.build === "function") {
+            //Create the html element.
+            if (svgTags.hasOwnProperty(this.tagName)) {
+                //Create a SVGElement
+                this.element = document.createElementNS(svgNamespace, this.tagName) as any as HTMLElement;
+            } else {
+                //Create a HTMLElement
+                this.element = document.createElement(this.tagName);
+            }
+
+            //Build the UiElement
+            this.build();
+
+            //Return the fully functional html element
+            return this.element;
+        }
+
+        throw "The build method of this UiElement has not been defined";
+    }
+
+    dispose(): void {
+        for (let disposer of this.disposers) {
+            disposer();
+        }
+        for (let child of this.children) {
+            child.dispose();
+        }
+    }
+
+    focus(options?: FocusOptions) {
+        if (this.element) {
+            this.element.focus(options);
+        }
+    }
+    // #endregion
+}
+//#endregion
+
+//#region View dictionary
+var viewDictionary = new Map<any, any>();
+
+export function registerView(viewModel: any, view: any) {
+    viewDictionary.set(viewModel.prototype.constructor, view);
+}
+
+export function getView(viewModel: ViewModel): View {
+    if (viewModel && viewModel.constructor) {
+        const view = viewDictionary.get(viewModel.constructor);
+        if (view.prototype) {
+            // ReSharper disable once InconsistentNaming
+            return new view(viewModel);
+        }
+        //if (typeof view === "function") {
+        //    return view(viewModel);
+        //}
+    }
+    return null;
+}
+
+export function render(viewModel: ViewModel): HTMLElement {
+    const view = getView(viewModel);
+    if (view && view.render) {
+        return view.render();
+    }
+    return null;
+}
+//#endregion