@node-projects/web-component-designer 0.0.173 → 0.0.175

package/dist/elements/helper/CssUnitConverter.js

@@ -2,6 +2,8 @@
 const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr'];
 const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
 export function convertCssUnitToPixel(cssValue, target, percentTarget) {
+    if (!cssValue)
+        return null;
     const supportedUnits = {
         // Absolute sizes
         'px': value => value,
@@ -55,9 +57,13 @@ export function convertCssUnitToPixel(cssValue, target, percentTarget) {
 }
 export function getCssUnit(cssValue) {
     const matches = cssValue.trim().match(pattern);
-    return matches[2].toLowerCase();
+    if (matches)
+        return matches[2].toLowerCase();
+    return null;
 }
 export function convertCssUnit(cssValue, target, percentTarget, unit) {
+    if (!cssValue)
+        return null;
     const supportedUnits = {
         // Absolute sizes
         'px': value => value,

package/dist/elements/item/DesignItem.js

@@ -20,9 +20,16 @@ export class DesignItem {
     appliedDesignerExtensions = new Map();
     shouldAppliedDesignerExtensions = new Map();
     async clone() {
-        const html = DomConverter.ConvertToString([this], null, false);
-        const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
-        return parsed[0];
+        try {
+            const html = DomConverter.ConvertToString([this], null, false);
+            const parsed = await this.serviceContainer.htmlParserService.parse(html, this.serviceContainer, this.instanceServiceContainer);
+            return parsed[0];
+        }
+        catch (err) {
+            //TODO: clone service for design item, maybe refactor copy&paste to use this also...
+            console.warn("could not clone design item.", this);
+        }
+        return null;
     }
     replaceNode(newNode) {
         DesignItem._designItemMap.delete(this.node);

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

@@ -92,8 +92,8 @@ export class CssTreeStylesheetService {
         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);
+        // After generating the stylesheet, parse again (so line numbers are correct)
+        sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
         this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
         return true;
     }
@@ -101,8 +101,8 @@ export class CssTreeStylesheetService {
         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);
+        // After generating the stylesheet, parse again (so line numbers are correct)
+        sourceNode.ast = window.csstree.toPlainObject((window.csstree.parse(sourceNode.stylesheet.content, { positions: true, parseValue: false })));
         this.stylesheetChanged.emit({ stylesheet: sourceNode.stylesheet });
         return true;
     }
@@ -112,7 +112,8 @@ export class CssTreeStylesheetService {
             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));
+        // After generating the stylesheet, parse again (so line numbers are correct)
+        this._stylesheets.get(rule.stylesheetName).ast = window.csstree.toPlainObject((window.csstree.parse(this._stylesheets.get(rule.stylesheetName).stylesheet.content, { positions: true, parseValue: false })));
         this.stylesheetChanged.emit({ stylesheet: this._stylesheets.get(rule.stylesheetName).stylesheet });
         return true;
     }
@@ -129,19 +130,19 @@ export class CssTreeStylesheetService {
                 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)))
+                        if (!this.elementMatchesASelector(designItem, this.buildSelectorString(r.ast.prelude, stylesheet)))
                             continue;
                         yield r;
                     }
                 }
             }
             if (child.type == "Rule") {
-                let selectors = this.buildSelectorString(child.prelude);
+                let selectors = this.buildSelectorString(child.prelude, stylesheet);
                 if (!this.elementMatchesASelector(designItem, selectors))
                     continue;
                 yield ({
                     ast: child,
-                    selector: previousCheck + this.buildSelectorString(child.prelude).join(", "),
+                    selector: previousCheck + this.buildSelectorString(child.prelude, stylesheet).join(", "),
                     specificity: this.getSpecificity(child.prelude),
                     stylesheetName: source,
                     declarations: null,
@@ -154,22 +155,13 @@ export class CssTreeStylesheetService {
     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) {
-                if (fraction.type == "IdSelector")
-                    sel += "#" + fraction.name;
-                else if (fraction.type == "ClassSelector")
-                    sel += "." + fraction.name;
-                else
-                    sel += fraction.name;
-            }
-            selectors.push(sel);
+    buildSelectorString(selectorsAST, stylesheet) {
+        if (selectorsAST.type == 'SelectorList') {
+            return [...selectorsAST.children.map(x => this.buildSelectorString(x, stylesheet)[0])];
+        }
+        else {
+            return [stylesheet.substring(selectorsAST.loc.start.offset, selectorsAST.loc.end.offset)];
         }
-        ;
-        return selectors;
     }
     getSpecificity(selector) {
         const specificities = calculateSpecifity(selector);

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -200,7 +200,7 @@ export class PointerTool {
                         this._clonedItems = [];
                         for (let d of this._actionStartedDesignItems) {
                             const clone = await d.clone();
-                            if (this._clonedItems)
+                            if (this._clonedItems && clone)
                                 this._clonedItems.push(clone);
                         }
                     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.173",
+  "version": "0.0.175",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",