Merge pull request #745 from whatwareweb/dev2

Add features to SVG import

Author: maxwofford

src/components/DropBox.tsx

@@ -102,51 +102,114 @@ 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 = `
-    <div style="${style}">
+    <div style="${dialogstyle}">
       <div>
         <div>Here are the polylines of your SVG. Copy and paste it into the editor.</div>
         <pre style="${polylinesStyle}">${polylines}</pre>
       </div>
 
       <span style="width: 100%; display: flex;">
-        <button class="mx-auto my-1 text-white p-2 rounded cursor-pointer bg-gray-700 hover:bg-gray-500">
+        <button id="closeButton"" ${buttonClasses}>
           close
         </button>
+        <button id="scaleButton" ${buttonClasses}>
+        scale
+        </button>
       </span>
     </div>
   `
 
-  el.querySelector("button").addEventListener("click", () => {
+  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 = `
+    <div style="${dialogstyle}">
+      <div>
+        <div>Scale your polylines to specific dimensions.</div>
+        <pre style="${polylinesStyle}">${polylines}</pre>
+      </div>
+  
+      <div style="width: 100%; display: flex;">
+        <input type="number" id="newWidth" placeholder="Width" style="${polylinesStyle} width: 50%; margin: 5px; ">
+        <input type="number" id="newHeight" placeholder="Height" style="${polylinesStyle} width: 50%; margin: 5px; ">
+      </div>
 
+      <div style="width: 100%; text-align: center;">
+          <input type="checkbox" id="paddingCheckbox" name="paddingCheckbox">
+          <label for="paddingCheckbox"> Add Padding</label><br>
+      </div>
+  
+      <span style="width: 100%; display: flex;">
+        <button id="scaleButton"" ${buttonClasses}>
+          scale (keep aspect ratio)
+        </button>
+        <button id="cancelButton"" ${buttonClasses}>
+          cancel
+        </button>
+      </span>
+    </div>
+  `
+  
+  el.querySelector("#scaleButton").addEventListener("click", () => {
+    const newWidth = el.querySelector("#newWidth").value;
+    const newHeight = el.querySelector("#newHeight").value;
+    const addPadding = el.querySelector("#paddingCheckbox").checked;
+
+    if (Number.isNaN(newWidth) || Number.isNaN(newHeight)|| newWidth == "" || newHeight == "") {
+      alert("Invalid width/height provided ");
+    } else {
+      const newPolyLines = tk.scalePolylinesToDimension(polylines, newWidth, newHeight, addPadding);
+      el.remove();
+      customAlert(newPolyLines);
+    }
+  })
+  
+  el.querySelector("#cancelButton").addEventListener("click", () => {
+    el.remove();
+    customAlert(polylines);
+  })
+  
   document.body.append(el);
 }

src/drawingToolkit/toolkit.js

@@ -149,6 +149,57 @@ export const toolkit = {
     }
 
   },
+  scalePolylinesToDimension(polylines, width, height, addPadding){
+    polylines = JSON.parse(polylines);
+    
+    let minXVal = Number.POSITIVE_INFINITY;
+    let minYVal = Number.POSITIVE_INFINITY;
+    polylines.forEach((obj) => {
+      obj.forEach((coord) => {
+        if (coord[0] < minXVal) {
+          minXVal = coord[0];
+        }
+        if (coord[1] < minYVal) {
+          minYVal = coord[1];
+        }
+      })
+    })
+    
+    translate(polylines, [-minXVal, -minYVal]);
+    
+    let maxXVal = Number.NEGATIVE_INFINITY;
+    let maxYVal = Number.NEGATIVE_INFINITY;
+    polylines.forEach((obj) => {
+      obj.forEach((coord) => {
+        if (coord[0] > maxXVal) {
+          maxXVal = coord[0];
+        }
+        if (coord[1] > maxYVal) {
+          maxYVal = coord[1];
+        }
+      })
+    })
+    
+    var ratio = Math.min(width / maxXVal, height / maxYVal);
+    
+    polylines.forEach((obj) => {
+      obj.forEach((coord) => {
+        coord[0] *= ratio;
+        coord[1] *= ratio;
+      })
+    })
+    
+    if (ratio == height / maxYVal) {
+      translate(polylines, [width/2 - maxXVal * ratio / 2, 0]);
+    } else if (ratio == width / maxXVal) {
+      translate(polylines, [0, height/2 - maxYVal * ratio / 2]);
+    }
+    if (addPadding) {
+      scale(polylines, 0.97);
+    }
+    
+    return JSON.stringify(polylines);
+  },
   join() {
     const [first, ...rest] = arguments;
     if (!first) return [];