@flowgram.ai/renderer 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,592 @@
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
+import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
+import * as _flowgram_ai_utils from '@flowgram.ai/utils';
+import { Rectangle, Disposable, CacheOriginItem, ScrollSchema } from '@flowgram.ai/utils';
+import React from 'react';
+import * as lodash from 'lodash';
+import { ContainerModule } from 'inversify';
+
+interface FlowDragEntityConfig extends EntityOpts {
+}
+declare enum ScrollDirection {
+    TOP = 0,
+    BOTTOM = 1,
+    LEFT = 2,
+    RIGHT = 3
+}
+interface CollisionRetType {
+    hasCollision: boolean;
+    labelOffsetType?: LABEL_SIDE_TYPE;
+}
+declare class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
+    private playgroundConfigEntity;
+    static type: string;
+    private containerDom;
+    private containerX;
+    private containerY;
+    private _scrollXInterval;
+    private _scrollYInterval;
+    get hasScroll(): boolean;
+    constructor(conf: any);
+    isCollision(transition: FlowNodeTransitionData, rect: Rectangle, isBranch: boolean): CollisionRetType;
+    isNodeCollision(transition: FlowNodeTransitionData, rect: Rectangle, scale: number): CollisionRetType;
+    isBranchCollision(transition: FlowNodeTransitionData, rect: Rectangle, scale: number): CollisionRetType;
+    private _startScrollX;
+    private _stopScrollX;
+    private _startScrollY;
+    private _stopScrollY;
+    stopAllScroll(): void;
+    setDomStyle(): void;
+    scrollDirection(e: MouseEvent, containerDom: HTMLDivElement, x: number, y: number): ScrollDirection | undefined;
+    dispose(): void;
+}
+
+interface FlowSelectConfigEntityData {
+    selectedNodes: FlowNodeEntity[];
+}
+/**
+ * 圈选节点相关数据存储
+ */
+declare class FlowSelectConfigEntity extends ConfigEntity<FlowSelectConfigEntityData> {
+    static type: string;
+    boundsPadding: number;
+    getDefaultConfig(): FlowSelectConfigEntityData;
+    get selectedNodes(): FlowNodeEntity[];
+    /**
+     * 选中节点
+     * @param nodes
+     */
+    set selectedNodes(nodes: FlowNodeEntity[]);
+    /**
+     * 清除选中节点
+     */
+    clearSelectedNodes(): void;
+    /**
+     * 通过选择框选中节点
+     * @param rect
+     * @param transforms
+     */
+    selectFromBounds(rect: Rectangle, transforms: FlowNodeTransformData[]): void;
+    /**
+     * 获取选中节点外围的最大边框
+     */
+    getSelectedBounds(): Rectangle;
+}
+
+interface SelectorBoxConfigData extends PlaygroundDragEvent {
+    disabled?: boolean;
+}
+/**
+ * 选择框配置
+ */
+declare class SelectorBoxConfigEntity extends ConfigEntity<SelectorBoxConfigData> {
+    static type: string;
+    get dragInfo(): PlaygroundDragEvent;
+    setDragInfo(info: PlaygroundDragEvent): void;
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    get isStart(): boolean;
+    get isMoving(): boolean;
+    get position(): PositionSchema;
+    get size(): SizeSchema;
+    get collapsed(): boolean;
+    collapse(): void;
+    toRectangle(scale: number): Rectangle;
+}
+
+/**
+ * 监听 dom 元素的 size 变化，用于画布节点的大小变化重新计算
+ */
+declare class FlowRendererResizeObserver {
+    /**
+     * 监听元素 size，并同步到 transform
+     * @param el
+     * @param transform
+     */
+    observe(el: HTMLElement, transform: FlowNodeTransformData): Disposable;
+}
+
+interface TransformRenderCache {
+    updateBounds(): void;
+}
+interface FlowNodesTransformLayerOptions {
+    renderElement?: HTMLElement | (() => HTMLElement | undefined);
+}
+/**
+ * 渲染节点位置
+ */
+declare class FlowNodesTransformLayer extends Layer<FlowNodesTransformLayerOptions> {
+    readonly document: FlowDocument;
+    readonly resizeObserver: FlowRendererResizeObserver;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    _transforms: FlowNodeTransformData[];
+    node: HTMLDivElement;
+    get transformVisibles(): FlowNodeTransformData[];
+    /**
+     * 监听缩放，目前采用整体缩放
+     * @param scale
+     */
+    onZoom(scale: number): void;
+    dispose(): void;
+    protected renderCache: _flowgram_ai_utils.CacheManager<TransformRenderCache, FlowNodeTransformData>;
+    onReady(): void;
+    get visibeBounds(): _flowgram_ai_utils.Rectangle[];
+    /**
+     * 更新节点的 bounds 数据
+     */
+    updateNodesBounds(): void;
+    autorun(): void;
+    private get renderElement();
+}
+
+declare enum FlowRendererComponentType {
+    REACT = 0,
+    DOM = 1,
+    TEXT = 2
+}
+declare enum FlowRendererKey {
+    NODE_RENDER = "node-render",
+    ADDER = "adder",
+    COLLAPSE = "collapse",
+    BRANCH_ADDER = "branch-adder",
+    TRY_CATCH_COLLAPSE = "try-catch-collapse",
+    DRAG_NODE = "drag-node",
+    DRAGGABLE_ADDER = "draggable-adder",
+    DRAG_HIGHLIGHT_ADDER = "drag-highlight-adder",
+    DRAG_BRANCH_HIGHLIGHT_ADDER = "drag-branch-highlight-adder",
+    SELECTOR_BOX_POPOVER = "selector-box-popover",
+    CONTEXT_MENU_POPOVER = "context-menu-popover",
+    SUB_CANVAS = "sub-canvas",
+    MARKER_ARROW = "marker-arrow",
+    MARKER_ACTIVATE_ARROW = "marker-active-arrow"
+}
+declare enum FlowTextKey {
+    LOOP_END_TEXT = "loop-end-text",
+    LOOP_TRAVERSE_TEXT = "loop-traverse-text",
+    LOOP_WHILE_TEXT = "loop-while-text",
+    TRY_START_TEXT = "try-start-text",
+    TRY_END_TEXT = "try-end-text",
+    CATCH_TEXT = "catch-text"
+}
+interface FlowRendererComponent {
+    type: FlowRendererComponentType;
+    renderer: (props?: any) => any;
+}
+/**
+ * 命令分类
+ */
+declare enum FlowRendererCommandCategory {
+    SELECTOR_BOX = "SELECTOR_BOX"
+}
+declare class FlowRendererRegistry {
+    private componentsMap;
+    private textMap;
+    private contribs;
+    readonly pipeline: PipelineRegistry;
+    init(): void;
+    /**
+     * 注册 组件数据
+     */
+    registerRendererComponents(renderKey: FlowRendererKey | string, comp: FlowRendererComponent): void;
+    registerReactComponent(renderKey: FlowRendererKey | string, renderer: (props: any) => any): void;
+    /**
+     * 注册文案
+     */
+    registerText(configs: Record<FlowTextKey | string, string>): void;
+    getText(textKey: string): string | undefined;
+    /**
+     * TODO: support memo
+     */
+    getRendererComponent(renderKey: FlowRendererKey | string): FlowRendererComponent;
+    tryToGetRendererComponent(renderKey: FlowRendererKey | string): FlowRendererComponent | undefined;
+    /**
+     * 注册画布层
+     */
+    registerLayers(...layerRegistries: LayerRegistry[]): void;
+    /**
+     * 根据配置注册画布
+     * @param layerRegistry
+     * @param options
+     */
+    registerLayer<P extends Layer = Layer>(layerRegistry: LayerRegistry<Layer>, options?: P['options']): void;
+}
+
+interface NodePortal extends CacheOriginItem {
+    id: string;
+    Portal: () => JSX.Element;
+}
+/**
+ * 渲染节点内容
+ */
+declare class FlowNodesContentLayer extends Layer {
+    readonly document: FlowDocument;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    _renderStates: FlowNodeRenderData[];
+    get renderStatesVisible(): FlowNodeRenderData[];
+    private renderMemoCache;
+    node: HTMLDivElement;
+    getPortalRenderer(data: FlowNodeRenderData): (props: any) => JSX.Element;
+    /**
+     * 监听缩放，目前采用整体缩放
+     * @param scale
+     */
+    onZoom(scale: number): void;
+    dispose(): void;
+    protected reactPortals: _flowgram_ai_utils.CacheManager<NodePortal, FlowNodeRenderData>;
+    onReady(): void;
+    /**
+     * 监听readonly和 disabled 状态 并刷新layer, 并刷新节点
+     */
+    onReadonlyOrDisabledChange(): void;
+    getPortals(): NodePortal[];
+    render(): React.JSX.Element;
+}
+
+declare class FlowLinesLayer extends Layer {
+    readonly document: FlowDocument;
+    protected readonly dragService: FlowDragService;
+    readonly rendererRegistry: FlowRendererRegistry;
+    node: HTMLDivElement;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    readonly flowRenderState: FlowRendererStateEntity;
+    /**
+     * 监听 transition 变化
+     */
+    _transitions: FlowNodeTransitionData[];
+    get transitions(): FlowNodeTransitionData[];
+    /**
+     * 可视区域变化
+     */
+    onViewportChange: lodash.DebouncedFuncLeading<() => void>;
+    onZoom(): void;
+    onReady(): void;
+    get viewBox(): string;
+    render(): JSX.Element;
+}
+
+declare class FlowLabelsLayer extends Layer {
+    readonly document: FlowDocument;
+    readonly rendererRegistry: FlowRendererRegistry;
+    node: HTMLDivElement;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    readonly flowRenderState: FlowRendererStateEntity;
+    /**
+     * 监听 transition 变化
+     */
+    _transitions: FlowNodeTransitionData[];
+    get transitions(): FlowNodeTransitionData[];
+    /**
+     * 监听缩放，目前采用整体缩放
+     * @param scale
+     */
+    onZoom(scale: number): void;
+    /**
+     * 可视区域变化
+     */
+    onViewportChange: lodash.DebouncedFuncLeading<() => void>;
+    onReady(): void;
+    /**
+     * 监听readonly和 disabled 状态 并刷新layer, 并刷新
+     */
+    onReadonlyOrDisabledChange(): void;
+    render(): React.JSX.Element;
+}
+
+/**
+ * 调试用，会绘出所有节点的边界
+ */
+declare class FlowDebugLayer extends Layer {
+    readonly document: FlowDocument;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    _transforms: FlowNodeTransformData[];
+    get transforms(): FlowNodeTransformData[];
+    node: HTMLElement;
+    viewport: HTMLDivElement;
+    boundsNodes: HTMLDivElement;
+    pointsNodes: HTMLDivElement;
+    versionNodes: HTMLDivElement;
+    /**
+     * ?debug=xxxx, 则返回 xxxx
+     */
+    filterKey: string;
+    protected originLine: HTMLDivElement;
+    domCache: WeakMap<FlowNodeTransformData, {
+        color: string;
+        bbox: HTMLDivElement;
+        version: HTMLDivElement;
+        input: HTMLDivElement;
+        output: HTMLDivElement;
+    }>;
+    onReady(): void;
+    onScroll(): void;
+    onResize(): void;
+    onZoom(scale: number): void;
+    createBounds(transform: FlowNodeTransformData, color: string, depth: number): void;
+    /**
+     * 显示 viewport 可滚动区域
+     */
+    renderScrollViewportBounds(): void;
+    autorun(): void;
+}
+
+/**
+ * 滚动条点击事件监听
+ */
+declare const ScrollBarEvents: unique symbol;
+interface ScrollBarEvents {
+    dragStart: () => void;
+}
+
+declare enum ScrollBarVisibility {
+    Show = "show",
+    Hidden = "hidden"
+}
+interface ScrollBarOptions {
+    /**
+     * 显示滚动条的时机，可选常驻或滚动时显示
+     */
+    showScrollBars: 'whenScrolling' | 'always';
+    getBounds(): Rectangle;
+}
+/**
+ * 渲染滚动条 layer
+ */
+declare class FlowScrollBarLayer extends Layer<ScrollBarOptions> {
+    readonly events?: ScrollBarEvents;
+    flowDocument?: FlowDocument;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    readonly rightScrollBar: HTMLDivElement;
+    readonly rightScrollBarBlock: HTMLDivElement;
+    readonly bottomScrollBar: HTMLDivElement;
+    readonly bottomScrollBarBlock: HTMLDivElement;
+    private mostLeft;
+    private mostRight;
+    private mostTop;
+    private mostBottom;
+    private viewportWidth;
+    private viewportHeight;
+    private width;
+    private height;
+    private scrollBottomWidth;
+    private scrollRightHeight;
+    private scale;
+    private sum;
+    private initialScrollX;
+    private initialScrollY;
+    private hideTimeout;
+    get clientViewportWidth(): number;
+    get clientViewportHeight(): number;
+    get viewportFullWidth(): number;
+    get viewportFullHeight(): number;
+    get viewportMoveWidth(): number;
+    get viewportMoveHeight(): number;
+    getToLeft(scrollX: number): number;
+    getToTop(scrollY: number): number;
+    clickRightScrollBar(e: MouseEvent): void;
+    clickBottomScrollBar(e: MouseEvent): void;
+    onBoardingToast(): void;
+    protected bottomGrabDragger: PlaygroundDrag<undefined>;
+    protected rightGrabDragger: PlaygroundDrag<undefined>;
+    protected changeScrollBarVisibility(scrollBar: HTMLDivElement, status: ScrollBarVisibility): void;
+    onReady(): void;
+    autorun(): void;
+}
+
+interface FlowDragOptions {
+    onDrop?: (opts: {
+        dragNodes: FlowNodeEntity[];
+        dropNode: FlowNodeEntity;
+    }) => void;
+    canDrop?: (opts: {
+        dragNodes: FlowNodeEntity[];
+        dropNode: FlowNodeEntity;
+        isBranch?: boolean;
+    }) => boolean;
+}
+/**
+ * 监听节点的激活状态
+ */
+declare class FlowDragLayer extends Layer<FlowDragOptions> {
+    readonly document: FlowDocument;
+    readonly service: FlowDragService;
+    transforms: FlowNodeTransformData[];
+    protected editorStateConfig: EditorStateConfigEntity;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    protected flowDragConfigEntity: FlowDragEntity;
+    protected flowRenderStateEntity: FlowRendererStateEntity;
+    protected selectConfigEntity: FlowSelectConfigEntity;
+    private initialPosition;
+    private dragOffset;
+    get transitions(): FlowNodeTransitionData[];
+    readonly rendererRegistry: FlowRendererRegistry;
+    get dragStartEntity(): FlowNodeEntity | undefined;
+    set dragStartEntity(entity: FlowNodeEntity | undefined);
+    get dragEntities(): FlowNodeEntity[];
+    set dragEntities(entities: FlowNodeEntity[]);
+    private dragNodeComp;
+    containerRef: React.RefObject<HTMLDivElement>;
+    draggingNodeMask: HTMLDivElement;
+    protected isGrab(): boolean;
+    setDraggingStatus(status: boolean): void;
+    dragEnable(e: MouseEvent): boolean;
+    handleMouseMove(event: MouseEvent): void;
+    handleMouseUp(): void;
+    protected _dragger: PlaygroundDrag<undefined>;
+    /**
+     * 开始拖拽事件
+     * @param e
+     */
+    startDrag(e: {
+        clientX: number;
+        clientY: number;
+    }, { dragStartEntity: startEntityFromProps, dragEntities, }: {
+        dragStartEntity: FlowNodeEntity;
+        dragEntities?: FlowNodeEntity[];
+    }, options?: {
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+    }): Promise<void>;
+    onReady(): void;
+    render(): React.JSX.Element;
+}
+
+interface FlowSelectorBoxOptions extends LayerOptions {
+    /**
+     * 默认不提供则为点击空白地方可以框选
+     * @param e
+     * @param entity
+     */
+    canSelect?: (e: MouseEvent, entity: SelectorBoxConfigEntity) => boolean;
+}
+/**
+ * 流程选择框
+ */
+declare class FlowSelectorBoxLayer extends Layer<FlowSelectorBoxOptions> {
+    protected flowDocument: FlowDocument;
+    readonly contextMenuService: ContextMenuService;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    readonly selectionService: SelectionService;
+    protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+    protected selectConfigEntity: FlowSelectConfigEntity;
+    protected editorStateConfig: EditorStateConfigEntity;
+    readonly node: HTMLDivElement;
+    /**
+     * 选择框
+     */
+    protected selectorBox: _flowgram_ai_utils.CacheManager<_flowgram_ai_utils.DOMCache, _flowgram_ai_utils.CacheOriginItem>;
+    /**
+     * 用于遮挡鼠标，避免触发 hover
+     */
+    protected selectorBoxBlock: _flowgram_ai_utils.CacheManager<_flowgram_ai_utils.DOMCache, _flowgram_ai_utils.CacheOriginItem>;
+    protected transformVisibles: FlowNodeTransformData[];
+    /**
+     * 拖动选择框
+     */
+    protected selectboxDragger: PlaygroundDrag<undefined>;
+    onReady(): void;
+    isEnabled(): boolean;
+    /**
+     * Destroy
+     */
+    dispose(): void;
+    protected updateSelectorBox(selector: SelectorBoxConfigEntity): void;
+    private nodeSelectable;
+}
+
+interface SelectorBoxPopoverProps {
+    bounds: Rectangle;
+    config: PlaygroundConfig;
+    flowSelectConfig: FlowSelectConfigEntity;
+    commandRegistry: CommandRegistry;
+    children?: React.ReactNode;
+}
+interface FlowSelectorBoundsLayerOptions extends LayerOptions {
+    ignoreOneSelect?: boolean;
+    boundsPadding?: number;
+    disableBackground?: boolean;
+    backgroundClassName?: string;
+    foregroundClassName?: string;
+    SelectorBoxPopover?: React.FC<SelectorBoxPopoverProps>;
+    CustomBoundsRenderer?: React.FC<SelectorBoxPopoverProps>;
+}
+/**
+ * 流程节点被框选后的边界区域渲染
+ */
+declare class FlowSelectorBoundsLayer extends Layer<FlowSelectorBoundsLayerOptions> {
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly commandRegistry: CommandRegistry;
+    protected flowSelectConfigEntity: FlowSelectConfigEntity;
+    protected editorStateConfig: EditorStateConfigEntity;
+    protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+    /**
+     * 需要监听节点的展开和收起状态，重新绘制边框
+     */
+    renderStates: FlowNodeRenderData[];
+    _transforms: FlowNodeTransformData[];
+    readonly node: HTMLDivElement;
+    readonly selectBoundsBackground: HTMLDivElement;
+    onReady(): void;
+    onZoom(scale: number): void;
+    onViewportChange(): void;
+    isEnabled(): boolean;
+    render(): JSX.Element;
+}
+
+/**
+ * 流程右键菜单
+ */
+declare class FlowContextMenuLayer extends Layer {
+    readonly commandRegistry: CommandRegistry;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly contextMenuService: ContextMenuService;
+    protected flowSelectConfigEntity: FlowSelectConfigEntity;
+    readonly selectionService: SelectionService;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    protected editorStateConfig: EditorStateConfigEntity;
+    protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+    readonly node: HTMLDivElement;
+    readonly nodeRef: React.RefObject<{
+        setVisible: (v: boolean) => void;
+    }>;
+    isEnabled(): boolean;
+    onReady(): void;
+    onScroll(): void;
+    onZoom(): void;
+    /**
+     * Destroy
+     */
+    dispose(): void;
+    /**
+     * 渲染工具栏
+     */
+    renderCommandMenus(): JSX.Element[];
+    render(): JSX.Element;
+}
+
+/**
+ * 控制滚动边界
+ */
+declare class FlowScrollLimitLayer extends Layer {
+    readonly document: FlowDocument;
+    getInitScroll(): ScrollSchema;
+    onReady(): void;
+}
+
+declare const FlowRendererContribution: unique symbol;
+interface FlowRendererContribution {
+    registerRenderer?(registry: FlowRendererRegistry): void;
+}
+
+declare const FlowRendererContainerModule: ContainerModule;
+
+declare const MARK_ARROW_ID = "line-marker-arrow";
+
+declare const MARK_ACTIVATED_ARROW_ID = "line-marker-arrow-activated";
+
+declare function useBaseColor(): {
+    baseColor: string;
+    baseActivatedColor: string;
+};
+
+export { type CollisionRetType, FlowContextMenuLayer, FlowDebugLayer, FlowDragEntity, FlowDragLayer, type FlowDragOptions, FlowLabelsLayer, FlowLinesLayer, FlowNodesContentLayer, FlowNodesTransformLayer, type FlowNodesTransformLayerOptions, FlowRendererCommandCategory, type FlowRendererComponent, FlowRendererComponentType, FlowRendererContainerModule, FlowRendererContribution, FlowRendererKey, FlowRendererRegistry, FlowScrollBarLayer, FlowScrollLimitLayer, FlowSelectConfigEntity, FlowSelectorBoundsLayer, type FlowSelectorBoundsLayerOptions, FlowSelectorBoxLayer, type FlowSelectorBoxOptions, FlowTextKey, MARK_ACTIVATED_ARROW_ID, MARK_ARROW_ID, ScrollBarEvents, type ScrollBarOptions, type SelectorBoxConfigData, SelectorBoxConfigEntity, type SelectorBoxPopoverProps, useBaseColor };