ice-render 1.0.4 → 1.0.6

package/dist/types/graphic/link/ICEPolyLine.d.mts

@@ -0,0 +1,292 @@
+import ICEEvent from '../../event/ICEEvent.mjs';
+import ICEDotPath from '../ICEDotPath.mjs';
+/**
+ *
+ * @class ICEPolyLine  折线
+ *
+ * 基本特征：
+ *
+ * - ICEPolyLine 上至少存在 2 个点，否则 ICEPolyLine 自动填充。
+ * - ICEPolyLine 由多个点构成，如果折线上的所有点共线，则折线在外观上退化成直线。如果点数恰好为 2 ，折线退化成一条直线。
+ * - ICEPolyLine 以及所有子类不能进行 transform 操作，在 ICE 中，对线条进行矩阵变换是没有意义的。
+ * - ICEPolyLine 以及所有子类的 left/top 总是被设置为第 0 个点。
+ * - ICEPolyLine 以及所有子类的原点都在第 0 个点上，而不在几何中心点，这一特性与普通的 Component 不同。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class ICEPolyLine extends ICEDotPath {
+    /**
+     * 类型标识
+     * 用来解决 TypeScript 的 instanceof 兼容性问题， https://github.com/microsoft/TypeScript/issues/22585
+     * 仅供内部使用，业务代码不可依赖此属性
+     */
+    isLine: boolean;
+    /**
+     * @cfg
+     * {
+     *   lineType: 'solid',                 //可能的取值：solid, dashed
+     *   arrow: 'none',                     //可能的取值：none, start, end ,both
+     *   arrowLength: 15,                   //箭头长度
+     *   arrowAngel: 30,                    //箭头角度
+     *   lineWidth:2,                       //线条宽度
+     *   closePath:false,                   //连线默认不闭合路径
+     *   points:[],                         //线条上所有点的坐标
+     *   links:{                            //如果传递了连接关系参数，ICEPolyLine 会自动与指定的组件建立连接关系。
+     *     start:{id:null,position:null},
+     *     end:{id:null,position:null}
+     *   }
+     * }
+     *
+     * @param props
+     */
+    constructor(props?: any);
+    /**
+     * 精确命中判定：折线是开放路径，用「点到各线段的最小距离」判定（考虑线宽 + 容差）。
+     * dots 的原点在第 0 个点上，与 containsLocalPoint 的参数空间一致。
+     * @overwrite
+     */
+    protected containsLocalPoint(localX: number, localY: number): boolean;
+    /**
+     *
+     * 整理并校验构造参数。
+     *
+     * @static
+     * @param props
+     * @returns
+     */
+    protected static arrangeParam(props: any): any;
+    /**
+     * @overwrite
+     */
+    protected initEvents(): void;
+    protected afterAddHandler(evt?: ICEEvent): void;
+    /**
+     * @method syncConnections 同步连接关系
+     *
+     * - 根据 this.state.links 的数据结构，建立或者删除连接关系。
+     * - 此方法会在 setState() 中被调用，所以此方法内部不能调用 setState()，否则会死循环。如果需要修改 state ，直接赋值。
+     *
+     */
+    protected syncConnections(): void;
+    protected createLink(id: string, position: string): void;
+    /**
+     * @method removeLink 删除连接关系
+     * @param terminal 可以为 start 或者 end ，如果只提供了 terminal 参数，则删除此端点上的所有连接关系。
+     * @param id 连接终点的组件 id
+     * @param position 连接终点的组件的位置，可以为 TRBL
+     */
+    protected removeLink(terminal: string, id?: string, position?: string): void;
+    /**
+     * @method getLinkFromId
+     * 获取起点组件 id ，如果没有建立连接，则返回 null
+     * @returns
+     */
+    getLinkFromId(): string;
+    /**
+     * @method getLinkToId
+     * 获取终点组件 id ，如果没有建立连接，则返回 null
+     * @returns
+     */
+    getLinkToId(): string;
+    /**
+     * @method
+     * 连接的组件位置发生移动之后，重新计算连接线的起点和终点。
+     */
+    private followComponent;
+    /**
+     * ICEPolyLine 有自己的特殊处理，它的原点永远在 (0,0) 位置，而不在几何中点。
+     * @overwrite
+     * @returns
+     */
+    protected calcLocalOrigin(): number[];
+    /**
+     * @method __calcDots
+     * ICEPolyLine 有自己特殊的计算方式：
+     * - 原点总是放在 startPoint 的位置。
+     * - 数值相对于组件本地坐标系进行计算。
+     * @overwrite
+     * @returns
+     */
+    protected __calcDots(): any;
+    /**
+     * @method calcArrowPoints
+     * 计算箭头坐标
+     */
+    protected calcArrowPoints(): void;
+    protected doCalcArrowPoints(twoPoints: any): any[][];
+    /**
+     * @method addDot 增加一个点
+     *
+     * 动态向线条上增加一个点。
+     *
+     * @param point
+     * @param index
+     */
+    addDot(point: [number, number], index: number): void;
+    /**
+     * @method rmDot 删除一个点
+     *
+     * 从线条上删掉一个点，如果线条上的点数已经小于等于 2 ，则什么都不做。
+     *
+     * @param index
+     */
+    rmDot(index: number): boolean;
+    /**
+     * @overwrite
+     * @method calcComponentParams
+     * - 计算组件最原始的宽高和位置，此时没有经过任何变换，也没有移动坐标原点。
+     * - 在计算组件的原始尺寸时还没有确定原点坐标，所以只能基于组件本地坐标系的左上角 (0,0) 点进行计算。
+     * - 此方法不能依赖原点位置和 transform 矩阵。
+     * - 此方法会在 render() 中调用，所以不需要在构造函数中调用。
+     * - 此方法中不能使用 setState() ，如果需要修改状态，直接赋值，如：this.state.width = 100;
+     * - 子类可以覆盖此方法，实现自己的计算逻辑。
+     * @returns
+     */
+    protected calcComponentParams(): {
+        width: any;
+        height: any;
+    };
+    /**
+     * @method isDotsOnSameLine 是否所有点都在同一条直线上
+     *
+     * 进行共线判断，如果所有点都在同一条直线上，那么边界盒子的整体高度就等于线条的粗细。
+     *
+     * @returns
+     */
+    private isDotsOnSameLine;
+    /**
+     * @method calc4VertexPoints 计算4个顶点
+     *
+     * - 相对于组件本地的坐标系，原点位于左上角，没有经过矩阵变换。
+     * - 返回值用于计算组件的原始 width/height 。
+     *
+     * @returns {Array}
+     */
+    protected calc4VertexPoints(): any[][];
+    /**
+     * @method splitEndpointsTo4Points 将线条的起点和终点分成4个点，用于计算组件的原始 width/height
+     *
+     * 把直线的2个端点分裂成4个点，把线条的粗细参数(lineWidth)当成高度看待，方便计算最小包围盒。
+     *
+     * @returns
+     */
+    protected splitEndpointsTo4Points(): number[][];
+    private __polyBoxScratch;
+    /**
+     * 箭头三角面在 `state.dots` 中的**起始下标**（每个三角面占连续 3 个顶点：P0/A1/A2 或 Pn/B1/B2）。
+     *
+     * 由 `calcArrowPoints()` 维护，只在「填充实心箭头」与「并入包围盒」两处被读取。
+     * 存下标而不是坐标：坐标始终读实时的 `state.dots`，避免与点集的生命周期脱节。
+     * 它是运行时派生值，**不写入 `state`**，因此不参与序列化。
+     */
+    private __arrowFaceIndexes;
+    /**
+     * @overwrite
+     * @method __localBox  折线的本地包围盒
+     *
+     * 折线的本地原点固定为 (0,0)（见 calcLocalOrigin），点集可含负坐标，因此基类默认的
+     * 「[0,0,width,height]」约定**不成立** —— 必须由笔画带宽的顶点给出真实盒子。
+     *
+     * 基类的 `getMinBoundingBox()` 与渲染器的 `__paintWorldBox()` 都消费本方法，因此
+     * 「面板/插槽定位用的盒子」与「上屏快照盒」从此**同源一致**。
+     * 此前只有 `getMinBoundingBox()` 被覆盖，`__paintWorldBox()` 仍按 width/height 推导
+     * （而折线的 width 曾是 ≈0）→ 快照盒退化 → 局部重绘漏画折线。
+     *
+     * @returns [minX, minY, maxX, maxY]（实例内复用缓冲，需立即读取）
+     */
+    protected __localBox(): number[];
+    /**
+     * @method setState  更新组件状态
+     * setState 仅仅修改参数，不会立即导致重新渲染，需要等待 FrameManager 调度，最小延迟时间约为 1/60=16.67 ms 。
+     *
+     * ICEPolyLine 有自己特殊的处理方法：
+     *
+     * - ICEPolyLine 的 width/height 属性总是计算出来的，不能直接修改，不接受 width/height 配置项。
+     * - ICEPolyLine ICEPolyLine 不能进行 transform 操作，不接受 transform 配置项。
+     * - ICEPolyLine 可以直接修改 points 。
+     * - ICEPolyLine 的 left/top 数值可以直接修改，修改 left/top 时，会重新计算起点和终点坐标，保证 left/top 与 startPoint 始终保持在同一个点上。
+     *
+     * @overwrite
+     * @param newState 新的状态
+     */
+    setState(newState: any): void;
+    /**
+     * 插槽方向 → 单位方向向量（T=上/B=下/L=左/R=右，其余为无方向）。
+     *
+     * 用 `protected` 而不是 `private`：子类 `ICEVisioLink` 的贝塞尔形态需要按插槽法线推导控制点。
+     */
+    protected static dirVector(position: string): number[];
+    /**
+     * 正交布线：根据两端插槽方向，在起终点之间生成直角折线。
+     * 规则：起点沿 start 插槽方向延伸 routeOffset，终点沿 end 插槽方向延伸 routeOffset，
+     * 中间用「先水平后垂直」的曼哈顿折线连接。
+     */
+    protected recalculateRoute(): void;
+    /**
+     * @overwrite
+     * 支持贝塞尔曲线：curveType 为 quadratic/cubic 时用曲线连接，否则继承直线折线。
+     */
+    protected createPathObject(): any;
+    /**
+     * @overwrite
+     * 先绘制折线，再绘制连线标签（若 label 非空）。
+     */
+    protected doRender(): void;
+    /**
+     * 用「线色」把端点箭头三角形填实（`arrowStyle: 'filled'`，默认）。
+     *
+     * 箭头三角形是通过在 `state.dots` 里插入顶点来构造的，它只被**描边**（折线强制 fill:false），
+     * 所以默认看起来是空心的。这里在描边之后单独把三角面填充一次。
+     *
+     * 必须在 CTM 复原（`applyActiveTransform()`）之后调用 —— 用的是 dots 的本地坐标，
+     * 与 `drawLabel()` 同一坐标系。
+     */
+    private drawArrowFills;
+    /**
+     * 标签的**本地矩形**度量：`{ x, y, halfW, halfH }`；无标签时返回 null。
+     *
+     * 绘制（`drawLabel`）与包围盒（`__localBox`）**共用**这一份口径，避免「画的框」与「算的盒」漂移。
+     * 注意：`measureText` 前必须先设 `ctx.font`（字体状态跨调用遗留，先量后设会按上次字体算宽）——
+     * 本方法设置 font 但**不负责恢复**：绘制路径由 `ctx.save/restore` 兜住，包围盒路径见
+     * `__measureLabelBoxForBounds()`（盒子计算不应留下渲染副作用）。
+     */
+    private __labelMetrics;
+    /** `__localBox()` 专用包装：算完把 `ctx.font` 恢复 —— 盒子计算不该改变渲染状态。 */
+    private __measureLabelBoxForBounds;
+    /**
+     * 绘制连线标签：在折线中点绘制带背景的文本，遮住下面的线以保证可读性。
+     * 度量口径与 `__labelMetrics()` 共用（后者同时服务于包围盒）。
+     */
+    private drawLabel;
+    /**
+     * 计算标签位置：折线中点（本地坐标）。2 点取端点中点，多点取中间顶点。
+     */
+    private getLabelPosition;
+    /**
+     * @method getRotateAngle 获取组件的旋转角度
+     * @returns {number}
+     */
+    getRotateAngle(): number;
+    /**
+     * @method containsPoint 判断点是否在线上
+     *
+     * 计算方法：如果给点的坐标点到线段两端的距离之和等于线段长度，则表示点位于线段上，允许一定的误差范围，用 delta 参数进行调节。
+     * 算法来源：http://www.jeffreythompson.org/collision-detection/line-point.php
+     *
+     * @param x
+     * @param y
+     * @returns {boolean}
+     */
+    containsPoint(x: number, y: number): boolean;
+    /**
+     * @method getLines 获取线段数组
+     * @returns {Array<any>}
+     */
+    private getLines;
+    /**
+     * @overwrite
+     * @method destory
+     */
+    destory(): void;
+}
+export default ICEPolyLine;