From 8b38453a4ebd55b06083bc9e3974c2e949dee455 Mon Sep 17 00:00:00 2001 From: Fedorov Vladimir Date: Sun, 7 Dec 2025 05:31:53 +0700 Subject: [PATCH] add features --- src/components/EditorWindow.vue | 192 ++++++++++++++++++++------------ 1 file changed, 120 insertions(+), 72 deletions(-) diff --git a/src/components/EditorWindow.vue b/src/components/EditorWindow.vue index 586627d..53f95a4 100644 --- a/src/components/EditorWindow.vue +++ b/src/components/EditorWindow.vue @@ -13,8 +13,26 @@ const graph = ref({ edges: [] }) +const emptyNode = { + id: -1, + label: "", + name: "", + text: "", + applications: [], + links: [], +} + const selectedNode = ref({ - id: 0, + id: -1, + label: "", + name: "", + text: "", + applications: [], + links: [], +}) + +const focusedNode = ref({ + id: -1, label: "", name: "", text: "", @@ -107,6 +125,17 @@ function selectNode(node: GraphNode) { net.selectNodes([selectedNode.value.id]) } +function focusNode(node: GraphNode) { + console.log("Focus node:", node.id) + focusedNode.value = node +} + +function copyLink(node: GraphNode) { + console.log("Focus node:", node.id) + navigator.clipboard.writeText("([" + node.label + "])") + focusedNode.value = emptyNode +} + async function updateSelectedNode() { console.log("Update node:", selectedNode.value) await updateNode(selectedNode.value) @@ -143,11 +172,14 @@ function nodeHeader(node: GraphNode): string {
-
- {{ nodeHeader(node) }} - ({{ node.applications.length }}) -
+ + {{ nodeHeader(node) }} + ({{ node.applications.length }}) + + Скопировать ссылку + +
@@ -243,95 +275,111 @@ function nodeHeader(node: GraphNode): string { margin: 10px 0; } +.copy-node-link { + margin-left: 5px; +} + +.copy-node-link:hover { + font-weight: bold; + cursor: pointer; +} + .checkbox-green { - display: inline-block; - height: 20px; - line-height: 28px; - margin-right: 10px; - position: relative; - vertical-align: middle; - font-size: 14px; - user-select: none; + display: inline-block; + height: 20px; + line-height: 28px; + margin-right: 10px; + position: relative; + vertical-align: middle; + font-size: 14px; + user-select: none; } + .checkbox-green .checkbox-green-switch { - display: inline-block; - height: 20px; - width: 90px; - box-sizing: border-box; - position: relative; - border-radius: 2px; - background: #848484; - transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); + display: inline-block; + height: 20px; + width: 90px; + box-sizing: border-box; + position: relative; + border-radius: 2px; + background: #848484; + transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } + .checkbox-green .checkbox-green-switch:before { - content: attr(data-label-on); - display: inline-block; - box-sizing: border-box; - width: 45px; - padding: 0 8px; - position: absolute; - top: 0; - left: 45px; - text-transform: uppercase; - text-align: center; - color: rgba(255, 255, 255, 0.5); - font-size: 10px; - line-height: 20px; + content: attr(data-label-on); + display: inline-block; + box-sizing: border-box; + width: 45px; + padding: 0 8px; + position: absolute; + top: 0; + left: 45px; + text-transform: uppercase; + text-align: center; + color: rgba(255, 255, 255, 0.5); + font-size: 10px; + line-height: 20px; } + .checkbox-green .checkbox-green-switch:after { - content: attr(data-label-off); - display: inline-block; - box-sizing: border-box; - width: 44px; - border-radius: 1px; - position: absolute; - top: 1px; - left: 1px; - z-index: 5; - text-transform: uppercase; - text-align: center; - background: white; - line-height: 18px; - font-size: 10px; - color: #777; - transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); + content: attr(data-label-off); + display: inline-block; + box-sizing: border-box; + width: 44px; + border-radius: 1px; + position: absolute; + top: 1px; + left: 1px; + z-index: 5; + text-transform: uppercase; + text-align: center; + background: white; + line-height: 18px; + font-size: 10px; + color: #777; + transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); } + .checkbox-green input[type="checkbox"] { - display: block; - width: 0; - height: 0; - position: absolute; - z-index: -1; - opacity: 0; + display: block; + width: 0; + height: 0; + position: absolute; + z-index: -1; + opacity: 0; } -.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch { - background-color: #848484; + +.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch { + background-color: #848484; } -.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before { - content: attr(data-label-off); - left: 0; + +.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:before { + content: attr(data-label-off); + left: 0; } -.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after { - content: attr(data-label-on); - color: #848484; - transform: translate3d(44px, 0, 0); + +.checkbox-green input[type="checkbox"]:checked+.checkbox-green-switch:after { + content: attr(data-label-on); + color: #848484; + transform: translate3d(44px, 0, 0); } /* Hover */ -.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover { - cursor: pointer; +.checkbox-green input[type="checkbox"]:not(:disabled)+.checkbox-green-switch:hover { + cursor: pointer; } /* Disabled */ -.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch { - opacity: 0.6; - filter: grayscale(50%); +.checkbox-green input[type=checkbox]:disabled+.checkbox-green-switch { + opacity: 0.6; + filter: grayscale(50%); } /* Focus */ .checkbox-green.focused .checkbox-green-switch:after { - box-shadow: inset 0px 0px 4px #ff5623; + box-shadow: inset 0px 0px 4px #ff5623; }