@node-projects/web-component-designer 0.0.216 → 0.0.218

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

@@ -1,136 +1,136 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
-import { StylesheetStyleChangeAction } from "../undoService/transactionItems/StylesheetStyleChangeAction.js";
-export class AbstractStylesheetService {
-    _stylesheets = new Map();
-    _documentStylesheets = new Map();
-    _allStylesheets = new Map();
-    _instanceServiceContainer;
-    constructor(designerCanvas) {
-        this._instanceServiceContainer = designerCanvas.instanceServiceContainer;
-    }
-    async setStylesheets(stylesheets) {
-        await this.internalSetStylesheets(stylesheets, this._stylesheets);
-    }
-    async setDocumentStylesheets(stylesheets) {
-        await this.internalSetStylesheets(stylesheets, this._documentStylesheets);
-    }
-    async internalSetStylesheets(stylesheets, targetMap) {
-        if (targetMap != null && stylesheets != null && targetMap.size == stylesheets.length && stylesheets.every(x => targetMap.has(x.name))) {
-            for (let stylesheet of stylesheets) {
-                const old = targetMap.get(stylesheet.name);
-                if (old.stylesheet.content != stylesheet.content) {
-                    try {
-                        targetMap.set(stylesheet.name, {
-                            stylesheet: stylesheet,
-                            ast: await this.internalParse(stylesheet.content)
-                        });
-                    }
-                    catch (err) {
-                        console.warn("error parsing stylesheet", stylesheet, err);
-                    }
-                    if (targetMap == this._stylesheets)
-                        this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
-                }
-            }
-        }
-        else if (stylesheets != null) {
-            targetMap.clear();
-            for (let stylesheet of stylesheets) {
-                try {
-                    targetMap.set(stylesheet.name, {
-                        stylesheet: stylesheet,
-                        ast: await this.internalParse(stylesheet.content)
-                    });
-                }
-                catch (err) {
-                    console.warn("error parsing stylesheet", stylesheet, err);
-                }
-            }
-            if (targetMap == this._stylesheets)
-                this.stylesheetsChanged.emit();
-        }
-        else {
-            targetMap.clear();
-        }
-        this._allStylesheets.clear();
-        for (let s of this._documentStylesheets) {
-            this._allStylesheets.set(s[0], s[1]);
-        }
-        for (let s of this._stylesheets) {
-            this._allStylesheets.set(s[0], s[1]);
-        }
-    }
-    //todo: rename to externalStylesheets
-    getStylesheets() {
-        let stylesheets = [];
-        for (let item of this._stylesheets) {
-            stylesheets.push(item[1].stylesheet);
-        }
-        ;
-        /*for (let item of this._documentStylesheets) {
-            stylesheets.push(item[1].stylesheet);
-        };*/
-        return stylesheets;
-    }
-    updateDeclarationValue(declaration, value, important) {
-        if (!declaration.stylesheet.designItem) {
-            const action = new StylesheetStyleChangeAction(this, declaration, value, declaration.value);
-            this._instanceServiceContainer.undoService.execute(action);
-        }
-        else {
-            this.updateDeclarationValueWithoutUndo(declaration, value, important);
-        }
-    }
-    stylesheetChanged = new TypedEvent();
-    stylesheetsChanged = new TypedEvent();
-    elementMatchesASelector(designItem, selectors) {
-        for (const selector of selectors)
-            if (designItem.element.matches(selector))
-                return true;
-        return false;
-    }
-    static buildPatchedStyleSheet(value) {
-        let style = '';
-        for (let s of value) {
-            style += this.traverseAndCollectRules(s);
-        }
-        return style;
-    }
-    static traverseAndCollectRules(ruleContainer) {
-        let t = '';
-        for (let rule of ruleContainer.cssRules) {
-            if ((rule instanceof CSSContainerRule
-                || rule instanceof CSSSupportsRule
-                || rule instanceof CSSMediaRule)
-                && rule.cssRules) {
-                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
-            }
-            if (rule instanceof CSSStyleRule) {
-                let parts = rule.selectorText.split(',');
-                let sel = "";
-                for (let p of parts) {
-                    if (p.includes(DesignerCanvas.cssprefixConstant)) {
-                        sel += p;
-                        continue;
-                    }
-                    if (sel)
-                        sel += ',';
-                    sel += DesignerCanvas.cssprefixConstant + p.trimStart();
-                }
-                t += sel;
-                let cssText = rule.style.cssText;
-                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
-                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
-                    let entr = rule.styleMap.entries();
-                    cssText = '';
-                    for (let e of entr) {
-                        cssText += e[0] + ':' + e[1].toString() + ';';
-                    }
-                }
-                t += '{' + cssText + '}';
-            }
-        }
-        return t;
-    }
-}
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
+import { StylesheetStyleChangeAction } from "../undoService/transactionItems/StylesheetStyleChangeAction.js";
+export class AbstractStylesheetService {
+    _stylesheets = new Map();
+    _documentStylesheets = new Map();
+    _allStylesheets = new Map();
+    _instanceServiceContainer;
+    constructor(designerCanvas) {
+        this._instanceServiceContainer = designerCanvas.instanceServiceContainer;
+    }
+    async setStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._stylesheets);
+    }
+    async setDocumentStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._documentStylesheets);
+    }
+    async internalSetStylesheets(stylesheets, targetMap) {
+        if (targetMap != null && stylesheets != null && targetMap.size == stylesheets.length && stylesheets.every(x => targetMap.has(x.name))) {
+            for (let stylesheet of stylesheets) {
+                const old = targetMap.get(stylesheet.name);
+                if (old.stylesheet.content != stylesheet.content) {
+                    try {
+                        targetMap.set(stylesheet.name, {
+                            stylesheet: stylesheet,
+                            ast: await this.internalParse(stylesheet.content)
+                        });
+                    }
+                    catch (err) {
+                        console.warn("error parsing stylesheet", stylesheet, err);
+                    }
+                    if (targetMap == this._stylesheets)
+                        this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
+                }
+            }
+        }
+        else if (stylesheets != null) {
+            targetMap.clear();
+            for (let stylesheet of stylesheets) {
+                try {
+                    targetMap.set(stylesheet.name, {
+                        stylesheet: stylesheet,
+                        ast: await this.internalParse(stylesheet.content)
+                    });
+                }
+                catch (err) {
+                    console.warn("error parsing stylesheet", stylesheet, err);
+                }
+            }
+            if (targetMap == this._stylesheets)
+                this.stylesheetsChanged.emit();
+        }
+        else {
+            targetMap.clear();
+        }
+        this._allStylesheets.clear();
+        for (let s of this._documentStylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+        for (let s of this._stylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+    }
+    //todo: rename to externalStylesheets
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        /*for (let item of this._documentStylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        };*/
+        return stylesheets;
+    }
+    updateDeclarationValue(declaration, value, important) {
+        if (!declaration.stylesheet.designItem) {
+            const action = new StylesheetStyleChangeAction(this, declaration, value, declaration.value);
+            this._instanceServiceContainer.undoService.execute(action);
+        }
+        else {
+            this.updateDeclarationValueWithoutUndo(declaration, value, important);
+        }
+    }
+    stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
+    elementMatchesASelector(designItem, selectors) {
+        for (const selector of selectors)
+            if (designItem.element.matches(selector))
+                return true;
+        return false;
+    }
+    static buildPatchedStyleSheet(value) {
+        let style = '';
+        for (let s of value) {
+            style += this.traverseAndCollectRules(s);
+        }
+        return style;
+    }
+    static traverseAndCollectRules(ruleContainer) {
+        let t = '';
+        for (let rule of ruleContainer.cssRules) {
+            if ((rule instanceof CSSContainerRule
+                || rule instanceof CSSSupportsRule
+                || rule instanceof CSSMediaRule)
+                && rule.cssRules) {
+                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+            }
+            if (rule instanceof CSSStyleRule) {
+                let parts = rule.selectorText.split(',');
+                let sel = "";
+                for (let p of parts) {
+                    if (p.includes(DesignerCanvas.cssprefixConstant)) {
+                        sel += p;
+                        continue;
+                    }
+                    if (sel)
+                        sel += ',';
+                    sel += DesignerCanvas.cssprefixConstant + p.trimStart();
+                }
+                t += sel;
+                let cssText = rule.style.cssText;
+                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
+                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
+                    let entr = rule.styleMap.entries();
+                    cssText = '';
+                    for (let e of entr) {
+                        cssText += e[0] + ':' + e[1].toString() + ';';
+                    }
+                }
+                t += '{' + cssText + '}';
+            }
+        }
+        return t;
+    }
+}

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

