update edit node
This commit is contained in:
parent
22628971ac
commit
25c4f8fb79
@ -13,30 +13,34 @@ const graph = ref<Graph>({
|
||||
edges: []
|
||||
})
|
||||
|
||||
const emptyNode = {
|
||||
id: -1,
|
||||
label: "",
|
||||
const emptyNode: GraphNode = {
|
||||
code: "",
|
||||
name: "",
|
||||
text: "",
|
||||
applications: [],
|
||||
id: "",
|
||||
label: "",
|
||||
links: [],
|
||||
}
|
||||
|
||||
const updatedNodeID = ref("")
|
||||
const selectedNode = ref<GraphNode>({
|
||||
id: -1,
|
||||
label: "",
|
||||
code: "",
|
||||
name: "",
|
||||
text: "",
|
||||
applications: [],
|
||||
id: "",
|
||||
label: "",
|
||||
links: [],
|
||||
})
|
||||
|
||||
const focusedNode = ref<GraphNode>({
|
||||
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
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -162,27 +176,27 @@ function nodeHeader(node: GraphNode): string {
|
||||
<div ref="network" class="graph-container"></div>
|
||||
|
||||
<div class="nodes-container">
|
||||
<h2>Точки</h2>
|
||||
<div>Всего точек: {{ graph.nodes.length }}</div>
|
||||
<h2>Точки</h2>
|
||||
<div>Всего точек: {{ graph.nodes.length }}</div>
|
||||
<div>
|
||||
Всего связей: {{ allEdges }}, показано: {{ displayEdges }}
|
||||
<div>
|
||||
Всего связей: {{ allEdges }}, показано: {{ displayEdges }}
|
||||
<div>
|
||||
Показать все связи:
|
||||
<label class="checkbox-green">
|
||||
<input type="checkbox" v-on:click="onApplicationEdges = !onApplicationEdges, loadGraph()">
|
||||
<span class="checkbox-green-switch" data-label-on="Вкл" data-label-off="Выкл"></span>
|
||||
</label>
|
||||
</div>
|
||||
Показать все связи:
|
||||
<label class="checkbox-green">
|
||||
<input type="checkbox" v-on:click="onApplicationEdges = !onApplicationEdges, loadGraph()">
|
||||
<span class="checkbox-green-switch" data-label-on="Вкл" data-label-off="Выкл"></span>
|
||||
</label>
|
||||
</div>
|
||||
<hr class="hr">
|
||||
</div>
|
||||
<hr class="hr">
|
||||
|
||||
<div class="scroll-y">
|
||||
<div v-bind:key="node.id" v-for="node in graph.nodes">
|
||||
<div v-bind:key="node.code" v-for="node in graph.nodes">
|
||||
<span v-on:mouseenter="focusNode(node)" v-on:mouseleave="focusNode(emptyNode)">
|
||||
<span :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
|
||||
<span :class="[node.code == selectedNode.code ? 'selected-node' : '']" class="node-select-button"
|
||||
v-on:click="selectNode(node)">{{ nodeHeader(node) }}</span>
|
||||
<span v-if="node.applications.length > 0"> ({{ node.applications.length }})</span>
|
||||
<span v-if="node.id == focusedNode.id" class="copy-node-link" v-on:click="copyLink(node)">
|
||||
<span v-if="node.code == focusedNode.code" class="copy-node-link" v-on:click="copyLink(node)">
|
||||
Ссылка
|
||||
</span>
|
||||
</span>
|
||||
@ -193,7 +207,8 @@ function nodeHeader(node: GraphNode): string {
|
||||
<div class="edit-node-container">
|
||||
<h2>Редактирование точки</h2>
|
||||
<div>
|
||||
{{ nodeHeader(selectedNode) }}
|
||||
<input v-model="updatedNodeID" type="text" class="node-code-edit-field" maxlength="3"/> - <input
|
||||
v-model="selectedNode.name" type="text" class="node-name-edit-field"/>
|
||||
</div>
|
||||
<div>
|
||||
<textarea class="node-text-edit-field" rows="25" v-model="selectedNode.text"></textarea>
|
||||
@ -206,7 +221,7 @@ function nodeHeader(node: GraphNode): string {
|
||||
</div>
|
||||
<div>
|
||||
<h3>Ссылки: {{ selectedNode.links.length }}</h3>
|
||||
<div v-bind:key="node.id" v-for="node in selectedNode.links">
|
||||
<div v-bind:key="node.code" v-for="node in selectedNode.links">
|
||||
<div class="node-select-button" v-on:click="selectNode(node)">
|
||||
- {{ nodeHeader(node) }}
|
||||
</div>
|
||||
@ -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 {
|
||||
|
||||
@ -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}`)
|
||||
|
||||
@ -28,17 +28,20 @@ export type Graph = {
|
||||
}
|
||||
|
||||
export type GraphNode = {
|
||||
id: number
|
||||
label: string
|
||||
code: string
|
||||
name: string
|
||||
text: string
|
||||
applications: Array<GraphApplication>
|
||||
|
||||
// fields for graph
|
||||
id: string
|
||||
label: string
|
||||
links: Array<GraphNode>
|
||||
}
|
||||
|
||||
export type GraphEdge = {
|
||||
from: number
|
||||
to: number
|
||||
from: string
|
||||
to: string
|
||||
arrows: string
|
||||
type: string
|
||||
color: string
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user