Merge pull request #2 from serhiipylypchuk1991/sp-refactor

AlexKlimenkov · web-flow · commit 0c25cb2cf7e5 · 2024-10-08T12:20:37.000+03:00
[dev] refactoring
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,9 @@
+{
+  "updateContentCommand": "yarn",
+  "postAttachCommand": "yarn start",
+  "customizations": {
+    "codespaces": {
+      "openFiles": ["src/App.vue"]
+    }
+  }
+}
diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-@dhx:registry=https://npm.dhtmlx.com/
+@dhx:registry=https://npm.dhtmlx.com/
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
 
-![DHTMLX Diagram with Vue Demo](https://raw.githubusercontent.com/DHTMLX/vue-diagram-demo/master/diagram.png)
+![DHTMLX Diagram with Vue Demo](diagram_editor.png)
 
 ## How to start
 
diff --git a/diagram_editor.png b/diagram_editor.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DHX Diagram with Vue</title>
+    <title>DHX Diagram Vue</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "deploy": "yarn build && gh-pages -d dist"
   },
   "dependencies": {
-    "@dhx/trial-diagram": "^6.0.1",
+    "@dhx/trial-diagram": "^6.0.5",
     "vue": "^3.2.37"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
@@ -1,17 +1,17 @@
 <script>
-import Diagram from "./components/Diagram.vue";
+import DiagramEditor from "./components/DiagramEditor.vue";
 import { getData } from "./data";
 
 export default {
-  components: { Diagram },
+  components: { DiagramEditor },
   data() {
     return {
-      data: getData(),
+      data: getData()
     };
-  },
+  }
 };
 </script>
 
 <template>
-  <Diagram :data="data"  />
+  <DiagramEditor :data="data"  />
 </template>
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
diff --git a/src/components/DiagramEditor.vue b/src/components/DiagramEditor.vue
@@ -0,0 +1,23 @@
+<script>
+import "@dhx/trial-diagram/codebase/diagram.min.css";
+import { DiagramEditor } from "@dhx/trial-diagram";
+
+export default {
+  props: ["data"],
+
+  mounted() {
+    this.diagram_editor = new DiagramEditor(this.$refs.container, {
+      type: "default"
+    });
+    this.diagram_editor.parse(this.data);
+  },
+
+  unmounted() {
+    this.diagram_editor.destructor();
+  }
+};
+</script>
+
+<template>
+  <div ref="container" class="widget"></div>
+</template>
diff --git a/src/data.js b/src/data.js
diff --git a/src/style.css b/src/style.css
@@ -1,7 +1,14 @@
+/* specify styles for initial page */
 html,
 body,
 #root {
   height: 100%;
   padding: 0;
   margin: 0;
 }
+
+/* specify styles for the Diagram Editor container */
+.widget {
+  height: 100%;
+  width: 100%;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
   integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
 
-"@dhx/trial-diagram@^6.0.1":
-  version "6.0.1"
-  resolved "https://npm.dhtmlx.com/@dhx%2ftrial-diagram/-/trial-diagram-6.0.1.tgz#1edbd7cb59ed0a00a9eef31686174245b72d933c"
-  integrity sha512-Pq4Yt19e7tx+60nQtEMOdH0KeioJj3ZRpjK8yZs5bV6FvlTCCAtKXn9hcidhQXq+oDFgm32ArJAkofmac6QCRg==
+"@dhx/trial-diagram@^6.0.5":
+  version "6.0.5"
+  resolved "https://npm.dhtmlx.com/@dhx%2ftrial-diagram/-/trial-diagram-6.0.5.tgz#ff10902a5e8b48fdb266f77e866be319b31d4ea9"
+  integrity sha512-m2q6lyUozbwlgMMuJchjXzJBrJCDkjeNR1jFyXXpDJfXb31+h6qYute/pxicOQhqAg6EEZdF+gFDq3kcwW8Y7g==
 
 "@esbuild/android-arm@0.15.18":
   version "0.15.18"

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@dhx:registry=https://npm.dhtmlx.com/`
	`1`	`+@dhx:registry=https://npm.dhtmlx.com/`