@doenet/doenetml 0.6.0-alpha1

package/src/Core/components/chemistry/IonicCompound.js

@@ -0,0 +1,189 @@
+import InlineComponent from "../abstract/InlineComponent";
+import me from "math-expressions";
+import {
+  returnSelectedStyleStateVariableDefinition,
+  returnTextStyleDescriptionDefinitions,
+} from "../../utils/style";
+
+export default class IonicCompound extends InlineComponent {
+  static componentType = "ionicCompound";
+  static rendererType = "math";
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+
+    attributes.symbol = {
+      createComponentOfType: "text",
+    };
+
+    attributes.atomicNumber = {
+      createComponentOfType: "integer",
+    };
+
+    attributes.charge = {
+      createComponentOfType: "integer",
+    };
+
+    return attributes;
+  }
+
+  static returnChildGroups() {
+    return [
+      {
+        group: "ions",
+        componentTypes: ["ion"],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    let selectedStyleDefinition = returnSelectedStyleStateVariableDefinition();
+    Object.assign(stateVariableDefinitions, selectedStyleDefinition);
+
+    let styleDescriptionDefinitions = returnTextStyleDescriptionDefinitions();
+    Object.assign(stateVariableDefinitions, styleDescriptionDefinitions);
+
+    stateVariableDefinitions.ionicCompound = {
+      // public: true,
+      // shadowingInstructions: {
+      //   createComponentOfType: "integer",
+      // },
+      returnDependencies: () => ({
+        ionChildren: {
+          dependencyType: "child",
+          childGroups: ["ions"],
+          variableNames: ["symbol", "charge", "atomicNumber", "name"],
+        },
+      }),
+      definition({ dependencyValues }) {
+        let charges = dependencyValues.ionChildren.map(
+          (child) => child.stateValues.charge,
+        );
+
+        if (charges.length !== 2) {
+          console.warn(
+            "have not implemented ionic compound for anything other than two ions",
+          );
+          return { setValue: { ionicCompound: null } };
+        }
+
+        if (!(charges[0] * charges[1] < 0)) {
+          console.warn(
+            "ionic compound implemented only for one cation and one anion",
+          );
+          return { setValue: { ionicCompound: null } };
+        }
+
+        let n1 = Math.abs(charges[1]);
+        let n2 = Math.abs(charges[0]);
+
+        let gcd = me.math.gcd(n1, n2);
+        n1 /= gcd;
+        n2 /= gcd;
+
+        let ionicCompound = [
+          {
+            symbol: dependencyValues.ionChildren[0].stateValues.symbol,
+            atomicNumber:
+              dependencyValues.ionChildren[0].stateValues.atomicNumber,
+            name: dependencyValues.ionChildren[0].stateValues.name,
+            charge: charges[0],
+            count: n1,
+          },
+          {
+            symbol: dependencyValues.ionChildren[1].stateValues.symbol,
+            atomicNumber:
+              dependencyValues.ionChildren[1].stateValues.atomicNumber,
+            name: dependencyValues.ionChildren[1].stateValues.name,
+            charge: charges[1],
+            count: n2,
+          },
+        ];
+
+        return { setValue: { ionicCompound } };
+      },
+    };
+
+    stateVariableDefinitions.math = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: "math",
+      },
+      returnDependencies: () => ({
+        ionicCompound: {
+          dependencyType: "stateVariable",
+          variableName: "ionicCompound",
+        },
+      }),
+      definition({ dependencyValues }) {
+        let tree;
+
+        if (dependencyValues.ionicCompound) {
+          tree = [];
+          for (let piece of dependencyValues.ionicCompound) {
+            let pieceTree = piece.symbol;
+            if (piece.count > 1) {
+              pieceTree = ["_", pieceTree, piece.count];
+            }
+            tree.push(pieceTree);
+          }
+          if (tree.length > 1) {
+            tree = ["*", ...tree];
+          } else if (tree.length === 1) {
+            tree = tree[0];
+          } else {
+            tree = "\uff3f";
+          }
+        } else {
+          tree = "\uff3f";
+        }
+        return {
+          setValue: { math: me.fromAst(tree) },
+        };
+      },
+    };
+
+    stateVariableDefinitions.latex = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: "latex",
+      },
+      additionalStateVariablesDefined: [
+        {
+          variableName: "latexWithInputChildren",
+          forRenderer: true,
+        },
+      ],
+      returnDependencies: () => ({
+        ionicCompound: {
+          dependencyType: "stateVariable",
+          variableName: "ionicCompound",
+        },
+      }),
+      definition({ dependencyValues }) {
+        let latex;
+
+        if (dependencyValues.ionicCompound) {
+          latex = "";
+          for (let piece of dependencyValues.ionicCompound) {
+            latex += `\\text{${piece.symbol}}`;
+            if (piece.count > 1) {
+              latex += `_{${piece.count}}`;
+            }
+          }
+        } else {
+          latex = "[\\text{Invalid Ionic Compound}]";
+        }
+        return {
+          setValue: { latex, latexWithInputChildren: [latex] },
+        };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  static adapters = ["math"];
+}

