feat: 优化了index文本配置方式
This commit is contained in:
黎智洲
parent
8d8f007237
commit
e155269533
128
demoV2/Layouter/AdjoinMatrixGraph.js
Normal file
128
demoV2/Layouter/AdjoinMatrixGraph.js
Normal file
@ -0,0 +1,128 @@
|
||||
|
||||
const isNeighbor = function (itemA, itemB) {
|
||||
let neighborA = itemA.neighbor,
|
||||
neighborB = itemB.neighbor;
|
||||
|
||||
if (neighborA === undefined && neighborB === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (neighborA && neighborA.includes(itemB.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (neighborB && neighborB.includes(itemA.id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
SV.registerLayouter('AdjoinMatrixGraph', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
let matrixNodeLength = dataLength * dataLength;
|
||||
let matrixNodes = [];
|
||||
let i, j;
|
||||
|
||||
for (i = 0; i < matrixNodeLength; i++) {
|
||||
matrixNodes.push({
|
||||
id: `mn-${i}`,
|
||||
type: 'matrixNode',
|
||||
indexTop: i < dataLength ? sources[i].id : undefined,
|
||||
indexLeft: i % dataLength === 0? sources[i / dataLength].id : undefined,
|
||||
data: 0
|
||||
});
|
||||
}
|
||||
|
||||
for (i = 0; i < dataLength; i++) {
|
||||
for (j = 0; j < dataLength; j++) {
|
||||
let itemI = sources[i],
|
||||
itemJ = sources[j];
|
||||
|
||||
if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
|
||||
matrixNodes[i * dataLength + j].data = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sources.push(...matrixNodes);
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'circle',
|
||||
label: '[id]',
|
||||
size: 40,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
matrixNode: {
|
||||
type: 'indexed-node',
|
||||
label: '[data]',
|
||||
size: [40, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
},
|
||||
indexOptions: {
|
||||
indexTop: { position: 'top' },
|
||||
indexLeft: { position: 'left' }
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
style: {
|
||||
stroke: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150,
|
||||
interval: 250
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['default']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.filter(item => item.type === 'default'),
|
||||
matrixNodes = elements.filter(item => item.type === 'matrixNode'),
|
||||
nodeLength = nodes.length,
|
||||
matrixNodeLength = matrixNodes.length,
|
||||
{ interval, radius } = layoutOptions,
|
||||
intervalAngle = 2 * Math.PI / nodes.length,
|
||||
matrixNodeSize = matrixNodes[0].get('size')[0],
|
||||
i;
|
||||
|
||||
const matrixY = -radius,
|
||||
matrixX = interval;
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
|
||||
|
||||
nodes[i].set({ x, y });
|
||||
}
|
||||
|
||||
for (i = 0; i < matrixNodeLength; i++) {
|
||||
let x = matrixX + (i % nodeLength) * matrixNodeSize;
|
||||
y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
|
||||
|
||||
matrixNodes[i].set({ x, y });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
236
demoV2/Layouter/AdjoinTableGraph.js
Normal file
236
demoV2/Layouter/AdjoinTableGraph.js
Normal file
@ -0,0 +1,236 @@
|
||||
|
||||
|
||||
|
||||
SV.registerLayouter('AdjoinTableGraph', {
|
||||
|
||||
sourcesPreprocess(sources, options) {
|
||||
let dataLength = sources.length;
|
||||
let tableHeadNodes = [];
|
||||
let nodeMap = {};
|
||||
let i;
|
||||
|
||||
|
||||
for (i = 0; i < dataLength; i++) {
|
||||
let graphNode = sources[i];
|
||||
|
||||
tableHeadNodes.push({
|
||||
id: `table-head-node-${i}`,
|
||||
type: 'tableHeadNode',
|
||||
data: graphNode.id
|
||||
});
|
||||
|
||||
nodeMap[graphNode.id] = {
|
||||
node: graphNode,
|
||||
order: i,
|
||||
neighbor: []
|
||||
};
|
||||
}
|
||||
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.node.neighbor;
|
||||
|
||||
if (neighbor === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
neighbor.forEach((item, index) => {
|
||||
let targetNodeData = nodeMap[item];
|
||||
|
||||
nodeData.neighbor.push({
|
||||
id: `${key}-table-node-${item}`,
|
||||
type: 'tableNode',
|
||||
data: item.toString(),
|
||||
order: targetNodeData.order
|
||||
});
|
||||
|
||||
targetNodeData.neighbor.push({
|
||||
id: `${item}-table-node-${key}`,
|
||||
type: 'tableNode',
|
||||
data: key.toString(),
|
||||
order: nodeData.order
|
||||
});
|
||||
});
|
||||
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
if (neighbor === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
neighbor.sort((n1, n2) => {
|
||||
return n1.order - n2.order;
|
||||
});
|
||||
|
||||
for(let i = 0; i < neighbor.length; i++) {
|
||||
if(neighbor[i + 1]) {
|
||||
neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
tableHeadNodes.forEach(item => {
|
||||
let nodeData = nodeMap[item.data],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
if(neighbor.length) {
|
||||
item.headNext = `tableNode#${neighbor[0].id}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
sources.push(...tableHeadNodes);
|
||||
Object.keys(nodeMap).map(key => {
|
||||
let nodeData = nodeMap[key],
|
||||
neighbor = nodeData.neighbor;
|
||||
|
||||
sources.push(...neighbor);
|
||||
});
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
defineOptions() {
|
||||
return {
|
||||
element: {
|
||||
default: {
|
||||
type: 'circle',
|
||||
label: '[id]',
|
||||
size: 40,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
tableHeadNode: {
|
||||
type: 'two-cell-node',
|
||||
label: '[data]',
|
||||
size: [70, 40],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
},
|
||||
tableNode: {
|
||||
type: 'link-list-node',
|
||||
label: '[data]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
}
|
||||
}
|
||||
},
|
||||
link: {
|
||||
neighbor: {
|
||||
style: {
|
||||
stroke: '#333'
|
||||
}
|
||||
},
|
||||
headNext: {
|
||||
sourceAnchor: 1,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
},
|
||||
next: {
|
||||
sourceAnchor: 2,
|
||||
targetAnchor: 6,
|
||||
style: {
|
||||
stroke: '#333',
|
||||
endArrow: {
|
||||
path: G6.Arrow.triangle(8, 6, 0),
|
||||
fill: '#333'
|
||||
},
|
||||
startArrow: {
|
||||
path: G6.Arrow.circle(2, -1),
|
||||
fill: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
radius: 150,
|
||||
interval: 250,
|
||||
xInterval: 50,
|
||||
yInterval: 50
|
||||
},
|
||||
behavior: {
|
||||
dragNode: ['default', 'tableNode']
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 对子树进行递归布局
|
||||
* @param node
|
||||
* @param parent
|
||||
*/
|
||||
layoutItem(node, prev, layoutOptions) {
|
||||
if(!node) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let width = node.get('size')[0];
|
||||
|
||||
if(prev) {
|
||||
node.set('y', prev.get('y'));
|
||||
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let nodes = elements.filter(item => item.type === 'default'),
|
||||
tableHeadNode = elements.filter(item => item.type === 'tableHeadNode'),
|
||||
nodeLength = nodes.length,
|
||||
{ radius } = layoutOptions,
|
||||
intervalAngle = 2 * Math.PI / nodes.length,
|
||||
i;
|
||||
|
||||
for (i = 0; i < nodeLength; i++) {
|
||||
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
|
||||
|
||||
nodes[i].set({ x, y });
|
||||
}
|
||||
|
||||
const tableY = -radius,
|
||||
tableX = radius + 20;
|
||||
|
||||
for(i = 0; i < tableHeadNode.length; i++) {
|
||||
let node = tableHeadNode[i],
|
||||
height = node.get('size')[1];
|
||||
|
||||
node.set({
|
||||
x: tableX,
|
||||
y: tableY + node.get('y') + i * height
|
||||
});
|
||||
|
||||
if(node.headNext) {
|
||||
let y = node.get('y') + height - node.headNext.get('size')[1],
|
||||
x = tableX + layoutOptions.xInterval * 2.5;
|
||||
|
||||
node.headNext.set({ x, y });
|
||||
this.layoutItem(node.headNext, null, layoutOptions);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -19,11 +19,15 @@ SV.registerLayouter('Array', {
|
||||
element: {
|
||||
default: {
|
||||
type: 'indexed-node',
|
||||
label: '[data]',
|
||||
label: '[id]',
|
||||
size: [60, 30],
|
||||
style: {
|
||||
stroke: '#333',
|
||||
fill: '#95e1d3'
|
||||
},
|
||||
indexOptions: {
|
||||
index: { position: 'bottom' },
|
||||
indexTop: { position: 'top' }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -130,4 +130,3 @@ SV.registerLayouter('ChainHashTable', {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -10,12 +10,6 @@ SV.registerLayouter('Stack', {
|
||||
delete stackBottomNode.external;
|
||||
}
|
||||
|
||||
if(options.layout.indexPosition) {
|
||||
sources.forEach(item => {
|
||||
item.indexPosition = options.layout.indexPosition;
|
||||
});
|
||||
}
|
||||
|
||||
return sources;
|
||||
},
|
||||
|
||||
@ -55,9 +49,6 @@ SV.registerLayouter('Stack', {
|
||||
}
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
indexPosition: 'left'
|
||||
},
|
||||
behavior: {
|
||||
dragNode: false
|
||||
}
|
||||
|
||||
@ -75,6 +75,8 @@
|
||||
<script src="./Layouter/Array.js"></script>
|
||||
<script src="./Layouter/HashTable.js"></script>
|
||||
<script src="./Layouter/LinkStack.js"></script>
|
||||
<script src="./Layouter/AdjoinMatrixGraph.js"></script>
|
||||
<script src="./Layouter/AdjoinTableGraph.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
@ -88,34 +90,19 @@
|
||||
|
||||
|
||||
let data = [{
|
||||
"LinkStack1": {
|
||||
"g1": {
|
||||
"data": [
|
||||
{
|
||||
"id": 0,
|
||||
external: 'gg'
|
||||
}
|
||||
{ id: 0, neighbor: [4, 3] }, { id: 1, neighbor: [0, 3] }, { id: 2, neighbor: [4, 0] },
|
||||
{ id: 3, neighbor: [5, 2] }, { id: 4 },
|
||||
{ id: 5, neighbor: [0, 1] }
|
||||
],
|
||||
"layouter": "LinkStack"
|
||||
}
|
||||
}, {
|
||||
"LinkStack1": {
|
||||
"data": [
|
||||
{
|
||||
"id": 0
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"freed": true,
|
||||
},
|
||||
{
|
||||
"freed": true,
|
||||
"id": 2
|
||||
}
|
||||
],
|
||||
"layouter": "LinkStack"
|
||||
// "layouter": "AdjoinTableGraph"
|
||||
"layouter": "AdjoinMatrixGraph"
|
||||
}
|
||||
}];
|
||||
|
||||
|
||||
|
||||
|
||||
let dataIndex = 0,
|
||||
curData = data[dataIndex];
|
||||
|
||||
2
dist/sv.js
vendored
2
dist/sv.js
vendored
File diff suppressed because one or more lines are too long
@ -1,12 +1,12 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { Engine } from "../engine";
|
||||
import { ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
|
||||
import { ElementIndexOption, ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
|
||||
import { sourceLinkData, SourceElement, LinkTarget, Sources } from "../sources";
|
||||
import { SV } from "../StructV";
|
||||
import { Element, Link, Marker, Model } from "./modelData";
|
||||
|
||||
|
||||
export type LayoutGroup = {
|
||||
export type LayoutGroup = {
|
||||
name: string;
|
||||
element: Element[];
|
||||
link: Link[];
|
||||
@ -29,7 +29,7 @@ export class ModelConstructor {
|
||||
|
||||
constructor(engine: Engine) {
|
||||
this.engine = engine;
|
||||
this.prevSourcesStringMap = { };
|
||||
this.prevSourcesStringMap = {};
|
||||
}
|
||||
|
||||
/**
|
||||
@ -38,15 +38,15 @@ export class ModelConstructor {
|
||||
*/
|
||||
public construct(sources: Sources): LayoutGroupTable {
|
||||
const layoutGroupTable = new Map<string, LayoutGroup>(),
|
||||
layouterMap: { [key: string]: Layouter } = SV.registeredLayouter,
|
||||
optionsTable = this.engine.optionsTable;
|
||||
layouterMap: { [key: string]: Layouter } = SV.registeredLayouter,
|
||||
optionsTable = this.engine.optionsTable;
|
||||
|
||||
Object.keys(sources).forEach(name => {
|
||||
let sourceGroup = sources[name],
|
||||
layouterName = sourceGroup.layouter,
|
||||
layouter: Layouter = layouterMap[sourceGroup.layouter];
|
||||
|
||||
if(!layouterName || !layouter) {
|
||||
if (!layouterName || !layouter) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -55,18 +55,18 @@ export class ModelConstructor {
|
||||
elementList: Element[] = [],
|
||||
markerList: Marker[] = [];
|
||||
|
||||
if(prevString === sourceDataString) {
|
||||
if (prevString === sourceDataString) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const options: LayoutGroupOptions = optionsTable[layouterName],
|
||||
sourceData = layouter.sourcesPreprocess(sourceGroup.data, options),
|
||||
elementOptions = options.element || { },
|
||||
markerOptions = options.marker || { };
|
||||
|
||||
sourceData = layouter.sourcesPreprocess(sourceGroup.data, options),
|
||||
elementOptions = options.element || {},
|
||||
markerOptions = options.marker || {};
|
||||
|
||||
elementList = this.constructElements(elementOptions, name, sourceData, layouterName);
|
||||
markerList = this.constructMarkers(name, markerOptions, elementList);
|
||||
|
||||
|
||||
layoutGroupTable.set(name, {
|
||||
name,
|
||||
element: elementList,
|
||||
@ -79,10 +79,10 @@ export class ModelConstructor {
|
||||
isHide: false
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
layoutGroupTable.forEach((layoutGroup: LayoutGroup) => {
|
||||
const linkOptions = layoutGroup.options.link || { },
|
||||
linkList: Link[] = this.constructLinks(linkOptions, layoutGroup.element, layoutGroupTable);
|
||||
const linkOptions = layoutGroup.options.link || {},
|
||||
linkList: Link[] = this.constructLinks(linkOptions, layoutGroup.element, layoutGroupTable);
|
||||
|
||||
layoutGroup.link = linkList;
|
||||
layoutGroup.modelList.push(...linkList);
|
||||
@ -114,11 +114,11 @@ export class ModelConstructor {
|
||||
elementList: Element[] = [];
|
||||
|
||||
sourceList.forEach(item => {
|
||||
if(item === null) {
|
||||
if (item === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(item.type === undefined || item.type === null) {
|
||||
if (item.type === undefined || item.type === null) {
|
||||
item.type = defaultElementType;
|
||||
}
|
||||
|
||||
@ -140,41 +140,41 @@ export class ModelConstructor {
|
||||
linkNames = Object.keys(linkOptions);
|
||||
|
||||
linkNames.forEach(name => {
|
||||
for(let i = 0; i < elements.length; i++) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element: Element = elements[i],
|
||||
sourceLinkData: sourceLinkData = element.sourceElement[name],
|
||||
targetElement: Element | Element[] = null,
|
||||
link: Link = null;
|
||||
|
||||
if(sourceLinkData === undefined || sourceLinkData === null) {
|
||||
if (sourceLinkData === undefined || sourceLinkData === null) {
|
||||
element[name] = null;
|
||||
continue;
|
||||
}
|
||||
|
||||
// ------------------- 将连接声明字段 sourceLinkData 从 id 变为 Element -------------------
|
||||
if(Array.isArray(sourceLinkData)) {
|
||||
if (Array.isArray(sourceLinkData)) {
|
||||
element[name] = sourceLinkData.map((item, index) => {
|
||||
targetElement = this.fetchTargetElements(layoutGroupTable, element, item);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
|
||||
if(targetElement) {
|
||||
if (targetElement) {
|
||||
link = this.createLink(name, element, targetElement, index, linkOptions[name]);
|
||||
linkList.push(link);
|
||||
}
|
||||
|
||||
return isGeneralLink? targetElement: null;
|
||||
return isGeneralLink ? targetElement : null;
|
||||
});
|
||||
}
|
||||
else {
|
||||
targetElement = this.fetchTargetElements(layoutGroupTable, element, sourceLinkData);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
|
||||
if(targetElement) {
|
||||
if (targetElement) {
|
||||
link = this.createLink(name, element, targetElement, null, linkOptions[name]);
|
||||
linkList.push(link);
|
||||
}
|
||||
|
||||
element[name] = isGeneralLink? targetElement: null;
|
||||
element[name] = isGeneralLink ? targetElement : null;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -193,14 +193,14 @@ export class ModelConstructor {
|
||||
markerNames = Object.keys(markerOptions);
|
||||
|
||||
markerNames.forEach(name => {
|
||||
for(let i = 0; i < elements.length; i++) {
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element = elements[i],
|
||||
markerData = element[name];
|
||||
|
||||
// 若没有指针字段的结点则跳过
|
||||
if(!markerData) continue;
|
||||
|
||||
let id = `${groupName}.${name}.${Array.isArray(markerData)? markerData.join('-'): markerData}`,
|
||||
// 若没有指针字段的结点则跳过
|
||||
if (!markerData) continue;
|
||||
|
||||
let id = `${groupName}.${name}.${Array.isArray(markerData) ? markerData.join('-') : markerData}`,
|
||||
marker = this.createMarker(id, name, markerData, element, markerOptions[name]);
|
||||
|
||||
markerList.push(marker);
|
||||
@ -210,6 +210,44 @@ export class ModelConstructor {
|
||||
return markerList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 求解label文本
|
||||
* @param label
|
||||
* @param sourceElement
|
||||
*/
|
||||
private resolveElementLabel(label: string | string[], sourceElement: SourceElement): string {
|
||||
let targetLabel: any = '';
|
||||
|
||||
if (Array.isArray(label)) {
|
||||
targetLabel = label.map(item => this.parserElementContent(sourceElement, item) ?? '');
|
||||
}
|
||||
else {
|
||||
targetLabel = this.parserElementContent(sourceElement, label);
|
||||
}
|
||||
|
||||
if(targetLabel === 'undefined') {
|
||||
targetLabel = '';
|
||||
}
|
||||
|
||||
return targetLabel ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 求解index文本
|
||||
* @param indexOptions
|
||||
* @param sourceElement
|
||||
*/
|
||||
private resolveElementIndex(indexOptions: ElementIndexOption, sourceElement: SourceElement) {
|
||||
if(indexOptions === undefined || indexOptions === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(indexOptions).map(key => {
|
||||
let indexOptionItem = indexOptions[key];
|
||||
indexOptionItem.value = sourceElement[key] ?? '';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 元素工厂，创建Element
|
||||
* @param sourceElement
|
||||
@ -220,34 +258,17 @@ export class ModelConstructor {
|
||||
*/
|
||||
private createElement(sourceElement: SourceElement, elementName: string, groupName: string, layouterName: string, options: ElementOption): Element {
|
||||
let element: Element = undefined,
|
||||
label: string | string[] = '',
|
||||
id = elementName + '.' + sourceElement.id.toString();
|
||||
label: string | string[] = this.resolveElementLabel(options.label, sourceElement),
|
||||
id = elementName + '.' + sourceElement.id.toString();
|
||||
|
||||
if(options.label) {
|
||||
if(Array.isArray(options.label)) {
|
||||
label = options.label.map(item => {
|
||||
let res = this.parserElementContent(sourceElement, item);
|
||||
|
||||
if(res === null || label === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
|
||||
return res;
|
||||
});
|
||||
}
|
||||
else {
|
||||
label = this.parserElementContent(sourceElement, options.label);
|
||||
|
||||
if(label === null || label === 'undefined') {
|
||||
label = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
element = new Element(id, elementName, groupName, layouterName, sourceElement);
|
||||
element.initProps(options);
|
||||
element.set('label', label);
|
||||
element.sourceElement = sourceElement;
|
||||
// 处理element的index文本
|
||||
this.resolveElementIndex(element.get('indexCfg'), sourceElement);
|
||||
console.log(element.get('indexCfg'));
|
||||
|
||||
return element;
|
||||
}
|
||||
@ -294,8 +315,8 @@ export class ModelConstructor {
|
||||
*/
|
||||
private parserElementContent(sourceElement: SourceElement, formatLabel: string): string {
|
||||
let fields = Util.textParser(formatLabel);
|
||||
|
||||
if(Array.isArray(fields)) {
|
||||
|
||||
if (Array.isArray(fields)) {
|
||||
let values = fields.map(item => sourceElement[item]);
|
||||
|
||||
values.map((item, index) => {
|
||||
@ -315,16 +336,16 @@ export class ModelConstructor {
|
||||
private fetchTargetElements(layoutGroupTable: LayoutGroupTable, element: Element, linkTarget: LinkTarget): Element {
|
||||
let groupName: string = element.groupName,
|
||||
elementName = element.type,
|
||||
elementList: Element[],
|
||||
elementList: Element[],
|
||||
targetId = linkTarget,
|
||||
targetGroupName = groupName,
|
||||
targetElement = null;
|
||||
|
||||
if(linkTarget === null || linkTarget === undefined) {
|
||||
if (linkTarget === null || linkTarget === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if(typeof linkTarget === 'number' || (typeof linkTarget === 'string' && !linkTarget.includes('#'))) {
|
||||
if (typeof linkTarget === 'number' || (typeof linkTarget === 'string' && !linkTarget.includes('#'))) {
|
||||
linkTarget = 'default#' + linkTarget;
|
||||
}
|
||||
|
||||
@ -332,30 +353,30 @@ export class ModelConstructor {
|
||||
|
||||
targetId = info.pop();
|
||||
|
||||
if(info.length > 1) {
|
||||
if (info.length > 1) {
|
||||
elementName = info.pop();
|
||||
targetGroupName = info.pop();
|
||||
}
|
||||
else {
|
||||
let field = info.pop();
|
||||
if(layoutGroupTable.get(targetGroupName).element.find(item => item.type === field)) {
|
||||
if (layoutGroupTable.get(targetGroupName).element.find(item => item.type === field)) {
|
||||
elementName = field;
|
||||
}
|
||||
else if(layoutGroupTable.has(field)) {
|
||||
else if (layoutGroupTable.has(field)) {
|
||||
targetGroupName = field;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
elementList = layoutGroupTable.get(targetGroupName).element.filter(item => item.type === elementName);
|
||||
|
||||
// 若目标element不存在，返回null
|
||||
if(elementList === undefined) {
|
||||
if (elementList === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
targetElement = elementList.find(item => item.sourceId === targetId);
|
||||
return targetElement || null;
|
||||
}
|
||||
@ -367,8 +388,8 @@ export class ModelConstructor {
|
||||
private isGeneralLink(linkId: string): boolean {
|
||||
let counter = 0;
|
||||
|
||||
for(let i = 0; i < linkId.length; i++) {
|
||||
if(linkId[i] === '#') {
|
||||
for (let i = 0; i < linkId.length; i++) {
|
||||
if (linkId[i] === '#') {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Util } from "../Common/util";
|
||||
import { ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
|
||||
import { ElementIndexOption, ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
|
||||
import { SourceElement } from "../sources";
|
||||
import { BoundingRect } from "../Common/boundingRect";
|
||||
import { SV } from './../StructV';
|
||||
@ -16,6 +16,7 @@ export interface G6NodeModel {
|
||||
label: string | string[];
|
||||
style: Style;
|
||||
labelCfg: ElementLabelOption;
|
||||
indexCfg?: ElementIndexOption;
|
||||
markerId: string;
|
||||
SVLayouter: string;
|
||||
SVModelType: string;
|
||||
@ -211,6 +212,7 @@ export class Element extends Model {
|
||||
label: option.label,
|
||||
style: Util.objectClone<Style>(option.style),
|
||||
labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
|
||||
indexCfg: Util.objectClone<ElementIndexOption>(option.indexOptions),
|
||||
markerId: null,
|
||||
SVLayouter: this.layouterName,
|
||||
SVModelType: 'element',
|
||||
|
||||
@ -6,8 +6,8 @@ export default G6.registerNode('indexed-node', {
|
||||
cfg.size = cfg.size || [30, 10];
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1],
|
||||
disable = cfg.disable === undefined? false: cfg.disable;
|
||||
height = cfg.size[1],
|
||||
disable = cfg.disable === undefined ? false : cfg.disable;
|
||||
|
||||
const rect = group.addShape('rect', {
|
||||
attrs: {
|
||||
@ -16,8 +16,8 @@ export default G6.registerNode('indexed-node', {
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
fill: disable? '#ccc': cfg.style.fill,
|
||||
cursor: cfg.style.cursor,
|
||||
fill: disable ? '#ccc' : cfg.style.fill,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'wrapper'
|
||||
});
|
||||
@ -26,7 +26,7 @@ export default G6.registerNode('indexed-node', {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width,
|
||||
x: width,
|
||||
y: height,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
@ -38,31 +38,35 @@ export default G6.registerNode('indexed-node', {
|
||||
});
|
||||
}
|
||||
|
||||
if(cfg.index !== undefined) {
|
||||
const offset = 20,
|
||||
indexPosition = cfg.indexPosition || 'bottom',
|
||||
indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
|
||||
top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
|
||||
right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
|
||||
bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
|
||||
left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
|
||||
};
|
||||
const indexCfg = cfg.indexCfg;
|
||||
const offset = 20;
|
||||
const indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
|
||||
top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
|
||||
right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
|
||||
bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
|
||||
left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
|
||||
};
|
||||
|
||||
const { x: indexX, y: indexY } = indexPositionMap[indexPosition](width, height);
|
||||
if (indexCfg !== undefined) {
|
||||
Object.keys(indexCfg).map(key => {
|
||||
let indexCfgItem = indexCfg[key];
|
||||
let position = indexCfgItem.position || 'bottom';
|
||||
let { x: indexX, y: indexY } = indexPositionMap[position](width, height);
|
||||
|
||||
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: indexX,
|
||||
y: indexY,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.index.toString(),
|
||||
fill: '#bbb',
|
||||
fontSize: 14,
|
||||
fontStyle: 'italic'
|
||||
},
|
||||
name: 'index-text'
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: indexX,
|
||||
y: indexY,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: indexCfgItem.value.toString(),
|
||||
fill: '#bbb',
|
||||
fontSize: 14,
|
||||
fontStyle: 'italic',
|
||||
...indexCfgItem.style
|
||||
},
|
||||
name: 'index-text'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -22,6 +22,13 @@ export interface ElementLabelOption {
|
||||
};
|
||||
|
||||
|
||||
export interface ElementIndexOption extends ElementLabelOption {
|
||||
position: 'top' | 'right' | 'bottom' | 'left';
|
||||
value: string;
|
||||
style: Style;
|
||||
}
|
||||
|
||||
|
||||
export interface LinkLabelOption {
|
||||
refX: number;
|
||||
refY: number;
|
||||
@ -39,6 +46,7 @@ export interface ElementOption {
|
||||
anchorPoints: [number, number];
|
||||
label: string | string[];
|
||||
labelOptions: ElementLabelOption;
|
||||
indexOptions: ElementIndexOption;
|
||||
style: Style;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user