ice-render 0.0.6 → 0.0.9

package/dist/types/consts/BIG_ZINDEX_NUMBER.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * zIndex 最大值，这里使用一千万是安全的，在一张画布上渲染一千万个图形的可能性很小
+ * zIndex 用来控制组件在画布中的堆叠次序
+ * @see ICEComponent.state.zIndex
+ */
+declare const bigZIndexNum: number;
+export default bigZIndexNum;

package/dist/types/consts/COMPONENT_TYPE_MAPPING.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import ICEGroup from '../graphic/container/ICEGroup';
+import ICEImage from '../graphic/ICEImage';
+import ICEPolyLine from '../graphic/line/ICEPolyLine';
+import ICEVisioLink from '../graphic/link/ICEVisioLink';
+import ICECircle from '../graphic/shape/ICECircle';
+import ICEEllipse from '../graphic/shape/ICEEllipse';
+import ICEIsogon from '../graphic/shape/ICEIsogon';
+import ICERect from '../graphic/shape/ICERect';
+import ICEStar from '../graphic/shape/ICEStar';
+import ICEText from '../graphic/text/ICEText';
+/**
+ * 组件名称和构造函数引用之间的映射关系，把序列化之后的 JSON 字符串重新解析成图形时需要用到此映射关系。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ *
+ * FIXME:需要扩展一个注册方法，让外部使用方把自己扩展的组件注册进来，否则无法序列化和反解析。
+ */
+declare const componentTypeMap: {
+    ICERect: typeof ICERect;
+    ICECircle: typeof ICECircle;
+    ICEEllipse: typeof ICEEllipse;
+    ICEStar: typeof ICEStar;
+    ICEIsogon: typeof ICEIsogon;
+    ICEText: typeof ICEText;
+    ICEImage: typeof ICEImage;
+    ICEGroup: typeof ICEGroup;
+    ICEVisioLink: typeof ICEVisioLink;
+    ICEPolyLine: typeof ICEPolyLine;
+};
+export default componentTypeMap;

package/dist/types/consts/ICE_EVENT_NAME_CONSTS.d.ts

@@ -0,0 +1,20 @@
+export default ICE_EVENT_NAME_CONSTS;
+declare namespace ICE_EVENT_NAME_CONSTS {
+    const ICE_FRAME_EVENT: string;
+    const BEFORE_RENDER: string;
+    const AFTER_RENDER: string;
+    const BEFORE_ADD: string;
+    const AFTER_ADD: string;
+    const BEFORE_REMOVE: string;
+    const AFTER_REMOVE: string;
+    const ROUND_FINISH: string;
+    const HOOK_MOUSEDOWN: string;
+    const HOOK_MOUSEMOVE: string;
+    const HOOK_MOUSEUP: string;
+    const BEFORE_RESIZE: string;
+    const AFTER_RESIZE: string;
+    const BEFORE_ROTATE: string;
+    const AFTER_ROTATE: string;
+    const BEFORE_MOVE: string;
+    const AFTER_MOVE: string;
+}

package/dist/types/consts/MOUSE_EVENT_MAPPING_CONSTS.d.ts

@@ -0,0 +1,13 @@
+export default mouseEvents;
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * 原生 DOM 事件与 ICE 内部转发事件之间的对应关系
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare const mouseEvents: string[][];

package/dist/types/control-panel/DDManager.d.ts

