From ecf07e076f45fabc1db6901a82593523c9dddb76 Mon Sep 17 00:00:00 2001 From: danstarns Date: Wed, 14 Aug 2024 14:32:52 -0700 Subject: [PATCH] refactor: use base data var class and move code into data_sources dire --- .../model/ComponentDataVariable.ts | 10 ++--- .../model/DataVariable.ts} | 24 +++++------- src/data_sources/model/StyleDataVariable.ts | 39 ++----------------- src/data_sources/model/TraitDataVariable.ts | 18 +++++++++ .../view/ComponentDataVariableView.ts | 6 +-- src/dom_components/index.ts | 7 ++-- src/dom_components/model/types.ts | 3 +- src/domain_abstract/model/StyleableModel.ts | 15 +++---- src/style_manager/model/PropertyComposite.ts | 7 ++-- src/trait_manager/model/Trait.ts | 13 ++++--- test/specs/data_sources/index.ts | 23 +++++------ 11 files changed, 76 insertions(+), 89 deletions(-) rename src/{dom_components => data_sources}/model/ComponentDataVariable.ts (70%) rename src/{trait_manager/model/TraitDataVariable.ts => data_sources/model/DataVariable.ts} (75%) create mode 100644 src/data_sources/model/TraitDataVariable.ts rename src/{dom_components => data_sources}/view/ComponentDataVariableView.ts (87%) diff --git a/src/dom_components/model/ComponentDataVariable.ts b/src/data_sources/model/ComponentDataVariable.ts similarity index 70% rename from src/dom_components/model/ComponentDataVariable.ts rename to src/data_sources/model/ComponentDataVariable.ts index b60927a56..337b6695b 100644 --- a/src/dom_components/model/ComponentDataVariable.ts +++ b/src/data_sources/model/ComponentDataVariable.ts @@ -1,15 +1,15 @@ +import Component from '../../dom_components/model/Component'; +import { ToHTMLOptions } from '../../dom_components/model/types'; import { stringToPath, toLowerCase } from '../../utils/mixins'; -import Component from './Component'; -import { ToHTMLOptions } from './types'; +import { DataVariableType } from './DataVariable'; -export const type = 'data-variable'; export default class ComponentDataVariable extends Component { get defaults() { return { // @ts-ignore ...super.defaults, - type, + type: DataVariableType, path: '', value: '', }; @@ -25,6 +25,6 @@ export default class ComponentDataVariable extends Component { } static isComponent(el: HTMLElement) { - return toLowerCase(el.tagName) === type; + return toLowerCase(el.tagName) === DataVariableType; } } diff --git a/src/trait_manager/model/TraitDataVariable.ts b/src/data_sources/model/DataVariable.ts similarity index 75% rename from src/trait_manager/model/TraitDataVariable.ts rename to src/data_sources/model/DataVariable.ts index bcd8daa4d..c0ba694dc 100644 --- a/src/trait_manager/model/TraitDataVariable.ts +++ b/src/data_sources/model/DataVariable.ts @@ -1,15 +1,15 @@ import { Model } from '../../common'; import EditorModel from '../../editor/model/Editor'; import { stringToPath } from '../../utils/mixins'; -import Trait from './Trait'; -export default class TraitDataVariable extends Model { +export const DataVariableType = 'data-variable'; + +export default class DataVariable extends Model { em?: EditorModel; - trait?: Trait; defaults() { return { - type: 'data-variable', + type: DataVariableType, value: '', path: '', }; @@ -18,8 +18,6 @@ export default class TraitDataVariable extends Model { initialize(attrs: any, options: any) { super.initialize(attrs, options); this.em = options.em; - this.trait = options.trait; - this.listenToDataSource(); return this; @@ -34,18 +32,16 @@ export default class TraitDataVariable extends Model { } } + onDataSourceChange() { + const newValue = this.getDataValue(); + this.set({ value: newValue }); + } + getDataValue() { const { path } = this.attributes; const [dsId, drId, key] = stringToPath(path); const ds = this?.em?.DataSources.get(dsId); const dr = ds && ds.getRecord(drId); - const dv = dr?.get(key); - - return dv; - } - - onDataSourceChange() { - const dv = this.getDataValue(); - this?.trait?.setTargetValue(dv); + return dr?.get(key); } } diff --git a/src/data_sources/model/StyleDataVariable.ts b/src/data_sources/model/StyleDataVariable.ts index e0d33bcec..bec65ba17 100644 --- a/src/data_sources/model/StyleDataVariable.ts +++ b/src/data_sources/model/StyleDataVariable.ts @@ -1,42 +1,9 @@ -import { Model } from '../../common'; -import EditorModel from '../../editor/model/Editor'; -import { get, stringToPath } from '../../utils/mixins'; - -export default class StyleDataVariable extends Model { - em?: EditorModel; +import DataVariable from './DataVariable'; +export default class StyleDataVariable extends DataVariable { defaults() { return { - type: 'data-variable-css', - value: '', - path: '', + ...super.defaults(), }; } - - initialize(attrs: any, options: any) { - super.initialize(attrs, options); - this.em = options.em; - this.listenToDataSource(); - - return this; - } - - listenToDataSource() { - const { path } = this.attributes; - const resolvedPath = stringToPath(path).join('.'); - - if (this.em) { - this.listenTo(this.em.DataSources, `change:${resolvedPath}`, this.onDataSourceChange); - } - } - - onDataSourceChange() { - const { path } = this.attributes; - const [dsId, drId, key] = stringToPath(path); - const ds = this?.em?.DataSources.get(dsId); - const dr = ds && ds.getRecord(drId); - const newValue = dr?.get(key); - - this.set({ value: newValue }); - } } diff --git a/src/data_sources/model/TraitDataVariable.ts b/src/data_sources/model/TraitDataVariable.ts new file mode 100644 index 000000000..aa6ce9a38 --- /dev/null +++ b/src/data_sources/model/TraitDataVariable.ts @@ -0,0 +1,18 @@ +import DataVariable from './DataVariable'; +import Trait from '../../trait_manager/model/Trait'; + +export default class TraitDataVariable extends DataVariable { + trait?: Trait; + + initialize(attrs: any, options: any) { + super.initialize(attrs, options); + this.trait = options.trait; + + return this; + } + + onDataSourceChange() { + const newValue = this.getDataValue(); + this.trait?.setTargetValue(newValue); + } +} diff --git a/src/dom_components/view/ComponentDataVariableView.ts b/src/data_sources/view/ComponentDataVariableView.ts similarity index 87% rename from src/dom_components/view/ComponentDataVariableView.ts rename to src/data_sources/view/ComponentDataVariableView.ts index 7a1b71c66..c5d273f16 100644 --- a/src/dom_components/view/ComponentDataVariableView.ts +++ b/src/data_sources/view/ComponentDataVariableView.ts @@ -1,7 +1,7 @@ import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types'; +import ComponentView from '../../dom_components/view/ComponentView'; import { stringToPath } from '../../utils/mixins'; import ComponentDataVariable from '../model/ComponentDataVariable'; -import ComponentView from './ComponentView'; export default class ComponentDataVariableView extends ComponentView { dataListeners: DataVariableListener[] = []; @@ -24,7 +24,7 @@ export default class ComponentDataVariableView extends ComponentView this.stopListening(ls.obj, ls.event, this.postRender)); + prevListeners.forEach((ls) => this.stopListening(ls.obj, ls.event, this.postRender)); ds && dataListeners.push({ obj: ds.records, event: 'add remove reset' }); dr && dataListeners.push({ obj: dr, event: 'change' }); @@ -34,7 +34,7 @@ export default class ComponentDataVariableView extends ComponentView this.listenTo(ls.obj, ls.event, this.postRender)); + dataListeners.forEach((ls) => this.listenTo(ls.obj, ls.event, this.postRender)); this.dataListeners = dataListeners; } diff --git a/src/dom_components/index.ts b/src/dom_components/index.ts index eaa71088d..44af063bd 100644 --- a/src/dom_components/index.ts +++ b/src/dom_components/index.ts @@ -101,8 +101,6 @@ import ComponentVideoView from './view/ComponentVideoView'; import ComponentView, { IComponentView } from './view/ComponentView'; import ComponentWrapperView from './view/ComponentWrapperView'; import ComponentsView from './view/ComponentsView'; -import ComponentDataVariable, { type as typeVariable } from './model/ComponentDataVariable'; -import ComponentDataVariableView from './view/ComponentDataVariableView'; import ComponentHead, { type as typeHead } from './model/ComponentHead'; import { getSymbolMain, @@ -116,6 +114,9 @@ import { import { ComponentsEvents, SymbolInfo } from './types'; import Symbols from './model/Symbols'; import { BlockProperties } from '../block_manager/model/Block'; +import ComponentDataVariable from '../data_sources/model/ComponentDataVariable'; +import ComponentDataVariableView from '../data_sources/view/ComponentDataVariableView'; +import { DataVariableType } from '../data_sources/model/DataVariable'; export type ComponentEvent = | 'component:create' @@ -182,7 +183,7 @@ export interface CanMoveResult { export default class ComponentManager extends ItemManagerModule { componentTypes: ComponentStackItem[] = [ { - id: typeVariable, + id: DataVariableType, model: ComponentDataVariable, view: ComponentDataVariableView, }, diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index 73039c2ef..49f304e5c 100644 --- a/src/dom_components/model/types.ts +++ b/src/dom_components/model/types.ts @@ -11,6 +11,7 @@ import Component from './Component'; import Components from './Components'; import { ToolbarButtonProps } from './ToolbarButton'; import { ParseNodeOptions } from '../../parser/config/config'; +import { DataVariableType } from '../../data_sources/model/DataVariable'; export type DragMode = 'translate' | 'absolute' | ''; @@ -175,7 +176,7 @@ export interface ComponentProperties { * Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }` * @default {} */ - style?: string | Record; + style?: string | Record; /** * Component related styles, eg. `.my-component-class { color: red }` * @default '' diff --git a/src/domain_abstract/model/StyleableModel.ts b/src/domain_abstract/model/StyleableModel.ts index b393cc469..a271f8a50 100644 --- a/src/domain_abstract/model/StyleableModel.ts +++ b/src/domain_abstract/model/StyleableModel.ts @@ -6,13 +6,14 @@ import { shallowDiff, stringToPath } from '../../utils/mixins'; import EditorModel from '../../editor/model/Editor'; import StyleDataVariable from '../../data_sources/model/StyleDataVariable'; import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types'; +import { DataVariableType } from '../../data_sources/model/DataVariable'; export type StyleProps = Record< string, | string | string[] | { - type: 'data-variable-css'; + type: typeof DataVariableType; value: string; path: string; } @@ -92,7 +93,7 @@ export default class StyleableModel extends Model const propNew = { ...prop }; const newStyle = { ...propNew }; - keys(newStyle).forEach(key => { + keys(newStyle).forEach((key) => { // Remove empty style properties if (newStyle[key] === '') { delete newStyle[key]; @@ -101,7 +102,7 @@ export default class StyleableModel extends Model } const styleValue = newStyle[key]; - if (typeof styleValue === 'object' && styleValue.type === 'data-variable-css') { + if (typeof styleValue === 'object' && styleValue.type === DataVariableType) { newStyle[key] = new StyleDataVariable(styleValue, { em: this.em }); } }); @@ -112,7 +113,7 @@ export default class StyleableModel extends Model // Delete the property used for partial updates delete diff.__p; - keys(diff).forEach(pr => { + keys(diff).forEach((pr) => { const { em } = this; if (opts.noEvent) { return; @@ -140,12 +141,12 @@ export default class StyleableModel extends Model const dataListeners: DataVariableListener[] = []; const prevListeners = this.dataListeners || []; - prevListeners.forEach(ls => this.stopListening(ls.obj, ls.event, this.updateStyleProp)); + prevListeners.forEach((ls) => this.stopListening(ls.obj, ls.event, this.updateStyleProp)); dataListeners.push({ obj: dataVar, event: 'change:value' }); dataListeners.push({ obj: em, event: `${DataSourcesEvents.path}:${normPath}` }); - dataListeners.forEach(ls => + dataListeners.forEach((ls) => this.listenTo(ls.obj, ls.event, () => { const [dsId, drId, keyPath] = stringToPath(path); const ds = em?.DataSources.get(dsId); @@ -167,7 +168,7 @@ export default class StyleableModel extends Model resolveDataVariables(style: StyleProps): StyleProps { const resolvedStyle = { ...style }; - keys(resolvedStyle).forEach(key => { + keys(resolvedStyle).forEach((key) => { const styleValue = resolvedStyle[key]; if (styleValue instanceof StyleDataVariable) { diff --git a/src/style_manager/model/PropertyComposite.ts b/src/style_manager/model/PropertyComposite.ts index eea40c5ba..318c0de85 100644 --- a/src/style_manager/model/PropertyComposite.ts +++ b/src/style_manager/model/PropertyComposite.ts @@ -5,6 +5,7 @@ import Properties from './Properties'; import Property, { OptionsStyle, OptionsUpdate, PropertyProps } from './Property'; import { PropertyNumberProps } from './PropertyNumber'; import { PropertySelectProps } from './PropertySelect'; +import { DataVariableType } from '../../data_sources/model/DataVariable'; export const isNumberType = (type: string) => type === 'integer' || type === 'number'; @@ -277,7 +278,7 @@ export default class PropertyComposite = PropertyC const result = this.getStyleFromProps()[this.getName()] || ''; if (result && typeof result !== 'string' && 'type' in result) { - if (result.type === 'data-variable-css') { + if (result.type === DataVariableType) { console.log('Datasources __getFullValue'); } } @@ -309,7 +310,7 @@ export default class PropertyComposite = PropertyC const value = style[name]; if (value && typeof value !== 'string' && 'type' in value) { - if (value.type === 'data-variable-css') { + if (value.type === DataVariableType) { console.log('Datasources __splitStyleName'); } } @@ -357,7 +358,7 @@ export default class PropertyComposite = PropertyC const value = style[name]; if (value && typeof value !== 'string' && 'type' in value) { - if (value.type === 'data-variable-css') { + if (value.type === DataVariableType) { console.log('Datasources __getPropsFromStyle'); } } diff --git a/src/trait_manager/model/Trait.ts b/src/trait_manager/model/Trait.ts index 0065be55c..e6d81c496 100644 --- a/src/trait_manager/model/Trait.ts +++ b/src/trait_manager/model/Trait.ts @@ -7,8 +7,9 @@ import { isDef, stringToPath } from '../../utils/mixins'; import TraitsEvents, { TraitGetValueOptions, TraitOption, TraitProperties, TraitSetValueOptions } from '../types'; import TraitView from '../view/TraitView'; import Traits from './Traits'; -import TraitDataVariable from './TraitDataVariable'; import { DataSourcesEvents, DataVariableListener } from '../../data_sources/types'; +import TraitDataVariable from '../../data_sources/model/TraitDataVariable'; +import { DataVariableType } from '../../data_sources/model/DataVariable'; /** * @property {String} id Trait id, eg. `my-trait-id`. @@ -59,7 +60,7 @@ export default class Trait extends Model { if ( this.attributes.value && typeof this.attributes.value === 'object' && - this.attributes.value.type === 'data-variable' + this.attributes.value.type === DataVariableType ) { this.dataVariable = new TraitDataVariable(this.attributes.value, { em: this.em, trait: this }); @@ -108,12 +109,12 @@ export default class Trait extends Model { const dataListeners: DataVariableListener[] = []; const prevListeners = this.dataListeners || []; - prevListeners.forEach(ls => this.stopListening(ls.obj, ls.event, this.updateValueFromDataVariable)); + prevListeners.forEach((ls) => this.stopListening(ls.obj, ls.event, this.updateValueFromDataVariable)); dataListeners.push({ obj: dataVar, event: 'change:value' }); dataListeners.push({ obj: em, event: `${DataSourcesEvents.path}:${normPath}` }); - dataListeners.forEach(ls => + dataListeners.forEach((ls) => this.listenTo(ls.obj, ls.event, () => { const dr = dataVar.getDataValue(); this.updateValueFromDataVariable(dr); @@ -194,7 +195,7 @@ export default class Trait extends Model { const valueOpts: { avoidStore?: boolean } = {}; const { setValue } = this.attributes; - // if (value && typeof value === 'object' && value.type === 'data-variable') { + // if (value && typeof value === 'object' && value.type === DataVariableType) { // value = new TraitDataVariable(value, { em: this.em, trait: this }).initialize(); // this.listenToDataVariable(value); // } @@ -240,7 +241,7 @@ export default class Trait extends Model { */ getOption(id?: string): TraitOption | undefined { const idSel = isDef(id) ? id : this.getValue(); - return this.getOptions().filter(o => this.getOptionId(o) === idSel)[0]; + return this.getOptions().filter((o) => this.getOptionId(o) === idSel)[0]; } /** diff --git a/test/specs/data_sources/index.ts b/test/specs/data_sources/index.ts index a4c831610..b10d00c7c 100644 --- a/test/specs/data_sources/index.ts +++ b/test/specs/data_sources/index.ts @@ -2,7 +2,8 @@ import Editor from '../../../src/editor/model/Editor'; import DataSourceManager from '../../../src/data_sources'; import { DataSourceProps, DataSourcesEvents } from '../../../src/data_sources/types'; import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper'; -import ComponentDataVariable from '../../../src/dom_components/model/ComponentDataVariable'; +import ComponentDataVariable from '../../../src/data_sources/model/ComponentDataVariable'; +import { DataVariableType } from '../../../src/data_sources/model/DataVariable'; describe('DataSourceManager', () => { let em: Editor; @@ -66,7 +67,7 @@ describe('DataSourceManager', () => { content: 'Hello World', style: { color: { - type: 'data-variable-css', + type: DataVariableType, value: 'black', path: 'colors-data.id1.color', }, @@ -90,7 +91,7 @@ describe('DataSourceManager', () => { content: 'Hello World', style: { color: { - type: 'data-variable-css', + type: DataVariableType, value: 'black', path: 'colors-data.id1.color', }, @@ -114,7 +115,7 @@ describe('DataSourceManager', () => { content: 'Hello World', style: { color: { - type: 'data-variable-css', + type: DataVariableType, value: 'black', path: 'unknown.id1.color', }, @@ -163,7 +164,7 @@ describe('DataSourceManager', () => { type: 'text', components: [ { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-data-source.id1.content', }, @@ -205,7 +206,7 @@ describe('DataSourceManager', () => { type: 'text', components: [ { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-data-source.id1.content', }, @@ -245,7 +246,7 @@ describe('DataSourceManager', () => { type: 'text', components: [ { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-data-source.id1.content', }, @@ -281,7 +282,7 @@ describe('DataSourceManager', () => { type: 'text', components: [ { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-data-source.id1.content', }, @@ -335,7 +336,7 @@ describe('DataSourceManager', () => { label: 'Value', name: 'value', value: { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-input.id1.value', }, @@ -364,7 +365,7 @@ describe('DataSourceManager', () => { label: 'Value', name: 'value', value: { - type: 'data-variable', + type: DataVariableType, value: 'default', path: 'test-input.id1.value', }, @@ -413,7 +414,7 @@ describe('DataSourceManager', () => { const addDataVariable = (path = 'ds1.id1.name') => cmpRoot.append({ - type: 'data-variable', + type: DataVariableType, value: 'default', path, })[0];