@node-projects/web-component-designer 0.1.108 → 0.1.110

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -1,14 +1,11 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { AbstractExtension } from "../AbstractExtension.js";
-export class GridToolbarExtension extends AbstractExtension {
+import { BasicStackedToolbarExtension } from "../BasicStackedToolbarExtension.js";
+import { assetsPath } from "../../../../../Constants.js";
+export class GridToolbarExtension extends BasicStackedToolbarExtension {
     static template = html `
     <div style="height: 100%; width: 100%;">
-      <select id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-right: 10px;">
-        <option>block</option>
-        <option>flex</option>
-        <option selected>grid</option>
-      </select>
-      <select id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+      ${BasicStackedToolbarExtension.basicTemplate}
+      <select title="display" id="gridType" style="pointer-events: all; height: 24px; width: 60px; padding: 0; margin-right: 10px">
         <option>1x1</option>
         <option>1x16</option>
         <option>2x8</option>
@@ -17,26 +14,51 @@ export class GridToolbarExtension extends AbstractExtension {
         <option>16x1</option>
         <option>custom</option>
       </select>
+      <node-projects-image-button-list-selector property="align-content" no-value-in-header id="align-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-content-flex-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-content-flex-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/align-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/align-content-space-between-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-content-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-content" no-value-in-header id="justify-content">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-content-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-content-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-content-end-icon.svg">
+        <img data-value="space-around" src="${assetsPath}images/chromeDevtools/justify-content-space-around-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/justify-content-space-evenly-icon.svg">
+        <img data-value="space-between" src="${assetsPath}images/chromeDevtools/justify-content-space-between-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="align-items" no-value-in-header id="align-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/align-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/align-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/align-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/align-items-stretch-icon.svg">
+        <img data-value="space-evenly" src="${assetsPath}images/chromeDevtools/align-items-baseline-icon.svg">
+      </node-projects-image-button-list-selector>
+      <node-projects-image-button-list-selector property="justify-items" no-value-in-header id="justify-items">
+        <img data-value="start" src="${assetsPath}images/chromeDevtools/justify-items-start-icon.svg">
+        <img data-value="center" src="${assetsPath}images/chromeDevtools/justify-items-center-icon.svg">
+        <img data-value="end" src="${assetsPath}images/chromeDevtools/justify-items-end-icon.svg">
+        <img data-value="stretch" src="${assetsPath}images/chromeDevtools/justify-items-stretch-icon.svg">
+      </node-projects-image-button-list-selector>
     </div>
   `;
-    _toolbar;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
+        this._size.width = 560;
     }
     extend(cache, event) {
+        super.extend(cache, event);
         const style = getComputedStyle(this.extendedItem.element);
-        this._toolbar = this.createToolbar(GridToolbarExtension.template, 200, 30);
-        const displayTypeEl = this._toolbar.getById('displayType');
-        displayTypeEl.onchange = () => {
-            this.extendedItem.updateStyleInSheetOrLocal('display', displayTypeEl.value);
-            this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
-        };
         const gridTypeEl = this._toolbar.getById('gridType');
         let op = document.createElement('option');
         op.innerText = style.gridTemplateColumns.split(' ').length + 'x' + style.gridTemplateRows.split(' ').length;
         gridTypeEl.insertAdjacentElement('afterbegin', op);
         gridTypeEl.selectedIndex = 0;
-        gridTypeEl.onchange = () => {
+        gridTypeEl.onchange = async () => {
             if (gridTypeEl.value == 'custom') {
                 const columns = prompt("Number of columns?", '4');
                 if (!columns)
@@ -44,24 +66,23 @@ export class GridToolbarExtension extends AbstractExtension {
                 const rows = prompt("Number of rows?", '4');
                 if (!rows)
                     return;
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                const cg = this.extendedItem.openGroup('change grid type');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(columns)).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(rows)).trim());
+                cg.commit();
             }
             else {
                 const parts = gridTypeEl.value.split('x');
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
-                this.extendedItem.updateStyleInSheetOrLocal('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                const cg = this.extendedItem.openGroup('change grid type');
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-columns', '1fr '.repeat(parseInt(parts[0])).trim());
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('grid-template-rows', '1fr '.repeat(parseInt(parts[1])).trim());
+                cg.commit();
             }
         };
+        this._addStyleButton('align-content');
+        this._addStyleButton('justify-content');
+        this._addStyleButton('align-items');
+        this._addStyleButton('justify-items');
         this.refresh(cache, event);
     }
-    refresh(cache, event) {
-        if (event) {
-            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
 }

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js

@@ -2,8 +2,10 @@ import { GridToolbarExtension } from './GridToolbarExtension.js';
 import { NodeType } from '../../../../item/NodeType.js';
 export class GridToolbarExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.element).display === 'grid')
