@logicflow/core 2.0.7 → 2.0.9

package/es/LogicFlow.d.ts

@@ -568,6 +568,8 @@ export declare class LogicFlow {
      * 加载插件-内部方法
      */
     private installPlugin;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace LogicFlow {
     /**
@@ -638,6 +640,7 @@ export declare namespace LogicFlow {
     };
     type LabelConfig = {
         id?: string;
+        type?: string;
         x: number;
         y: number;
         content?: string;

package/es/LogicFlow.js

@@ -1166,6 +1166,10 @@ var LogicFlow = /** @class */ (function () {
             this.components.push(extensionIns.render.bind(extensionIns));
         this.extension[pluginName] = extensionIns;
     };
+    /** 销毁当前实例 */
+    LogicFlow.prototype.destroy = function () {
+        this.graphModel.destroy();
+    };
     // 全局配置的插件，所有的LogicFlow示例都会使用
     LogicFlow.extensions = new Map();
     return LogicFlow;

package/es/algorithm/edge.js

@@ -48,9 +48,7 @@ export var isInSegment = function (point, start, end) {
     var endX = end.x, endY = end.y;
     var k = (endY - startY) / (endX - startX);
     var b = startY - k * startX;
-    return (x >= startX &&
-        x <= endX &&
-        y >= startY &&
-        y <= endY &&
-        Math.abs(y - k * x + b) < Number.EPSILON);
+    return (((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
+        ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
+        Math.abs(y - k * x - b) < Number.EPSILON);
 };

package/es/constant/index.d.ts

@@ -49,12 +49,16 @@ export declare enum EventType {
     NODE_CONTEXTMENU = "node:contextmenu",
     NODE_ROTATE = "node:rotate",
     NODE_RESIZE = "node:resize",
+    NODE_FOCUS = "node:focus",
+    NODE_BLUR = "node:blur",
     NODE_PROPERTIES_CHANGE = "node:properties-change",
     NODE_PROPERTIES_DELETE = "node:properties-delete",
     EDGE_ADD = "edge:add",
     EDGE_DELETE = "edge:delete",
     EDGE_CLICK = "edge:click",
     EDGE_DBCLICK = "edge:dbclick",
+    EDGE_FOCUS = "edge:focus",
+    EDGE_BLUR = "edge:blur",
     EDGE_MOUSEENTER = "edge:mouseenter",
     EDGE_MOUSELEAVE = "edge:mouseleave",
     EDGE_CONTEXTMENU = "edge:contextmenu",

package/es/constant/index.js

@@ -54,6 +54,8 @@ export var EventType;
     EventType["NODE_CONTEXTMENU"] = "node:contextmenu";
     EventType["NODE_ROTATE"] = "node:rotate";
     EventType["NODE_RESIZE"] = "node:resize";
+    EventType["NODE_FOCUS"] = "node:focus";
+    EventType["NODE_BLUR"] = "node:blur";
     // 节点 properties 变化事件
     EventType["NODE_PROPERTIES_CHANGE"] = "node:properties-change";
     EventType["NODE_PROPERTIES_DELETE"] = "node:properties-delete";
@@ -62,6 +64,8 @@ export var EventType;
     EventType["EDGE_DELETE"] = "edge:delete";
     EventType["EDGE_CLICK"] = "edge:click";
     EventType["EDGE_DBCLICK"] = "edge:dbclick";
+    EventType["EDGE_FOCUS"] = "edge:focus";
+    EventType["EDGE_BLUR"] = "edge:blur";
     EventType["EDGE_MOUSEENTER"] = "edge:mouseenter";
     EventType["EDGE_MOUSELEAVE"] = "edge:mouseleave";
     EventType["EDGE_CONTEXTMENU"] = "edge:contextmenu";

package/es/event/eventArgs.d.ts

@@ -97,7 +97,7 @@ interface NodeEventArgs {
     /**
      * 删除节点
      */
-    'node:delete': NodeEventArgsPick<'data'>;
+    'node:delete': NodeEventArgsPick<'data' | 'model'>;
     /**
      * 添加外部拖入节点
      */
@@ -151,6 +151,14 @@ interface NodeEventArgs {
          */
         properties: Record<string, any>;
     };
+    /**
+     * 节点获焦
+     */
+    'node:focus': NodeEventArgsPick<'data'>;
+    /**
+     * 节点失焦
+     */
+    'node:blur': NodeEventArgsPick<'data'>;
 }
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
     /**
@@ -217,6 +225,14 @@ interface EdgeEventArgs {
             oldEdge: EdgeData;
         };
     };
+    /**
+     * 边获焦
+     */
+    'edge:focus': EdgeEventArgsPick<'data'>;
+    /**
+     * 边失焦
+     */
+    'edge:blur': EdgeEventArgsPick<'data'>;
 }
 /**
  * 文本事件
@@ -333,6 +349,16 @@ interface CommonEventArgs {
          */
         data: GraphData;
     };
+    /**
+     * 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
+     */
+    'graph:resize': {
+        /**
+         * 更新后的画布数据
+         */
+        target: HTMLElement;
+        contentRect: DOMRectReadOnly;
+    };
 }
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = Pick<{
     /**

package/es/index.css

@@ -15,6 +15,9 @@
 .lf-text-draggable {
   cursor: move;
 }
+*:focus {
+  outline: none;
+}
 .lf-node-anchor {
   cursor: crosshair;
 }

package/es/model/GraphModel.d.ts

@@ -62,6 +62,7 @@ export declare class GraphModel {
     editConfigModel: EditConfigModel;
     partial: boolean;
     [propName: string]: any;
+    private waitCleanEffects;
     constructor(options: LFOptions.Common);
     get nodesMap(): GraphModel.NodesMapType;
     get edgesMap(): GraphModel.EdgesMapType;
@@ -437,6 +438,8 @@ export declare class GraphModel {
      * @returns
      */
     setPartial(partial: boolean): void;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace GraphModel {
     type NodesMapType = Record<string, {

package/es/model/GraphModel.js

@@ -15,6 +15,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -40,7 +51,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { find, forEach, map, merge } from 'lodash-es';
+import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
 import { EditConfigModel, TransformModel, } from '.';
 import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
@@ -49,6 +60,7 @@ import EventEmitter from '../event/eventEmitter';
 import { Grid } from '../view/overlay';
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
+        var _this = this;
         // 维护所有节点和边类型对应的 model
         this.modelMap = new Map();
         // Remind：用于记录当前画布上所有节点和边的 model 的 Map
@@ -81,6 +93,7 @@ var GraphModel = /** @class */ (function () {
         this.gridSize = 1;
         // 控制是否开启局部渲染
         this.partial = false;
+        this.waitCleanEffects = [];
         var container = options.container, partial = options.partial, _a = options.background, background = _a === void 0 ? {} : _a, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
         this.rootEl = container;
         this.partial = !!partial;
@@ -95,6 +108,32 @@ var GraphModel = /** @class */ (function () {
         this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
         this.width = options.width || this.rootEl.getBoundingClientRect().width;
         this.height = options.height || this.rootEl.getBoundingClientRect().height;
+        var resizeObserver = new ResizeObserver(debounce((function (entries) {
+            var e_1, _a;
+            try {
+                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                    var entry = entries_1_1.value;
+                    if (entry.target === _this.rootEl) {
+                        _this.resize();
+                        _this.eventCenter.emit('graph:resize', {
+                            target: _this.rootEl,
+                            contentRect: entry.contentRect,
+                        });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }), 16));
+        resizeObserver.observe(this.rootEl);
+        this.waitCleanEffects.push(function () {
+            resizeObserver.disconnect();
+        });
         this.eventCenter = new EventEmitter();
         this.editConfigModel = new EditConfigModel(options);
         this.transformModel = new TransformModel(this.eventCenter, options);
@@ -375,6 +414,31 @@ var GraphModel = /** @class */ (function () {
                     throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
                 }
                 var edgeModel = new Model(edge, _this);
+                // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
+                // 判断当前起终锚点数据和Model中存储的起终点数据是否一致，不一致更新起终点信息
+                var sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, _b = edgeModel.sourceAnchorId, sourceAnchorId = _b === void 0 ? '' : _b, _c = edgeModel.targetAnchorId, targetAnchorId = _c === void 0 ? '' : _c, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, text = edgeModel.text, textPosition = edgeModel.textPosition;
+                var updateAnchorPoint = function (node, anchorId, point, updatePoint) {
+                    var anchor = node === null || node === void 0 ? void 0 : node.anchors.find(function (anchor) { return anchor.id === anchorId; });
+                    if (anchor && !isEqual(anchor, point)) {
+                        updatePoint(anchor);
+                    }
+                };
+                var sourceNode = _this.getNodeModelById(sourceNodeId);
+                var targetNode = _this.getNodeModelById(targetNodeId);
+                updateAnchorPoint(sourceNode, sourceAnchorId, startPoint, edgeModel.updateStartPoint.bind(edgeModel));
+                updateAnchorPoint(targetNode, targetAnchorId, endPoint, edgeModel.updateEndPoint.bind(edgeModel));
+                // 而文本需要先算一下文本与默认文本位置之间的相对位置差
+                // 再计算新路径的文本默认位置，加上相对位置差，得到调整后边的文本的位置
+                if (text) {
+                    var x = text.x, y = text.y;
+                    var defaultX = textPosition.x, defaultY = textPosition.y;
+                    if (x && y && defaultX && defaultY) {
+                        var deltaX = x - defaultX;
+                        var deltaY = y - defaultY;
+                        edgeModel.resetTextPosition();
+                        edgeModel.moveText(deltaX, deltaY);
+                    }
+                }
                 _this.edgeModelMap.set(edgeModel.id, edgeModel);
                 _this.elementsModelMap.set(edgeModel.id, edgeModel);
                 return edgeModel;
@@ -666,11 +730,15 @@ var GraphModel = /** @class */ (function () {
      * @param {string} nodeId 节点Id
      */
     GraphModel.prototype.deleteNode = function (nodeId) {
-        var nodeData = this.nodesMap[nodeId].model.getData();
+        var nodeModel = this.nodesMap[nodeId].model;
+        var nodeData = nodeModel.getData();
         this.deleteEdgeBySource(nodeId);
         this.deleteEdgeByTarget(nodeId);
         this.nodes.splice(this.nodesMap[nodeId].index, 1);
-        this.eventCenter.emit(EventType.NODE_DELETE, { data: nodeData });
+        this.eventCenter.emit(EventType.NODE_DELETE, {
+            data: nodeData,
+            model: nodeModel,
+        });
     };
     /**
      * 添加节点
@@ -1250,10 +1318,7 @@ var GraphModel = /** @class */ (function () {
      * 更新网格配置
      */
     GraphModel.prototype.updateBackgroundOptions = function (options) {
-        if (typeof options === 'boolean') {
-            this.background = options;
-        }
-        else if (typeof this.background === 'boolean') {
+        if (isBoolean(options) || isBoolean(this.background)) {
             this.background = options;
         }
         else {
@@ -1381,6 +1446,18 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setPartial = function (partial) {
         this.partial = partial;
     };
+    /** 销毁当前实例 */
+    GraphModel.prototype.destroy = function () {
+        try {
+            this.waitCleanEffects.forEach(function (fn) {
+                fn();
+            });
+        }
+        catch (err) {
+            console.warn('error on destroy GraphModel', err);
+        }
+        this.waitCleanEffects.length = 0;
+    };
     __decorate([
         observable
     ], GraphModel.prototype, "width", void 0);

package/es/model/edge/LineEdgeModel.d.ts

@@ -16,6 +16,8 @@ export declare class LineEdgeModel extends BaseEdgeModel {
         height?: number | undefined;
         path?: string | undefined;
     };
+    initEdgeData(data: LogicFlow.EdgeConfig): void;
+    getPath(points: Point[]): string;
     getTextPosition(): Point;
 }
 export default LineEdgeModel;

package/es/model/edge/LineEdgeModel.js

@@ -65,6 +65,14 @@ var LineEdgeModel = /** @class */ (function (_super) {
         var _a = this.properties.style, customStyle = _a === void 0 ? {} : _a;
         return __assign(__assign(__assign({}, style), cloneDeep(line)), cloneDeep(customStyle));
     };
+    LineEdgeModel.prototype.initEdgeData = function (data) {
+        _super.prototype.initEdgeData.call(this, data);
+        this.points = this.getPath([this.startPoint, this.endPoint]);
+    };
+    LineEdgeModel.prototype.getPath = function (points) {
+        var _a = __read(points, 2), start = _a[0], end = _a[1];
+        return "".concat(start.x, ",").concat(start.y, " ").concat(end.x, ",").concat(end.y);
+    };
     LineEdgeModel.prototype.getTextPosition = function () {
         return {
             x: (this.startPoint.x + this.endPoint.x) / 2,

package/es/model/edge/PolylineEdgeModel.d.ts

@@ -39,6 +39,7 @@ export declare class PolylineEdgeModel extends BaseEdgeModel {
             y: number;
         }[];
     };
+    getPath(points: Point[]): string;
     initPoints(): void;
     updatePoints(): void;
     updateStartPoint(anchor: Point): void;

package/es/model/edge/PolylineEdgeModel.js

@@ -295,11 +295,12 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
             pointsList: pointsList,
         });
     };
+    PolylineEdgeModel.prototype.getPath = function (points) {
+        return points.map(function (point) { return "".concat(point.x, ",").concat(point.y); }).join(' ');
+    };
     PolylineEdgeModel.prototype.initPoints = function () {
         if (this.pointsList.length > 0) {
-            this.points = this.pointsList
-                .map(function (point) { return "".concat(point.x, ",").concat(point.y); })
-                .join(' ');
+            this.points = this.getPath(this.pointsList);
         }
         else {
             this.updatePoints();

package/es/model/node/HtmlNodeModel.d.ts

@@ -4,13 +4,13 @@ import { ModelType } from '../../constant';
 import AnchorConfig = Model.AnchorConfig;
 import LogicFlow from '../../LogicFlow';
 import GraphModel from '../GraphModel';
-export type IHtmlNodeProperties = {
+export interface IHtmlNodeProperties {
     width?: number;
     height?: number;
     style?: LogicFlow.CommonTheme;
     textStyle?: LogicFlow.CommonTheme;
     [key: string]: unknown;
-};
+}
 export declare class HtmlNodeModel<P extends IHtmlNodeProperties = IHtmlNodeProperties> extends BaseNodeModel<P> {
     modelType: ModelType;
     constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel);

package/es/style/index.css

@@ -15,6 +15,9 @@
 .lf-text-draggable {
   cursor: move;
 }
+*:focus {
+  outline: none;
+}
 .lf-node-anchor {
   cursor: crosshair;
 }

package/es/style/index.less

@@ -19,6 +19,11 @@
   cursor: move;
 }
 
+// 在元素focus时浏览器会给元素outline设置一个5像素宽的默认样式，这里先全局禁用一下，后续再根据需要再做调整
+*:focus {
+  outline: none;
+}
+
 .lf-node-anchor {
   cursor: crosshair;
 }

package/es/style/raw.d.ts

@@ -1,4 +1,4 @@
 /**
  * Auto generated file, do not modify it!
  */
-export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+export declare const content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/es/style/raw.js

@@ -2,4 +2,4 @@
 /**
  * Auto generated file, do not modify it!
  */
-export var content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";
+export var content = ".lf-graph {\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  user-select: none;\n}\n.lf-element-text {\n  cursor: text;\n}\n.lf-text-disabled {\n  pointer-events: none;\n}\n.lf-text-draggable {\n  cursor: move;\n}\n*:focus {\n  outline: none;\n}\n.lf-node-anchor {\n  cursor: crosshair;\n}\n.lf-node-anchor-hover {\n  visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n  visibility: visible;\n}\n.lf-edge.pointer-none {\n  pointer-events: none;\n}\n.lf-edge-append {\n  cursor: pointer;\n}\n.lf-edge-animation {\n  stroke-dashoffset: 100%;\n  animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n/* node */\n.lf-node-not-allow {\n  cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n  cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n  cursor: ew-resize;\n}\n.lf-dragging {\n  cursor: move;\n}\n.lf-dragging .lf-element-text {\n  cursor: move;\n}\n.lf-draggable {\n  cursor: default;\n}\n.lf-bezier-adjust-anchor {\n  cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.lf-background-area {\n  width: 100%;\n  height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  user-select: none;\n  pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n  pointer-events: all;\n}\n.lf-text-editable {\n  pointer-events: all;\n}\n.lf-text-input {\n  position: absolute;\n  box-sizing: border-box;\n  min-width: 100px;\n  min-height: 20px;\n  padding: 5px;\n  line-height: 1.2;\n  white-space: pre;\n  text-align: center;\n  background: #fff;\n  border: 1px solid #edefed;\n  border-radius: 3px;\n  outline: none;\n  transform: translate(-50%, -50%);\n  resize: none;\n}\n.lf-get-text-height {\n  display: inline-block;\n  box-sizing: border-box;\n  word-break: break-all;\n  /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n  border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n  width: 100%;\n  line-height: 1.2;\n  text-align: center;\n  word-break: break-all;\n  background: transparent;\n}\n.lf-node-text-ellipsis-content {\n  width: 100%;\n  line-height: 1.2;\n  white-space: nowrap;\n  text-align: center;\n  background: transparent;\n  /* overflow: hidden;\n  text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  overflow: hidden;\n  pointer-events: none;\n}\n.lf-tool-overlay > * {\n  pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  overflow: hidden;\n  pointer-events: none;\n}\n.modification-overlay > * {\n  pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n  pointer-events: none;\n}\n.lf-keyboard-tips {\n  float: right;\n}\n.lf-node-select-decorate {\n  position: absolute;\n  border: 1px dashed #343435;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.lf-multiple-select {\n  position: absolute;\n  border: 2px dashed #187dffcc;\n  box-shadow: 0 0 3px 0 #187dff80;\n  cursor: move;\n}\n.lf-edge-adjust-point {\n  cursor: move;\n}\n.lf-rotate-control {\n  cursor: grabbing;\n}\n.lf-resize-control-nw {\n  cursor: nw-resize;\n}\n.lf-resize-control-n {\n  cursor: n-resize;\n}\n.lf-resize-control-ne {\n  cursor: ne-resize;\n}\n.lf-resize-control-e {\n  cursor: e-resize;\n}\n.lf-resize-control-se {\n  cursor: se-resize;\n}\n.lf-resize-control-s {\n  cursor: s-resize;\n}\n.lf-resize-control-sw {\n  cursor: sw-resize;\n}\n.lf-resize-control-w {\n  cursor: w-resize;\n}\n";

package/es/view/edge/BaseEdge.d.ts

@@ -133,6 +133,8 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 不支持重写
      */
     handleClick: (e: MouseEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
     /**
      * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
      * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9

package/es/view/edge/BaseEdge.js

@@ -194,6 +194,18 @@ var BaseEdge = /** @class */ (function (_super) {
             graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel));
             _this.toFront();
         };
+        _this.handleFocus = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(EventType.EDGE_FOCUS, {
+                data: model.getData(),
+            });
+        };
+        _this.handleBlur = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(EventType.EDGE_BLUR, {
+                data: model.getData(),
+            });
+        };
         return _this;
     }
     /**
@@ -382,7 +394,7 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
+                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, onFocus: this.handleFocus, onBlur: this.handleBlur, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
     };
     BaseEdge.isObserved = false;
     return BaseEdge;

package/es/view/node/BaseNode.d.ts

@@ -38,6 +38,8 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     handleClick: (e: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
     handleMouseDown: (ev: MouseEvent) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
     setHoverOn: (ev: MouseEvent) => void;
     setHoverOff: (ev: MouseEvent) => void;
     /**

package/es/view/node/BaseNode.js

@@ -218,7 +218,7 @@ var BaseNode = /** @class */ (function (_super) {
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
                 if (editConfigModel.nodeTextEdit) {
-                    if (model.text.editable) {
+                    if (model.text.editable && editConfigModel.textMode === TextMode.TEXT) {
                         model.setSelected(false);
                         graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT);
                     }
@@ -258,6 +258,18 @@ var BaseNode = /** @class */ (function (_super) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }
         };
+        _this.handleFocus = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(EventType.NODE_FOCUS, {
+                data: model.getData(),
+            });
+        };
+        _this.handleBlur = function () {
+            var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            graphModel.eventCenter.emit(EventType.NODE_BLUR, {
+                data: model.getData(),
+            });
+        };
         // 因为自定义节点的时候，可能会基于hover状态自定义不同的样式。
         _this.setHoverOn = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -417,7 +429,7 @@ var BaseNode = /** @class */ (function (_super) {
             if (adjustNodePosition && draggable) {
                 this.stepDrag.setStep(gridSize * SCALE_X);
             }
-            nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu }, restAttributes, { children: nodeShapeInner })));
+            nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
         }
         return nodeShape;
     };

package/es/view/overlay/BackgroundOverlay.js

@@ -21,6 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
+import { isObject } from 'lodash-es';
 import { observer } from '../..';
 var BackgroundOverlay = /** @class */ (function (_super) {
     __extends(BackgroundOverlay, _super);
@@ -29,7 +30,7 @@ var BackgroundOverlay = /** @class */ (function (_super) {
     }
     BackgroundOverlay.prototype.render = function () {
         var background = this.props.background;
-        return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: typeof background === 'object' ? background : {}, className: "lf-background-area" }) }));
+        return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: isObject(background) ? background : {}, className: "lf-background-area" }) }));
     };
     BackgroundOverlay = __decorate([
         observer

package/lib/LogicFlow.d.ts

@@ -568,6 +568,8 @@ export declare class LogicFlow {
      * 加载插件-内部方法
      */
     private installPlugin;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace LogicFlow {
     /**
@@ -638,6 +640,7 @@ export declare namespace LogicFlow {
     };
     type LabelConfig = {
         id?: string;
+        type?: string;
         x: number;
         y: number;
         content?: string;

package/lib/LogicFlow.js

@@ -1195,6 +1195,10 @@ var LogicFlow = /** @class */ (function () {
             this.components.push(extensionIns.render.bind(extensionIns));
         this.extension[pluginName] = extensionIns;
     };
+    /** 销毁当前实例 */
+    LogicFlow.prototype.destroy = function () {
+        this.graphModel.destroy();
+    };
     // 全局配置的插件，所有的LogicFlow示例都会使用
     LogicFlow.extensions = new Map();
     return LogicFlow;

package/lib/algorithm/edge.js

@@ -52,10 +52,8 @@ var isInSegment = function (point, start, end) {
     var endX = end.x, endY = end.y;
     var k = (endY - startY) / (endX - startX);
     var b = startY - k * startX;
-    return (x >= startX &&
-        x <= endX &&
-        y >= startY &&
-        y <= endY &&
-        Math.abs(y - k * x + b) < Number.EPSILON);
+    return (((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
+        ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
+        Math.abs(y - k * x - b) < Number.EPSILON);
 };
 exports.isInSegment = isInSegment;

package/lib/constant/index.d.ts

@@ -49,12 +49,16 @@ export declare enum EventType {
     NODE_CONTEXTMENU = "node:contextmenu",
     NODE_ROTATE = "node:rotate",
     NODE_RESIZE = "node:resize",
+    NODE_FOCUS = "node:focus",
+    NODE_BLUR = "node:blur",
     NODE_PROPERTIES_CHANGE = "node:properties-change",
     NODE_PROPERTIES_DELETE = "node:properties-delete",
     EDGE_ADD = "edge:add",
     EDGE_DELETE = "edge:delete",
     EDGE_CLICK = "edge:click",
     EDGE_DBCLICK = "edge:dbclick",
+    EDGE_FOCUS = "edge:focus",
+    EDGE_BLUR = "edge:blur",
     EDGE_MOUSEENTER = "edge:mouseenter",
     EDGE_MOUSELEAVE = "edge:mouseleave",
     EDGE_CONTEXTMENU = "edge:contextmenu",

package/lib/constant/index.js

@@ -57,6 +57,8 @@ var EventType;
     EventType["NODE_CONTEXTMENU"] = "node:contextmenu";
     EventType["NODE_ROTATE"] = "node:rotate";
     EventType["NODE_RESIZE"] = "node:resize";
+    EventType["NODE_FOCUS"] = "node:focus";
+    EventType["NODE_BLUR"] = "node:blur";
     // 节点 properties 变化事件
     EventType["NODE_PROPERTIES_CHANGE"] = "node:properties-change";
     EventType["NODE_PROPERTIES_DELETE"] = "node:properties-delete";
@@ -65,6 +67,8 @@ var EventType;
     EventType["EDGE_DELETE"] = "edge:delete";
     EventType["EDGE_CLICK"] = "edge:click";
     EventType["EDGE_DBCLICK"] = "edge:dbclick";
+    EventType["EDGE_FOCUS"] = "edge:focus";
+    EventType["EDGE_BLUR"] = "edge:blur";
     EventType["EDGE_MOUSEENTER"] = "edge:mouseenter";
     EventType["EDGE_MOUSELEAVE"] = "edge:mouseleave";
     EventType["EDGE_CONTEXTMENU"] = "edge:contextmenu";