jpf 4.2.15 → 4.2.16

package/src/controls/svg/Polyline/Polyline.ts

@@ -0,0 +1,31 @@
+import { View } from "../../../framework/View";
+import { Properties , extendProperties } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+import { SvgPoint, serializePoints } from "../svg";
+
+export interface PolylineProperties extends Properties {
+    points: Array<SvgPoint> | Subscribable<Array<SvgPoint>>;
+}
+
+export class PolylineView extends View<PolylineProperties> {
+    constructor(properties: PolylineProperties) {
+        super(
+            {
+                tagName: "polyline",
+                properties: extendProperties(
+                    {
+                        viewType: "Polyline",
+                        attributes: {
+                            points: serializePoints(properties.points)
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function polylineView(properties: PolylineProperties) {
+    return new PolylineView(properties);
+}

package/src/controls/svg/Rectangle/Rectangle.ts

@@ -0,0 +1,36 @@
+import { View } from "../../../framework/View";
+import { Properties, extendProperties  } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface RectangleProperties extends Properties {
+    x?: number | string | Subscribable<number | string>;
+    y?: number | string | Subscribable<number | string>;
+    width?: number | string | Subscribable<number | string>;
+    height?: number | string | Subscribable<number | string>;
+}
+
+export class RectangleView extends View<RectangleProperties> {
+    constructor(properties: RectangleProperties) {
+        super(
+            {
+                tagName: "rect",
+                properties: extendProperties(
+                    {
+                        viewType: "Rectangle",
+                        attributes: {
+                            x: properties.x,
+                            y: properties.y,
+                            width: properties.width,
+                            height: properties.height
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function rectangleView(properties: RectangleProperties) {
+    return new RectangleView(properties);
+}

package/src/controls/svg/Svg/Svg.ts

@@ -0,0 +1,43 @@
+import { View, IView } from "../../../framework/View";
+import { Properties, extendProperties } from "../../../framework/ViewModel";
+import { ObservableArray, Computed, Subscribable } from "knockout";
+import { PreserveAspectRatio } from "../../../framework/types";
+
+export interface SvgProperties extends Properties {
+    x?: number | string | Subscribable<number | string>;
+    y?: number | string | Subscribable<number | string>;
+    height?: number | string | Subscribable<number | string>;
+    width?: number | string | Subscribable<number | string>;
+    viewBox?: string;
+    preserveAspectRatio?: PreserveAspectRatio | Subscribable<PreserveAspectRatio>;
+    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+}
+
+export class SvgView extends View<SvgProperties> {
+    constructor(properties: SvgProperties) {
+        super(
+            {
+                tagName: "svg",
+                properties: extendProperties(
+                    {
+                        viewType: "Svg",
+                        attributes: {
+                            x: properties.x,
+                            y: properties.y,
+                            height: properties.height,
+                            width: properties.width,
+                            viewBox: properties.viewBox,
+                            preserveAspectRatio: properties.preserveAspectRatio
+                        }
+                    },
+                    properties
+                ),
+                children: properties.children
+            },
+        );
+    }
+}
+
+export function svgView(properties: SvgProperties) {
+    return new SvgView(properties);
+}

package/src/controls/svg/Text/Text.ts

@@ -0,0 +1,38 @@
+import { View } from "../../../framework/View";
+import { Properties, extendProperties  } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface TextProperties extends Properties {
+    x?: number | string | Subscribable<number | string>;
+    y?: number | string | Subscribable<number | string>;
+    dx?: number | string | Subscribable<number | string>;
+    dy?: number | string | Subscribable<number | string>;
+    rotate?: string | Subscribable<string>;
+}
+
+export class TextView extends View<TextProperties> {
+    constructor(properties: TextProperties) {
+        super(
+            {
+                tagName: "text",
+                properties: extendProperties(
+                    {
+                        viewType: "Text",
+                        attributes: {
+                            x: properties.x,
+                            y: properties.y,
+                            dx: properties.dx,
+                            dy: properties.dy,
+                            rotate: properties.rotate
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function textView(properties: TextProperties) {
+    return new TextView(properties);
+}

package/src/controls/svg/Title/Title.ts

@@ -0,0 +1,28 @@
+import { View } from "../../../framework/View";
+import { Properties, extendProperties } from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface TitleProperties extends Properties{
+    title: string | Subscribable<string>
+}
+
+export class TitleView extends View<TitleProperties> {
+    constructor(properties: TitleProperties) {
+        super(
+            {
+                tagName: "title",
+                properties: extendProperties(
+                    {
+                        viewType: "Title",
+                        textContent: properties.title
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function titleView(properties: TitleProperties) {
+    return new TitleView(properties);
+}

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,213 @@
+import "tocca";
+import { unwrap, isSubscribable, Subscribable, Subscription } from "knockout";
+import { ViewModel, applyBindings as applyViewModelToElement } from "./ViewModel";
+
+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 subscriptions = new Array<Subscription>();
+
+    protected build(): void {
+        applyViewModelToElement(this.properties, this.element, this.subscriptions);
+
+        if (this.children) {
+            this.buildChildren();
+        }
+
+        //Find out if the options.Children are observable.
+        if (isSubscribable(this.optionsChildren)) {
+            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 subscription of this.subscriptions) {
+            subscription.dispose();
+        }
+        for (let child of this.children) {
+            child.dispose();
+        }
+    }
+
+    focus(options?: FocusOptions) {
+        if (this.element) {
+            this.element.focus(options);
+        }
+    }
+    // #endregion
+}
+//#endregion
+
+//#region View dictionary
+export var viewDictionary = new Map<any, any>();
+
+export function registerView(viewModel, resolver: any) {
+    viewDictionary.set(viewModel.prototype.constructor, resolver);
+}
+
+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