orcasvn-react-diagrams 0.2.11 → 0.2.13

package/src/displaybox/demos/LinkPortCreationDemoTab.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import type { LinkTargetPortCreationHandler } from '../../api';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { linkPortCreationDemoConfig as demo } from './linkPortCreationDemo';
+
+const LinkPortCreationDemo = () => {
+  const [useHostTargetPort, setUseHostTargetPort] = React.useState(false);
+
+  const onCreateLinkTargetPort = React.useMemo<LinkTargetPortCreationHandler | undefined>(() => {
+    if (!useHostTargetPort) return undefined;
+    return ({ defaultPort }) => ({
+      shapeId: 'port-dark',
+      size: { width: 16, height: 16 },
+      style: {
+        fill: '#f97316',
+        stroke: '#9a3412',
+        strokeWidth: 2,
+        name: 'port',
+      },
+      position: {
+        x: defaultPort.position.x,
+        y: 24,
+      },
+      orientToHostBorder: false,
+    });
+  }, [useHostTargetPort]);
+
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+    router: demo.router,
+    snapDefault: demo.snapDefault,
+    linkRouteRefreshPolicy: demo.linkRouteRefreshPolicy,
+    linkColorPoolPolicy: demo.linkColorPoolPolicy,
+    onCreateLinkTargetPort,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = React.useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0, marginBottom: 8 }}>{demo.description}</p>
+        <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
+          <input
+            type="checkbox"
+            checked={useHostTargetPort}
+            onChange={(event) => setUseHostTargetPort(event.target.checked)}
+          />
+          Customize target port via onCreateLinkTargetPort
+        </label>
+        <p style={{ marginTop: 8, marginBottom: 0, color: '#5c4a2c' }}>
+          Default mode clones the source port. Custom mode reshapes the target-port preview and commit together;
+          host cancellation still belongs to <code>elementLinkConnecting</code>.
+        </p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
+      />
+      <DisplayBoxStage containerRef={containerRef} stageStyle={demo.stageStyle} />
+    </section>
+  );
+};
+
+export default LinkPortCreationDemo;

package/src/displaybox/demos/deletionEventsDemo.ts

@@ -2,7 +2,7 @@ import type { DiagramState } from '../../api';
 import type { DemoConfig } from '../types';
 import { baseElementShapes, basePortShapes } from './shared';
 
