perf: Annotation min-width and input width; (#3947)

* perf: Annotation min-width and input width;

* Fix build issue (#3934)

* fix: there is no dir named mobile

* fix: path-util is not marked as dependency of plugin, but actually it is

Co-authored-by: xiangyifeng <[email protected]>

Co-authored-by: fxiangyi <[email protected]>
Co-authored-by: xiangyifeng <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+ ### 4.7.4
+  
+  - perf: Annotation min-width and input width;
+
 ### 4.7.3
 
 - feat: beforechangedata and afterchagnedata for graph changeData;

package.json

@@ -5,24 +5,20 @@
     "packages/*"
   ],
   "scripts": {
-    "analysis:mobile": "cd ./packages/mobile && npm run analysis",
     "build:demos": "cd ./packages/pc && npm run demos",
-    "build:demos-mobile": "cd ./packages/mobile && npm run demos",
     "build:site": "cd ./packages/site && npm run start",
     "build:core": "cd ./packages/core && npm run build",
     "build:element": "cd ./packages/element && npm run build",
     "build:plugin": "cd ./packages/plugin && npm run build",
     "build:pc": "cd ./packages/pc && npm run build",
     "build:g6": "cd ./packages/g6 && npm run build",
     "build:react-node": "cd ./packages/react-node && npm run build",
-    "build:mobile": "cd ./packages/mobile && npm run build",
-    "build:all": "npm run build:core && npm run build:element && npm run build:plugin && npm run build:pc && npm run build:g6 && npm run build:mobile",
+    "build:all": "npm run build:core && npm run build:element && npm run build:plugin && npm run build:pc && npm run build:g6",
     "lint:core": "cd ./packages/core && npm run lint",
     "lint:element": "cd ./packages/element && npm run lint",
     "lint:plugin": "cd ./packages/plugin && npm run lint",
     "lint:pc": "cd ./packages/pc && npm run lint",
     "lint:g6": "cd ./packages/g6 && npm run lint",
-    "lint:mobile": "cd ./packages/mobile && npm run lint",
     "lint:all": "npm run lint:core && npm run lint:element && npm run lint:plugin && npm run lint:pc && npm run lint:g6",
     "build": "lerna run build --include-dependencies --stream",
     "lint": "npm run lint:all",
@@ -91,4 +87,4 @@
     "normalize-url": "^4.1.0",
     "sharp": "^0.30.4"
   }
-}
+}

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.7.3',
+  version: '0.7.4',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "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.3",
+    "@antv/g6-core": "0.7.4",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.7.3",
+  "version": "4.7.4",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.7.3"
+    "@antv/g6-pc": "0.7.4"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.7.3';
+G6.version = '4.7.4';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.7.3';
+export const version = '4.7.4';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.7.3",
-    "@antv/g6-element": "0.7.3",
-    "@antv/g6-plugin": "0.7.3",
+    "@antv/g6-core": "0.7.4",
+    "@antv/g6-element": "0.7.4",
+    "@antv/g6-plugin": "0.7.4",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.3.0",
     "@antv/matrix-util": "^3.1.0-beta.3",

packages/pc/src/global.ts

@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.7.3',
+  version: '0.7.4',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,11 +22,12 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.7.3",
-    "@antv/g6-element": "0.7.3",
+    "@antv/g6-core": "0.7.4",
+    "@antv/g6-element": "0.7.4",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",
+    "@antv/path-util": "^2.0.3",
     "insert-css": "^2.0.0"
   },
   "sideEffects": false,
@@ -60,4 +61,4 @@
     "ts-jest": "^26.4.4",
     "@antv/g6": "4.5.1"
   }
-}
+}

packages/plugin/src/annotation/index.ts

