Any examples on usage of the Geometry API to create a single Shape / model with multiple paths?

[sunilkpai]

Introduction

Hi, I would like to create a shape / stencil with ports that uses the Geometry API defined here: https://resources.jointjs.com/docs/jointjs/v4.0/geometry.html.

As an example, I would like to create a single shape that contains two paths. with ports defined at the input and output of those paths. Could anyone provide assistance on roughly how this could be achieved? For a simple example, maybe two lines with input ports on the left and output ports on the right but as a single shape / model?

Thanks!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

You don't need the Geometry library for that. You need a basic knowledge of SVG.

Here's our tutorial on custom elements.
Here are a few examples of custom shapes: JSFiddle

[sunilkpai]

I understand for this specific thing I don't need the Geometry API, but I may want to leverage that for some more complex shapes in the future. I just was hoping for an example of how to build an SVG using that API.

The custom elements tutorial has some variations on the rectangle, but I was hoping for some more exotic examples. It would really help if you could add an example where you build multiple bezier paths embedded in a single element (or even within a rectangle).

[kumilingus]

Please check SVG Path if you want to render bezier curves.

Note that the example I have shared shows how to use bezier curves tool (see Document shape).

[sunilkpai]

I see that, thanks! But what if I want multiple paths inside the rectangle? This one is on the boundary.

[sunilkpai]

Also I have tried to use the SVG markup thing in the past, but have been struggling with a "DOMParser is not defined" error, which is why I've been looking for other ways. I would LOVE to be able to do this directly via SVG though.
Context: I'm relatively inexperienced with Node/Javascript.

Edit: I realized that the reason this error occurred was because I am exporting from a svelte lib component rather than defining it directly in routes. I can do SVG markup based elements now!

[sunilkpai]

@kumilingus one question relating to Svelte + JointJS. How do you recommend defining these custom SVG shapes if I want to define these things in a separate file from App.svelte / +page.svelte? I'm new to Svelte as well!

[kumilingus]

I know very little about Svelte. You can try asking them.

Here's an example of a shape markup being defined in a separate file: https://github.com/clientIO/joint/tree/master/packages/joint-shapes-general