Relation Graph

Fake Lines And Connect Targets (`RGFakeLine` / `RGConnectTarget`)

RGFakeLine is used when a line endpoint is not necessarily a normal node. It reuses normal line path, style, text, and arrow capabilities, but its endpoints can come from nodes, connection points inside nodes, canvas connection points, HTML elements, or your own business objects.

Core differences between normal lines and fake lines:

Comparison	Normal line `RGLine`	Fake line `RGFakeLine`
Endpoint source	`from/to` must be node ids	`from/to` can be node ids, connect target ids, or custom object ids
Normal `RGLink` generation	Yes	Usually not a normal `RGLink`; some fake lines between nodes/connection points can be converted internally into link-like analysis context
Layout relationship	Affects relationship networks and some layouts	Usually does not participate as a normal structural relationship in node layout
Typical use	Business relationship between nodes	Editor anchors, panel helper lines, node ports, canvas annotations, HTML element helper lines

1. Minimal FakeLine

graphInstance.addFakeLines([
  {
    id: 'fake-1',
    isFakeLine: true,
    from: 'node-a',
    fromType: RGInnerConnectTargetType.Node,
    to: 'port-1',
    toType: RGInnerConnectTargetType.NodePoint,
    text: 'Connects to port'
  }
]);

Required fields:

id: unique fake line id. Set it explicitly.
from: start target id.
to: end target id.
fromType: start target type.
toType: end target type.

addFakeLines() converts input objects into runtime RGFakeLine objects. If you use addLines() with isFakeLine: true, the source code dispatches that line into the fake-line data collection.

2. `RGFakeLine` Fields

RGFakeLine inherits most JsonLine fields, so these fields also work:

Text: text, fontColor, fontSize, textOffsetX, textOffsetY, placeText, textAnchor, useTextOnPath
Path: lineShape, lineDirection, fromJunctionPoint, toJunctionPoint, junctionOffset, lineRadius
Style: color, lineWidth, opacity, className, dashType, animation, cssVars
Arrows: showStartArrow, showEndArrow, startMarkerId, endMarkerId
Behavior: disablePointEvent, hidden, forDisplayOnly, data

FakeLine-specific or especially important fields:

Field	Type	Default	Description
`isFakeLine`	`boolean`	Set to `true` when added through `addFakeLines`	Marks the line as a fake line. Required when adding a FakeLine through `addLines`.
`fromType`	`RGInnerConnectTargetType \| string`	Normal line defaults to `Node`; an unspecified FakeLine often behaves like `CanvasPoint`	Start target type. Determines how `from` is resolved into connectable geometry.
`toType`	`RGInnerConnectTargetType \| string`	Normal line defaults to `Node`; an unspecified FakeLine often behaves like `CanvasPoint`	End target type. Determines how `to` is resolved into connectable geometry.
`from`	`string`	Required	Start target id. Meaning depends on `fromType`.
`to`	`string`	Required	End target id. Meaning depends on `toType`.
`forDisplayOnly`	`boolean`	Automatically true when `from === to`; old HTML element-line APIs also set it to true	Display-only line. It does not participate as a structural relationship in some analysis.

3. Endpoint Type `RGInnerConnectTargetType`

Enum	Value	Description
`RGInnerConnectTargetType.Node`	`'node'`	Normal node. `from/to` is a node id.
`RGInnerConnectTargetType.NodePoint`	`'NodePoint'`	Connection point inside a node. Usually registered by `RGConnectTarget` inside a node and can be associated back to its owner node.
`RGInnerConnectTargetType.CanvasPoint`	`'CanvasPoint'`	Connection point on the canvas. Usually registered by `RGConnectTarget` on the canvas and follows the canvas coordinate system.
`RGInnerConnectTargetType.HTMLElementId`	`'HTMLElementId'`	Resolves a target through a page HTML element id. Useful for connecting DOM elements outside or inside graph layers.
`RGInnerConnectTargetType.ViewPoint`	`'ViewPoint'`	View-layer point type. It exists in the type definition and is usually used by internal or extension components.

Custom types:

fromType/toType can be any string.
Custom types must provide geometry through graphInstance.setFakeLineTargetRender().

