Improvement of the dragfactor calculation by using Linear TS estimator

app/client/components/AppDialog.js

@@ -46,10 +46,15 @@ export class AppDialog extends AppElement {
       justify-content: center;
       align-items: center;
     }
-    button:hover {
+    button:hover:not(.disabled) {
       filter: brightness(150%);
     }
 
+    button.disabled {
+      filter: brightness(50%);
+      pointer: none
+    }
+
     fieldset {
       border: 0;
       margin: unset;
@@ -67,20 +72,22 @@ export class AppDialog extends AppElement {
       padding: 0;
     }
   `
+  @property({ type: Boolean })
+    isValid = true
 
   @property({ type: Boolean, reflect: true })
     dialogOpen
 
   render () {
     return html`
     <dialog ${ref(this.dialog)} @close=${this.close}>
-      <form method="dialog">
+      <form >
         <fieldset role="document">
           <slot></slot>
         </fieldset>
         <menu>
-          <button value="cancel">Cancel</button>
-          <button value="confirm">OK</button>
+          <button formmethod="dialog" value="cancel">Cancel</button>
+          <button @click=${this.confirm} type="button" class="${this.isValid ? '' : 'disabled'}" value="confirm">OK</button>
         </menu>
       </form>
     </dialog>
@@ -95,6 +102,13 @@ export class AppDialog extends AppElement {
     }
   }
 
+  confirm () {
+    if (this.isValid) {
+      this.close({ target: { returnValue: 'confirm' } })
+      this.dialogOpen = false
+    }
+  }
+
   firstUpdated () {
     this.dialog.value.showModal()
   }

app/client/components/AppElement.js

@@ -6,22 +6,9 @@
 */
 
 import { LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-import { APP_STATE } from '../store/appState.js'
 export * from 'lit'
 
 export class AppElement extends LitElement {
-  // this is how we implement a global state: a global state object is passed via properties
-  // to child components
-  @property({ type: Object })
-    appState = APP_STATE
-
-  // ..and state changes are send back to the root component of the app by dispatching
-  // a CustomEvent
-  updateState () {
-    this.sendEvent('appStateChanged', this.appState)
-  }
-
   // a helper to dispatch events to the parent components
   sendEvent (eventType, eventData) {
     this.dispatchEvent(