@node-projects/web-component-designer 0.0.125 → 0.0.127

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,216 +0,0 @@
-import { css } from "@node-projects/base-custom-webcomponent";
-export class ContextMenuHelper {
-    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;
-  }`;
-    _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);
-        });
-    }
-    show() {
-        this._element.classList.add('context-menu--active');
-    }
-    hide() {
-        this._element.classList.remove('context-menu--active');
-    }
-    _keyUp(e) {
-        if (e.keyCode === 27) {
-            this.close();
-        }
-    }
-    _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);
-                };
-            }
-        }
-        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
-        };
-    }
-    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";
-        }
-    }
-}

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;
-}

package/dist/elements/services/elementsService/WebcomponentManifestParserService.js

@@ -1,94 +0,0 @@
-import { BindingTarget } from "../../item/BindingTarget";
-import { PropertyType } from "../propertiesService/PropertyType";
-import { UnkownElementPropertiesService } from "../propertiesService/services/UnkownElementPropertiesService";
-export class WebcomponentManifestParserService extends UnkownElementPropertiesService {
-    _name;
-    get name() { return this._name; }
-    _packageData;
-    _elementList;
-    _propertiesList;
-    _resolveStored;
-    _rejectStored;
-    _importPrefix = '';
-    constructor(name, fileOrObject, importPrefix = '') {
-        super();
-        this._name = name;
-        this._importPrefix = importPrefix;
-        if (typeof fileOrObject === 'string') {
-            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
-            import(fileOrObject, { assert: { type: 'json' } }).then(module => {
-                this._packageData = module.default;
-                this._parseManifest();
-            }).catch(err => {
-                if (this._rejectStored) {
-                    this._rejectStored.forEach(x => x(err));
-                    this._resolveStored = null;
-                    this._rejectStored = null;
-                }
-            });
-        }
-        else {
-            this._packageData = fileOrObject;
-            this._parseManifest();
-        }
-    }
-    _parseManifest() {
-        this._elementList = [];
-        this._propertiesList = {};
-        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, import: this._importPrefix + '/' + e.declaration.module });
-                    let properties = [];
-                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
-                    for (let d of declaration.members) {
-                        if (d.kind == 'field') {
-                            let pType = PropertyType.property;
-                            if (declaration.attributes)
-                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
-                            properties.push({ name: d.name, service: this, propertyType: pType, type: this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text) });
-                        }
-                    }
-                    this._propertiesList[e.name] = properties;
-                }
-            }
-            if (this._resolveStored) {
-                this._resolveStored.forEach(x => x(this._elementList));
-                this._resolveStored = null;
-                this._rejectStored = null;
-            }
-        }
-    }
-    manifestClassPropertyTypeToEditorPropertyType(type) {
-        if (type) {
-            if (type.toLowerCase() === 'boolean')
-                return 'boolean';
-            if (type.toLowerCase() === 'number')
-                return 'number';
-        }
-        return type;
-    }
-    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) {
-        if (this._elementList)
-            return this._elementList.find(x => x.tag == designItem.name) != null;
-        return false;
-    }
-    getProperties(designItem) {
-        return this._propertiesList[designItem.name];
-    }
-    getProperty(designItem, name) {
-        return this._propertiesList[designItem.name].find(x => x.name == name);
-    }
-    getPropertyTarget(designItem, property) {
-        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
-    }
-}

package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.d.ts

@@ -1,11 +0,0 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
-import { IDesignItem } from '../../item/IDesignItem';
-export declare class NodeHtmlParserService implements IHtmlParserService {
-    private _parserUrl;
-    constructor(parserUrl?: string);
-    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    private _parseDiv;
-    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
-}

package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.js

@@ -1,96 +0,0 @@
-import { DesignItem } from '../../item/DesignItem';
-import { CssAttributeParser } from "../../helper/CssAttributeParser";
-import { newElementFromString } from "../../helper/ElementHelper";
-// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
-// attributes from their DOM, so you loose Data
-export class NodeHtmlParserService {
-    _parserUrl;
-    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
-        this._parserUrl = parserUrl;
-    }
-    async parse(html, serviceContainer, instanceServiceContainer) {
-        //@ts-ignore
-        let parser = await import(this._parserUrl);
-        const parsed = parser.parse(html, { comment: true });
-        let designItems = [];
-        for (let p of parsed.childNodes) {
-            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
-            if (di != null)
-                designItems.push(di);
-            else
-                console.warn("NodeHtmlParserService - could not parse element", p);
-        }
-        return designItems;
-    }
-    _parseDiv = document.createElement("div");
-    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
-        let designItem = null;
-        if (item.nodeType == 1) {
-            let element;
-            let manualCreatedElement = false;
-            if (!namespace)
-                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
-            if (!element) {
-                if (namespace)
-                    element = document.createElementNS(namespace, item.rawTagName);
-                else
-                    element = document.createElement(item.rawTagName);
-                manualCreatedElement = true;
-            }
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-            let hideAtDesignTime = false;
-            let hideAtRunTime = false;
-            let lockAtDesignTime = false;
-            let style = '';
-            let attr = item.attributes;
-            for (let a in attr) {
-                if (a !== 'style') {
-                    designItem.attributes.set(a, attr[a]);
-                    if (manualCreatedElement) {
-                        element.setAttribute(a, attr[a]);
-                    }
-                    if (a === 'node-projects-hide-at-design-time')
-                        hideAtDesignTime = true;
-                    else if (a === 'node-projects-hide-at-run-time')
-                        hideAtRunTime = true;
-                    else if (a === 'node-projects-lock-at-design-time')
-                        lockAtDesignTime = true;
-                }
-                else {
-                    style = attr[a];
-                }
-            }
-            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
-                let styleParser = new CssAttributeParser();
-                styleParser.parse(style);
-                for (let s of styleParser.entries) {
-                    designItem.styles.set(s.name, s.value);
-                    if (manualCreatedElement) {
-                        element.style[s.name] = s.value;
-                    }
-                }
-            }
-            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
-                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
-            }
-            designItem.hideAtDesignTime = hideAtDesignTime;
-            designItem.hideAtRunTime = hideAtRunTime;
-            designItem.lockAtDesignTime = lockAtDesignTime;
-            element.draggable = false; //even if it should be true, for better designer exp.
-            for (let c of item.childNodes) {
-                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
-                designItem._insertChildInternal(di);
-            }
-        }
-        else if (item.nodeType == 3) {
-            this._parseDiv.innerHTML = item.rawText;
-            let element = this._parseDiv.childNodes[0];
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-        }
-        else if (item.nodeType == 8) {
-            let element = document.createComment(item.rawText);
-            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
-        }
-        return designItem;
-    }
-}

package/dist/elements/services/initializationService/DefaultIntializationService.d.ts

@@ -1,6 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem';
-import { IIntializationService } from './IIntializationService';
-export declare class DefaultIntializationService implements IIntializationService {
-    init(designItem: IDesignItem): void;
-    initializeIframe(iframe: HTMLIFrameElement): void;
-}

package/dist/elements/services/initializationService/DefaultIntializationService.js

@@ -1,22 +0,0 @@
-export class DefaultIntializationService {
-    init(designItem) {
-        /*if (designItem.name == 'iframe') {
-          this.initializeIframe(<HTMLIFrameElement>designItem.element);
-        }*/
-    }
-    initializeIframe(iframe) {
-        /*iframe.contentDocument.body.style.pointerEvents = 'none';
-        function cloneIframeEvent(event: PointerEvent) {
-          var clRect = iframe.getBoundingClientRect();
-          let data = { ...event };
-          data.clientX = event.clientX + clRect.left;
-          data.clientY = event.clientY + clRect.top;
-          var evt = new PointerEvent(event.type, data) //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
-          iframe.dispatchEvent(evt);
-        }
-        iframe.contentWindow.addEventListener('pointerdown', cloneIframeEvent);
-        iframe.contentWindow.addEventListener('pointermove', cloneIframeEvent);
-        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);*/
-    }
-    ;
-}

package/dist/elements/services/instanceService/IPrepareElementsForDesignerService.d.ts

@@ -1,4 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-export interface IPrepareElementsForDesignerService {
-    prepareElementsForDesigner(designItem: IDesignItem): any;
-}

package/dist/elements/services/instanceService/IPrepareElementsForDesignerService.js

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

package/dist/elements/services/instanceService/PrepareElementsForDesignerService.d.ts

@@ -1,6 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IPrepareElementsForDesignerService } from "./IPrepareElementsForDesignerService.js";
-export declare class PrepareElementsForDesignerService implements IPrepareElementsForDesignerService {
-    prepareElementsForDesigner(designItem: IDesignItem): void;
-    private _prepareElementsForDesigner;
-}

package/dist/elements/services/instanceService/PrepareElementsForDesignerService.js

@@ -1,32 +0,0 @@
-export class PrepareElementsForDesignerService {
-    prepareElementsForDesigner(designItem) {
-        if (designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem)
-            this._prepareElementsForDesigner([designItem.element], true);
-        this._prepareElementsForDesigner(designItem.element.querySelectorAll('*'), true);
-    }
-    _prepareElementsForDesigner(elements, rootElements) {
-        /*for (let el of elements) {
-          if ((<HTMLElement>el).shadowRoot) {
-            this._prepareElementsForDesigner(((<HTMLElement>el).shadowRoot).querySelectorAll('*'), false);
-          }
-          if (el instanceof HTMLElement) {
-            el.onclick = null;
-            el.onmousedown = null;
-            el.onmouseup = null;
-            if (!rootElements)
-              el.style.pointerEvents = 'none';
-          }
-          if (el instanceof HTMLImageElement) {
-            el.draggable = false;
-          }
-          else if (el instanceof HTMLInputElement) {
-            el.onmousedown = (e) => e.preventDefault();
-            //const ip = el;
-            //el.onclick = (e) => { if (ip.type == 'checkbox') ip.checked = !ip.checked };
-          }
-          else if (el instanceof HTMLSelectElement) {
-            el.onmousedown = (e) => e.preventDefault();
-          }
-        }*/
-    }
-}

package/dist/elements/services/propertiesService/services/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;
-}