Adjust jsxgraph board settings

* Reduce bounding box closer to the axes, so the invalid domains are not visible. This is a roundabout way to resolve issues #2673, as it seems there is no general way to add this restriction to jsxgraph's Line element, according to the thread referenced in that issue. * Use Label's [autoPosition](https://jsxgraph.uni-bayreuth.de/docs/symbols/Label.html#autoPosition) option for the demand-supply graph's line labels. This option is new in jsxgraph 1.1.0, and will give us some better dynamic position for the line labels, through my testing. The auto-positioning isn't ideal (see: jsxgraph/jsxgraph#575), but it looks like it's an improvement.
ccnmtl · Aug 18, 2023 · e00bfa3 · e00bfa3
1 parent bedf6c0
commit e00bfa3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 32 deletions.
diff --git a/media/js/src/JXGBoard.jsx b/media/js/src/JXGBoard.jsx
@@ -455,7 +455,7 @@ export default class JXGBoard extends React.Component {
                     x: {
                         name: xAxisLabel,
                         label: {
-                            offset: [400, -12]
+                            offset: [400, 0]
                         },
                         withLabel: xAxisLabel ? true : false,
                         ticks: {
@@ -466,7 +466,7 @@ export default class JXGBoard extends React.Component {
                     y: {
                         name: yAxisLabel,
                         label: {
-                            offset: [(options.gType === 1) ? 0 : -5, 260]
+                            offset: [0, 260]
                         },
                         withLabel: yAxisLabel ? true : false,
                         ticks: {
@@ -475,12 +475,12 @@ export default class JXGBoard extends React.Component {
                         layer: 9
                     }
                 },
-                keepaspectratio: false,
+                keepAspectRatio: false,
                 showCopyright: false,
                 showZoom: false,
                 showReload: false,
                 showNavigation: false,
-                boundingbox: [-0.4, 5, 5, -0.4]
+                boundingBox: [-0.02, 5, 5, -0.02]
             });
         this.board1InitObjects = this.board.numObjects;
 
@@ -513,7 +513,7 @@ export default class JXGBoard extends React.Component {
                         x: {
                             name: xLabel,
                             label: {
-                                offset: [400, -12]
+                                offset: [400, 0]
                             },
                             withLabel: xLabel ? true : false,
                             ticks: {
@@ -524,7 +524,7 @@ export default class JXGBoard extends React.Component {
                         y: {
                             name: yLabel,
                             label: {
-                                offset: [8, 260]
+                                offset: [0, 260]
                             },
                             withLabel: yLabel ? true : false,
                             ticks: {
@@ -533,12 +533,12 @@ export default class JXGBoard extends React.Component {
                             layer: 9
                         }
                     },
-                    keepaspectratio: false,
+                    keepAspectRatio: false,
                     showCopyright: false,
                     showZoom: false,
                     showReload: false,
                     showNavigation: false,
-                    boundingbox: [-0.4, 5, 5, -0.4]
+                    boundingBox: [-0.02, 5, 5, -0.02]
                 });
 
             this.board2InitObjects = this.board2.numObjects;

diff --git a/media/js/src/graphs/DemandSupplyGraph.js b/media/js/src/graphs/DemandSupplyGraph.js
@@ -47,7 +47,10 @@ export class DemandSupplyGraph extends Graph {
             ], {
                 name: this.options.gLine1Label,
                 withLabel: true,
-                label: { position: 'rt', offset: [-10, -20] },
+                label: {
+                    autoPosition: true,
+                    offset: [0, 35]
+                },
                 strokeColor: this.l1Color,
                 strokeWidth: 2,
                 fixed: this.areLinesFixed
@@ -63,7 +66,13 @@ export class DemandSupplyGraph extends Graph {
             ], {
                 name: this.options.gLine2Label,
                 withLabel: true,
-                label: { position: 'rt', offset: [0, 35] },
+                label: {
+                    autoPosition: true,
+                    // These offsets are not ideal, but are necessary
+                    // for now. See:
+                    // https://github.com/jsxgraph/jsxgraph/issues/575
+                    offset: [50, -50]
+                },
                 strokeColor: this.l2Color,
                 strokeWidth: 2,
                 fixed: this.areLinesFixed

diff --git a/media/js/src/graphs/Graph.js b/media/js/src/graphs/Graph.js
@@ -143,28 +143,6 @@ export class Graph {
      * make() step.
      */
     postMake() {
-        // Make two white lines to block the curves from displaying
-        // below 0. A more straightforward way to do this would be
-        // better.
-        this.board.create('line', [[-0.2, 0], [-0.2, 5]], {
-            dash: 0,
-            highlight: false,
-            fixed: true,
-            strokeColor: 'white',
-            strokeWidth: this.board.canvasWidth / 25.5,
-            straightFirst: true,
-            straightLast: true
-        });
-        this.board.create('line', [[0, -0.2], [5, -0.2]], {
-            dash: 0,
-            highlight: false,
-            fixed: true,
-            strokeColor: 'white',
-            strokeWidth: this.board.canvasWidth / 25.5,
-            straightFirst: true,
-            straightLast: true
-        });
-
         const me = this;
 
         if (