@node-projects/web-component-designer 0.0.170 → 0.0.172

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js

@@ -11,7 +11,7 @@ export class CssTreeStylesheetService {
             for (let stylesheet of stylesheets) {
                 this._stylesheets.set(stylesheet.name, {
                     stylesheet: stylesheet,
-                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.stylesheet, { positions: true, parseValue: false })))
+                    ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.content, { positions: true, parseValue: false })))
                 });
             }
             this.stylesheetsChanged.emit();
@@ -33,8 +33,8 @@ export class CssTreeStylesheetService {
         let styles = [];
         for (let item of this._stylesheets) {
             if (!item[1].ast || !this.astHasChildren(item[1].ast))
-                break;
-            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.stylesheet, item[0], designItem)));
+                continue;
+            styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.content, item[0], designItem)));
         }
         ;
         return styles;
@@ -61,19 +61,19 @@ export class CssTreeStylesheetService {
         }
         return retCollection;
     }
-    getDeclarationInternal(designItem, prop) {
+    getDeclarationInternal(designItem, styleName) {
         let rules = this.getAppliedRulesInternal(designItem);
         if (!rules)
             return null;
         let declarations = [];
         for (let rule of rules) {
-            let declaration = this.findDeclarationInRule(rule.ast, prop);
+            let declaration = this.findDeclarationInRule(rule.ast, styleName);
             if (!declaration)
                 continue;
             declarations.push({
                 ast: declaration,
                 parent: rule,
-                name: prop.name,
+                name: styleName,
                 value: declaration.value.value,
                 important: declaration.important == true,
             });
@@ -81,25 +81,39 @@ export class CssTreeStylesheetService {
         ;
         return declarations;
     }
-    getDeclarations(designItem, prop) {
-        let declarations = this.getDeclarationInternal(designItem, prop);
+    getDeclarations(designItem, stlyeName) {
+        let declarations = this.getDeclarationInternal(designItem, stlyeName);
         if (!declarations)
             return null;
         return this.sortDeclarations(declarations);
     }
     /* Section covers the update of rules and declarations */
-    updateDeclarationWithProperty(designItem, property, value, important) {
-        let sortedDecl = this.sortDeclarations(this.getDeclarationInternal(designItem, property));
-        if (!sortedDecl) {
-            // no declaration of property yet
-            return false;
-        }
-        return false;
-    }
     updateDeclarationWithDeclaration(declaration, value, important) {
-        declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value, { context: 'declaration', parseValue: false })).value;
-        this._stylesheets.get(declaration.parent.stylesheetName).stylesheet.stylesheet = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(declaration.parent.stylesheetName).ast));
-        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(declaration.parent.stylesheetName).stylesheet });
+        let sourceNode = this._stylesheets.get(declaration.parent.stylesheetName);
+        declaration.ast.value = window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + value + (important ? " !important" : ""), { context: 'declaration', parseValue: false })).value;
+        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
+        // After generating the stylesheet, the AST has to be transformed back into a plain object
+        sourceNode.ast = window.csstree.toPlainObject(sourceNode.ast);
+        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
+        return true;
+    }
+    insertDeclarationIntoRule(rule, declaration, important) {
+        let sourceNode = this._stylesheets.get(rule.stylesheetName);
+        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + declaration.value + (declaration.important ? " !important" : ""), { context: 'declaration', parseValue: false })));
+        sourceNode.stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(sourceNode.ast));
+        // After generating the stylesheet, the AST has to be transformed back into a plain object
+        sourceNode.ast = window.csstree.toPlainObject(sourceNode.ast);
+        this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
+        return true;
+    }
+    removeDeclarationFromRule(rule, declaration) {
+        let index = rule.ast.block.children.indexOf(declaration.ast);
+        if (index == -1)
+            return false;
+        rule.ast.block.children.splice(index, 1);
+        this._stylesheets.get(rule.stylesheetName).stylesheet.content = window.csstree.generate(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
+        this._stylesheets.get(rule.stylesheetName).ast = window.csstree.toPlainObject(window.csstree.fromPlainObject(this._stylesheets.get(rule.stylesheetName).ast));
+        this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(rule.stylesheetName).stylesheet });
         return true;
     }
     /* Section covers the internal traversal creation of rules and declarations */
