Merge pull request #535 from RabotaRu/v3.11.0

V3.11.0

.gitignore

@@ -8,6 +8,7 @@ node_modules
 /plugins
 /src/hidden
 /cache
+/public/temp
 
 ./plugins.json
 

README.md

@@ -21,7 +21,7 @@ DocHub - инструмент описания архитектуры через
 * [Создание архитектурных фасадов (портал документации)](#facade);
 * [Анализ архитектуры](#analysis);
 * [Контроль консистентности](#problems);
-* [Расширяемая матамодель](#extmetamodel).
+* [Расширяемая метамодель](#extmetamodel).
 
 ## Быстрый старт
 
@@ -118,7 +118,7 @@ DocHub умеет находить проблемы в описании архи
 
 ![Валидатор](pics/validators.png)
 
-## <a name="extmetamodel"></a> Расширяемая матамодель
+## <a name="extmetamodel"></a> Расширяемая метамодель
 
 Метамодель DocHub может быть расширена по вашему желанию. Есть возможность как модифицировать
 уже существующие сущности, так и создавать собственные.

example.env

@@ -153,7 +153,9 @@
 # По умолчанию кластер выключен (off).
 # VUE_APP_DOCHUB_CLUSTER= on / off
 
-
+# (FB) Включение поддержки HTML тэгов в markdown документах
+# По умолчанию поддержка выключена (off).
+# VUE_APP_DOCHUB_MARKDOWN_HTML= on / off
 
 # ***********************************************************
 #                   Примеры конфигурирования

plugins.json

@@ -4,6 +4,8 @@
         "plugins/markaper",
         "plugins/charts",
         "plugins/devtool",
-        "plugins/svg"
+        "plugins/svg",
+        "plugins/bpmnjs",
+        "plugins/drawio"
     ]
 }

plugins/bpmnjs/components/bpmnjs/BaseMixin.js

@@ -0,0 +1,53 @@
+
+export default {
+    props: {
+        // Требуем обязательно передавать профайл документа 
+        profile: {
+            type: Object,
+            required: true
+        },
+        // Требуем обязательно передавать функцию получения контента
+        getContent: {
+            type: Function,
+            required: true
+        },
+        // Получаем функцию сохранения контента если есть
+        putContent: {
+            type: Function,
+            default: null,
+            required: false
+        },
+        // Содержимое документа
+        value: String
+    },
+    methods: {
+        // Методы для реализации в компонентах
+        // init() { },
+        // applyContent(content) { },
+
+        // Регистрация ошибки
+        registerError(error) {
+            this.errors.push(error);
+        },
+        // Регистрация предупреждений
+        registerWarning(warning) {
+            this.warnings.push(warning);
+        }
+    },
+    watch: {
+        value(value) {
+            this.applyContent(value);
+        }
+    },
+    mounted() {
+        this.init();
+        this.applyContent(this.value);
+    },
+    data() {
+        return {
+            errors: [],
+            warnings: [],
+            data: null
+        };
+    }
+};

plugins/bpmnjs/components/bpmnjs/Modeler.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="bpmnjs-document-modeler">
+    <div
+      v-html="`
+      <style>
+        .bpmnjs-document-modeler .bjs-breadcrumbs {
+          left: 180px !important;
+          top: 34px !important;
+        }    
+      </style>
+    `" />
+    <div v-bind:id="descId" class="desk" />
+    <v-toolbar dense floating elevation="0" color="rgba(0, 0, 0, 0.03)" class="toolbar">
+      <v-btn v-if="putContent" icon v-on:click="save">
+        <v-icon>mdi-content-save</v-icon>
+      </v-btn>
+      <v-btn icon v-on:click="onExit(false)">
+        <v-icon>mdi-exit-run</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-dialog
+      v-model="saveRequest"
+      width="500">
+      <v-card>
+        <v-card-title class="text-h5 grey lighten-2">
+          Сохранить?
+        </v-card-title>
+
+        <v-card-text>
+          В диаграмму внесены изменения. Если их не сохранить, то они будут утеряны.
+        </v-card-text>
+
+        <v-divider />
+
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            v-on:click="saveRequest = false; onExit(true)">
+            Не сохранять
+          </v-btn>
+          <v-btn
+            color="primary"
+            text
+            v-on:click="onExit(true)">
+            Сохранить
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>    
+  </div>
+</template>
+
+<script>
+  import BpmnModeler from 'bpmn-js/lib/Modeler';
+  import BaseMixin from './BaseMixin.js';
+
+  export default {
+    mixins: [BaseMixin],
+    props: {
+      // Требуем обязательно передавать профайл документа 
+      profile: {
+        type: Object,
+        required: true
+      },
+      // Требуем обязательно передавать функцию получения контента
+      getContent: {
+        type: Function,
+        required: true
+      }
+    },
+    data() {
+      return {
+        modeler: null,
+        descId: `desc-${Date.now()}`,
+        error: null,
+        isChange: false,
+        saveRequest: false
+      };
+    },
+    methods: {
+      async onExit(autosave) {
+        if (autosave && this.isChange) await this.save();
+        else if (this.isChange) {
+          this.saveRequest = true;
+          return;
+        } else  {
+          this.saveRequest = false;
+        }
+        this.$emit('onEdit', false);
+      },
+
+      init() {
+        this.modeler = new BpmnModeler({
+          container: `#${this.descId}`,
+          keyboard: {
+            bindTo: window
+          }
+        });
+
+        this.modeler.on('element.changed', () => this.isChange = true);
+      },
+      applyContent(content) {
+        this.modeler.importXML(content);
+      },
+
+      async save() {
+        try {
+          const { xml } = await this.modeler.saveXML({ format: true });
+          await this.putContent(this.profile.source, xml);
+          this.isChange = false;
+          this.$emit('input', xml);
+        } catch (err) {
+          window.alert(`При сохранении возникла ошибка: ${err?.message}`);
+          // eslint-disable-next-line no-console
+          console.error(err);
+        }
+      }
+    }
+  };
+</script>
+
+<style scoped>
+.desk {
+  min-height: 1000px;
+  height: calc(100vh - 48px);
+  width: 100%;
+  position: relative;
+}
+
+.document {
+  position: relative;
+}
+
+.toolbar {
+  position: absolute;
+  left: 82px;
+  top: 20px;
+  background-color: 0 !important;
+  color: 0 !important;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+</style>

plugins/bpmnjs/components/bpmnjs/Viewer.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="bpmnjs-space bpmnjs-document-viewer">
+    <div
+      v-html="`
+      <style>
+        .bpmnjs-document-viewer .bjs-breadcrumbs {
+          left: 70px !important;
+          top: 34px !important;
+        }    
+      </style>
+    `" />
+    <div ref="container" class="bpmnjs-viewer" v-bind:style="{ height}" />
+    <v-toolbar
+      v-if="putContent"
+      dense
+      floating 
+      elevation="0"
+      color="rgba(0, 0, 0, 0.03)"
+      class="toolbar">
+      <v-btn icon title="Редактировать" v-on:click="onEdit">
+        <v-icon>mdi-file-edit-outline</v-icon>
+      </v-btn>
+    </v-toolbar>
+  </div>
+</template>
+
+<script>
+  import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
+  import BaseMixin from './BaseMixin.js';
+
+  export default {
+    mixins: [BaseMixin],
+    data() {
+      return {
+        bpmnViewer: null,
+        height: '50vh'
+      };
+    },
+    methods: {
+      init() {
+        this.bpmnViewer = new BpmnJS({
+          container: this.$refs.container
+        });
+        this.bpmnViewer.on('import.done', (event) => {
+          event.error && this.registerError(event.error);
+          event.warnings && this.registerWarning(event.warnings);
+          this.bpmnViewer.get('canvas').zoom('fit-viewport');
+          //todo Стоит оптимизировать высоту изображения
+          // const rect = this.bpmnViewer.get('canvas')._viewport.getBoundingClientRect();
+        });
+      },
+      applyContent(content) {
+        this.bpmnViewer.importXML(content);
+      },
+      onEdit() {
+        this.$emit('onEdit', true);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+.bpmnjs-space {
+  position: relative;
+  height: 50vh;
+  width: 100%;
+}
+
+.bpmnjs-viewer {
+  height: 50vh;
+  width: 100%;
+}
+
+.bpmnjs-space:hover .toolbar {
+  display: block;
+} 
+
+.bpmnjs-space .toolbar {
+  display: none;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: 0 !important;
+  color: 0 !important;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+
+</style>