fix: image lost while updating the size for an image node, closes: #3938

; (#3991) * fix: image lost while updating the size for an image node, closes: #3938; * chore: update version num * 自环边样式 startPoint & endPoint 计算问题 #3974 (#3990) * fix: 自环问题连接点问题修复 * feat: change var to halfOfWidth and halfOfHeight * feat: 修改注释 * feat: 完善文档 * feat: 修改注释 * feat: 修改注释 * feat: add loop feat unit test * feat: 删除空行 * feat: 修改名称 Co-authored-by: linjie <[email protected]> Co-authored-by: tulaoda <[email protected]> Co-authored-by: linjie <[email protected]>
antvis · Oct 13, 2022 · ce0dbae · ce0dbae
1 parent 6561f29
commit ce0dbae
Show file tree

Hide file tree

Showing 16 changed files with 535 additions and 97 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # ChangeLog
 
+### 4.7.8
+
+- feat: pointPadding config for loop edges with non-circle nodes, closes: #3974;
+- fix: image lost while updating the size for an image node, closes: #3938;
+
 ### 4.7.7
 
  - feat: getContentPlaceholder and getTitlePlaceholder for Annotation plugin;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/element/shapeBase.ts b/packages/core/src/element/shapeBase.ts
@@ -79,9 +79,7 @@ export const shapeBase: ShapeOptions = {
     return {};
   },
   getOptions(cfg: ModelConfig, updateType?: UpdateType): ModelConfig {
-    if (updateType === 'move' || updateType?.includes('bbox')) {
-      return {};
-    }
+    if (updateType === 'move' || updateType?.includes('bbox')) return cfg;
     return deepMix(
       {},
       this.options,

diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.7.7',
+  version: '0.7.8',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts
@@ -298,6 +298,8 @@ export type LoopConfig = Partial<{
   position: string;
   // 如果逆时针画，交换起点和终点
   clockwise: boolean;
+  // 对于非圆形节点设置的连接点与节点中心坐标（`top-right`，`bottom-right`,`top-left`,`bottom-left`较特殊，为四个角坐标）在 x 轴或 y 轴方向的偏移量，默认为  `节点宽高中最小值的1/4`
+  pointPadding: number;
 }>;
 
 export interface LayoutConfig {

diff --git a/packages/core/src/util/graphic.ts b/packages/core/src/util/graphic.ts
@@ -11,7 +11,7 @@ import {
   ComboTree,
   ComboConfig,
   ICombo,
-  GraphAnimateConfig
+  GraphAnimateConfig,
 } from '../types';
 import { applyMatrix } from './math';
 import letterAspectRatio from './letterAspectRatio';
@@ -83,93 +83,146 @@ export const getLoopCfgs = (cfg: EdgeData): EdgeData => {
   let startPoint = [cfg.startPoint.x, cfg.startPoint.y];
   let endPoint = [cfg.endPoint.x, cfg.endPoint.y];
 
-  let rstart = bbox.height / 2;
-  let rend = bbox.height / 2;
+  let halfOfHeight = bbox.height / 2;
+  let halfOfWidth = bbox.width / 2;
+  let rstart = halfOfHeight;
+  let rend = halfOfHeight;
+
   let sinDeltaStart = rstart * SELF_LINK_SIN;
   let cosDeltaStart = rstart * SELF_LINK_COS;
   let sinDeltaEnd = rend * SELF_LINK_SIN;
   let cosDeltaEnd = rend * SELF_LINK_COS;
+  const shapeType = keyShape.get('type');
+
+  // 美观考虑，pointPadding 默认取宽高中最小的1/4
+  const defaultPointPadding = Math.min(halfOfHeight / 2, halfOfWidth / 2);
+  const maxPointPadding = Math.min(halfOfHeight, halfOfWidth);
+
+  // 对于非圆形节点设置的连接点与节点中心坐标（`top-right`，`bottom-right`,`top-left`,`bottom-left`较特殊，为四个角坐标）在 x 轴或 y 轴方向的偏移量，默认为  `节点宽高中最小值的1/4`
+  const pointPadding = loopCfg?.pointPadding
+    ? Math.min(maxPointPadding, loopCfg?.pointPadding)
+    : defaultPointPadding;
 
   // 如果定义了锚点的，直接用锚点坐标，否则，根据自环的 cfg 计算
   if (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1]) {
     switch (position) {
       case 'top':
-        startPoint = [center[0] - sinDeltaStart, center[1] - cosDeltaStart];
-        endPoint = [center[0] + sinDeltaEnd, center[1] - cosDeltaEnd];
+        if (shapeType === 'circle') {
+          startPoint = [center[0] - sinDeltaStart, center[1] - cosDeltaStart];
+          endPoint = [center[0] + sinDeltaEnd, center[1] - cosDeltaEnd];
+        } else {
+          startPoint = [center[0] - pointPadding, center[1] - halfOfHeight];
+          endPoint = [center[0] + pointPadding, center[1] - halfOfHeight];
+        }
         break;
       case 'top-right':
-        rstart = bbox.height / 2;
-        rend = bbox.width / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] + sinDeltaStart, center[1] - cosDeltaStart];
-        endPoint = [center[0] + cosDeltaEnd, center[1] - sinDeltaEnd];
+        rstart = halfOfHeight;
+        rend = halfOfWidth;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] + sinDeltaStart, center[1] - cosDeltaStart];
+          endPoint = [center[0] + cosDeltaEnd, center[1] - sinDeltaEnd];
+        } else {
+          startPoint = [center[0] + halfOfWidth - pointPadding, center[1] - halfOfHeight];
+          endPoint = [center[0] + halfOfWidth, center[1] - halfOfHeight + pointPadding];
+        }
         break;
       case 'right':
-        rstart = bbox.width / 2;
-        rend = bbox.width / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] + cosDeltaStart, center[1] - sinDeltaStart];
-        endPoint = [center[0] + cosDeltaEnd, center[1] + sinDeltaEnd];
+        rstart = halfOfWidth;
+        rend = halfOfWidth;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] + cosDeltaStart, center[1] - sinDeltaStart];
+          endPoint = [center[0] + cosDeltaEnd, center[1] + sinDeltaEnd];
+        } else {
+          startPoint = [center[0] + halfOfWidth, center[1] - pointPadding];
+          endPoint = [center[0] + halfOfWidth, center[1] + pointPadding];
+        }
         break;
       case 'bottom-right':
