g3-toolkit API Reference
    Preparing search index...

    Interface StructuralSvgViewProps

    interface StructuralSvgViewProps {
        clickDragThreshold?: number;
        closedContainers?: ReadonlySet<string>;
        "data-testid"?: string;
        direction?: "RIGHT" | "LEFT" | "DOWN" | "UP";
        dragOffsets?: Record<string, { dx: number; dy: number }>;
        geometry: StructuralGeometry;
        glyphs?: ReadonlyMap<
            string,
            { slot: GlyphSlot; text: string; title?: string },
        >;
        headerLines?: 1 | 2;
        height: number;
        input: StructuralGraphInput;
        nodeStyles?: ReadonlyMap<string, StructuralNodeStyle>;
        onDragOffsetsChange?: (
            offsets: Record<string, { dx: number; dy: number }>,
        ) => void;
        onElementClick?: (info: ElementPointerInfo<StructuralHit>) => void;
        onElementContextMenu?: (info: ElementPointerInfo<StructuralHit>) => void;
        onElementEnter?: (info: ElementPointerInfo<StructuralHit>) => void;
        onElementLeave?: (info: ElementPointerInfo<StructuralHit>) => void;
        onElementPointerDown?: (info: ElementPointerInfo<StructuralHit>) => void;
        onElementPointerUp?: (info: ElementPointerInfo<StructuralHit>) => void;
        onNodeMove?: (nodeId: string, dx: number, dy: number) => void;
        onNodeStyleGeometryChange?: (nodeId: string, size: number) => void;
        onViewChange?: (view: SvgViewTransform) => void;
        pinchZoom?: boolean;
        rowSeverities?: ReadonlyMap<string, "violation" | "warning" | "info">;
        theme?: StructuralSvgTheme;
        view?: SvgViewTransform;
        width: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    clickDragThreshold? closedContainers? data-testid? direction? dragOffsets? geometry glyphs? headerLines? height input nodeStyles? onDragOffsetsChange? onElementClick? onElementContextMenu? onElementEnter? onElementLeave? onElementPointerDown? onElementPointerUp? onNodeMove? onNodeStyleGeometryChange? onViewChange? pinchZoom? rowSeverities? theme? view? width

    Properties

    clickDragThreshold?: number

    R-10 (register, 2026-08-05): screen-pixel tap slop before a click is treated as the end of a pan and suppressed. Defaults to the pointer's own slop (4px fine, 12px coarse); 0 disables suppression.

    closedContainers?: ReadonlySet<string>
    "data-testid"?: string
    direction?: "RIGHT" | "LEFT" | "DOWN" | "UP"

    Flow direction of the layout that produced geometry; the live drag re-router anchors against it (RTE-011).

    dragOffsets?: Record<string, { dx: number; dy: number }>

    R-12d (round 21): node drag offsets, CONTROLLED. Pass with onDragOffsetsChange to persist and restore a reader's arrangement. Omit both and the view keeps them internally as before.

    geometry: StructuralGeometry
    glyphs?: ReadonlyMap<string, { slot: GlyphSlot; text: string; title?: string }>

    R-2 (round 17): per-node affordance drawn as a bordered box in the header strip, with its own hit zone ("glyph") so consumers can act on the glyph alone. Class g3t-ssv-glyph for hover styling.

    headerLines?: 1 | 2

    R-3 (round 17): 2 renders the stereotype on its own centred line above the name (UML convention). Default 1 leaves existing scenes unchanged.

    height: number
    input: StructuralGraphInput
    nodeStyles?: ReadonlyMap<string, StructuralNodeStyle>

    R-12a (round 21): per-element presentational overrides, as a PROP rather than a store subscription, so the view stays pure and a consumer can scope overrides per surface (the same element often appears in several views). Build it with overridesToStructuralStyles.

    PRECEDENCE: rowSeverities beats these, and these beat the theme. A violation tint is a correctness signal; an override is a preference; the theme is the default.

    onDragOffsetsChange?: (
        offsets: Record<string, { dx: number; dy: number }>,
    ) => void

    Fires with the complete offset map after every drag step.

    onElementClick?: (info: ElementPointerInfo<StructuralHit>) => void
    onElementContextMenu?: (info: ElementPointerInfo<StructuralHit>) => void
    onElementEnter?: (info: ElementPointerInfo<StructuralHit>) => void
    onElementLeave?: (info: ElementPointerInfo<StructuralHit>) => void

    Leave carries the LAST hit (the element being left).

    onElementPointerDown?: (info: ElementPointerInfo<StructuralHit>) => void
    onElementPointerUp?: (info: ElementPointerInfo<StructuralHit>) => void
    onNodeMove?: (nodeId: string, dx: number, dy: number) => void

    R-12d: the per-move delta in MODEL units, for hosts that mutate their own geometry document instead of storing offsets.

    onNodeStyleGeometryChange?: (nodeId: string, size: number) => void

    R-12c (round 21): a size override is LAYOUT INPUT, not presentation, so the view reports the request instead of silently overlapping neighbours and invalidating the routes computed around the old box. Wire this to mutate the geometry document and re-run the layout. Unwired, the editor suppresses the size control rather than offering an inert one.

    onViewChange?: (view: SvgViewTransform) => void

    Fires on every internal transform change (wheel, pinch, pan, initial fit), whether or not view is controlled.

    pinchZoom?: boolean

    R-9: two-pointer pinch zoom. Default true; the gesture scales about its own midpoint using the same transform as the wheel.

    rowSeverities?: ReadonlyMap<string, "violation" | "warning" | "info">

    LR-46 (owner review 2026-07-22): SHACL-style decorations so the shapes surface can ride this view. Row ids map to their worst validation severity (text tint); closed containers get a heavier border.

    theme?: StructuralSvgTheme
    view?: SvgViewTransform

    R-9 (register, 2026-08-05): the view transform, CONTROLLED. Pass it with onViewChange to drive zoom and pan from the host (custom gestures, a restored viewport, a minimap). Omit both and the view manages its own transform as before.

    width: number

    Settings

    Member Visibility

    On This Page

    Properties