jpf 4.2.18 → 5.0.6

package/dist/utilities/webSocket/webSocket.js

@@ -1,55 +1,55 @@
-const reopenDelay = 10000;
-var webSocket;
-var webSocketProtocol;
-if (location.protocol === "http:") {
-    webSocketProtocol = "ws";
-}
-else {
-    webSocketProtocol = "wss";
-}
-document.addEventListener("visibilitychange", () => {
-    if (document.visibilityState === 'visible') {
-        if (!webSocket || webSocket.readyState === WebSocket.CLOSED) {
-            open();
-        }
-    }
-});
-var webSocketUrl;
-var onMessageHandler;
-function open() {
-    if (webSocketUrl && onMessageHandler) {
-        webSocket = new WebSocket(webSocketProtocol + "://" + location.host + "/" + webSocketUrl);
-        webSocket.onopen = () => {
-            console.log("Websocket opened");
-        };
-        webSocket.onclose = () => {
-            console.log("Websocket closed");
-            webSocket = null;
-            setTimeout(() => {
-                open();
-            }, reopenDelay);
-        };
-        webSocket.onerror = (error) => {
-            try {
-                console.log("Websocket error" + JSON.stringify(error));
-                webSocket.close();
-                webSocket = null;
-                setTimeout(() => {
-                    open();
-                }, reopenDelay);
-            }
-            catch (e) {
-            }
-        };
-        webSocket.onmessage = (messageEvent) => {
-            var webSocketMessage = JSON.parse(messageEvent.data);
-            onMessageHandler(webSocketMessage);
-        };
-    }
-}
-export function initializeWebSocket(url, handler) {
-    webSocketUrl = url;
-    onMessageHandler = handler;
-    open();
-}
+const reopenDelay = 10000;
+var webSocket;
+var webSocketProtocol;
+if (location.protocol === "http:") {
+    webSocketProtocol = "ws";
+}
+else {
+    webSocketProtocol = "wss";
+}
+document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === 'visible') {
+        if (!webSocket || webSocket.readyState === WebSocket.CLOSED) {
+            open();
+        }
+    }
+});
+var webSocketUrl;
+var onMessageHandler;
+function open() {
+    if (webSocketUrl && onMessageHandler) {
+        webSocket = new WebSocket(webSocketProtocol + "://" + location.host + "/" + webSocketUrl);
+        webSocket.onopen = () => {
+            console.log("Websocket opened");
+        };
+        webSocket.onclose = () => {
+            console.log("Websocket closed");
+            webSocket = null;
+            setTimeout(() => {
+                open();
+            }, reopenDelay);
+        };
+        webSocket.onerror = (error) => {
+            try {
+                console.log("Websocket error" + JSON.stringify(error));
+                webSocket.close();
+                webSocket = null;
+                setTimeout(() => {
+                    open();
+                }, reopenDelay);
+            }
+            catch (e) {
+            }
+        };
+        webSocket.onmessage = (messageEvent) => {
+            var webSocketMessage = JSON.parse(messageEvent.data);
+            onMessageHandler(webSocketMessage);
+        };
+    }
+}
+export function initializeWebSocket(url, handler) {
+    webSocketUrl = url;
+    onMessageHandler = handler;
+    open();
+}
 //# sourceMappingURL=webSocket.js.map

package/dist/utilities/webSocket/webSocket.js.map

