@flowgram-vue/renderer 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,721 @@
+import * as _flowgram_vue_utils from '@flowgram-vue/utils';
+import { Rectangle, Disposable, CacheOriginItem, Xor, ScrollSchema } from '@flowgram-vue/utils';
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity, FlowDocumentOptions, FlowNodeJSON } from '@flowgram-vue/document';
+import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundContainerFactory, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, CommandRegistry, PlaygroundConfig } from '@flowgram-vue/core';
+import * as vue from 'vue';
+import { Component, VNode } from 'vue';
+import { throttle } from 'lodash-es';
+import { ContainerModule } from 'inversify';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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 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;
+    scrollDirection(e: MouseEvent, x: number, y: number): ScrollDirection | undefined;
+    dispose(): void;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 监听 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_vue_utils.CacheManager<TransformRenderCache, FlowNodeTransformData>;
+    private isCoordEqual;
+    onReady(): void;
+    get visibeBounds(): _flowgram_vue_utils.Rectangle[];
+    /**
+     * 更新节点的 bounds 数据
+     */
+    updateNodesBounds(): void;
+    autorun(): void;
+    private get renderElement();
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare enum FlowRendererComponentType {
+    VUE = 0,// vue 组件
+    DOM = 1,// dom 组件
+    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",// 选择框右上角菜单
+    /**
+     * @deprecated
+     */
+    CONTEXT_MENU_POPOVER = "context-menu-popover",// 右键菜单
+    SUB_CANVAS = "sub-canvas",// 子画布渲染
+    SLOT_ADDER = "slot-adder",// 插槽添加按钮
+    SLOT_LABEL = "slot-label",// 插槽标签
+    SLOT_COLLAPSE = "slot-collapse",// 插槽收起按钮渲染
+    ARROW_RENDERER = "arrow-renderer",// 工作流线条箭头渲染器
+    MARKER_ARROW = "marker-arrow",// loop 的默认箭头
+    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: Component | ((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;
+    registerVueComponent(renderKey: FlowRendererKey | string, renderer: Component | ((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: Component;
+}
+/**
+ * 渲染节点内容
+ */
+declare class FlowNodesContentLayer extends Layer {
+    readonly document: FlowDocument;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    _renderStates: FlowNodeRenderData[];
+    get renderStatesVisible(): FlowNodeRenderData[];
+    private renderMemoCache;
+    node: HTMLDivElement;
+    getPortalRenderer(data: FlowNodeRenderData): Component;
+    /**
+     * 监听缩放，目前采用整体缩放
+     * @param scale
+     */
+    onZoom(scale: number): void;
+    dispose(): void;
+    protected vuePortals: _flowgram_vue_utils.CacheManager<NodePortal, FlowNodeRenderData>;
+    onReady(): void;
+    /**
+     * 监听readonly和 disabled 状态 并刷新layer, 并刷新节点
+     */
+    onReadonlyOrDisabledChange(): void;
+    getPortals(): NodePortal[];
+    render(): vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | null;
+}
+
+declare class FlowLinesLayer extends Layer {
+    readonly document: FlowDocument;
+    protected readonly dragService: FlowDragService;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    node: HTMLDivElement;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    readonly flowRenderState: FlowRendererStateEntity;
+    /**
+     * 监听 transition 变化
+     */
+    _transitions: FlowNodeTransitionData[];
+    get transitions(): FlowNodeTransitionData[];
+    /**
+     * 可视区域变化
+     */
+    onViewportChange: ReturnType<typeof throttle>;
+    onZoom(): void;
+    onReady(): void;
+    get viewBox(): string;
+    render(): VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | null;
+}
+
+declare class FlowLabelsLayer extends Layer {
+    readonly document: FlowDocument;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    readonly documentOptions?: FlowDocumentOptions;
+    node: HTMLDivElement;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    readonly flowRenderState: FlowRendererStateEntity;
+    /**
+     * 监听 transition 变化
+     */
+    _transitions: FlowNodeTransitionData[];
+    get transitions(): FlowNodeTransitionData[];
+    /**
+     * 监听缩放，目前采用整体缩放
+     * @param scale
+     */
+    onZoom(scale: number): void;
+    /**
+     * 可视区域变化
+     */
+    onViewportChange: ReturnType<typeof throttle>;
+    onReady(): void;
+    /**
+     * 监听readonly和 disabled 状态 并刷新layer, 并刷新
+     */
+    onReadonlyOrDisabledChange(): void;
+    render(): VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | null;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 调试用，会绘出所有节点的边界
+ */
+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;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 滚动条点击事件监听
+ */
+declare const ScrollBarEvents: unique symbol;
+interface ScrollBarEvents {
+    dragStart: () => void;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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;
+}
+
+type StartDragProps = {
+    dragEntities?: FlowNodeEntity[];
+} & Xor<{
+    dragStartEntity: FlowNodeEntity;
+}, {
+    dragJSON: FlowNodeJSON;
+    isBranch?: boolean;
+    onCreateNode: (json: FlowNodeJSON, dropEntity: FlowNodeEntity) => Promise<FlowNodeEntity>;
+}>;
+interface FlowDragOptions {
+    onDrop?: (opts: {
+        dragNodes: FlowNodeEntity[];
+        dropNode: FlowNodeEntity;
+    }) => void;
+    canDrop?: (opts: {
+        dropNode: FlowNodeEntity;
+        isBranch?: boolean;
+    } & Xor<{
+        dragNodes: FlowNodeEntity[];
+    }, {
+        dragJSON: FlowNodeJSON;
+    }>) => boolean;
+}
+/**
+ * 监听节点的激活状态
+ */
+declare class FlowDragLayer extends Layer<FlowDragOptions> {
+    readonly document: FlowDocument;
+    readonly flowDragService: FlowDragService;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    transforms: FlowNodeTransformData[];
+    protected editorStateConfig: EditorStateConfigEntity;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    protected flowDragConfigEntity: FlowDragEntity;
+    protected flowRenderStateEntity: FlowRendererStateEntity;
+    protected selectConfigEntity: FlowSelectConfigEntity;
+    private initialPosition;
+    private disableDragScroll;
+    private dragJSON?;
+    private onCreateNode?;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    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: {
+        current: HTMLDivElement | null;
+    };
+    draggingNodeMask: HTMLDivElement;
+    protected isGrab(): boolean;
+    setDraggingStatus(status: boolean): void;
+    dragEnable(e: MouseEvent): boolean;
+    handleMouseMove(event: MouseEvent): void;
+    handleMouseUp(): Promise<void>;
+    protected _dragger: PlaygroundDrag<undefined>;
+    /**
+     * 开始拖拽事件
+     * @param e
+     */
+    startDrag(e: {
+        clientX: number;
+        clientY: number;
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, isBranch, onCreateNode, }: StartDragProps, options?: {
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+        disableDragScroll?: boolean;
+    }): Promise<void>;
+    onReady(): void;
+    dispose(): void;
+    render(): vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}
+
+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_vue_utils.CacheManager<_flowgram_vue_utils.DOMCache, _flowgram_vue_utils.CacheOriginItem>;
+    /**
+     * 用于遮挡鼠标，避免触发 hover
+     */
+    protected selectorBoxBlock: _flowgram_vue_utils.CacheManager<_flowgram_vue_utils.DOMCache, _flowgram_vue_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?: VNode | VNode[];
+}
+interface FlowSelectorBoundsLayerOptions extends LayerOptions {
+    ignoreOneSelect?: boolean;
+    ignoreChildrenLength?: boolean;
+    boundsPadding?: number;
+    disableBackground?: boolean;
+    backgroundClassName?: string;
+    foregroundClassName?: string;
+    SelectorBoxPopover?: Component;
+    CustomBoundsRenderer?: Component;
+}
+/**
+ * 流程节点被框选后的边界区域渲染
+ */
+declare class FlowSelectorBoundsLayer extends Layer<FlowSelectorBoundsLayerOptions> {
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly commandRegistry: CommandRegistry;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    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(): VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }> | null;
+}
+
+/**
+ * 流程右键菜单
+ */
+declare class FlowContextMenuLayer extends Layer {
+    readonly commandRegistry: CommandRegistry;
+    readonly rendererRegistry: FlowRendererRegistry;
+    readonly contextMenuService: ContextMenuService;
+    readonly playgroundContainer: PlaygroundContainerFactory;
+    protected flowSelectConfigEntity: FlowSelectConfigEntity;
+    readonly selectionService: SelectionService;
+    protected playgroundConfigEntity: PlaygroundConfigEntity;
+    protected editorStateConfig: EditorStateConfigEntity;
+    protected selectorBoxConfigEntity: SelectorBoxConfigEntity;
+    readonly node: HTMLDivElement;
+    readonly nodeRef: {
+        current: {
+            setVisible: (v: boolean) => void;
+        } | null;
+    };
+    isEnabled(): boolean;
+    onReady(): void;
+    onScroll(): void;
+    onZoom(): void;
+    /**
+     * Destroy
+     */
+    dispose(): void;
+    /**
+     * 渲染工具栏
+     */
+    renderCommandMenus(): VNode[];
+    render(): VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 控制滚动边界
+ */
+declare class FlowScrollLimitLayer extends Layer {
+    readonly document: FlowDocument;
+    getInitScroll(): ScrollSchema;
+    onReady(): void;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const FlowRendererContribution: unique symbol;
+interface FlowRendererContribution {
+    registerRenderer?(registry: FlowRendererRegistry): void;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const FlowRendererContainerModule: ContainerModule;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const MARK_ARROW_ID = "$marker_arrow$";
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const MARK_ACTIVATED_ARROW_ID = "$marker_arrow_activated$";
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare function useBaseColor(): {
+    baseColor: string;
+    baseActivatedColor: string;
+};
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface PropsType {
+    data: FlowNodeTransitionData;
+    rendererRegistry: FlowRendererRegistry;
+    isViewportVisible: (bounds: Rectangle) => boolean;
+    linesSave: VNode[];
+    dragService: FlowDragService;
+}
+declare function createLines(props: PropsType): void;
+
+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, createLines, useBaseColor };