4. What `RGConnectTarget` Does

RGConnectTarget registers any DOM area as a connectable target. FakeLine or editor drag-line logic can find it by targetId and read its position, size, and junction information.

React example:

<RGConnectTarget
  targetId="user-card-port-out"
  targetType={RGInnerConnectTargetType.NodePoint}
  junctionPoint={RGJunctionPoint.right}
  targetData={{ portName: 'output' }}
>
  <button>Output port</button>
</RGConnectTarget>

Vue example:

<RGConnectTarget
  target-id="user-card-port-in"
  :target-type="RGInnerConnectTargetType.NodePoint"
  :junction-point="RGJunctionPoint.left"
  :target-data="{ portName: 'input' }"
>
  <span class="port"></span>
</RGConnectTarget>

5. `RGConnectTarget` Props

Prop	Type	Default	Description
`targetId`	`string`	Required	Connect target id. FakeLine `from/to` should point to this value.
`targetType`	`string`	Often `NodePoint` inside a node, often `CanvasPoint` elsewhere	Connect target type. It must match FakeLine `fromType/toType`.
`junctionPoint`	`RGJunctionPoint`	`RGJunctionPoint.border`	Junction rule used when a line starts from or ends at this target.
`targetData`	`Record<string, any>`	Unset	Extra target data. Drag callbacks and target resolvers can read it.
`lineTemplate`	`Partial<JsonLine>`	Unset	Line template used when starting a drag line from this target. You can preset color, shape, and business data.
`disableDrop`	`boolean`	`false`	Whether dropping a line endpoint onto this target is disabled.
`disableDrag`	`boolean`	`false`	Whether starting a drag line from this target is disabled.
`onLineVertexBeDropped`	`RGLineVertexBeDroppedEventHandler`	Unset	Triggered when a line endpoint is dropped onto this target.
`onDragConnectStart`	`(template, event) => void`	Unset	Triggered when a drag connection starts from this target.
`onDragConnectEnd`	`RGLineConnectEventHandler`	Unset	Triggered when a drag connection from this target ends.
`className`	`string`	Unset	Custom class name.
`style`	`Record<string, string \| number>`	Unset	Custom style.
`domMode`	`'wrap' \| 'contents'`	Platform implementation default	DOM rendering mode. `wrap` creates a wrapper; `contents` is closer to not adding layout.
`measureSelector`	`string`	Unset	Selector for the inner element used for measuring position and size.
`strictMeasureTarget`	`boolean`	Unset	Strictly uses the measure target. Helpful for complex DOM structures.
`forSvg`	`boolean`	Unset	Helper prop for SVG scenarios; exact behavior depends on platform component implementation.

6. Connect Ports Inside Nodes With `NodePoint`

This is suitable for system architecture diagrams, flowcharts, and editor-style ports.

const fakeLine = {
  id: 'api-output-to-db-input',
  isFakeLine: true,
  from: 'api-output',
  fromType: RGInnerConnectTargetType.NodePoint,
  to: 'db-input',
  toType: RGInnerConnectTargetType.NodePoint,
  lineShape: RGLineShape.StandardOrthogonal,
  text: 'SQL'
};

Key points:

api-output and db-input must be registered by RGConnectTarget.
If the connection point is inside a node, registration records the owner node; some relationship analysis APIs can resolve a FakeLine back to nodes.
If a node slot re-renders and changes DOM structure, make sure targetId remains stable.

7. Connect Canvas Coordinate Objects With `CanvasPoint`

This is suitable for lanes, groups, coordinate annotations, and free canvas graphics.

<template #canvas>
  <RGConnectTarget
    target-id="lane-a-anchor"
    :target-type="RGInnerConnectTargetType.CanvasPoint"
    :junction-point="RGJunctionPoint.right"
  >
    <div style="position:absolute;left:120px;top:80px;width:16px;height:16px;" />
  </RGConnectTarget>
</template>

Corresponding FakeLine:

graphInstance.addFakeLines([
  {
    id: 'node-to-lane',
    isFakeLine: true,
    from: 'service-a',
    fromType: RGInnerConnectTargetType.Node,
    to: 'lane-a-anchor',
    toType: RGInnerConnectTargetType.CanvasPoint,
    text: 'belongs to'
  }
]);

