diff --git a/packages/core/src/css_composer/model/CssRule.ts b/packages/core/src/css_composer/model/CssRule.ts index d90a0d3f1..2579eba49 100644 --- a/packages/core/src/css_composer/model/CssRule.ts +++ b/packages/core/src/css_composer/model/CssRule.ts @@ -7,7 +7,6 @@ import { isEmptyObj, hasWin } from '../../utils/mixins'; import Selector, { SelectorProps } from '../../selector_manager/model/Selector'; import EditorModel from '../../editor/model/Editor'; import CssRuleView from '../view/CssRuleView'; -import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager'; /** @private */ export interface CssRuleProperties { @@ -95,7 +94,6 @@ export default class CssRule extends StyleableModel { em?: EditorModel; opt: any; views: CssRuleView[] = []; - dynamicVariableListeners: Record = {}; defaults() { return { diff --git a/packages/core/src/data_sources/model/StyleDataVariable.ts b/packages/core/src/data_sources/model/StyleDataVariable.ts deleted file mode 100644 index bec65ba17..000000000 --- a/packages/core/src/data_sources/model/StyleDataVariable.ts +++ /dev/null @@ -1,9 +0,0 @@ -import DataVariable from './DataVariable'; - -export default class StyleDataVariable extends DataVariable { - defaults() { - return { - ...super.defaults(), - }; - } -} diff --git a/packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts b/packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts index f13d93db0..71cd570b1 100644 --- a/packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts +++ b/packages/core/src/data_sources/model/conditional_variables/ComponentDataCondition.ts @@ -5,28 +5,25 @@ import { DataCondition, DataConditionProps, DataConditionType } from './DataCond export default class ComponentDataCondition extends Component { dataCondition: DataCondition; - componentDefinition: DataConditionProps; constructor(props: DataConditionProps, opt: ComponentOptions) { const { condition, ifTrue, ifFalse } = props; const dataConditionInstance = new DataCondition(condition, ifTrue, ifFalse, { em: opt.em }); - const initialComponentsProps = dataConditionInstance.getDataValue(); - const conditionalCmptDef = { - type: DataConditionType, - components: initialComponentsProps, - }; - super(conditionalCmptDef, opt); - - this.componentDefinition = props; + super( + { + ...props, + type: DataConditionType, + components: dataConditionInstance.getDataValue(), + }, + opt, + ); this.dataCondition = dataConditionInstance; this.dataCondition.onValueChange = this.handleConditionChange.bind(this); } private handleConditionChange() { this.dataCondition.reevaluate(); - const updatedComponents = this.dataCondition.getDataValue(); - this.components().reset(); - this.components().add(updatedComponents); + this.components(this.dataCondition.getDataValue()); } static isComponent(el: HTMLElement) { diff --git a/packages/core/src/domain_abstract/model/StyleableModel.ts b/packages/core/src/domain_abstract/model/StyleableModel.ts index a7f6619e1..d3c821472 100644 --- a/packages/core/src/domain_abstract/model/StyleableModel.ts +++ b/packages/core/src/domain_abstract/model/StyleableModel.ts @@ -4,8 +4,7 @@ import ParserHtml from '../../parser/model/ParserHtml'; import Selectors from '../../selector_manager/model/Selectors'; import { shallowDiff } from '../../utils/mixins'; import EditorModel from '../../editor/model/Editor'; -import StyleDataVariable from '../../data_sources/model/StyleDataVariable'; -import { DataVariableProps, DataVariableType } from '../../data_sources/model/DataVariable'; +import DataVariable, { DataVariableProps, DataVariableType } from '../../data_sources/model/DataVariable'; import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager'; import CssRuleView from '../../css_composer/view/CssRuleView'; import ComponentView from '../../dom_components/view/ComponentView'; @@ -112,8 +111,10 @@ export default class StyleableModel extends Model const styleValue = newStyle[key]; if (isDynamicValueDefinition(styleValue)) { const styleDynamicVariable = this.resolveDynamicValue(styleValue); - newStyle[key] = styleDynamicVariable; - this.manageDataVariableListener(styleDynamicVariable, key); + if (styleDynamicVariable) { + newStyle[key] = styleDynamicVariable; + this.manageDataVariableListener(styleDynamicVariable, key); + } } }); @@ -140,21 +141,19 @@ export default class StyleableModel extends Model } private resolveDynamicValue(styleValue: DynamicValueProps) { + const em = this.em!; const dynamicType = styleValue.type; let styleDynamicVariable; + switch (dynamicType) { case DataVariableType: - styleDynamicVariable = new StyleDataVariable(styleValue, { em: this.em }); + styleDynamicVariable = new DataVariable(styleValue, { em }); break; case DataConditionType: { const { condition, ifTrue, ifFalse } = styleValue; - styleDynamicVariable = new DataCondition(condition, ifTrue, ifFalse, { em: this.em! }); + styleDynamicVariable = new DataCondition(condition, ifTrue, ifFalse, { em }); break; } - default: - throw new Error( - `Unsupported dynamic value type for styles. Only '${DataVariableType}' and '${DataConditionType}' are supported. Received '${dynamicType}'.`, - ); } return styleDynamicVariable; @@ -163,7 +162,7 @@ export default class StyleableModel extends Model /** * Manage DataVariableListenerManager for a style property */ - manageDataVariableListener(dataVar: StyleDataVariable | DataCondition, styleProp: string) { + manageDataVariableListener(dataVar: DataVariable | DataCondition, styleProp: string) { if (this.dynamicVariableListeners[styleProp]) { this.dynamicVariableListeners[styleProp].listenToDynamicVariable(); } else { @@ -209,7 +208,9 @@ export default class StyleableModel extends Model if (isDynamicValueDefinition(styleValue)) { const dataVar = this.resolveDynamicValue(styleValue); - resolvedStyle[key] = dataVar.getDataValue(); + if (dataVar) { + resolvedStyle[key] = dataVar.getDataValue(); + } } if (isDynamicValue(styleValue)) {