dtoro
a0566ce64c
apps/web — Next.js 16 + TypeScript + React 19 (no Tailwind) M1 Visual port - Manuscript theme + base styles ported verbatim from design-source - 100dvh layout with internal scroll regions (rail / narrative / dock thread) - TopBar, LeftRail (collapsible sections + collapsed strip), CanvasHeader, StatusBar, EditorShell composing the dual-canvas - SocratesDock (subtle/default/prominent) with bubbles + numbered options - Sigil (Σ + laurel) used across editor and seed screens - SeedScreen with emerging-seed rail, mini-graph, confidence bar, thread, typing indicator, input row - Routes: / (homepage), /editor/[projectId], /seed - Aristotle fixture in lib/fixtures (ported from data.js) M2 Real text editor - TipTap (StarterKit + custom Chip atom inline node + ReactNodeViewRenderer) - Slash-menu insertion via @tiptap/suggestion with arrow / number-key shortcuts - ChipFocusContext bridges narrative ↔ diagram hover/selection across the TipTap render boundary - fixtureToDoc converts the fixture narrative → ProseMirror JSON M3 Real diagram - React Flow (@xyflow/react) custom node (block / actor / constraint / system) matching prototype's softened look - Custom edge with bezier path + label renderer (association / composition / constraint variants) - Drag-create from a left-side palette via HTML5 DnD + screenToFlowPosition - NodeInspector panel: edit kind / label / properties (or expression for constraints); delete cascades to incident edges - Bidirectional focus highlighting between chips (narrative) and blocks (diagram) - Removed redundant legend (stereotype labels on nodes serve same purpose) State for M3 lives in component memory; persistence + bidirectional sync land in M4–M5.
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
// Custom edge that renders association / composition / constraint variants.
|
|
// - association: solid line with arrow
|
|
// - composition: solid line with diamond marker at the source side
|
|
// - constraint: dashed line, no arrow
|
|
|
|
"use client";
|
|
|
|
import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from "@xyflow/react";
|
|
import type { AssociationKind } from "../../../lib/fixtures/aristotle";
|
|
|
|
export interface SysmlEdgeData extends Record<string, unknown> {
|
|
label?: string;
|
|
kind: AssociationKind;
|
|
}
|
|
|
|
export function SysmlEdge(props: EdgeProps) {
|
|
const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, markerStart } = props;
|
|
const d = (data ?? {}) as SysmlEdgeData;
|
|
const kind = d.kind ?? "association";
|
|
|
|
const [edgePath, labelX, labelY] = getBezierPath({
|
|
sourceX, sourceY,
|
|
sourcePosition,
|
|
targetX, targetY,
|
|
targetPosition,
|
|
curvature: 0.25,
|
|
});
|
|
|
|
const isConstraint = kind === "constraint";
|
|
|
|
return (
|
|
<>
|
|
<BaseEdge
|
|
id={props.id}
|
|
path={edgePath}
|
|
style={{
|
|
stroke: "var(--edge)",
|
|
strokeWidth: 1,
|
|
strokeDasharray: isConstraint ? "4 4" : undefined,
|
|
opacity: 0.85,
|
|
}}
|
|
markerEnd={markerEnd}
|
|
markerStart={markerStart}
|
|
/>
|
|
|
|
{d.label && (
|
|
<EdgeLabelRenderer>
|
|
<div
|
|
className="sysml-edge-label"
|
|
style={{
|
|
position: "absolute",
|
|
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
|
}}
|
|
>
|
|
{d.label}
|
|
</div>
|
|
</EdgeLabelRenderer>
|
|
)}
|
|
</>
|
|
);
|
|
}
|