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

feat: 将pointer重新定义为marker

Browse Source
This commit is contained in:
黎智洲
2021-07-21 23:51:58 +08:00
parent a0ebd04892
commit da2d43581e
13 changed files with 230 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/container/container.ts
+36 -7
View File
@@ -1,5 +1,5 @@
import { Engine } from "../../engine";
import { Model, Pointer } from "../../Model/modelData";
import { Model, Marker } from "../../Model/modelData";
import { AnimationOptions, InteractionOptions, LayoutGroupOptions } from "../../options";
import { SV } from "../../StructV";
import { Animations } from "../animation";
@@ -95,15 +95,40 @@ export class Container {
* @param list
* @returns
*/
protected findReTargetPointer(list: Model[]): Pointer[] {
let prevPointers = this.prevModelList.filter(item => item instanceof Pointer),
pointers = list.filter(item => item instanceof Pointer);
protected findReTargetMarkers(list: Model[]): Marker[] {
let prevMarkers = this.prevModelList.filter(item => item instanceof Marker),
markers = list.filter(item => item instanceof Marker);
return <Pointer[]>pointers.filter(item => prevPointers.find(prevItem => {
return prevItem.id === item.id && (<Pointer>prevItem).target.id !== (<Pointer>item).target.id
return <Marker[]>markers.filter(item => prevMarkers.find(prevItem => {
return prevItem.id === item.id && (<Marker>prevItem).target.id !== (<Marker>item).target.id
}));
}
/**
* 找出前后 label 发生变化的 model
* @param list
*/
protected findLabelChangeModels(list: Model[]): Model[] {
let labelChangeModels: Model[] = [];
list.forEach(item => {
const prevItem = this.prevModelList.find(prevItem => prevItem.id === item.id);
if(prevItem === undefined) {
return;
}
const prevLabel = prevItem.get('label'),
label = item.get('label');
if(prevLabel !== label) {
labelChangeModels.push(item);
}
});
return labelChangeModels;
}
/**
* 处理新增的 G6Item（主要是动画）
* @param appendData
@@ -184,7 +209,11 @@ 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.findReTargetPointer(modelList)];
changeModels: Model[] = [
...appendModels,
...this.findLabelChangeModels(modelList),
...this.findReTargetMarkers(modelList)
];
// 渲染视图
this.renderer.render(modelList, removeModels);
src/View/container/main.ts
-24
View File
@@ -1,7 +1,6 @@
import { Engine } from "../../engine";
import { Link, Model } from "../../Model/modelData";
import { InteractionOptions, LayoutGroupOptions } from "../../options";
import { Animations } from "../animation";
import { Container } from "./container";
@@ -10,32 +9,9 @@ import { Container } from "./container";
* 主可视化视图
*/
export class MainContainer extends Container {
private leakContainerPosition: { x: number, y: number } = null;
private freedContainerPosition: { x: number, y: number } = null;
constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any } = { }) {
super(engine, DOMContainer, g6Options);
this.leakContainerPosition = this.getDOMPosition(this.engine.engineOptions.leakContainer);
this.freedContainerPosition = this.getDOMPosition(this.engine.engineOptions.freedContainer);
}
/**
*
* @param dom
* @returns
*/
private getDOMPosition(dom: HTMLElement): { x: number, y: number } {
if(dom === null) {
return { x: 0, y: 0 };
}
const bound = dom.getBoundingClientRect();
return {
x: bound.x + bound.width / 2,
y: bound.y + bound.height / 2
};
}
/**
src/View/layouter.ts
+25 -23
View File
@@ -3,8 +3,8 @@ import { Group } from '../Common/group';
import { Vector } from '../Common/vector';
import { Engine } from '../engine';
import { LayoutGroupTable } from '../Model/modelConstructor';
import { Element, Model, Pointer } from '../Model/modelData';
import { LayoutOptions, PointerOption, ViewOptions } from '../options';
import { Element, Model, Marker } from '../Model/modelData';
import { LayoutOptions, MarkerOption, ViewOptions } from '../options';
import { Container } from './container/container';
@@ -21,10 +21,10 @@ export class Layouter {
/**
* 初始化布局参数
* @param elements
* @param pointers
* @param markers
*/
private initLayoutValue(elements: Element[], pointers: Pointer[]) {
[...elements, ...pointers].forEach(item => {
private initLayoutValue(elements: Element[], markers: Marker[]) {
[...elements, ...markers].forEach(item => {
item.set('rotation', item.get('rotation'));
item.set({ x: 0, y: 0 });
});
@@ -32,21 +32,22 @@ export class Layouter {
/**
* 布局外部指针
* @param pointer
* @param pointerOptions
* @param marker
* @param markerOptions
*/
private layoutPointer(pointers: Pointer[], pointerOptions: { [key: string]: PointerOption }) {
pointers.forEach(item => {
const options: PointerOption = pointerOptions[item.getType()],
offset = options.offset || 8,
anchor = item.anchor || 0;
private layoutMarker(markers: Marker[], markerOptions: { [key: string]: MarkerOption }) {
markers.forEach(item => {
const options: MarkerOption = markerOptions[item.getType()],
offset = options.offset ?? 8,
anchor = item.anchor ?? 0,
labelOffset = options.labelOffset ?? 2;
let target = item.target,
targetBound: BoundingRect = target.getBound(),
anchorPosition = item.target.G6Item.getAnchorPoints()[anchor],
center: [number, number] = [targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2],
pointerPosition: [number, number],
pointerEndPosition: [number, number];
markerPosition: [number, number],
markerEndPosition: [number, number];
anchorPosition = [anchorPosition.x, anchorPosition.y];
@@ -60,18 +61,19 @@ export class Layouter {
angle = Math.sign(anchorVector[0]) * (Math.PI / 2 - Math.atan(anchorVector[1] / anchorVector[0]));
}
const pointerHeight = item.get('size')[1];
const markerHeight = item.get('size')[1],
labelRadius = item.getLabelSizeRadius() / 2;
anchorVector = Vector.normalize(anchorVector);
pointerPosition = Vector.location(center, anchorVector, len);
pointerEndPosition = Vector.location(center, anchorVector, pointerHeight + len);
pointerEndPosition = Vector.subtract(pointerEndPosition, pointerPosition);
markerPosition = Vector.location(center, anchorVector, len);
markerEndPosition = Vector.location(center, anchorVector, markerHeight + len + labelRadius + labelOffset);
markerEndPosition = Vector.subtract(markerEndPosition, markerPosition);
item.set({
x: pointerPosition[0],
y: pointerPosition[1],
x: markerPosition[0],
y: markerPosition[1],
rotation: angle,
pointerEndPosition
markerEndPosition
});
});
}
@@ -110,13 +112,13 @@ export class Layouter {
modelGroup.add(item);
});
this.initLayoutValue(group.element, group.pointer); // 初始化布局参数
this.initLayoutValue(group.element, group.marker); // 初始化布局参数
group.layouter.layout(group.element, options); // 布局节点
modelGroupList.push(modelGroup);
});
layoutGroupTable.forEach(group => {
this.layoutPointer(group.pointer, group.options.pointer); // 布局外部指针
this.layoutMarker(group.marker, group.options.marker); // 布局外部指针
});
return modelGroupList;
src/View/viewManager.ts
+1 -1
View File
@@ -81,7 +81,7 @@ export class ViewManager {
freedList.forEach(fItem => {
removeModels.push(...freedGroup.element.splice(freedGroup.element.findIndex(item => item.id === fItem.id), 1));
removeModels.push(...freedGroup.link.splice(freedGroup.link.findIndex(item => item.element.id === fItem.id || item.target.id === fItem.id)));
removeModels.push(...freedGroup.pointer.splice(freedGroup.pointer.findIndex(item => item.target.id === fItem.id)));
removeModels.push(...freedGroup.marker.splice(freedGroup.marker.findIndex(item => item.target.id === fItem.id)));
});
removeModels.map(model => {