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

package/dist/elements/widgets/debugView/debug-view.d.ts

@@ -1,18 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-import { IDesignItem } from "../../item/IDesignItem.js";
-export declare class DebugView extends BaseCustomWebComponentConstructorAppend {
-    static readonly template: HTMLTemplateElement;
-    static readonly style: CSSStyleSheet;
-    private _ready;
-    computedStyle: CSSStyleDeclaration;
-    createsStackingContext: boolean;
-    createsStackingContextReason: string;
-    parentStackingContext: Element;
-    parentStackingContextText: string;
-    selectedElementOffsetParent: Element;
-    selectedElementOffsetParentText: string;
-    constructor();
-    ready(): void;
-    _clickLink(e: MouseEvent, target: 'offsetParent' | 'stackingContextParent'): void;
-    update(designItem: IDesignItem): void;
-}

package/dist/elements/widgets/debugView/debug-view.js

@@ -1,241 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-import { DesignItem } from "../../item/DesignItem.js";
-function generateSelector(element) {
-    if (!element)
-        return '';
-    let selector, tag = element.nodeName.toLowerCase();
-    if (element.id) {
-        selector = '#' + element.getAttribute('id');
-    }
-    else if (element.getAttribute('class')) {
-        selector = '.' + element.getAttribute('class').split(' ').join('.');
-    }
-    return selector ? tag + selector : tag;
-}
-const getClosestStackingContext = function (node) {
-    // the root element (HTML).
-    if (!node || node.nodeName === 'HTML') {
-        return { node: document.documentElement, reason: 'root' };
-    }
-    // handle shadow root elements.
-    if (node.nodeName === '#document-fragment') {
-        return getClosestStackingContext(node.host);
-    }
-    const computedStyle = getComputedStyle(node);
-    // position: fixed or sticky.
-    if (computedStyle.position === 'fixed' || computedStyle.position === 'sticky') {
-        return { node: node, reason: `position: ${computedStyle.position}` };
-    }
-    // positioned (absolutely or relatively) with a z-index value other than "auto".
-    if (computedStyle.zIndex !== 'auto' && computedStyle.position !== 'static') {
-        return { node: node, reason: `position: ${computedStyle.position}; z-index: ${computedStyle.zIndex}` };
-    }
-    // elements with an opacity value less than 1.
-    if (computedStyle.opacity !== '1') {
-        return { node: node, reason: `opacity: ${computedStyle.opacity}` };
-    }
-    // elements with a transform value other than "none".
-    if (computedStyle.transform !== 'none') {
-        return { node: node, reason: `transform: ${computedStyle.transform}` };
-    }
-    // elements with a mix-blend-mode value other than "normal".
-    if (computedStyle.mixBlendMode !== 'normal') {
-        return { node: node, reason: `mixBlendMode: ${computedStyle.mixBlendMode}` };
-    }
-    // elements with a filter value other than "none".
-    if (computedStyle.filter !== 'none') {
-        return { node: node, reason: `filter: ${computedStyle.filter}` };
-    }
-    // elements with a perspective value other than "none".
-    if (computedStyle.perspective !== 'none') {
-        return { node: node, reason: `perspective: ${computedStyle.perspective}` };
-    }
-    // elements with a clip-path value other than "none".
-    if (computedStyle.clipPath !== 'none') {
-        return { node: node, reason: `clip-path: ${computedStyle.clipPath} ` };
-    }
-    // elements with a mask value other than "none".
-    const mask = computedStyle.mask || computedStyle.webkitMask;
-    if (mask !== 'none' && mask !== undefined) {
-        return { node: node, reason: `mask:  ${mask}` };
-    }
-    // elements with a mask-image value other than "none".
-    const maskImage = computedStyle.maskImage || computedStyle.webkitMaskImage;
-    if (maskImage !== 'none' && maskImage !== undefined) {
-        return { node: node, reason: `mask-image: ${maskImage}` };
-    }
-    // elements with a mask-border value other than "none".
-    //@ts-ignore
-    const maskBorder = computedStyle.maskBorder || computedStyle.webkitMaskBorder;
-    if (maskBorder !== 'none' && maskBorder !== undefined) {
-        return { node: node, reason: `mask-border: ${maskBorder}` };
-    }
-    // elements with isolation set to "isolate".
-    if (computedStyle.isolation === 'isolate') {
-        return { node: node, reason: `isolation: ${computedStyle.isolation}` };
-    }
-    // transform or opacity in will-change even if you don't specify values for these attributes directly.
-    if (computedStyle.willChange === 'transform' || computedStyle.willChange === 'opacity') {
-        return { node: node, reason: `willChange: ${computedStyle.willChange}` };
-    }
-    // an item with a z-index value other than "auto".
-    if (computedStyle.zIndex !== 'auto') {
-        const parentStyle = getComputedStyle(node.parentNode);
-        // with a flex|inline-flex parent.
-        if (parentStyle.display === 'flex' || parentStyle.display === 'inline-flex') {
-            return {
-                node: node,
-                reason: `flex-item; z-index: ${computedStyle.zIndex}`,
-            };
-            // with a grid parent.
-        }
-        else if (parentStyle.grid !== 'none / none / none / row / auto / auto') {
-            return {
-                node: node,
-                reason: `child of grid container; z-index: ${computedStyle.zIndex}`,
-            };
-        }
-    }
-    // contain with a value of layout, or paint, or a composite value that includes either of them
-    const contain = computedStyle.contain;
-    if (['layout', 'paint', 'strict', 'content'].indexOf(contain) > -1 ||
-        contain.indexOf('paint') > -1 ||
-        contain.indexOf('layout') > -1) {
-        return {
-            node: node,
-            reason: `contain: ${contain}`,
-        };
-    }
-    return getClosestStackingContext(node.parentNode);
-};
-export class DebugView extends BaseCustomWebComponentConstructorAppend {
-    static template = html `
-        <div>
-            <table>
-                    <tr><th colspan="2">Styling</th></tr>
-                    <tr><td>display</td><td>[[?this.computedStyle.display]]</td></tr>
-                    <tr><td>position</td><td>[[?this.computedStyle.position]]</td></tr>
-                    <tr><td>visibility</td><td>[[?this.computedStyle.visibility]]</td></tr>
-                    <tr><td>pointerEvents</td><td>[[?this.computedStyle.pointerEvents]]</td></tr>
-                    <tr><td>zIndex</td><td>[[?this.computedStyle.zIndex]]</td></tr>
-                    <tr><th colspan="2">Context</th></tr>
-                    <tr><td>offsetParent</td><td class="lnk" @click="[[this._clickLink(event, 'offsetParent')]]">[[?this.selectedElementOffsetParentText]]</td></tr>
-                    <tr><td>createsStackingContext</td><td>[[this.createsStackingContext]]</td></tr>
-                    <tr><td>stackingContextReason</td><td>[[this.createsStackingContextReason]]</td></tr>
-                    <tr><td>stackingContextParent</td><td class="lnk" @click="[[this._clickLink(event, 'stackingContextParent')]]">[[?this.parentStackingContextText]]</td></tr>
-            </table>
-        </div> 
-    `;
-    static style = css `
-      :host {
-        overflow: auto;
-        height: 100%;
-        display: block;
-      }
-      table {
-        font-family: Arial, Helvetica, sans-serif;
-        border-collapse: collapse;
-        width: 100%;
-      }
-      
-      table td, table th {
-        border: 1px solid #ddd;
-        padding: 2px 4px;
-      }
-      
-      table tr:nth-child(even){background-color: #f2f2f2;}
-      
-      table tr:hover {background-color: #ddd;}
-      
-      table th {
-        text-align: left;
-        background-color: #989898;
-        color: white;
-      }
-      
-      .lnk {
-        color: blue;
-      }
-      .lnk:hover {
-        text-decoration: underline;
-        cursor: pointer;
-      }`;
-    _ready;
-    computedStyle;
-    createsStackingContext;
-    createsStackingContextReason;
-    parentStackingContext;
-    parentStackingContextText;
-    selectedElementOffsetParent;
-    selectedElementOffsetParentText;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this._bindingsParse();
-        this._ready = true;
-    }
-    _clickLink(e, target) {
-        if (target == 'offsetParent') {
-            if (this.selectedElementOffsetParent) {
-                let di = DesignItem.GetDesignItem(this.selectedElementOffsetParent);
-                di.instanceServiceContainer.selectionService.setSelectedElements([di]);
-            }
-        }
-        else if (target == 'stackingContextParent') {
-            if (this.parentStackingContext) {
-                let di = DesignItem.GetDesignItem(this.parentStackingContext);
-                di.instanceServiceContainer.selectionService.setSelectedElements([di]);
-            }
-        }
-    }
-    update(designItem) {
-        if (this._ready) {
-            requestAnimationFrame(() => {
-                let element = designItem?.element;
-                if (element && element.nodeType != 8) {
-                    if (element.nodeType == 3)
-                        element = element.parentNode;
-                    this.computedStyle = getComputedStyle(element);
-                    this.selectedElementOffsetParent = element.offsetParent;
-                    if (this.selectedElementOffsetParent == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element) {
-                        this.selectedElementOffsetParentText = null;
-                        this.selectedElementOffsetParent = null;
-                    }
-                    else
-                        this.selectedElementOffsetParentText = generateSelector(element.offsetParent);
-                    if (element && element.nodeType === 1) {
-                        const closest = getClosestStackingContext(element);
-                        this.createsStackingContext = element === closest.node;
-                        this.createsStackingContextReason = this.createsStackingContext ? closest.reason : 'not a stacking context';
-                        this.parentStackingContext = closest.node;
-                        if (this.createsStackingContext && element.nodeName !== 'HTML') {
-                            this.parentStackingContext = getClosestStackingContext(element.parentNode).node;
-                        }
-                        if (this.parentStackingContext == designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element.parentElement.parentElement) {
-                            this.parentStackingContextText = null;
-                            this.parentStackingContext = null;
-                        }
-                        else
-                            this.parentStackingContextText = generateSelector(this.parentStackingContext);
-                    }
-                }
-                else {
-                    //@ts-ignore
-                    this.computedStyle = {};
-                    this.createsStackingContext = false;
-                    this.createsStackingContextReason = '';
-                    this.createsStackingContext = false;
-                    this.selectedElementOffsetParent = null;
-                    this.selectedElementOffsetParentText = null;
-                    this.parentStackingContext = null;
-                    this.parentStackingContextText = null;
-                }
-                this._bindingsRefresh();
-            });
-        }
-    }
-}
-customElements.define('node-projects-debug-view', DebugView);