@@ -145,7 +159,12 @@ export class CssTreeStylesheetService {
         for (let selector of selectorsAST.children) {
             let sel = "";
             for (let fraction of selector.children) {
-                sel += fraction.name;
+                if (fraction.type == "IdSelector")
+                    sel += "#" + fraction.name;
+                else if (fraction.type == "ClassSelector")
+                    sel += "." + fraction.name;
+                else
+                    sel += fraction.name;
             }
             selectors.push(sel);
         }
@@ -158,8 +177,8 @@ export class CssTreeStylesheetService {
         specificities.forEach(specificity => sum += specificity.a * 10000 + specificity.b * 100 + specificity.c);
         return sum;
     }
-    findDeclarationInRule(rule, property) {
-        return rule.block.children.find(declaration => declaration.property == property.name);
+    findDeclarationInRule(rule, styleName) {
+        return rule.block.children.find(declaration => declaration.property == styleName);
     }
     elementMatchesASelector(designItem, selectors) {
         for (const selector of selectors)

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -1,6 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IProperty } from "../propertiesService/IProperty.js";
 export interface IStyleRule {
     selector: string;
     declarations: IStyleDeclaration[];
@@ -13,16 +12,17 @@ export interface IStyleDeclaration {
     important: boolean;
 }
 export interface IStylesheet {
-    stylesheet: string;
+    content: string;
     name: string;
 }
 export interface IStylesheetService {
-    setStylesheets(stylesheets: IStylesheet[]): any;
+    setStylesheets(stylesheets: IStylesheet[]): void;
     getStylesheets(): IStylesheet[];
     getAppliedRules(designItem: IDesignItem): IStyleRule[];
-    getDeclarations(designItem: IDesignItem, property: IProperty): IStyleDeclaration[];
-    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
     updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IStyleRule, declaration: IStyleDeclaration, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IStyleRule, declaration: IStyleDeclaration): boolean;
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;

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

@@ -59,6 +59,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     extensionManager: IExtensionManager;
     private _pointerextensions;
     private _onDblClickBound;
+    private _lastCopiedPrimaryItem;
     constructor();
     get designerWidth(): string;
     set designerWidth(value: string);

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

@@ -163,6 +163,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     extensionManager;
     _pointerextensions;
     _onDblClickBound;
+    _lastCopiedPrimaryItem;
     constructor() {
         super();
         this._restoreCachedInititalValues();
@@ -219,7 +220,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (this.instanceServiceContainer.stylesheetService) {
             styles.push(...this.instanceServiceContainer.stylesheetService
                 .getStylesheets()
-                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.stylesheet)]))));
+                .map(x => cssFromString(this.buildPatchedStyleSheet([cssFromString(x.content)]))));
         }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
@@ -365,13 +366,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
     async handleCopyCommand() {
+        this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
         await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand(disableRestoreOfPositions) {
         const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
         let pasteContainer = this.rootDesignItem;
-        let pCon = this.instanceServiceContainer.selectionService.primarySelection;
+        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
         while (pCon != null) {
             const containerStyle = getComputedStyle(pCon.element);
             let newContainerService;
@@ -420,8 +422,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (undoService)
             this.instanceServiceContainer.register("undoService", undoService(this));
         const selectionService = this.serviceContainer.getLastService('selectionService');
-        if (selectionService)
+        if (selectionService) {
             this.instanceServiceContainer.register("selectionService", selectionService(this));
+            this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
+                this._lastCopiedPrimaryItem = null;
+            });
+        }
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         const contentService = this.serviceContainer.getLastService('contentService');
         if (contentService)

package/dist/elements/widgets/designerView/extensions/GridExtension.d.ts

@@ -5,16 +5,47 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class GridExtension extends AbstractExtension {
     private _initialPoint;
     private _initialSizes;
-    private _rects;
+    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;
-    _drawResizeCircles(gap: any, oldCircle?: SVGCircleElement): SVGCircleElement;
+    _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: any, diff: any, gapIndex: any, percentTarget: 'width' | 'heigth'): string;
-    _getCssUnit(cssValue: string): string;
+    _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;
 }