Merge pull request #180 from RabotaRu/v2.6.3

V2.6.3

.gitignore

@@ -5,6 +5,7 @@ node_modules
 /certs
 /gitlab
 /plugins
+/src/hidden
 
 ./plugins.json
 

jest.config.js

@@ -10,7 +10,8 @@ module.exports = {
     'src'
   ],
   moduleNameMapper: {
-    '^@/storage/(.*)': '<rootDir>/src/storage/$1'
+    '^@/storage/(.*)': '<rootDir>/src/storage/$1',
+    '^@/helpers/(.*)': '<rootDir>/src/helpers/$1'
   },
   moduleFileExtensions: [
     'js',

package.json

@@ -1,12 +1,24 @@
 {
-  "name": "dochub",
-  "version": "0.1.0",
-  "private": true,
+  "name": "dochubcore",
+  "version": "1.0.2",
+  "main": "/dist/dochub.js",
+  "files": [
+    "/dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RabotaRu/DocHub.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RabotaRu/DocHub/issues"
+  },
+  "homepage": "https://github.com/RabotaRu/DocHub#readme",
   "scripts": {
     "lib": "vue-cli-service build --name test --target lib",
     "plugin": "export VUE_APP_DOCHUB_MODE=plugin && vue-cli-service build",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:package": "node vue.lib.js",
     "lint": "vue-cli-service lint",
     "test": "jest --watch",
     "meta-import": "node src/tools/meta/import.js"
@@ -34,7 +46,8 @@
     "vue-split-panel": "1.0.4",
     "vuetify": "2.6.14",
     "vuex": "3.6.2",
-    "yaml": "1.10.2"
+    "yaml": "1.10.2",
+    "mermaid": "9.3.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",
@@ -56,7 +69,6 @@
     "generator-code": "1.7.1",
     "html-webpack-plugin": "5.5.0",
     "jest": "28.1.3",
-    "mermaid": "9.3.0",
     "postcss-loader": "2.1.6",
     "raw-loader": "4.0.2",
     "ts-loader": "8.2.0",

public/documentation/docs/manual/docs/examples/sa-anim.yaml

@@ -0,0 +1,174 @@
+config:                 
+  distance: 80         
+  trackWidth: 18        
+nodes:
+  # Внешняя среда
+  outside:
+    title: Внешняя среда
+  outside.user:                # Пользователь
+    title: Пользователь
+    symbol: user
+  outside.application:         # FrontEnd приложение
+    title: AndroidApp
+    symbol: system
+
+  # Внутренняя среда
+  inside:                      
+    title: Внутренняя среда    
+  inside.apigateway:           # API шлюз
+    title: API Шлюз      
+    symbol: component      
+  inside.backend:              # Бэкенд
+    title: Backend
+    symbol: component      
+  inside.sso:                 # Сервис авторизации
+    title: SSO
+    symbol: component      
+  inside.logger:              # Подсистема логирования
+    title: Логер
+    symbol: component      
+  inside.postgres:            # База данных для хранения бизнес-данных
+    title: Основная БД
+    symbol: database
+  inside.redis:               # База данных для хранения сессий
+    title: Основная БД
+    symbol: database
+links:           
+  # Внешняя среда         
+  - from: outside.user         # Модифицируем идентификаторы в связях      
+    to: outside.application            
+    style: "<->"    
+
+  # Внутренняя среда
+  - from: outside.application
+    to: inside.apigateway
+    style: "<->"
+  - from: inside.apigateway
+    to: inside.backend
+    style: "<->"    
+  - from: inside.apigateway
+    to: inside.sso
+    style: "<->"
+  - from: inside.backend
+    to: inside.postgres
+    style: "<->"
+  - from: inside.sso
+    to: inside.redis
+    style: "<->"
+  - from: inside.backend
+    to: inside.logger
+    style: "->"
+  - from: inside.apigateway
+    to: inside.logger
+    style: "->"
+
+  # Анимация
+animation:
+  # Здесь создаем именованные действия, которы будут доступны в сценариях
+  actions:
+    hello:                            # Идентификатор действия
+    - action: info                    # Информировать пользователя. Доступны: clean / info / focus-node / focus-neighbors
+      text: Давай я объясню как здесь все устроено   # Текст, который будет выводиться пользователю
+    focus-user:                           
+    - action: focus-node              # Установить фокус на объекте диаграммы
+      target: outside.user            # RegEx выражение определяющее с какими идентификаторами будут выделены элементы диаграммы
+    - action: info                    # Одно действие может иметь пакет команд, которые будут выполнены последовательно
+      text: Это пользователь, которому мы предоставляем услугу
+    focus-frontend:
+    - action: focus-node
+      target: outside.application
+    - action: info
+      text: Для этого он использует наше приложение для Android
+    focus-apigateway:
+    - action: focus-node              # Здесь просим выделить всех соседей
+      target: inside.apigateway       # По маске
+    - action: info
+      text: Все запросы из приложений поступают в шлюз
+    focus-apigateway-neighbors:
+    - action: focus-neighbors         # Подсвечиваем всех соседей
+      target: inside.apigateway       # Шлюза
+    - action: info
+      text: Шлюз маршрутизирует запросы в нужные системы
+    focus-backend:
+    - action: focus-node
+      target: inside.backend
+    - action: info
+      text: Вся бизнес-логика реализуется здесь
+    focus-database:
+    - action: focus-node
+      target: inside.postgres
+    - action: info
+      text: В этой базе данных хранится вся бизнес-информация
+    focus-sso:
+    - action: focus-node
+      target: inside.sso
+    - action: info
+      text: Для авторизации используется отдельный сервис
+    focus-redis:
+    - action: focus-node
+      target: inside.redis
+    - action: info
+      text: Активные сессии пользователей хранятся в этой базе
+    bay:
+    - action: info
+      text: Теперь ты знаешь все.
+    clean:
+    - action: clean                   # Отчистить действия 
+      target: ".*"                    # выполненные над всеми объектами на диаграмме
+    user-about:
+    - action: focus-node
+      target: outside.user
+    - action: info
+      text: Наш пользователь это молодые люди от 18 до 35 лет. Они используют наш сервис для покупки виртуальных вещей в играх.
+  # Из заранее описанных действий создаются сценарии
+  scenarios:
+    about-user:
+      title: Кто наш пользователь?
+      steps:
+      - action: clean
+      - action: user-about
+        delay: 2000
+        voice: true
+      - action: clean
+    explain:                          # Идентификатор сценария
+      title: Объясни мне, что здесь?  # Название сценария для пользователя
+      steps:                          # Шаги 
+      - action: clean
+      - action: hello                 # Идентификатор действия
+        delay: 2000                   # Длительность шага в миллисекундах
+        voice: true                   # Признак голосовой подсказки. Переход на следующий шаг не происходит пока не будет завершен синтез речи
+      - action: focus-user
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-frontend
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-apigateway
+        delay: 2000
+        voice: true
+      - action: focus-apigateway-neighbors
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-backend
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-database
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-sso
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: focus-redis
+        delay: 2000
+        voice: true
+      - action: clean
+      - action: bay
+        delay: 2000
+        voice: true
+

public/documentation/docs/manual/docs/examples/sa-complex.yaml

@@ -0,0 +1,63 @@
+config:                 
+  distance: 80         
+  trackWidth: 18        
+nodes:
+  # Внешняя среда
+  outside:
+    title: Внешняя среда
+  outside.user:                # Пользователь
+    title: Пользователь
+    symbol: user
+  outside.application:         # FrontEnd приложение
+    title: AndroidApp
+    symbol: system
+
+  # Внутренняя среда
+  inside:                      
+    title: Внутренняя среда    
+  inside.apigateway:           # API шлюз
+    title: API Шлюз      
+    symbol: component      
+  inside.backend:              # Бэкенд
+    title: Backend
+    symbol: component      
+  inside.sso:                 # Сервис авторизации
+    title: SSO
+    symbol: component      
+  inside.logger:              # Подсистема логирования
+    title: Логер
+    symbol: component      
+  inside.postgres:            # База данных для хранения бизнес-данных
+    title: Основная БД
+    symbol: database
+  inside.redis:               # База данных для хранения сессий
+    title: Основная БД
+    symbol: database
+links:           
+  # Внешняя среда         
+  - from: outside.user         # Модифицируем идентификаторы в связях      
+    to: outside.application            
+    style: "<->"    
+
+  # Внутренняя среда
+  - from: outside.application
+    to: inside.apigateway
+    style: "<->"
+  - from: inside.apigateway
+    to: inside.backend
+    style: "<->"    
+  - from: inside.apigateway
+    to: inside.sso
+    style: "<->"
+  - from: inside.backend
+    to: inside.postgres
+    style: "<->"
+  - from: inside.sso
+    to: inside.redis
+    style: "<->"
+  - from: inside.backend
+    to: inside.logger
+    style: "->"
+  - from: inside.apigateway
+    to: inside.logger
+    style: "->"

public/documentation/docs/manual/docs/examples/sa-query.jsonata

@@ -0,0 +1,73 @@
+(
+    /* Определяем константы */
+    $rowHeight := 18;
+    $fontHeight := 16;
+    $fontWidth := 10;
+    $padding := 8;
+    /* Определяем фильтр для компонентов архитектуры */
+    $matcher := /^[a-zA-Z]*\.[a-zA-Z]*$/i;
+    /* Сохраняем ссылку на корень манифеста */
+    $manifest := $;
+    /* Готовим список нод */
+    $nodes := $merge(components.$spread().(
+        $id := $split($keys()[0], ".")[1];
+        $matcher($keys()[0])  ? {
+            $id: {
+                "title": *.title,
+                /* Для каждого элемента будет свой символ кроме "actor" */
+                "symbol": 
+                    *.entity = "actor" ? "user" 
+                    : *.aspects ? "symbol-" & $id : "component",
+                /* Получаем список аспектов */
+                "aspects": *.aspects.(
+                    $aspect := $lookup($manifest.aspects, $);
+                    {
+                        "title": $aspect.title,
+                        "id": $
+                    }
+                ),
+                /* Получаем список связей */
+                "links": *.links[$matcher(id)].{
+
+                    "from": $id,
+                    "to": $split(id, ".")[1],
+                    "style": direction,
+                    "title": title
+                }
+            }
+        }
+    )); 
+    /* Готовим символы */
+    $symbols := $merge($nodes.$spread().(
+        $id := "symbol-" & $keys()[0];
+        /* Определяем количество аспектов для вычисления высоты символа */
+        $aspectCount := $count(*.aspects);
+        /* Определяем максимальную длину текста для вычисления ширины символа */
+        $maxTitle := $max(*.aspects.($length($.title)));
+        /* Вычисляем размеры символа */
+        $width := $maxTitle ? $maxTitle * $fontWidth + $padding * 2 : 64; /* Умножаем на ширину символа */   
+        $height := ($aspectCount + 1) * $rowHeight + $padding * 2; /* Умножаем на высоту строки */
+        {
+            $id: /* Генерируем символ */
+                "<g>"
+                    /* Создаем контейнер */
+                    & "<rect width=" & $width & " height=" & $height & " fill=\"#eee\" stroke=\"#222\" rx=3 />"
+                    /* Заполняем аспектами */
+                    & $join($map(*.aspects, function($v, $i) {
+                        "<a href=\"/architect/aspects/" & $v.id & "\" >"
+                        & "<text x=6 y=" & ($i * $rowHeight + $padding + $rowHeight) & " style=\"font-size:" & $fontHeight & "\" fill=\"blue\">" & $v.title & "</text>"
+                        & "</a>"
+                    }))
+                & "</g>"
+        }
+    ));
+    {
+        "config": {
+            "distance": 130,
+            "trackWidth": 24
+        },
+        "symbols": $symbols,
+        "nodes": $nodes,
+        "links": $nodes.*.links
+    }
+  )