@node-projects/web-component-designer 0.0.139 → 0.0.141

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -6,7 +6,6 @@ export declare type DesignerTabControlIndexChangedEventArgs = {
 };
 export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     private _selectedIndex;
-    private _contentObserver;
     private _panels;
     private _headerDiv;
     private _moreDiv;

package/dist/elements/controls/DesignerTabControl.js

@@ -1,7 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
 export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
     _selectedIndex = -1;
-    _contentObserver;
+    //private _contentObserver: MutationObserver;
     _panels;
     _headerDiv;
     _moreDiv;
@@ -97,15 +97,15 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         `;
     constructor() {
         super();
-        this._contentObserver = new MutationObserver((mut) => {
-            let refresh = false;
-            for (let m of mut) {
-                if (m.type != 'attributes' || m.attributeName == 'style')
-                    refresh = true;
-            }
-            if (refresh)
-                this.refreshItems();
-        });
+        /*this._contentObserver = new MutationObserver((mut) => {
+          let refresh = false;
+          for (let m of mut) {
+            if (m.type != 'attributes' || m.attributeName == 'style')
+              refresh = true;
+          }
+          if (refresh)
+            this.refreshItems();
+        });*/
         let outerDiv = document.createElement("div");
         outerDiv.className = 'outer';
         this.shadowRoot.appendChild(outerDiv);
@@ -163,7 +163,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         if (this._firstConnect) {
             this.refreshItems();
             this._firstConnect = false;
-            this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
+            //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
             let selectedIndexAttribute = this.getAttribute("selected-index");
             if (selectedIndexAttribute) {
                 this.selectedIndex = parseInt(selectedIndexAttribute);
@@ -211,7 +211,8 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             if (element.style.display != 'none') {
                 index++;
                 if (index == this._selectedIndex) {
-                    element.slot = "panels";
+                    if (element.slot != "panels")
+                        element.slot = "panels";
                     const headerEl = this._elementMap.get(element);
                     if (headerEl) {
                         headerEl.classList.add('selected');

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

@@ -12,6 +12,7 @@ interface InstanceServiceNameMap {
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
     readonly designerCanvas: IDesignerCanvas;
+    designer: any;
     constructor(designerCanvas: IDesignerCanvas);
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -3,6 +3,7 @@ import { DesignContext } from '../widgets/designerView/DesignContext';
 export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
     designerCanvas;
+    designer; //usable to assign designer from outside
     constructor(designerCanvas) {
         super();
         this.designerCanvas = designerCanvas;

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

@@ -465,8 +465,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._updateTransform();
         this._fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
-        if (refreshExtensions)
+        if (refreshExtensions) {
             this.extensionManager.refreshAllAppliedExtentions();
+            setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
+        }
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;

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

@@ -10,12 +10,7 @@ export class InvisibleDivExtension extends AbstractExtension {
     }
     refresh() {
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-invisible-div', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -75,6 +75,7 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
             lst.createElements(items[0]);
             visibleDict.add(p.name);
         }
+        this._designerTabControl.refreshItems();
         if (this._designerTabControl.selectedIndex < 0)
             this._designerTabControl.selectedIndex = 0;
         for (let p of this._propertyGridPropertyLists) {

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

@@ -93,7 +93,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     createElements(designItem) {
-        if (this._propertiesService.listNeedsRefresh(designItem) || this._propertyMap.size == 0) {
+        if (this._propertiesService && (this._propertiesService.listNeedsRefresh(designItem)) || this._propertyMap.size == 0) {
             DomHelper.removeAllChildnodes(this._div);
             this._propertyMap.clear();
             if (this._propertiesService) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",