@node-projects/web-component-designer-visualization-addons 0.1.27 → 0.1.29

package/README.md

@@ -15,5 +15,6 @@ It is used for example by the iobroker.webui.
 
 - long
 - blockly
+- @adobe/css-tools ( only if you use Bindingshelper.parseCssBindings() )
 
 ## Usage

package/dist/components/BindingsEditor.d.ts

@@ -34,6 +34,7 @@ export declare class BindingsEditor extends BaseCustomWebComponentConstructorApp
     private _serviceContainer;
     private _shell;
     private _activeRow;
+    private _objNmInput;
     constructor(property: IProperty, binding: IBinding & {
         converter: Record<string, any>;
     }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, shell: VisualizationShell);

package/dist/components/BindingsEditor.js

@@ -12,7 +12,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                             <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;). access iobroker objects in properties via ?propertyName, access the propertyValue via ??propertyName. Bind to ioBroker object via $objectId. You could also use ioBroker signals inside of a Signal Name via {name}">objects</span>
                         </div>
                         <div style="display:flex;align-items: flex-end;">
-                            <input class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
+                            <input id="objnm" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
                             <button @click="_clear" style="height: 22px">X</button>
                             <button @click="_select" style="height: 22px">...</button>
                         </div>
@@ -184,9 +184,11 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     _serviceContainer;
     _shell;
     _activeRow = -1;
+    _objNmInput;
     constructor(property, binding, bindingTarget, serviceContainer, shell) {
         super();
         super._restoreCachedInititalValues();
+        this._objNmInput = this._getDomElement('objnm');
         this._property = property;
         this._binding = binding;
         this._bindingTarget = bindingTarget;
@@ -229,6 +231,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             }
         }
         this._bindingsParse();
