@logicflow/core 1.2.26 → 2.0.0-beta.0

package/es/event/eventArgs.d.ts

@@ -0,0 +1,428 @@
+import { LogicFlow, BaseNodeModel, BaseEdgeModel, Model, TransformData, TransformType } from '..';
+import NodeData = LogicFlow.NodeData;
+import EdgeData = LogicFlow.EdgeData;
+import GraphData = LogicFlow.GraphData;
+import AnchorConfig = Model.AnchorConfig;
+import ClientPosition = LogicFlow.ClientPosition;
+type ClickEventArgs = {
+    /**
+     * 点击后节点是否处于选中状态
+     */
+    isSelected: boolean;
+    /**
+     * 是否为多选状态
+     */
+    isMultiple: boolean;
+};
+type NodeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
+    /**
+     * 节点数据
+     */
+    data: NodeData;
+    /**
+     * 原生鼠标事件对象
+     */
+    e: MouseEvent;
+    /**
+     * 鼠标触发点相对于画布左上角的坐标
+     */
+    position: ClientPosition;
+}, T>;
+/**
+ * 节点事件
+ */
+interface NodeEventArgs {
+    /**
+     * 单击节点
+     */
+    'node:click': NodeEventArgsPick<'data' | 'e' | 'position'> & ClickEventArgs;
+    /**
+     * 双击节点
+     */
+    'node:dbclick': NodeEventArgsPick<'data' | 'e' | 'position'>;
+    /**
+     * 鼠标按下节点
+     */
+    'node:mousedown': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 鼠标抬起节点
+     */
+    'node:mouseup': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 鼠标移动节点
+     */
+    'node:mousemove': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 鼠标进入节点
+     */
+    'node:mouseenter': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 鼠标离开节点
+     */
+    'node:mouseleave': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 添加节点
+     */
+    'node:add': NodeEventArgsPick<'data'>;
+    /**
+     * 删除节点
+     */
+    'node:delete': NodeEventArgsPick<'data'>;
+    /**
+     * 添加外部拖入节点
+     */
+    'node:dnd-add': NodeEventArgsPick<'data'>;
+    /**
+     * 拖拽外部拖入节点
+     */
+    'node:dnd-drag': NodeEventArgsPick<'data'>;
+    /**
+     * 开始拖拽节点
+     */
+    'node:dragstart': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 拖拽节点
+     */
+    'node:drag': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 拖拽节点结束
+     */
+    'node:drop': NodeEventArgsPick<'data' | 'e'>;
+    /**
+     * 右键点击节点
+     */
+    'node:contextmenu': NodeEventArgsPick<'data' | 'e' | 'position'>;
+}
+type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
+    /**
+     * 边数据
+     */
+    data: EdgeData;
+    /**
+     * 原生鼠标事件对象
+     */
+    e: MouseEvent;
+    /**
+     * 鼠标触发点相对于画布左上角的坐标
+     */
+    position: ClientPosition;
+}, T>;
+/**
+ * 边事件
+ */
+interface EdgeEventArgs {
+    /**
+     * 单击边
+     */
+    'edge:click': EdgeEventArgsPick<'data' | 'e' | 'position'>;
+    /**
+     * 双击边
+     */
+    'edge:dbclick': EdgeEventArgsPick<'data' | 'e' | 'position'>;
+    /**
+     * 鼠标进入边
+     */
+    'edge:mouseenter': EdgeEventArgsPick<'data' | 'e'>;
+    /**
+     * 鼠标离开边
+     */
+    'edge:mouseleave': EdgeEventArgsPick<'data' | 'e'>;
+    /**
+     * 添加边
+     */
+    'edge:add': EdgeEventArgsPick<'data'>;
+    /**
+     * 删除边
+     */
+    'edge:delete': EdgeEventArgsPick<'data'>;
+    /**
+     * 右键点击边
+     */
+    'edge:contextmenu': EdgeEventArgsPick<'data' | 'e' | 'position'>;
+    /**
+     * 拖拽调整边
+     */
+    'edge:adjust': EdgeEventArgsPick<'data'>;
+    /**
+     * 调整边的起点/终点
+     */
+    'edge:exchange-node': {
+        data: {
+            /**
+             * 新的边的数据
+             */
+            newEdge: EdgeData;
+            /**
+             * 旧的边的数据
+             */
+            oldEdge: EdgeData;
+        };
+    };
+}
+/**
+ * 连线事件
+ */
+interface ConnectionEventArgs {
+    'connection:not-allowed': {
+        /**
+         * 目标节点数据
+         */
+        data: NodeData;
+        /**
+         * 校验信息
+         */
+        msg?: string;
+    };
+}
+/**
+ * 公共事件
+ */
+interface CommonEventArgs {
+    'element:click': {
+        /**
+         * 点击元素的数据（节点/边）
+         */
+        data: NodeData | EdgeData;
+        /**
+         * 原生鼠标事件对象
+         */
+        e: MouseEvent;
+        /**
+         * 鼠标触发点相对于画布左上角的坐标
+         */
+        position: ClientPosition;
+    };
+    /**
+     * 元素的 properties 发生改变
+     */
+    'properties:change': {
+        data: {
+            /**
+             * 元素的 id
+             */
+            id: string;
+            /**
+             * 元素的类型
+             */
+            type: string;
+            /**
+             * 改变的 properties 的 key
+             */
+            keys: string[];
+            /**
+             * 改变前的 properties
+             */
+            preProperties: Record<string, any>;
+            /**
+             * 改变后的 properties
+             */
+            properties: Record<string, any>;
+        };
+    };
+    /**
+     * 节点/边的文本更新
+     */
+    'text:update': {
+        data: {
+            /**
+             * 更新的文本
+             */
+            text: string;
+            /**
+             * 节点/边的 id
+             */
+            id: string;
+            /**
+             * 节点/边的类型
+             */
+            type: string;
+        };
+    };
+    /**
+     * 进行画布平移或缩放等变化操作时触发
+     */
+    'graph:transform': {
+        /**
+         * 变换操作类型
+         */
+        type: TransformType;
+        /**
+         * 变换操作后的数据
+         */
+        transform: TransformData;
+    };
+    /**
+     * 画布渲染数据后触发，即 `lf.render()` 方法被调用后触发。
+     */
+    'graph:rendered': {
+        /**
+         * 渲染后的画布数据
+         */
+        data: GraphData;
+    };
+}
+type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = Pick<{
+    /**
+     * 锚点数据
+     */
+    data: AnchorConfig;
+    /**
+     * 原生鼠标事件对象
+     */
+    e: MouseEvent;
+    /**
+     * 锚点所属节点的数据
+     */
+    nodeModel: BaseNodeModel;
+    /**
+     * 通过拖动锚点连线添加的边的数据
+     */
+    edgeModel: BaseEdgeModel;
+}, T>;
+/**
+ * 锚点事件
+ */
+interface AnchorEventArgs {
+    /**
+     * 开始拖拽锚点
+     */
+    'anchor:dragstart': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
+    /**
+     * 拖拽锚点
+     */
+    'anchor:drag': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
+    /**
+     * 拖拽锚点结束，并成功添加边。
+     * 只有在创建连线成功时才触发。用于区分手动创建的连线和自动创建的连线 `edge:add`
+     */
+    'anchor:drop': AnchorEventArgsPick<'data' | 'e' | 'nodeModel' | 'edgeModel'>;
+    /**
+     * 拖拽锚点结束，不管是否成功添加边都会触发
+     */
+    'anchor:dragend': AnchorEventArgsPick<'data' | 'e' | 'nodeModel' | 'edgeModel'>;
+}
+type BlankEventArgsPick<T extends 'e' | 'position'> = Pick<{
+    /**
+     * 原生鼠标事件对象
+     */
+    e: MouseEvent;
+    /**
+     * 鼠标触发点相对于画布左上角的坐标
+     */
+    position: ClientPosition;
+}, T>;
+/**
+ * 画布事件
+ */
+interface BlankEventArgs {
+    /**
+     * 鼠标按下画布
+     */
+    'blank:mousedown': BlankEventArgsPick<'e'>;
+    /**
+     * 鼠标抬起画布
+     */
+    'blank:mouseup': BlankEventArgsPick<'e'>;
+    /**
+     * 鼠标移动画布
+     */
+    'blank:mousemove': BlankEventArgsPick<'e'>;
+    /**
+     * 单击画布
+     */
+    'blank:click': BlankEventArgsPick<'e'>;
+    /**
+     * 右键点击画布
+     */
+    'blank:contextmenu': BlankEventArgsPick<'e' | 'position'>;
+    /**
+     * 开始拖拽画布
+     */
+    'blank:dragstart': BlankEventArgsPick<'e'>;
+    /**
+     * 拖拽画布
+     */
+    'blank:drag': BlankEventArgsPick<'e'>;
+    /**
+     * 拖拽画布结束
+     */
+    'blank:drop': BlankEventArgsPick<'e'>;
+}
+interface HistoryEventArgs {
+    /**
+     * 历史记录变化
+     */
+    'history:change': {
+        /**
+         * 历史数据
+         */
+        data: {
+            /**
+             * 可撤销的 graph 快照
+             */
+            undos: GraphData[];
+            /**
+             * 可重做的 graph 快照
+             */
+            redos: GraphData[];
+            /**
+             * 是否可以撤销
+             */
+            undoAble: boolean;
+            /**
+             * 是否可以重做
+             */
+            redoAble: boolean;
+        };
+    };
+}
+type SelectionEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
+    /**
+     * 选中元素的数据（节点/边）
+     */
+    data: GraphData;
+    /**
+     * 原生鼠标事件对象
+     */
+    e: MouseEvent;
+    /**
+     * 鼠标触发点相对于画布左上角的坐标
+     */
+    position: ClientPosition;
+}, T>;
+/**
+ * 选区事件
+ */
+interface SelectionEventArgs {
+    /**
+     * 鼠标按下选区
+     */
+    'selection:mousedown': SelectionEventArgsPick<'e'>;
+    /**
+     * 开始拖拽选区
+     */
+    'selection:dragstart': SelectionEventArgsPick<'e'>;
+    /**
+     * 拖拽选区
+     */
+    'selection:drag': SelectionEventArgsPick<'e'>;
+    /**
+     * 拖拽选区结束
+     */
+    'selection:drop': SelectionEventArgsPick<'e'>;
+    /**
+     * 鼠标移动选区
+     */
+    'selection:mousemove': SelectionEventArgsPick<'e' | 'position'>;
+    /**
+     * 鼠标抬起选区
+     */
+    'selection:mouseup': SelectionEventArgsPick<'e'>;
+    /**
+     * 右键点击选区
+     */
+    'selection:contextmenu': SelectionEventArgsPick<'data' | 'e' | 'position'>;
+}
+export interface EventArgs extends NodeEventArgs, EdgeEventArgs, ConnectionEventArgs, CommonEventArgs, AnchorEventArgs, BlankEventArgs, HistoryEventArgs, SelectionEventArgs {
+}
+export {};

