@logicflow/core 2.1.6 → 2.1.7

package/es/view/edge/BaseEdge.js

@@ -43,6 +43,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component, createRef } from 'preact/compat';
 import { Circle } from '../shape';
+import { isNil, isFunction } from 'lodash-es';
 import { LineText } from '../text';
 import { ElementState, EventType, ModelType, TextMode } from '../../constant';
 import { isMultipleSelect, getClosestPointOfPolyline, degrees, getThetaOfVector, } from '../../util';
@@ -193,6 +194,14 @@ var BaseEdge = /** @class */ (function (_super) {
                     e: e,
                     position: position,
                 });
+                // 会偶现边点击后会马上失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !isNil(window) && isFunction(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel));

package/lib/view/edge/BaseEdge.js

@@ -69,6 +69,7 @@ exports.BaseEdge = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
 var shape_1 = require("../shape");
+var lodash_es_1 = require("lodash-es");
 var text_1 = require("../text");
 var constant_1 = require("../../constant");
 var util_1 = require("../../util");
@@ -219,6 +220,14 @@ var BaseEdge = /** @class */ (function (_super) {
                     e: e,
                     position: position,
                 });
+                // 会偶现边点击后会马上失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !(0, lodash_es_1.isNil)(window) && (0, lodash_es_1.isFunction)(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, (0, util_1.isMultipleSelect)(e, editConfigModel));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/view/edge/BaseEdge.tsx

@@ -1,5 +1,6 @@
 import { createElement as h, Component, createRef } from 'preact/compat'
 import { Circle } from '../shape'
+import { isNil, isFunction } from 'lodash-es'
 import { LineText } from '../text'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel, BaseEdgeModel, PolylineEdgeModel } from '../../model'
@@ -550,6 +551,15 @@ export abstract class BaseEdge<P extends IProps> extends Component<
         e,
         position,
       })
+      // 会偶现边点击后会马上失去焦点的问题，这里手动让节点获焦以解决这个问题
+      const el = e.currentTarget as HTMLElement
+      const rAF =
+        !isNil(window) && isFunction(window.requestAnimationFrame)
+          ? window.requestAnimationFrame.bind(window)
+          : (fn: () => void) => setTimeout(fn, 0)
+      rAF(() => {
+        el.focus()
+      })
     }
     const { editConfigModel } = graphModel
     graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel))