@node-projects/web-component-designer 0.1.96 → 0.1.97

package/dist/elements/helper/LayoutHelper.d.ts

@@ -6,3 +6,4 @@ import { IDesignItem } from "../item/IDesignItem.js";
 export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
 export declare function getDesignItemCurrentPos(designItem: IDesignItem, mode: 'position' | 'transform' | 'margin' | 'padding'): IPoint;
 export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;
+export declare function roundValue(designItem: IDesignItem, value: number): string | number;

package/dist/elements/helper/LayoutHelper.js

@@ -71,15 +71,21 @@ export function placeDesignItem(container, designItem, offset, mode) {
         if (!hasPositionedLayout)
             designItem.setStyle('position', 'absolute');
         if (oldLeft || oldRight == null)
-            designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
+            designItem.setStyle('left', roundValue(designItem, offset.x + (oldLeft ?? 0) + containerLeft) + "px");
         if (oldTop || oldBottom == null)
-            designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
+            designItem.setStyle('top', roundValue(designItem, offset.y + (oldTop ?? 0) + containerTop) + "px");
         if (oldRight)
-            designItem.setStyle('right', ((oldRight ?? 0) - offset.x + containerRight) + "px");
+            designItem.setStyle('right', roundValue(designItem, (oldRight ?? 0) - offset.x + containerRight) + "px");
         if (oldBottom)
-            designItem.setStyle('bottom', ((oldBottom ?? 0) - offset.y + containerBottom) + "px");
+            designItem.setStyle('bottom', roundValue(designItem, (oldBottom ?? 0) - offset.y + containerBottom) + "px");
     }
 }
+export function roundValue(designItem, value) {
+    if (designItem.serviceContainer.options.roundPixelsToDecimalPlaces >= 0) {
+        return value.toFixed(designItem.serviceContainer.options.roundPixelsToDecimalPlaces);
+    }
+    return value;
+}
 /*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
   
 }*/ 

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -85,6 +85,7 @@ import { DragDropService } from './dragDropService/DragDropService.js';
 import { EventsService } from './eventsService/EventsService.js';
 import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
 import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
+import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -180,7 +181,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

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

@@ -93,6 +93,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     readonly globalContext: GlobalContext;
     readonly options: {
         zoomDesignerBackground: boolean;
+        roundPixelsToDecimalPlaces: number;
     };
     readonly designerTools: Map<string | NamedTools, ITool | (new (IElementDefinition: any) => ITool)>;
     get bindingService(): IBindingService;

package/dist/elements/services/ServiceContainer.js

@@ -22,7 +22,8 @@ export class ServiceContainer extends BaseServiceContainer {
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
     options = {
-        zoomDesignerBackground: true
+        zoomDesignerBackground: true,
+        roundPixelsToDecimalPlaces: -1
     };
     designerTools = new Map();
     get bindingService() {

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

@@ -1,5 +1,6 @@
 import { EventNames } from '../../../../enums/EventNames.js';
 import { getContentBoxContentOffsets } from '../../../helper/ElementHelper.js';
+import { roundValue } from '../../../helper/LayoutHelper.js';
 import { transformPointByInverseMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition, getElementCombinedTransform } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension.js';
 //TODO: use PlacementService, size is not always width/height could also be margin etc...
@@ -124,108 +125,108 @@ export class ResizeExtension extends AbstractExtension {
                     switch (this._actionModeStarted) {
                         case 'e-resize':
                             width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'se-resize':
                             width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 's-resize':
                             height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'sw-resize':
                             width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             height = (this._initialSizes[i].height + deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height + deltaY) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'w-resize':
                             width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'nw-resize':
                             width = (this._initialSizes[i].width - deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width - deltaX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width - deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'n-resize':
                             height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'ne-resize':
                             width = (this._initialSizes[i].width + deltaX);
-                            this.extendedItem.element.style.width = width + 'px';
+                            this.extendedItem.element.style.width = roundValue(this.extendedItem, width) + 'px';
                             height = (this._initialSizes[i].height - deltaY);
-                            this.extendedItem.element.style.height = height + 'px';
+                            this.extendedItem.element.style.height = roundValue(this.extendedItem, height) + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height - deltaY + 'px';
+                                        designItem.element.style.width = roundValue(this.extendedItem, this._initialSizes[i].width + deltaX) + 'px';
+                                        designItem.element.style.height = roundValue(this.extendedItem, this._initialSizes[i].height - deltaY) + 'px';
                                     }
                                 }
                             }
@@ -242,8 +243,8 @@ export class ResizeExtension extends AbstractExtension {
                 let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize <" + this.extendedItem.name + ">");
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
-                this.extendedItem.setStyle('left', normalizeToAbsolutePosition(this.extendedItem.element, 'left'));
-                this.extendedItem.setStyle('top', normalizeToAbsolutePosition(this.extendedItem.element, 'top'));
+                this.extendedItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'left'))) + 'px');
+                this.extendedItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'top'))) + 'px');
                 let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
                 this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
                 let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
