diff --git a/CHANGELOG.md b/CHANGELOG.md index a833d7e1620..b552f0f8a40 100644 --- a/CHANGELOG.md +++ b/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; diff --git a/package.json b/package.json index 2ef8d45bce6..210785d29ee 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,7 @@ "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", @@ -15,14 +13,12 @@ "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" } -} \ No newline at end of file +} diff --git a/packages/core/package.json b/packages/core/package.json index fe7e2520ca1..27d7b867c15 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index 68ce212a061..689f634a4c9 100644 --- a/packages/core/src/global.ts +++ b/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', diff --git a/packages/element/package.json b/packages/element/package.json index 4ae37c7c08c..f912eeb415e 100644 --- a/packages/element/package.json +++ b/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": { diff --git a/packages/g6/package.json b/packages/g6/package.json index ad5daabf9e3..200922d7478 100644 --- a/packages/g6/package.json +++ b/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", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index 9a5b46d5a71..a7691336e0b 100644 --- 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.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'; diff --git a/packages/pc/package.json b/packages/pc/package.json index f5546b29d6f..791376e4a34 100644 --- a/packages/pc/package.json +++ b/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", diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts index c6e0bb69d4d..cc52d949f1b 100644 --- a/packages/pc/src/global.ts +++ b/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', diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 5a432afe3c0..78ddb007d12 100644 --- a/packages/plugin/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/packages/plugin/src/annotation/index.ts b/packages/plugin/src/annotation/index.ts index bfa8aa1fc40..d8f1773ee18 100644 --- a/packages/plugin/src/annotation/index.ts +++ b/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 = `

x

` const borderRadius = collapsed ? `${r}px` : `${r}px ${r}px 0 0`; - return `
+ return `
`); - const inputWrapper = createDom(`
`); + const input = createDom(`<${inputTag} class="${targetClass}-input" type="textarea" style="width:${width}px; height: ${height}px; min-width: 16px;"/>`); + const inputWrapper = createDom(`
`); inputWrapper.appendChild(input); target.parentNode.replaceChild(inputWrapper, target); if (targetClass === 'g6-annotation-title') { diff --git a/packages/site/docs/manual/middle/states/defaultBehavior.en.md b/packages/site/docs/manual/middle/states/defaultBehavior.en.md index ab3330f50c7..2c7c0348886 100644 --- a/packages/site/docs/manual/middle/states/defaultBehavior.en.md +++ b/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: diff --git a/packages/site/docs/manual/middle/states/defaultBehavior.zh.md b/packages/site/docs/manual/middle/states/defaultBehavior.zh.md index a8d11962e53..d0470c2160c 100644 --- a/packages/site/docs/manual/middle/states/defaultBehavior.zh.md +++ b/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 发生状态响应,参考下面示例。 - 相关时机事件: diff --git a/packages/site/examples/case/graphDemos/demo/largeGraph.js b/packages/site/examples/case/graphDemos/demo/largeGraph.js index 03d3ae38914..580965cd772 100644 --- a/packages/site/examples/case/graphDemos/demo/largeGraph.js +++ b/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; diff --git a/packages/site/site/pages/largegraph.zh.tsx b/packages/site/site/pages/largegraph.zh.tsx index 01faa85323b..00f4f0c3cf8 100644 --- a/packages/site/site/pages/largegraph.zh.tsx +++ b/packages/site/site/pages/largegraph.zh.tsx @@ -174,7 +174,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]) { @@ -237,9 +237,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'; @@ -263,11 +262,11 @@ const processNodesEdges = ( lineDash, endArrow: arrowPath ? { - path: arrowPath, - d, - fill: stroke, - strokeOpacity: 0, - } + path: arrowPath, + d, + fill: stroke, + strokeOpacity: 0, + } : false, }; edge.labelCfg = { @@ -541,7 +540,7 @@ const getMixedGraph = ( const vedge = { source: edge.source, target: targetClusterId, - id: `edge-${uniqueId()}`, + id: uniqueId('edge'), label: '', }; edges.push(vedge); @@ -550,7 +549,7 @@ const getMixedGraph = ( const vedge = { target: edge.target, source: sourceClusterId, - id: `edge-${uniqueId()}`, + id: uniqueId('edge'), label: '', }; edges.push(vedge); @@ -609,7 +608,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, @@ -619,7 +618,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}`, @@ -655,7 +654,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, }); @@ -668,7 +667,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, }); @@ -1006,7 +1005,7 @@ const LargeGraph = () => { ...clusterEdge, size: Math.log(clusterEdge.count as number), label: '', - id: `edge-${uniqueId()}`, + id: uniqueId('edge'), }; if (cedge.source === cedge.target) { cedge.type = 'loop'; @@ -1019,7 +1018,7 @@ const LargeGraph = () => { data.edges.forEach((edge) => { edge.label = `${edge.source}-${edge.target}`; - edge.id = `edge-${uniqueId()}`; + edge.id = uniqueId('edge'); }); currentUnproccessedData = aggregatedData;