@@ -0,0 +1,24 @@
+import ICE from '../ICE';
+/**
+ * @class DDManager
+ *
+ *  拖拽管理器
+ *
+ * - ICE Render 中所有组件的拖动都由 DDManager 管理。
+ * - 拖拽管理器是纯逻辑组件，没有外观。
+ * - DDManager 只负责拖拽和移动位置，不进行其它操作。
+ * - 全局单例，一个 ICE 实例上只能有一个 DDManager 实例。
+ *
+ * @see ICE
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+export default class DDManager {
+    private ice;
+    private currentObj;
+    constructor(ice: ICE);
+    start(): this;
+    stop(): this;
+    private mouseDownHandler;
+    private mouseMoveHandler;
+    private mouseUpHandler;
+}

package/dist/types/control-panel/ICEControlPanel.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import ICEGroup from '../graphic/container/ICEGroup';
+import ICEComponent from '../graphic/ICEComponent';
+/**
+ * @class ICEControlPanel
+ *
+ * 控制面板
+ *
+ * FIXME:所有 ControlPanel 类型的组件都需要处理组件的 REMOVE 事件，当组件被删除时，清理关联关系。
+ *
+ * - ICEControlPanel 本身总是直接画在 canvas 上，不是任何组件的孩子。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+export default abstract class ICEControlPanel extends ICEGroup {
+    protected _targetComponent: ICEComponent;
+    constructor(props: any);
+    protected abstract initControls(): void;
+    protected abstract setControlPositions(): void;
+    protected doRender(): void;
+    moveGlobalPosition(tx: number, ty: number, evt?: any): void;
+    abstract enable(): any;
+    abstract disable(): any;
+}

package/dist/types/control-panel/ICEControlPanelManager.d.ts

@@ -0,0 +1,24 @@
+import ICE from '../ICE';
+/**
+ * @class ICEControlPanelManager
+ *
+ * 控制面板管理器
+ *
+ * - ICEControlPanelManager 负责管理所有类型的控制面板（ControlPanel）。
+ * - ICEControlPanelManager 是全局单例的，一个 ICE 实例上只能有一个实例。
+ * - ICEControlPanelManager 只需要设置 targetComponent 即可，拖拽移位操作由  DDManager 完成。
+ * - ICEControlPanelManager 是纯逻辑组件，没有外观。
+ *
+ * @see ICE
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class ICEControlPanelManager {
+    private ice;
+    private transformControlPanel;
+    private lineControlPanel;
+    constructor(ice: ICE);
+    start(): this;
+    stop(): this;
+    private mouseDownHandler;
+}
+export default ICEControlPanelManager;

package/dist/types/control-panel/link-controls/LineControlPanel.d.ts

@@ -0,0 +1,39 @@
+import ICEComponent from '../../graphic/ICEComponent';
+import ICEControlPanel from '../ICEControlPanel';
+/**
+ *
+ * @class LineControlPanel
+ *
+ * 线条变换控制面板
+ *
+ * LineControlPanel 只作为空的逻辑容器存在，控制面板内部的操作手柄需要全屏幕自由移动位置，手柄位置不固定，对 LineControlPanel 本身的参数完全没有影响。
+ *
+ * LineControlPanel 功能：
+ *
+ * - 移动线条的位置
+ * - 调整线条起点和终点的位置
+ * - 将线条连接到其它组件上
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+export default class LineControlPanel extends ICEControlPanel {
+    private controlSize;
+    private startControl;
+    private endControl;
+    constructor(props: any);
+    protected initControls(): void;
+    protected initEvents(): void;
+    enable(): void;
+    disable(): void;
+    /**
+     * 设置所有手柄在父组件中的位置，相对于父组件的本地坐标系。
+     * LineControlPanel 不强制操作手柄的位置，操作手柄可以自由移动。
+     */
+    protected setControlPositions(): void;
+    private resizeEvtHandler;
+    protected updatePosition(): void;
+    set targetComponent(component: ICEComponent);
+    get targetComponent(): ICEComponent;
+    showHooks(): void;
+    hideHooks(): void;
+}

package/dist/types/control-panel/transform-controls/ResizeControl.d.ts

@@ -0,0 +1,34 @@
+import ICERect from '../../graphic/shape/ICERect';
+/**
+ * @class ResizeControl 调整尺寸的操作手柄
+ *
+ * - 调整尺寸的操作手柄不能独立存在，只能依附在某个宿主对象上。
+ * - 此手柄只能调整尺寸，不能实现翻转
+ *
+ * TODO: 补全 props 配置项
+ * {
+ *   direction: 改变的方向，共有3个可选的值： x/y/both
+ *   position: 手柄在变换矩形4个边上的位置，共有8个：lt/t/rt/r/rb/b/lb/l
+ * }
+ */
+export default class ResizeControl extends ICERect {
+    constructor(props: any);
+    protected initEvents(): void;
+    /**
+     * 围绕几何中心点调整宽高。
+     * @param evt
+     */
+    private resizeEvtHandler;
+    /**
+     * @overwrite
+     * ResizeControl 不能自由移动自己的位置，自能在X轴、Y轴，以及矩形的2条对角线上移动位置。
+     *
+     * 在全局空间(canvas)中移动指定的位移。
+     * 注意：此方法用于直接设置组件在全局空间中的位移，而不是相对于其它坐标系。
+     *
+     * @param tx
+     * @param ty
+     * @param evt
+     */
+    moveGlobalPosition(tx: number, ty: number, evt?: any): void;
+}

package/dist/types/control-panel/transform-controls/RotateControl.d.ts

@@ -0,0 +1,16 @@
+import ICECircle from '../../graphic/shape/ICECircle';
+/**
+ * @class RotateControl 旋转操作手柄
+ *
+ * - 旋转手柄不能独立存在，只能依附在某个宿主对象上。
+ * - 此手柄仅用来修改组件的旋转角度。
+ *
+ * TODO: 补全 props 配置项
+ * {
+ * }
+ */
+export default class RotateControl extends ICECircle {
+    constructor(props: any);
+    protected initEvents(): void;
+    private rotateEvtHandler;
+}

package/dist/types/control-panel/transform-controls/TransformControlPanel.d.ts

@@ -0,0 +1,56 @@
+import ICEComponent from '../../graphic/ICEComponent';
+import ICEControlPanel from '../ICEControlPanel';
+/**
+ * @class TransformControlPanel
+ *
+ * 变换控制面板
+ *
+ * - TransformControlPanel 本身总是直接画在 canvas 上，不是任何组件的孩子。
+ * - TransformControlPanel 是全局单例，在任意时刻，不可能同时出现多个 TransformControlPanel 的实例，因为在图形化的用户交互模式下，用户无法同时操控多个控制面板。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+export default class TransformControlPanel extends ICEControlPanel {
+    private rotateControlInstance;
+    private rotateControlSize;
+    private rotateControlffsetY;
+    private resizeControlInstanceCache;
+    private resizeControlSize;
+    constructor(props: any);
+    /**
+     * @method initControls
+     * 添加尺寸和旋转变换手柄，初始化时添加在内部的[0,0]位置，此方法只创建对象实例，不执行渲染操作。
+     * 创建 8 个 ResizeControl
+     * 计算手柄位于父组件的哪一个象限中，有以下取值：
+     *  - 1: 第1象限；
+     *  - 2: 第2象限；
+     *  - 3: 第3象限；
+     *  - 4: 第4象限；
+     *  - 5: 位于X轴上方，y值为负，不属于任何象限；
+     *  - 6: 位于X轴下方，y值为正，不属于任何象限；
+     *  - 7: 位于Y轴左侧，x值为负，不属于任何象限；
+     *  - 8: 位于Y轴右侧，x值为正，不属于任何象限；
+     * 默认创建顺序，从左上角开始顺时针：tl:2/t:5/tr:1/r:8/rb:4/b:6/lb:3/l:7
+     * 第1和第3象限可以交换位置
+     * 第2和第4象限可以交换位置
+     * X 轴正负可以交换位置
+     * Y 轴正负可以交换位置
+     * TODO:添加斜切手柄？
+     */
+    protected initControls(): void;
+    protected initEvents(): void;
+    enable(): void;
+    disable(): void;
+    protected setControlPositions(): void;
+    private rotateEvtHandler;
+    private resizeEvtHandler;
+    protected updatePanel(): void;
+    set targetComponent(component: ICEComponent);
+    get targetComponent(): ICEComponent;
+    /**
+     * 交换两个 Control 的象限
+     * @param control
+     * @param quadrant
+     */
+    toggleControlQuadrant(control: any, quadrant: number): void;
+}

package/dist/types/cross-platform/root.d.ts

@@ -0,0 +1,2 @@
+export default root;
+declare let root: any;

package/dist/types/event/DOMEventBridge.d.ts

@@ -0,0 +1,27 @@
+import ICE from '../ICE';
+/**
+ * @class DOMEventBridge
+ *
+ * 事件桥接器，把原生 DOM 事件转发给 canvas 内部的组件。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class DOMEventBridge {
+    private selectionCandidates;
+    private ice;
+    private _stopped;
+    constructor(ice: ICE);
+    start(): this;
+    set stopped(flag: boolean);
+    get stopped(): boolean;
+    /**
+     * @method findTargetComponent
+     *
+     * 找到被点击的对象，用代码触发 click 事件。
+     * 在点击状态下，每次只能点击一个对象，当前不支持 DOM 冒泡特性。
+     *
+     * @returns
+     */
+    private findTargetComponent;
+}
+export default DOMEventBridge;

