@decidables/detectable-elements 0.0.3

package/src/examples/model.js

@@ -0,0 +1,203 @@
+
+import SDTMath from '@decidables/detectable-math';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExample_Model element
+  <sdt-example-model>
+*/
+export default class SDTExampleModel extends SDTExample {
+  firstUpdated(/* changedProperties */) {
+    this.count = 1;
+
+    this.detectableControl = this.querySelector('detectable-control');
+    this.rdkTask = this.querySelector('rdk-task');
+    this.sdtModel = this.querySelector('sdt-model');
+    this.detectableResponse = this.querySelector('detectable-response');
+    this.detectableTable = this.querySelector('detectable-table');
+    this.rocSpace = this.querySelector('roc-space');
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('color')) {
+      this.detectableControl.addEventListener('detectable-control-color', (event) => {
+        if (this.sdtModel) {
+          this.sdtModel.color = event.detail.color;
+        }
+
+        if (this.detectableTable) {
+          this.detectableTable.color = event.detail.color;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('duration')) {
+      this.detectableControl.addEventListener('detectable-control-duration', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.duration = event.detail.duration;
+          this.rdkTask.wait = event.detail.duration;
+          this.rdkTask.iti = event.detail.duration;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('trials')) {
+      this.detectableControl.addEventListener('detectable-control-trials', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.trials = event.detail.trials;
+        }
+
+        if (this.detectableResponse) {
+          this.detectableResponse.trialTotal = event.detail.trials;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('coherence')) {
+      this.detectableControl.addEventListener('detectable-control-coherence', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.coherence = event.detail.coherence;
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('run')) {
+      this.detectableControl.addEventListener('detectable-control-run', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.running = true;
+        }
+        if (this.sdtModel) {
+          this.sdtModel.resumeTrial();
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('pause')) {
+      this.detectableControl.addEventListener('detectable-control-pause', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.running = false;
+        }
+        if (this.sdtModel) {
+          this.sdtModel.pauseTrial();
+        }
+      });
+    }
+
+    if (this.detectableControl && this.detectableControl.hasAttribute('reset')) {
+      this.detectableControl.addEventListener('detectable-control-reset', (/* event */) => {
+        if (this.rdkTask) {
+          this.rdkTask.reset();
+        }
+
+        if (this.detectableResponse) {
+          this.detectableResponse.reset();
+        }
+
+        if (this.sdtModel) {
+          this.sdtModel.reset();
+        }
+
+        if (this.detectableTable) {
+          this.detectableTable.h = 0;
+          this.detectableTable.m = 0;
+          this.detectableTable.fa = 0;
+          this.detectableTable.cr = 0;
+        }
+
+        if (this.rocSpace) {
+          if (this.rocSpace.hasAttribute('history')) {
+            this.count += 1;
+            this.rocSpace.set(0.5, 0.5, `point${this.count}`, '', 1);
+          } else {
+            this.rocSpace.hr = 0.5;
+            this.rocSpace.far = 0.5;
+          }
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      if (this.detectableResponse) {
+        this.detectableResponse.trialTotal = this.rdkTask.trials;
+      }
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-start', (event) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.start(event.detail.signal, event.detail.trial);
+        }
+        if (this.sdtModel) {
+          this.sdtModel.trial(
+            event.detail.trial,
+            event.detail.signal,
+            event.detail.duration,
+            event.detail.wait,
+            event.detail.iti,
+          );
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-middle', (/* event */) => {
+        // if (this.sdtModel) {
+        //   this.sdtModel.trial(event.detail.trial, event.detail.signal);
+        // }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-end', (/* event */) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.stop();
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-block-end', (/* event */) => {
+        if (this.detectableControl) {
+          this.detectableControl.complete();
+        }
+      });
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('detectable-response', (event) => {
+        if (this.detectableResponse) {
+          this.detectableResponse.responded(event.detail.response);
+        }
+
+        if (this.detectableTable) {
+          this.detectableTable.h = event.detail.h;
+          this.detectableTable.m = event.detail.m;
+          this.detectableTable.fa = event.detail.fa;
+          this.detectableTable.cr = event.detail.cr;
+        }
+
+        if (this.rocSpace) {
+          this.rocSpace.hr = SDTMath.hM2Hr((event.detail.h), (event.detail.m));
+          this.rocSpace.far = SDTMath.faCr2Far((event.detail.fa), (event.detail.cr));
+        }
+      });
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.detectableTable) {
+          this.detectableTable.h = event.detail.h;
+          this.detectableTable.m = event.detail.m;
+          this.detectableTable.fa = event.detail.fa;
+          this.detectableTable.cr = event.detail.cr;
+        }
+
+        if (this.rocSpace) {
+          this.rocSpace.hr = SDTMath.hM2Hr((event.detail.h), (event.detail.m));
+          this.rocSpace.far = SDTMath.faCr2Far((event.detail.fa), (event.detail.cr));
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-model', SDTExampleModel);

package/src/examples/sdt-example.js

@@ -0,0 +1,76 @@
+
+import {html, css} from 'lit';
+
+import DetectableElement from '../detectable-element';
+
+/*
+  SDTExample Base Class - Not intended for instantiation!
+  <sdt-example>
+*/
+export default class SDTExample extends DetectableElement {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---border: var(--border, 1px solid var(---color-border));
+          display: inline-block;
+
+          /* This makes IE11 happy */
+          width: 100%;
+
+          margin-bottom: 1rem;
+        }
+
+        .holder {
+          display: flex;
+        }
+
+        .body {
+          display: flex;
+
+          flex-wrap: wrap;
+
+          align-items: center;
+          justify-content: left;
+
+          padding: 0.625rem;
+
+          border: var(---border);
+          border-radius: 0.25rem;
+        }
+
+        .body ::slotted(*) {
+          margin: 0.625rem;
+        }
+
+        /* HACK: Sibling selectors not working with ::slotted */
+        /* .body > rdk-task + detectable-response,
+        ::slotted(rdk-task) + ::slotted(detectable-response) { */
+        .body ::slotted(detectable-response) {
+          margin-left: 0;
+        }
+
+        /* HACK: Sibling selectors not working with ::slotted */
+        /* .body > detectable-control + rdk-task,
+        ::slotted(detectable-control) + ::slotted(rdk-task) {
+          margin-left: 0;
+        } */
+        .body ::slotted(rdk-task) {
+          margin-left: 0;
+        }
+      `,
+    ];
+  }
+
+  render() { // eslint-disable-line class-methods-use-this
+    return html`
+      <div class="holder">
+        <div class="body">
+          <slot>Empty!</slot>
+        </div>
+      </div>`;
+  }
+}
+
+customElements.define('sdt-example', SDTExample);

package/src/examples/unequal.js

@@ -0,0 +1,43 @@
+import * as d3 from 'd3';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExampleUnequal element
+  <sdt-example-unequal>
+*/
+export default class SDTExampleUnequal extends SDTExample {
+  firstUpdated(/* changedProperties */) {
+    this.detectableControl = this.querySelector('detectable-control');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModel = this.querySelector('sdt-model');
+
+    if (this.detectableControl) {
+      this.detectableControl.addEventListener('detectable-control-z-roc', (event) => {
+        this.rocSpace.zRoc = event.detail.zRoc;
+      });
+    }
+
+    if (this.rocSpace) {
+      this.rocSpace.setWithSDT(1, 0, 'default', '', 1); // Set 'default' to equal variance for contours
+    }
+
+    if (this.sdtModel) {
+      if (this.rocSpace) {
+        d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {
+          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
+        });
+      }
+
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {
+            this.rocSpace.setWithSDT(event.detail.d, c, `point${index}`, '', event.detail.s);
+          });
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-unequal', SDTExampleUnequal);

package/src/index.js

@@ -0,0 +1,6 @@
+
+// Internal dependencies
+export {default as DetectableElement} from './detectable-element';
+export * from './components';
+export * from './equations';
+export * from './examples';