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

package/ACKNOWLEDGMENTS

@@ -4,4 +4,6 @@
   https://github.com/PolymerLabs/wizzywid
   This was a start for this whole project (even if mostly nothing of the original code is left)
 - Thanks to @chdh for plain-scrollbar component
-  https://github.com/chdh/plain-scrollbar
+  https://github.com/chdh/plain-scrollbar
+- Thanks to @m-thalmann for contextmenujs
+  https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)

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

@@ -1,27 +0,0 @@
-import { IContextMenuItem } from "./IContextmenuItem";
-export declare class ContextMenuHelper {
-    private static _contextMenuCss;
-    private _shadowRoot;
-    private _element;
-    private _closeBound;
-    private _keyUpBound;
-    private _closeOnDownBound;
-    private _closeOnUpBound;
-    static addContextMenu(element: HTMLElement, items: IContextMenuItem[]): void;
-    static showContextMenu(shadowRoot: ShadowRoot | Document | null, e: MouseEvent, element: HTMLElement, items: IContextMenuItem[]): ContextMenuHelper;
-    private constructor();
-    private init;
-    close(): void;
-    show(): void;
-    hide(): void;
-    private _keyUp;
-    private _closeOnDown;
-    private _closeOnUp;
-    static createMenu(helper: ContextMenuHelper, items: IContextMenuItem[]): HTMLElement;
-    static clickInsideElement(e: any, className: any): any;
-    static getPosition(e: MouseEvent): {
-        x: number;
-        y: number;
-    };
-    positionMenu(e: MouseEvent): void;
-}

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

@@ -1,6 +1,10 @@
-import { css } from "@node-projects/base-custom-webcomponent";
+"use strict";
+/*import { IContextMenuItem } from "./IContextmenuItem";
+import { css } from "@node-projects/base-custom-webcomponent"
+
 export class ContextMenuHelper {
-    static _contextMenuCss = css `
+
+  private static _contextMenuCss = css`
   .context-menu {
     display: none;
     position: absolute;
@@ -52,165 +56,190 @@ export class ContextMenuHelper {
     color: #fff;
     background-color: #0066aa;
   }`;
-    _shadowRoot;
-    _element;
-    _closeBound;
-    _keyUpBound;
-    _closeOnDownBound;
-    _closeOnUpBound;
-    static addContextMenu(element, items) {
-        element.oncontextmenu = (event) => {
-            event.preventDefault();
-            ContextMenuHelper.showContextMenu(null, event, null, items);
-        };
-    }
-    static showContextMenu(shadowRoot, e, element, items) {
-        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;
-    }
-    constructor() {
-    }
-    init(shadowRoot, element) {
-        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');
-    }
-    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);
-        });
+
+  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);
     }
-    show() {
-        this._element.classList.add('context-menu--active');
+  }
+
+  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];
     }
-    hide() {
-        this._element.classList.remove('context-menu--active');
+    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();
     }
-    _keyUp(e) {
-        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
         }
-    }
-    _closeOnDown(e) {
-        const p = e.composedPath();
-        if (p.indexOf(this._element) < 0)
-            this.close();
-    }
-    _closeOnUp(e) {
-        if (e.button == 1)
-            this.close();
-    }
-    static createMenu(helper, items) {
-        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);
-                };
-            }
+      } 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 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) {
-        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
-        };
+
+    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;
     }
-    positionMenu(e) {
-        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";
-        }
+
+    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/IContextmenuItem.d.ts

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

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

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

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

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,30 @@
+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;
+}