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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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