Skip to content

Commit 53f660a

Browse files
gwenaelpgwenaelp
committed
internals refactor
1 parent a8d53b8 commit 53f660a

23 files changed

+915
-134
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,16 @@
5959
"@babel/preset-env": "7.12.13",
6060
"@histoire/plugin-vue": "^0.17.6",
6161
"@vitejs/plugin-vue": "^4.3.4",
62-
"@vitejs/plugin-vue2": "^2.2.0",
6362
"@vue/compiler-sfc": "^3.3.4",
6463
"@vue/tsconfig": "^0.4.0",
6564
"draggable-vue-directive": "^1.1.0",
6665
"histoire": "^0.17.6",
6766
"svg-pan-zoom": "^3.6.1",
67+
"tiny-emitter": "^2.1.0",
6868
"typedoc": "^0.25.4",
6969
"typedoc-plugin-vue": "^1.1.0",
7070
"typescript": "^5.2.2",
71+
"uuid": "^10.0.0",
7172
"vite": "^5.0.2",
7273
"vite-plugin-dts": "^3.6.3",
7374
"vue": "^3.3.4",

‎src/DiagramModel.ts

+49-13
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
// @ts-check
22
import DiagramNode from "./DiagramNode";
3-
4-
var generateId = function() {
5-
return Math.trunc(Math.random() * 1000);
6-
};
3+
import Emitter from 'tiny-emitter';
4+
import generateId from './generateId.ts';
75

86
/**
97
* @class DiagramModel
108
*/
119
class DiagramModel {
1210
private _model: any;
11+
public emitter: any;
1312

1413
constructor() {
1514
this._model = {
1615
nodes: [],
1716
links: [],
1817
};
18+
this.emitter = new Emitter();
1919
}
2020

2121
/**
@@ -35,20 +35,24 @@ class DiagramModel {
3535
for (let j = 0; j < this._model.links.length; j++) {
3636
const currentLink = this._model.links[j];
3737

38-
for (let i = 0; i < node.ports.length; i++) {
39-
const currentPort = node.ports[i];
38+
if (node.ports.length) {
39+
for (let i = 0; i < node.ports.length; i++) {
40+
const currentPort = node.ports[i];
4041

41-
if (currentLink.from === currentPort.id || currentLink.to === currentPort.id) {
42-
this.deleteLink(currentLink);
43-
j--;
42+
if (currentLink.from === currentPort.id || currentLink.to === currentPort.id) {
43+
this.deleteLink(currentLink);
44+
j--;
45+
}
4446
}
4547
}
4648
}
49+
this.emitter.emit('deleteNode', node);
4750
this._model.nodes.splice(index, 1);
4851
}
4952

5053
deleteLink(link: Object) { //FIXME link
5154
const index = this._model.links.indexOf(link);
55+
this.emitter.emit('deleteLink', link);
5256
this._model.links.splice(index, 1);
5357
}
5458

@@ -65,23 +69,55 @@ class DiagramModel {
6569
points,
6670
options,
6771
});
72+
return this._model.links[this._model.links.length - 1];
6873
}
6974

7075
/**
7176
* Serializes the diagram model into a JSON object
72-
* @return {Object} The diagram model
77+
* @return {string} The diagram model as a string
7378
*/
7479
serialize() {
75-
//FIXME
76-
//return JSON.stringify(this._model);
80+
const res = {
81+
nodes: [],
82+
links: [],
83+
}
84+
for (let n of this._model.nodes) {
85+
const serializedNode = {};
86+
for(let k of Object.keys(n)) {
87+
if(k !== 'diagram') {
88+
serializedNode[k] = n[k];
89+
}
90+
}
91+
res.nodes.push(serializedNode);
92+
}
93+
for (let l of this._model.links) {
94+
const serializedLink = {};
95+
for(let k of Object.keys(l)) {
96+
if(k !== 'diagram') {
97+
serializedLink[k] = l[k];
98+
}
99+
}
100+
res.links.push(serializedLink);
101+
}
102+
103+
return JSON.stringify(res);
77104
}
78105

79106
/**
80107
* Load into the diagram model a serialized diagram
81-
* @param {Object} serializedModel
108+
* @param {string} serializedModel
82109
*/
83110
deserialize(serializedModel: string) {
84111
this._model = JSON.parse(serializedModel);
112+
for(let i = 0 ; i <= this._model.nodes.length; i++) {
113+
const newNode = this._model.nodes[i];
114+
if (newNode) {
115+
this._model.nodes[i] = new DiagramNode(this, newNode.id, newNode.title);
116+
for (let k of Object.keys(newNode)) {
117+
this._model.nodes[i][k] = newNode[k];
118+
}
119+
}
120+
}
85121
}
86122
}
87123

