How to allow users to add ports at any position on a custom element in JointJS?

[omoghadasi]

Introduction

Body:

Hello,

I am working on a custom element in JointJS and I want to allow the users to add ports at any position they like on the element. My goal is to enable users to dynamically add ports by specifying the position using x and y coordinates (absolute position).

I have already created a custom element, but I am struggling with how to allow users to add ports anywhere on the element.

Here’s a simplified example of how I am trying to add a port:

import { dia } from "@jointjs/core";

// Create custom element
const myElement = new dia.Element({
  size: { width: 160, height: 300 },
  attrs: {
    body: {
      fill: "#fff",
      stroke: "#000",
    },
  },
});

// Trying to add a port at a specific position
myElement.addPort({
  id: "inlet1",
  position: {
    name: "absolute",  // Absolute positioning
    args: { x: 50, y: 100 },  // Position of the port
  },
  attrs: {
    portBody: {
      r: 6,
      fill: "#3498db",
      stroke: "#fff",
      strokeWidth: 2,
    },
    portLabel: {
      text: "Input",
      fontSize: 10,
      fill: "#333",
    },
  },
});

‍‍‍‍‍‍‍‍What I want is for users to be able to add a port wherever they want on the element, not just the predefined positions (like left, right, top, bottom). I also want to ensure that when they add a port, it is placed at the specified x, y coordinates relative to the element.

Does anyone know how to achieve this?

I am using JointJS for building this functionality and the element is a custom one, not a predefined shape.

Any help or guidance would be greatly appreciated!

Thanks in advance!

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS

[zbynekstara]

Hi omoghadasi,

In the current version of JointJS, individual ports are positioned by providing args directly inside the port object (no position object). So in your case:

myElement.addPort({
  id: "inlet1",
  args: { x: 50, y: 100 },
  attrs: {
    portBody: {
      r: 6,
      fill: "#3498db",
      stroke: "#fff",
      strokeWidth: 2,
    },
    portLabel: {
      text: "Input",
      fontSize: 10,
      fill: "#333",
    },
  },
});

We are planning to change this behavior in a future version of JointJS in order to make it work as you thought (args inside position object), to bring it in line with how port labels and port groups work.

[omoghadasi]

Here is my full custom element code so far. It works well in terms of rendering and basic structure. Now what I need is to make it possible to dynamically add ports at any position (using x and y coordinates) — not just predefined groups or positions like left or right.

My main goal:

I want to allow users to add ports by clicking anywhere on the element, and based on that click (x/y position), I want to add a port at that exact location.

Here is the custom element definition:

import { dia, util } from "@joint/core";

export default class LiquidTank extends dia.Element {
  defaults() {
    return {
      ...super.defaults,
      type: "LiquidTank",
      size: { width: 160, height: 300 },
      attrs: {
        root: { magnetSelector: "body" },
        body: {
          stroke: "gray",
          strokeWidth: 4,
          x: 0,
          y: 0,
          width: "calc(w)",
          height: "calc(h)",
          rx: 120,
          ry: 10,
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "gray" },
              { offset: "30%", color: "white" },
              { offset: "70%", color: "white" },
              { offset: "100%", color: "gray" },
            ],
          },
        },
        label: {
          text: "Tank 1",
          textAnchor: "middle",
          textVerticalAnchor: "top",
          x: "calc(w / 2)",
          y: "calc(h + 10)",
          fontSize: 14,
          fontFamily: "sans-serif",
          fill: "#350100",
        },
      },
    };
  }

  preinitialize() {
    this.markup = util.svg/* xml */ `
      <rect @selector="body"/>
      <text @selector="label" />
    `;
    this.portMarkup = [
      { tagName: "circle", selector: "portBody" },
      { tagName: "text", selector: "portLabel" },
    ];
  }
}

I tried adding a port like this:

element.addPort({
  id: "my-port",
  position: {
    name: "absolute",
    args: { x: 40, y: 100 },
  },
  attrs: {
    portBody: {
      r: 6,
      fill: "#3498db",
      stroke: "#fff",
      strokeWidth: 2,
    },
    portLabel: {
      text: "Port",
      fontSize: 10,
      fill: "#333",
    },
  },
});

But no matter what position I pass in args, the port always appears in the same place (usually the left).

What am I missing to make these positions actually apply?

Would appreciate any guidance. 🙏

[kumilingus]

The port position is set per group. You need to define the port group first.

import { dia, util } from "@joint/core";

export default class LiquidTank extends dia.Element {
  defaults() {
    return {
      ...super.defaults,
      type: "LiquidTank",
      size: { width: 160, height: 300 },
      ports: {
        groups: {
            'my-group': {
               position: { name: 'absolute' }
            }
        }
       },
      attrs: {
        root: { magnetSelector: "body" },
        body: {
          stroke: "gray",
          strokeWidth: 4,
          x: 0,
          y: 0,
          width: "calc(w)",
          height: "calc(h)",
          rx: 120,
          ry: 10,
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "gray" },
              { offset: "30%", color: "white" },
              { offset: "70%", color: "white" },
              { offset: "100%", color: "gray" },
            ],
          },
        },
        label: {
          text: "Tank 1",
          textAnchor: "middle",
          textVerticalAnchor: "top",
          x: "calc(w / 2)",
          y: "calc(h + 10)",
          fontSize: 14,
          fontFamily: "sans-serif",
          fill: "#350100",
        },
      },
    };
  }

  preinitialize() {
    this.markup = util.svg/* xml */ `
      <rect @selector="body"/>
      <text @selector="label" />
    `;
    this.portMarkup = [
      { tagName: "circle", selector: "portBody" },
      { tagName: "text", selector: "portLabel" },
    ];
  }
}