package/es/event/eventArgs.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=eventArgs.js.map

package/es/event/eventArgs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventArgs.js","sourceRoot":"","sources":["../../src/event/eventArgs.ts"],"names":[],"mappings":""}

package/es/event/eventEmitter.d.ts

@@ -0,0 +1,48 @@
+import { EventArgs } from './eventArgs';
+export interface EventType<T extends string = string> {
+    readonly callback: EventCallback<T>;
+    readonly once: boolean;
+}
+export type EventsType<T extends string = string> = {
+    [k in T]?: EventType<k>[];
+};
+export type CallbackArgs<T extends string = string> = T extends keyof EventArgs ? EventArgs[T] : any;
+export type EventCallback<T extends string = string> = (args: CallbackArgs<T>) => void;
+export default class EventEmitter {
+    private _events;
+    /**
+     * 监听一个事件
+     * @param evt 事件名称
+     * @param callback 回调函数
+     * @param once 是否只监听一次
+     */
+    on<T extends keyof EventArgs>(evt: T, callback: EventCallback<T>, once?: boolean): void;
+    on<T extends string>(evt: T, callback: EventCallback<T>, once?: boolean): void;
+    /**
+     * 监听一个事件一次
+     * @param evt 事件名称
+     * @param callback 回调函数
+     */
+    once<T extends keyof EventArgs>(evt: T, callback: (args: EventArgs[T]) => void): void;
+    once<T extends string>(evt: T, callback: EventCallback<T>): void;
+    /**
+     * 触发一个事件
+     * @param evts
+     * @param eventArgs
+     */
+    emit<T extends keyof EventArgs>(evts: T, eventArgs: CallbackArgs<T>): void;
+    emit<T extends string>(evts: T, eventArgs: CallbackArgs<T>): void;
+    /**
+     * 取消事件监听
+     * @param evts 事件名称
+     * @param callback 回调函数
+     *
+     * - evts 为空时，清除所有事件的监听器
+     * - evts 非空，callback 为空时，清除指定事件的所有监听器
+     * - evts 非空，callback 非空，进行对象比较，清除指定事件的指定监听器
+     */
+    off<T extends keyof EventArgs>(evts: T, callback?: (args: EventArgs[T]) => void): void;
+    off<T extends string>(evts: T, callback?: EventCallback<T>): void;
+    getEvents(): EventsType<string>;
+}
+export { EventEmitter, EventArgs };

package/es/event/eventEmitter.js

@@ -0,0 +1,92 @@
+var WILDCARD = '*';
+/* event-emitter */
+var EventEmitter = /** @class */ (function () {
+    function EventEmitter() {
+        this._events = {};
+    }
+    EventEmitter.prototype.on = function (evt, callback, once) {
+        var _this = this;
+        evt === null || evt === void 0 ? void 0 : evt.split(',').forEach(function (evKey) {
+            evKey = evKey.trim();
+            if (!_this._events[evKey]) {
+                _this._events[evKey] = [];
+            }
+            _this._events[evKey].push({
+                callback: callback,
+                once: !!once,
+            });
+        });
+    };
+    EventEmitter.prototype.once = function (evt, callback) {
+        var _this = this;
+        evt === null || evt === void 0 ? void 0 : evt.split(',').forEach(function (evKey) {
+            evKey = evKey.trim();
+            _this.on(evKey, callback, true);
+        });
+    };
+    EventEmitter.prototype.emit = function (evts, eventArgs) {
+        var _this = this;
+        evts === null || evts === void 0 ? void 0 : evts.split(',').forEach(function (evt) {
+            var events = _this._events[evt] || [];
+            // TODO: 这是什么？？？
+            var wildcardEvents = _this._events[WILDCARD] || [];
+            // 实际的处理 emit 方法
+            var doEmit = function (es) {
+                var length = es.length;
+                for (var i = 0; i < length; i++) {
+                    if (!es[i]) {
+                        continue;
+                    }
+                    var _a = es[i], callback = _a.callback, once = _a.once;
+                    if (once) {
+                        es.splice(i, 1);
+                        if (es.length === 0) {
+                            delete _this._events[evt];
+                        }
+                        length--;
+                        i--;
+                    }
+                    callback.apply(_this, [eventArgs]);
+                }
+            };
+            doEmit(events);
+            doEmit(wildcardEvents);
+        });
+    };
+    EventEmitter.prototype.off = function (evts, callback) {
+        var _this = this;
+        if (!evts) {
+            // evt 为空全部清除
+            this._events = {};
+        }
+        evts.split(',').forEach(function (evt) {
+            if (!callback) {
+                // evt 存在，callback 为空，清除事件所有方法
+                delete _this._events[evt];
+            }
+            else {
+                // evt 存在，callback 存在，清除匹配的
+                var events = _this._events[evt] || [];
+                var length_1 = events.length;
+                for (var i = 0; i < length_1; i++) {
+                    if (events[i].callback === callback) {
+                        events.splice(i, 1);
+                        length_1--;
+                        i--;
+                    }
+                }
+                if (events.length === 0) {
+                    delete _this._events[evt];
+                }
+            }
+        });
+    };
+    /* 当前所有的事件 */
+    EventEmitter.prototype.getEvents = function () {
+        return this._events;
+    };
+    return EventEmitter;
+}());
+export default EventEmitter;
+export { EventEmitter };
+//# sourceMappingURL=eventEmitter.js.map

package/es/event/eventEmitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventEmitter.js","sourceRoot":"","sources":["../../src/event/eventEmitter.ts"],"names":[],"mappings":"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"}

package/es/history/index.d.ts

@@ -0,0 +1,23 @@
+import { IDisposer } from 'mobx-utils';
+import LogicFlow from '..';
+import { GraphModel } from '../model';
+import EventEmitter from '../event/eventEmitter';
+import GraphData = LogicFlow.GraphData;
+export declare class History {
+    undos: GraphData[];
+    redos: GraphData[];
+    callbacks: never[];
+    stopWatch: IDisposer | null;
+    curData: GraphData | null;
+    maxSize: number;
+    waitTime: number;
+    eventCenter: EventEmitter;
+    constructor(eventCenter: EventEmitter);
+    add(data: GraphData): void;
+    undoAble(): boolean;
+    undo(): LogicFlow.GraphData | undefined;
+    redoAble(): boolean;
+    redo(): LogicFlow.GraphData | undefined;
+    watch(model: GraphModel): void;
+}
+export default History;