Dim objects

demo of dim class from Meclib

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],
  [ "dim", "\\ell", [1, 7], [4,7], 2],
  [ "dim", "\\ell", [5, 7], [8,7], 0],
  [ "dim", "\\ell", [9, 7], [12,7], -2]
 ]
</p>
<p id="data"></p>
<p id="fbd_names"></p>

<!--

  [ "springt", "t", [1, 4], [5,4], 0.5, 30, 9, "show" ]

[ "fix1", "A", [4, 7], 60, "show" ]
 [ "fix12", "B", [2, 5], 60, "show"]
  [ "fix123", "C", [5,6], 60, "show" ]
  [ "fix13", "D", [5,9], 60, "show" ]


  [ "circle", "c1", [3,6], 1.5, 45, "SHOW" ],
  [ "angle", "\\alpha", [3,7],[4,7],0.8,60 ],
  [ "angle", ".", [1,7],[2,7],0.6,90 ],
  [ "angle1", "\\beta", [5,7],[6,7],0.8,60 ],
  [ "angle2", "\\gamma", [7,7],[8,7],0.8,60 ]
  
[ "line", "", [6, 8, 10, 12], [6, 4, 6, 4], "--" ,0.8],

  [ "springc", "c", [1, 7], [4,7], 0.5, 10, "show" ],
  [ "springt", "t", [3, 4], [8,4], 0.5, 10, 8,  "show" ],

 [ "circle", "c1", [3,8], 1.5, 45, "show" ],
  [ "circle", "c2", [8,8], 1, 45, "show" ]
[ "circle", "c1", [3,8], 1.5, 45, "show" ],
  [ "circle", "c2", [8,8], 1, 45, "show" ]

 [ "line", "", [6, 8, 10, 12], [6, 4, 6, 4], "--" , 0.8]

 [ "beam","",[2,4],[5,7],[2,7],[5,4],[6,5],[3,8],[3,3],[3,9],0.25, "show"]
  [ "beam","",[2,4],[5,7],[2,7],[5,4],0.25,"show"],
  [ "bar", "1", [10, 3], [10, 8], "show"],
beam sample coords: [2,4],[5,7],[2,7],[5,4],[6,5],[3,8],[4,3],[1,6]    

 [ "springc", "c", [1, 7], [4,7], 0.5, 9, "show" ],
  [ "springt", "t", [1, 4], [5,4], 0.5, 30, 9, "show" ],

  [ "dim", "\\ell", [6, 4], [9,2], 0],


[ "bar", "1", [6, 8], [8, 8], "show"],
  [ "polygon", "",[8,8],[8,5], [9,5], [9,6], [10,6], [10,5], [11,5], [11, 8], "show"]

 
   [ "springc", "c", [13, 6], [10,6], 0.5, 4, "show" ],
   
I think...

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'
  }
};

/* Fixed GitHub Issues that are implemented in this JS code: 
#11 : Option to lock objects in hidden state (bar, beam, circle, dashpot, fix1, fix12, fix123, fix13, polygon, q, rope, springc, springt, wall)
#12 : Make the "beam" object clickable (solved due to updates in JSXGraph v1.5.0)
#13 : Suppress infobox at "rot" points
#28 : Move "force" by dragging the vector
#32 : "force": Prevent forces to have zero length
#35 : Make toStack() more robust
#37 : Grid lines to the background
*/

// https://github.com/mkraska/meclib/wiki
// version info
const versionText= "JXG "+JXG.version+" Meclib 2023 07 27";
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...