Dynamic values improvements (#6419)

* Avoid throwing errors if no condition is passed to a DataCondition

* Refactor Condition class

* Remove expecting errors for conditions tests

* Extend and refactor BaseOperator

* Rename and refactor GenericOperator

* Rename and refactor logicalOperator to BooleanOperator

* Refactor StringOperator

* Refactor NumberOperator

* Refactor and fix DataResolverListener

* Update tests for condition Operators

* Rename Condition class to ConditionEvaluator

* Add missing types file

* Update and refactor DataCondition

* Update utils

* Refactor StyleableModel class

* Update ComponentDataCondition

* Refactor ComponentResolverWatcher

* Fix conditional styles

* Rename LogicalGroupStatement to LogicalGroupEvaluator

* Fix tests for DataCondition

* Add setter methods for component data variable

* Add setters and getter to ComponentDataCondition

* Add getters to ComponentDataVariable

* Rename test file

* Make dynamic components undroppable

* Fix collection types

* Update collections ( add setters and getter, first item editable, sync styles )

* Update data collection tests

* Format tests

* Fix some ComponentData collection bugs

* Refactor setStartIndex and setEndIndex

* Fix getComponentDef test

* Fix bug with end index = 0

* fix test for setDataSource

* fix test for HTML updates

* Format

* Add tests for the new option in getDataValue for conditions ( skipDynamicValueResolution )

* rename Operation to DataConditionOperation

* Run __onStyleChange after style changes as before

* Format

* Up BooleanOperator

---------

Co-authored-by: Artur Arseniev <[email protected]>

Author: mohamedsalem401

packages/core/src/data_sources/model/ComponentDataVariable.ts

@@ -13,6 +13,7 @@ export default class ComponentDataVariable extends Component {
       type: DataVariableType,
       path: '',
       defaultValue: '',
+      droppable: false,
     };
   }
 
@@ -22,6 +23,14 @@ export default class ComponentDataVariable extends Component {
     this.dataResolver = new DataVariable({ type, path, defaultValue }, opt);
   }
 
+  getPath() {
+    return this.dataResolver.get('path');
+  }
+
+  getDefaultValue() {
+    return this.dataResolver.get('defaultValue');
+  }
+
   getDataValue() {
     return this.dataResolver.getDataValue();
   }
@@ -30,6 +39,14 @@ export default class ComponentDataVariable extends Component {
     return this.getDataValue();
   }
 
+  setPath(newPath: string) {
+    this.dataResolver.set('path', newPath);
+  }
+
+  setDefaultValue(newValue: string) {
+    this.dataResolver.set('defaultValue', newValue);
+  }
+
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === DataVariableType;
   }

packages/core/src/data_sources/model/DataResolverListener.ts

@@ -14,8 +14,12 @@ export interface DataResolverListenerProps {
   onUpdate: (value: any) => void;
 }
 
