@node-projects/web-component-designer-visualization-addons 0.1.108 → 0.1.110

package/dist/components/BindingsEditor.d.ts

@@ -4,7 +4,7 @@ import { VisualizationShell } from '../interfaces/VisualizationShell.js';
 export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly template: HTMLTemplateElement;
     static readonly style: CSSStyleSheet;
-    static readonly is = "node-projects-visualization-bindings-editor";
+    static readonly is: string;
     static readonly properties: {
         twoWayPossible: BooleanConstructor;
         twoWay: BooleanConstructor;

package/dist/helpers/BindingsHelper.d.ts

@@ -44,10 +44,30 @@ export declare class BindingsHelper {
     serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string];
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
-    applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement): (() => void)[];
+    applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: {
+        valueProvider: (propertyName: string) => any;
+        valueChangedCallbacks: Map<string, (() => void)[]>;
+    }): (() => void)[];
     parseCssBindings(sheet: string, element: Element, relativeSignalPath: string, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]>;
-    parseCssBinding(value: string, element: Element, relativeSignalPath: string, root: HTMLElement): [name: string, unsub: (() => void)[]];
-    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement): () => void;
+    parseCssBinding(value: string, element: Element, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: {
+        valueProvider: (propertyName: string) => any;
+        valueChangedCallbacks: Map<string, (() => void)[]>;
+    }): [name: string, unsub: (() => void)[]];
+    /**
+     * ? = bind to signals in properties
+     * ?? = binding to a property
+     * $ = bind to a signal configuration
+     * § = bind to a special value
+     * @param element
+     * @param binding
+     * @param relativeSignalPath
+     * @param root
+     * @returns
+     */
+    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: {
+        valueProvider: (propertyName: string) => any;
+        valueChangedCallbacks: Map<string, (() => void)[]>;
+    }): () => void;
     private addTwoWayBinding;
     private static parseValueWithType;
     handleValueChanged(element: Element, binding: namedBinding, value: any, valuesObject: any[], index: number, signalVarNames: string[], noParse: boolean, relativeSignalPath: string): void;

package/dist/helpers/BindingsHelper.js

@@ -405,7 +405,7 @@ export class BindingsHelper {
             }
         }
     }
