A few fixes/improvements for the DataSource module (#6219)

packages/core/src/common/index.ts

@@ -4,9 +4,15 @@ export { default as $ } from '../utils/cash-dom';
 
 interface NOOP {}
 
+export const collectionEvents = 'add remove reset change';
+
 export type Debounced = Function & { cancel(): void };
 
-export type SetOptions = Backbone.ModelSetOptions & { avoidStore?: boolean; avoidTransformers?: boolean };
+export type SetOptions = Backbone.ModelSetOptions & {
+  avoidStore?: boolean;
+  avoidTransformers?: boolean;
+  partial?: boolean;
+};
 
 export type AddOptions = Backbone.AddOptions & { temporary?: boolean; action?: string };
 

packages/core/src/css_composer/index.ts

@@ -254,7 +254,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
 
       if (updateStyle) {
         const styleUpdate = opts.extend ? { ...model.get('style'), ...style } : style;
-        model.set('style', styleUpdate, opts);
+        model.setStyle(styleUpdate, opts);
       }
 
       result.push(model);

packages/core/src/data_sources/index.ts

@@ -36,7 +36,7 @@
  */
 
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
-import { AddOptions, ObjectAny, RemoveOptions } from '../common';
+import { AddOptions, collectionEvents, ObjectAny, RemoveOptions } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { get, stringToPath } from '../utils/mixins';
 import DataRecord from './model/DataRecord';
@@ -177,4 +177,9 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
   load(data: any) {
     return this.loadProjectData(data);
   }
+
+  postLoad() {
+    const { em, all } = this;
+    em.listenTo(all, collectionEvents, (m, c, o) => em.changesUp(o || c));
+  }
 }

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

@@ -146,26 +146,27 @@ export default class DataRecord<T extends DataRecordProps = DataRecordProps> ext
 
     const onRecordSetValue = this.dataSource?.transformers?.onRecordSetValue;
 
-    const applySet = (key: string, val: unknown) => {
+    const applySet = (key: string, val: unknown, opts: SetOptions = {}) => {
       const newValue =
-        options?.avoidTransformers || !onRecordSetValue
+        opts?.avoidTransformers || !onRecordSetValue
           ? val
           : onRecordSetValue({
               id: this.id,
               key,
               value: val,
             });
-
-      super.set(key, newValue, options);
+      super.set(key, newValue, opts);
+      // This ensures to trigger the change event with partial updates
+      super.set({ __p: opts.partial ? true : undefined } as any, opts);
     };
 
     if (typeof attributeName === 'object' && attributeName !== null) {
       const attributes = attributeName as Partial<T>;
       for (const [key, val] of Object.entries(attributes)) {
-        applySet(key, val);
+        applySet(key, val, value as SetOptions);
       }
     } else {
-      applySet(attributeName as string, value);
+      applySet(attributeName as string, value, options);
     }
 
     return this;

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

@@ -29,7 +29,7 @@
  * @extends {Model<DataSourceProps>}
  */
 
-import { AddOptions, CombinedModelConstructorOptions, Model, RemoveOptions } from '../../common';
+import { AddOptions, collectionEvents, CombinedModelConstructorOptions, Model, RemoveOptions } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import { DataRecordProps, DataSourceProps, DataSourceTransformers } from '../types';
 import DataRecord from './DataRecord';
@@ -74,6 +74,7 @@ export default class DataSource extends Model<DataSourceProps> {
     }
 
     this.listenTo(this.records, 'add', this.onAdd);
+    this.listenTo(this.records, collectionEvents, this.handleChanges);
   }
 
   /**
@@ -174,4 +175,8 @@ export default class DataSource extends Model<DataSourceProps> {
       this.records.add(record);
     });
   }
+
+  private handleChanges(m: any, c: any, o: any) {
+    this.em.changesUp(o || c);
+  }
 }

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

@@ -37,7 +37,7 @@ export default class DataVariable extends Model {
 
   getDataValue() {
     const { path, defaultValue } = this.attributes;
-    const val = this.em?.DataSources?.getValue?.(path, defaultValue);
+    const val = this.em?.DataSources.getValue(path, defaultValue);
 
     return val;
   }

packages/core/src/domain_abstract/model/StyleableModel.ts

@@ -151,22 +151,11 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
         model: this,
         em: this.em!,
         dataVariable: dataVar,
-        updateValueFromDataVariable: (newValue: string) => this.updateStyleProp(styleProp, newValue),
+        updateValueFromDataVariable: () => this.updateView(),
       });
     }
   }
 
-  /**
-   * Update a specific style property
-   */
-  updateStyleProp(prop: string, value: string) {
-    const style = this.getStyle();
-    style[prop] = value;
-    this.setStyle(style, { noEvent: true });
-    this.trigger(`change:style:${prop}`);
-    this.updateView();
-  }
-
   getView(frame?: Frame) {
     let { views, em } = this;
     const frm = frame || em?.getCurrentFrameModel();

packages/core/src/editor/model/Editor.ts

@@ -445,7 +445,7 @@ export default class EditorModel extends Model {
    * */
   handleUpdates(model: any, val: any, opt: any = {}) {
     // Component has been added temporarily - do not update storage or record changes
-    if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || !this.get('ready')) {
+    if (this.__skip || opt.temporary || opt.noCount || opt.avoidStore || opt.partial || !this.get('ready')) {
       return;
     }
 

packages/core/src/undo_manager/index.ts

@@ -36,7 +36,7 @@ export interface UndoGroup {
   labels: string[];
 }
 
-const hasSkip = (opts: any) => opts.avoidStore || opts.noUndo;
+const hasSkip = (opts: any) => opts.avoidStore || opts.noUndo || opts.partial;
 
 const getChanged = (obj: any) => Object.keys(obj.changedAttributes());