@node-projects/web-component-designer 0.1.11 → 0.1.13

package/dist/elements/helper/CssUnitConverter.js

@@ -23,7 +23,7 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
         'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
         'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
         '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
-        /* todo
+        /*TODO: container units
         //find parent with computed style where container-type is inline-size or size (regarding to query type)
         //use this size for calculation
         'cqw':

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

@@ -15,7 +15,7 @@ export declare function getElementDisplaytype(element: HTMLElement): ElementDisp
 export declare function isEmptyTextNode(node: Node): boolean;
 export declare function getActiveElement(): Element;
 export declare function getParentElementIncludingSlots(element: Element): Element;
-export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any, zoom: number): {
+export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any, zoom: number, cache?: Record<string | symbol, any>): {
     offsetLeft: number;
     offsetTop: number;
 };

package/dist/elements/helper/ElementHelper.js

@@ -55,25 +55,45 @@ export function getParentElementIncludingSlots(element) {
     }
     return element.parentElement;
 }
-export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom) {
+const windowOffsetsCacheKey = Symbol('windowOffsetsCacheKey');
+export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom, cache = {}) {
     let offsetLeft = 0;
     let offsetTop = 0;
+    let ch = cache[windowOffsetsCacheKey] ??= new Map();
+    let lst = [];
     while (element) {
+        let cachedObj = ch.get(element);
+        if (cachedObj) {
+            offsetLeft += cachedObj.offsetLeft;
+            offsetTop += cachedObj.offsetTop;
+            lst.forEach(x => { x.offsetLeft += cachedObj.offsetLeft; x.offsetTop += cachedObj.offsetTop; });
+            break;
+        }
         if (element instanceof SVGSVGElement) {
-            //todo - fix without transformation
+            //TODO: !huge Perf impact! - fix without transformation
             let t = element.style.transform;
             element.style.transform = '';
             const bcEl = element.getBoundingClientRect();
             const bcPar = element.parentElement.getBoundingClientRect();
             element.style.transform = t;
-            offsetLeft += (bcEl.left - bcPar.left) / zoom;
-            offsetTop += (bcEl.top - bcPar.top) / zoom;
+            const currLeft = (bcEl.left - bcPar.left) / zoom;
+            const currTop = (bcEl.top - bcPar.top) / zoom;
+            offsetLeft += currLeft;
+            offsetTop += currTop;
+            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
+            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             element = element.parentElement;
         }
         else if (element instanceof SVGGraphicsElement) {
             let bbox = element.getBBox();
             offsetLeft += bbox.x;
             offsetTop += bbox.y;
+            lst.forEach(x => { x.offsetLeft += bbox.x; x.offsetTop += bbox.y; });
+            const cacheEntry = { offsetLeft: bbox.x, offsetTop: bbox.y };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             element = element.ownerSVGElement;
         }
         else if (element instanceof HTMLBodyElement) {
@@ -83,6 +103,12 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             element = element.parentElement;
         }
         else {
+            const currLeft = element.offsetLeft;
+            const currTop = element.offsetTop;
+            lst.forEach(x => { x.offsetLeft += currLeft; x.offsetTop += currTop; });
+            const cacheEntry = { offsetLeft: currLeft, offsetTop: currTop };
+            lst.push(cacheEntry);
+            ch.set(element, cacheEntry);
             offsetLeft += element.offsetLeft;
             offsetTop += element.offsetTop;
             element = element.offsetParent;

package/dist/elements/helper/GridHelper.js

@@ -18,8 +18,7 @@ export function getElementGridInformation(element) {
     return { colSpan, rowSpan };
 }
 export function calculateGridInformation(designItem) {
-    //todo:
-    //same name should combine columns/rows
+    //TODO: same name should combine columns/rows
     let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
     let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(designItem.element, null, designItem.instanceServiceContainer.designerCanvas);
     const computedStyle = getComputedStyle(designItem.element);

package/dist/elements/helper/LayoutHelper.js

@@ -1,5 +1,5 @@
-//todo
-//this function should return the correct property to change a layout, for example left/right when left or right is used,
+//TODO:  this function should return the correct property to change a layout,
+// for example left/right when left or right is used,
 //maybe margin on grid? or transform??
 export function filterChildPlaceItems(items) {
     const filterdPlaceItems = [];

package/dist/elements/helper/NpmPackageLoader.js

@@ -119,7 +119,7 @@ export class NpmPackageLoader {
                 }
             }
             if (serviceContainer && paletteTree) {
-                //todo: should be retriggered by service container, or changeing list in container
+                //TODO: should be retriggered by service container, or changeing list in container
                 paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
             }
             /* Package Hacks */
