Share your ideas! What JointJS or JointJS+ demos would you like us to create?

[kumilingus]

We post new demos every Wednesday, and while we’re full of ideas, your contribution would mean the world to us. Do you have a specific use case in mind or would you like to see some data expressed visually? Share your ideas and we’ll be happy to include them in our Demo Wednesday initiative, just as we’ve done with dozens of app demos that come from our customers and community members.

It’s simple, just follow these three steps:

1. Describe the use case/idea in the comment.
2. Provide the source of the data (if relevant).
3. Share a diagram that could serve as inspiration (optional).

And if you're looking for inspiration, check out the top 15 community-designed demo apps: https://www.jointjs.com/blog/15-community-designed-demo-apps.

We look forward to seeing your ideas! 😊

[bl-akonwie]

I love this puzzle demo

https://resources.jointjs.com/demos/puzzle

At this point, I'd like a more interesting puzzle instead of a common jigsaw.
The demo is currently splitting the original image into polygon pieces.
Instead of that, can we split the image into more of a blobby/wavy circle where all of them fit together to create a whole of the original image?

Thanks!

[kumilingus]

Thank you for reaching out! Is this an example of what you are looking for?

[eddhib]

is it possible to design a page or dashboard with widgets like Jira (reorder, resize, nested container, grid 12 columns layout) with Jointjs, if so ideally see a demo

[kumilingus]

Could please paste an image or a link?

[eddhib]

Hello,
there is a tool that does that https://gridstackjs.com/#demo,
will jointjs be able to respond to the same feature?

[kumilingus]

JointJS does not have any masonry layouts available. If there is an open source layout library that accepts the order of elements and their sizes and returns the positions of the elements, it would be possible to create a similar demo.

Please let me ask you a few questions:

• What would be the benefit of rendering the tiles in SVG as opposed to HTML containers with an SVG widgets inside?
• Why don't you use the gridstackjs library and e.g. put JointJS papers inside the tiles?

[igo]

I would like to see existing demo https://resources.jointjs.com/demos/sequence with more interactive features like how to add a new connection between actors.

[kumilingus]

Implemented as part of HoverConnect Tool Pull Request. Available in a couple of months in v3.6 (or right now on master branch).

[kumilingus]

It's available here now.

[vidhanbagdai]

My organization uses web to create BPMN 2.0 shapes and has started exploring the BPMN Visio export app provided by JointJS+ library. Although in the app provided in the trial version, we could see export for only basic shapes such as start, end, activity, sequence flow, etc. We would love to see a demo of export to some complicated shapes as well like Subprocess, pools and lanes, text annotations, etc.

[AlexMath23]

Hi,
We recognise that you can do a lot of customisation with the build in jointjs shapes / svg's.
But for our company's use case those were not enough for the dynamic elements that we want to show.
We now have React components that we render on the paper, and this works but it was/is a hassle to get it working properly.
=> using portals to place components into foreignObject svg's in our custom cells and making sure that the graph/paper and the components stay synced, + a bunch off little quirks we had to take care off. What would really improve our experience / serve our needs is first class component (react) support from the library it self. Maybe something like a jointjs-react fork could be possible in the future ( 4.0 and beyond) when jquery / lodash get cycled out ?. It would also greatly enhance customizability/look & feel if you could use your own components with the existing logic for selectbox,menu,tooltip,popup,... etc.

Love the library and would be awesome if this could be included.

Best regards,
Alex

[kumilingus]

Here is an early version of the @joint/react library: #2391
It's not a fork, JointJS is a dependency. Any and all feedback would be appreciated.

[AlexAtlas]

Very cool Roman !! , I'll dive a bit deeper in this PR if I find some time this week. I'm also looking forward to the 4.0 release !

[kumilingus]

Thanks @AlexAtlas , insight from someone experienced in React would be awesome!

[igo]

Looking at

    const paper = usePaper();
    const zoomIn = () => {
        if (!paper) return;
        const { sx, sy } = paper.scale();
        paper.scale(sx * 2, sy * 2);
    }

Using if (!paper) return; is not a good practice. You can also create more sophisticated hooks. Take a look for example at https://react-hook-form.com/docs/useform. You can create hooks like this:

import { usePaper, Paper } from 'joinjs/react';

const { paper, zoomIn, zoomOut, ...manyOtherFunctionsOrObjects } = usePaper(graph);

<button onClick={zoomIn}>Zoom in</button>
<Paper paper={paper} />

[kumilingus]

1. What is the good practice? Throw an exception?
2. It's not my intention to add functions here that are essentially just syntactic sugar for actual paper methods. It's meant to be a low-level component, so I don't see a use for it here (yet). But it is definitely something for higher-level components such as and useDiagram() hook (as mentioned in the README).

If you don't mind, please add your next comments directly to the PR

[dkchaitanya92]

Hi @kumilingus,

I want to have a communication between two different elements, where one element is present in container A and another element is present in container B.

Explanation (Each element will have different shape, Each element will have "in" and "out" ports as well, container will not have any ports):

1. Element1, Element2, Element3, Link1(Element1 to Element 2), Link2(Element 2 to Element 3) will be present in a container A.
2. Element4, Element5, Element6, Link3(Element 4 to Element 5), Link4(Element 5 to Element 6) will be present in a container B.
3. There should be a connection between container A and container B. Connection Link from Element 3 to Element 4.
4. I want to show text on the connection link which is shown between two containers as well.
5. If I minimize the container then want to load the image.

Reference - https://www.jointjs.com/demos/container.

Kindly provide the example for Typescript and React using JointJS.
(Graphical representation to be achieved dynamically with JSON input).

Thanks in advance.

[kumilingus]

Here's the DWDM demo. It's written in Open Source JointJS and Typescript.

1. JJ+ is a superset of JJ. That means that you can just replace JJ with JJ+ and everything will work.
2. To integrate the example with React please follow our tutorial.
3. To add a tree index on the left side please see the Diagram Index example (React version).
4. I can imagine adding the JJ+ plugin ui.Navigator, to allow users to quickly navigate through large circuits.

[MeAriJit]

@kumilingus Great demo! Helpful. Just wanted to know where did you get the Node assets svg images? Did you create on your own?

[kumilingus]

Thank you. They were free icons with a permissive license downloaded from an icons marketplace.

[MeAriJit]

Could you share me the details of the marketplace?

[kumilingus]

https://www.iconfinder.com/

[saravntbe]

Demo for rendering cells > 200 in canvas with better performance. Right now we tried setting async option, but it doesn't solve performance issue.

[kumilingus]

Here's a demo with 2000 cells: https://www.jointjs.com/demos/collapse-expand

[Habib2959]

Hello @kumilingus,
Can I create an organization chart like the image with joint js or joint js+? if yes, then may I get some insights?

[kumilingus]

Yes, you can. Use the layout.TreeLayout to layout only the elements forming the tree structure at the top (similarly what we did here). Then you can layout the rest of the children (with a layout of your choice) and position elements them under the middle of related branch.

We're happy to create an example of this if you are able to:

• provide us with an example data
• explain how such a diagram is used

[Habib2959]

Thank you for nthe response. I will provide a demo of this. This would be a pleasure if you create an example with that.

[Habib2959]

@kumilingus The chart will be similar to the image. If Joint js can serve our purpose, we will go for Joint JS+. Thank you.

[kumilingus]

Before we can write an example, we need to understand how the diagram is used and we need the data to be displayed. The image you shared unfortunately just adds more confusion.