ice-render 0.0.8 → 0.0.9

package/dist/types/FrameManager.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @class FrameManager
+ *
+ * 帧频控制器，全局单例，请勿创建多个实例。
+ * 在同一个 window/global 中，只有一个 FrameManager ，也就是说 FrameManager 是跨 ICE 实例共享的。
+ * FrameManager 只负责把 window/global 上的 requestAnimationFrame 回调函数转换成 ICE_EVENT_NAME_CONSTS.ICE_FRAME_EVENT 事件，然后在所有事件总线上进行触发。
+ * FrameManager 只触发事件，不进行渲染，渲染操作由对应的 Render 完成。
+ *
+ * @singleton
+ * @see ICE
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare const FrameManager: {
+    evtBuses: any[];
+    stopped: boolean;
+    frameCallback: () => void;
+    start: () => void;
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+    regitserEvtBus: (evtBus: any) => void;
+    delEvtBus: (evtBus: any) => void;
+};
+export default FrameManager;

package/dist/types/ICE.d.ts

@@ -0,0 +1,86 @@
+import AnimationManager from './animation/AnimationManager';
+import DDManager from './control-panel/DDManager';
+import ICEControlPanelManager from './control-panel/ICEControlPanelManager';
+import DOMEventBridge from './event/DOMEventBridge';
+import EventBus from './event/EventBus';
+import ICEComponent from './graphic/ICEComponent';
+import ICELinkSlotManager from './graphic/link/ICELinkSlotManager';
+import Deserializer from './persistence/Deserializer';
+import Serializer from './persistence/Serializer';
+import ImageCache from './util/ImageCache';
+/**
+ * @class ICE
+ *
+ * ICE: Interactive Canvas Engine ， 交互式 canvas 渲染引擎。
+ *
+ * - ICE 是整个引擎的主入口类。
+ * - 同一个 <canvas> 标签上只能初始化一个 ICE 实例。
+ *
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class ICE {
+    childNodes: any[];
+    toolNodes: any[];
+    evtBus: EventBus;
+    root: any;
+    canvasEl: any;
+    ctx: any;
+    canvasWidth: number;
+    canvasHeight: number;
+    canvasBoundingClientRect: any;
+    selectionList: Array<any>;
+    renderer: any;
+    animationManager: AnimationManager;
+    eventBridge: DOMEventBridge;
+    ddManager: DDManager;
+    controlPanelManager: ICEControlPanelManager;
+    linkSlotManager: ICELinkSlotManager;
+    serializer: Serializer;
+    deserializer: Deserializer;
+    imageCache: ImageCache;
+    private __dirty;
+    constructor();
+    /**
+     * @param ctx DOM id or CanvasContext
+     */
+    init(ctx: any): this;
+    /**
+     * @method addChild
+     * 添加交互工具组件。
+     * 工具组件不触发事件，不产生动画效果。
+     * @param {ICEComponent} tool
+     */
+    addTool(tool: ICEComponent): void;
+    /**
+     * @methos removeTool
+     * 删除交互工具组件。
+     * 工具组件不触发事件，不产生动画效果。
+     * @param tool
+     */
+    removeTool(tool: ICEComponent): void;
+    /**
+     *
+     * 调用 ICE.addChild() 方法，会直接把对象画在 canvas 上。
+     * 如果需要在容器中画组件，参见 @see ICEGroup.addChild() 方法
+     *
+     * @param component
+     */
+    addChild(component: any, markDirty?: boolean): void;
+    addChildren(arr: Array<ICEComponent>): void;
+    removeChild(component: ICEComponent, markDirty?: boolean): void;
+    removeChildren(arr: Array<ICEComponent>): void;
+    clearAll(): void;
+    findComponent(id: string): any;
+    protected _lastUpdateTime: number;
+    set dirty(flag: boolean);
+    get dirty(): boolean;
+    /**
+     * 把对象序列化成 JSON 字符串：
+     * - 容器型组件需要负责子节点的序列化操作
+     * - 如果组件不需要序列化，需要返回 null
+     * @returns JSONObject
+     */
+    toJSON(): string;
+    fromJSON(jsonStr: string): void;
+}
+export default ICE;

package/dist/types/animation/AnimationManager.d.ts

@@ -0,0 +1,25 @@
+import ICEComponent from '../graphic/ICEComponent';
+import ICE from '../ICE';
+/**
+ * @class AnimationManager
+ *
+ * 动画管理器
+ *
+ * - 全局单例，一个 ICE 实例上只能有一个 AnimationManager 的实例。
+ *
+ * @singleton
+ * @see ICE
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare class AnimationManager {
+    private animationMap;
+    private ice;
+    constructor(ice: ICE);
+    start(): this;
+    stop(): this;
+    private frameEventHandler;
+    private tween;
+    add(component: ICEComponent): void;
+    remove(el: any): void;
+}
+export default AnimationManager;

package/dist/types/animation/Easing.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ *
+ */
+/**
+ * 来源：https://github.com/AndrewRayCode/easing-utils/blob/master/src/easing.js
+ * 一组缓动工具函数
+ * @author 大漠穷秋<damoqiongqiu@126.com>
+ */
+declare const Easing: {
+    /**
+     * 线性变化
+     * @param from 起始值
+     * @param to  终止值
+     * @param duration 持续时间，ms
+     * @param startTime 动画开始时间
+     */
+    linear: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInQuad: (from: number, to: number, duration: number, startTime: number) => number;
+    easeOutQuad: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInOutQuad: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInQuart: (from: number, to: number, duration: number, startTime: number) => number;
+    easeOutQuart: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInOutQuart: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInCubic: (from: number, to: number, duration: number, startTime: number) => number;
+    easeOutCubic: (from: number, to: number, duration: number, startTime: number) => number;
+    easeInOutCubic: (from: number, to: number, duration: number, startTime: number) => number;
+};
+export default Easing;

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;