[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:built-in-line-dash-and-animation":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Built-In Line Dash and Animation Reference\n\n## What This Example Builds\n\nThis example renders a small left-to-right tree that works as a comparison board for relation-graph's built-in line effects. One branch shows four `dashType` presets plus one normal line, and another branch shows four `animation` presets on the default curved line renderer. The screen also includes icon-only circular nodes, a green gradient canvas, and a floating helper window that can be dragged, minimized, switched into a settings panel, and used for image export.\n\n## How the Data Is Organized\n\nThe graph data is declared inline inside `initializeGraph()` as one `RGJsonData` object with `rootId`, `nodes`, and `lines`. Each node uses a simple `{ id, text, data: { icon } }` shape, and each line uses `from`, `to`, `text`, plus optional `dashType` or `animation` fields. There is no preprocessing before `setJsonData()`: the example passes the static dataset directly into relation-graph, so the same pattern could be replaced with workflow transitions, route states, service dependencies, or other edge-status data.\n\n## How relation-graph Is Used\n\n`RGProvider` wraps the demo, and `RGHooks.useGraphInstance()` drives all graph lifecycle work. The local `graphOptions` keep relation-graph on its default rendering path while tuning the presentation: a tree layout grows from the left, node spacing is widened for readability, lines use `RGLineShape.StandardCurve`, labels follow the path through `defaultLineTextOnPath`, and the built-in toolbar is positioned horizontally in the lower-right corner.\n\nThe example customizes nodes with `RGSlotOnNode`, not with a custom line renderer. `node.data.icon` is mapped to Lucide icons so the tree branches stay visually distinct while the line styles remain the real lesson. The shared `DraggableWindow` helper uses `RGHooks.useGraphStore()` and `graphInstance.setOptions()` to switch wheel and drag behavior at runtime, and it uses `prepareForImageGeneration()` plus `restoreAfterImageGeneration()` to export the current canvas as an image.\n\nStyling stays local and lightweight. The SCSS file adds the green gradient background, makes the toolbar translucent, centers content inside circular nodes, and overrides the checked-node appearance by using `checkedItemBackgroundColor` as the icon badge background. There are no editing tools, custom line slots, or runtime line mutations in this example.\n\n## Key Interactions\n\n- The graph loads once on mount, then calls `moveToCenter()` and `zoomToFit()` so every built-in line variant is visible immediately.\n- Users inspect dashed, normal, and animated links side by side; those variants are predefined in the initial data rather than switched dynamically.\n- The floating helper window can be dragged, minimized, and toggled into a settings mode.\n- The settings panel changes wheel and drag behavior at runtime and can export the current graph view as an image.\n\n## Key Code Fragments\n\nThis options block shows that the demo stays on relation-graph's default renderer and uses layout and option tuning to create a clean comparison surface.\n\n```tsx\nconst graphOptions: RGOptions = {\n    defaultLineColor: 'rgba(255, 255, 255, 0.6)',\n    defaultNodeColor: 'transparent',\n    defaultNodeBorderWidth: 0,\n    defaultNodeShape: RGNodeShape.circle,\n    toolBarDirection: 'h',\n    toolBarPositionH: 'right',\n    toolBarPositionV: 'bottom',\n    defaultLineShape: RGLineShape.StandardCurve,\n    defaultJunctionPoint: RGJunctionPoint.lr,\n    defaultLineTextOnPath: true,\n    layout: {\n        layoutName: 'tree',\n        from: 'left',\n        treeNodeGapH: 310,\n        treeNodeGapV: 70\n    }\n};\n```\n\nThis inline line dataset is the core proof that the visual variation comes from built-in per-line data fields instead of CSS classes or post-load line updates.\n\n```tsx\nlines: [\n    { id: 'line-1', from: 'a', to: 'b', text: 'dataType=1', dashType: 1 },\n    { id: 'line-2', from: 'b', to: 'b1', text: 'dataType=2', dashType: 2 },\n    { id: 'line-3', from: 'b', to: 'b2', text: 'dataType=3', dashType: 3 },\n    { id: 'line-4', from: 'b2', to: 'b2-1', text: 'dataType=4', dashType: 4 },\n    { id: 'line-5', from: 'b2', to: 'b2-2', text: 'Normal' },\n    { id: 'line-6', from: 'a', to: 'c', text: 'animation=1', animation: 1 },\n    { id: 'line-7', from: 'c', to: 'c1', text: 'animation=2', animation: 2 },\n    { id: 'line-8', from: 'c', to: 'c2', text: 'animation=3', animation: 3 },\n    { id: 'line-9', from: 'c', to: 'c3', text: 'animation=4', animation: 4 }\n]\n```\n\nThis node slot keeps the edges on the default renderer while turning each node into an icon badge chosen from `node.data.icon`.\n\n```tsx\n\u003CRGSlotOnNode>\n    {({ node }: RGNodeSlotProps) => {\n        const iconName = node.data?.icon || 'default';\n        const IconComponent = IconMapper[iconName] || CircleDot;\n        return (\n            \u003Cdiv className=\"my-icon-node h-20 w-20 text-white rounded flex place-items-center justify-center hover:bg-white hover:bg-opacity-40\">\n                \u003CIconComponent size={40} />\n            \u003C/div>\n        );\n    }}\n\u003C/RGSlotOnNode>\n```\n\nThis shared helper panel is where runtime canvas controls and image export are connected to the graph instance.\n\n```tsx\nconst { options } = RGHooks.useGraphStore();\nconst dragMode = options.dragEventAction;\nconst wheelMode = options.wheelEventAction;\n\n\u003CSettingRow\n    label=\"Wheel Event:\"\n    options={[\n        { label: 'Scroll', value: 'scroll' },\n        { label: 'Zoom', value: 'zoom' },\n        { label: 'None', value: 'none' }\n    ]}\n    value={wheelMode}\n    onChange={(newValue: string) => {\n        graphInstance.setOptions({ wheelEventAction: newValue });\n    }}\n/>\n```\n\n## What Makes This Example Distinct\n\nThe comparison data places this example closest to `line-style2`, `custom-line-style`, and `custom-line-animation`, but its role is narrower and simpler than those neighbors. Against `line-style2`, it does not rely on checked-line state or CSS wrapper classes; it shows all built-in variants at once in the initial dataset. Against `custom-line-style`, it avoids `className`, SCSS-driven line skins, and `updateLine()` calls. Against `custom-line-animation`, it stays on relation-graph's built-in `animation` values instead of adding SVG filters or richer custom effects.\n\nThat makes this example a strong starting point when the requirement is, \"Can the default renderer already do enough?\" The verified rarity data also marks its combination of left-to-right tree layout, icon-only circular node slots, path labels, and side-by-side built-in `dashType` plus `animation` presets as an uncommon feature mix in the example set.\n\n## Where Else This Pattern Applies\n\n- Status-oriented dependency maps where dashed links mean delayed or indirect relationships and animated links mark active traffic.\n- Logistics or operations views where icon nodes identify entity types and edge motion highlights live routes without introducing custom SVG work.\n- Workflow, approval, or pipeline diagrams that need a compact built-in legend for edge states before investing in heavier theming.\n- Internal design-system or onboarding demos that teach teams which line semantics can be expressed through relation-graph's native data properties alone.\n",false,500,1782615375266]