@node-projects/web-component-designer 0.0.198 → 0.0.200

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

@@ -1,3 +1,3 @@
 export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number;
 export declare function getCssUnit(cssValue: string): string;
-export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string | number;
+export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string;

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

@@ -4,9 +4,7 @@ export declare function CalculateGridInformation(designItem: IDesignItem): {
         x: number;
         y: number;
         width: number;
-        initWidthUnit: string;
         height: number;
-        initHeightUnit: string;
         name: string;
     }[][];
     gaps?: {
@@ -16,5 +14,6 @@ export declare function CalculateGridInformation(designItem: IDesignItem): {
         height: number;
         column?: number;
         row?: number;
+        type: 'h' | 'v';
     }[];
 };

package/dist/elements/helper/GridHelper.js

@@ -1,4 +1,3 @@
-import { getCssUnit } from "./CssUnitConverter.js";
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
@@ -7,20 +6,6 @@ export function CalculateGridInformation(designItem) {
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
-    const rowUnits = [];
-    let tmpStyle = designItem.getStyle("grid-template-rows");
-    if (tmpStyle)
-        tmpStyle.split(' ').forEach(rowWidth => { if (rowWidth != "")
-            rowUnits.push(getCssUnit(rowWidth)); });
-    else
-        rows.forEach(() => rowUnits.push("px"));
-    const columnUnits = [];
-    tmpStyle = designItem.getStyle("grid-template-columns");
-    if (tmpStyle)
-        tmpStyle.split(' ').forEach(columnHeight => { if (columnHeight != "")
-            columnUnits.push(getCssUnit(columnHeight)); });
-    else
-        columns.forEach(() => columnUnits.push("px"));
     const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
     const paddingTop = Number.parseFloat(computedStyle.paddingTop);
     let y = 0;
@@ -101,12 +86,12 @@ export function CalculateGridInformation(designItem) {
         for (let yIdx = 0; yIdx < columns.length; yIdx++) {
             const c = columns[yIdx];
             if (x > 0) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: yIdx, row: xIdx });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: yIdx, row: xIdx, type: 'v' });
                 x += xGap;
             }
             const currX = Number.parseFloat(c.replace('px', ''));
             if (y > 0) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: yIdx, row: xIdx });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: yIdx, row: xIdx, type: 'h' });
             }
             let name = null;
             if (areas && areas[cl]) {
@@ -115,7 +100,7 @@ export function CalculateGridInformation(designItem) {
                     name = nm;
                 }
             }
-            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, initWidthUnit: columnUnits[yIdx], height: currY, initHeightUnit: rowUnits[xIdx], name: name };
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
             cellList.push(cell);
             x += currX;
             cl++;

package/dist/elements/item/DesignItem.js