The you can add a port to the group and adjust its position via args.

element.addPort({
  id: "my-port",
  group: 'my-group',
  args: { x: 40, y: 100 },
  attrs: {
    portBody: {
      r: 6,
      fill: "#3498db",
      stroke: "#fff",
      strokeWidth: 2,
    },
    portLabel: {
      text: "Port",
      fontSize: 10,
      fill: "#333",
    },
  },
});

[omoghadasi]

When I comment out the group and args, the port shows up on the left side by default.

But when I set the group and provide args for absolute positioning, the port doesn’t show up at all.

I'm trying to let the user add a port anywhere they want by specifying exact x, y coordinates.
The element is a custom element I created, and I want to make sure ports can be added at any position dynamically.

Here’s my current code — how can I fix it so that adding ports at custom positions works as expected?

import { dia, util } from "@joint/core";

export default class LiquidTank extends dia.Element {
  defaults() {
    return {
      ...super.defaults,
      type: "LiquidTank",
      size: { width: 160, height: 300 },
      rotatable: true,
      ports: {
        groups: {
          'my-group': {
            position: { name: 'absolute' }
          }
        }
      },
      attrs: {
        root: { magnetSelector: "body" },
        body: {
          stroke: "gray",
          strokeWidth: 4,
          x: 0,
          y: 0,
          width: "calc(w)",
          height: "calc(h)",
          rx: 120,
          ry: 10,
          fill: {
            type: "linearGradient",
            stops: [
              { offset: "0%", color: "gray" },
              { offset: "30%", color: "white" },
              { offset: "70%", color: "white" },
              { offset: "100%", color: "gray" },
            ],
          },
        },
        label: {
          text: "Tank 1",
          textAnchor: "middle",
          textVerticalAnchor: "top",
          x: "calc(w / 2)",
          y: "calc(h + 10)",
          fontSize: 14,
          fontFamily: "sans-serif",
          fill: "#350100",
        },
      },
    };
  }

  preinitialize() {
    this.markup = util.svg/* xml */ `
      <rect @selector="body"/>
      <text @selector="label" />
    `;
    this.portMarkup = [
      { tagName: "circle", selector: "portBody" },
      { tagName: "text", selector: "portLabel" },
    ];
  }

  get level() {
    return this.get("level") || 0;
  }

  set level(level) {
    const newLevel = Math.max(0, Math.min(100, level));
    this.set("level", newLevel);
  }
}

  tank1.addPort({
    id: "my-port",
    group: "my-group",
    args: { x: 40, y: 100 },
    attrs: {
      portBody: {
        r: 6,
        fill: "#3498db",
        stroke: "#fff",
        strokeWidth: 2,
      },
      portLabel: {
        text: "Port",
        fontSize: 10,
        fill: "#333",
      },
    },
  });

[kumilingus]

The code that you have shared works as expected:

class LiquidTank extends joint.dia.Element {
    defaults() {
      return {
        ...super.defaults,
        type: "LiquidTank",
        size: { width: 160, height: 300 },
        rotatable: true,
        ports: {
          groups: {
            'my-group': {
              position: { name: 'absolute' }
            }
          }
        },
        attrs: {
          root: { magnetSelector: "body" },
          body: {
            stroke: "gray",
            strokeWidth: 4,
            x: 0,
            y: 0,
            width: "calc(w)",
            height: "calc(h)",
            rx: 120,
            ry: 10,
            fill: {
              type: "linearGradient",
              stops: [
                { offset: "0%", color: "gray" },
                { offset: "30%", color: "white" },
                { offset: "70%", color: "white" },
                { offset: "100%", color: "gray" },
              ],
            },
          },
          label: {
            text: "Tank 1",
            textAnchor: "middle",
            textVerticalAnchor: "top",
            x: "calc(w / 2)",
            y: "calc(h + 10)",
            fontSize: 14,
            fontFamily: "sans-serif",
            fill: "#350100",
          },
        },
      };
    }

    preinitialize() {
      this.markup = joint.util.svg/* xml */ `
        <rect @selector="body"/>
        <text @selector="label" />
      `;
      this.portMarkup = [
        { tagName: "circle", selector: "portBody" },
        { tagName: "text", selector: "portLabel" },
      ];
    }

    get level() {
      return this.get("level") || 0;
    }

    set level(level) {
      const newLevel = Math.max(0, Math.min(100, level));
      this.set("level", newLevel);
    }
  }

  const tank1 = new LiquidTank();
  tank1.addTo(graph)

    tank1.addPort({
      id: "my-port",
      group: "my-group",
      args: { x: 40, y: 100 },
      attrs: {
        portBody: {
          r: 6,
          fill: "#3498db",
          stroke: "#fff",
          strokeWidth: 2,
        },
        portLabel: {
          text: "Port",
          fontSize: 10,
          fill: "#333",
        },
      },
    });

[omoghadasi]

I'm working on a small test project and trying to understand how dynamic port positioning works in JointJS.
Would you mind taking a quick look at it and letting me know why it's not working as expected?

I'd really appreciate any guidance or suggestions.

repo link

[kumilingus]

I don't see a single use of addPort() in this repository.