From 374dbc4ffa0cd5c46a7d81028449e214125d89f8 Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Tue, 21 Jan 2025 01:12:42 +0200 Subject: [PATCH] Fix collection component symbols --- .../ComponentDataCollection.ts | 40 +++++++++--- .../src/dom_components/model/Component.ts | 10 +-- .../core/src/dom_components/model/types.ts | 1 + .../ComponentDataCollection.ts | 2 + .../ComponentDataCollection.ts.snap | 62 +++++++++++++++++++ 5 files changed, 97 insertions(+), 18 deletions(-) diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts index 0dff5b698d..3d2ba07e55 100644 --- a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts +++ b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts @@ -19,6 +19,12 @@ import DynamicVariableListenerManager from '../DataVariableListenerManager'; export default class ComponentDataCollection extends Component { constructor(props: ComponentDataCollectionDefinition, opt: ComponentOptions) { + const collectionDef = props[keyCollectionDefinition]; + if (opt.forCloning) { + // @ts-ignore + return super(props, opt); + } + const em = opt.em; // @ts-ignore const cmp: ComponentDataCollection = super( @@ -31,7 +37,6 @@ export default class ComponentDataCollection extends Component { opt, ); - const collectionDef = props[keyCollectionDefinition]; if (!collectionDef) { em.logError('missing collection definition'); @@ -41,11 +46,11 @@ export default class ComponentDataCollection extends Component { const parentCollectionStateMap = (props[keyCollectionsStateMap] || {}) as DataCollectionStateMap; const components: Component[] = getCollectionItems(em, collectionDef, parentCollectionStateMap, opt); + cmp.components(components); if (this.hasDynamicDataSource()) { this.watchDataSource(em, collectionDef, parentCollectionStateMap, opt); } - cmp.components(components); return cmp; } @@ -60,7 +65,7 @@ export default class ComponentDataCollection extends Component { } toJSON(opts?: ObjectAny) { - const json = super.toJSON(opts) as ComponentDataCollectionDefinition; + const json = super.toJSON.call(this, opts) as ComponentDataCollectionDefinition; const firstChild = this.getBlockDefinition(); json[keyCollectionDefinition].componentDef = firstChild; @@ -166,9 +171,8 @@ function getCollectionItems( }, opt, ); - blockSymbolMain!.setSymbolOverride([keyCollectionsStateMap]); + setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(blockSymbolMain); } - blockSymbolMain!.set(keyCollectionsStateMap, collectionsStateMap); const instance = blockSymbolMain!.clone({ symbol: true }); setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(instance); @@ -183,6 +187,7 @@ function setCollectionStateMapAndPropagate( collectionId: string | undefined, ) { return (model: Component) => { + // Set the collectionStateMap on the current model setCollectionStateMap(collectionsStateMap)(model); // Listener function for the 'add' event @@ -199,13 +204,16 @@ function setCollectionStateMapAndPropagate( model.collectionStateListeners.push(listenerKey); // Add a 'remove' listener to clean up - model.listenTo(model.components(), 'remove', () => { + const removeListener = () => { model.stopListening(model.components(), 'add', addListener); // Remove the 'add' listener + model.off(`change:${keyCollectionsStateMap}`, handleCollectionStateMapChange); // Remove the change listener const index = model.collectionStateListeners.indexOf(listenerKey); if (index > -1) { model.collectionStateListeners.splice(index, 1); // Remove the listener key } - }); + }; + + model.listenTo(model.components(), 'remove', removeListener); } // Recursively apply to all child components @@ -215,9 +223,21 @@ function setCollectionStateMapAndPropagate( .forEach((component: Component) => { setCollectionStateMapAndPropagate(collectionsStateMap, collectionId)(component); }); + + // Listen for changes in the collectionStateMap and propagate to children + model.on(`change:${keyCollectionsStateMap}`, handleCollectionStateMapChange); }; } +function handleCollectionStateMapChange(this: Component) { + const updatedCollectionsStateMap = this.get(keyCollectionsStateMap); + this.components() + ?.toArray() + .forEach((component: Component) => { + setCollectionStateMap(updatedCollectionsStateMap)(component); + }); +} + function logErrorIfMissing(property: any, propertyPath: string, em: EditorModel) { if (!property) { em.logError(`The "${propertyPath}" property is required in the collection definition.`); @@ -250,10 +270,12 @@ function validateCollectionConfig( function setCollectionStateMap(collectionsStateMap: DataCollectionStateMap) { return (cmp: Component) => { cmp.set(keyIsCollectionItem, true); - cmp.set(keyCollectionsStateMap, { + const updatedCollectionStateMap = { ...cmp.get(keyCollectionsStateMap), ...collectionsStateMap, - }); + }; + cmp.set(keyCollectionsStateMap, updatedCollectionStateMap); + cmp.componentDVListener.updateCollectionStateMap(updatedCollectionStateMap); }; } diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index 571f1ef081..78871aad26 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -311,7 +311,6 @@ export default class Component extends StyleableModel { this.ccid = Component.createId(this, opt); this.preInit(); this.initClasses(); - this.listenTo(this, `change:${keyCollectionsStateMap}`, this.handleCollectionsMapStateChange); this.initComponents(); this.initTraits(); this.initToolbar(); @@ -1358,6 +1357,7 @@ export default class Component extends StyleableModel { attr.status = ''; // @ts-ignore opts.collection = null; + opts.forCloning = true; // @ts-ignore const cloned = new this.constructor(attr, opts); @@ -1588,7 +1588,6 @@ export default class Component extends StyleableModel { let obj = Model.prototype.toJSON.call(this, opts); obj = { ...obj, ...this.componentDVListener.getDynamicPropsDefs() }; obj.attributes = this.componentDVListener.getAttributesDefsOrValues(this.getAttributes()); - delete obj.componentDVListener; delete obj.attributes.class; delete obj.toolbar; delete obj.traits; @@ -1977,13 +1976,6 @@ export default class Component extends StyleableModel { selector && selector.set({ name: id, label: id }); } - private handleCollectionsMapStateChange(m: any, v: DataCollectionStateMap, opts = {}) { - this.componentDVListener.updateCollectionStateMap(v); - this.components()?.forEach((child) => { - child.set?.(keyCollectionsStateMap, v); - }); - } - static typeExtends = new Set(); static getDefaults() { diff --git a/packages/core/src/dom_components/model/types.ts b/packages/core/src/dom_components/model/types.ts index 509d0dd158..60d34a4c6e 100644 --- a/packages/core/src/dom_components/model/types.ts +++ b/packages/core/src/dom_components/model/types.ts @@ -322,4 +322,5 @@ export interface ComponentOptions { frame?: Frame; temporary?: boolean; avoidChildren?: boolean; + forCloning?: boolean; } diff --git a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts index 8a6c05fdde..fba2c46d96 100644 --- a/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts +++ b/packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts @@ -232,6 +232,7 @@ describe('Collection component', () => { // @ts-ignore type: CollectionVariableType, variableType: DataCollectionStateVariableType.currentItem, + collectionId: 'my_collection', path: 'age', }); expect(firstGrandchild.get('name')).toBe('new_value_12'); @@ -368,6 +369,7 @@ describe('Collection component', () => { // @ts-ignore type: CollectionVariableType, variableType: DataCollectionStateVariableType.currentItem, + collectionId: 'my_collection', path: 'age', }, }); diff --git a/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap index 7fc6d5d71f..2e851b7152 100644 --- a/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap +++ b/packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap @@ -15,11 +15,13 @@ exports[`Collection component Serialization Saving: Collection with grandchildre "componentDef": { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -29,11 +31,13 @@ exports[`Collection component Serialization Saving: Collection with grandchildre { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -42,6 +46,7 @@ exports[`Collection component Serialization Saving: Collection with grandchildre "components": [ { "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", @@ -50,16 +55,19 @@ exports[`Collection component Serialization Saving: Collection with grandchildre }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -69,27 +77,32 @@ exports[`Collection component Serialization Saving: Collection with grandchildre { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -98,16 +111,19 @@ exports[`Collection component Serialization Saving: Collection with grandchildre }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -134,11 +150,13 @@ exports[`Collection component Serialization Saving: Collection with no grandchil "componentDef": { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -148,27 +166,32 @@ exports[`Collection component Serialization Saving: Collection with no grandchil { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -178,27 +201,32 @@ exports[`Collection component Serialization Saving: Collection with no grandchil { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -207,16 +235,19 @@ exports[`Collection component Serialization Saving: Collection with no grandchil }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -243,11 +274,13 @@ exports[`Collection component Serialization Serializion with Collection Variable "componentDef": { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -257,11 +290,13 @@ exports[`Collection component Serialization Serializion with Collection Variable { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -270,6 +305,7 @@ exports[`Collection component Serialization Serializion with Collection Variable "components": [ { "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", @@ -278,16 +314,19 @@ exports[`Collection component Serialization Serializion with Collection Variable }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -297,27 +336,32 @@ exports[`Collection component Serialization Serializion with Collection Variable { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -326,16 +370,19 @@ exports[`Collection component Serialization Serializion with Collection Variable }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -362,11 +409,13 @@ exports[`Collection component Serialization Serializion with Collection Variable "componentDef": { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -376,27 +425,32 @@ exports[`Collection component Serialization Serializion with Collection Variable { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -406,27 +460,32 @@ exports[`Collection component Serialization Serializion with Collection Variable { "attributes": { "attribute_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, }, "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", @@ -435,16 +494,19 @@ exports[`Collection component Serialization Serializion with Collection Variable }, ], "custom_prop": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentIndex", }, "name": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem", }, "property_trait": { + "collectionId": "my_collection", "path": "user", "type": "parent-collection-variable", "variableType": "currentItem",