@@ -26,6 +26,7 @@ typeof document !== 'undefined' &&
   .g6-annotation-title {
     margin: 4px 40px 4px 8px;
     cursor: text;
+    min-width: 32px;
   }
   .g6-annotation-collapse {
     margin: 4px;
@@ -44,6 +45,7 @@ typeof document !== 'undefined' &&
     width: fit-content;
     cursor: text;
     word-break: break-all;
+    min-width: 32px;
   }
   .g6-annotation-title-input-wrapper {
     margin: 4px 40px 4px 8px;
@@ -181,7 +183,7 @@ export default class Annotation extends Base {
     const closeDOM = `<p class='g6-annotation-close'>x</p>`
     const borderRadius = collapsed ? `${r}px` : `${r}px ${r}px 0 0`;
 
-    return `<div class="g6-annotation-wrapper" style="border-radius: ${r}px; maxWidth: ${maxWidth}px">
+    return `<div class="g6-annotation-wrapper" style="border-radius: ${r}px; max-width: ${maxWidth}px">
         <div
           class="g6-annotation-header-wapper"
           style="border-radius: ${borderRadius};"
@@ -709,11 +711,11 @@ export default class Annotation extends Base {
         const target = e.target;
         const targetClass = target.className;
         if (targetClass !== 'g6-annotation-title' && targetClass !== 'g6-annotation-content') return;
-        const { width, height } = target.getBoundingClientRect();
+        const { width, height } = targetClass === 'g6-annotation-title' ? target.getBoundingClientRect() : target.parentNode.getBoundingClientRect();
         const computeStyle = getComputedStyle(target);
         const inputTag = targetClass === 'g6-annotation-title' ? 'input' : 'textarea';
-        const input = createDom(`<${inputTag} class="${targetClass}-input" type="textarea" style="width:${width}px; height: ${height}px"/>`);
-        const inputWrapper = createDom(`<div class="${targetClass}-input-wrapper" style="width: ${width}px; height: ${height}px margin-right: ${computeStyle['marginRight']}" />`);
+        const input = createDom(`<${inputTag} class="${targetClass}-input" type="textarea" style="width:${width}px; height: ${height}px; min-width: 16px;"/>`);
+        const inputWrapper = createDom(`<div class="${targetClass}-input-wrapper" style="width: ${width}px; height: ${height}px; min-width: 16px; margin-right: ${computeStyle['marginRight']}" />`);
         inputWrapper.appendChild(input);
         target.parentNode.replaceChild(inputWrapper, target);
         if (targetClass === 'g6-annotation-title') {

packages/site/docs/manual/middle/states/defaultBehavior.en.md

@@ -277,6 +277,10 @@ const graph = new G6.Graph({
   - `type: 'click-select'`;
   - `multiple`: Whether to allow multiple selection. `true` by default. `false` means multiple selection is not allowed, and the `trigger` will not take effect.
   - `trigger`: Specify which trigger for multiple selection. `shift` by default, which means multiple selection is activated when the shift button is pressed. Options: `'shift'`, `'ctrl'`, `'alt'`, and so on;
+  - `selectedState`: The state name for an item which is selected by this behaivor, `'selected'` by default;
+  - `selectNode`: Whether allow selecting node by this behavior, `true` by default;
+  - `selectEdge`: Whether allow selecting edge by this behavior, `false` by default;
+  - `selectCombo`: Whether allow selecting combo by this behaivor, `true` by default;
   - `shouldBegin(e)`: Whether allow the behavior happen on the current item (e.item), see the example below;
   - `shouldUpdate(e)`: Whether allow the behavior changes the state and state style of the on the current item (e.item), see the example below.
 - Related timing events:

packages/site/docs/manual/middle/states/defaultBehavior.zh.md

@@ -281,6 +281,10 @@ const graph = new G6.Graph({
   - `type: 'click-select'`；
   - `multiple`：是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效；
   - `trigger`：指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt；
+  - `selectedState`：被点击选择后设置元素的状态名，默认为 `'selected'`；
+  - `selectNode`：是否允许节点被该交互选中，默认为 `true`；
+  - `selectEdge`：是否允许边被该交互选中，默认为 `false`；
+  - `selectCombo`：是否允许 Combo 被该交互选中，默认为 `true`；
   - `shouldBegin(e)`：是否允许该 behavior 发生，参考下面示例；
   - `shouldUpdate(e)`：是否允许对该 behavior 发生状态响应，参考下面示例。
 - 相关时机事件：

packages/site/examples/case/graphDemos/demo/largeGraph.js

@@ -722,7 +722,7 @@ const processNodesEdges = (
   // let maxCount = 0;
   edges.forEach((edge) => {
     // to avoid the dulplicated id to nodes
-    if (!edge.id) edge.id = `edge-${uniqueId()}`;
+    if (!edge.id) edge.id = uniqueId('edge');
     else if (edge.id.split('-')[0] !== 'edge') edge.id = `edge-${edge.id}`;
     // TODO: delete the following line after the queried data is correct
     if (!currentNodeMap[edge.source] || !currentNodeMap[edge.target]) {
@@ -785,9 +785,8 @@ const processNodesEdges = (
     const arrowWidth = Math.max(size / 2 + 2, 3);
     const arrowLength = 10;
     const arrowBeging = targetNode.size + arrowLength;
-    let arrowPath = `M ${arrowBeging},0 L ${arrowBeging + arrowLength},-${arrowWidth} L ${
-      arrowBeging + arrowLength
-    },${arrowWidth} Z`;
+    let arrowPath = `M ${arrowBeging},0 L ${arrowBeging + arrowLength},-${arrowWidth} L ${arrowBeging + arrowLength
+      },${arrowWidth} Z`;
     let d = targetNode.size / 2 + arrowLength;
     if (edge.source === edge.target) {
       edge.type = 'loop';
@@ -811,11 +810,11 @@ const processNodesEdges = (
       lineDash,
       endArrow: arrowPath
         ? {
-            path: arrowPath,
-            d,
-            fill: stroke,
-            strokeOpacity: 0,
-          }
+          path: arrowPath,
+          d,
+          fill: stroke,
+          strokeOpacity: 0,
+        }
         : false,
     };
     edge.labelCfg = {
@@ -1084,7 +1083,7 @@ const getMixedGraph = (
       const vedge = {
         source: edge.source,
         target: targetClusterId,
-        id: `edge-${uniqueId()}`,
+        id: uniqueId('edge'),
         label: '',
       };
       edges.push(vedge);
@@ -1093,7 +1092,7 @@ const getMixedGraph = (
       const vedge = {
         target: edge.target,
         source: sourceClusterId,
-        id: `edge-${uniqueId()}`,
+        id: uniqueId('edge'),
         label: '',
       };
       edges.push(vedge);
@@ -1152,7 +1151,7 @@ const generateNeighbors = (centerNodeModel, step, maxNeighborNumPerNode = 5) =>
   const neighborNum = Math.ceil(Math.random() * maxNeighborNumPerNode);
   for (let i = 0; i < neighborNum; i++) {
     const neighborNode = {
-      id: uniqueId(),
+      id: uniqueId('node'),
       clusterId,
       level: 0,
       colorSet: centerNodeModel.colorSet,
@@ -1162,7 +1161,7 @@ const generateNeighbors = (centerNodeModel, step, maxNeighborNumPerNode = 5) =>
     const source = dire ? centerId : neighborNode.id;
     const target = dire ? neighborNode.id : centerId;
     const neighborEdge = {
-      id: uniqueId(),
+      id: uniqueId('edge'),
       source,
       target,
       label: `${source}-${target}`,
@@ -1198,7 +1197,7 @@ const getExtractNodeMixedGraph = (
       if (!aggregatedNodeMap[targetClusterId].expanded) {
         // did not expand, create an virtual edge fromt he extract node to the cluster
         currentUnproccessedData.edges.push({
-          id: uniqueId(),
+          id: uniqueId('edge'),
           source: extractNodeId,
           target: targetClusterId,
         });
@@ -1211,7 +1210,7 @@ const getExtractNodeMixedGraph = (
       if (!aggregatedNodeMap[sourceClusterId].expanded) {
         // did not expand, create an virtual edge fromt he extract node to the cluster
         currentUnproccessedData.edges.push({
-          id: uniqueId(),
+          id: uniqueId('edge'),
           target: extractNodeId,
           source: sourceClusterId,
         });
@@ -1473,7 +1472,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
         ...clusterEdge,
         size: Math.log(clusterEdge.count),
         label: '',
-        id: `edge-${uniqueId()}`,
+        id: uniqueId('edge'),
       };
       if (cedge.source === cedge.target) {
         cedge.type = 'loop';
@@ -1486,7 +1485,7 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
 
     data.edges.forEach((edge) => {
       edge.label = `${edge.source}-${edge.target}`;
-      edge.id = `edge-${uniqueId()}`;
+      edge.id = uniqueId('edge');
     });
 
     currentUnproccessedData = aggregatedData;