improve the popup design

Tasty-Kiwi · Dec 31, 2024 · 07f6818 · 07f6818
1 parent ff0cb94
commit 07f6818
Showing 1 changed file with 44 additions and 21 deletions.
diff --git a/index.ts b/index.ts
@@ -22,15 +22,17 @@ if (nodes.length === 0 || nodes.length > 1) {
   if (nodes[0].type === "VECTOR") {
     const workingNode = nodes[0] as VectorNode
     // console.log(workingNode)
-    console.log("works")
     const mesh: Mesh = {
       vertexes: [],
       segments: [],
-      colors: workingNode.strokes && workingNode.strokes[0].type === "SOLID" ? [] : undefined,
+      colors: workingNode.strokes && workingNode.strokes[0].type === "SOLID" ? [] : undefined, // this causes an error if strokes are missing
     }
 
     workingNode.vectorNetwork.vertices.forEach((vertex) => {
-      mesh.vertexes.push([workingNode.x + vertex.x, workingNode.y + (workingNode.height-vertex.y)])
+      mesh.vertexes.push([
+        workingNode.x + vertex.x,
+        workingNode.y + (workingNode.height - vertex.y),
+      ])
     })
     if (
       workingNode.strokes &&
@@ -53,15 +55,15 @@ if (nodes.length === 0 || nodes.length > 1) {
     const segments = workingNode.vectorNetwork.segments
     let start = -1
     let end = -1
-    let workingSegment: number[] = [];
+    let workingSegment: number[] = []
 
     for (let i = 0; i < segments.length; i++) {
       let segment = segments[i]
 
       if (i === 0) {
         // Start: 0, End: 1 => 0 -> 1
         workingSegment.push(segment.start, segment.end)
-        
+
         start = segment.start
         end = segment.end
 
@@ -73,19 +75,19 @@ if (nodes.length === 0 || nodes.length > 1) {
         end = segment.end
         // Start: 0, End: 1 ->
         // Start: 1, End: 2 => 0 -> 1 -> 2
-        workingSegment.push(segment.end);
+        workingSegment.push(segment.end)
       } else {
         start = segment.start
         end = segment.end
-        mesh.segments.push(workingSegment);
-        workingSegment = [];
-        
+        mesh.segments.push(workingSegment)
+        workingSegment = []
+
         // Start: 0, End: 1 => 0 -> 1
-        workingSegment.push(start, end);
+        workingSegment.push(start, end)
       }
 
       if (i === segments.length - 1) {
-        mesh.segments.push(workingSegment);
+        mesh.segments.push(workingSegment)
       }
     }
 
@@ -98,23 +100,44 @@ if (nodes.length === 0 || nodes.length > 1) {
 
     figma.showUI(
       `
+        <style>
+          .btn {
+            color: #ffffff;
+            background-color: #2c2c2c;
+            font-size: 0.875rem;
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+            border-radius: 0.375rem;
+            margin-top: auto;
+            width: fit-content;
+            margin-top: 0.25rem;
+          }
+        </style>
         <script>
-          function handleCopy(id) {
-            // Get the text field
+          function handleCopy() {
             var copyText = document.getElementById("code")
-
-            // Select the text field
             copyText.select()
-            copyText.setSelectionRange(0, 99999) // For mobile devices
+            copyText.setSelectionRange(0, 99999)
+            document.execCommand("copy")
+          }
             
-            // Copy the text inside the text field
-            // navigator.clipboard.writeText(copyText.value)
-            document.execCommand('copy')
+          function handleDownload() {
+            var link = document.createElement("a")
+            var content = document.getElementById("code").value
+            var file = new Blob([content], { type: "text/plain" })
+            link.href = URL.createObjectURL(file)
+            link.download = "mesh.lua"
+            link.click()
+            URL.revokeObjectURL(link.href)
           }
         </script>
+        <h1 style="font-family: sans-serif;">Your mesh:</h1>
+        <textarea id="code" readonly style="resize: none; height: 10rem; width: 460px">${luaTable}</textarea>
         <div>
-          <textarea id="code" readonly>${luaTable}</textarea>
-          <button onclick="handleCopy()">Copy to clipboard</button>
+          <button class="btn" style="margin-top: 0.25rem" onclick="handleCopy()">Copy to clipboard</button>
+          <button class="btn" onclick="handleDownload()">Save</button>
         </div>
       `,
       {