-        rstart = bbox.width / 2;
-        rend = bbox.height / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] + cosDeltaStart, center[1] + sinDeltaStart];
-        endPoint = [center[0] + sinDeltaEnd, center[1] + cosDeltaEnd];
+        rstart = halfOfWidth;
+        rend = halfOfHeight;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] + cosDeltaStart, center[1] + sinDeltaStart];
+          endPoint = [center[0] + sinDeltaEnd, center[1] + cosDeltaEnd];
+        } else {
+          startPoint = [center[0] + halfOfWidth, center[1] + halfOfHeight - pointPadding];
+          endPoint = [center[0] + halfOfWidth - pointPadding, center[1] + halfOfHeight];
+        }
         break;
       case 'bottom':
-        rstart = bbox.height / 2;
-        rend = bbox.height / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] + sinDeltaStart, center[1] + cosDeltaStart];
-        endPoint = [center[0] - sinDeltaEnd, center[1] + cosDeltaEnd];
+        rstart = halfOfHeight;
+        rend = halfOfHeight;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] + sinDeltaStart, center[1] + cosDeltaStart];
+          endPoint = [center[0] - sinDeltaEnd, center[1] + cosDeltaEnd];
+        } else {
+          startPoint = [center[0] - pointPadding, center[1] + halfOfHeight];
+          endPoint = [center[0] + pointPadding, center[1] + halfOfHeight];
+        }
         break;
       case 'bottom-left':
-        rstart = bbox.height / 2;
-        rend = bbox.width / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] - sinDeltaStart, center[1] + cosDeltaStart];
-        endPoint = [center[0] - cosDeltaEnd, center[1] + sinDeltaEnd];
+        rstart = halfOfHeight;
+        rend = halfOfWidth;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] - sinDeltaStart, center[1] + cosDeltaStart];
+          endPoint = [center[0] - cosDeltaEnd, center[1] + sinDeltaEnd];
+        } else {
+          startPoint = [center[0] - halfOfWidth, center[1] + halfOfHeight - pointPadding];
+          endPoint = [center[0] - halfOfWidth + pointPadding, center[1] + halfOfHeight];
+        }
         break;
       case 'left':
-        rstart = bbox.width / 2;
-        rend = bbox.width / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] - cosDeltaStart, center[1] + sinDeltaStart];
-        endPoint = [center[0] - cosDeltaEnd, center[1] - sinDeltaEnd];
+        rstart = halfOfWidth;
+        rend = halfOfWidth;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] - cosDeltaStart, center[1] + sinDeltaStart];
+          endPoint = [center[0] - cosDeltaEnd, center[1] - sinDeltaEnd];
+        } else {
+          startPoint = [center[0] - halfOfWidth, center[1] - pointPadding];
+          endPoint = [center[0] - halfOfWidth, center[1] + pointPadding];
+        }
         break;
       case 'top-left':
