@node-projects/web-component-designer 0.0.93 → 0.0.94

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js

@@ -0,0 +1,12 @@
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class RotateLeftAndRight {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'rotate right', action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
+            { title: 'rotate left', action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
+        ];
+    }
+}

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

@@ -23,6 +23,7 @@ export class DrawEllipsisTool {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
                 this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                 this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
@@ -67,7 +68,7 @@ export class DrawEllipsisTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -21,6 +21,7 @@ export class DrawLineTool {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "line");
                 // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 // this._path.setAttribute("d", this._pathD);
@@ -50,7 +51,7 @@ export class DrawLineTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -28,6 +28,7 @@ export class DrawPathTool {
                 this._eventStarted = true;
                 if (!this._p2pMode) {
                     event.target.setPointerCapture(event.pointerId);
+                    designerCanvas.captureActiveTool(this);
                     this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                     this._path.setAttribute("d", this._pathD);
@@ -69,8 +70,6 @@ export class DrawPathTool {
                 }
                 break;
             case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
                 if (this._eventStarted && !this._pointerMoved) {
                     this._p2pMode = true;
                 }
@@ -90,6 +89,8 @@ export class DrawPathTool {
                     }
                 }
                 if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
+                    event.target.releasePointerCapture(event.pointerId);
+                    designerCanvas.releaseActiveTool();
                     this._eventStarted = false;
                     this._p2pMode = false;
                     this._pointerMoved = false;
@@ -120,6 +121,8 @@ export class DrawPathTool {
                 //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
                 break;
         }
+        event.preventDefault();
+        event.stopPropagation();
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -26,6 +26,7 @@ export class DrawRectTool {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                 this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
@@ -82,7 +83,7 @@ export class DrawRectTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -10,6 +10,7 @@ export class MagicWandSelectorTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._path.setAttribute('class', 'svg-selector');
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
@@ -24,7 +25,7 @@ export class MagicWandSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();

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

@@ -5,6 +5,7 @@ export class PanTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 break;
             case EventNames.PointerMove:
                 if (event.buttons == 1) {
@@ -13,7 +14,7 @@ export class PanTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 break;
         }
     }

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

@@ -8,7 +8,6 @@ export declare class PointerTool implements ITool {
     private _actionType?;
     private _actionStartedDesignItem?;
     private _previousEventName;
-    private _clickThroughElements;
     private _dragOverExtensionItem;
     private _dragExtensionItem;
     private _moveItemsOffset;
@@ -18,8 +17,8 @@ export declare class PointerTool implements ITool {
     dispose(): void;
     private _showContextMenu;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _resetTool;
     private _pointerActionTypeDrawSelection;
-    private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -3,7 +3,6 @@ import { PointerActionType } from "../../../../enums/PointerActionType";
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from "../extensions/ExtensionType";
 import { NamedTools } from './NamedTools';
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 export class PointerTool {
     cursor = 'default';
     _movedSinceStartedAction = false;
@@ -11,7 +10,6 @@ export class PointerTool {
     _actionType;
     _actionStartedDesignItem;
     _previousEventName;
-    _clickThroughElements = [];
     _dragOverExtensionItem;
     _dragExtensionItem;
     _moveItemsOffset = { x: 0, y: 0 };
@@ -25,16 +23,18 @@ export class PointerTool {
     _showContextMenu(event, designerCanvas) {
         event.preventDefault();
         if (!event.shiftKey) {
-            let items = designerCanvas.getItemsBelowMouse(event);
-            if (items.indexOf(designerCanvas.instanceServiceContainer.selectionService.primarySelection?.element) >= 0)
-                designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
-            else {
-                const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            let items = designerCanvas.elementsFromPoint(event.x, event.y);
+            for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                if (items.indexOf(e.element) >= 0) {
+                    designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
+                    return;
                 }
-                designerCanvas.showDesignItemContextMenu(designItem, event);
             }
+            const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+            if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            }
+            designerCanvas.showDesignItemContextMenu(designItem, event);
         }
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
@@ -52,15 +52,14 @@ export class PointerTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._movedSinceStartedAction = false;
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 break;
         }
-        if (!event.altKey)
-            this._resetPointerEventsForClickThrough();
         if (!currentElement)
             return;
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
@@ -100,39 +99,38 @@ export class PointerTool {
                 if (currentDesignItem !== designerCanvas.rootDesignItem)
                     designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
             }
-            this._actionType = null;
-            this._actionStartedDesignItem = null;
-            this._movedSinceStartedAction = false;
-            this._initialPoint = null;
+            this._resetTool();
         }
         this._previousEventName = event.type;
     }
+    _resetTool() {
+        this._actionType = null;
+        this._actionStartedDesignItem = null;
+        this._movedSinceStartedAction = false;
+        this._initialPoint = null;
+    }
     _pointerActionTypeDrawSelection(designerView, event, currentElement) {
         const drawSelectionTool = designerView.serviceContainer.designerTools.get(NamedTools.DrawSelection);
         if (drawSelectionTool) {
+            this._resetTool();
             drawSelectionTool.pointerEventHandler(designerView, event, currentElement);
         }
     }
-    _resetPointerEventsForClickThrough() {
-        if (!this._clickThroughElements.length)
-            return;
-        for (const e of this._clickThroughElements) {
-            e[0].element.style.pointerEvents = e[1];
-        }
-        this._clickThroughElements = [];
-    }
     _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
         if (event.altKey) {
             if (event.type == EventNames.PointerDown) {
-                this._clickThroughElements.push([currentDesignItem, currentDesignItem.element.style.pointerEvents]);
-                currentDesignItem.element.style.pointerEvents = 'none';
+                const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+                if (currentSelection) {
+                    const elements = designerCanvas.elementsFromPoint(event.x, event.y);
+                    let idx = elements.indexOf(currentSelection.element);
+                    if (idx >= 0) {
+                        idx++;
+                    }
+                    let currentElement = elements[idx];
+                    if (currentElement)
+                        currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                }
             }
-            let currentElement = designerCanvas.elementFromPoint(event.x, event.y);
-            if (DomHelper.getHost(currentElement) !== designerCanvas.overlayLayer)
-                currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-        }
-        else {
-            this._resetPointerEventsForClickThrough();
         }
         switch (event.type) {
             case EventNames.PointerDown:
@@ -183,103 +181,41 @@ export class PointerTool {
                             let newContainerElementDesignItem = null;
                             let newContainerService = null;
                             if (canLeave) {
-                                //search for containers below mouse cursor.
-                                //to do this, we need to disable pointer events for each in a loop and search wich element is there
-                                let backupPEventsMap = new Map();
-                                let newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                try {
-                                    checkAgain: while (newContainerElement != null) {
-                                        if (newContainerElement == this._actionStartedDesignItem.parent.element) {
-                                            newContainerElement = null;
-                                        }
-                                        else if (newContainerElement == designerCanvas.rootDesignItem.element) {
-                                            newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                            break;
-                                        }
-                                        else if (newContainerElement.getRootNode() !== designerCanvas.shadowRoot || newContainerElement === designerCanvas.overlayLayer || newContainerElement.parentElement === designerCanvas.overlayLayer) {
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const old = newContainerElement;
-                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (old === newContainerElement) {
-                                                newContainerElementDesignItem = null;
-                                                newContainerService = null;
+                                const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+                                for (let e of elementsFromPoint) {
+                                    if (e == this._actionStartedDesignItem.element) {
+                                        continue;
+                                    }
+                                    else if (e == this._actionStartedDesignItem.parent.element) {
+                                        break;
+                                    }
+                                    else if (e == designerCanvas.rootDesignItem.element) {
+                                        newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                                        break;
+                                    }
+                                    else if (false) {
+                                        //check we don't try to move a item over one of its children..
+                                    }
+                                    else {
+                                        newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                                        if (newContainerService) {
+                                            if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
                                                 break;
                                             }
-                                        }
-                                        else if (newContainerElement == this._actionStartedDesignItem.element || newContainerElement == currentDesignItem.element) {
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const old = newContainerElement;
-                                            newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (old === newContainerElement) {
+                                            else {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
-                                                newContainerElement = null;
-                                                break;
+                                                continue;
                                             }
                                         }
-                                        else {
-                                            //check we don't try to move a item over one of its children...
-                                            let par = newContainerElement.parentElement;
-                                            while (par) {
-                                                if (par == this._actionStartedDesignItem.element) {
-                                                    backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                                    newContainerElement.style.pointerEvents = 'none';
-                                                    const old = newContainerElement;
-                                                    newContainerElement = designerCanvas.elementFromPoint(event.x, event.y);
-                                                    if (old === newContainerElement)
-                                                        break;
-                                                    continue checkAgain;
-                                                }
-                                                par = par.parentElement;
-                                            }
-                                            //end check
-                                            newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                            const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                            newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                            if (newContainerService) {
-                                                if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
-                                                    break;
-                                                }
-                                                else {
-                                                    newContainerElementDesignItem = null;
-                                                    newContainerService = null;
-                                                }
-                                            }
-                                            backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
-                                            newContainerElement.style.pointerEvents = 'none';
-                                            const newC = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (newContainerElement === newC) {
-                                                newContainerElement = null;
-                                                break;
-                                            }
-                                            newContainerElement = newC;
-                                        }
-                                    }
-                                }
-                                finally {
-                                    for (let e of backupPEventsMap.entries()) {
-                                        e[0].style.pointerEvents = e[1];
-                                    }
-                                }
-                                if (newContainerElement != null) { //Check if container is in designer canvas....
-                                    let p = newContainerElement;
-                                    while (p != null) {
-                                        if (p === designerCanvas.rootDesignItem.element)
-                                            break;
-                                        p = p.parentElement;
-                                    }
-                                    if (p == null) {
-                                        newContainerService = null;
-                                        newContainerElement = null;
                                     }
                                 }
                                 //if we found a new enterable container create extensions 
-                                if (newContainerElement != null) {
-                                    const newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(newContainerElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                                if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
                                         designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
                                         designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
@@ -320,7 +256,7 @@ export class PointerTool {
                 {
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
                         return;
                     }
                     if (this._movedSinceStartedAction) {

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

@@ -12,6 +12,7 @@ export class RectangleSelectorTool {
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._initialPoint = currentPoint;
                 if (!this._rect)
                     this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -46,7 +47,7 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();

package/dist/elements/widgets/miniatureView/html-2-canvas-miniature-view.js

@@ -7,6 +7,7 @@ export class Html2CanvasMiniatureView extends BaseCustomWebComponentLazyAppend {
     _imgdiv;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._imgdiv = this._getDomElement('imgdiv');
     }
     reRender(designerView) {

package/dist/elements/widgets/paletteView/paletteTreeView.d.ts

@@ -8,6 +8,5 @@ export declare class PaletteTreeView extends BaseCustomWebComponentConstructorAp
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
-    ready(): Promise<void>;
     loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
 }

package/dist/elements/widgets/paletteView/paletteTreeView.js

@@ -55,6 +55,7 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         //@ts-ignore
         import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
@@ -65,8 +66,6 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             });
         };
         this._treeDiv = this._getDomElement('treetable');
-    }
-    async ready() {
         $(this._treeDiv).fancytree({
             icon: true,
             extensions: ['childcounter', 'dnd5', 'filter'],

package/dist/elements/widgets/paletteView/paletteView.js

@@ -14,6 +14,7 @@ export class PaletteView extends BaseCustomWebComponentLazyAppend {
     }`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._designerTabControl = new DesignerTabControl();
         this._designerTabControl.selectedIndex = 0;
         this.shadowRoot.appendChild(this._designerTabControl);

package/dist/elements/widgets/propertyGrid/PropertyGrid.js

@@ -28,6 +28,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._designerTabControl = new DesignerTabControl();
         this.shadowRoot.appendChild(this._designerTabControl);
         this.addEventListener('contextmenu', (e) => {

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -78,6 +78,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     constructor(serviceContainer) {
         super();
+        this._restoreCachedInititalValues();
         this._serviceContainer = serviceContainer;
         this._div = document.createElement("div");
         this._div.className = "content-wrapper";

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -53,6 +53,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     _instanceServiceContainer;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._type = this._getDomElement('type');
         this._id = this._getDomElement('id');
         this._pg = this._getDomElement('pg');

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

@@ -108,6 +108,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._treeDiv = document.createElement('div');
         this._treeDiv.style.userSelect = 'none';
         this.shadowRoot.appendChild(this._treeDiv);

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

@@ -94,6 +94,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
   </div>`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         //@ts-ignore
         import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._filter = this._getDomElement('input');
@@ -178,6 +179,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                     let designItem = node.data.ref;
                     if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
                         node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
+                        node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
+                        node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
                         let d = document.createElement("div");
                         d.className = "cmd";
                         let imgL = document.createElement('img');
@@ -375,10 +378,12 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         this._tree.visit((node) => {
             if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
                 node.setSelected(true);
+                node.setActive(true);
                 node.makeVisible({ scrollIntoView: true });
             }
             else {
                 node.setSelected(false);
+                node.setActive(false);
             }
         });
     }

package/dist/index.d.ts

@@ -160,6 +160,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/PathContex
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
 export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";

package/dist/index.js

@@ -120,6 +120,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/PathContex
 export * from "./elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.93",
+  "version": "0.0.94",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,13 +13,13 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.6.0",
+    "@node-projects/base-custom-webcomponent": "^0.9.0",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.8",
+    "@papyrs/stylo": "^0.0.9",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
@@ -32,7 +32,7 @@
     "jquery.fancytree": "^2.38.1",
     "monaco-editor": "^0.32.1",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.5",
+    "typescript": "^4.6.2",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {