wangqi
/
EDFS-MCU
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 实现edge边动画延迟

main
betaqi 4 weeks ago
parent
68063403e4
commit
c4b1005ced
4 changed files with 162 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/views/testG6/index.vue
  2. 32
      src/views/testG6/utils/MyLineEdge.ts
  3. 264
      src/views/testG6/utils/data.ts
  4. 10
      src/views/testG6/utils/index.ts

3
src/views/testG6/index.vue
Unescape View File

@ -14,9 +14,7 @@ import { flattenTree, GenerateGraphData } from "./utils";
onMounted(() => { onMounted(() => {
register(ExtensionCategory.EDGE, 'my-line-edge', MyLineEdge); register(ExtensionCategory.EDGE, 'my-line-edge', MyLineEdge);
const device = flattenTree(DeviceData) const device = flattenTree(DeviceData)
console.log(device)
const graphData = new GenerateGraphData(device) const graphData = new GenerateGraphData(device)
const graph = new Graph({ const graph = new Graph({
container: document.getElementById('container')!, container: document.getElementById('container')!,
@ -32,7 +30,6 @@ onMounted(() => {
}, },
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
}); });
console.log(graphData.getEdges())
graph.render(); graph.render();
}); });

32
src/views/testG6/utils/MyLineEdge.ts
Unescape View File

@ -1,14 +1,15 @@
import { BaseEdge } from '@antv/g6'; import { BaseEdge } from '@antv/g6';
import type { PathArray } from "@antv/util"; import type { PathArray } from "@antv/util";
import { Circle } from '@antv/g'; import { Circle, Line } from '@antv/g';
import { subStyleProps } from '@antv/g6'; import { subStyleProps } from '@antv/g6';
import type { Device } from "./index";
export class MyLineEdge extends BaseEdge { export class MyLineEdge extends BaseEdge {
getMarkerStyle(attributes: object) { getMarkerStyle(attributes: object) {
return { return {
r: 5, r: 4,
fill: '#c3d5f9', fill: '#c3d5f9',
offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker')
}; };
@ -16,10 +17,25 @@ export class MyLineEdge extends BaseEdge {
onCreate() { onCreate() {
const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this)!; const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this)!;
marker.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
duration: 3000, const prev = this.context.model.getRelatedEdgesData(this.sourceNode.id) // 获取源节点的相关边数据
iterations: Infinity, .find((edge) => edge.target === this.targetNode.id) as Device;
});
const depth = prev!.data!.depth - 1;
const delay = depth * 3000; // 每级延迟 3 秒
marker.animate(
[{ offsetDistance: 0 }, { offsetDistance: 1 }],
{
duration: 3000,
iterations: Infinity,
delay,
}
);
// marker.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], {
// duration: 3000,
// iterations: Infinity,
// });
} }
// 这里保持你的路径逻辑 // 这里保持你的路径逻辑
@ -28,8 +44,8 @@ export class MyLineEdge extends BaseEdge {
const [sx, sy] = sourceNode.getPosition(); const [sx, sy] = sourceNode.getPosition();
const [tx, ty] = targetNode.getPosition(); const [tx, ty] = targetNode.getPosition();
const [x1, y1] = sourceNode.getPosition(); // const [x1, y1] = sourceNode.getPosition();
const [x2, y2] = targetNode.getPosition(); // const [x2, y2] = targetNode.getPosition();
// 固定的主干 X // 固定的主干 X
const busX = attrs.busX ?? tx; const busX = attrs.busX ?? tx;

264
src/views/testG6/utils/data.ts
Unescape View File

@ -90,137 +90,137 @@ export default [{
} }
] ]
}, },
// { {
// "id": 402, "id": 402,
// "sn": "yiming-EMS3", "sn": "yiming-EMS3",
// "name": "储能单元3", "name": "储能单元3",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510402", "deviceId": "t00510402",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 1, "type": 1,
// "description": "", "description": "",
// "children": [ "children": [
// { {
// "id": 406, "id": 406,
// "sn": "B48100B210TF36002V-bms", "sn": "B48100B210TF36002V-bms",
// "name": "BMS-3", "name": "BMS-3",
// "sort": 1, "sort": 1,
// "parentId": 402, "parentId": 402,
// "deviceId": "t00510406", "deviceId": "t00510406",
// "dictName": "", "dictName": "",
// "level": 2, "level": 2,
// "type": 2, "type": 2,
// "description": "", "description": "",
// "children": null "children": null
// }, },
// { {
// "id": 410, "id": 410,
// "sn": "B48100B210TF36002V-pcs", "sn": "B48100B210TF36002V-pcs",
// "name": "PCS-3", "name": "PCS-3",
// "sort": 1, "sort": 1,
// "parentId": 402, "parentId": 402,
// "deviceId": "t00510410", "deviceId": "t00510410",
// "dictName": "", "dictName": "",
// "level": 2, "level": 2,
// "type": 3, "type": 3,
// "description": "", "description": "",
// "children": null "children": null
// } }
// ] ]
// }, },
// { {
// "id": 403, "id": 403,
// "sn": "yiming-EMS4", "sn": "yiming-EMS4",
// "name": "储能单元4", "name": "储能单元4",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510403", "deviceId": "t00510403",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 1, "type": 1,
// "description": "", "description": "",
// "children": [ "children": [
// { {
// "id": 407, "id": 407,
// "sn": "B48100B210TF360029-bms", "sn": "B48100B210TF360029-bms",
// "name": "BMS-4", "name": "BMS-4",
// "sort": 1, "sort": 1,
// "parentId": 403, "parentId": 403,
// "deviceId": "t00510407", "deviceId": "t00510407",
// "dictName": "", "dictName": "",
// "level": 2, "level": 2,
// "type": 2, "type": 2,
// "description": "", "description": "",
// "children": null "children": null
// }, },
// { {
// "id": 411, "id": 411,
// "sn": "B48100B210TF360029-pcs", "sn": "B48100B210TF360029-pcs",
// "name": "PCS-4", "name": "PCS-4",
// "sort": 1, "sort": 1,
// "parentId": 403, "parentId": 403,
// "deviceId": "t00510411", "deviceId": "t00510411",
// "dictName": "", "dictName": "",
// "level": 2, "level": 2,
// "type": 3, "type": 3,
// "description": "", "description": "",
// "children": null "children": null
// } }
// ] ]
// }, },
// { {
// "id": 412, "id": 412,
// "sn": "B48100B210TF36003E-em", "sn": "B48100B210TF36003E-em",
// "name": "电量信息-1", "name": "电量信息-1",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510412", "deviceId": "t00510412",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 4, "type": 4,
// "description": "", "description": "",
// "children": null "children": null
// }, },
// { {
// "id": 413, "id": 413,
// "sn": "B48100B210TF36003K-em", "sn": "B48100B210TF36003K-em",
// "name": "电量信息-2", "name": "电量信息-2",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510413", "deviceId": "t00510413",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 4, "type": 4,
// "description": "", "description": "",
// "children": null "children": null
// }, },
// { {
// "id": 414, "id": 414,
// "sn": "B48100B210TF36002V-em", "sn": "B48100B210TF36002V-em",
// "name": "电量信息-3", "name": "电量信息-3",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510414", "deviceId": "t00510414",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 4, "type": 4,
// "description": "", "description": "",
// "children": null "children": null
// }, },
// { {
// "id": 415, "id": 415,
// "sn": "B48100B210TF360029-em", "sn": "B48100B210TF360029-em",
// "name": "电量信息-4", "name": "电量信息-4",
// "sort": 1, "sort": 1,
// "parentId": 398, "parentId": 398,
// "deviceId": "t00510415", "deviceId": "t00510415",
// "dictName": "device_two_entity_type", "dictName": "device_two_entity_type",
// "level": 1, "level": 1,
// "type": 4, "type": 4,
// "description": "", "description": "",
// "children": null "children": null
// } }
] ]
}] }]

10
src/views/testG6/utils/index.ts
Unescape View File

@ -1,7 +1,7 @@
import { flatMap } from 'lodash-es' import { flatMap } from 'lodash-es'
import type { NodeData, EdgeData } from "@antv/g6"; import type { NodeData, EdgeData } from "@antv/g6";
type Device = any export type Device = any
export enum DeviceType { export enum DeviceType {
Ems, Ems,
@ -18,11 +18,12 @@ export enum DeviceType {
Cac, Cac,
} }
export function flattenTree(tree: Device[], dep = 0): Device[] { export function flattenTree(tree: Device[], depth = 0): Device[] {
return flatMap(tree, (node: Device,) => { return flatMap(tree, (node: Device,) => {
const { children, ...rest } = node const { children, ...rest } = node
const current = { ...rest, dep } const current = { ...rest, depth }
return [current, ...(children ? flattenTree(children, dep + 1) : [])] // 有用虚拟节点的存在 depth + 2
return [current, ...(children ? flattenTree(children, depth + 2) : [])]
}) })
} }
@ -56,6 +57,7 @@ export class GenerateGraphData {
data: { data: {
type: 'virtual-node', type: 'virtual-node',
parentId: String(device.id), parentId: String(device.id),
depth: device.depth + 1,
} }
}) })

Write Preview
Loading…
Cancel
Save