@node-projects/web-component-designer 0.1.12 → 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.js

@@ -59,7 +59,7 @@ const windowOffsetsCacheKey = Symbol('windowOffsetsCacheKey');
 export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element, zoom, cache = {}) {
     let offsetLeft = 0;
     let offsetTop = 0;
-    let ch = cache[windowOffsetsCacheKey] = cache[windowOffsetsCacheKey] ?? new Map();
+    let ch = cache[windowOffsetsCacheKey] ??= new Map();
     let lst = [];
     while (element) {
         let cachedObj = ch.get(element);

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,7 +10,7 @@ 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 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): {

package/dist/elements/helper/TransformHelper.js

@@ -102,19 +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) {
-    //TODO: introduce cache and optimize
+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);
@@ -125,6 +139,10 @@ 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;
@@ -137,10 +155,14 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
         const elementWindowOffset = getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor, cache);
-        const parentElementTransformOrigin = new DOMPoint(elementWindowOffset.offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), elementWindowOffset.offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
+        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));
@@ -195,8 +217,9 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
         x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
         y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
-    const tfX = parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]);
-    const tfY = parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]);
+    const toSplit = getComputedStyle(element).transformOrigin.split(' ');
+    const tfX = parseFloat(toSplit[0]);
+    const tfY = parseFloat(toSplit[1]);
     const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
         x: p0OffsetsRelatedToCanvas.x + tfX,
         y: p0OffsetsRelatedToCanvas.y + tfY,
@@ -208,7 +231,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     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.js

@@ -465,7 +465,7 @@ export class DesignItem {
             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))

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

@@ -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/stylesheetService/AbstractStylesheetService.js

@@ -60,7 +60,7 @@ export class AbstractStylesheetService {
             this._allStylesheets.set(s[0], s[1]);
         }
     }
-    //todo: rename to externalStylesheets
+    //TODO: rename to externalStylesheets
     getStylesheets() {
         let stylesheets = [];
         for (let item of this._stylesheets) {

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

@@ -35,7 +35,7 @@ export class DomConverter {
     }
     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...
+        //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/designerCanvas.js

@@ -945,7 +945,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
-    //todo: remove
+    //TODO: remove
     elementFromPoint(x, y) {
         let elements = this.shadowRoot.elementsFromPoint(x, y);
         let element = elements[0];

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -23,7 +23,7 @@ export class EditTextExtension extends AbstractExtension {
         this._focusBound = this._focus.bind(this);
     }
     extend() {
-        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
         //maybe use a html edit framework
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
@@ -66,14 +66,14 @@ export class EditTextExtension extends AbstractExtension {
         return p.indexOf(stylo) >= 0;
     }
     _contentEdited() {
-        //todo -> save???
+        //TODO: -> save???
         //this.extendedItem.content = this.extendedItem.element.innerHTML;
         //console.log(this.extendedItem.element.innerHTML)
     }
     _blur() {
         if (!this._blurTimeout) {
             this._blurTimeout = setTimeout(() => {
-                //todo, don't remove doubleclick extension (another type could be used), remove extension itself
+                //TODO: don't remove doubleclick extension (another type could be used), remove extension itself
                 //maybe also configureable when when to remove the extension
                 this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
             }, 150);

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -256,8 +256,10 @@ export class ExtensionManager {
                                     e.refresh(cache, event);
                                 if (timeout) {
                                     const end = performance.now();
-                                    if (end - start > timeout)
+                                    if (end - start > timeout) {
+                                        console.warn("refreshExtensions() took too long, stopped refreshing");
                                         break outer1;
+                                    }
                                 }
                             }
                             catch (err) {
@@ -277,8 +279,10 @@ export class ExtensionManager {
                                     e.refresh(cache, event);
                                     if (timeout) {
                                         const end = performance.now();
-                                        if (end - start > timeout)
+                                        if (end - start > timeout) {
+                                            console.warn("refreshExtensions() took too long, stopped refreshing");
                                             break outer2;
+                                        }
                                     }
                                 }
                             }
@@ -314,7 +318,7 @@ export class ExtensionManager {
     refreshAllAppliedExtentions() {
         this.refreshAllExtensions([...this.designItemsWithExtentions]);
     }
-    //todo does not work with permanant, when not applied... maybe we need to do in another way
+    //TODO: does not work with permanant, when not applied... maybe we need to do in another way
     //maybe store the "shouldAppliedExtensions??"
     reapplyAllAppliedExtentions() {
         this.designerCanvas.overlayLayer.startBatch();

package/dist/elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js

@@ -1,8 +1,5 @@
 import { AbstractExtensionBase } from '../AbstractExtensionBase.js';
-//todo:
-//move draw functions to overlay layer
-//implement designerpointerextension
-//create ruler
+//TODO: move draw functions to overlay layer, implement designerpointerextension, create ruler
 export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerCanvas) {

package/dist/elements/widgets/designerView/tools/TextTool.js

@@ -28,7 +28,7 @@ export class TextTool {
                     di.setStyle('left', currentPoint.x + 'px');
                     di.setStyle('top', currentPoint.y + 'px');
                     designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                    //todo: Maybe we could also remove the eatEvents property
+                    //TODO: Maybe we could also remove the eatEvents property
                     //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
                     //should we configure the editTextExtension anywhere??
                     this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick, event);

package/dist/elements/widgets/treeView/treeView.js

@@ -10,7 +10,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     _contentChangedHandler;
     _mapElementTreeitem;
     _rootItem;
-    //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
+    //TODO: buton so key events can be transfered to designerCanvas (so you can move controls with keys)
     static style = css `
     :host {
       --horz-margin: 20px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",