diff --git a/src/components/EditorWindow.vue b/src/components/EditorWindow.vue index 63ef4c4..afffeab 100644 --- a/src/components/EditorWindow.vue +++ b/src/components/EditorWindow.vue @@ -13,30 +13,34 @@ const graph = ref({ edges: [] }) -const emptyNode = { - id: -1, - label: "", +const emptyNode: GraphNode = { + code: "", name: "", text: "", applications: [], + id: "", + label: "", links: [], } +const updatedNodeID = ref("") const selectedNode = ref({ - id: -1, - label: "", + code: "", name: "", text: "", applications: [], + id: "", + label: "", links: [], }) const focusedNode = ref({ - id: -1, - label: "", + code: "", name: "", text: "", applications: [], + id: "", + label: "", links: [], }) @@ -58,6 +62,11 @@ async function loadGraph() { edge.color = '#cccccc' } }) + graph.value.nodes = graph.value.nodes.map(function (it: GraphNode) { + it.id = it.code + it.label = it.name + return it + }) displayEdges.value = graph.value.edges.length data = { nodes: graph.value.nodes, @@ -99,8 +108,12 @@ onMounted(async () => { } net = new Network(network.value, data, options) net.on("click", function (params) { + console.log("click graph:", params) if (params.nodes.length > 0) { - selectNode(graph.value.nodes[params.nodes[0]]) + const clickNode = graph.value.nodes.find(function (it: GraphNode): boolean { return it.code == params.nodes[0] }) + if (clickNode !== undefined) { + selectNode(clickNode) + } } else if (params.edges.length > 0) { console.log("Clicked edge:", params.edges[0]); } @@ -111,44 +124,45 @@ onMounted(async () => { }) function selectNode(node: GraphNode) { - console.log("Select node:", node.id) + console.log("Select node:", node) + updatedNodeID.value = node.code selectedNode.value = node const links = graph.value.edges.filter(function (it: GraphEdge) { - return it.from == node.id + return it.from == node.code }).map(function (it: GraphEdge): GraphNode { const id = it.to - const linkNode = graph.value.nodes.filter(function (it: GraphNode) { return it.id == id }) + const linkNode = graph.value.nodes.filter(function (it: GraphNode) { return it.code == id }) return linkNode[0] }) selectedNode.value.links = links - net.selectNodes([selectedNode.value.id]) + net.selectNodes([selectedNode.value.code]) } function focusNode(node: GraphNode) { - console.log("Focus node:", node.id) + console.log("Focus node:", node.code) focusedNode.value = node } function copyLink(node: GraphNode) { - console.log("Focus node:", node.id) - navigator.clipboard.writeText("([" + node.label + "])") + console.log("Focus node:", node.code) + navigator.clipboard.writeText("([" + node.code + "])") focusedNode.value = emptyNode } async function updateSelectedNode() { console.log("Update node:", selectedNode.value) - await updateNode(selectedNode.value) + await updateNode(updatedNodeID.value, selectedNode.value) await loadGraph() const nodes = graph.value.nodes.filter(function (it: GraphNode) { - return it.id == selectedNode.value.id + return it.code == selectedNode.value.code }) selectNode(nodes[0]) } function nodeHeader(node: GraphNode): string { - return "[" + node.label + "] - " + node.name + return "[" + node.code + "] - " + node.name } @@ -162,27 +176,27 @@ function nodeHeader(node: GraphNode): string {
-

Точки

-
Всего точек: {{ graph.nodes.length }}
+

Точки

+
Всего точек: {{ graph.nodes.length }}
+
+ Всего связей: {{ allEdges }}, показано: {{ displayEdges }}
- Всего связей: {{ allEdges }}, показано: {{ displayEdges }} -
- Показать все связи: - -
+ Показать все связи: +
-
+
+
-
+
- {{ nodeHeader(node) }} ({{ node.applications.length }}) - + Ссылка @@ -193,7 +207,8 @@ function nodeHeader(node: GraphNode): string {

Редактирование точки

- {{ nodeHeader(selectedNode) }} + -
@@ -206,7 +221,7 @@ function nodeHeader(node: GraphNode): string {

Ссылки: {{ selectedNode.links.length }}

-
+
- {{ nodeHeader(node) }}
@@ -301,6 +316,13 @@ function nodeHeader(node: GraphNode): string { display: none; } +.node-code-edit-field { + width: 50px; +} + +.node-name-edit-field { + width: 220px; +} .checkbox-green { diff --git a/src/components/client.ts b/src/components/client.ts index 8b4652c..c88b09e 100644 --- a/src/components/client.ts +++ b/src/components/client.ts @@ -112,11 +112,11 @@ export const getGraph = async () => { } } -export const updateNode = async (node: GraphNode) => { +export const updateNode = async (code: string, node: GraphNode) => { try { const response = await fetch(getApiUrl('/graph/nodes'), { method: 'PUT', - body: JSON.stringify({ node: node }), + body: JSON.stringify({ code: code, node: node }), }) if (!response.ok) { throw new Error(`http error status: ${response.status}`) diff --git a/src/components/models.ts b/src/components/models.ts index 0eebb3d..1230320 100644 --- a/src/components/models.ts +++ b/src/components/models.ts @@ -28,17 +28,20 @@ export type Graph = { } export type GraphNode = { - id: number - label: string + code: string name: string text: string applications: Array + + // fields for graph + id: string + label: string links: Array } export type GraphEdge = { - from: number - to: number + from: string + to: string arrows: string type: string color: string