@acorex/platform 18.1.6 → 18.2.0

package/fesm2022/acorex-platform-layout-builder.mjs

@@ -22,12 +22,12 @@ class AXPLayoutBuilderService {
         this.variables$ = signal({});
         this.functions$ = signal({});
         this.onChanged = new Subject();
+        this.onRefresh = new Subject();
         this.debouncers = {};
         this.debouncerSubscriptions = {};
         this.widgets = new Map();
         this.context = this.context$.asReadonly();
     }
-    ;
     get variables() {
         return this.variables$();
     }
@@ -36,13 +36,12 @@ class AXPLayoutBuilderService {
     }
     initial(value) {
         this.context$.set(value);
-        // TODO: check performance
-        this.onChanged.next({
-            oldValue: null,
-            newValue: null,
-            data: this.context(),
-            init: true
-        });
+        this.refresh();
+    }
+    refresh() {
+        setTimeout(() => {
+            this.onRefresh.next();
+        }, 0);
     }
     setVariables(...args) {
         if (args.length == 0)
@@ -50,7 +49,7 @@ class AXPLayoutBuilderService {
         else if (args.length == 1)
             this.variables$.set(args[0]);
         else if (args.length == 2) {
-            this.variables$.update(v => set(v, args[0], args[1]));
+            this.variables$.update((v) => set(v, args[0], args[1]));
         }
     }
     setFunctions(...args) {
@@ -59,7 +58,7 @@ class AXPLayoutBuilderService {
         else if (args.length == 1)
             this.functions$.set(args[0]);
         else if (args.length == 2) {
-            this.functions$.update(v => set(v, args[0], args[1]));
+            this.functions$.update((v) => set(v, args[0], args[1]));
         }
     }
     setValue(path, value, init = false) {
@@ -70,19 +69,16 @@ class AXPLayoutBuilderService {
             // Create a new Subject for debouncing if it doesn't exist
             this.debouncers[path] = new Subject();
             // Subscribe to the subject with debounceTime
-            this.debouncerSubscriptions[path] =
-                this.debouncers[path]
-                    .pipe(debounceTime(150))
-                    .subscribe(({ value, init }) => {
-                    // Only emit onChanged event after debounce time
-                    this.onChanged.next({
-                        oldValue: oldValue,
-                        newValue: value,
-                        data: this.context(),
-                        path,
-                        init
-                    });
+            this.debouncerSubscriptions[path] = this.debouncers[path].pipe(debounceTime(150)).subscribe(({ value, init }) => {
+                // Only emit onChanged event after debounce time
+                this.onChanged.next({
+                    oldValue: oldValue,
+                    newValue: value,
+                    data: this.context(),
+                    path,
+                    init,
                 });
+            });
         }
         // Update context immediately
         this.context$.update((ctx) => set(clone(ctx), path, value));
@@ -287,7 +283,6 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this.initRender();
     }
     initRender() {
-        // debugger;
         this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
         if (this.isValueWidget()) {
             this.detectFullPath();
@@ -305,6 +300,7 @@ class AXPWidgetComponent extends AXPLayoutElement {
         }
     }
     setOptions(values) {
+        console.log(this.config.name, this.mode, values);
         this._options.set({ ...this.options(), ...values });
     }
     call(name, ...args) {
@@ -694,17 +690,10 @@ class AXPWidgetContainerComponent {
     constructor() {
         this.onChanged = new EventEmitter();
         this.context = model({});
-        this.init = false;
         this.unsubscriber = inject(AXUnsubscriber);
         this.builderService = inject(AXPLayoutBuilderService);
         this.ef = effect(() => {
-            //console.log('effect', this.context(), this.init);
             this.builderService.initial(this.context());
-            // if (!this.init) {
-            //   this.init = true;
-            // } else {
-            //   this.builderService.refresh();
-            // }
         }, { allowSignalWrites: true });
     }
     set variables(v) {
@@ -864,9 +853,7 @@ class AXPWidgetRendererDirective {
         this.expressionCache = new Map();
         this.expressionEvaluators = new Map();
         this.scope = null;
-        this.builderService.onChanged
-            .pipe(this.unsubscriber.takeUntilDestroy)
-            .subscribe(async (e) => {
+        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
             if ((await this.updateOptionsBasedOnContext()) > 0) {
                 this.applyOptions();
             }
@@ -874,23 +861,31 @@ class AXPWidgetRendererDirective {
                 await this.updateValueBasedOnFormula();
             }
         });
+        this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            if ((await this.updateOptionsBasedOnContext()) > 0) {
+                this.applyOptions();
+            }
+        });
     }
+    // async ngOnInit() {
+    //   await this.rerenderComponent();
+    // }
+    // async ngAfterViewInit() {
+    //   await this.rerenderComponent();
+    // }
     // Detect input changes
-    async ngOnChanges(changes) {
+    ngOnChanges(changes) {
         if (changes['mode'] || changes['node']) {
             // Check if either 'mode' or 'node' has changed
-            await this.rerenderComponent();
+            this.rerenderComponent();
         }
     }
-    async rerenderComponent() {
-        // Destroy the existing component if it exists
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
-        this.viewContainerRef.clear();
+    rerenderComponent() {
         this.isLoading.set(false);
         // Call loadComponent to create and render the component
-        await this.loadComponent();
+        setTimeout(async () => {
+            await this.loadComponent();
+        });
     }
     ngOnDestroy() {
         if (this.componentRef) {
@@ -898,10 +893,16 @@ class AXPWidgetRendererDirective {
         }
     }
     async loadComponent() {
-        if (this.isLoading())
+        if (this.isLoading()) {
             return;
+        }
         this.isLoading.set(true);
+        // Destroy the existing component if it exists
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
         this.viewContainerRef.clear();
+        //
         const widget = this.widgetRegistery.resolve(this.node().type);
         //
         const props = widget?.components[this.mode()]?.properties
@@ -957,15 +958,18 @@ class AXPWidgetRendererDirective {
             return false;
     }
     preprocessAndInitialOptions(obj, pathPrefix = '') {
-        if (!obj)
+        if (!obj) {
             return;
+        }
         Object.entries(obj).forEach(([key, value]) => {
             const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
             if (typeof value === 'string' && value.includes('{{')) {
                 // Cache dynamic expression for later evaluation
                 this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
             }
-            else if (typeof value === 'object' && value !== null && (value.constructor === Object || Array.isArray(value))) {
+            else if (typeof value === 'object' &&
+                value !== null &&
+                (value.constructor === Object || Array.isArray(value))) {
                 // Recursively handle nested objects
                 this.preprocessAndInitialOptions(value, currentPath);
             }
@@ -978,11 +982,12 @@ class AXPWidgetRendererDirective {
         });
     }
     async updateOptionsBasedOnContext() {
-        const updates = [];
-        for (let [path, evaluator] of this.expressionEvaluators) {
+        const updatePromises = Array.from(this.expressionEvaluators).map(async ([path, evaluator]) => {
             const newValue = await evaluator();
-            updates.push({ path, newValue });
-        }
+            return { path, newValue };
+        });
+        // Wait for all evaluators to complete
+        const updates = await Promise.all(updatePromises);
         // Apply updates to mergedOptions
         if (updates.length > 0) {
             this.mergedOptions.update((o) => {