Links detach from nodes when updating dynamic markup with selectors

[vnemftnsska2]

Introduction

Issue Description
Environment

• JointJS Plus version: 4.2.1
• Framework: Vue 3 (Composition API)
• Router: Manhattan

Problem Summary
I'm experiencing two critical issues with my bot builder application:

• Node selection is unreliable - Clicking on nodes sometimes fails to select them
• Links detach when target node is updated - After connecting a link to a selector-based port (e.g., item0, item1), adding or modifying items in the target node causes links to move away and disconnect

Visual Example

The links are initially connected correctly, but when I:

• Click "+ add intent" button on the Router node
• Click an existing intent item to edit it
• Add/remove fields on the Agent node
  The connected links move away from their anchor points and appear disconnected.

Current Implementation
Router Node with Dynamic Markup:

const calculateRouterLayout = (intents = []) => {
  const markup = [
    { tagName: 'rect', selector: 'body' },
    { tagName: 'image', selector: 'icon' },
    { tagName: 'text', selector: 'label' },
  ];
  
  // Dynamically add markup for each intent
  intents.forEach((intent, index) => {
    markup.push({ tagName: 'rect', selector: `item${index}` });
    markup.push({ tagName: 'text', selector: `itemText${index}` });
  });
  
  return { markup, attrs, width, height };
};

Updating Node When Intents Change:

const updateRouterNode = (element, options = { silent: true }) => {
  const routerData = localBotData.value.nodes.find(n => n.id === element.id);
  const layout = calculateRouterLayout(routerData?.intents || []);
  
  // This causes DOM regeneration and link detachment
  element.set('markup', layout.markup, options);
  element.set('attrs', layout.attrs, options);
  element.resize(layout.width, layout.height, options);
};

Link Creation with Selector:

const createLink = linkData => {
  const source = {
    id: linkData.sourceNodeId,
    anchor: { name: 'right', args: { dy: 0 } },
    connectionPoint: { name: 'boundary' },
  };
  
  if (linkData.sourcePort) {
    source.selector = linkData.sourcePort; // e.g., "item0", "item1"
  }
  
  return new shapes.standard.Link({
    id: linkData.id,
    source,
    target: { ... },
    router: { name: 'manhattan' },
  });
};

Paper Configuration:

const paperInstance = new dia.Paper({
  model: graphInstance,
  async: true,
  frozen: false,
  defaultAnchor: { name: 'perpendicular' },
  defaultConnectionPoint: { name: 'boundary' },
  // ... other settings
});

Highlighter Setup:

joint.highlighters.mask.add(elementView, 'body', 'selection-border', {
  padding: 2,
  attrs: {
    stroke: '#004c9d',
    'stroke-width': 2,
    'pointer-events': 'none', // Added to prevent interference
  },
});

What I've Tried

• ❌ Changed anchor types (perpendicular, right, left) - didn't work
• ❌ Added pointer-events: none to highlighter - partial improvement but links still detach
• ❌ Attempted to save and restore link data during markup change - links still disconnect
• ❌ Tried connectionStrategy: connectionStrategies.pinAbsolute + defaultConnectionPoint: { name: 'anchor' } - broke source connections
• ❌ Attempted embed pattern (making intents separate Elements) - caused complete UI failure

Root Cause Analysis
I believe the issue is that when element.set('markup', newMarkup) is called:

• The entire DOM structure is regenerated
• Old selector elements (item0, item1) are destroyed
• New selector elements are created with the same names
• Links lose their DOM references
• Links become disconnected or "move away"

Questions

• What is the recommended approach for handling dynamic markup where the number of selectors changes at runtime?
• Should I use the embed pattern instead? I noticed the TheoryOfChange demo uses fixed markup with embedded child elements, but my implementation attempt failed.
• Is there a way to preserve selector-based link connections when markup is regenerated?
• Could the node selection issue be related to the highlighter or z-index problems?

Expected Behavior

• Links should maintain their connections to selector-based ports when the node's markup is updated
• Node selection should work reliably on first click
• Adding/removing dynamic content (intents, fields) should not affect existing link connections

Any guidance would be greatly appreciated!

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS+

[kumilingus]

Node selection is unreliable - Clicking on nodes sometimes fails to select them

Try to add clickThreshold=10 paper option.

Links detach when target node is updated - After connecting a link to a selector-based port (e.g., item0, item1), adding or modifying items in the target node causes links to move away and disconnect

Please provide us with an example (feel free to clone this JSFiddle).

[vnemftnsska2]

Thanks!

[vnemftnsska2]

Issue
Link anchors don't work correctly when using selectors in JointJS.

Current Behavior

• Regular nodes (Start, Agent): anchor: { name: 'right' } and anchor: { name: 'left' } work correctly
• Router intent items (using selector): Anchors connect at bottom/top instead of right/left

Code Structure
Router Node Layout Generation:

export const calculateRouterLayout = (intents = []) => {
  const itemHeight = 28;
  const itemSpacing = 4;
  const headerHeight = 36;
  const padding = 8;

  // Markup - dynamically create intent items
  const markup = [
    { tagName: 'rect', selector: 'body' },
    { tagName: 'image', selector: 'icon' },
    { tagName: 'text', selector: 'label' },
  ];

  intents.forEach((intent, index) => {
    markup.push({ tagName: 'rect', selector: `item${index}` });
    markup.push({ tagName: 'text', selector: `itemText${index}` });
  });

  // Attrs - intent items styling
  const attrs = {
    body: { fill: '#20744a', stroke: '#20744a', strokeWidth: 2, rx: 8, ry: 8 },
    icon: { xlinkHref: routerIcon, width: 24, height: 24, x: 8, y: 8 },
    label: { text: 'Router', fill: '#ffffff', fontSize: 14, x: 43, y: 20 },
  };

  intents.forEach((intent, index) => {
    const itemY = headerHeight + padding + index * (itemHeight + itemSpacing);
    attrs[`item${index}`] = {
      ref: 'body',
      x: 8,
      y: itemY,
      width: 234,
      height: itemHeight,
      fill: '#ffffff',
      stroke: '#e5e7eb',
      strokeWidth: 1,
      rx: 4,
      ry: 4,
      magnet: true,
    };
    attrs[`itemText${index}`] = {
      text: intent.name,
      fill: '#333333',
      fontSize: 12,
      ref: `item${index}`,
      refX: 8,
      refY: '50%',
      pointerEvents: 'none',
    };
  });

  return { width: 250, height: totalHeight, markup, attrs };
};

Link Creation:

const createLink = linkData => {
  const source = {
    id: linkData.sourceNodeId,
    anchor: { name: 'right' },
    connectionPoint: { name: 'boundary' },
  };

  if (linkData.sourcePort) {
    source.selector = linkData.sourcePort; // "item0", "item1", etc.
  }

  const target = {
    id: linkData.targetNodeId,
    anchor: { name: 'left' },
    connectionPoint: { name: 'boundary' },
  };

  return new shapes.standard.Link({
    source,
    target,
    router: { name: 'manhattan', args: { startDirections: ['right'], endDirections: ['left'] } },
  });
};

Attempts
❌ Removed ref: 'body' → No change
❌ Used connectionPoint: { name: 'anchor' } → No change
❌ Tried Port system → z-index issues, elements not clickable
❌ Used anchor: { name: 'topRight', args: { dy: '50%' } } → Still connects at bottom
Question
How can I make anchors work correctly at the right-center of selector-based subelements (item0, item1) when links originate from them?

[vnemftnsska2]

[kumilingus]

Please provide us with an example (feel free to clone this JSFiddle).