refactor(logging): add reset kind log event (#247)

* refactor(logging): add reset kind log event

* test(open-scd): update snapshot

* test(logging): adapt reset unit test

* refactor(logging): remove public reset method

Author: ca-d

__snapshots__/open-scd.md

@@ -392,6 +392,11 @@
     on=""
   >
   </mwc-icon-button-toggle>
+  <mwc-icon-button-toggle
+    id="resetfilter"
+    on=""
+  >
+  </mwc-icon-button-toggle>
   <mwc-list
     id="content"
     wrapfocus=""

src/Logging.ts

@@ -23,6 +23,7 @@ const icons = {
   warning: 'warning',
   error: 'report',
   action: 'history',
+  reset: 'none',
 };
 
 /**
@@ -33,8 +34,6 @@ const icons = {
  * the committed action, allowing the user to go to `previousAction` with
  * `undo()` if `canUndo` and to go to `nextAction` with `redo()` if `canRedo`.
  *
- * Also provides a `reset()` method resetting the history and `currentAction`.
- *
  * Renders the `history` to `logUI` and the latest `'error'` [[`LogEntry`]] to
  * `messageUI`.
  */
@@ -95,19 +94,19 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       return true;
     }
 
-    /** Resets the history to an empty state. */
-    reset(): void {
-      this.history = [];
-      this.currentAction = -1;
-    }
-
     private onLog(le: LogEvent): void {
+      if (le.detail.kind === 'reset') {
+        this.history = [];
+        this.currentAction = -1;
+        return;
+      }
+
       const entry: LogEntry = {
         time: new Date(),
         ...le.detail,
       };
 
-      if (entry.kind == 'action') {
+      if (entry.kind === 'action') {
         if (entry.action.derived) return;
         entry.action.derived = true;
         if (this.nextAction !== -1) this.history.splice(this.nextAction);
@@ -145,11 +144,9 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
 
       this.undo = this.undo.bind(this);
       this.redo = this.redo.bind(this);
-      this.reset = this.reset.bind(this);
 
       this.onLog = this.onLog.bind(this);
       this.addEventListener('log', this.onLog);
-      this.addEventListener('open-doc', this.reset);
     }
 
     renderLogEntry(

src/foundation.ts

@@ -222,7 +222,7 @@ export function newWizardEvent(
 
 type InfoEntryKind = 'info' | 'warning' | 'error';
 
-export type LogEntryType = 'info' | 'warning' | 'error' | 'action';
+export type LogEntryType = 'info' | 'warning' | 'error' | 'action' | 'reset';
 
 /** The basic information contained in each [[`LogEntry`]]. */
 interface LogDetailBase {
@@ -240,7 +240,11 @@ export interface InfoDetail extends LogDetailBase {
   cause?: LogEntry;
 }
 
-export type LogDetail = InfoDetail | CommitDetail;
+export interface ResetDetail {
+  kind: 'reset';
+}
+
+export type LogDetail = InfoDetail | CommitDetail | ResetDetail;
 export type LogEvent = CustomEvent<LogDetail>;
 export function newLogEvent(
   detail: LogDetail,

src/icons.ts

@@ -54,9 +54,10 @@ export const iconColors = {
 };
 
 export function getFilterIcon(
-  type: 'action' | 'info' | 'warning' | 'error',
+  type: 'action' | 'info' | 'warning' | 'error' | 'reset',
   state: boolean
 ): TemplateResult {
+  if (type === 'reset') return html``;
   return html`<svg
     slot="${state ? 'onIcon' : 'offIcon'}"
     style="color:var(${state ? iconColors[type] : '--mwc-theme-on-background'})"

src/menu/NewProject.ts

@@ -5,6 +5,7 @@ import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
 import {
   EditorAction,
+  newLogEvent,
   newOpenDocEvent,
   newWizardEvent,
   Wizard,
@@ -25,6 +26,9 @@ export default class NewProjectPlugin extends LitElement {
         .value
     );
 
+    document
+      .querySelector('open-scd')
+      ?.dispatchEvent(newLogEvent({ kind: 'reset' }));
     document
       .querySelector('open-scd')
       ?.dispatchEvent(

src/menu/OpenProject.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement, query, TemplateResult } from 'lit-element';
 
-import { newOpenDocEvent } from '../foundation.js';
+import { newLogEvent, newOpenDocEvent } from '../foundation.js';
 
 export default class OpenProjectPlugin extends LitElement {
   @query('#open-plugin-input') pluginFileUI!: HTMLInputElement;
@@ -14,6 +14,9 @@ export default class OpenProjectPlugin extends LitElement {
     const docName = file.name;
     const doc = new DOMParser().parseFromString(text, 'application/xml');
 
+    document
+      .querySelector('open-scd')!
+      .dispatchEvent(newLogEvent({ kind: 'reset' }));
     document
       .querySelector('open-scd')!
       .dispatchEvent(newOpenDocEvent(doc, docName));

src/open-scd.ts

@@ -86,12 +86,16 @@ export class OpenSCD extends Hosting(
     if (ctrlAnd('l')) this.logUI.open ? this.logUI.close() : this.logUI.show();
     if (ctrlAnd('m')) this.menuUI.open = !this.menuUI.open;
     if (ctrlAnd('o'))
-      this.menuUI.querySelector<ListItem>('mwc-list-item.loader')?.click();
+      this.menuUI
+        .querySelector<ListItem>('mwc-list-item[iconid="folder_open"]')
+        ?.click();
+    if (ctrlAnd('O'))
+      this.menuUI
+        .querySelector<ListItem>('mwc-list-item[iconid="create_new_folder"]')
+        ?.click();
     if (ctrlAnd('s'))
-      this.menuUI.querySelector<ListItem>('mwc-list-item.saver')?.click();
-    if (ctrlAnd('S'))
       this.menuUI
-        .querySelector<ListItem>('mwc-list-item.saver + mwc-list-item.saver')
+        .querySelector<ListItem>('mwc-list-item[iconid="save"]')
         ?.click();
     if (ctrlAnd('P')) this.pluginUI.show();
 

test/unit/Logging.test.ts

@@ -114,7 +114,7 @@ describe('LoggingElement', () => {
     });
 
     it('can reset its history', () => {
-      element.reset();
+      element.dispatchEvent(newLogEvent({ kind: 'reset' }));
       expect(element).property('history').to.be.empty;
       expect(element).to.have.property('currentAction', -1);
     });