jpf-mobx 1.0.6

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 "../../../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 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 "../../../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 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);
+//}

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

@@ -0,0 +1,38 @@
+//import { View, IView } from "../../../framework/View";
+//import { Properties, extendProperties } from "../../../framework/ViewModel";
+//import { Computed, ObservableArray, Subscribable } from "knockout;
+
+//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 class ForeignObjectView extends View<ForeignObjectProperties> {
+//    constructor(properties: ForeignObjectProperties) {
+//        super(
+//            {
+//                tagName: "foreignObject",
+//                properties: extendProperties(
+//                    {
+//                        viewType: "ForeignObject",
+//                        attributes: {
+//                            height: properties.height,
+//                            width: properties.width,
+//                            x: properties.x,
+//                            y: properties.y
+//                        }
+//                    },
+//                    properties
+//                ),
+//                children: properties.children
+//            }
+//        );
+//    }
+//}
+
+//export function foreignObjectView(properties: ForeignObjectProperties) {
+//    return new ForeignObjectView(properties);
+//}

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

@@ -0,0 +1,38 @@
+//import { View, IView } from "../../../framework/View";
+//import { Properties, extendProperties } from "../../../framework/ViewModel";
+//import { Computed, ObservableArray, Subscribable } from "knockout";
+
+//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 class GroupView extends View<GroupProperties> {
+//    constructor(properties: GroupProperties) {
+//        super(
+//            {
+//                tagName: "g",
+//                properties: extendProperties(
+//                    {
+//                        viewType: "Group",
+//                        attributes: {
+//                            x1: properties.x1,
+//                            x2: properties.x2,
+//                            y1: properties.y1,
+//                            y2: properties.y2
+//                        }
+//                    },
+//                    properties
+//                ),
+//                children: properties.children
+//            }
+//        );
+//    }
+//}
+
+//export function groupView(properties: GroupProperties) {
+//    return new GroupView(properties);
+//}

package/src/controls/svg/Line/Line.ts

@@ -0,0 +1,36 @@
+//import { View } from "../../../framework/View";
+//import { Properties, extendProperties } from "../../../framework/ViewModel";
+//import { Subscribable } from "knockout";
+
+//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 class LineView extends View<LineProperties> {
+//    constructor(properties: LineProperties) {
+//        super(
+//            {
+//                tagName: "line",
+//                properties: extendProperties(
+//                    {
+//                        viewType: "Line",
+//                        attributes: {
+//                            x1: properties.x1,
+//                            x2: properties.x2,
+//                            y1: properties.y1,
+//                            y2: properties.y2
+//                        }
+//                    },
+//                    properties
+//                )
+//            }
+//        );
+//    }
+//}
+
+//export function lineView(properties: LineProperties) {
+//    return new LineView(properties);
+//}

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

@@ -0,0 +1,49 @@
+//import { View } from "../../../framework/View";
+//import { Properties, extendProperties } from "../../../framework/ViewModel";
+//import { Subscribable } from "knockout";
+//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";
+
+
+//export interface PatternProperties extends Properties {
+//    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;
+//}
+
+//export class PatternView extends View<PatternProperties> {
+//    constructor(properties: PatternProperties) {
+//        super(
+//            {
+//                tagName: "pattern",
+//                properties: extendProperties(
+//                    {
+//                        viewType: "Pattern",
+//                        attributes: {
+//                            id: properties.id,
+//                            width: properties.width,
+//                            height: properties.height,
+//                            patternUnits: properties.patternUnits,
+//                            patternTransform: properties.patternTransform
+//                        }
+//                    },
+//                    properties
+//                ),
+//                children: [properties.pattern]
+//            }
+//        );
+//    }
+//}
+
+//export function patternView(properties: PatternProperties) {
+//    return new PatternView(properties);
+//}

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

@@ -0,0 +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";
+
+//export interface PolygonProperties extends Properties {
+//    points: Array<SvgPoint> | Subscribable<Array<SvgPoint>>;
+//}
+
+//export class PolygonView extends View<PolygonProperties> {
+//    constructor(properties: PolygonProperties) {
+//        super(
+//            {
+//                tagName: "polygon",
+//                properties: extendProperties(
+//                    {
+//                        viewType: "Polygon",
+//                        attributes: {
+//                            points: getPoints(unwrap(properties.points))
+//                        }
+//                    },
+//                    properties
+//                )
+//            }
+//        );
+//    }
+//}
+
+//export function polygonView(properties: PolygonProperties) {
+//    return new PolygonView(properties);
+//}

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);
+//}