Skip to main content
Question

Importing Paper.js into Plugin

  • October 27, 2022
  • 0 replies
  • 787 views

Jan_Figura

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?

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings