Hey everyone,
hope you guys can help me.
What I’m trying to do:
I’m trying to build a plugin calculating the area of vector layers.
At first, I tried to come up with some code to do it on my own, but gave up after a short while. I found the paper.js library instead, which can conveniently do that for me. The problem is, I just don’t get it to work.
Prerequisites
I’m working with the plugin template for react/webpack.
I installed the paper.js library via npm install paper
What I’ve already tried:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './ui.css';
import * as Paper from 'paper';
function App() {
const calculateArea = () => {
const pathData = 'M 50.5 0 L 0 92 L 73.5 110.5 Z';
const compPath = new Paper.CompoundPath(pathData);
const area = Math.abs(Math.round(compPath.area));
return area;
};
return (
<main>
<h1>Area</h1>
<p>{calculateArea()}</p>
</main>
);
}
ReactDOM.render(<App />, document.getElementById('react-page'));
I can build the project with no problem, but when starting the plugin in figma I get nothing. The plugin window opens, but is empty. And the console stays clear as it can be.
I also tried importing paper.js in the code.ts
file:
import * as Paper from 'paper';
figma.showUI(__html__, { themeColors: true, height: 162 });
const pathData = 'M 50.5 0 L 0 92 L 73.5 110.5 Z';
const compPath = new Paper.CompoundPath(pathData);
const area = Math.abs(Math.round(compPath.area));
console.log(area);
But when I do that, I get the following error and the plugin won’t event start:
SyntaxError: possible import expression rejected around line 2878
Does anyone of you has an idea on how to resolve this?