tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix collection component symbols

collection-component
mohamedsalem401 2 years ago
parent
3c6e72f8ed
commit
374dbc4ffa
5 changed files with 97 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
  2. 10
      packages/core/src/dom_components/model/Component.ts
  3. 1
      packages/core/src/dom_components/model/types.ts
  4. 2
      packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts
  5. 62
      packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap

40
packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
View File

@ -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);
};
}

10
packages/core/src/dom_components/model/Component.ts
View File

@ -311,7 +311,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
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<ComponentProperties> {
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<ComponentProperties> {
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<ComponentProperties> {
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<string>();
static getDefaults() {

1
packages/core/src/dom_components/model/types.ts
View File

@ -322,4 +322,5 @@ export interface ComponentOptions {
frame?: Frame;
temporary?: boolean;
avoidChildren?: boolean;
forCloning?: boolean;
}

2
packages/core/test/specs/data_sources/model/data_collection/ComponentDataCollection.ts
View File

@ -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',
},
});

62
packages/core/test/specs/data_sources/model/data_collection/__snapshots__/ComponentDataCollection.ts.snap
View File

@ -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",

Write Preview
Loading…
Cancel
Save