@node-projects/web-component-designer 0.0.72 → 0.0.76

package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.d.ts

@@ -0,0 +1,26 @@
+import { IDesignItem } from "../../..";
+import { BindingTarget } from "../../item/BindingTarget";
+import { IElementDefinition } from "../elementsService/IElementDefinition";
+import { IElementsService } from "../elementsService/IElementsService";
+import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IProperty } from "../propertiesService/IProperty";
+import { ValueType } from "../propertiesService/ValueType";
+export declare class WebcomponentManifestParserService implements IElementsService, IPropertiesService {
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _resolveStored;
+    private _rejectStored;
+    constructor(name: string, file: string);
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    clearValue(designItems: IDesignItem[], property: IProperty): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): void;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): void;
+}

package/dist/elements/services/webcomponentManifestParserService/webcomponentManifestParserService.js

@@ -0,0 +1,69 @@
+export class WebcomponentManifestParserService {
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _resolveStored;
+    _rejectStored;
+    constructor(name, file) {
+        this._name = name;
+        import(file, { assert: { type: 'json' } }).then(module => {
+            this._packageData = module.default;
+            this._elementList = [];
+            for (let m of this._packageData.modules) {
+                for (let e of m.exports) {
+                    if (e.kind == 'custom-element-definition') {
+                        this._elementList.push({ tag: e.name });
+                    }
+                }
+                if (this._resolveStored) {
+                    this._resolveStored.forEach(x => x(this._elementList));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            }
+        }).catch(err => {
+            if (this._rejectStored) {
+                this._rejectStored.forEach(x => x(err));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        });
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperties(designItem) {
+        throw new Error("Method not implemented.");
+    }
+    getProperty(designItem, name) {
+        throw new Error("Method not implemented.");
+    }
+    getPropertyTarget(designItem, property) {
+        throw new Error("Method not implemented.");
+    }
+    setValue(designItems, property, value) {
+        throw new Error("Method not implemented.");
+    }
+    clearValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    isSet(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+    getUnsetValue(designItems, property) {
+        throw new Error("Method not implemented.");
+    }
+}

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -29,9 +29,8 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.height = '100%';
         this._treeDiv.style.overflow = 'auto';

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -12,16 +12,15 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
       display: block;
       height: 100%;
       width: 100%;
-    }
-    `;
+    }`;
     static template = html `
-<style>@import "./node_modules/codemirror/lib/codemirror.css";</style>
-<div  style="width: 100%; height: 100%;">
-<div id="textarea"></div>
-</div>
-`;
+    <div  style="width: 100%; height: 100%;">
+      <div id="textarea"></div>
+    </div>`;
     constructor() {
         super();
+        //@ts-ignore
+        import("codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -18,8 +18,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     }
     `;
     static template = html `
-      <style>@import "./node_modules/monaco-editor/min/vs/editor/editor.main.css";</style>
-      <div id="container" style="width: 100%; height: 100%;"></div>
+      <div id="container" style="width: 100%; height: 100%; position: absolute;"></div>
   `;
     executeCommand(command) {
         switch (command.type) {
@@ -54,6 +53,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
         return false;
     }
     async ready() {
+        //@ts-ignore
+        const style = await import("monaco-editor/min/vs/editor/editor.main.css", { assert: { type: 'css' } });
+        this.shadowRoot.adoptedStyleSheets = [style.default, this.constructor.style];
         this._editor = this._getDomElement('container');
         //@ts-ignore
         require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
@@ -65,9 +67,9 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 value: this.code,
                 language: 'html',
                 minimap: {
-                    //@ts-ignore
                     size: 'fill'
-                }
+                },
+                fixedOverflowWidgets: true
             });
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {

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

@@ -73,6 +73,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       position: relative;
       transform: translateZ(0);
       overflow: hidden;
+
+      font-family: initial;
+      font-size: initial;
+      font-weight: initial;
+      font-style: initial;
+      line-height: initial;
     }
     * {
       touch-action: none;
@@ -290,7 +296,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     handleDeleteCommand() {
         let items = this.instanceServiceContainer.selectionService.selectedElements;
-        this.instanceServiceContainer.undoService.execute(new DeleteAction(items, this.extensionManager));
+        this.instanceServiceContainer.undoService.execute(new DeleteAction(items));
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     initialize(serviceContainer) {
@@ -362,7 +368,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     addDesignItems(designItems) {
         if (designItems) {
             for (let di of designItems) {
-                this.rootDesignItem.insertChild(di);
+                this.rootDesignItem._insertChildInternal(di);
             }
         }
         const intializationService = this.serviceContainer.intializationService;

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

@@ -281,7 +281,7 @@ export class PointerTool {
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
                                 currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem.insertChild(this._actionStartedDesignItem);
+                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                                 newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
                                 newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -55,9 +55,8 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;
@@ -102,14 +101,19 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
                 title: s.name,
                 folder: true
             });
-            let elements = await s.getElements();
-            for (let e of elements) {
-                newNode.addChildren({
-                    title: e.name ?? e.tag,
-                    folder: false,
-                    //@ts-ignore
-                    ref: e
-                });
+            try {
+                let elements = await s.getElements();
+                for (let e of elements) {
+                    newNode.addChildren({
+                        title: e.name ?? e.tag,
+                        folder: false,
+                        //@ts-ignore
+                        ref: e
+                    });
+                }
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
             }
             //@ts-ignore
             newNode.updateCounters();

package/dist/elements/widgets/paletteView/paletteView.js

@@ -20,11 +20,16 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
     }
     async loadControls(serviceContainer, elementsServices) {
         for (const s of elementsServices) {
-            let elements = await s.getElements();
-            let paletteElement = new PaletteElements();
-            paletteElement.title = s.name;
-            this._designerTabControl.appendChild(paletteElement);
-            paletteElement.loadElements(serviceContainer, elements);
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
         }
     }
 }

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -89,9 +89,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
-        let externalCss = document.createElement('style');
-        externalCss.innerHTML = '@import url("./node_modules/jquery.fancytree/dist/skin-win8/ui.fancytree.css");';
-        this.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
         this._filter.onkeyup = () => {
             let match = this._filter.value;
@@ -100,11 +99,6 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             });
         };
         this._treeDiv = this._getDomElement('treetable');
-        /*this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = 'calc(100% - 21px)'
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);*/
     }
     _showHideAtDesignTimeState(img, designItem) {
         if (designItem.hideAtDesignTime)

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export type { IElementDefinition } from "./elements/services/elementsService/IEl
 export type { IElementsJson } from "./elements/services/elementsService/IElementsJson.js";
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
+export * from "./elements/services/elementsService/PreDefinedElementsService.js";
 export type { IHtmlWriterService } from "./elements/services/htmlWriterService/IHtmlWriterService.js";
 export type { IHtmlWriterOptions } from "./elements/services/htmlWriterService/IHtmlWriterOptions.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
@@ -53,6 +54,7 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
@@ -68,6 +70,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
@@ -80,7 +83,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
@@ -173,3 +176,4 @@ export type { IDisposable } from "./interfaces/IDisposable.js";
 export type { IPoint } from "./interfaces/IPoint.js";
 export type { IRect } from "./interfaces/IRect.js";
 export type { ISize } from "./interfaces/ISize.js";
+export type { ICommandHandler } from "./interfaces/ICommandHandler.js";

package/dist/index.js

@@ -25,11 +25,13 @@ export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/demoProviderService/DemoProviderService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
+export * from "./elements/services/elementsService/PreDefinedElementsService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/PropertiesHelper.js";
@@ -41,6 +43,7 @@ export * from "./elements/services/propertiesService/services/LitElementProperti
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/PolymerPropertiesService.js";
 export * from "./elements/services/propertiesService/services/UnkownElementPropertiesService.js";
+export * from "./elements/services/propertiesService/PropertyType.js";
 export * from "./elements/services/propertiesService/ValueType.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export * from "./elements/services/undoService/ChangeGroup.js";
@@ -49,7 +52,7 @@ export * from "./elements/services/undoService/transactionItems/AttributeChangeA
 export * from "./elements/services/undoService/transactionItems/CssStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
-export * from "./elements/services/undoService/transactionItems/MoveElementInDomAction.js";
+export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/dist/interfaces/ICommandHandler.d.ts

@@ -0,0 +1,5 @@
+import { CommandType } from "../commandHandling/CommandType";
+export interface ICommandHandler {
+    executeCommand(type: CommandType, parameter: any): Promise<void>;
+    canExecuteCommand(type: CommandType, parameter: any): boolean;
+}

package/dist/interfaces/ICommandHandler.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.72",
+  "version": "0.0.76",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -24,6 +24,7 @@
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
     "codemirror": "^5.65.0",
+    "custom-elements-manifest": "^1.0.0",
     "esprima-next": "^5.7.0",
     "html2canvas": "*",
     "jest": "^27.4.5",

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.d.ts

@@ -1,16 +0,0 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
-export declare class MoveElementInDomAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, newTarget: IDesignItem, newPosition: InsertPosition, oldTarget: IDesignItem, oldPosition: InsertPosition);
-    title?: string;
-    get affectedItems(): IDesignItem[];
-    undo(): void;
-    do(): void;
-    designItem: IDesignItem;
-    newTarget: IDesignItem;
-    newPosition: InsertPosition;
-    oldTarget: IDesignItem;
-    oldPosition: InsertPosition;
-    newItem: IDesignItem;
-    mergeWith(other: ITransactionItem): boolean;
-}

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js

@@ -1,31 +0,0 @@
-export class MoveElementInDomAction {
-    constructor(designItem, newTarget, newPosition, oldTarget, oldPosition) {
-        this.title = "Move Item";
-        this.designItem = designItem;
-        this.newTarget = newTarget;
-        this.newPosition = newPosition;
-        this.oldTarget = oldTarget;
-        this.oldPosition = oldPosition;
-    }
-    title;
-    get affectedItems() {
-        return [this.designItem, this.newTarget, this.oldTarget];
-    }
-    undo() {
-        this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    do() {
-        this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
-        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
-    }
-    designItem;
-    newTarget;
-    newPosition;
-    oldTarget;
-    oldPosition;
-    newItem;
-    mergeWith(other) {
-        return false;
-    }
-}