jpf 4.2.15 → 4.2.17

package/src/controls/kendo/Menu/Menu.ts

@@ -0,0 +1,125 @@
+import * as  kendo from "@progress/kendo-ui/js/kendo.menu.js";
+import { isObservable, unwrap, Subscribable } from "knockout";
+import { View, render } from "../../../framework/View";
+import { ViewModel, Properties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/ViewModel";
+import { HierarchicalListItemProperties , HierarchicalListItemViewModel} from "../../custom/ListItem/ListItem";
+const getContent = "getContent";
+
+export interface MenuProperties extends Properties {
+    items?: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel > | Subscribable<Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>>;
+}
+
+export class MenuView extends View<MenuProperties> {
+    constructor(properties: MenuProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        classNames: ["Menu"],
+                        viewType: "KendoMenu"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private menu: kendo.ui.Menu;
+    private dataSource: kendo.data.HierarchicalDataSource;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        this.dataSource = new kendo.data.HierarchicalDataSource({});
+        this.menu = new kendo.ui.Menu(this.element, {
+            dataTextField: "text",
+            dataSource: this.dataSource
+        });
+
+        this.menu.bind(
+            "dataBound",
+            (event) => {
+                //Find all menuitems that needs to be post rendered.
+                event.sender.wrapper.find(".k-menu-item[postrender]").each((index, element: HTMLElement) => {
+                    const uid = element.getAttribute("data-uid");
+                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
+                    if (hierarchicalListItemViewModel) {
+                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.subscriptions);
+
+
+                        if (hierarchicalListItemViewModel[getContent]) {
+                            const content = hierarchicalListItemViewModel[getContent]();
+                            if (content instanceof ViewModel) {
+                                const firstChild = element.firstElementChild as HTMLElement;
+                                firstChild.style.padding = "0";
+                                firstChild.innerHTML = "";
+                                firstChild.appendChild(render(content));
+                            }
+                        }
+                    }
+                    element.removeAttribute("postrender");
+                });
+            }
+        );
+
+        this.buildItems(unwrap(viewModel.items));
+        if (isObservable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    this.buildItems(items);
+                })
+            );
+        }
+    }
+
+    private buildItems(listItems: Array<HierarchicalListItemProperties| HierarchicalListItemViewModel>) {
+        const itemDictionary: { [id: string]: HierarchicalListItemProperties } = {};
+        const topLevelItems = new Array<HierarchicalListItemProperties>();
+
+        if (listItems) {
+            //Add all visible menuItems to a dictionary
+            listItems.forEach((listItem) => {
+                if (listItem as any instanceof ViewModel) {
+                    listItem["attr"] = { postrender: true };
+                }
+
+                if (typeof listItem.text !== "string") {
+                    var content = listItem.text;
+                    listItem[getContent] = () => { return content };
+                    listItem.text = "<post>";
+                }
+                if (unwrap(listItem.visible) !== false) {
+                    itemDictionary[listItem.id] = listItem;
+                }
+            });
+
+            //Add all the children to their parent
+            Object.keys(itemDictionary).forEach((key) => {
+                const menuItem = itemDictionary[key];
+
+                if (menuItem.parentId) {
+                    //Add the menuItem to its parent
+                    const parent = itemDictionary[menuItem.parentId];
+                    if (parent) {
+                        if (!parent.items) {
+                            parent.items = [];
+                        }
+                        parent.items.push(itemDictionary[menuItem.id]);
+                    }
+                } else {
+                    //Add the menuItem to the top level items
+                    topLevelItems.push(itemDictionary[menuItem.id]);
+                }
+            });
+        }
+
+        this.dataSource.data(topLevelItems);
+    }
+}
+
+export function menuView(properties: MenuProperties) {
+    return new MenuView(properties);
+}

package/src/controls/kendo/ObservableObject/ObservableObject.ts

@@ -0,0 +1,45 @@
+import { Subscribable, isObservable, unwrap } from "knockout";
+import * as kendo from "@progress/kendo-ui/js/kendo.data.js";
+
+var getUnderlyingObjectFunctionName = "getUnderlyingObject";
+
+export function knockoutObservableToKendoObservable(object: object): kendo.data.ObservableObject {
+    var observableObject = new kendo.data.ObservableObject();
+    observableObject[getUnderlyingObjectFunctionName] = () => {
+        return object;
+    }
+    Object.keys(object).forEach((key: string) => {
+        var value = object[key];
+
+        observableObject[key] = unwrap(value);
+
+        if (isObservable(value)) {
+            value.subscribe(
+                (newValue) => {
+                    observableObject.set(key, newValue);
+                }
+            );
+        }
+    });
+
+    return observableObject;
+}
+
+export function getUnderlyingObject(observableObject: kendo.data.ObservableObject): object {
+    if (observableObject[getUnderlyingObjectFunctionName]) {
+        return observableObject[getUnderlyingObjectFunctionName]();
+    }
+    return null;
+}
+
+export function knockoutObservableToKendoObservableArray(array: Array<any> | Subscribable<Array<any>>): Array<kendo.data.ObservableObject> {
+
+    var observableObjects = new Array<kendo.data.ObservableObject>();
+    if (array) {
+        unwrap(array).forEach((object) => {
+            observableObjects.push(knockoutObservableToKendoObservable(object));
+        });
+    }
+
+    return observableObjects;
+}

package/src/controls/kendo/Tree/Tree.ts

@@ -0,0 +1,147 @@
+import * as kendo from "@progress/kendo-ui/js/kendo.treeview.js";
+import { isObservable, unwrap, Subscribable } from "knockout";
+import { View, render } from "../../../framework/View";
+import { ViewModel, Properties, applyBindings as applyViewModelToElement, extendProperties } from "../../../framework/ViewModel";
+import { HierarchicalListItemProperties } from "../../custom/ListItem/ListItem";
+const getContent = "getContent";
+
+export interface TreeProperties extends Properties {
+    items?: Array<HierarchicalListItemProperties> | Subscribable<Array<HierarchicalListItemProperties>>;
+    selectedItem?: HierarchicalListItemProperties | Subscribable<HierarchicalListItemProperties>;
+    select?: (dataItem: any) => void;
+}
+
+export class TreeView extends View<TreeProperties> {
+    constructor(properties: TreeProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "KendoTree"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private treeView: kendo.ui.TreeView;
+    private dataSource: kendo.data.HierarchicalDataSource;
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+
+        this.dataSource = new kendo.data.HierarchicalDataSource({
+            sort: { field: "order", dir: "asc" }
+        });
+
+        this.treeView = new kendo.ui.TreeView(this.element, {
+            dataSource: this.dataSource
+        });
+
+        this.treeView.element.removeAttr("tabindex");
+
+        if (this.properties.select) {
+            this.treeView.bind(
+                "select",
+                (event: kendo.ui.TreeViewSelectEvent) => {
+                    const uid = event.node.getAttribute("data-uid");
+                    const dataItem = this.dataSource.getByUid(uid);
+                    this.properties.select(dataItem);
+                }
+            );
+        }
+        this.treeView.bind(
+            "dataBound",
+            (event) => {
+                //Find all menuitems that needs to be post rendered.
+                var selectedItem = unwrap(viewModel.selectedItem);
+                if (selectedItem) {
+                    event.sender.wrapper.find(".k-item").each((index, element: HTMLElement) => {
+                        const uid = element.getAttribute("data-uid");
+                        const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
+                        if (hierarchicalListItemViewModel.id === selectedItem.id) {
+                            event.sender.select(element);
+                        }
+                    });
+                }
+
+                event.sender.wrapper.find(".k-item[postrender]").each((index, element: HTMLElement) => {
+                    const uid = element.getAttribute("data-uid");
+                    const hierarchicalListItemViewModel = this.dataSource.getByUid(uid) as any as HierarchicalListItemProperties;
+                    if (hierarchicalListItemViewModel) {
+                        applyViewModelToElement(hierarchicalListItemViewModel, element, this.subscriptions);
+
+                        if (hierarchicalListItemViewModel[getContent]) {
+                            const content = hierarchicalListItemViewModel[getContent]();
+                            if (content instanceof ViewModel) {
+                                const firstChild = element.firstElementChild as HTMLElement;
+                                firstChild.style.padding = "0";
+                                firstChild.innerHTML = "";
+                                firstChild.appendChild(render(content));
+                            }
+                        }
+                    }
+                    element.removeAttribute("postrender");
+                });
+            }
+        );
+
+        this.buildItems(unwrap(viewModel.items));
+        if (isObservable(viewModel.items)) {
+            this.subscriptions.push(
+                viewModel.items.subscribe((items) => {
+                    this.buildItems(items);
+                })
+            );
+        }
+    }
+
+    private buildItems(listItems: Array<HierarchicalListItemProperties>) {
+        const itemDictionary: { [id: string]: HierarchicalListItemProperties } = {};
+        const topLevelItems = new Array<HierarchicalListItemProperties>();
+
+        if (listItems) {
+            //Add all visible menuItems to a dictionary
+            listItems.forEach((listItem) => {
+                listItem["attr"] = { postrender: true };
+                if (typeof listItem.text !== "string") {
+                    var content = listItem.text;
+                    listItem[getContent] = () => { return content };
+                    listItem.text = "<post>";
+                }
+                if (unwrap(listItem.visible) !== false) {
+                    itemDictionary[listItem.id] = listItem;
+                }
+            });
+
+            //Add all the children to their parent
+            Object.keys(itemDictionary).forEach((key) => {
+                const menuItem = itemDictionary[key];
+
+                if (menuItem.parentId) {
+                    //Add the menuItem to its parent
+                    const parent = itemDictionary[menuItem.parentId];
+                    if (parent) {
+                        if (!parent.items) {
+                            parent.items = [];
+                        }
+                        parent.items.push(itemDictionary[menuItem.id]);
+                    }
+                } else {
+                    //Add the menuItem to the top level items
+                    topLevelItems.push(itemDictionary[menuItem.id]);
+                }
+            });
+        }
+
+        this.dataSource.data(topLevelItems);
+    }
+}
+
+export function treeView(properties: TreeProperties) {
+    return new TreeView(properties);
+}

