add editor text mode

src/components/AdminWindow.vue

@@ -70,7 +70,7 @@ onMounted(async () => {
       Вечерний детектив - {{ gameState }}
     </div>
     <div class="buttons-block">
-      <button v-on:click="router.push('/editor')" class="button-menu button-custom-inline">Граф</button>
+      <button v-on:click="router.push('/editor')" class="button-menu button-custom-inline">Редактор</button>
       <button v-on:click="startGame" class="button-menu button-custom-inline">Начать</button>
       <button v-on:click="stopGame" class="button-menu button-custom-inline">Остановить</button>
       <button v-on:click="apiDownloadQrCodesFile" class="button-menu button-custom-inline">Скачать&nbsp;qr‑ы</button>

src/components/EditorWindow.vue

@@ -49,6 +49,7 @@ let data = <Data>{}
 
 const displayEdges = ref(0)
 const allEdges = ref(0)
+const isShowGraph = ref(false)
 const onApplicationEdges = ref(true)
 
 async function loadGraph() {
@@ -145,6 +146,9 @@ function selectNode(node: GraphNode) {
 
   selectedNode.value.links = links
   net.selectNodes([selectedNode.value.code])
+  if (!isShowGraph.value) {
+    window.document.getElementById(node.code)?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
 }
 
 function focusNode(node: GraphNode) {
@@ -196,6 +200,13 @@ async function clearSelectedNode() {
 function nodeHeader(node: GraphNode): string {
   return "[" + node.code + "] - " + node.name
 }
+
+function showGraph(show: boolean) {
+  isShowGraph.value = show
+  if (isShowGraph.value) {
+    loadGraph()
+  }
+}
 </script>
 
 <template>
@@ -205,18 +216,51 @@ function nodeHeader(node: GraphNode): string {
     </div>
   </HeaderBlock>
 
-  <div ref="network" class="graph-container"></div>
+  <div :class="[isShowGraph ? 'text-container-disable' : '']">
+    <div class="data-container text-container">
+      <!-- Действия -->
+      <div class="messages-block" ref="scrollContainer">
+        <div class="center-block-custom">
+          <div v-for="action in graph.nodes" :key="action.id" v-on:click="selectNode(action)" :id="action.code">
+            <div class="message-cloud" :class="[action.code == selectedNode.code ? 'selected-message-cloud' : '']">
+              <div class="message-header" :class="[action.code == selectedNode.code ? 'selected-message-header' : '']">
+                {{ action.code }}: {{ action.name }}
+              </div>
+              <hr class="hr" />
+              <div class="message-content">
+                {{ action.text }}
+              </div>
+              <hr class="hr" v-if="action.applications.length" />
+              <div class="message-footer" v-for="application in action.applications" :key="application.name">
+                Приложение: {{ application.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div :class="[!isShowGraph ? 'graph-container-disable' : '']">
+    <div ref="network" class="data-container graph-container"></div>
+  </div>
 
   <div class="nodes-container">
     <h2>Точки</h2>
     <div>Всего точек: {{ graph.nodes.length }}</div>
+    <div>
+      Отображать граф:
+      <label class="checkbox-green">
+        <input type="checkbox" v-on:click="showGraph(!isShowGraph)">
+        <span class="checkbox-green-switch" data-label-on="Да" data-label-off="Нет"></span>
+      </label>
+    </div>
     <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>
+          <span class="checkbox-green-switch" data-label-on="Да" data-label-off="Нет"></span>
         </label>
       </div>
     </div>
@@ -283,13 +327,31 @@ function nodeHeader(node: GraphNode): string {
 </template>
 
 <style scoped>
-.graph-container {
+.data-container {
   width: 100%;
   height: calc(100vh - 50px);
   border: 1px solid #e0e0e0;
+}
+
+.graph-container {
   border-radius: 8px;
 }
 
+.graph-container-disable {
+  position: absolute;
+  right: 10000px;
+}
+
+.text-container {
+  padding: 10px;
+  /* background-color: red; */
+}
+
+.text-container-disable {
+  position: absolute;
+  left: 10000px;
+}
+
 .nodes-container {
   position: fixed;
   left: 5px;
@@ -387,6 +449,60 @@ function nodeHeader(node: GraphNode): string {
 }
 
 
+.messages-block {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+@media (min-width: 1025px) {
+  .center-block-custom {
+    width: 700px;
+    margin: 0 auto;
+  }
+}
+
+.message-cloud {
+  border: 1px solid #444444;
+  border-radius: 15px;
+  margin: 12px 10px;
+  padding: 16px;
+  background-color: var(--main-back-item-color);
+}
+
+.message-cloud:hover {
+  background-color: #eeeeee;
+  cursor: pointer;
+}
+
+.selected-message-cloud {
+  border: 2px solid #960000;
+  cursor: pointer;
+}
+
+.message-header {
+  font-size: large;
+  font-weight: 200;
+}
+
+.selected-message-header {
+  font-size: large;
+  font-weight: 500;
+  color: #960000;
+}
+
+.message-content {
+  font-weight: 500;
+  /* white-space: pre-line; */
+  white-space: pre-wrap;
+}
+
+.message-footer {
+  font-weight: 400;
+  color: var(--second-color);
+}
+
+
 .checkbox-green {
   display: inline-block;
   height: 20px;