package/dist/types/event/EventBus.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import ICEEventTarget from './ICEEventTarget';
+/**
+ * @class EventBus
+ * @singleton
+ *
+ * EventBus 事件总线。
+ *
+ * - canvas 标签内部没有事件机制，ICE 借助于 EventBus 把原生 DOM 事件转发到 canvas 内部(mouse/keyboard/touch)，在转发过程中可能会把原生 DOM 事件转换成 ICEEvent 。
+ * - EventBus 是 ICEEventTarget 的实现类。
+ * - EventBus 是全局单例，同一个 ICE 实例上只能有一个事件总线的实例。
+ * - ICE 内部几乎所有机制都依赖事件总线来实现。
+ * - requestAnimationFrame 会利用事件总线触发 FRAME 事件。
+ *
+ * @see ICEEventTaregt
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class EventBus extends ICEEventTarget {
+    constructor(props?: any);
+}
+export default EventBus;

package/dist/types/event/ICEEvent.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * @class ICEEvent
+ *
+ * - 在 ICE 中，所有事件都会被转化成 ICEEvent 进行处理。
+ * - ICEEvent 用来模拟 W3C 定义的 Event 接口，ICE 自定义的事件也使用此实现，事件对象上能获取到的属性不同。
+ * - 从原始 DOM 事件转发出来的 ICEEvent 实例包含 Event 接口上所定义的所有属性，ICE 内部代码创建的 ICEEvent 实例上只包含很少的自定义属性。
+ * - 如果事件是从原始 DOM 事件包装而来，那么ICEEvent 实例的 originalEvent 属性是原始 DOM 事件对象，否则 originalEvent 属性为 null。
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Event
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class ICEEvent implements Event {
+    originalEvent: any;
+    param: any;
+    constructor(evt?: any, data?: any);
+    bubbles: boolean;
+    cancelBubble: boolean;
+    cancelable: boolean;
+    composed: boolean;
+    currentTarget: EventTarget;
+    defaultPrevented: boolean;
+    eventPhase: number;
+    isTrusted: boolean;
+    returnValue: boolean;
+    srcElement: EventTarget;
+    target: EventTarget;
+    timeStamp: number;
+    type: string;
+    composedPath(): EventTarget[];
+    initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
+    preventDefault(): void;
+    stopImmediatePropagation(): void;
+    stopPropagation(): void;
+    AT_TARGET: number;
+    BUBBLING_PHASE: number;
+    CAPTURING_PHASE: number;
+    NONE: number;
+}
+export default ICEEvent;

package/dist/types/event/ICEEventTarget.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @class ICEEventTarget
+ *
+ * - canvas 标签内部没有事件机制，模仿 W3C 定义的 EventTaregt 接口，为 Canvas 内部的组件添加事件机制。
+ * - ICE 内部的大部分组件都是 ICEEventTarget 的子类。
+ * - 部分 API 名称模仿 jQuery ，方便使用者调用。
+ *
+ * TODO:需要完整模拟 W3C 和 jQuery 提供的事件接口，在 API 名称和调用逻辑上保持完全一致。
+ *
+ * listeners 的结构：
+ * {
+ *    "click":[
+ *        {
+ *          callback:fn1,
+ *          scope:window
+ *        },
+ *        {
+ *          callback:fn2,
+ *          scope:component-1
+ *        }
+ *     ],
+ *    "mousemove":[
+ *        {
+ *          callback:fn1,
+ *          scope:window
+ *        },
+ *        {
+ *          callback:fn2,
+ *          scope:component-1
+ *        }
+ *     ]
+ * }
+ *
+ * @abstract
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
+ */
+declare abstract class ICEEventTarget {
+    protected listeners: any;
+    protected suspendedEventNames: any;
+    constructor();
+    /**
+     * @method on
+     * 添加事件监听
+     * @param eventName
+     * @param fn
+     * @param scope
+     */
+    on(eventName: string, fn: Function, scope?: any): void;
+    /**
+     * @method off
+     * 删除事件监听
+     * @param eventName
+     * @param fn
+     * @param scope
+     * @returns
+     */
+    off(eventName: string, fn: Function, scope?: any): void;
+    /**
+     * @method once
+     * 一次性事件，触发一次就自动删除自己。
+     * @param eventName
+     * @param fn
+     */
+    once(eventName: string, fn: Function, scope?: any): void;
+    /**
+     * @method dispatchEvent
+     *
+     * 触发事件。
+     *
+     * 所有事件都会被转换成 ICEEvent 实例。
+     *
+     * @param eventName
+     * @param originalEvent
+     * @param param
+     * @returns
+     */
+    trigger(eventName: string, originalEvent?: any, param?: {}): boolean;
+    /**
+     * @method suspend
+     * 挂起事件。
+     * @param eventName
+     */
+    suspend(eventName: string): void;
+    /**
+     * @method resume
+     * 恢复事件。
+     * @param eventName
+     */
+    resume(eventName: string): void;
+    /**
+     * @method purgeEvents
+     * 清除所有事件。
+     */
+    purgeEvents(): void;
+    /**
+     * @method hasListener
+     * 查询是否带有某个事件监听器。
+     * @param eventName
+     * @param fn
+     * @param scope
+     * @returns
+     */
+    hasListener(eventName: string, fn: Function, scope?: any): boolean;
+}
+export default ICEEventTarget;

