refactor(foundation): rename Update to Replace

Author: JakobVogelsang

src/Editing.ts

@@ -11,7 +11,7 @@ import {
   isDelete,
   isMove,
   isSimple,
-  isUpdate,
+  isReplace,
   LitElementConstructor,
   Mixin,
   Move,
@@ -20,7 +20,9 @@ import {
   OpenDocEvent,
   SCLTag,
   SimpleAction,
+  Replace,
   Update,
+  isUpdate,
 } from './foundation.js';
 
 /** Mixin that edits an `XML` `doc`, listening to [[`EditorActionEvent`]]s */
@@ -42,12 +44,19 @@ export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
     private checkCreateValidity(create: Create): boolean {
       if (create.checkValidity !== undefined) return create.checkValidity();
 
+      if (
+        !(create.new.element instanceof Element) ||
+        !(create.new.parent instanceof Element)
+      )
+        return true;
+
       const invalid =
         create.new.element.hasAttribute('name') &&
         Array.from(create.new.parent.children).some(
           elm =>
-            elm.tagName === create.new.element.tagName &&
-            elm.getAttribute('name') === create.new.element.getAttribute('name')
+            elm.tagName === (<Element>create.new.element).tagName &&
+            elm.getAttribute('name') ===
+              (<Element>create.new.element).getAttribute('name')
         );
 
       if (invalid)
@@ -74,24 +83,32 @@ export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
     private onCreate(action: Create) {
       if (!this.checkCreateValidity(action)) return false;
 
-      if (action.new.reference === undefined)
+      if (
+        action.new.reference === undefined &&
+        action.new.element instanceof Element &&
+        action.new.parent instanceof Element
+      )
         action.new.reference = getReference(
           action.new.parent,
           <SCLTag>action.new.element.tagName
         );
+      else action.new.reference = action.new.reference ?? null;
 
       action.new.parent.insertBefore(action.new.element, action.new.reference);
       return true;
     }
 
     private logCreate(action: Create) {
+      const name =
+        action.new.element instanceof Element
+          ? action.new.element.tagName
+          : get('editing.node');
+
       this.dispatchEvent(
         newLogEvent({
           kind: 'action',
-          title: get('editing.created', {
-            name: action.new.element.tagName,
-          }),
-          action: action,
+          title: get('editing.created', { name }),
+          action,
         })
       );
     }
@@ -100,18 +117,23 @@ export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
       if (!action.old.reference)
         action.old.reference = action.old.element.nextSibling;
 
-      action.old.element.remove();
+      if (action.old.element.parentNode !== action.old.parent) return false;
+
+      action.old.parent.removeChild(action.old.element);
       return true;
     }
 
     private logDelete(action: Delete) {
+      const name =
+        action.old.element instanceof Element
+          ? action.old.element.tagName
+          : get('editing.node');
+
       this.dispatchEvent(
         newLogEvent({
           kind: 'action',
-          title: get('editing.deleted', {
-            name: action.old.element.tagName,
-          }),
-          action: action,
+          title: get('editing.deleted', { name }),
+          action,
         })
       );
     }
@@ -174,68 +196,118 @@ export function Editing<TBase extends LitElementConstructor>(Base: TBase) {
       );
     }
 
