Gravit Designer discussion

Plugin creation help

Same issue here plus sintax error. :frowning:
How can I fix this?

$ npm run gulp start

gravit-designer-plugin-starter@1.0.0 gulp /Users/huse/Documents/2018/gravit-designer-plugin2
gulp “start”

[21:30:38] Using gulpfile ~/Documents/2018/gravit-designer-plugin2/gulpfile.js
[21:30:38] Starting ‘start’…
[21:30:38] Finished ‘start’ after 15 ms
[2018-02-14T02:30:38.121Z] [electron-connect] [server] started electron process: 580
[2018-02-14T02:30:38.121Z] [electron-connect] [server] server created and listening on 30080
App threw an error during load
(function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { PK

SyntaxError: Invalid or unexpected token
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions…js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at loadApplicationPackage (/Users/huse/Documents/2018/gravit-designer-plugin2/node_modules/electron/dist/
at Object. (/Users/huse/Documents/2018/gravit-designer-plugin2/node_modules/electron/dist/
at Object. (/Users/huse/Documents/2018/gravit-designer-plugin2/node_modules/electron/dist/

Hi, thanks for reporting. NPM updated some functions on last updates, and it broke the build of the project. We’re looking into it and we’ll come back as soon as we find a solution for it.

The issue should be fixed by now. Update the project and reinstall the dependencies. Let me know if everything worked as planned. Thanks!

Thank you very much!
Gravit Designer started so I going to test the sample plug-ins. (I think is OK)
by the way this is the terminal output:

$ gulp start
[22:22:27] Using gulpfile ~/Documents/2018/gravit-designer-plugin3/gulpfile.js
[22:22:27] Starting ‘start’…
[22:22:27] Finished ‘start’ after 13 ms
[2018-02-15T03:22:27.519Z] [electron-connect] [server] started electron process: 710
[2018-02-15T03:22:27.519Z] [electron-connect] [server] server created and listening on 30080
2018-02-14 22:22:27.730 Electron[710:56994] *** WARNING: Textured window <AtomNSWindow: 0x7fc52f468f10> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow’s -titlebarAppearsTransparent=YES instead.

Thanks for the feedback. Your output seems to be OK. The warning message is related to Electron and shouldn’t keep designer from working as it should in any way.

1 Like

Hello again,

I was wondering how to get individual paths from a current document and info related to each path (x,y coordinates and the like).
I mean if I draw a shape with the pen I would like to access the <x,y> of each anchor point. If is a curve I would like to get access to the bezier control points data.

Thanks in advance.


you can accomplish that by iterating all pages of the document and, for each page, iterate over their children and filter only the objects that are actually path. Then, for each path, you can retrieve their anchor points, which contains all the information you need. A sample code would look like this:

gDesigner.getActiveDocument().getScene().iteratePages(function(page) {
    page.acceptChildren(function(child) {
        if (child instanceof GravitDesigner.framework.core.GPath) {
            for (var ap = child.getAnchorPoints().getFirstChild(); ap != null; ap = ap.getNext()){
                //ap = anchor point of the path
1 Like

Thanks Denner,

It worked but I got an issue, when is a new fresh object the anchor points <x,y> coordinates are “ok” but for a translated/scaled/rotated object the coordinates remain the same like local data (without the transformation matrix??).
How can I get the global position of each <x,y> anchor point?

Best regards,

Hi, you can use the element transformation to map a new point.
It would be something like this (improving the example I sent before):

var point = new GravitDesigner.framework.core.GPoint(ap.getProperty("x"), ap.getProperty("y"));
var transform = child.getTransform();
if (transform) {
     point = transform.mapPoint(point);

Let me know if you have more doubts.

1 Like

After many tests it worked like a charm! Thanks.

Now I was wondering:
-How to get the name of an object (what you can type in the layers panel)
-How to send text to the clipboard

Best regards.

Hi all,

I hope this is not the wrong place to ask: How can I actually publish a plugin. I used the plugin starter kit to write some kind of hello world plugin and would love to see the publishing/sharing workflow now.

Any hints pr points to navigate to?

Thanks! :slight_smile:

You can’t actually publish or use a plugin at the moment. But this is already on our roadmap and will come in a future version of Gravit Designer. We will have some kind of marketplace for plugins, where you also be able to search for plugins, manage installed plugins and so on.

1 Like

Awesome! Thanks for you infos. Is there any public roadmap?


For that, you can use element.getProperty("name");. If it returns null, it means the user didn’t specified a name for the element. Then, you can get the generic name of the element by calling element.getNodeNameTranslated().

Do you mean, copy the content of a text element? You can retrieve the plain text of a text element by calling element.getTLCore().getDocumentRange().plainText() to retrieve the entire text or element.getTLCore().selectedRange().plainText() to retrieve only the selected text of a element. Then, you can normally copy the text to the clipboard using default Javascript functions.

Let me know if you have further questions. Also, feel free to share your creation with other people, we would love to know what you’re creating with the plugin architecture :slight_smile:

1 Like

Hello Denner,

Thanks for your quick response.
About the clipboard thing I’ll try to elaborate a bit more: I mean, I got a string in a variable (i.e. var s = “hello clipboard”; ) and I want to send the content of that variable to the clipboard in order to use it in another application.
I regret to say I am not very “sawy” at js/html/web programming.


We don’t have a roadmap currently, but we are currently in the process of deciding where we want to go with future updates of Gravit Designer.

Hello Denner,

By the way, how can I “share” a plug-ing (officially speaking)?
I mean, is there a place to publish it?
How can I add a plug-in to the Gravit Designer app?

(In the end I couldn’t figure out how to add plain text to the clipboard)


Hi @huse, currently, there’s no way to add the plugin to the production app. In future, we plan to have a marketplace where people can publish their plugins and install automatically into Gravit Designer. About sharing the plugin, always feel free to upload your plugin in the forum or make a pull request to our repository into the folder examples/. We would love to see what you created.
About the clipboard, there are some useful threads on forums like StackOverflow that can help you achieving what you want. Like this one:

1 Like