orcasvn-react-diagrams 0.2.0 → 0.2.2

package/dist/cjs/types/renderer/RenderTypes.d.ts

@@ -1,6 +1,29 @@
-import { ElementData, PortData, ShapeDrawContext } from '../api/types';
+import { ElementData, Point, PortAnchor, PortData, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeDrawContext, ShapeHoverGeometry } from '../api/types';
+import { BorderSide } from '../utils/borderGeometry';
+export type ShapeNodeSizeUpdateContext = {
+    size: {
+        width: number;
+        height: number;
+    };
+    anchorCenter: boolean;
+    updateOffsetX: boolean;
+    updateOffsetY: boolean;
+    getNodeAttr: <T = unknown>(key: string) => T | undefined;
+};
+export type ShapeNodeSizeUpdater = (context: ShapeNodeSizeUpdateContext) => Record<string, unknown>;
+export type ShapeResizeHandle = 'nw' | 'ne' | 'sw' | 'se';
+export type ShapeResizeNormalizeContext = {
+    element: ElementData;
+    handle: ShapeResizeHandle;
+    minSize: number;
+    proposal: {
+        width: number;
+        height: number;
+    };
+};
 export type ShapeDefinition = {
     id: string;
+    baseRotation?: number;
     draw?: (context: ShapeDrawContext) => void;
     createNode?: (model: ElementData | PortData) => unknown;
     svgPath?: string;
@@ -8,6 +31,16 @@ export type ShapeDefinition = {
         width: number;
         height: number;
     };
+    sizeUpdater?: ShapeNodeSizeUpdater;
+    normalizeResize?: (context: ShapeResizeNormalizeContext) => {
+        width: number;
+        height: number;
+    };
+    projectToBorder?: (point: Point, rect: Rect) => Point;
+    resolveBorderSide?: (point: Point, rect: Rect) => BorderSide;
+    resolvePortAnchors?: (rect: Rect, options: ResolvePortAnchorsOptions) => PortAnchor[];
+    resolveHoverGeometry?: (rect: Rect) => ShapeHoverGeometry | undefined;
+    resolveEllipseMidPoints?: (rect: Rect) => ShapeEllipseMidPointTarget[] | undefined;
 };
 export declare class ShapeRegistry {
     private shapes;

package/dist/cjs/types/renderer/konva/KonvaHitTester.d.ts

@@ -1,7 +1,7 @@
 import { Point } from '../../api/types';
 export type HitResult = {
     id: string;
-    type: 'element' | 'port' | 'link' | 'text' | 'resize-handle' | 'link-handle' | 'none';
+    type: 'element' | 'port' | 'link' | 'text' | 'resize-handle' | 'link-handle' | 'shape-hover-control' | 'none';
     depth?: number;
 };
 export type HitTestResolver = (point: Point) => HitResult | null;

package/dist/cjs/types/renderer/konva/KonvaInteraction.d.ts

@@ -1,22 +1,38 @@
-import { Point, PortData } from '../../api/types';
+import { ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, Point, PortData } from '../../api/types';
 import DiagramEngine from '../../engine/DiagramEngine';
 import KonvaHitTester from './KonvaHitTester';
-import { KonvaStageLike } from './KonvaRenderer';
+import { KonvaStageLike, ShapeHoverControlRenderConfig } from './KonvaRenderer';
+import { ShapeRegistry } from '../RenderTypes';
 export type InteractionConfig = {
     stage?: KonvaStageLike;
     hitTester?: KonvaHitTester;
     panKey?: PanKey;
+    shapeRegistry?: ShapeRegistry;
+    shapeHoverControls?: ElementShapeHoverControls;
+    onShapeHoverControlInteracted?: (event: ElementShapeHoverControlInteractionEvent) => void;
+    onShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
     renderer?: {
         renderResizeHandles: (elementId: string, position: Point, size: {
             width: number;
             height: number;
+        }, options?: {
+            rotation?: number;
+            anchorCenter?: boolean;
         }) => void;
         clearResizeHandles: () => void;
         renderLinkHandles: (linkId: string, points: Point[]) => void;
         clearLinkHandles: () => void;
         renderTempLink: (points: Point[]) => void;
         clearTempLink: () => void;
-        renderPortPlaceholder?: (port: PortData) => void;
+        renderPortPlaceholder?: (port: PortData, hostElement?: {
+            id: string;
+            position: Point;
+            size: {
+                width: number;
+                height: number;
+            };
+            shapeId: string;
+        }) => void;
         clearPortPlaceholder?: () => void;
         renderMarquee: (rect: {
             x: number;
@@ -25,6 +41,8 @@ export type InteractionConfig = {
             height: number;
         }) => void;
         clearMarquee: () => void;
+        renderShapeHoverControl?: (config: ShapeHoverControlRenderConfig) => void;
+        clearShapeHoverControl?: () => void;
     };
 };
 export type PanKey = 'Control' | 'Shift' | 'Alt' | 'Meta';
@@ -33,6 +51,10 @@ export default class KonvaInteraction {
     private stage?;
     private hitTester;
     private renderer?;
+    private shapeRegistry?;
+    private shapeHoverControls?;
+    private onShapeHoverControlInteracted?;
+    private onShapeHoverControlActivated?;
     private linkDragContext;
     private bound;
     private handlers;
@@ -41,6 +63,8 @@ export default class KonvaInteraction {
     private dragState;
     private selectionUnsub;
     private changeUnsub;
+    private activeShapeHoverControl;
+    private lastPointerPosition;
     private zoom;
     private pan;
     private textEditor;
@@ -48,6 +72,7 @@ export default class KonvaInteraction {
     private readonly panSpeed;
     private panKey;
     constructor(engine: DiagramEngine, config?: InteractionConfig);
+    setShapeHoverControls(controls?: ElementShapeHoverControls): void;
     private buildPointerInfo;
     bind(stage?: KonvaStageLike): void;
     dispose(): void;
@@ -56,14 +81,38 @@ export default class KonvaInteraction {
     private getStageContainer;
     private normalizeHit;
     private resolveHit;
+    private withElementDepth;
     private findElementHit;
     private computeElementDepth;
     private findLinkHit;
     private setCursor;
     private updateHoverCursor;
+    private normalizeShapeHoverControls;
+    private normalizeShapeHoverControlDefinition;
+    private normalizeVisibilityTriggers;
+    private normalizeTargetIndices;
+    private normalizeEllipseMidPoints;
+    private getDefaultShapeHoverControlTolerance;
+    private resolveShapeHoverControlFromHit;
+    private parseShapeHoverControlHitId;
+    private emitShapeHoverControlInteraction;
+    private emitLegacyShapeHoverControlActivation;
+    private updateShapeHoverControl;
+    private resolveShapeHoverControl;
+    private resolveTargetHoverCandidate;
+    private resolveElementHoverCandidate;
+    private resolveEligibleTargetIndices;
+    private resolveEligibleEllipseMidPoints;
+    private resolveRotatedHoverGeometry;
+    private resolveRotatedEllipseMidPoints;
+    private isSameShapeHoverTarget;
+    private isSamePoint;
+    private toShapeHoverRenderConfig;
+    private clearActiveShapeHoverControl;
     private startTextEdit;
     private disposeTextEditor;
     private updateSelectionOverlays;
+    private renderElementResizeHandles;
     private handleResizeDrag;
     private parseResizeHandle;
     private parseLinkHandle;
@@ -73,6 +122,7 @@ export default class KonvaInteraction {
     private projectPointOnSegment;
     private applyMarqueeSelection;
     private applyPortConstraints;
+    private tryCreateLinkToPort;
     private createPortForLink;
     private createPlaceholderPort;
     private getElementById;

package/dist/cjs/types/renderer/konva/KonvaNodeFactory.d.ts

@@ -1,4 +1,4 @@
-import { ElementData, LinkData, PortData, TextData } from '../../api/types';
+import { ElementData, LinkData, Point, PortData, TextData } from '../../api/types';
 import { ShapeRegistry } from '../RenderTypes';
 export type KonvaNodeLike = {
     id?: () => string;
@@ -61,6 +61,23 @@ export default class KonvaNodeFactory {
         width: number;
         height: number;
     }): KonvaNodeLike;
+    createHoverControlEdgeLineNode(config: {
+        id: string;
+        start: Point;
+        end: Point;
+        style?: Record<string, unknown>;
+    }): KonvaNodeLike;
+    createHoverControlIconNode(config: {
+        id: string;
+        position: Point;
+        svgPath: string;
+        size?: {
+            width: number;
+            height: number;
+        };
+        style?: Record<string, unknown>;
+    }): KonvaNodeLike;
     private createDrawNode;
     private createSvgPathNode;
+    private applyShapeBehaviorAttrs;
 }

package/dist/cjs/types/renderer/konva/KonvaRenderer.d.ts

@@ -1,4 +1,4 @@
-import { OverlayShapeConfig, OverlayShapeHandle, Point, PortData } from '../../api/types';
+import { EllipseMidPoint, OverlayShapeConfig, OverlayShapeHandle, Point, PortData } from '../../api/types';
 import DiagramModel from '../../models/DiagramModel';
 import { ShapeRegistry } from '../RenderTypes';
 import { Renderer } from '../Renderer';
@@ -23,10 +23,40 @@ export type KonvaRendererConfig = {
     };
     shapeRegistry?: ShapeRegistry;
 };
+export type ShapeHoverControlRenderConfig = {
+    controlId: string;
+    targetKind: 'edge' | 'vertex' | 'midpoint' | 'ellipse-midpoint';
+    targetIndex: number;
+    targetRef?: string;
+    elementId: string;
+    targetId: string;
+    icon: {
+        svgPath: string;
+        size?: {
+            width: number;
+            height: number;
+        };
+        style?: Record<string, unknown>;
+    };
+    edge?: {
+        start: Point;
+        end: Point;
+        midpoint: Point;
+        lineStyle?: Record<string, unknown>;
+    };
+    vertex?: {
+        position: Point;
+    };
+    ellipseMidPoint?: {
+        id: EllipseMidPoint;
+        position: Point;
+    };
+};
 export default class KonvaRenderer implements Renderer {
     private stage;
     private layers;
     private nodeFactory;
+    private shapeRegistry;
     private elementNodes;
     private portNodes;
     private linkNodes;
@@ -39,6 +69,7 @@ export default class KonvaRenderer implements Renderer {
     private marqueeNode;
     private resizeHandleNodes;
     private linkHandleNodes;
+    private shapeHoverControlNodes;
     private overlayShapes;
     private overlayId;
     constructor(config?: KonvaRendererConfig);
@@ -47,12 +78,23 @@ export default class KonvaRenderer implements Renderer {
     renderResizeHandles(elementId: string, position: Point, size: {
         width: number;
         height: number;
+    }, options?: {
+        rotation?: number;
+        anchorCenter?: boolean;
     }): void;
     clearResizeHandles(): void;
     renderLinkHandles(linkId: string, points: Point[]): void;
     clearLinkHandles(): void;
     renderTempLink(points: Point[]): void;
-    renderPortPlaceholder(port: PortData): void;
+    renderPortPlaceholder(port: PortData, hostElement?: {
+        id: string;
+        position: Point;
+        size: {
+            width: number;
+            height: number;
+        };
+        shapeId: string;
+    }): void;
     clearPortPlaceholder(): void;
     clearTempLink(): void;
     renderMarquee(rect: {
@@ -62,6 +104,8 @@ export default class KonvaRenderer implements Renderer {
         height: number;
     }): void;
     clearMarquee(): void;
+    renderShapeHoverControl(config: ShapeHoverControlRenderConfig): void;
+    clearShapeHoverControl(draw?: boolean): void;
     createOverlayShape(config: OverlayShapeConfig): OverlayShapeHandle;
     destroy(): void;
     private drawOverlays;
@@ -75,6 +119,9 @@ export default class KonvaRenderer implements Renderer {
     private syncLinks;
     private syncTexts;
     private updatePosition;
+    private applyPortOrientation;
+    private resolvePortBorderRotation;
+    private resolveHostElement;
     private getNodeAttr;
     private updateSize;
     private updateLine;

package/dist/cjs/types/shapes/BuiltInShapes.d.ts

@@ -0,0 +1,107 @@
+import { Point, PortAnchor, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeHoverGeometry } from '../api/types';
+import { ShapeNodeSizeUpdater, ShapeResizeNormalizeContext } from '../renderer/RenderTypes';
+import { BorderSide } from '../utils/borderGeometry';
+export type BuiltInShapeKind = 'rect' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'pentagon' | 'hexagon';
+export type ShapeNodeModel = {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    size?: {
+        width?: number;
+        height?: number;
+    };
+    style?: Record<string, unknown>;
+    anchorCenter?: boolean;
+};
+export type KonvaShapeLibraryLike = {
+    Rect: new (config: Record<string, unknown>) => unknown;
+    Circle: new (config: Record<string, unknown>) => unknown;
+    Ellipse: new (config: Record<string, unknown>) => unknown;
+    Line: new (config: Record<string, unknown>) => unknown;
+};
+export type ShapeCreateContext = {
+    Konva: KonvaShapeLibraryLike;
+    model: ShapeNodeModel;
+    isPort: boolean;
+    anchorCenter: boolean;
+};
+type ShapeLibraryConfig = {
+    id: string;
+    kind: BuiltInShapeKind;
+    style?: Record<string, unknown>;
+};
+export declare abstract class BuiltInShape {
+    readonly id: string;
+    readonly style?: Record<string, unknown>;
+    readonly renderStyle?: Record<string, unknown>;
+    readonly baseRotation: number;
+    abstract readonly sizeUpdater: ShapeNodeSizeUpdater;
+    normalizeResize?: (context: ShapeResizeNormalizeContext) => {
+        width: number;
+        height: number;
+    };
+    constructor(id: string, style?: Record<string, unknown>, presetBaseRotation?: number);
+    abstract createNode(context: ShapeCreateContext): unknown;
+    projectToBorder(point: Point, rect: Rect): Point;
+    resolveBorderSide(point: Point, rect: Rect): BorderSide;
+    resolvePortAnchors(_rect: Rect, _options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolveHoverGeometry(_rect: Rect): ShapeHoverGeometry | undefined;
+    resolveEllipseMidPoints(_rect: Rect): ShapeEllipseMidPointTarget[] | undefined;
+    protected resolveShapeName(isPort: boolean): string;
+}
+export declare class RectangleShape extends BuiltInShape {
+    readonly sizeUpdater: ShapeNodeSizeUpdater;
+    createNode({ Konva, model, isPort, anchorCenter }: ShapeCreateContext): unknown;
+    resolvePortAnchors(rect: Rect, options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolveHoverGeometry(rect: Rect): ShapeHoverGeometry;
+}
+export declare class EllipseShape extends BuiltInShape {
+    readonly sizeUpdater: ShapeNodeSizeUpdater;
+    createNode({ Konva, model, isPort, anchorCenter }: ShapeCreateContext): unknown;
+    projectToBorder(point: Point, rect: Rect): Point;
+    resolveBorderSide(point: Point, rect: Rect): BorderSide;
+    resolvePortAnchors(rect: Rect, options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolveEllipseMidPoints(rect: Rect): ShapeEllipseMidPointTarget[];
+}
+export declare class CircleShape extends BuiltInShape {
+    readonly sizeUpdater: ShapeNodeSizeUpdater;
+    normalizeResize: ({ proposal, minSize }: ShapeResizeNormalizeContext) => {
+        width: number;
+        height: number;
+    };
+    createNode({ Konva, model, isPort, anchorCenter }: ShapeCreateContext): unknown;
+    projectToBorder(point: Point, rect: Rect): Point;
+    resolveBorderSide(point: Point, rect: Rect): BorderSide;
+    resolvePortAnchors(rect: Rect, options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolveEllipseMidPoints(rect: Rect): ShapeEllipseMidPointTarget[];
+}
+export declare class PolygonShape extends BuiltInShape {
+    readonly sizeUpdater: ShapeNodeSizeUpdater;
+    readonly edgeCount: number;
+    private readonly defaults;
+    constructor(id: string, style: Record<string, unknown> | undefined, edgeCount: number, defaults: {
+        width: number;
+        height: number;
+    }, presetBaseRotation?: number);
+    createNode({ Konva, model, isPort, anchorCenter }: ShapeCreateContext): unknown;
+    projectToBorder(point: Point, rect: Rect): Point;
+    resolveBorderSide(point: Point, rect: Rect): BorderSide;
+    resolvePortAnchors(rect: Rect, options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolveHoverGeometry(rect: Rect): ShapeHoverGeometry;
+}
+export declare class DiamondShape extends PolygonShape {
+    constructor(id: string, style?: Record<string, unknown>);
+}
+export declare class TriangleShape extends PolygonShape {
+    constructor(id: string, style?: Record<string, unknown>);
+}
+export declare class PentagonShape extends PolygonShape {
+    constructor(id: string, style?: Record<string, unknown>);
+}
+export declare class HexagonShape extends PolygonShape {
+    constructor(id: string, style?: Record<string, unknown>);
+}
+export declare const createBuiltInShape: (config: ShapeLibraryConfig) => BuiltInShape;
+export {};

package/dist/cjs/types/shapes/__tests__/BuiltInShapes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/shapes/index.d.ts

@@ -0,0 +1 @@
+export * from './BuiltInShapes';

package/dist/cjs/types/utils/__tests__/borderGeometry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/utils/borderGeometry.d.ts

@@ -0,0 +1,6 @@
+import { Point, Rect } from '../api/types';
+export type BorderSide = 'left' | 'right' | 'top' | 'bottom';
+export type BoundaryKind = 'rect' | 'ellipse' | 'diamond';
+export declare const projectPointToBoundary: (point: Point, rect: Rect, boundary: BoundaryKind) => Point;
+export declare const resolveBoundarySide: (point: Point, rect: Rect, boundary: BoundaryKind) => BorderSide;
+export declare const borderSideToInwardRotation: (side: BorderSide) => number;

package/dist/cjs/types/utils/geometry.d.ts

@@ -6,4 +6,26 @@ export declare const distance: (a: Point, b: Point) => number;
 export declare const clamp: (value: number, min: number, max: number) => number;
 export declare const rectContainsPoint: (rect: Rect, point: Point) => boolean;
 export declare const rectsIntersect: (a: Rect, b: Rect) => boolean;
+export declare const degreesToRadians: (degrees: number) => number;
+export declare const rotatePoint: (point: Point, center: Point, degrees: number) => Point;
+export declare const resolveRectRotationPivot: (topLeft: Point, size: {
+    width: number;
+    height: number;
+}, anchorCenter: boolean) => Point;
+export declare const getRotatedRectCorners: (topLeft: Point, size: {
+    width: number;
+    height: number;
+}, rotation: number, anchorCenter?: boolean) => {
+    nw: Point;
+    ne: Point;
+    sw: Point;
+    se: Point;
+};
+export declare const pointInPolygon: (point: Point, polygon: Point[]) => boolean;
+export declare const segmentsIntersect: (a1: Point, a2: Point, b1: Point, b2: Point) => boolean;
+export declare const pointInRotatedRect: (point: Point, topLeft: Point, size: {
+    width: number;
+    height: number;
+}, rotation: number, anchorCenter?: boolean) => boolean;
+export declare const polygonIntersectsRect: (polygon: Point[], rect: Rect) => boolean;
 export declare const snapToGrid: (point: Point, gridSize: number) => Point;