import * as _flowgram_ai_utils from '@flowgram.ai/utils';
import { Disposable, DisposableCollection, Emitter, Event as Event$1, DisposableImpl, SkewSchema, SizeSchema, ScaleSchema, PositionSchema, OriginSchema, TransformSchema, Matrix, Rectangle, OpacitySchema, RotationSchema, DOMCache, CacheManager, LocalId, MaybePromise, ContributionProvider } from '@flowgram.ai/utils';
export { ContributionProvider, OpacitySchema, OpacitySchemaDecoration, OriginSchema, OriginSchemaDecoration, PositionSchema, PositionSchemaDecoration, RotationSchema, RotationSchemaDecoration, ScaleSchema, ScaleSchemaDecoration, SizeSchema, SizeSchemaDecoration, SkewSchema, SkewSchemaDecoration, TransformSchema, TransformSchemaDecoration, bindContributionProvider, bindContributions, useRefresh } from '@flowgram.ai/utils';
import { interfaces, ContainerModule } from 'inversify';
import React$1 from 'react';
import { ConflatableMessage, IMessageHandler, Message } from '@phosphor/messaging';
import { CommandService } from '@flowgram.ai/command';
export { Command, CommandRegistry, CommandService } from '@flowgram.ai/command';
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 会被注入到 layer 层,可以在使用的时候替换它
*/
declare const PlaygroundContext: unique symbol;
type PlaygroundContext = any;
declare const PlaygroundContextProvider: unique symbol;
type PlaygroundContextProvider = () => any;
declare const injectPlaygroundContext: () => (target: any, propertyKey: string) => any;
declare const bindPlaygroundContextProvider: (bind: interfaces.Bind) => void;
declare const PlaygroundContainerFactory: unique symbol;
interface PlaygroundContainerFactory {
createChild: interfaces.Container['createChild'];
get: interfaces.Container['get'];
getAll: interfaces.Container['getAll'];
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const EntityManagerContribution: unique symbol;
interface EntityManagerContribution {
registerEntityManager(entityManager: EntityManager): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface ConfigEntityProps {
}
declare function createConfigDataRegistry
(entity: ConfigEntity): EntityDataRegistry;
/**
* 用于专门的数据配置,且是单例
*/
declare class ConfigEntity extends Entity {
static type: string;
protected ConfigDataRegistry: EntityDataRegistry;
constructor(opts: O);
getDefaultConfig(): P;
/**
* 判断 config 数据是否变化
*/
checkChanged(oldData: P, newData: Partial): boolean;
get config(): P;
updateConfig(props: Partial
): void;
onConfigChanged(fn: (data: P) => void): Disposable;
}
/**
* 让 entity 可以注入到类中
*
* @example
* ```
* class SomeClass {
* @inject(PlaygroundConfigEntity) playgroundConfig: PlaygroundConfigEntity
* }
* ```
* @param bind
* @param entityRegistry
*/
declare function bindConfigEntity(bind: interfaces.Bind, entityRegistry: EntityRegistry): void;
/**
* TODO registry 改成 decorator
* Entity 管理器,全局唯一
*/
declare class EntityManager implements Disposable {
readonly toDispose: DisposableCollection;
protected onEntityChangeEmitter: Emitter;
protected onEntityLifeCycleEmitter: Emitter<{
type: "add" | "update" | "delete";
entity: Entity;
}>;
protected onEntityDataChangeEmitter: Emitter<{
entityType: string;
entityDataType: string;
}>;
/**
* Entity 的类缓存,便于在 fromJSON 时候查询对应的类
*/
protected registryMap: Map;
/**
* Entity 数据类缓存,便于 fromJSON 使用
*/
protected dataRegistryMap: Map;
/**
* Entity 数据类依赖注入器,可用于在EntityData构造器中注入第三方模块
*/
protected dataInjectorMap: Map;
/**
* Entity 的所有实例缓存
*/
protected entityInstanceMap: Map;
/**
* entity 全局版本更新
* @protected
*/
protected entityVersionMap: Map;
/**
* data 全局版本更新
* @protected
*/
protected entityDataVersionMap: Map;
/**
* Entity 的实例按类型缓存,便于查询优化
*/
protected entityInstanceMapByType: Map;
/**
* 所有配置实体的缓存
*/
protected configEntities: Map;
/**
* 当对应的实体类型变化后触发
*/
readonly onEntityChange: _flowgram_ai_utils.Event;
/**
* entity data 数据变化
*/
readonly onEntityDataChange: _flowgram_ai_utils.Event<{
entityType: string;
entityDataType: string;
}>;
/**
* Entity 生命周期变化
*/
readonly onEntityLifeCycleChange: _flowgram_ai_utils.Event<{
type: "add" | "update" | "delete";
entity: Entity;
}>;
contributions: EntityManagerContribution[];
context: PlaygroundContext;
protected containerFactory: PlaygroundContainerFactory | undefined;
/**
* 暂停触发实体类型变化
*/
changeEntityLocked: boolean;
constructor();
init(): void;
/**
* 创建实体
*/
createEntity(Registry: EntityRegistry, opts?: Omit): T;
isConfigEntity(type: string): boolean;
/**
* 批量删除实体
*/
removeEntities(Registry: EntityRegistry): void;
removeEntityById(id: string): boolean;
/**
* 触发实体 reset
* @param registry
*/
resetEntities(registry: EntityRegistry): void;
resetEntity(registry: EntityRegistry, autoCreate?: boolean): void;
updateConfigEntity(registry: EntityRegistry, config: Partial): void;
/**
* @param type
*/
getRegistryByType(type: string): EntityRegistry | undefined;
registerEntity(Registry: EntityRegistry): void;
registerEntityData(Registry: EntityDataRegistry, injector?: EntityDataInjector): void;
getDataRegistryByType(type: string): EntityDataRegistry | undefined;
getEntityById(id: string): T | undefined;
/**
* @param autoCreate 是否要自动创建,默认 false
*/
getEntity(registry: EntityRegistry, autoCreate?: boolean): T | undefined;
getEntities(registry: EntityRegistry): T[];
getEntityDatas(entityRegistry: EntityRegistry, dataRegistry: EntityDataRegistry): T[];
hasEntity(registry: EntityRegistry): boolean;
/**
* 只存储 config 数据,忽略动态数据
*/
storeState({ configOnly }?: {
configOnly?: boolean;
}): EntityJSON[];
restoreState(data: EntityJSON[]): void;
protected saveEntity(entity: Entity): void;
protected removeEntity(entity: Entity): void;
/**
* 重制所有 entity 为初始化状态
*/
reset(): void;
private schedule;
fireEntityChanged: (entity: Entity | string) => void;
fireEntityDataChanged: (entityType: string, entityDataType: string) => void;
fireEntityLifeCycleChanged: ({ type, entity, }: {
type: "add" | "update" | "delete";
entity: Entity;
}) => void;
getEntityVersion(registry: EntityRegistry | string): number;
getEntityDataVersion(registry: EntityDataRegistry | string): number;
dispose(): void;
getDataInjector(registry: EntityDataRegistry | string): EntityDataInjector | undefined;
getService(identifier: interfaces.ServiceIdentifier): T;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 注册类
*/
interface EntityRegistry {
new (opts: any): E;
readonly type: E['type'];
}
/**
* 持久化数据
*/
interface EntityJSON {
type: string;
id: string;
dataList: object[];
}
interface EntityDataChangedEvent {
type: 'add' | 'delete' | 'update';
data: EntityData;
entity: T;
}
interface EntityOpts {
entityManager: EntityManager;
id?: string;
datas?: {
registry: EntityDataRegistry;
data?: EntityDataProps;
}[];
savedInManager?: boolean;
}
declare class Entity implements Disposable {
static type: string;
private readonly onEntityChangeEmitter;
private readonly onDataChangeEmitter;
private readonly initializeDataKeys;
protected readonly dataManager: Map;
/**
* 销毁事件管理
*/
readonly toDispose: DisposableCollection;
/**
* 销毁前事件管理
*/
readonly preDispose: DisposableCollection;
/**
* 修改会触发
*/
readonly onEntityChange: Event$1>;
/**
* 数据更改事件
*/
readonly onDataChange: Event$1>>;
/**
* 默认初始化的 Data
*/
getDefaultDataRegistries(): EntityDataRegistry[];
private _changeLockedTimes;
protected isInitialized: boolean;
private _id;
private _version;
private _savedInManager;
/**
* 暂停更新开关
* @protected
*/
protected get changeLocked(): boolean;
protected set changeLocked(changeLocked: boolean);
/**
* 实体类型
*/
get type(): string;
/**
* 全局的entity管理器
*/
readonly entityManager: EntityManager;
get context(): PlaygroundContext;
constructor(opts: OPTS);
addInitializeData(datas: EntityDataRegistry[], dataConfig?: any): void;
/**
* 实体的版本
*/
get version(): number;
/**
* 存储数据,用于持久化存储
*/
toJSON(): EntityJSON | any;
/**
* 还原数据
*/
fromJSON(data?: EntityJSON | any): void;
/**
* 实体 id
*/
get id(): string;
/**
* 销毁实体
*/
dispose(): void;
get disposed(): boolean;
/**
* 重制为初始化状态
*/
reset(): void;
/**
* 销毁事件
*/
get onDispose(): Event$1;
/**
* 触发实体更新
* @protected
*/
protected fireChange(): void;
/**
* 添加数据
*/
addData(Registry: EntityDataRegistry, defaultProps?: EntityDataProps): D;
/**
* 是否存到全局 manager,默认 true
*/
get savedInManager(): boolean;
/**
* 更新实体的数据
*/
updateData(Registry: EntityDataRegistry, props: EntityDataProps): void;
/**
* 获取 data 数据
*/
getData(Registry: EntityDataRegistry): D;
/**
* 是否有指定数据
*/
hasData(Registry: EntityDataRegistry): boolean;
/**
* 删除数据,初始化状态注入的数据无法被删除
*/
removeData(Registry: EntityDataRegistry): void;
/**
* 获取 IOC 服务
* @param identifier
*/
getService(identifier: interfaces.ServiceIdentifier): T;
protected register(): void;
__opts_type__: OPTS;
}
declare namespace Entity {
function getType(registry: EntityRegistry): string;
/**
* 默认数据比较,采用浅比较
*/
function checkDataChanged(oldProps: any, newProps: any): boolean;
function isRegistryOf(target: any, Registry: any): boolean;
}
/**
* 实体的数据块
*/
declare abstract class EntityData extends DisposableImpl {
readonly opts?: OPTS | undefined;
static type: string;
protected onDataChangeEmitter: Emitter>;
protected onWillChangeEmitter: Emitter>;
protected _data: DATA;
private _changeLocked;
protected _version: number;
entity: Entity;
/**
* 修改后触发
*/
readonly onDataChange: _flowgram_ai_utils.Event>;
/**
* 修改前触发
*/
readonly onWillChange: _flowgram_ai_utils.Event>;
/**
* 初始化数据
*/
abstract getDefaultData(): DATA;
constructor(entity: Entity, opts?: OPTS | undefined);
/**
* data 类型
*/
get type(): string;
/**
* 当前数据
*/
get data(): DATA;
/**
* 更新单个数据
*/
update(props: Partial | keyof DATA | DATA, value?: any): void;
/**
* 更新全量数据
* @param props
*/
fullyUpdate(props: DATA): void;
/**
* @deprecated
* 检测属性是否更改,默认采用浅比较
*/
checkChanged(newProps: Partial | DATA): boolean;
/**
* 存储数据,一般在关闭浏览器后需要暂时存到 localStorage
*/
toJSON(): any;
/**
* 还原数据
*/
fromJSON(data: object): void;
get changeLocked(): boolean;
set changeLocked(p: boolean);
fireWillChange(): void;
fireChange(): void;
protected bindChange(data: EntityData, fn?: () => void): void;
get version(): number;
}
type EntityDataProps = E['data'];
interface EntityDataRegistry {
new (...args: any[]): E;
type: E['type'];
}
type EntityDataInjector = () => OPTS;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class SkewData extends EntityData implements SkewSchema {
static type: string;
getDefaultData(): SkewSchema;
get x(): number;
get y(): number;
set x(x: number);
set y(y: number);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class SizeData extends EntityData implements SizeSchema {
static type: string;
getDefaultData(): SizeSchema;
get width(): number;
get height(): number;
set width(width: number);
set height(height: number);
get locked(): boolean;
set locked(locked: boolean);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class ScaleData extends EntityData implements ScaleSchema {
static type: string;
getDefaultData(): ScaleSchema;
get x(): number;
get y(): number;
set x(x: number);
set y(y: number);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class PositionData extends EntityData implements PositionSchema {
static type: string;
getDefaultData(): PositionSchema;
get x(): number;
get y(): number;
set x(x: number);
set y(y: number);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class OriginData extends EntityData implements OriginSchema {
static type: string;
getDefaultData(): OriginSchema;
get x(): number;
get y(): number;
set x(x: number);
set y(y: number);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class TransformData extends EntityData implements TransformSchema {
static type: string;
protected _worldTransform: Matrix;
protected _localTransform: Matrix;
protected _children: TransformData[] | undefined;
protected mutationCache: Map;
sizeToScale: boolean;
get children(): TransformData[];
clearChildren(): void;
/**
* 容器选择框会动态计算子节点大小
*/
get isContainer(): boolean;
/**
* The X-coordinate value of the normalized local X axis,
* the first column of the local transformation matrix without a scale.
*/
protected _cx: number;
/**
* The Y-coordinate value of the normalized local X axis,
* the first column of the local transformation matrix without a scale.
*/
protected _sx: number;
/**
* The X-coordinate value of the normalized local Y axis,
* the second column of the local transformation matrix without a scale.
*/
protected _cy: number;
/**
* The Y-coordinate value of the normalized local Y axis,
* the second column of the local transformation matrix without a scale.
*/
protected _sy: number;
/**
* The locally unique ID of the local transform.
*/
protected _localID: number;
/**
* The locally unique ID of the local transform
* used to calculate the current local transformation matrix.
*/
protected _currentLocalID: number;
/**
* The locally unique ID of the world transform.
*/
protected _worldID: number;
/**
* The locally unique ID of the parent's world transform
* used to calculate the current world transformation matrix.
*/
protected _parentID: number;
/**
* The parent transform
*/
protected _parent?: TransformData;
constructor(entity: Entity);
fireChange(): void;
get localTransform(): Matrix;
get worldTransform(): Matrix;
getDefaultData(): TransformSchema;
update(data: Partial): void;
get position(): PositionSchema;
set position(position: PositionSchema);
get size(): SizeSchema;
set size(size: SizeSchema);
get origin(): OriginSchema;
set origin(origin: OriginSchema);
get scale(): ScaleSchema;
set scale(scale: ScaleSchema);
get skew(): SkewSchema;
set skew(skew: SkewSchema);
get rotation(): number;
set rotation(rotation: number);
get data(): TransformSchema;
/**
* Called when the skew or the rotation changes.
*
* @protected
*/
protected updateSkew(): void;
/**
* Updates the local transformation matrix.
*/
protected updateLocalTransformMatrix(): void;
get localID(): number;
get worldID(): number;
/**
* Updates the local and the world transformation matrices.
*
*/
protected updateTransformMatrix(): void;
/**
* Decomposes a matrix and sets the transforms properties based on it.
*
* matrix - The matrix to decompose
*/
setFromMatrix(matrix: Matrix): void;
/**
* 缓存计算, 缓存只能针对 local, world 加缓存会出问题
*/
getMutationCache(key: string, fn: () => T): T;
get bounds(): Rectangle;
/**
* 不旋转的 bounds
*/
get boundsWithoutRotation(): Rectangle;
/**
* 本身的大小
*/
get localSize(): SizeSchema;
get worldSize(): SizeSchema;
/**
* 本地 bounds
*/
get localBounds(): Rectangle;
/**
* 判断是否包含点
* @param x
* @param y
* @param asCircle - 以圆形来算,TODO 目前不支持椭圆形
*/
contains(x: number, y: number, asCircle?: boolean): boolean;
get parent(): TransformData | undefined;
isParent(parent: TransformData): boolean;
isParentTransform(parent?: TransformData): boolean;
private _parentChangedDispose?;
private entityDispose?;
setParent(parent: TransformData | undefined, listenParentData?: boolean): void;
/**
* 判断矩形碰撞
*/
intersects(rect: Rectangle): boolean;
/**
* 全局的 scale
*/
get worldScale(): ScaleSchema;
/**
* 全局的 rotation
*/
get worldRotation(): number;
/**
* 全局的角度
*/
get worldDegree(): number;
get localOrigin(): PositionSchema;
/**
* 全局的原点位置
*/
get worldOrigin(): PositionSchema;
/**
* 宽转换成 scale,用于图片等无法修改大小的场景
* @param isWorldSize 是否为绝对大小
*/
widthToScaleX(width: number, isWorldSize?: boolean): number;
/**
* 绝对高转换成 scale,用于图片等无法修改大小的场景
* @param isWorldSize 是否为绝对大小
*/
heightToScaleY(height: number, isWorldSize?: boolean): number;
sizeToScaleValue(size: {
width: number;
height: number;
}, isWorldSize?: boolean): {
x: number;
y: number;
};
}
declare namespace TransformData {
/**
* @param dragableEntities
* @param target
*/
function isParentOrChildrenTransform(dragableEntities: Entity[], target: Entity): boolean;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface NodeSchema {
id: string;
name?: string;
}
interface TransformNodeSchema extends NodeSchema {
transform: TransformSchema;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class OpacityData extends EntityData {
static type: string;
getDefaultData(): OpacitySchema;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class RotationData extends EntityData {
static type: string;
getDefaultData(): RotationSchema;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
type TransformOriginAndSize = Pick & Pick;
declare namespace Bounds {
/**
* 位置做矩阵偏移
*/
function getPointWithMatrix(output: PositionSchema, matrix?: Matrix): PositionSchema;
/**
* 获取外围边界矩形
*/
function getBounds(target: TransformOriginAndSize, matrix?: Matrix): Rectangle;
function applyMatrix(bounds: Rectangle, matrix: Matrix): Rectangle;
/**
* 找到边框中最左边的点
*/
function getLeftPointFromBounds(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
/**
* 找到边框中最上边的点
*/
function getTopPointFromBounds(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getCenter(target: TransformSchema, matrix?: Matrix): PositionSchema;
function getTopLeft(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getTopCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getTopRight(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getLeftCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getRightCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getBottomLeft(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getBottomCenter(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
function getBottomRight(target: TransformOriginAndSize, matrix?: Matrix): PositionSchema;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const ENTITIES_DECO_KEY: unique symbol;
declare const ENTITIES_BY_DATA_DECO_KEY: unique symbol;
interface RegistryValueGetter {
(target: any, method: string | symbol): T;
}
interface RegistryInit {
(target: any, method: string | symbol): void;
}
declare function getRegistryMetadata(target: any, key: symbol): any[];
/**
* 在 rspack 场景编译ts文件时候
* decorator 注入的 property 会被当成 this 的属性, 导致 Reflect.metadata 失效
*/
declare function removeInjectedProperties(instance: any): void;
declare function createRegistryDecorator(key: symbol, data: any, getValue?: RegistryValueGetter, init?: RegistryInit): any;
declare function getEntityMetadata(layer: any): EntityRegistry[];
declare function getEntityDatasMetadata(layer: any): {
entity: EntityRegistry;
data: EntityDataRegistry;
}[];
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare function observeEntity(registry: EntityRegistry): any;
/**
* 监听 entity 变化
* @param registry
*/
declare function observeEntities(registry: EntityRegistry): any;
/**
* 监听 entity 对应的 data 数据变化
*
* @param entityRegistry
* @param dataRegistry
*/
declare function observeEntityDatas(entityRegistry: EntityRegistry, dataRegistry: EntityDataRegistry): any;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class PlaygroundSchedule implements Disposable {
protected execMap: Map void>;
push(key: any, fn: () => void): void;
dispose(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 保护区域不被画布劫持滚动事件
*/
declare const ProtectWheelArea: unique symbol;
type ProtectWheelArea = (dom: Element) => boolean;
interface PlaygroundConfigEntityData {
scrollX: number;
scrollY: number;
originX: number;
originY: number;
width: number;
height: number;
reverseScroll: boolean;
overflowX: 'hidden' | 'scroll';
overflowY: 'hidden' | 'scroll';
minZoom: number;
maxZoom: number;
zoom: number;
scrollLimitX?: number;
scrollLimitY?: number;
mouseScrollDelta?: number | ((zoom: number) => number);
pageBounds?: {
x: number;
y: number;
width: number;
height: number;
};
disabled: boolean;
readonly: boolean;
scrollDisable: boolean;
grabDisable: boolean;
zoomDisable: boolean;
}
interface PlaygroundConfigRevealOpts {
entities?: Entity[];
position?: PositionSchema;
bounds?: Rectangle;
scrollDelta?: PositionSchema;
zoom?: number;
easing?: boolean;
easingDuration?: number;
scrollToCenter?: boolean;
}
declare const SCALE_WIDTH = 0;
/** 鼠标缩放 delta */
declare const MOUSE_SCROLL_DELTA: (zoom: number) => number;
type PlaygroundScrollLimitFn = (scroll: {
scrollX: number;
scrollY: number;
}) => {
scrollX: number;
scrollY: number;
};
type Cursors = Record;
/**
* 全局画布的配置信息
*/
declare class PlaygroundConfigEntity extends ConfigEntity {
static type: string;
getCursors: (() => Cursors | undefined) | undefined;
private _loading;
private _zoomEnable;
private _scrollLimitFn?;
private _onReadonlyOrDisabledChangeEmitter;
private _onGrabDisableChangeEmitter;
readonly onGrabDisableChange: _flowgram_ai_utils.Event;
readonly onReadonlyOrDisabledChange: _flowgram_ai_utils.Event<{
readonly: boolean;
disabled: boolean;
}>;
playgroundDomNode: HTMLElement;
cursor: string;
constructor(opts: any);
/**
* 是否禁用抓取拖拽画布能力
*/
get grabDisable(): boolean;
/**
* 是否禁用抓取拖拽画布能力
*/
set grabDisable(grabDisable: boolean);
get scrollDisable(): boolean;
set scrollDisable(scrollDisable: boolean);
get zoomDisable(): boolean;
set zoomDisable(zoomDisable: boolean);
getDefaultConfig(): PlaygroundConfigEntityData;
/**
* 添加滚动限制逻辑
* @param fn
*/
addScrollLimit(fn: PlaygroundScrollLimitFn): void;
/**
* 更新实体配置
* @param props
*/
updateConfig(props: Partial): void;
/**
* 缩放比例
* 使用 zoom 替代
* @deprecated
*/
get finalScale(): number;
/**
* 缩放比例
*/
get zoom(): number;
get scrollData(): {
scrollX: number;
scrollY: number;
};
protected normalizeZoom(zoom: number): number;
/**
* 修改画布光标
* @param cursor
*/
updateCursor(cursor: string): void;
/**
* 获取相对画布的位置
* @param event
* @param widthScale 是否要计算缩放
*/
getPosFromMouseEvent(event: MouseEvent | TouchEvent | {
clientX: number;
clientY: number;
}, withScale?: boolean): PositionSchema;
getClientBounds(): Rectangle;
/**
* 将画布中的位置转成相对 window 的位置
* @param pos
*/
toFixedPos(pos: PositionSchema): PositionSchema;
/**
* 获取可视区域
*/
getViewport(withScale?: boolean): Rectangle;
/**
* 判断矩形是否在可视区域,如果有擦边页代表在可是区域
* @param bounds
* @param rotation
* @param includeAll - 是否包含在里边,默认 false
*/
isViewportVisible(bounds: Rectangle, rotation?: number, includeAll?: boolean): boolean;
/**
* 按下边顺序执行
* 1. 指定的 entity 位置或 pos 位置
* 3. 初始化位置
*/
scrollToView(opts?: PlaygroundConfigRevealOpts): Promise;
/**
* 这只画布边框,元素编辑的时候回吸附画布边框
* @param bounds
*/
setPageBounds(bounds: Rectangle): void;
getPageBounds(): Rectangle | undefined;
/**
* 滚动到画布中央
* @param zoomToFit 是否缩放并适配外围大小
* @param fitPadding 适配外围的留白
* @param easing 是否缓动
*/
scrollPageBoundsToCenter(zoomToFit?: boolean, fitPadding?: number, easing?: boolean): Promise;
private cancelScrollTeeen?;
/**
* 滚动
* @param scroll
* @param easing - 是否开启缓动,默认开启
* @param easingDuration - 滚动持续时间,默认 300ms
*/
scroll(scroll: Partial<{
scrollX: number;
scrollY: number;
zoom: number;
}>, easing?: boolean, easingDuration?: number): Promise;
/**
* 让 layer 的 node 节点不随着画布滚动条滚动
* @param layerNode
*/
fixLayerPosition(layerNode: HTMLElement): void;
get loading(): boolean;
set loading(loading: boolean);
/**
* @deprecated use 'zoomDisable' instead
*/
get zoomEnable(): boolean;
/**
* 开启缩放
* @deprecated use 'zoomDisable' instead
*/
set zoomEnable(zoomEnable: boolean);
/**
* 放大
*/
zoomin(easing?: boolean, easingDuration?: number): void;
/**
* 缩小
*/
zoomout(easing?: boolean, easingDuration?: number): void;
updateZoom(newZoom: number, easing?: boolean, easingDuration?: number): void;
get disabled(): boolean;
get readonly(): boolean;
get readonlyOrDisabled(): boolean;
set readonly(readonly: boolean);
set disabled(disabled: boolean);
/**
* 适应大小
* @param bounds 目标大小
* @param easing 是否开启动画,默认开启
* @param padding 边界空白
* @param easingDuration
*/
fitView(bounds: Rectangle, easing?: boolean, padding?: number, easingDuration?: number): Promise;
}
/**
* 编辑态
*/
interface EditorState {
id: string;
disabled?: boolean | ((config: PlaygroundConfigEntity) => boolean);
cursor?: string;
shortcut?: string;
shortcutAutoEsc?: boolean;
shortcutWorksOnlyOnStateChanged?: boolean;
handle?: (config: PlaygroundConfigEntity, e?: EditorStateChangeEvent) => void;
disableSelector?: boolean;
cancelMode: 'esc' | 'once' | 'hold';
onEsc?: (config: PlaygroundConfigEntity, e?: KeyboardEvent) => void;
}
declare namespace EditorState {
const STATE_SELECT: EditorState;
/** 鼠标友好模式状态 */
const STATE_MOUSE_FRIENDLY_SELECT: EditorState;
const STATE_GRAB: EditorState;
}
declare const EDITOR_STATE_DEFAULTS: EditorState[];
interface EditorStateChangeEvent {
state: EditorState;
event?: React$1.MouseEvent;
lastState?: EditorState;
}
/**
* 编辑状态管理
*/
declare class EditorStateConfigEntity extends ConfigEntity {
static type: string;
private _isPressingSpaceBar;
private _isPressingShift;
protected states: EditorState[];
protected selected: string;
protected onStateChangeEmitter: Emitter;
readonly onStateChange: _flowgram_ai_utils.Event;
constructor(opts: EntityOpts);
get isPressingSpaceBar(): boolean;
set isPressingSpaceBar(isPressing: boolean);
get isPressingShift(): boolean;
set isPressingShift(isPressing: boolean);
/**
* 取消指定状态后触发
* @param stateId
* @param fn
*/
onCancel(stateId: string, fn: () => void): Disposable;
getCurrentState(): EditorState | undefined;
is(stateId: string): boolean;
changeState(stateId: string, event?: React$1.MouseEvent): void;
toDefaultState(): void;
registerState(state: EditorState): void;
getStates(): EditorState[];
/**
* 是否为鼠标友好模式
*/
isMouseFriendlyMode(): boolean;
getStateFromShortcut(e: KeyboardEvent): EditorState | undefined;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 注入到 Layer 中的实体选择器
*/
interface PipelineEntities extends Iterable {
/**
* 获取单个实体,如果该实体是单例且被注册过,则会自动创建
* @param registry
*/
get(registry: EntityRegistry, id?: string): T | undefined;
/**
* 获取多个实体
* @param registry
*/
getEntities(registry: EntityRegistry): T[];
/**
* 获取 entity
* @param entityRegistry
* @param dataRegistry
*/
getEntityDatas(entityRegistry: EntityRegistry, dataRegistry: T): T[];
/**
* 是否存在
* @param registry
*/
has(registry: EntityRegistry): boolean;
/**
* 获取配置信息
* @param registry
*/
getConfig(registry: EntityRegistry): E['config'] | undefined;
/**
* 更新配置数据
*/
updateConfig(registry: EntityRegistry, props: Partial): void;
/**
* 创建实体
*/
createEntity: (registry: EntityRegistry, opts?: Omit) => E;
/**
* 批量删除实体
*/
removeEntities: (registry: EntityRegistry) => void;
/**
* 当前画布订阅的实体数目
*/
readonly size: number;
}
declare class PipelineEntitiesImpl implements PipelineEntities {
protected readonly entityManager: EntityManager;
protected observeEntities: Entity[];
protected observeDatas: EntityData[];
protected entitiesTypeCache: Map;
protected entitiesAbleCache: Map;
protected entitiyDataCache: Map;
constructor(entityManager: EntityManager);
get size(): number;
/**
* 加载订阅数据,会缓存到 layer 内部,layer 只能拿到订阅数据的子集
* @param observeEntites
* @param observeDatas
*/
load(observeEntites: Entity[], observeDatas: EntityData[]): void;
get(registry: EntityRegistry, id?: string): T | undefined;
has(registy: EntityRegistry): boolean;
getEntities(registry: EntityRegistry): T[];
getEntityDatas(entityRegistry: EntityRegistry, dataRegistry: T): T[];
updateConfig(registry: EntityRegistry, props: Partial): void;
getConfig(registry: EntityRegistry): E['config'] | undefined;
/**
* 创建实体
*/
createEntity(registry: EntityRegistry, opts?: Omit): E;
/**
* 批量删除实体
*/
removeEntities(registry: EntityRegistry): void;
[Symbol.iterator](): Iterator;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface LayerOptions {
}
declare const LayerOptions: unique symbol;
/**
* 基础 layer
*/
declare class Layer {
/**
* layer 的配置, 由 registerLayer(Layer, LayerOptions) 传入
*/
options: OPT;
protected readonly toDispose: DisposableCollection;
/**
* layer 可能存在 dom 也可能没有,如果有,则会加入到 pipeline 的 dom 节点上
*/
node: HTMLElement;
/**
* 父节点
*/
pipelineNode: HTMLElement;
/**
* 画布根节点
*/
playgroundNode: HTMLElement;
/**
* 当前 layer 的所有监听的实体数据
*/
observeManager: PipelineEntities;
/**
* 实体管理器
*/
readonly entityManager: EntityManager;
readonly context: CONTEXT;
/**
* 自动触发更新,在不需要 react 的时候用这个方法
*/
autorun?(): void;
/**
* 绘制 react
*/
render?(): JSX.Element;
/**
* 默认在渲染时候都会启用 react memo 进行隔离,这种情况就需要数据驱动更新
*/
renderWithReactMemo: boolean;
/**
* 全局选择
*/
/**
* 监听 playground 上的事件
* 规则:
* 1. 按 priority 排序,越高先执行
* 2. 没有提供,按 layer 的注册顺序,后注册先执行 (符合冒泡排序)
* 3. 执行返回 true,则阻止后续的执行
*/
listenPlaygroundEvent: (name: PipeEventName, handle: (event: PipeSupportEvent) => boolean | void, priority?: number, options?: AddEventListenerOptions) => Disposable;
/**
* 监听 document 上的事件
* 规则:
* 1. 按 priority 排序,越高先执行
* 2. 没有提供,按 layer 的注册顺序,后注册先执行 (符合冒泡排序)
* 3. 执行返回 true,则阻止后续的执行
*/
listenGlobalEvent: (name: PipeEventName, handle: (event: PipeSupportEvent) => boolean | void, priority?: number, options?: AddEventListenerOptions) => Disposable;
/**
* 初始化时候触发
*/
onReady?(): void;
/**
* playground 大小变化时候会触发
*/
onResize?(size: PipelineDimension): void;
/**
* playground focus 时候触发
*/
onFocus?(): void;
/**
* playground blur 时候触发
*/
onBlur?(): void;
/**
* 监听缩放
*/
onZoom?(zoom: number): void;
/**
* 监听滚动
*/
onScroll?(scroll: {
scrollX: number;
scrollY: number;
}): void;
/**
* viewport 更新触发
*/
onViewportChange?(): void;
/**
* readonly 或 disable 状态变化
* @param state
*/
onReadonlyOrDisabledChange?(state: {
disabled: boolean;
readonly: boolean;
}): void;
/**
* playground 是否 focused
*/
readonly isFocused: boolean;
/**
* 销毁
*/
dispose(): void;
/**
* 创建 dom 缓冲池
* @param className
*/
createDOMCache(className: string | (() => HTMLElement), children?: string): CacheManager;
/**
* 加载 layer 注册的实体数据,内部使用,不需要手动触发
* @return 数据是否变化
*/
reloadEntities: () => boolean;
/**
* 全局画布配置
*/
config: PlaygroundConfigEntity;
/**
* 获取鼠标在 Playground 的位置
*/
getPosFromMouseEvent(event: {
clientX: number;
clientY: number;
}, addScale?: boolean): PositionSchema;
/**
* 可以用于获取别的 layer
*/
getOtherLayer: (layerRegistry: LayerRegistry) => T | undefined;
}
interface LayerRegistry {
new (): P;
}
interface PlaygroundDragEvent extends MouseEvent {
id: LocalId;
startPos: PositionSchema;
endPos: PositionSchema;
movingDelta: PositionSchema;
scale: number;
isMoving: boolean;
isStart: boolean;
}
interface PlaygroundDragOptions {
onDragStart?: (e: PlaygroundDragEvent, context?: T) => void;
onDrag?: (e: PlaygroundDragEvent, context?: T) => void;
onDragEnd?: (e: PlaygroundDragEvent, context?: T) => void;
stopGlobalEventNames?: string[];
}
interface PlaygroundDragEntitiesOpts extends PlaygroundDragOptions {
context?: T;
config?: PlaygroundConfigEntity;
adsorbRefs?: Rectangle[];
}
declare class PlaygroundDrag implements Disposable {
private onDragStartEmitter;
private onDragEndEmitter;
private onDragEmitter;
private readonly _stopGlobalEventNames;
private localId;
protected context?: T;
readonly onDrag: _flowgram_ai_utils.Event;
readonly onDragStart: _flowgram_ai_utils.Event;
readonly onDragEnd: _flowgram_ai_utils.Event;
constructor(options?: PlaygroundDragOptions);
get isStarted(): boolean;
start(clientX: number, clientY: number, entity?: PlaygroundConfigEntity, context?: T): Promise;
stop(clientX: number, clientY: number): void;
dispose(): void;
handleEvent(_event: Event): void;
get scale(): number;
protected getRelativePos(event: MouseEvent): PositionSchema;
private _lastPos;
protected getDragEvent(event: MouseEvent): PlaygroundDragEvent;
private _finalize;
private _lastMouseMoveEvent?;
/**
* Handle the `'mousemove'` event for the drag object.
*/
private _evtMouseMove;
/**
* Handle the `'mouseup'` event for the drag object.
*/
private _evtMouseUp;
/**
* Handle the `'keydown'` event for the drag object.
*/
private _evtKeyDown;
/**
* Add the document event listeners for the drag object.
*/
private _addListeners;
/**
* Remove the document event listeners for the drag object.
*/
private _removeListeners;
/**
* 自动滚动画布
*/
private _updateDragScroll;
private _scrollXInterval;
private _scrollYInterval;
private _startScrollX;
private _stopScrollX;
private _startScrollY;
private _stopScrollY;
/**
* 触发滚动
* @param scrollKey
* @param added
*/
fireScroll(scrollKey: 'scrollY' | 'scrollX', added: boolean): void;
private _disposed;
private _promise?;
private _resolve?;
private _startPos?;
private _playgroundConfigEntity?;
}
declare namespace PlaygroundDrag {
/**
* 拖拽实体
*/
function startDrag(clientX: number, clientY: number, opts?: PlaygroundDragEntitiesOpts): Disposable;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface TweenValues {
[key: string]: number;
}
interface TweenOpts {
from: V;
to: V;
onUpdate?: (v: V) => void;
onComplete?: (v: V) => void;
onDispose?: (v: V) => void;
easing?: (num: number) => number;
duration: number;
}
declare function startTween(opts: TweenOpts): Disposable;
interface ScrollIntoViewOpts {
getScrollParent(): HTMLElement | undefined;
getTargetNode(): HTMLElement | undefined;
duration?: number;
scrollY?: boolean;
scrollX?: boolean;
}
/**
* 滚动到可视区域
* @param opts
*/
declare function scrollIntoViewWithTween(opts: ScrollIntoViewOpts): Disposable;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class PlaygroundGesture extends DisposableImpl {
readonly target: HTMLElement;
protected readonly config: PlaygroundConfigEntity;
private _pinching;
constructor(target: HTMLElement, config: PlaygroundConfigEntity);
handlePinch(params: {
first: boolean;
last: boolean;
originX: number;
originY: number;
newScale: number;
}): void;
getScaleBounds(): {
min: number;
max: number;
};
protected preventDefault(): void;
get pinching(): boolean;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const injectByProvider: (provider: interfaces.ServiceIdentifier) => (target: any, propertyKey: string) => any;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const LazyInjectContext: unique symbol;
declare const lazyInject: (serviceIdentifier: interfaces.ServiceIdentifier) => (target: any, propertyKey: string) => any;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare namespace MouseTouchEvent {
const isTouchEvent: (event: TouchEvent | React.TouchEvent) => event is TouchEvent;
const touchToMouseEvent: (event: Event) => MouseEvent | Event;
const getEventCoord: (e: MouseEvent | TouchEvent | {
clientX: number;
clientY: number;
}) => {
clientX: number;
clientY: number;
};
const preventDefault: (e: Event | MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => void;
const onTouched: (touchStartEvent: React.TouchEvent, callback: (e: MouseEvent) => void) => void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* MOUSE: 鼠标友好模式,鼠标左键拖动画布,滚动缩放 (适合 windows )
* PAD: 双指同向移动拖动,双指张开捏合缩放 (适合 mac)
*/
type PlaygroundInteractiveType = 'MOUSE' | 'PAD';
interface PlaygroundLayerOptions extends LayerOptions {
/**
* 阻止浏览器默认的手势(苹果触摸板),包含:放大缩小、左右滑动翻页,默认为 false
*/
preventGlobalGesture?: boolean;
ineractiveType?: PlaygroundInteractiveType;
/** 悬浮服务 */
hoverService?: {
/** 精确判断当前鼠标位置是否有元素存在 */
isSomeHovered: () => boolean;
updateHoverPosition: (position: PositionSchema, target?: HTMLElement) => void;
clearHovered: () => void;
};
}
/**
* 基础层,控制画布缩放/滚动等操作
*/
declare class PlaygroundLayer extends Layer {
protected playgroundConfigEntity: PlaygroundConfigEntity;
protected editorStateConfig: EditorStateConfigEntity;
protectWheelArea?: ProtectWheelArea;
private cancelStateListen?;
private lastShortcutState?;
private currentGesture?;
private startGrabScroll;
private cursorStyle;
private maskNode;
onReady(): void;
private getCursor;
/** 是否为鼠标优先模式 */
private isMouseMode;
onStateChanged(e: EditorStateChangeEvent): void;
protected grabDragger: PlaygroundDrag;
protected isGrab(): boolean;
createGesture(): void;
protected handleScrollEvent(event: WheelEvent): void;
protected getMouseScaleDelta(): number;
/**
* 监听滚动事件
* @param event
*/
protected handleWheelEvent(event: WheelEvent): void;
/**
* 获取 wheel 事件滚动的父元素
* @param dom
*/
protected getScrollParent(ele?: HTMLElement | null): HTMLElement | null;
autorun(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
type PipeSupportEvent = MouseEvent | DragEvent | KeyboardEvent | UIEvent | TouchEvent | any;
type PipeEventName = string;
interface PipelineDimension {
width: number;
height: number;
}
type PipelineEventHandler = (event: PipeSupportEvent) => boolean | undefined;
interface PipelineEventRegsiter {
handle: PipelineEventHandler;
priority: number;
}
declare enum PipelineLayerPriority {
BASE_LAYER = -2,// 优先级最低
TOOL_LAYER = -1,// 工具层
NORMAL_LAYER = 0
}
declare const PipelineLayerFactory: unique symbol;
type PipelineLayerFactory = (layerRegistry: LayerRegistry, layerOptions?: any) => Layer;
/**
* 画布全局的选择器,可以放任何东西
*/
declare class SelectionService implements Disposable {
protected readonly onSelectionChangedEmitter: Emitter[]>;
readonly onSelectionChanged: Event$1;
private currentSelection;
private disposers;
get selection(): Entity[];
isEmpty(): boolean;
set selection(selection: Entity[]);
private changeSelection;
dispose(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const StorageService: unique symbol;
/**
* 存储数据到缓存
*/
interface StorageService {
/**
* Stores the given data under the given key.
*/
setData(key: string, data: T): void;
/**
* Returns the data stored for the given key or the provided default value if nothing is stored for the given key.
*/
getData(key: string, defaultValue: T): T;
getData(key: string): T | undefined;
}
declare class LocalStorageService implements StorageService {
private storage;
private _prefix;
setData(key: string, data: T): void;
getData(key: string, defaultValue?: T): T;
prefix(key: string): string;
setPrefix(prefix: string): void;
protected init(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const ClipboardService: unique symbol;
interface ClipboardService {
onClipboardChanged: Event$1;
readText(): MaybePromise;
writeText(value: string): MaybePromise;
}
/**
* 剪贴板服务,一般用于管理临时的复制黏贴数据
* TODO: 后续可以支持调用浏览器
*/
declare class DefaultClipboardService implements ClipboardService {
private _currentData;
protected readonly onClipboardChangedEmitter: Emitter;
readonly onClipboardChanged: Event$1;
readText(): string;
writeText(value: string): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 圈选右键菜单相关 service
*/
declare class ContextMenuService {
/**
* 右键面板是否展示,展示的时候为 true
*/
private isRightPanelVisible;
get rightPanelVisible(): boolean;
set rightPanelVisible(visible: boolean);
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface LoggerProps {
event: LoggerEvent;
props?: Record;
}
declare enum LoggerEvent {
CANVAS_TTI = 0,// Time To Interactive,画布可交互时间
CANVAS_FPS = 1
}
/**
* 画布全局的选择器,可以放任何东西
*/
declare class LoggerService implements Disposable {
protected readonly onLoggerEmitter: Emitter;
readonly onLogger: Event$1;
onAllLayersRendered(): void;
onFlushRequest(renderFrameInterval: number): void;
dispose(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
type SelectorVersion = Map;
interface LayerEntitiesSelector {
lastEntityVersion?: SelectorVersion;
lastDataVersion?: SelectorVersion;
entities: EntityRegistry[];
datas: [EntityRegistry, EntityDataRegistry][];
}
/**
* 选择器用来在 pipeline 绘制之前,筛选并注入 entities
*/
declare class PipelineEntitiesSelector {
protected layerEntitiesSelectorMap: WeakMap;
readonly entityLayerMap: Map>;
readonly ableLayerMap: Map>;
entityManager: EntityManager;
/**
* 订阅关联的 entity,会影响 autorun
*/
subscribeEntities(layer: Layer, entities: EntityRegistry[]): void;
/**
* 订阅 data 数据
* @param layer
* @param entity
* @param data
*/
subscribleEntityByData(layer: Layer, entity: EntityRegistry, data: EntityDataRegistry): void;
protected getSelector(layer: Layer): LayerEntitiesSelector;
/**
* 查询 layer 关联的实体
*/
getLayerEntities(layer: Layer): {
entities: Entity[];
changed: boolean;
};
getLayerEntityDatas(layer: Layer): {
datas: EntityData[];
changed: boolean;
};
getLayerData(layer: Layer): {
observeEntities: Entity[];
observeDatas: EntityData[];
changed: boolean;
};
}
declare const FLUSH_LAYER_REQUEST = "flush-layer-request";
declare class FlushLayerMessage extends ConflatableMessage {
readonly layer: Layer;
constructor(layer: Layer);
}
/**
* pipeline 渲染器
*/
declare class PipelineRenderer implements Disposable, IMessageHandler {
protected readonly selector: PipelineEntitiesSelector;
isReady: boolean;
protected onAllLayersRenderedEmitter: Emitter;
protected toDispose: DisposableCollection;
readonly layers: Layer[];
protected forceUpdates: Set;
readonly layerAutorunMap: Map void>;
readonly layerRenderedMap: Map;
readonly layerFlushMessages: Map;
protected reactPortals: React$1.FunctionComponent[];
readonly node: HTMLDivElement;
/**
* 所有 Layer 第一次渲染完成后触发
*/
readonly onAllLayersRendered: _flowgram_ai_utils.Event;
protected readonly loggerService: LoggerService;
constructor(selector: PipelineEntitiesSelector, entityManager: EntityManager);
reportLayerRendered(layer: Layer): void;
addLayer(layer: Layer): void;
flush(forceUpdate?: boolean): void;
ready(): void;
dispose(): void;
processMessage(msg: Message): void;
protected loadLayerEntities(layer: Layer): boolean;
protected onFlushRequest(layer: Layer): boolean;
/**
* 1. PostMessage: 会将消息在 nextTick 执行
* 2. ConflatableMessage: 当多个消息进来会在下一个 nextTick 做合并
* 3. 图层相互隔离,即时一层挂了也不受影响
*/
updateLayer(layer: Layer, forceUpdate?: boolean): void;
private reactComp?;
/**
* 转成 react
*/
toReactComponent(): React$1.FC;
}
declare enum PipelineMessage {
ZOOM = "PIPELINE_ZOOM",
SCROLL = "PIPELINE_SCROLL"
}
/**
* pipeline 注册器,用于注册一些事件
*/
declare class PipelineRegistry implements Disposable, IMessageHandler {
private _isFocused;
protected toDispose: DisposableCollection;
protected allLayersMap: Map>, Layer>;
readonly onResizeEmitter: Emitter;
readonly onFocusEmitter: Emitter;
readonly onBlurEmitter: Emitter;
readonly onZoomEmitter: Emitter;
readonly onScrollEmitter: Emitter<{
scrollX: number;
scrollY: number;
}>;
readonly onFocus: _flowgram_ai_utils.Event;
readonly onBlur: _flowgram_ai_utils.Event;
readonly onZoom: _flowgram_ai_utils.Event;
readonly onScroll: _flowgram_ai_utils.Event<{
scrollX: number;
scrollY: number;
}>;
constructor();
renderer: PipelineRenderer;
selector: PipelineEntitiesSelector;
entityManager: EntityManager;
context: PlaygroundContext;
layerFactory: PipelineLayerFactory;
protected playgroundEvents: {
[key: string]: {
handlers: PipelineEventRegsiter[];
} & Disposable;
};
protected globalEvents: {
[key: string]: {
handlers: PipelineEventRegsiter[];
} & Disposable;
};
_listenEvent(name: PipeEventName, handle: PipelineEventHandler, isGlobal: boolean, priority?: number, options?: AddEventListenerOptions): Disposable;
/**
* 监听画布上的浏览器事件
*/
listenPlaygroundEvent(name: PipeEventName, handle: (event: PipeSupportEvent) => boolean | undefined, priority?: number, options?: AddEventListenerOptions): Disposable;
/**
* 监听全局的事件
* @param name
* @param handle
*/
listenGlobalEvent(name: PipeEventName, handle: (event: PipeSupportEvent) => boolean | undefined, priority?: number, options?: AddEventListenerOptions): Disposable;
/**
* 注册 layer
* @param layerRegistry
* @param layerOptions 配置
*/
registerLayer(layerRegistry: LayerRegistry
, layerOptions?: P['options']): void;
/**
* 获取 layer
*/
getLayer(layerRegistry: LayerRegistry): T | undefined;
get configEntity(): PlaygroundConfigEntity;
ready(): void;
processMessage(msg: Message): void;
/**
* pipline 大小变化时候会触发
*/
readonly onResize: _flowgram_ai_utils.Event;
dispose(): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const PlaygroundReactContext: React$1.Context;
declare const PlaygroundReactContainerContext: React$1.Context;
declare const PlaygroundReactRefContext: React$1.Context;
/**
* 当前 entity
*/
declare const PlaygroundEntityContext: React$1.Context;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const PlaygroundConfig: unique symbol;
/**
* 画布配置
*/
interface PlaygroundConfig {
layers?: LayerRegistry[];
editorStates?: EditorState[];
width?: number;
height?: number;
node?: HTMLElement;
autoFocus?: boolean;
autoResize?: boolean;
zoomEnable?: boolean;
contextMenuPath?: string[];
entityConfigs?: Map, any>;
context?: any;
}
/**
* 默认配置
*/
declare function createDefaultPlaygroundConfig(): PlaygroundConfig;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare const PlaygroundContribution: unique symbol;
interface PlaygroundContribution {
/**
* 注册 Layer/Entity/Able 相关
* @param registry
* @deprecated
*/
registerPlayground?(registry: PlaygroundRegistry): void;
/**
* 初始化画布 (onReady 之前)
* @param playground
*/
onInit?(playground: Playground): void;
/**
* 初始化 entity 完毕后触发
* @param playground
*/
onReady?(playground: Playground): void;
/**
* 销毁
* @param playground
*/
onDispose?(playground: Playground): void;
/**
* 所有 Layer 第一次渲染完毕后触发
* @param playground
*/
onAllLayersRendered?(playground: Playground): void;
}
declare class PlaygroundRegistry {
protected readonly pipeline: PipelineRegistry;
readonly entityManager: EntityManager;
readonly playgroundConfig: PlaygroundConfig;
config(config: Partial): void;
registerLayer(layerRegistry: LayerRegistry): void;
registerEntity(entityRegistry: EntityRegistry): void;
registerEditorState(state: EditorState): void;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
declare class Playground implements Disposable {
readonly entityManager: EntityManager;
readonly registry: PlaygroundRegistry;
readonly contextProvider: PlaygroundContextProvider;
readonly pipelineRenderer: PipelineRenderer;
readonly pipelineRegistry: PipelineRegistry;
protected readonly playgroundConfig: PlaygroundConfig;
protected readonly contributionProvider: ContributionProvider;
/**
* 用于管理画布命令
*/
readonly commandService: CommandService;
/**
* 用于管理画布选择
*/
readonly selectionService: SelectionService;
readonly toDispose: DisposableCollection;
readonly node: HTMLElement;
private _focused;
readonly onBlur: Event$1;
readonly onFocus: Event$1;
readonly onZoom: Event$1;
readonly onScroll: Event$1<{
scrollX: number;
scrollY: number;
}>;
get onResize(): Event$1;
private playgroundClassName;
constructor(entityManager: EntityManager, registry: PlaygroundRegistry, contextProvider: PlaygroundContextProvider, pipelineRenderer: PipelineRenderer, pipelineRegistry: PipelineRegistry, playgroundConfig: PlaygroundConfig, contributionProvider: ContributionProvider,
/**
* 用于管理画布命令
*/
commandService: CommandService,
/**
* 用于管理画布选择
*/
selectionService: SelectionService);
get context(): CONTEXT;
protected get contributions(): PlaygroundContribution[];
init(): void;
get pipelineNode(): HTMLDivElement;
setParent(parent: HTMLElement): void;
/**
* 对应的右键菜单路径
*/
get zoomEnable(): boolean;
set zoomEnable(zoomEnable: boolean);
/**
* 转换为内部的命令 id
* @param commandId
*/
/**
* 通知所有关联 able 的 entity
*/
/**
* 刷新所有 layer
*/
flush(): void;
/**
* 执行命令
* @param commandId
* @param args
*/
private isReady;
ready(): void;
/**
* 按下边顺序执行
* 1. 指定的 entity 位置或 pos 位置
* 2. selection 位置
* 3. 初始化位置
*/
scrollToView(opts?: PlaygroundConfigRevealOpts): Promise;
/**
* 这里会由 widget 透传进来
* @param msg
*/
resize(msg?: PipelineDimension, scrollToCenter?: boolean): boolean;
/**
* 触发 focus
*/
protected focus(): void;
/**
* 触发 blur
*/
protected blur(): void;
get focused(): boolean;
/**
* 画布配置数据
*/
get config(): PlaygroundConfigEntity;
/**
* 画布编辑状态管理
*/
get editorState(): EditorStateConfigEntity;
getConfigEntity(r: EntityRegistry): T;
dispose(): void;
get disposed(): boolean;
/**
* 转换成 react 组件
*/
toReactComponent(): React$1.FC;
/**
* 注册 layer
*/
registerLayer(layerRegistry: LayerRegistry
, layerOptions?: P['options']): void;
/**
* 注册 多个 layer
*/
registerLayers(...layerRegistries: LayerRegistry[]): void;
/**
* 获取 layer
*/
getLayer(layerRegistry: LayerRegistry): T | undefined;
get onAllLayersRendered(): Event$1;
}
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface PluginContext {
/**
* 画布实例
*/
playground: Playground;
/**
* IOC 容器
*/
container: interfaces.Container;
/**
* 获取 IOC 容器的 单例模块
* @param identifier
*/
get(identifier: interfaces.ServiceIdentifier): T;
/**
* 获取 IOC 容器的 多例模块
*/
getAll(identifier: interfaces.ServiceIdentifier): T[];
}
declare const PluginContext: unique symbol;
interface PluginBindConfig {
bind: interfaces.Bind;
unbind: interfaces.Unbind;
isBound: interfaces.IsBound;
rebind: interfaces.Rebind;
}
interface PluginConfig {
/**
* 插件 IOC 注册, 等价于 containerModule
* @param ctx
*/
onBind?: (bindConfig: PluginBindConfig, opts: Opts) => void;
/**
* 画布注册阶段
*/
onInit?: (ctx: CTX, opts: Opts) => void;
/**
* 画布准备阶段,一般用于 dom 事件注册等
*/
onReady?: (ctx: CTX, opts: Opts) => void;
/**
* 画布销毁阶段
*/
onDispose?: (ctx: CTX, opts: Opts) => void;
/**
* 画布所有 layer 渲染结束
*/
onAllLayersRendered?: (ctx: CTX, opts: Opts) => void;
/**
* IOC 模块,用于更底层的插件扩展
*/
containerModules?: interfaces.ContainerModule[];
}
declare const Plugin: unique symbol;
type Plugin = {
options: Options;
pluginId: string;
singleton: boolean;
initPlugin: () => void;
contributionKeys?: interfaces.ServiceIdentifier[];
containerModules?: interfaces.ContainerModule[];
};
interface PluginsProvider {
(ctx: CTX): Plugin[];
}
type PluginCreator = (opts: Options) => Plugin;
declare function loadPlugins(plugins: Plugin[], container: interfaces.Container): void;
declare function definePluginCreator(config: {
containerModules?: interfaces.ContainerModule[];
contributionKeys?: interfaces.ServiceIdentifier[];
singleton?: boolean;
} & PluginConfig): PluginCreator;
/**
* @example
* createPlaygroundPlugin({
* // IOC 注册
* onBind(bind) {
* bind('xxx').toSelf().inSingletonScope()
* },
* // 画布初始化
* onInit(ctx) {
* ctx.playground.registerLayer(MyLayer)
* },
* // 画布销毁
* onDispose(ctx) {
* },
* // IOC 模块
* containerModules: [new ContainerModule(() => {})]
* })
*/
declare const createPlaygroundPlugin: (options: PluginConfig) => Plugin;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface PlaygroundReactProviderProps {
containerModules?: interfaces.ContainerModule[];
parentContainer?: interfaces.Container;
playgroundContainer?: interfaces.Container;
playgroundContext?: any;
autoFocus?: boolean;
autoResize?: boolean;
zoomEnable?: boolean;
plugins?: PluginsProvider;
customPluginContext?: (container: interfaces.Container) => PluginContext;
children?: React$1.ReactNode;
}
/**
* Playground react 组件
* @param props
*/
declare const PlaygroundReactProvider: React$1.ForwardRefExoticComponent>;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface PlaygroundReactRendererProps {
/**
* 这个会放到 playground node 下边
*/
children?: React$1.ReactNode;
className?: string;
style?: React$1.CSSProperties;
}
declare const PlaygroundReactRenderer: React$1.FC;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取 entities 并监听变化
* @deprecated
*/
declare function useEntities(entityRegistry: EntityRegistry): T[];
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 从上下 PlaygroundEntityContext 获取 entity data 并监听变化 (默认不监听)
*
* */
declare function useEntityDataFromContext(dataRegistry: EntityDataRegistry, listenChange?: boolean): T;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 从上下 PlaygroundEntityContext 获取 entity 并监听变化(默认不监听)
*/
declare function useEntityFromContext(listenChange?: boolean): T;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 监听 event 事件变化
*/
declare function useListenEvents(...events: Event$1[]): void;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取 playground
*/
declare function usePlayground(): Playground;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取 playground inversify container
*/
declare function usePlaygroundContainer(): interfaces.Container;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取 playground context 数据
*/
declare function usePlaygroundContext(): T;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取画布的 IOC 模块
* @param identifier
*/
declare function useService(identifier: interfaces.ServiceIdentifier): T;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 获取 config entity
*/
declare function useConfigEntity(entityRegistry: EntityRegistry, listenChange?: boolean): T;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
interface UsePlaygroundDragReturn {
start(e: {
clientX: number;
clientY: number;
}, opts: PlaygroundDragOptions & {
context?: T;
}): Disposable;
}
declare function usePlaygroundDrag(): UsePlaygroundDragReturn;
declare function createPluginContextDefault(container: interfaces.Container): PluginContext;
declare function createPlaygroundLayerDefault(container: interfaces.Container, layerRegistry: LayerRegistry, options?: any): Layer;
declare const PlaygroundContainerModule: ContainerModule;
declare function createPlaygroundContainer(config?: PlaygroundConfig, parent?: interfaces.Container, container?: interfaces.Container): interfaces.Container;
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
/**
* 画布测试工具
*
* @example
*
* 监听 layer 的执行
* const layerState = PlaygroundMockTools.createLayerTestState(PlaygroundLayer)
* layerState.playground.ready()
* expect(layerState.onReady.mock.calls.length).toEqual(1)
* expect(layerState.autorun.mock.calls.length).toEqual(1)
* layerState.playground.config.updateConfig({
* scrollX: 100
* })
* expect(layerState.onReady.mock.calls.length).toEqual(1)
* expect(layerState.autorun.mock.calls.length).toEqual(2)
*/
declare namespace PlaygroundMockTools {
interface SpyInstance {
mock: {
calls: any[][];
instances: any[];
invocationCallOrder: any;
results: {
type: string;
value: any;
}[];
lastCall: any[];
};
}
export class LayerTestState {
readonly instance: T;
readonly playground: Playground;
readonly container: interfaces.Container;
autorun: SpyInstance;
render: SpyInstance;
onReady: SpyInstance;
onResize: SpyInstance;
onFocus: SpyInstance;
onBlur: SpyInstance;
onZoom: SpyInstance;
onScroll: SpyInstance;
onViewportChange: SpyInstance;
onReadonlyOrDisabledChange: SpyInstance;
constructor(instance: T, playground: Playground, container: interfaces.Container);
private hijackMethod;
}
export function createContainer(modules?: interfaces.ContainerModule[]): interfaces.Container;
export function createPlayground(modules?: interfaces.ContainerModule[]): Playground;
export function getLayerTestState(container: interfaces.Container, layerRegistry: LayerRegistry): LayerTestState;
/**
* 创建layer, 并记录layer的回调数据
* @param Layer
* @param opts
*/
export function createLayerTestState(layerRegistry: LayerRegistry, opts?: any, modules?: interfaces.ContainerModule[]): LayerTestState;
export { };
}
export { Bounds, ClipboardService, ConfigEntity, type ConfigEntityProps, ContextMenuService, type Cursors, DefaultClipboardService, EDITOR_STATE_DEFAULTS, ENTITIES_BY_DATA_DECO_KEY, ENTITIES_DECO_KEY, EditorState, type EditorStateChangeEvent, EditorStateConfigEntity, Entity, EntityData, type EntityDataChangedEvent, type EntityDataInjector, type EntityDataProps, type EntityDataRegistry, type EntityJSON, EntityManager, EntityManagerContribution, type EntityOpts, type EntityRegistry, FLUSH_LAYER_REQUEST, FlushLayerMessage, Layer, type LayerEntitiesSelector, LayerOptions, type LayerRegistry, LazyInjectContext, LocalStorageService, LoggerEvent, type LoggerProps, LoggerService, MOUSE_SCROLL_DELTA, MouseTouchEvent, type NodeSchema, OpacityData, OriginData, type PipeEventName, type PipeSupportEvent, type PipelineDimension, type PipelineEntities, PipelineEntitiesImpl, PipelineEntitiesSelector, type PipelineEventHandler, type PipelineEventRegsiter, PipelineLayerFactory, PipelineLayerPriority, PipelineMessage, PipelineRegistry, PipelineRenderer, Playground, PlaygroundConfig, PlaygroundConfigEntity, type PlaygroundConfigEntityData, type PlaygroundConfigRevealOpts, PlaygroundContainerFactory, PlaygroundContainerModule, PlaygroundContext, PlaygroundContextProvider, PlaygroundContribution, PlaygroundDrag, type PlaygroundDragEntitiesOpts, type PlaygroundDragEvent, type PlaygroundDragOptions, PlaygroundEntityContext, PlaygroundGesture, type PlaygroundInteractiveType, PlaygroundLayer, type PlaygroundLayerOptions, PlaygroundMockTools, PlaygroundReactContainerContext, PlaygroundReactContext, PlaygroundReactProvider, type PlaygroundReactProviderProps, PlaygroundReactRefContext, PlaygroundReactRenderer, type PlaygroundReactRendererProps, PlaygroundRegistry, PlaygroundSchedule, type PlaygroundScrollLimitFn, Plugin, type PluginBindConfig, type PluginConfig, PluginContext, type PluginCreator, type PluginsProvider, PositionData, ProtectWheelArea, type RegistryInit, type RegistryValueGetter, RotationData, SCALE_WIDTH, ScaleData, type ScrollIntoViewOpts, SelectionService, SizeData, SkewData, StorageService, TransformData, type TransformNodeSchema, type TweenOpts, bindConfigEntity, bindPlaygroundContextProvider, createConfigDataRegistry, createDefaultPlaygroundConfig, createPlaygroundContainer, createPlaygroundLayerDefault, createPlaygroundPlugin, createPluginContextDefault, createRegistryDecorator, definePluginCreator, getEntityDatasMetadata, getEntityMetadata, getRegistryMetadata, injectByProvider, injectPlaygroundContext, lazyInject, loadPlugins, observeEntities, observeEntity, observeEntityDatas, removeInjectedProperties, scrollIntoViewWithTween, startTween, useConfigEntity, useEntities, useEntityDataFromContext, useEntityFromContext, useListenEvents, usePlayground, usePlaygroundContainer, usePlaygroundContext, usePlaygroundDrag, useService };