Dev/v4

docs/en-US/group.md

@@ -17,6 +17,8 @@ canvas.draw({
     top: 100,
     left: 100,
     Class: AGroup // after setting the base class, the canvas will render based on the custom class.
+    ...
+    //the attribute below
   }],
   nodes: ...
   edges: ...
@@ -28,119 +30,221 @@ canvas.addGroup({
   // the attribute below
 });
 ```
+<br>
+
+**`The returned dom of the node must be set to position: absolute;`**
+
+<br>
+<br>
+
+## attribute
+
+### id _`<String>`_ (Require)
+&nbsp;&nbsp;unique id of node
+### top _`<Number>`_ (Require)
+&nbsp;&nbsp;y coordinate
+### left _`<Number>`_ (Require)
+&nbsp;&nbsp;x coordinate
+### width _`<Number>`_ (Option)
+&nbsp;&nbsp;group width
+### height _`<Number>`_ (Option)
+&nbsp;&nbsp;group height
+### endpoints _`<Array>`_ (Option)
+&nbsp;&nbsp;system endpoints configuration: system endpoints  will be added when this configuration is present
+### Class _`<Class>`_ (Option)
+&nbsp;&nbsp;extended class
+### scope _`<String>`_ (Option)
+&nbsp;&nbsp;scope: When the scope of the node is the same as the scope of the group, it can be added to the group. You can join as you like without setting it by default
 
-## attribute<a name='group-attr'></a>：
+```js
+// single scope
+group.scope = 'xxx';
+// multiple scope, any one matched can be connected
+group.scope = 'xxx1 xxx2 xxx3';
+```
+
+### draggable _`<Boolean>`_ (Option)
+&nbsp;&nbsp;the group is draggable. the default value is true
+### resize _`<Boolean>`_ (Option)
+&nbsp;&nbsp;the size of the group is resizable.  the default value is true
 
-| key | describe | type | default 
-| :------ | :------ | :------ | :------ 
-| id | unique id | string (Require) | - 
-| top | y coordinate | number (Require) | - 
-| left | x coordinate | number (Require) | - 
-| width | group width | number (Option) | - 
-| height | group height | number (Option) | - 
-| type | group type | string (Option) | normal (drag in and drag out), inner (can only be dragged in and not out)
-| endpoints | endpoint data | array (Option) | - 
-| Class | extended class | Class (Option) | When the extended class is passed in, the node group will be rendered according to the draw method of the extended class, and the related methods of the extended class will also override the method of the parent class.
-| scope | scope | boolean (Option) | When the scope of the node is consistent with the scope of the group, it can be added to the group. You can join as you like without setting it by default.
+<img width="400" src="https://img.alicdn.com/imgextra/i4/O1CN01nb2APF1ZM1lbFNKM1_!!6000000003179-1-tps-400-300.gif">
 
-`* The returned dom of the node must be set to position: absolute;`
+### group _`<String>`_ (Option)
+&nbsp;&nbsp;the id of the parent group: For supporting group nesting, you need to set 'canvas.theme.group.includeGroups' open
+
+<img width="400" src="https://img.alicdn.com/imgextra/i4/O1CN01qmOWWj1CKtcvZZJ7Q_!!6000000000063-2-tps-842-536.png">
 
-## API：
+<br>
+<br>
 
-### <a name='group-custom'>custom group</a>：
+## Extented Class  API：
+
+```js
+import {Group} from 'butterfly-dag';
+
+Class YourGroup extends Group {
+
+  /**
+    * callback after group mount
+    */
+  mount() {}
+
+  /**
+    * group draw function
+    * @param {obj} data - group data 
+    * @return {dom} - group dom
+    */
+  draw(obj) {}
+}
+```
+
+<br>
+<br>
+
+## External Call API：
+
+### group.getWidth()
+
+*description*： get group width
+
+*return*
+
+* `number` the width of the group
 
 ```js
-/**
-  * group draw function
-  * @param {obj} data - group data
-  * @return {dom} - group dom
-  */
-draw = (obj) => {}
-
-/**
-  * callback after group mount
-  */
-mounted = () => {}
-
-/**
-  * @return {number} - get group width
-  */
 getWidth = () => {}
+```
+
+### group.getHeight ()
+
+*description*： get group height
+
+*return*
 
-/**
-  * @return {number} - get group height
-  */
+* `number` the height of the group
+
+```js
 getHeight = () => {}
 ```
 
-### <a name='group-member'>add and delete members</a>：
+### group.addNode (node)
+
+*description*：  add node to the group
+
+*param*
+
+* `{obj} node` node data
 
 ```js
