jpf 5.0.3 → 5.0.7

package/src/controls/kendo/index.ts

@@ -1,9 +1,9 @@
 export * from "./Chart/Chart";
 export * from "./Culture/Culture";
 export * from "./DataSource/DataSource";
-export * from "./Dialog/Dialog";
 export * from "./Editor/Editor";
 export * from "./Grid/Grid";
 export * from "./Menu/Menu";
-export * from "./ObservableObject/ObservableObject";
-export * from "./Tree/Tree";
+//export * from "./ObservableObject/ObservableObject";
+export * from "./Treeview/Treeview";
+export * from "./Window/Window";

package/src/controls/leaflet/LabelControl/LabelControl.ts

@@ -1,33 +1,33 @@
 import * as leaflet from "leaflet";
-import { IView, getView } from "../../../framework/View";
-import { ViewModel } from "../../../framework/ViewModel";
+import { IElement, getElement } from "../../../framework/element";
+import { Properties } from "../../../framework/properties";
 
-export interface LeafletLabelControlOptions extends leaflet.ControlOptions {
-    content: string | IView | ViewModel
+export interface ILeafletLabelControlOptions extends leaflet.ControlOptions {
+    content: string | IElement | Properties
 }
 
 export class LeafletLabelControl extends leaflet.Control {
-    constructor(options: LeafletLabelControlOptions) {
+    constructor(options: ILeafletLabelControlOptions) {
         super(options);
 
         this.content = options.content;
     }
 
-    private readonly content: string | IView | ViewModel;
+    private readonly content: string | IElement | Properties;
 
     onAdd(map: leaflet.Map): HTMLElement {
         const div = document.createElement("div");
 
         let view;
-        if (this.content instanceof ViewModel) {
-            view = getView(this.content);
+        if (this.content instanceof Properties) {
+            view = getElement(this.content);
             if (view) {
                 div.appendChild(view.render());
             }
         } else if (typeof this.content === "string") {
             div.innerText = this.content;
         } else {
-            view = this.content as IView;
+            view = this.content as IElement;
             if (view.render) {
                 div.appendChild(view.render());
             }
@@ -37,6 +37,6 @@ export class LeafletLabelControl extends leaflet.Control {
     }
 }
 
-export function leafletLabelControl(options: LeafletLabelControlOptions) {
+export function createLeafletLabelControl(options: ILeafletLabelControlOptions) {
     return new LeafletLabelControl(options);
 }

package/src/controls/leaflet/Map/Map.ts

@@ -1,33 +1,35 @@
-import { isObservable, unwrap, Observable, ObservableArray, Computed } from "knockout";
+import { isSubscribable, unwrap, ISubscribable } from "../../../framework/observable";
 import * as leaflet from "leaflet";
-import { View, registerView } from "../../../framework/View";
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { ILeafletEventListener } from "../../../framework/event";
 
-export interface MapProperties extends Properties {
+export interface IMapProperties extends IProperties {
     renderer?: leaflet.Renderer;
-    center?: leaflet.LatLngExpression | Observable<leaflet.LatLngExpression>;
+    center?: leaflet.LatLngExpression | ISubscribable<leaflet.LatLngExpression>;
     zoom?: number;
     south?: number;
     north?: number;
     west?: number;
     east?: number;
     tileLayers?: Array<leaflet.TileLayer>;
-    layers?: Array<leaflet.Layer> | ObservableArray<leaflet.Layer> | Computed<Array<leaflet.Layer>>;
-    controls?: Array<leaflet.Control> | ObservableArray<leaflet.Control>;
+    layers?: Array<leaflet.Layer> | ISubscribable<Array<leaflet.Layer>>;
+    controls?: Array<leaflet.Control> | ISubscribable<Array<leaflet.Control>>;
     zoomInTitle?: string;
     zoomOutTitle?: string;
 }
 
-export class MapView extends View<MapProperties> {
-    constructor(properties: MapProperties) {
+export class MapElement extends Element<IMapProperties> {
+    constructor(properties: IMapProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "LeafletMap"
+                        elementType: "LeafletMap"
                     },
-                    properties
+
                 )
             }
         );
@@ -40,26 +42,26 @@ export class MapView extends View<MapProperties> {
     build(): void {
         super.build();
 
-        const viewModel = this.properties;
-        if (!viewModel.center) {
-            viewModel.center = burtonville;
+        const properties = this.properties;
+        if (!properties.center) {
+            properties.center = burtonville;
         }
 
         const options: leaflet.MapOptions = {
-            renderer: viewModel.renderer,
+            renderer: properties.renderer,
             zoomControl: false
         };
 
         //Leaflet can not handle rendering from an element not attached to the DOM
         setTimeout(
             () => {
-                this.map = leaflet.map(this.element, options).setView(unwrap(viewModel.center), this.properties.zoom);
+                this.map = leaflet.map(this.element, options).setView(unwrap(properties.center), this.properties.zoom);
 
                 //Add the language specific zoom element
                 leaflet.control.zoom({
                     position: "topleft",
-                    zoomInTitle: viewModel.zoomInTitle,
-                    zoomOutTitle: viewModel.zoomOutTitle
+                    zoomInTitle: properties.zoomInTitle,
+                    zoomOutTitle: properties.zoomOutTitle
                 }).addTo(this.map);
 
                 if (this.properties.eventListeners) {
@@ -67,35 +69,36 @@ export class MapView extends View<MapProperties> {
                         this.map.on(
                             key,
                             (event) => {
-                                this.properties.eventListeners[key](event);
+                                const eventListener = this.properties.eventListeners[key] as ILeafletEventListener;
+                                eventListener.listener(event);
                             }
                         );
                     });
                 }
 
-                this.setTileLayers(viewModel.tileLayers);
+                this.setTileLayers(properties.tileLayers);
 
-                this.setLayers(unwrap(viewModel.layers));
-                if (isObservable(viewModel.layers)) {
-                    this.subscriptions.push(
-                        viewModel.layers.subscribe((layers) => {
+                this.setLayers(unwrap(properties.layers));
+                if (isSubscribable(properties.layers)) {
+                    this.disposers.push(
+                        properties.layers.subscribe((layers) => {
                             this.setLayers(layers);
                         })
                     );
                 }
 
-                this.setControls(unwrap(viewModel.controls));
-                if (isObservable(viewModel.controls)) {
-                    this.subscriptions.push(
-                        viewModel.controls.subscribe((controls) => {
+                this.setControls(unwrap(properties.controls));
+                if (isSubscribable(properties.controls)) {
+                    this.disposers.push(
+                        properties.controls.subscribe((controls) => {
                             this.setControls(controls);
                         })
                     );
                 }
 
-                if (isObservable(viewModel.center)) {
-                    this.subscriptions.push(
-                        viewModel.center.subscribe((center) => {
+                if (isSubscribable(properties.center)) {
+                    this.disposers.push(
+                        properties.center.subscribe((center) => {
                             this.map.panTo(center);
                         })
                     );
@@ -148,33 +151,33 @@ export class MapView extends View<MapProperties> {
     }
 }
 
-export function mapView(properties: MapProperties) {
-    return new MapView(properties);
+export function createMap(properties: IMapProperties) {
+    return new MapElement(properties);
 }
 
 export const burtonville: leaflet.LatLngExpression = [50.283939, 5.964070];
 
-export class MapViewModel extends ViewModel implements MapProperties {
-    constructor(properties: MapProperties) {
+export class MapProperties extends Properties implements IMapProperties {
+    constructor(properties: IMapProperties) {
         super();
         this.setProperties(this, properties);
     }
 
     renderer?: leaflet.Renderer;
-    center?: leaflet.LatLngExpression | Observable<leaflet.LatLngExpression>;
+    center?: leaflet.LatLngExpression | ISubscribable<leaflet.LatLngExpression>;
     zoom?: number;
     south?: number;
     north?: number;
     west?: number;
     east?: number;
     tileLayers?: Array<leaflet.TileLayer>;
-    layers?: Array<leaflet.Layer> | ObservableArray<leaflet.Layer> | Computed<Array<leaflet.Layer>>;
-    controls?: Array<leaflet.Control> | ObservableArray<leaflet.Control>;
+    layers?: Array<leaflet.Layer> | ISubscribable<Array<leaflet.Layer>>;
+    controls?: Array<leaflet.Control> | ISubscribable<Array<leaflet.Control>>;
     zoomInTitle?: string;
     zoomOutTitle?: string;
 }
 
-registerView(
-    MapViewModel,
-    MapView
+registerElement(
+    MapProperties.prototype.constructor,
+    MapElement
 );

package/src/controls/leaflet/OpenStreetMapTileLayer/OpenStreetMapTileLayer.ts

@@ -1,11 +1,11 @@
 import { TileLayerOptions, TileLayer } from "leaflet";
 
-export interface OpenStreetMapTileLayerOptions extends TileLayerOptions {
+export interface IOpenStreetMapTileLayerOptions extends TileLayerOptions {
     attribution?: string
 }
 
 export class OpenStreetMapTileLayer extends TileLayer {
-    constructor(options?: OpenStreetMapTileLayerOptions) {
+    constructor(options?: IOpenStreetMapTileLayerOptions) {
         if (!options) {
             options = {};
         }
@@ -14,6 +14,6 @@ export class OpenStreetMapTileLayer extends TileLayer {
     }
 }
 
-export function openStreetMapTileLayer(options?: OpenStreetMapTileLayerOptions) {
+export function createOpenStreetMapTileLayer(options?: IOpenStreetMapTileLayerOptions) {
     return new OpenStreetMapTileLayer(options);
 }

package/src/controls/svg/Circle/Circle.ts

@@ -1,34 +1,34 @@
-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 CircleProperties extends Properties {
-    cx: number | string | Subscribable<number | string>;
-    cy: number | string | Subscribable<number | string>;
-    r: number | string | Subscribable<number | string>;
+export interface ICircleProperties extends IProperties {
+    cx: number | string | ISubscribable<number | string>;
+    cy: number | string | ISubscribable<number | string>;
+    r: number | string | ISubscribable<number | string>;
 }
 
-export class CircleView extends View<CircleProperties> {
-    constructor(properties: CircleProperties) {
+export class CircleElement extends Element<ICircleProperties> {
+    constructor(properties: ICircleProperties) {
         super(
             {
                 tagName: "circle",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Circle",
+                        elementType: "Circle",
                         attributes: {
                             cx: properties.cx,
                             cy: properties.cy,
                             r: properties.r
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function circleView(properties: CircleProperties) {
-    return new CircleView(properties);
+export function createCircle(properties: ICircleProperties) {
+    return new CircleElement(properties);
 }

package/src/controls/svg/Ellipse/Ellipse.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 EllipseProperties extends Properties {
-    cx: number | string | Subscribable<number | string>;
-    cy: number | string | Subscribable<number | string>;
-    rx: number | string | Subscribable<number | string>;
-    ry: number | string | Subscribable<number | string>;
+export interface IEllipseProperties extends IProperties {
+    cx: number | string | ISubscribable<number | string>;
+    cy: number | string | ISubscribable<number | string>;
+    rx: number | string | ISubscribable<number | string>;
+    ry: number | string | ISubscribable<number | string>;
 }
 
-export class EllipseView extends View<EllipseProperties> {
-    constructor(properties: EllipseProperties) {
+export class EllipseElement extends Element<IEllipseProperties> {
+    constructor(properties: IEllipseProperties) {
         super(
             {
                 tagName: "ellipse",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Ellipse",
+                        elementType: "Ellipse",
                         attributes: {
                             cx: properties.cx,
                             cy: properties.cy,
                             rx: properties.rx,
                             ry: properties.ry
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function ellipseView(properties: EllipseProperties) {
-    return new EllipseView(properties);
+export function createEllipse(properties: IEllipseProperties) {
+    return new EllipseElement(properties);
 }

package/src/controls/svg/ForeignObject/ForeignObject.ts

@@ -1,38 +1,37 @@
-import { View, IView } from "../../../framework/View";
-import { Properties, extendProperties } from "../../../framework/ViewModel";
-import { Computed, ObservableArray, Subscribable } from "knockout";
+import { Element, IElement } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface ForeignObjectProperties extends Properties {
-    height?: number | string | Subscribable<number | string>;
-    width?: number | string | Subscribable<number | string>;
-    x?: number | string | Subscribable<number | string>;
-    y?: number | string | Subscribable<number | string>;
-    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+export interface IForeignObjectProperties extends IProperties {
+    height?: number | string | ISubscribable<number | string>;
+    width?: number | string | ISubscribable<number | string>;
+    x?: number | string | ISubscribable<number | string>;
+    y?: number | string | ISubscribable<number | string>;
+    children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
-
-export class ForeignObjectView extends View<ForeignObjectProperties> {
-    constructor(properties: ForeignObjectProperties) {
+class ForeignObjectElement extends Element<IForeignObjectProperties> {
+    constructor(properties: IForeignObjectProperties,) {
         super(
             {
                 tagName: "foreignObject",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "ForeignObject",
+                        elementType: "ForeignObject",
                         attributes: {
                             height: properties.height,
                             width: properties.width,
                             x: properties.x,
                             y: properties.y
                         }
-                    },
-                    properties
-                ),
-                children: properties.children
-            }
+                    }
+                )
+            },
+            properties.children
         );
     }
 }
 
-export function foreignObjectView(properties: ForeignObjectProperties) {
-    return new ForeignObjectView(properties);
+export function createForeignObject(properties: IForeignObjectProperties) {
+    return new ForeignObjectElement(properties);
 }

package/src/controls/svg/Group/Group.ts

@@ -1,38 +1,38 @@
-import { View, IView } from "../../../framework/View";
-import { Properties, extendProperties } from "../../../framework/ViewModel";
-import { Computed, ObservableArray, Subscribable } from "knockout";
+import { Element, IElement } from "../../../framework/element";
+import { IProperties, extendProperties } from "../../../framework/properties";
+import { ISubscribable } from "../../../framework/observable";
 
-export interface GroupProperties extends Properties {
-    x1?: number | string | Subscribable<number | string>;
-    x2?: number | string | Subscribable<number | string>;
-    y1?: number | string | Subscribable<number | string>;
-    y2?: number | string | Subscribable<number | string>;
-    children?: Array<IView> | ObservableArray<IView> | Computed<Array<IView>>;
+export interface IGroupProperties extends IProperties {
+    x1?: number | string | ISubscribable<number | string>;
+    x2?: number | string | ISubscribable<number | string>;
+    y1?: number | string | ISubscribable<number | string>;
+    y2?: number | string | ISubscribable<number | string>;
+    children?: Array<IElement> | ISubscribable<Array<IElement>>;
 }
 
-export class GroupView extends View<GroupProperties> {
-    constructor(properties: GroupProperties) {
+class GroupElement extends Element<IGroupProperties> {
+    constructor(properties: IGroupProperties) {
         super(
             {
                 tagName: "g",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Group",
+                        elementType: "Group",
                         attributes: {
                             x1: properties.x1,
                             x2: properties.x2,
                             y1: properties.y1,
                             y2: properties.y2
                         }
-                    },
-                    properties
-                ),
-                children: properties.children
-            }
+                    }
+                )
+            },
+            properties.children
         );
     }
 }
 
-export function groupView(properties: GroupProperties) {
-    return new GroupView(properties);
+export function createGroup(properties: IGroupProperties) {
+    return new GroupElement(properties);
 }

package/src/controls/svg/Line/Line.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 LineProperties extends Properties {
-    x1: number | string | Subscribable<number | string>;
-    x2: number | string | Subscribable<number | string>;
-    y1: number | string | Subscribable<number | string>;
-    y2: number | string | Subscribable<number | string>;
+export interface ILineProperties extends IProperties {
+    x1: number | string | ISubscribable<number | string>;
+    x2: number | string | ISubscribable<number | string>;
+    y1: number | string | ISubscribable<number | string>;
+    y2: number | string | ISubscribable<number | string>;
 }
 
-export class LineView extends View<LineProperties> {
-    constructor(properties: LineProperties) {
+export class LineElement extends Element<ILineProperties> {
+    constructor(properties: ILineProperties) {
         super(
             {
                 tagName: "line",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Line",
+                        elementType: "Line",
                         attributes: {
                             x1: properties.x1,
                             x2: properties.x2,
                             y1: properties.y1,
                             y2: properties.y2
                         }
-                    },
-                    properties
+                    }
                 )
             }
         );
     }
 }
 
-export function lineView(properties: LineProperties) {
-    return new LineView(properties);
+export function createLine(properties: ILineProperties) {
+    return new LineElement(properties);
 }

package/src/controls/svg/Pattern/Pattern.ts

@@ -1,33 +1,34 @@
-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";
 import { PatternUnits } from "../../../framework/types";
 
-import { CircleView } from "../Circle/Circle";
-import { EllipseView } from "../Ellipse/Ellipse";
-import { LineView } from "../Line/Line";
-import { PolygonView } from "../Polygon/Polygon";
-import { PolylineView } from "../Polyline/Polyline";
-import { TextView } from "../Text/Text";
+import { CircleElement } from "../Circle/Circle";
+import { EllipseElement } from "../Ellipse/Ellipse";
+import { LineElement } from "../Line/Line";
+import { PolygonElement } from "../Polygon/Polygon";
+import { PolylineElement } from "../Polyline/Polyline";
+import { TextElement } from "../Text/Text";
 
 
-export interface PatternProperties extends Properties {
+export interface IPatternProperties extends IProperties {
     id: string;
-    width: number | string | Subscribable<number | string>;
-    height: number | string | Subscribable<number | string>;
-    patternUnits: PatternUnits | Subscribable<PatternUnits>;
-    patternTransform: string | Subscribable<string>;
-    pattern: CircleView | EllipseView | LineView | PolygonView | PolylineView | TextView;
+    width: number | string | ISubscribable<number | string>;
+    height: number | string | ISubscribable<number | string>;
+    patternUnits: PatternUnits | ISubscribable<PatternUnits>;
+    patternTransform: string | ISubscribable<string>;
+    pattern: CircleElement | EllipseElement | LineElement | PolygonElement | PolylineElement | TextElement;
 }
 
-export class PatternView extends View<PatternProperties> {
-    constructor(properties: PatternProperties) {
+export class PatternElement extends Element<IPatternProperties> {
+    constructor(properties: IPatternProperties) {
         super(
             {
                 tagName: "pattern",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "Pattern",
+                        elementType: "Pattern",
                         attributes: {
                             id: properties.id,
                             width: properties.width,
@@ -35,15 +36,14 @@ export class PatternView extends View<PatternProperties> {
                             patternUnits: properties.patternUnits,
                             patternTransform: properties.patternTransform
                         }
-                    },
-                    properties
-                ),
-                children: [properties.pattern]
-            }
+                    }
+                )
+            },
+            [properties.pattern]
         );
     }
 }
 
-export function patternView(properties: PatternProperties) {
-    return new PatternView(properties);
+export function createPattern(properties: IPatternProperties) {
+    return new PatternElement(properties);
 }