-    applyAllBindings(rootElement, relativeSignalPath, root) {
+    applyAllBindings(rootElement, relativeSignalPath, root, specialValueHandler) {
         let retVal = [];
         const tw = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT);
         let e;
@@ -413,7 +413,7 @@ export class BindingsHelper {
             const bindings = this.getBindings(e);
             for (let b of bindings) {
                 try {
-                    let applied = this.applyBinding(e, b, relativeSignalPath, root);
+                    let applied = this.applyBinding(e, b, relativeSignalPath, root, specialValueHandler);
                     retVal.push(applied);
                     if (b[1].maybeLitElement && e.localName.includes('-') && !customElements.get(e.localName)) {
                         const el = e;
@@ -422,7 +422,7 @@ export class BindingsHelper {
                             if (isLit(el)) {
                                 applied();
                                 bnd[1].events = bnd[1].litEventNames;
-                                retVal.push(this.applyBinding(el, bnd, relativeSignalPath, root));
+                                retVal.push(this.applyBinding(el, bnd, relativeSignalPath, root, specialValueHandler));
                             }
                         });
                     }
@@ -460,7 +460,7 @@ export class BindingsHelper {
         const newStyle = parser.stringify(ast, { indent: '', compress: true });
         return [cssFromString(newStyle), unsub];
     }
-    parseCssBinding(value, element, relativeSignalPath, root) {
+    parseCssBinding(value, element, relativeSignalPath, root, specialValueHandler) {
         value = value.trim();
         let res = '';
         let tmp = '';
@@ -485,7 +485,7 @@ export class BindingsHelper {
                     if (binding.startsWith('{')) {
                         bnd = JSON.parse(binding);
                     }
-                    unsub.push(this.applyBinding(element, bnd, relativeSignalPath, root));
+                    unsub.push(this.applyBinding(element, bnd, relativeSignalPath, root, specialValueHandler));
                     res += 'var(' + varName + ')';
                     inBind = false;
                     binding = '';
@@ -520,7 +520,18 @@ export class BindingsHelper {
         }
         return [res + tmp, unsub];
     }
-    applyBinding(element, binding, relativeSignalPath, root) {
+    /**
+     * ? = bind to signals in properties
+     * ?? = binding to a property
+     * $ = bind to a signal configuration
+     * § = bind to a special value
+     * @param element
+     * @param binding
+     * @param relativeSignalPath
+     * @param root
+     * @returns
+     */
+    applyBinding(element, binding, relativeSignalPath, root, specialValueHandler) {
         let unsubscribeList = [];
         let cleanupCalls;
         const cleanUp = () => {
@@ -558,7 +569,7 @@ export class BindingsHelper {
                         }
                         let evtCallback = () => {
                             cleanUp();
-                            this.applyBinding(element, binding, relativeSignalPath, root);
+                            this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
                         };
                         const evtNm = getChangeEventName(element, PropertiesHelper.camelToDashCase(s));
                         root.addEventListener(evtNm, evtCallback);
@@ -575,7 +586,7 @@ export class BindingsHelper {
         let valuesObject = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
             const s = signals[i];
-            if (s[0] == '?') {
+            if (s[0] === '?') {
                 if (root) {
                     const nm = s.substring(1);
                     let evtCallback = () => {
@@ -601,7 +612,7 @@ export class BindingsHelper {
                     }
                 }
             }
-            else if (s[0] == '$') {
+            else if (s[0] === '$') {
                 let mS = s.substring(1);
                 if (mS[0] === '.') {
                     mS = this._visualizationHandler.getNormalizedSignalName(mS, relativeSignalPath, element);
@@ -610,6 +621,22 @@ export class BindingsHelper {
                     this.handleValueChanged(element, binding, x, valuesObject, i, signalVars, true, relativeSignalPath);
                 });
             }
+            else if (s[0] === '§') {
+                const mS = s.substring(1);
+                const value = specialValueHandler.valueProvider(mS);
+                this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
+                if (!specialValueHandler.valueChangedCallbacks)
+                    specialValueHandler.valueChangedCallbacks = new Map();
+                let changeList = specialValueHandler.valueChangedCallbacks.get(mS);
+                if (changeList != null) {
+                    changeList = [];
+                    specialValueHandler.valueChangedCallbacks.set(mS, changeList);
+                }
+                changeList.push(() => {
+                    const value = specialValueHandler.valueProvider(mS);
+                    this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
+                });
+            }
             else {
                 if (s.includes('{')) {
                     let indirectSignal = new IndirectSignal(this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root);

package/dist/interfaces/VisualisationElementScript.d.ts

@@ -1,5 +1,5 @@
 export interface VisualisationElementScript {
-    init?(instance: HTMLElement): any;
-    connectedCallback?(instance: HTMLElement): any;
-    disconnectedCallback?(instance: HTMLElement): any;
+    init?(instance: HTMLElement, shadowRoot: ShadowRoot): any;
+    connectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot): any;
+    disconnectedCallback?(instance: HTMLElement, shadowRoot: ShadowRoot): any;
 }

package/dist/scripting/ScriptSystem.d.ts

@@ -23,5 +23,5 @@ export declare class ScriptSystem {
     getSignaName(name: string, outerContext: contextType): string;
     static extractPart(obj: any, propertyPath: string): any;
     createScriptContext(root: HTMLElement, event: Event, element: Element, parameters: Record<string, any>, relativeSignalsPath: string): any;
-    assignAllScripts(source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, visualizationHandler: VisualizationHandler, contextCreator?: (root: HTMLElement, event: Event, element: Element, parameters: Record<string, any>, relativeSignalsPath: string) => any, assignExternalScript?: (element: Element, event: string, scriptData: any) => void): Promise<VisualisationElementScript>;
+    assignAllScripts(source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, visualizationHandler: VisualizationHandler, contextCreator?: (root: HTMLElement, event: Event, element: Element, parameters: Record<string, any>, relativeSignalsPath: string) => any, assignExternalScript?: (element: Element, event: string, scriptData: any) => void, runInitalization?: (jsObject: VisualisationElementScript) => void): Promise<VisualisationElementScript>;
 }

package/dist/scripting/ScriptSystem.js

@@ -405,7 +405,7 @@ export class ScriptSystem {
     createScriptContext(root, event, element, parameters, relativeSignalsPath) {
         return { root, event, element, parameters, relativeSignalsPath };
     }
-    async assignAllScripts(source, javascriptCode, shadowRoot, instance, visualizationHandler, contextCreator, assignExternalScript) {
+    async assignAllScripts(source, javascriptCode, shadowRoot, instance, visualizationHandler, contextCreator, assignExternalScript, runInitalization) {
         const allElements = shadowRoot.querySelectorAll('*');
         contextCreator ??= this.createScriptContext;
         let jsObject = null;
@@ -413,8 +413,12 @@ export class ScriptSystem {
             try {
                 const scriptUrl = URL.createObjectURL(new Blob([javascriptCode], { type: 'application/javascript' }));
                 jsObject = await import(scriptUrl);
-                if (jsObject.init) {
-                    jsObject.init(instance);
+                if (runInitalization)
+                    runInitalization(jsObject);
+                else {
+                    if (jsObject.init) {
+                        jsObject.init(instance, shadowRoot);
+                    }
                 }
             }
             catch (err) {

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.108",
+  "version": "0.1.110",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",