@decidables/detectable-elements 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -62,5 +62,5 @@
     "jstat": "^1.9.6",
     "lit": "^3.1.0"
   },
-  "gitHead": "84c6fb7df16db2086e9f20496f873e67e05c56b4"
+  "gitHead": "eb7854f55122ecc8cca629bb95ec4b20e286f9d2"
 }

package/src/components/detectable-table.js

@@ -121,17 +121,17 @@ export default class DetectableTable extends DetectableElement {
     this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
     this.color = 'all';
 
-    this.h = 40;
-    this.m = 60;
-    this.fa = 75;
-    this.cr = 25;
-    this.alignState();
-
     this.payoff = false;
     this.hPayoff = undefined; // Hit payoff
     this.mPayoff = undefined; // Miss payoff
     this.crPayoff = undefined; // Correct Rejection payoff
     this.faPayoff = undefined; // False Alarm payoff
+
+    this.h = 40;
+    this.m = 60;
+    this.fa = 75;
+    this.cr = 25;
+    this.alignState();
   }
 
   alignState() {
@@ -442,6 +442,10 @@ export default class DetectableTable extends DetectableElement {
     ];
   }
 
+  willUpdate() {
+    this.alignState();
+  }
+
   render() {
     const payoffFormatter = new Intl.NumberFormat('en-US', {
       style: 'currency',
@@ -458,7 +462,6 @@ export default class DetectableTable extends DetectableElement {
       }).reduce((string, part) => { return string + part; });
     };
 
-    this.alignState();
     let h;
     let m;
     let fa;

package/src/components/roc-space.js

@@ -363,11 +363,13 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
     `;
   }
 
+  willUpdate() {
+    this.alignState();
+  }
+
   update(changedProperties) {
     super.update(changedProperties);
 
-    this.alignState();
-
     // Bail out if we can't get the width/height/rem
     if (Number.isNaN(this.width) || Number.isNaN(this.height) || Number.isNaN(this.rem)) {
       return;

package/src/components/sdt-model.js

@@ -477,11 +477,13 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
     }));
   }
 
+  willUpdate() {
+    this.alignState();
+  }
+
   update(changedProperties) {
     super.update(changedProperties);
 
-    this.alignState();
-
     // Bail out if we can't get the width/height
     if (Number.isNaN(this.width) || Number.isNaN(this.height) || Number.isNaN(this.rem)) {
       return;

package/src/equations/dc2far.js

@@ -88,8 +88,11 @@ export default class SDTEquationDC2Far extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let d;
     let c;
     let s;

package/src/equations/dc2hr.js

@@ -88,8 +88,11 @@ export default class SDTEquationDC2Hr extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let d;
     let c;
     let s;

package/src/equations/facr2far.js

@@ -68,8 +68,11 @@ export default class SDTEquationFaCr2Far extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let fa;
     let cr;
     let far;

package/src/equations/hfa2ppv.js

@@ -68,8 +68,11 @@ export default class SDTEquationHFa2Ppv extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let h;
     let fa;
     let ppv;

package/src/equations/hm2hr.js

@@ -68,8 +68,11 @@ export default class SDTEquationHM2Hr extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let h;
     let m;
     let hr;

package/src/equations/hmfacr2acc.js

@@ -94,8 +94,11 @@ export default class SDTEquationHMFaCr2Acc extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let h;
     let m;
     let fa;

package/src/equations/hrfar2c.js

@@ -88,8 +88,11 @@ export default class SDTEquationHrFar2C extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let hr;
     let far;
     let s;

package/src/equations/hrfar2d.js

@@ -88,8 +88,11 @@ export default class SDTEquationHrFar2D extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let hr;
     let far;
     let s;

package/src/equations/mcr2fomr.js

@@ -68,8 +68,11 @@ export default class SDTEquationMCr2Fomr extends SDTEquation {
     this.sendEvent();
   }
 
-  render() {
+  willUpdate() {
     this.alignState();
+  }
+
+  render() {
     let m;
     let cr;
     let fomr;

package/src/examples/double-interactive.js

@@ -8,7 +8,9 @@ import SDTExample from './sdt-example';
   <sdt-example-interactive>
 */
 export default class SDTExampleDoubleInteractive extends SDTExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.one = {};
     this.one.h = 95;
     this.one.m = 5;

package/src/examples/human.js

@@ -8,7 +8,9 @@ import SDTExample from './sdt-example';
   <sdt-example-human>
 */
 export default class SDTExampleHuman extends SDTExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.count = 1;
 
     this.detectableControl = this.querySelector('detectable-control');

package/src/examples/interactive.js

@@ -8,7 +8,9 @@ import SDTExample from './sdt-example';
   <sdt-example-interactive>
 */
 export default class SDTExampleInteractive extends SDTExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.detectableControl = this.querySelector('detectable-control');
     this.detectableTable = this.querySelector('detectable-table');
     this.rocSpace = this.querySelector('roc-space');

package/src/examples/model.js

@@ -8,7 +8,9 @@ import SDTExample from './sdt-example';
   <sdt-example-model>
 */
 export default class SDTExampleModel extends SDTExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.count = 1;
 
     this.detectableControl = this.querySelector('detectable-control');

package/src/examples/multiple.js

@@ -30,7 +30,9 @@ export default class SDTExampleMultiple extends SDTExample {
     this.values = [0, 1];
   }
 
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.detectableControl = this.querySelector('detectable-control');
     this.rocSpace = this.querySelector('roc-space');
     this.sdtModel = this.querySelector('sdt-model');

package/src/examples/unequal.js

@@ -7,7 +7,9 @@ import SDTExample from './sdt-example';
   <sdt-example-unequal>
 */
 export default class SDTExampleUnequal extends SDTExample {
-  firstUpdated(/* changedProperties */) {
+  connectedCallback() {
+    super.connectedCallback();
+
     this.detectableControl = this.querySelector('detectable-control');
     this.rocSpace = this.querySelector('roc-space');
     this.sdtModel = this.querySelector('sdt-model');