diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 069c91d0c..62f346024 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -694,6 +694,7 @@ const Component = Backbone.Model.extend(Styleable).extend( __upSymbComps(m, c, o) { const { fromInstance } = o || c || {}; const toUpOpts = { fromInstance }; + const isTemp = m.opt.temporary; if (!o) { const toUp = this.__getSymbToUp(toUpOpts); @@ -705,9 +706,14 @@ const Component = Backbone.Model.extend(Styleable).extend( } else if (o.add) { // Add const addedInstances = m.__getSymbToUp(toUpOpts); + const isMainSymb = !!this.__getSymbols(); const toUp = this.__getSymbToUp(toUpOpts); - !m.opt.temporary && - this.__logSymbol('add', toUp, { opts: o, addedInstances, added: m }); + !isTemp && + this.__logSymbol('add', toUp, { + opts: o, + addedInstances, + added: m.cid + }); // Here, before appending new symbol, I have to ensure there are no previosly // created symbols (eg. used mainly when drag components around) toUp.forEach(symb => { @@ -716,14 +722,15 @@ const Component = Backbone.Model.extend(Styleable).extend( const addedTop = addedInst.__getSymbTop({ prev: 1 }); return symbTop && addedTop && addedTop === symbTop; })[0]; - const toAppend = symbPrev || m.clone({ symbol: 1 }); + const toAppend = + symbPrev || m.clone({ symbol: 1, symbolInv: isMainSymb }); symb.append(toAppend, { fromInstance: this, toAppend: m, ...o }); }); } else { if (!m.__isSymbolTop()) { // Allow removing single instances const toUp = m.__getSymbToUp(toUpOpts); - !m.opt.temporary && + !isTemp && this.__logSymbol('remove', toUp, { opts: o, removed: m.cid }); toUp.forEach(symb => symb.remove({ fromInstance: m, ...o })); } @@ -1100,10 +1107,17 @@ const Component = Backbone.Model.extend(Styleable).extend( cloned.__initSymb(); } else if (opt.symbol) { if (this.__isSymbol()) { + // Already a symbol, cloned should be an instance this.get(keySymbols).push(cloned); cloned.set(keySymbol, this); cloned.__initSymb(); + } else if (opt.symbolInv) { + // Inverted, cloned is the instance, the origin is the main symbol + this.set(keySymbols, [cloned]); + cloned.set(keySymbol, this); + [this, cloned].map(i => i.__initSymb()); } else { + // Cloned becomes the main symbol cloned.set(keySymbols, [this]); [this, cloned].map(i => i.__initSymb()); this.set(keySymbol, cloned); diff --git a/test/specs/dom_components/model/Symbols.js b/test/specs/dom_components/model/Symbols.js index eb8504eca..545ea7d85 100644 --- a/test/specs/dom_components/model/Symbols.js +++ b/test/specs/dom_components/model/Symbols.js @@ -143,10 +143,12 @@ describe('Symbols', () => { }); test('Adding a new component to a symbol, it will be propogated to all instances', () => { - symbol.append(simpleComp, { at: 0 })[0]; + const added = symbol.append(simpleComp, { at: 0 })[0]; all.forEach(cmp => expect(cmp.components().length).toBe(compInitChild + 1) ); + // Check symbol references + expect(added.__getSymbols().length).toBe(allInst.length); }); test('Adding a new component to an instance of the symbol, it will be propogated to all symbols', () => {