chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

改进可视化细节: pointer改为marker

Browse Source
This commit is contained in:
黎智洲 2021-07-29 23:44:49 +08:00
parent da2d43581e
commit 461a6242da
8 changed files with 96 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/Model/modelConstructor.ts
View File

@ -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;
}
/**
* 销毁
*/

8
src/Model/modelData.ts
View File

@ -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);
}

71
src/View/container/container.ts
View File

@ -19,7 +19,7 @@ export class Container {
protected afterAppendModelsCallbacks: ((models: Model[]) => void)[] = [];
protected afterRemoveModelsCallbacks: ((models: Model[]) => void)[] = [];
constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any } = { }) {
constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any } = {}) {
this.engine = engine;
this.DOMContainer = DOMContainer;
this.animationsOptions = engine.animationOptions;
@ -28,24 +28,14 @@ export class Container {
const g6Plugins = [];
if(g6Options.tooltip) {
if (g6Options.tooltip) {
const tooltip = new SV.G6.Tooltip({
offsetX: 10,
offsetY: 20,
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
@ -79,7 +86,7 @@ export class Container {
*/
protected getAppendModels(prevList: Model[], list: Model[]): Model[] {
return list.filter(item => !prevList.find(n => n.id === item.id));
}
}
/**
* 对比上一次和该次 modelList 找出被删除的节点和边
@ -88,7 +95,7 @@ export class Container {
*/
protected getRemoveModels(prevList: Model[], list: Model[]): Model[] {
return prevList.filter(item => !list.find(n => n.id === item.id));
}
}
/**
* 找出重新指向的外部指针
@ -114,14 +121,14 @@ export class Container {
list.forEach(item => {
const prevItem = this.prevModelList.find(prevItem => prevItem.id === item.id);
if(prevItem === undefined) {
if (prevItem === undefined) {
return;
}
const prevLabel = prevItem.get('label'),
label = item.get('label');
label = item.get('label');
if(prevLabel !== label) {
if (prevLabel !== label) {
labelChangeModels.push(item);
}
});
@ -142,8 +149,8 @@ export class Container {
timingFunction: this.animationsOptions.timingFunction,
callback: () => {
counter++;
if(counter === appendModels.length) {
if (counter === appendModels.length) {
this.afterAppendModelsCallbacks.map(item => item(appendModels));
}
}
@ -159,18 +166,18 @@ export class Container {
let counter = 0;
removeModels.forEach(item => {
Animations.animate_remove(item, {
Animations.animate_remove(item, {
duration: this.animationsOptions.duration,
timingFunction: this.animationsOptions.timingFunction,
callback: () => {
if(item.isLeak === false) {
if (item.isLeak === false) {
this.renderer.removeModel(item);
item.renderG6Item = item.G6Item = null;
}
counter++;
if(counter === removeModels.length) {
if (counter === removeModels.length) {
this.afterRemoveModelsCallbacks.map(item => item(removeModels));
}
}
@ -208,12 +215,12 @@ export class Container {
*/
public render(modelList: Model[]) {
const appendModels: Model[] = this.getAppendModels(this.prevModelList, modelList),
removeModels: Model[] = this.getRemoveModels(this.prevModelList, modelList),
changeModels: Model[] = [
...appendModels,
...this.findLabelChangeModels(modelList),
...this.findReTargetMarkers(modelList)
];
removeModels: Model[] = this.getRemoveModels(this.prevModelList, modelList),
changeModels: Model[] = [
...appendModels,
...this.findLabelChangeModels(modelList),
...this.findReTargetMarkers(modelList)
];
// 渲染视图
this.renderer.render(modelList, removeModels);
@ -223,7 +230,7 @@ export class Container {
this.handleRemoveModels(removeModels);
this.handleChangeModels(changeModels);
if(this.renderer.getIsFirstRender()) {
if (this.renderer.getIsFirstRender()) {
this.renderer.setIsFirstRender(false);
}

34
src/View/container/main.ts
View File

@ -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
});
});
}

7
src/View/renderer.ts
View File

@ -92,8 +92,11 @@ export class Renderer {
modelList.forEach(item => {
item.renderG6Item = this.g6Instance.findById(item.id);
item.G6Item = item.renderG6Item;
item.renderG6Item.SVModel = item;
if(item.renderG6Item) {
item.G6Item = item.renderG6Item;
item.renderG6Item.SVModel = item;
}
});
// 把所有连线置顶

7
src/View/viewManager.ts
View File

@ -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) {

1
src/options.ts
View File

@ -55,6 +55,7 @@ export interface LinkOption {
export interface MarkerOption extends ElementOption {
type: 'pointer' | 'cursor';
anchor: number;
offset: number;
labelOffset: number;