tweaks to pegboard (Doenet#1979)

jaltekruse · Mar 7, 2023 · e07efad · e07efad
1 parent b7c8f3a
commit e07efad
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/src/Viewer/core.js b/src/Viewer/core.js
diff --git a/src/Viewer/renderers/graph.jsx b/src/Viewer/renderers/graph.jsx
@@ -228,12 +228,12 @@ export default React.memo(function Graph(props) {
     let displayXAxisChanged = SVs.displayXAxis ? !Boolean(xaxis.current) : Boolean(xaxis.current);
     let displayYAxisChanged = SVs.displayYAxis ? !Boolean(yaxis.current) : Boolean(yaxis.current);
 
-    if(displayYAxisChanged && !displayXAxisChanged && SVs.displayXAxis) {
+    if (displayYAxisChanged && !displayXAxisChanged && SVs.displayXAxis) {
       board.removeObject(xaxis.current);
       xaxis.current = null;
     }
 
-    if(displayXAxisChanged && !displayYAxisChanged && SVs.displayYAxis) {
+    if (displayXAxisChanged && !displayYAxisChanged && SVs.displayYAxis) {
       board.removeObject(yaxis.current);
       yaxis.current = null;
     }
@@ -370,7 +370,7 @@ export default React.memo(function Graph(props) {
   );
 
   function createYAxis(theBoard) {
-    let yaxisOptions = {};
+    let yaxisOptions = { highlight: false, fixed: true };
     if (SVs.ylabel) {
       let position = 'rt';
       let offset = [-10, -5];
@@ -405,7 +405,7 @@ export default React.memo(function Graph(props) {
       ticksDistance: 2,
       label: {
         offset: [12, -2],
-        layer: 2, 
+        layer: 2,
         strokeColor: "var(--canvastext)"
       },
       // minorTicks: 4,
@@ -532,7 +532,7 @@ export default React.memo(function Graph(props) {
   }
 
   function createXAxis(theBoard) {
-    let xaxisOptions = {};
+    let xaxisOptions = { highlight: false, fixed: true };
     if (SVs.xlabel) {
       let position = 'rt';
       let offset = [5, 10];

diff --git a/src/Viewer/renderers/pegboard.jsx b/src/Viewer/renderers/pegboard.jsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useState, useRef } from 'react';
 import useDoenetRender from './useDoenetRenderer';
 import { BoardContext } from './graph';
+import me from 'math-expressions';
 
 export default React.memo(function Pegboard(props) {
   let { name, id, SVs, actions, sourceOfUpdate, callAction } = useDoenetRender(props);
@@ -28,8 +29,8 @@ export default React.memo(function Pegboard(props) {
     fixed: true,
     withlabel: false,
     layer: 10 * SVs.layer,
-    fillColor: "var(--canvastext)",
-    strokeColor: "var(--canvastext)",
+    fillColor: "darkgray",
+    strokeColor: "darkgray",
     size: 0.1,
     face: "circle",
     highlight: false,
@@ -57,10 +58,11 @@ export default React.memo(function Pegboard(props) {
     let yind1 = (ymin - yoffset.current) / dy.current;
     let yind2 = (ymax - yoffset.current) / dy.current;
 
-    let minXind = Math.floor(Math.min(xind1, xind2));
-    let maxXind = Math.ceil(Math.max(xind1, xind2));
-    let minYind = Math.floor(Math.min(yind1, yind2));
-    let maxYind = Math.ceil(Math.max(yind1, yind2));
+    // Note: use round from mathjs so that it rounds -0.5 to -1, not 0.
+    let minXind = me.math.round(Math.min(xind1, xind2) + 1);
+    let maxXind = me.math.round(Math.max(xind1, xind2) - 1);
+    let minYind = me.math.round(Math.min(yind1, yind2) + 1);
+    let maxYind = me.math.round(Math.max(yind1, yind2) - 1);
 
     previousBounds.current = [minXind, maxXind, minYind, maxYind];
 
@@ -91,10 +93,11 @@ export default React.memo(function Pegboard(props) {
       let yind1 = (ymin - yoffset.current) / dy.current;
       let yind2 = (ymax - yoffset.current) / dy.current;
 
-      let minXind = Math.floor(Math.min(xind1, xind2));
-      let maxXind = Math.ceil(Math.max(xind1, xind2));
-      let minYind = Math.floor(Math.min(yind1, yind2));
-      let maxYind = Math.ceil(Math.max(yind1, yind2));
+      // Note: use round from mathjs so that it rounds -0.5 to -1, not 0.
+      let minXind = me.math.round(Math.min(xind1, xind2) + 1);
+      let maxXind = me.math.round(Math.max(xind1, xind2) - 1);
+      let minYind = me.math.round(Math.min(yind1, yind2) + 1);
+      let maxYind = me.math.round(Math.max(yind1, yind2) - 1);
 
       let [prevXmin, prevXmax, prevYmin, prevYmax] = previousBounds.current;
 
@@ -200,10 +203,11 @@ export default React.memo(function Pegboard(props) {
       let yind1 = (ymin - yoffset.current) / dy.current;
       let yind2 = (ymax - yoffset.current) / dy.current;
 
-      let minXind = Math.floor(Math.min(xind1, xind2));
-      let maxXind = Math.ceil(Math.max(xind1, xind2));
-      let minYind = Math.floor(Math.min(yind1, yind2));
-      let maxYind = Math.ceil(Math.max(yind1, yind2));
+      // Note: use round from mathjs so that it rounds -0.5 to -1, not 0.
+      let minXind = me.math.round(Math.min(xind1, xind2) + 1);
+      let maxXind = me.math.round(Math.max(xind1, xind2) - 1);
+      let minYind = me.math.round(Math.min(yind1, yind2) + 1);
+      let maxYind = me.math.round(Math.max(yind1, yind2) - 1);
 
       recalculatePegboard(minXind, maxXind, minYind, maxYind)