@@ -1 +1 @@
-{"version":3,"file":"webSocket.js","sourceRoot":"","sources":["../../../src/utilities/webSocket/webSocket.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG,KAAK,CAAC;AAC1B,IAAI,SAAoB,CAAC;AACzB,IAAI,iBAAyB,CAAC;AAC9B,IAAI,QAAQ,CAAC,QAAQ,KAAK,OAAO,EAAE;IAC/B,iBAAiB,GAAG,IAAI,CAAC;CAC5B;KAAM;IACH,iBAAiB,GAAG,KAAK,CAAC;CAC7B;AAED,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC/C,IAAI,QAAQ,CAAC,eAAe,KAAK,SAAS,EAAE;QACxC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,MAAM,EAAE;YACzD,IAAI,EAAE,CAAC;SACV;KACJ;AACL,CAAC,CAAC,CAAC;AAEH,IAAI,YAAoB,CAAC;AACzB,IAAI,gBAA4C,CAAC;AAEjD,SAAS,IAAI;IACT,IAAI,YAAY,IAAI,gBAAgB,EAAE;QAClC,SAAS,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,YAAY,CAAC,CAAC;QAE1F,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QACpC,CAAC,CAAA;QAED,SAAS,CAAC,OAAO,GAAG,GAAG,EAAE;YACrB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YAChC,SAAS,GAAG,IAAI,CAAC;YAEjB,UAAU,CACN,GAAG,EAAE;gBACD,IAAI,EAAE,CAAC;YACX,CAAC,EACD,WAAW,CACd,CAAC;QACN,CAAC,CAAA;QAED,SAAS,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YAC1B,IAAI;gBACA,OAAO,CAAC,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;gBACvD,SAAS,CAAC,KAAK,EAAE,CAAC;gBAClB,SAAS,GAAG,IAAI,CAAC;gBAEjB,UAAU,CACN,GAAG,EAAE;oBACD,IAAI,EAAE,CAAC;gBACX,CAAC,EACD,WAAW,CACd,CAAC;aACL;YAAC,OAAO,CAAC,EAAE;aAEX;QACL,CAAC,CAAA;QAED,SAAS,CAAC,SAAS,GAAG,CAAC,YAA0B,EAAE,EAAE;YAEjD,IAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAGrD,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QACvC,CAAC,CAAC;KACL;AACL,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,GAAW,EAAE,OAAmC;IAChF,YAAY,GAAG,GAAG,CAAC;IACnB,gBAAgB,GAAG,OAAO,CAAC;IAC3B,IAAI,EAAE,CAAC;AACX,CAAC"}
+{"version":3,"file":"webSocket.js","sourceRoot":"","sources":["../../../src/utilities/webSocket/webSocket.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG,KAAK,CAAC;AAC1B,IAAI,SAAoB,CAAC;AACzB,IAAI,iBAAyB,CAAC;AAC9B,IAAI,QAAQ,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;IAChC,iBAAiB,GAAG,IAAI,CAAC;AAC7B,CAAC;KAAM,CAAC;IACJ,iBAAiB,GAAG,KAAK,CAAC;AAC9B,CAAC;AAED,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC/C,IAAI,QAAQ,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;QACzC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;YAC1D,IAAI,EAAE,CAAC;QACX,CAAC;IACL,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,IAAI,YAAoB,CAAC;AACzB,IAAI,gBAA4C,CAAC;AAEjD,SAAS,IAAI;IACT,IAAI,YAAY,IAAI,gBAAgB,EAAE,CAAC;QACnC,SAAS,GAAG,IAAI,SAAS,CAAC,iBAAiB,GAAG,KAAK,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,YAAY,CAAC,CAAC;QAE1F,SAAS,CAAC,MAAM,GAAG,GAAG,EAAE;YACpB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QACpC,CAAC,CAAA;QAED,SAAS,CAAC,OAAO,GAAG,GAAG,EAAE;YACrB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YAChC,SAAS,GAAG,IAAI,CAAC;YAEjB,UAAU,CACN,GAAG,EAAE;gBACD,IAAI,EAAE,CAAC;YACX,CAAC,EACD,WAAW,CACd,CAAC;QACN,CAAC,CAAA;QAED,SAAS,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;YAC1B,IAAI,CAAC;gBACD,OAAO,CAAC,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;gBACvD,SAAS,CAAC,KAAK,EAAE,CAAC;gBAClB,SAAS,GAAG,IAAI,CAAC;gBAEjB,UAAU,CACN,GAAG,EAAE;oBACD,IAAI,EAAE,CAAC;gBACX,CAAC,EACD,WAAW,CACd,CAAC;YACN,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;YAEb,CAAC;QACL,CAAC,CAAA;QAED,SAAS,CAAC,SAAS,GAAG,CAAC,YAA0B,EAAE,EAAE;YAEjD,IAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAGrD,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QACvC,CAAC,CAAC;IACN,CAAC;AACL,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,GAAW,EAAE,OAAmC;IAChF,YAAY,GAAG,GAAG,CAAC;IACnB,gBAAgB,GAAG,OAAO,CAAC;IAC3B,IAAI,EAAE,CAAC;AACX,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "jpf",
-    "version": "4.2.18",
-    "description": "Javascript Presentation Foundation",
+    "version": "5.0.6",
+    "description": "Javascript Presentation Foundation base classes and interfaces",
     "keywords": [
         "mvvm",
         "framework",
@@ -10,7 +10,7 @@
         "single page application",
         "spa"
     ],
-    "homepage": "https://dev.azure.com/opinio/JavascriptPresentationFoundation",
+    "homepage": "https://dev.azure.com/opinio/JPF",
     "bugs": "",
     "license": "MIT",
     "author": {
@@ -19,7 +19,7 @@
     },
     "repository": {
         "type": "tfs",
-        "url": "https://dev.azure.com/opinio/JavascriptPresentationFoundation"
+        "url": "https://dev.azure.com/opinio/JPF"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -41,22 +41,26 @@
         "tscVersion": "tsc -v"
     },
     "dependencies": {
-        "knockout": "3.5.1",
         "tocca": "2.0.9",
-        "ua-parser-js": "1.0.35",
+        "ua-parser-js": "1.0.37",
         "toastr": "2.1.4",
-        "uuid": "9.0.0",
-        "@progress/kendo-ui": "2022.3.913",
-        "html-prettify": "1.0.7",
+        "uuid": "9.0.1",
+        "@progress/kendo-ui": "2024.2.514",
+        "simply-beautiful": "0.2.14",
         "codemirror": "6.0.1",
-        "@codemirror/lang-html": "6.4.0",
+        "@codemirror/lang-html": "6.4.5",
         "@codemirror/lang-json": "6.0.1",
+        "@codemirror/lang-less": "6.0.1",
+        "@codemirror/lang-css": "6.2.0",
+        "@codemirror/lang-javascript": "6.1.9",
         "json-viewer-awesome": "1.0.15",
-        "leaflet": "1.9.3",
-        "leaflet-arrowheads": "1.4.0"
+        "leaflet": "1.9.4",
+        "leaflet-arrowheads": "1.4.0",
+        "lodash": "4.17.21"
     },
     "devDependencies": {
-        "@types/ua-parser-js": "^0.7.36",
-        "typescript": "4.9.4"
+        "typescript": "5.4.5",
+        "@types/lodash": "4.17.4",
+        "@types/leaflet": "1.9.8"
     }
 }

package/src/controls/codeMirror/Editor/Editor.ts

@@ -0,0 +1,207 @@
+import { Element, registerElement } from "../../../framework/element";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { isSubscribable, isObservableValue, unwrap } from "../../../framework/observable";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState, Extension } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { html } from "@codemirror/lang-html";
+import { json } from "@codemirror/lang-json";
+import { css } from "@codemirror/lang-css";
+
+import { indentWithTab } from "@codemirror/commands";
+import { foldAll } from "@codemirror/language";
+import { createButton } from "../../html/Button/Button";
+import { formatHtml, formatCss, formatJson, formatJavascript } from "../../../utilities/formatting/formatting";
+import { createDiv } from "../../html/Div/Div";
+import { ISubscribable } from "../../../framework/observable";
+
+export type mode = "json" | "html" | "css" | "less" | "javascript" | "typescript";
+
+export interface IEditorProperties extends IProperties {
+    mode: mode;
+    value?: string | ISubscribable<string>;
+}
+
+export class EditorElement extends Element<IEditorProperties> {
+    constructor(properties: IEditorProperties) {
+        super(
+            {
+                tagName: "div",
+                properties: extendProperties(
+                    properties,
+                    {
+                        elementType: "CodeEditor",
+                    },
+                    {
+                        attributes: {
+                            tabindex: 1
+                        },
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            border: "1px solid #a3d0e4"
+                        }
+                    }
+                )
+            }
+        );
+    }
+
+    private editor: EditorView;
+
+
+    build(): void {
+        super.build();
+
+        const properties = this.properties;
+        const foldAllButton = createButton({
+            content: "Collapse all",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        foldAll(this.editor);
+                    }
+                }
+            }
+        });
+
+        const formatButton = createButton({
+            content: "Format",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        const code = this.editor.state.doc.toString();
+                        let formattedCode: string;
+
+                        switch (properties.mode) {
+                            case "html":
+                                formattedCode = formatHtml(code);
+                                break;
+
+                            case "css":
+                                formattedCode = formatCss(code);
+                                break;
+                            case "json":
+                                formattedCode = formatJson(code);
+                                break;
+
+                            case "javascript":
+                                formattedCode = formatJavascript(code);
+                                break;
+
+                            default:
+                                throw "Language not supported";
+
+                        }
+
+                        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: formattedCode } });
+                    }
+                }
+            }
+        });
+
+        const saveButton = createButton({
+            content: "Save",
+            style: {
+                margin: "3px"
+            },
+            eventListeners: {
+                click: {
+                    listener: () => {
+                        if (isObservableValue(properties.value)) {
+                            properties.value.setValue(this.editor.state.doc.toString());
+                        }
+                    }
+                }
+            }
+        });
+
+        const buttons = createDiv(
+            {
+                style: {
+                    display: "flex"
+                },
+                children: [
+                    foldAllButton,
+                    formatButton,
+                    saveButton
+                ]
+            }
+        );
+
+        this.element.appendChild(buttons.render());
+        const extensions: Extension[] = [
+            basicSetup,
+            EditorView.lineWrapping,
+            keymap.of([indentWithTab])
+        ];
+
+        switch (properties.mode) {
+            case "html":
+                extensions.push(html());
+                break;
+
+            case "css":
+                extensions.push(css());
+                break;
+
+            case "json":
+                extensions.push(json());
+                break;
+
+
+            default:
+        }
+
+        this.editor = new EditorView({
+            state: EditorState.create(
+                {
+                    extensions: extensions
+                }
+            ),
+            parent: this.element,
+
+        });
+
+        this.editor.dom.style.overflow = "auto";
+
+        //Set the initial value;
+        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: unwrap(properties.value) as any as string } });
+
+        //Found out if the viewModel property is observable.
+        if (isSubscribable(properties.value)) {
+            this.subscriptions.push(
+                properties.value.subscribe(
+                    (html) => {
+                        this.editor.dispatch({ changes: { from: 0, to: this.editor.state.doc.length, insert: html } });
+                    }
+                )
+            );
+        }
+    }
+}
+
+export function createEditor(properties: IEditorProperties) {
+    return new EditorElement(properties);
+}
+
+export class EditorProperties extends Properties implements IEditorProperties {
+    constructor(properties: IEditorProperties) {
+        super();
+        this.setProperties(this, properties);
+    }
+
+    mode: mode;
+    value?: string | ISubscribable<string>;
+}
+
+registerElement(
+    EditorProperties.prototype.constructor,
+    EditorElement
+)

