Dynamic values improvements

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

@@ -1,26 +1,35 @@
+import { ObjectAny } from '../../common';
 import Component from '../../dom_components/model/Component';
-import { ComponentOptions } from '../../dom_components/model/types';
+import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../dom_components/model/types';
 import { toLowerCase } from '../../utils/mixins';
 import DataVariable, { DataVariableProps, DataVariableType } from './DataVariable';
 
+export interface ComponentDataVariableProps extends ComponentProperties {
+  type: typeof DataVariableType;
+  dataResolver: DataVariableProps;
+}
+
 export default class ComponentDataVariable extends Component {
   dataResolver: DataVariable;
 
   get defaults() {
     return {
       // @ts-ignore
       ...super.defaults,
-      type: DataVariableType,
-      path: '',
-      defaultValue: '',
       droppable: false,
+      type: DataVariableType,
+      dataResolver: {
+        path: '',
+        defaultValue: '',
+      },
     };
   }
 
-  constructor(props: DataVariableProps, opt: ComponentOptions) {
+  constructor(props: ComponentDataVariableProps, opt: ComponentOptions) {
     super(props, opt);
-    const { type, path, defaultValue } = props;
-    this.dataResolver = new DataVariable({ type, path, defaultValue }, opt);
+
+    this.dataResolver = new DataVariable(props.dataResolver, opt);
+    this.listenToPropsChange();
   }
 
   getPath() {
@@ -47,6 +56,23 @@ export default class ComponentDataVariable extends Component {
     this.dataResolver.set('defaultValue', newValue);
   }
 
+  private listenToPropsChange() {
+    this.on('change:dataResolver', () => {
+      this.dataResolver.set(this.get('dataResolver'));
+    });
+  }
+
+  toJSON(opts?: ObjectAny): ComponentDefinition {
+    const json = super.toJSON(opts);
+    const dataResolver = this.dataResolver.toJSON();
+    delete dataResolver.type;
+
+    return {
+      ...json,
+      dataResolver,
+    };
+  }
+
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === DataVariableType;
   }

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

@@ -4,7 +4,11 @@ import { Model } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import DataVariable, { DataVariableType } from './DataVariable';
 import { DataResolver } from '../types';
-import { DataCondition, DataConditionType } from './conditional_variables/DataCondition';
+import {
+  DataCondition,
+  DataConditionOutputChangedEvent,
+  DataConditionType,
+} from './conditional_variables/DataCondition';
 import { DataCollectionVariableType } from './data_collection/constants';
 import DataCollectionVariable from './data_collection/DataCollectionVariable';
 
@@ -64,12 +68,13 @@ export default class DataResolverListener {
   }
 
   private listenToConditionalVariable(dataVariable: DataCondition): ListenerWithCallback[] {
-    const { em } = this;
-    const dataListeners = dataVariable.getDependentDataVariables().flatMap((dataVariable) => {
-      return this.listenToDataVariable(new DataVariable(dataVariable, { em }));
-    });
-
-    return dataListeners;
+    return [
+      {
+        obj: dataVariable,
+        event: DataConditionOutputChangedEvent,
+        callback: this.onChange,
+      },
+    ];
   }
 
   private listenToDataVariable(dataVariable: DataVariable): ListenerWithCallback[] {

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

@@ -4,7 +4,7 @@ import EditorModel from '../../editor/model/Editor';
 export const DataVariableType = 'data-variable' as const;
 
 export interface DataVariableProps {
-  type: typeof DataVariableType;
+  type?: typeof DataVariableType;
   path: string;
   defaultValue?: string;
 }

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

@@ -1,61 +1,123 @@
 import Component from '../../../dom_components/model/Component';
-import { ComponentDefinition, ComponentOptions } from '../../../dom_components/model/types';
+import {
+  ComponentDefinition as ComponentProperties,
+  ComponentDefinitionDefined,
+  ComponentOptions,
+  ToHTMLOptions,
+  ComponentAddType,
+} from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
-import { DataCondition, DataConditionProps, DataConditionType } from './DataCondition';
+import { DataCondition, DataConditionOutputChangedEvent, DataConditionProps, DataConditionType } from './DataCondition';
 import { ConditionProps } from './DataConditionEvaluator';
+import { StringOperation } from './operators/StringOperator';
+import { ObjectAny } from '../../../common';
+import { DataConditionIfTrueType, DataConditionIfFalseType } from './constants';
+
+export type DataConditionDisplayType = typeof DataConditionIfTrueType | typeof DataConditionIfFalseType;
+
+export interface ComponentDataConditionProps extends ComponentProperties {
+  type: typeof DataConditionType;
+  dataResolver: DataConditionProps;
+}
 
 export default class ComponentDataCondition extends Component {
   dataResolver: DataCondition;
 
-  constructor(props: DataConditionProps, opt: ComponentOptions) {
-    const dataConditionInstance = new DataCondition(props, { em: opt.em });
-
-    super(
-      {
-        ...props,
-        type: DataConditionType,
-        components: dataConditionInstance.getDataValue(),
-        droppable: false,
+  get defaults(): ComponentDefinitionDefined {
+    return {
+      // @ts-ignore
+      ...super.defaults,
+      droppable: false,
+      type: DataConditionType,
+      dataResolver: {
+        condition: {
+          left: '',
+          operator: StringOperation.equalsIgnoreCase,
+          right: '',
+        },
       },
-      opt,
-    );
-    this.dataResolver = dataConditionInstance;
-    this.dataResolver.onValueChange = this.handleConditionChange.bind(this);
+      components: [
+        {
+          type: DataConditionIfTrueType,
+        },
+        {
+          type: DataConditionIfFalseType,
+        },
+      ],
+    };
   }
 
-  getCondition() {
-    return this.dataResolver.getCondition();
+  constructor(props: ComponentDataConditionProps, opt: ComponentOptions) {
+    // @ts-ignore
+    super(props, opt);
+
+    const { condition } = props.dataResolver;
+    this.dataResolver = new DataCondition({ condition }, { em: opt.em });
+
+    this.listenToPropsChange();
   }
 
-  getIfTrue() {
-    return this.dataResolver.getIfTrue();
+  isTrue() {
+    return this.dataResolver.isTrue();
   }
 
-  getIfFalse() {
-    return this.dataResolver.getIfFalse();
+  getCondition() {
+    return this.dataResolver.getCondition();
   }
 
-  private handleConditionChange() {
-    this.components(this.dataResolver.getDataValue());
+  getIfTrueContent(): Component | undefined {
+    return this.components().at(0);
   }
 
-  static isComponent(el: HTMLElement) {
-    return toLowerCase(el.tagName) === DataConditionType;
+  getIfFalseContent(): Component | undefined {
+    return this.components().at(1);
+  }
+
+  getOutputContent(): Component | undefined {
+    return this.isTrue() ? this.getIfTrueContent() : this.getIfFalseContent();
   }
 
   setCondition(newCondition: ConditionProps) {
     this.dataResolver.setCondition(newCondition);
   }
 
-  setIfTrue(newIfTrue: any) {
-    this.dataResolver.setIfTrue(newIfTrue);
+  setIfTrueComponents(content: ComponentAddType) {
+    this.setComponentsAtIndex(0, content);
+  }
+
+  setIfFalseComponents(content: ComponentAddType) {
+    this.setComponentsAtIndex(1, content);
+  }
+
+  getInnerHTML(opts?: ToHTMLOptions): string {
+    return this.getOutputContent()?.getInnerHTML(opts) ?? '';
+  }
+
+  private setComponentsAtIndex(index: number, newContent: ComponentAddType) {
+    const component = this.components().at(index);
+    component?.components(newContent);
+  }
+
+  private listenToPropsChange() {
+    this.on('change:dataResolver', () => {
+      this.dataResolver.set(this.get('dataResolver'));
+    });
   }
 
-  setIfFalse(newIfFalse: any) {
-    this.dataResolver.setIfFalse(newIfFalse);
+  toJSON(opts?: ObjectAny): ComponentProperties {
+    const json = super.toJSON(opts);
+    const dataResolver = this.dataResolver.toJSON();
+    delete dataResolver.type;
+    delete dataResolver.ifTrue;
+    delete dataResolver.ifFalse;
+
+    return {
+      ...json,
+      dataResolver,
+    };
   }
 
-  toJSON(): ComponentDefinition {
-    return this.dataResolver.toJSON();
+  static isComponent(el: HTMLElement) {
+    return toLowerCase(el.tagName) === DataConditionType;
   }
 }

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

@@ -0,0 +1,19 @@
+import Component from '../../../dom_components/model/Component';
+import { ComponentDefinitionDefined, ToHTMLOptions } from '../../../dom_components/model/types';
+import { toLowerCase } from '../../../utils/mixins';
+import { isDataConditionDisplayType } from '../../utils';
+
+export default class ConditionalOutputBase extends Component {
+  get defaults(): ComponentDefinitionDefined {
+    return {
+      // @ts-ignore
+      ...super.defaults,
+      removable: false,
+      draggable: false,
+    };
+  }
+
+  static isComponent(el: HTMLElement) {
+    return isDataConditionDisplayType(toLowerCase(el.tagName));
+  }
+}