@logicflow/core
Version:
LogicFlow, help you quickly create flowcharts
102 lines (101 loc) • 3.86 kB
TypeScript
import LogicFlow from '../LogicFlow';
import { Options as LFOptions } from '../options';
import EventEmitter from '../event/eventEmitter';
import PointTuple = LogicFlow.PointTuple;
export type ZoomParamType = boolean | number;
export type TransformData = Record<'SCALE_X' | 'SCALE_Y' | 'SKEW_Y' | 'SKEW_X' | 'TRANSLATE_X' | 'TRANSLATE_Y', number>;
export type TransformType = 'zoom' | 'resetZoom' | 'translate' | 'focusOn';
export interface TransformInterface {
SCALE_X: number;
SCALE_Y: number;
SKEW_Y: number;
SKEW_X: number;
TRANSLATE_X: number;
TRANSLATE_Y: number;
ZOOM_SIZE: number;
MINI_SCALE_SIZE: number;
MAX_SCALE_SIZE: number;
translateLimitMinX: number;
translateLimitMinY: number;
translateLimitMaxX: number;
translateLimitMaxY: number;
zoom: (isZoomOut: ZoomParamType, point?: PointTuple) => string;
HtmlPointToCanvasPoint: (point: PointTuple) => PointTuple;
CanvasPointToHtmlPoint: (point: PointTuple) => PointTuple;
moveCanvasPointByHtml: (point: PointTuple, x: number, y: number) => PointTuple;
getTransformStyle: () => {
transform: string;
};
}
export declare class TransformModel implements TransformInterface {
MINI_SCALE_SIZE: number;
MAX_SCALE_SIZE: number;
SCALE_X: number;
SKEW_Y: number;
SKEW_X: number;
SCALE_Y: number;
TRANSLATE_X: number;
TRANSLATE_Y: number;
ZOOM_SIZE: number;
eventCenter: EventEmitter;
translateLimitMinX: number;
translateLimitMinY: number;
translateLimitMaxX: number;
translateLimitMaxY: number;
constructor(eventCenter: EventEmitter, options: LFOptions.Common);
setZoomMiniSize(size: number): void;
setZoomMaxSize(size: number): void;
/**
* 将最外层graph上的点基于缩放转换为canvasOverlay层上的点。
* @param point HTML点
*/
HtmlPointToCanvasPoint(point: PointTuple): PointTuple;
/**
* 将最外层canvasOverlay层上的点基于缩放转换为graph上的点。
* @param point HTML点
*/
CanvasPointToHtmlPoint(point: PointTuple): PointTuple;
/**
* 将一个在canvas上的点，向x轴方向移动directionX距离，向y轴方向移动directionY距离。
* 因为canvas可能被缩小或者放大了，所以其在canvas层移动的距离需要计算上缩放的量。
* @param point 点
* @param directionX x轴距离
* @param directionY y轴距离
*/
moveCanvasPointByHtml(point: PointTuple, directionX: number, directionY: number): PointTuple;
/**
* 根据缩放情况，获取缩放后的delta距离
* @param deltaX x轴距离变化
* @param deltaY y轴距离变化
*/
fixDeltaXY(deltaX: number, deltaY: number): PointTuple;
/**
* 基于当前的缩放，获取画布渲染样式transform值
*/
getTransformStyle(): {
transform: string;
};
/**
* 放大缩小图形
* @param zoomSize 放大缩小的值，支持传入0-n之间的数字。小于1表示缩小，大于1表示放大。也支持传入true和false按照内置的刻度放大缩小
* @param point 缩放的原点
* @returns {string} -放大缩小的比例
*/
zoom(zoomSize?: ZoomParamType, point?: PointTuple): string;
private emitGraphTransform;
resetZoom(): void;
translate(x: number, y: number): void;
/**
* 将图形定位到画布中心
* @param targetX 图形当前x坐标
* @param targetY 图形当前y坐标
* @param width 画布宽
* @param height 画布高
*/
focusOn(targetX: number, targetY: number, width: number, height: number): void;
/**
* 更新画布可以移动范围
*/
updateTranslateLimits(limit: boolean | 'vertical' | 'horizontal' | [number, number, number, number]): void;
}
export default TransformModel;