@node-projects/web-component-designer 0.0.126 → 0.0.128

package/dist/elements/helper/contextMenu/{contextmenu.js → ContextMenu.js}

@@ -8,6 +8,7 @@ export class ContextMenu {
 		transition: transform 0.1s;
 		transform-origin: top left;
 		padding: 0;
+		z-index: 2147483647;
 	  }
 	  
 	  .context_menu.display {

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -37,7 +37,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
       height: 20px;
     }
     #pg {
-      height: calc(100% - 45px);
+      height: calc(100% - 64px);
     }
     `;
     static template = html `

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.126",
+  "version": "0.0.128",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.1",
+    "@node-projects/base-custom-webcomponent": "^0.10.3",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {

package/dist/elements/helper/KeyNameHelper.js

@@ -1 +0,0 @@
-"use strict";

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -1,245 +0,0 @@
-"use strict";
-/*import { IContextMenuItem } from "./IContextmenuItem";
-import { css } from "@node-projects/base-custom-webcomponent"
-
-export class ContextMenuHelper {
-
-  private static _contextMenuCss = css`
-  .context-menu {
-    display: none;
-    position: absolute;
-    z-index: 999999;
-    padding: 0px 0;
-    background-color: rgb(255 255 255 / 93%);
-    border: solid 1px #dfdfdf;
-    box-shadow: 1px 1px 2px #cfcfcf;
-    cursor: default;
-    user-select: none;
-    -webkit-user-select: none;
-    border-radius: 12px;
-  }
-
-  .context-menu hr {
-    margin: 0 0 5px 5%;
-    height: 1px;
-    width: 90%;
-    background-color: #e2e2e2;
-  }
-  
-  .context-menu--active {
-    display: block;
-  }
-  
-  .context-menu__items {
-    list-style: none;
-    margin: 8px;
-    padding: 0;
-  }
-  
-  .context-menu__item {
-    display: block;
-    margin-bottom: 4px;
-  }
-  
-  .context-menu__item:last-child {
-    margin-bottom: 0;
-  }
-  
-  .context-menu__link {
-    display: block;
-    padding: 0px 12px;
-    color: #0066aa;
-    text-decoration: none;
-  }
-  
-  .context-menu__link:hover {
-    color: #fff;
-    background-color: #0066aa;
-  }`;
-
-  private _shadowRoot: ShadowRoot | Document;
-  private _element: HTMLElement;
-  private _closeBound: () => void;
-  private _keyUpBound: () => void;
-  private _closeOnDownBound: () => void;
-  private _closeOnUpBound: () => void;
-
-  static addContextMenu(element: HTMLElement, items: IContextMenuItem[]) {
-    element.oncontextmenu = (event) => {
-      event.preventDefault();
-      ContextMenuHelper.showContextMenu(null, event, null, items);
-    }
-  }
-
-  static showContextMenu(shadowRoot: ShadowRoot | Document | null, e: MouseEvent, element: HTMLElement, items: IContextMenuItem[]) {
-    if (shadowRoot == null)
-      shadowRoot = document;
-
-    //@ts-ignore
-    if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenuHelper._contextMenuCss) < 0) {
-      //@ts-ignore
-      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenuHelper._contextMenuCss];
-    }
-    let ctxMenu = new ContextMenuHelper();
-    let menu = ContextMenuHelper.createMenu(ctxMenu, items);
-    ctxMenu.init(shadowRoot, menu);
-    ctxMenu.positionMenu(e)
-    return ctxMenu;
-  }
-
-  private constructor() {
-  }
-
-  private init(shadowRoot: ShadowRoot | Document, element: HTMLElement) {
-    this._shadowRoot = shadowRoot;
-    this._element = element;
-    if (this._shadowRoot === document)
-      document.body.appendChild(this._element);
-    else
-      this._shadowRoot.appendChild(this._element);
-
-    this._closeBound = this.close.bind(this);
-    this._closeOnUpBound = this._closeOnUp.bind(this);
-    this._closeOnDownBound = this._closeOnDown.bind(this);
-    this._keyUpBound = this._keyUp.bind(this);
-
-    window.addEventListener('keyup', this._keyUpBound);
-    window.addEventListener('resize', this._closeBound);
-    window.addEventListener('mousedown', this._closeOnDownBound);
-    window.addEventListener('mouseup', this._closeOnUpBound);
-
-    this._element.classList.add('context-menu--active');
-  }
-
-  public close() {
-    requestAnimationFrame(() => {
-      window.removeEventListener('keyup', this._keyUpBound);
-      window.removeEventListener('resize', this._closeBound);
-      window.removeEventListener('mousedown', this._closeOnDownBound);
-      window.removeEventListener('mouseup', this._closeOnUpBound);
-
-      if (this._element.parentElement)
-        this._element.parentElement.removeChild(this._element);
-    });
-  }
-
-  public show() {
-    this._element.classList.add('context-menu--active');
-  }
-
-  public hide() {
-    this._element.classList.remove('context-menu--active');
-  }
-
-  private _keyUp(e: KeyboardEvent) {
-    if (e.keyCode === 27) {
-      this.close();
-    }
-  }
-
-  private _closeOnDown(e: MouseEvent) {
-    const p = e.composedPath();
-    if (p.indexOf(this._element) < 0)
-      this.close();
-  }
-
-  private _closeOnUp(e: MouseEvent) {
-    if (e.button == 1)
-      this.close();
-  }
-
-  static createMenu(helper: ContextMenuHelper, items: IContextMenuItem[]) {
-    let nav = document.createElement('nav');
-    nav.className = 'context-menu';
-    let ul = document.createElement('ul');
-    ul.className = 'context-menu__items';
-    nav.appendChild(ul);
-
-    let lastWasSeperator = false;
-    for (let i of items) {
-      if (i.title == '-') {
-        if (!lastWasSeperator) {
-          let hr = document.createElement('hr');
-          ul.appendChild(hr);
-          lastWasSeperator = true
-        }
-      } else {
-        lastWasSeperator = false;
-        let li = document.createElement('li');
-        li.className = 'context-menu__item';
-        let div = document.createElement('div');
-        div.className = 'context-menu__link';
-        div.textContent = i.title;
-        li.appendChild(div);
-        ul.appendChild(li);
-        li.onclick = (e) => {
-          helper.close();
-          i.action(null, e);
-        }
-      }
-    }
-    return nav;
-  }
-
-  static clickInsideElement(e, className) {
-    let el = e.srcElement || e.target;
-
-    if (el.classList.contains(className)) {
-      return el;
-    } else {
-      while (el = el.parentNode) {
-        if (el.classList && el.classList.contains(className)) {
-          return el;
-        }
-      }
-    }
-
-    return false;
-  }
-
-  static getPosition(e: MouseEvent) {
-    let posx = 0;
-    let posy = 0;
-
-    //@ts-ignore
-    if (!e) e = window.event;
-
-    if (e.pageX || e.pageY) {
-      posx = e.pageX + 5;
-      posy = e.pageY - 5;
-    } else if (e.clientX || e.clientY) {
-      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft + 5;
-      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - 5;
-    }
-
-    return {
-      x: posx,
-      y: posy
-    }
-  }
-
-  public positionMenu(e: MouseEvent) {
-    let clickCoords = ContextMenuHelper.getPosition(e);
-    let clickCoordsX = clickCoords.x;
-    let clickCoordsY = clickCoords.y;
-
-    let menuWidth = this._element.offsetWidth + 4;
-    let menuHeight = this._element.offsetHeight + 4;
-
-    let windowWidth = window.innerWidth;
-    let windowHeight = window.innerHeight;
-
-    if ((windowWidth - clickCoordsX) < menuWidth) {
-      this._element.style.left = windowWidth - menuWidth + "px";
-    } else {
-      this._element.style.left = clickCoordsX + "px";
-    }
-
-    if ((windowHeight - clickCoordsY) < menuHeight) {
-      this._element.style.top = windowHeight - menuHeight + "px";
-    } else {
-      this._element.style.top = clickCoordsY + "px";
-    }
-  }
-}
-*/ 

package/dist/elements/helper/contextMenu/IContextmenuItemTmp.d.ts

@@ -1,8 +0,0 @@
-export interface IContextMenuItem {
-    readonly title?: string;
-    readonly icon?: string;
-    readonly children?: IContextMenuItem[];
-    readonly disabled?: boolean;
-    readonly shortCut?: string;
-    action?: (event: MouseEvent, item: IContextMenuItem) => void;
-}

package/dist/elements/helper/contextMenu/IContextmenuItemTmp.js

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

package/dist/elements/helper/contextMenu/NewContextmenu.d.ts

@@ -1,30 +0,0 @@
-export interface IContextMenuItem {
-    readonly title?: string;
-    readonly icon?: string;
-    readonly children?: IContextMenuItem[];
-    readonly disabled?: boolean;
-    readonly shortCut?: string;
-    action?: (event: MouseEvent, item: IContextMenuItem) => void;
-}
-export interface IContextMenuOptions {
-    closeOnResize?: boolean;
-    closeOnClick?: boolean;
-    defaultIcon?: string;
-    subIcon?: string;
-    mouseOffset?: number;
-    shadowRoot?: ShadowRoot | Document;
-}
-export declare class ContextMenu {
-    private static _contextMenuCss;
-    static count: number;
-    menu: IContextMenuItem[];
-    options: IContextMenuOptions;
-    private num;
-    private _documentClickBound;
-    constructor(menu: IContextMenuItem[], options: any);
-    reload(): void;
-    renderLevel(level: IContextMenuItem[]): HTMLUListElement;
-    display(event: MouseEvent): void;
-    close(): void;
-    _documentClick(): void;
-}

package/dist/elements/helper/contextMenu/NewContextmenu.js

@@ -1,274 +0,0 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-export class ContextMenu {
-    static _contextMenuCss = css `
-	  .context_menu {
-		position: fixed;
-		opacity: 0;
-		transform: scale(0);
-		transition: transform 0.1s;
-		transform-origin: top left;
-		padding: 0;
-	  }
-	  
-	  .context_menu.display {
-		opacity: 1;
-		transform: scale(1);
-	  }
-	  
-	  .context_menu,
-	  .context_menu * {
-		box-sizing: border-box;
-	  }
-	  
-	  .context_menu * {
-		position: relative;
-	  }
-	  
-	  .context_menu ul {
-		list-style-type: none;
-		padding: 0;
-		margin: 0;
-		background-color: #ccc;
-		box-shadow: 0 0 5px #333;
-	  }
-	  
-	  .context_menu li {
-		padding: 0;
-		padding-right: 1.7em;
-		cursor: pointer;
-		white-space: nowrap;
-	  }
-	  
-	  .context_menu li:hover {
-		background-color: #bbb;
-	  }
-	  
-	  .context_menu li .cm_icon_span {
-		width: 1.5em;
-		height: 1.2em;
-		vertical-align: bottom;
-		display: inline-block;
-		border-right: 1px solid #aaa;
-		margin-right: 5px;
-		padding-right: 5px;
-		text-align: center;
-	  }
-	  
-	  .context_menu li .cm_sub_span {
-		width: 1em;
-		display: inline-block;
-		text-align: center;
-		position: absolute;
-		top: 50%;
-		right: 0.5em;
-		transform: translateY(-50%);
-	  }
-	  
-	  .context_menu li>ul {
-		position: absolute;
-		top: 0;
-		left: 100%;
-		opacity: 0;
-		transition: opacity 0.2s;
-		visibility: hidden;
-	  }
-	  
-	  .context_menu li:hover>ul {
-		opacity: 1;
-		visibility: visible;
-	  }
-	  
-	  .context_menu li.cm_divider {
-		border-bottom: 1px solid #aaa;
-		margin: 5px;
-		padding: 0;
-		cursor: default;
-	  }
-	  
-	  .context_menu li.cm_divider:hover {
-		background-color: inherit;
-	  }
-	  
-	  .context_menu.cm_border_right>ul ul {
-		left: unset;
-		right: 100%;
-	  }
-	  
-	  .context_menu.cm_border_bottom>ul ul {
-		top: unset;
-		bottom: 0;
-	  }
-	  
-	  .context_menu li[disabled=""] {
-		color: #777;
-		cursor: default;
-	  }
-	  
-	  .context_menu li[disabled=""]:hover {
-		background-color: inherit;
-	  }`;
-    static count = 0;
-    menu;
-    options;
-    num;
-    _documentClickBound;
-    constructor(menu, options) {
-        console.error(this);
-        this.num = ContextMenu.count++;
-        this.menu = menu;
-        this.options = options;
-        window.addEventListener("resize", () => {
-            if (this.options.closeOnResize ?? true) {
-                this.close();
-            }
-        });
-        this.reload();
-        this._documentClickBound = this._documentClick.bind(this);
-    }
-    reload() {
-        if (document.getElementById('cm_' + this.num) == null) {
-            var cnt = document.createElement("div");
-            cnt.className = "context_menu";
-            cnt.id = "cm_" + this.num;
-            document.body.appendChild(cnt);
-        }
-        var container = document.getElementById('cm_' + this.num);
-        container.innerHTML = "";
-        let shadowRoot = this.options?.shadowRoot ?? document;
-        if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenu._contextMenuCss) < 0) {
-            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenu._contextMenuCss];
-        }
-        container.appendChild(this.renderLevel(this.menu));
-    }
-    renderLevel(level) {
-        var ul_outer = document.createElement("ul");
-        let lastWasDivider = false;
-        level.forEach((item) => {
-            let li = document.createElement("li");
-            if (item.title !== '-') {
-                var icon_span = document.createElement("span");
-                icon_span.className = 'cm_icon_span';
-                if ((item.icon ?? '') != '') {
-                    icon_span.innerHTML = item.icon;
-                }
-                else {
-                    icon_span.innerHTML = this.options?.defaultIcon ?? '';
-                }
-                let text_span = document.createElement("span");
-                text_span.className = 'cm_text';
-                text_span.innerHTML = item.title;
-                let sub_span = document.createElement("span");
-                sub_span.className = 'cm_sub_span';
-                if (item.children != null) {
-                    sub_span.innerHTML = this.options?.subIcon ?? '&#155;';
-                }
-                li.appendChild(icon_span);
-                li.appendChild(text_span);
-                li.appendChild(sub_span);
-                if (item.disabled) {
-                    li.setAttribute("disabled", "");
-                }
-                else {
-                    if (item.action)
-                        li.addEventListener('click', (e) => item.action(e, item));
-                    if (typeof item.children !== "undefined") {
-                        li.appendChild(this.renderLevel(item.children));
-                    }
-                }
-                lastWasDivider = false;
-                ul_outer.appendChild(li);
-            }
-            else {
-                if (!lastWasDivider) {
-                    li.className = "cm_divider";
-                    lastWasDivider = true;
-                    ul_outer.appendChild(li);
-                }
-            }
-        });
-        return ul_outer;
-    }
-    display(event) {
-        let menu = document.getElementById('cm_' + this.num);
-        let clickCoords = { x: event.clientX, y: event.clientY };
-        let clickCoordsX = clickCoords.x;
-        let clickCoordsY = clickCoords.y;
-        let menuWidth = menu.offsetWidth + 4;
-        let menuHeight = menu.offsetHeight + 4;
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-        let mouseOffset = this.options?.mouseOffset != null ? this.options.mouseOffset : 2;
-        if ((windowWidth - clickCoordsX) < menuWidth) {
-            menu.style.left = windowWidth - menuWidth + "px";
-        }
-        else {
-            menu.style.left = (clickCoordsX + mouseOffset) + "px";
-        }
-        if ((windowHeight - clickCoordsY) < menuHeight) {
-            menu.style.top = windowHeight - menuHeight + "px";
-        }
-        else {
-            menu.style.top = (clickCoordsY + mouseOffset) + "px";
-        }
-        let sizes = ContextUtil.getSizes(menu);
-        if ((windowWidth - clickCoordsX) < sizes.width) {
-            menu.classList.add("cm_border_right");
-        }
-        else {
-            menu.classList.remove("cm_border_right");
-        }
-        if ((windowHeight - clickCoordsY) < sizes.height) {
-            menu.classList.add("cm_border_bottom");
-        }
-        else {
-            menu.classList.remove("cm_border_bottom");
-        }
-        menu.classList.add("display");
-        if (this.options?.closeOnClick ?? true) {
-            window.addEventListener("click", this._documentClickBound);
-        }
-        event.preventDefault();
-    }
-    close() {
-        document.getElementById('cm_' + this.num).remove();
-        window.removeEventListener("click", this._documentClickBound);
-    }
-    _documentClick() {
-        this.close();
-    }
-}
-class ContextUtil {
-    static getSizes(obj) {
-        let lis = obj.getElementsByTagName('li');
-        let width_def = 0;
-        let height_def = 0;
-        for (let i = 0; i < lis.length; i++) {
-            let li = lis[i];
-            if (li.offsetWidth > width_def) {
-                width_def = li.offsetWidth;
-            }
-            if (li.offsetHeight > height_def) {
-                height_def = li.offsetHeight;
-            }
-        }
-        let width = width_def;
-        let height = height_def;
-        for (let i = 0; i < lis.length; i++) {
-            let li = lis[i];
-            let ul = li.getElementsByTagName('ul');
-            if (typeof ul[0] !== "undefined") {
-                let ul_size = ContextUtil.getSizes(ul[0]);
-                if (width_def + ul_size.width > width) {
-                    width = width_def + ul_size.width;
-                }
-                if (height_def + ul_size.height > height) {
-                    height = height_def + ul_size.height;
-                }
-            }
-        }
-        return {
-            "width": width,
-            "height": height
-        };
-    }
-}

package/dist/elements/services/bindableObjectsService/IDragDropService.d.ts

@@ -1,5 +0,0 @@
-import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
-export interface IDragDropService {
-    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerView: IDesignerCanvas, event: DragEvent): any;
-}

package/dist/elements/services/bindableObjectsService/IDragDropService.js

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

package/dist/elements/services/elementsService/WebcomponentManifestParserService.d.ts

@@ -1,25 +0,0 @@
-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 { IDesignItem } from "../../item/IDesignItem";
-import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
-export declare class WebcomponentManifestParserService extends UnkownElementPropertiesService implements IElementsService, IPropertiesService {
-    private _name;
-    get name(): string;
-    private _packageData;
-    private _elementList;
-    private _propertiesList;
-    private _resolveStored;
-    private _rejectStored;
-    private _importPrefix;
-    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
-    private _parseManifest;
-    private manifestClassPropertyTypeToEditorPropertyType;
-    getElements(): Promise<IElementDefinition[]>;
-    isHandledElement(designItem: IDesignItem): boolean;
-    getProperties(designItem: IDesignItem): IProperty[];
-    getProperty(designItem: IDesignItem, name: string): IProperty;
-    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
-}