@decidables/detectable-elements 0.1.2 → 0.2.1

package/src/examples/multiple.js

@@ -0,0 +1,76 @@
+
+import DecidablesConverterArray from '@decidables/decidables-elements/converter-array';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExampleMulti element
+  <sdt-example-multi>
+*/
+export default class SDTExampleMultiple extends SDTExample {
+  static get properties() {
+    return {
+      variable: {
+        attribute: 'variable',
+        type: String,
+        reflect: true,
+      },
+      values: {
+        attribute: 'values',
+        converter: DecidablesConverterArray,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.variables = ['d', 'c'];
+    this.variable = 'd';
+    this.values = [0, 1];
+  }
+
+  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);
+      if (this.variable === 'd') {
+        this.values.forEach((d, index) => {
+          this.rocSpace.setWithSDT(d, this.sdtModel.c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      } else if (this.variable === 'c') {
+        this.values.forEach((c, index) => {
+          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      }
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
+          if (this.variable === 'd') {
+            this.values.forEach((d, index) => {
+              this.rocSpace.setWithSDT(d, event.detail.c, `point${index}`, index + 1, event.detail.s);
+            });
+          } else if (this.variable === 'c') {
+            this.values.forEach((c, index) => {
+              this.rocSpace.setWithSDT(event.detail.d, c, `point${index}`, index + 1, event.detail.s);
+            });
+          }
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-multiple', SDTExampleMultiple);

package/src/examples/sdt-example.js

@@ -13,7 +13,6 @@ export default class SDTExample extends DetectableElement {
       super.styles,
       css`
         :host {
-          ---border: var(--border, 1px solid var(---color-border));
           display: inline-block;
 
           margin-bottom: 1rem;
@@ -34,7 +33,7 @@ export default class SDTExample extends DetectableElement {
           padding: 0.625rem;
 
           border: var(---border);
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
         }
 
         .body ::slotted(*) {
@@ -60,7 +59,7 @@ export default class SDTExample extends DetectableElement {
     ];
   }
 
-  render() { // eslint-disable-line class-methods-use-this
+  render() { /* eslint-disable-line class-methods-use-this */
     return html`
       <div class="holder">
         <div class="body">

package/src/examples/unequal.js

@@ -20,15 +20,13 @@ export default class SDTExampleUnequal extends SDTExample {
 
     if (this.rocSpace) {
       this.rocSpace.setWithSDT(1, 0, 'default', '', 1); // Set 'default' to equal variance for contours
+
+      d3.range(-1.5, 1.6, 0.5).forEach((c, index) => {
+        this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, '', this.sdtModel.s);
+      });
     }
 
     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) => {