package/src/controls/codeMirror/index.ts

@@ -1,2 +1 @@
-export * from "./HtmlEditor/HtmlEditor";
-export * from "./JsonEditor/JsonEditor";
+export * from "./Editor/Editor";

package/src/controls/custom/FileSelector/FileSelector.ts

@@ -1,23 +1,24 @@
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel";
-import { View, registerView } from "../../../framework/View";
-import { ButtonProperties , ButtonView } from "../../html/Button/Button";
-import { InputView, InputProperties  } from "../../html/Input/Input";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties";
+import { Element, registerElement } from "../../../framework/element";
+import { IButtonProperties, createButton as buttonElement } from "../../html/Button/Button";
+import { createInput, IInputProperties } from "../../html/Input/Input";
 
-export interface FileSelectorProperties extends Properties {
-    button?: ButtonProperties;
-    inputFile: InputProperties<FileList>;
+export interface IFileSelectorProperties extends IProperties {
+    button?: IButtonProperties;
+    inputFile: IInputProperties<FileList>;
 }
 
-export class FileSelectorView extends View<FileSelectorProperties>  {
-    constructor(properties: FileSelectorProperties) {
+export class FileSelectorElement extends Element<IFileSelectorProperties>  {
+    constructor(properties: IFileSelectorProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
+                    {},
                     {
-                        viewType: "FileSelector"
-                    },
-                    properties
+                        elementType: "FileSelector"
+                    }
                 )
             }
         );
@@ -26,22 +27,23 @@ export class FileSelectorView extends View<FileSelectorProperties>  {
     protected build(): void {
         super.build();
 
-        const viewModel = this.properties;
+        const properties = this.properties;
+        const inputProperties = properties.inputFile || {} as IInputProperties<FileList>;
+        inputProperties.type = "file";
 
-        var fileInput = new InputView(viewModel.inputFile).render();
+        var fileInput = createInput(inputProperties).render();
 
         this.element.appendChild(fileInput);
 
-        if (viewModel.button) {
-            const button = new ButtonView(
+        if (properties.button) {
+            const button = buttonElement(
                 extendProperties(
-                    viewModel.button,
+                    properties.button,
                     {
                         eventListeners: {
                             click: {
                                 listener: () => {
-                                    var mouseEvent = document.createEvent("MouseEvent");
-                                    mouseEvent.initEvent("click", false, false);
+                                    var mouseEvent = new MouseEvent("click");
                                     fileInput.dispatchEvent(mouseEvent);
                                 }
                             }
@@ -55,20 +57,20 @@ export class FileSelectorView extends View<FileSelectorProperties>  {
     }
 }
 
-export function fileSelectorView(properties: FileSelectorProperties){
-    return new FileSelectorView(properties);
+export function createFileSelector(properties: IFileSelectorProperties) {
+    return new FileSelectorElement(properties);
 }
 
-export class FileSelectorViewModel extends ViewModel implements FileSelectorProperties {
-    constructor(properties: FileSelectorProperties) {
+export class FileSelectorProperties extends Properties implements IFileSelectorProperties {
+    constructor(properties: IFileSelectorProperties) {
         super();
         this.setProperties(this, properties);
     }
-    button?: ButtonProperties;
-    inputFile: InputProperties<FileList>;
+    button?: IButtonProperties;
+    inputFile: IInputProperties<FileList>;
 }
 
-registerView(
-    FileSelectorViewModel,
-    FileSelectorView
+registerElement(
+    FileSelectorProperties.prototype.constructor,
+    FileSelectorElement
 );

package/src/controls/custom/LabeledControl/LabeledControl.ts

@@ -1,58 +1,54 @@
-import { ViewModel, Properties, extendProperties } from "../../../framework/ViewModel"
-import { View, IView, registerView } from "../../../framework/View";
-import { DivView } from "../../html/Div/Div";
+import { Properties, IProperties, extendProperties } from "../../../framework/properties"
+import { Element, IElement, registerElement } from "../../../framework/element";
+import { createDiv as divElement } from "../../html/Div/Div";
 
-export interface LabeledViewProperties extends Properties {
-    labelProperties: Properties;
-    view: IView;
+export interface ILabeledViewProperties extends IProperties {
+    labelProperties: IProperties;
+    element: IElement;
 }
 
-export class LabeledControlView extends View<LabeledViewProperties> {
-    constructor(properties: LabeledViewProperties) {
+export class LabeledControlElement extends Element<ILabeledViewProperties> {
+    constructor(properties: ILabeledViewProperties) {
         super(
             {
                 tagName: "div",
                 properties: extendProperties(
+                    properties,
                     {
-                        viewType: "LabeledControl",
-                        style: {
-                            display: "flex",
-                            alignItems: "center"
-                        },
-                        classNames: ["o-labled-control"]
-                    },
-                    properties
+                        elementType: "LabeledControl",
+                        classNames: ["jpf-labled-control"]
+                    }
+                )
+            },
+            [
+                divElement(
+                    extendProperties(
+                        properties.labelProperties,
+                        {
+                            elementType: "Label"
+                        }
+                    )
                 ),
-                children: [
-                    new DivView(
-                        extendProperties(
-                            properties.labelProperties,
-                            {
-                                viewType: "Label"
-                            }
-                        )
-                    ),
-                    properties.view
-                ]
-            }
+                properties.element
+            ]
         );
     }
 }
 
-export function labeledControlView(properties: LabeledViewProperties) {
-    return new LabeledControlView(properties);
+export function createLabeledControl(properties: ILabeledViewProperties) {
+    return new LabeledControlElement(properties);
 }
 
-export class LabeledControlViewModel extends ViewModel implements LabeledViewProperties {
-    constructor(properties: LabeledViewProperties) {
+export class LabeledControlProperties extends Properties implements ILabeledViewProperties {
+    constructor(properties: ILabeledViewProperties) {
         super();
         this.setProperties(this, properties);
     }
     labelProperties: Properties;
-    view: IView;
+    element: IElement;
 }
 
-registerView(
-    LabeledControlViewModel,
-    LabeledControlView
+registerElement(
+    LabeledControlProperties,
+    LabeledControlElement
 )