‎src/DiagramNode.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
// @ts-check
2-
var generateId = function() {
3-
return Math.trunc(Math.random() * 1000);
4-
};
2+
import generateId from './generateId.ts';
53

64
const diagramFor: { [key: number]: Object } = {};
75

@@ -47,7 +45,7 @@ class DiagramNode {
4745

4846
this.ports.push(newPort);
4947

50-
return newPort.id;
48+
return newPort;
5149
}
5250

5351
/**
@@ -63,11 +61,11 @@ class DiagramNode {
6361

6462
this.ports.push(newPort);
6563

66-
return newPort.id;
64+
return newPort;
6765
}
6866

6967
removePortLinks(id: number) {
70-
for (let l of (diagramFor[id] as any)._model.links) {
68+
for (let l of (this.diagram as any)._model.links) {
7169
if (l.from === id || l.to === id) {
7270
(this.diagram as any).deleteLink(l);
7371
}
@@ -76,7 +74,17 @@ class DiagramNode {
7674

7775
deletePort(id: number) {
7876
this.removePortLinks(id);
77+
this.diagram._model.nodes = this.diagram._model.nodes.map(n => {
78+
if (n.id === this.id) {
79+
const oldLength = n.ports.length;
80+
n.ports = n.ports.filter(p => p.id !== id);
81+
console.log('found node', n, oldLength, n.ports.length);
82+
83+
}
84+
return n;
85+
});
7986
this.ports = this.ports.filter(p => (p as any).id !== id);
87+
(this.diagram as any).emitter.emit('deletePort', id);
8088
}
8189

8290
}

‎src/NodeResizeHandles.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ const directions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
1515
constructor(container: HTMLElement, width: number, height: number, startDragHandler?: (event: any) => void) {
1616
this.container = container;
1717
container.innerHTML = `
18-
<rect class="resize-handle edge" data-direction="nw" x="-2" y="-5" width="5" height="5" />
19-
<rect class="resize-handle" data-direction="n" x="0" y="-3" height="3" />
20-
<rect class="resize-handle edge" data-direction="ne" y="-5" width="5" height="5" />
21-
<rect class="resize-handle" data-direction="e" y="0" width="3" />
22-
<rect class="resize-handle edge" data-direction="se" width="5" height="5" />
23-
<rect class="resize-handle" data-direction="s" x="0" height="3" />
24-
<rect class="resize-handle edge" data-direction="sw" x="-2" width="5" height="5" />
25-
<rect class="resize-handle" data-direction="w" x="-2" y="0" width="3" />
18+
<rect class="resize-handle edge nw" data-direction="nw" x="-2" y="-5" width="5" height="5" />
19+
<rect class="resize-handle horizontal n" data-direction="n" x="0" y="-3" height="3" />
20+
<rect class="resize-handle edge ne" data-direction="ne" y="-5" width="5" height="5" />
21+
<rect class="resize-handle vertical e" data-direction="e" y="0" width="3" />
22+
<rect class="resize-handle edge se" data-direction="se" width="5" height="5" />
23+
<rect class="resize-handle horizontal s" data-direction="s" x="0" height="3" />
24+
<rect class="resize-handle edge sw" data-direction="sw" x="-2" width="5" height="5" />
25+
<rect class="resize-handle vertical w" data-direction="w" x="-2" y="0" width="3" />
2626
`;
2727

2828
this.startDragHandler = startDragHandler;

0 commit comments

Comments
 (0)