scripts/template/script.js

0001 let SVGResult = document.getElementById('result-svg');
0002 let formContainer = document.getElementById('formContainer');
0003 let SVGContainer = document.getElementById("result-div");
0004
0005 // Given a collection of paths, returns a collection of containing the respective file text.
0006 async function readFiles(paths){
0007     let result = []
0008     for (const path of paths) {
0009         let data = await (await fetch(path)).text();
0010         result.push(data);
0011     }
0012     return result;
0013 }
0014
0015 // Removes the <svg> and </svg> tag to obtain its content.
0016 function removeSVGTag(data){
0017     let startTag = /<svg[^>]*>/i;
0018     let endTag = /<\/svg>/i;
0019     data = data.replace(startTag, '');
0020     data = data.replace(endTag, '');
0021     return data;
0022 }
0023
0024 async function SVGContentMerge(paths){
0025     let contents = await readFiles(paths);
0026     return contents.map(removeSVGTag).join('\n');
0027 }
0028
0029 // Loads a form containing a button for each SVG available.
0030 function load_form(group)
0031 {
0032     let form = document.createElement('form');
0033     form.id = 'checkboxForm';
0034
0035     group.forEach(item =>{
0036
0037         itemDiv = document.createElement('div');
0038         itemDiv.classList.add('form-item');
0039
0040         let label = document.createElement("label");
0041         itemDiv.appendChild(label);
0042
0043         let checkbox = document.createElement('input');
0044         checkbox.type = 'checkbox';
0045         checkbox.name = 'checkbox';
0046         checkbox.value = './svgs/' + item;
0047         label.append(checkbox);
0048
0049         let span = document.createElement('span');
0050         span.textContent = item.replace('.svg', '');
0051         label.appendChild(span);
0052
0053         form.appendChild(itemDiv);
0054
0055     });
0056
0057     form.append(document.createElement('br'));
0058
0059     // Create a button to apply the changes
0060     let apply_button = document.createElement('input');
0061     apply_button.type = 'button';
0062     apply_button.value = 'Apply Selection';
0063     apply_button.onclick = applyChanges;
0064     apply_button.classList.add('apply-button');
0065
0066     // Append the apply button to the form
0067     form.append(apply_button);
0068
0069     // Append the form to the formContainer div
0070     formContainer.appendChild(form);
0071 }
0072
0073 // Initialize the page by loading a form with a button for each SVG available.
0074 // This is done by reading the paths in the config.json file.
0075 document.addEventListener('DOMContentLoaded', function () {
0076     fetch('./config.json').then(response => response.json()).then(json =>{
0077         load_form(json);
0078     });
0079 });
0080
0081 // Updates the displayed SVG by combining the selected SVGs.
0082 async function applyChanges() {
0083     var checkboxes = document.getElementsByName('checkbox');
0084     var selectedValues = [];
0085
0086     for (var i = 0; i < checkboxes.length; i++) {
0087         if (checkboxes[i].checked) {
0088             selectedValues.push(checkboxes[i].value);
0089         }
0090     }
0091
0092     paths = selectedValues.reverse();
0093     SVGResult.innerHTML = await SVGContentMerge(paths);
0094 }
0095
0096
0097 // For navigation on the svg:
0098
0099 //--- Adjustable parameters:
0100 // Speed of zoom on scroll.
0101 const zoomFactor = 1.1;
0102 // To calculate the maximum width and height of the viewbox.
0103 const maxHalfLengths = { x: 3000, y: 3000 };
0104 //----
0105
0106 let pivot = { x: 0, y: 0 };
0107 let position = { x: 0, y: 0 };
0108 let halfSize = { x: 500, y: 500 };
0109 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
0110
0111 setViewBox();
0112
0113 SVGResult.addEventListener("mousemove", onMousemove);
0114 SVGResult.addEventListener("mousedown", onMousedown);
0115 SVGResult.addEventListener("wheel", onWheel);
0116
0117 const mouse = {
0118     position: { x: 0, y: 0 },
0119     isDown: false,
0120 };
0121
0122 function viewBoxDim(){
0123     return {x: position.x - halfSize.x, y: position.y - halfSize.y, w: 2*halfSize.x, h: 2*halfSize.y};
0124 }
0125
0126 function onMousedown(e) {
0127     mouse.position = screenToViewBoxPosition(e.pageX, e.pageY);
0128     window.addEventListener("mouseup", onMouseup);
0129     mouse.isDown = true;
0130 }
0131
0132 function setViewBox() {
0133     let dim = viewBoxDim();
0134     SVGResult.setAttribute("viewBox", `${dim.x} ${dim.y} ${dim.w} ${dim.h}`);
0135 }
0136
0137 function screenToViewBoxPosition(screenX, screenY){
0138     return {
0139         x: screenX * 2 * halfSize.x/SVGResult.clientWidth,
0140         y: screenY * 2 * halfSize.y/SVGResult.clientHeight
0141     }
0142 }
0143
0144 function onMousemove(e) {
0145     if (mouse.isDown) {
0146         let pos = screenToViewBoxPosition(e.pageX, e.pageY);
0147         let dx = (pos.x - mouse.position.x);
0148         let dy = (pos.y - mouse.position.y);
0149         position = {x: clamp(position.x - dx, -maxHalfLengths.x, maxHalfLengths.x), y: clamp(position.y - dy, -maxHalfLengths.y, maxHalfLengths.y)};
0150         mouse.position = pos;
0151         setViewBox();
0152     }
0153 }
0154
0155 function onMouseup(e) {
0156     window.removeEventListener("mouseup", onMouseup);
0157     mouse.isDown = false;
0158 }
0159
0160 function onWheel(e) {
0161     const scale = e.deltaY > 0 ? zoomFactor : 1/zoomFactor;
0162     halfSize = {x: clamp(halfSize.x * scale, 1, maxHalfLengths.x), y: clamp(halfSize.y * scale, 1, maxHalfLengths.y)};
0163     setViewBox();
0164 }