package/dist/elements/widgets/demoView/IDemoView.d.ts

@@ -1,7 +0,0 @@
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-export interface IDemoView extends IUiCommandHandler, IDisposable {
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
-}

package/dist/elements/widgets/demoView/IDemoView.js

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

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -1,17 +0,0 @@
-import { IDemoView } from './IDemoView.js';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView, IUiCommandHandler, IDisposable {
-    private _placeholder;
-    private _loading;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    dispose(): void;
-    executeCommand: (command: IUiCommand) => void;
-    canExecuteCommand: (command: IUiCommand) => boolean;
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
-}

package/dist/elements/widgets/demoView/demoView.js

@@ -1,72 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-export class DemoView extends BaseCustomWebComponentLazyAppend {
-    _placeholder;
-    _loading;
-    static style = css `
-  :host {
-    display: block;
-    overflow: hidden;
-    background: white;
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-  #placeholder {
-    position: absolute;
-    left: 24px;
-    height: 100%;
-    width: calc(100% - 24px);
-  }
-  #loading {
-    position: absolute;
-    top: 60px;
-    left: 20px;
-  }
-  #left {
-    position:absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 24px;
-    border-right: solid white 1px;
-    box-sizing: border-box;
-    background: black;
-  }
-  span {
-    color: white;
-    rotate: 270deg;
-    display: block;
-    position: absolute;
-    top: 35px;
-    left: -38px;
-    font-weight: 600;
-    font-family: monospace;
-    font-size: 24px;
-  }`;
-    constructor() {
-        super();
-        this._placeholder = document.createElement('div');
-        this._placeholder.id = 'placeholder';
-        this.shadowRoot.appendChild(this._placeholder);
-        this._loading = document.createElement('div');
-        this._loading.id = 'loading';
-        this._loading.textContent = '🛀 Hold on, loading...';
-        this.shadowRoot.appendChild(this._loading);
-        const div = document.createElement("div");
-        div.id = "left";
-        const span = document.createElement("span");
-        span.innerText = "PREVIEW";
-        div.appendChild(span);
-        this.shadowRoot.appendChild(div);
-    }
-    dispose() {
-    }
-    executeCommand;
-    canExecuteCommand;
-    async display(serviceContainer, instanceServiceContainer, code, style) {
-        this._loading.hidden = false;
-        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code, style);
-        this._loading.hidden = true;
-    }
-}
-customElements.define('node-projects-demo-view', DemoView);

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,8 +0,0 @@
-import { IDesignContext } from './IDesignContext.js';
-export declare class DesignContext implements IDesignContext {
-    imports: string[];
-    npmPackages: string[];
-    extensionOptions: {
-        [key: string]: any;
-    };
-}

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

@@ -1,5 +0,0 @@
-export class DesignContext {
-    imports = [];
-    npmPackages = [];
-    extensionOptions = {};
-}

package/dist/elements/widgets/designerView/DomConverter.d.ts

@@ -1,7 +0,0 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-export declare class DomConverter {
-    static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
-    static normalizeContentValue(value: string): string;
-    static IsSelfClosingElement(tag: string): boolean;
-    static ConvertToString(designItems: IDesignItem[], beautifyOutput?: boolean, updatePositions?: boolean): string;
-}

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

@@ -1,43 +0,0 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter.js";
-import { SimpleTextWriter } from "../../helper/SimpleTextWriter.js";
-export class DomConverter {
-    static normalizeAttributeValue(value, useSingleQuotes = false) {
-        if (typeof value === 'number')
-            value = value.toString();
-        if (value) {
-            if (useSingleQuotes)
-                return value.replaceAll('&', '&amp;').replaceAll('\'', '&#39;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-            return value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-        }
-        return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-    }
-    static normalizeContentValue(value) {
-        if (value)
-            return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll(' ', '&nbsp;'); // !caution! -> this is not normal space, it's nbsp
-        return value;
-    }
-    static IsSelfClosingElement(tag) {
-        return tag === 'area' ||
-            tag === 'base' ||
-            tag === 'br' ||
-            tag === 'col' ||
-            tag === 'embed' ||
-            tag === 'hr' ||
-            tag === 'img' ||
-            tag === 'input' ||
-            tag === 'keygen' ||
-            tag === 'link' ||
-            tag === 'meta' ||
-            tag === 'param' ||
-            tag === 'source' ||
-            tag === 'track' ||
-            tag === 'wbr';
-    }
-    static ConvertToString(designItems, beautifyOutput, updatePositions = false) {
-        let itw = beautifyOutput !== false ? new IndentedTextWriter() : new SimpleTextWriter();
-        //todo: check how we could support this beautify here, cause it's now a setting of the writer...
-        //let options: HtmlWriterOptions = { beautifyOutput: beautifyOutput !== false, writeDesignerProperties: true, compressCssToShorthandProperties: true, parseJsonInAttributes: true, jsonWriteMode: 'beauty' };
-        designItems[0].serviceContainer.htmlWriterService.write(itw, designItems, true, updatePositions);
-        return itw.getString();
-    }
-}

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,7 +0,0 @@
-export interface IDesignContext {
-    imports: string[];
-    npmPackages: string[];
-    extensionOptions: {
-        [key: string]: any;
-    };
-}

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

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

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -1,60 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ServiceContainer } from '../../services/ServiceContainer.js';
-import { Snaplines } from './Snaplines.js';
-import { IPlacementView } from './IPlacementView.js';
-import { IExtensionManager } from './extensions/IExtensionManger.js';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IPoint } from '../../../interfaces/IPoint.js';
-import { OverlayLayerView } from './overlayLayerView.js';
-import { IRect } from "../../../interfaces/IRect.js";
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { ISize } from "../../../interfaces/ISize.js";
-import { ITool } from "./tools/ITool.js";
-export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
-    readonly serviceContainer: ServiceContainer;
-    readonly instanceServiceContainer: InstanceServiceContainer;
-    readonly containerBoundingRect: DOMRect;
-    readonly outerRect: DOMRect;
-    readonly rootDesignItem: IDesignItem;
-    readonly overlayLayer: OverlayLayerView;
-    readonly extensionManager: IExtensionManager;
-    readonly clickOverlay: HTMLDivElement;
-    readonly snapLines: Snaplines;
-    readonly shadowRoot: ShadowRoot | null;
-    readonly alignOnGrid: boolean;
-    readonly alignOnSnap: boolean;
-    readonly onContentChanged: TypedEvent<void>;
-    zoomFactor: number;
-    designerOffsetWidth: number;
-    designerOffsetHeight: number;
-    readonly scaleFactor: number;
-    canvasOffset: IPoint;
-    canvas: HTMLElement;
-    additionalStyles: CSSStyleSheet[];
-    eatEvents: Element;
-    initialize(serviceContainer: ServiceContainer): any;
-    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    getViewportCoordinates(event: MouseEvent): IPoint;
-    getNormalizedElementCoordinates(element: Element): IRect;
-    getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
-        realWidth: number;
-        realHeight: number;
-    };
-    getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect;
-    captureActiveTool(tool: ITool): any;
-    releaseActiveTool(): any;
-    getDesignSurfaceDimensions(): ISize;
-    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
-    elementFromPoint(x: number, y: number): Element;
-    elementsFromPoint(x: number, y: number): Element[];
-    showHoverExtension(element: Element, event: Event): any;
-    setDesignItems(designItems: IDesignItem[]): any;
-    _internalSetDesignItems(designItems: IDesignItem[]): any;
-    zoomTowardsPoint(point: IPoint, scalechange: number): void;
-    zoomPoint(canvasPoint: IPoint, newZoom: number): void;
-    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): void;
-    lazyTriggerReparseDocumentStylesheets(): any;
-}

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

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

