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

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

@@ -0,0 +1,183 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
+export class CssTreeStylesheetService {
+    _stylesheets = new Map();
+    stylesheetChanged = 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 })))
+                });
+            }
+        }
+        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/IStylesheetService.d.ts

@@ -0,0 +1,29 @@
+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[];
+    specificity: number;
+    stylesheetName?: string;
+}
+export interface IStyleDeclaration {
+    name: string;
+    value: string;
+    important: boolean;
+}
+export interface IStylesheet {
+    stylesheet: string;
+    name: string;
+}
+export interface IStylesheetService {
+    setStylesheets(stylesheets: IStylesheet[]): any;
+    getStylesheets(): IStylesheet[];
+    getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    getDeclarations(designItem: IDesignItem, property: IProperty): IStyleDeclaration[];
+    updateDeclarationWithProperty(designItem: IDesignItem, property: IProperty, value: string, important: boolean): boolean;
+    updateDeclarationWithDeclaration(declaration: IStyleDeclaration, value: string, important: boolean): boolean;
+    stylesheetChanged: TypedEvent<{
+        stylesheet: IStylesheet;
+    }>;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+type Specificity = {
+    a: 0;
+    b: 0;
+    c: 0;
+};
+declare const calculate: (selectorAST: any) => Specificity[];
+export { calculate };

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

@@ -0,0 +1,178 @@
+const calculateSpecificityOfSelectorObject = (selectorObj) => {
+    // https://www.w3.org/TR/selectors-4/#specificity-rules
+    const specificity = { a: 0, b: 0, c: 0 };
+    selectorObj.children.forEach((child) => {
+        switch (child.type) {
+            case 'IdSelector':
+                specificity.a += 1;
+                break;
+            case 'AttributeSelector':
+            case 'ClassSelector':
+                specificity.b += 1;
+                break;
+            case 'PseudoClassSelector':
+                switch (child.name.toLowerCase()) {
+                    // “The specificity of a :where() pseudo-class is replaced by zero.”
+                    case 'where':
+                        // Noop :)
+                        break;
+                    // “The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.“
+                    case 'is':
+                    case 'matches':
+                    case '-webkit-any':
+                    case '-moz-any':
+                    case 'any':
+                    case 'not':
+                    case 'has':
+                        if (child.children) {
+                            // Calculate Specificity from nested SelectorList
+                            const max1 = max(...calculate(child.children.first));
+                            // Adjust orig specificity
+                            specificity.a += max1.a;
+                            specificity.b += max1.b;
+                            specificity.c += max1.c;
+                        }
+                        break;
+                    // “The specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument”
+                    case 'nth-child':
+                    case 'nth-last-child':
+                        specificity.b += 1;
+                        if (child.children.first.selector) {
+                            // Calculate Specificity from SelectorList
+                            const max2 = max(...calculate(child.children.first.selector));
+                            // Adjust orig specificity
+                            specificity.a += max2.a;
+                            specificity.b += max2.b;
+                            specificity.c += max2.c;
+                        }
+                        break;
+                    // “The specificity of :host is that of a pseudo-class. The specificity of :host() is that of a pseudo-class, plus the specificity of its argument.”
+                    // “The specificity of :host-context() is that of a pseudo-class, plus the specificity of its argument.”
+                    case 'host-context':
+                    case 'host':
+                        specificity.b += 1;
+                        if (child.children) {
+                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
+                            // We work around it by filtering out any Combinator and successive Selectors
+                            const childAST = { type: 'Selector', children: [] };
+                            let foundCombinator = false;
+                            // @ts-ignore
+                            child.children.first.children.forEach((entry) => {
+                                if (foundCombinator)
+                                    return false;
+                                if (entry.type === 'Combinator') {
+                                    foundCombinator = true;
+                                    return false;
+                                }
+                                childAST.children.push(entry);
+                            });
+                            // Calculate Specificity from Selector
+                            const childSpecificity = calculate(childAST)[0];
+                            // Adjust orig specificity
+                            specificity.a += childSpecificity.a;
+                            specificity.b += childSpecificity.b;
+                            specificity.c += childSpecificity.c;
+                        }
+                        break;
+                    // Improper use of Pseudo-Class Selectors instead of a Pseudo-Element
+                    // @ref https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#index
+                    case 'after':
+                    case 'before':
+                    case 'first-letter':
+                    case 'first-line':
+                        specificity.c += 1;
+                        break;
+                    default:
+                        specificity.b += 1;
+                        break;
+                }
+                break;
+            case 'PseudoElementSelector':
+                switch (child.name) {
+                    // “The specificity of ::slotted() is that of a pseudo-element, plus the specificity of its argument.”
+                    case 'slotted':
+                        specificity.c += 1;
+                        if (child.children) {
+                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
+                            // We work around it by filtering out any Combinator and successive Selectors
+                            const childAST = { type: 'Selector', children: [] };
+                            let foundCombinator = false;
+                            // @ts-ignore
+                            child.children.first.children.forEach((entry) => {
+                                if (foundCombinator)
+                                    return false;
+                                if (entry.type === 'Combinator') {
+                                    foundCombinator = true;
+                                    return false;
+                                }
+                                childAST.children.push(entry);
+                            });
+                            // Calculate Specificity from Selector
+                            const childSpecificity = calculate(childAST)[0];
+                            // Adjust orig specificity
+                            specificity.a += childSpecificity.a;
+                            specificity.b += childSpecificity.b;
+                            specificity.c += childSpecificity.c;
+                        }
+                        break;
+                    default:
+                        specificity.c += 1;
+                        break;
+                }
+                break;
+            case 'TypeSelector':
+                // Omit namespace
+                let typeSelector = child.name;
+                if (typeSelector.includes('|')) {
+                    typeSelector = typeSelector.split('|')[1];
+                }
+                // “Ignore the universal selector”
+                if (typeSelector !== '*') {
+                    specificity.c += 1;
+                }
+                break;
+            default:
+                // NOOP
+                break;
+        }
+    });
+    return specificity;
+};
+const calculate = (selectorAST) => {
+    // Quit while you're ahead
+    if (!selectorAST) {
+        return [];
+    }
+    // Selector?
+    if (selectorAST.type === 'Selector')
+        return [calculateSpecificityOfSelectorObject(selectorAST)];
+    // SelectorList?
+    // ~> Calculate Specificity for each contained Selector
+    if (selectorAST.type === 'SelectorList') {
+        const specificities = [];
+        selectorAST.children.forEach((selector) => {
+            const specificity = calculateSpecificityOfSelectorObject(selector);
+            specificities.push(specificity);
+        });
+        return specificities;
+    }
+    return null;
+};
+const max = (...specificities) => {
+    const sorted = sort(specificities);
+    return sorted[0];
+};
+const sort = (specificities) => {
+    const sorted = specificities.sort(compare);
+    return sorted.reverse();
+};
+const compare = (s1, s2) => {
+    if (s1.a === s2.a) {
+        if (s1.b === s2.b) {
+            return s1.c - s2.c;
+        }
+        return s1.b - s2.b;
+    }
+    return s1.a - s2.a;
+};
+export { calculate };

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

@@ -0,0 +1,28 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IProperty } from "../propertiesService/IProperty.js";
+import { IStyleDeclaration, IStyleRule, IStylesheetService } from "./IStylesheetService.js";
+import * as csstree from 'css-tree';
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+type RuleWithSpecificity = {
+    rule: csstree.RulePlain;
+    selector: string;
+    specificity: number;
+};
+export declare class StylesheetService implements IStylesheetService {
+    stylesheets: string[];
+    stylesheetChanged: TypedEvent<{
+        stylesheet: string;
+    }>;
+    styles: RuleWithSpecificity[];
+    constructor(stylesheets: string[]);
+    updateDefiningRule(designItem: IDesignItem, property: IProperty, value: string): boolean;
+    private getAppliedRulesInternal;
+    getAppliedRules(designItem: IDesignItem, prop: IProperty): IStyleRule[];
+    private getDeclarationInternal;
+    getDeclarations(designItem: IDesignItem, prop: IProperty): IStyleDeclaration[];
+    private parseStylesheetToRuleset;
+    private buildSelectorString;
+    private getSpecificity;
+    private returnRuleDeclarationIndex;
+}
+export {};

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

