feat(UI): Add window resizing via draggable handle

.gitignore

@@ -68,6 +68,9 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
+# Yarn Berry cache directory
+.yarn
+
 # dotenv environment variables file
 .env
 .env.test

.node-version

@@ -1 +1 @@
-16.13.1
+16

src/@types/common.d.ts

@@ -37,6 +37,13 @@ type NotifyMessage = {
   message: string
   options?: NotificationOptions
 }
+type ResizeMessage = {
+  type: 'resize'
+  size: {
+    width: number
+    height: number
+  }
+}
 
 type PluginMessage =
   | ClosePluginMessage
@@ -45,6 +52,7 @@ type PluginMessage =
   | SetOptionsMessage
   | ExecMessage
   | NotifyMessage
+  | ResizeMessage
 
 type PostMessage = {
   pluginMessage: PluginMessage

src/code.ts

@@ -3,6 +3,7 @@ import {
   NotifyMessage,
   Options,
   PluginMessage,
+  ResizeMessage,
   SetOptionsMessage
 } from '@/@types/common'
 import defaultOptions from '@/defaultOptions'
@@ -72,6 +73,10 @@ function notify(msg: NotifyMessage) {
   figma.notify(message, options)
 }
 
+function resizeWindow(msg: ResizeMessage) {
+  figma.ui.resize(msg.size.width, msg.size.height)
+}
+
 figma.ui.onmessage = (msg: PluginMessage) => {
   switch (msg.type) {
     case 'exec':
@@ -94,6 +99,10 @@ figma.ui.onmessage = (msg: PluginMessage) => {
       notify(msg)
       break
 
+    case 'resize':
+      resizeWindow(msg)
+      break;
+
     default:
       break
   }

src/ui/App.tsx

@@ -8,6 +8,7 @@ import Store from '@/ui/Store'
 import Main from '@/ui/components/Main'
 import Setting from '@/ui/components/Setting'
 import { typography, color } from '@/ui/styles'
+import Corner from './components/Corner'
 
 // change cdn url to custom builded monaco-editor
 loader.config({
@@ -70,6 +71,7 @@ const AppContent: React.FC = () => {
       />
       {currentScreen === 'main' && <Main />}
       {currentScreen === 'setting' && <Setting />}
+      <Corner />
     </>
   )
 }

src/ui/components/Corner.tsx

@@ -0,0 +1,53 @@
+import { Global, css } from '@emotion/react';
+import React from 'react';
+
+function resizeWindow(e: MouseEvent) {
+  const size = {
+    width: Math.max(50, Math.floor(e.clientX + 5)),
+    height: Math.max(50, Math.floor(e.clientY + 5)),
+  };
+
+  parent.postMessage({ pluginMessage: { type: 'resize', size: size } }, '*');
+}
+
+const Corner: React.FC = () => {
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.currentTarget.onpointermove = resizeWindow;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    e.currentTarget.onpointermove = null;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  };
+
+  <svg id="corner" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 0V16H0L16 0Z" fill="white"/>
+    <path d="M6.22577 16H3L16 3V6.22576L6.22577 16Z" fill="#8C8C8C"/>
+    <path d="M11.8602 16H8.63441L16 8.63441V11.8602L11.8602 16Z" fill="#8C8C8C"/>
+  </svg>
+
+  return (
+    <>
+      <Global
+        styles={css`
+        #corner{
+          position: fixed;
+          right: 1px;
+          bottom: 2px;
+          cursor: nwse-resize;
+        }
+        `}
+      />
+    <div id='corner' onPointerDown={handlePointerDown} onPointerUp={handlePointerUp}>
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16 0V16H0L16 0Z" fill="white"/>
+        <path d="M6.22577 16H3L16 3V6.22576L6.22577 16Z" fill="#b5b5b5"/>
+        <path d="M11.8602 16H8.63441L16 8.63441V11.8602L11.8602 16Z" fill="#a5a5a5"/>
+      </svg>
+    </div>
+  </>);
+};
+
+export default Corner;

src/ui/components/Main.tsx

@@ -256,6 +256,8 @@ const Main: React.FC = () => {
         <div
           css={css`
             flex: 1;
+            overflow: hidden;
+            flex-grow: 1;
           `}
         >
           <ReactMonacoEditor