Update for yFiles for HTML 2.3.0.4

.gitignore

@@ -171,3 +171,5 @@ app/yfiles/
 license.json
 live/
 /database
+/dist/
+src/assets/yfiles/

.prettierrc.json

@@ -1,11 +1,8 @@
 {
   "printWidth": 100,
   "tabWidth": 2,
-  "endOfLine": "auto",
   "useTabs": false,
   "semi": false,
   "singleQuote": true,
-  "bracketSpacing": true,
-  "trailingComma": "none",
-  "arrowParens": "avoid"
+  "endOfLine": "auto"
 }

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 yWorks GmbH
+Copyright (c) 2021 yWorks GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -6,12 +6,11 @@ This repository contains the sample application for the yFiles use case about
 an [Ontology Visualizer](https://www.yworks.com/use-case/visualizing-an-ontology).
 The app displays a sample ontology diagram that you can explore.
 
-
 ## See also
 
-* [Watch the introductory video](https://player.vimeo.com/video/389490579) of this app
-* [Read the article](https://www.yworks.com/use-case/visualizing-an-ontology) about an _Ontology Visualizer_
-* [Learn more about yFiles](https://www.yworks.com/products/yfiles), the software library for visualizing, editing, and analyzing graphs
+- [Watch the introductory video](https://player.vimeo.com/video/389490579) of this app
+- [Read the article](https://www.yworks.com/use-case/visualizing-an-ontology) about an _Ontology Visualizer_
+- [Learn more about yFiles](https://www.yworks.com/products/yfiles), the software library for visualizing, editing, and analyzing graphs
 
 If you have any questions or suggestions, send us an email at [[email protected]](mailto:[email protected])
 or call [+49 7071 9709050](tel:+4970719709050).
@@ -27,19 +26,21 @@ Checkout this project, then extract the yFiles for HTML package to a directory n
 ```
 documents
  |-- ontology-visualizer
- |-- yFiles-for-HTML-Complete-2.3.0.2-Evaluation
+ |-- yFiles-for-HTML-Complete-2.3.0.4-Evaluation
 ```
 
 Afterwards, enter the `ontology-visualizer` directory and run the usual commands
+
 ```
 npm i
 ```
+
 followed by
+
 ```
 npm start
 ```
 
-
 ## About
 
 This application is powered by [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html), the powerful
@@ -64,9 +65,10 @@ or call [+49 7071 9709050](tel:+4970719709050).
 The app shows data from [DBpedia](http://dbpedia.org/ontology/)
 
 ## License
+
 The MIT License (MIT)
 
-Copyright (c) 2020 yWorks GmbH
+Copyright (c) 2021 yWorks GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

app/scripts/app.js

@@ -44,7 +44,7 @@ import {
   TemplateNodeStyle,
   TextRenderSupport,
   TextWrapping,
-  YPoint
+  YPoint,
 } from 'yfiles'
 import lic from '../yfiles/license.json'
 import { LODLabelStyleRenderer } from './lodlabelstyle'
@@ -74,7 +74,7 @@ class GraphOverviewVisualCreator extends GraphOverviewCanvasVisualCreator {
     ctx.strokeStyle = '#f7f7f7'
     ctx.beginPath()
     ctx.moveTo(edge.sourcePort.location.x, edge.sourcePort.location.y)
-    edge.bends.forEach(bend => {
+    edge.bends.forEach((bend) => {
       ctx.lineTo(bend.location.x, bend.location.y)
     })
     ctx.lineTo(edge.targetPort.location.x, edge.targetPort.location.y)
@@ -120,15 +120,15 @@ class App {
     this.graphComponent.graph.edgeDefaults.style = new PolylineEdgeStyle({
       stroke: Stroke.WHITE_SMOKE,
       targetArrow: 'white medium triangle',
-      smoothingLength: 10
+      smoothingLength: 10,
     })
 
     this.graphComponent.graph.nodeDefaults.labels.style = new DefaultLabelStyle({
       renderer: new LODLabelStyleRenderer(0.75),
       backgroundFill: 'rgba(255,255,255,0.9)',
       textFill: '#636363',
       font: `12px ${defaultFontFamily}`,
-      insets: new Insets(4)
+      insets: new Insets(4),
     })
     this.graphComponent.graph.nodeDefaults.labels.layoutParameter = FreeNodeLabelModel.INSTANCE.createParameter(
       new Point(0.5, 1),
@@ -139,7 +139,7 @@ class App {
     this.initializeInputMode()
     this.initializePopups()
     this.initializeInteractions()
-    this.knwl.getSimplifiedOntologyGraph().then(async data => {
+    this.knwl.getSimplifiedOntologyGraph().then(async (data) => {
       await this.assembleGraph(data)
     })
 
@@ -214,14 +214,14 @@ class App {
       key: Key.ESCAPE,
       execute: (command, parameter, source) => {
         source.currentItem = null
-      }
+      },
     })
   }
 
   updateNodePopupContent(nodePopup, /*INode*/ node) {
     // get business data from node tag
     const id = node.tag
-    this.knwl.getClass(id).then(data => {
+    this.knwl.getClass(id).then((data) => {
       // get all divs in the pop-up
       const divs = nodePopup.div.getElementsByTagName('div')
       for (let i = 0; i < divs.length; i++) {
@@ -287,7 +287,7 @@ class App {
       }
       return uri
     } else if (_.isArray(uri)) {
-      uri.map(u => this.toShortForm(u))
+      uri.map((u) => this.toShortForm(u))
     } else {
       return uri.toString()
     }
@@ -314,7 +314,7 @@ class App {
     const mode = new GraphViewerInputMode({
       toolTipItems: GraphItemTypes.NODE,
       selectableItems: GraphItemTypes.NODE | GraphItemTypes.EDGE,
-      marqueeSelectableItems: GraphItemTypes.NONE
+      marqueeSelectableItems: GraphItemTypes.NONE,
     })
 
     mode.mouseHoverInputMode.toolTipLocationOffset = new Point(10, 10)
@@ -337,7 +337,7 @@ class App {
       if (item) {
         highlightIndicatorManager.addHighlight(item)
         if (INode.isInstance(item)) {
-          this.graphComponent.graph.edgesAt(item).forEach(edge => {
+          this.graphComponent.graph.edgesAt(item).forEach((edge) => {
             highlightIndicatorManager.addHighlight(edge)
           })
         } else if (IEdge.isInstance(item)) {
@@ -352,23 +352,23 @@ class App {
   layoutCircular() {
     return this.runLayout(
       new CircularLayout({
-        partitionStyle: 'disk'
+        partitionStyle: 'disk',
       })
     )
   }
 
   layoutOrganic() {
     return this.runLayout(
       new OrganicLayout({
-        preferredEdgeLength: 200
+        preferredEdgeLength: 200,
       })
     )
   }
 
   layoutHierarchic() {
     return this.runLayout(
       new HierarchicLayout({
-        considerNodeLabels: true
+        considerNodeLabels: true,
       })
     )
   }
@@ -443,7 +443,7 @@ class App {
     $('#navHierarchic').click(() => {
       this.layoutHierarchic()
     })
-    $('#search-stuff').keypress(e => {
+    $('#search-stuff').keypress((e) => {
       if (e.which === 13) {
         const term = $('#search-stuff').val()
         $('#search-stuff').val('')
@@ -481,7 +481,7 @@ class App {
       objList.empty()
       $('#detailsPanel-title').html(this.toShortForm(uri))
       if (cls.objectProperties.length > 0) {
-        cls.objectProperties.forEach(p => {
+        cls.objectProperties.forEach((p) => {
           objList.append(
             `<div class="col-md-5 offset-col-md-2 text-truncate"><a class="prop-link" href="${p.uri}" target="_blank">${p.name}</a></div>`
           )
@@ -494,7 +494,7 @@ class App {
       const dataList = $('#dataProp-list')
       dataList.empty()
       if (cls.dataProperties.length > 0) {
-        cls.dataProperties.forEach(p => {
+        cls.dataProperties.forEach((p) => {
           dataList.append(
             `<div class="col-md-5 offset-col-md-2 text-truncate"><a class="prop-link" href="${p.uri}" target="_blank">${p.name}</a></div>`
           )
@@ -517,7 +517,7 @@ class CenterPortsLayoutStage extends LayoutStageBase {
   applyLayout(graph) {
     this.applyLayoutCore(graph)
 
-    graph.edges.forEach(edge => {
+    graph.edges.forEach((edge) => {
       graph.getLayout(edge).sourcePoint = YPoint.ORIGIN
       graph.getLayout(edge).targetPoint = YPoint.ORIGIN
     })

app/scripts/knwl.js

@@ -22,7 +22,7 @@ export default class Knwl {
       url: `${this.url}getClass`,
       method: 'POST',
       contentType: 'application/json',
-      data: JSON.stringify({ name: className, includeProps: includeProps })
+      data: JSON.stringify({ name: className, includeProps: includeProps }),
     })
   }
 
@@ -32,7 +32,7 @@ export default class Knwl {
   getSimplifiedOntologyGraph() {
     return $.ajax({
       url: `${this.url}getSimplifiedOntologyGraph`,
-      method: 'GET'
+      method: 'GET',
     })
   }
 }

app/scripts/lodlabelstyle.js

@@ -15,7 +15,7 @@ export class LODLabelStyleRenderer extends DefaultLabelStyleRenderer {
     if (!(visual instanceof SvgVisualGroup)) {
       return visual
     }
-    const rectVisual = visual.children.find(v => v.svgElement.tagName === 'rect')
+    const rectVisual = visual.children.find((v) => v.svgElement.tagName === 'rect')
     rectVisual.svgElement.setAttribute('rx', '7px')
     return visual
   }

app/scripts/popup.js

@@ -5,7 +5,7 @@ import {
   IModelItem,
   Point,
   SimpleLabel,
-  Size
+  Size,
 } from 'yfiles'
 
 /**

copy-license.js

@@ -32,7 +32,7 @@ if (!fs.existsSync(destDir)) {
   fs.mkdirSync(destDir)
 }
 
-fs.copyFile(licenseFile, path.join(destDir, 'license.json'), err => {
+fs.copyFile(licenseFile, path.join(destDir, 'license.json'), (err) => {
   if (err) {
     console.log(
       `\nyFiles license was NOT copied from '${licenseFile}'.` +

knwl/index.js

@@ -139,20 +139,20 @@ class Knowledge {
       if (_.isNil(dataProps) || dataProps.length === 0) {
         cls.dataProperties = []
       } else {
-        cls.dataProperties = dataProps.map(d => {
+        cls.dataProperties = dataProps.map((d) => {
           return {
             name: schema.toShortForm(this.rootId, d),
-            uri: d
+            uri: d,
           }
         })
       }
       if (_.isNil(objectProps) || objectProps.length === 0) {
         cls.objectProperties = []
       } else {
-        cls.objectProperties = objectProps.map(d => {
+        cls.objectProperties = objectProps.map((d) => {
           return {
             name: schema.toShortForm(this.rootId, d),
-            uri: d
+            uri: d,
           }
         })
       }
@@ -393,7 +393,7 @@ class OntologyElement {
       name: null,
       id: null,
       label: null,
-      comment: null
+      comment: null,
     }
   }
 }
@@ -451,7 +451,7 @@ class OntologyClass extends OntologyElement {
         parentId: null,
         parentName: null,
         dataProperties: [],
-        objectProperties: []
+        objectProperties: [],
       },
       super.serializationTemplate
     )
@@ -495,7 +495,7 @@ class OntologyDataProperty extends OntologyElement {
     return _.extend(
       {
         rangeIds: null,
-        domainIds: null
+        domainIds: null,
       },
       super.serializationTemplate
     )
@@ -540,7 +540,7 @@ class OntologyObjectProperty extends OntologyElement {
     return _.extend(
       {
         rangeIds: null,
-        domainIds: null
+        domainIds: null,
       },
       super.serializationTemplate
     )
@@ -551,5 +551,5 @@ module.exports = {
   OntologyClass,
   OntologyDataProperty,
   OntologyObjectProperty,
-  Knowledge
+  Knowledge,
 }