package/src/controls/kendo/index.ts

@@ -0,0 +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";

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

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

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

@@ -0,0 +1,180 @@
+import { isObservable, unwrap, Observable, ObservableArray, Computed } from "knockout";
+import * as leaflet from "leaflet";
+import { View, registerView } from "../../../framework/View";
+import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
+
+export interface MapProperties extends Properties {
+    renderer?: leaflet.Renderer;
+    center?: leaflet.LatLngExpression | Observable<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>;
+    zoomInTitle?: string;
+    zoomOutTitle?: string;
+}
+
+export class MapView extends View<MapProperties> {
+    constructor(properties: MapProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    {
+                        viewType: "LeafletMap"
+                    },
+                    properties
+                )
+            }
+        );
+    }
+
+    private map: leaflet.Map;
+    private layers = new Array<leaflet.Layer>();
+    private controls = new Array<leaflet.Control>();
+
+    build(): void {
+        super.build();
+
+        const viewModel = this.properties;
+        if (!viewModel.center) {
+            viewModel.center = burtonville;
+        }
+
+        const options: leaflet.MapOptions = {
+            renderer: viewModel.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);
+
+                //Add the language specific zoom element
+                leaflet.control.zoom({
+                    position: "topleft",
+                    zoomInTitle: viewModel.zoomInTitle,
+                    zoomOutTitle: viewModel.zoomOutTitle
+                }).addTo(this.map);
+
+                if (this.properties.eventListeners) {
+                    Object.keys(this.properties.eventListeners).forEach((key) => {
+                        this.map.on(
+                            key,
+                            (event) => {
+                                this.properties.eventListeners[key](event);
+                            }
+                        );
+                    });
+                }
+
+                this.setTileLayers(viewModel.tileLayers);
+
+                this.setLayers(unwrap(viewModel.layers));
+                if (isObservable(viewModel.layers)) {
+                    this.subscriptions.push(
+                        viewModel.layers.subscribe((layers) => {
+                            this.setLayers(layers);
+                        })
+                    );
+                }
+
+                this.setControls(unwrap(viewModel.controls));
+                if (isObservable(viewModel.controls)) {
+                    this.subscriptions.push(
+                        viewModel.controls.subscribe((controls) => {
+                            this.setControls(controls);
+                        })
+                    );
+                }
+
+                if (isObservable(viewModel.center)) {
+                    this.subscriptions.push(
+                        viewModel.center.subscribe((center) => {
+                            this.map.panTo(center);
+                        })
+                    );
+                }
+            },
+            100
+        );
+    }
+
+    private setTileLayers(tileLayers: Array<leaflet.TileLayer>) {
+        if (tileLayers) {
+            tileLayers.forEach((tileLayer) => {
+                tileLayer.addTo(this.map);
+            });
+        }
+    }
+
+    private setLayers(layers: Array<leaflet.Layer>) {
+        //Remove existing markers
+        this.layers.forEach((layer) => {
+            this.map.removeLayer(layer);
+        });
+
+        //Reset the layers array
+        this.layers = [];
+
+        //Add the new layers to the array and the map
+        if (layers) {
+            layers.forEach((layer) => {
+                this.layers.push(layer);
+                layer.addTo(this.map);
+            });
+        }
+    }
+
+    private setControls(controls: Array<leaflet.Control>) {
+        //Remove existing controls
+        this.controls.forEach((control) => {
+            this.map.removeControl(control);
+        });
+
+        this.controls = [];
+
+        if (controls) {
+            controls.forEach((control) => {
+                this.controls.push(control);
+                control.addTo(this.map);
+            });
+        }
+    }
+}
+
+export function mapView(properties: MapProperties) {
+    return new MapView(properties);
+}
+
+export const burtonville: leaflet.LatLngExpression = [50.283939, 5.964070];
+
+export class MapViewModel extends ViewModel implements MapProperties {
+    constructor(properties: MapProperties) {
+        super();
+        this.setProperties(this, properties);
+    }
+
+    renderer?: leaflet.Renderer;
+    center?: leaflet.LatLngExpression | Observable<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>;
+    zoomInTitle?: string;
+    zoomOutTitle?: string;
+}
+
+registerView(
+    MapViewModel,
+    MapView
+);

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

