feat: 将pointer修改为marker
This commit is contained in:
parent
da2d43581e
commit
ead2937f66
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)) {
|
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('#');
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 销毁
|
* 销毁
|
||||||
*/
|
*/
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 把所有连线置顶
|
// 把所有连线置顶
|
||||||
|
@ -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的x,y)
|
// 进行布局(设置model的x,y)
|
||||||
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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user