Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">
<title>MathXpert Grapher</title>
<style>
body, html {
margin: 0;
padding: 0;
border: none;
}
/* Set a global font-family rule for all text elements. Only Times New Roman actually works well. */
text {
font-family: 'Times New Roman', 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'TeX Gyre Termes Math';
}
/* the following container with horizontal flow will hold the Toolbar and the svgContainer, so the svgContainer will come to the right of the Toolbar */
.container {
display: flex;
align-items: center;
position:relative;
top = 0;
left = 0;
}
/* Define svgContainer div with absolute positioning so it comes to the right of the Toolbar */
#svgContainer {
position:absolute;
left: 60px;
top:0px;
z-index: 1;
text-shadow: none;
}
#draggableTitle0 {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
padding: 5px;
color: yellow;
top: 10px; /* Initial position. Doesn't affect anything as Engine positions the titles. */
left: 10px; /* Initial position */
z-index: 2; /* Ensure it's above other elements */
}
#draggableTitle1 {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
padding: 5px;
color: yellow;
top: 10px; /* Initial position */
left: 50px; /* Initial position */
z-index: 2; /* Ensure it's above other elements */
}
#selectionRectangle {
position: absolute;
border: 1px solid red;
pointer-events: none; /* Ignore this element during mouse events */
}
body {
background-color:none;
}
.toolbar {
display: flex;
flex: 0 0 60px;
flex-direction: column; /* Make the contents flow vertically */
gap: 5px; /* Adjust the gap as needed */
align-items: center; /* Align items horizontally in the center */
}
.toolbar button {
height: 17px; /* Adjust the height as needed */
}
/* Style for the modal */
#hintModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
justify-content: center;
align-items: center;
}
/* Style for the modal content */
#modalContent {
background: rgb(200,200,255);
padding: 20px;
border-radius: 5px;
width: 50%;
height: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<html>
<body>
<div id="draggableTitle0" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px;"> </div>
<div id="draggableTitle1" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px;"> </div>
<div class="container" id="wholeWindow">
<div class="toolbar" id="toolbar" style="display: flex; flex-direction: column;align-items: center;">
<form id="myForm" method="post" action="/Demos/ProblemLibraryDemo/GraphDoc.php"
style="display: flex; flex-direction: column;align-items: center;">
<input type="hidden" name="action" id="formAction" value="">
<input type="hidden" name="selectedRectangleField" id="selectedRectangleField" value="">
<input type="image" name="draw" id="draw" src="draw89.bmp" Alt="Draw" width="60" height="36">
<input type="image" name="horizontalzoomout" src="" alt="HZoom Out" width="60" height="20">
<input type="image" name="verticalzoomout" src="" alt="VZoom Out" width="60" height="20">
<input type="image" name="horizontalzoomin" src="" alt="HZoom In" width="60" height="20">
<input type="image" name="verticalzoomin" src="" alt="VZoom In" width="60" height="20">
<input type="image" name="pointslope" src="" alt="Point-Slope" width="60" height="20">
</form>
<button onclick="showAssumptions()">Assumptions</button>
<button onclick="showSingularities()">Singularities</button>
</div> <!-- This closes the toolbar div -->
<div id="svgContainer">
<svg id="graphSVG" width="584" height="352" top = "0px"; xmlns="http://www.w3.org/2000/svg">
<svg id="title0" class = "title" width="075" height="30" style="position:absolute;left: 407; top: 43;" viewBox = " 0 0 75 30" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="19" style="font-style:italic;font-size:12pt;fill:rgb(255,0,0);">y </text>
<text x = "20" y="20" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">= </text>
<text x = "32" y="19" style="font-style:italic;font-size:12pt;fill:rgb(255,0,0);">x </text>
<text x = "46" y="19" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">+ </text>
<text x = "60" y="19" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">1 </text>
</svg>
<svg class="graph" id="graph1" top = "175" left ="0" mywidth= "583" myheight = "175" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipRect"> <rect x="0" y="175" width= "583" height="175"/></clipPath>
</defs>
<g clip-path="url(#clipRect)">
<rect x="0.00" y="86.83" width="582.00" height="86.83" style="stroke:rgb(255,255,0); fill:rgb(255,235,190);"/>
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1.00" d = "" />
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1.00" d = "" />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1.00" d = "M 283.8 173.7 L 283.8 86.8 M 276.6 173.7 L 276.6 86.8 M 269.4 173.7 L 269.4 86.8 M 262.2 173.7 L 262.2 86.8 M 247.9 173.7 L 247.9 86.8 M 240.7 173.7 L 240.7 86.8 M 233.5 173.7 L 233.5 86.8 M 226.3 173.7 L 226.3 86.8 M 211.9 173.7 L 211.9 86.8 M 204.7 173.7 L 204.7 86.8 M 197.6 173.7 L 197.6 86.8 M 190.4 173.7 L 190.4 86.8 M 176.0 173.7 L 176.0 86.8 M 168.8 173.7 L 168.8 86.8 M 161.6 173.7 L 161.6 86.8 M 154.4 173.7 L 154.4 86.8 M 140.1 173.7 L 140.1 86.8 M 132.9 173.7 L 132.9 86.8 M 125.7 173.7 L 125.7 86.8 M 118.5 173.7 L 118.5 86.8 M 104.1 173.7 L 104.1 86.8 M 96.9 173.7 L 96.9 86.8 M 89.7 173.7 L 89.7 86.8 M 82.6 173.7 L 82.6 86.8 M 68.2 173.7 L 68.2 86.8 M 61.0 173.7 L 61.0 86.8 M 53.8 173.7 L 53.8 86.8 M 46.6 173.7 L 46.6 86.8 M 32.2 173.7 L 32.2 86.8 M 25.1 173.7 L 25.1 86.8 M 17.9 173.7 L 17.9 86.8 M 10.7 173.7 L 10.7 86.8 M 298.2 173.7 L 298.2 86.8 M 305.4 173.7 L 305.4 86.8 M 312.6 173.7 L 312.6 86.8 M 319.8 173.7 L 319.8 86.8 M 334.1 173.7 L 334.1 86.8 M 341.3 173.7 L 341.3 86.8 M 348.5 173.7 L 348.5 86.8 M 355.7 173.7 L 355.7 86.8 M 370.1 173.7 L 370.1 86.8 M 377.3 173.7 L 377.3 86.8 M 384.4 173.7 L 384.4 86.8 M 391.6 173.7 L 391.6 86.8 M 406.0 173.7 L 406.0 86.8 M 413.2 173.7 L 413.2 86.8 M 420.4 173.7 L 420.4 86.8 M 427.6 173.7 L 427.6 86.8 M 441.9 173.7 L 441.9 86.8 M 449.1 173.7 L 449.1 86.8 M 456.3 173.7 L 456.3 86.8 M 463.5 173.7 L 463.5 86.8 M 477.9 173.7 L 477.9 86.8 M 485.1 173.7 L 485.1 86.8 M 492.3 173.7 L 492.3 86.8 M 499.4 173.7 L 499.4 86.8 M 513.8 173.7 L 513.8 86.8 M 521.0 173.7 L 521.0 86.8 M 528.2 173.7 L 528.2 86.8 M 535.4 173.7 L 535.4 86.8 M 549.8 173.7 L 549.8 86.8 M 556.9 173.7 L 556.9 86.8 M 564.1 173.7 L 564.1 86.8 M 571.3 173.7 L 571.3 86.8 M 0.0 137.4 L 582.0 137.4 M 0.0 144.5 L 582.0 144.5 M 0.0 151.6 L 582.0 151.6 M 0.0 158.7 L 582.0 158.7 M 0.0 172.9 L 582.0 172.9 M 0.0 123.1 L 582.0 123.1 M 0.0 116.0 L 582.0 116.0 M 0.0 108.9 L 582.0 108.9 M 0.0 101.8 L 582.0 101.8 M 0.0 87.5 L 582.0 87.5 " />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1.00" d = "" />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="1.00" d = "M 255.1 173.7 L 255.1 86.8 M 219.1 173.7 L 219.1 86.8 M 183.2 173.7 L 183.2 86.8 M 147.2 173.7 L 147.2 86.8 M 111.3 173.7 L 111.3 86.8 M 75.4 173.7 L 75.4 86.8 M 39.4 173.7 L 39.4 86.8 M 3.5 173.7 L 3.5 86.8 M 326.9 173.7 L 326.9 86.8 M 362.9 173.7 L 362.9 86.8 M 398.8 173.7 L 398.8 86.8 M 434.8 173.7 L 434.8 86.8 M 470.7 173.7 L 470.7 86.8 M 506.6 173.7 L 506.6 86.8 M 542.6 173.7 L 542.6 86.8 M 578.5 173.7 L 578.5 86.8 M 0.0 165.8 L 582.0 165.8 M 0.0 94.6 L 582.0 94.6 " />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="3.00" d = "" />
<rect x="0.00" y="0.00" width="582.00" height="86.83" style="fill:none; stroke:rgb(255,255,0); stroke-width:1;"/>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 0.0 130.2 L 582.0 130.2 M 291.0 173.7 L 291.0 86.8 " />
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 111.0 130.2 L 111.0 128.5 M 111.0 130.2 L 111.0 132.0 M 111.0 146.2 M 106.0 146.2 " />
<text x = "106" y="146" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;">-1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 471.0 130.2 L 471.0 128.5 M 471.0 130.2 L 471.0 132.0 M 471.0 146.2 M 468.0 146.2 " />
<text x = "468" y="146" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;">1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 291.0 166.2 L 296.8 166.2 M 291.0 166.2 L 285.2 166.2 M 302.6 172.1 " />
<text x = "302" y="172" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;">-10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 291.0 94.3 L 296.8 94.3 M 291.0 94.3 L 285.2 94.3 M 302.6 100.2 " />
<text x = "302" y="100" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;">10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 283.8 99.9 " />
<text x = "283" y="99" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;"><tspan style="font-style:italic">y</tspan></text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2.00" d = "M 573.0 143.3 " />
<text x = "573" y="143" style="font-style:roman;font-size:10pt;fill:rgb(0,0,0);stroke:none;"><tspan style="font-style:italic">x</tspan></text>
<path stroke="rgb(120,120,120)" fill="none" stroke-width="3.00" d = "M 0.0 132.5 L 2.9 132.4 L 5.8 132.3 L 8.7 132.3 L 11.6 132.2 L 14.5 132.2 L 17.5 132.1 L 20.4 132.0 L 23.3 132.0 L 26.2 131.9 L 29.1 131.9 L 32.0 131.8 L 34.9 131.8 L 37.8 131.7 L 40.7 131.6 L 43.6 131.6 L 46.6 131.5 L 49.5 131.5 L 52.4 131.4 L 55.3 131.4 L 58.2 131.3 L 61.1 131.2 L 64.0 131.2 L 66.9 131.1 L 69.8 131.1 L 72.7 131.0 L 75.7 130.9 L 78.6 130.9 L 81.5 130.8 L 84.4 130.8 L 87.3 130.7 L 90.2 130.7 L 93.1 130.6 L 96.0 130.5 L 98.9 130.5 L 101.8 130.4 L 104.8 130.4 L 107.7 130.3 L 110.6 130.2 L 113.5 130.2 L 116.4 130.1 L 119.3 130.1 L 122.2 130.0 L 125.1 130.0 L 128.0 129.9 L 130.9 129.8 L 133.9 129.8 L 136.8 129.7 L 139.7 129.7 L 142.6 129.6 L 145.5 129.6 L 148.4 129.5 L 151.3 129.4 L 154.2 129.4 L 157.1 129.3 L 160.0 129.3 L 163.0 129.2 L 165.9 129.1 L 168.8 129.1 L 171.7 129.0 L 174.6 129.0 L 177.5 128.9 L 180.4 128.9 L 183.3 128.8 L 186.2 128.7 L 189.1 128.7 L 192.1 128.6 L 195.0 128.6 L 197.9 128.5 L 200.8 128.4 L 203.7 128.4 L 206.6 128.3 L 209.5 128.3 L 212.4 128.2 L 215.3 128.2 L 218.2 128.1 L 221.2 128.0 L 224.1 128.0 L 227.0 127.9 L 229.9 127.9 L 232.8 127.8 L 235.7 127.7 L 238.6 127.7 L 241.5 127.6 L 244.4 127.6 L 247.3 127.5 L 250.3 127.5 L 253.2 127.4 L 256.1 127.3 L 259.0 127.3 L 261.9 127.2 L 264.8 127.2 L 267.7 127.1 L 270.6 127.1 L 273.5 127.0 L 276.4 126.9 L 279.4 126.9 L 282.3 126.8 L 285.2 126.8 L 288.1 126.7 L 291.0 126.6 L 293.9 126.6 L 296.8 126.5 L 299.7 126.5 L 302.6 126.4 L 305.5 126.4 L 308.5 126.3 L 311.4 126.2 L 314.3 126.2 L 317.2 126.1 L 320.1 126.1 L 323.0 126.0 L 325.9 125.9 L 328.8 125.9 L 331.7 125.8 L 334.6 125.8 L 337.6 125.7 L 340.5 125.7 L 343.4 125.6 L 346.3 125.5 L 349.2 125.5 L 352.1 125.4 L 355.0 125.4 L 357.9 125.3 L 360.8 125.3 L 363.7 125.2 L 366.7 125.1 L 369.6 125.1 L 372.5 125.0 L 375.4 125.0 L 378.3 124.9 L 381.2 124.8 L 384.1 124.8 L 387.0 124.7 L 389.9 124.7 L 392.8 124.6 L 395.8 124.6 L 398.7 124.5 L 401.6 124.4 L 404.5 124.4 L 407.4 124.3 L 410.3 124.3 L 413.2 124.2 L 416.1 124.1 L 419.0 124.1 L 421.9 124.0 L 424.9 124.0 L 427.8 123.9 L 430.7 123.9 L 433.6 123.8 L 436.5 123.7 L 439.4 123.7 L 442.3 123.6 L 445.2 123.6 L 448.1 123.5 L 451.0 123.5 L 454.0 123.4 L 456.9 123.3 L 459.8 123.3 L 462.7 123.2 L 465.6 123.2 L 468.5 123.1 L 471.4 123.0 L 474.3 123.0 L 477.2 122.9 L 480.1 122.9 L 483.1 122.8 L 486.0 122.8 L 488.9 122.7 L 491.8 122.6 L 494.7 122.6 L 497.6 122.5 L 500.5 122.5 L 503.4 122.4 L 506.3 122.3 L 509.2 122.3 L 512.2 122.2 L 515.1 122.2 L 518.0 122.1 L 520.9 122.1 L 523.8 122.0 L 526.7 121.9 L 529.6 121.9 L 532.5 121.8 L 535.4 121.8 L 538.3 121.7 L 541.3 121.7 L 544.2 121.6 L 547.1 121.5 L 550.0 121.5 L 552.9 121.4 L 555.8 121.4 L 558.7 121.3 L 561.6 121.2 L 564.5 121.2 L 567.4 121.1 L 570.4 121.1 L 573.3 121.0 L 576.2 121.0 L 579.1 120.9 L 582.0 120.8 L 584.9 120.8 " />
</g>
</svg>
<svg id="title1" class = "title" width="075" height="48" style="position:absolute;left: 407; top: 86;" viewBox = " 0 0 75 48" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="28" style="font-style:italic;font-size:12pt;fill:rgb(120,120,120);">y </text>
<text x = "20" y="29" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">= </text>
<text x = "32" y="19" style="font-style:italic;font-size:12pt;fill:rgb(120,120,120);">x </text>
<line x1="32" y1="24" x2="40" y2="24" style="stroke:rgb(120,120,120);"/>
<text x = "32" y="37" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">1 </text>
<text x = "46" y="28" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">+ </text>
<text x = "60" y="28" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">1 </text>
</svg>
<svg id="singularity1~0" class = "singularity" width="047" height="30" style="display:none;position:absolute;left: 0; top: 0;" viewBox = " 0 0 47 30" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="19" style="font-style:italic;font-size:12pt;fill:rgb(120,120,120);">a </text>
<text x = "20" y="20" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">= </text>
<text x = "32" y="19" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">0 </text>
</svg>
<svg class="param" id="param0" width="24" height="30" viewBox = " 0 0 24 30" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="19" style="font-style:italic;font-size:12pt;fill:rgb(0,0,0);">a </text>
</svg>
<svg class="param" id="param1" width="24" height="30" viewBox = " 0 0 24 30" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="19" style="font-style:italic;font-size:12pt;fill:rgb(0,0,0);">b </text>
</svg>
</svg>
</div> <!-- This closes the svgContainer div -->
</div> <!-- This closes the container div -->
<script>
// Make the DIV elements draggable:
dragElement(document.getElementById("draggableTitle0"));
dragElement(document.getElementById("draggableTitle1"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id)) {
// If present, the header is where you move the DIV from:
document.getElementById(elmnt.id).onmousedown = dragMouseDown;
} else {
// Otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// Get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// Call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// Calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// Stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
function moveSvgElementToContainer(svgElementId, destinationContainerId) {
var svgElement = document.getElementById(svgElementId);
var destinationContainer = document.getElementById(destinationContainerId);
if (svgElement && destinationContainer) {
destinationContainer.style.position = 'absolute';
destinationContainer.style.left = svgElement.style.left;
destinationContainer.style.top = svgElement.style.top;
var svgRect = svgElement.getBoundingClientRect();
destinationContainer.style.width = svgRect.width + 'px';
destinationContainer.style.height = svgRect.height + 'px';
// Now move the SVG element to the destination container
destinationContainer.appendChild(svgElement);
// Since the SVG is now positioned relative to its new container, reset its position
svgElement.style.left = '0px';
svgElement.style.top = '0px';
} else
{ if(svgElement)
{
console.error('destination container not found');
}
else
{
console.error('SVG element not found');
}
}
}
function showAssumptions() {
// Create a popup window
var popupWindow = window.open('', 'Assumptions', 'width=600, height=400');
// Create a div with relative positioning
var div = popupWindow.document.createElement('div');
div.style.position = 'relative';
// Append the div to the popup window
popupWindow.document.body.appendChild(div);
// Display all SVG elements with class "assumption"
var assumptions = document.querySelectorAll('.assumption');
assumptions.forEach(function (assumption) {
// Clone the assumption
var clonedAssumption = assumption.cloneNode(true);
// Set the display property to block (or any other appropriate value)
clonedAssumption.style.display = 'block';
// Append the cloned assumption to the div
div.appendChild(clonedAssumption);
});
}
function showSingularities() {
// Create a popup window
var popupWindow = window.open('', 'Singularities', 'width=600, height=400');
// Create a div with relative positioning
var div = popupWindow.document.createElement('div');
div.style.position = 'relative';
// Append the div to the popup window
popupWindow.document.body.appendChild(div);
// Display all SVG elements with class "singularity"
var singularities = document.querySelectorAll('.singularity');
singularities.forEach(function (t) {
var clonedSingularity = t.cloneNode(true);
// Set the display property to block (or any other appropriate value)
clonedSingularity.style.display = 'block';
// Append the cloned assumption to the div
div.appendChild(clonedSingularity);
});
}
function svgToImageInput(svgElementId, inputElementId) {
var svgElement = document.getElementById(svgElementId);
var inputElement = document.getElementById(inputElementId);
// Serialize SVG to string
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svgElement);
// Encode SVG string in Base64
var svgBase64 = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgString)));
// Set the encoded SVG as the source for the input image
inputElement.setAttribute('src', svgBase64);
}
// Ensure this script runs after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
moveSvgElementToContainer('title0', 'draggableTitle0');
moveSvgElementToContainer('title1', 'draggableTitle1');
});
let selectionMade = false; // set it to true on mouse_up when a rectangle is selected.
let selectionMode = "centered"; // "corner" // the alternative is "centered"
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('draw').addEventListener('click', function(event) {
// Construct the selected rectangle string
// The form will submit automatically as this button is of type image/input inside the form. Therefore:
event.preventDefault(); // Prevent the default form submission
console.log("Draw button was clicked");
console.log("Value of selectionMade = ");
console.log(selectionMade);
if (selectionMade) { // Check if a selection has been made
let selectedRectangleValue = "[" + [whichgraph, selectedX, selectedY, selectedWidth, selectedHeight].join(',') + "]";
document.getElementById('selectedRectangleField').value = selectedRectangleValue;
console.log("got here");
console.log(selectedRectangleValue);
// NOW submit it.
document.getElementById('myForm').submit();
} // end if
} // end of the function
); // end of addEventListener
// Step 1: Identify all SVG elements of class "param"
const svgs = document.querySelectorAll('svg.param');
// Step 2 & 3: Process each SVG and create corresponding button groups
svgs.forEach((svg, index) => {
// Convert SVG to Data URL
const xml = new XMLSerializer().serializeToString(svg);
const svg64 = btoa(unescape(encodeURIComponent(xml)));
const svgDataUrl = 'data:image/svg+xml;base64,' + svg64;
svg.style.display = "none"; // Hide the original SVG to prevent clutter.
// svg.parentNode.removeChild(svg);
// Create button group container with specified styles
const buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';
buttonGroup.style.display = 'flex';
buttonGroup.style.flexDirection = 'row';
buttonGroup.style.alignItems = 'center';
// Create the main button with SVG as the image and specified styles
const inputImage = document.createElement('input');
inputImage.type = 'image';
inputImage.src = svgDataUrl;
inputImage.alt = `Parameter ${index}`;
inputImage.style.width = '16px';
inputImage.style.height = '16px';
// Apply background color and text color here if the button supports text
// Container for the + and - buttons, aligned vertically
const buttonsContainer = document.createElement('div');
buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.alignItems = 'center';
// Create the "+" button with specified styles for background and text color
const inputPlus = document.createElement('button');
inputPlus.innerHTML = "+";
inputPlus.style.cssText = 'height: 8px; width: 12px;';
// Create the "-" button with specified styles for background and text color
const inputMinus = document.createElement('button');
inputMinus.innerHTML = "-";
inputMinus.style.cssText = 'height: 8px; width: 12px;';
// Event listeners for "+" and "-" buttons to submit the form
inputPlus.addEventListener('click', function() {
submitFormWithAction('parameterplus' + index);
});
inputMinus.addEventListener('click', function() {
submitFormWithAction('parameterminus' + index);
});
// Append + and - buttons to their container
buttonsContainer.appendChild(inputPlus);
buttonsContainer.appendChild(inputMinus);
// Append elements to the button group
buttonGroup.appendChild(inputImage); // Main button
buttonGroup.appendChild(buttonsContainer); // Container with + and - buttons
// Append the button group to the target container
document.getElementById('toolbar').appendChild(buttonGroup);
});
});
function submitFormWithAction(actionValue) {
const form = document.getElementById('myForm');
const actionInput = document.getElementById('formAction');
actionInput.value = actionValue;
form.submit();
}
</script>
<script>
let svgContainer = document.getElementById('svgContainer');
let selectionRectangle = document.createElement('div');
selectionRectangle.id = 'selectionRectangle';
selectionRectangle.style.position = 'absolute';
selectionRectangle.style.border = '1px solid blue';
selectionRectangle.style.pointerEvents = 'none'; // Ignore pointer events
// svgContainer.appendChild(selectionRectangle);
// This is now done on mouse_down, when selection starts. If it's done here,
// it makes a visible black dot below the graph and creates scroll bars.
let selectedX = selectionRectangle.style.left = 0;
let selectedY = selectionRectangle.style.top = 0;
let selectedWidth = selectionRectangle.style.width;
let selectedHeight = selectionRectangle.style.height;
let startX, startY, isSelecting = false;
let activeGraphBounds = null;
let whichgraph = 0;
svgContainer.addEventListener('mousedown', function(e) {
selectionMade = false;
if (!svgContainer.contains(selectionRectangle))
svgContainer.appendChild(selectionRectangle);
let graphs = document.querySelectorAll('.graph');
let rect = svgContainer.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
let k = 0;
for (let graph of graphs) {
// Use the manually defined bounds instead of getBoundingClientRect()
let graphX = parseInt(graph.getAttribute("left"), 10);
let graphY = parseInt(graph.getAttribute("top"), 10);
let graphWidth = parseInt(graph.getAttribute("mywidth"), 10);
let graphHeight = parseInt(graph.getAttribute("myheight"), 10);
console.log(graphX, graphY, graphWidth, graphHeight);
if (x >= graphX && x <= graphX + graphWidth && y >= graphY && y <= graphY + graphHeight) {
isSelecting = true;
startX = x;
startY = y;
activeGraphBounds = { left: graphX, top: graphY, right: graphX + graphWidth, bottom: graphY + graphHeight };
updateSelectionRectangle(x, y, 0, 0);
whichgraph = k;
break;
k = k+1;
}
}
});
svgContainer.addEventListener('mousemove', function(e) {
if (!isSelecting || !activeGraphBounds) return;
let rect = svgContainer.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
// Constrain the selection within the manually defined bounds
x = Math.max(activeGraphBounds.left, Math.min(x, activeGraphBounds.right));
y = Math.max(activeGraphBounds.top, Math.min(y, activeGraphBounds.bottom));
let width = Math.abs(x - startX);
let height = Math.abs(y - startY);
if(selectionMode == "centered")
{ width *= 2;
height *= 2;
}
let newX = startX < x ? startX : x;
let newY = startY < y ? startY : y;
// Adjust width and height to not exceed the active graph bounds
if (newX + width > activeGraphBounds.right)
width = activeGraphBounds.right - newX;
if (newY + height > activeGraphBounds.bottom)
height = activeGraphBounds.bottom - newY;
updateSelectionRectangle(newX, newY, width, height);
});
svgContainer.addEventListener('mouseup', function(e) {
if (!isSelecting) return;
isSelecting = false;
activeGraphBounds = null; // Reset the active graph bounds
// The final selected rectangle is available here
selectedX = selectionRectangle.style.left;
selectedY = selectionRectangle.style.top;
selectedWidth = selectionRectangle.style.width;
selectedHeight = selectionRectangle.style.height;
selectionMade = true;
console.log(whichgraph,selectedX,selectedY,selectedWidth,selectedHeight);
});
function updateSelectionRectangle(x, y, width, height) {
selectionRectangle.style.left = x + 'px';
selectionRectangle.style.top = y + 'px';
selectionRectangle.style.width = width + 'px';
selectionRectangle.style.height = height + 'px';
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists