orcasvn-react-diagrams 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -0,0 +1,51 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+## [0.2.3] - 2026-05-03
+
+### Added
+- Diagram export to image support, including fit-to-content export options.
+- Programmatic link-session support for vertex-control drag workflows.
+- Asymmetric multi-anchor port demo expansion with multiple SVG glyph variants.
+- Auto-layout label reserved-space handling and related demo coverage.
+
+### Changed
+- Asymmetric SVG-path multi-anchor transform/orientation behavior for deterministic border-side placement.
+- DisplayBox demo coverage consolidated for auto-layout and vertex-control scenarios.
+- Vertex-control session logs in demo flows improved for collapse/scroll stability.
+
+### Fixed
+- Restored port selection priority when shape hover controls are active.
+- Suppressed occupied vertex targets when an element-owned port already occupies that anchor.
+- Guarded invalid vertex-control link drop cleanup to prevent re-entrant stack overflow.
+- Corrected initial external-link endpoint alignment in asymmetric multi-anchor demo.
+- Kept auto-layout label text visible in consolidated demo scenarios.
+
+### Docs
+- Updated release highlights in `README.md` for `v0.2.3`.
+- Added release-process requirement to maintain changelog entries in `RELEASE_AGENTS.md`.
+
+## [0.2.2] - 2026-04-25
+
+### Added
+- Discrete port anchor constraints with anchor-based movement support.
+- Shape hover controls for edge and vertex targets with configurable trigger modes.
+- Ellipse midpoint control enumeration support.
+- DisplayBox demos for discrete anchors, hover controls, and ellipse midpoints.
+
+### Changed
+- Refactored built-in shape behavior to class-based implementations.
+- Removed remaining runtime `boundaryKind` branching in shape behavior paths.
+- Extracted engine internals into dedicated services:
+  - text layout service
+  - auto layout service
+  - link routing service
+  - mutation pipeline
+
+### Fixed
+- Improved rotated-shape selection, hit testing, and resize alignment consistency.
+- Improved shape-aware endpoint edge detection for link routing.
+
+### Docs
+- Refreshed DisplayBox verification coverage for shape class and rotation behavior.

package/README.md

