Add additional text to pn.Transition

This issue has been tracked since 2021-12-14.

Hey guys,
I am trying to add conditions in Form of text to the standard pn.Transition. While searching for inspiration i found demo.List from @kumilingus, a custom Element which pretty much does what i need but in a slightly different way. (
I would love to use it right away, but i am hesitating because i would need to refactor my whole application which is based on the architecture of a pn.Transition.

Is there any way i can extend pn.Transition in such a way that the base architecture is kept but I am still able to add these list-items or simply some text inside the transition-rectangle delimited by new lines? Also i don't need the List Items to be connectable via Links, it should just be some kind of text, maybe with a button to delete the item in a quick manner.

Any help is appreciated.
Thanks in advance!

kumilingus wrote this answer on 2021-12-14

The ports can be added to an arbitrary element without the need of changing anything.
You can add the ports from the demo to the pn.Transition if needed.
You can define a new pn.Transition element class (overriding the existing one) having the same markup and selectors and add extra stuff from the demo.

Since the transition shape is very simple (just a rect and label) and pretty old I do suggest refactoring the application by creating a custom shape that follows the tutorial. e.g using the one from the demo. Avoid using XML string markup, scalable / rotatable groups, and unnecessary ref selectors. As these are not good for the performance.

LordHeImchen wrote this answer on 2021-12-15

Thank you for the hints, highly appreciate them. I chose to extend the pn.Transition class using the code of your demo inside class customTransition extends { ... }, which worked like a charm.

Unfortunately i am getting an error when trying to download my graph as a JSON-file. To be precise it is thrown in graph.toJSON() function. Do i need to include a setter or something else to make this work again? I assume this is caused by using my customTransition inside the graph. The error reads as follows:

Do you know how i might fix this?

kumilingus wrote this answer on 2021-12-15

Can you share the code?

LordHeImchen wrote this answer on 2021-12-15

Sure, you can have a look at the code right here.
The file i am mainly working with is located in /src/widget.ts.

I think the most interesting parts are the downloadJSON function (which worked before adding the customTransition) as well as the customTransition itself. I tried disabling toggleAddPortButton but then the same error is thrown two lines later in resizeToFitPorts when this.prop(['size', 'height'], HEADER_HEIGHT + (LIST_ITEM_HEIGHT + LIST_ITEM_GAP) * length + PADDING_L); is called...

kumilingus wrote this answer on 2021-12-15

I am having difficulties installing pip on M1 Mac.

By looking at your code this should be the cause of the issue:

// It is not possible to set an attribute inside of the `defaults()` method.
// And that is what `resizeToFitPorts()` does.
size: { width: LIST_ITEM_WIDTH + 4, height: this.resizeToFitPorts() }

Use this instead:

// The height will be correctly set after initialization.
size: { width: LIST_ITEM_WIDTH + 4, height: 0 }
LordHeImchen wrote this answer on 2021-12-15

Oh, didn't know the M1s have issues with pip! Maybe i should reconsider buying one...
Anyways, you're a legend! This fixed the issue right away, thanks!

One more thing, I am trying to get the links to the background as they are covering the labels of Places or Transitions sometimes. Using .toBack({deep: true}) doesn't seem to work. Do i need to initialise the z-index in a certain place as well? Because i tried to initialise it inside the .connection part of the link but it didn't help:
attrs { ..., ".connection": { ..., "z": 0 } }

kumilingus wrote this answer on 2021-12-16

z attribute is a top-level attribute (same as size, position, attrs). Note that while HTML knows z-index property, SVG does not. When the z attribute is changed, JointJS change the order of the elements in the DOM.

const link = new joint.shapes.standard.Link({
  z: -1,
  attrs: { line: { stroke: 'green' }}
LordHeImchen wrote this answer on 2021-12-16

That totally makes sense.
Thank you very much, highly appreciate your support and engagement in this library!

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51


Issue Title Created Date Updated Date