fix(extension): group插件isAllowMoveTo方法的参数名优化

examples/feature-examples/src/pages/edges/custom/animate-polyline/index.tsx

@@ -1,6 +1,6 @@
 import LogicFlow from '@logicflow/core'
 import CustomAnimatePolyline from '@/components/edges/custom-animate-polyline'
-import { Button, Card, Select } from 'antd'
+import { Card, Select } from 'antd'
 import { useEffect, useRef } from 'react'
 import styles from './index.less'
 
@@ -159,78 +159,6 @@ export default function customAnimatePolylineEdge() {
 
   return (
     <Card title="自定义折线">
-      <Button
-        type="primary"
-        className={styles.btn}
-        onClick={() => {
-          if (lfRef.current) {
-            const graphData = lfRef.current?.getGraphRawData()
-            console.log('graphData --->>>', graphData)
-          }
-        }}
-      >
-        获取当前图数据
-      </Button>
-      <Button
-        type="primary"
-        className={styles.btn}
-        onClick={() => {
-          if (lfRef.current) {
-            const { edges } = lfRef.current.getGraphRawData()
-            edges.forEach((edge) => {
-              const edgeModel =
-                lfRef.current && lfRef.current.getEdgeModelById(edge.id)
-              if (edgeModel) {
-                edgeModel.setProperties({
-                  edgeWeight: !edge.properties?.edgeWeight,
-                })
-              }
-            })
-          }
-        }}
-      >
-        切换边粗细
-      </Button>
-      <Button
-        type="primary"
-        className={styles.btn}
-        onClick={() => {
-          if (lfRef.current) {
-            const { edges } = lfRef.current.getGraphRawData()
-            edges.forEach((edge) => {
-              const edgeModel =
-                lfRef.current && lfRef.current.getEdgeModelById(edge.id)
-              if (edgeModel) {
-                edgeModel.setProperties({
-                  highlight: !edge.properties?.highlight,
-                })
-              }
-            })
-          }
-        }}
-      >
-        切换边颜色
-      </Button>
-      <Button
-        type="primary"
-        className={styles.btn}
-        onClick={() => {
-          if (lfRef.current) {
-            const { edges } = lfRef.current.getGraphRawData()
-            edges.forEach((edge) => {
-              const edgeModel =
-                lfRef.current && lfRef.current.getEdgeModelById(edge.id)
-              if (edgeModel) {
-                edgeModel.setProperties({
-                  openAnimation: !edge.properties?.openAnimation,
-                })
-              }
-            })
-          }
-        }}
-      >
-        开关动画
-      </Button>
       <Select
         placeholder="修改边文本位置"
         className={styles.select}
@@ -243,29 +171,6 @@ export default function customAnimatePolylineEdge() {
         <Select.Option value="start">文本位置在边的起点处</Select.Option>
         <Select.Option value="end">文本位置在边的终点处</Select.Option>
       </Select>
-      <Select
-        placeholder="修改边锚点形状"
-        className={styles.select}
-        onChange={(val) => {
-          if (lfRef.current) {
-            const { edges } = lfRef.current.getGraphRawData()
-            edges.forEach((edge) => {
-              const edgeModel =
-                lfRef.current && lfRef.current.getEdgeModelById(edge.id)
-              if (edgeModel) {
-                edgeModel.setProperties({
-                  arrowType: val,
-                })
-              }
-            })
-          }
-        }}
-        defaultValue=""
-      >
-        <Select.Option value="empty">空心箭头</Select.Option>
-        <Select.Option value="half">半箭头</Select.Option>
-        <Select.Option value="">默认箭头</Select.Option>
-      </Select>
       <div ref={containerRef} id="graph" className={styles.viewport}></div>
     </Card>
   )

packages/extension/src/materials/group/GroupNode.ts

@@ -278,10 +278,10 @@ export class GroupNodeModel extends RectResizeModel {
     )
   }
 
-  isAllowMoveTo({ x1, y1, x2, y2 }) {
+  isAllowMoveTo({ minX, minY, maxX, maxY }) {
     return {
-      x: x1 >= this.x - this.width / 2 && x2 <= this.x + this.width / 2,
-      y: y1 >= this.y - this.height / 2 && y2 <= this.y + this.height / 2,
+      x: minX >= this.x - this.width / 2 && maxX <= this.x + this.width / 2,
+      y: minY >= this.y - this.height / 2 && maxY <= this.y + this.height / 2,
     }
   }
 

packages/extension/src/materials/group/index.ts

@@ -45,12 +45,12 @@ export class Group {
       ) as GroupNodeModel
       if (groupModel && groupModel.isRestrict) {
         // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
-        const { minX: x1, minY: y1, maxX: x2, maxY: y2 } = model.getBounds()
+        const { minX, minY, maxX, maxY } = model.getBounds()
         return groupModel.isAllowMoveTo({
-          x1: x1 + deltaX,
-          y1: y1 + deltaY,
-          x2: x2 + deltaX,
-          y2: y2 + deltaY,
+          minX: minX + deltaX,
+          minY: minY + deltaY,
+          maxX: maxX + deltaX,
+          maxY: maxY + deltaY,
         })
       }
 

sites/docs/docs/tutorial/extension/node-resize.en.md

@@ -11,7 +11,7 @@ tag: Deprecated
 
 ## Use
 
-LogicFlow provides `RectResize`, `EllipseResize`, `DiamonResize`, `HtmlResize` in the extension package, each node has `view` and `model` attributes. The scaling of nodes is also achieved by using LogicFlow's custom node mechanism, which allows developers to inherit from these 4 types of nodes that can be scaled to achieve node scaling.
+LogicFlow provides `RectResize`, `EllipseResize`, `DiamondResize`, `HtmlResize` in the extension package, each node has `view` and `model` attributes. The scaling of nodes is also achieved by using LogicFlow's custom node mechanism, which allows developers to inherit from these 4 types of nodes that can be scaled to achieve node scaling.
 
 For example, if we need a rectangle that can be scaled, when we didn't support node scaling before, we customize the node in the following way:
 

sites/docs/docs/tutorial/extension/node-resize.zh.md

@@ -11,7 +11,7 @@ tag:  即将废弃
 
 ## 使用
 
-LogicFlow 在 extension 包中提供了`RectResize`、`EllipseResize`、`DiamonResize`、`HtmlResize`这 4
+LogicFlow 在 extension 包中提供了`RectResize`、`EllipseResize`、`DiamondResize`、`HtmlResize`这 4
 种支持缩放的基础节点, 每个节点都有`view`和`model`这两个属性。节点的缩放也是利用 LogicFlow
 的自定义节点机制，使开发者可以继承这 4 种可以缩放的节点，来实现节点的缩放。
 

sites/docs/docs/tutorial/update.zh.md

@@ -39,7 +39,7 @@ import "@logicflow/core/lib/style/index.css";
 
 ```
 
-1. pluginOptions参数传入的各插件的options需要根据插件名分割开
+3. pluginOptions参数传入的各插件的options需要根据插件名分割开
 ```js
 // 这里以设置小地图是否显示连线配置项：showEdge为例
 // 1.x版本
@@ -58,6 +58,14 @@ new LogicFlow({
   },
 })
 ```
+
+4. Group插件提供的isAllowMoveTo方法和isInRange方法的参数名调整:
+```
+x1 → minX
+y1 → minY
+x2 → maxX
+y2 → maxY
+```
 其他改动理论上对使用没有影响，以下是改动内容一览：
 
 ### 项目基建