feat: 将pointer修改为marker

This commit is contained in:
黎智洲 2021-07-25 23:26:55 +08:00
parent da2d43581e
commit ead2937f66
6 changed files with 75 additions and 24 deletions

2
dist/sv.js vendored

File diff suppressed because one or more lines are too long

View File

@ -153,24 +153,26 @@ export class ModelConstructor {
if(Array.isArray(sourceLinkData)) { if(Array.isArray(sourceLinkData)) {
element[name] = sourceLinkData.map((item, index) => { element[name] = sourceLinkData.map((item, index) => {
targetElement = this.fetchTargetElements(layoutGroupTable, element, item); 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]); link = this.createLink(name, element, targetElement, index, linkOptions[name]);
linkList.push(link); linkList.push(link);
} }
return targetElement; return isGeneralLink? targetElement: null;
}); });
} }
else { else {
targetElement = this.fetchTargetElements(layoutGroupTable, element, sourceLinkData); 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]); link = this.createLink(name, element, targetElement, null, linkOptions[name]);
linkList.push(link); linkList.push(link);
} }
element[name] = targetElement; element[name] = isGeneralLink? targetElement: null;
} }
} }
}); });
@ -356,6 +358,14 @@ export class ModelConstructor {
return targetElement || null; return targetElement || null;
} }
/**
* group
* @param linkId
*/
private isGeneralLink(linkId: string): boolean {
return !linkId.includes('#');
}
/** /**
* *
*/ */

View File

@ -170,6 +170,10 @@ export class Element extends Model {
layouterName: string; layouterName: string;
freed: boolean; freed: boolean;
markers: { [key: string]: Marker }; markers: { [key: string]: Marker };
links: {
inDegree: Link[];
outDegree: Link[];
};
constructor(id: string, type: string, group: string, layouter: string, sourceElement: SourceElement) { constructor(id: string, type: string, group: string, layouter: string, sourceElement: SourceElement) {
super(id, type); super(id, type);
@ -193,6 +197,30 @@ export class Element extends Model {
this.markers = { }; this.markers = { };
} }
/**
* element link marker
*/
isolate() {
this.links.inDegree.forEach(item => {
item.target = null;
});
this.links.outDegree.forEach(item => {
item.element = null;
});
this.links.inDegree.length = 0;
this.links.outDegree.length = 0;
Object.keys(this.markers).forEach(item => {
let marker = this.markers[item];
marker.target = null;
});
this.markers = {};
}
protected defineProps(option: ElementOption): G6NodeModel { protected defineProps(option: ElementOption): G6NodeModel {
return { return {
...this.sourceElement, ...this.sourceElement,
@ -226,6 +254,9 @@ export class Link extends Model {
this.element = element; this.element = element;
this.target = target; this.target = target;
this.index = index; this.index = index;
// element.links.outDegree.push(this);
// target.links.inDegree.push(this);
} }

View File

@ -45,7 +45,7 @@ import { Container } from "./container";
return false; return false;
} }
if(model.SVModelType === 'pointer') { if(model.SVModelType === 'marker') {
return false; return false;
} }
@ -69,7 +69,7 @@ import { Container } from "./container";
return false; return false;
} }
if(model.SVModelType === 'pointer') { if(model.SVModelType === 'marker') {
return false; return false;
} }
@ -105,16 +105,16 @@ import { Container } from "./container";
*/ */
protected afterInitRenderer() { protected afterInitRenderer() {
let g6Instance = this.getG6Instance(), let g6Instance = this.getG6Instance(),
pointer = null, marker = null,
pointerX = null, markerX = null,
pointerY = null, markerY = null,
dragStartX = null, dragStartX = null,
dragStartY = null; dragStartY = null;
g6Instance.on('node:dragstart', ev => { g6Instance.on('node:dragstart', ev => {
const model = ev.item.getModel(); const model = ev.item.getModel();
if(model.SVModelType === 'pointer') { if(model.SVModelType === 'marker') {
return; return;
} }
@ -128,26 +128,26 @@ import { Container } from "./container";
return; return;
} }
pointer = g6Instance.findById(model.externalPointerId); marker = g6Instance.findById(model.markerId);
if(pointer) { if(marker) {
pointerX = pointer.getModel().x, markerX = marker.getModel().x,
pointerY = pointer.getModel().y; markerY = marker.getModel().y;
dragStartX = ev.canvasX; dragStartX = ev.canvasX;
dragStartY = ev.canvasY; dragStartY = ev.canvasY;
} }
}); });
g6Instance.on('node:dragend', ev => { g6Instance.on('node:dragend', ev => {
pointer = null; marker = null;
pointerX = null, markerX = null,
pointerY = null, markerY = null,
dragStartX = null, dragStartX = null,
dragStartY = null; dragStartY = null;
}); });
g6Instance.on('node:drag', ev => { g6Instance.on('node:drag', ev => {
if(!pointer) { if(!marker) {
return; return;
} }
@ -155,9 +155,9 @@ import { Container } from "./container";
dy = ev.canvasY - dragStartY, dy = ev.canvasY - dragStartY,
zoom = g6Instance.getZoom(); zoom = g6Instance.getZoom();
pointer.updatePosition({ marker.updatePosition({
x: pointerX + dx / zoom, x: markerX + dx / zoom,
y: pointerY + dy / zoom y: markerY + dy / zoom
}); });
}); });
} }

View File

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

View File

@ -68,11 +68,15 @@ export class ViewManager {
removeModels: Model[] = []; removeModels: Model[] = [];
layoutGroupTable.forEach((group, key) => { 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) { if(freedElements.length) {
freedGroupName = key; freedGroupName = key;
freedList = freedElements; freedList = freedElements;
freedElements.forEach(item => {
// item.isolate()
});
} }
}); });
@ -107,6 +111,7 @@ export class ViewManager {
elements.forEach(item => { elements.forEach(item => {
elementIds.push(item.id); elementIds.push(item.id);
item.set('style', { item.set('style', {
fill: '#ccc' fill: '#ccc'
}); });
@ -189,7 +194,7 @@ export class ViewManager {
renderAll(layoutGroupTable: LayoutGroupTable) { renderAll(layoutGroupTable: LayoutGroupTable) {
this.shadowG6Instance.clear(); this.shadowG6Instance.clear();
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable); let modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
this.build(modelList); this.build(modelList);
@ -209,6 +214,8 @@ export class ViewManager {
// 进行布局设置model的xy // 进行布局设置model的xy
this.layouter.layoutAll(this.mainContainer, layoutGroupTable); this.layouter.layoutAll(this.mainContainer, layoutGroupTable);
// 从新获取一次因为第一次获取没有把freed节点筛选出去
modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
this.mainContainer.render(modelList); this.mainContainer.render(modelList);
if(this.leakContainer) { if(this.leakContainer) {