chore: switch from editor.commit to dispatch newEditEventV2

Release-As: 0.0.1

Author: stee-re

components/OscdEditorTemplateTextfield.ts

@@ -3,7 +3,6 @@ import { property, query, state } from 'lit/decorators.js';
 
 import { MdSwitch } from '@scopedelement/material-web/switch/MdSwtich.js';
 import { MdMenu } from '@scopedelement/material-web/menu/MdMenu.js';
-import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
 import { MdIconButton } from '@scopedelement/material-web/iconbutton/MdIconButton.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { MdOutlinedField } from '@scopedelement/material-web/field/MdOutlinedField.js';
@@ -15,7 +14,6 @@ export class OscdEditorTemplateTextfield extends ScopedElementsMixin(
 ) {
   static scopedElements = {
     'md-outlined-field': MdOutlinedField,
-    'md-button': MdOutlinedButton,
     'md-icon-button': MdIconButton,
     'md-menu': MdMenu,
     'md-switch': MdSwitch,

custom-elements.json

@@ -40,15 +40,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'md-outline-button': MdOutlinedButton, 'md-filled-icon-button': MdFilledIconButton, 'md-icon': MdIcon, 'action-list': ActionList, 'oscd-editor-template-textfield': OscdEditorTemplateTextfield, 'oscd-edit-dialog': OscdEditDialog, }"
-            },
-            {
-              "kind": "field",
-              "name": "editor",
-              "type": {
-                "text": "Transactor<EditV2>"
-              },
-              "attribute": "editor"
+              "default": "{ 'md-text-button': MdTextButton, 'md-filled-icon-button': MdFilledIconButton, 'md-icon': MdIcon, 'action-list': ActionList, 'oscd-editor-template-textfield': OscdEditorTemplateTextfield, 'oscd-edit-dialog': OscdEditDialog, }"
             },
             {
               "kind": "field",
@@ -67,14 +59,7 @@
             },
             {
               "kind": "field",
-              "name": "docs",
-              "type": {
-                "text": "Record<string, XMLDocument>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "editCount",
+              "name": "docVersion",
               "type": {
                 "text": "unknown"
               }
@@ -393,15 +378,6 @@
               }
             }
           ],
-          "attributes": [
-            {
-              "name": "editor",
-              "type": {
-                "text": "Transactor<EditV2>"
-              },
-              "fieldName": "editor"
-            }
-          ],
           "mixins": [
             {
               "name": "ScopedElementsMixin",
@@ -442,7 +418,7 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'md-outlined-field': MdOutlinedField, 'md-button': MdOutlinedButton, 'md-icon-button': MdIconButton, 'md-menu': MdMenu, 'md-switch': MdSwitch, 'md-list-item': MdListItem, }"
+              "default": "{ 'md-outlined-field': MdOutlinedField, 'md-icon-button': MdIconButton, 'md-menu': MdMenu, 'md-switch': MdSwitch, 'md-list-item': MdListItem, }"
             },
             {
               "kind": "field",

oscd-editor-template.spec.ts

@@ -21,9 +21,6 @@ describe('oscd-editor-template', () => {
 
   beforeEach(async () => {
     plugin = await fixture(html`<oscd-editor-template></oscd-editor-template>`);
-    plugin.docs = {
-      'test.scd': sclDoc,
-    };
     plugin.doc = sclDoc;
     plugin.docName = 'test.scd';
   });

oscd-editor-template.ts

@@ -3,9 +3,9 @@ import { property, query, queryAll, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { styles } from './foundation.js';
-import { EditV2, Transactor } from '@omicronenergy/oscd-api';
+import { EditV2 } from '@omicronenergy/oscd-api';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { MdOutlinedButton } from '@scopedelement/material-web/button/MdOutlinedButton.js';
+import { MdTextButton } from '@scopedelement/material-web/button/MdTextButton.js';
 import { MdFilledIconButton } from '@scopedelement/material-web/iconbutton/MdFilledIconButton.js';
 import { MdIcon } from '@scopedelement/material-web/icon/MdIcon.js';
 import { OscdEditorTemplateTextfield } from './components/OscdEditorTemplateTextfield.js';
@@ -15,21 +15,20 @@ import type {
   CreateWizard,
   EditWizard,
 } from '@omicronenergy/oscd-edit-dialog/OscdEditDialog.js';
+import { newEditEventV2 } from '@omicronenergy/oscd-api/utils.js';
 
 /** An editor [[`plugin`]] for editing the `DataTypeTemplates` section. */
 export default class OscdEditorTemplate extends ScopedElementsMixin(
   LitElement,
 ) {
   static scopedElements = {
-    'md-outline-button': MdOutlinedButton,
+    'md-text-button': MdTextButton,
     'md-filled-icon-button': MdFilledIconButton,
     'md-icon': MdIcon,
     'action-list': ActionList,
     'oscd-editor-template-textfield': OscdEditorTemplateTextfield,
     'oscd-edit-dialog': OscdEditDialog,
   };
-  @property({ type: Object })
-  editor!: Transactor<EditV2>;
 
   /** The document being edited as provided to plugins by [[`OpenSCD`]]. */
   @property({ attribute: false })
@@ -39,10 +38,7 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
   docName!: string;
 
   @property({ attribute: false })
-  docs!: Record<string, XMLDocument>;
-
-  @property({ attribute: false })
-  editCount!: unknown;
+  docVersion!: unknown;
 
   @state()
   selectedLNodeType: Element | null | undefined = undefined;
@@ -129,7 +125,7 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
         );
     }
 
-    this.editor.commit(actions);
+    this.dispatchEvent(newEditEventV2(actions));
     this.onLNodeTypeInputChange();
   }
 
@@ -181,7 +177,7 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
       );
     }
 
