Update for yFiles for HTML 2.4.0.0

fskpf · fskpf · commit fc8ba89ddf7b · 2021-06-30T17:57:07.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ license.json
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
diff --git a/README.md b/README.md
@@ -8,8 +8,8 @@ This sample application serves as a basic scaffold of how to integrate [yFiles f
 
 ## Version Information
 
-- Vue CLI v4.4.1
-- yFiles for HTML 2.3
+- Vue CLI v4.5
+- yFiles for HTML 2.4
 
 ## Getting Started
 
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset']
+  presets: ['@vue/cli-plugin-babel/preset'],
 }
diff --git a/integration-howto.md b/integration-howto.md
@@ -6,7 +6,7 @@ TL;DR Add yFiles as a dependency in the `package.json` and start importing yFile
 
 ## Create a default Vue CLI application
 
-At first, create a default Vue CLI app by running `> vue create yfiles-vue-integration-basic` with the default option: `default (babel, eslint)`.
+At first, create a default Vue CLI app by running `> vue create yfiles-vue-integration-basic` with the default option: `default ([Vue 2] babel, eslint)`.
 
 ## Add yFiles as a dependency
 
@@ -24,7 +24,7 @@ Adding yFiles as a dependency is as easy as installing an external library from
      ```
      "dependencies": {
        ...
-       "yfiles": "../yFiles-for-HTML-Complete-2.3.0.3-Evaluation/lib-dev/es-modules/yfiles-23.0.2-eval-dev.tgz"
+       "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz"
      },
      ```
 
@@ -43,7 +43,6 @@ With the yFiles dependency, you can easily create a new Vue component with a yFi
    There are two things to look out for:
 
    - Make sure to configure your `license.json` for the library. This project assumes that there is a yFiles package next to the project's root. Therefore, you may need to change the referenced path in `GraphComponent.vue`.
-   - Make sure to include `yfiles.css` which is an integral part of the library. For example add `@import '~yfiles/yfiles.css';` as in `GraphComponent.vue`.
 
 2. Add the new Vue component to the `App.vue` that was created by the Vue CLI.
 
diff --git a/package.json b/package.json
@@ -4,25 +4,25 @@
   "author": "yWorks GmbH <yfileshtml@yworks.com>",
   "private": true,
   "scripts": {
-    "preinstall": "cd ../yFiles-for-HTML-Complete-2.3.0.4-Evaluation && npm run prepare-package",
-    "postinstall": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib/license.json','./src/license.json')\"",
+    "preinstall": "cd ../yFiles-for-HTML-Complete-2.4.0.0-Evaluation && npm run prepare-package",
+    "postinstall": "node -e \"require('fs').copyFileSync('../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib/license.json','./src/license.json')\"",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.8.1",
-    "vue": "^2.6.12",
-    "yfiles": "../yFiles-for-HTML-Complete-2.3.0.4-Evaluation/lib-dev/es-modules/yfiles-23.0.4-eval-dev.tgz"
+    "core-js": "^3.15.1",
+    "vue": "^2.6.14",
+    "yfiles": "../yFiles-for-HTML-Complete-2.4.0.0-Evaluation/lib-dev/es-modules/yfiles-24.0.0-eval-dev.tgz"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^4.5.9",
-    "@vue/cli-service": "^4.5.9",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-vue": "^7.3.0",
-    "vue-template-compiler": "^2.6.12"
+    "eslint": "^7.29.0",
+    "eslint-plugin-vue": "^7.12.1",
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="header">
-      <img alt="yFiles logo" src="./assets/yfiles-logo.svg">
+      <img alt="yFiles logo" src="./assets/yfiles-logo.svg" />
       <h1>A Basic yFiles Integration in Vue.js</h1>
     </div>
     <graph-component></graph-component>
@@ -14,8 +14,8 @@ import GraphComponent from './components/GraphComponent.vue'
 export default {
   name: 'app',
   components: {
-    GraphComponent
-  }
+    GraphComponent,
+  },
 }
 </script>
 
diff --git a/src/components/GraphComponent.vue b/src/components/GraphComponent.vue
@@ -4,53 +4,50 @@
 </template>
 
 <script>
-  import { GraphComponent, GraphEditorInputMode, License, Point, Rect } from 'yfiles'
-  import licenseData from '../license.json'
-
-  License.value = licenseData
-
-  export default {
-    name: 'GraphComponent',
-    mounted() {
-      // instantiate a new GraphComponent
-      this.graphComponent = new GraphComponent('#graph-component')
-
-      // configure an input mode for out of the box editing
-      this.graphComponent.inputMode = new GraphEditorInputMode()
-
-      // create some graph elements
-      this.createSampleGraph(this.graphComponent.graph)
-
-      // center the newly created graph
-      this.graphComponent.fitGraphBounds()
+import { GraphComponent, GraphEditorInputMode, License, Point, Rect } from 'yfiles'
+import licenseData from '../license.json'
+
+License.value = licenseData
+
+export default {
+  name: 'GraphComponent',
+  mounted() {
+    // instantiate a new GraphComponent
+    this.graphComponent = new GraphComponent('#graph-component')
+
+    // configure an input mode for out of the box editing
+    this.graphComponent.inputMode = new GraphEditorInputMode()
+
+    // create some graph elements
+    this.createSampleGraph(this.graphComponent.graph)
+
+    // center the newly created graph
+    this.graphComponent.fitGraphBounds()
+  },
+  methods: {
+    createSampleGraph(graph) {
+      // create some nodes
+      const node1 = graph.createNodeAt(new Point(30, 30))
+      const node2 = graph.createNodeAt(new Point(150, 30))
+      const node3 = graph.createNode(new Rect(230, 200, 60, 30))
+
+      // create some edges between the nodes
+      graph.createEdge(node1, node2)
+      graph.createEdge(node1, node3)
+      const edge = graph.createEdge(node2, node3)
+      // Creates the first bend for edge at (260, 30)
+      graph.addBend(edge, new Point(260, 30))
+
+      // add labels to some graph elements
+      graph.addLabel(node1, 'n1')
+      graph.addLabel(node2, 'n2')
+      graph.addLabel(node3, 'n3')
     },
-    methods: {
-      createSampleGraph(graph) {
-        // create some nodes
-        const node1 = graph.createNodeAt(new Point(30, 30))
-        const node2 = graph.createNodeAt(new Point(150, 30))
-        const node3 = graph.createNode(new Rect(230, 200, 60, 30))
-
-        // create some edges between the nodes
-        graph.createEdge(node1, node2)
-        graph.createEdge(node1, node3)
-        const edge = graph.createEdge(node2, node3)
-        // Creates the first bend for edge at (260, 30)
-        graph.addBend(edge, new Point(260, 30))
-
-        // add labels to some graph elements
-        graph.addLabel(node1, 'n1')
-        graph.addLabel(node2, 'n2')
-        graph.addLabel(node3, 'n3')
-      }
-    }
-  }
+  },
+}
 </script>
 
 <style scoped>
-/* yfiles.css is an integral part of the library and must be loaded wherever a yFiles GraphComponent is created */
-@import '~yfiles/yfiles.css';
-
 #graph-component {
   width: 500px;
   height: 500px;
diff --git a/src/main.js b/src/main.js
@@ -4,5 +4,5 @@ import App from './App.vue'
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount('#app')

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`module.exports = {`
`2`		`- presets: ['@vue/cli-plugin-babel/preset']`
	`2`	`+ presets: ['@vue/cli-plugin-babel/preset'],`
`3`	`3`	`}`