@doenet/doenetml 0.6.0-alpha1

package/src/Core/components/Template.js

@@ -0,0 +1,360 @@
+import CompositeComponent from "./abstract/CompositeComponent";
+import { deepClone } from "../utils/deepFunctions";
+import { processAssignNames } from "../utils/serializedStateProcessing";
+import {
+  convertAttributesForComponentType,
+  verifyReplacementsMatchSpecifiedType,
+} from "../utils/copy";
+import { setUpVariantSeedAndRng } from "../utils/variants";
+
+export default class Template extends CompositeComponent {
+  static componentType = "template";
+
+  static treatAsComponentForRecursiveReplacements = true;
+  static includeBlankStringChildren = true;
+  static renderedDefault = false;
+
+  static assignNamesToReplacements = true;
+
+  static createsVariants = true;
+
+  static stateVariableToEvaluateAfterReplacements = "readyToExpandWhenResolved";
+
+  static keepChildrenSerialized({ serializedComponent }) {
+    if (serializedComponent.children === undefined) {
+      return [];
+    } else {
+      return Object.keys(serializedComponent.children);
+    }
+  }
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+    attributes.rendered = {
+      createComponentOfType: "boolean",
+      createStateVariable: "rendered",
+      defaultValue: this.renderedDefault,
+      public: true,
+    };
+    attributes.isResponse = {
+      leaveRaw: true,
+    };
+    attributes.createComponentOfType = {
+      createPrimitiveOfType: "string",
+    };
+    attributes.numComponents = {
+      createPrimitiveOfType: "number",
+    };
+    return attributes;
+  }
+
+  // don't need child logic
+  // as all children will remain serialized
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    let componentClass = this;
+
+    stateVariableDefinitions.serializedChildren = {
+      returnDependencies: () => ({
+        serializedChildren: {
+          dependencyType: "serializedChildren",
+          doNotProxy: true,
+        },
+      }),
+      definition: function ({ dependencyValues }) {
+        return {
+          setValue: {
+            serializedChildren: dependencyValues.serializedChildren,
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.newNamespace = {
+      returnDependencies: () => ({
+        newNamespace: {
+          dependencyType: "attributePrimitive",
+          attributeName: "newNamespace",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: {
+            newNamespace: dependencyValues.newNamespace,
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.readyToExpandWhenResolved = {
+      returnDependencies: () => ({
+        rendered: {
+          dependencyType: "stateVariable",
+          variableName: "rendered",
+        },
+      }),
+      definition: function () {
+        return { setValue: { readyToExpandWhenResolved: true } };
+      },
+      markStale() {
+        return { updateReplacements: true };
+      },
+    };
+
+    stateVariableDefinitions.isVariantComponent = {
+      returnDependencies: () => ({}),
+      definition: () => ({ setValue: { isVariantComponent: true } }),
+    };
+
+    stateVariableDefinitions.generatedVariantInfo = {
+      returnDependencies: ({ sharedParameters, componentInfoObjects }) => ({
+        variantSeed: {
+          dependencyType: "value",
+          value: sharedParameters.variantSeed,
+        },
+        variantDescendants: {
+          dependencyType: "descendant",
+          componentTypes: Object.keys(
+            componentInfoObjects.componentTypesCreatingVariants,
+          ),
+          variableNames: ["isVariantComponent", "generatedVariantInfo"],
+          useReplacementsForComposites: true,
+          recurseToMatchedChildren: false,
+          variablesOptional: true,
+          includeNonActiveChildren: true,
+          ignoreReplacementsOfEncounteredComposites: true,
+        },
+      }),
+      definition({ dependencyValues, componentName }) {
+        let generatedVariantInfo = {
+          seed: dependencyValues.variantSeed,
+          meta: {
+            createdBy: componentName,
+          },
+        };
+
+        let subvariants = (generatedVariantInfo.subvariants = []);
+        for (let descendant of dependencyValues.variantDescendants) {
+          if (descendant.stateValues.isVariantComponent) {
+            subvariants.push(descendant.stateValues.generatedVariantInfo);
+          } else if (descendant.stateValues.generatedVariantInfo) {
+            subvariants.push(
+              ...descendant.stateValues.generatedVariantInfo.subvariants,
+            );
+          }
+        }
+
+        return {
+          setValue: {
+            generatedVariantInfo,
+          },
+        };
+      },
+    };
+
+    stateVariableDefinitions.numComponentsSpecified = {
+      returnDependencies: () => ({
+        numComponentsAttr: {
+          dependencyType: "attributePrimitive",
+          attributeName: "numComponents",
+        },
+        typeAttr: {
+          dependencyType: "attributePrimitive",
+          attributeName: "createComponentOfType",
+        },
+      }),
+      definition({ dependencyValues, componentInfoObjects }) {
+        let numComponentsSpecified;
+
+        if (dependencyValues.typeAttr) {
+          let componentType =
+            componentInfoObjects.componentTypeLowerCaseMapping[
+              dependencyValues.typeAttr.toLowerCase()
+            ];
+
+          if (!(componentType in componentInfoObjects.allComponentClasses)) {
+            throw Error(
+              `Invalid componentType ${dependencyValues.typeAttr} of copy.`,
+            );
+          }
+          if (dependencyValues.numComponentsAttr !== null) {
+            numComponentsSpecified = dependencyValues.numComponentsAttr;
+          } else {
+            numComponentsSpecified = 1;
+          }
+        } else if (dependencyValues.numComponentsAttr !== null) {
+          throw Error(
+            `You must specify createComponentOfType when specifying numComponents for a ${componentClass.componentType}.`,
+          );
+        } else {
+          numComponentsSpecified = null;
+        }
+
+        return { setValue: { numComponentsSpecified } };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  static async createSerializedReplacements({
+    component,
+    componentInfoObjects,
+    flags,
+  }) {
+    // evaluate numComponentsSpecified so get error if specify numComponents without createComponentOfType
+    await component.stateValues.numComponentsSpecified;
+
+    if (!(await component.stateValues.rendered)) {
+      return { replacements: [] };
+    } else {
+      let replacements = deepClone(
+        await component.state.serializedChildren.value,
+      );
+
+      let newNamespace = component.attributes.newNamespace?.primitive;
+
+      if ("isResponse" in component.attributes) {
+        // pass isResponse to replacements
+
+        for (let repl of replacements) {
+          if (typeof repl !== "object") {
+            continue;
+          }
+
+          let attributesFromComposite = convertAttributesForComponentType({
+            attributes: { isResponse: component.attributes.isResponse },
+            componentType: repl.componentType,
+            componentInfoObjects,
+            compositeCreatesNewNamespace: newNamespace,
+            flags,
+          });
+          if (!repl.attributes) {
+            repl.attributes = {};
+          }
+
+          Object.assign(repl.attributes, attributesFromComposite);
+        }
+      }
+
+      // TODO: usual procedure is that original names are consistent
+      // if have new namespace
+      // In addition, we make them consistent if don't assignNames
+      // so that a template (actually group, usually)
+      // gets expanded with the original names.
+
+      // However, at some point, got duplicate names if copying without link,
+      // but can't reproduce that error now
+      // Adding condition for not being replacement fixed the duplicate name
+      // error but broke above requirements
+      // Find a solution when can reproduce that duplicate name error
+
+      let processResult = processAssignNames({
+        assignNames: component.doenetAttributes.assignNames,
+        serializedComponents: replacements,
+        parentName: component.componentName,
+        parentCreatesNewNamespace: newNamespace,
+        componentInfoObjects,
+        originalNamesAreConsistent: true,
+      });
+
+      let verificationResult = await verifyReplacementsMatchSpecifiedType({
+        component,
+        replacements: processResult.serializedComponents,
+        assignNames: component.doenetAttributes.assignNames,
+        componentInfoObjects,
+        compositeAttributesObj: this.createAttributesObject(),
+        flags,
+      });
+
+      // console.log(`serialized replacements for ${component.componentName}`)
+      // console.log(JSON.parse(JSON.stringify(verificationResult.replacements)))
+
+      return { replacements: verificationResult.replacements };
+    }
+  }
+
+  static async calculateReplacementChanges({
+    component,
+    componentInfoObjects,
+    flags,
+  }) {
+    if (!(await component.stateValues.rendered)) {
+      if (
+        component.replacements.length > 0 &&
+        component.replacementsToWithhold === 0
+      ) {
+        let replacementsToWithhold = component.replacements.length;
+        let replacementInstruction = {
+          changeType: "changeReplacementsToWithhold",
+          replacementsToWithhold,
+        };
+        return [replacementInstruction];
+      } else {
+        return [];
+      }
+    } else {
+      if (component.replacements.length > 0) {
+        if (component.replacementsToWithhold > 0) {
+          let replacementInstruction = {
+            changeType: "changeReplacementsToWithhold",
+            replacementsToWithhold: 0,
+          };
+          return [replacementInstruction];
+        } else {
+          return [];
+        }
+      } else {
+        let createResult = await this.createSerializedReplacements({
+          component,
+          componentInfoObjects,
+          flags,
+        });
+
+        let replacements = createResult.replacements;
+
+        let replacementInstruction = {
+          changeType: "add",
+          changeTopLevelReplacements: true,
+          firstReplacementInd: 0,
+          numberReplacementsToReplace: 0,
+          serializedReplacements: replacements,
+          replacementsToWithhold: 0,
+        };
+
+        return [replacementInstruction];
+      }
+    }
+  }
+
+  static setUpVariant({
+    serializedComponent,
+    sharedParameters,
+    descendantVariantComponents,
+  }) {
+    setUpVariantSeedAndRng({
+      serializedComponent,
+      sharedParameters,
+      descendantVariantComponents,
+      useSubpartVariantRng: true,
+    });
+  }
+
+  get allPotentialRendererTypes() {
+    let allPotentialRendererTypes = super.allPotentialRendererTypes;
+
+    let additionalRendererTypes =
+      this.potentialRendererTypesFromSerializedComponents(
+        this.serializedChildren,
+      );
+    for (let rendererType of additionalRendererTypes) {
+      if (!allPotentialRendererTypes.includes(rendererType)) {
+        allPotentialRendererTypes.push(rendererType);
+      }
+    }
+
+    return allPotentialRendererTypes;
+  }
+}

package/src/Core/components/Text.js

@@ -0,0 +1,341 @@
+import {
+  moveGraphicalObjectWithAnchorAction,
+  returnAnchorAttributes,
+  returnAnchorStateVariableDefinition,
+} from "../utils/graphical";
+import { getFromLatex, getFromText } from "../utils/math";
+import {
+  returnSelectedStyleStateVariableDefinition,
+  returnTextStyleDescriptionDefinitions,
+} from "../utils/style";
+import InlineComponent from "./abstract/InlineComponent";
+import me from "math-expressions";
+
+export default class Text extends InlineComponent {
+  constructor(args) {
+    super(args);
+
+    Object.assign(this.actions, {
+      moveText: this.moveText.bind(this),
+      textClicked: this.textClicked.bind(this),
+      textFocused: this.textFocused.bind(this),
+    });
+  }
+  static componentType = "text";
+
+  static includeBlankStringChildren = true;
+
+  static variableForPlainMacro = "value";
+  static plainMacroReturnsSameType = true;
+
+  // even if inside a component that turned on descendantCompositesMustHaveAReplacement
+  // don't required composite replacements
+  static descendantCompositesMustHaveAReplacement = false;
+
+  static createAttributesObject() {
+    let attributes = super.createAttributesObject();
+
+    attributes.draggable = {
+      createComponentOfType: "boolean",
+      createStateVariable: "draggable",
+      defaultValue: true,
+      public: true,
+      forRenderer: true,
+    };
+
+    attributes.layer = {
+      createComponentOfType: "number",
+      createStateVariable: "layer",
+      defaultValue: 0,
+      public: true,
+      forRenderer: true,
+    };
+
+    attributes.isLatex = {
+      createComponentOfType: "boolean",
+      createStateVariable: "isLatex",
+      defaultValue: false,
+      public: true,
+    };
+
+    Object.assign(attributes, returnAnchorAttributes());
+
+    return attributes;
+  }
+
+  static returnChildGroups() {
+    // Note: Latex class extends Text and depends on "textLike" being the first entry
+    return [
+      {
+        group: "textLike",
+        componentTypes: [
+          "string",
+          "text",
+          "_singleCharacterInline",
+          "_inlineRenderInlineChildren",
+        ],
+      },
+    ];
+  }
+
+  static returnStateVariableDefinitions() {
+    let stateVariableDefinitions = super.returnStateVariableDefinitions();
+
+    let selectedStyleDefinition = returnSelectedStyleStateVariableDefinition();
+    Object.assign(stateVariableDefinitions, selectedStyleDefinition);
+
+    let styleDescriptionDefinitions = returnTextStyleDescriptionDefinitions();
+    Object.assign(stateVariableDefinitions, styleDescriptionDefinitions);
+
+    let anchorDefinition = returnAnchorStateVariableDefinition();
+    Object.assign(stateVariableDefinitions, anchorDefinition);
+
+    stateVariableDefinitions.value = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: this.componentType,
+        // the reason we create a attribute component from the state variable,
+        // rather than just shadowing the attribute,
+        // is that a sequence creates a text where it sets fixed directly in the state
+        // TODO: how to deal with this in general?  Should we disallow that way to set state?
+        // Or should we always shadow attributes this way?
+        addAttributeComponentsShadowingStateVariables: {
+          fixed: {
+            stateVariableToShadow: "fixed",
+          },
+        },
+      },
+      hasEssential: true,
+      returnDependencies: () => ({
+        textLikeChildren: {
+          dependencyType: "child",
+          childGroups: ["textLike"],
+          variableNames: ["text"],
+        },
+      }),
+      defaultValue: "",
+      set: (x) => (x === null ? "" : String(x)),
+      definition: function ({ dependencyValues }) {
+        if (dependencyValues.textLikeChildren.length === 0) {
+          return {
+            useEssentialOrDefaultValue: {
+              value: true,
+            },
+          };
+        }
+        let value = "";
+        for (let comp of dependencyValues.textLikeChildren) {
+          if (typeof comp === "string") {
+            value += comp;
+          } else {
+            value += comp.stateValues.text;
+          }
+        }
+        return { setValue: { value } };
+      },
+      inverseDefinition: function ({
+        desiredStateVariableValues,
+        dependencyValues,
+      }) {
+        let numChildren = dependencyValues.textLikeChildren.length;
+        if (numChildren > 1) {
+          return { success: false };
+        }
+        if (numChildren === 1) {
+          return {
+            success: true,
+            instructions: [
+              {
+                setDependency: "textLikeChildren",
+                desiredValue: desiredStateVariableValues.value,
+                childIndex: 0,
+                variableIndex: 0,
+              },
+            ],
+          };
+        }
+        // no children, so set essential value to the desired value
+        return {
+          success: true,
+          instructions: [
+            {
+              setEssentialValue: "value",
+              value:
+                desiredStateVariableValues.value === null
+                  ? ""
+                  : String(desiredStateVariableValues.value),
+            },
+          ],
+        };
+      },
+    };
+
+    stateVariableDefinitions.text = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: "text",
+      },
+      forRenderer: true,
+      returnDependencies: () => ({
+        value: {
+          dependencyType: "stateVariable",
+          variableName: "value",
+        },
+      }),
+      definition: ({ dependencyValues }) => ({
+        setValue: { text: dependencyValues.value },
+      }),
+      inverseDefinition: ({ desiredStateVariableValues }) => ({
+        success: true,
+        instructions: [
+          {
+            setDependency: "value",
+            desiredValue: desiredStateVariableValues.text,
+          },
+        ],
+      }),
+    };
+
+    stateVariableDefinitions.math = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: "math",
+      },
+      forRenderer: true,
+      returnDependencies: () => ({
+        value: {
+          dependencyType: "stateVariable",
+          variableName: "value",
+        },
+        isLatex: {
+          dependencyType: "stateVariable",
+          variableName: "isLatex",
+        },
+      }),
+      definition({ dependencyValues }) {
+        let parser = dependencyValues.isLatex ? getFromLatex() : getFromText();
+        let expression;
+        try {
+          expression = parser(dependencyValues.value);
+        } catch (e) {
+          expression = me.fromAst("\uFF3F");
+        }
+        return { setValue: { math: expression } };
+      },
+      inverseDefinition({ desiredStateVariableValues, dependencyValues }) {
+        let text;
+        if (dependencyValues.isLatex) {
+          text = desiredStateVariableValues.math.toLatex();
+        } else {
+          text = desiredStateVariableValues.math.toString();
+        }
+        return {
+          success: true,
+          instructions: [
+            {
+              setDependency: "value",
+              desiredValue: text,
+            },
+          ],
+        };
+      },
+    };
+
+    stateVariableDefinitions.number = {
+      public: true,
+      shadowingInstructions: {
+        createComponentOfType: "number",
+      },
+      forRenderer: true,
+      returnDependencies: () => ({
+        math: {
+          dependencyType: "stateVariable",
+          variableName: "math",
+        },
+      }),
+      definition({ dependencyValues }) {
+        return {
+          setValue: { number: dependencyValues.math.evaluate_to_constant() },
+        };
+      },
+      inverseDefinition({ desiredStateVariableValues }) {
+        return {
+          success: true,
+          instructions: [
+            {
+              setDependency: "math",
+              desiredValue: me.fromAst(
+                Number(desiredStateVariableValues.number),
+              ),
+            },
+          ],
+        };
+      },
+    };
+
+    return stateVariableDefinitions;
+  }
+
+  static adapters = ["math", "number"];
+
+  async moveText({
+    x,
+    y,
+    z,
+    transient,
+    actionId,
+    sourceInformation = {},
+    skipRendererUpdate = false,
+  }) {
+    return await moveGraphicalObjectWithAnchorAction({
+      x,
+      y,
+      z,
+      transient,
+      actionId,
+      sourceInformation,
+      skipRendererUpdate,
+      componentName: this.componentName,
+      componentType: this.componentType,
+      coreFunctions: this.coreFunctions,
+    });
+  }
+
+  async textClicked({
+    actionId,
+    name,
+    sourceInformation = {},
+    skipRendererUpdate = false,
+  }) {
+    if (!(await this.stateValues.fixed)) {
+      await this.coreFunctions.triggerChainedActions({
+        triggeringAction: "click",
+        componentName: name, // use name rather than this.componentName to get original name if adapted
+        actionId,
+        sourceInformation,
+        skipRendererUpdate,
+      });
+    }
+
+    this.coreFunctions.resolveAction({ actionId });
+  }
+
+  async textFocused({
+    actionId,
+    name,
+    sourceInformation = {},
+    skipRendererUpdate = false,
+  }) {
+    if (!(await this.stateValues.fixed)) {
+      await this.coreFunctions.triggerChainedActions({
+        triggeringAction: "focus",
+        componentName: name, // use name rather than this.componentName to get original name if adapted
+        actionId,
+        sourceInformation,
+        skipRendererUpdate,
+      });
+    }
+
+    this.coreFunctions.resolveAction({ actionId });
+  }
+}