+interface ListenerWithCallback extends DataSourceListener {
+  callback: () => void;
+}
+
 export default class DataResolverListener {
-  private listeners: DataSourceListener[] = [];
+  private listeners: ListenerWithCallback[] = [];
   private em: EditorModel;
   private onUpdate: (value: any) => void;
   private model = new Model();
@@ -33,10 +37,14 @@ export default class DataResolverListener {
     this.onUpdate(value);
   };
 
+  private createListener(obj: any, event: string, callback: () => void = this.onChange): ListenerWithCallback {
+    return { obj, event, callback };
+  }
+
   listenToResolver() {
     const { resolver, model } = this;
     this.removeListeners();
-    let listeners: DataSourceListener[] = [];
+    let listeners: ListenerWithCallback[] = [];
     const type = resolver.attributes.type;
 
     switch (type) {
@@ -51,11 +59,11 @@ export default class DataResolverListener {
         break;
     }
 
-    listeners.forEach((ls) => model.listenTo(ls.obj, ls.event, this.onChange));
+    listeners.forEach((ls) => model.listenTo(ls.obj, ls.event, ls.callback));
     this.listeners = listeners;
   }
 
-  private listenToConditionalVariable(dataVariable: DataCondition) {
+  private listenToConditionalVariable(dataVariable: DataCondition): ListenerWithCallback[] {
     const { em } = this;
     const dataListeners = dataVariable.getDependentDataVariables().flatMap((dataVariable) => {
       return this.listenToDataVariable(new DataVariable(dataVariable, { em }));
@@ -64,29 +72,41 @@ export default class DataResolverListener {
     return dataListeners;
   }
 
-  private listenToDataVariable(dataVariable: DataVariable) {
+  private listenToDataVariable(dataVariable: DataVariable): ListenerWithCallback[] {
     const { em } = this;
-    const dataListeners: DataSourceListener[] = [];
     const { path } = dataVariable.attributes;
     const normPath = stringToPath(path || '').join('.');
     const [ds, dr] = em.DataSources.fromPath(path!);
-    ds && dataListeners.push({ obj: ds.records, event: 'add remove reset' });
-    dr && dataListeners.push({ obj: dr, event: 'change' });
+
+    const dataListeners: ListenerWithCallback[] = [];
+
+    if (ds) {
+      dataListeners.push(this.createListener(ds.records, 'add remove reset'));
+    }
+
+    if (dr) {
+      dataListeners.push(this.createListener(dr, 'change'));
+    }
+
     dataListeners.push(
-      { obj: dataVariable, event: 'change:path change:defaultValue' },
-      { obj: em.DataSources.all, event: 'add remove reset' },
-      { obj: em, event: `${DataSourcesEvents.path}:${normPath}` },
+      this.createListener(dataVariable, 'change:path', () => {
+        this.listenToResolver();
+        this.onChange();
+      }),
+      this.createListener(dataVariable, 'change:defaultValue'),
+      this.createListener(em.DataSources.all, 'add remove reset'),
+      this.createListener(em, `${DataSourcesEvents.path}:${normPath}`),
     );
 
     return dataListeners;
   }
 
-  private listenToDataCollectionVariable(dataVariable: DataCollectionVariable) {
-    return [{ obj: dataVariable, event: 'change:value' }];
+  private listenToDataCollectionVariable(dataVariable: DataCollectionVariable): ListenerWithCallback[] {
+    return [this.createListener(dataVariable, 'change:value')];
   }
 
   private removeListeners() {
-    this.listeners.forEach((ls) => this.model.stopListening(ls.obj, ls.event, this.onChange));
+    this.listeners.forEach((ls) => this.model.stopListening(ls.obj, ls.event, ls.callback));
     this.listeners = [];
   }
 

packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts

@@ -2,34 +2,59 @@ import Component from '../../../dom_components/model/Component';
 import { ComponentDefinition, ComponentOptions } from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
 import { DataCondition, DataConditionProps, DataConditionType } from './DataCondition';
+import { ConditionProps } from './DataConditionEvaluator';
 
 export default class ComponentDataCondition extends Component {
   dataResolver: DataCondition;
 
   constructor(props: DataConditionProps, opt: ComponentOptions) {
-    const { condition, ifTrue, ifFalse } = props;
-    const dataConditionInstance = new DataCondition(condition, ifTrue, ifFalse, { em: opt.em });
+    const dataConditionInstance = new DataCondition(props, { em: opt.em });
+
     super(
       {
         ...props,
         type: DataConditionType,
         components: dataConditionInstance.getDataValue(),
+        droppable: false,
       },
       opt,
     );
     this.dataResolver = dataConditionInstance;
     this.dataResolver.onValueChange = this.handleConditionChange.bind(this);
   }
 
+  getCondition() {
+    return this.dataResolver.getCondition();
+  }
+
+  getIfTrue() {
+    return this.dataResolver.getIfTrue();
+  }
+
+  getIfFalse() {
+    return this.dataResolver.getIfFalse();
+  }
+
   private handleConditionChange() {
-    this.dataResolver.reevaluate();
     this.components(this.dataResolver.getDataValue());
   }
 
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === DataConditionType;
   }
 
+  setCondition(newCondition: ConditionProps) {
+    this.dataResolver.setCondition(newCondition);
+  }
+
+  setIfTrue(newIfTrue: any) {
+    this.dataResolver.setIfTrue(newIfTrue);
+  }
+
+  setIfFalse(newIfFalse: any) {
+    this.dataResolver.setIfFalse(newIfFalse);
+  }
+
   toJSON(): ComponentDefinition {
     return this.dataResolver.toJSON();
   }

packages/core/src/data_sources/model/conditional_variables/ConditionStatement.ts

@@ -1,9 +1,10 @@
-import { Operator } from './operators';
+import { Operator } from './operators/BaseOperator';
+import { DataConditionOperation } from './operators/types';
 
 export class ConditionStatement {
   constructor(
     private leftValue: any,
-    private operator: Operator,
+    private operator: Operator<DataConditionOperation>,
     private rightValue: any,
   ) {}
 

packages/core/src/data_sources/model/conditional_variables/DataCondition.ts

@@ -3,22 +3,23 @@ import EditorModel from '../../../editor/model/Editor';
 import DataVariable, { DataVariableProps } from '../DataVariable';
 import DataResolverListener from '../DataResolverListener';
 import { evaluateVariable, isDataVariable } from '../utils';
-import { Condition, ConditionProps } from './Condition';
-import { GenericOperation } from './operators/GenericOperator';
-import { LogicalOperation } from './operators/LogicalOperator';
+import { DataConditionEvaluator, ConditionProps } from './DataConditionEvaluator';
+import { AnyTypeOperation } from './operators/AnyTypeOperator';
+import { BooleanOperation } from './operators/BooleanOperator';
 import { NumberOperation } from './operators/NumberOperator';
-import { StringOperation } from './operators/StringOperations';
+import { StringOperation } from './operators/StringOperator';
+import { isUndefined } from 'underscore';
 
 export const DataConditionType = 'data-condition';
 
 export interface ExpressionProps {
   left: any;
-  operator: GenericOperation | StringOperation | NumberOperation;
+  operator: AnyTypeOperation | StringOperation | NumberOperation;
   right: any;
 }
 
 export interface LogicGroupProps {
-  logicalOperator: LogicalOperation;
+  logicalOperator: BooleanOperation;
   statements: ConditionProps[];
 }
 
@@ -30,57 +31,90 @@ export interface DataConditionProps {
 }
 
 interface DataConditionPropsDefined extends Omit<DataConditionProps, 'condition'> {
-  condition: Condition;
+  condition: DataConditionEvaluator;
 }
 
 export class DataCondition extends Model<DataConditionPropsDefined> {
-  lastEvaluationResult: boolean;
   private em: EditorModel;
   private resolverListeners: DataResolverListener[] = [];
   private _onValueChange?: () => void;
 
   constructor(
-    condition: ConditionProps,
-    public ifTrue: any,
-    public ifFalse: any,
+    props: {
+      condition: ConditionProps;
+      ifTrue: any;
+      ifFalse: any;
+    },
     opts: { em: EditorModel; onValueChange?: () => void },
   ) {
-    if (typeof condition === 'undefined') {
-      throw new MissingConditionError();
+    if (isUndefined(props.condition)) {
+      opts.em.logError('No condition was provided to a conditional component.');
     }
 
-    const conditionInstance = new Condition(condition, { em: opts.em });
+    const conditionInstance = new DataConditionEvaluator({ condition: props.condition }, { em: opts.em });
+
     super({
       type: DataConditionType,
+      ...props,
       condition: conditionInstance,
-      ifTrue,
-      ifFalse,
     });
     this.em = opts.em;
-    this.lastEvaluationResult = this.evaluate();
     this.listenToDataVariables();
     this._onValueChange = opts.onValueChange;
+
+    this.on('change:condition change:ifTrue change:ifFalse', () => {
+      this.listenToDataVariables();
+      this._onValueChange?.();
+    });
   }
 
-  get condition() {
+  private get conditionEvaluator() {
     return this.get('condition')!;
   }
 
-  evaluate() {
-    return this.condition.evaluate();
+  getCondition(): ConditionProps {
+    return this.get('condition')?.get('condition')!;
+  }
+
+  getIfTrue() {
+    return this.get('ifTrue')!;
+  }
+
+  getIfFalse() {
+    return this.get('ifFalse')!;
   }
 
-  getDataValue(): any {
-    return this.lastEvaluationResult ? evaluateVariable(this.ifTrue, this.em) : evaluateVariable(this.ifFalse, this.em);
+  isTrue(): boolean {
+    return this.conditionEvaluator.evaluate();
   }
 
-  reevaluate(): void {
-    this.lastEvaluationResult = this.evaluate();
+  getDataValue(skipDynamicValueResolution: boolean = false): any {
+    const ifTrue = this.get('ifTrue');
+    const ifFalse = this.get('ifFalse');
+
+    const isConditionTrue = this.isTrue();
+    if (skipDynamicValueResolution) {
+      return isConditionTrue ? ifTrue : ifFalse;
+    }
+
+    return isConditionTrue ? evaluateVariable(ifTrue, this.em) : evaluateVariable(ifFalse, this.em);
   }
 
   set onValueChange(newFunction: () => void) {
     this._onValueChange = newFunction;
-    this.listenToDataVariables();
+  }
+
+  setCondition(newCondition: ConditionProps) {
+    const newConditionInstance = new DataConditionEvaluator({ condition: newCondition }, { em: this.em });
+    this.set('condition', newConditionInstance);
+  }
+
+  setIfTrue(newIfTrue: any) {
+    this.set('ifTrue', newIfTrue);
+  }
+
+  setIfFalse(newIfFalse: any) {
+    this.set('ifFalse', newIfFalse);
   }
 
   private listenToDataVariables() {
@@ -97,7 +131,6 @@ export class DataCondition extends Model<DataConditionPropsDefined> {
         em,
         resolver: new DataVariable(variable, { em: this.em }),
         onUpdate: (() => {
-          this.reevaluate();
           this._onValueChange?.();
         }).bind(this),
       });
@@ -107,9 +140,11 @@ export class DataCondition extends Model<DataConditionPropsDefined> {
   }
 
   getDependentDataVariables() {
-    const dataVariables: DataVariableProps[] = this.condition.getDataVariables();
-    if (isDataVariable(this.ifTrue)) dataVariables.push(this.ifTrue);
-    if (isDataVariable(this.ifFalse)) dataVariables.push(this.ifFalse);
+    const dataVariables: DataVariableProps[] = this.conditionEvaluator.getDependentDataVariables();
+    const ifTrue = this.get('ifTrue');
+    const ifFalse = this.get('ifFalse');
+    if (isDataVariable(ifTrue)) dataVariables.push(ifTrue);
+    if (isDataVariable(ifFalse)) dataVariables.push(ifFalse);
 
     return dataVariables;
   }
@@ -120,16 +155,14 @@ export class DataCondition extends Model<DataConditionPropsDefined> {
   }
 
   toJSON() {
+    const ifTrue = this.get('ifTrue');
+    const ifFalse = this.get('ifFalse');
+
     return {
       type: DataConditionType,
-      condition: this.condition,
-      ifTrue: this.ifTrue,
-      ifFalse: this.ifFalse,
+      condition: this.conditionEvaluator,
+      ifTrue,
+      ifFalse,
     };
   }
 }
-export class MissingConditionError extends Error {
-  constructor() {
-    super('No condition was provided to a conditional component.');
-  }
-}