@doenet/doenetml 0.6.0-alpha1

package/src/Viewer/renderers/summaryStatistics.jsx

@@ -0,0 +1,83 @@
+import React, { useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { sizeToCSS } from "./utils/css";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Tabular(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  const tableStyle = {
+    width: sizeToCSS(SVs.width),
+    height: sizeToCSS(SVs.height),
+    borderCollapse: "collapse",
+    borderColor: "black",
+    borderRadius: "var(--mainBorderRadius)",
+  };
+
+  let options = [
+    "mean",
+    "stdev",
+    "variance",
+    "stderr",
+    "count",
+    "minimum",
+    "quartile1",
+    "median",
+    "quartile3",
+    "maximum",
+    "range",
+    "sum",
+  ];
+
+  let columns = options.filter((x) => x in SVs.summaryStatistics);
+
+  let heading = (
+    <tr>
+      {columns.map((x, i) => (
+        <th key={i}>{x}</th>
+      ))}
+    </tr>
+  );
+  let data = (
+    <tr>
+      {columns.map((x, i) => (
+        <td key={i}>{SVs.summaryStatistics[x]}</td>
+      ))}
+    </tr>
+  );
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div style={{ margin: "12px 0" }}>
+        <a name={id} />
+        <p>Summary statistics of {SVs.columnName}</p>
+        <table id={id} style={tableStyle}>
+          <tbody>
+            {heading}
+            {data}
+          </tbody>
+        </table>
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/table.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Table(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let heading = null;
+
+  let childrenToRender = [...children];
+
+  // BADBADBAD: need to redo how getting the title child
+  // getting it using the internal guts of componentInstructions
+  // is just asking for trouble
+
+  let title;
+  if (SVs.titleChildName) {
+    let titleChildInd;
+    for (let [ind, child] of children.entries()) {
+      //child might be null or a string
+      if (
+        child?.props?.componentInstructions.componentName === SVs.titleChildName
+      ) {
+        titleChildInd = ind;
+        break;
+      }
+    }
+    title = children[titleChildInd];
+    childrenToRender.splice(titleChildInd, 1); // remove title
+  } else {
+    title = SVs.title;
+  }
+
+  if (!SVs.suppressTableNameInTitle) {
+    let tableName = <strong>{SVs.tableName}</strong>;
+    if (title) {
+      title = (
+        <>
+          {tableName}: {title}
+        </>
+      );
+    } else {
+      title = tableName;
+    }
+  }
+
+  heading = <div id={id + "_title"}>{title}</div>;
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div id={id} style={{ margin: "12px 0" }}>
+        <a name={id} />
+        {heading}
+        {childrenToRender}
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/tabular.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { sizeToCSS } from "./utils/css";
+import VisibilitySensor from "react-visibility-sensor-v2";
+
+export default React.memo(function Tabular(props) {
+  let { name, id, SVs, children, actions, callAction } = useDoenetRender(props);
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  const tableStyle = {
+    width: sizeToCSS(SVs.width),
+    height: sizeToCSS(SVs.height),
+    borderCollapse: "collapse",
+    borderColor: "var(--canvastext)",
+    borderRadius: "var(--mainBorderRadius)",
+    tableLayout: "fixed",
+  };
+  if (SVs.top !== "none") {
+    tableStyle.borderTopStyle = "solid";
+    if (SVs.top === "minor") {
+      tableStyle.borderTopWidth = "thin";
+    } else if (SVs.top === "medium") {
+      tableStyle.borderTopWidth = "medium";
+    } else {
+      tableStyle.borderTopWidth = "thick";
+    }
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      <div style={{ margin: "12px 0" }}>
+        <a name={id} />
+        <table id={id} style={tableStyle}>
+          <tbody>{children}</tbody>
+        </table>
+      </div>
+    </VisibilitySensor>
+  );
+});

package/src/Viewer/renderers/tag.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import useDoenetRender from "../useDoenetRenderer";
+
+export default React.memo(function Tag(props) {
+  let { name, id, SVs, children } = useDoenetRender(props);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let open = "<";
+  let close = ">";
+
+  if (SVs.selfClosed) {
+    close = "/>";
+  }
+
+  return (
+    <code id={id} style={{ color: "var(--mainGreen)" }}>
+      <a name={id} />
+      {open}
+      {children}
+      {close}
+    </code>
+  );
+});

package/src/Viewer/renderers/text.jsx

@@ -0,0 +1,439 @@
+import React, { useContext, useEffect, useRef } from "react";
+import { BoardContext, TEXT_LAYER_OFFSET } from "./graph";
+import useDoenetRender from "../useDoenetRenderer";
+import me from "math-expressions";
+import { useRecoilValue } from "recoil";
+import { darkModeAtom } from "../../Tools/DarkmodeController";
+import { textRendererStyle } from "../../Core/utils/style";
+import { getPositionFromAnchorByCoordinate } from "../../Core/utils/graphical";
+
+export default React.memo(function Text(props) {
+  let { name, id, SVs, actions, sourceOfUpdate, callAction } =
+    useDoenetRender(props);
+
+  Text.ignoreActionsWithoutCore = () => true;
+
+  let textJXG = useRef(null);
+  let anchorPointJXG = useRef(null);
+  let anchorRel = useRef(null);
+
+  const board = useContext(BoardContext);
+
+  let pointerAtDown = useRef(null);
+  let pointAtDown = useRef(null);
+  let pointerIsDown = useRef(false);
+  let pointerMovedSinceDown = useRef(false);
+  let dragged = useRef(false);
+
+  let calculatedX = useRef(null);
+  let calculatedY = useRef(null);
+
+  let lastPositionFromCore = useRef(null);
+  let previousPositionFromAnchor = useRef(null);
+
+  let fixed = useRef(false);
+  let fixLocation = useRef(false);
+
+  fixed.current = SVs.fixed;
+  fixLocation.current = !SVs.draggable || SVs.fixLocation || SVs.fixed;
+
+  const darkMode = useRecoilValue(darkModeAtom);
+
+  useEffect(() => {
+    //On unmount
+    return () => {
+      if (textJXG.current !== null) {
+        deleteTextJXG();
+      }
+
+      if (board) {
+        board.off("move", boardMoveHandler);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (board) {
+      board.on("move", boardMoveHandler);
+    }
+  }, [board]);
+
+  function createTextJXG() {
+    let textColor =
+      darkMode === "dark"
+        ? SVs.selectedStyle.textColorDarkMode
+        : SVs.selectedStyle.textColor;
+    let backgroundColor =
+      darkMode === "dark"
+        ? SVs.selectedStyle.backgroundColorDarkMode
+        : SVs.selectedStyle.backgroundColor;
+
+    let cssStyle = ``;
+    if (backgroundColor) {
+      cssStyle += `background-color: ${backgroundColor}`;
+    }
+
+    //things to be passed to JSXGraph as attributes
+    let jsxTextAttributes = {
+      visible: !SVs.hidden,
+      fixed: fixed.current,
+      layer: 10 * SVs.layer + TEXT_LAYER_OFFSET,
+      cssStyle,
+      highlightCssStyle: cssStyle,
+      strokeColor: textColor,
+      strokeOpacity: 1,
+      highlightStrokeColor: textColor,
+      highlightStrokeOpacity: 0.5,
+      highlight: !fixLocation.current,
+      parse: false,
+    };
+
+    let newAnchorPointJXG;
+
+    try {
+      let anchor = me.fromAst(SVs.anchor);
+      let anchorCoords = [
+        anchor.get_component(0).evaluate_to_constant(),
+        anchor.get_component(1).evaluate_to_constant(),
+      ];
+
+      if (!Number.isFinite(anchorCoords[0])) {
+        anchorCoords[0] = 0;
+        jsxTextAttributes["visible"] = false;
+      }
+      if (!Number.isFinite(anchorCoords[1])) {
+        anchorCoords[1] = 0;
+        jsxTextAttributes["visible"] = false;
+      }
+
+      newAnchorPointJXG = board.create("point", anchorCoords, {
+        visible: false,
+      });
+    } catch (e) {
+      jsxTextAttributes["visible"] = false;
+      newAnchorPointJXG = board.create("point", [0, 0], { visible: false });
+    }
+
+    jsxTextAttributes.anchor = newAnchorPointJXG;
+
+    let { anchorx, anchory } = getPositionFromAnchorByCoordinate(
+      SVs.positionFromAnchor,
+    );
+    jsxTextAttributes.anchorx = anchorx;
+    jsxTextAttributes.anchory = anchory;
+    anchorRel.current = [anchorx, anchory];
+
+    let newTextJXG = board.create("text", [0, 0, SVs.text], jsxTextAttributes);
+    newTextJXG.isDraggable = !fixLocation.current;
+
+    newTextJXG.on("down", function (e) {
+      pointerAtDown.current = [e.x, e.y];
+      pointAtDown.current = [...newAnchorPointJXG.coords.scrCoords];
+      dragged.current = false;
+      pointerIsDown.current = true;
+      pointerMovedSinceDown.current = false;
+      if (!fixed.current) {
+        callAction({
+          action: actions.textFocused,
+          args: { name }, // send name so get original name if adapted
+        });
+      }
+    });
+
+    newTextJXG.on("hit", function (e) {
+      pointAtDown.current = [...newAnchorPointJXG.coords.scrCoords];
+      dragged.current = false;
+      callAction({
+        action: actions.textFocused,
+        args: { name }, // send name so get original name if adapted
+      });
+    });
+
+    newTextJXG.on("up", function (e) {
+      if (dragged.current) {
+        callAction({
+          action: actions.moveText,
+          args: {
+            x: calculatedX.current,
+            y: calculatedY.current,
+          },
+        });
+        dragged.current = false;
+      } else if (!pointerMovedSinceDown.current && !fixed.current) {
+        callAction({
+          action: actions.textClicked,
+          args: { name }, // send name so get original name if adapted
+        });
+      }
+      pointerIsDown.current = false;
+    });
+
+    newTextJXG.on("keyfocusout", function (e) {
+      if (dragged.current) {
+        callAction({
+          action: actions.moveText,
+          args: {
+            x: calculatedX.current,
+            y: calculatedY.current,
+          },
+        });
+        dragged.current = false;
+      }
+    });
+
+    newTextJXG.on("drag", function (e) {
+      let viaPointer = e.type === "pointermove";
+
+      //Protect against very small unintended drags
+      if (
+        !viaPointer ||
+        Math.abs(e.x - pointerAtDown.current[0]) > 0.1 ||
+        Math.abs(e.y - pointerAtDown.current[1]) > 0.1
+      ) {
+        dragged.current = true;
+      }
+
+      let [xmin, ymax, xmax, ymin] = board.getBoundingBox();
+      let width = newTextJXG.size[0] / board.unitX;
+      let height = newTextJXG.size[1] / board.unitY;
+
+      let anchorx = anchorRel.current[0];
+      let anchory = anchorRel.current[1];
+
+      let offsetx = 0;
+      if (anchorx === "middle") {
+        offsetx = -width / 2;
+      } else if (anchorx === "right") {
+        offsetx = -width;
+      }
+      let offsety = 0;
+      if (anchory === "middle") {
+        offsety = -height / 2;
+      } else if (anchory === "top") {
+        offsety = -height;
+      }
+
+      let xminAdjusted = xmin + 0.04 * (xmax - xmin) - offsetx - width;
+      let xmaxAdjusted = xmax - 0.04 * (xmax - xmin) - offsetx;
+      let yminAdjusted = ymin + 0.04 * (ymax - ymin) - offsety - height;
+      let ymaxAdjusted = ymax - 0.04 * (ymax - ymin) - offsety;
+
+      if (viaPointer) {
+        // the reason we calculate point position with this algorithm,
+        // rather than using .X() and .Y() directly
+        // is that attributes .X() and .Y() are affected by the
+        // .setCoordinates function called in update().
+        // Due to this dependence, the location of .X() and .Y()
+        // can be affected by constraints of objects that the points depends on,
+        // leading to a different location on up than on drag
+        // (as dragging uses the mouse location)
+        // TODO: find an example where need this this additional complexity
+        var o = board.origin.scrCoords;
+
+        calculatedX.current =
+          (pointAtDown.current[1] + e.x - pointerAtDown.current[0] - o[1]) /
+          board.unitX;
+
+        calculatedY.current =
+          (o[2] - (pointAtDown.current[2] + e.y - pointerAtDown.current[1])) /
+          board.unitY;
+      } else {
+        calculatedX.current =
+          newAnchorPointJXG.X() + newTextJXG.relativeCoords.usrCoords[1];
+        calculatedY.current =
+          newAnchorPointJXG.Y() + newTextJXG.relativeCoords.usrCoords[2];
+      }
+
+      calculatedX.current = Math.min(
+        xmaxAdjusted,
+        Math.max(xminAdjusted, calculatedX.current),
+      );
+      calculatedY.current = Math.min(
+        ymaxAdjusted,
+        Math.max(yminAdjusted, calculatedY.current),
+      );
+
+      callAction({
+        action: actions.moveText,
+        args: {
+          x: calculatedX.current,
+          y: calculatedY.current,
+          transient: true,
+          skippable: true,
+        },
+      });
+
+      newTextJXG.relativeCoords.setCoordinates(JXG.COORDS_BY_USER, [0, 0]);
+      newAnchorPointJXG.coords.setCoordinates(
+        JXG.COORDS_BY_USER,
+        lastPositionFromCore.current,
+      );
+    });
+
+    newTextJXG.on("keydown", function (e) {
+      if (e.key === "Enter") {
+        if (dragged.current) {
+          callAction({
+            action: actions.moveText,
+            args: {
+              x: calculatedX.current,
+              y: calculatedY.current,
+            },
+          });
+          dragged.current = false;
+        }
+        callAction({
+          action: actions.textClicked,
+          args: { name }, // send name so get original name if adapted
+        });
+      }
+    });
+
+    textJXG.current = newTextJXG;
+    anchorPointJXG.current = newAnchorPointJXG;
+    previousPositionFromAnchor.current = SVs.positionFromAnchor;
+  }
+
+  function boardMoveHandler(e) {
+    if (pointerIsDown.current) {
+      //Protect against very small unintended move
+      if (
+        Math.abs(e.x - pointerAtDown.current[0]) > 0.1 ||
+        Math.abs(e.y - pointerAtDown.current[1]) > 0.1
+      ) {
+        pointerMovedSinceDown.current = true;
+      }
+    }
+  }
+
+  function deleteTextJXG() {
+    textJXG.current.off("drag");
+    textJXG.current.off("down");
+    textJXG.current.off("hit");
+    textJXG.current.off("up");
+    textJXG.current.off("keyfocusout");
+    textJXG.current.off("keydown");
+    board.removeObject(textJXG.current);
+    textJXG.current = null;
+  }
+
+  if (board) {
+    let anchorCoords;
+    try {
+      let anchor = me.fromAst(SVs.anchor);
+      anchorCoords = [
+        anchor.get_component(0).evaluate_to_constant(),
+        anchor.get_component(1).evaluate_to_constant(),
+      ];
+    } catch (e) {
+      anchorCoords = [NaN, NaN];
+    }
+
+    lastPositionFromCore.current = anchorCoords;
+
+    if (textJXG.current === null) {
+      createTextJXG();
+    } else {
+      textJXG.current.relativeCoords.setCoordinates(JXG.COORDS_BY_USER, [0, 0]);
+      anchorPointJXG.current.coords.setCoordinates(
+        JXG.COORDS_BY_USER,
+        anchorCoords,
+      );
+
+      textJXG.current.setText(SVs.text);
+
+      let visible = !SVs.hidden;
+
+      if (
+        Number.isFinite(anchorCoords[0]) &&
+        Number.isFinite(anchorCoords[1])
+      ) {
+        let actuallyChangedVisibility =
+          textJXG.current.visProp["visible"] !== visible;
+        textJXG.current.visProp["visible"] = visible;
+        textJXG.current.visPropCalc["visible"] = visible;
+
+        if (actuallyChangedVisibility) {
+          // this function is incredibly slow, so don't run it if not necessary
+          // TODO: figure out how to make label disappear right away so don't need to run this function
+          textJXG.current.setAttribute({ visible });
+        }
+      } else {
+        textJXG.current.visProp["visible"] = false;
+        textJXG.current.visPropCalc["visible"] = false;
+      }
+
+      let layer = 10 * SVs.layer + TEXT_LAYER_OFFSET;
+      let layerChanged = textJXG.current.visProp.layer !== layer;
+
+      if (layerChanged) {
+        textJXG.current.setAttribute({ layer });
+      }
+
+      let textColor =
+        darkMode === "dark"
+          ? SVs.selectedStyle.textColorDarkMode
+          : SVs.selectedStyle.textColor;
+      let backgroundColor =
+        darkMode === "dark"
+          ? SVs.selectedStyle.backgroundColorDarkMode
+          : SVs.selectedStyle.backgroundColor;
+      let cssStyle = ``;
+      if (backgroundColor) {
+        cssStyle += `background-color: ${backgroundColor}`;
+      } else {
+        cssStyle += `background-color: transparent`;
+      }
+
+      if (textJXG.current.visProp.strokecolor !== textColor) {
+        textJXG.current.visProp.strokecolor = textColor;
+        textJXG.current.visProp.highlightstrokecolor = textColor;
+      }
+      if (textJXG.current.visProp.cssstyle !== cssStyle) {
+        textJXG.current.visProp.cssstyle = cssStyle;
+        textJXG.current.visProp.highlightcssstyle = cssStyle;
+      }
+
+      textJXG.current.visProp.highlight = !fixLocation.current;
+      textJXG.current.visProp.fixed = fixed.current;
+      textJXG.current.isDraggable = !fixLocation.current;
+
+      textJXG.current.needsUpdate = true;
+
+      if (SVs.positionFromAnchor !== previousPositionFromAnchor.current) {
+        let { anchorx, anchory } = getPositionFromAnchorByCoordinate(
+          SVs.positionFromAnchor,
+        );
+        textJXG.current.visProp.anchorx = anchorx;
+        textJXG.current.visProp.anchory = anchory;
+        anchorRel.current = [anchorx, anchory];
+        previousPositionFromAnchor.current = SVs.positionFromAnchor;
+        textJXG.current.fullUpdate();
+      } else {
+        textJXG.current.update();
+      }
+
+      anchorPointJXG.current.needsUpdate = true;
+      anchorPointJXG.current.update();
+      board.updateRenderer();
+    }
+
+    return <a name={id} />;
+  }
+
+  // not in board
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  let style = textRendererStyle(darkMode, SVs.selectedStyle);
+  return (
+    <>
+      <a name={id} />
+      <span id={id} style={style}>
+        {SVs.text}
+      </span>
+    </>
+  );
+});