Targets in the canvas slot follow canvas pan and zoom, so FakeLine geometry stays consistent with canvas coordinates.

8. Connect HTML Elements With `HTMLElementId`

HTMLElementId measures an element through document.getElementById(targetId) and converts it into canvas coordinates.

graphInstance.addFakeLines([
  {
    id: 'html-a-to-html-b',
    isFakeLine: true,
    from: 'html-panel-a',
    fromType: RGInnerConnectTargetType.HTMLElementId,
    to: 'html-panel-b',
    toType: RGInnerConnectTargetType.HTMLElementId,
    forDisplayOnly: true,
    text: 'External helper line'
  }
]);

graphInstance.updateElementLines();

Notes:

The element must have a real DOM id.
When the element position or size changes, you usually need to call updateElementLines(). The graph also updates these lines automatically at some internal moments.
If the element cannot be found, the internal target is marked as hidden, and the line will not display correctly.
Old APIs addElementLines, getElementLines, and clearElementLines are still compatible, but the recommended API is addFakeLines.

9. Custom Target Types: `setFakeLineTargetRender`

When an endpoint is not a node, connection point, or HTML element, register a target resolver:

graphInstance.setFakeLineTargetRender((targetType, targetId, fakeLine) => {
  if (targetType === 'group-area') {
    const group = groupMap.get(targetId);
    if (!group) return null;

    return {
      id: targetId,
      text: group.name,
      targetType,
      x: group.x,
      y: group.y,
      nodeShape: RGNodeShape.rect,
      el_W: group.width,
      el_H: group.height,
      junctionPoint: RGJunctionPoint.border,
      targetData: group
    };
  }

  return null;
});

The return object needs at least:

Field	Description
`x` / `y`	Target top-left coordinate in canvas coordinates.
`el_W` / `el_H`	Target width and height.
`nodeShape`	Target shape, which affects junction calculation.
`targetType`	Target type. Usually return the incoming `targetType`.

Optional fields:

id / text: useful for debugging or slots.
junctionPoint: the target’s own junction rule.
targetData: business data.
hidden: set to true to exclude the target from rendering.

10. Query And Update FakeLines

const fakeLine = graphInstance.getFakeLineById('fake-1');
const fakeLines = graphInstance.getFakeLines();

graphInstance.updateFakeLine('fake-1', {
  text: 'Updated fake line',
  color: '#f97316',
  lineShape: RGLineShape.StandardOrthogonal
});

graphInstance.removeFakeLineById('fake-1');
graphInstance.clearFakeLines();

Compatibility notes:

updateLine('fake-1', ...) mainly updates the normal-line collection. Use updateFakeLine for FakeLines.
getCheckedLine() first checks normal lines and then FakeLines, so checked state can cover both kinds.

11. FAQ

Why Is My FakeLine Not Displayed?

Common causes:

fromType/toType does not match the actual target type.
targetId has not been registered by RGConnectTarget.
Custom setFakeLineTargetRender does not return geometry.
The HTML element id cannot be found, or the element is not mounted yet.
The target size is 0, causing path calculation issues.
hidden: true or the target itself is hidden.

Does FakeLine Affect Automatic Layout?

Usually not like a normal RGLine. It is better for editor helper relationships, port connections, or cross-layer links. Structural relationships that should affect layout should use normal lines.

Can FakeLine Participate In Relationship Analysis?

Some FakeLines can be resolved back to nodes, for example Node, node-internal NodePoint, and some CanvasPoint cases. Internally they can build link-like context for relationship queries. But do not treat every FakeLine as a complete structural relationship, especially when linking HTML elements or custom objects.

Fake Lines And Connect Targets (RGFakeLine / RGConnectTarget)

1. Minimal FakeLine

2. RGFakeLine Fields

3. Endpoint Type RGInnerConnectTargetType

4. What RGConnectTarget Does

5. RGConnectTarget Props

6. Connect Ports Inside Nodes With NodePoint

7. Connect Canvas Coordinate Objects With CanvasPoint

8. Connect HTML Elements With HTMLElementId

9. Custom Target Types: setFakeLineTargetRender