meclib 21.06.2023 version preimprovement

current version on said date without implemented improvements

by aaronamran

HTML

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>
<p id="init">[
  [ "grid", "x","y",-1, 15,-1,11, 40],
  ["beam","",[2,2.5],[5,4.5],[2,4.5],[5,2.5], [3.5,4.5], [2,3.5], 0.2, "show"]
]
</p>
<p id="data"></p>
<p id="fbd_names"></p>

<!-- remember to include before and after in thesis 

 [ "label", "grid", [-0.8, -0.5]],
  [ "label", "Text", [1, 9.5]],
  ["angle", "\\alpha", [2,1],[3,1],0.8,60],
  ["angle", ".", [1,1],[2,1],0.6,90],
  ["label", "angle", [1.5,0.5]],
  ["angle1", "\\beta", [3,1],[4,1],0.8,60],
  ["label", "angle1", [3,0.5]],
  ["angle2", "\\gamma", [4,1],[5,1],0.8,60],
  ["label", "angle2", [4,0.5]],
  [ "bar", "1", [6, 1], [8, 1]],
  [ "label", "1", [6,0.7]],
  [ "label", "2", [8,0.7]],
  [ "label", "bar", [8.5,1] ],
  [ "beam","",[6, 2],[8,2],0.5,"show"],
  [ "label", "beam", [8.5,2 ] ],
  [ "circle", "r", [1,3],0.5,15],
  [ "label", "circle", [1.5,2.5]],
  [ "circle2p", "A", "B", [3,3], [4,3]],
  [ "label", "circle2p", [3, 2.2]],
  [ "crosshair","", [5, 3] ],
  [ "label", "crosshair", [4.5, 2.2]],
  [ "dashpot", "d", [6,3], [8,3], "show"],
  [ "label", "dashpot", [8.5, 3]],
  [ "dim", "\\ell", [6, 4], [8,4], 0 ],
  [ "label", "dim", [8.5, 4]],
  [ "dir", "x", [0.5, 4.3], 30 ],
  [ "label", "dir", [1, 4]],
  [ "disp", "v", [1.5, 4.3], 30 ],
  [ "label", "disp", [2, 4]],
  [ "fix1", "A", [1, 6], 0 ],
  [ "label", "fix1", [0.7, 6.4]],
  [ "fix12", "B", [2, 6], 0 ],
  [ "label", "fix12", [1.7, 6.4]],
  [ "fix123", "C", [3, 5.5], 0 ],
  [ "label", "fix123", [2.7, 6.4]],
  [ "fix13", "D", [4, 5.5], 0 ],
  [ "label", "fix13", [3.7, 6.4]],
  [ "q", "q_1","q_2", [6, 5], [8,5], 0.3 , 0.6],
  [ "label", "q", [8.5, 5]],
  [ "springt", "c", [6, 6], [8,6] ],
  [ "label", "springt",...

JavaScript

// Start of jsfiddle header.
var mode = "jsfiddle";
var divid = "jxgbox";
var fbd_names = "fbd_names";
var stateRef = "data";
var initstring = document.getElementById("init").innerHTML;
const centeredLabelStyle = {
  size: 0,
  showInfobox: false,
  label: {
    offset: [0, 0],
    anchorX: 'middle',
    anchorY: 'middle'
  }
};

// https://github.com/mkraska/meclib/wiki
// version info
const versionText= "JXG "+JXG.version+" Meclib 2023 06 09";
const highlightColor = "orange";
const movableLineColor = "blue";
const loadColor = "blue";
const defaultMecLayer = 6;
var pxunit = 1/40; // is reset by "grid"
var a = 16*pxunit; // is reset by "grid"
const deg2rad = Math.PI/180, rad2deg = 180/Math.PI;
const tolPointLine = 0.001;
var xscale = 1, yscale = 1; // default scale for infobox, can be modified by "grid"
var dpx = 1, dpy = 1; // default decimal precision for infobox, can be modified by "grid"
// infobox settings, further settings after board initiation
JXG.Options.infobox.layer = defaultMecLayer+5;
JXG.Options.infobox.strokeColor = 'black';
JXG.Options.infobox.cssStyle = 'background-color: #ffffffdd;'
// snap settings. Interactive objects are handled explicity
JXG.Options.point.snapToGrid = false; // grid snap spoils rotated static objects
JXG.Options.point.snapSizeX = 0.1;
JXG.Options.point.snapSizeY = 0.1;
// interactive objects are released explicitly
JXG.Options.point.fixed = true; 
JXG.Options.line.fixed = true; 
JXG.Options.circle.fixed = true;
// label settings
JXG.Options.text.useMathJax = true;
JXG.Options.text.parse = false;
JXG.Options.label.useMathJax = true;
JXG.Options.label.offset = [0, 0];
JXG.Options.label.anchorY = 'middle';
// highlighting is activated explicitly for interactive objects
JXG.Options.curve.highlight = false;
JXG.Options.label.highlight = false;
JXG.Options.text.highlight = false;
JXG.Options.circle.highlight = false;
JXG.Options.line.highlight = false;
JXG.Options.polygon.highlight = false;
JXG.Options.polygon.borders.highlight =...