@@ -268,8 +269,8 @@ export class ResizeExtension extends AbstractExtension {
                         if (designItem !== this.extendedItem) {
                             designItem.setStyle('width', designItem.element.style.width);
                             designItem.setStyle('height', designItem.element.style.height);
-                            designItem.setStyle('left', normalizeToAbsolutePosition(designItem.element, 'left'));
-                            designItem.setStyle('top', normalizeToAbsolutePosition(designItem.element, 'top'));
+                            designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
+                            designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
                         }
                     }
                 }

package/dist/elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.d.ts

@@ -0,0 +1,7 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class RoundPixelsDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    constructor();
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js

@@ -0,0 +1,16 @@
+export class RoundPixelsDesignViewConfigButton {
+    constructor() { }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        btn.className = 'toolbar-control';
+        btn.title = 'round pixels to';
+        const ip = document.createElement('input');
+        ip.type = 'number';
+        ip.step = '1';
+        ip.min = '-1';
+        ip.valueAsNumber = designerView.serviceContainer.options.roundPixelsToDecimalPlaces;
+        ip.onchange = () => designerView.serviceContainer.options.roundPixelsToDecimalPlaces = ip.valueAsNumber;
+        btn.appendChild(ip);
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.d.ts

@@ -0,0 +1,5 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare const enableStylesheetService = "enableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons copy.js

@@ -0,0 +1,7 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export const enableStylesheetService = 'enableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(enableStylesheetService, "ss", "modify Stylesheet");
+    }
+}

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

@@ -1,4 +1,5 @@
 import { EventNames } from '../../../../enums/EventNames.js';
+import { roundValue } from '../../../helper/LayoutHelper.js';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawElementTool {
     _elementDefinition;
@@ -38,8 +39,8 @@ export class DrawElementTool {
         this._changeGroup = designerCanvas.rootDesignItem.openGroup("Insert Item");
         this._createdItem = await designerCanvas.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(this._elementDefinition, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer));
         this._createdItem.setStyle('position', 'absolute');
-        this._createdItem.setStyle('left', evPos.x + 'px');
-        this._createdItem.setStyle('top', evPos.y + 'px');
+        this._createdItem.setStyle('left', roundValue(this._createdItem, evPos.x) + 'px');
+        this._createdItem.setStyle('top', roundValue(this._createdItem, evPos.y) + 'px');
         this._createdItem.setStyle('width', '0');
         this._createdItem.setStyle('height', '0');
         this._createdItem.element.style.overflow = 'hidden';
@@ -54,20 +55,20 @@ export class DrawElementTool {
                 this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foreground);
                 this._rect.setAttribute('class', 'svg-draw-new-element');
-                this._rect.setAttribute('x', (this._startPosition.x));
-                this._rect.setAttribute('y', (this._startPosition.y));
+                this._rect.setAttribute('x', roundValue(this._createdItem, this._startPosition.x));
+                this._rect.setAttribute('y', roundValue(this._createdItem, this._startPosition.y));
             }
-            const w = evPos.x - this._startPosition.x;
-            const h = evPos.y - this._startPosition.y;
-            if (w >= 0) {
+            const w = roundValue(this._createdItem, evPos.x - this._startPosition.x);
+            const h = roundValue(this._createdItem, evPos.y - this._startPosition.y);
+            if (parseFloat('' + w) >= 0) {
                 this._rect.setAttribute('width', w);
                 this._createdItem.setStyle('width', w + 'px');
             }
-            if (h >= 0) {
+            if (parseFloat('' + h) >= 0) {
                 this._rect.setAttribute('height', h);
                 this._createdItem.setStyle('height', h + 'px');
             }
-            if (w > 5 || h > 5)
+            if (parseFloat('' + w) > 5 || parseFloat('' + h) > 5)
                 this.sizeOverlapThreshold = true;
         }
     }

package/package.json

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