@@ -78,10 +78,12 @@ export class DesignItem {
         return this._styles.size > 0;
     }
     hasStyle(name) {
-        return this._styles.has(name);
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.has(nm);
     }
     getStyle(name) {
-        return this._styles.get(name);
+        let nm = PropertiesHelper.camelToDashCase(name);
+        return this._styles.get(nm);
     }
     *styles() {
         for (let s of this._styles) {
@@ -89,10 +91,12 @@ export class DesignItem {
         }
     }
     _withoutUndoSetStyle(name, value) {
-        this._styles.set(name, value);
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.set(nm, value);
     }
     _withoutUndoRemoveStyle(name) {
-        this._styles.delete(name);
+        let nm = PropertiesHelper.camelToDashCase(name);
+        this._styles.delete(nm);
     }
     static _designItemMap = new WeakMap();
     get element() {

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -76,7 +76,7 @@ import { SelectionService } from './selectionService/SelectionService.js';
 import { ContentService } from './contentService/ContentService.js';
 import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
 import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js';
-import { EditGridExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridExtensionProvider.js';
+import { EditGridColumnRowSizesExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js';
 import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
 import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
 export function createDefaultServiceContainer() {
@@ -112,7 +112,8 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new EditGridExtensionProvider(),
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
         new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
@@ -128,7 +129,8 @@ export function createDefaultServiceContainer() {
         new SelectionDefaultExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
-        new EditGridExtensionProvider(),
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
         new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -18,10 +18,6 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
       height: 100%;
       width: 100%;
     }
-
-    .monaco-editor .overflow-guard { 
-      overflow: visible;
-    }
     `;
     static template = html `
       <div id="container" style="overflow: hidden; width: 100%; height: 100%; position: absolute;"></div>
@@ -105,7 +101,7 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 this._monacoEditor = monaco.editor.create(this._editor, {
                     automaticLayout: true,
                     wordWrapColumn: 1000,
-                    wordWrap: 'wordWrapColumn',
+                    //wordWrap: 'wordWrapColumn',
                     value: this.code,
                     language: 'html',
                     minimap: {

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

@@ -20,7 +20,7 @@ export class DisplayGridExtension extends AbstractExtension {
                 this._initSVGArrays();
             //draw gaps
             this.gridInformation.gaps.forEach((gap, i) => {
-                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Foregorund);
+                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Normal);
             });
             //draw cells
             cells.forEach((row, i) => {

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

@@ -16,7 +16,6 @@ export class DisplayGridExtensionProvider {
     .svg-grid-current-cell { stroke: orange; stroke-dasharray: 5; fill: #e3ff4722; }
     .svg-grid-area { font-size: 8px; }
     .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-    .svg-grid-resizer { fill: white; stroke: #3899ec; }
     .svg-grid-header { fill: #ff944722; stroke: orange; }
     .svg-grid-plus-sign { stroke: black; }
   `;

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.d.ts

@@ -0,0 +1,17 @@
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation: ReturnType<typeof CalculateGridInformation>;
+    private _resizers;
+    private _initalPos;
+    private _initialSizes;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(event?: Event): void;
+    refresh(event?: Event): void;
+    _pointerActionTypeResize(event: PointerEvent, rect: SVGRectElement, gap: ReturnType<typeof CalculateGridInformation>['gaps'][0]): void;
+    _convertCssUnitIncludingFr(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string, units: string[]): string;
+    dispose(): void;
+}

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

@@ -0,0 +1,111 @@
+import { EventNames } from "../../../../../enums/EventNames.js";
+import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
+import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditGridColumnRowSizesExtension extends AbstractExtension {
+    gridInformation;
+    _resizers = [];
+    _initalPos;
+    _initialSizes;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend(event) {
+        this.refresh(event);
+    }
+    refresh(event) {
+        this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this.gridInformation.gaps.forEach((gap, i) => {
+            if (gap.width < 3) {
+                gap.width = 3;
+                gap.x--;
+            }
+            if (gap.height < 3) {
+                gap.height = 3;
+                gap.y--;
+            }
+            let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
+            if (!this._resizers[i]) {
+                this._resizers[i] = rect;
+                rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, rect, gap));
+                rect.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, rect, gap));
+            }
+        });
+    }
+    _pointerActionTypeResize(event, rect, gap) {
+        event.stopPropagation();
+        const templatePropertyName = gap.type == 'h' ? 'gridTemplateRows' : 'gridTemplateColumns';
+        const axisPropertyName = gap.type == 'h' ? 'Y' : 'X';
+        const index = (gap.type == 'h' ? gap.row : gap.column) - 1;
+        const sizeType = gap.type == 'h' ? 'height' : 'width';
+        const pos = event['client' + axisPropertyName];
+        switch (event.type) {
+            case EventNames.PointerDown:
+                rect.setPointerCapture(event.pointerId);
+                this._initalPos = pos;
+                this._initialSizes = getComputedStyle(this.extendedItem.element)[templatePropertyName];
+                break;
+            case EventNames.PointerMove:
+                if (this._initialSizes) {
+                    const diff = this._initalPos - pos;
+                    let parts = this._initialSizes.split(' ');
+                    parts[index] = (parseFloat(parts[index]) - diff) + 'px';
+                    parts[index + 1] = (parseFloat(parts[index + 1]) + diff) + 'px';
+                    this.extendedItem.element.style[templatePropertyName] = parts.join(' ');
+                    this.extensionManager.refreshExtensions([this.extendedItem], null, event);
+                }
+                break;
+            case EventNames.PointerUp:
+                rect.releasePointerCapture(event.pointerId);
+                const diff = this._initalPos - pos;
+                const realStyle = this.extendedItem.getStyleFromSheetOrLocalOrComputed(templatePropertyName);
+                const initialParts = this._initialSizes.split(' ');
+                const parts = realStyle.split(' ');
+                let units = parts.map(x => getCssUnit(x));
+                if (parts.length != initialParts.length) {
+                    units = initialParts.map(x => getCssUnit(x));
+                }
+                this.extendedItem.element.style[templatePropertyName] = '';
+                const unit1 = units[index];
+                initialParts[index] = this._convertCssUnitIncludingFr(parseFloat(initialParts[index]) - diff, this.extendedItem.element, sizeType, unit1, units);
+                const unit2 = units[index + 1];
+                initialParts[index + 1] = this._convertCssUnitIncludingFr(parseFloat(initialParts[index + 1]) + diff, this.extendedItem.element, sizeType, unit2, units);
+                this.extendedItem.updateStyleInSheetOrLocal(templatePropertyName, initialParts.join(' '));
+                this._initalPos = null;
+                this._initialSizes = null;
+                this.extensionManager.refreshExtensions([this.extendedItem]);
+                break;
+        }
+    }
+    _convertCssUnitIncludingFr(cssValue, target, percentTarget, unit, units) {
+        if (unit == "fr") {
+            let containerSize = convertCssUnitToPixel(target.style.width, target, percentTarget);
+            let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
+            let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget) ?? 0;
+            let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;
+            let amountFrSizes = 0;
+            let leftOver = containerSizeWithoutGaps;
+            this.gridInformation.cells[0].forEach((column, i) => {
+                if (units[i] == "fr")
+                    amountFrSizes++;
+                else
+                    leftOver -= column[percentTarget];
+            });
+            let frRatio = leftOver / amountFrSizes;
+            if (typeof cssValue == "number") {
+                //expected Value in Pixel
+                return (cssValue / frRatio).toFixed(2) + "fr";
+            }
+            else {
+                return (convertCssUnitToPixel(cssValue, target, percentTarget) / frRatio).toFixed(2) + "fr";
+            }
+        }
+        else
+            return convertCssUnit(cssValue, target, percentTarget, unit);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridColumnRowSizesExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,20 @@
+import { EditGridColumnRowSizesExtension } from './EditGridColumnRowSizesExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { gridExtensionShowOverlayOptionName } from './DisplayGridExtensionProvider.js';
+export class EditGridColumnRowSizesExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        const display = getComputedStyle(designItem.element).display;
+        if (display == 'grid' || display == 'inline-grid')
+            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
+    }
+    style = css `
+    .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: all; }
+    .svg-grid-resizer-v:hover { fill: #ff7f5052; }
+    .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: all; }
+    .svg-grid-resizer-h:hover { fill: #ff7f5052; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/grid/EditGridExtension copy 2.d.ts

@@ -0,0 +1,51 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class EditGridExtension extends AbstractExtension {
+    private _initialPoint;
+    private _initialSizes;
+    private _cells;
+    private _gaps;
+    private _headers;
+    private _headerTexts;
+    private _plusCircles;
+    private _resizeCircles;
+    private minPixelSize;
+    private gridInformation;
+    private defaultHeaderSize;
+    private defaultPlusSize;
+    private defaultDistanceToBox;
+    private defaultDistanceBetweenHeaders;
+    private defaultSizeOfNewRowOrColumn;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _initSVGArrays(): void;
+    _drawResizeCircle(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _drawHeader(cell: any, oldHeader: any, index: any, alignment: "vertical" | "horizontal"): SVGRectElement;
+    _drawHeaderText(cell: any, oldHeaderText: any, alignment: "vertical" | "horizontal"): SVGTextElement;
+    _drawPlusCircle(x: any, y: any, oldPlusElement: {
+        circle: SVGCircleElement;
+        verticalLine: SVGLineElement;
+        horizontalLine: SVGLineElement;
+    }, index: any, alignment: "vertical" | "horizontal", final?: boolean): {
+        circle: any;
+        verticalLine: any;
+        horizontalLine: any;
+    };
+    _getHeaderText(size: number, unit: string, percentTarget: "width" | "height"): string;
+    _getInitialSizes(): {
+        x: any[];
+        xUnit: any[];
+        y: any[];
+        yUnit: any[];
+    };
+    _pointerActionTypeResize(event: PointerEvent, circle: SVGCircleElement, gapColumn: any, gapRow: any): void;
+    _calculateNewSize(iSizes: number[], iUnits: string[], diff: any, gapIndex: any, percentTarget: 'width' | 'height', pointerUp?: boolean): string;
+    _editGrid(pos: number, alignment: "vertical" | "horizontal", task: "add" | "del"): void;
+    _calculateNewElementSize(elementTarget: "width" | "height"): string;
+    _toggleDisplayPlusCircles(index: any, alignment: "vertical" | "horizontal", double?: boolean): void;
+    _convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string | number;
+}