@node-projects/web-component-designer 0.0.291 → 0.1.0

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

@@ -1,345 +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;
-		z-index: 2147483647;
-		color: black;
-	  }
-	  
-	  .context_menu.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: 3px;
-		margin: 0;
-		background-color: #f5f7f7;
-		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 .context_menu_icon_span {	
-		width: 28px;
-		display: inline-block;
-		border-right: 1px solid #aaa;
-	  }
-
-	  .context_menu li .context_menu_text {	
-		padding-left: 2px;
-		vertical-align: middle;
-	  }
-	  
-	  .context_menu li .context_menu_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.context_menu_divider {
-		border-bottom: 1px solid #aaa;
-		margin: 5px;
-		padding: 0;
-		cursor: default;
-	  }
-	  
-	  .context_menu li.context_menu_divider:hover {
-		background-color: inherit;
-	  }
-	  
-	  .context_menu.context_menu_border_right>ul ul {
-		left: unset;
-		right: 100%;
-	  }
-	  
-	  .context_menu.context_menu_border_bottom>ul ul {
-		top: unset;
-		bottom: 0;
-	  }
-	  
-	  .context_menu li[disabled=""] {
-		color: #777;
-		cursor: default;
-	  }
-	  
-	  .context_menu li[disabled=""]:hover {
-		background-color: inherit;
-	  }
-	  
-	  .context_menu li.context_menu_marked {
-		background-color: #5ebdec;
-	  }`;
-    static count = 0;
-    menu;
-    options;
-    context;
-    num;
-    _menuElement;
-    constructor(menu, options, context) {
-        this.num = ContextMenu.count++;
-        this.menu = menu;
-        this.options = options;
-        this.context = context;
-        this.reload();
-        this._windowDown = this._windowDown.bind(this);
-        this._windowKeyUp = this._windowKeyUp.bind(this);
-        this._windowResize = this._windowResize.bind(this);
-    }
-    reload() {
-        let shadowRoot = this.options?.shadowRoot ?? document;
-        if (this._menuElement == null) {
-            this._menuElement = document.createElement("div");
-            this._menuElement.className = "context_menu";
-            this._menuElement.id = "context_menu_" + this.num;
-            if (shadowRoot === document)
-                document.body.appendChild(this._menuElement);
-            else
-                shadowRoot.appendChild(this._menuElement);
-        }
-        this._menuElement.innerHTML = "";
-        if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenu._contextMenuCss) < 0) {
-            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenu._contextMenuCss];
-        }
-        this._menuElement.appendChild(this.renderLevel(this.menu));
-    }
-    renderLevel(level) {
-        let ul_outer = document.createElement("ul");
-        let addDivider = false;
-        level.forEach((item) => {
-            if (item.title !== '-') {
-                if (addDivider) {
-                    let li = document.createElement("li");
-                    li.className = "context_menu_divider";
-                    addDivider = false;
-                    ul_outer.appendChild(li);
-                }
-                let li = document.createElement("li");
-                let icon_span = document.createElement("span");
-                icon_span.className = 'context_menu_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 = 'context_menu_text';
-                text_span.innerHTML = item.title;
-                let sub_span = document.createElement("span");
-                sub_span.className = 'context_menu_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, this.context, this);
-                            this.close();
-                        });
-                    if (this.options?.mode == 'undo') {
-                        li.addEventListener('mouseup', (e) => {
-                            item.action(e, item, this.context, this);
-                            this.close();
-                        });
-                    }
-                    if (item.children != null) {
-                        let childmenu = this.renderLevel(item.children);
-                        li.appendChild(childmenu);
-                        li.addEventListener('mouseenter', () => {
-                            const childRect = childmenu.getBoundingClientRect();
-                            if (childRect.top + childRect.height > window.innerHeight) {
-                                childmenu.style.top = 'unset';
-                                childmenu.style.bottom = '0';
-                            }
-                            if (this.options?.mode == 'undo') {
-                                let select = true;
-                                for (let node of li.parentElement.children) {
-                                    if (select)
-                                        node.classList.add('context_menu_marked');
-                                    else
-                                        node.classList.remove('context_menu_marked');
-                                    if (node == li)
-                                        select = false;
-                                }
-                            }
-                        });
-                    }
-                    else {
-                        if (this.options?.mode == 'undo') {
-                            li.addEventListener('mouseenter', () => {
-                                let select = true;
-                                for (let node of li.parentElement.children) {
-                                    if (select)
-                                        node.classList.add('context_menu_marked');
-                                    else
-                                        node.classList.remove('context_menu_marked');
-                                    if (node == li)
-                                        select = false;
-                                }
-                            });
-                        }
-                    }
-                }
-                ul_outer.appendChild(li);
-            }
-            else {
-                addDivider = true;
-            }
-        });
-        return ul_outer;
-    }
-    display(event) {
-        let menu = this._menuElement;
-        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("context_menu_border_right");
-        }
-        else {
-            menu.classList.remove("context_menu_border_right");
-        }
-        if ((windowHeight - clickCoordsY) < sizes.height) {
-            menu.classList.add("context_menu_border_bottom");
-        }
-        else {
-            menu.classList.remove("context_menu_border_bottom");
-        }
-        menu.classList.add("context_menu_display");
-        event.preventDefault();
-        window.addEventListener("keyup", this._windowKeyUp);
-        window.addEventListener("mousedown", this._windowDown);
-        window.addEventListener("resize", this._windowResize);
-        setTimeout(() => window.addEventListener("contextmenu", this._windowDown), 100);
-    }
-    _windowResize() {
-        this.close();
-    }
-    _windowDown(e) {
-        e.preventDefault();
-        const p = e.composedPath();
-        if (p.indexOf(this._menuElement) < 0)
-            this.close();
-        return false;
-    }
-    _windowKeyUp(e) {
-        if (e.key === 'Escape') {
-            this.close();
-        }
-    }
-    static show(menu, event, options, context) {
-        let ctxMenu = new ContextMenu(menu, options, context);
-        ctxMenu.display(event);
-        return ctxMenu;
-    }
-    close() {
-        this._menuElement.remove();
-        window.removeEventListener("keyup", this._windowKeyUp);
-        window.removeEventListener("mousedown", this._windowDown);
-        window.removeEventListener("resize", this._windowResize);
-        setTimeout(() => window.removeEventListener("contextmenu", this._windowDown), 10);
-    }
-}
-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/helper/contextMenu/IContextMenuItem.d.ts

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

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

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

package/dist/elements/helper/w3color.d.ts

@@ -1,120 +0,0 @@
-export declare class w3color {
-    red: number;
-    green: number;
-    blue: number;
-    hue: number;
-    sat: number;
-    lightness: number;
-    whiteness: number;
-    blackness: number;
-    cyan: number;
-    magenta: number;
-    yellow: number;
-    black: number;
-    ncol: string;
-    opacity: number;
-    valid: boolean;
-    toRgbString(): string;
-    toRgbaString(): string;
-    toHwbString(): string;
-    toHwbStringDecimal(): string;
-    toHwbaString(): string;
-    toHslString(): string;
-    toHslStringDecimal(): string;
-    toHslaString(): string;
-    toCmykString(): string;
-    toCmykStringDecimal(): string;
-    toNcolString(): string;
-    toNcolStringDecimal(): string;
-    toNcolaString(): string;
-    toName(): string;
-    toHexString(): string;
-    toNameOrHexString(): string;
-    toRgb(): {
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-    };
-    toHsl(): {
-        h: number;
-        s: number;
-        l: number;
-        a: number;
-    };
-    toHwb(): {
-        h: number;
-        w: number;
-        b: number;
-        a: number;
-    };
-    toCmyk(): {
-        c: number;
-        m: number;
-        y: number;
-        k: number;
-        a: number;
-    };
-    toNcol(): {
-        ncol: string;
-        w: number;
-        b: number;
-        a: number;
-    };
-    isDark(n: any): boolean;
-    saturate(n: any): void;
-    desaturate(n: any): void;
-    lighter(n: any): void;
-    darker(n: any): void;
-    attachValues(color: any): void;
-    static toColorObject(c: any): w3color;
-    static colorObject(rgb: any, a: any, h: any, s: any): any;
-    static getColorArr(x: any): string[];
-    static roundDecimals(c: any): any;
-    static hslToRgb(hue: any, sat: any, light: any): {
-        r: any;
-        g: any;
-        b: any;
-    };
-    static hueToRgb(t1: any, t2: any, hue: any): any;
-    static hwbToRgb(hue: any, white: any, black: any): {
-        r: any;
-        g: any;
-        b: any;
-    };
-    static cmykToRgb(c: any, m: any, y: any, k: any): {
-        r: any;
-        g: any;
-        b: any;
-    };
-    static ncolToRgb(ncol: any, white: any, black: any): false | {
-        r: any;
-        g: any;
-        b: any;
-    };
-    static hueToNcol(hue: any): string;
-    static ncsToRgb(ncs: any): {
-        r: number;
-        b: number;
-        g: number;
-    };
-    static rgbToHsl(r: any, g: any, b: any): {
-        h: any;
-        s: any;
-        l: any;
-    };
-    static rgbToHwb(r: any, g: any, b: any): {
-        h: any;
-        w: any;
-        b: any;
-    };
-    static rgbToCmyk(r: any, g: any, b: any): {
-        c: any;
-        m: any;
-        y: any;
-        k: any;
-    };
-    static toHex(n: any): any;
-    static w3trim(x: any): any;
-    static isHex(x: any): boolean;
-}