@node-projects/web-component-designer 0.0.86 → 0.0.89

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

@@ -1,8 +1,77 @@
+import { EventNames, OverlayLayer } from '../../../../index.js';
 export class ZoomTool {
     cursor = 'zoom-in';
+    _rect;
+    _startPoint;
+    _endPoint;
+    _pointerMovementTolerance = 5;
+    _zoomStepSize = 0.2; //number x 100 = Scale in percent
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        const eventPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = eventPoint;
+                if (!this._rect)
+                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._rect.setAttribute('class', 'svg-selector');
+                this._rect.setAttribute('x', (this._startPoint.x * designerCanvas.zoomFactor));
+                this._rect.setAttribute('y', (this._startPoint.y * designerCanvas.zoomFactor));
+                this._rect.setAttribute('width', 0);
+                this._rect.setAttribute('height', 0);
+                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._startPoint) {
+                    let width = eventPoint.x - this._startPoint.x;
+                    let height = eventPoint.y - this._startPoint.y;
+                    if (width >= 0) {
+                        this._rect.setAttribute('x', this._startPoint.x);
+                        this._rect.setAttribute('width', width);
+                    }
+                    else {
+                        this._rect.setAttribute('x', eventPoint.x);
+                        this._rect.setAttribute('width', (-1 * width));
+                    }
+                    if (height >= 0) {
+                        this._rect.setAttribute('y', this._startPoint.y);
+                        this._rect.setAttribute('height', height);
+                    }
+                    else {
+                        this._rect.setAttribute('y', eventPoint.y);
+                        this._rect.setAttribute('height', (-1 * height));
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                this._endPoint = eventPoint;
+                let isLeftClick = event.button == 0;
+                switch (event.button) {
+                    case 0: //Left-Click
+                    case 2: //Right-Click
+                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
+                        break;
+                }
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
+                this._rect = null;
+                this._startPoint = null;
+                break;
+        }
+    }
+    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
+        if (this._isPositionEqual(startPoint, endPoint)) {
+            const oldZoom = designerCanvas.zoomFactor;
+            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
+            designerCanvas.zoomTowardsPoint(endPoint, newZoom);
+        }
+        else {
+            designerCanvas.zoomOntoRectangle(startPoint, endPoint);
+        }
+    }
+    _isPositionEqual(startPoint, endPoint) {
+        let tolerance = this._pointerMovementTolerance;
+        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {

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

@@ -72,6 +72,11 @@ export class PaletteTreeView extends BaseCustomWebComponentConstructorAppend {
             extensions: ['childcounter', 'dnd5', 'filter'],
             quicksearch: true,
             source: [],
+            filter: {
+                autoExpand: true,
+                mode: 'hide',
+                highlight: true
+            },
             dnd5: {
                 dropMarkerParent: this.shadowRoot,
                 preventRecursion: true,

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

@@ -109,6 +109,7 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         this._treeDiv = document.createElement('div');
+        this._treeDiv.style.userSelect = 'none';
         this.shadowRoot.appendChild(this._treeDiv);
         this._treeDiv.addEventListener('click', this._clickElement.bind(this));
     }

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

@@ -53,15 +53,19 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         display: flex;
         position: sticky;
         right: 0;
-        padding-right: 4px;
+        padding-right: 2px;
         align-items: center;
         gap: 2px;
         background: #ffffffc9;
-        width: 70px;
+        width: 42px;
         justify-content: flex-end;
         background: white;
       }
 
+      .cmd > img {
+        width: 10px;
+      }
+
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
@@ -168,16 +172,16 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                         node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                         let d = document.createElement("div");
                         d.className = "cmd";
-                        let img = document.createElement('img');
-                        this._showHideAtDesignTimeState(img, designItem);
-                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
-                        img.title = 'hide in designer';
-                        d.appendChild(img);
                         let imgL = document.createElement('img');
                         this._showLockAtDesignTimeState(imgL, designItem);
                         imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
                         imgL.title = 'lock';
                         d.appendChild(imgL);
+                        let img = document.createElement('img');
+                        this._showHideAtDesignTimeState(img, designItem);
+                        img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
+                        img.title = 'hide in designer';
+                        d.appendChild(img);
                         let imgH = document.createElement('img');
                         this._showHideAtRunTimeState(imgH, designItem);
                         imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
@@ -290,7 +294,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             },
             filter: {
                 autoApply: true,
-                autoExpand: false,
+                autoExpand: true,
                 counter: true,
                 fuzzy: true,
                 hideExpandedCounter: true,
@@ -361,18 +365,15 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         }
     }
     _highlight(activeElements) {
-        if (activeElements != null) {
-            this._tree.visit((node) => {
-                //@ts-ignore
-                if (activeElements.indexOf(node.data.ref) >= 0) {
-                    node.setSelected(true);
-                    node.makeVisible({ scrollIntoView: true });
-                }
-                else {
-                    node.setSelected(false);
-                }
-            });
-        }
+        this._tree.visit((node) => {
+            if (activeElements && activeElements.indexOf(node.data.ref) >= 0) {
+                node.setSelected(true);
+                node.makeVisible({ scrollIntoView: true });
+            }
+            else {
+                node.setSelected(false);
+            }
+        });
     }
 }
 customElements.define('node-projects-tree-view-extended', TreeViewExtended);

package/dist/index.d.ts

@@ -55,8 +55,6 @@ export type { IHtmlParserService } from "./elements/services/htmlParserService/I
 export type { IIntializationService } from "./elements/services/initializationService/IIntializationService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
-export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
-export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
@@ -132,8 +130,6 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -152,6 +148,10 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js";
 export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";

package/dist/index.js

@@ -33,7 +33,6 @@ export * from "./elements/services/htmlWriterService/LitTsElementWriterService.j
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
-export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
@@ -92,8 +91,6 @@ export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtension.js";
-export * from "./elements/widgets/designerView/extensions/IframeExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
@@ -112,6 +109,10 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js";
+export * from "./elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.86",
+  "version": "0.0.89",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,12 +13,13 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.5.0",
+    "@node-projects/base-custom-webcomponent": "^0.5.3",
     "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",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.13",
     "@types/jquery.fancytree": "0.0.7",
@@ -26,10 +27,10 @@
     "codemirror": "^5.65.1",
     "esprima-next": "^5.8.1",
     "html2canvas": "*",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
     "jquery": "^3.6.0",
     "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.31.1",
+    "monaco-editor": "^0.32.1",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.5",
     "typescript-lit-html-plugin": "^0.9.0"