@logicflow/extension 1.1.21 → 1.1.24

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

@@ -64,12 +64,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -88,6 +93,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -311,7 +331,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -6,7 +6,7 @@ var SelectionSelect = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.__disabled = false;
-        this.isDefalutStopMoveGraph = false;
+        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
         this.__draw = function (ev) {
@@ -44,16 +44,20 @@ var SelectionSelect = /** @class */ (function () {
             }
             var lt = [Math.min(x, x1), Math.min(y, y1)];
             var rt = [Math.max(x, x1), Math.max(y, y1)];
-            var elements = _this.lf.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
+            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
+            var group = _this.lf.graphModel.group;
             elements.forEach(function (element) {
-                _this.lf.selectElementById(element.id, true);
+                // 如果节点属于分组，则不不选中节点
+                if (!group || !group.getNodeGroup(element.id)) {
+                    _this.lf.selectElementById(element.id, true);
+                }
             });
             _this.lf.emit('selection:selected', elements);
         };
         this.lf = lf;
-        // 初始化isDefalutStopMoveGraph取值
+        // 初始化isDefaultStopMoveGraph取值
         var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefalutStopMoveGraph = stopMoveGraph;
+        this.isDefaultStopMoveGraph = stopMoveGraph;
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
         };
@@ -104,7 +108,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.openSelectionSelect = function () {
         var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
         if (!stopMoveGraph) {
-            this.isDefalutStopMoveGraph = false;
+            this.isDefaultStopMoveGraph = false;
             this.lf.updateEditConfig({
                 stopMoveGraph: true,
             });
@@ -115,7 +119,7 @@ var SelectionSelect = /** @class */ (function () {
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefalutStopMoveGraph) {
+        if (!this.isDefaultStopMoveGraph) {
             this.lf.updateEditConfig({
                 stopMoveGraph: false,
             });

package/cjs/materials/group/GroupNode.js

@@ -222,7 +222,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var model = this.graphModel.addEdge(edgeData);
         model.virtual = true;
         // 强制不保存group连线数据
-        model.getData = function () { return null; };
+        // model.getData = () => null;
         model.text.editable = false;
         model.isFoldedEdge = true;
     };

package/cjs/materials/group/index.js

@@ -40,7 +40,7 @@ var Group = /** @class */ (function () {
                 });
             }
         };
-        this.appendNodeToGrop = function (_a) {
+        this.appendNodeToGroup = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
             var preGroupId = _this.nodeGroupMap.get(data.id);
@@ -114,9 +114,9 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGrop);
+        lf.on('node:add', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGrop);
+        lf.on('node:drop', this.appendNodeToGroup);
         lf.on('node:dnd-drag', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);

package/cjs/tools/snapshot/index.js

@@ -164,7 +164,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;

package/es/components/mini-map/index.d.ts

@@ -68,6 +68,7 @@ declare class MiniMap {
     }): void;
     __createViewPort(): void;
     __startDrag: (e: any) => void;
+    moveViewport: (top: any, left: any) => void;
     __drag: (e: any) => void;
     __drop: () => void;
 }

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

@@ -61,12 +61,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -85,6 +90,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -308,7 +328,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

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

@@ -12,7 +12,7 @@ declare class SelectionSelect {
         y: number;
     };
     __disabled: boolean;
-    isDefalutStopMoveGraph: boolean;
+    isDefaultStopMoveGraph: boolean;
     isWholeNode: boolean;
     isWholeEdge: boolean;
     static pluginName: string;

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

@@ -3,7 +3,7 @@ var SelectionSelect = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.__disabled = false;
-        this.isDefalutStopMoveGraph = false;
+        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
         this.__draw = function (ev) {
@@ -41,16 +41,20 @@ var SelectionSelect = /** @class */ (function () {
             }
             var lt = [Math.min(x, x1), Math.min(y, y1)];
             var rt = [Math.max(x, x1), Math.max(y, y1)];
-            var elements = _this.lf.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
+            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
+            var group = _this.lf.graphModel.group;
             elements.forEach(function (element) {
-                _this.lf.selectElementById(element.id, true);
+                // 如果节点属于分组，则不不选中节点
+                if (!group || !group.getNodeGroup(element.id)) {
+                    _this.lf.selectElementById(element.id, true);
+                }
             });
             _this.lf.emit('selection:selected', elements);
         };
         this.lf = lf;
-        // 初始化isDefalutStopMoveGraph取值
+        // 初始化isDefaultStopMoveGraph取值
         var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefalutStopMoveGraph = stopMoveGraph;
+        this.isDefaultStopMoveGraph = stopMoveGraph;
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
         };
@@ -101,7 +105,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.openSelectionSelect = function () {
         var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
         if (!stopMoveGraph) {
-            this.isDefalutStopMoveGraph = false;
+            this.isDefaultStopMoveGraph = false;
             this.lf.updateEditConfig({
                 stopMoveGraph: true,
             });
@@ -112,7 +116,7 @@ var SelectionSelect = /** @class */ (function () {
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefalutStopMoveGraph) {
+        if (!this.isDefaultStopMoveGraph) {
             this.lf.updateEditConfig({
                 stopMoveGraph: false,
             });

package/es/materials/group/GroupNode.js

@@ -220,7 +220,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var model = this.graphModel.addEdge(edgeData);
         model.virtual = true;
         // 强制不保存group连线数据
-        model.getData = function () { return null; };
+        // model.getData = () => null;
         model.text.editable = false;
         model.isFoldedEdge = true;
     };

package/es/materials/group/index.d.ts

@@ -17,7 +17,7 @@ declare class Group {
         lf: any;
     });
     graphRendered: (data: any) => void;
-    appendNodeToGrop: ({ data }: {
+    appendNodeToGroup: ({ data }: {
         data: any;
     }) => void;
     deleteGroupChild: ({ data }: {

package/es/materials/group/index.js

@@ -36,7 +36,7 @@ var Group = /** @class */ (function () {
                 });
             }
         };
-        this.appendNodeToGrop = function (_a) {
+        this.appendNodeToGroup = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
             var preGroupId = _this.nodeGroupMap.get(data.id);
@@ -110,9 +110,9 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGrop);
+        lf.on('node:add', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGrop);
+        lf.on('node:drop', this.appendNodeToGroup);
         lf.on('node:dnd-drag', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);

package/es/tools/snapshot/index.js

@@ -161,7 +161,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;