@node-projects/web-component-designer 0.0.169 → 0.0.171

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

@@ -0,0 +1,185 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
+export class CssTreeStylesheetService {
+    _stylesheets = new Map();
+    stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
+    constructor() { }
+    setStylesheets(stylesheets) {
+        if (stylesheets != null) {
+            this._stylesheets = new Map();
+            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 })))
+                });
+            }
+            this.stylesheetsChanged.emit();
+        }
+        else {
+            this._stylesheets = null;
+        }
+    }
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        return stylesheets;
+    }
+    /* Section covers the retrieval of rules and declarations */
+    getAppliedRulesInternal(designItem) {
+        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)));
+        }
+        ;
+        return styles;
+    }
+    getAppliedRules(designItem) {
+        let rules = this.getAppliedRulesInternal(designItem);
+        if (!rules || rules.length == 0)
+            return [];
+        let retCollection = [];
+        for (let rule of rules) {
+            retCollection.push({
+                ...rule,
+                declarations: rule.ast.block.children.map((declaration) => {
+                    return {
+                        name: declaration.property,
+                        value: declaration.value.value,
+                        important: declaration.important == true,
+                        specificity: rule.specificity,
+                        parent: rule,
+                        ast: declaration,
+                    };
+                })
+            });
+        }
+        return retCollection;
+    }
+    getDeclarationInternal(designItem, prop) {
+        let rules = this.getAppliedRulesInternal(designItem);
+        if (!rules)
+            return null;
+        let declarations = [];
+        for (let rule of rules) {
+            let declaration = this.findDeclarationInRule(rule.ast, prop);
+            if (!declaration)
+                continue;
+            declarations.push({
+                ast: declaration,
+                parent: rule,
+                name: prop.name,
+                value: declaration.value.value,
+                important: declaration.important == true,
+            });
+        }
+        ;
+        return declarations;
+    }
+    getDeclarations(designItem, prop) {
+        let declarations = this.getDeclarationInternal(designItem, prop);
+        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 });
+        return true;
+    }
+    /* Section covers the internal traversal creation of rules and declarations */
+    *rulesFromAST(ast, stylesheet, source, designItem, previousCheck = '') {
+        let parent = ast["children"] != null ? ast : ast.block;
+        for (const child of parent.children) {
+            if (child.type == "Atrule") {
+                const currentCheck = this.buildAtRuleString(child, stylesheet);
+                if (currentCheck.type === "@media" && !window.matchMedia(currentCheck.sel))
+                    continue;
+                if (currentCheck.type === "@supports" && !CSS.supports(currentCheck.sel))
+                    continue;
+                let ruleCollection = this.rulesFromAST(child, stylesheet, source, designItem, previousCheck + currentCheck.type + " " + currentCheck.sel + "\n");
+                if (ruleCollection) {
+                    for (const r of ruleCollection) {
+                        if (!this.elementMatchesASelector(designItem, this.buildSelectorString(r.ast.prelude)))
+                            continue;
+                        yield r;
+                    }
+                }
+            }
+            if (child.type == "Rule") {
+                let selectors = this.buildSelectorString(child.prelude);
+                if (!this.elementMatchesASelector(designItem, selectors))
+                    continue;
+                yield ({
+                    ast: child,
+                    selector: previousCheck + this.buildSelectorString(child.prelude).join(", "),
+                    specificity: this.getSpecificity(child.prelude),
+                    stylesheetName: source,
+                    declarations: null,
+                });
+            }
+        }
+        ;
+    }
+    /* Utility functions for building selectors, specificity and so on  */
+    astHasChildren(ast) {
+        return ast != null && ast["children"] != null && ast["children"].length > 0;
+    }
+    buildSelectorString(selectorsAST) {
+        let selectors = [];
+        for (let selector of selectorsAST.children) {
+            let sel = "";
+            for (let fraction of selector.children) {
+                sel += fraction.name;
+            }
+            selectors.push(sel);
+        }
+        ;
+        return selectors;
+    }
+    getSpecificity(selector) {
+        const specificities = calculateSpecifity(selector);
+        let sum = 0;
+        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);
+    }
+    elementMatchesASelector(designItem, selectors) {
+        for (const selector of selectors)
+            if (designItem.element.matches(selector))
+                return true;
+        return false;
+    }
+    buildAtRuleString(ast, stylesheet) {
+        return {
+            sel: stylesheet.slice(ast.prelude.loc.start.offset, ast.prelude.loc.end.offset),
+            type: "@" + ast.name
+        };
+    }
+    sortDeclarations(declarations) {
+        if (declarations == null || declarations.length == 0)
+            return null;
+        return declarations.sort((dec1, dec2) => {
+            if (dec1.parent.specificity > dec2.parent.specificity)
+                return -1;
+            return 1;
+        });
+    }
+}

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

@@ -1,5 +1,4 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
-import { IProperty } from "../propertiesService/IProperty.js";
 import { IStyleDeclaration, IStyleRule, IStylesheet, IStylesheetService } from "./IStylesheetService.js";
 import type * as csstree from 'css-tree';
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
@@ -26,15 +25,17 @@ export declare class CssTreeStylesheetService implements IStylesheetService {
     stylesheetChanged: TypedEvent<{
         stylesheet: IStylesheet;
     }>;
+    stylesheetsChanged: TypedEvent<void>;
     constructor();
     setStylesheets(stylesheets: IStylesheet[]): void;
     getStylesheets(): IStylesheet[];
     private getAppliedRulesInternal;
     getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
     private getDeclarationInternal;
-    getDeclarations(designItem: IDesignItem, prop: IProperty): IDeclarationWithAST[];
-    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    getDeclarations(designItem: IDesignItem, stlyeName: string): IDeclarationWithAST[];
     updateDeclarationWithDeclaration(declaration: IDeclarationWithAST, value: string, important: boolean): boolean;
+    insertDeclarationIntoRule(rule: IRuleWithAST, declaration: IStyleDeclaration, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IRuleWithAST, declaration: IDeclarationWithAST): boolean;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;

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

@@ -3,6 +3,7 @@ import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
 export class CssTreeStylesheetService {
     _stylesheets = new Map();
     stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
     constructor() { }
     setStylesheets(stylesheets) {
         if (stylesheets != null) {
@@ -13,6 +14,7 @@ export class CssTreeStylesheetService {
                     ast: window.csstree.toPlainObject((window.csstree.parse(stylesheet.stylesheet, { positions: true, parseValue: false })))
                 });
             }
+            this.stylesheetsChanged.emit();
         }
         else {
             this._stylesheets = null;
@@ -31,7 +33,7 @@ export class CssTreeStylesheetService {
         let styles = [];
         for (let item of this._stylesheets) {
             if (!item[1].ast || !this.astHasChildren(item[1].ast))
-                break;
+                continue;
             styles = styles.concat(Array.from(this.rulesFromAST(item[1].ast, item[1].stylesheet.stylesheet, item[0], designItem)));
         }
         ;
@@ -59,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,
             });
@@ -79,27 +81,37 @@ 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._stylesheets.get(declaration.parent.stylesheetName).ast = window.csstree.toPlainObject(window.csstree.fromPlainObject(this._stylesheets.get(declaration.parent.stylesheetName).ast));
         this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(declaration.parent.stylesheetName).stylesheet });
         return true;
     }
+    insertDeclarationIntoRule(rule, declaration, important) {
+        rule.ast.block.children.push(window.csstree.toPlainObject(window.csstree.parse(declaration.name + ": " + declaration.value + (declaration.important ? "!important" : ""), { context: 'declaration', parseValue: false })));
+        this._stylesheets.get(rule.stylesheetName).stylesheet.stylesheet = 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;
+    }
+    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.stylesheet = 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 */
     *rulesFromAST(ast, stylesheet, source, designItem, previousCheck = '') {
         let parent = ast["children"] != null ? ast : ast.block;
@@ -143,7 +155,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);
         }
@@ -156,8 +173,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[];
@@ -17,13 +16,15 @@ export interface IStylesheet {
     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;
     }>;
+    stylesheetsChanged: TypedEvent<void>;
 }

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

@@ -429,6 +429,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.servicesChanged.on(e => {
             if (e.serviceName == 'stylesheetService') {
                 this.applyAllStyles();
+                this.instanceServiceContainer.stylesheetService.stylesheetChanged.on(() => this.applyAllStyles());
+                this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => this.applyAllStyles());
             }
         });
         this.extensionManager = new ExtensionManager(this);

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;
 }