-const createDeletionEventsState = (): DiagramState => ({
+export const createDeletionEventsState = (): DiagramState => ({
   elements: [
     {
       id: 'delete-source',
@@ -81,7 +81,7 @@ const createDeletionEventsState = (): DiagramState => ({
 export const deletionEventsDemoConfig: DemoConfig = {
   id: 'deletion-events',
   title: 'Deletion Events',
-  description: 'Inspect elementDeleted, portDeleted, linkDeleted, and textDeleted payloads for direct and cascade removals.',
+  description: 'Inspect cancellable delete lifecycle events, post-delete payloads, and element double click in one integration-focused scenario.',
   createState: createDeletionEventsState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,

package/src/displaybox/demos/focusElementDemo.ts

@@ -0,0 +1,91 @@
+import type { DiagramState } from '../../api';
+import type { DemoAction, DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const createFocusElementState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'focus-left',
+      position: { x: 40, y: 80 },
+      size: { width: 140, height: 90 },
+      shapeId: 'default',
+      style: { fill: '#e0f2fe', stroke: '#0369a1', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-right',
+      position: { x: 820, y: 120 },
+      size: { width: 180, height: 110 },
+      shapeId: 'panel',
+      style: { fill: '#fef3c7', stroke: '#b45309', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-parent',
+      position: { x: 520, y: 420 },
+      size: { width: 220, height: 160 },
+      shapeId: 'default',
+      style: { fill: '#ecfccb', stroke: '#4d7c0f', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-child',
+      parentId: 'focus-parent',
+      position: { x: 110, y: 60 },
+      size: { width: 70, height: 50 },
+      shapeId: 'default',
+      anchorCenter: true,
+      style: { fill: '#dcfce7', stroke: '#15803d', strokeWidth: 2 },
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'focus-copy',
+      content: 'Compare explicit element focus against zoom-to-fit.',
+      position: { x: 40, y: 26 },
+    },
+  ],
+});
+
+const focusLeftAction: DemoAction = {
+  id: 'focus-left-default',
+  label: 'Focus Left (Keep Zoom)',
+  run: (editor) => {
+    editor.focusElement('focus-left');
+  },
+};
+
+const focusRightZoomAction: DemoAction = {
+  id: 'focus-right-zoom',
+  label: 'Focus Right (Zoom 2.2)',
+  run: (editor) => {
+    editor.focusElement('focus-right', { zoom: 2.2 });
+  },
+};
+
+const focusChildZoomAction: DemoAction = {
+  id: 'focus-child-zoom',
+  label: 'Focus Nested Child (Zoom 1.8)',
+  run: (editor) => {
+    editor.focusElement('focus-child', { zoom: 1.8 });
+  },
+};
+
+const fitAllAction: DemoAction = {
+  id: 'focus-fit-all',
+  label: 'Zoom-To-Fit For Comparison',
+  run: (editor) => {
+    editor.zoomToFitElements({ padding: 40 });
+  },
+};
+
+export const focusElementDemoConfig: DemoConfig = {
+  id: 'focus-element',
+  title: 'Focus Element',
+  description: 'Centers one explicit element, optionally with a chosen zoom, unlike zoom-to-fit which frames the whole scene.',
+  createState: createFocusElementState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [focusLeftAction, focusRightZoomAction, focusChildZoomAction, fitAllAction],
+};

package/src/displaybox/demos/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { DemoConfig, DemoDefinition } from '../types';
+import React from 'react';
+import type { DemoConfig, DemoDefinition, DemoMenuGroup } from '../types';
 import { basicDemoConfig } from './basicDemo';
 import { linkPortCreationDemoConfig } from './linkPortCreationDemo';
 import { nestedDemoConfig } from './nestedDemo';
@@ -24,8 +24,9 @@ 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 { linkColorPoolDemoConfig } from './linkColorPoolDemo';
+import { linkLabelsDemoConfig } from './linkLabelsDemo';
+import { gridOverlayDemoConfig } from './gridOverlayDemo';
 import { routingDemoConfig } from './routingDemo';
 import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
 import { linkBendHandlesDemoConfig } from './linkBendHandlesDemo';
@@ -35,8 +36,9 @@ 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 LinkPortCreationDemo from './LinkPortCreationDemoTab';
+import AutoLayoutDemo from './AutoLayoutDemoTab';
 import ExternalDragDropDemo from './ExternalDragDropDemoTab';
 import SvgPathDemo from './SvgPathDemoTab';
 import TextLayoutDemo from './TextLayoutDemoTab';
@@ -51,6 +53,7 @@ import AsymmetricPortMultiAnchorDemo from './AsymmetricPortMultiAnchorDemoTab';
 import VertexControlLinkSessionDemo from './VertexControlLinkSessionDemoTab';
 import { offsetAnchorAvoidanceDemoConfig } from './offsetAnchorAvoidanceDemo';
 import { zoomToFitElementsDemoConfig } from './zoomToFitElementsDemo';
+import { focusElementDemoConfig } from './focusElementDemo';
 
 export {
   baseElementShapes,
@@ -61,218 +64,118 @@ export {
   defaultSvgPathSize,
   externalToolboxItems,
 } from './shared';
-
-const wrapSimpleDemo = (demo: DemoConfig) => () => <SimpleDemo demo={demo} />;
-
-export const demoTabs: DemoDefinition[] = [
-  {
-    id: basicDemoConfig.id,
-    title: basicDemoConfig.title,
-    description: basicDemoConfig.description,
-    Component: wrapSimpleDemo(basicDemoConfig),
-  },
-  {
-    id: linkPortCreationDemoConfig.id,
-    title: linkPortCreationDemoConfig.title,
-    description: linkPortCreationDemoConfig.description,
-    Component: wrapSimpleDemo(linkPortCreationDemoConfig),
-  },
-  {
-    id: nestedDemoConfig.id,
-    title: nestedDemoConfig.title,
-    description: nestedDemoConfig.description,
-    Component: wrapSimpleDemo(nestedDemoConfig),
-  },
-  {
-    id: customDemoConfig.id,
-    title: customDemoConfig.title,
-    description: customDemoConfig.description,
-    Component: wrapSimpleDemo(customDemoConfig),
-  },
-  {
-    id: textDemoConfig.id,
-    title: textDemoConfig.title,
-    description: textDemoConfig.description,
-    Component: TextLayoutDemo,
-  },
-  {
-    id: selectionDemoConfig.id,
-    title: selectionDemoConfig.title,
-    description: selectionDemoConfig.description,
-    Component: wrapSimpleDemo(selectionDemoConfig),
-  },
-  {
-    id: elementVisibilitySelectionDemoConfig.id,
-    title: elementVisibilitySelectionDemoConfig.title,
-    description: elementVisibilitySelectionDemoConfig.description,
-    Component: wrapSimpleDemo(elementVisibilitySelectionDemoConfig),
-  },
-  {
-    id: eventHandlersDemoConfig.id,
-    title: eventHandlersDemoConfig.title,
-    description: eventHandlersDemoConfig.description,
-    Component: EventHandlersDemo,
-  },
-  {
-    id: engineEventsDemoConfig.id,
-    title: engineEventsDemoConfig.title,
-    description: engineEventsDemoConfig.description,
-    Component: EngineEventsDemo,
-  },
-  {
-    id: deletionEventsDemoConfig.id,
-    title: deletionEventsDemoConfig.title,
-    description: deletionEventsDemoConfig.description,
-    Component: DeletionEventsDemo,
-  },
-  {
-    id: autoLayoutDemoConfig.id,
-    title: autoLayoutDemoConfig.title,
-    description: autoLayoutDemoConfig.description,
-    Component: AutoLayoutDemo,
-  },
-  {
-    id: linkCancelDemoConfig.id,
-    title: linkCancelDemoConfig.title,
-    description: linkCancelDemoConfig.description,
-    Component: LinkCancelDemo,
-  },
-  {
-    id: externalDragDropDemoConfig.id,
-    title: externalDragDropDemoConfig.title,
-    description: externalDragDropDemoConfig.description,
-    Component: ExternalDragDropDemo,
-  },
-  {
-    id: shapeGalleryDemoConfig.id,
-    title: shapeGalleryDemoConfig.title,
-    description: shapeGalleryDemoConfig.description,
-    Component: wrapSimpleDemo(shapeGalleryDemoConfig),
-  },
-  {
-    id: roundedRectRadiusDemoConfig.id,
-    title: roundedRectRadiusDemoConfig.title,
-    description: roundedRectRadiusDemoConfig.description,
-    Component: wrapSimpleDemo(roundedRectRadiusDemoConfig),
-  },
-  {
-    id: rotatedCreationDemoConfig.id,
-    title: rotatedCreationDemoConfig.title,
-    description: rotatedCreationDemoConfig.description,
-    Component: wrapSimpleDemo(rotatedCreationDemoConfig),
-  },
-  {
-    id: svgPathDemoConfig.id,
-    title: svgPathDemoConfig.title,
-    description: svgPathDemoConfig.description,
-    Component: SvgPathDemo,
-  },
-  {
-    id: asymmetricPortMultiAnchorDemoConfig.id,
-    title: asymmetricPortMultiAnchorDemoConfig.title,
-    description: asymmetricPortMultiAnchorDemoConfig.description,
-    Component: AsymmetricPortMultiAnchorDemo,
-  },
-  {
-    id: multiLevelTreeDemoConfig.id,
-    title: multiLevelTreeDemoConfig.title,
-    description: multiLevelTreeDemoConfig.description,
-    Component: wrapSimpleDemo(multiLevelTreeDemoConfig),
-  },
-  {
-    id: multipleElementsDemoConfig.id,
-    title: multipleElementsDemoConfig.title,
-    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: linkColorPoolDemoConfig.id,
-    title: linkColorPoolDemoConfig.title,
-    description: linkColorPoolDemoConfig.description,
-    Component: LinkColorPoolDemo,
-  },
-  {
-    id: portBorderDemoConfig.id,
-    title: portBorderDemoConfig.title,
-    description: portBorderDemoConfig.description,
-    Component: wrapSimpleDemo(portBorderDemoConfig),
-  },
-  {
-    id: shapeBorderMovementDemoConfig.id,
-    title: shapeBorderMovementDemoConfig.title,
-    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: childConstraintsDemoConfig.id,
-    title: childConstraintsDemoConfig.title,
-    description: childConstraintsDemoConfig.description,
-    Component: wrapSimpleDemo(childConstraintsDemoConfig),
-  },
-  {
-    id: gridOverlayDemoConfig.id,
-    title: gridOverlayDemoConfig.title,
-    description: gridOverlayDemoConfig.description,
-    Component: wrapSimpleDemo(gridOverlayDemoConfig),
-  },
-  {
-    id: routingDemoConfig.id,
-    title: routingDemoConfig.title,
-    description: routingDemoConfig.description,
-    Component: wrapSimpleDemo(routingDemoConfig),
-  },
-  {
-    id: obstacleRoutingDemoConfig.id,
-    title: obstacleRoutingDemoConfig.title,
-    description: obstacleRoutingDemoConfig.description,
-    Component: ObstacleRoutingDemo,
-  },
-  {
-    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),
-  },
-];
+
+const wrapSimpleDemo = (demo: DemoConfig) => () => <SimpleDemo demo={demo} />;
+
+type DemoRegistration = {
+  demo: DemoConfig;
+  Component: React.ComponentType;
+  menuGroup: DemoMenuGroup;
+  menuOrder: number;
+};
+
+const menuGroupOrder: Record<DemoMenuGroup, number> = {
+  basics: 1,
+  layoutText: 2,
+  shapes: 3,
+  portsAnchors: 4,
+  linksRouting: 5,
+  eventsIntegration: 6,
+};
+
+const registerDemo = (
+  demo: DemoConfig,
+  Component: React.ComponentType,
+  menuGroup: DemoMenuGroup,
+  menuOrder: number,
+): DemoRegistration => ({
+  demo,
+  Component,
+  menuGroup,
+  menuOrder,
+});
+
+const toDemoDefinition = ({
+  demo,
+  Component,
+  menuGroup,
+  menuOrder,
+}: DemoRegistration): DemoDefinition => ({
+  id: demo.id,
+  title: demo.title,
+  description: demo.description,
+  Component,
+  menuGroup,
+  menuOrder,
+});
+
+const compareDemoDefinitions = (left: DemoDefinition, right: DemoDefinition) =>
+  menuGroupOrder[left.menuGroup] - menuGroupOrder[right.menuGroup]
+  || left.menuOrder - right.menuOrder
+  || left.title.localeCompare(right.title);
+
+const basics = [
+  registerDemo(basicDemoConfig, wrapSimpleDemo(basicDemoConfig), 'basics', 1),
+  registerDemo(multipleElementsDemoConfig, wrapSimpleDemo(multipleElementsDemoConfig), 'basics', 2),
+  registerDemo(nestedDemoConfig, wrapSimpleDemo(nestedDemoConfig), 'basics', 3),
+  registerDemo(selectionDemoConfig, wrapSimpleDemo(selectionDemoConfig), 'basics', 4),
+  registerDemo(elementVisibilitySelectionDemoConfig, wrapSimpleDemo(elementVisibilitySelectionDemoConfig), 'basics', 5),
+  registerDemo(zoomToFitElementsDemoConfig, ZoomToFitElementsDemo, 'basics', 6),
+  registerDemo(focusElementDemoConfig, wrapSimpleDemo(focusElementDemoConfig), 'basics', 7),
+];
+
+const layoutAndText = [
+  registerDemo(textDemoConfig, TextLayoutDemo, 'layoutText', 1),
+  registerDemo(labelStyleDemoConfig, wrapSimpleDemo(labelStyleDemoConfig), 'layoutText', 2),
+  registerDemo(autoLayoutDemoConfig, AutoLayoutDemo, 'layoutText', 3),
+  registerDemo(multiLevelTreeDemoConfig, wrapSimpleDemo(multiLevelTreeDemoConfig), 'layoutText', 4),
+  registerDemo(childConstraintsDemoConfig, wrapSimpleDemo(childConstraintsDemoConfig), 'layoutText', 5),
+  registerDemo(gridOverlayDemoConfig, wrapSimpleDemo(gridOverlayDemoConfig), 'layoutText', 6),
+];
+
+const shapes = [
+  registerDemo(customDemoConfig, wrapSimpleDemo(customDemoConfig), 'shapes', 1),
+  registerDemo(shapeGalleryDemoConfig, wrapSimpleDemo(shapeGalleryDemoConfig), 'shapes', 2),
+  registerDemo(roundedRectRadiusDemoConfig, wrapSimpleDemo(roundedRectRadiusDemoConfig), 'shapes', 3),
+  registerDemo(rotatedCreationDemoConfig, wrapSimpleDemo(rotatedCreationDemoConfig), 'shapes', 4),
+  registerDemo(svgPathDemoConfig, SvgPathDemo, 'shapes', 5),
+  registerDemo(shapeBorderMovementDemoConfig, wrapSimpleDemo(shapeBorderMovementDemoConfig), 'shapes', 6),
+  registerDemo(shapeHoverControlsDemoConfig, ShapeHoverControlsDemo, 'shapes', 7),
+];
+
+const portsAndAnchors = [
+  registerDemo(linkPortCreationDemoConfig, LinkPortCreationDemo, 'portsAnchors', 1),
+  registerDemo(portConstraintsDemoConfig, wrapSimpleDemo(portConstraintsDemoConfig), 'portsAnchors', 2),
+  registerDemo(portPositionLimitsDemoConfig, wrapSimpleDemo(portPositionLimitsDemoConfig), 'portsAnchors', 3),
+  registerDemo(portBorderDemoConfig, wrapSimpleDemo(portBorderDemoConfig), 'portsAnchors', 4),
+  registerDemo(asymmetricPortMultiAnchorDemoConfig, AsymmetricPortMultiAnchorDemo, 'portsAnchors', 5),
+];
+
+const linksAndRouting = [
+  registerDemo(linkCancelDemoConfig, LinkCancelDemo, 'linksRouting', 1),
+  registerDemo(linkBendHandlesDemoConfig, wrapSimpleDemo(linkBendHandlesDemoConfig), 'linksRouting', 2),
+  registerDemo(linkLabelsDemoConfig, wrapSimpleDemo(linkLabelsDemoConfig), 'linksRouting', 3),
+  registerDemo(linkColorPoolDemoConfig, LinkColorPoolDemo, 'linksRouting', 4),
+  registerDemo(routingDemoConfig, wrapSimpleDemo(routingDemoConfig), 'linksRouting', 5),
+  registerDemo(obstacleRoutingDemoConfig, ObstacleRoutingDemo, 'linksRouting', 6),
+  registerDemo(offsetAnchorAvoidanceDemoConfig, OffsetAnchorAvoidanceDemo, 'linksRouting', 7),
+  registerDemo(vertexControlLinkSessionDemoConfig, VertexControlLinkSessionDemo, 'linksRouting', 8),
+];
+
+const eventsAndIntegration = [
+  registerDemo(eventHandlersDemoConfig, EventHandlersDemo, 'eventsIntegration', 1),
+  registerDemo(engineEventsDemoConfig, EngineEventsDemo, 'eventsIntegration', 2),
+  registerDemo(deletionEventsDemoConfig, DeletionEventsDemo, 'eventsIntegration', 3),
+  registerDemo(externalDragDropDemoConfig, ExternalDragDropDemo, 'eventsIntegration', 4),
+];
+
+export const demoTabs: DemoDefinition[] = [
+  ...basics,
+  ...layoutAndText,
+  ...shapes,
+  ...portsAndAnchors,
+  ...linksAndRouting,
+  ...eventsAndIntegration,
+]
+  .map(toDemoDefinition)
+  .sort(compareDemoDefinitions);