@logicflow/extension 2.1.4 → 2.1.6

package/es/components/mini-map/index.js

@@ -9,7 +9,6 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-import { createTeleportContainer, destroyTeleportContainer, } from '@logicflow/vue-node-registry';
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
@@ -95,8 +94,10 @@ var MiniMap = /** @class */ (function () {
          */
         this.show = function (left, top) {
             if (!_this.isShow) {
+                _this.initMiniMap();
+                _this.lf.on('graph:resize', _this.onGraphResize);
                 _this.createMiniMap(left, top);
-                _this.setView();
+                _this.setView(true);
             }
             _this.isShow = true;
         };
@@ -105,6 +106,11 @@ var MiniMap = /** @class */ (function () {
          */
         this.hide = function () {
             if (_this.isShow) {
+                _this.lf.off('graph:resize', _this.onGraphResize);
+                _this.lfMap.destroy();
+                // 保证重新创建实例时，小地图中内容偏移正确
+                _this.translateX = 0;
+                _this.translateY = 0;
                 _this.removeMiniMap();
                 _this.lf.emit('miniMap:close', {});
             }
@@ -233,8 +239,6 @@ var MiniMap = /** @class */ (function () {
         this.bounds = boundsInit;
         this.elementAreaBounds = boundsInit;
         this.viewPortBounds = boundsInit;
-        this.initMiniMap();
-        lf.on('graph:resize', this.onGraphResize);
     }
     /**
      * 初始化小地图的配置
@@ -272,12 +276,11 @@ var MiniMap = /** @class */ (function () {
             history: false,
             snapline: false,
             disabledPlugins: this.disabledPlugins,
+            isMiniMap: true,
         });
         // minimap中禁用adapter。
         // this.lfMap.adapterIn = (a) => a
         // this.lfMap.adapterOut = (a) => a
-        // 创建teleport容器（vue3中生效）
-        createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId);
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);
@@ -519,7 +522,6 @@ var MiniMap = /** @class */ (function () {
         this.viewport = div;
     };
     MiniMap.prototype.destroy = function () {
-        destroyTeleportContainer(this.lfMap.graphModel.flowId);
         this.lf.off('graph:resize', this.onGraphResize);
     };
     MiniMap.pluginName = 'miniMap';

package/es/components/selection-select/index.d.ts

@@ -12,6 +12,7 @@ export declare class SelectionSelect {
     private disabled;
     private isWholeNode;
     private isWholeEdge;
+    private originStatusSaved;
     exclusiveMode: boolean;
     private mouseDownInfo;
     private originalStopMoveGraph;

package/es/components/selection-select/index.js

@@ -32,6 +32,7 @@ var SelectionSelect = /** @class */ (function () {
         this.disabled = true;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        this.originStatusSaved = false;
         this.exclusiveMode = false; // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
         // 用于区分选区和点击事件
         this.mouseDownInfo = null;
@@ -73,6 +74,11 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.drawOff = function (e) {
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            _this.originStatusSaved = false;
             // 处理鼠标抬起事件
             // 首先判断是否是点击，如果是，则清空框选
             if (_this.mouseDownInfo) {
@@ -92,10 +98,6 @@ var SelectionSelect = /** @class */ (function () {
             if (!_this.exclusiveMode) {
                 document.removeEventListener('mouseup', _this.drawOff);
             }
-            // 恢复原始的 stopMoveGraph 设置
-            _this.lf.updateEditConfig({
-                stopMoveGraph: _this.originalStopMoveGraph,
-            });
             if (curStartPoint && curEndPoint) {
                 var x = curStartPoint.x, y = curStartPoint.y;
                 var x1 = curEndPoint.x, y1 = curEndPoint.y;
@@ -270,7 +272,11 @@ var SelectionSelect = /** @class */ (function () {
             time: Date.now(),
         };
         // 记录原始设置并临时禁止画布移动
-        this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        if (!this.originStatusSaved) {
+            // 为了防止在开启框选时用户多次点击画布导致缓存的stopMoveGraph变化，所以只在第一次点击时记录原始的stopMoveGraph issue #2263
+            this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+            this.originStatusSaved = true;
+        }
         this.lf.updateEditConfig({
             stopMoveGraph: true,
         });

package/es/tools/proximity-connect/index.d.ts

@@ -6,10 +6,18 @@ export type ProximityConnectProps = {
     distance: number;
     reverseDirection: boolean;
     virtualEdgeStyle: Record<string, unknown>;
+    /**
+     * proximityConnect 类型:
+     * - 'node': 节点-节点连接
+     * - 'anchor': 锚点-锚点连接
+     * - 'default': 节点-锚点连接
+     */
+    type: 'node' | 'anchor' | 'default';
 };
 export declare class ProximityConnect {
     static pluginName: string;
     enable: boolean;
+    type: 'node' | 'anchor' | 'default';
     lf: LogicFlow;
     closestNode?: BaseNodeModel;
     currentDistance: number;

package/es/tools/proximity-connect/index.js

@@ -15,6 +15,7 @@ var ProximityConnect = /** @class */ (function () {
     function ProximityConnect(_a) {
         var lf = _a.lf, options = _a.options;
         this.enable = true;
+        this.type = 'default';
         this.currentDistance = Infinity; // 当前间距
         this.thresholdDistance = 100; // 节点-节点连接距离阈值
         this.reverseDirection = false; // 节点-节点连线方向，默认是拖拽节点连向最近节点
@@ -34,6 +35,8 @@ var ProximityConnect = /** @class */ (function () {
         // 节点开始拖拽事件
         this.lf.graphModel.eventCenter.on('node:dragstart', function (_a) {
             var data = _a.data;
+            if (_this.type === 'anchor')
+                return;
             if (!_this.enable)
                 return;
             var graphModel = _this.lf.graphModel;
@@ -42,12 +45,14 @@ var ProximityConnect = /** @class */ (function () {
         });
         // 节点拖拽事件
         this.lf.graphModel.eventCenter.on('node:drag', function () {
+            if (_this.type === 'anchor')
+                return;
             _this.handleNodeDrag();
         });
         // 锚点开始拖拽事件
         this.lf.graphModel.eventCenter.on('anchor:dragstart', function (_a) {
             var data = _a.data, nodeModel = _a.nodeModel;
-            if (!_this.enable)
+            if (!_this.enable || _this.type === 'node')
                 return;
             _this.currentNode = nodeModel;
             _this.currentAnchor = data;
@@ -55,20 +60,20 @@ var ProximityConnect = /** @class */ (function () {
         // 锚点拖拽事件
         this.lf.graphModel.eventCenter.on('anchor:drag', function (_a) {
             var _b = _a.e, clientX = _b.clientX, clientY = _b.clientY;
-            if (!_this.enable)
+            if (!_this.enable || _this.type === 'node')
                 return;
             _this.handleAnchorDrag(clientX, clientY);
         });
         // 节点、锚点拖拽结束事件
         this.lf.graphModel.eventCenter.on('node:drop', function () {
-            if (!_this.enable)
+            if (!_this.enable || _this.type === 'anchor')
                 return;
             _this.handleDrop();
         });
         // 锚点拖拽需要单独判断一下当前拖拽终点是否在某个锚点上，如果是，就不触发插件的连线，以免出现创建了两条连线的问题，表现见 issue 2140
         this.lf.graphModel.eventCenter.on('anchor:dragend', function (_a) {
             var e = _a.e, edgeModel = _a.edgeModel;
-            if (!_this.enable)
+            if (!_this.enable || _this.type === 'node')
                 return;
             var _b = _this.lf.graphModel.getPointByClient({
                 x: e.clientX,

package/es/tools/snapshot/index.d.ts

@@ -32,6 +32,14 @@ export type ToImageOptions = {
      * - `true`：只导出画面区域内的可见元素
      */
     partial?: boolean;
+    /**
+     * 导出图片时的安全系数，用于确保导出的图片能够容纳所有元素，默认值为 1.1
+     */
+    safetyFactor?: number;
+    /**
+     * 导出图片时的安全边距，用于确保导出的图片能够容纳所有元素，默认值为 40
+     */
+    safetyMargin?: number;
 };
 export type SnapshotResponse = {
     data: Blob | string;

package/es/tools/snapshot/index.js

@@ -404,7 +404,7 @@ var Snapshot = /** @class */ (function () {
                         graphModel = this.lf.graphModel;
                         transformModel = graphModel.transformModel;
                         SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                        safetyFactor = 1.1 // 安全系数，增加20%的空间
+                        safetyFactor = toImageOptions.safetyFactor || 1.1 // 安全系数，增加10%的空间
                         ;
                         actualWidth = (bbox.width / SCALE_X) * safetyFactor;
                         actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
@@ -413,7 +413,7 @@ var Snapshot = /** @class */ (function () {
                         canvas = document.createElement('canvas');
                         canvas.style.width = "".concat(bboxWidth, "px");
                         canvas.style.height = "".concat(bboxHeight, "px");
-                        safetyMargin = 40 // 额外的安全边距
+                        safetyMargin = toImageOptions.safetyMargin || 40 // 额外的安全边距
                         ;
                         _b = this.getCanvasDimensionsByBrowser(), maxCanvasDimension = _b.maxCanvasDimension, otherMaxCanvasDimension = _b.otherMaxCanvasDimension;
                         MAX_CANVAS_DIMENSION = maxCanvasDimension;

package/lib/bpmn-adapter/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * LogicFlow 节点配置（导入/导出过程中使用的中间结构）
+ * - id/type/x/y：节点基本信息
+ * - text：节点文本的中心坐标与内容（值为未转义的原始字符串）
+ * - properties：节点的额外属性（会保留到 BPMN 的扩展字段）
+ */
 type NodeConfig = {
     id: string;
     properties?: Record<string, unknown>;
@@ -10,10 +16,20 @@ type NodeConfig = {
     x: number;
     y: number;
 };
+/**
+ * 点坐标结构（用于边的路径点）
+ */
 type Point = {
     x: number;
     y: number;
 };
+/**
+ * LogicFlow 边配置（导入/导出过程中使用的中间结构）
+ * - id/type/sourceNodeId/targetNodeId：边的基本信息
+ * - pointsList：边的路径点（用于 BPMN 的 di:waypoint）
+ * - text：边文本的位置与内容（值为未转义的原始字符串）
+ * - properties：边的扩展属性
+ */
 type EdgeConfig = {
     id: string;
     sourceNodeId: string;
@@ -35,11 +51,29 @@ type EdgeConfig = {
     pointsList?: Point[];
     properties: Record<string, unknown>;
 };
+/**
+ * 将普通 JSON 转换为 XML 风格 JSON（xmlJson）
+ * 输入：任意 JSON 对象；可选的保留属性字段 retainedFields
+ * 输出：遵循 XML 属性前缀约定的 xmlJson（属性键以 '-' 开头）
+ * 规则：
+ * - 原始字符串直接返回；数组逐项转换；对象根据键类型决定是否加 '-' 前缀。
+ * - 保留字段（fields）中出现的键以属性形式（带 '-'）保留，否则视为子节点。
+ */
 declare function toXmlJson(retainedFields?: string[]): (json: string | any[] | Record<string, any>) => any;
 /**
- * 将xmlJson转换为普通的json，在内部使用。
+ * 将 XML 风格 JSON（xmlJson）转换回普通 JSON（内部使用）
+ * 输入：遵循 '-' 属性前缀约定的 xmlJson
+ * 输出：去除前缀并恢复原有结构的普通 JSON
  */
 declare function toNormalJson(xmlJson: any): {};
+/**
+ * BpmnAdapter：基础适配器
+ *
+ * 作用：在 LogicFlow 数据与 BPMN JSON 之间进行转换，并注入 adapterIn/adapterOut 钩子。
+ * - processAttributes：导出时 BPMN process 的基础属性（可配置 isExecutable、id 等）。
+ * - definitionAttributes：导出时 BPMN definitions 的基础属性与命名空间声明。
+ * - shapeConfigMap：不同 BPMN 元素类型的默认宽高，用于坐标/Bounds 计算。
+ */
 declare class BpmnAdapter {
     static pluginName: string;
     static shapeConfigMap: Map<any, any>;
@@ -59,6 +93,11 @@ declare class BpmnAdapter {
         ['-exporterVersion']: string;
         [key: string]: any;
     };
+    /**
+     * 构造函数
+     * - 注入 LogicFlow 的 adapterIn/adapterOut（处理 JSON 方向的适配）
+     * - 初始化 process 与 definitions 的基础属性
+     */
     constructor({ lf }: {
         lf: any;
     });
@@ -68,6 +107,13 @@ declare class BpmnAdapter {
      * ["properties", "startPoint", "endPoint", "pointsList"]合并，
      * 这意味着出现在这个数组里的字段当它的值是数组或是对象时不会被视为一个节点而是一个属性。
      */
+    /**
+     * adapterOut：将 LogicFlow 图数据转换为 BPMN JSON
+     * 输入：
+     * - data：LogicFlow GraphData
+     * - retainedFields：扩展属性保留字段
+     * 输出：BPMN JSON（包含 definitions/process/diagram/plane）
+     */
     adapterOut: (data: any, retainedFields?: string[]) => {
         'bpmn:definitions': {
             [key: string]: any;
@@ -82,18 +128,55 @@ declare class BpmnAdapter {
             "-exporterVersion": string;
         };
     };
+    /**
+     * adapterIn：将 BPMN JSON 转换为 LogicFlow 图数据
+     * 输入：bpmnData：BPMN JSON
+     * 输出：GraphConfigData（nodes/edges）
+     */
     adapterIn: (bpmnData: any) => {
         nodes: NodeConfig[];
         edges: EdgeConfig[];
     } | undefined;
 }
+/**
+ * BpmnXmlAdapter：XML 适配器（继承 BpmnAdapter）
+ *
+ * 作用：处理 XML 输入/输出的适配，使用 xml2json/json2xml 完成格式转换。
+ * 特殊处理：在 XML 导入前对 name 属性的非法字符进行预处理转义，提升容错。
+ */
 declare class BpmnXmlAdapter extends BpmnAdapter {
     static pluginName: string;
+    /**
+     * 构造函数
+     * - 覆盖 LogicFlow 的 adapterIn/adapterOut，使其面向 XML 输入与输出。
+     */
     constructor(data: any);
+    /**
+     * 预处理 XML：仅对 name 属性值进行非法字符转义（<, >, &），避免 DOM 解析失败。
+     * 注意：不影响已合法的实体（如 &amp;），仅在属性值中生效，不修改其它内容。
+     */
+    private sanitizeNameAttributes;
+    /**
+     * adapterXmlIn：将 BPMN XML 转换为 LogicFlow 图数据
+     * 输入：bpmnData：XML 字符串或对象
+     * 步骤：
+     * 1) 若为字符串，先对 name 属性进行预处理转义；
+     * 2) 使用 lfXml2Json 转换为 BPMN JSON；
+     * 3) 调用基础 adapterIn 转换为 GraphData。
+     */
     adapterXmlIn: (bpmnData: any) => {
         nodes: NodeConfig[];
         edges: EdgeConfig[];
     } | undefined;
+    /**
+     * adapterXmlOut：将 LogicFlow 图数据转换为 BPMN XML
+     * 输入：
+     * - data：GraphData
+     * - retainedFields：保留属性字段
+     * 步骤：
+     * 1) 调用基础 adapterOut 生成 BPMN JSON；
+     * 2) 使用 lfJson2Xml 转为合法的 XML 字符串（包含属性与文本的转义）。
+     */
     adapterXmlOut: (data: any, retainedFields?: string[]) => string;
 }
 export { BpmnAdapter, BpmnXmlAdapter, toXmlJson, toNormalJson };