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)) {
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,14 @@ export class ModelConstructor {
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;
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);
@ -193,6 +197,30 @@ export class Element extends Model {
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 {
return {
...this.sourceElement,
@ -226,6 +254,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);
}

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

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;
}
});
// 把所有连线置顶

View File

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