package/dist/types/event/MouseEventInterceptor.d.ts

@@ -0,0 +1,7 @@
+export default MouseEventInterceptor;
+declare namespace MouseEventInterceptor {
+    const evtBuses: any[];
+    function start(): void;
+    function regitserEvtBus(evtBus: any): void;
+    function delEvtBus(evtBus: any): void;
+}

package/dist/types/geometry/GeoLine.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * @class GeoLine
+ * A geometrically line, invisible, no dimension, just used for mathematical operations.
+ * This implementation is improved from http://diagramo.com/ .
+ *
+ *
+ * 几何学意义上的直线，它不可见，没有宽度，用来进行数学运算。此实现从 diagramo 改进而来：http://diagramo.com/ 。
+ *
+ * @docauthor 大漠穷秋 <damoqiongqiu@126.com>
+ */
+export default class GeoLine {
+    constructor(startPoint: any, endPoint: any);
+    startPoint: any;
+    endPoint: any;
+    contains(x: any, y: any): boolean;
+}

package/dist/types/geometry/GeoPoint.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * @class GeoPoint
+ * A geometrically point, invisible, no dimension, just used for mathematical operations.
+ * This implementation is improved from http://diagramo.com/ .
+ *
+ *
+ * 几何学意义上的点，它不可见，没有大小，用来进行数学运算。此实现从 diagramo 改进而来：http://diagramo.com/ 。
+ *
+ * @docauthor 大漠穷秋 <damoqiongqiu@126.com>
+ */
+export default class GeoPoint {
+    /**
+     *
+     * @method load
+     * Creates a {GeoPoint} out of JSON parsed object.
+     *
+     *
+     * 从 JSON 对象创建 {GeoPoint} 实例。
+     * @param {JSONObject} o the JSON parsed object
+     * @return {GeoPoint} a newly constructed GeoPoint
+     */
+    static load(o: JSONObject): GeoPoint;
+    /**
+     *
+     * @method cloneArray
+     * Clones an array of points.
+     *
+     *
+     * 克隆一组点。
+     * @param {Array} v - the array of {GeoPoint}s
+     * @return an {Array} of {GeoPoint}s
+     */
+    static cloneArray(v: any[]): any[];
+    /**
+     * @constructor GeoPoint
+     * @param {*} x
+     * @param {*} y
+     */
+    constructor(x?: any, y?: any);
+    x: any;
+    y: any;
+    /**
+     * @method equals
+     * Tests if this point is equals to other point.
+     *
+     *
+     * 测试当前点是否与另一个点相等。
+     * @param {GeoPoint} anotherPoint - the other point
+     */
+    equals(anotherPoint: GeoPoint): boolean;
+    /**
+     * @method clone
+     * Clone current GeoPoint.
+     *
+     *
+     * 克隆当前点。
+     */
+    clone(): GeoPoint;
+}

package/dist/types/geometry/GeoUtil.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2022 大漠穷秋.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default class GeoUtil {
+    constructor();
+    /**
+     *
+     * 已知向量原点和向量坐标值，求向量相对于 X 轴正向的旋转角度。
+     *
+     * 两个点需要处于同一个坐标系中。
+     *
+     * rotateAngle 的数值范围限定在 [0,360] 度之间，闭区间。
+     *
+     * @param x
+     * @param y
+     * @param originX
+     * @param originY
+     * @returns
+     */
+    static calcRotateAngle(x: any, y: any, originX: any, originY: any): number;
+}