@@ -1,88 +1,107 @@
-# orcasvn-react-diagrams
-
-Diagram editor library with a Konva-backed editor (`createDiagramEditor`) and an engine-only API (`createDiagramEngine`).
-
-## Install
-
-```bash
-npm install orcasvn-react-diagrams
-```
-
-Node engine for this repository/toolchain: `>=18.17.0 <19.0.0`.
-
-## Quick Start
-
-```ts
-import { createDiagramEditor } from 'orcasvn-react-diagrams';
-
-const editor = createDiagramEditor({
-  container: document.getElementById('diagram-root') as HTMLDivElement,
-  width: 960,
-  height: 600,
-  initialState: { elements: [], ports: [], links: [], texts: [] },
-});
-
-editor.addElement({
-  id: 'node-1',
-  position: { x: 80, y: 80 },
-  size: { width: 160, height: 100 },
-  shapeId: 'default',
-});
-```
-
-## DisplayBox Review Surface
-
-The published package also exposes the full demo review surface used by this repository's hosted example app:
-
-```ts
-import { DisplayBox, demoTabs } from 'orcasvn-react-diagrams/displaybox';
-```
-
-Use this entrypoint when you want to review the packaged demo scenarios from an installed npm dependency instead of importing repository source files directly.
-
-## API Docs
-
-- Human-first docs index: `docs/INDEX.md`
-- API contract: `docs/API_CONTRACT.md`
-- State invariants: `docs/STATE_INVARIANTS.md`
-- Integration: `docs/INTEGRATION_PLAYBOOK.md`
-
-Machine-readable docs shipped in npm package:
-
-- `ai/manifest.json`
-- `ai/api-contract.json`
-- `ai/invariants.json`
-
-UNPKG examples:
-
-- `https://unpkg.com/orcasvn-react-diagrams@<version>/ai/manifest.json`
-- `https://unpkg.com/orcasvn-react-diagrams@<version>/docs/INDEX.md`
-
-Node subpath export:
-
-- `orcasvn-react-diagrams/ai-manifest`
-
-## External Drag And Drop
-
-```ts
-const world = editor.clientToWorld(
-  { x: event.clientX, y: event.clientY },
-  stageContainer
-);
-
-editor.addElement({
-  id,
-  position: { x: world.x - width / 2, y: world.y - height / 2 },
-  size: { width, height },
-  shapeId,
-});
-```
-
-## Scripts (Repository Development)
-
-- `npm start`: run demo app.
-- `npm run start-doc`: serve `analysis/`.
-- `npm test`: run tests (watch mode).
-- `npm run typecheck`: run TypeScript checks.
-- `npm run build`: CRA build to `build/`.
-- `npm run rollup-build-lib`: library build to `dist/`.
+# orcasvn-react-diagrams
+
+Diagram editor library with a Konva-backed editor (`createDiagramEditor`) and an engine-only API (`createDiagramEngine`).
+
+## Install
+
+```bash
+npm install orcasvn-react-diagrams
+```
+
+Node engine for this repository/toolchain: `>=20.17.0 <21.0.0`.
+
+## Quick Start
+
+```ts
+import { createDiagramEditor } from 'orcasvn-react-diagrams';
+
+const editor = createDiagramEditor({
+  container: document.getElementById('diagram-root') as HTMLDivElement,
+  width: 960,
+  height: 600,
+  initialState: { elements: [], ports: [], links: [], texts: [] },
+});
+
+editor.addElement({
+  id: 'node-1',
+  position: { x: 80, y: 80 },
+  size: { width: 160, height: 100 },
+  shapeId: 'default',
+});
+```
+
+## Release Highlights (v0.2.3)
+
+- Includes all completed `v0.2.1` and `v0.2.2` work, plus `v0.2.3` updates.
+- `v0.2.3` interaction and stability updates:
+  - restored port-selection priority over vertex controls
+  - suppressed occupied-vertex controls where ports already own the anchor
+  - hardened invalid vertex-control link-drop cancellation to prevent re-entrant stack overflow
+- `v0.2.3` demo and behavior updates:
+  - asymmetric multi-anchor demo now aligns initial external link endpoints deterministically
+  - added multiple asymmetric SVG glyph variants for multi-anchor comparison
+  - consolidated auto-layout demo coverage with label-visibility fixes
+- Shape system upgrade:
+  - class-based built-in shape behaviors
+  - runtime removal of `boundaryKind` branching
+  - additive rotation (`baseRotation` + instance rotation style)
+- Port movement enhancements:
+  - shape-aware border projection
+  - optional anchor-constrained movement (`portMovement.moveMode = 'anchors'`)
+  - orientation support with host-border normals and resize reprojection
+- Shape hover controls:
+  - generic control definitions with `targetKind` (`edge`, `vertex`, `midpoint`, `ellipse-midpoint`)
+  - trigger modes (`element-hover`, `target-hover`)
+  - interaction callbacks for click and drag lifecycle
+- Text layout improvements:
+  - owner/fixed bounds modes, wrap and overflow controls, and layout padding
+  - `textUpdated` lifecycle event with rendered display content
+- Additional lifecycle events:
+  - `portDeleted`, `linkDeleted`, `textDeleted`
+
+## API Docs
+
+- Human-first docs index: `docs/INDEX.md`
+- API contract: `docs/API_CONTRACT.md`
+- State invariants: `docs/STATE_INVARIANTS.md`
+- Integration: `docs/INTEGRATION_PLAYBOOK.md`
+
+Machine-readable docs shipped in npm package:
+
+- `ai/manifest.json`
+- `ai/api-contract.json`
+- `ai/invariants.json`
+
+UNPKG examples:
+
+- `https://unpkg.com/orcasvn-react-diagrams@<version>/ai/manifest.json`
+- `https://unpkg.com/orcasvn-react-diagrams@<version>/docs/INDEX.md`
+
+Node subpath export:
+
+- `orcasvn-react-diagrams/ai-manifest`
+
+## External Drag And Drop
+
+```ts
+const world = editor.clientToWorld(
+  { x: event.clientX, y: event.clientY },
+  stageContainer
+);
+
+editor.addElement({
+  id,
+  position: { x: world.x - width / 2, y: world.y - height / 2 },
+  size: { width, height },
+  shapeId,
+});
+```
+
+## Scripts (Repository Development)
+
+- `npm start`: run demo app.
+- `npm run start-doc`: serve `analysis/`.
+- `npm test`: run tests (watch mode).
+- `npm run typecheck`: run TypeScript checks.
+- `npm run build`: CRA build to `build/`.
+- `npm run rollup-build-lib`: library build to `dist/`.