mirror of
https://gitee.com/antv/g6.git
synced 2024-12-04 20:59:15 +08:00
fix: expandCombo and the edges of the children are not refreshed, clo… (#4132)
* fix: expandCombo and the edges of the children are not refreshed, closes: #3250; * fix: edge update with destroyed end items, closes: #3925 * 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; * docs: update docs about shape name * docs: update CHANGELOG
This commit is contained in:
Yanyan Wang
GitHub
parent
149de8effc
commit
98b92a9a9f
12
CHANGELOG.md
12
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
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
};
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -470,8 +470,10 @@ export default class ItemController {
|
||||
combo = graph.findById(combo) as ICombo;
|
||||
}
|
||||
const children = (combo as ICombo).getChildren();
|
||||
const edgeSet = new Set<IEdge>();
|
||||
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);
|
||||
|
||||
@ -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<string>(children);
|
||||
const childrenIdsSet = new Set<string>(childrenIds);
|
||||
const pulledComboTreesById = new Map<string, ComboTree>();
|
||||
|
||||
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<ComboTree>(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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
|
||||
/**
|
||||
* 设置元素状态
|
||||
|
||||
@ -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<number>));
|
||||
size.width += (padding[1] + padding[3]) || padding[1] * 2;
|
||||
size.height += (padding[0] + padding[2]) || padding[0] * 2;
|
||||
}
|
||||
|
||||
@ -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') 中的值
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*mD9LQamLud8AAAAAAAAAAAAAARQnAQ' alt='combo-hull' width='750'/>
|
||||
@ -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
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*08b2SZIUX1oAAAAAAAAAAAAAARQnAQ' alt='combo-hull' width='750'/>
|
||||
|
||||
@ -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:
|
||||
|
||||
<description> _String_ **required** </description>
|
||||
|
||||
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', {
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
// 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,
|
||||
});
|
||||
|
||||
@ -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 支持以下图形：
|
||||
|
||||
<description> _String_ **required** </description>
|
||||
|
||||
图形名称标识，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', {
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
// 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,
|
||||
});
|
||||
|
||||
@ -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'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
@ -62,7 +62,9 @@ group.addShape('text', {
|
||||
// ... other attributes,
|
||||
stroke: '#fff',
|
||||
lineWidth: 4,
|
||||
}
|
||||
},
|
||||
// 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
|
||||
name: 'text-shape'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
})
|
||||
// ...
|
||||
},
|
||||
|
||||
@ -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，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
|
||||
})
|
||||
// ...
|
||||
},
|
||||
|
||||
@ -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
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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`.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qAqbSLqTWSoAAAAAAAAAAABkARQnAQ' width=150 alt='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`.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qAqbSLqTWSoAAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
|
||||
@ -105,7 +105,7 @@ graph.render();
|
||||
|
||||
### 标签文本配置 labelCfg
|
||||
|
||||
Object 类型。通过 `labelCfg` 配置标签文本。支持 [Combo 通用标签配置](/zh/docs/manual/middle/elements/combos/defaultCombo/#标签文本-label-及其配置-labelcfg)。基于上面 [样式属性 style](#样式属性-style) 中的代码，下面代码在 `defaultCombo` 中增加了 `labelCfg` 配置项进行文本的配置，使之达到如下图效果。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qAqbSLqTWSoAAAAAAAAAAABkARQnAQ' width=150 alt='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` 配置项进行文本的配置，使之达到如下图效果。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qAqbSLqTWSoAAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
|
||||
|
||||
```javascript
|
||||
const data = {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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(
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
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(
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
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,
|
||||
});
|
||||
},
|
||||
|
||||
@ -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(
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
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(
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
name: 'dom-node-keyShape', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
|
||||
draggable: true,
|
||||
});
|
||||
},
|
||||
|
||||
@ -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',
|
||||
});
|
||||
```
|
||||
|
||||
@ -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',
|
||||
});
|
||||
```
|
||||
|
||||
@ -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', {
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
// 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,
|
||||
});
|
||||
|
||||
@ -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', {
|
||||
</div>
|
||||
`,
|
||||
},
|
||||
// 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,
|
||||
});
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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`:
|
||||
|
||||
|
||||
@ -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 事件监听：
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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}`,
|
||||
});
|
||||
});
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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++;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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}`,
|
||||
});
|
||||
});
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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"
|
||||
});
|
||||
|
||||
|
||||
@ -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'
|
||||
* })
|
||||
*
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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',
|
||||
});
|
||||
|
||||
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user