@@ -1,40 +1,40 @@
-import { IDesignItem } from "../../item/IDesignItem.js";
-import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
-import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
-import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
-type CssRuleAST = any;
-type CssDeclarationAST = any;
-type CssStylesheetAST = any;
-interface IRuleWithAST extends IStyleRule {
-    ast: CssRuleAST;
-    declarations: IDeclarationWithAST[];
-    stylesheet: IStylesheet;
-    stylesheetName: string;
-}
-interface IDeclarationWithAST extends IStyleDeclaration {
-    ast: CssDeclarationAST;
-}
-export declare class CssToolsStylesheetService extends AbstractStylesheetService {
-    constructor(designerCanvas: IDesignerCanvas);
-    _tools: {
-        parse: (css: string, options?: {
-            source?: string;
-            silent?: boolean;
-        }) => CssStylesheetAST;
-        stringify: (node: CssStylesheetAST, options?: {
-            indent?: string;
-            compress?: boolean;
-            emptyDeclarations?: boolean;
-        }) => string;
-    };
-    internalParse(style: string): Promise<any>;
-    getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
-    private getRulesFromAst;
-    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
-    updateDeclarationValueWithoutUndo(declaration: IDeclarationWithAST, value: string, important: boolean): void;
-    insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
-    removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
-    private updateStylesheet;
-    updateCompleteStylesheet(name: string, newStyle: string): void;
-}
-export {};
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+type CssRuleAST = any;
+type CssDeclarationAST = any;
+type CssStylesheetAST = any;
+interface IRuleWithAST extends IStyleRule {
+    ast: CssRuleAST;
+    declarations: IDeclarationWithAST[];
+    stylesheet: IStylesheet;
+    stylesheetName: string;
+}
+interface IDeclarationWithAST extends IStyleDeclaration {
+    ast: CssDeclarationAST;
+}
+export declare class CssToolsStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas: IDesignerCanvas);
+    _tools: {
+        parse: (css: string, options?: {
+            source?: string;
+            silent?: boolean;
+        }) => CssStylesheetAST;
+        stringify: (node: CssStylesheetAST, options?: {
+            indent?: string;
+            compress?: boolean;
+            emptyDeclarations?: boolean;
+        }) => string;
+    };
+    internalParse(style: string): Promise<any>;
+    getAppliedRules(designItem: IDesignItem): IRuleWithAST[];
+    private getRulesFromAst;
+    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
+    updateDeclarationValueWithoutUndo(declaration: IDeclarationWithAST, value: string, important: boolean): void;
+    insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
+    private updateStylesheet;
+    updateCompleteStylesheet(name: string, newStyle: string): void;
+}
+export {};

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

