FakeLine & Target (RGFakeLine + RGConnectTarget)

FakeLine is used when a line endpoint is not a normal graph node.

This is the core mechanism for connecting nodes to:

• custom elements wrapped by RGConnectTarget
• canvas-level connect targets
• HTML elements by id
• custom business objects via custom resolver

1. How FakeLine Differs from Normal Line

Normal line (RGLine):

• from and to must be node ids.

FakeLine (RGFakeLine):

• from and/or to can point to non-node targets.
• supports fromType and toType for endpoint type definition.
• does not participate in node layout arrangement like normal node-to-node structural lines.

2. Add and Read FakeLines

const fakeLine = {
  id: 'f1',
  from: 'node-a',
  to: 'target-element-1',
  text: 'A -> Target'
};

graphInstance.addFakeLines([fakeLine]);
const f1 = graphInstance.getFakeLineById('f1');

FakeLine update/remove uses regular line APIs with fake-line-specific methods for deletion:

graphInstance.updateLine('f1', { text: 'Updated FakeLine' });
graphInstance.removeFakeLineById('f1');

3. Use RGConnectTarget

Example (React style):

<RGConnectTarget targetId="target-element-1">
  <div style={{ width: '80px', height: '30px' }}>Connectable Target</div>
</RGConnectTarget>

When from/to points to this targetId, FakeLine can connect to that element.

4. Endpoint Type (fromType / toType)

Built-in scenarios include:

• normal node target
• node inner connect point
• canvas connect point
• HTML element id target

For custom object types, implement setFakeLineTargetRender.

5. Connect Any Custom Object with setFakeLineTargetRender

graphInstance.setFakeLineTargetRender((targetType, targetId, fakeLine) => {
  if (targetType === 'myGroup') {
    return {
      x: 200,
      y: 150,
      nodeShape: 0, // rect/circle enum value
      el_W: 100,
      el_H: 50
    };
  }
  return null;
});

The resolver returns geometric target info so engine can route/render the fake line.

6. Practical Notes

• Register custom fake target resolver before loading fake line data.
• Keep target ids stable; fake lines depend on target identity.
• FakeLine is ideal for editor UIs with panels, groups, lanes, or custom anchors.
• If target geometry cannot be resolved, the fake line cannot be rendered.

7. Next Reading

• Line Data
• Link Data
• Data Flow & CRUD
• State Management