-/**
-  * add node to group
-  * @param {obj} node - node data
-  */
 addNode = (node) => {}
+```
+
+### group.addNodes (nodes)
+
+*description*： add multiple nodes to the group
 
-/**
-  * add multiple nodes to group
-  * @param {array} nodes - nodes array
-  */
+*param*
+
+* `{array} nodes`nodes array
+
+```js
 addNodes = (nodes) => {}
+```
+
+### group.removeNode (node)
+
+*description*： delete node from the group
+
+*param*
+
+* `{obj} node`node data
 
-/**
-  * delete node from group
-  * @param {obj} node - node data
-  */
+```js
 removeNode = (node) => {}
+```
+
+### group.removeNodes (nodes)
+
+*description*： delete  nodes from the group
 
-/**
-  * group删除节点
-  * @param {array} nodes - 节点数组
-  */
+*param*
+
+* `{obj} nodes`nodes array
+
+```js
 removeNodes = (nodes) => {}
 ```
 
-### <a name='node-endpoint'>custom endpoint</a>：
+### group.addEndpoint (obj)
+
+*description*： add endpoint to the group
+
+*params*
+
+* `{obj} param` endpoint data (this method must be executed after the node is mounted)
+* `{string} param.id` endpoint id
+* `{string} param.orientation` endpoint direction (it can control the direction of the edge linkin or linkout)
+* `{string} param.scope` scope
+* `{string} param.type` 'source' / 'target' / undefined，ednpoint is both source and target when undefined
+* `{string} param.dom` any sub DOM in the node can be used as a custom endpoint
 
 ```js
-/**
-  * @param {obj} data - endpoint data (this method must be executed after the node is mounted)
-  * @param {string} param.id - endpoint id
-  * @param {string} param.orientation - endpoint direction (it can control the direction of the edge linkin or linkout)
-  * @param {string} param.scope - scope
-  * @param {string} param.type - 'source' / 'target' / undefined，ednpoint is both source and target when undefined
-  * @param {string} param.dom - any sub DOM in the node can be used as a custom endpoint
-  */
 addEndpoint = (obj) => {}
+```
+
+### group.getEndpoint (id)
+
+*description*： get endpoint by id
+
+*param*
+
+* `{string} pointId` endpoint id 
+
+*return*
 
-/**
-  * @param {string} pointId - endpoint id
-  * @param {string(Option)} type - endpoint type (Optional)
-  * @return {Endpoint} - Endpoint object
-  */
-getEndpoint = (id, type) => {}
+* `{Endpoint}`Endpoint Object
+
+```js
+getEndpoint = (id) => {}
 ```
 
-### <a name='group-move'>move</a>：
+### group.moveTo (obj)
+
+*description*： move coordinates of the group
+
+*params*
+
+* `{number} obj.x `move to x coordinate
+* `{number} obj.y `move to y coordinate
+
 ```js
-/**
-  * @param {number} x - move to x 
-  * @param {number} y - move to y 
-  */
 moveTo = (obj) => {}
 ```
 
-### <a name='group-event'>event</a>：
+### group.emit (event, data)
+
+*description*： emit events,canvas or any elements can receive event from the group 
+
+*params*
+
+* `{string} event `emit event name
+* `{number} data `emit event data
 
 ```js
-/**
-  * emit events
-  */
 emit = (string, obj) => {}
+```
+
+### group.on (string, callback)
+
+*description*： receive events, the group can receive events from canvas or any elements
 
-/**
-  * accept events
-  */
+*params*
+
+* `{string} event ` receive event name
+* `{function} data `receive event callback
+
+```js
 on = (string, callback) => {}
 ```
+

src/utils/link/edgeTypes/_utils.js

@@ -1,4 +1,5 @@
 'use strict';
+<<<<<<< HEAD
 import _ from 'lodash';
 
 const MINDIST = 20;
@@ -311,4 +312,7 @@ export function _findManhattanPoint (points, pos) {
     }
   }
   return result;
-}
+}
+=======
+
+>>>>>>> 44fc7b5... chore: optimize link code

src/utils/link/edgeTypes/bezier.js

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use strict';
 import {_findControlPoint, _calcOrientation} from './_utils.js';
 
@@ -44,3 +45,6 @@ function drawBezier(sourcePoint, targetPoint) {
 }
 
 export default drawBezier;
+=======
+'use strict';
+>>>>>>> 44fc7b5... chore: optimize link code