改进可视化细节: pointer改为marker
This commit is contained in:
黎智洲
parent
da2d43581e
commit
461a6242da
2
dist/sv.js
vendored
2
dist/sv.js
vendored
File diff suppressed because one or more lines are too long
@ -153,24 +153,26 @@ export class ModelConstructor {
|
||||
if(Array.isArray(sourceLinkData)) {
|
||||
element[name] = sourceLinkData.map((item, index) => {
|
||||
targetElement = this.fetchTargetElements(layoutGroupTable, element, item);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
|
||||
if(targetElement) {
|
||||
link = this.createLink(name, element, targetElement, index, linkOptions[name]);
|
||||
linkList.push(link);
|
||||
}
|
||||
|
||||
return targetElement;
|
||||
return isGeneralLink? targetElement: null;
|
||||
});
|
||||
}
|
||||
else {
|
||||
targetElement = this.fetchTargetElements(layoutGroupTable, element, sourceLinkData);
|
||||
let isGeneralLink = this.isGeneralLink(sourceLinkData.toString());
|
||||
|
||||
if(targetElement) {
|
||||
link = this.createLink(name, element, targetElement, null, linkOptions[name]);
|
||||
linkList.push(link);
|
||||
}
|
||||
|
||||
element[name] = targetElement;
|
||||
element[name] = isGeneralLink? targetElement: null;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -356,6 +358,22 @@ export class ModelConstructor {
|
||||
return targetElement || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测改指针是否为常规指针（指向另一个group）
|
||||
* @param linkId
|
||||
*/
|
||||
private isGeneralLink(linkId: string): boolean {
|
||||
let counter = 0;
|
||||
|
||||
for(let i = 0; i < linkId.length; i++) {
|
||||
if(linkId[i] === '#') {
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
|
||||
return counter <= 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* 销毁
|
||||
*/
|
||||
|
||||
@ -170,6 +170,10 @@ export class Element extends Model {
|
||||
layouterName: string;
|
||||
freed: boolean;
|
||||
markers: { [key: string]: Marker };
|
||||
links: {
|
||||
inDegree: Link[];
|
||||
outDegree: Link[];
|
||||
};
|
||||
|
||||
constructor(id: string, type: string, group: string, layouter: string, sourceElement: SourceElement) {
|
||||
super(id, type);
|
||||
@ -191,6 +195,7 @@ export class Element extends Model {
|
||||
this.sourceId = this.id.split('.')[1];
|
||||
this.sourceElement = sourceElement;
|
||||
this.markers = { };
|
||||
this.links = { inDegree: [], outDegree: [] };
|
||||
}
|
||||
|
||||
protected defineProps(option: ElementOption): G6NodeModel {
|
||||
@ -226,6 +231,9 @@ export class Link extends Model {
|
||||
this.element = element;
|
||||
this.target = target;
|
||||
this.index = index;
|
||||
|
||||
element.links.outDegree.push(this);
|
||||
target.links.inDegree.push(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -35,17 +35,7 @@ export class Container {
|
||||
shouldBegin(event) {
|
||||
return event.item.getModel().SVModelType === 'element';
|
||||
},
|
||||
getContent(event) {
|
||||
const data = event.item.SVModel.data,
|
||||
wrapper = document.createElement('div');
|
||||
|
||||
wrapper.style.padding = '0 4px 0 4px';
|
||||
wrapper.innerHTML = `
|
||||
<h5>id: ${ event.item.SVModel.sourceId }</h5>
|
||||
<h5>data: ${ data? data: '' }</h5>
|
||||
`
|
||||
return wrapper;
|
||||
},
|
||||
getContent: event => this.getTooltipContent(event.item.SVModel, { address: 'sourceId', data: 'data' }),
|
||||
itemTypes: ['node']
|
||||
});
|
||||
|
||||
@ -63,6 +53,23 @@ export class Container {
|
||||
this.afterInitRenderer();
|
||||
}
|
||||
|
||||
|
||||
private getTooltipContent(model: Model, items: { [key: string]: string }): HTMLElement {
|
||||
const wrapper = document.createElement('div');
|
||||
|
||||
|
||||
Object.keys(items).map(key => {
|
||||
let value = model[items[key]];
|
||||
if (value !== undefined && value !== null) {
|
||||
let item = document.createElement('div');
|
||||
item.innerHTML = `${key}：${value}`;
|
||||
wrapper.appendChild(item);
|
||||
}
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化交互行为
|
||||
* @param optionsTable
|
||||
|
||||
@ -45,7 +45,7 @@ import { Container } from "./container";
|
||||
return false;
|
||||
}
|
||||
|
||||
if(model.SVModelType === 'pointer') {
|
||||
if(model.SVModelType === 'marker') {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ import { Container } from "./container";
|
||||
return false;
|
||||
}
|
||||
|
||||
if(model.SVModelType === 'pointer') {
|
||||
if(model.SVModelType === 'marker') {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -105,16 +105,16 @@ import { Container } from "./container";
|
||||
*/
|
||||
protected afterInitRenderer() {
|
||||
let g6Instance = this.getG6Instance(),
|
||||
pointer = null,
|
||||
pointerX = null,
|
||||
pointerY = null,
|
||||
marker = null,
|
||||
markerX = null,
|
||||
markerY = null,
|
||||
dragStartX = null,
|
||||
dragStartY = null;
|
||||
|
||||
g6Instance.on('node:dragstart', ev => {
|
||||
const model = ev.item.getModel();
|
||||
|
||||
if(model.SVModelType === 'pointer') {
|
||||
if(model.SVModelType === 'marker') {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -128,26 +128,26 @@ import { Container } from "./container";
|
||||
return;
|
||||
}
|
||||
|
||||
pointer = g6Instance.findById(model.externalPointerId);
|
||||
marker = g6Instance.findById(model.markerId);
|
||||
|
||||
if(pointer) {
|
||||
pointerX = pointer.getModel().x,
|
||||
pointerY = pointer.getModel().y;
|
||||
if(marker) {
|
||||
markerX = marker.getModel().x,
|
||||
markerY = marker.getModel().y;
|
||||
dragStartX = ev.canvasX;
|
||||
dragStartY = ev.canvasY;
|
||||
}
|
||||
});
|
||||
|
||||
g6Instance.on('node:dragend', ev => {
|
||||
pointer = null;
|
||||
pointerX = null,
|
||||
pointerY = null,
|
||||
marker = null;
|
||||
markerX = null,
|
||||
markerY = null,
|
||||
dragStartX = null,
|
||||
dragStartY = null;
|
||||
});
|
||||
|
||||
g6Instance.on('node:drag', ev => {
|
||||
if(!pointer) {
|
||||
if(!marker) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -155,9 +155,9 @@ import { Container } from "./container";
|
||||
dy = ev.canvasY - dragStartY,
|
||||
zoom = g6Instance.getZoom();
|
||||
|
||||
pointer.updatePosition({
|
||||
x: pointerX + dx / zoom,
|
||||
y: pointerY + dy / zoom
|
||||
marker.updatePosition({
|
||||
x: markerX + dx / zoom,
|
||||
y: markerY + dy / zoom
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -92,8 +92,11 @@ export class Renderer {
|
||||
|
||||
modelList.forEach(item => {
|
||||
item.renderG6Item = this.g6Instance.findById(item.id);
|
||||
|
||||
if(item.renderG6Item) {
|
||||
item.G6Item = item.renderG6Item;
|
||||
item.renderG6Item.SVModel = item;
|
||||
}
|
||||
});
|
||||
|
||||
// 把所有连线置顶
|
||||
|
||||
@ -68,7 +68,7 @@ export class ViewManager {
|
||||
removeModels: Model[] = [];
|
||||
|
||||
layoutGroupTable.forEach((group, key) => {
|
||||
let freedElements: Model[] = group.element.filter(item => item.freed);
|
||||
let freedElements: Element[] = group.element.filter(item => item.freed);
|
||||
|
||||
if(freedElements.length) {
|
||||
freedGroupName = key;
|
||||
@ -107,6 +107,7 @@ export class ViewManager {
|
||||
|
||||
elements.forEach(item => {
|
||||
elementIds.push(item.id);
|
||||
|
||||
item.set('style', {
|
||||
fill: '#ccc'
|
||||
});
|
||||
@ -189,7 +190,7 @@ export class ViewManager {
|
||||
renderAll(layoutGroupTable: LayoutGroupTable) {
|
||||
this.shadowG6Instance.clear();
|
||||
|
||||
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
|
||||
let modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
|
||||
|
||||
this.build(modelList);
|
||||
|
||||
@ -209,6 +210,8 @@ export class ViewManager {
|
||||
// 进行布局（设置model的x，y）
|
||||
this.layouter.layoutAll(this.mainContainer, layoutGroupTable);
|
||||
|
||||
// 从新获取一次，因为第一次获取没有把freed节点筛选出去
|
||||
modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
|
||||
this.mainContainer.render(modelList);
|
||||
|
||||
if(this.leakContainer) {
|
||||
|
||||
@ -55,6 +55,7 @@ export interface LinkOption {
|
||||
|
||||
|
||||
export interface MarkerOption extends ElementOption {
|
||||
type: 'pointer' | 'cursor';
|
||||
anchor: number;
|
||||
offset: number;
|
||||
labelOffset: number;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user