Skip to content

Commit 3652293

Browse files
devhelprdevhelpr
committed
improvements for importing ocif data
1 parent 3f89bac commit 3652293

File tree

6 files changed

+207
-12
lines changed

6 files changed

+207
-12
lines changed

‎apps/vps-web/public/test-with-connection.ocif.json‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
{
2+
"ocif": "https://canvasprotocol.org/ocif/0.2",
3+
"nodes": [
4+
{
5+
"id": "112cc79c-6ea0-4438-baf1-9d34bb0660e2",
6+
"position": [-117.05704093373691, 88.18055130305666],
7+
"size": [200, 100],
8+
"data": [
9+
{
10+
"type": "@code-flow-canvas/node-properties",
11+
"formValues": {},
12+
"text": "rect",
13+
"taskType": "rect-node",
14+
"nodeType": "rect-node"
15+
},
16+
{
17+
"type": "@ocwg/node/ports",
18+
"ports": ["input-output"]
19+
}
20+
]
21+
},
22+
{
23+
"id": "01d07003-7347-4a12-8955-a0ecd2b293c9",
24+
"position": [284.22932347659525, 223.8293644103727],
25+
"size": [200, 100],
26+
"data": [
27+
{
28+
"type": "@code-flow-canvas/node-properties",
29+
"formValues": {},
30+
"text": "rect",
31+
"taskType": "rect-node",
32+
"nodeType": "rect-node"
33+
},
34+
{
35+
"type": "@ocwg/node/ports",
36+
"ports": ["input-output"]
37+
}
38+
]
39+
},
40+
{
41+
"id": "connection:31a62e02-39f9-4a58-9e08-f570336e71ec",
42+
"position": [-17.057037867826054, 138.18055283601208],
43+
"size": [0, 0],
44+
"data": [
45+
{
46+
"type": "@code-flow-canvas/connection-properties",
47+
"lineType": "Straight",
48+
"start": {
49+
"connected_to": "112cc79c-6ea0-4438-baf1-9d34bb0660e2",
50+
"port_name": "input-output"
51+
},
52+
"end": {
53+
"connected_to": "01d07003-7347-4a12-8955-a0ecd2b293c9",
54+
"port_name": "input-output"
55+
}
56+
}
57+
]
58+
}
59+
],
60+
"relations": [
61+
{
62+
"id": "31a62e02-39f9-4a58-9e08-f570336e71ec-edge",
63+
"data": [
64+
{
65+
"type": "@ocwg/rel/edge",
66+
"from": "112cc79c-6ea0-4438-baf1-9d34bb0660e2",
67+
"to": "01d07003-7347-4a12-8955-a0ecd2b293c9",
68+
"directed": true
69+
}
70+
]
71+
}
72+
],
73+
"resources": [],
74+
"schemas": [
75+
{
76+
"uri": "https://codeflowcanvas.io/schemas/node/0.1.json",
77+
"name": "@code-flow-canvas/node-properties",
78+
"type": "object",
79+
"properties": {
80+
"type": {
81+
"type": "string"
82+
},
83+
"nodeType": {
84+
"type": "string"
85+
}
86+
},
87+
"required": ["type", "nodeType"],
88+
"additionalProperties": true
89+
},
90+
{
91+
"uri": "https://codeflowcanvas.io/schemas/connection/0.1.json",
92+
"name": "@code-flow-canvas/connection-properties",
93+
"type": "object",
94+
"properties": {
95+
"type": {
96+
"type": "string"
97+
},
98+
"start": {
99+
"type": "object",
100+
"properties": {
101+
"connected_to": {
102+
"type": "string"
103+
},
104+
"portName": {
105+
"type": "string"
106+
}
107+
},
108+
"required": ["connected_to", "portName"],
109+
"additionalProperties": false
110+
},
111+
"end": {
112+
"type": "object",
113+
"properties": {
114+
"connected_to": {
115+
"type": "string"
116+
},
117+
"portName": {
118+
"type": "string"
119+
}
120+
},
121+
"required": ["connected_to", "portName"],
122+
"additionalProperties": false
123+
}
124+
},
125+
"required": ["type", "start", "end"],
126+
"additionalProperties": true
127+
}
128+
]
129+
}

‎apps/vps-web/public/test.ocif.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
{
2727
"type": "rect-node",
2828
"strokeColor": "red",
29-
"strokeWidth": "2px",
29+
"strokeWidth": 2,
3030
"fillColor": "darkred"
3131
}
3232
]

