orcasvn-react-diagrams 0.2.4 → 0.2.6

package/src/displaybox/demos/EngineEventsDemoTab.tsx

@@ -22,17 +22,18 @@ const engineEventOptions = [
   'elementClick',
   'elementDragged',
   'elementMoved',
-  'elementResized',
-  'elementDeleted',
-  'portDeleted',
-  'linkDeleted',
-  'textDeleted',
-  'elementSelected',
-  'elementLinkStarted',
-  'elementLinkConnecting',
-  'elementLinkEnded',
-  'textSelected',
-] as const;
+  'elementResized',
+  'gridLayoutChanged',
+  'elementDeleted',
+  'portDeleted',
+  'linkDeleted',
+  'textDeleted',
+  'elementSelected',
+  'elementLinkStarted',
+  'elementLinkConnecting',
+  'elementLinkEnded',
+  'textSelected',
+] as const;
 type EngineEventKey = typeof engineEventOptions[number];
 
 const formatEventPayload = (payload: EngineEventMap[EngineEventKey] | null) =>

package/src/displaybox/demos/LinkColorPoolDemoTab.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo, useState } from 'react';
+import SimpleDemo from './SimpleDemo';
+import { linkColorPoolDemoConfig } from './linkColorPoolDemo';
+
+type LinkColorMode = 'off' | 'default' | 'custom';
+
+const customPool = ['#0b7285', '#e8590c', '#5f3dc4'];
+
+const LinkColorPoolDemo = () => {
+  const [mode, setMode] = useState<LinkColorMode>('off');
+  const linkColorPoolPolicy = useMemo(() => {
+    if (mode === 'off') return undefined;
+    if (mode === 'default') return { enabled: true };
+    return { enabled: true, colors: customPool };
+  }, [mode]);
+
+  return (
+    <SimpleDemo
+      demo={linkColorPoolDemoConfig}
+      linkColorPoolPolicy={linkColorPoolPolicy}
+      beforeStage={
+        <div
+          style={{
+            marginBottom: 12,
+            padding: '10px 12px',
+            borderRadius: 8,
+            border: '1px solid #2d2d2d',
+            background: '#f4f4f4',
+          }}
+        >
+          <label htmlFor="link-color-mode" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
+            Color Mode
+            <select
+              id="link-color-mode"
+              value={mode}
+              onChange={(event) => setMode(event.target.value as LinkColorMode)}
+            >
+              <option value="off">Off (default behavior)</option>
+              <option value="default">Default 20-color pool</option>
+              <option value="custom">Custom pool (#0b7285, #e8590c, #5f3dc4)</option>
+            </select>
+          </label>
+        </div>
+      }
+    />
+  );
+};
+
+export default LinkColorPoolDemo;

package/src/displaybox/demos/ObstacleRoutingDemoTab.tsx

@@ -1,31 +1,52 @@
-import React from 'react';
-import SimpleDemo from './SimpleDemo';
-import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
-
-const ObstacleRoutingDemo = () => (
-  <SimpleDemo
-    demo={obstacleRoutingDemoConfig}
-    beforeStage={
-      <div
-        style={{
-          marginBottom: 12,
-          padding: '10px 12px',
-          borderRadius: 8,
-          border: '1px solid #2d2d2d',
-          background: '#f4f4f4',
-        }}
-      >
-        <strong>Expected routing behavior</strong>
-        <ul style={{ margin: '6px 0 0 16px' }}>
-          <li>Scenario A: the sibling link must not cross either child host interior.</li>
-          <li>Scenario A: sibling host ports use anchor preset `cardinal` (left/right) for deterministic multi-anchor placement.</li>
-          <li>Scenario B has one parent and two children with three links: parent-&gt;child, child-&gt;parent, and child-&gt;child.</li>
-          <li>Scenario B: ancestor endpoints resolve to `internalLinkAttachPoint`; descendant/sibling endpoints resolve to `externalLinkAttachPoint`.</li>
-          <li>Use `Reroute All Links` repeatedly; both routes should stay deterministic after each reroute.</li>
-        </ul>
-      </div>
-    }
-  />
-);
-
-export default ObstacleRoutingDemo;
+import React, { useMemo, useState } from 'react';
+import SimpleDemo from './SimpleDemo';
+import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
+
+const ObstacleRoutingDemo = () => {
+  const [redrawRefreshEnabled, setRedrawRefreshEnabled] = useState(false);
+  const linkRouteRefreshPolicy = useMemo(
+    () =>
+      redrawRefreshEnabled
+        ? { mode: 'redraw-two-endpoint-change' as const, includeManual: false }
+        : undefined,
+    [redrawRefreshEnabled],
+  );
+
+  return (
+    <SimpleDemo
+      demo={obstacleRoutingDemoConfig}
+      linkRouteRefreshPolicy={linkRouteRefreshPolicy}
+      beforeStage={
+        <div
+          style={{
+            marginBottom: 12,
+            padding: '10px 12px',
+            borderRadius: 8,
+            border: '1px solid #2d2d2d',
+            background: '#f4f4f4',
+          }}
+        >
+          <strong>Expected routing behavior</strong>
+          <ul style={{ margin: '6px 0 10px 16px' }}>
+            <li>Scenario A: the sibling link must not cross either child host interior.</li>
+            <li>Scenario B: parent endpoints use internal attach points while child/sibling endpoints use external attach points.</li>
+            <li>Scenario C: cross-parent link should exit source branch early, travel along the first common-ancestor corridor, then descend near target.</li>
+            <li>Use `Reroute All Links` repeatedly to verify deterministic routing output.</li>
+            <li>For redraw refresh check: keep the stale cross-branch link, toggle the option below, then click `Manual Render`.</li>
+          </ul>
+          <label htmlFor="obstacle-redraw-refresh-toggle" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
+            <input
+              id="obstacle-redraw-refresh-toggle"
+              type="checkbox"
+              checked={redrawRefreshEnabled}
+              onChange={(event) => setRedrawRefreshEnabled(event.target.checked)}
+            />
+            Enable redraw refresh on two-endpoint change
+          </label>
+        </div>
+      }
+    />
+  );
+};
+
+export default ObstacleRoutingDemo;

package/src/displaybox/demos/OffsetAnchorAvoidanceDemoTab.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import SimpleDemo from './SimpleDemo';
+import { offsetAnchorAvoidanceDemoConfig } from './offsetAnchorAvoidanceDemo';
+
+const OffsetAnchorAvoidanceDemo = () => (
+  <SimpleDemo
+    demo={offsetAnchorAvoidanceDemoConfig}
+    beforeStage={
+      <div
+        style={{
+          marginBottom: 12,
+          padding: '10px 12px',
+          borderRadius: 8,
+          border: '1px solid #2d2d2d',
+          background: '#f4f4f4',
+        }}
+      >
+        <strong>Visual checks</strong>
+        <ul style={{ margin: '6px 0 0 16px' }}>
+          <li>Sibling link should route around both child interiors even though attach coordinates are offset outside the host edges.</li>
+          <li>`parent→child` should use the parent&apos;s internal side and the child&apos;s external side.</li>
+          <li>`child→parent` should invert the same endpoint semantics without crossing either endpoint host interior.</li>
+          <li>Use `Shift targets + reroute` and `Reroute All Links` to verify stable behavior after layout changes.</li>
+        </ul>
+      </div>
+    }
+  />
+);
+
+export default OffsetAnchorAvoidanceDemo;

package/src/displaybox/demos/SimpleDemo.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
-import DisplayBoxControls from '../DisplayBoxControls';
+import React from 'react';
+import type { LinkColorPoolPolicy, LinkRouteRefreshPolicy } from '../../api';
+import DisplayBoxControls from '../DisplayBoxControls';
 import DisplayBoxStage from '../DisplayBoxStage';
 import useDemoControls from '../useDemoControls';
 import useDemoEditor from '../useDemoEditor';
 import useOffsetSequence from '../useOffsetSequence';
 import type { DemoConfig, DemoActionHelpers } from '../types';
 
-type SimpleDemoProps = {
-  demo: DemoConfig;
-  beforeStage?: React.ReactNode;
+type SimpleDemoProps = {
+  demo: DemoConfig;
+  linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+  linkColorPoolPolicy?: LinkColorPoolPolicy;
+  beforeStage?: React.ReactNode;
   stageHandlers?: {
     onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragLeave?: () => void;
@@ -16,14 +19,16 @@ type SimpleDemoProps = {
   };
 };
 
-const SimpleDemo = ({ demo, beforeStage, stageHandlers }: SimpleDemoProps) => {
-  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
-    createState: demo.createState,
-    elementShapes: demo.elementShapes,
-    portShapes: demo.portShapes,
-    router: demo.router,
-    snapDefault: demo.snapDefault,
-  });
+const SimpleDemo = ({ demo, linkRouteRefreshPolicy, linkColorPoolPolicy, beforeStage, stageHandlers }: SimpleDemoProps) => {
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+    router: demo.router,
+    snapDefault: demo.snapDefault,
+    linkRouteRefreshPolicy: linkRouteRefreshPolicy ?? demo.linkRouteRefreshPolicy,
+    linkColorPoolPolicy: linkColorPoolPolicy ?? demo.linkColorPoolPolicy,
+  });
 
   const nextOffset = useOffsetSequence();
   const actionHelpers: DemoActionHelpers = React.useMemo(() => ({ nextOffset }), [nextOffset]);

package/src/displaybox/demos/TextLayoutDemoTab.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import type { TextLayout } from '../../api';
+import type { TextInteractionPolicy, TextLayout } from '../../api';
 import DisplayBoxControls from '../DisplayBoxControls';
 import DisplayBoxStage from '../DisplayBoxStage';
 import useDemoControls from '../useDemoControls';
@@ -9,8 +9,10 @@ import type { DemoActionHelpers } from '../types';
 import {
   textDemoConfig,
   textDemoFloatingTextId,
+  textDemoFloatingInteraction,
   textDemoLongSample,
   textDemoOwnedTextId,
+  textDemoOwnedInteraction,
   textDemoOwnerId,
 } from './textDemo';
 
@@ -58,10 +60,15 @@ const TextLayoutDemo = () => {
   const selectedText = diagramState?.texts.find((text) => text.id === selectedTextId);
   const selectedDisplayContent = selectedText?.displayContent ?? selectedText?.content ?? '';
   const ownerElement = diagramState?.elements.find((element) => element.id === textDemoOwnerId);
+  const selectedInteraction = selectedText?.interaction;
+
+  const getInteractionForTarget = (nextTarget: TextTarget): TextInteractionPolicy =>
+    nextTarget === 'owned' ? textDemoOwnedInteraction : textDemoFloatingInteraction;
 
   const applyLayoutToTarget = (nextTarget: TextTarget, nextLayout: TextLayout) => {
     const editor = editorRef.current;
     if (!editor) return;
+    const interaction = getInteractionForTarget(nextTarget);
     if (nextTarget === 'owned') {
       editor.removeText(textDemoOwnedTextId);
       editor.addText({
@@ -69,6 +76,7 @@ const TextLayoutDemo = () => {
         content: textDemoLongSample,
         ownerId: textDemoOwnerId,
         position: { x: 12, y: 12 },
+        interaction,
         layout: nextLayout,
       });
       editor.setSelection([textDemoOwnedTextId]);
@@ -80,6 +88,7 @@ const TextLayoutDemo = () => {
       id: textDemoFloatingTextId,
       content: textDemoLongSample,
       position: { x: 470, y: 120 },
+      interaction,
       layout: nextLayout,
     });
     editor.setSelection([textDemoFloatingTextId]);
@@ -163,6 +172,10 @@ const TextLayoutDemo = () => {
           Full text content is preserved in state. Overflow and ellipsis settings only change visual output
           (`displayContent`) for rendering.
         </p>
+        <p style={{ marginTop: 0, marginBottom: 0, fontSize: 13 }}>
+          Owned text is fixed and read-only. Floating text remains draggable and editable. Try drag and
+          double-click on each label to compare built-in interaction policy behavior.
+        </p>
       </div>
       <DisplayBoxControls
         actions={demo.actions}
@@ -370,6 +383,10 @@ const TextLayoutDemo = () => {
               ? `${selectedWorldX.toFixed(1)}, ${selectedWorldY.toFixed(1)}`
               : 'n/a'}
           </div>
+          <div>
+            interaction: movable={selectedInteraction?.movable === false ? 'false' : 'true'} | editable=
+            {selectedInteraction?.editable === false ? 'false' : 'true'}
+          </div>
         </div>
 
         <div style={{ display: 'grid', gap: 6 }}>

package/src/displaybox/demos/ZoomToFitElementsDemoTab.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import SimpleDemo from './SimpleDemo';
+import { zoomToFitElementsDemoConfig } from './zoomToFitElementsDemo';
+
+const ZoomToFitElementsDemo = () => (
+  <SimpleDemo
+    demo={zoomToFitElementsDemoConfig}
+    beforeStage={(
+      <div
+        style={{
+          marginBottom: 12,
+          padding: '10px 12px',
+          borderRadius: 8,
+          border: '1px solid #2d2d2d',
+          background: '#f4f4f4',
+        }}
+      >
+        <strong>Visual checks</strong>
+        <ul style={{ margin: '6px 0 0 16px' }}>
+          <li>Click `Run Zoom-To-Fit` and ensure every node is visible and centered.</li>
+          <li>Run `Spread Scene` then fit again to verify viewport recomputes from the updated layout.</li>
+          <li>Use `Run Zoom-To-Fit (Padding 48)` to confirm optional padding keeps extra breathing room around content.</li>
+        </ul>
+      </div>
+    )}
+  />
+);
+
+export default ZoomToFitElementsDemo;

package/src/displaybox/demos/autoLayoutDemo.ts

@@ -36,6 +36,29 @@ const createAutoLayoutState = (): DiagramState => ({
     { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
     { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
 
+    {
+      id: 'layout-grid',
+      position: { x: 620, y: 70 },
+      size: { width: 160, height: 110 },
+      shapeId: 'panel',
+      layout: {
+        mode: 'grid',
+        padding: { x: 10, y: 10 },
+        gap: 10,
+        align: 'center',
+        autoResize: 'grow-shrink',
+        gridTemplate: [12, 4, 8],
+        gridChildWidthResizeEnabled: false,
+        childMinWidth: 24,
+        childMinHeight: 18,
+      },
+    },
+    { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
+    { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
+    { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
+    { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
+    { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
+
     {
       id: 'layout-nested',
       position: { x: 120, y: 260 },
@@ -74,36 +97,49 @@ const createAutoLayoutState = (): DiagramState => ({
   ports: [],
   links: [],
   texts: [
-    {
-      id: 'label-layout-row',
-      content: 'Row parent label lane',
-      position: { x: 8, y: 6 },
-      ownerId: 'layout-row',
-      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-    },
+    {
+      id: 'label-layout-row',
+      content: 'Row parent label lane',
+      position: { x: 8, y: 6 },
+      ownerId: 'layout-row',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
     { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
     { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
     { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
     { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
 
-    {
-      id: 'label-layout-column',
-      content: 'Column parent label lane',
-      position: { x: 8, y: 6 },
-      ownerId: 'layout-column',
-      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-    },
+    {
+      id: 'label-layout-column',
+      content: 'Column parent label lane',
+      position: { x: 8, y: 6 },
+      ownerId: 'layout-column',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
     { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
     { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
     { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
 
-    {
-      id: 'label-layout-nested',
-      content: 'Row + nested column lane',
-      position: { x: 6, y: 6 },
-      ownerId: 'layout-nested',
-      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-    },
+    {
+      id: 'label-layout-grid',
+      content: 'Grid template [12,4,8]',
+      position: { x: 8, y: 6 },
+      ownerId: 'layout-grid',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
+    { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
+    { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
+    { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
+    { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
+    { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
+
+    {
+      id: 'label-layout-nested',
+      content: 'Row + nested column lane',
+      position: { x: 6, y: 6 },
+      ownerId: 'layout-nested',
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
     { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
     { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
     { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
@@ -116,11 +152,11 @@ const createAutoLayoutState = (): DiagramState => ({
   ],
 });
 
-export const autoLayoutDemoConfig: DemoConfig = ({
-  id: 'auto-layout',
-  title: 'Element Auto-Layout + Label Lane',
-  description: 'Consolidated auto-layout verification with baseline/nested containers, fit options, and label reserved-space modes.',
-  createState: createAutoLayoutState,
+export const autoLayoutDemoConfig: DemoConfig = ({
+  id: 'auto-layout',
+  title: 'Element Auto-Layout + Label Lane',
+  description: 'Consolidated auto-layout verification with horizontal/vertical/grid containers, fit options, auto-resize policies, and label reserved-space modes.',
+  createState: createAutoLayoutState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,
   defaultElementShapeId: 'default',

package/src/displaybox/demos/index.tsx

@@ -8,8 +8,8 @@ import { textDemoConfig } from './textDemo';
 import { selectionDemoConfig } from './selectionDemo';
 import { eventHandlersDemoConfig } from './eventHandlersDemo';
 import { engineEventsDemoConfig } from './engineEventsDemo';
-import { linkCancelDemoConfig } from './linkCancelDemo';
-import { autoLayoutDemoConfig } from './autoLayoutDemo';
+import { linkCancelDemoConfig } from './linkCancelDemo';
+import { autoLayoutDemoConfig } from './autoLayoutDemo';
 import { externalDragDropDemoConfig } from './externalDragDropDemo';
 import { shapeGalleryDemoConfig } from './shapeGalleryDemo';
 import { svgPathDemoConfig } from './svgPathDemo';
@@ -18,32 +18,38 @@ import { rotatedCreationDemoConfig } from './rotatedCreationDemo';
 import { multiLevelTreeDemoConfig } from './multiLevelTreeDemo';
 import { multipleElementsDemoConfig } from './multipleElementsDemo';
 import { asymmetricPortMultiAnchorDemoConfig } from './asymmetricPortMultiAnchorDemo';
-import { portConstraintsDemoConfig } from './portConstraintsDemo';
-import { portPositionLimitsDemoConfig } from './portPositionLimitsDemo';
-import { portBorderDemoConfig } from './portBorderDemo';
-import { childConstraintsDemoConfig } from './childConstraintsDemo';
-import { labelStyleDemoConfig } from './labelStyleDemo';
+import { portConstraintsDemoConfig } from './portConstraintsDemo';
+import { portPositionLimitsDemoConfig } from './portPositionLimitsDemo';
+import { portBorderDemoConfig } from './portBorderDemo';
+import { childConstraintsDemoConfig } from './childConstraintsDemo';
+import { labelStyleDemoConfig } from './labelStyleDemo';
+import { linkColorPoolDemoConfig } from './linkColorPoolDemo';
 import { gridOverlayDemoConfig } from './gridOverlayDemo';
 import { routingDemoConfig } from './routingDemo';
 import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
 import { linkBendHandlesDemoConfig } from './linkBendHandlesDemo';
 import { deletionEventsDemoConfig } from './deletionEventsDemo';
-import { shapeBorderMovementDemoConfig } from './shapeBorderMovementDemo';
-import { shapeHoverControlsDemoConfig } from './shapeHoverControlsDemo';
-import { vertexControlLinkSessionDemoConfig } from './vertexControlLinkSessionDemo';
+import { shapeBorderMovementDemoConfig } from './shapeBorderMovementDemo';
+import { shapeHoverControlsDemoConfig } from './shapeHoverControlsDemo';
+import { vertexControlLinkSessionDemoConfig } from './vertexControlLinkSessionDemo';
 import EventHandlersDemo from './EventHandlersDemoTab';
 import EngineEventsDemo from './EngineEventsDemoTab';
-import LinkCancelDemo from './LinkCancelDemoTab';
-import AutoLayoutDemo from './AutoLayoutDemoTab';
+import LinkCancelDemo from './LinkCancelDemoTab';
+import AutoLayoutDemo from './AutoLayoutDemoTab';
 import ExternalDragDropDemo from './ExternalDragDropDemoTab';
 import SvgPathDemo from './SvgPathDemoTab';
 import TextLayoutDemo from './TextLayoutDemoTab';
 import SimpleDemo from './SimpleDemo';
-import ObstacleRoutingDemo from './ObstacleRoutingDemoTab';
-import DeletionEventsDemo from './DeletionEventsDemoTab';
+import ObstacleRoutingDemo from './ObstacleRoutingDemoTab';
+import OffsetAnchorAvoidanceDemo from './OffsetAnchorAvoidanceDemoTab';
+import ZoomToFitElementsDemo from './ZoomToFitElementsDemoTab';
+import DeletionEventsDemo from './DeletionEventsDemoTab';
 import ShapeHoverControlsDemo from './ShapeHoverControlsDemoTab';
+import LinkColorPoolDemo from './LinkColorPoolDemoTab';
 import AsymmetricPortMultiAnchorDemo from './AsymmetricPortMultiAnchorDemoTab';
 import VertexControlLinkSessionDemo from './VertexControlLinkSessionDemoTab';
+import { offsetAnchorAvoidanceDemoConfig } from './offsetAnchorAvoidanceDemo';
+import { zoomToFitElementsDemoConfig } from './zoomToFitElementsDemo';
 
 export {
   baseElementShapes,
@@ -112,12 +118,12 @@ export const demoTabs: DemoDefinition[] = [
     description: deletionEventsDemoConfig.description,
     Component: DeletionEventsDemo,
   },
-  {
-    id: autoLayoutDemoConfig.id,
-    title: autoLayoutDemoConfig.title,
-    description: autoLayoutDemoConfig.description,
-    Component: AutoLayoutDemo,
-  },
+  {
+    id: autoLayoutDemoConfig.id,
+    title: autoLayoutDemoConfig.title,
+    description: autoLayoutDemoConfig.description,
+    Component: AutoLayoutDemo,
+  },
   {
     id: linkCancelDemoConfig.id,
     title: linkCancelDemoConfig.title,
@@ -172,28 +178,34 @@ export const demoTabs: DemoDefinition[] = [
     description: multipleElementsDemoConfig.description,
     Component: wrapSimpleDemo(multipleElementsDemoConfig),
   },
-  {
-    id: portConstraintsDemoConfig.id,
-    title: portConstraintsDemoConfig.title,
-    description: portConstraintsDemoConfig.description,
-    Component: wrapSimpleDemo(portConstraintsDemoConfig),
-  },
-  {
-    id: portPositionLimitsDemoConfig.id,
-    title: portPositionLimitsDemoConfig.title,
-    description: portPositionLimitsDemoConfig.description,
-    Component: wrapSimpleDemo(portPositionLimitsDemoConfig),
-  },
-  {
-    id: labelStyleDemoConfig.id,
-    title: labelStyleDemoConfig.title,
-    description: labelStyleDemoConfig.description,
-    Component: wrapSimpleDemo(labelStyleDemoConfig),
-  },
-  {
-    id: portBorderDemoConfig.id,
-    title: portBorderDemoConfig.title,
-    description: portBorderDemoConfig.description,
+  {
+    id: portConstraintsDemoConfig.id,
+    title: portConstraintsDemoConfig.title,
+    description: portConstraintsDemoConfig.description,
+    Component: wrapSimpleDemo(portConstraintsDemoConfig),
+  },
+  {
+    id: portPositionLimitsDemoConfig.id,
+    title: portPositionLimitsDemoConfig.title,
+    description: portPositionLimitsDemoConfig.description,
+    Component: wrapSimpleDemo(portPositionLimitsDemoConfig),
+  },
+  {
+    id: labelStyleDemoConfig.id,
+    title: labelStyleDemoConfig.title,
+    description: labelStyleDemoConfig.description,
+    Component: wrapSimpleDemo(labelStyleDemoConfig),
+  },
+  {
+    id: linkColorPoolDemoConfig.id,
+    title: linkColorPoolDemoConfig.title,
+    description: linkColorPoolDemoConfig.description,
+    Component: LinkColorPoolDemo,
+  },
+  {
+    id: portBorderDemoConfig.id,
+    title: portBorderDemoConfig.title,
+    description: portBorderDemoConfig.description,
     Component: wrapSimpleDemo(portBorderDemoConfig),
   },
   {
@@ -202,18 +214,18 @@ export const demoTabs: DemoDefinition[] = [
     description: shapeBorderMovementDemoConfig.description,
     Component: wrapSimpleDemo(shapeBorderMovementDemoConfig),
   },
-  {
-    id: shapeHoverControlsDemoConfig.id,
-    title: shapeHoverControlsDemoConfig.title,
-    description: shapeHoverControlsDemoConfig.description,
-    Component: ShapeHoverControlsDemo,
-  },
-  {
-    id: vertexControlLinkSessionDemoConfig.id,
-    title: vertexControlLinkSessionDemoConfig.title,
-    description: vertexControlLinkSessionDemoConfig.description,
-    Component: VertexControlLinkSessionDemo,
-  },
+  {
+    id: shapeHoverControlsDemoConfig.id,
+    title: shapeHoverControlsDemoConfig.title,
+    description: shapeHoverControlsDemoConfig.description,
+    Component: ShapeHoverControlsDemo,
+  },
+  {
+    id: vertexControlLinkSessionDemoConfig.id,
+    title: vertexControlLinkSessionDemoConfig.title,
+    description: vertexControlLinkSessionDemoConfig.description,
+    Component: VertexControlLinkSessionDemo,
+  },
   {
     id: childConstraintsDemoConfig.id,
     title: childConstraintsDemoConfig.title,
@@ -238,9 +250,21 @@ export const demoTabs: DemoDefinition[] = [
     description: obstacleRoutingDemoConfig.description,
     Component: ObstacleRoutingDemo,
   },
-  {
-    id: linkBendHandlesDemoConfig.id,
-    title: linkBendHandlesDemoConfig.title,
+  {
+    id: offsetAnchorAvoidanceDemoConfig.id,
+    title: offsetAnchorAvoidanceDemoConfig.title,
+    description: offsetAnchorAvoidanceDemoConfig.description,
+    Component: OffsetAnchorAvoidanceDemo,
+  },
+  {
+    id: zoomToFitElementsDemoConfig.id,
+    title: zoomToFitElementsDemoConfig.title,
+    description: zoomToFitElementsDemoConfig.description,
+    Component: ZoomToFitElementsDemo,
+  },
+  {
+    id: linkBendHandlesDemoConfig.id,
+    title: linkBendHandlesDemoConfig.title,
     description: linkBendHandlesDemoConfig.description,
     Component: wrapSimpleDemo(linkBendHandlesDemoConfig),
   },