@@ -1,99 +1,99 @@
-import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
-export class CssToolsStylesheetService extends AbstractStylesheetService {
-    constructor(designerCanvas) {
-        super(designerCanvas);
-    }
-    _tools;
-    async internalParse(style) {
-        if (!this._tools)
-            this._tools = await import('@adobe/css-tools');
-        return this._tools.parse(style);
-    }
-    getAppliedRules(designItem) {
-        let rules = [];
-        for (let item of this._allStylesheets.entries()) {
-            if (!item[1].ast?.stylesheet?.rules)
-                continue;
-            let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem))
-                .map(x => ({
-                selector: x.selectors.join(', '),
-                declarations: x.declarations.filter(y => y.type == 'declaration').map(y => ({
-                    name: y.property,
-                    value: y.value.endsWith('!important') ? y.value.substring(0, y.value.length - 10).trimEnd() : y.value,
-                    important: y.value.endsWith('!important'),
-                    parent: null,
-                    ast: y,
-                    stylesheet: item[1].stylesheet
-                })),
-                specificity: 0,
-                stylesheetName: item[0],
-                ast: x,
-            }));
-            rs.forEach(x => x.declarations.forEach(y => y.parent = x));
-            rules.push(...rs);
-        }
-        ;
-        return rules;
-    }
-    *getRulesFromAst(cssAtRuleAst, stylesheet, designItem) {
-        for (const atRule of cssAtRuleAst) {
-            if (atRule.type == 'media') {
-                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
-            }
-            else if (atRule.type == 'supports') {
-                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
-            }
-            else if (atRule.type == 'rule') {
-                if (this.elementMatchesASelector(designItem, atRule.selectors))
-                    yield atRule;
-            }
-        }
-        return null;
-    }
-    getDeclarations(designItem, styleName) {
-        return this.getAppliedRules(designItem).flatMap(x => x.declarations).filter(x => x.name == styleName);
-    }
-    updateDeclarationValueWithoutUndo(declaration, value, important) {
-        declaration.ast.value = important ? value + ' !important' : value;
-        let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
-        this.updateStylesheet(ss);
-    }
-    insertDeclarationIntoRule(rule, property, value, important) {
-        rule.ast.declarations.push({
-            type: 'declaration',
-            property: property,
-            value: important ? value + ' !important' : value
-        });
-        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
-        return true;
-    }
-    removeDeclarationFromRule(rule, property) {
-        let idx = rule.ast.declarations.findIndex(x => x.property == property);
-        if (idx == -1)
-            return false;
-        rule.ast.declarations.splice(idx, 1);
-        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
-        return true;
-    }
-    updateStylesheet(ss) {
-        const old = ss.stylesheet.content;
-        ss.stylesheet.content = this._tools.stringify(ss.ast, { indent: '    ', compress: false, emptyDeclarations: true });
-        if (ss.stylesheet.designItem) {
-            ss.stylesheet.designItem.content = ss.stylesheet.content;
-        }
-        else
-            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-    }
-    updateCompleteStylesheet(name, newStyle) {
-        const ss = this._allStylesheets.get(name);
-        if (ss.stylesheet.content != newStyle) {
-            const old = ss.stylesheet.content;
-            ss.stylesheet.content = newStyle;
-            if (ss.stylesheet.designItem) {
-                ss.stylesheet.designItem.content = ss.stylesheet.content;
-            }
-            else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
-        }
-    }
-}
+import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
+export class CssToolsStylesheetService extends AbstractStylesheetService {
+    constructor(designerCanvas) {
+        super(designerCanvas);
+    }
+    _tools;
+    async internalParse(style) {
+        if (!this._tools)
+            this._tools = await import('@adobe/css-tools');
+        return this._tools.parse(style);
+    }
+    getAppliedRules(designItem) {
+        let rules = [];
+        for (let item of this._allStylesheets.entries()) {
+            if (!item[1].ast?.stylesheet?.rules)
+                continue;
+            let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem))
+                .map(x => ({
+                selector: x.selectors.join(', '),
+                declarations: x.declarations.filter(y => y.type == 'declaration').map(y => ({
+                    name: y.property,
+                    value: y.value.endsWith('!important') ? y.value.substring(0, y.value.length - 10).trimEnd() : y.value,
+                    important: y.value.endsWith('!important'),
+                    parent: null,
+                    ast: y,
+                    stylesheet: item[1].stylesheet
+                })),
+                specificity: 0,
+                stylesheetName: item[0],
+                ast: x,
+            }));
+            rs.forEach(x => x.declarations.forEach(y => y.parent = x));
+            rules.push(...rs);
+        }
+        ;
+        return rules;
+    }
+    *getRulesFromAst(cssAtRuleAst, stylesheet, designItem) {
+        for (const atRule of cssAtRuleAst) {
+            if (atRule.type == 'media') {
+                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
+            }
+            else if (atRule.type == 'supports') {
+                yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);
+            }
+            else if (atRule.type == 'rule') {
+                if (this.elementMatchesASelector(designItem, atRule.selectors))
+                    yield atRule;
+            }
+        }
+        return null;
+    }
+    getDeclarations(designItem, styleName) {
+        return this.getAppliedRules(designItem).flatMap(x => x.declarations).filter(x => x.name == styleName);
+    }
+    updateDeclarationValueWithoutUndo(declaration, value, important) {
+        declaration.ast.value = important ? value + ' !important' : value;
+        let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
+        this.updateStylesheet(ss);
+    }
+    insertDeclarationIntoRule(rule, property, value, important) {
+        rule.ast.declarations.push({
+            type: 'declaration',
+            property: property,
+            value: important ? value + ' !important' : value
+        });
+        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
+        return true;
+    }
+    removeDeclarationFromRule(rule, property) {
+        let idx = rule.ast.declarations.findIndex(x => x.property == property);
+        if (idx == -1)
+            return false;
+        rule.ast.declarations.splice(idx, 1);
+        this.updateStylesheet(this._allStylesheets.get(rule.stylesheetName));
+        return true;
+    }
+    updateStylesheet(ss) {
+        const old = ss.stylesheet.content;
+        ss.stylesheet.content = this._tools.stringify(ss.ast, { indent: '    ', compress: false, emptyDeclarations: true });
+        if (ss.stylesheet.designItem) {
+            ss.stylesheet.designItem.content = ss.stylesheet.content;
+        }
+        else
+            this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+    }
+    updateCompleteStylesheet(name, newStyle) {
+        const ss = this._allStylesheets.get(name);
+        if (ss.stylesheet.content != newStyle) {
+            const old = ss.stylesheet.content;
+            ss.stylesheet.content = newStyle;
+            if (ss.stylesheet.designItem) {
+                ss.stylesheet.designItem.content = ss.stylesheet.content;
+            }
+            else
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+        }
+    }
+}