fix(editing): use editCount property for change propagation (openscd#1233)

* fix(editing): use editCount property for change propagation

---------

Signed-off-by: Stef3st <[email protected]>
Co-authored-by: Steffen van den Driest <[email protected]>
Co-authored-by: Stef3st <[email protected]>
Co-authored-by: danyill <[email protected]>

Author: 3 people

src/Editing.ts

@@ -424,16 +424,6 @@ export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
 
       if (!this.doc) return;
 
-      const newDoc = document.implementation.createDocument(
-        this.doc.lookupNamespaceURI(''),
-        this.doc.documentElement.tagName,
-        this.doc.doctype
-      );
-
-      // change the document object reference to enable reactive updates
-      newDoc.documentElement.replaceWith(this.doc.documentElement);
-      this.doc = newDoc;
-
       await this.updateComplete;
       this.dispatchEvent(newValidateEvent());
     }

src/Logging.ts

@@ -59,7 +59,7 @@ function getPluginName(src: string): string {
  * A mixin adding a `history` property to any `LitElement`, in which
  * incoming [[`LogEvent`]]s are logged.
  *
- * For [[`EditorAction`]] entries, also sets `currentAction` to the index of
+ * For [[`EditorAction`]] entries, also sets `editCount` to the index of
  * the committed action, allowing the user to go to `previousAction` with
  * `undo()` if `canUndo` and to go to `nextAction` with `redo()` if `canRedo`.
  *
@@ -75,7 +75,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
     history: LogEntry[] = [];
     /** Index of the last [[`EditorAction`]] applied. */
     @property({ type: Number })
-    currentAction = -1;
+    editCount = -1;
     @property()
     diagnoses = new Map<string, IssueDetail[]>();
     @internalProperty()
@@ -89,7 +89,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
     @query('#issue') issueUI!: Snackbar;
 
     get canUndo(): boolean {
-      return this.currentAction >= 0;
+      return this.editCount >= 0;
     }
     get canRedo(): boolean {
       return this.nextAction >= 0;
@@ -98,15 +98,15 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
     get previousAction(): number {
       if (!this.canUndo) return -1;
       return this.history
-        .slice(0, this.currentAction)
+        .slice(0, this.editCount)
         .map(entry => (entry.kind == 'action' ? true : false))
         .lastIndexOf(true);
     }
     get nextAction(): number {
       let index = this.history
-        .slice(this.currentAction + 1)
+        .slice(this.editCount + 1)
         .findIndex(entry => entry.kind == 'action');
-      if (index >= 0) index += this.currentAction + 1;
+      if (index >= 0) index += this.editCount + 1;
       return index;
     }
 
@@ -125,25 +125,25 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       if (!this.canUndo) return false;
       this.dispatchEvent(
         newActionEvent(
-          invert((<CommitEntry>this.history[this.currentAction]).action)
+          invert((<CommitEntry>this.history[this.editCount]).action)
         )
       );
-      this.currentAction = this.previousAction;
+      this.editCount = this.previousAction;
       return true;
     }
     redo(): boolean {
       if (!this.canRedo) return false;
       this.dispatchEvent(
         newActionEvent((<CommitEntry>this.history[this.nextAction]).action)
       );
-      this.currentAction = this.nextAction;
+      this.editCount = this.nextAction;
       return true;
     }
 
     private onLog(le: LogEvent): void {
       if (le.detail.kind === 'reset') {
         this.history = [];
-        this.currentAction = -1;
+        this.editCount = -1;
         return;
       }
 
@@ -156,7 +156,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
         if (entry.action.derived) return;
         entry.action.derived = true;
         if (this.nextAction !== -1) this.history.splice(this.nextAction);
-        this.currentAction = this.history.length;
+        this.editCount = this.history.length;
       }
 
       this.history.push(entry);
@@ -206,7 +206,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
           class="${entry.kind}"
           graphic="icon"
           ?twoline=${!!entry.message}
-          ?activated=${this.currentAction == history.length - index - 1}
+          ?activated=${this.editCount == history.length - index - 1}
         >
           <span>
             <!-- FIXME: replace tt with mwc-chip asap -->

src/Plugging.ts

@@ -25,7 +25,7 @@ import { ifImplemented, Mixin } from './foundation.js';
 import { EditingElement } from './Editing.js';
 import { officialPlugins } from '../public/js/plugins.js';
 import { Nsdoc } from './foundation/nsdoc.js';
-
+import { LoggingElement } from './Logging.js';
 const pluginTags = new Map<string, string>();
 /**
  * Hashes `uri` using cyrb64 analogous to
@@ -176,9 +176,9 @@ const loadedPlugins = new Set<string>();
 /** Mixin that manages Plugins in `localStorage` */
 export type PluggingElement = Mixin<typeof Plugging>;
 
-export function Plugging<TBase extends new (...args: any[]) => EditingElement>(
-  Base: TBase
-) {
+export function Plugging<
+  TBase extends new (...args: any[]) => EditingElement & LoggingElement
+>(Base: TBase) {
   class PluggingElement extends Base {
     // DIRTY HACK: will refactored with open-scd-core
     nsdoc!: Nsdoc;
@@ -289,6 +289,7 @@ export function Plugging<TBase extends new (...args: any[]) => EditingElement>(
         content: staticTagHtml`<${tag}
             .doc=${this.doc}
             .docName=${this.docName}
+            .editCount=${this.editCount}
             .docId=${this.docId}
             .pluginId=${plugin.src}
             .nsdoc=${this.nsdoc}

src/editors/Cleanup.ts

@@ -13,13 +13,15 @@ export default class Cleanup extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
 
   render(): TemplateResult {
     return html`
       <div class="cleanup">
-        <cleanup-datasets .doc=${this.doc}></cleanup-datasets>
-        <cleanup-control-blocks .doc=${this.doc}></cleanup-control-blocks>
-        <cleanup-data-types .doc=${this.doc}></cleanup-data-types>
+        <cleanup-datasets .editCount=${this.editCount} .doc=${this.doc}></cleanup-datasets>
+        <cleanup-control-blocks .editCount=${this.editCount} .doc=${this.doc}></cleanup-control-blocks>
+        <cleanup-data-types .editCount=${this.editCount} .doc=${this.doc}></cleanup-data-types>
       </div>
     `;
   }

src/editors/Communication.ts

@@ -17,6 +17,8 @@ export default class CommunicationPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
 
   /**
    * Creates the Communication Element and returns the created Element
@@ -37,7 +39,8 @@ export default class CommunicationPlugin extends LitElement {
 
   /** Opens a [[`WizardDialog`]] for creating a new `SubNetwork` element. */
   private openCreateSubNetworkWizard(): void {
-    const parent =this.doc.querySelector(':root > Communication') ||
+    const parent =
+      this.doc.querySelector(':root > Communication') ||
       this.createCommunication();
 
     this.dispatchEvent(newWizardEvent(createSubNetworkWizard(parent!)));
@@ -68,6 +71,7 @@ export default class CommunicationPlugin extends LitElement {
           .map(
             subnetwork =>
               html`<subnetwork-editor
+                .editCount=${this.editCount}
                 .doc=${this.doc}
                 .element=${subnetwork}
               ></subnetwork-editor>`

src/editors/GooseSubscriberDataBinding.ts

@@ -9,6 +9,8 @@ import './subscription/later-binding/ext-ref-ln-binding-list.js';
 export default class GooseSubscribeDataBindingPlugin extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
   @property()
   nsdoc!: Nsdoc;
 
@@ -19,12 +21,14 @@ export default class GooseSubscribeDataBindingPlugin extends LitElement {
           class="column"
           controlTag="GSEControl"
           .includeLaterBinding="${false}"
+          .editCount=${this.editCount}
           .doc="${this.doc}"
         >
         </fcda-binding-list>
         <extref-ln-binding-list
           class="column"
           controlTag="GSEControl"
+          .editCount=${this.editCount}
           .doc="${this.doc}"
           .nsdoc="${this.nsdoc}"
         >

src/editors/GooseSubscriberLaterBinding.ts

@@ -7,6 +7,8 @@ import './subscription/later-binding/ext-ref-later-binding-list.js';
 export default class GooseSubscribeLaterBindingPlugin extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
 
   render(): TemplateResult {
     return html`<div>
@@ -15,13 +17,13 @@ export default class GooseSubscribeLaterBindingPlugin extends LitElement {
           class="column"
           controlTag="GSEControl"
           .includeLaterBinding="${true}"
-          .doc="${this.doc}"
+          .editCount=${this.editCount} .doc="${this.doc}"
         >
         </fcda-binding-list>
         <extref-later-binding-list
           class="column"
           controlTag="GSEControl"
-          .doc="${this.doc}"
+          .editCount=${this.editCount} .doc="${this.doc}"
         >
         </extref-later-binding-list>
       </div>

src/editors/GooseSubscriberMessageBinding.ts

@@ -25,6 +25,8 @@ export default class GooseSubscriberMessageBindingPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
 
   @query('#goosePublisherView')
   goosePublisherView!: RadioListItem;
@@ -75,14 +77,20 @@ export default class GooseSubscriberMessageBindingPlugin extends LitElement {
       </mwc-formfield>
       <div class="container">
         ${view == View.PUBLISHER
-          ? html`<goose-list class="row" .doc=${this.doc}></goose-list>`
+          ? html`<goose-list
+              class="row"
+              .editCount=${this.editCount}
+              .doc=${this.doc}
+            ></goose-list>`
           : html`<ied-list
               class="row"
+              .editCount=${this.editCount}
               .doc=${this.doc}
               serviceType="goose"
             ></ied-list>`}
         <subscriber-list-goose
           class="row"
+          .editCount=${this.editCount}
           .doc=${this.doc}
         ></subscriber-list-goose>
       </div>

src/editors/IED.ts

@@ -32,6 +32,8 @@ export default class IedPlugin extends LitElement {
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property()
   doc!: XMLDocument;
+  @property({ type: Number })
+  editCount = -1;
 
   /** All the nsdoc files that are being uploaded via the settings. */
   @property()
@@ -175,6 +177,7 @@ export default class IedPlugin extends LitElement {
         </div>
 
         <ied-container
+          .editCount=${this.editCount}
           .doc=${this.doc}
           .element=${this.selectedIed}
           .selectedLNClasses=${this.selectedLNClasses}