orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/shapeGalleryDemo.ts

@@ -0,0 +1,73 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { basePortShapes, customGalleryShapes } from './shared';
+
+const createShapeGalleryState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'shape-rect',
+      position: { x: 80, y: 80 },
+      size: { width: 170, height: 110 },
+      shapeId: 'rect-basic',
+    },
+    {
+      id: 'shape-circle',
+      position: { x: 310, y: 65 },
+      size: { width: 140, height: 140 },
+      shapeId: 'circle-basic',
+    },
+    {
+      id: 'shape-ellipse',
+      position: { x: 500, y: 95 },
+      size: { width: 210, height: 120 },
+      shapeId: 'ellipse-basic',
+    },
+    {
+      id: 'shape-diamond',
+      position: { x: 760, y: 80 },
+      size: { width: 150, height: 120 },
+      shapeId: 'diamond-basic',
+    },
+    {
+      id: 'shape-triangle',
+      position: { x: 90, y: 290 },
+      size: { width: 180, height: 130 },
+      shapeId: 'triangle-basic',
+    },
+    {
+      id: 'shape-pentagon',
+      position: { x: 360, y: 280 },
+      size: { width: 170, height: 150 },
+      shapeId: 'pentagon-basic',
+    },
+    {
+      id: 'shape-hexagon',
+      position: { x: 620, y: 290 },
+      size: { width: 200, height: 130 },
+      shapeId: 'hexagon-basic',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    { id: 'shape-rect-label', content: 'Rectangle', position: { x: 12, y: -12 }, ownerId: 'shape-rect' },
+    { id: 'shape-circle-label', content: 'Circle', position: { x: 12, y: -12 }, ownerId: 'shape-circle' },
+    { id: 'shape-ellipse-label', content: 'Ellipse / Oval', position: { x: 12, y: -12 }, ownerId: 'shape-ellipse' },
+    { id: 'shape-diamond-label', content: 'Diamond', position: { x: 12, y: -12 }, ownerId: 'shape-diamond' },
+    { id: 'shape-triangle-label', content: 'Triangle', position: { x: 12, y: -12 }, ownerId: 'shape-triangle' },
+    { id: 'shape-pentagon-label', content: 'Pentagon', position: { x: 12, y: -12 }, ownerId: 'shape-pentagon' },
+    { id: 'shape-hexagon-label', content: 'Hexagon', position: { x: 12, y: -12 }, ownerId: 'shape-hexagon' },
+  ],
+});
+
+export const shapeGalleryDemoConfig: DemoConfig = ({
+  id: 'shape-gallery',
+  title: 'Custom Shapes Gallery',
+  description: 'Compare circle vs ellipse plus baseline and polygonal shapes (rect, diamond, triangle, pentagon, hexagon).',
+  createState: createShapeGalleryState,
+  elementShapes: customGalleryShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'rect-basic',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/shapeHoverControlsDemo.ts

@@ -0,0 +1,172 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const shapeHoverDemoIds = {
+  drawer: 'hover-drawer',
+  diamond: 'hover-diamond',
+  target: 'hover-target-rect',
+  ellipse: 'hover-ellipse-host',
+  circle: 'hover-circle-host',
+  noopRect: 'hover-noop-rect',
+} as const;
+
+const elementShapes = [
+  ...baseElementShapes,
+  {
+    id: 'hover-diamond-shape',
+    kind: 'diamond' as const,
+    style: {
+      fill: '#f8ecff',
+      stroke: '#6b3fa0',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'hover-ellipse-shape',
+    kind: 'ellipse' as const,
+    style: {
+      fill: '#edf8ff',
+      stroke: '#2b6f99',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'hover-circle-shape',
+    kind: 'circle' as const,
+    style: {
+      fill: '#ecfdf5',
+      stroke: '#0f766e',
+      strokeWidth: 2,
+    },
+  },
+];
+
+const createShapeHoverControlsState = (): DiagramState => ({
+  elements: [
+    {
+      id: shapeHoverDemoIds.drawer,
+      position: { x: 80, y: 100 },
+      size: { width: 380, height: 230 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'hover-drawer-child-a',
+      parentId: shapeHoverDemoIds.drawer,
+      position: { x: 32, y: 64 },
+      size: { width: 130, height: 70 },
+      shapeId: 'default',
+    },
+    {
+      id: 'hover-drawer-child-b',
+      parentId: shapeHoverDemoIds.drawer,
+      position: { x: 212, y: 64 },
+      size: { width: 130, height: 70 },
+      shapeId: 'default',
+    },
+    {
+      id: shapeHoverDemoIds.diamond,
+      position: { x: 560, y: 120 },
+      size: { width: 170, height: 130 },
+      shapeId: 'hover-diamond-shape',
+    },
+    {
+      id: shapeHoverDemoIds.target,
+      position: { x: 820, y: 140 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: shapeHoverDemoIds.ellipse,
+      position: { x: 540, y: 350 },
+      size: { width: 240, height: 120 },
+      shapeId: 'hover-ellipse-shape',
+    },
+    {
+      id: shapeHoverDemoIds.circle,
+      position: { x: 830, y: 340 },
+      size: { width: 140, height: 140 },
+      shapeId: 'hover-circle-shape',
+    },
+    {
+      id: shapeHoverDemoIds.noopRect,
+      position: { x: 1010, y: 360 },
+      size: { width: 180, height: 110 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'hover-drawer-label',
+      content: 'Drawer (hover bottom edge control to add child)',
+      ownerId: shapeHoverDemoIds.drawer,
+      position: { x: 14, y: 14 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'hover-diamond-label',
+      content: 'Diamond vertex control creates link',
+      ownerId: shapeHoverDemoIds.diamond,
+      position: { x: 8, y: -16 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'hover-target-label',
+      content: 'Rectangle target',
+      ownerId: shapeHoverDemoIds.target,
+      position: { x: 12, y: -14 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'hover-ellipse-label',
+      content: 'Ellipse enum targets: top/right/bottom/left',
+      ownerId: shapeHoverDemoIds.ellipse,
+      position: { x: 12, y: -14 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'hover-circle-label',
+      content: 'Circle enum targets',
+      ownerId: shapeHoverDemoIds.circle,
+      position: { x: 10, y: -14 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'hover-noop-rect-label',
+      content: 'Rectangle no-op for ellipse-midpoint',
+      ownerId: shapeHoverDemoIds.noopRect,
+      position: { x: 10, y: -14 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+  ],
+});
+
+export const shapeHoverControlsDemoConfig: DemoConfig = {
+  id: 'shape-hover-controls',
+  title: 'Shape Hover Controls',
+  description:
+    'Host-configured edge/midpoint/vertex plus ellipse-midpoint controls with trigger modes, selectors, click actions, and drag event logging.',
+  createState: createShapeHoverControlsState,
+  elementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'focus-drawer',
+      label: 'Focus drawer',
+      run: (editor) => {
+        editor.setSelection([shapeHoverDemoIds.drawer]);
+      },
+    },
+    {
+      id: 'focus-diamond',
+      label: 'Focus diamond',
+      run: (editor) => {
+        editor.setSelection([shapeHoverDemoIds.diamond]);
+      },
+    },
+  ],
+};

package/src/displaybox/demos/shared.ts

@@ -0,0 +1,161 @@
+import type { CSSProperties } from 'react';
+import type { SimpleShape } from '../../api';
+import type { ToolboxItem } from '../types';
+import type { RouterStrategy } from '../../strategies/RouterStrategy';
+
+export const baseElementShapes: SimpleShape[] = [
+  {
+    id: 'default',
+    kind: 'rect',
+    style: {
+      cornerRadius: 8,
+      fill: '#e6f2ff',
+      stroke: '#1f4d99',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'panel',
+    kind: 'rect',
+    style: {
+      cornerRadius: 14,
+      fill: '#fff4dd',
+      stroke: '#a26722',
+      strokeWidth: 2,
+    },
+  },
+];
+
+export const basePortShapes: SimpleShape[] = [
+  {
+    id: 'port-circle',
+    kind: 'circle',
+    style: {
+      radius: 6,
+      fill: '#ffffff',
+      stroke: '#1f4d99',
+      strokeWidth: 2,
+      name: 'port',
+    },
+  },
+  {
+    id: 'port-dark',
+    kind: 'circle',
+    style: {
+      radius: 5,
+      fill: '#1f4d99',
+      stroke: '#1f4d99',
+      strokeWidth: 1,
+      name: 'port',
+    },
+  },
+];
+
+export const customGalleryShapes: SimpleShape[] = [
+  {
+    id: 'rect-basic',
+    kind: 'rect',
+    style: {
+      cornerRadius: 8,
+      fill: '#e6f2ff',
+      stroke: '#1f4d99',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'circle-basic',
+    kind: 'circle',
+    style: {
+      fill: '#eaf7e6',
+      stroke: '#2f7a3d',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'ellipse-basic',
+    kind: 'ellipse',
+    style: {
+      fill: '#e8f8ff',
+      stroke: '#1e6b8f',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'diamond-basic',
+    kind: 'diamond',
+    style: {
+      fill: '#fff0f3',
+      stroke: '#c0392b',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'triangle-basic',
+    kind: 'triangle',
+    style: {
+      fill: '#f3f1ff',
+      stroke: '#5b3cc4',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'pentagon-basic',
+    kind: 'pentagon',
+    style: {
+      fill: '#fef5e7',
+      stroke: '#b86d1f',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'hexagon-basic',
+    kind: 'hexagon',
+    style: {
+      fill: '#eefbe9',
+      stroke: '#3f7b2c',
+      strokeWidth: 2,
+    },
+  },
+];
+
+export const externalToolboxItems: ToolboxItem[] = [
+  {
+    id: 'toolbox-default',
+    label: 'Standard Node',
+    shapeId: 'default',
+    size: { width: 180, height: 120 },
+  },
+  {
+    id: 'toolbox-panel',
+    label: 'Panel Node',
+    shapeId: 'panel',
+    size: { width: 220, height: 140 },
+  },
+];
+
+export const defaultGhostSize = { width: 180, height: 120 };
+
+export const defaultSvgPath = 'M10 10 H110 V90 H10 Z';
+export const defaultSvgPathSize = { width: 180, height: 120 };
+
+export const orthogonalRouter: RouterStrategy = {
+  route: (source, target) => {
+    if (Math.abs(source.x - target.x) < 1 || Math.abs(source.y - target.y) < 1) {
+      return [{ ...source }, { ...target }];
+    }
+    const midX = Math.round((source.x + target.x) / 2);
+    return [
+      { ...source },
+      { x: midX, y: source.y },
+      { x: midX, y: target.y },
+      { ...target },
+    ];
+  },
+};
+
+export const gridStageStyle: CSSProperties = {
+  backgroundColor: '#f8f8f8',
+  backgroundImage:
+    'linear-gradient(0deg, rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px)',
+  backgroundSize: '20px 20px',
+};

package/src/displaybox/demos/svgPathDemo.ts

@@ -0,0 +1,71 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createSvgPathDemoState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'svg-host',
+      position: { x: 260, y: 190 },
+      size: { width: 320, height: 220 },
+      shapeId: 'default',
+    },
+    {
+      id: 'svg-peer',
+      position: { x: 680, y: 230 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'svg-host-port',
+      elementId: 'svg-host',
+      position: { x: 0, y: 110 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'svg-peer-port',
+      elementId: 'svg-peer',
+      position: { x: 0, y: 70 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  links: [],
+  texts: [
+    {
+      id: 'svg-path-tip',
+      content: 'Use presets (crow-foot, optional, mandatory) to insert relationship glyph ports quickly.',
+      position: { x: 120, y: 100 },
+    },
+    {
+      id: 'svg-host-label',
+      content: 'SVG Port Host',
+      position: { x: 12, y: -14 },
+      ownerId: 'svg-host',
+    },
+    {
+      id: 'svg-peer-label',
+      content: 'Link Target Host',
+      position: { x: 12, y: -14 },
+      ownerId: 'svg-peer',
+    },
+  ],
+});
+
+export const svgPathDemoConfig: DemoConfig = ({
+  id: 'svg-path',
+  title: 'SVG Glyph Ports',
+  description:
+    'Paste custom paths or use uncommon ERD-style presets (including crow-foot) with manual or border-normal orientation.',
+  createState: createSvgPathDemoState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/textDemo.ts

@@ -0,0 +1,62 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const textDemoOwnerId = 'text-layout-owner';
+export const textDemoOwnedTextId = 'text-owned-overflow';
+export const textDemoFloatingTextId = 'text-floating-overflow';
+export const textDemoLongSample =
+  'Long diagram label: middle ellipsis should keep the beginning and end visible while preserving the full canonical content in model state.';
+
+const createTextOwnershipState = (): DiagramState => ({
+  elements: [
+    {
+      id: textDemoOwnerId,
+      position: { x: 160, y: 170 },
+      size: { width: 260, height: 140 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: textDemoOwnedTextId,
+      content: textDemoLongSample,
+      position: { x: 12, y: 12 },
+      ownerId: textDemoOwnerId,
+      layout: {
+        boundsMode: 'owner-width',
+        wrap: 'none',
+        overflow: 'ellipsis-middle',
+        padding: 12,
+      },
+    },
+    {
+      id: textDemoFloatingTextId,
+      content: textDemoLongSample,
+      position: { x: 470, y: 120 },
+      layout: {
+        boundsMode: 'fixed',
+        fixedSize: { width: 240, height: 90 },
+        wrap: 'word',
+        overflow: 'ellipsis-end',
+        padding: 8,
+        maxLines: 3,
+      },
+    },
+  ],
+});
+
+export const textDemoConfig: DemoConfig = ({
+  id: 'text',
+  title: 'Text Layout + Overflow',
+  description:
+    'Owner-constrained and fixed-bounds text with wrap and ellipsis behavior. Full content is preserved in model state; truncation is visual-only.',
+  createState: createTextOwnershipState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/types.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties } from 'react';
+import type { DiagramEditorHandle, DiagramState, SimpleShape } from '../api';
+import type { RouterStrategy } from '../strategies/RouterStrategy';
+
+export type DemoActionHelpers = {
+  nextOffset: () => number;
+};
+
+export type DemoAction = {
+  id: string;
+  label: string;
+  run: (
+    editor: DiagramEditorHandle,
+    state: DiagramState,
+    demo: DemoConfig,
+    helpers: DemoActionHelpers
+  ) => void;
+};
+
+export type DemoConfig = {
+  id: string;
+  title: string;
+  description: string;
+  createState: () => DiagramState;
+  elementShapes?: SimpleShape[];
+  portShapes?: SimpleShape[];
+  defaultElementShapeId?: string;
+  defaultPortShapeId?: string;
+  router?: RouterStrategy;
+  snapDefault?: boolean;
+  stageStyle?: CSSProperties;
+  actions: DemoAction[];
+};
+
+export type DemoDefinition = {
+  id: string;
+  title: string;
+  description: string;
+  Component: React.ComponentType;
+};
+
+export type ToolboxItem = {
+  id: string;
+  label: string;
+  shapeId: string;
+  size: { width: number; height: number };
+};
+
+export type DiagramCounts = {
+  elements: number;
+  ports: number;
+  links: number;
+  texts: number;
+};
+
+export type ViewportSnapshot = {
+  pan: { x: number; y: number };
+  zoom: number;
+};
+
+export type DisplayBoxMetrics = {
+  selection: string[];
+  counts: DiagramCounts;
+  viewport: ViewportSnapshot;
+  snapEnabled: boolean;
+};

package/src/examples/index.ts

@@ -0,0 +1,21 @@
+export {
+  demoTabs,
+  baseElementShapes,
+  basePortShapes,
+  customGalleryShapes,
+  defaultGhostSize,
+  defaultSvgPath,
+  defaultSvgPathSize,
+  externalToolboxItems,
+} from '../displaybox/demos';
+
+export type {
+  DemoAction,
+  DemoActionHelpers,
+  DemoConfig,
+  DemoDefinition,
+  ToolboxItem,
+  DiagramCounts,
+  ViewportSnapshot,
+  DisplayBoxMetrics,
+} from '../displaybox/types';