-    private checkUpdateValidity(update: Update): boolean {
-      if (update.checkValidity !== undefined) return update.checkValidity();
+    private checkReplaceValidity(replace: Replace): boolean {
+      if (replace.checkValidity !== undefined) return replace.checkValidity();
 
       const invalid =
-        update.new.element.hasAttribute('name') &&
-        update.new.element.getAttribute('name') !==
-          update.old.element.getAttribute('name') &&
-        Array.from(update.old.element.parentElement?.children ?? []).some(
+        replace.new.element.hasAttribute('name') &&
+        replace.new.element.getAttribute('name') !==
+          replace.old.element.getAttribute('name') &&
+        Array.from(replace.old.element.parentElement?.children ?? []).some(
           elm =>
-            elm.tagName === update.new.element.tagName &&
-            elm.getAttribute('name') === update.new.element.getAttribute('name')
+            elm.tagName === replace.new.element.tagName &&
+            elm.getAttribute('name') ===
+              replace.new.element.getAttribute('name')
         );
 
       if (invalid)
         this.dispatchEvent(
           newLogEvent({
             kind: 'error',
             title: get('editing.error.update', {
-              name: update.new.element.tagName,
+              name: replace.new.element.tagName,
             }),
             message: get('editing.error.nameClash', {
-              parent: update.old.element.parentElement!.tagName,
-              child: update.new.element.tagName,
-              name: update.new.element.getAttribute('name')!,
+              parent: replace.old.element.parentElement!.tagName,
+              child: replace.new.element.tagName,
+              name: replace.new.element.getAttribute('name')!,
             }),
           })
         );
 
       return !invalid;
     }
 
-    private onUpdate(action: Update) {
-      if (!this.checkUpdateValidity(action)) return false;
+    private onReplace(action: Replace) {
+      if (!this.checkReplaceValidity(action)) return false;
 
       action.new.element.append(...Array.from(action.old.element.children));
       action.old.element.replaceWith(action.new.element);
       return true;
     }
 
-    private logUpdate(action: Update) {
+    private logUpdate(action: Replace | Update) {
+      const name = isReplace(action)
+        ? action.new.element.tagName
+        : (action as Update).element.tagName;
+
       this.dispatchEvent(
         newLogEvent({
           kind: 'action',
           title: get('editing.updated', {
-            name: action.new.element.tagName,
+            name,
           }),
           action: action,
         })
       );
     }
 
+    private checkUpdateValidity(update: Update): boolean {
+      if (update.checkValidity !== undefined) return update.checkValidity();
+
+      const invalid = Array.from(
+        update.element.parentElement?.children ?? []
+      ).some(
+        elm =>
+          elm.tagName === update.element.tagName &&
+          elm.getAttribute('name') === update.newAttributes['name']
+      );
+
+      if (invalid)
+        this.dispatchEvent(
+          newLogEvent({
+            kind: 'error',
+            title: get('editing.error.update', {
+              name: update.element.tagName,
+            }),
+            message: get('editing.error.nameClash', {
+              parent: update.element.parentElement!.tagName,
+              child: update.element.tagName,
+              name: update.newAttributes['name']!,
+            }),
+          })
+        );
+
+      return !invalid;
+    }
+
+    private onUpdate(action: Update) {
+      if (!this.checkUpdateValidity(action)) return false;
+
+      Array.from(action.element.attributes).forEach(attr =>
+        action.element.removeAttributeNode(attr)
+      );
+
+      Object.entries(action.newAttributes).forEach(([key, value]) => {
+        if (value) action.element.setAttribute(key, value);
+      });
+
+      return true;
+    }
+
     private onSimpleAction(action: SimpleAction) {
       if (isMove(action)) return this.onMove(action as Move);
       else if (isCreate(action)) return this.onCreate(action as Create);
       else if (isDelete(action)) return this.onDelete(action as Delete);
+      else if (isReplace(action)) return this.onReplace(action as Replace);
       else if (isUpdate(action)) return this.onUpdate(action as Update);
     }
 
     private logSimpleAction(action: SimpleAction) {
       if (isMove(action)) this.logMove(action as Move);
       else if (isCreate(action)) this.logCreate(action as Create);
       else if (isDelete(action)) this.logDelete(action as Delete);
+      else if (isReplace(action)) this.logUpdate(action as Replace);
       else if (isUpdate(action)) this.logUpdate(action as Update);
     }
 

src/editors/templates/foundation.ts

@@ -51,8 +51,8 @@ function containsCreateAction(actions: Create[], newAction: Create): boolean {
   return !actions.some(
     action =>
       action.new.parent === newAction.new.parent &&
-      action.new.element.getAttribute('id') ===
-        newAction.new.element.getAttribute('id')
+      (<Element>action.new.element).getAttribute('id') ===
+        (<Element>newAction.new.element).getAttribute('id')
   );
 }
 

src/foundation.ts

@@ -10,7 +10,7 @@ import { WizardTextField } from './wizard-textfield.js';
 import { WizardSelect } from './wizard-select.js';
 import { WizardCheckbox } from './wizard-checkbox.js';
 
-export type SimpleAction = Create | Update | Delete | Move;
+export type SimpleAction = Update | Create | Replace | Delete | Move;
 export type ComplexAction = {
   actions: SimpleAction[];
   title: string;
@@ -20,13 +20,13 @@ export type ComplexAction = {
 export type EditorAction = SimpleAction | ComplexAction;
 /** Inserts `new.element` to `new.parent` before `new.reference`. */
 export interface Create {
-  new: { parent: Element; element: Element; reference?: Node | null };
+  new: { parent: Node; element: Node; reference?: Node | null };
   derived?: boolean;
   checkValidity?: () => boolean;
 }
 /** Removes `old.element` from `old.parent` before `old.reference`. */
 export interface Delete {
-  old: { parent: Element; element: Element; reference?: Node | null };
+  old: { parent: Node; element: Node; reference?: Node | null };
   derived?: boolean;
   checkValidity?: () => boolean;
 }
@@ -38,16 +38,24 @@ export interface Move {
   checkValidity?: () => boolean;
 }
 /** Replaces `old.element` with `new.element`, keeping element children. */
-export interface Update {
+export interface Replace {
   old: { element: Element };
   new: { element: Element };
   derived?: boolean;
   checkValidity?: () => boolean;
 }
+/** Swaps `element`s `oldAttributes` with `newAttributes` */
+export interface Update {
+  element: Element;
+  oldAttributes: Record<string, string | null>;
+  newAttributes: Record<string, string | null>;
+  derived?: boolean;
+  checkValidity?: () => boolean;
+}
 
 export function isCreate(action: EditorAction): action is Create {
   return (
-    (action as Update).old === undefined &&
+    (action as Replace).old === undefined &&
     (action as Create).new?.parent !== undefined &&
     (action as Create).new?.element !== undefined
   );
@@ -56,23 +64,32 @@ export function isDelete(action: EditorAction): action is Delete {
   return (
     (action as Delete).old?.parent !== undefined &&
     (action as Delete).old?.element !== undefined &&
-    (action as Update).new === undefined
+    (action as Replace).new === undefined
   );
 }
 export function isMove(action: EditorAction): action is Move {
   return (
     (action as Move).old?.parent !== undefined &&
     (action as Move).old?.element !== undefined &&
     (action as Move).new?.parent !== undefined &&
-    (action as Update).new?.element == undefined
+    (action as Replace).new?.element == undefined
   );
 }
-export function isUpdate(action: EditorAction): action is Update {
+export function isReplace(action: EditorAction): action is Replace {
   return (
     (action as Move).old?.parent === undefined &&
-    (action as Update).old?.element !== undefined &&
+    (action as Replace).old?.element !== undefined &&
     (action as Move).new?.parent === undefined &&
-    (action as Update).new?.element !== undefined
+    (action as Replace).new?.element !== undefined
+  );
+}
+export function isUpdate(action: EditorAction): action is Update {
+  return (
+    (action as Replace).old === undefined &&
+    (action as Replace).new === undefined &&
+    (action as Update).element !== undefined &&
+    (action as Update).newAttributes !== undefined &&
+    (action as Update).oldAttributes !== undefined
   );
 }
 export function isSimple(action: EditorAction): action is SimpleAction {
@@ -109,10 +126,29 @@ export function invert(action: EditorAction): EditorAction {
       new: { parent: action.old.parent, reference: action.old.reference },
       ...metaData,
     };
-  else if (isUpdate(action))
+  else if (isReplace(action))
     return { new: action.old, old: action.new, ...metaData };
+  else if (isUpdate(action))
+    return {
+      element: action.element,
+      oldAttributes: action.newAttributes,
+      newAttributes: action.oldAttributes,
+      ...metaData,
+    };
   else return unreachable('Unknown EditorAction type in invert.');
 }
+//** return `Update` action for `element` adding `oldAttributes` */
+export function createUpdateAction(
+  element: Element,
+  newAttributes: Record<string, string | null>
+): Update {
+  const oldAttributes: Record<string, string | null> = {};
+  Array.from(element.attributes).forEach(attr => {
+    oldAttributes[attr.name] = attr.value;
+  });
+
+  return { element, oldAttributes, newAttributes };
+}
 
 /** Represents some intended modification of a `Document` being edited. */
 export interface EditorActionDetail<T extends EditorAction> {

src/translations/de.ts

@@ -87,6 +87,7 @@ export const de: Translations = {
     smvcontrol: 'Sampled Values anzeigen',
   },
   editing: {
+    node: 'Benutzerdefiniertes Objekt',
     created: '{{ name }} hinzugefügt',
     deleted: '{{ name }} entfernt',
     moved: '{{ name }} verschoben',

src/translations/en.ts

@@ -85,6 +85,7 @@ export const en = {
     smvcontrol: 'Show all Sampled Values',
   },
   editing: {
+    node: 'User defined object',
     created: 'Added {{ name }}',
     deleted: 'Removed {{ name }}',
     moved: 'Moved {{ name }}',

src/wizards/address.ts

@@ -92,7 +92,7 @@ export function updateAddress(
   const oldAddress = parent.querySelector('Address');
 
   if (oldAddress !== null && !isEqualAddress(oldAddress, newAddress)) {
-    // We cannot use updateAction on address as both address child elements P are changed
+    //address & child elements P are changed: cannot use replace editor action
     actions.push({
       old: {
         parent: parent,