@@ -230,7 +230,7 @@ export class NpmPackageLoader {
         const map = importShim.getImportMap().imports;
         const importMap = { imports: {}, scopes: {} };
         if (!map.hasOwnProperty(packageJsonObj.name)) {
-            //todo - use exports of package.json for importMap
+            //TODO: use exports of package.json for importMap
             if (packageJsonObj.exports) {
                 /* "exports": {
                 ".": {

package/dist/elements/helper/SwitchContainerHelper.js

@@ -1,7 +1,6 @@
 export function switchContainer(items, newContainer, resizeNewContainer = false, newContainerOffset = 0) {
-    //todo...
-    //- switch to other containers? like grid, flexbox, ...
-    //- position non absolute, or absolute from bottom or right
+    //TODO: switch to other containers like grid, flexbox, ...
+    //TODO: position non absolute, or absolute from bottom or right
     for (let i of items) {
         if (i == newContainer || i.element.contains(newContainer.element)) {
             console.warn('could not move items into of itself or a child');

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

@@ -10,14 +10,14 @@ export declare function cssMatrixToMatrixArray(cssMatrix: string): number[];
 export declare function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DOMMatrix): any;
 export declare function addVectors(vectorA: [number, number], vectorB: [number, number]): [number, number];
 export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
-export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
-export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean, cache?: Record<string | symbol, any>): DOMMatrix;
+export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): IPoint;
 export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
 export declare function getElementSize(element: HTMLElement): {
     width: number;
     height: number;
 };
-export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
 export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;

package/dist/elements/helper/TransformHelper.js

@@ -102,18 +102,33 @@ export function addVectors(vectorA, vectorB) {
     return [vectorA[0] + vectorB[0], vectorA[1] + vectorB[1]];
 }
 export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element, designerCanvas) {
-    const top0 = new DOMPointReadOnly(-parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]), 0, 0);
+    const toSplit = getComputedStyle(element).transformOrigin.split(' ');
+    const tfX = parseFloat(toSplit[0]);
+    const tfY = parseFloat(toSplit[1]);
+    const top0 = new DOMPointReadOnly(-tfX, -tfY, 0, 0);
     const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor);
     const transformOriginAbsolutRelatedToWindowWithoutAnyTransformation = new DOMPoint(p0Offsets.offsetLeft - top0.x, p0Offsets.offsetTop - top0.y);
     const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
     return designerCanvasNormalizedTransformedOrigin;
 }
-export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor) {
+const elemntMatrixCacheKey = Symbol('windowOffsetsCacheKey');
+export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor, cache = {}) {
+    let ch = cache[elemntMatrixCacheKey] ??= new Map();
+    let lst = [];
     let actualElement = element;
     let actualElementMatrix;
     let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor) {
+        let cachedObj = ch.get(actualElement);
+        if (cachedObj) {
+            if (originalElementAndAllParentsMultipliedMatrix)
+                originalElementAndAllParentsMultipliedMatrix = cachedObj[0].multiply(originalElementAndAllParentsMultipliedMatrix);
+            else
+                originalElementAndAllParentsMultipliedMatrix = cachedObj[0];
+            lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
+            break;
+        }
         const newElement = getParentElementIncludingSlots(actualElement);
         actualElementMatrix = getElementCombinedTransform(actualElement);
         newElementMatrix = getElementCombinedTransform(newElement);
@@ -124,21 +139,30 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
         else if (newElement != ancestor || !excludeAncestor) {
             originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
         }
+        lst.forEach(x => x[0] = x[0].multiply(originalElementAndAllParentsMultipliedMatrix));
+        const cacheEntry = [originalElementAndAllParentsMultipliedMatrix];
+        lst.push(cacheEntry);
+        ch.set(actualElement, cacheEntry);
         actualElement = newElement;
     }
     return originalElementAndAllParentsMultipliedMatrix;
 }
-export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas) {
+export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas, cache) {
     const canvas = element.closest('#node-projects-designer-canvas-canvas');
     let actualElement = element;
     let parentElementTransformOriginToPointVectorTransformed;
     let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
-        const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
+        const elementWindowOffset = getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor, cache);
+        const toSplit = getComputedStyle(parentElement).transformOrigin.split(' ');
+        const tfX = parseFloat(toSplit[0]);
+        const tfY = parseFloat(toSplit[1]);
+        const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + tfX, elementWindowOffset.offsetTop - designerCanvas.outerRect.y + tfY);
         if (actualElement == element) {
-            parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
-            parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+            const mtx = extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform));
+            parentElementTransformOrigin.x -= mtx.x;
+            parentElementTransformOrigin.y -= mtx.y;
         }
         const parentElementTransformOriginToPointVector = new DOMPointReadOnly(-parentElementTransformOrigin.x + (element == actualElement ? point.x : byParentTransformedPointRelatedToCanvas.x), -parentElementTransformOrigin.y + (element == actualElement ? point.y : byParentTransformedPointRelatedToCanvas.y));
         parentElementTransformOriginToPointVectorTransformed = parentElementTransformOriginToPointVector.matrixTransform(new DOMMatrix(getComputedStyle(parentElement).transform));
@@ -164,13 +188,13 @@ export function getElementSize(element) {
     }
     return { width, height };
 }
-export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
+export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas, cache) {
     const topleft = 0;
     const topright = 1;
     const bottomleft = 2;
     const bottomright = 3;
     const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
-    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor);
+    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor, cache);
     const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
         x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
         y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
@@ -193,18 +217,21 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
         x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
         y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
+    const toSplit = getComputedStyle(element).transformOrigin.split(' ');
+    const tfX = parseFloat(toSplit[0]);
+    const tfY = parseFloat(toSplit[1]);
     const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]),
-        y: p0OffsetsRelatedToCanvas.y + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]),
+        x: p0OffsetsRelatedToCanvas.x + tfX,
+        y: p0OffsetsRelatedToCanvas.y + tfY,
         z: 0,
         w: 0
     });
-    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).offsetTop - designerCanvas.outerRect.top + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
+    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(p0Offsets.offsetLeft - designerCanvas.outerRect.left + tfX, p0Offsets.offsetTop - designerCanvas.outerRect.top + tfY), designerCanvas, cache);
     let top0 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topleft].y));
     let top1 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topright].y));
     let top2 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomleft].y));
     let top3 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomright].y));
-    let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(element, designerCanvas.canvas, true);
+    let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(element, designerCanvas.canvas, true, cache);
     let top0Transformed = top0.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
     let top1Transformed = top1.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
     let top2Transformed = top2.matrixTransform(originalElementAndAllParentsMultipliedMatrix);

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

@@ -15,6 +15,7 @@ export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
     node: Node;
+    view: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
@@ -73,6 +74,7 @@ export declare class DesignItem implements IDesignItem {
     static createDesignItemFromInstance(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): DesignItem;
     updateChildrenFromNodesChildren(): void;
     constructor(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer);
+    setView(node: Element): void;
     openGroup(title: string): ChangeGroup;
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
@@ -88,7 +90,7 @@ export declare class DesignItem implements IDesignItem {
     getAllStyles(): IStyleRule[];
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
-    _insertChildInternal(designItem: IDesignItem, index?: number): void;
+    _insertChildInternal(designItem: DesignItem, index?: number): void;
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;

package/dist/elements/item/DesignItem.js

@@ -18,6 +18,7 @@ export class DesignItem {
     lastContainerSize;
     parsedNode;
     node;
+    view;
     serviceContainer;
     instanceServiceContainer;
     appliedDesignerExtensions = new Map();
@@ -133,10 +134,10 @@ export class DesignItem {
     }
     static _designItemMap = new WeakMap();
     get element() {
-        return this.node;
+        return this.view;
     }
     get name() {
-        return this.element.localName;
+        return this.node.localName;
     }
     get id() {
         return this.element.id;
@@ -320,6 +321,7 @@ export class DesignItem {
     }
     constructor(node, parsedNode, serviceContainer, instanceServiceContainer) {
         this.node = node;
+        this.view = node;
         this.parsedNode = parsedNode;
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = instanceServiceContainer;
@@ -327,6 +329,10 @@ export class DesignItem {
         this._styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
+    setView(node) {
+        this.view = node;
+        DesignItem._designItemMap.set(node, this);
+    }
     openGroup(title) {
         return this.instanceServiceContainer.undoService.openGroup(title);
     }
@@ -451,15 +457,15 @@ export class DesignItem {
         }
         if (index == null || this._childArray.length == 0 || index >= this._childArray.length) {
             this._childArray.push(designItem);
-            this.element.appendChild(designItem.node);
+            this.view.appendChild(designItem.view);
         }
         else {
             let el = this._childArray[index];
-            this.node.insertBefore(designItem.node, el.element);
+            this.view.insertBefore(designItem.view, el.element);
             this._childArray.splice(index, 0, designItem);
         }
         designItem._parent = this;
-        //todo: is this still needed???
+        //TODO: is this still needed???
         if (this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
             if (designItem.getPlacementService().isEnterableContainer(this))
@@ -486,7 +492,7 @@ export class DesignItem {
             //Update Stylesheetservice with sheet info
             //Patch this sheetdata
             const realContent = this._childArray.reduce((a, b) => a + b.content, '');
-            this.node.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
+            this.view.textContent = AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(realContent)]);
             this.instanceServiceContainer.designerCanvas.lazyTriggerReparseDocumentStylesheets();
         }
         else if (this.name == 'link') {

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

@@ -11,6 +11,7 @@ import { IPlacementService } from '../services/placementService/IPlacementServic
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export interface IDesignItem {
     lastContainerSize: ISize;
+    setView(node: Element): any;
     replaceNode(newNode: Node): any;
     nodeReplaced: TypedEvent<void>;
     clone(): Promise<IDesignItem>;

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

@@ -8,6 +8,7 @@ export declare class BaseServiceContainer<NameMap> {
     getLastService<K extends keyof NameMap>(service: K): NameMap[K];
     getServices<K extends keyof NameMap>(service: K): NameMap[K][];
     register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerLast<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
     registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
     forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
     getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];

package/dist/elements/services/BaseServiceContainer.js

@@ -17,6 +17,12 @@ export class BaseServiceContainer {
         this._services.get(name).push(service);
         this.servicesChanged.emit({ serviceName: name });
     }
+    registerLast(name, service) {
+        if (!this._services.has(name))
+            this._services.set(name, []);
+        this._services.get(name).unshift(service);
+        this.servicesChanged.emit({ serviceName: name });
+    }
     registerMultiple(names, service) {
         for (const name of names) {
             if (!this._services.has(name))

package/dist/elements/services/bindingsService/SpecialTagsBindingService.js

@@ -1,6 +1,6 @@
 import { BindingTarget } from "../../item/BindingTarget.js";
 import { BindingMode } from "../../item/BindingMode.js";
-/* Service wich read binings from special HTMl elements -> like tag-binding */
+/* Service wich read bindings from special HTML elements -> like tag-binding */
 //TODO: refactor so we could use it
 export class SpecialTagsBindingService {
     static type = 'visu-tagbinding-binding';

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

@@ -72,7 +72,7 @@ export class DragDropService {
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {
-                    //TODO: Maybe the check for SVG Elemnt should be in "canEnterByDrop"?
+                    //TODO: Maybe the check for SVG Element should be in "canEnterByDrop"?
                     if (newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
                         break;
                     }

package/dist/elements/services/elementsService/IElementDefinition.d.ts

@@ -16,12 +16,6 @@ export interface IElementDefinition {
     defaultWidth?: string;
     defaultHeight?: string;
     ghostElement?: Element;
-    /**
-     * every component normal get's the property '_inNodeProjectsDesignerView' set. if it should not be the case on this component set this to true
-     * a component could have special logic when this is true
-     * TODO: maybe remove this, if someone needs such a function, he could use it's own instance provider...
-     */
-    doNotSetInNodeProjectsDesignerViewOnInstance?: boolean;
     /**
      * Name of the Tool activated when selecting the element.
      * If none, the DrawElementTool is used

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -30,7 +30,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
             this.internalWrite(indentedTextWriter, d, updatePositions);
         }
     }
-    //todo special case for style/script nodes, keep whitespace
+    //TODO: special case for style/script nodes, keep whitespace
     internalWrite(indentedTextWriter, designItem, updatePositions) {
         let start = indentedTextWriter.position;
         let end = indentedTextWriter.position;

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

@@ -46,8 +46,7 @@ export class DefaultInstanceService {
         }
         const elementString = '<' + definition.tag + attr + '></' + definition.tag + '>';
         const element = newElementFromString(elementString);
-        if (!definition.doNotSetInNodeProjectsDesignerViewOnInstance)
-            element._inNodeProjectsDesignerView = true;
+        element._inNodeProjectsDesignerView = true;
         if (definition.defaultWidth)
             element.style.width = definition.defaultWidth;
         if (definition.defaultHeight)

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

@@ -20,7 +20,7 @@ export class DefaultPlacementService {
     canEnter(container, items) {
         if (!this.isEnterableContainer(container))
             return false;
-        if (!items.every(x => !x.element.contains(container.element)))
+        if (!items.every(x => !x.element.contains(container.element) && x !== container))
             return false;
         return true;
     }
@@ -86,7 +86,7 @@ export class DefaultPlacementService {
     startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        //TODO:, this should revert all undo actions while active
+        //TODO: this should revert all undo actions while active
         //maybe a undo actions returns itself or an id so it could be changed?
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         if (event.shiftKey) {

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js

@@ -1,7 +1,7 @@
 import { BasePropertyEditor } from '../BasePropertyEditor.js';
 import { getElementGridInformation } from '../../../../helper/GridHelper.js';
 export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
-    //Todo: multiple cell selection, grid area support, span support
+    //TODO: multiple cell selection, grid area support, span support
     _root;
     constructor(property) {
         super(property);

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js

@@ -1,7 +1,7 @@
 import { BasePropertyEditor } from '../BasePropertyEditor.js';
 import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
 export class MetricsPropertyEditor extends BasePropertyEditor {
-    //Todo: metrics editor does not work at all yet
+    //TODO: metrics editor does not work at all yet
     constructor(property) {
         super(property);
         const selector = new MetricsEditor();

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
 import { IProperty } from '../IProperty.js';
 import { IDesignItem } from '../../../item/IDesignItem.js';
@@ -7,8 +6,10 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { IBinding } from '../../../item/IBinding.js';
 import { IPropertyGroup } from '../IPropertyGroup.js';
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
-    _stylesCache: Map<IDesignItem, Set<string>>;
-    _cacheClearTimer: NodeJS.Timeout;
+    private static _stylesCache;
+    private _cssCacheClearTimer;
+    private static _bindingsCache;
+    private _bindingsCacheClearTimer;
     abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
     abstract isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js

@@ -4,8 +4,10 @@ import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType.js';
 import { NodeType } from '../../../item/NodeType.js';
 export class AbstractPropertiesService {
-    _stylesCache = new Map;
-    _cacheClearTimer;
+    static _stylesCache = new Map;
+    _cssCacheClearTimer;
+    static _bindingsCache = new Map;
+    _bindingsCacheClearTimer;
     _notifyChangedProperty(designItem, property, value) {
     }
     getProperty(designItem, name) {
@@ -104,10 +106,13 @@ export class AbstractPropertiesService {
                     break;
             }
             ;
-            //todo: optimize perf, do not call bindings service for each property. 
-            const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
-                return s.getBindings(designItems[0]);
-            });
+            let bindings = AbstractPropertiesService._bindingsCache.get(designItems[0]);
+            if (!bindings) {
+                bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => s.getBindings(designItems[0]));
+                AbstractPropertiesService._bindingsCache.set(designItems[0], bindings);
+                clearTimeout(this._bindingsCacheClearTimer);
+                this._bindingsCacheClearTimer = setTimeout(() => AbstractPropertiesService._bindingsCache.clear(), 30);
+            }
             if (property.propertyType == PropertyType.cssValue) {
                 if (bindings && bindings.find(x => x.target == BindingTarget.css && x.targetName == property.name))
                     return ValueType.bound;
@@ -117,12 +122,12 @@ export class AbstractPropertiesService {
                     return ValueType.bound;
             }
             if (!all && property.propertyType == PropertyType.cssValue) {
-                let styles = this._stylesCache.get(designItems[0]);
+                let styles = AbstractPropertiesService._stylesCache.get(designItems[0]);
                 if (!styles) {
                     styles = new Set(designItems[0].getAllStyles().filter(x => x.selector != null).flatMap(x => x.declarations).map(x => x.name));
-                    this._stylesCache.set(designItems[0], styles);
-                    clearTimeout(this._cacheClearTimer);
-                    this._cacheClearTimer = setTimeout(() => this._stylesCache.clear(), 30);
+                    AbstractPropertiesService._stylesCache.set(designItems[0], styles);
+                    clearTimeout(this._cssCacheClearTimer);
+                    this._cssCacheClearTimer = setTimeout(() => AbstractPropertiesService._stylesCache.clear(), 30);
                 }
                 let cssValue = styles.has(property.name);
                 if (cssValue)

package/dist/elements/services/propertiesService/services/AttributesPropertiesService.js

@@ -56,7 +56,7 @@ export class AttributesPropertiesService {
                 all = all && has;
                 some = some || has;
             });
-            //todo: optimize perf, do not call bindings service for each property. 
+            //TODO: optimize perf, do not call bindings service for each property. 
             const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                 return s.getBindings(designItems[0]);
             });

package/dist/elements/services/propertiesService/services/ContentAndIdPropertiesService.js

@@ -64,7 +64,7 @@ export class ContentAndIdPropertiesService extends AbstractPropertiesService {
                     all = all && has;
                     some = some || has;
                 });
-                //todo: optimize perf, do not call bindings service for each property. 
+                //TODO: optimize perf, do not call bindings service for each property. 
                 const bindings = designItems[0].serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                     return s.getBindings(designItems[0]);
                 });

package/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -44,7 +44,7 @@ export class CssCurrentPropertiesService extends CommonPropertiesService {
         // No selector means local style, styleDeclaration is null means new property
         if (property.styleRule?.selector !== null && property.styleDeclaration) {
             // styleDeclaration stored Propertygrid is not refreshed after entering a new value, so we need to reload
-            // TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
+            //TODO: we do not respect if a same style is found in a media query or another @rule, maybe we need a refresh in the stylesheet parser
             const decls = designItems[0].instanceServiceContainer.stylesheetService?.getDeclarations(designItems[0], property.styleDeclaration.name);
             const currentDecl = decls.find(x => x.parent.selector == property.styleDeclaration.parent.selector && x.parent.stylesheetName == property.styleDeclaration.parent.stylesheetName);
             designItems[0].instanceServiceContainer.stylesheetService.updateDeclarationValue(currentDecl, value, false);

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -178,6 +178,13 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
             case 'br':
             case 'img':
             case 'iframe':
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
                 return true;
         }
         return false;
@@ -205,6 +212,14 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
                 return this.imgProperties;
             case 'iframe':
                 return this.iframeProperties;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'p':
+                return [];
         }
         return null;
     }