-        rstart = bbox.width / 2;
-        rend = bbox.height / 2;
-        sinDeltaStart = rstart * SELF_LINK_SIN;
-        cosDeltaStart = rstart * SELF_LINK_COS;
-        sinDeltaEnd = rend * SELF_LINK_SIN;
-        cosDeltaEnd = rend * SELF_LINK_COS;
-        startPoint = [center[0] - cosDeltaStart, center[1] - sinDeltaStart];
-        endPoint = [center[0] - sinDeltaEnd, center[1] - cosDeltaEnd];
+        rstart = halfOfWidth;
+        rend = halfOfHeight;
+        if (shapeType === 'circle') {
+          sinDeltaStart = rstart * SELF_LINK_SIN;
+          cosDeltaStart = rstart * SELF_LINK_COS;
+          sinDeltaEnd = rend * SELF_LINK_SIN;
+          cosDeltaEnd = rend * SELF_LINK_COS;
+          startPoint = [center[0] - cosDeltaStart, center[1] - sinDeltaStart];
+          endPoint = [center[0] - sinDeltaEnd, center[1] - cosDeltaEnd];
+        } else {
+          startPoint = [center[0] - halfOfWidth + pointPadding, center[1] - halfOfHeight];
+          endPoint = [center[0] - halfOfWidth, center[1] - halfOfHeight + pointPadding];
+        }
         break;
       default:
-        rstart = bbox.width / 2;
-        rend = bbox.width / 2;
+        rstart = halfOfWidth;
+        rend = halfOfWidth;
         sinDeltaStart = rstart * SELF_LINK_SIN;
         cosDeltaStart = rstart * SELF_LINK_COS;
         sinDeltaEnd = rend * SELF_LINK_SIN;
@@ -381,7 +434,7 @@ export const truncateLabelByLength = (text: string, length: number) => {
     return text;
   }
   return text.substring(0, length) + '...';
-}
+};
 
 /**
  * construct the trees from combos data
@@ -600,7 +653,11 @@ export const reconstructTree = (
   return trees;
 };
 
-export const getComboBBox = (children: ComboTree[], graph: IAbstractGraph, combo?: ICombo): BBox => {
+export const getComboBBox = (
+  children: ComboTree[],
+  graph: IAbstractGraph,
+  combo?: ICombo,
+): BBox => {
   const comboBBox = {
     minX: Infinity,
     minY: Infinity,
@@ -625,7 +682,7 @@ export const getComboBBox = (children: ComboTree[], graph: IAbstractGraph, combo
       x: x,
       y: y,
       width: undefined,
-      height: undefined
+      height: undefined,
     };
   }
 
@@ -671,26 +728,26 @@ export const shouldRefreshEdge = (cfg) => {
 
 export const cloneBesidesImg = (obj) => {
   const clonedObj = {};
-  Object.keys(obj).forEach(key1 => {
+  Object.keys(obj).forEach((key1) => {
     const obj2 = obj[key1];
     if (isObject(obj2) && !isArray(obj2)) {
       const clonedObj2 = {};
-      Object.keys(obj2).forEach(key2 => {
+      Object.keys(obj2).forEach((key2) => {
         const v = obj2[key2];
         if (key2 === 'img' && !isString(v)) return;
         clonedObj2[key2] = clone(v);
-      })
+      });
       clonedObj[key1] = clonedObj2;
     } else {
       clonedObj[key1] = clone(obj2);
     }
   });
   return clonedObj;
-}
+};
 
 export const getAnimateCfgWithCallback = ({
   animateCfg,
-  callback
+  callback,
 }: {
   animateCfg: GraphAnimateConfig;
   callback: () => void;
@@ -699,7 +756,7 @@ export const getAnimateCfgWithCallback = ({
   if (!animateCfg) {
     animateConfig = {
       duration: 500,
-      callback
+      callback,
     };
   } else {
     animateConfig = clone(animateCfg);
@@ -708,10 +765,10 @@ export const getAnimateCfgWithCallback = ({
       animateConfig.callback = () => {
         callback();
         animateCfgCallback();
-      }
+      };
     } else {
       animateConfig.callback = callback;
     }
   }
   return animateConfig;
-}
+};
diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.7.7",
+    "@antv/g6-core": "0.7.8",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.7.7",
+  "version": "4.7.8",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.7.7"
+    "@antv/g6-pc": "0.7.8"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.7.7';
+G6.version = '4.7.8';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.7.7';
+export const version = '4.7.8';