package/src/Core/components/chemistry/OrbitalDiagram.js

@@ -0,0 +1,175 @@
+import BlockComponent from "../abstract/BlockComponent";
+
+export default class OrbitalDiagram extends BlockComponent {
+  constructor(args) {
+    super(args);
+
+    Object.assign(this.actions, {
+      recordVisibilityChange: this.recordVisibilityChange.bind(this),
+    });
+  }
+
+  static componentType = "orbitalDiagram";
+
+  static variableForPlainMacro = "value";
+  static plainMacroReturnsSameType = true;
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+    attributes.labels = {
+      createComponentOfType: "textList",
+      createStateVariable: "labels",
+      defaultValue: [],
+    };
+    return attributes;
+  }
+
+  static returnSugarInstructions() {
+    let sugarInstructions = [
+      {
+        replacementFunction: function ({ matchedChildren }) {
+          if (
+            matchedChildren.length === 1 &&
+            typeof matchedChildren[0] !== "string"
+          ) {
+            return { success: false };
+          }
+
+          return {
+            success: true,
+            newChildren: [
+              {
+                componentType: "tupleList",
+                children: matchedChildren,
+              },
+            ],
+          };
+        },
+      },
+    ];
+
+    return sugarInstructions;
+  }
+
+  static returnChildGroups() {
+    return [
+      {
+        group: "tupleLists",
+        componentTypes: ["tupleList"],
+      },
+      {
+        group: "orbitalDiagrams",
+        componentTypes: ["orbitalDiagram"],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    stateVariableDefinitions.value = {
+      defaultValue: [{ orbitalText: "", boxes: [] }],
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: this.componentType,
+      },
+      forRenderer: true,
+      returnDependencies: () => ({
+        orbitalDiagramChildren: {
+          dependencyType: "child",
+          childGroups: ["orbitalDiagrams"],
+          variableNames: ["value"],
+        },
+        tupleListChildren: {
+          dependencyType: "child",
+          childGroups: ["tupleLists"],
+          variableNames: ["maths"],
+        },
+        labels: {
+          dependencyType: "stateVariable",
+          variableName: "labels",
+        },
+      }),
+      definition: function ({ dependencyValues }) {
+        function processedValues() {
+          function boxFromEntry(entry) {
+            if (entry === "u" || entry === "U") {
+              return "U";
+            } else if (entry === "d" || entry === "D") {
+              return "D";
+            } else if (entry === "e" || entry === "E") {
+              return "";
+            } else if (Array.isArray(entry) && entry[0] === "*") {
+              let str = "";
+              for (let fac of entry.slice(1)) {
+                if (fac === "u" || fac === "U") {
+                  str += "U";
+                } else if (fac === "d" || fac === "D") {
+                  str += "D";
+                } else {
+                  // if any factor is not a u or d, create empty box
+                  return "";
+                }
+              }
+              return str;
+            } else {
+              // create empty box
+              return "";
+            }
+          }
+
+          if (dependencyValues.orbitalDiagramChildren.length === 1) {
+            return dependencyValues.orbitalDiagramChildren[0].stateValues.value;
+          }
+
+          let rows = [];
+          if (
+            dependencyValues.tupleListChildren[0]?.stateValues.maths.length > 0
+          ) {
+            let valuesList =
+              dependencyValues.tupleListChildren[0].stateValues.maths;
+            for (let [rowInd, row] of valuesList.entries()) {
+              let orbitalText = "";
+              if (dependencyValues.labels[rowInd]) {
+                orbitalText = dependencyValues.labels[rowInd];
+              }
+              let boxes = [];
+              if (Array.isArray(row.tree) && row.tree[0] === "tuple") {
+                for (let entry of row.tree.slice(1)) {
+                  boxes.push(boxFromEntry(entry));
+                }
+              } else {
+                boxes.push(boxFromEntry(row.tree));
+              }
+              rows.push({ orbitalText, boxes });
+            }
+
+            return rows;
+          } else {
+            return [{ orbitalText: "", boxes: [] }];
+          }
+        }
+
+        return {
+          setValue: {
+            value: processedValues(),
+          },
+        };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  recordVisibilityChange({ isVisible, actionId }) {
+    this.coreFunctions.requestRecordEvent({
+      verb: "visibilityChanged",
+      object: {
+        componentName: this.componentName,
+        componentType: this.componentType,
+      },
+      result: { isVisible },
+    });
+    this.coreFunctions.resolveAction({ actionId });
+  }
+}