-    this.editor.commit(actions);
+    this.dispatchEvent(newEditEventV2(actions));
     this.onDOTypeInputChange();
   }
 
@@ -233,7 +229,7 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
       );
     }
 
-    this.editor.commit(actions);
+    this.dispatchEvent(newEditEventV2(actions));
     this.onDATypeInputChange();
   }
 
@@ -285,22 +281,22 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
       );
     }
 
-    this.editor.commit(actions);
+    this.dispatchEvent(newEditEventV2(actions));
     this.onEnumTypeInputChange();
   }
 
   async handleCreateElement(createWizard: CreateWizard) {
     const edits = await this.editDialog?.create(createWizard);
     if (edits) {
-      this.editor.commit(edits);
+      this.dispatchEvent(newEditEventV2(edits));
       this.requestUpdate();
     }
   }
 
   async handleEditElement(editWizard: EditWizard) {
     const edits = await this.editDialog?.edit(editWizard);
     if (edits) {
-      this.editor.commit(edits);
+      this.dispatchEvent(newEditEventV2(edits));
       this.requestUpdate();
     }
   }
@@ -399,24 +395,23 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
           @input="${this.onEnumTypeInputChange}"
         ></oscd-editor-template-textfield>
         <div class="save">
-          <md-button
-            icon="save"
-            label="Save"
+          <md-text-button
             ?disabled=${!this.enumTypeDiff}
             @click="${this.onSaveEnumType}"
-          ></md-button>
+            ><md-icon slot="icon">save</md-icon>Save</md-text-button
+          >
         </div>
         <hr color="lightgrey" />
         <div class="add">
-          <md-button
-            icon="playlist_add"
-            label="Add EnumVal"
+          <md-text-button
             @click=${() =>
               this.handleCreateElement({
                 parent: this.selectedEnumType!,
                 tagName: 'EnumVal',
               })}
-          ></md-button>
+            ><md-icon slot="icon">playlist_add</md-icon>Add
+            EnumVal</md-text-button
+          >
         </div>
         <action-list
           .items=${items}
@@ -532,24 +527,23 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
           @input="${this.onDATypeInputChange}"
         ></oscd-editor-template-textfield>
         <div class="save">
-          <md-button
-            icon="save"
-            label="Save"
+          <md-text-button
             ?disabled=${!this.daTypeDiff}
             @click="${this.onSaveDAType}"
-          ></md-button>
+            ><md-icon slot="icon">save</md-icon>Save</md-text-button
+          >
         </div>
         <hr color="lightgrey" />
         <div class="add">
-          <md-button
-            icon="playlist_add"
-            label="Add Data Attribute"
+          <md-text-button
             @click=${() =>
               this.handleCreateElement({
                 parent: this.selectedDAType!,
                 tagName: 'BDA',
               })}
-          ></md-button>
+            ><md-icon slot="icon">playlist_add</md-icon>Add Data
+            Attribute</md-text-button
+          >
         </div>
         <action-list
           .items=${items}
@@ -675,33 +669,34 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
           @input="${this.onDOTypeInputChange}"
         ></oscd-editor-template-textfield>
         <div class="save">
-          <md-button
-            icon="save"
-            label="Save"
+          <md-text-button
             ?disabled=${!this.doTypeDiff}
             @click="${this.onSaveDOType}"
-          ></md-button>
+            ><md-icon slot="icon">save</md-icon>Save</md-text-button
+          >
         </div>
         <hr color="lightgrey" />
         <div class="add">
-          <md-button
+          <md-text-button
             icon="playlist_add"
             label="Add Data Object"
             @click="${() =>
               this.handleCreateElement({
                 parent: this.selectedDOType!,
                 tagName: 'SDO',
               })}"
-          ></md-button>
-          <md-button
-            icon="playlist_add"
-            label="Add Data Attribute"
+            ><md-icon slot="icon">playlist_add</md-icon>Add Data
+            Object</md-text-button
+          >
+          <md-text-button
             @click="${() =>
               this.handleCreateElement({
                 parent: this.selectedDOType!,
                 tagName: 'DA',
               })}"
-          ></md-button>
+            ><md-icon slot="icon">playlist_add</md-icon>Add Data
+            Attribute</md-text-button
+          >
         </div>
         <action-list
           .items=${items}
@@ -822,24 +817,23 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
           @input="${this.onLNodeTypeInputChange}"
         ></oscd-editor-template-textfield>
         <div class="save">
-          <md-button
-            icon="save"
-            label="Save"
+          <md-text-button
             ?disabled=${!this.lNodeTypeDiff}
             @click="${this.onSaveLNodeType}"
-          ></md-button>
+            ><md-icon slot="icon">save</md-icon>Save</md-text-button
+          >
         </div>
         <hr color="lightgrey" />
         <div class="add">
-          <md-button
-            icon="playlist_add"
-            label="Add Data Object"
+          <md-text-button
             @click=${() =>
               this.handleCreateElement({
                 parent: this.selectedLNodeType!,
                 tagName: 'DO',
               })}
-          ></md-button>
+            ><md-icon slot="icon">playlist_add</md-icon>Add Data
+            Object</md-text-button
+          >
         </div>
         <action-list
           .items=${items}
@@ -960,7 +954,7 @@ export default class OscdEditorTemplate extends ScopedElementsMixin(
       justify-content: flex-end;
     }
 
-    div.save > md-button {
+    div.save > md-text-button {
       margin: 10px;
     }