functionalities improvements & bug fixes

Author: hiroyukinuri

brandfetch.sketchplugin/Contents/Sketch/__open.js

@@ -10,16 +10,16 @@
   "commands": [
     {
       "name": "Open Brandfetch",
-      "identifier": "open-brandfetch",
+      "identifier": "brandfetch",
       "script": "__open.js",
       "shortcut": "alt cmd b",
-      "handler": "openBrandfetch"
+      "handler": "open"
     }
   ],
   "menu": {
     "title": "Brandfetch",
     "items": [
-      "open-brandfetch"
+      "brandfetch"
     ]
   },
   "identifier": "Brandfetch",

brandfetch.sketchplugin/Contents/Sketch/__open.js.map

@@ -22,9 +22,6 @@
     "@skpm/builder": "^0.9.5"
   },
   "dependencies": {
-    "axios": "^1.6.8",
-    "core-js": "^3.37.0",
-    "regenerator-runtime": "^0.14.1",
     "sketch-module-web-view": "^3.5.1"
   },
   "description": "Brandfetch is the home for the world's brands. Pull the latest logos, colors, fonts and more directly into Sketch.",

brandfetch.sketchplugin/Contents/Sketch/manifest.json

@@ -1,7 +1,7 @@
-const dom = require("sketch/dom");
-const sketch = require("sketch");
+import dom from "sketch/dom";
+import sketch from "sketch";
 
-const handleColor = ({ hexColor }) => {
+export const handleColor = ({ hexColor }) => {
   // Get Document, from document get page & layers.
   const document = sketch.getSelectedDocument();
   const selection = document.selectedLayers;
@@ -25,5 +25,3 @@ const handleColor = ({ hexColor }) => {
     sketch.UI.message(`Copied ${hexColor} to clipboard.`);
   }
 };
-
-module.exports = { handleColor };

my-plugin/.gitignore

@@ -0,0 +1,73 @@
+import sketch from "sketch";
+
+import { handleSVG } from "./utils.js";
+
+const allowedFormats = ["jpg", "jpeg", "png", "gif", "svg", "webp"];
+
+export const handleFile = async ({ name, formats, currentFormat, type }) => {
+  console.log(name, formats, currentFormat, type);
+
+  // Check if the file is an image.
+  if (!allowedFormats.includes(currentFormat)) {
+    sketch.UI.message(
+      `Could not load ${currentFormat} file. Please make sure the format is supported.`
+    );
+    return;
+  }
+
+  const file = formats.find((file) => file.format === currentFormat);
+
+  // Get Document, from document get page & layers.
+  const document = sketch.getSelectedDocument();
+  const selection = document.selectedLayers;
+
+  if (file.format === "svg") {
+    fetch(file.src)
+      .then((response) => response.text())
+      .then((content) => handleSVG({ name, content }))
+      .catch((err) => {
+        console.log(err);
+        sketch.UI.message(`Something went wrong with this file.`);
+      });
+
+    if (!selection.isEmpty) {
+      sketch.UI.message(`SVG files cannot be inserted into shapes.`);
+    }
+  }
+
+  if (file.format !== "svg") {
+    if (!selection.isEmpty) {
+      selection.forEach((layer) => {
+        layer.style.fills = [
+          {
+            fillType: "Pattern",
+            pattern: {
+              image: NSURL.URLWithString(encodeURI(file.src)),
+              patternType: type,
+            },
+          },
+        ];
+
+        layer.style.borders = [{ enabled: false }];
+      });
+    } else {
+      const canvasView = context.document.contentDrawView();
+      const center = canvasView.viewCenterInAbsoluteCoordinatesForViewPort(
+        canvasView.viewPort()
+      );
+
+      const width = 350;
+      const height = (file.height / file.width) * width;
+
+      const x = center.x - width / 2;
+      const y = center.y - height / 2;
+
+      new sketch.Image({
+        name: name,
+        image: NSURL.URLWithString(encodeURI(file.src)),
+        frame: { x, y, width, height },
+        parent: sketch.getSelectedDocument().selectedPage,
+      });
+    }
+  }
+};

my-plugin/README.md

@@ -0,0 +1,48 @@
+import dom from "sketch/dom";
+
+const parentOffsetInArtboard = (layer) => {
+  var offset = { x: 0, y: 0 };
+  var parent = layer.parent;
+  while (parent.name && parent.type !== "Artboard") {
+    offset.x += parent.frame.x;
+    offset.y += parent.frame.y;
+    parent = parent.parent;
+  }
+  return offset;
+};
+
+const positionInArtboard = (layer, x, y, w, h) => {
+  var parentOffset = parentOffsetInArtboard(layer);
+  var newFrame = new dom.Rectangle(layer.frame);
+  newFrame.x = x - parentOffset.x;
+  newFrame.y = y - parentOffset.y;
+  newFrame.width = w;
+  newFrame.height = h;
+  layer.frame = newFrame;
+};
+
+export const handleSVG = ({ name, content }) => {
+  const svgString = NSString.stringWithString(content);
+  const svgData = svgString.dataUsingEncoding(NSUTF8StringEncoding);
+
+  const svgImporter = MSSVGImporter.svgImporter();
+  svgImporter.prepareToImportFromData(svgData);
+
+  const svgLayer = svgImporter.importAsLayer();
+  svgLayer.setName(name);
+
+  context.document.currentPage().addLayers([svgLayer]);
+  const layer = dom.getSelectedDocument().getLayersNamed(name).pop();
+  const canvasView = context.document.contentDrawView();
+  const center = canvasView.viewCenterInAbsoluteCoordinatesForViewPort(
+    canvasView.viewPort()
+  );
+
+  const width = 220;
+  const height = (layer.frame.height / layer.frame.width) * width;
+
+  const x = center.x - width / 2;
+  const y = center.y - height / 2;
+
+  positionInArtboard(layer, x, y, width, height);
+};

my-plugin/assets/icon.png

@@ -1,6 +1,6 @@
-const sketch = require("sketch");
+import sketch from "sketch";
 
-const handleFont = ({ fontFamily }) => {
+export const handleFont = ({ fontFamily }) => {
   // Get Document, from document get page & layers.
   const document = sketch.getSelectedDocument();
   const selection = document.selectedLayers;
@@ -29,5 +29,3 @@ const handleFont = ({ fontFamily }) => {
     sketch.UI.message(`Copied ${fontFamily} to clipboard.`);
   }
 };
-
-module.exports = { handleFont };