Alpha Test Build

src/code.ts

@@ -9,9 +9,15 @@ figma.showUI(__html__, {
   }
 );
 
+function clone(val) {
+  return JSON.parse(JSON.stringify(val))
+}
 
 //  Message received
 figma.ui.onmessage = (msg) => {
+  console.log("got this from the UI", msg)
+  console.log("checking message type ", msg.type);
+
   if (msg.type === 'window-resize') {
     figma.ui.resize(msg.data.width, msg.data.height);
     return;
@@ -29,7 +35,7 @@ figma.ui.onmessage = (msg) => {
     let node = figma.currentPage.selection[0];
     if (!node || dropPosition) {
       node = figma.createRectangle();
-      node.resize(800, 600)
+      node.resize(800, 800)
     }
     figma.notify('Added to canvas');
 

src/components/icon-grid.tsx

@@ -6,19 +6,114 @@ interface IconGridProps {
   keyword: string
   color: string
   angle: string
+  imgRef: any
+  canRef: any
 }
+const getImageData = (image, canvasRef) => {
+  console.log('get imagedata',image);
+  const canvas = canvasRef.current;
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const context = canvas.getContext("2d");
+  context.drawImage(image, 0, 0);
+  console.log(canvas);
+
+  return {
+    imageData: context.getImageData(0, 0, image.width, image.height),
+    canvas,
+    context,
+  };
+};
 
-function IconGrid({ name, keyword, color, angle }: IconGridProps) {
+const loadImage = async (src, imgRef) => 
+  new Promise((resolve, reject) => {
+    console.log('inside promise');
+    console.log(src);
+
+    const img = imgRef.current;
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = (...args) => reject(args);
+    img.src = src + "?new-icon";
+});
+
+
+async function encodeFigma(canvas, ctx, imageData) {
+  ctx.putImageData(imageData, 0, 0);
+
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      const reader = new FileReader();
+      //@ts-ignore
+      reader.onload = () => resolve(new Uint8Array(reader.result));
+      reader.onerror = () => reject(new Error("Could not read from blob"));
+      reader.readAsArrayBuffer(blob);
+    });
+  });
+}
+
+function IconGrid({ name, keyword, color, angle, imgRef, canRef }: IconGridProps) {
+  // const canvasRef = React.useRef(null);
+  // const imgRef = React.useRef(null);
+  const prefix = `https://3dicons.sgp1.cdn.digitaloceanspaces.com/v1/${angle}/${color}/`;
+  const sufix = `-${angle}-${color}.png?new_icon`;
+
+  const setBg = async (dropPosition = null, windowSize = null) => {
+    console.log('inside setBG');
+
+    const image = await loadImage(
+      `${prefix}${name}${sufix}`,
+      imgRef
+    );
+
+
+
+    const { imageData, canvas, context } = getImageData(
+      image,
+      canRef
+    );
+
+    console.log(imageData, canRef);
+
+    const newBytes = await encodeFigma(canvas, context, imageData);
+
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: "set-bg",
+          data: { newBytes, dropPosition, windowSize },
+        },
+      },
+      "*"
+    );
+  };
+  const onCreate = () => {
+    const count = name;
+    // parent.postMessage(
+    //   { pluginMessage: { type: "create-rectangles", count } },
+    //   "*"
+    // );
+    parent.postMessage({ pluginMessage: 'insideicon grid here' }, '*')
+    console.log(count);
+  };
 
-//   const icon = "phone"
-//   console.log(name);
 
   return (
     <Button
         key={name}
-        onClick={() => parent.postMessage({ pluginMessage: { type: name } }, '*')}
+        // onClick={() => parent.postMessage({ pluginMessage: { type: name } }, '*')}
+        onClick={() => {
+          setBg();
+          // console.log(imgRef);
+
+        }}
     >
-        <img  src={`https://3dicons.sgp1.cdn.digitaloceanspaces.com/v1/${angle}/${color}/${name}-${angle}-${color}.png`} width="100%" alt={keyword}/>
+        <img  
+          src={`${prefix}${name}${sufix}`} 
+          width="100%" 
+          alt={name}
+          crossOrigin={"anonymous"}
+        />
     </Button>
   )
 }

src/ui.css

@@ -136,10 +136,3 @@ input:focus {
   font-weight: 600;
 }
 
-.right-link {
-
-}
-
-.right-link:hover{
-
-}

src/ui.tsx

@@ -2,17 +2,42 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import "./ui.css";
 // import {HelloTest, Toface}  from "./components/hello-test";
+import { useWindowResize } from "./utils/use-window-resize";
 import Home from "./views/home";
 
 declare function require(path: string): any;
 
 
-function App() {
-  return (
-    <main>
-        <Home name="This is good" />
-    </main>
-  );
-}
+const App = () => {
+  const [currentPage] = React.useState("home");
+
+  function onWindowResize(windowSize: { width: number; height: number }) {
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: "window-resize",
+          data: { width: windowSize.width, height: windowSize.height },
+        },
+      },
+      "*"
+    );
+  }
+  useWindowResize(onWindowResize, {
+    minWidth: 120,
+    minHeight: 120,
+    maxWidth: 1024,
+    maxHeight: 1024,
+  });
+
+  const renderPage = () => {
+    switch (currentPage) {
+      default:
+      case "home":
+        return <Home />;
+    }
+  };
+
+  return renderPage();
+};
 
 ReactDOM.render(<App />, document.getElementById("react-page"));