@node-projects/web-component-designer 0.1.16 → 0.1.17

package/dist/Constants.js

@@ -1,6 +1,5 @@
 export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
 export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
 export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';
-//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
 let imporUrl = new URL((import.meta.url));
 export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

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

@@ -1,4 +1,5 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 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;

package/dist/elements/helper/LayoutHelper.js

@@ -14,6 +14,17 @@ export function filterChildPlaceItems(items) {
     }
     return filterdPlaceItems;
 }
+export function getDesignItemCurrentPos(designItem, mode) {
+    if (mode === 'position') {
+        const computedStyleMovedElement = getComputedStyle(designItem.element);
+        let oldLeft = parseFloat(computedStyleMovedElement.left);
+        oldLeft = Number.isNaN(oldLeft) ? null : oldLeft;
+        let oldTop = parseFloat(computedStyleMovedElement.top);
+        oldTop = Number.isNaN(oldTop) ? null : oldTop;
+        return { x: oldLeft, y: oldTop };
+    }
+    return { x: 0, y: 0 };
+}
 export function placeDesignItem(container, designItem, offset, mode) {
     const movedElement = designItem.element;
     const computedStyleMovedElement = getComputedStyle(movedElement);
@@ -29,10 +40,8 @@ export function placeDesignItem(container, designItem, offset, mode) {
         let oldTop = null;
         let oldBottom = null;
         let containerLeft = 0;
-        //@ts-ignore
         let containerRight = 0;
         let containerTop = 0;
-        //@ts-ignore
         let containerBottom = 0;
         let hasPositionedLayout = false;
         if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') {

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -1,6 +1,6 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
 import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
+import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
 import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
 import { straightenLine } from '../../helper/PathDataPolyfill.js';
 export class DefaultPlacementService {
@@ -35,8 +35,11 @@ export class DefaultPlacementService {
         let trackY = newPoint.y - startPoint.y;
         if (!event.ctrlKey) {
             if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
+                let p = getDesignItemCurrentPos(item, 'position');
+                p.x = p.x % placementView.gridSize;
+                p.y = p.y % placementView.gridSize;
+                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
+                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
             }
             else if (placementView.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -22,7 +22,9 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     outerRect: DOMRect;
     clickOverlay: HTMLDivElement;
     private _activeTool;
-    gridSize: number;
+    private _gridSize;
+    get gridSize(): number;
+    set gridSize(value: number);
     pasteOffset: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;

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

@@ -29,7 +29,28 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     clickOverlay;
     _activeTool;
     // IPlacementView
-    gridSize = 10;
+    _gridSize = 10;
+    get gridSize() {
+        return this._gridSize;
+    }
+    set gridSize(value) {
+        this._gridSize = value;
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        canvas.width = value * 2;
+        canvas.height = value * 2;
+        const patternSize = value;
+        for (let x = 0; x < canvas.width; x += patternSize) {
+            for (let y = 0; y < canvas.height; y += patternSize) {
+                context.fillStyle = (x + y) % (patternSize * 2) === 0 ? "#e5e5e5" : "white";
+                context.fillRect(x, y, patternSize, patternSize);
+            }
+        }
+        const dataURL = canvas.toDataURL();
+        this._backgroundImage = 'url(' + dataURL + ')';
+        if (this._canvas.style.backgroundImage != 'none')
+            this._canvas.style.backgroundImage = this._backgroundImage;
+    }
     pasteOffset = 10;
     alignOnGrid = false;
     alignOnSnap = true;

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

@@ -212,9 +212,19 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         let alignSnap = this._getDomElement('alignSnap');
         alignSnap.onclick = () => { this._designerCanvas.alignOnSnap = !this._designerCanvas.alignOnSnap; alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : ''; };
         alignSnap.style.backgroundColor = this._designerCanvas.alignOnSnap ? 'deepskyblue' : '';
+        alignSnap.oncontextmenu = e => { e.preventDefault(); };
         let alignGrid = this._getDomElement('alignGrid');
         alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
         alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
+        alignGrid.oncontextmenu = e => {
+            e.preventDefault();
+            let res = prompt("raster size", this.designerCanvas.gridSize.toString());
+            if (res) {
+                let r = parseInt(res);
+                if (r > 0)
+                    this.designerCanvas.gridSize = r;
+            }
+        };
         this._lowertoolbar = this._getDomElement('lowertoolbar');
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));

package/package.json

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