Refactor archematics to use JSXGraph for geometry constructions #80

New Issue

glen · 2024-04-11T04:45:51Z

glen commented

2024-04-11 04:45:51 +00:00

Ultimately this should be a wholesale replacement; but for now, just have it replace the 3D constructions, since that's where the needed work in JSXGraph is, and also, that lets the worst parts of GeoGebra be removed.

glen added this to the First Post milestone 2024-04-11 04:45:51 +00:00

glen added the

refactor

label 2024-04-11 04:45:51 +00:00

glen self-assigned this 2024-04-11 04:45:51 +00:00

glen commented

2024-06-12 01:43:10 +00:00

OK, there is now a stub for this in branch jsx3d. However, the current difficulty with that branch is if you build and install the built browser plugin, and visit http://aleph0.clarku.edu/~djoyce/java/elements/bookXI/defXI9.html, the diagram grows without bound (in terms of the area it takes up on the page) and excessive CPU use occurs. One possibility Aaron and I discussed is that it's somehow trying to display the points that are placed way off screen, so I will comment out the line of code where points are actually inserted into the view3D.

glen commented

2024-06-12 02:38:51 +00:00

@Vectornaut it turns out that even with the point creation code commented out, we still get the same behavior. I will try not creating a View3D.

glen commented

2024-06-12 02:43:40 +00:00

OK, still get the expansion without a View3D, just it happens much more quickly and doesn't use anywhere near as much CPU. I have a hunch it may be due to the zoom controls; I will check that out.

glen commented

2024-06-12 03:48:11 +00:00

No, that wasn't it. In fact, I have it pared down now so that the only JSXGraph function ever called by the plugin is JSXGraph.initBoard(divID), with all default attributes, and it still grows without bound. Very strange! I pushed a commit with it pared down like this, in case you want to take a look. Any ideas?

No, that wasn't it. In fact, I have it pared down now so that the _only_ JSXGraph function ever called by the plugin is `JSXGraph.initBoard(divID)`, with _all_ default attributes, and it _still_ grows without bound. Very strange! I pushed a commit with it pared down like this, in case you want to take a look. Any ideas?

Vectornaut commented

2024-06-19 23:22:48 +00:00

In most of the JSXGraph examples, the board div's styling includes something like width: 500px; height: 500px; float: left. If I use the Firefox inspector to add those properties to the joyceApplet0 or joyceApplet1 table data cell in defXI9.html, the cell immediately stops expanding, and it takes on fixed dimensions slightly larger than the ones specified in the CSS.

Removing the width or height property makes the cell starts expanding again along the dimension that's no longer specified. Removing the float property, or setting its value outside a certain good set (which includes left, right, inline-start, inline-end, but does not include none, unset), causes the cell to start expanding along both dimensions.

I'd like to see what happens if we make the canvas container a div rather than a table data cell, since every working example I've seen uses a div. Let me know if you try this, or if you have any tips on how to try it.

In most of the JSXGraph examples, the board div's styling includes something like `width: 500px; height: 500px; float: left`. If I use the Firefox inspector to add those properties to the `joyceApplet0` or `joyceApplet1` table data cell in `defXI9.html`, the cell immediately stops expanding, and it takes on fixed dimensions slightly larger than the ones specified in the CSS. Removing the `width` or `height` property makes the cell starts expanding again along the dimension that's no longer specified. Removing the `float` property, or setting its value outside a certain good set (which includes `left`, `right`, `inline-start`, `inline-end`, but does not include `none`, `unset`), causes the cell to start expanding along both dimensions. I'd like to see what happens if we make the canvas container a div rather than a table data cell, since every working example I've seen uses a div. Let me know if you try this, or if you have any tips on how to try it.

Vectornaut commented

2024-06-20 00:12:58 +00:00

I forgot to mention: there's at least one JSXGraph example, checkbox.html, that doesn't set the float property on the canvas div. That means there's still some unexplained difference between the working JSXGraph examples and the failing archematics examples, beyond the width, height, float styling.

I forgot to mention: there's at least one JSXGraph example, `checkbox.html`, that doesn't set the `float` property on the canvas div. That means there's still some unexplained difference between the working JSXGraph examples and the failing archematics examples, beyond the `width`, `height`, `float` styling.

Vectornaut commented

2024-06-20 00:39:40 +00:00

The problem is using a table data cell as the canvas container! Here's a small demo. As written, the page puts a board in the green table data cell named 'td-box'. This causes the cell to grow without bound.

If you change the argument of initBoard to 'div-box', board is placed in the blue div called div-box instead. Once the board is initialized, the div stays at a fixed size, as expected.

exploding.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../../distrib/jsxgraph.css" />
    <script type="text/javascript" src="../../distrib/jsxgraphcore.js"></script>
</head>
<body>

<div id="div-box" style="background-color: skyblue;"></div>

<table>
    <tr>
        <td id="td-box" style="background-color: yellowgreen;"></td>
    </tr>
</table>

<script type="text/javascript">
    let board = JXG.JSXGraph.initBoard('td-box');
</script>
</body>
</html>

The problem is using a table data cell as the canvas container! Here's a small demo. As written, the page puts a board in the green table data cell named `'td-box'`. This causes the cell to grow without bound. If you change the argument of `initBoard` to `'div-box'`, board is placed in the blue div called `div-box` instead. Once the board is initialized, the div stays at a fixed size, as expected. #### exploding.html ``` <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="../../distrib/jsxgraph.css" /> <script type="text/javascript" src="../../distrib/jsxgraphcore.js"></script> </head> <body> <div id="div-box" style="background-color: skyblue;"></div> <table> <tr> <td id="td-box" style="background-color: yellowgreen;"></td> </tr> </table> <script type="text/javascript"> let board = JXG.JSXGraph.initBoard('td-box'); </script> </body> </html> ```

glen commented

2024-06-26 03:27:57 +00:00

Nice work! This sounds like a bug in JSXGraph. I will look to see if you have reported it; if not, I will create a JS Fiddle using your example and file an issue. Also, it seems like this Gitea server is not emailing notifications; I will try to look at the settings for that. Thanks so much!

Sign in to join this conversation.