‎apps/vps-web/public/test.with-relation.ocif.json‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,35 @@
88
},
99
{
1010
"id": "n2",
11-
"position": [100, 100],
11+
"position": [300, 400],
1212
"data": [
1313
{
14-
"type": "circle-node",
15-
"radius": 50
14+
"type": "rect-node"
15+
}
16+
]
17+
},
18+
{
19+
"id": "c2",
20+
"data": [
21+
{
22+
"type": "arrow-node",
23+
"from": "n1",
24+
"to": "n2"
1625
}
1726
]
1827
}
1928
],
2029
"relations": [
2130
{
22-
"type": "@ocwg/set",
23-
"members": ["n1", "n2"]
31+
"type": "@ocwg/rel/edge",
32+
"data": [
33+
{
34+
"from": "n1",
35+
"to": "n2",
36+
"directed": true,
37+
"edge": "c2"
38+
}
39+
]
2440
}
2541
],
2642
"resources": [

‎libs/app-canvas/src/app/components/navbar-components.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export class NavbarComponent extends Component<
150150
}}
151151
dropdownItems={[
152152
{
153-
caption: 'Import as OCIF',
153+
caption: 'Import OCIF',
154154
onClick: () => {
155155
const input = document.createElement(
156156
'input'
@@ -655,6 +655,12 @@ export class NavbarComponent extends Component<
655655
if (event && event.target && event.target.result) {
656656
const data = JSON.parse(event.target.result.toString());
657657
console.log('IMPORT DATA', data);
658+
if (data.ocif) {
659+
alert(
660+
"Can't import OCIF file this way... use OCIF import option"
661+
);
662+
return;
663+
}
658664
setStopAnimations();
659665
const interval = setInterval(() => {
660666
if (!getIsStopAnimations()) {

‎libs/app-canvas/src/app/exporters/export-ocwg.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -269,13 +269,14 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
269269
...nodeInfo,
270270
type: connectionNodeInfoPropertyName,
271271
nodeType: nodeInfo.type,
272+
lineType: (nodeInfo as any).lineType ?? 'Straight',
272273
start: {
273274
connected_to: `${node.startNode.id}`,
274-
port_name: 'output',
275+
port_name: node.startNodeThumb?.thumbName ?? 'output',
275276
},
276277
end: {
277278
connected_to: `${node.endNode.id}`,
278-
port_name: 'input',
279+
port_name: node.endNodeThumb?.thumbName ?? 'input',
279280
},
280281
},
281282
],
@@ -318,6 +319,7 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
318319
...nodeInfo,
319320
type: connectionNodeInfoPropertyName,
320321
nodeType: nodeInfo.type,
322+
lineType: (nodeInfo as any).lineType ?? 'Straight',
321323
start: {
322324
connected_to: `${node.startNode.id}`,
323325
port_name: node.startNodeThumb?.thumbName,

‎libs/app-canvas/src/app/importers/ocif-importer.ts‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@ function isSupportedOCIFNode(ocifNode: any): boolean {
1818
);
1919
}
2020

21+
function isSupportedOCIFConnectionNode(ocifNode: any): boolean {
22+
return (
23+
ocifNode.data &&
24+
Array.isArray(ocifNode.data) &&
25+
ocifNode.data.some(
26+
(d: any) => d.type === 'arrow-node' || d.type === '@ocwg/node/arrow'
27+
)
28+
);
29+
}
30+
2131
function getExtenstionData(ocifNode: any, extensionName: string): any {
2232
return ocifNode.data.find((d: any) => d.type === extensionName);
2333
}
@@ -59,16 +69,35 @@ function getConnectionInfoFromOCIFNode(node: any): any | false {
5969
clonedNodeInfo.type = clonedNodeInfo.nodeType;
6070
delete clonedNodeInfo.nodeType;
6171
return {
62-
endX: node.position[0],
63-
endY: node.position[1],
72+
endX: node.position?.[0],
73+
endY: node.position?.[1],
6474
startNodeId: clonedNodeInfo.start.connected_to,
6575
endNodeId: clonedNodeInfo.end.connected_to,
6676
startThumbName: clonedNodeInfo.start.port_name,
6777
endThumbName: clonedNodeInfo.end.port_name,
68-
lineType: 'BezierCubic',
78+
lineType: clonedNodeInfo.lineType ?? 'BezierCubic',
6979
layer: 1,
7080
nodeInfo: {},
7181
};
82+
} else {
83+
if (node.data && Array.isArray(node.data)) {
84+
const data = node.data.find(
85+
(d: any) => d.type === 'arrow-node' || d.type === '@ocwg/node/arrow'
86+
);
87+
if (data) {
88+
return {
89+
endX: node.position?.[0],
90+
endY: node.position?.[1],
91+
startNodeId: data.from,
92+
endNodeId: data.to,
93+
startThumbName: data.start?.port_name ?? 'input-output',
94+
endThumbName: data.end?.port_name ?? 'input-output',
95+
lineType: 'Straight',
96+
layer: 1,
97+
nodeInfo: {},
98+
};
99+
}
100+
}
72101
}
73102
return false;
74103
}
@@ -114,6 +143,8 @@ export const importOCIF = (ocif: any) => {
114143
id: node.id,
115144
x: node.position[0],
116145
y: node.position[1],
146+
width: node.size?.[0] ?? 100,
147+
height: node.size?.[1] ?? 100,
117148
nodeInfo: nodeInfo,
118149
nodeType: 'Shape',
119150
});
@@ -157,6 +188,17 @@ export const importOCIF = (ocif: any) => {
157188
} as any,
158189
});
159190
console.log('ocif node size', node.size);
191+
} else if (node.data && isSupportedOCIFConnectionNode(node)) {
192+
const connection = getConnectionInfoFromOCIFNode(node);
193+
if (connection) {
194+
flow.flows['flow'].nodes.push({
195+
id: node.id,
196+
x: node.position?.[0],
197+
y: node.position?.[1],
198+
nodeType: 'Connection',
199+
...connection,
200+
});
201+
}
160202
} else if (!node.data) {
161203
let text = '';
162204
const resource = getResourceById(ocif, node.resource);

0 commit comments

Comments
 (0)