@doenet/doenetml 0.6.0-alpha1

package/src/Viewer/renderers/cobwebPolyline.jsx

@@ -0,0 +1,442 @@
+import React, { useContext, useEffect, useRef } from "react";
+import useDoenetRender from "../useDoenetRenderer";
+import { BoardContext, LINE_LAYER_OFFSET, VERTEX_LAYER_OFFSET } from "./graph";
+import { createFunctionFromDefinition } from "../../Core/utils/function";
+
+export default React.memo(function CobwebPolyline(props) {
+  let { name, id, SVs, actions, sourceOfUpdate, callAction } =
+    useDoenetRender(props);
+
+  CobwebPolyline.ignoreActionsWithoutCore = () => true;
+
+  const board = useContext(BoardContext);
+
+  let curveJXG = useRef(null);
+  let diagonalJXG = useRef(null);
+  let polylineJXG = useRef(null);
+  let pointsJXG = useRef(null);
+
+  let pointCoords = useRef(null);
+  let draggedPoint = useRef(null);
+  let previousNPoints = useRef(null);
+  let jsxPointAttributes = useRef(null);
+
+  let lastPositionsFromCore = useRef(null);
+  lastPositionsFromCore.current = SVs.numericalVertices;
+
+  useEffect(() => {
+    //On unmount
+    return () => {
+      // if point is defined
+      if (polylineJXG.current) {
+        deleteCobwebPolylineJXG();
+      }
+    };
+  }, []);
+
+  function createCobwebPolylineJXG() {
+    // if (SVs.numericalVertices.length !== SVs.numVertices ||
+    //   SVs.numericalVertices.some(x => x.length !== 2)
+    // ) {
+    //   return null;
+    // }
+
+    let functionAttributes = {
+      visible: !SVs.hidden,
+      withLabel: false,
+      fixed: true,
+      layer: 10 * SVs.layer + LINE_LAYER_OFFSET,
+      strokeColor: "green",
+      highlightStrokeColor: "green",
+      strokeWidth: 3,
+      dash: styleToDash("solid"),
+    };
+
+    let f = createFunctionFromDefinition(SVs.fDefinition);
+
+    curveJXG.current = board.create("functiongraph", [f], functionAttributes);
+
+    let diagonalAttributes = {
+      visible: !SVs.hidden,
+      withLabel: false,
+      fixed: true,
+      layer: 10 * SVs.layer + LINE_LAYER_OFFSET,
+      strokeColor: "gray",
+      highlightStrokeColor: "gray",
+      strokeWidth: 2,
+      dash: styleToDash("solid"),
+    };
+    diagonalJXG.current = board.create(
+      "line",
+      [
+        [0, 0],
+        [1, 1],
+      ],
+      diagonalAttributes,
+    );
+
+    let validCoords = true;
+
+    for (let coords of SVs.numericalVertices) {
+      if (!Number.isFinite(coords[0])) {
+        validCoords = false;
+      }
+      if (!Number.isFinite(coords[1])) {
+        validCoords = false;
+      }
+    }
+
+    let jsxPolylineAttributes = {
+      name: SVs.labelForGraph,
+      visible: !SVs.hidden && validCoords,
+      withLabel: SVs.labelForGraph !== "",
+      fixed: true,
+      layer: 10 * SVs.layer + LINE_LAYER_OFFSET,
+      strokeColor: SVs.selectedStyle.lineColor,
+      highlightStrokeColor: SVs.selectedStyle.lineColor,
+      strokeWidth: SVs.selectedStyle.lineWidth,
+      highlightStrokeWidth: SVs.selectedStyle.lineWidth,
+      dash: styleToDash(SVs.selectedStyle.lineStyle),
+    };
+
+    jsxPolylineAttributes.label = {
+      highlight: false,
+    };
+    if (SVs.labelHasLatex) {
+      jsxPolylineAttributes.label.useMathJax = true;
+    }
+
+    jsxPointAttributes.current = {
+      fixed: !SVs.draggable || SVs.fixed,
+      visible: !SVs.hidden && validCoords && SVs.draggable,
+      withLabel: true,
+      name: "A",
+      layer: 10 * SVs.layer + VERTEX_LAYER_OFFSET,
+      fillColor: SVs.selectedStyle.markerColor,
+      strokeColor: SVs.selectedStyle.markerColor,
+      size: SVs.selectedStyle.markerSize,
+      face: normalizeStyle(SVs.selectedStyle.markerStyle),
+    };
+
+    if (SVs.draggable) {
+      jsxPointAttributes.current.highlightFillColor = "#EEEEEE";
+      jsxPointAttributes.current.highlightStrokeColor = "#C3D9FF";
+      jsxPointAttributes.current.showInfoBox = true;
+    } else {
+      jsxPointAttributes.current.highlightFillColor =
+        SVs.selectedStyle.markerColor;
+      jsxPointAttributes.current.highlightStrokeColor =
+        SVs.selectedStyle.markerColor;
+      jsxPointAttributes.current.showInfoBox = false;
+    }
+
+    pointsJXG.current = [];
+    let varName = SVs.variable.toString();
+
+    for (let i = 0; i < SVs.numPoints; i++) {
+      let pointAttributes = Object.assign({}, jsxPointAttributes.current);
+      if (i === 0) {
+        pointAttributes.name = `(${varName}_0,0)`;
+      } else if (i % 2 === 1) {
+        pointAttributes.name = `(${varName}_${(i - 1) / 2}, ${varName}_${
+          (i + 1) / 2
+        })`;
+      } else {
+        pointAttributes.name = `(${varName}_${i / 2}, ${varName}_${i / 2})`;
+      }
+      if (i !== SVs.numPoints - 1) {
+        pointAttributes.visible = false;
+      }
+      pointsJXG.current.push(
+        board.create("point", [...SVs.numericalVertices[i]], pointAttributes),
+      );
+    }
+
+    let x = [],
+      y = [];
+    SVs.numericalVertices.forEach((z) => {
+      x.push(z[0]);
+      y.push(z[1]);
+    });
+
+    let newPolylineJXG = board.create("curve", [x, y], jsxPolylineAttributes);
+
+    for (let i = 0; i < SVs.numPoints; i++) {
+      pointsJXG.current[i].on("drag", (e) => dragHandler(i, e));
+      pointsJXG.current[i].on("up", (x) => upHandler(i));
+      pointsJXG.current[i].on("keyfocusout", () => keyFocusOutHandler(i));
+      pointsJXG.current[i].on("keydown", (e) => keyDownHandler(i, e));
+      pointsJXG.current[i].on("down", (x) => (draggedPoint.current = null));
+    }
+
+    previousNPoints.current = SVs.numPoints;
+
+    return newPolylineJXG;
+  }
+
+  function deleteCobwebPolylineJXG() {
+    board.removeObject(polylineJXG.current);
+    polylineJXG.current = null;
+
+    board.removeObject(curveJXG.current);
+    curveJXG.current = null;
+
+    board.removeObject(diagonalJXG.current);
+    diagonalJXG.current = null;
+
+    for (let i = 0; i < SVs.numPoints; i++) {
+      if (pointsJXG.current[i]) {
+        pointsJXG.current[i].off("drag");
+        pointsJXG.current[i].off("up");
+        pointsJXG.current[i].off("keyfocusout");
+        pointsJXG.current[i].off("keydown");
+        pointsJXG.current[i].off("down");
+        board.removeObject(pointsJXG.current[i]);
+        delete pointsJXG.current[i];
+      }
+    }
+  }
+
+  function dragHandler(i, e) {
+    let viaPointer = e.type === "pointermove";
+
+    draggedPoint.current = i;
+
+    pointCoords.current = {};
+    pointCoords.current[i] = [
+      pointsJXG.current[i].X(),
+      pointsJXG.current[i].Y(),
+    ];
+    callAction({
+      action: actions.movePolyline,
+      args: {
+        pointCoords: pointCoords.current,
+        transient: true,
+        skippable: true,
+        sourceDetails: { vertex: i },
+      },
+    });
+
+    pointsJXG.current[i].coords.setCoordinates(JXG.COORDS_BY_USER, [
+      ...lastPositionsFromCore.current[i],
+    ]);
+    board.updateInfobox(pointsJXG.current[i]);
+  }
+
+  function upHandler(i) {
+    if (draggedPoint.current !== i) {
+      return;
+    }
+
+    callAction({
+      action: actions.movePolyline,
+      args: {
+        pointCoords: pointCoords.current,
+        sourceDetails: { vertex: i },
+      },
+    });
+  }
+
+  function keyFocusOutHandler(i) {
+    if (draggedPoint.current !== i) {
+      draggedPoint.current = null;
+      return;
+    }
+    draggedPoint.current = null;
+
+    callAction({
+      action: actions.movePolyline,
+      args: {
+        pointCoords: pointCoords.current,
+        sourceInformation: { vertex: i },
+      },
+    });
+  }
+
+  function keyDownHandler(i, e) {
+    if (e.key === "Enter") {
+      if (draggedPoint.current === i) {
+        callAction({
+          action: actions.movePolyline,
+          args: {
+            pointCoords: pointCoords.current,
+            sourceInformation: { vertex: i },
+          },
+        });
+      }
+      draggedPoint.current = null;
+    }
+  }
+
+  if (board) {
+    if (!polylineJXG.current) {
+      polylineJXG.current = createCobwebPolylineJXG();
+      // } else if (SVs.numericalVertices.length !== SVs.numVertices ||
+      //   SVs.numericalVertices.some(x => x.length !== 2)
+      // ) {
+      //   deleteCobwebPolylineJXG();
+    } else {
+      let f = createFunctionFromDefinition(SVs.fDefinition);
+
+      curveJXG.current.Y = f;
+      curveJXG.current.needsUpdate = true;
+      curveJXG.current.updateCurve();
+
+      let validCoords = true;
+
+      for (let coords of SVs.numericalVertices) {
+        if (!Number.isFinite(coords[0])) {
+          validCoords = false;
+        }
+        if (!Number.isFinite(coords[1])) {
+          validCoords = false;
+        }
+      }
+
+      let varName = SVs.variable.toString();
+
+      // add or delete points as required and change data array size
+      if (SVs.numPoints > previousNPoints.current) {
+        for (let i = previousNPoints.current; i < SVs.numPoints; i++) {
+          let pointAttributes = Object.assign({}, jsxPointAttributes.current);
+          if (i === 0) {
+            pointAttributes.name = `(${varName}_0,0)`;
+          } else if (i % 2 === 1) {
+            pointAttributes.name = `(${varName}_${(i - 1) / 2}, ${varName}_${
+              (i + 1) / 2
+            })`;
+          } else {
+            pointAttributes.name = `(${varName}_${i / 2}, ${varName}_${i / 2})`;
+          }
+          if (i !== SVs.numPoints - 1) {
+            pointAttributes.visible = false;
+          }
+          pointsJXG.current.push(
+            board.create(
+              "point",
+              [...SVs.numericalVertices[i]],
+              pointAttributes,
+            ),
+          );
+
+          pointsJXG.current[i].on("drag", (e) => dragHandler(i, e));
+          pointsJXG.current[i].on("up", (x) => upHandler(i));
+          pointsJXG.current[i].on("keyfocusout", () => keyFocusOutHandler(i));
+          pointsJXG.current[i].on("keydown", (e) => keyDownHandler(i, e));
+          pointsJXG.current[i].on("down", (x) => (draggedPoint.current = null));
+        }
+      } else if (SVs.numPoints < previousNPoints.current) {
+        for (let i = SVs.numPoints; i < previousNPoints.current; i++) {
+          let pt = pointsJXG.current.pop();
+          pt.off("drag");
+          pt.off("up");
+          pt.off("keyfocusout");
+          pt.off("keydown");
+          pt.off("down");
+          console.log("about to remove", pt);
+          board.removeObject(pt);
+          board.update();
+        }
+        polylineJXG.current.dataX.length = SVs.numPoints;
+      }
+
+      previousNPoints.current = SVs.numPoints;
+
+      let shiftX = polylineJXG.current.transformMat[1][0];
+      let shiftY = polylineJXG.current.transformMat[2][0];
+
+      for (let i = 0; i < SVs.numPoints; i++) {
+        pointsJXG.current[i].coords.setCoordinates(JXG.COORDS_BY_USER, [
+          ...SVs.numericalVertices[i],
+        ]);
+        polylineJXG.current.dataX[i] = SVs.numericalVertices[i][0] - shiftX;
+        polylineJXG.current.dataY[i] = SVs.numericalVertices[i][1] - shiftY;
+      }
+
+      let visible = !SVs.hidden;
+
+      if (validCoords) {
+        polylineJXG.current.visProp["visible"] = visible;
+        polylineJXG.current.visPropCalc["visible"] = visible;
+        // polylineJXG.current.setAttribute({visible: visible})
+
+        for (let i = 0; i < SVs.numPoints - 1; i++) {
+          pointsJXG.current[i].visProp["visible"] = false;
+          pointsJXG.current[i].visPropCalc["visible"] = false;
+        }
+        if (SVs.numPoints > 0) {
+          if (SVs.draggable) {
+            pointsJXG.current[SVs.numPoints - 1].visProp["visible"] = visible;
+            pointsJXG.current[SVs.numPoints - 1].visPropCalc["visible"] =
+              visible;
+          }
+        }
+      } else {
+        polylineJXG.current.visProp["visible"] = false;
+        polylineJXG.current.visPropCalc["visible"] = false;
+        // polylineJXG.current.setAttribute({visible: false})
+
+        for (let i = 0; i < SVs.numPoints; i++) {
+          pointsJXG.current[i].visProp["visible"] = false;
+          pointsJXG.current[i].visPropCalc["visible"] = false;
+        }
+      }
+
+      if (
+        sourceOfUpdate.sourceInformation &&
+        name in sourceOfUpdate.sourceInformation
+      ) {
+        let vertexUpdated = sourceOfUpdate.sourceInformation[name].vertex;
+
+        if (Number.isFinite(vertexUpdated)) {
+          board.updateInfobox(pointsJXG.current[vertexUpdated]);
+        }
+      }
+
+      polylineJXG.current.needsUpdate = true;
+      polylineJXG.current.update().updateVisibility();
+      for (let i = 0; i < SVs.numPoints; i++) {
+        pointsJXG.current[i].needsUpdate = true;
+        pointsJXG.current[i].update();
+      }
+      if (SVs.numPoints > 0) {
+        pointsJXG.current[SVs.numPoints - 1].setAttribute({ withlabel: true });
+        pointsJXG.current[SVs.numPoints - 1].label.needsUpdate = true;
+        pointsJXG.current[SVs.numPoints - 1].label.update();
+      }
+
+      board.updateRenderer();
+    }
+  }
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  // don't think we want to return anything if not in board
+  return (
+    <>
+      <a name={id} />
+    </>
+  );
+});
+
+function styleToDash(style) {
+  if (style === "solid") {
+    return 0;
+  } else if (style === "dashed") {
+    return 2;
+  } else if (style === "dotted") {
+    return 1;
+  } else {
+    return 0;
+  }
+}
+
+function normalizeStyle(style) {
+  if (style === "triangle") {
+    return "triangleup";
+  } else {
+    return style;
+  }
+}

