add features

src/components/EditorWindow.vue

@@ -13,8 +13,26 @@ const graph = ref<Graph>({
   edges: []
 })
 
+const emptyNode = {
+  id: -1,
+  label: "",
+  name: "",
+  text: "",
+  applications: [],
+  links: [],
+}
+
 const selectedNode = ref<GraphNode>({
-  id: 0,
+  id: -1,
+  label: "",
+  name: "",
+  text: "",
+  applications: [],
+  links: [],
+})
+
+const focusedNode = ref<GraphNode>({
+  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 {
     <hr class="hr">
 
     <div v-bind:key="node.id" v-for="node in graph.nodes">
-      <div :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
+      <span v-on:mouseenter="focusNode(node)" v-on:mouseleave="focusNode(emptyNode)">
-        v-on:click="selectNode(node)">
+        <span :class="[node.id == selectedNode.id ? 'selected-node' : '']" class="node-select-button"
-        {{ nodeHeader(node) }}
+          v-on:click="selectNode(node)">{{ nodeHeader(node) }}</span>
         <span v-if="node.applications.length > 0"> ({{ node.applications.length }})</span>
-      </div>
+        <span v-if="node.id == focusedNode.id" class="copy-node-link" v-on:click="copyLink(node)">
+          Скопировать ссылку
+        </span>
+      </span>
     </div>
   </div>
 
@@ -243,6 +275,15 @@ 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 {
@@ -255,6 +296,7 @@ function nodeHeader(node: GraphNode): string {
   font-size: 14px;
   user-select: none;
 }
+
 .checkbox-green .checkbox-green-switch {
   display: inline-block;
   height: 20px;
@@ -265,6 +307,7 @@ function nodeHeader(node: GraphNode): string {
   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;
@@ -280,6 +323,7 @@ function nodeHeader(node: GraphNode): string {
   font-size: 10px;
   line-height: 20px;
 }
+
 .checkbox-green .checkbox-green-switch:after {
   content: attr(data-label-off);
   display: inline-block;
@@ -298,6 +342,7 @@ function nodeHeader(node: GraphNode): string {
   color: #777;
   transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
 }
+
 .checkbox-green input[type="checkbox"] {
   display: block;
   width: 0;
@@ -306,13 +351,16 @@ function nodeHeader(node: GraphNode): string {
   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: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;