-            return true;
+        if (designItem.nodeType === NodeType.Element) {
+            const d = getComputedStyle(designItem.element).display;
+            return d === 'grid' || d === 'inline-grid';
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -23,7 +23,22 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
     .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
     .svg-toolbar-container { overflow: visible }
-    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+    .svg-toolbar-container > div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+    
+    node-projects-image-button-list-selector img {
+      height: 16px;
+      border: 1px solid black;
+      border-radius: 4px;
+      box-sizing: border-box;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+    node-projects-image-button-list-selector img:hover {
+      background: lightgray;
+    }
+    node-projects-image-button-list-selector img:active {
+      translate: 1px 1px
+    }
     `;
     static is = 'node-projects-overlay-layer-view';
     _serviceContainer;

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

@@ -6,6 +6,7 @@ import { ITool } from './ITool.js';
 import { ServiceContainer } from "../../../services/ServiceContainer.js";
 export declare class PointerTool implements ITool {
     cursor: string;
+    private _minMoveOffset;
     private _movedSinceStartedAction;
     private _initialPoint;
     private _actionType?;

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

@@ -5,6 +5,7 @@ import { ExtensionType } from '../extensions/ExtensionType.js';
 import { NamedTools } from './NamedTools.js';
 export class PointerTool {
     cursor = 'default';
+    _minMoveOffset = 5;
     _movedSinceStartedAction = false;
     _initialPoint;
     _actionType;
@@ -120,7 +121,7 @@ export class PointerTool {
             }
         }
         if (event.type === EventNames.PointerMove) {
-            this._movedSinceStartedAction = this._movedSinceStartedAction || currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
+            this._movedSinceStartedAction = this._movedSinceStartedAction || Math.abs(currentPoint.x - this._initialPoint.x) > this._minMoveOffset || Math.abs(currentPoint.y - this._initialPoint.y) > this._minMoveOffset;
             if (this._actionType == PointerActionType.DrawSelection)
                 this._actionType = PointerActionType.DrawingSelection;
         }
@@ -236,7 +237,7 @@ export class PointerTool {
                     }
                     if (this._movedSinceStartedAction) {
                         const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
+                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem));
                         if (currentContainerService) {
                             const dragItem = this._actionStartedDesignItem.parent;
                             if (this._dragParentExtensionItem != dragItem) {
@@ -323,7 +324,7 @@ export class PointerTool {
                     }
                     if (this._movedSinceStartedAction) {
                         const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
+                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle, this._actionStartedDesignItem));
                         const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
                         if (containerService) {
                             if (!this._changeGroup)
@@ -399,7 +400,7 @@ export class PointerTool {
             else if (e == designerCanvas.rootDesignItem.element) {
                 newContainerElementDesignItem = designerCanvas.rootDesignItem;
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem));
                 break;
             }
             else if (false) {
@@ -408,7 +409,7 @@ export class PointerTool {
             else {
                 newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle, designItem));
                 if (newContainerService) {
                     if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) {
                         break;

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

@@ -140,7 +140,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
             this._pg.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
-            if (this._instanceServiceContainer.selectionService.primarySelection.isRootItem) {
+            if (this._instanceServiceContainer.selectionService?.primarySelection?.isRootItem) {
                 this._configButton.style.display = 'none';
                 this._id.value = '';
                 this._content.value = '';

package/dist/index.d.ts

@@ -196,6 +196,7 @@ export * from "./elements/widgets/designerView/tools/ZoomTool.js";
 export type { IDesignerExtension } from "./elements/widgets/designerView/extensions/IDesignerExtension.js";
 export type { IDesignerExtensionProvider } from "./elements/widgets/designerView/extensions/IDesignerExtensionProvider.js";
 export type { IExtensionManager } from "./elements/widgets/designerView/extensions/IExtensionManger.js";
+export * from "./elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/dist/index.js

@@ -137,6 +137,7 @@ export * from "./elements/widgets/designerView/tools/PointerTool.js";
 export * from "./elements/widgets/designerView/tools/RectangleSelectorTool.js";
 export * from "./elements/widgets/designerView/tools/TextTool.js";
 export * from "./elements/widgets/designerView/tools/ZoomTool.js";
+export * from "./elements/widgets/designerView/extensions/BasicStackedToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/OverlayLayer.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";

package/package.json

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