diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a8e36f8fe..26cdc33073 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # ChangeLog +### 4.7.17 + +- fix: expandCombo and the edges of the children are not refreshed, closes: #3250; +- fix: the item param of the afterremoveitem for combo should be data; +- fix: add type to the parameter list of beforeremoveitem event; +- fix: edge update with destroyed end items, closes: #3925; +- perf: take the max value of padding array for circle combo, closes: #4113; +- feat: support top-center for rect combo label position, closes: #3750; +- feat: createCombo and uncombo support stack, closes: #3695, #3323; + ### 4.7.16 - feat: allowDragOnItem config for scroll-canvas, closes: #3062; @@ -12,7 +22,7 @@ - perf: fitView and fitCenter according to the corner ndoes insead of getCanvasBBox to avoid maximum call stack size exceeded, closes: #2447; - fix: treeGraph changeData with node properties lost, closes: #3215; - fix: error occurs while calling updateLayout from gpu layout to a cpu layout, closes: #3272; -- fix: error occurs while calling changeData to remove a node in a combo, cloases: #3293; +- fix: error occurs while calling changeData to remove a node in a combo, closes: #3293; ### 4.7.15 diff --git a/packages/core/package.json b/packages/core/package.json index a616ceb2c7..f77a5c38c5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-core", - "version": "0.7.16", + "version": "0.7.17", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", diff --git a/packages/core/src/element/combo.ts b/packages/core/src/element/combo.ts index b6b6da9301..b7dda9caff 100644 --- a/packages/core/src/element/combo.ts +++ b/packages/core/src/element/combo.ts @@ -73,7 +73,7 @@ const singleCombo: ShapeOptions = { const labelPosition = labelCfg.position || this.labelPosition; const { style: cfgStyle } = cfg; let padding: number | number[] = cfg.padding || this.options.padding; - if (isArray(padding)) padding = padding[0]; + if (isArray(padding)) padding = Math.max(...padding); let { refX, refY } = labelCfg; // 考虑 refX 和 refY = 0 的场景，不用用 labelCfg.refX || Global.nodeLabel.refX diff --git a/packages/core/src/element/combos/circle.ts b/packages/core/src/element/combos/circle.ts index 7d0812ba68..d6c71c2bbd 100644 --- a/packages/core/src/element/combos/circle.ts +++ b/packages/core/src/element/combos/circle.ts @@ -12,7 +12,7 @@ Shape.registerCombo( // 自定义节点时的配置 options: { size: [Global.defaultCombo.size[0], Global.defaultCombo.size[0]], - padding: Global.defaultCombo.padding[0], + padding: Math.max(...Global.defaultCombo.padding), animate: true, style: { stroke: Global.defaultCombo.style.stroke, @@ -59,7 +59,7 @@ Shape.registerCombo( getShapeStyle(cfg: ComboConfig): ShapeStyle { const { style: defaultStyle } = this.options as ComboConfig; let padding: number | number[] = cfg.padding || this.options.padding; - if (isArray(padding)) padding = padding[0]; + if (isArray(padding)) padding = Math.max(...padding); const strokeStyle: ShapeStyle = { stroke: cfg.color, }; @@ -91,7 +91,7 @@ Shape.registerCombo( update(cfg: ComboConfig, item: Item) { const size = (this as ShapeOptions).getSize!(cfg); let padding: number | number[] = cfg.padding || this.options.padding; - if (isArray(padding)) padding = padding[0]; + if (isArray(padding)) padding = Math.max(...padding) const cfgStyle = clone(cfg.style); const fixSize = cfg.collapsed && cfg.fixCollapseSize ? cfg.fixCollapseSize : cfg.fixSize; let r; diff --git a/packages/core/src/element/combos/rect.ts b/packages/core/src/element/combos/rect.ts index 35a1618feb..d99009720a 100644 --- a/packages/core/src/element/combos/rect.ts +++ b/packages/core/src/element/combos/rect.ts @@ -68,15 +68,17 @@ Shape.registerCombo( refY = this.refY as number; // 不居中时的偏移量 } - const leftDis = cfgStyle.width / 2 + padding[3]; - const topDis = cfgStyle.height / 2 + padding[0]; + const left = -cfgStyle.width / 2 - padding[3]; + const right = cfgStyle.width / 2 + padding[1]; + const top = -cfgStyle.height / 2 - padding[0]; + const bottom = cfgStyle.height / 2 + padding[2]; let style: any; switch (labelPosition) { case 'top': style = { - x: 0 - leftDis + refX, - y: 0 - topDis + refY, + x: left + refX, + y: top + refY, textBaseline: 'top', // 文本在图形的上方 textAlign: 'left', }; @@ -84,14 +86,14 @@ Shape.registerCombo( case 'bottom': style = { x: 0, - y: topDis + refY, - textBaseline: 'bottom', + y: bottom + refY, + textBaseline: 'top', textAlign: 'center', }; break; case 'left': style = { - x: 0 - leftDis + refY, + x: left + refY, y: 0, textAlign: 'left', }; @@ -104,9 +106,17 @@ Shape.registerCombo( textAlign: 'center', }; break; + case 'top-center': + style = { + x: 0, + y: top + refY, + textBaseline: 'top', + textAlign: 'center' + }; + break; default: style = { - x: leftDis + refX, + x: right + refX, y: 0, textAlign: 'right', }; diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts index 3b97d9d6f6..3c6d5e8ebe 100644 --- a/packages/core/src/global.ts +++ b/packages/core/src/global.ts @@ -64,7 +64,7 @@ const colorSet = { }; export default { - version: '0.7.16', + version: '0.7.17', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/core/src/graph/controller/item.ts b/packages/core/src/graph/controller/item.ts index 3f7e976c63..036f031e2a 100644 --- a/packages/core/src/graph/controller/item.ts +++ b/packages/core/src/graph/controller/item.ts @@ -470,8 +470,10 @@ export default class ItemController { combo = graph.findById(combo) as ICombo; } const children = (combo as ICombo).getChildren(); + const edgeSet = new Set(); children.nodes.forEach((node) => { graph.showItem(node, stack); + node.getEdges().forEach(edge => edgeSet.add(edge)); }); children.combos.forEach((c) => { if (c.getModel().collapsed) { @@ -479,7 +481,9 @@ export default class ItemController { } else { graph.showItem(c, stack); } + c.getEdges().forEach(edge => edgeSet.add(edge)); }); + edgeSet.forEach(edge => edge.refresh()); } /** @@ -500,10 +504,10 @@ export default class ItemController { } const itemModel = clone(item.getModel()); - graph.emit('beforeremoveitem', { item: itemModel }); - let type = ''; if (item.getType) type = item.getType(); + graph.emit('beforeremoveitem', { item: itemModel, type }); + const items = graph.get(`${type}s`); const index = items.indexOf(item); if (index > -1) items.splice(index, 1); diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts index 9faeaccdfd..559846bd52 100644 --- a/packages/core/src/graph/graph.ts +++ b/packages/core/src/graph/graph.ts @@ -1748,9 +1748,9 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs /** * 根据已经存在的节点或 combo 创建新的 combo * @param combo combo ID 或 Combo 配置 - * @param children 添加到 Combo 中的元素，包括节点和 combo + * @param childrenIds 添加到 Combo 中的元素，包括节点和 combo */ - public createCombo(combo: string | ComboConfig, children: string[]): void { + public createCombo(combo: string | ComboConfig, childrenIds: string[], stack: boolean = true): void { const itemController: ItemController = this.get('itemController'); this.set('comboSorted', false); @@ -1772,9 +1772,26 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs comboConfig = combo; } + const shouldStack = stack && this.get('enabledStack'); + + // cache the children's old parent for stack + const childrenParentCache = { nodes: [], combos: [] }; + if (shouldStack) { + childrenIds.forEach(childId => { + const childItem = this.findById(childId); + const childType = childItem.getType(); + if (childType !== 'node' && childType !== 'combo') return; + const childModel = childItem.getModel(); + childrenParentCache[`${childType}s`].push({ + id: childId, + parentId: childType === 'node' ? childModel.comboId : childModel.parentId, + }) + }); + } + // step 2: Pull children out of their parents let comboTrees = this.get('comboTrees'); - const childrenIdsSet = new Set(children); + const childrenIdsSet = new Set(childrenIds); const pulledComboTreesById = new Map(); if (comboTrees) { @@ -1809,7 +1826,8 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs } // step 3: 更新 children，根据类型添加 comboId 或 parentId - const trees: ComboTree[] = children.map(elementId => { + const newChildrenParent = { nodes: [], combos: [] }; + const trees: ComboTree[] = childrenIds.map(elementId => { const item = this.findById(elementId); const model = item.getModel(); @@ -1829,6 +1847,12 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs (cItem as NodeConfig).comboId = comboId; model.comboId = comboId; } + if (shouldStack) { + newChildrenParent[`${type}s`].push({ + id: model.id, + parentId: comboId + }); + } return cItem; }); @@ -1856,13 +1880,21 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs this.sortCombos(); } + + if (shouldStack) { + newChildrenParent.combos.push(comboConfig); + this.pushStack('createCombo', { + before: childrenParentCache, + after: newChildrenParent + }); + } } /** * 解散 combo * @param {String | INode | ICombo} combo 需要被解散的 Combo item 或 id */ - public uncombo(combo: string | ICombo) { + public uncombo(combo: string | ICombo, stack: boolean = true) { const self = this; let comboItem: ICombo = combo as ICombo; if (isString(combo)) { @@ -1874,6 +1906,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs return; } + const comboModel = comboItem.getModel(); const parentId = comboItem.getModel().parentId; let comboTrees = self.get('comboTrees'); if (!comboTrees) comboTrees = []; @@ -1884,6 +1917,14 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs const comboItems = this.get('combos'); const parentItem = this.findById(parentId as string) as ICombo; + + const shouldStack = stack && this.get('enabledStack'); + let comboConfig: any = {}; + if (shouldStack) { + comboConfig = clone(comboModel); + comboConfig.children = []; + } + comboTrees.forEach(ctree => { if (treeToBeUncombo) return; // terminate the forEach traverseTreeUp(ctree, subtree => { @@ -1898,8 +1939,9 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs const index = comboItems.indexOf(comboItem); comboItems.splice(index, 1); delete itemMap[comboId]; + const itemModel = clone(comboItem.getModel()); comboItem.destroy(); - this.emit('afterremoveitem', { item: comboItem, type: 'combo' }); + this.emit('afterremoveitem', { item: itemModel, type: 'combo' }); } // find the parent to remove the combo from the combo's brothers array and add the combo's children to the combo's brothers array in the tree if (parentId && treeToBeUncombo && subtree.id === parentId) { @@ -1927,6 +1969,7 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs parentItem.addChild(item); brothers.push(child); }); + this.updateCombo(parentItem); return false; } return true; @@ -1946,6 +1989,31 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs if (child.itemType !== 'node') comboTrees.push(child); }); } + + if (shouldStack) { + // cache the children's old parent and combo model for stack + const childrenParentCache = { nodes: [], combos: [] }; + const childNewParent = { nodes: [], combos: [] }; + treeToBeUncombo.children?.forEach(child => { + const childItem = this.findById(child.id); + const childType = childItem.getType(); + if (childType !== 'node' && childType !== 'combo') return; + childrenParentCache[`${childType}s`].push({ + id: child.id, + parentId: comboId + }); + childNewParent[`${childType}s`].push({ + id: child.id, + parentId + }); + }); + + childrenParentCache.combos.push(comboConfig); + this.pushStack('uncombo', { + before: childrenParentCache, + after: childNewParent + }); + } } /** diff --git a/packages/core/src/interface/graph.ts b/packages/core/src/interface/graph.ts index 34329da28e..0f1c1e0a89 100644 --- a/packages/core/src/interface/graph.ts +++ b/packages/core/src/interface/graph.ts @@ -266,14 +266,14 @@ export interface IAbstractGraph extends EventEmitter { * 解散 combo * @param {String | ICombo} item 需要被解散的 Combo item 或 id */ - uncombo: (item: string | ICombo) => void; + uncombo: (item: string | ICombo, stack?: boolean) => void; /** * 根据已经存在的节点或 combo 创建新的 combo * @param combo combo ID 或 Combo 配置 - * @param elements 添加到 Combo 中的元素，包括节点和 combo + * @param childrenIds 添加到 Combo 中的元素，包括节点和 combo */ - createCombo: (combo: string | ComboConfig, elements: string[]) => void; + createCombo: (combo: string | ComboConfig, childrenIds: string[], stack?: boolean) => void; /** * 设置元素状态 diff --git a/packages/core/src/item/combo.ts b/packages/core/src/item/combo.ts index 1e5c0915a1..d634f67b42 100644 --- a/packages/core/src/item/combo.ts +++ b/packages/core/src/item/combo.ts @@ -39,7 +39,7 @@ export default class Combo extends Node implements ICombo { size.width += padding * 2; size.height += padding * 2; } else { - size.r += padding[0]; + size.r = size.r + Math.max(...(padding as Array)); size.width += (padding[1] + padding[3]) || padding[1] * 2; size.height += (padding[0] + padding[2]) || padding[0] * 2; } diff --git a/packages/core/src/item/edge.ts b/packages/core/src/item/edge.ts index 4bcc8d3e44..9ede2c0849 100644 --- a/packages/core/src/item/edge.ts +++ b/packages/core/src/item/edge.ts @@ -92,7 +92,7 @@ export default class Edge extends Item implements IEdge { const pointName = END_MAP[name] + POINT_NAME_SUFFIX; const item = this.get(itemName); // 如果有端点，直接使用 model - if (item) { + if (item && !item.destroyed) { return item.get('model'); } // 否则直接使用点 return this.get(pointName); @@ -217,6 +217,10 @@ export default class Edge extends Item implements IEdge { const cfgVisible = cfg.visible; if (oriVisible !== cfgVisible && cfgVisible !== undefined) this.changeVisibility(cfgVisible); + const sourceItem = this.get('source'); + const targetItem = this.get('target'); + if (!sourceItem || sourceItem.destroyed || !targetItem || targetItem.destroyed) return; + const styles = this.get('styles'); if (cfg.stateStyles) { // 更新 item 时更新 this.get('styles') 中的值 diff --git a/packages/element/package.json b/packages/element/package.json index 6e3aa8c5d9..e2a3b1b77d 100644 --- a/packages/element/package.json +++ b/packages/element/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-element", - "version": "0.7.16", + "version": "0.7.17", "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.16", + "@antv/g6-core": "0.7.17", "@antv/util": "~2.0.5" }, "devDependencies": { diff --git a/packages/g6/package.json b/packages/g6/package.json index 528f31912b..dc55c66b27 100644 --- a/packages/g6/package.json +++ b/packages/g6/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6", - "version": "4.7.16", + "version": "4.7.17", "description": "A Graph Visualization Framework in JavaScript", "keywords": [ "antv", @@ -66,7 +66,7 @@ ] }, "dependencies": { - "@antv/g6-pc": "0.7.16" + "@antv/g6-pc": "0.7.17" }, "devDependencies": { "@babel/core": "^7.7.7", diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts index f47b282a4d..7c2f273333 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.16'; +G6.version = '4.7.17'; export * from '@antv/g6-pc'; export default G6; -export const version = '4.7.16'; +export const version = '4.7.17'; diff --git a/packages/pc/package.json b/packages/pc/package.json index c20e0cc47a..a7b0970ef3 100644 --- a/packages/pc/package.json +++ b/packages/pc/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-pc", - "version": "0.7.16", + "version": "0.7.17", "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.16", - "@antv/g6-element": "0.7.16", - "@antv/g6-plugin": "0.7.16", + "@antv/g6-core": "0.7.17", + "@antv/g6-element": "0.7.17", + "@antv/g6-plugin": "0.7.17", "@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 030a35b8d0..f9ab76ccfe 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.16', + version: '0.7.17', rootContainerClassName: 'root-container', nodeContainerClassName: 'node-container', edgeContainerClassName: 'edge-container', diff --git a/packages/pc/src/graph/controller/event.ts b/packages/pc/src/graph/controller/event.ts index a8a9c54456..5c851ac40a 100644 --- a/packages/pc/src/graph/controller/event.ts +++ b/packages/pc/src/graph/controller/event.ts @@ -13,6 +13,8 @@ export default class EventController extends AbstractEvent { protected canvasHandler!: Fun; + private resetHandler!: Fun; + protected dragging: boolean = false; protected preItem: Item | null = null; @@ -21,6 +23,7 @@ export default class EventController extends AbstractEvent { constructor(graph: Graph) { super(graph); + this.destroy(); this.graph = graph; this.destroyed = false; this.initEvents(); @@ -53,6 +56,11 @@ export default class EventController extends AbstractEvent { extendEvents.push(addEventListener(window as any, 'keyup', originHandler)); extendEvents.push(addEventListener(window as any, 'focus', originHandler)); } + + // 数据变更，重置一些状态 + if (this.resetHandler) graph.off('afterchangedata', this.resetHandler); + this.resetHandler = wrapBehavior(this, 'resetStatus') as Fun; + graph.on('afterchangedata', this.resetHandler); } // 获取 shape 的 item 对象 @@ -213,6 +221,11 @@ export default class EventController extends AbstractEvent { this.graph.emit(`${itemType}:${eventType}`, evt); } + private resetStatus() { + this.dragging = false; + this.preItem = null; + } + public destroy() { const { graph, canvasHandler, extendEvents } = this; const canvas: ICanvas = graph.get('canvas'); @@ -227,10 +240,10 @@ export default class EventController extends AbstractEvent { event.remove(); }); - this.dragging = false; - this.preItem = null; + this.resetStatus(); this.extendEvents.length = 0; (this.canvasHandler as Fun | null) = null; + (this.resetHandler as Fun | null) = null; this.destroyed = true; } } diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 25d6411220..14e43658af 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g6-plugin", - "version": "0.7.16", + "version": "0.7.17", "description": "G6 Plugin", "main": "lib/index.js", "module": "es/index.js", @@ -22,8 +22,8 @@ "@antv/g-base": "^0.5.1", "@antv/g-canvas": "^0.5.2", "@antv/g-svg": "^0.5.2", - "@antv/g6-core": "0.7.16", - "@antv/g6-element": "0.7.16", + "@antv/g6-core": "0.7.17", + "@antv/g6-element": "0.7.17", "@antv/matrix-util": "^3.1.0-beta.3", "@antv/scale": "^0.3.4", "@antv/util": "^2.0.9", diff --git a/packages/plugin/src/toolBar/index.ts b/packages/plugin/src/toolBar/index.ts index 4b83e0dbed..56c7bb1ac3 100644 --- a/packages/plugin/src/toolBar/index.ts +++ b/packages/plugin/src/toolBar/index.ts @@ -296,6 +296,23 @@ export default class ToolBar extends Base { }); }); break; + case 'createCombo': + const afterCombos = currentData.data.after.combos; + const createdCombo = afterCombos[afterCombos.length - 1]; + Object.keys(data).forEach((key) => { + const array = data[key]; + if (!array) return; + array.forEach((model) => { + graph.updateComboTree(model.id, model.parentId, false); + }); + }); + graph.removeItem(createdCombo.id, false); + break; + case 'uncombo': + const targetCombo = data.combos[data.combos.length - 1]; + const childrenIds = data.nodes.concat(data.combos).map(child => child.id).filter(id => id !== targetCombo.id); + graph.createCombo(targetCombo, childrenIds, false); + break; case 'layout': graph.updateLayout(data, undefined, undefined, false); break; @@ -396,6 +413,15 @@ export default class ToolBar extends Base { }); }); break; + case 'createCombo': + const createdCombo = data.combos[ data.combos.length - 1]; + graph.createCombo(createdCombo, createdCombo.children.map(child => child.id), false); + break; + case 'uncombo': + const beforeCombos = currentData.data.before.combos; + const targertCombo = beforeCombos[beforeCombos.length - 1]; + graph.uncombo(targertCombo.id, false); + break; case 'layout': graph.updateLayout(data, undefined, undefined, false); break; diff --git a/packages/site/docs/api/Group.en.md b/packages/site/docs/api/Group.en.md index 7f88a95c2f..9c8d75759b 100644 --- a/packages/site/docs/api/Group.en.md +++ b/packages/site/docs/api/Group.en.md @@ -32,7 +32,7 @@ The `cfg` above is not required, and it contains: | Name | Type | Description | | --- | --- | --- | | id | String | The unique id of this group | -| name | String | The name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, `name` can be used for searching this shape, e.g. `const shape = group.find(element => element.get('name') === 'shape-name')`. The usage of find can be found at [find(fn)](#findfn) | +| name | String | Required, and the name of the shape which **must be unique** in a custom node/edge/combo type. Besides, `name` can be used for searching this shape, e.g. `const shape = group.find(element => element.get('name') === 'shape-name')`. The usage of find can be found at [find(fn)](#findfn) | | visible | Boolean | Whether the group is visible | | capture | Boolean | Whether the group is capturable | | draggable | Boolean | Whether the group is allowed to response `dragstart`, `drag`, and `dragend` events. E.g. when user add a group into a custom node with `draggable: true`, the group will response the dragging events on the node, and the `'drag-node'` in the `modes` of the graph instance will take effect on the group | @@ -68,7 +68,7 @@ The `cfg` above contains: | Name | Type | Description | | --- | --- | --- | | attrs | Object | The style configurations for the shape. e.g. `{x: 0, y: 10, fill: '#0f0'}` | -| name | String | The name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, `name` can be used for searching this shape, e.g. `const shape = group.find(element => element.get('name') === 'shape-name')`. The usage of find can be found at [find(fn)](#findfn) | +| name | String | Required, and the name of the shape which **must be unique** in a custom node/edge/combo type. Besides, `name` can be used for searching this shape, e.g. `const shape = group.find(element => element.get('name') === 'shape-name')`. The usage of find can be found at [find(fn)](#findfn) | | visible | Boolean | Whether the shape is visible | | capture | Boolean | Whether the shape is capturable by mouse events | | draggable | Boolean | Whether the shape is allowed to response `dragstart`, `drag`, and `dragend` events. E.g. when user add a shape into a custom node with `draggable: true`, the shape will response the dragging events on the node, and the `'drag-node'` in the `modes` of the graph instance will take effect | @@ -88,7 +88,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', zIndex: 1, }); diff --git a/packages/site/docs/api/Group.zh.md b/packages/site/docs/api/Group.zh.md index e5d60db065..b58f559fc0 100644 --- a/packages/site/docs/api/Group.zh.md +++ b/packages/site/docs/api/Group.zh.md @@ -32,7 +32,7 @@ const group = item.get('group'); | 名称 | 类型 | 说明 | | --- | --- | --- | | id | String | 图形分组的唯一标识，非必须指定，指定则必须唯一 | -| name | String | 图形分组的标识，非必须指定，可以不唯一。在 G6 3.3 及以后版本中必须指定。另外，`name` 可以用于组内搜索到该元素：`const shape = group.find(element => element.get('name') === 'shape-name')`，find 函数用法见 [find(fn)](#findfn) | +| name | String | 图形分组的标识，必须指定，**在同一元素类型中必须唯一**。另外，`name` 可以用于组内搜索到该元素：`const shape = group.find(element => element.get('name') === 'shape-name')`，find 函数用法见 [find(fn)](#findfn) | | capture | Boolean | 非必须指定，该图形分组是否可以被鼠标事件捕捉到，即是否能够响应各鼠标事件。非必须指定 | | visible | Boolean | 非必须指定，该图形分组是否可见。非必须指定，默认为 `true` | | draggable | Boolean | 非必须指定，该图形分组是否允许被拖拽。例如，自定义节点通过 `addGroup` 添加图形分组，当该图形分组的 `draggable` 值为 `true` 时，鼠标在该自定义节点的这个图形分组上才能够响应 `dragstart`，`drag`，与 `dragend` 事件；在实例化图时的 `modes` 中配置的 `'drag-node'` 交互才可以在该图形分组上进行拖拽时生效 | @@ -68,7 +68,7 @@ group.addGroup({ | 名称 | 类型 | 说明 | | --- | --- | --- | | attrs | Object | 图形样式，必须配置，例如：`{x: 0, y: 10, fill: '#0f0'}` | -| name | String | 图形的标识，可以不唯一。在 G6 3.3 及以后版本中必须指定。另外，`name` 可以用于组内搜索到该元素：`const shape = group.find(element => element.get('name') === 'shape-name')`，find 函数用法见 [find(fn)](#findfn) | +| name | String | 图形的标识，必须指定，**在同一元素类型中必须唯一**。另外，`name` 可以用于组内搜索到该元素：`const shape = group.find(element => element.get('name') === 'shape-name')`，find 函数用法见 [find(fn)](#findfn) | | capture | Boolean | 该图形是否可以被鼠标事件捕捉到，即是否能够响应各鼠标事件。非必须指定 | | visible | Boolean | 该图形是否可见。非必须指定，默认为 `true` | | draggable | Boolean | 该图形是否允许被拖拽。例如，自定义节点通过 `addShape` 添加图形，当该图形的 `draggable` 值为 `true` 时，鼠标在该自定义节点的这个图形上才能够响应 `dragstart`，`drag`，与 `dragend` 事件；在实例化图时的 `modes` 中配置的 `'drag-node'` 交互才可以在该图形上进行拖拽时生效 | @@ -89,7 +89,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', zIndex: 1, }); diff --git a/packages/site/docs/api/graphFunc/combo.en.md b/packages/site/docs/api/graphFunc/combo.en.md index 06207863af..8bd153ce13 100644 --- a/packages/site/docs/api/graphFunc/combo.en.md +++ b/packages/site/docs/api/graphFunc/combo.en.md @@ -138,7 +138,7 @@ Expand the `combo` if it is collapsed. Collapse the `combo` if it is expanded. graph.collapseExpandCombo('combo1') ``` -### graph.createCombo(combo, elements) +### graph.createCombo(combo, elements, stack) Create a new combo with existing nodes or combos to be its children. @@ -148,6 +148,8 @@ Create a new combo with existing nodes or combos to be its children. | --- | --- | --- | --- | | combo | string / ICombo | true | The ID or the configuration of the combo to be created | | elements | string[] | The IDs of the existing nodes or combos to be the children of the newly created combo | +| stack | boolean | false | **Supported by v4.7.17 and later versions** Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. | + **Usage** @@ -164,7 +166,7 @@ graph.createCombo({ }, ['node1', 'node2', 'combo2']) ``` -### graph.uncombo(combo) +### graph.uncombo(combo, stack) Ungroup the combo, which deletes the combo itself, and appends the children of the combo to its parent(if it exists). @@ -173,6 +175,7 @@ Ungroup the combo, which deletes the combo itself, and appends the children of t | Name | Type | Required | Description | | ----- | --------------- | -------- | -------------------------------------------------- | | combo | string / ICombo | true | The ID of the item or the combo item to be updated | +| stack | boolean | false | **Supported by v4.7.17 and later versions** Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. | **Usage** @@ -180,6 +183,66 @@ Ungroup the combo, which deletes the combo itself, and appends the children of t graph.uncombo('combo1') ``` +### graph..updateCombos() + +Update the sizes and positions of all the combos according to the bboxes of its children. + +**Usage** + +```javascript +// Update all the combos +graph.updateCombos(); +``` + +### graph.updateCombo(combo) + +Update the positions and sizes of the combo and all of its ancestors. + +**Parameters** + +| Name | Type | Required | Description | +| ----- | --------------- | -------- | ----------------------------------- | +| combo | string / ICombo | true | The ID or the instance of the combo | + +**Usage** + +```javascript +// Update a node's position +const node1 = graph.findById('node1'); +graph.updateItem(node1, { + x: 100, + y: 100, +}); + +// the combo who contains the node +const comboId = node1.getModel().comboId; + +// Update the combo and all its ancestors who contains node1 +graph.updateCombo(comboId); +``` + +### graph.updateComboTree(item, parentId) + +Update the hierarchy structure of the combo, such as move a combo into another one. + +**Parameters** + +| Name | Type | Required | Description | +| --- | --- | --- | --- | +| item | string / INode / ICombo | The ID or the item of the node/combo to be updated | +| parentId | string | undefined | The ID of the new parent combo, undefined means updating the item with no parent | + +**Usage** + +```javascript +// move combo1 out of its parent combo. combo1 will be in the same hierarchy level as its old parent. +graph.updateComboTree('combo1') + +// move combo1 into combo2. combo1 will be the child of combo2. +graph.updateComboTree('combo1', 'combo2') +``` + + ### Comparison for Combo and Hull combo-hull \ No newline at end of file diff --git a/packages/site/docs/api/graphFunc/combo.zh.md b/packages/site/docs/api/graphFunc/combo.zh.md index b4101335ce..15795308cc 100644 --- a/packages/site/docs/api/graphFunc/combo.zh.md +++ b/packages/site/docs/api/graphFunc/combo.zh.md @@ -51,7 +51,7 @@ graph.expandCombo('combo1') graph.collapseExpandCombo('combo1') ``` -### graph.createCombo(combo, elements) +### graph.createCombo(combo, elements, stack) 根据已经存在的节点或 combo 创建新的 combo。 @@ -61,6 +61,7 @@ graph.collapseExpandCombo('combo1') | -------- | -------------------- | -------- | ------------------------------------------ | | combo | string / ComboConfig | true | combo ID 或 Combo 配置 | | elements | string[] | true | 添加到 Combo 中的元素 ID，包括节点和 combo | +| stack | boolean | false | **v4.7.17 及后续版本支持** 操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可 | **用法** @@ -77,7 +78,7 @@ graph.createCombo({ }, ['node1', 'node2', 'combo2']) ``` -### graph.uncombo(combo) +### graph.uncombo(combo, stack) 拆解 Combo，即拆分组/解组。调用后，combo 本身将被删除，而该分组内部的子元素将会成为该分组父分组（若存在）的子元素。 @@ -86,6 +87,7 @@ graph.createCombo({ | 名称 | 类型 | 是否必选 | 描述 | | ----- | --------------- | -------- | ----------------------------- | | combo | string / ICombo | true | 需要被拆解的 Combo item 或 id | +| stack | boolean | false | **v4.7.17 及后续版本支持** 操作是否入 undo & redo 栈，当实例化 Graph 时设置 enableStack 为 true 时，默认情况下会自动入栈，入栈以后，就支持 undo & redo 操作，如果不需要，则设置该参数为 false 即可 | **用法** @@ -93,6 +95,64 @@ graph.createCombo({ graph.uncombo('combo1') ``` + +### graph.updateCombos() + +根据子元素（子节点与子 combo）的 bbox 更新所有 combos 的绘制，包括 combos 的位置和范围。 + +**用法** + +```javascript +// 更新所有 combos +graph.updateCombos(); +``` + +### graph.updateCombo(combo) + +仅更新 combo 及其所有祖先 combo。建议在使用 graph.updateItem 来更新节点位置时，调用该方法以更新节点的祖先 combos。 + +**参数** + +| 名称 | 类型 | 是否必选 | 描述 | +| ----- | --------------- | -------- | ---------------------- | +| combo | string / ICombo | true | Combo ID 或 Combo 实例 | + +**用法** + +```javascript +// 更新了某个节点的位置 +const node1 = graph.findById('node1'); +graph.updateItem(node1, { + x: 100, + y: 100, +}); +const comboId = node1.getModel().comboId; + +// 更新 node1 所属的 combo 及其所有祖先 combo 的大小和位置 +graph.updateCombo(comboId); +``` + +### graph.updateComboTree(item, parentId) + +更新 Combo 结构，例如移动子树等。 + +**参数** + +| 名称 | 类型 | 是否必选 | 描述 | +| -------- | ----------------------- | -------- | ------------------------------------------- | +| item | string / INode / ICombo | true | 需要被更新的 Combo 或 节点 ID | +| parentId | string / undefined | false | 新的父 combo ID，undefined 代表没有父 combo | + +**用法** + +```javascript +// 将 combo1 从父 combo 中移出，完成后同原父 combo 平级 +graph.updateComboTree('combo1') + +// 将 combo1 移动到 Combo2 下面，作为 Combo2 的子元素 +graph.updateComboTree('combo1', 'combo2') +``` + ### 比较 Combo 与 Hull combo-hull diff --git a/packages/site/docs/api/shapeProperties.en.md b/packages/site/docs/api/shapeProperties.en.md index 5ff9537bf4..656ec56e5f 100644 --- a/packages/site/docs/api/shapeProperties.en.md +++ b/packages/site/docs/api/shapeProperties.en.md @@ -15,7 +15,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` @@ -38,7 +38,7 @@ G6 has these shapes: _String_ **required** -Must be assigned in G6 3.3 and later versions. It can be any value you want +Must be assigned in G6 3.3 and later versions. It can be any string you want but must be unique in a custom node/edge/combo type. Otherwise, the style updating might be wrong. ### fill @@ -122,7 +122,7 @@ group.addShape('circle', { r: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); ``` @@ -156,7 +156,7 @@ group.addShape('ellipse', { ry: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ellipse-shape', }); ``` @@ -194,7 +194,7 @@ group.addShape('image', { y: 0, img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); ``` @@ -240,7 +240,7 @@ group.addShape('marker', { r: 10, symbol: 'triangle-down', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'marker-shape', }); @@ -254,7 +254,7 @@ group.addShape('marker', { return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']]; }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'marker-shape', }); ``` @@ -296,7 +296,7 @@ group.addShape('polygon', { ], fill: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'polygon-shape', }); ``` @@ -319,7 +319,7 @@ group.addShape('rect', { stroke: 'black', radius: [2, 4], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` @@ -381,7 +381,7 @@ group.addShape('path', { lineWidth: 8, lineAppendWidth: 5, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); ``` @@ -453,7 +453,7 @@ group.addShape('text', { shadowColor: 'blue', shadowBlur: 10, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); ``` @@ -541,7 +541,7 @@ group.addShape('dom', { `, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'dom-shape', draggable: true, }); diff --git a/packages/site/docs/api/shapeProperties.zh.md b/packages/site/docs/api/shapeProperties.zh.md index 6a399047aa..53b1878fe1 100644 --- a/packages/site/docs/api/shapeProperties.zh.md +++ b/packages/site/docs/api/shapeProperties.zh.md @@ -15,7 +15,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` @@ -38,7 +38,7 @@ G6 支持以下图形： _String_ **required** -图形名称标识，G6 3.3 版本以上必须配置。 +图形名称标识，G6 3.3 版本以上必须配置。**且在统一自定义元素类型中，值必须唯一。**否则可能导致图形样式更新与恢复的错误。 ### fill @@ -122,7 +122,7 @@ group.addShape('circle', { r: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape', }); ``` @@ -156,7 +156,7 @@ group.addShape('ellipse', { ry: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'ellipse-shape', }); ``` @@ -194,7 +194,7 @@ group.addShape('image', { y: 0, img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'image-shape', }); ``` @@ -240,7 +240,7 @@ group.addShape('marker', { r: 10, symbol: 'triangle-down', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'marker-shape', }); @@ -254,7 +254,7 @@ group.addShape('marker', { return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']]; }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'marker-shape', }); ``` @@ -298,7 +298,7 @@ group.addShape('polygon', { ], fill: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'polygon-shape', }); ``` @@ -321,7 +321,7 @@ group.addShape('rect', { stroke: 'black', radius: [2, 4], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` @@ -383,7 +383,7 @@ group.addShape('path', { lineWidth: 8, lineAppendWidth: 5, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'path-shape', }); ``` @@ -455,7 +455,7 @@ group.addShape('text', { shadowColor: 'blue', shadowBlur: 10, }, - // must be assigned in G6 3.3 and later versions. it can be any value you wantPath + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'text-shape', }); ``` @@ -542,7 +542,7 @@ group.addShape('dom', { `, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'dom-shape', draggable: true, }); diff --git a/packages/site/docs/manual/FAQ/faq.en.md b/packages/site/docs/manual/FAQ/faq.en.md index 742504c849..6b0fdb9b9a 100644 --- a/packages/site/docs/manual/FAQ/faq.en.md +++ b/packages/site/docs/manual/FAQ/faq.en.md @@ -64,6 +64,8 @@ group.addShape('text', { stroke: '#fff', lineWidth: 4, } + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type + name: 'text-shape' }) ``` diff --git a/packages/site/docs/manual/FAQ/faq.zh.md b/packages/site/docs/manual/FAQ/faq.zh.md index a9a34b57d0..76a3c8c866 100644 --- a/packages/site/docs/manual/FAQ/faq.zh.md +++ b/packages/site/docs/manual/FAQ/faq.zh.md @@ -62,7 +62,9 @@ group.addShape('text', { // ... other attributes, stroke: '#fff', lineWidth: 4, - } + }, + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 + name: 'text-shape' }) ``` diff --git a/packages/site/docs/manual/FAQ/performance-opt.en.md b/packages/site/docs/manual/FAQ/performance-opt.en.md index ba9f3c950c..a0f19eb255 100644 --- a/packages/site/docs/manual/FAQ/performance-opt.en.md +++ b/packages/site/docs/manual/FAQ/performance-opt.en.md @@ -64,7 +64,7 @@ We suggest: ```javascript const circleShape = group.addShape('circle', { attrs: {}, // if hide the shape by opacity: 0, the shape is rendered. so we suggest to use visible as below - name: 'custom-circle', + name: 'custom-circle', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type visible: false, // hide the shape and it will not be rendered }); circleShape.show(); // show @@ -119,7 +119,7 @@ G6.registerNode('custom-node', { draw: (cfg, group) => { group.addShape('circle', { attrs: {...}, // styles, - name: 'xxx' + name: 'xxx' // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }) // ... }, diff --git a/packages/site/docs/manual/FAQ/performance-opt.zh.md b/packages/site/docs/manual/FAQ/performance-opt.zh.md index a14c83b5f9..2e6b7c0923 100644 --- a/packages/site/docs/manual/FAQ/performance-opt.zh.md +++ b/packages/site/docs/manual/FAQ/performance-opt.zh.md @@ -60,7 +60,7 @@ console.log(nodeShapes[0].attr(), keyShape.attr(), labelShape.attr()); // 获取 ```javascript const circleShape = group.addShape('circle', { attrs: {}, // 在 attrs 中设置 opacity: 0 也能达到看不见的目的，但实际上还是渲染了，更推荐使用 visible 控制 - name: 'custom-circle', + name: 'custom-circle', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 visible: false, // 默认隐藏。注意 visible 字段的位置。visible 为 false 时，图形不会被渲染 }); circleShape.show(); // 显示 @@ -114,7 +114,7 @@ G6.registerNode('custom-node', { draw: (cfg, group) => { group.addShape('circle', { attrs: {...}, // styles, - name: 'xxx' + name: 'xxx' // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }) // ... }, diff --git a/packages/site/docs/manual/FAQ/upgradeGuide.en.md b/packages/site/docs/manual/FAQ/upgradeGuide.en.md index 816fdb3cde..76ca1b9f06 100644 --- a/packages/site/docs/manual/FAQ/upgradeGuide.en.md +++ b/packages/site/docs/manual/FAQ/upgradeGuide.en.md @@ -238,7 +238,7 @@ G6.registerEdge('customNode', { }); ``` -In G6 3.3, we highly recommend you to assign `name` and `draggable` when adding a shape. If not, the shapes will not response some interactive events. Adding these two property as below: +In G6 3.3, we highly recommend you to assign `draggable`, and must assign `name` when adding a shape. **And the value of `name` should be unique in a custom node/edge/combo type.** If not, the shapes will not response some interactive events. Adding these two property as below: ```javascript G6.registerEdge('customNode', { @@ -248,14 +248,14 @@ G6.registerEdge('customNode', { // ... The attributes of the graphic shape }, draggable: true, // Allow this shape to be dragged - name: 'key-shape', // Not unique, you can assign any string value to it + name: 'key-shape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); const circle = group.addShape('circle', { attrs: { // ... The attributes of the graphic shape }, draggable: true, // Allow this shape to be dragged - name: 'circle-shape', // Not unique, you can assign any string value to it + name: 'circle-shape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); return keyShape; }, @@ -280,7 +280,7 @@ G6.registerEdge('customNode', { radius: cfg.size[0], }, draggable: true, - name: 'marker-shape', + name: 'marker-shape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); return keyShape; }, @@ -295,7 +295,7 @@ G6.registerEdge('customNode', { r: cfg.size[0], }, draggable: true, - name: 'marker-shape', + name: 'marker-shape',// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); return keyShape; }, @@ -319,6 +319,7 @@ group.addShape('fan', { clockwise: false, fill: '#b7eb8f', }, + name: 'fan-shape' // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); ``` diff --git a/packages/site/docs/manual/FAQ/upgradeGuide.zh.md b/packages/site/docs/manual/FAQ/upgradeGuide.zh.md index 8a3825bc35..4f6cfee164 100644 --- a/packages/site/docs/manual/FAQ/upgradeGuide.zh.md +++ b/packages/site/docs/manual/FAQ/upgradeGuide.zh.md @@ -242,7 +242,7 @@ G6.registerEdge('customNode', { }); ``` -G6 3.3 中，新增图形时建议指定 `name` 与 `draggable`。若不添加，可能导致节点/边上的非 keyShape 图形不能响应部分事件。添加方式如下： +G6 3.3 中，新增图形时建议指定 `draggable`，必须指定 `name`（**`name` 值在同一元素类型中需要不唯一**）。若不添加，可能导致节点/边上的非 keyShape 图形不能响应部分事件。添加方式如下： ```javascript G6.registerEdge('customNode', { @@ -252,14 +252,14 @@ G6.registerEdge('customNode', { // ... 图形属性 }, draggable: true, // Allow this shape to be dragged - name: 'key-shape', // Not unique, you can assign any string value to it + name: 'key-shape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); const circle = group.addShape('circle', { attrs: { // ... 图形属性 }, draggable: true, // Allow this shape to be dragged - name: 'circle-shape', // Not unique, you can assign any string value to it + name: 'circle-shape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); return keyShape; }, @@ -284,7 +284,7 @@ G6.registerEdge('customNode', { radius: cfg.size[0], }, draggable: true, - name: 'marker-shape', + name: 'marker-shape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); return keyShape; }, @@ -299,7 +299,7 @@ G6.registerEdge('customNode', { r: cfg.size[0], }, draggable: true, - name: 'marker-shape', + name: 'marker-shape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); return keyShape; }, @@ -323,6 +323,7 @@ group.addShape('fan', { clockwise: false, fill: '#b7eb8f', }, + name: 'fan-shape' // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); ``` diff --git a/packages/site/docs/manual/advanced/iconfont.en.md b/packages/site/docs/manual/advanced/iconfont.en.md index 1e02c1822c..ee0442c4d4 100644 --- a/packages/site/docs/manual/advanced/iconfont.en.md +++ b/packages/site/docs/manual/advanced/iconfont.en.md @@ -52,7 +52,7 @@ G6.registerNode('iconfont', { r: cfg.size, ...backgroundStyle, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); } @@ -68,7 +68,7 @@ G6.registerNode('iconfont', { fontSize: cfg.size, ...style, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape1', }); const labelY = backgroundStyle ? cfg.size * 2 : cfg.size; @@ -81,7 +81,7 @@ G6.registerNode('iconfont', { text: cfg.label, ...labelStyle.style, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape2', }); return keyShape; diff --git a/packages/site/docs/manual/advanced/iconfont.zh.md b/packages/site/docs/manual/advanced/iconfont.zh.md index eb9a50592a..b1c629ea37 100644 --- a/packages/site/docs/manual/advanced/iconfont.zh.md +++ b/packages/site/docs/manual/advanced/iconfont.zh.md @@ -52,7 +52,7 @@ G6.registerNode('iconfont', { r: cfg.size, ...backgroundStyle, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape', }); } @@ -68,7 +68,7 @@ G6.registerNode('iconfont', { fontSize: cfg.size, ...style, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'text-shape1', }); const labelY = backgroundStyle ? cfg.size * 2 : cfg.size; @@ -81,7 +81,7 @@ G6.registerNode('iconfont', { text: cfg.label, ...labelStyle.style, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'text-shape1', }); return keyShape; diff --git a/packages/site/docs/manual/cases/edgeBundling.en.md b/packages/site/docs/manual/cases/edgeBundling.en.md index 14f9e1517f..7f9fe5557c 100644 --- a/packages/site/docs/manual/cases/edgeBundling.en.md +++ b/packages/site/docs/manual/cases/edgeBundling.en.md @@ -179,7 +179,7 @@ G6.registerNode( lineWidth: 0, fill: lightOrange, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'in-fan-shape', }); // The outDegree fan @@ -194,7 +194,7 @@ G6.registerNode( lineWidth: 0, fill: lightBlue, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'out-fan-shape', }); // return the keyshape diff --git a/packages/site/docs/manual/cases/edgeBundling.zh.md b/packages/site/docs/manual/cases/edgeBundling.zh.md index 6ba48e6aef..f25d890ea1 100644 --- a/packages/site/docs/manual/cases/edgeBundling.zh.md +++ b/packages/site/docs/manual/cases/edgeBundling.zh.md @@ -177,7 +177,7 @@ G6.registerNode( lineWidth: 0, fill: lightOrange, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'in-fan-shape', }); // 定义代表出度的扇形形状 @@ -192,7 +192,7 @@ G6.registerNode( lineWidth: 0, fill: lightBlue, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'out-fan-shape', }); // 返回 keyshape diff --git a/packages/site/docs/manual/middle/animation.en.md b/packages/site/docs/manual/middle/animation.en.md index 116d9af5a4..449003216e 100644 --- a/packages/site/docs/manual/middle/animation.en.md +++ b/packages/site/docs/manual/middle/animation.en.md @@ -115,7 +115,7 @@ G6.registerNode('background-animate', { fill: cfg.color, opacity: 0.6 }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape1' }); // The second background circle @@ -128,7 +128,7 @@ G6.registerNode('background-animate', { fill: 'blue', opacity: 0.6 }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape2' }); // The third background circle @@ -141,7 +141,7 @@ G6.registerNode('background-animate', { fill: 'green', opacity: 0.6 }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape3' }); group.sort(); // Sort the graphic shapes of the nodes by zIndex @@ -205,7 +205,7 @@ G6.registerNode( height: height, img: cfg.img, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); // Add animation for the image @@ -272,7 +272,7 @@ G6.registerEdge( fill: 'red', r: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); diff --git a/packages/site/docs/manual/middle/animation.zh.md b/packages/site/docs/manual/middle/animation.zh.md index d694498ee5..c13618654f 100644 --- a/packages/site/docs/manual/middle/animation.zh.md +++ b/packages/site/docs/manual/middle/animation.zh.md @@ -118,7 +118,7 @@ G6.registerNode( fill: cfg.color, opacity: 0.6, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape1', }); // 第二个背景圆 @@ -131,7 +131,7 @@ G6.registerNode( fill: 'blue', // 为了显示清晰，随意设置了颜色 opacity: 0.6, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape2', }); // 第三个背景圆 @@ -144,7 +144,7 @@ G6.registerNode( fill: 'green', opacity: 0.6, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape3', }); group.sort(); // 排序，根据 zIndex 排序 @@ -219,7 +219,7 @@ G6.registerNode( height: height, img: cfg.img, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'image-shape', }); // 该图片 shape 的动画 @@ -286,7 +286,7 @@ G6.registerEdge( fill: 'red', r: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape', }); diff --git a/packages/site/docs/manual/middle/elements/combos/built-in/rect.en.md b/packages/site/docs/manual/middle/elements/combos/built-in/rect.en.md index 57f9dda14c..6e4098021b 100644 --- a/packages/site/docs/manual/middle/elements/combos/built-in/rect.en.md +++ b/packages/site/docs/manual/middle/elements/combos/built-in/rect.en.md @@ -105,7 +105,7 @@ graph.render(); ### labelCfg -`labelCfg` is an object to configure the label of the combo. The [Combo Common Label Configurations](/en/docs/manual/middle/elements/combos/defaultCombo/#label-and-labelcfg) are available. Base on the code in [style](#style) section, we add `labelCfg` to `defaultCombo`.
img +`labelCfg` is an object to configure the label of the combo. The [Combo Common Label Configurations](/en/docs/manual/middle/elements/combos/defaultCombo/#label-and-labelcfg) are available. *Supported by v4.7.17 and later versions* And rect type combo has a special value `'top-center'` for `labelCfg.position`, to place the label text on the top center of the rect. Base on the code in [style](#style) section, we add `labelCfg` to `defaultCombo`.
img ```javascript const data = { diff --git a/packages/site/docs/manual/middle/elements/combos/built-in/rect.zh.md b/packages/site/docs/manual/middle/elements/combos/built-in/rect.zh.md index e0c5ae5f56..d8a154d789 100644 --- a/packages/site/docs/manual/middle/elements/combos/built-in/rect.zh.md +++ b/packages/site/docs/manual/middle/elements/combos/built-in/rect.zh.md @@ -105,7 +105,7 @@ graph.render(); ### 标签文本配置  labelCfg -Object 类型。通过 `labelCfg` 配置标签文本。支持 [Combo 通用标签配置](/zh/docs/manual/middle/elements/combos/defaultCombo/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultCombo` 中增加了  `labelCfg`  配置项进行文本的配置，使之达到如下图效果。
img +Object 类型。通过 `labelCfg` 配置标签文本。支持 [Combo 通用标签配置](/zh/docs/manual/middle/elements/combos/defaultCombo/#标签文本-label-及其配置-labelcfg)。**v4.7.17 及后续版本支持** 其中，rect 类型的 Combo 的 `labelCfg.position` 额外支持 `'top-center'`，表示将标签文本绘制在矩形 Combo 的上方中央。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultCombo` 中增加了  `labelCfg`  配置项进行文本的配置，使之达到如下图效果。
img ```javascript const data = { diff --git a/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md b/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md index 5834656b4c..483fde28dd 100644 --- a/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md +++ b/packages/site/docs/manual/middle/elements/combos/custom-combo.en.md @@ -121,7 +121,7 @@ G6.registerCombo( height: style.height, }, draggable: true, - name: 'combo-keyShape', + name: 'combo-keyShape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); // Add the circle on the right group.addShape('circle', { @@ -135,7 +135,7 @@ G6.registerCombo( r: 5, }, draggable: true, - name: 'combo-circle-shape', + name: 'combo-circle-shape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); return rect; }, @@ -156,7 +156,7 @@ G6.registerCombo( ); ``` -Attention: you need to assign `name` and `draggable` for the shapes added in the custom node, where the `name` can be not unique with any value you want. `draggable: true` means that the shape is allowed to response the drag events. Only when `draggable: true`, the interaction behavior `'drag-node'` can be responsed on this shape. In the codes above, if you only assign `draggable: true` to the `keyShape` but not the right circle shape, the drag events will only be responsed on the `keyShape`. +Attention: you need to assign `name` and `draggable` for the shapes added in the custom node, where **the value of `name` must be unique in a custom node/edge/combo type**. `draggable: true` means that the shape is allowed to response the drag events. Only when `draggable: true`, the interaction behavior `'drag-node'` can be responsed on this shape. In the codes above, if you only assign `draggable: true` to the `keyShape` but not the right circle shape, the drag events will only be responsed on the `keyShape`. ### Use the Custom Combo @@ -254,7 +254,7 @@ G6.registerCombo( r: style.r, }, draggable: true, - name: 'combo-keyShape', + name: 'combo-keyShape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); // Add the marker on the bottom const marker = group.addShape('marker', { @@ -268,7 +268,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, - name: 'combo-marker-shape', + name: 'combo-marker-shape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); return circle; diff --git a/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md b/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md index da94206da5..f82f17727c 100644 --- a/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md +++ b/packages/site/docs/manual/middle/elements/combos/custom-combo.zh.md @@ -112,7 +112,7 @@ G6.registerCombo( height: style.height, }, draggable: true, - name: 'combo-keyShape', + name: 'combo-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); // 增加右侧圆 group.addShape('circle', { @@ -126,7 +126,7 @@ G6.registerCombo( r: 5, }, draggable: true, - name: 'combo-circle-shape', + name: 'combo-circle-shape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); return rect; }, @@ -147,7 +147,7 @@ G6.registerCombo( ); ``` -值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。其中，`name` 可以是不唯一的任意值。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-combo'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而右侧圆图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 +值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。**其中，`name` 的值必须在同一元素类型内唯一**。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-combo'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而右侧圆图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 ### 使用自定义 Combo @@ -246,7 +246,7 @@ G6.registerCombo( r: style.r, }, draggable: true, - name: 'combo-keyShape', + name: 'combo-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); // 增加下方 marker const marker = group.addShape('marker', { @@ -260,7 +260,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, - name: 'combo-marker-shape', + name: 'combo-marker-shape',// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); return circle; @@ -286,7 +286,7 @@ G6.registerCombo( ); ``` -值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。其中，`name` 可以是不唯一的任意值。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-combo'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而右侧圆图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 +值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。**其中，`name` 的值必须在同一元素类型内唯一**。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-combo'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而右侧圆图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 ### 使用自定义 Combo diff --git a/packages/site/docs/manual/middle/elements/edges/custom-edge.en.md b/packages/site/docs/manual/middle/elements/edges/custom-edge.en.md index a1e48b9b6c..43af782de1 100644 --- a/packages/site/docs/manual/middle/elements/edges/custom-edge.en.md +++ b/packages/site/docs/manual/middle/elements/edges/custom-edge.en.md @@ -45,7 +45,7 @@ G6.registerEdge('hvh', { ['L', endPoint.x, endPoint.y], ], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); return shape; @@ -168,6 +168,7 @@ G6.registerEdge( x: midPoint.x - 5, y: midPoint.y - 5, }, + name: 'mid-point-edge-rect', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); }, update: undefined, @@ -342,7 +343,7 @@ G6.registerEdge('line-arrow', { // d: -10 }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); return keyShape; diff --git a/packages/site/docs/manual/middle/elements/edges/custom-edge.zh.md b/packages/site/docs/manual/middle/elements/edges/custom-edge.zh.md index 4ba89d7c46..4e1d9d5840 100644 --- a/packages/site/docs/manual/middle/elements/edges/custom-edge.zh.md +++ b/packages/site/docs/manual/middle/elements/edges/custom-edge.zh.md @@ -45,7 +45,7 @@ G6.registerEdge('hvh', { ['L', endPoint.x, endPoint.y], ], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'path-shape', }); return shape; @@ -167,6 +167,7 @@ G6.registerEdge( x: midPoint.x - 5, y: midPoint.y - 5, }, + name: 'mid-point-edge-rect', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); }, update: undefined, @@ -352,7 +353,7 @@ G6.registerEdge('line-arrow', { // ... }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'path-shape', }); return keyShape; diff --git a/packages/site/docs/manual/middle/elements/nodes/custom-node.en.md b/packages/site/docs/manual/middle/elements/nodes/custom-node.en.md index 49e6c65357..2bdd8840b5 100644 --- a/packages/site/docs/manual/middle/elements/nodes/custom-node.en.md +++ b/packages/site/docs/manual/middle/elements/nodes/custom-node.en.md @@ -112,7 +112,7 @@ G6.registerNode('diamond', { path: this.getPath(cfg), // Get the path by cfg stroke: cfg.color, // Apply the color to the stroke. For filling, use fill: cfg.color instead }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', // allow the shape to response the drag events draggable: true @@ -131,7 +131,7 @@ G6.registerNode('diamond', { text: cfg.label, fill: '#666', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', // allow the shape to response the drag events draggable: true @@ -159,7 +159,7 @@ G6.registerNode('diamond', { }); ``` -We have registered a dimond node. Attention: you need to assign `name` and `draggable` for the shapes added in the custom node, where the `name` can be not unique with any value you want. `draggable: true` means that the shape is allowed to response the drag events. Only when `draggable: true`, the interact behavior `'drag-node'` can be responsed on this shape. In the codes above, if you only assign `draggable: true` to the `keyShape` but not the `label`, the drag events will only be responsed on the `keyShape`. +We have registered a dimond node. Attention: you need to assign `name` and `draggable` for the shapes added in the custom node, where **the value of `name` must be unique in a custom node/edge/combo type**. `draggable: true` means that the shape is allowed to response the drag events. Only when `draggable: true`, the interact behavior `'drag-node'` can be responsed on this shape. In the codes above, if you only assign `draggable: true` to the `keyShape` but not the `label`, the drag events will only be responsed on the `keyShape`. The following code uses the diamond node: @@ -257,7 +257,7 @@ G6.registerNode( ...style, }, draggable: true, - name: 'diamond-keyShape', + name: 'diamond-keyShape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type }); // return the keyShape return keyShape; @@ -293,7 +293,7 @@ G6.registerNode( height: height, img: cfg.img, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); // Execute the animation @@ -503,6 +503,7 @@ G6.registerNode( `, }, + name: 'dom-node-keyShape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type draggable: true, }); }, @@ -561,6 +562,7 @@ G6.registerNode( `, }, + name: 'dom-node-keyShape', // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type draggable: true, }); }, diff --git a/packages/site/docs/manual/middle/elements/nodes/custom-node.zh.md b/packages/site/docs/manual/middle/elements/nodes/custom-node.zh.md index 56a95b866f..6373d1c219 100644 --- a/packages/site/docs/manual/middle/elements/nodes/custom-node.zh.md +++ b/packages/site/docs/manual/middle/elements/nodes/custom-node.zh.md @@ -115,7 +115,7 @@ G6.registerNode('diamond', { path: this.getPath(cfg), // 根据配置获取路径 stroke: cfg.color, // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'path-shape', // 设置 draggable 以允许响应鼠标的图拽事件 draggable: true, @@ -135,7 +135,7 @@ G6.registerNode('diamond', { text: cfg.label, fill: '#666', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'text-shape', // 设置 draggable 以允许响应鼠标的图拽事件 draggable: true, @@ -163,7 +163,7 @@ G6.registerNode('diamond', { }); ``` -上面的代码自定义了一个菱形节点。值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。其中，`name` 可以是不唯一的任意值。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-node'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而 label 图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 +上面的代码自定义了一个菱形节点。值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。**其中，`name` 值必须在同元素类型内唯一**。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-node'` 才能在该图形上生效。若上面代码仅在 keyShape 上设置了 `draggable: true`，而 label 图形上没有设置，则鼠标拖拽只能在 keyShape 上响应。 现在，我们使用下面的数据输入就会绘制出 diamond 这个节点。 @@ -263,7 +263,7 @@ G6.registerNode( ...style, }, draggable: true, - name: 'diamond-keyShape', + name: 'diamond-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 }); // 返回 keyShape return keyShape; @@ -299,7 +299,7 @@ G6.registerNode('inner-animate', { height: height, img: cfg.img }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'image-shape' }); // 执行旋转动画 @@ -506,6 +506,7 @@ G6.registerNode( `, }, + name: 'dom-node-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 draggable: true, }); }, @@ -514,7 +515,7 @@ G6.registerNode( ); ``` -上面的代码自定义了一个名为 `'dom-node'` 的带有 DOM 的节点。值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。其中，`name` 可以是不唯一的任意值。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-node'` 才能在该图形上生效。 +上面的代码自定义了一个名为 `'dom-node'` 的带有 DOM 的节点。值得注意的是，G6 3.3 需要用户为自定义节点中的图形设置 `name` 和 `draggable`。**其中，`name` 值必须在同元素类型内唯一**。`draggable` 为 `true` 是表示允许该图形响应鼠标的拖拽事件，只有 `draggable: true` 时，图上的交互行为 `'drag-node'` 才能在该图形上生效。 现在，我们使用下面的数据输入就会绘制出带有 `'dom-node'` 节点的图。 @@ -564,6 +565,7 @@ G6.registerNode( `, }, + name: 'dom-node-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 draggable: true, }); }, diff --git a/packages/site/docs/manual/middle/elements/shape/graphics-group.en.md b/packages/site/docs/manual/middle/elements/shape/graphics-group.en.md index 2a8de9ce91..2a4bc7597b 100644 --- a/packages/site/docs/manual/middle/elements/shape/graphics-group.en.md +++ b/packages/site/docs/manual/middle/elements/shape/graphics-group.en.md @@ -68,7 +68,7 @@ const keyShape = group.addShape('rect', { attrs: { stroke: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` diff --git a/packages/site/docs/manual/middle/elements/shape/graphics-group.zh.md b/packages/site/docs/manual/middle/elements/shape/graphics-group.zh.md index f3ab66134b..7d51d1ceba 100644 --- a/packages/site/docs/manual/middle/elements/shape/graphics-group.zh.md +++ b/packages/site/docs/manual/middle/elements/shape/graphics-group.zh.md @@ -64,7 +64,7 @@ const keyShape = group.addShape('rect', { attrs: { stroke: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` diff --git a/packages/site/docs/manual/middle/elements/shape/shape-and-properties.en.md b/packages/site/docs/manual/middle/elements/shape/shape-and-properties.en.md index e8190cbc69..5e938240bb 100644 --- a/packages/site/docs/manual/middle/elements/shape/shape-and-properties.en.md +++ b/packages/site/docs/manual/middle/elements/shape/shape-and-properties.en.md @@ -43,7 +43,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` @@ -97,7 +97,7 @@ group.addShape('circle', { r: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); ``` @@ -126,7 +126,7 @@ group.addShape('rect', { stroke: 'black', radius: [2, 4], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` @@ -153,7 +153,7 @@ group.addShape('ellipse', { ry: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ellipse-shape', }); ``` @@ -179,7 +179,7 @@ group.addShape('polygon', { ], fill: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'polygon-shape', }); ``` @@ -205,7 +205,7 @@ group.addShape('image', { y: 0, img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); ``` @@ -233,7 +233,7 @@ group.addShape('marker', { return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']]; }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'marker-shape', }); ``` @@ -281,7 +281,7 @@ group.addShape('path', { lineWidth: 8, lineAppendWidth: 5, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); ``` @@ -321,7 +321,7 @@ group.addShape('text', { shadowColor: 'blue', shadowBlur: 10, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); ``` @@ -362,7 +362,7 @@ group.addShape('dom', { `, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'dom-shape', draggable: true, }); diff --git a/packages/site/docs/manual/middle/elements/shape/shape-and-properties.zh.md b/packages/site/docs/manual/middle/elements/shape/shape-and-properties.zh.md index 46aae1789b..8014121366 100644 --- a/packages/site/docs/manual/middle/elements/shape/shape-and-properties.zh.md +++ b/packages/site/docs/manual/middle/elements/shape/shape-and-properties.zh.md @@ -44,7 +44,7 @@ group.addShape('rect', { shadowBlur: 10, opacity: 0.8, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` @@ -98,7 +98,7 @@ group.addShape('circle', { r: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-shape', }); ``` @@ -127,7 +127,7 @@ group.addShape('rect', { stroke: 'black', radius: [2, 4], }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` @@ -154,7 +154,7 @@ group.addShape('ellipse', { ry: 50, fill: 'blue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'ellipse-shape', }); ``` @@ -180,7 +180,7 @@ group.addShape('polygon', { ], fill: 'red', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'polygon-shape', }); ``` @@ -206,7 +206,7 @@ group.addShape('image', { y: 0, img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'image-shape', }); ``` @@ -234,7 +234,7 @@ group.addShape('marker', { return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']]; }, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'marker-shape', }); ``` @@ -282,7 +282,7 @@ group.addShape('path', { lineWidth: 8, lineAppendWidth: 5, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'path-shape', }); ``` @@ -322,7 +322,7 @@ group.addShape('text', { textBaseline: 'middle', fill: '#0000D9', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'text-shape', }); ``` @@ -362,7 +362,7 @@ group.addShape('dom', { `, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'dom-shape', draggable: true, }); diff --git a/packages/site/docs/manual/middle/elements/shape/transform.en.md b/packages/site/docs/manual/middle/elements/shape/transform.en.md index a0694818e1..dff5733b1a 100644 --- a/packages/site/docs/manual/middle/elements/shape/transform.en.md +++ b/packages/site/docs/manual/middle/elements/shape/transform.en.md @@ -24,7 +24,7 @@ const rect = group.addShape('rect', { stroke: '#5B8FF9', lineWidth: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); ``` @@ -119,7 +119,7 @@ G6.registerNode('example', { stroke: '#5B8FF9', lineWidth: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); let matrix = rect.getMatrix(); diff --git a/packages/site/docs/manual/middle/elements/shape/transform.zh.md b/packages/site/docs/manual/middle/elements/shape/transform.zh.md index aaa1e11e72..f714d8aa91 100644 --- a/packages/site/docs/manual/middle/elements/shape/transform.zh.md +++ b/packages/site/docs/manual/middle/elements/shape/transform.zh.md @@ -24,7 +24,7 @@ const rect = group.addShape('rect', { stroke: '#5B8FF9', lineWidth: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', }); ``` @@ -119,7 +119,7 @@ G6.registerNode('example', { stroke: '#5B8FF9', lineWidth: 3, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'rect-shape', draggable: true, }); diff --git a/packages/site/docs/manual/middle/states/bindEvent.en.md b/packages/site/docs/manual/middle/states/bindEvent.en.md index 49150f4268..ec97a7db0e 100644 --- a/packages/site/docs/manual/middle/states/bindEvent.en.md +++ b/packages/site/docs/manual/middle/states/bindEvent.en.md @@ -63,7 +63,7 @@ The events on rendering shapes of Node/Ede/Combo item, e.g. `circle-shape:moused About the shape's 'name': - For buit-in Node/Edge/Combo type, you could know the `name` value by `graph.on('node:click', (ev) => console.log(ev.target.get('name')))` during developping. - - For custom Node/Edge/Combo type, assign `name` which is in the same level of `attrs` for `addShape` when custom items. And we suggest to use unique `name` value in a Node/Edge/Combo type. + - For custom Node/Edge/Combo type, assign `name` which is in the same level of `attrs` for `addShape` when custom items. **The value of `name` must be unique in a Node/Edge/Combo type.** The following demo binds click event listener for all the shapes named `circle-shape`: diff --git a/packages/site/docs/manual/middle/states/bindEvent.zh.md b/packages/site/docs/manual/middle/states/bindEvent.zh.md index d8d86b643b..fbef00bfe3 100644 --- a/packages/site/docs/manual/middle/states/bindEvent.zh.md +++ b/packages/site/docs/manual/middle/states/bindEvent.zh.md @@ -63,7 +63,7 @@ graph.on('combo:click', (ev) => { 关于图形的 name： - 内置节点/边/combo 上每个图形的名称在开发过程中可以通过 `graph.on('node:click', (ev) => console.log(ev.target.get('name')))` 得知； - - 自定义节点/边/combo 中通过 addShape 增加的图形，可添加与 attrs 平级的 name 字段指定任意（同元素中唯一）字符串作为 name。请注意同个元素（节点/边/combo）中不同图形尽量给予不同的 name 值。 + - 自定义节点/边/combo 中通过 addShape 增加的图形，可添加与 attrs 平级的 name 字段指定任意（**注意：同元素类型中需要是唯一的**）字符串作为 name。 下面例子为图中所有 name 为 circle-shape 的图形绑定了 click 事件监听： diff --git a/packages/site/examples/case/graphDemos/demo/christmasBubbles.js b/packages/site/examples/case/graphDemos/demo/christmasBubbles.js index da76c5b1a0..87a0d459a3 100644 --- a/packages/site/examples/case/graphDemos/demo/christmasBubbles.js +++ b/packages/site/examples/case/graphDemos/demo/christmasBubbles.js @@ -124,7 +124,7 @@ G6.registerNode( path, fill: cfg.color || 'steelblue', }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); @@ -140,7 +140,7 @@ G6.registerNode( shadowOffsetX: 0, shadowOffsetY: 30, }, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-shape', }); @@ -318,7 +318,7 @@ G6.registerEdge( }); const keyShape = group.addShape('path', { attrs: shapeStyle, - // must be assigned in G6 3.3 and later versions. it can be any value you want + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); return keyShape; diff --git a/packages/site/examples/case/graphDemos/demo/customFlow.js b/packages/site/examples/case/graphDemos/demo/customFlow.js index 0930e1847e..301f1fb88d 100644 --- a/packages/site/examples/case/graphDemos/demo/customFlow.js +++ b/packages/site/examples/case/graphDemos/demo/customFlow.js @@ -68,6 +68,7 @@ G6.registerNode('customNode', lineWidth: 1, fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-intention', }); // title @@ -81,6 +82,7 @@ G6.registerNode('customNode', fontWeight: 'bold', textAlign: 'center' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-title', }); // time @@ -93,6 +95,7 @@ G6.registerNode('customNode', fill: '#999', textAlign: 'center' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-time', }); if (cfg.expandRange) { @@ -108,6 +111,7 @@ G6.registerNode('customNode', lineWidth: 1, fill: '#FFF', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rectBtn', }); // button text @@ -121,6 +125,7 @@ G6.registerNode('customNode', textAlign: 'center' }, capture: false, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rectBtn-text', }); group.shapeMap['rectBtn-text'] = expandShape; @@ -138,6 +143,7 @@ G6.registerNode('customNode', opacity: 0.5 }, visible: false, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'polygon-shape', }); expandShape.toBack(); diff --git a/packages/site/examples/case/graphDemos/demo/decisionBubbles.js b/packages/site/examples/case/graphDemos/demo/decisionBubbles.js index 1332fb7782..1c048e8387 100644 --- a/packages/site/examples/case/graphDemos/demo/decisionBubbles.js +++ b/packages/site/examples/case/graphDemos/demo/decisionBubbles.js @@ -163,6 +163,7 @@ G6.registerNode( path, fill: cfg.color || 'steelblue', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); @@ -178,6 +179,7 @@ G6.registerNode( shadowOffsetX: 0, shadowOffsetY: 30, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-shape', }); @@ -395,6 +397,7 @@ G6.registerEdge( }); const keyShape = group.addShape('path', { attrs: shapeStyle, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); return keyShape; diff --git a/packages/site/examples/case/graphDemos/demo/edgeBundling.js b/packages/site/examples/case/graphDemos/demo/edgeBundling.js index 928cdf9222..938c304844 100644 --- a/packages/site/examples/case/graphDemos/demo/edgeBundling.js +++ b/packages/site/examples/case/graphDemos/demo/edgeBundling.js @@ -91,6 +91,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7ba82250-8367-4351-82b2-d48 lineWidth: 0, fill: lightOrange, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'fan-in-path', }); @@ -106,6 +107,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/7ba82250-8367-4351-82b2-d48 lineWidth: 0, fill: lightBlue, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'fan-out-path', }); return fanIn; diff --git a/packages/site/examples/case/graphDemos/demo/largeGraph.js b/packages/site/examples/case/graphDemos/demo/largeGraph.js index 580965cd77..6ca1c35025 100644 --- a/packages/site/examples/case/graphDemos/demo/largeGraph.js +++ b/packages/site/examples/case/graphDemos/demo/largeGraph.js @@ -159,6 +159,7 @@ G6.registerNode( lineWidth: 0, radius: (height / 2 || 13) * 1.2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'halo-shape', visible: false, }); @@ -194,6 +195,7 @@ G6.registerNode( radius: height / 2 || 13, lineDash: [2, 2], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'aggregated-node-keyShape', }); @@ -214,6 +216,7 @@ G6.registerNode( opacity: 0.85, fontWeight: 400, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'count-shape', className: 'count-shape', draggable: true, @@ -230,6 +233,7 @@ G6.registerNode( lineWidth: 0.5, stroke: '#FFFFFF', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'typeNode-tag-circle', }); } @@ -296,6 +300,7 @@ G6.registerNode( opacity: 0.9, lineWidth: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'halo-shape', visible: false, }); @@ -311,6 +316,7 @@ G6.registerNode( strokeOpacity: 0.85, lineWidth: 1, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'stroke-shape', visible: false, }); @@ -326,6 +332,7 @@ G6.registerNode( lineWidth: 2, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'aggregated-node-keyShape', }); @@ -360,6 +367,7 @@ G6.registerNode( fontWeight: 400, stroke: global.edge.labelCfg.style.stroke, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', className: 'text-shape', }); @@ -376,6 +384,7 @@ G6.registerNode( lineWidth: 0.5, stroke: '#FFFFFF', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'typeNode-tag-circle', }); } @@ -462,6 +471,7 @@ G6.registerEdge( endArrow, opacity: animateBackOpacity, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back-line', }); back.toBack(); @@ -564,6 +574,7 @@ G6.registerEdge( lineWidth, opacity: animateBackOpacity, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back-line', }); back.toBack(); diff --git a/packages/site/examples/case/others/demo/metroLines.js b/packages/site/examples/case/others/demo/metroLines.js index a10ac7026d..9e7c5caa11 100644 --- a/packages/site/examples/case/others/demo/metroLines.js +++ b/packages/site/examples/case/others/demo/metroLines.js @@ -30,6 +30,7 @@ G6.registerNode( fill: cfg.color || (cfg.style && cfg.style.fill), opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back1-shape', }); const back2 = group.addShape('circle', { @@ -42,6 +43,7 @@ G6.registerNode( // 为了显示清晰，随意设置了颜色 opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back2-shape', }); const back3 = group.addShape('circle', { @@ -53,6 +55,7 @@ G6.registerNode( fill: cfg.color, opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back3-shape', }); group.sort(); // 排序，根据zIndex 排序 @@ -123,6 +126,7 @@ G6.registerEdge( shadowColor: '#fff', shadowBlur: 30, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); circle.animate( diff --git a/packages/site/examples/case/treeDemos/demo/customFlow.js b/packages/site/examples/case/treeDemos/demo/customFlow.js index 4da458a50d..ba8773cd4d 100644 --- a/packages/site/examples/case/treeDemos/demo/customFlow.js +++ b/packages/site/examples/case/treeDemos/demo/customFlow.js @@ -146,6 +146,7 @@ G6.registerNode( lineWidth: 1.2, fillOpacity: 1, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); group.addShape('circle', { @@ -155,6 +156,7 @@ G6.registerNode( r: 3, fill: stroke, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); group.addShape('circle', { @@ -164,6 +166,7 @@ G6.registerNode( r: 3, fill: stroke, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape2', }); return rect; @@ -247,6 +250,7 @@ G6.registerEdge('fund-polyline', { lineWidth: 1.2, endArrow, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); @@ -263,6 +267,7 @@ G6.registerEdge('fund-polyline', { textBaseline: 'middle', fill: '#000000D9', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape-amount', }); // type @@ -276,6 +281,7 @@ G6.registerEdge('fund-polyline', { textBaseline: 'middle', fill: '#000000D9', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape-type', }); // date @@ -290,6 +296,7 @@ G6.registerEdge('fund-polyline', { textBaseline: 'middle', fill: '#000000D9', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape-date', }); return line; diff --git a/packages/site/examples/case/treeDemos/demo/decisionTree.js b/packages/site/examples/case/treeDemos/demo/decisionTree.js index f73c81db7c..4703f9b89b 100644 --- a/packages/site/examples/case/treeDemos/demo/decisionTree.js +++ b/packages/site/examples/case/treeDemos/demo/decisionTree.js @@ -327,6 +327,7 @@ const registerFn = () => { fill: '#000', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-shape', }); @@ -432,6 +433,7 @@ const registerFn = () => { cursor: 'pointer', fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-back', modelId: cfg.id, }); @@ -448,6 +450,7 @@ const registerFn = () => { cursor: 'pointer', fill: 'rgba(0, 0, 0, 0.25)', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-text', modelId: cfg.id, }); @@ -476,6 +479,7 @@ const registerFn = () => { opacity: 0, fill: colors[status] }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-shape', }); maskLabel = group.addShape('text', { @@ -488,6 +492,7 @@ const registerFn = () => { textAlign: 'center', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'mask-label-shape', }); const collapseRect = group.find(ele => ele.get('name') === 'collapse-back'); diff --git a/packages/site/examples/case/treeDemos/demo/indentedTree.js b/packages/site/examples/case/treeDemos/demo/indentedTree.js index 89e61f4219..000407b2ce 100644 --- a/packages/site/examples/case/treeDemos/demo/indentedTree.js +++ b/packages/site/examples/case/treeDemos/demo/indentedTree.js @@ -225,6 +225,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', }, cursor: 'pointer', + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-text-shape', }); }, @@ -240,6 +241,7 @@ G6.registerNode('treeNode', { stroke, lineWidth, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'node-path-shape', }); } @@ -278,6 +280,7 @@ G6.registerNode('treeNode', { cursor: 'pointer', }, // capture: false, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-shape', }); @@ -291,6 +294,7 @@ G6.registerNode('treeNode', { height: 12, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-selected-shape', }); } @@ -319,6 +323,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-text-shape', }); } else { @@ -334,6 +339,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', cursor: 'pointer' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'not-root-text-shape', }); } @@ -362,6 +368,7 @@ G6.registerNode('treeNode', { radius: 6, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-rect-shape', }); group.addShape('text', { @@ -375,6 +382,7 @@ G6.registerNode('treeNode', { textAlign: 'center', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-text-shape', }); } @@ -426,6 +434,7 @@ G6.registerNode('treeNode', { } const keyShape = group.addShape('rect', { attrs: keyShapeAttrs, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-key-shape-rect-shape', }); @@ -500,6 +509,7 @@ G6.registerNode('indentedRoot', { lineWidth: model.selected ? 2 : 0, cursor: 'pointer' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'key-shape' }) @@ -515,6 +525,7 @@ G6.registerNode('indentedRoot', { textBaseline: 'middle', cursor: 'pointer' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-text-shape' }); const textBBox = text.getBBox(); @@ -535,6 +546,7 @@ G6.registerNode('indentedRoot', { if (hasChildren) { const schemaType = model.schemaType; const childCountGroup = group.addGroup({ + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-group' }) childCountGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, clickCircleY, 1]) @@ -551,6 +563,7 @@ G6.registerNode('indentedRoot', { y: -6, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-rect-shape', }); const childCountText = childCountGroup.addShape('text', { @@ -564,6 +577,7 @@ G6.registerNode('indentedRoot', { textBaseline: 'middle', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-text-shape', }); const childHoverIcon = childCountGroup.addShape('path', { @@ -573,6 +587,7 @@ G6.registerNode('indentedRoot', { cursor: 'pointer', path: [['M', -3, 2], ['L', 0, -2], ['L', 3, 2]] }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-expand-icon', capture: false }); @@ -592,6 +607,7 @@ G6.registerNode('indentedRoot', { stroke: model.branchColor, lineWidth: 2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'count-link' }); countLink.toBack(); @@ -621,6 +637,7 @@ G6.registerNode('indentedRoot', { lineWidth: 1, cursor: 'pointer' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'add-child-icon', }); @@ -632,6 +649,7 @@ G6.registerNode('indentedRoot', { stroke: model.branchColor, lineWidth: 2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'add-child-link' }); addChildLink.toBack(); @@ -691,6 +709,7 @@ G6.registerNode('indentedNode', { // 子类数量 icon，绘制圆点在节点正下方 if (tag) { const childCountGroup = group.addGroup({ + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-group' }); childCountGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, clickCircleY, 1]) @@ -707,6 +726,7 @@ G6.registerNode('indentedNode', { y: -6, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-rect-shape', }); const childCountText = childCountGroup.addShape('text', { @@ -720,6 +740,7 @@ G6.registerNode('indentedNode', { textBaseline: 'middle', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-text-shape', }); const childHoverIcon = childCountGroup.addShape('path', { @@ -729,6 +750,7 @@ G6.registerNode('indentedNode', { cursor: 'pointer', path: [['M', -3, 2], ['L', 0, -2], ['L', 3, 2]] }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-expand-icon', capture: false }); @@ -741,6 +763,7 @@ G6.registerNode('indentedNode', { stroke: branchColor, lineWidth: 2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'count-link' }); countLink.toBack(); @@ -771,6 +794,7 @@ G6.registerNode('indentedNode', { lineWidth: 1, cursor: 'pointer' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'add-child-icon', }); addChildIcon.hide(); @@ -782,6 +806,7 @@ G6.registerNode('indentedNode', { stroke: branchColor, lineWidth: 2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'add-child-link' }); addChildLink.toBack(); @@ -800,6 +825,7 @@ G6.registerNode('indentedNode', { cursor: 'pointer' }, // capture: false, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-shape', draggable: true }); @@ -818,6 +844,7 @@ G6.registerNode('indentedNode', { fontFamily: 'PingFangSC-Regular', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'not-root-text-shape', draggable: true }); @@ -858,6 +885,7 @@ G6.registerNode('indentedNode', { const keyShape = group.addShape('rect', { attrs: keyShapeAttrs, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-key-shape-rect-shape', }); @@ -1233,6 +1261,7 @@ G6.registerBehavior('drag-branch', { y: cy, ...attrs, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-delegate-shape', }); this.delegateRect.set('capture', false); diff --git a/packages/site/examples/case/treeDemos/demo/knowledgeTreeGraph.js b/packages/site/examples/case/treeDemos/demo/knowledgeTreeGraph.js index 720fa2e439..3eb05373cc 100644 --- a/packages/site/examples/case/treeDemos/demo/knowledgeTreeGraph.js +++ b/packages/site/examples/case/treeDemos/demo/knowledgeTreeGraph.js @@ -42,6 +42,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', }, cursor: 'pointer', + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-text-shape', }); const textWidth = text.getBBox().width; @@ -69,6 +70,7 @@ G6.registerNode('treeNode', { } const keyShape = group.addShape('rect', { attrs: keyShapeAttrs, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-key-shape-rect-shape', }); @@ -83,6 +85,7 @@ G6.registerNode('treeNode', { stroke: '#AAB7C4', lineWidth: 1, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'node-path-shape', }); } @@ -101,6 +104,7 @@ G6.registerNode('treeNode', { fill: '#e8f7ff', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-shape', }); } @@ -124,6 +128,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'root-text-shape', }); } else { @@ -139,6 +144,7 @@ G6.registerNode('treeNode', { fontFamily: 'PingFangSC-Regular', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'not-root-text-shape', }); } @@ -160,6 +166,7 @@ G6.registerNode('treeNode', { radius: 6, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-rect-shape', }); group.addShape('text', { @@ -173,6 +180,7 @@ G6.registerNode('treeNode', { textAlign: 'center', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'child-count-text-shape', }); } @@ -204,6 +212,7 @@ G6.registerEdge('smooth', { stroke: '#AAB7C4', path, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'smooth-path-shape', }); return shape; diff --git a/packages/site/examples/interaction/combo/demo/cCircle.js b/packages/site/examples/interaction/combo/demo/cCircle.js index 85521b301b..1cafb2e57f 100644 --- a/packages/site/examples/interaction/combo/demo/cCircle.js +++ b/packages/site/examples/interaction/combo/demo/cCircle.js @@ -44,6 +44,7 @@ G6.registerCombo( r: style.r, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-keyShape', }); // Add the marker on the bottom @@ -58,6 +59,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-marker-shape', }); diff --git a/packages/site/examples/interaction/combo/demo/cRect.js b/packages/site/examples/interaction/combo/demo/cRect.js index b89ab7ce54..4ebcc1bebb 100644 --- a/packages/site/examples/interaction/combo/demo/cRect.js +++ b/packages/site/examples/interaction/combo/demo/cRect.js @@ -47,6 +47,7 @@ G6.registerCombo( height: style.height, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-keyShape', }); // Add the circle on the right @@ -62,6 +63,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-marker-shape', }); return rect; diff --git a/packages/site/examples/interaction/createEdge/demo/click-link-point.js b/packages/site/examples/interaction/createEdge/demo/click-link-point.js index cde4dd958c..80cc1247c9 100644 --- a/packages/site/examples/interaction/createEdge/demo/click-link-point.js +++ b/packages/site/examples/interaction/createEdge/demo/click-link-point.js @@ -116,6 +116,7 @@ G6.registerNode('rect-node', { fill: '#fff', stroke: '#5F95FF' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point') anchorPointIdx: i, // flag the idx of the anchor-point circle links: 0, // cache the number of edges connected to this shape diff --git a/packages/site/examples/interaction/createEdge/demo/drag-link-point.js b/packages/site/examples/interaction/createEdge/demo/drag-link-point.js index 710d3f54f8..262ec86193 100644 --- a/packages/site/examples/interaction/createEdge/demo/drag-link-point.js +++ b/packages/site/examples/interaction/createEdge/demo/drag-link-point.js @@ -116,6 +116,7 @@ G6.registerNode('rect-node', { fill: '#fff', stroke: '#5F95FF' }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point') anchorPointIdx: i, // flag the idx of the anchor-point circle links: 0, // cache the number of edges connected to this shape diff --git a/packages/site/examples/interaction/pagination/demo/dagrePagination.js b/packages/site/examples/interaction/pagination/demo/dagrePagination.js index 0b74d6be9b..0fa0a4ea8d 100644 --- a/packages/site/examples/interaction/pagination/demo/dagrePagination.js +++ b/packages/site/examples/interaction/pagination/demo/dagrePagination.js @@ -335,6 +335,7 @@ const drawIcons = (nodeId) => { opacity: 0, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `pre-icon`, levelIdx, }); @@ -348,6 +349,7 @@ const drawIcons = (nodeId) => { opacity: 0, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `next-icon`, levelIdx, }); diff --git a/packages/site/examples/interaction/pagination/demo/treePagination.js b/packages/site/examples/interaction/pagination/demo/treePagination.js index c812f19726..a9de5ba820 100644 --- a/packages/site/examples/interaction/pagination/demo/treePagination.js +++ b/packages/site/examples/interaction/pagination/demo/treePagination.js @@ -135,6 +135,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/a3ae9b40-ff40-434a-894f-b10c535f opacity: 0, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `pre-icon`, subtreeID: model.id, }); @@ -148,6 +149,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/a3ae9b40-ff40-434a-894f-b10c535f opacity: 0, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `next-icon`, subtreeID: model.id, }); diff --git a/packages/site/examples/interaction/partialResponse/demo/partialNode.js b/packages/site/examples/interaction/partialResponse/demo/partialNode.js index 46ee96707f..1bf310ed09 100644 --- a/packages/site/examples/interaction/partialResponse/demo/partialNode.js +++ b/packages/site/examples/interaction/partialResponse/demo/partialNode.js @@ -20,6 +20,7 @@ G6.registerNode( }); const shape = group.addShape(shapeType, { attrs: style, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'key-shape', }); // 绘制节点里面的小圆。点击这个小圆会显示tooltip @@ -31,6 +32,7 @@ G6.registerNode( fill: '#096dd9', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); return shape; diff --git a/packages/site/examples/item/customCombo/demo/cCircle.js b/packages/site/examples/item/customCombo/demo/cCircle.js index 2a144a56b6..a4eea78e31 100644 --- a/packages/site/examples/item/customCombo/demo/cCircle.js +++ b/packages/site/examples/item/customCombo/demo/cCircle.js @@ -44,6 +44,7 @@ G6.registerCombo( r: style.r, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-keyShape', }); // Add the marker on the bottom @@ -58,6 +59,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-marker-shape', }); diff --git a/packages/site/examples/item/customCombo/demo/cRect.js b/packages/site/examples/item/customCombo/demo/cRect.js index 6113247950..bf68c5c7ea 100644 --- a/packages/site/examples/item/customCombo/demo/cRect.js +++ b/packages/site/examples/item/customCombo/demo/cRect.js @@ -47,6 +47,7 @@ G6.registerCombo( height: style.height, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-keyShape', }); // Add the circle on the right @@ -62,6 +63,7 @@ G6.registerCombo( symbol: collapseIcon, }, draggable: true, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-marker-shape', }); return rect; diff --git a/packages/site/examples/item/customEdge/demo/customPolyline2.js b/packages/site/examples/item/customEdge/demo/customPolyline2.js index 2d0a0430f6..55e3ce4a43 100644 --- a/packages/site/examples/item/customEdge/demo/customPolyline2.js +++ b/packages/site/examples/item/customEdge/demo/customPolyline2.js @@ -34,6 +34,7 @@ G6.registerEdge('line-arrow', { endArrow, }, className: 'edge-shape', + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'edge-shape', }); return keyShape; diff --git a/packages/site/examples/item/customEdge/demo/edgeMulLabel.js b/packages/site/examples/item/customEdge/demo/edgeMulLabel.js index 1802834621..3fe59c4682 100644 --- a/packages/site/examples/item/customEdge/demo/edgeMulLabel.js +++ b/packages/site/examples/item/customEdge/demo/edgeMulLabel.js @@ -26,6 +26,7 @@ G6.registerEdge('multipleLabelsEdge', { ['L', endPoint.x, endPoint.y], ], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); if (cfg.label && cfg.label.length) { @@ -39,6 +40,7 @@ G6.registerEdge('multipleLabelsEdge', { x: startPoint.x, y: startPoint.y - 10, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'left-text-shape', }); if (cfg.label.length > 1) { @@ -52,6 +54,7 @@ G6.registerEdge('multipleLabelsEdge', { x: endPoint.x, y: endPoint.y - 10, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'right-text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/areaChart.js b/packages/site/examples/item/customNode/demo/areaChart.js index 3d4c64046a..77b1665d43 100644 --- a/packages/site/examples/item/customNode/demo/areaChart.js +++ b/packages/site/examples/item/customNode/demo/areaChart.js @@ -25,6 +25,7 @@ G6.registerNode('area', { stroke: '#bae7ff', lineDash: [4, 4], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); } @@ -80,6 +81,7 @@ G6.registerNode('area', { stroke: strokeColors[index], fill: fillColors[index], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape1', }); }); @@ -99,6 +101,7 @@ G6.registerNode('area', { lineDash: [4, 4], stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape2', }); nowAngle2 += everyIncAngleCat; @@ -114,6 +117,7 @@ G6.registerNode('area', { fill: cfg.centerColor, stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); @@ -129,6 +133,7 @@ G6.registerNode('area', { fill: 'white', fontStyle: 'bold', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/barChart.js b/packages/site/examples/item/customNode/demo/barChart.js index b984260ada..676784225c 100644 --- a/packages/site/examples/item/customNode/demo/barChart.js +++ b/packages/site/examples/item/customNode/demo/barChart.js @@ -55,6 +55,7 @@ G6.registerNode('circleBar', { stroke: 'darkgray', fill: cat.color, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); // behavior animation @@ -92,6 +93,7 @@ G6.registerNode('circleBar', { fill: cfg.centerColor, stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); if (cfg.label) { @@ -105,6 +107,7 @@ G6.registerNode('circleBar', { fill: 'white', fontStyle: 'bold', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/card.js b/packages/site/examples/item/customNode/demo/card.js index 0a885e40ef..dd52f7a9cb 100644 --- a/packages/site/examples/item/customNode/demo/card.js +++ b/packages/site/examples/item/customNode/demo/card.js @@ -64,6 +64,7 @@ const nodeBasicMethod = { width: w, height: h, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'big-rect-shape', }); if (!isRoot) { @@ -75,6 +76,7 @@ const nodeBasicMethod = { r: 6, fill: config.basicColor, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'left-dot-shape', }); } @@ -90,6 +92,7 @@ const nodeBasicMethod = { radius: 2, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); @@ -103,6 +106,7 @@ const nodeBasicMethod = { fill: config.basicColor, radius: 1.5, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'left-border-shape', }); return container; @@ -118,6 +122,7 @@ const nodeBasicMethod = { opacity: 0, zIndex: -2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-icon-bg', }); group.addShape('marker', { @@ -131,6 +136,7 @@ const nodeBasicMethod = { lineWidth: 1, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-icon', }); }, @@ -237,6 +243,7 @@ G6.registerNode('card-node', { textBaseline: 'middle', fill: 'rgba(0,0,0,0.65)', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'type-text-shape', }); } @@ -251,6 +258,7 @@ G6.registerNode('card-node', { radius: 2, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-container-shape', }); @@ -266,6 +274,7 @@ G6.registerNode('card-node', { fill: nodeError ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)', cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-text-shape', }); @@ -294,6 +303,7 @@ G6.registerNode('card-node', { fill: '#fff', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-box', }); @@ -307,6 +317,7 @@ G6.registerNode('card-node', { fill: '#E3E6E8', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-cp-line', }); /* copyIpBG */ @@ -320,6 +331,7 @@ G6.registerNode('card-node', { cursor: 'pointer', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-cp-bg', }); /* copyIpIcon */ @@ -333,6 +345,7 @@ G6.registerNode('card-node', { cursor: 'pointer', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-cp-icon', }); /* a transparent rect on the icon area for click listener */ @@ -346,6 +359,7 @@ G6.registerNode('card-node', { cursor: 'pointer', opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'ip-cp-box', tooltip: 'Copy the IP', }); @@ -366,6 +380,7 @@ G6.registerNode('card-node', { fill: config.fontColor, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-text-shape', }); @@ -381,6 +396,7 @@ G6.registerNode('card-node', { fill: config.fontColor, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'bottom-text-shape', }); @@ -393,6 +409,7 @@ G6.registerNode('card-node', { fill: '#000', fontSize: 18, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'error-text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/cardNode.js b/packages/site/examples/item/customNode/demo/cardNode.js index a717aadcc7..d0ab1a3745 100644 --- a/packages/site/examples/item/customNode/demo/cardNode.js +++ b/packages/site/examples/item/customNode/demo/cardNode.js @@ -20,6 +20,7 @@ G6.registerNode( stroke: color, radius: r, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-box', draggable: true, }); @@ -33,6 +34,7 @@ G6.registerNode( fill: color, radius: [r, r, 0, 0], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'title-box', draggable: true, }); @@ -47,6 +49,7 @@ G6.registerNode( cursor: 'pointer', img: ICON_MAP[cfg.nodeType || 'app'], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'node-icon', }); @@ -60,6 +63,7 @@ G6.registerNode( text: cfg.title, fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'title', }); @@ -74,6 +78,7 @@ G6.registerNode( stroke: '#666', lineWidth: 1, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-icon', }); } @@ -90,6 +95,7 @@ G6.registerNode( text: item.title, fill: 'rgba(0,0,0, 0.4)', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `index-title-${index}`, }); @@ -103,6 +109,7 @@ G6.registerNode( text: item.value, fill: '#595959', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `index-title-${index}`, }); }); diff --git a/packages/site/examples/item/customNode/demo/lineChart.js b/packages/site/examples/item/customNode/demo/lineChart.js index 03e82f9161..1cff970676 100644 --- a/packages/site/examples/item/customNode/demo/lineChart.js +++ b/packages/site/examples/item/customNode/demo/lineChart.js @@ -24,6 +24,7 @@ G6.registerNode('circleLine', { stroke: '#bae7ff', lineDash: [4, 4], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); } @@ -56,6 +57,7 @@ G6.registerNode('circleLine', { ], stroke: cat.color, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); @@ -71,6 +73,7 @@ G6.registerNode('circleLine', { stroke: cat.color, cursor: 'pointer', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); // 加上交互动画 @@ -111,6 +114,7 @@ G6.registerNode('circleLine', { fill: cfg.centerColor, stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); if (cfg.label) { @@ -124,6 +128,7 @@ G6.registerNode('circleLine', { fill: 'white', fontStyle: 'bold', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/list.js b/packages/site/examples/item/customNode/demo/list.js index e175771114..a051faf608 100644 --- a/packages/site/examples/item/customNode/demo/list.js +++ b/packages/site/examples/item/customNode/demo/list.js @@ -20,6 +20,7 @@ G6.registerNode('expandNode', { height: 50, fill: '#C6E5FF', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'key-rect-shape', }); @@ -32,6 +33,7 @@ G6.registerNode('expandNode', { x: 10, y: 32, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-text-shape', }); @@ -46,6 +48,7 @@ G6.registerNode('expandNode', { width: 50, height: 50, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); @@ -59,6 +62,7 @@ G6.registerNode('expandNode', { textBaseline: 'middle', className: 'sub-group-text', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'sub-text-shape1', }); @@ -73,6 +77,7 @@ G6.registerNode('expandNode', { textAlign: 'left', className: 'sub-group-text', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'name-text-shape2', }); }); @@ -89,6 +94,7 @@ G6.registerNode('expandNode', { x: 70, y: 30, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'list-rect-shape1', }); @@ -102,6 +108,7 @@ G6.registerNode('expandNode', { x: 80, y: 40 * index + 40, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'list-rect-shape2', }); let count = 0; @@ -117,6 +124,7 @@ G6.registerNode('expandNode', { textBaseline: 'middle', textAlign: 'left', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); count++; diff --git a/packages/site/examples/item/customNode/demo/pieChart.js b/packages/site/examples/item/customNode/demo/pieChart.js index bc8f78359a..15ead6fda9 100644 --- a/packages/site/examples/item/customNode/demo/pieChart.js +++ b/packages/site/examples/item/customNode/demo/pieChart.js @@ -33,6 +33,7 @@ G6.registerNode('pie-node', { lineWidth: 0, fill: lightOrange, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'in-fan-shape', }); // draw the fan shape @@ -47,6 +48,7 @@ G6.registerNode('pie-node', { lineWidth: 0, fill: lightBlue, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'out-fan-shape', }); // 返回 keyshape diff --git a/packages/site/examples/item/customNode/demo/pointChart.js b/packages/site/examples/item/customNode/demo/pointChart.js index 357db43801..65ccb19970 100644 --- a/packages/site/examples/item/customNode/demo/pointChart.js +++ b/packages/site/examples/item/customNode/demo/pointChart.js @@ -18,6 +18,7 @@ G6.registerNode('justPoints', { stroke: '#5ad8a6', lineDash: [4, 4], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); } @@ -73,6 +74,7 @@ G6.registerNode('justPoints', { lineDash: [4, 4], stroke: '#5ad8a6', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', }); nowAngle2 += everyIncAngleCat; @@ -86,6 +88,7 @@ G6.registerNode('justPoints', { fill: cfg.centerColor, stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); @@ -100,6 +103,7 @@ G6.registerNode('justPoints', { fill: '#fff', fontStyle: 'bold', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); } diff --git a/packages/site/examples/item/customNode/demo/scrollNode.js b/packages/site/examples/item/customNode/demo/scrollNode.js index 27aa7a9ddc..1bb487fa1e 100644 --- a/packages/site/examples/item/customNode/demo/scrollNode.js +++ b/packages/site/examples/item/customNode/demo/scrollNode.js @@ -277,6 +277,7 @@ registerEdge("dice-er-edge", { ], endArrow: true, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "path-shape", }); } else if (!sourceNode.collapsed) { @@ -301,6 +302,7 @@ registerEdge("dice-er-edge", { ], endArrow: true, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "path-shape", }); } @@ -404,6 +406,7 @@ registerNode("dice-er-box", { radius: [0, 0, boxStyle.radius, boxStyle.radius], cursor: "pointer", }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: collapsed ? "expand" : "collapse", }); @@ -417,6 +420,7 @@ registerNode("dice-er-box", { radius: [0, 0, boxStyle.radius, boxStyle.radius], cursor: "pointer", }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: collapsed ? "expand" : "collapse", }); @@ -518,6 +522,7 @@ registerNode("dice-er-box", { lineWidth: 1, cursor: "pointer", }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `item-${Math.floor(startIndex) + i}-content`, draggable: true, }); @@ -561,6 +566,7 @@ registerNode("dice-er-box", { fontWeight: isSelected ? 500 : 100, cursor: "pointer", }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `item-${Math.floor(startIndex) + i}`, }); }); diff --git a/packages/site/examples/item/customNode/demo/stackChart.js b/packages/site/examples/item/customNode/demo/stackChart.js index ab40051806..396ae15a3e 100644 --- a/packages/site/examples/item/customNode/demo/stackChart.js +++ b/packages/site/examples/item/customNode/demo/stackChart.js @@ -51,6 +51,7 @@ G6.registerNode('stacked-bar-node', { stroke: 'darkgray', fill: cat.color, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape1', }); nowStartR = nowStartR + baseIncR + 2; @@ -70,6 +71,7 @@ G6.registerNode('stacked-bar-node', { stroke: 'darkgray', fill: cat.color, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape2', }); } @@ -86,6 +88,7 @@ G6.registerNode('stacked-bar-node', { fill: cfg.centerColor, stroke: 'darkgray', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); if (cfg.label) { @@ -99,6 +102,7 @@ G6.registerNode('stacked-bar-node', { fill: 'white', fontStyle: 'bold', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); } diff --git a/packages/site/examples/item/label/demo/copyLabel.js b/packages/site/examples/item/label/demo/copyLabel.js index 66383fb441..72c265c670 100644 --- a/packages/site/examples/item/label/demo/copyLabel.js +++ b/packages/site/examples/item/label/demo/copyLabel.js @@ -110,6 +110,7 @@ G6.registerNode( // 上部文字区域 const topGroup = group.addGroup({ + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "top-group" }); @@ -137,6 +138,7 @@ G6.registerNode( shadowColor: fontColor, fill: fontColor }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "top-text" }); @@ -150,11 +152,13 @@ G6.registerNode( opacity: 0, cursor: "pointer" }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "top-copy-img" }); // 下部文字区域 const bottomGroup = group.addGroup({ + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "bottom-group" }); @@ -169,6 +173,7 @@ G6.registerNode( shadowColor: fontColor, fill: fontColor }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "bottom-text" }); @@ -182,6 +187,7 @@ G6.registerNode( opacity: 0, cursor: "pointer" }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: "bottom-copy-img" }); diff --git a/packages/site/examples/item/label/demo/labelLen.js b/packages/site/examples/item/label/demo/labelLen.js index 0fba819359..ca13468ca3 100644 --- a/packages/site/examples/item/label/demo/labelLen.js +++ b/packages/site/examples/item/label/demo/labelLen.js @@ -8,6 +8,7 @@ * text: fittingString(cfg.label, 50, 12), * ... * }, + * // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type * name: 'text-shape' * }) * diff --git a/packages/site/examples/scatter/edge/demo/pointInLine.js b/packages/site/examples/scatter/edge/demo/pointInLine.js index 34538fed22..6cf312d8a4 100644 --- a/packages/site/examples/scatter/edge/demo/pointInLine.js +++ b/packages/site/examples/scatter/edge/demo/pointInLine.js @@ -16,6 +16,7 @@ G6.registerEdge( fill: '#1890ff', r: 3, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); diff --git a/packages/site/examples/scatter/node/demo/node.js b/packages/site/examples/scatter/node/demo/node.js index c459d51d8f..1f1b66b52c 100644 --- a/packages/site/examples/scatter/node/demo/node.js +++ b/packages/site/examples/scatter/node/demo/node.js @@ -106,6 +106,7 @@ G6.registerNode( fill: cfg.color, opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back1-shape', }); const back2 = group.addShape('circle', { @@ -117,6 +118,7 @@ G6.registerNode( fill: cfg.color, opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back2-shape', }); const back3 = group.addShape('circle', { @@ -128,6 +130,7 @@ G6.registerNode( fill: cfg.color, opacity: 0.6, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'back3-shape', }); group.sort(); // Sort according to the zIndex @@ -191,6 +194,7 @@ G6.registerNode( height, img: cfg.img, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); image.animate( diff --git a/packages/site/examples/scatter/stateChange/demo/hover.js b/packages/site/examples/scatter/stateChange/demo/hover.js index 0a66c93983..fac87a852b 100644 --- a/packages/site/examples/scatter/stateChange/demo/hover.js +++ b/packages/site/examples/scatter/stateChange/demo/hover.js @@ -46,6 +46,7 @@ G6.registerNode( r: 5, fill: cfg.color || '#5B8FF9', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', }); }, @@ -73,6 +74,7 @@ G6.registerNode( fill: 'gray', opacity: 0.4, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape1', }); group.addShape('circle', { @@ -84,6 +86,7 @@ G6.registerNode( fill: 'gray', opacity: 0.2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape2', }); group.sort(); diff --git a/packages/site/examples/tool/tooltip/demo/tooltipLocalCustom.js b/packages/site/examples/tool/tooltip/demo/tooltipLocalCustom.js index b34d12b90c..1210d0a68f 100644 --- a/packages/site/examples/tool/tooltip/demo/tooltipLocalCustom.js +++ b/packages/site/examples/tool/tooltip/demo/tooltipLocalCustom.js @@ -25,6 +25,7 @@ G6.registerNode( height: cfg.size[1], ...cfg.style, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); const responseRect = group.addShape('rect', { @@ -37,6 +38,7 @@ G6.registerNode( stroke: cfg.style.stroke, lineWidth: 1, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'tooltip-response-shape', }); const responseText = group.addShape('text', { @@ -47,6 +49,7 @@ G6.registerNode( y: -cfg.size[1] / 2 + 10, textBaseline: 'top', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'tooltip-response-text-shape', }); const textBBox = responseText.getBBox(); diff --git a/packages/site/examples/tree/compactBox/demo/compactBoxLeftAlign.js b/packages/site/examples/tree/compactBox/demo/compactBoxLeftAlign.js index 91edf1336d..6942fda558 100644 --- a/packages/site/examples/tree/compactBox/demo/compactBoxLeftAlign.js +++ b/packages/site/examples/tree/compactBox/demo/compactBoxLeftAlign.js @@ -15,6 +15,7 @@ G6.registerNode('crect', { lineWidth: 0, opacity: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', draggable: true, }); @@ -26,6 +27,7 @@ G6.registerNode('crect', { x: 0, y: 0, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'label-shape', draggable: true, }); @@ -37,6 +39,7 @@ G6.registerNode('crect', { r: 5, stroke: '#000', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'circle-shape', draggable: true, }); @@ -53,6 +56,7 @@ G6.registerNode('crect', { ['L', bboxWidth, 0], ], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'path-shape', draggable: true, }); diff --git a/packages/site/examples/tree/customItemTree/demo/customEdgeTree.js b/packages/site/examples/tree/customItemTree/demo/customEdgeTree.js index ea62004c2c..683a15d1f0 100644 --- a/packages/site/examples/tree/customItemTree/demo/customEdgeTree.js +++ b/packages/site/examples/tree/customItemTree/demo/customEdgeTree.js @@ -153,6 +153,7 @@ G6.registerNode( img || 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'image-shape', }); } @@ -167,6 +168,7 @@ G6.registerNode( cursor: 'pointer', symbol: EXPAND_ICON, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'add-item', }); @@ -179,6 +181,7 @@ G6.registerNode( cursor: 'pointer', symbol: COLLAPSE_ICON, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'remove-item', }); diff --git a/packages/site/examples/tree/customItemTree/demo/customTree.js b/packages/site/examples/tree/customItemTree/demo/customTree.js index 93d813a3cf..17187a688c 100644 --- a/packages/site/examples/tree/customItemTree/demo/customTree.js +++ b/packages/site/examples/tree/customItemTree/demo/customTree.js @@ -13,6 +13,7 @@ G6.registerNode( width:1, height: 1 }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'rect-shape', }); const content = cfg.name.replace(/(.{19})/g, '$1\n'); @@ -25,6 +26,7 @@ G6.registerNode( textBaseline: 'middle', fill: '#666', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); const bbox = text.getBBox(); @@ -49,6 +51,7 @@ G6.registerNode( stroke: '#666', lineWidth: 2, }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-icon', }); } diff --git a/packages/site/examples/tree/indented/demo/filesystem.js b/packages/site/examples/tree/indented/demo/filesystem.js index 376326176e..d2d048ef95 100644 --- a/packages/site/examples/tree/indented/demo/filesystem.js +++ b/packages/site/examples/tree/indented/demo/filesystem.js @@ -31,6 +31,7 @@ G6.registerNode('file-node', { r: 4, fill: '#666', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'marker-shape', }); } else { @@ -50,6 +51,7 @@ G6.registerNode('file-node', { 'Arial, sans-serif' : 'Arial, sans-serif', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'text-shape', }); const bbox = shape.getBBox(); diff --git a/packages/site/examples/tree/indented/demo/intendAlignTop.js b/packages/site/examples/tree/indented/demo/intendAlignTop.js index 86cfc9704c..88b78b6894 100644 --- a/packages/site/examples/tree/indented/demo/intendAlignTop.js +++ b/packages/site/examples/tree/indented/demo/intendAlignTop.js @@ -16,6 +16,7 @@ G6.registerNode('card-node', { radius: r, fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'main-box', draggable: true, }); @@ -29,6 +30,7 @@ G6.registerNode('card-node', { fill: color, radius: [r, r, 0, 0], }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'title-box', draggable: true, }); @@ -43,6 +45,7 @@ G6.registerNode('card-node', { text: cfg.id, fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'title', }); cfg.children && @@ -57,6 +60,7 @@ G6.registerNode('card-node', { lineWidth: 1, fill: '#fff', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'collapse-icon', }); group.addShape('text', { @@ -68,6 +72,7 @@ G6.registerNode('card-node', { text: 'description', fill: 'rgba(0,0,0, 1)', }, + // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: `description`, }); return shape; diff --git a/packages/site/package.json b/packages/site/package.json index 5023080512..8c1b5cffb9 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@antv/g6-site", - "version": "4.7.16", + "version": "4.7.17", "description": "G6 sites deployed on gh-pages", "keywords": [ "antv",