Remove connections from the interactive to contained morph upon deletion

editor.js

@@ -471,6 +471,10 @@ export class InteractivesEditor extends QinoqMorph {
     const sequenceProps = { ...sequence._morphicState, submorphs: [], animations: [], start, layer };
     const newSequence = new Sequence(sequenceProps);
     morphs.forEach(morph => {
+      // morph.copy also copies connections
+      // this is undesirable for us which is why we copy the morph without connections
+      // and restore the original ones later
+      // TODO: only filter our connections, maybe some are wanted
       const connections = morph.attributeConnections;
       morph.attributeConnections = [];
       const copiedMorph = morph.copy();
@@ -549,6 +553,7 @@ export class InteractivesEditor extends QinoqMorph {
   prepareToRemoveMorph (morph, sequenceOfMorph) {
     disconnect(morph, 'onRemove', this, 'moveMorphOutOfInteractive');
     disconnect(morph, 'onAbandon', this, 'removeMorphFromInteractive');
+
     const tab = this.getTabFor(sequenceOfMorph);
     if (tab) {
       const timeline = this.getTimelineFor(tab);
@@ -951,7 +956,7 @@ export class InteractivesEditor extends QinoqMorph {
   pasteMorphFromClipboard () {
     const { morph, animations } = this.clipboard.content;
 
-    // morph.copy also copied connections
+    // morph.copy also copies connections
     // this is undesirable for us which is why we copy the morph without connections
     // and restore the original ones later
     // TODO: only filter our connections, maybe some are wanted

interactive.js

@@ -790,6 +790,13 @@ export class Sequence extends DeserializationAwareMorph {
   *  while not calling abandon on the morph
   **/
   abandonMorph (morph, doNotAbandonMorph = false) {
+    // remove all custom connection from the interactive to the morph to be removed
+    this.interactive.attributeConnections.forEach(connection => {
+      console.log(connection.targetObj.id);
+      if (connection.targetObj == morph) {
+        disconnect(this.interactive, connection.sourceAttrName, morph, connection.targetMethodName);
+      }
+    });
     if (doNotAbandonMorph) {
       if (morph._fontRatio) delete morph._fontRatio;
       morph.remove();

tests/editor-test.js

@@ -7,6 +7,7 @@ import { serialize, deserialize } from 'lively.serializer2';
 import { LottieMorph } from '../interactive-morphs/lottie-morph.js';
 import { Morph } from 'lively.morphic';
 import { promise } from 'lively.lang';
+import { connect } from 'lively.bindings';
 
 let editor, interactive;
 function closeEditor () {
@@ -36,6 +37,21 @@ describe('Editor', () => {
     return editor.withAllSubmorphsSelect(morph => morph.isTimelineSequence);
   }
 
+  it('interactive removes connections from interactive when target gets removed', async () => {
+    const newMorph = new Morph();
+    const dayBackgroundTimelineSequence = timelineSequences().find(timelineSequence => timelineSequence.sequence.name == 'day background');
+    await dayBackgroundTimelineSequence.openSequenceView();
+    editor.addMorphToInteractive(newMorph);
+
+    const connectionCount = editor.interactive.attributeConnections.length;
+    connect(interactive, 'onScrollChange', newMorph, 'visible');
+
+    expect(interactive.attributeConnections.length).to.be.equal(connectionCount + 1);
+    newMorph.abandon();
+
+    expect(interactive.attributeConnections.length).to.be.equal(connectionCount);
+  });
+
   describe('with global timeline', () => {
     it('sets _lastSelectedTimelineSequence on the first click on a single sequence', () => {
       const nightBackgroundTimelineSequence = timelineSequences().find(timelineSequence => timelineSequence.sequence.name == 'night background');