orcasvn-react-diagrams 0.2.11 → 0.2.13

package/src/displaybox/demos/linkLabelsDemo.ts

@@ -0,0 +1,164 @@
+import type { DiagramEditorHandle, DiagramState, Point } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const linkLabelDemoSourceId = 'link-label-source';
+const linkLabelDemoTargetId = 'link-label-target';
+const linkLabelDemoLinkId = 'link-label-link';
+const linkLabelDemoTextId = 'link-label-text';
+
+const resolveLinkMidpoint = (points: Point[]): Point => {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return { ...points[0] };
+
+  let total = 0;
+  for (let index = 1; index < points.length; index += 1) {
+    total += Math.hypot(points[index].x - points[index - 1].x, points[index].y - points[index - 1].y);
+  }
+
+  const halfway = total / 2;
+  let travelled = 0;
+  for (let index = 1; index < points.length; index += 1) {
+    const segment = Math.hypot(points[index].x - points[index - 1].x, points[index].y - points[index - 1].y);
+    if (travelled + segment >= halfway) {
+      const ratio = segment === 0 ? 0 : (halfway - travelled) / segment;
+      return {
+        x: points[index - 1].x + (points[index].x - points[index - 1].x) * ratio,
+        y: points[index - 1].y + (points[index].y - points[index - 1].y) * ratio,
+      };
+    }
+    travelled += segment;
+  }
+
+  return { ...points[points.length - 1] };
+};
+
+const nudgeLinkLabel = (editor: DiagramEditorHandle, state: DiagramState) => {
+  const link = state.links.find((item) => item.id === linkLabelDemoLinkId);
+  const label = state.texts.find((item) => item.id === linkLabelDemoTextId);
+  if (!link || !label) return;
+  const midpoint = resolveLinkMidpoint(link.points);
+  editor.moveTextTo(linkLabelDemoTextId, midpoint.x + 72, midpoint.y - 24);
+};
+
+export const createLinkLabelsState = (): DiagramState => ({
+  elements: [
+    {
+      id: linkLabelDemoSourceId,
+      position: { x: 120, y: 180 },
+      size: { width: 220, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: linkLabelDemoTargetId,
+      position: { x: 500, y: 220 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'link-label-source-port',
+      elementId: linkLabelDemoSourceId,
+      position: { x: 220, y: 60 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'link-label-target-port',
+      elementId: linkLabelDemoTargetId,
+      position: { x: 0, y: 70 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    {
+      id: linkLabelDemoLinkId,
+      sourcePortId: 'link-label-source-port',
+      targetPortId: 'link-label-target-port',
+      points: [],
+    },
+  ],
+  texts: [
+    {
+      id: `${linkLabelDemoSourceId}-label`,
+      content: 'Source node',
+      position: { x: 12, y: -14 },
+      ownerId: linkLabelDemoSourceId,
+    },
+    {
+      id: `${linkLabelDemoTargetId}-label`,
+      content: 'Move me, reroute me',
+      position: { x: 12, y: -14 },
+      ownerId: linkLabelDemoTargetId,
+    },
+    {
+      id: linkLabelDemoTextId,
+      content: 'I am just owned text',
+      position: { x: 0, y: -24 },
+      ownerId: linkLabelDemoLinkId,
+      layout: {
+        boundsMode: 'fixed',
+        fixedSize: { width: 160, height: 24 },
+        wrap: 'none',
+        overflow: 'ellipsis-end',
+      },
+      style: {
+        fill: '#1f2937',
+        backgroundFill: '#fef3c7',
+        padding: 4,
+      },
+    },
+    {
+      id: 'link-label-tip',
+      content: 'This label is TextData owned by the link. Drag or edit it, reroute the link, then delete the link to confirm the label follows and cascades away.',
+      position: { x: 120, y: 110 },
+      layout: {
+        boundsMode: 'fixed',
+        fixedSize: { width: 620, height: 44 },
+        wrap: 'word',
+        overflow: 'clip',
+        padding: 0,
+      },
+      style: {
+        fill: '#475569',
+      },
+    },
+  ],
+});
+
+export const linkLabelsDemoConfig: DemoConfig = {
+  id: 'link-labels',
+  title: 'Link Labels',
+  description: 'Link-owned text stays anchored to the route midpoint. Drag or edit the label, reroute the link, then delete the link to watch the owned text disappear with it.',
+  createState: createLinkLabelsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'link-label-offset',
+      label: 'Offset label via API',
+      run: (editor, state) => nudgeLinkLabel(editor, state),
+    },
+    {
+      id: 'link-label-reroute',
+      label: 'Move target + reroute',
+      run: (editor) => {
+        editor.moveElementTo(linkLabelDemoTargetId, 660, 320);
+        editor.rerouteAllLinks();
+      },
+    },
+    {
+      id: 'link-label-delete',
+      label: 'Delete labeled link',
+      run: (editor) => {
+        editor.removeLink(linkLabelDemoLinkId);
+      },
+    },
+  ],
+};

package/src/displaybox/demos/linkPortCreationDemo.ts

@@ -33,13 +33,13 @@ const createLinkPortCreationState = (): DiagramState => ({
   ],
 });
 
-export const linkPortCreationDemoConfig: DemoConfig = ({
-  id: 'link-port-creation',
-  title: 'Link Creates Port',
-  description: 'Drag from a port to an element to auto-create a target port.',
-  createState: createLinkPortCreationState,
-  elementShapes: baseElementShapes,
-  portShapes: basePortShapes,
+export const linkPortCreationDemoConfig: DemoConfig = ({
+  id: 'link-port-creation',
+  title: 'Link Creates Port',
+  description: 'Drag from a port to an element to auto-create a target port, then compare default and host-customized target-port creation.',
+  createState: createLinkPortCreationState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
   defaultElementShapeId: 'default',
   defaultPortShapeId: 'port-circle',
   actions: [],

package/src/displaybox/types.ts

@@ -17,10 +17,10 @@ export type DemoAction = {
   ) => void;
 };
 
-export type DemoConfig = {
-  id: string;
-  title: string;
-  description: string;
+export type DemoConfig = {
+  id: string;
+  title: string;
+  description: string;
   createState: () => DiagramState;
   elementShapes?: SimpleShape[];
   portShapes?: SimpleShape[];
@@ -33,13 +33,23 @@ export type DemoConfig = {
   stageStyle?: CSSProperties;
   actions: DemoAction[];
 };
-
-export type DemoDefinition = {
-  id: string;
-  title: string;
-  description: string;
-  Component: React.ComponentType;
-};
+
+export type DemoMenuGroup =
+  | 'basics'
+  | 'layoutText'
+  | 'shapes'
+  | 'portsAnchors'
+  | 'linksRouting'
+  | 'eventsIntegration';
+
+export type DemoDefinition = {
+  id: string;
+  title: string;
+  description: string;
+  Component: React.ComponentType;
+  menuGroup: DemoMenuGroup;
+  menuOrder: number;
+};
 
 export type ToolboxItem = {
   id: string;

package/src/examples/index.ts

@@ -14,6 +14,7 @@ export type {
   DemoActionHelpers,
   DemoConfig,
   DemoDefinition,
+  DemoMenuGroup,
   ToolboxItem,
   DiagramCounts,
   ViewportSnapshot,