No. 28, 32 Move Force by dragging the vector pt2

Currently, forces can be moved by dragging the tail point and rotated by dragging the head point. It should be possible to also move the force by dragging the vector (just as it is possible when dragging the force from the generator object). Any force vectors from interactive input should have a nonzero length and thereby a well defined direction.

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],
  [ "label", "grid", [-0.8, -0.5]],
  [ "forceGen", "F_1", [6,7]],
  [ "label", "forceGen", [8,7]],
  [ "force", "F_1", [3,5], [5,5], 10,"active"],
  [ "force", "F_2", [9,5], [12,5] ],
  [ "label", "force", [7,3]]
]
</p>
<p id="data"></p>
<p id="fbd_names"></p>

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

1. Currently, forces can be moved by dragging the tail point and rotated by dragging the head point.
It should be possible to also move the force by dragging the vector (just as it is possible when dragging the force from the generator object).
In the active version, the vector has two control point for interactive modification. The tail point can be dragged to translate the arrow, the head point can be used to change direction and length.

Idea: 
check if state is active, then in attributes of arrow object, fixed: false
else state is not active, arrow cannot be moved

define the following line of code after creating arrow object
this.vec = ...
if (this.state == "active") {this.vec.setAttribute({fixed: false, snapToGrid: true});}
this.vec.obj = ...

[ "grid", "x","y", -5,5,-4,5, 50, [10,10], [0,0] ]

2. "force": Prevent forces to have zero length.
Any force vectors from interactive input should have a nonzero length and thereby a well defined direction.

Idea: 
Output coordinates of point 1 and point 2. 
Calculate distance between point 1 and point 2. The difference is output in console (and as text). 
User is also notified if difference is zero. 
If force length is zero, force is deleted (makes total sense) .

-->

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

// End of jsfiddle header

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