package/dist/elements/widgets/designerView/IPlacementView.d.ts

@@ -1,13 +0,0 @@
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { OverlayLayerView } from './overlayLayerView.js';
-import { Snaplines } from './Snaplines.js';
-export interface IPlacementView {
-    alignOnSnap: boolean;
-    alignOnGrid: boolean;
-    gridSize: number;
-    rootDesignItem: IDesignItem;
-    overlayLayer: OverlayLayerView;
-    snapLines: Snaplines;
-    readonly zoomFactor: number;
-    readonly scaleFactor: number;
-}

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

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

package/dist/elements/widgets/designerView/Snaplines.d.ts

@@ -1,21 +0,0 @@
-import type { IDesignItem } from '../../item/IDesignItem.js';
-import type { IPoint } from '../../../interfaces/IPoint.js';
-import type { ISize } from '../../../interfaces/ISize.js';
-import { OverlayLayerView } from './overlayLayerView.js';
-import { IRect } from "../../../interfaces/IRect.js";
-export declare class Snaplines {
-    snapOffset: number;
-    private _overlayLayerView;
-    private _containerItem;
-    private _positionsH;
-    private _positionsMiddleH;
-    private _positionsV;
-    private _positionsMiddleV;
-    private _outerRect;
-    constructor(overlayLayer: OverlayLayerView);
-    initialize(containerItem: IDesignItem): void;
-    clearSnaplines(): void;
-    calculateSnaplines(ignoredItems: IDesignItem[]): void;
-    snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint;
-    drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]): void;
-}