+        this._objNmInput.focus();
     }
     _focusRow(index) {
         this._activeRow = index;

package/dist/helpers/BindingsHelper.d.ts

@@ -7,6 +7,8 @@ export declare const bindingPrefixClass = "bind-class:";
 export declare const bindingPrefixCss = "bind-css:";
 export declare const bindingPrefixCssVar = "bind-cssvar:";
 export declare const bindingPrefixContent = "bind-content:";
+export declare const bindingPrefixInsideCss = "bind(";
+export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
 export declare const bindingsInCssRegex: RegExp;
 export type namedBinding = [name: string, binding: VisualizationBinding];
 export declare function isLit(element: Element): boolean;
@@ -32,6 +34,7 @@ export declare class IndirectSignal {
     setState(value: any): void;
 }
 export declare class BindingsHelper {
+    #private;
     _visualizationHandler: VisualizationHandler;
     constructor(visualizationHandler: VisualizationHandler);
     parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;
@@ -39,6 +42,8 @@ export declare class BindingsHelper {
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
     applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement): (() => void)[];
+    parseCssBindings(sheet: string, element: Element, root: HTMLElement): Promise<CSSStyleSheet>;
+    parseCssBinding(value: string, element: Element, root: HTMLElement): string;
     applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement): () => void;
     private addTwoWayBinding;
     private static parseValueWithType;

package/dist/helpers/BindingsHelper.js

@@ -1,4 +1,4 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { TypedEvent, cssFromString } from "@node-projects/base-custom-webcomponent";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 //;,[ are not allowed in bindings, so they could be used for a short form...
@@ -8,6 +8,8 @@ export const bindingPrefixClass = 'bind-class:';
 export const bindingPrefixCss = 'bind-css:';
 export const bindingPrefixCssVar = 'bind-cssvar:';
 export const bindingPrefixContent = 'bind-content:';
+export const bindingPrefixInsideCss = 'bind(';
+export const bindingPrefixInsideCssVarName = '--tmpBinding_';
 export const bindingsInCssRegex = /{{(.*)}}/;
 export function isLit(element) {
     //@ts-ignore
@@ -389,6 +391,83 @@ export class BindingsHelper {
         }
         return retVal;
     }
+    static #cssBindingsVarId = 0;
+    async parseCssBindings(sheet, element, root) {
+        const parser = (await import("@adobe/css-tools"));
+        const ast = parser.parse(sheet);
+        for (let r of ast.stylesheet.rules) {
+            if (r.type === parser.CssTypes.rule) {
+                for (const d of r.declarations) {
+                    if (d.type === parser.CssTypes.declaration) {
+                        if (d.value.includes(bindingPrefixInsideCss)) {
+                            const newValue = this.parseCssBinding(d.value, element, root);
+                            d.value = newValue;
+                        }
+                    }
+                }
+            }
+        }
+        const newStyle = parser.stringify(ast, { indent: '', compress: true });
+        return cssFromString(newStyle);
+    }
+    parseCssBinding(value, element, root) {
+        value = value.trim();
+        let res = '';
+        let tmp = '';
+        let inBind = false;
+        let binding = '';
+        let escape = false;
+        let quote = null;
+        for (let n = 0; n < value.length; n++) {
+            const c = value[n];
+            if (inBind) {
+                if (escape)
+                    binding += c;
+                else if (quote && c === '\\')
+                    escape = true;
+                else if (c === quote)
+                    quote = null;
+                else if (quote === null && c === ')') {
+                    const id = BindingsHelper.#cssBindingsVarId++;
+                    const varName = bindingPrefixInsideCssVarName + id;
+                    let bnd = [varName, { signal: binding, target: BindingTarget.cssvar }];
+                    if (binding.startsWith('{')) {
+                        bnd = JSON.parse(binding);
+                    }
+                    this.applyBinding(element, bnd, '', root);
+                    res += 'var(' + varName + ')';
+                    inBind = false;
+                }
+                else
+                    binding += c;
+            }
+            else if (c === '(') {
+                if (tmp !== 'bind') {
+                    res += tmp;
+                    res += c;
+                }
+                else {
+                    inBind = true;
+                    if (value[n + 1] === '\'' || value[n + 1] === '"') {
+                        n++;
+                        quote = value[n];
+                    }
+                    else {
+                        quote = null;
+                    }
+                }
+                tmp = '';
+            }
+            else if (c === ' ' || c === ',' || c === '(' || c === '+' || c === '-' || c === '*' || c === '/') {
+                res += tmp + c;
+                tmp = '';
+            }
+            else {
+                tmp += c;
+            }
+        }
+        return res + tmp;
+    }
     applyBinding(element, binding, relativeSignalPath, root) {
         let unsubscribeList = [];
         let cleanupCalls;
@@ -447,7 +526,14 @@ export class BindingsHelper {
             if (s[0] == '?') {
                 if (root) {
                     const nm = s.substring(1);
-                    let evtCallback = () => this.handleValueChanged(element, binding, root[nm], valuesObject, i, signalVars, false);
+                    let evtCallback = () => {
+                        let disableValueChanged = false;
+                        if (disableValueChanged) {
+                            disableValueChanged = true;
+                            this.handleValueChanged(element, binding, root[nm], valuesObject, i, signalVars, false);
+                            disableValueChanged = false;
+                        }
+                    };
                     root.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback);
                     if (!cleanupCalls)
                         cleanupCalls = [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -9,18 +9,20 @@
   "scripts": {
     "tsc": "tsc",
     "build": "tsc",
+    "link": "npm link",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@adobe/css-tools": "^4.3.3",
+    "@blockly/zoom-to-fit": "^5.0.11",
     "@node-projects/base-custom-webcomponent": ">=0.19.0",
-    "@node-projects/web-component-designer": ">=0.1.1",
-    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
-    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
     "@node-projects/propertygrid.webcomponent": ">=1.0.2",
     "@node-projects/splitview.webcomponent": ">=1.0.1",
-    "@blockly/zoom-to-fit": "^5.0.11",
+    "@node-projects/web-component-designer": ">=0.1.1",
+    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
+    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
     "blockly": "^10.4.2",
-    "long": "^5.2.3" 
+    "long": "^5.2.3"
   },
   "repository": {
     "type": "git",