@node-projects/web-component-designer 0.0.16 → 0.0.21

package/config/elements-native.json

@@ -0,0 +1,42 @@
+{
+  "elements":
+  [
+    "div",
+    "input",
+    {"tag" : "button", "defaultWidth": "80px", "defaultHeight": "30px", "defaultContent": "Button" },
+    "img",
+    "iframe",
+    {"tag" : "a" },
+    "p",
+    "span",
+    "b",
+    "i",
+    "u",
+    "br",
+    "em",
+    "q",
+    "small",
+    "strong",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "ol",
+    "ul",
+    "li",
+    "pre",
+    "table",
+    "caption",
+    "colgroup",
+    "col",
+    "thead",
+    "th",
+    "tbody",
+    "tr",
+    "td",
+    "tfoot"
+  ]
+}

package/dist/elements/documentContainer.js

@@ -12,6 +12,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._tabControl = new DesignerTabControl();
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
+        this.designerView.setAttribute('exportparts', 'canvas');
         this.designerView.title = 'Designer';
         this._tabControl.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);

package/dist/elements/item/DesignItem.d.ts

@@ -44,6 +44,7 @@ export declare class DesignItem implements IDesignItem {
     get lockAtDesignTime(): boolean;
     set lockAtDesignTime(value: boolean);
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
+    updateChildrenFromNodesChildren(): void;
     constructor(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
     openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;

package/dist/elements/item/DesignItem.js

@@ -93,6 +93,7 @@ export class DesignItem {
         this._childArray = [];
         DomHelper.removeAllChildnodes(this.element);
     }
+    //abstract text content to own property. so only chnage via designer api will use it.
     get hasContent() {
         return this.nodeType == NodeType.TextNode || (this._childArray.length === 0 && this.content !== null);
     }
@@ -154,37 +155,45 @@ export class DesignItem {
     }
     static createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer) {
         let designItem = new DesignItem(node, serviceContainer, instanceServiceContainer);
-        for (let a of designItem.element.attributes) {
-            if (a.name !== 'style') {
-                designItem.attributes.set(a.name, a.value);
-                if (a.name === hideAtDesignTimeAttributeName)
-                    designItem._hideAtDesignTime = true;
-                if (a.name === hideAtRunTimeAttributeName)
-                    designItem._hideAtRunTime = true;
-                if (a.name === lockAtDesignTimeAttributeName)
-                    designItem._lockAtDesignTime = true;
+        if (designItem.nodeType == NodeType.Element) {
+            for (let a of designItem.element.attributes) {
+                if (a.name !== 'style') {
+                    designItem.attributes.set(a.name, a.value);
+                    if (a.name === hideAtDesignTimeAttributeName)
+                        designItem._hideAtDesignTime = true;
+                    if (a.name === hideAtRunTimeAttributeName)
+                        designItem._hideAtRunTime = true;
+                    if (a.name === lockAtDesignTimeAttributeName)
+                        designItem._lockAtDesignTime = true;
+                }
+                if (node instanceof HTMLElement || node instanceof SVGElement) {
+                    for (let s of node.style) {
+                        let val = node.style[s];
+                        if (val && typeof val === 'string')
+                            designItem.styles.set(s, node.style[s]);
+                    }
+                    if (!designItem._lockAtDesignTime)
+                        node.style.pointerEvents = 'auto';
+                    else
+                        node.style.pointerEvents = 'none';
+                    //node.style.cursor = 'pointer';
+                }
+                node.draggable = false; //even if it should be true, for better designer exp.
             }
         }
-        if (node instanceof HTMLElement || node instanceof SVGElement) {
-            for (let s of node.style) {
-                let val = node.style[s];
-                if (val && typeof val === 'string')
-                    designItem.styles.set(s, node.style[s]);
+        designItem.updateChildrenFromNodesChildren();
+        return designItem;
+    }
+    updateChildrenFromNodesChildren() {
+        this._childArray = [];
+        if (this.nodeType == NodeType.Element) {
+            if (this.element.children && this.element.children.length === 0 && this.element.childNodes.length <= 1)
+                this.content = this.element.textContent; //was soll das bringen???
+            else {
+                for (const c of this.element.childNodes)
+                    this._childArray.push(DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer));
             }
-            if (!designItem._lockAtDesignTime)
-                node.style.pointerEvents = 'auto';
-            else
-                node.style.pointerEvents = 'none';
-            //node.style.cursor = 'pointer';
         }
-        node.draggable = false; //even if it should be true, for better designer exp.
-        if (designItem.element.children.length === 0)
-            designItem.content = designItem.element.textContent;
-        else {
-            for (const c of designItem.element.children)
-                designItem._childArray.push(DesignItem.createDesignItemFromInstance(c, serviceContainer, instanceServiceContainer));
-        }
-        return designItem;
     }
     openGroup(title, affectedItems) {
         return this.instanceServiceContainer.undoService.openGroup(title, affectedItems);

package/dist/elements/item/IDesignItem.d.ts

@@ -23,6 +23,7 @@ export interface IDesignItem {
     removeChild(designItem: IDesignItem): any;
     remove(): any;
     clearChildren(): any;
+    updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;
     readonly node: Node;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -39,6 +39,11 @@ import { PolymerBindingsService } from './bindingsService/PolymerBindingsService
 import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js';
 import { GridPlacementService } from './placementService/GridPlacementService.js';
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService';
+import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService';
+import { SnaplinesProviderService } from './placementService/SnaplinesProviderService';
+import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
+import { DragDropService } from './dragDropService/DragDropService';
+import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -51,9 +56,13 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("htmlWriterService", new HtmlWriterService());
     serviceContainer.register("containerService", new DefaultPlacementService());
     serviceContainer.register("containerService", new GridPlacementService());
+    serviceContainer.register("containerService", new FlexBoxPlacementService());
+    serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("bindingService", new PolymerBindingsService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
+    serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
+    serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -83,6 +92,9 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
         new AltToEnterContainerExtensionProvider()
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
+        new EditTextExtensionProvider()
+    ]);
     serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool());
     serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool());
     serviceContainer.designerTools.set(NamedTools.DrawPath, new DrawPathTool());

package/dist/elements/services/ServiceContainer.d.ts

@@ -17,9 +17,13 @@ import { IContextMenuExtension } from "../widgets/designerView/extensions/contex
 import { GlobalContext } from './GlobalContext';
 import { IBindingService } from "./bindingsService/IBindingService";
 import { IElementAtPointService } from './elementAtPointService/IElementAtPointService';
+import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
+import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
+import { IDragDropService } from './dragDropService/IDragDropService';
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
+    "snaplinesProviderService": ISnaplinesProviderService;
     "elementsService": IElementsService;
     "instanceService": IInstanceService;
     "editorTypesService": IEditorTypesService;
@@ -28,6 +32,8 @@ interface ServiceNameMap {
     "intializationService": IIntializationService;
     "bindingService": IBindingService;
     "elementAtPointService": IElementAtPointService;
+    "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
+    "dragDropService": IDragDropService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -41,6 +47,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get bindingServices(): IBindingService[];
     get propertiesServices(): IPropertiesService[];
     get containerServices(): IPlacementService[];
+    get snaplinesProviderService(): ISnaplinesProviderService;
     get elementsServices(): IElementsService[];
     get instanceServices(): IInstanceService[];
     get editorTypesServices(): IEditorTypesService[];
@@ -48,5 +55,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;
+    get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
+    get dragDropService(): IDragDropService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -22,6 +22,9 @@ export class ServiceContainer extends BaseServiceContainer {
     get containerServices() {
         return this.getServices('containerService');
     }
+    get snaplinesProviderService() {
+        return this.getLastService('snaplinesProviderService');
+    }
     get elementsServices() {
         return this.getServices('elementsService');
     }
@@ -43,4 +46,10 @@ export class ServiceContainer extends BaseServiceContainer {
     get elementAtPointService() {
         return this.getLastService('elementAtPointService');
     }
+    get prepareElementsForDesignerService() {
+        return this.getLastService('prepareElementsForDesignerService');
+    }
+    get dragDropService() {
+        return this.getLastService('dragDropService');
+    }
 }

package/dist/elements/services/dragDropService/DragDropService.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerView } from "../../widgets/designerView/IDesignerView.js";
+import { IDragDropService } from "./IDragDropService.js";
+export declare class DragDropService implements IDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerView, event: DragEvent): void;
+}

package/dist/elements/services/dragDropService/DragDropService.js

@@ -0,0 +1,28 @@
+import { DesignItem } from '../../item/DesignItem';
+import { InsertAction } from "../undoService/transactionItems/InsertAction.js";
+export class DragDropService {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerView, event) {
+        if (event.dataTransfer.files[0].type.startsWith('image/')) {
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                const di = DesignItem.createDesignItemFromInstance(img, designerView.serviceContainer, designerView.instanceServiceContainer);
+                let grp = di.openGroup("Insert");
+                di.setStyle('position', 'absolute');
+                const targetRect = event.target.getBoundingClientRect();
+                di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');
+                di.setStyle('left', event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px');
+                designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
+                grp.commit();
+                requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+}

package/dist/elements/services/dragDropService/IDragDropService.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerView } from "../../widgets/designerView/IDesignerView.js";
+export interface IDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerView, event: DragEvent): any;
+}

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

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

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

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

@@ -0,0 +1,23 @@
+export class PrepareElementsForDesignerService {
+    prepareElementsForDesigner(designItem) {
+        this._prepareElementsForDesigner([designItem.element]);
+    }
+    _prepareElementsForDesigner(elements) {
+        for (let el of elements) {
+            if (el.shadowRoot) {
+                this._prepareElementsForDesigner((el.shadowRoot).querySelectorAll('*'));
+            }
+            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/placementService/ISnaplinesProviderService.d.ts

@@ -0,0 +1,11 @@
+import { IService } from "../IService";
+import { IDesignItem } from "../../item/IDesignItem";
+export interface ISnaplinesProviderService extends IService {
+    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
+        outerRect: DOMRect;
+        positionsH: [number, DOMRect][];
+        positionsMiddleH: [number, DOMRect][];
+        positionsV: [number, DOMRect][];
+        positionsMiddleV: [number, DOMRect][];
+    };
+}

package/dist/elements/services/placementService/ISnaplinesProviderService.js

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

package/dist/elements/services/placementService/SnaplinesProviderService.d.ts

@@ -0,0 +1,11 @@
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
+export declare class SnaplinesProviderService implements ISnaplinesProviderService {
+    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
+        outerRect: DOMRect;
+        positionsH: [number, DOMRect][];
+        positionsMiddleH: [number, DOMRect][];
+        positionsV: [number, DOMRect][];
+        positionsMiddleV: [number, DOMRect][];
+    };
+}

package/dist/elements/services/placementService/SnaplinesProviderService.js

@@ -0,0 +1,36 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent';
+export class SnaplinesProviderService {
+    provideSnaplines(containerItem, ignoredItems) {
+        {
+            const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
+            const outerRect = containerItem.element.getBoundingClientRect();
+            const positionsH = [];
+            const positionsMiddleH = [];
+            const positionsV = [];
+            const positionsMiddleV = [];
+            let ignoreElements = ignoredItems.map(x => x.element);
+            for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
+                if (!ignMap.has(n)) {
+                    let p = n.getBoundingClientRect();
+                    let pLeft = p.x - outerRect.x;
+                    let pMidH = p.x - outerRect.x + p.width / 2;
+                    let pRight = p.x - outerRect.x + p.width;
+                    positionsH.push([pLeft, p]);
+                    positionsMiddleH.push([pMidH, p]);
+                    positionsH.push([pRight, p]);
+                    let pTop = p.y - outerRect.y;
+                    let pMidV = p.y - outerRect.y + p.height / 2;
+                    let pBottom = p.y - outerRect.y + p.height;
+                    positionsV.push([pTop, p]);
+                    positionsMiddleV.push([pMidV, p]);
+                    positionsV.push([pBottom, p]);
+                }
+            }
+            positionsH.sort((a, b) => a[0] - b[0]);
+            positionsMiddleH.sort((a, b) => a[0] - b[0]);
+            positionsV.sort((a, b) => a[0] - b[0]);
+            positionsMiddleV.sort((a, b) => a[0] - b[0]);
+            return { outerRect, positionsH, positionsMiddleH, positionsV, positionsMiddleV };
+        }
+    }
+}

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -13,6 +13,9 @@ export class InsertAction {
     }
     do() {
         this.designItem.insertChild(this.newItem, this.index);
+        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
+        if (prepService)
+            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
     }
     mergeWith(other) {
         return false;

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

@@ -20,6 +20,7 @@ export interface IDesignerView extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;

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

@@ -1,4 +1,3 @@
-import { DomHelper } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from "./extensions/OverlayLayer.js";
 const overlayLayer = OverlayLayer.Normal;
 export class Snaplines {
@@ -24,30 +23,12 @@ export class Snaplines {
     }
     calculateSnaplines(ignoredItems) {
         this.clearSnaplines();
-        let ignMap = new Map(ignoredItems.map(i => [i.element, i]));
-        this._outerRect = this._containerItem.element.getBoundingClientRect();
-        let ignoreElements = ignoredItems.map(x => x.element);
-        for (let n of DomHelper.getAllChildNodes(this._containerItem.element, false, ignoreElements)) {
-            if (!ignMap.has(n)) {
-                let p = n.getBoundingClientRect();
-                let pLeft = p.x - this._outerRect.x;
-                let pMidH = p.x - this._outerRect.x + p.width / 2;
-                let pRight = p.x - this._outerRect.x + p.width;
-                this._positionsH.push([pLeft, p]);
-                this._positionsMiddleH.push([pMidH, p]);
-                this._positionsH.push([pRight, p]);
-                let pTop = p.y - this._outerRect.y;
-                let pMidV = p.y - this._outerRect.y + p.height / 2;
-                let pBottom = p.y - this._outerRect.y + p.height;
-                this._positionsV.push([pTop, p]);
-                this._positionsMiddleV.push([pMidV, p]);
-                this._positionsV.push([pBottom, p]);
-            }
-        }
-        this._positionsH.sort((a, b) => a[0] - b[0]);
-        this._positionsMiddleH.sort((a, b) => a[0] - b[0]);
-        this._positionsV.sort((a, b) => a[0] - b[0]);
-        this._positionsMiddleV.sort((a, b) => a[0] - b[0]);
+        const providedSnaplines = this._containerItem.serviceContainer.snaplinesProviderService.provideSnaplines(this._containerItem, ignoredItems);
+        this._outerRect = providedSnaplines.outerRect;
+        this._positionsH = providedSnaplines.positionsH;
+        this._positionsMiddleH = providedSnaplines.positionsMiddleH;
+        this._positionsV = providedSnaplines.positionsV;
+        this._positionsMiddleV = providedSnaplines.positionsMiddleV;
     }
     //return the snapped position
     snapToPosition(position, size, moveDirection) {

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

@@ -25,6 +25,7 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     snapLines: Snaplines;
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
+    eatEvents: Element;
     private _zoomFactor;
     private _canvas;
     private _canvasContainer;
@@ -39,6 +40,7 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
+    private _onDblClickBound;
     constructor();
     get designerWidth(): string;
     set designerWidth(value: string);
@@ -60,14 +62,14 @@ export declare class DesignerView extends BaseCustomWebComponentLazyAppend imple
     parseHTML(html: string): Promise<void>;
     setDesignItems(designItems: IDesignItem[]): void;
     private _addDesignItems;
-    private _removeDraggableOnImages;
-    private _removeDraggableOnImagesInner;
     private _onDragEnter;
+    private _onDragLeave;
     private _onDragOver;
     private _onDrop;
     private _onWheel;
     private _onContextMenu;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    private _onDblClick;
     private onKeyUp;
     private onKeyDown;
     getDesignerMousepoint(event: MouseEvent, target: Element, startPoint?: IDesignerMousePoint): IDesignerMousePoint;