@node-projects/web-component-designer 0.0.28 → 0.0.32

package/dist/elements/widgets/designerView/designerView.js

@@ -8,6 +8,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
+        this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
         this._zoomInput = this._getDomElement('zoomInput');
         this._zoomInput.onchange = () => { this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100; };

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.d.ts

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerView } from "../../IDesignerView.js";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class EditTextCkEditorExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.js

@@ -0,0 +1,42 @@
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextCkEditorExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        //@ts-ignore
+        BalloonEditor
+            .create(this.extendedItem.element)
+            .catch(error => {
+            console.error(error);
+        });
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextCkEditorExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.js

@@ -0,0 +1,9 @@
+import { EditTextCkEditorExtension } from "./EditTextCkEditorExtension.js";
+export class EditTextCkEditorExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextCkEditorExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.d.ts

@@ -0,0 +1,27 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { AbstractExtension } from '../AbstractExtension';
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextTinyMceExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    tinyMceConfig: {
+        target: any;
+        menubar: boolean;
+        inline: boolean;
+        plugins: string[];
+        toolbar: string[];
+        valid_elements: string;
+        valid_styles: {
+            '*': string;
+        };
+        powerpaste_word_import: string;
+        powerpaste_html_import: string;
+    };
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.js

@@ -0,0 +1,61 @@
+import { AbstractExtension } from '../AbstractExtension';
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextTinyMceExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this.tinyMceConfig = {
+            target: null,
+            menubar: false,
+            inline: true,
+            plugins: [
+                'link',
+                'lists',
+                'powerpaste',
+                'autolink',
+                'tinymcespellchecker'
+            ],
+            toolbar: [
+                'undo redo | bold italic underline | fontselect fontsizeselect',
+                'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
+            ],
+            valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
+            valid_styles: {
+                '*': 'font-size,font-family,color,text-decoration,text-align'
+            },
+            powerpaste_word_import: 'clean',
+            powerpaste_html_import: 'clean',
+        };
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        this.tinyMceConfig.target = this.extendedItem.element;
+        //@ts-ignore
+        tinymce.init(this.tinyMceConfig);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextTinyMceExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerView, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.js

@@ -0,0 +1,9 @@
+import { EditTextTinyMceExtension } from "./EditTextTinyMceExtension.js";
+export class EditTextTinyMceExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextTinyMceExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/PositionExtension.js

@@ -11,10 +11,18 @@ export class PositionExtension extends AbstractExtension {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
         const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
-        const left = Number.parseFloat(computedStyle.left.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.top.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.right.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
+        let left = Number.parseFloat(computedStyle.left.replace('px', ''));
+        if (isNaN(left))
+            left = 0;
+        let top = Number.parseFloat(computedStyle.top.replace('px', ''));
+        if (isNaN(top))
+            top = 0;
+        let right = Number.parseFloat(computedStyle.right.replace('px', ''));
+        if (isNaN(right))
+            right = 0;
+        let bottom = Number.parseFloat(computedStyle.bottom.replace('px', ''));
+        if (isNaN(bottom))
+            bottom = 0;
         let tx = 0;
         let ty = 0;
         if (computedStyle.transform !== 'none') {

package/dist/index.d.ts

@@ -16,6 +16,9 @@ export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
 export type { IBindableObject } from "./elements/services/bindableObjectsService/IBindableObject.js";
 export type { IBindableObjectsService } from "./elements/services/bindableObjectsService/IBindableObjectsService.js";
+export type { IBindingService } from "./elements/services/bindingsService/IBindingService.js";
+export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";
@@ -78,6 +81,7 @@ export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
 export type { IDesignerCanvas } from "./elements/widgets/designerView/IDesignerCanvas.js";
+export type { IPlacementView } from "./elements/widgets/designerView/IPlacementView.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";

package/dist/index.js

@@ -12,6 +12,8 @@ export * from "./elements/helper/contextMenu/ContextMenuHelper.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/item/DesignItem.js";
 export * from "./elements/services/bindableObjectsService/BindableObjectType.js";
+export * from "./elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js";
+export * from "./elements/services/bindingsService/SpecialTagsBindingService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
 export * from "./elements/services/placementService/FlexBoxPlacementService.js";
 export * from "./elements/services/placementService/GridPlacementService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.28",
+  "version": "0.0.32",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -11,26 +11,25 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.1.7",
+    "@node-projects/base-custom-webcomponent": "^0.2.0",
     "construct-style-sheets-polyfill": "^3.0.4"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.8",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
-    "codemirror": "^5.63.3",
+    "codemirror": "^5.64.0",
     "esprima-next": "^5.7.0",
     "html2canvas": "*",
     "jest": "^27.3.1",
     "jquery": "^3.6.0",
     "jquery.fancytree": "^2.38.0",
-    "monaco-editor": "^0.29.1",
-    "node-html-parser": "^5.0.0",
+    "monaco-editor": "^0.30.1",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.2",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {