jpf 5.0.3 → 5.0.7

package/src/controls/svg/Polygon/Polygon.ts

@@ -1,31 +1,31 @@
-import { View } from "../../../framework/View";
-import { Properties, extendProperties } from "../../../framework/ViewModel";
-import { Subscribable, unwrap } from "knockout";
-import { SvgPoint, serializePoints as getPoints } from "../svg";
+import { Element } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable, unwrap } from "../../../framework/observable";
+import { ISvgPoint as SvgPoint, serializePoints as getPoints } from "../svg";
 
-export interface PolygonProperties extends Properties {
-    points: Array<SvgPoint> | Subscribable<Array<SvgPoint>>;
+export interface IPolygonProperties extends IProperties {
+    points: Array<SvgPoint> | ISubscribable<Array<SvgPoint>>;
 }
 
-export class PolygonView extends View<PolygonProperties> {
-    constructor(properties: PolygonProperties) {
+export class PolygonElement extends Element<IPolygonProperties> {
+    constructor(properties: IPolygonProperties) {
         super(
             {
                 tagName: "polygon",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Polygon",
+                        elementType: "Polygon",
                         attributes: {
                             points: getPoints(unwrap(properties.points))
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function polygonView(properties: PolygonProperties) {
-    return new PolygonView(properties);
+export function createPolygon(properties: IPolygonProperties) {
+    return new PolygonElement(properties);
 }

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

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

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

@@ -1,36 +1,36 @@
-import { View } from "../../../framework/View";
-import { Properties, extendProperties  } from "../../../framework/ViewModel";
-import { Subscribable } from "knockout";
+import { Element } from "../../../framework/element";
+import { IProperties, extendProperties  } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-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 interface IRectangleProperties extends IProperties {
+    x?: number | string | ISubscribable<number | string>;
+    y?: number | string | ISubscribable<number | string>;
+    width?: number | string | ISubscribable<number | string>;
+    height?: number | string | ISubscribable<number | string>;
 }
 
-export class RectangleView extends View<RectangleProperties> {
-    constructor(properties: RectangleProperties) {
+export class RectangleElement extends Element<IRectangleProperties> {
+    constructor(properties: IRectangleProperties) {
         super(
             {
                 tagName: "rect",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Rectangle",
+                        elementType: "Rectangle",
                         attributes: {
                             x: properties.x,
                             y: properties.y,
                             width: properties.width,
                             height: properties.height
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function rectangleView(properties: RectangleProperties) {
-    return new RectangleView(properties);
+export function createRectangle(properties: IRectangleProperties) {
+    return new RectangleElement(properties);
 }

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

@@ -1,26 +1,27 @@
-import { View, IView } from "../../../framework/View";
-import { Properties, extendProperties } from "../../../framework/ViewModel";
-import { ObservableArray, Computed, Subscribable } from "knockout";
+import { Element, IElement } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 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>;
+export interface ISvgProperties extends IProperties {
+    x?: number | string | ISubscribable<number | string>;
+    y?: number | string | ISubscribable<number | string>;
+    height?: number | string | ISubscribable<number | string>;
+    width?: number | string | ISubscribable<number | string>;
     viewBox?: string;
-    preserveAspectRatio?: PreserveAspectRatio | Subscribable<PreserveAspectRatio>;
-    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+    preserveAspectRatio?: PreserveAspectRatio | ISubscribable<PreserveAspectRatio>;
+    children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
 
-export class SvgView extends View<SvgProperties> {
-    constructor(properties: SvgProperties) {
+export class SvgElement extends Element<ISvgProperties> {
+    constructor(properties: ISvgProperties) {
         super(
             {
                 tagName: "svg",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Svg",
+                        elementType: "Svg",
                         attributes: {
                             x: properties.x,
                             y: properties.y,
@@ -29,15 +30,14 @@ export class SvgView extends View<SvgProperties> {
                             viewBox: properties.viewBox,
                             preserveAspectRatio: properties.preserveAspectRatio
                         }
-                    },
-                    properties
-                ),
-                children: properties.children
+                    }
+                )
             },
+            properties.children
         );
     }
 }
 
-export function svgView(properties: SvgProperties) {
-    return new SvgView(properties);
+export function createSvg(properties: ISvgProperties) {
+    return new SvgElement(properties);
 }

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

@@ -1,23 +1,24 @@
-import { View } from "../../../framework/View";
-import { Properties, extendProperties  } from "../../../framework/ViewModel";
-import { Subscribable } from "knockout";
+import { Element } from "../../../framework/element";
+import { IProperties, extendProperties  } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-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 interface ITextProperties extends IProperties {
+    x?: number | string | ISubscribable<number | string>;
+    y?: number | string | ISubscribable<number | string>;
+    dx?: number | string | ISubscribable<number | string>;
+    dy?: number | string | ISubscribable<number | string>;
+    rotate?: string | ISubscribable<string>;
 }
 
-export class TextView extends View<TextProperties> {
-    constructor(properties: TextProperties) {
+export class TextElement extends Element<ITextProperties> {
+    constructor(properties: ITextProperties) {
         super(
             {
                 tagName: "text",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Text",
+                        elementType: "Text",
                         attributes: {
                             x: properties.x,
                             y: properties.y,
@@ -25,14 +26,13 @@ export class TextView extends View<TextProperties> {
                             dy: properties.dy,
                             rotate: properties.rotate
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function textView(properties: TextProperties) {
-    return new TextView(properties);
+export function createText(properties: ITextProperties) {
+    return new TextElement(properties);
 }

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

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

package/src/controls/svg/svg.ts

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

package/src/framework/attributes.ts

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

package/src/framework/{View.ts → element.ts}

@@ -1,6 +1,6 @@
 import "tocca";
-import { unwrap, isSubscribable, Subscribable, Subscription } from "knockout";
-import { ViewModel, applyBindings as applyViewModelToElement } from "./ViewModel";
+import { unwrap, isSubscribable, IDisposer, ISubscribable } from "./observable";
+import { IProperties, Properties, applyBindings } from "./properties";
 
 const htmlTags = {
     a: true,
@@ -34,39 +34,38 @@ type TagName = keyof typeof htmlTags | keyof typeof svgTags;
 
 const svgNamespace = "http://www.w3.org/2000/svg";
 
-//#region View class
-export interface IView {
+//#region Element class
+export interface IElement {
     render(): HTMLElement;
-    dispose(): void;
+    unmount(): void;
 }
 
-export interface ViewOptions<TProperties> {
+export interface IElementOptions<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);
+export class Element<TProperties = any> implements IElement {
+    constructor(options: IElementOptions<TProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
+        this.tagName = options.tagName;
+        this.properties = options.properties;
+        this.optionsChildren = children;
+        this.children = unwrap(children);
     }
 
     // #region Private members
     private readonly tagName: TagName;
-    private readonly optionsChildren: Array<IView> | Subscribable<Array<IView>>;
-    private children = new Array<IView>();
+    private readonly optionsChildren: Array<IElement> | ISubscribable<Array<IElement>>;
+    private children = new Array<IElement>();
 
 
     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());
-            });
+            for (let child of this.children) {
+                this.element.appendChild(child.render());
+            }
 
             //Add the documentFragment to the dom
             this.element.appendChild(documentFragment);
@@ -77,10 +76,10 @@ export class View<TProperties = any> implements IView {
     // #region Protected members
     protected element: HTMLElement;
     protected readonly properties: TProperties;
-    protected readonly subscriptions = new Array<Subscription>();
+    protected readonly disposers = new Array<IDisposer>();
 
     protected build(): void {
-        applyViewModelToElement(this.properties, this.element, this.subscriptions);
+        applyBindings(this.properties as IProperties, this.element, this.disposers);
 
         if (this.children) {
             this.buildChildren();
@@ -88,7 +87,7 @@ export class View<TProperties = any> implements IView {
 
         //Find out if the options.Children are observable.
         if (isSubscribable(this.optionsChildren)) {
-            this.subscriptions.push(
+            this.disposers.push(
                 this.optionsChildren.subscribe((children) => {
                     this.setChildren(...children);
                 })
@@ -110,13 +109,13 @@ export class View<TProperties = any> implements IView {
         }
     }
 
-    protected addChild(child: IView): View<TProperties> {
+    protected addChild(child: IElement): Element<TProperties> {
         this.children.push(child);
         this.buildChildren();
         return this;
     }
 
-    protected setChildren(...children: Array<IView>): View<TProperties> {
+    protected setChildren(...children: Array<IElement>): Element<TProperties> {
         this.empty();
 
         this.children = children;
@@ -164,12 +163,23 @@ export class View<TProperties = any> implements IView {
 
         throw "The build method of this UiElement has not been defined";
     }
-    dispose(): void {
-        for (let subscription of this.subscriptions) {
-            subscription.dispose();
+
+
+    //This method is used to dispose subscriptions before removing the element from the DOM to prevent memory leaks
+    unmount(): void {
+        const properties = this.properties as IProperties;
+        console.log("Unmount element " + properties.elementType);
+
+        //If the element has childeren then we unmount the children
+        if (this.children) {
+            for (let child of this.children) {
+                child.unmount();
+            }
         }
-        for (let child of this.children) {
-            child.dispose();
+
+        //If the element has subscriptions on observable we dispose the subscribtion
+        for (let disposer of this.disposers) {
+            disposer();
         }
     }
 
@@ -180,31 +190,34 @@ export class View<TProperties = any> implements IView {
     }
     // #endregion
 }
+
+export function element<TProperties>(options: IElementOptions<TProperties>, children?: Array<IElement> | ISubscribable<Array<IElement>>) {
+    return new Element<TProperties>(options, children);
+}
 //#endregion
 
 //#region View dictionary
-export var viewDictionary = new Map<any, any>();
+var elementDictionary = new Map<Function, any>();
 
-export function registerView(viewModel, resolver: any) {
-    viewDictionary.set(viewModel.prototype.constructor, resolver);
+export function registerElement(constructor: Function, element: any) {
+    elementDictionary.set(constructor, element);
 }
 
-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);
+export function getElement(properties: Properties): Element {
+    if (properties && properties.constructor) {
+        const element = elementDictionary.get(properties.constructor);
+        if (element.prototype) {
+            return new element(properties);
         }
-        if (typeof view === "function") {
-            return view(viewModel);
+        if (typeof element === "function") {
+            return element(properties);
         }
     }
     return null;
 }
 
-export function render(viewModel: ViewModel): HTMLElement {
-    const view = getView(viewModel);
+export function render(properties: Properties): HTMLElement {
+    const view = getElement(properties);
     if (view && view.render) {
         return view.render();
     }