package/src/Viewer/renderers/codeEditor.jsx

@@ -0,0 +1,248 @@
+import React, { useState, useRef, useEffect } from "react";
+import useDoenetRenderer, { rendererState } from "../useDoenetRenderer";
+import { sizeToCSS } from "./utils/css";
+import CodeMirror from "../../Tools/CodeMirror";
+import VisibilitySensor from "react-visibility-sensor-v2";
+import { useSetRecoilState } from "recoil";
+
+export default React.memo(function CodeEditor(props) {
+  let {
+    name,
+    id,
+    SVs,
+    children,
+    actions,
+    ignoreUpdate,
+    rendererName,
+    callAction,
+  } = useDoenetRenderer(props);
+
+  CodeEditor.baseStateVariable = "immediateValue";
+
+  const setRendererState = useSetRecoilState(rendererState(rendererName));
+
+  let currentValue = useRef(SVs.immediateValue);
+  let updateValueTimer = useRef(null);
+  let editorRef = useRef(null);
+  let updateInternalValueTo = useRef(SVs.immediateValue);
+
+  let componentHeight = { ...SVs.height };
+  let editorHeight = { ...SVs.height };
+  if (SVs.showResults && SVs.resultsLocation === "bottom") {
+    editorHeight.size *= 1 - SVs.viewerRatio;
+  }
+
+  let onChangeVisibility = (isVisible) => {
+    callAction({
+      action: actions.recordVisibilityChange,
+      args: { isVisible },
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      callAction({
+        action: actions.recordVisibilityChange,
+        args: { isVisible: false },
+      });
+      if (updateValueTimer.current !== null) {
+        clearTimeout(updateValueTimer.current);
+        callAction({
+          action: actions.updateValue,
+          baseVariableValue: currentValue.current,
+        });
+      }
+    };
+  }, []);
+
+  if (SVs.hidden) {
+    return null;
+  }
+
+  const editorKey = id + "_editor";
+  const codemirrorKey = id + "_codemirror";
+
+  //Received update from core to immediateValue
+  //NOTE: currently causes a scrolling issue
+  //https://codemirror.net/doc/manual.html#events
+  // cm.scrollTo(x: number, y: number)
+  // Scroll the editor to a given (pixel) position. Both arguments may be left as null or undefined to have no effect.
+  // cm.getScrollInfo() → {left, top, width, height, clientWidth, clientHeight}
+  // Get an {left, top, width, height, clientWidth, clientHeight} object that represents the current scroll position, the size of the scrollable area, and the size of the visible area (minus scrollbars).
+
+  if (!ignoreUpdate && SVs.immediateValue !== currentValue.current) {
+    currentValue.current = SVs.immediateValue;
+    updateInternalValueTo.current = SVs.immediateValue;
+  }
+
+  let viewer = null;
+  let editorWidth = SVs.width;
+  let componentWidth = SVs.width;
+  let editorStyle = {
+    width: sizeToCSS(editorWidth),
+    height: sizeToCSS(editorHeight),
+    maxWidth: "100%",
+    padding: "0px",
+    // padding: "2px",
+    // border: "1px solid black",
+    overflowX: "hidden",
+    overflowY: "scroll",
+  };
+
+  if (SVs.showResults) {
+    if (SVs.resultsLocation === "bottom") {
+      viewer = (
+        <>
+          <hr style={{ width: sizeToCSS(componentWidth), maxWidth: "100%" }} />
+          <div>{children}</div>
+        </>
+      );
+    } else {
+      viewer = <div>{children}</div>;
+    }
+  }
+
+  let paddingBottom = { ...editorHeight };
+  paddingBottom.size /= 2;
+  paddingBottom = sizeToCSS(paddingBottom);
+
+  let editor = (
+    <div key={editorKey} id={editorKey} style={editorStyle}>
+      <CodeMirror
+        // key = {codemirrorKey}
+        editorRef={editorRef}
+        setInternalValueTo={updateInternalValueTo.current}
+        //TODO: read only isn't working <codeeditor disabled />
+        readOnly={SVs.disabled}
+        onBlur={() => {
+          clearTimeout(updateValueTimer.current);
+          callAction({
+            action: actions.updateValue,
+            baseVariableValue: currentValue.current,
+          });
+          updateValueTimer.current = null;
+        }}
+        onFocus={() => {
+          // console.log(">>codeEditor FOCUS!!!!!")
+        }}
+        onBeforeChange={(value) => {
+          if (currentValue.current !== value) {
+            currentValue.current = value;
+
+            setRendererState((was) => {
+              let newObj = { ...was };
+              newObj.ignoreUpdate = true;
+              return newObj;
+            });
+
+            callAction({
+              action: actions.updateImmediateValue,
+              args: { text: value },
+              baseVariableValue: value,
+            });
+
+            // Debounce update value at 3 seconds
+            clearTimeout(updateValueTimer.current);
+
+            //TODO: when you try to leave the page before it saved you will lose work
+            //so prompt the user on page leave
+            updateValueTimer.current = setTimeout(function () {
+              callAction({
+                action: actions.updateValue,
+                baseVariableValue: currentValue.current,
+              });
+              updateValueTimer.current = null;
+            }, 3000); //3 seconds
+          }
+        }}
+        paddingBottom={paddingBottom}
+      />
+    </div>
+  );
+
+  let editorWithViewer = editor;
+
+  if (SVs.showResults && SVs.resultsLocation === "bottom") {
+    editorWithViewer = (
+      <>
+        {editor}
+        {viewer}
+      </>
+    );
+  }
+
+  editorWithViewer = (
+    <div style={{ margin: "12px 0" }}>
+      <a name={id} />
+      <div
+        style={{
+          padding: "0",
+          border: "var(--mainBorder)",
+          borderRadius: "var(--mainBorderRadius)",
+          height: sizeToCSS(componentHeight),
+          width: sizeToCSS(componentWidth),
+          maxWidth: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+        id={id}
+      >
+        {editorWithViewer}
+      </div>
+    </div>
+  );
+
+  if (SVs.showResults) {
+    if (SVs.resultsLocation === "left") {
+      editorWithViewer = (
+        <div style={{ display: "flex", maxWidth: "100%", margin: "12px 0" }}>
+          <div
+            style={{
+              maxWidth: "50%",
+              paddingRight: "15px",
+              boxSizing: "border-box",
+            }}
+          >
+            {viewer}
+          </div>
+          <div
+            style={{
+              maxWidth: "50%",
+              boxSizing: "border-box",
+            }}
+          >
+            {editorWithViewer}
+          </div>
+        </div>
+      );
+    } else if (SVs.resultsLocation === "right") {
+      editorWithViewer = (
+        <div style={{ display: "flex", maxWidth: "100%", margin: "12px 0" }}>
+          <div
+            style={{
+              maxWidth: "50%",
+              paddingRight: "15px",
+              boxSizing: "border-box",
+            }}
+          >
+            {editorWithViewer}
+          </div>
+          <div
+            style={{
+              maxWidth: "50%",
+              boxSizing: "border-box",
+            }}
+          >
+            {viewer}
+          </div>
+        </div>
+      );
+    }
+  }
+
+  return (
+    <VisibilitySensor partialVisibility={true} onChange={onChangeVisibility}>
+      {editorWithViewer}
+    </VisibilitySensor>
+  );
+});