@decidables/detectable-elements 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -52,15 +52,15 @@
     "build": "gulp build"
   },
   "devDependencies": {
-    "@web/test-runner": "^0.17.1",
+    "@web/test-runner": "^0.18.0",
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.3.5",
-    "@decidables/detectable-math": "^0.1.5",
+    "@decidables/decidables-elements": "^0.4.1",
+    "@decidables/detectable-math": "^0.1.6",
     "d3": "^7.8.5",
     "jstat": "^1.9.6",
-    "lit": "^2.8.0"
+    "lit": "^3.1.0"
   },
-  "gitHead": "071d7fb4aa5d4fcf826f76d9a1452f1730ee558e"
+  "gitHead": "84c6fb7df16db2086e9f20496f873e67e05c56b4"
 }

package/src/components/rdk-task.js

@@ -2,6 +2,8 @@
 import {html, css} from 'lit';
 import * as d3 from 'd3';
 
+import {DecidablesMixinResizeable} from '@decidables/decidables-elements';
+
 import DetectableElement from '../detectable-element';
 
 /*
@@ -12,7 +14,7 @@ import DetectableElement from '../detectable-element';
   Dots; Coherence;
   # Direction, Speed, Lifetime
 */
-export default class RDKTask extends DetectableElement {
+export default class RDKTask extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       coherence: {
@@ -71,22 +73,6 @@ export default class RDKTask extends DetectableElement {
         type: Number,
         reflect: false,
       },
-
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
     };
   }
 
@@ -108,10 +94,6 @@ export default class RDKTask extends DetectableElement {
     this.lifetime = 400; // Lifetime of each dot in milliseconds
     this.speed = 50; // Rate of dot movement in pixels per second
 
-    this.width = NaN; // Width of component in pixels
-    this.height = NaN; // Height of component in pixels
-    this.rem = NaN; // Pixels per rem for component
-
     // Private
     this.firstUpdate = true;
     this.COHERENT = 0; // "Constant" for index to coherent dots
@@ -192,30 +174,6 @@ export default class RDKTask extends DetectableElement {
     return html``;
   }
 
-  getDimensions() {
-    this.width = parseFloat(this.getComputedStyleValue('width'), 10);
-    this.height = parseFloat(this.getComputedStyleValue('height'), 10);
-    this.rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-    // console.log(`rdk-task: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
-
   update(changedProperties) {
     super.update(changedProperties);
 

package/src/components/roc-space.js

@@ -2,6 +2,7 @@
 import {html, css} from 'lit';
 import * as d3 from 'd3';
 
+import {DecidablesMixinResizeable} from '@decidables/decidables-elements';
 import SDTMath from '@decidables/detectable-math';
 
 import DetectableElement from '../detectable-element';
@@ -23,7 +24,7 @@ import DetectableElement from '../detectable-element';
   Styles:
     ??
 */
-export default class ROCSpace extends DetectableElement {
+export default class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       contour: {
@@ -79,22 +80,6 @@ export default class ROCSpace extends DetectableElement {
         type: Number,
         reflect: false,
       },
-
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
     };
   }
 
@@ -137,10 +122,6 @@ export default class ROCSpace extends DetectableElement {
     this.isoDArray = [];
     this.isoCArray = [];
 
-    this.width = NaN;
-    this.height = NaN;
-    this.rem = NaN;
-
     this.alignState();
   }
 
@@ -382,30 +363,6 @@ export default class ROCSpace extends DetectableElement {
     `;
   }
 
-  getDimensions() {
-    this.width = parseFloat(this.getComputedStyleValue('width'), 10);
-    this.height = parseFloat(this.getComputedStyleValue('height'), 10);
-    this.rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-    // console.log(`roc-space: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
-
   update(changedProperties) {
     super.update(changedProperties);
 

package/src/components/sdt-model.js

@@ -3,6 +3,7 @@ import {html, css} from 'lit';
 import * as d3 from 'd3';
 import jStat from 'jstat';
 
+import {DecidablesMixinResizeable} from '@decidables/decidables-elements';
 import SDTMath from '@decidables/detectable-math';
 
 import DetectableElement from '../detectable-element';
@@ -21,7 +22,7 @@ import DetectableElement from '../detectable-element';
     Styles:
       ??
 */
-export default class SDTModel extends DetectableElement {
+export default class SDTModel extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       color: {
@@ -100,22 +101,6 @@ export default class SDTModel extends DetectableElement {
         type: Array,
         reflect: false,
       },
-
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false,
-      },
     };
   }
 
@@ -144,10 +129,6 @@ export default class SDTModel extends DetectableElement {
     this.responses = ['present', 'absent']; // Allowable values of trial.response
     this.trials = []; // Array of simulated trials
 
-    this.width = NaN; // Width of component in pixels
-    this.height = NaN; // Height of component in pixels
-    this.rem = NaN; // Pixels per rem for component
-
     // Private
     this.muN = NaN; // Mean of noise distribution
     this.muS = NaN; // Mean of signal distribution
@@ -496,30 +477,6 @@ export default class SDTModel extends DetectableElement {
     }));
   }
 
-  getDimensions() {
-    this.width = parseFloat(this.getComputedStyleValue('width'), 10);
-    this.height = parseFloat(this.getComputedStyleValue('height'), 10);
-    this.rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-    // console.log(`sdt-model: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
-
   update(changedProperties) {
     super.update(changedProperties);