@receptron/graphai_vue_cytoscape 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cytoscape.d.ts +3 -0
- package/lib/cytoscape.js +35 -1
- package/package.json +1 -1
package/lib/cytoscape.d.ts
CHANGED
|
@@ -7,4 +7,7 @@ export declare const useCytoscape: (selectedGraph: ComputedRef<GraphData> | Ref<
|
|
|
7
7
|
cytoscapeRef: Ref<any, any>;
|
|
8
8
|
updateCytoscape: (nodeId: string, state: NodeState) => Promise<void>;
|
|
9
9
|
resetCytoscape: () => void;
|
|
10
|
+
layoutCytoscape: (key: string) => void;
|
|
11
|
+
loadLayout: (key: string) => void;
|
|
12
|
+
zoomingEnabled: Ref<boolean, boolean>;
|
|
10
13
|
};
|
package/lib/cytoscape.js
CHANGED
|
@@ -114,7 +114,6 @@ var colorMap = (_a = {},
|
|
|
114
114
|
_a);
|
|
115
115
|
var parseInput = function (input) {
|
|
116
116
|
// WARNING: Assuming the first character is always ":"
|
|
117
|
-
console.log(input);
|
|
118
117
|
var ids = input.slice(1).split(".");
|
|
119
118
|
var source = ids.shift() || "";
|
|
120
119
|
var label = ids.length ? ids.join(".") : undefined;
|
|
@@ -191,6 +190,7 @@ var useCytoscape = function (selectedGraph) {
|
|
|
191
190
|
var cy = null;
|
|
192
191
|
var cytoscapeData = (0, vue_1.ref)(cytoscapeFromGraph((_a = selectedGraph.value) !== null && _a !== void 0 ? _a : { nodes: {} }));
|
|
193
192
|
var cytoscapeRef = (0, vue_1.ref)();
|
|
193
|
+
var zoomingEnabled = (0, vue_1.ref)(true);
|
|
194
194
|
var updateCytoscape = function (nodeId, state) { return __awaiter(void 0, void 0, void 0, function () {
|
|
195
195
|
var elements, graph, nodeData;
|
|
196
196
|
var _a, _b, _c;
|
|
@@ -309,10 +309,44 @@ var useCytoscape = function (selectedGraph) {
|
|
|
309
309
|
createCytoscape();
|
|
310
310
|
updateGraphData();
|
|
311
311
|
});
|
|
312
|
+
var layoutCytoscape = function (key) {
|
|
313
|
+
if (cy) {
|
|
314
|
+
var positions = cy.nodes().map(function (node) {
|
|
315
|
+
return {
|
|
316
|
+
id: node.id(),
|
|
317
|
+
position: node.position(),
|
|
318
|
+
};
|
|
319
|
+
});
|
|
320
|
+
console.log(JSON.stringify(positions));
|
|
321
|
+
localStorage.setItem("layoutData-" + key, JSON.stringify(positions));
|
|
322
|
+
}
|
|
323
|
+
};
|
|
324
|
+
var loadLayout = function (key) {
|
|
325
|
+
var savedLayoutData = localStorage.getItem("layoutData-" + key);
|
|
326
|
+
if (savedLayoutData) {
|
|
327
|
+
var positions = JSON.parse(savedLayoutData);
|
|
328
|
+
positions.forEach(function (data) {
|
|
329
|
+
if (cy) {
|
|
330
|
+
var node = cy.getElementById(data.id);
|
|
331
|
+
if (node) {
|
|
332
|
+
node.position(data.position);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
(0, vue_1.watch)(zoomingEnabled, function (value) {
|
|
339
|
+
if (cy) {
|
|
340
|
+
cy.zoomingEnabled(value);
|
|
341
|
+
}
|
|
342
|
+
});
|
|
312
343
|
return {
|
|
313
344
|
cytoscapeRef: cytoscapeRef,
|
|
314
345
|
updateCytoscape: updateCytoscape,
|
|
315
346
|
resetCytoscape: resetCytoscape,
|
|
347
|
+
layoutCytoscape: layoutCytoscape,
|
|
348
|
+
loadLayout: loadLayout,
|
|
349
|
+
zoomingEnabled: zoomingEnabled,
|
|
316
350
|
};
|
|
317
351
|
};
|
|
318
352
|
exports.useCytoscape = useCytoscape;
|