Merge branch 'dev'

Author: ChugunovRoman

@types/Renderer/webApi.d.ts

@@ -34,4 +34,18 @@ declare namespace WebApi {
       },
     ];
   }
+
+  interface SetClipboardData {
+    format: string;
+    data: Uint8Array;
+  }
+
+  interface GetFonts {
+    useAgent: boolean;
+  }
+
+  interface GetFontFile {
+    path: string;
+    postscript: string;
+  }
 }

@types/index.d.ts

@@ -1,3 +1,5 @@
+type FontsMap = import("figma-linux-rust-binding").Fonts.IFonts;
+
 declare namespace Electron {
   interface RemoteMainInterface {
     app: App;
@@ -86,6 +88,10 @@ declare namespace Electron {
     on(channel: "set-default-theme", listener: (event: IpcMainInvokeEvent) => void): this;
     on(channel: "saveCreatorTheme", listener: (event: IpcMainInvokeEvent, theme: Themes.Theme) => void): this;
     on(channel: "sync-themes", listener: (event: IpcMainInvokeEvent) => void): this;
+    on(
+      channel: "set-clipboard-data",
+      listener: (event: IpcMainInvokeEvent, data: WebApi.SetClipboardData) => void,
+    ): this;
 
     handle(
       channel: "writeNewExtensionToDisk",
@@ -115,6 +121,11 @@ declare namespace Electron {
       channel: "writeFiles",
       listener: (event: IpcMainInvokeEvent, data: WebApi.WriteFiles) => Promise<void> | void,
     ): void;
+    handle(channel: "get-fonts", listener: (event: IpcMainInvokeEvent) => Promise<void> | FontsMap): void;
+    handle(
+      channel: "get-font-file",
+      listener: (event: IpcMainInvokeEvent, data: WebApi.GetFontFile) => Promise<void> | Buffer,
+    ): void;
   }
 
   interface IpcRenderer extends NodeJS.EventEmitter {
@@ -171,6 +182,7 @@ declare namespace Electron {
     send(channel: "set-default-theme"): this;
     send(channel: "saveCreatorTheme", theme: Themes.Theme): this;
     send(channel: "sync-themes"): this;
+    send(channel: "set-clipboard-data", data: WebApi.SetClipboardData): this;
 
     invoke(channel: "writeNewExtensionToDisk", data: WebApi.WriteNewExtensionToDiskArgs): Promise<number>;
     invoke(channel: "getAllLocalFileExtensionIds"): Promise<number[]>;
@@ -182,6 +194,8 @@ declare namespace Electron {
     invoke(channel: "createMultipleNewLocalFileExtensions", data: WebApi.CreateMultipleExtension): Promise<any>;
     invoke(channel: "isDevToolsOpened"): Promise<boolean>;
     invoke(channel: "writeFiles", data: WebApi.WriteFiles): Promise<void>;
+    invoke(channel: "get-fonts"): Promise<FontsMap>;
+    invoke(channel: "get-font-file", data: WebApi.GetFontFile): Promise<Buffer>;
   }
 
   interface WebContents extends NodeJS.EventEmitter {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-linux",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Figma is the first interface design tool based in the browser, making it easier for teams to create software. Join as in Telegram: https://t.me/figma_linux",
   "main": "src/main/index.js",
   "repository": "git@github.com:ChugunovRoman/figma-linux.git",

snap/snapcraft.yaml

@@ -1,5 +1,5 @@
 name: figma-linux
-version: '0.7.0'
+version: '0.7.1'
 summary: Unofficial Figma desktop app for Linux platform
 description: |
   Figma is the first interface design tool based in the browser,

src/main/Fonts.ts

@@ -1,3 +1,4 @@
+import * as fs from "fs";
 import { Fonts, getFonts } from "figma-linux-rust-binding";
 
 class Fonts {
@@ -9,6 +10,10 @@ class Fonts {
         resolve(fonts);
       });
     });
+
+  public static getFontFile = async (path: string): Promise<Buffer> => {
+    return fs.promises.readFile(path);
+  };
 }
 
 export default Fonts;

src/main/window/Tabs.ts

@@ -1,11 +1,8 @@
 import * as E from "electron";
 import * as path from "path";
 
-import { DEFAULT_SETTINGS } from "Const";
 import { isDev } from "Utils/Common";
-import Fonts from "../Fonts";
 import { storage } from "../Storage";
-import { logger } from "../Logger";
 import WindowManager from "./WindowManager";
 
 export default class Tabs {
@@ -43,8 +40,6 @@ export default class Tabs {
     tab.setBounds(rect);
     tab.webContents.loadURL(url);
     tab.webContents.on("dom-ready", () => {
-      let dirs = storage.get().app.fontDirs;
-
       const currentThemeId = storage.get().theme.currentTheme;
       if (currentThemeId !== "0") {
         const wm = WindowManager.instance;
@@ -54,15 +49,6 @@ export default class Tabs {
           tab.webContents.send("themes-change", foundTheme);
         }
       }
-
-      if (!dirs) {
-        dirs = DEFAULT_SETTINGS.app.fontDirs;
-      }
-      Fonts.getFonts(dirs)
-        .catch(err => logger.error(`Failed to load local fonts, error: ${err}`))
-        .then(fonts => {
-          tab.webContents.send("updateFonts", fonts);
-        });
     });
 
     isDev && tab.webContents.toggleDevTools();

src/main/window/WindowManager.ts

@@ -3,6 +3,7 @@ import * as E from "electron";
 import * as url from "url";
 
 import Tabs from "./Tabs";
+import Fonts from "../Fonts";
 import { storage } from "../Storage";
 import { logger } from "../Logger";
 import MenuState from "../MenuState";
@@ -422,6 +423,38 @@ class WindowManager {
       }
       logger.debug("Sync themes end");
     });
+    E.ipcMain.on("set-clipboard-data", (event, data) => {
+      const format = data.format;
+      const buffer = Buffer.from(data.data);
+
+      if (["image/jpeg", "image/png"].indexOf(format) !== -1) {
+        E.clipboard.writeImage(E.nativeImage.createFromBuffer(buffer));
+      } else if (format === "image/svg+xml") {
+        E.clipboard.writeText(buffer.toString());
+      } else if (format === "application/pdf") {
+        E.clipboard.writeBuffer("Portable Document Format", buffer);
+      } else {
+        E.clipboard.writeBuffer(format, buffer);
+      }
+    });
+    E.ipcMain.handle("get-fonts", async () => {
+      let dirs = storage.get().app.fontDirs;
+
+      if (!dirs) {
+        dirs = Const.DEFAULT_SETTINGS.app.fontDirs;
+      }
+
+      return Fonts.getFonts(dirs);
+    });
+    E.ipcMain.handle("get-font-file", async (event, data) => {
+      const file = await Fonts.getFontFile(data.path);
+
+      if (file && file.byteLength > 0) {
+        return file;
+      }
+
+      return null;
+    });
 
     E.app.on("toggle-current-tab-devtools", () => {
       toggleDetachedDevTools(this.lastFocusedTab);

src/middleware/webBinding.ts

@@ -84,14 +84,14 @@ const onWebMessage = (event: MessageEvent) => {
   try {
     resultPromise = msg.name && publicAPI && publicAPI[msg.name](msg.args);
   } catch (e) {
-    console.error("onWebMessage, err: ", e);
+    console.error("onWebMessage, err: ", msg.name, e);
     throw e;
   } finally {
     if (msg.promiseID != null) {
       if (resultPromise instanceof Promise) {
         resultPromise
           .then(result => {
-            webPort.postMessage({ result: result.data, promiseID: msg.promiseID }, result.transferList);
+            webPort.postMessage({ result: result.data, promiseID: msg.promiseID });
           })
           .catch(error => {
             const errorString = (error && error.name) || "Promise error";
@@ -184,7 +184,7 @@ const initWebApi = (props: IntiApiOptions) => {
       return new Promise((resolve, reject) => {
         const id = nextPromiseID++;
         pendingPromises.set(id, { resolve, reject });
-        channel.port1.postMessage({ name, args, promiseID: id }, transferList);
+        channel.port1.postMessage({ name, args, promiseID: id });
       });
     },
     setMessageHandler: function(handler: () => void): void {
@@ -206,7 +206,7 @@ const initWebApi = (props: IntiApiOptions) => {
         if ("result" in msg) {
           pendingPromise.resolve(msg.result);
         } else {
-          sendMsgToMain("log-error", msg.error);
+          console.error(msg.error);
           pendingPromise.reject(msg.error);
         }
       }
@@ -295,10 +295,6 @@ const publicAPI: any = {
     console.log("unimplemented setUser, args: ", args);
   },
 
-  async getFonts() {
-    return { data: await fontMapPromise };
-  },
-
   newFile(args: any) {
     sendMsgToMain("newFile", args.info);
   },
@@ -389,42 +385,15 @@ const publicAPI: any = {
     return { data: isOpened };
   },
 
-  getFontFile(args: any) {
-    return new Promise((resolve, reject) => {
-      const fontPath = args.path;
-
-      if (!fontMap) {
-        sendMsgToMain("log-error", "No fonts");
-        reject(new Error("No fonts"));
-        return;
-      }
-
-      const faces = fontMap[fontPath];
-      if (!faces || faces.length === 0) {
-        sendMsgToMain("log-error", "Invalid path: ", fontPath);
-        reject(new Error("Invalid path"));
-        return;
-      }
-
-      let postScriptName = faces[0].postscript;
-      try {
-        postScriptName = args.postscript;
-      } catch (ex) {}
-
-      fs.readFile(fontPath, (err, data) => {
-        if (err) {
-          reject(err);
-          return;
-        }
+  async getFonts(args: WebApi.GetFonts) {
+    const fonts = await E.ipcRenderer.invoke("get-fonts");
+    return { data: fonts };
+  },
 
-        if (data.byteLength > 0) {
-          resolve({ data: data.buffer, transferList: [data.buffer] });
-          return;
-        }
+  async getFontFile(args: WebApi.GetFontFile) {
+    const fontBuffer = await E.ipcRenderer.invoke("get-font-file", args);
 
-        reject(new Error("No data"));
-      });
-    });
+    return { data: fontBuffer, transferList: [fontBuffer] };
   },
 
   getClipboardData(args: any) {
@@ -481,19 +450,8 @@ const publicAPI: any = {
     });
   },
 
-  setClipboardData(args: any) {
-    const format = args.format;
-    const data = Buffer.from(args.data);
-
-    if (["image/jpeg", "image/png"].indexOf(format) !== -1) {
-      E.clipboard.writeImage(E.remote.nativeImage.createFromBuffer(data));
-    } else if (format === "image/svg+xml") {
-      E.clipboard.writeText(data.toString());
-    } else if (format === "application/pdf") {
-      E.clipboard.writeBuffer("Portable Document Format", data);
-    } else {
-      E.clipboard.writeBuffer(format, data);
-    }
+  setClipboardData(args: WebApi.SetClipboardData) {
+    E.ipcRenderer.send("set-clipboard-data", args);
   },
 
   async writeFiles(args: WebApi.WriteFiles) {
@@ -506,7 +464,7 @@ const init = (fileBrowser: boolean): void => {
     "message",
     event => {
       webPort = event.ports[0];
-      console.log(`window message, webPort: `, webPort);
+      console.log(`window message, webPort: `, webPort, event.data);
       webPort && (webPort.onmessage = onWebMessage);
     },
     { once: true },
@@ -517,8 +475,6 @@ const init = (fileBrowser: boolean): void => {
     fileBrowser: fileBrowser,
   };
 
-  console.log("init(): window.parent.document: ", window.parent.document.body);
-
   initWebBindings();
 
   E.webFrame.executeJavaScript(`(${initWebApi.toString()})(${JSON.stringify(initWebOptions)})`);

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-linux",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Figma is the first interface design tool based in the browser, making it easier for teams to create software. Join as in Telegram: https://t.me/figma_linux",
   "main": "main/main.js",
   "repository": "git@github.com:ChugunovRoman/figma-linux.git",

src/renderer/components/Tabs/index.tsx

@@ -30,7 +30,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
 
     const tabs = toJS(this.props.tabs.tabs);
     const currentTabId: number | undefined = toJS(this.props.tabs.current);
-    const currentTabIndex: number = tabs.findIndex(t => t.id === id);
+    const currentTabIndex: number = tabs.findIndex((t: any) => t.id === id);
 
     E.ipcRenderer.send("closeTab", id);
 
@@ -160,6 +160,10 @@ class Tabs extends React.Component<TabsProps, unknown> {
       return;
     }
 
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+
     const w = E.remote.getCurrentWindow();
     const windowBounds = w.getBounds();