@@ -0,0 +1,19 @@
+import { TileLayerOptions, TileLayer } from "leaflet";
+
+export interface OpenStreetMapTileLayerOptions extends TileLayerOptions {
+    attribution?: string
+}
+
+export class OpenStreetMapTileLayer extends TileLayer {
+    constructor(options?: OpenStreetMapTileLayerOptions) {
+        if (!options) {
+            options = {};
+        }
+        options.attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors";
+        super("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", options);
+    }
+}
+
+export function openStreetMapTileLayer(options?: OpenStreetMapTileLayerOptions) {
+    return new OpenStreetMapTileLayer(options);
+}

package/src/controls/leaflet/PointerEvent/PointerEvent.ts

@@ -0,0 +1,9 @@
+import { LeafletEvent } from "leaflet";
+
+export function getPointerEvent(event: Event | LeafletEvent): PointerEvent {
+    const originalEvent = event["originalEvent"];
+    if (originalEvent instanceof PointerEvent) {
+        return originalEvent as PointerEvent;
+    }
+    return null;
+}

package/src/controls/leaflet/index.ts

@@ -0,0 +1,4 @@
+export * from "./LabelControl/LabelControl";
+export * from "./Map/Map";
+export * from "./OpenStreetMapTileLayer/OpenStreetMapTileLayer";
+export * from "./PointerEvent/PointerEvent";

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

@@ -0,0 +1,34 @@
+import { View } from "../../../framework/View";
+import { Properties, extendProperties} from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+export interface CircleProperties extends Properties {
+    cx: number | string | Subscribable<number | string>;
+    cy: number | string | Subscribable<number | string>;
+    r: number | string | Subscribable<number | string>;
+}
+
+export class CircleView extends View<CircleProperties> {
+    constructor(properties: CircleProperties) {
+        super(
+            {
+                tagName: "circle",
+                properties: extendProperties(
+                    {
+                        viewType: "Circle",
+                        attributes: {
+                            cx: properties.cx,
+                            cy: properties.cy,
+                            r: properties.r
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function circleView(properties: CircleProperties) {
+    return new CircleView(properties);
+}

package/src/controls/svg/Ellipse/Ellipse.ts

@@ -0,0 +1,36 @@
+import { View } from "../../../framework/View";
+import { Properties, extendProperties} from "../../../framework/ViewModel";
+import { Subscribable } from "knockout";
+
+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 class EllipseView extends View<EllipseProperties> {
+    constructor(properties: EllipseProperties) {
+        super(
+            {
+                tagName: "ellipse",
+                properties: extendProperties(
+                    {
+                        viewType: "Ellipse",
+                        attributes: {
+                            cx: properties.cx,
+                            cy: properties.cy,
+                            rx: properties.rx,
+                            ry: properties.ry
+                        }
+                    },
+                    properties
+                )
+            }
+        );
+    }
+}
+
+export function ellipseView(properties: EllipseProperties) {
+    return new EllipseView(properties);
+}