From 17678800af68acd315574e0b96f73767038fcd49 Mon Sep 17 00:00:00 2001 From: whatwareweb <59752545+whatwareweb@users.noreply.github.com> Date: Thu, 25 Jul 2024 19:39:07 -0500 Subject: [PATCH 1/5] Update toolkit and DropBox to prepare for SVG auto scaler --- src/components/DropBox.tsx | 152 ++++++++++++++++++++++------------ src/drawingToolkit/toolkit.js | 4 + 2 files changed, 105 insertions(+), 51 deletions(-) diff --git a/src/components/DropBox.tsx b/src/components/DropBox.tsx index f1c39df8a..72477c8be 100644 --- a/src/components/DropBox.tsx +++ b/src/components/DropBox.tsx @@ -8,10 +8,10 @@ export default function DropBox() { // Make sure the ref is defined addDragDrop(); }, []); // Empty dependency array means this effect runs once after initial render - + return (
- Drop an SVG or JS file. + Drop an SVG or JS file.
); } function addDragDrop() { const droparea: HTMLElement | null = document.querySelector(".droparea"); - + window.addEventListener("drop", function (evt) { const { view } = getStore(); - + let dt = evt.dataTransfer; - + if (dt === null || droparea === null) return; - + let files = dt.files; - + droparea.classList.add("hidden"); - + const file = files[0]; const fileName = file.name.split("."); const name = fileName[0]; const extension = fileName[fileName.length - 1]; - + var reader = new FileReader(); reader.readAsText(file); - + reader.onloadend = (event) => { let text = reader.result; - + if (extension === "js") { loadCodeFromString(text); } else if (extension === "svg") { text = text.replaceAll("\n", ""); - + const polylines = JSON.stringify(tk.svgToPolylines(text)); - + customAlert(polylines); - + // const newLines = `const importedSVG = ${polylines};\n`; - + // view.dispatch({ // changes: { from: 0, insert: newLines }, // }); @@ -79,19 +79,19 @@ function addDragDrop() { throw Error("Unknown extension:" + extension); } }; - + pauseEvent(evt); }); - + window.addEventListener("dragover", function (evt) { droparea.classList.remove("hidden"); pauseEvent(evt); }); ["mouseout"].forEach((trigger) => window.addEventListener(trigger, function (evt) { - droparea.classList.add("hidden"); - }), - ); + droparea.classList.add("hidden"); + }), +); } function pauseEvent(e) { @@ -102,51 +102,101 @@ function pauseEvent(e) { return false; } -function customAlert(polylines) { +const dialogstyle = ` +z-index: 999999999999; +width: 550px; +min-height: 100px; +position: absolute; +left: 50%; +top: 100px; +transform: translate(-50%, 0%); +background: #f4f4f4; +border-radius: 10px; +border: 1px solid black; +padding: 8px; +` + +const polylinesStyle = ` +overflow-x: auto; +background: #e2e2e2; +border-radius: 5px; +margin: auto; +margin-top: 1em; +margin-bottom: 1em; +padding: .25rem; +` + +const buttonClasses = `class="mx-auto my-1 text-white p-2 rounded cursor-pointer bg-gray-700 hover:bg-gray-500"` +function customAlert(polylines) { const el = document.createElement("div"); - const style = ` - z-index: 999999999999; - width: 550px; - min-height: 100px; - position: absolute; - left: 50%; - top: 100px; - transform: translate(-50%, 0%); - background: #f4f4f4; - border-radius: 10px; - border: 1px solid black; - padding: 8px; - ` - - const polylinesStyle = ` - overflow-x: auto; - background: #e2e2e2; - border-radius: 5px; - margin: auto; - margin-top: 1em; - margin-bottom: 1em; - padding: .25rem; + + el.innerHTML = ` +
+
+
Here are the polylines of your SVG. Copy and paste it into the editor.
+ 
${polylines}
+
+ + + + + +
` + + el.querySelector("#closeButton").addEventListener("click", () => { + el.remove(); + }) + + el.querySelector("#scaleButton").addEventListener("click", () => { + el.remove(); + scaleAlert(polylines); + }) + + document.body.append(el); +} +function scaleAlert(polylines) { + const el = document.createElement("div"); + el.innerHTML = ` -
+
-
Here are the polylines of your SVG. Copy and paste it into the editor.
+
Scale your polylines to specific dimensions.
${polylines}
+
+ + +
+ - +
` - el.querySelector("button").addEventListener("click", () => { + el.querySelector("#scaleButton").addEventListener("click", () => { + const newPolyLines = tk.scalePolylinesToDimension(polylines, el.querySelector("#newWidth").value, el.querySelector("#newHeight").value); el.remove(); + customAlert(newPolyLines); }) - + + el.querySelector("#cancelButton").addEventListener("click", () => { + el.remove(); + customAlert(polylines); + }) + document.body.append(el); -} +} \ No newline at end of file diff --git a/src/drawingToolkit/toolkit.js b/src/drawingToolkit/toolkit.js index f51c0472f..7d4aaf73f 100644 --- a/src/drawingToolkit/toolkit.js +++ b/src/drawingToolkit/toolkit.js @@ -132,6 +132,10 @@ export const toolkit = { } }, + scalePolylinesToDimension(polylines, width, height){ + console.log("it works", polylines, width, height); + return polylines; + }, join() { const [first, ...rest] = arguments; if (!first) return []; From 11d082fbbfaa625442552dd64d8cf542c47ec38b Mon Sep 17 00:00:00 2001 From: whatwareweb <59752545+whatwareweb@users.noreply.github.com> Date: Thu, 25 Jul 2024 20:49:03 -0500 Subject: [PATCH 2/5] Finish scaling algorithm --- src/components/DropBox.tsx | 17 ++++++--- src/drawingToolkit/toolkit.js | 72 ++++++++++++++++++++++++++++++++++- 2 files changed, 82 insertions(+), 7 deletions(-) diff --git a/src/components/DropBox.tsx b/src/components/DropBox.tsx index 72477c8be..1a958ce07 100644 --- a/src/components/DropBox.tsx +++ b/src/components/DropBox.tsx @@ -170,7 +170,7 @@ function scaleAlert(polylines) {
Scale your polylines to specific dimensions.
${polylines}
- +
@@ -186,11 +186,18 @@ function scaleAlert(polylines) {
` - + el.querySelector("#scaleButton").addEventListener("click", () => { - const newPolyLines = tk.scalePolylinesToDimension(polylines, el.querySelector("#newWidth").value, el.querySelector("#newHeight").value); - el.remove(); - customAlert(newPolyLines); + const newWidth = el.querySelector("#newWidth").value; + const newHeight = el.querySelector("#newHeight").value; + + if (Number.isNaN(newWidth) || Number.isNaN(newHeight)|| newWidth == "" || newHeight == "") { + alert("Invalid width/height provided "); + } else { + const newPolyLines = tk.scalePolylinesToDimension(polylines, newWidth, newHeight); + el.remove(); + customAlert(newPolyLines); + } }) el.querySelector("#cancelButton").addEventListener("click", () => { diff --git a/src/drawingToolkit/toolkit.js b/src/drawingToolkit/toolkit.js index 7d4aaf73f..5e67ace7c 100644 --- a/src/drawingToolkit/toolkit.js +++ b/src/drawingToolkit/toolkit.js @@ -133,8 +133,76 @@ export const toolkit = { }, scalePolylinesToDimension(polylines, width, height){ - console.log("it works", polylines, width, height); - return polylines; + polylines = JSON.parse(polylines); + + let minXVal = Number.POSITIVE_INFINITY; + polylines.forEach((obj) => { + obj.forEach((coord) => { + if (coord[0] < minXVal) { + minXVal = coord[0]; + } + }) + }) + + let minYVal = Number.POSITIVE_INFINITY; + polylines.forEach((obj) => { + obj.forEach((coord) => { + if (coord[1] < minYVal) { + minYVal = coord[1]; + } + }) + }) + + if (minXVal != 0) { + polylines.forEach((obj) => { + obj.forEach((coord) => { + coord[0] -= minXVal; + }) + }) + } + + if (minYVal != 0) { + polylines.forEach((obj) => { + obj.forEach((coord) => { + coord[1] -= minYVal; + }) + }) + } + + let maxXVal = Number.NEGATIVE_INFINITY; + polylines.forEach((obj) => { + obj.forEach((coord) => { + if (coord[0] > maxXVal) { + maxXVal = coord[0]; + } + }) + }) + + let maxYVal = Number.NEGATIVE_INFINITY; + polylines.forEach((obj) => { + obj.forEach((coord) => { + if (coord[1] > maxYVal) { + maxYVal = coord[1]; + } + }) + }) + + const xFactor = width/maxXVal; + const yFactor = height/maxYVal; + + polylines.forEach((obj) => { + obj.forEach((coord) => { + coord[0] *= xFactor; + }) + }) + + polylines.forEach((obj) => { + obj.forEach((coord) => { + coord[1] *= yFactor; + }) + }) + + return JSON.stringify(polylines); }, join() { const [first, ...rest] = arguments; From db71302c7b691a35b4d0a7e0e3703113a9d432a4 Mon Sep 17 00:00:00 2001 From: whatwareweb <59752545+whatwareweb@users.noreply.github.com> Date: Thu, 25 Jul 2024 23:34:04 -0500 Subject: [PATCH 3/5] Finish SVG import scaling settings --- src/components/DropBox.tsx | 10 +++- src/drawingToolkit/toolkit.js | 87 +++++++++++++---------------------- 2 files changed, 41 insertions(+), 56 deletions(-) diff --git a/src/components/DropBox.tsx b/src/components/DropBox.tsx index 1a958ce07..5881a4d4b 100644 --- a/src/components/DropBox.tsx +++ b/src/components/DropBox.tsx @@ -175,10 +175,15 @@ function scaleAlert(polylines) { + +
+ +
+