@@ -0,0 +1,108 @@
+import * as csstree from 'css-tree';
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { calculate as calculateSpecifity } from "./SpecificityCalculator.js";
+export class StylesheetService {
+    stylesheets;
+    stylesheetChanged = new TypedEvent();
+    styles = [];
+    constructor(stylesheets) {
+        this.stylesheets = stylesheets;
+    }
+    updateDefiningRule(designItem, property, value) {
+        // let highestSpecificityRule = this.getAppliedRules(designItem, property);
+        // if (!highestSpecificityRule) return false;
+        // let newRule = csstree.toPlainObject(csstree.parse("* {" + property.name + ": " + value + "}")) as csstree.StyleSheetPlain;
+        // let index = this.returnRuleDeclarationIndex(highestSpecificityRule, property);
+        // if (index > -1) highestSpecificityRule.block.children.splice(index, 1, (newRule.children[0] as csstree.RulePlain).block.children[0]);
+        // else highestSpecificityRule.block.children.push((newRule.children[0] as csstree.RulePlain).block.children[0]);
+        // if (!this.ruleset) this.ruleset = this.parseStylesheetToRuleset(this.stylesheet);
+        // this.stylesheetChanged.emit({ stylesheet: csstree.generate(csstree.fromPlainObject(this.ruleset)) });
+        return true;
+    }
+    getAppliedRulesInternal(designItem, prop) {
+        return this.parseStylesheetToRuleset(this.stylesheets).filter(item => designItem.element.matches(item.selector));
+    }
+    getAppliedRules(designItem, prop) {
+        let rules = this.getAppliedRulesInternal(designItem, prop);
+        if (!rules)
+            return [];
+        return rules.map(r => {
+            return {
+                selector: r.selector,
+                declarations: r.rule.block.children.map(c => {
+                    return {
+                        // @ts-ignore
+                        name: c.property,
+                        // @ts-ignore
+                        value: c.value.value,
+                        // @ts-ignore
+                        important: c.important == true
+                    };
+                }),
+                specificity: this.getSpecificity(r.rule.prelude)
+            };
+        });
+    }
+    getDeclarationInternal(designItem, prop) {
+        let rules = this.getAppliedRulesInternal(designItem, prop);
+        if (!rules)
+            return null;
+        let declarations = [];
+        rules.forEach(r => {
+            let index = this.returnRuleDeclarationIndex(r.rule, prop);
+            // @ts-ignore
+            if (index > -1)
+                declarations.push(r.rule.block.children[index]);
+        });
+        return declarations;
+    }
+    getDeclarations(designItem, prop) {
+        let decl = this.getDeclarationInternal(designItem, prop);
+        if (!decl)
+            return null;
+        let declarations = [];
+        decl.forEach(d => {
+            declarations.push({
+                name: d.property,
+                value: d.value.value,
+                important: d.important == true
+            });
+        });
+        return declarations;
+    }
+    parseStylesheetToRuleset(stylesheets) {
+        let styles = [];
+        stylesheets.forEach(s => {
+            let stylesheetPlain = csstree.toPlainObject(csstree.parse(s, { positions: true, parseValue: false }));
+            stylesheetPlain.children.forEach((rule) => {
+                styles.push({
+                    rule: rule,
+                    selector: this.buildSelectorString(s, rule.prelude),
+                    specificity: this.getSpecificity(rule.prelude)
+                });
+            });
+        });
+        return styles;
+    }
+    buildSelectorString(stylesheet, selector) {
+        return stylesheet.substring(selector.loc.start.offset, selector.loc.end.offset);
+    }
+    getSpecificity(selector) {
+        const specificities = calculateSpecifity(selector);
+        let sum = 0;
+        specificities.forEach(specificity => sum += specificity.a * 10000 + specificity.b * 100 + specificity.c);
+        return sum;
+    }
+    returnRuleDeclarationIndex(rule, property) {
+        let decl;
+        rule.block.children.forEach((child) => {
+            if (child.property == property.name) {
+                decl = child;
+                return;
+            }
+        });
+        if (!decl)
+            return -1;
+        return rule.block.children.indexOf(decl);
+    }
+}

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

@@ -32,6 +32,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
+    private _additionalStyle;
     private _currentContextMenu;
     private _backgroundImage;
     get zoomFactor(): number;
@@ -52,6 +53,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _firstConnect;
     private _onKeyDownBound;
     private _onKeyUpBound;
+    private cssprefixConstant;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
@@ -66,6 +68,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     get designerOffsetWidth(): number;
     get designerOffsetHeight(): number;
     set additionalStyles(value: CSSStyleSheet[]);
+    get additionalStyles(): CSSStyleSheet[];
+    private applyAllStyles;
     executeCommand(command: IUiCommand): Promise<void>;
     disableBackgroud(): void;
     enableBackground(): void;
@@ -121,4 +125,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     private zoomConvertEventToViewPortCoordinates;
     zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
+    private buildPatchedStyleSheet;
+    private traverseAndCollectRules;
 }