orcasvn-react-diagrams 0.2.7 → 0.2.9

package/src/displaybox/demos/elementVisibilitySelectionDemo.ts

@@ -0,0 +1,128 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const createElementVisibilitySelectionState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'policy-normal',
+      position: { x: 120, y: 160 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+      style: { fill: '#dbeafe', stroke: '#1d4ed8', strokeWidth: 2 },
+    },
+    {
+      id: 'policy-unselectable',
+      position: { x: 410, y: 160 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+      selectable: false,
+      style: { fill: '#e2e8f0', stroke: '#334155', strokeWidth: 2 },
+    },
+    {
+      id: 'policy-hidden',
+      position: { x: 700, y: 140 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+      visible: false,
+      style: { fill: '#fee2e2', stroke: '#dc2626', strokeWidth: 2 },
+    },
+  ],
+  ports: [
+    {
+      id: 'policy-normal-port',
+      elementId: 'policy-normal',
+      position: { x: 180, y: 60 },
+      shapeId: 'port-circle',
+    },
+    {
+      id: 'policy-unselectable-port',
+      elementId: 'policy-unselectable',
+      position: { x: 0, y: 60 },
+      shapeId: 'port-circle',
+    },
+    {
+      id: 'policy-hidden-port',
+      elementId: 'policy-hidden',
+      position: { x: 0, y: 60 },
+      shapeId: 'port-circle',
+    },
+  ],
+  links: [
+    {
+      id: 'policy-visible-link',
+      sourcePortId: 'policy-normal-port',
+      targetPortId: 'policy-unselectable-port',
+      points: [
+        { x: 300, y: 220 },
+        { x: 410, y: 220 },
+      ],
+      style: { stroke: '#2563eb', strokeWidth: 3 },
+    },
+    {
+      id: 'policy-hidden-link',
+      sourcePortId: 'policy-normal-port',
+      targetPortId: 'policy-hidden-port',
+      points: [
+        { x: 300, y: 220 },
+        { x: 700, y: 200 },
+      ],
+      style: { stroke: '#dc2626', strokeWidth: 3 },
+    },
+  ],
+  texts: [
+    {
+      id: 'policy-tip',
+      content:
+        'Blue node is normal. Slate node is visible but its body ignores click and marquee. Its port stays interactive. Hidden node, its port, and its attached red link stay in state but are suppressed from scene, selection, zoom-to-fit, and fit-to-content export.',
+      position: { x: 80, y: 72 },
+      size: { width: 760, height: 44 },
+      style: { fontSize: 14, fill: '#0f172a' },
+    },
+    {
+      id: 'policy-normal-label',
+      content: 'Normal selectable element',
+      position: { x: 16, y: 14 },
+      ownerId: 'policy-normal',
+    },
+    {
+      id: 'policy-unselectable-label',
+      content: 'Visible but body is unselectable',
+      position: { x: 16, y: 14 },
+      ownerId: 'policy-unselectable',
+    },
+    {
+      id: 'policy-hidden-label',
+      content: 'Hidden in state',
+      position: { x: 16, y: 14 },
+      ownerId: 'policy-hidden',
+    },
+  ],
+});
+
+export const elementVisibilitySelectionDemoConfig: DemoConfig = {
+  id: 'element-visibility-selection',
+  title: 'Element Visibility + Selectability',
+  description:
+    'QA scene for visible-but-unselectable element bodies, hidden-in-state elements, and port/link propagation. Shift + drag marquee to confirm only eligible items are collected.',
+  createState: createElementVisibilitySelectionState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'policy-filtered-selection',
+      label: 'Try filtered API selection',
+      run: (editor) => {
+        editor.setSelection([
+          'policy-normal',
+          'policy-unselectable',
+          'policy-hidden',
+          'policy-unselectable-port',
+          'policy-hidden-link',
+        ]);
+      },
+    },
+  ],
+};

package/src/displaybox/demos/index.tsx

@@ -5,7 +5,8 @@ import { linkPortCreationDemoConfig } from './linkPortCreationDemo';
 import { nestedDemoConfig } from './nestedDemo';
 import { customDemoConfig } from './customDemo';
 import { textDemoConfig } from './textDemo';
-import { selectionDemoConfig } from './selectionDemo';
+import { selectionDemoConfig } from './selectionDemo';
+import { elementVisibilitySelectionDemoConfig } from './elementVisibilitySelectionDemo';
 import { eventHandlersDemoConfig } from './eventHandlersDemo';
 import { engineEventsDemoConfig } from './engineEventsDemo';
 import { linkCancelDemoConfig } from './linkCancelDemo';
@@ -94,12 +95,18 @@ export const demoTabs: DemoDefinition[] = [
     description: textDemoConfig.description,
     Component: TextLayoutDemo,
   },
-  {
-    id: selectionDemoConfig.id,
-    title: selectionDemoConfig.title,
-    description: selectionDemoConfig.description,
-    Component: wrapSimpleDemo(selectionDemoConfig),
-  },
+  {
+    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,

package/src/displaybox/demos/selectionDemo.ts

@@ -20,20 +20,20 @@ const createSelectionState = (): DiagramState => ({
   ports: [],
   links: [],
   texts: [
-    {
-      id: 'select-tip',
-      content: 'Click to select, drag to move, Delete/Backspace to remove.',
-      position: { x: 80, y: 80 },
-    },
-  ],
-});
+    {
+      id: 'select-tip',
+      content: 'Click to select, drag to move, drag empty paper to pan, Shift + drag to marquee-select.',
+      position: { x: 80, y: 80 },
+    },
+  ],
+});
 
 export const selectionDemoConfig: DemoConfig = ({
-  id: 'selection',
-  title: 'Selection + Interaction',
-  description: 'Click to select, drag to move, marquee-select on empty space, delete to remove.',
-  createState: createSelectionState,
-  elementShapes: baseElementShapes,
+  id: 'selection',
+  title: 'Selection + Interaction',
+  description: 'Click to select, drag to move, drag empty paper to pan, Shift + drag to marquee-select, delete to remove.',
+  createState: createSelectionState,
+  elementShapes: baseElementShapes,
   portShapes: basePortShapes,
   defaultElementShapeId: 'default',
   defaultPortShapeId: 'port-circle',