Paths are now parsed from the dgml file and substituted into the reference properties.

Author: CoderAllan

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## Version 1.3.1
+
+- Paths are now parsed from the dgml file and substituted into the reference properties.
+- The FilePath attribute on a node is now parsed and used as a reference property.
+
 ## Version 1.3.0
 
 - If nodes contain attributes that are defined as a reference property the node is now clickable and will open the referenced file in vscode.

package-lock.json

@@ -4,7 +4,7 @@
   "displayName": "DGMLViewer",
   "description": "DGMLViewer is viewer for dgml (Directed Graph Markup Language) files",
   "icon": "icon.png",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "repository": "https://github.com/CoderAllan/vscode-dgmlviewer",
   "engines": {
     "vscode": "^1.55.0"

package.json

@@ -6,12 +6,13 @@ import {
   ICategory,
   ICondition,
   IDirectedGraph,
-  Link,
-  Node,
+  IPath,
   IProperty,
   ISetter,
   IStyle,
-  IXmlNode
+  IXmlNode,
+  Link,
+  Node
 } from '@model';
 
 export class DgmlParser {
@@ -47,6 +48,8 @@ export class DgmlParser {
           directedGraph.properties = this.convertXmlToProperties(xmlNode.children);
         } else if (xmlNode.name !== undefined && xmlNode.name.toLowerCase() === 'styles') {
           directedGraph.styles = this.convertXmlToStyles(xmlNode.children);
+        } else if (xmlNode.name !== undefined && xmlNode.name.toLowerCase() === 'paths') {
+          directedGraph.paths = this.convertXmlToPaths(xmlNode.children);
         }
       });
       this.addStylingToCategories(directedGraph);
@@ -99,6 +102,7 @@ export class DgmlParser {
           newNode.style = this.getAttributeValue(attributesCopy, 'style');
           newNode.horizontalAlignment = this.getAttributeValue(attributesCopy, 'horizontalalignment');
           newNode.verticalAlignment = this.getAttributeValue(attributesCopy, 'verticalalignment');
+          newNode.filePath = this.getAttributeValue(attributesCopy, 'filepath');
           const minWidth = this.getAttributeValue(attributesCopy, 'minwidth');
           newNode.minWidth = minWidth !== undefined ? +minWidth : undefined;
           const maxWidth = this.getAttributeValue(attributesCopy, 'maxwidth');
@@ -116,10 +120,10 @@ export class DgmlParser {
             newNode.boundsWidth = +bounds[2];
             newNode.boundsHeight = +bounds[3];
           }
-          const additionalProperties = Object.keys(attributesCopy);
-          if (additionalProperties.length > 0) {
-            additionalProperties.forEach(property => {
-              newNode.properties.push({ id: property, value: attributesCopy[property] });
+          const customProperties = Object.keys(attributesCopy);
+          if (customProperties.length > 0) {
+            customProperties.forEach(property => {
+              newNode.customProperties.push({ id: property, value: attributesCopy[property] });
             });
           }
           if (nodes.filter(n => n.id === newNode.id).length === 0) {
@@ -275,6 +279,23 @@ export class DgmlParser {
     return styles;
   }
 
+  private convertXmlToPaths(xmlNodes: IXmlNode[]): IPath[] {
+    const paths: IPath[] = [];
+    if (xmlNodes.length > 0) {
+      xmlNodes.forEach(xmlNode => {
+        if (xmlNode.attributes !== undefined) {
+          const attributesCopy: { [key: string]: string } = this.toLowercaseDictionary(xmlNode.attributes);
+          const newProperty = {
+            id: attributesCopy['id'],
+            value: attributesCopy['value'],
+          } as IPath;
+          paths.push(newProperty);
+        }
+      });
+    }
+    return paths;
+  }
+
   private createCondition(xmlNode: IXmlNode): ICondition | undefined {
     let condition: ICondition | undefined = undefined;
     if (xmlNode.children !== undefined) {
@@ -409,15 +430,31 @@ export class DgmlParser {
   }
 
   private enrichNodes(directedGraph: IDirectedGraph): void {
-    directedGraph.properties.forEach(property => {
-      directedGraph.nodes.forEach(node => {
-        if (node.properties.length > 0) {
-          const existingPropertyIdx = node.properties.findIndex(nodeProperty => nodeProperty.id.toLowerCase() === property.id.toLowerCase());
+    directedGraph.nodes.forEach(node => {
+      if (node.filePath !== undefined) {
+        node.filePath = this.replacePaths(node.filePath, directedGraph);
+      }
+      if (node.customProperties !== undefined && node.customProperties.length > 0) {
+        directedGraph.properties.forEach(property => {
+          const existingPropertyIdx = node.customProperties.findIndex(nodeProperty => nodeProperty.id.toLowerCase() === property.id.toLowerCase());
           if (existingPropertyIdx !== -1) {
-            Object.assign(node.properties[existingPropertyIdx], property);
+            Object.assign(node.customProperties[existingPropertyIdx], property);
+            if (node.customProperties[existingPropertyIdx].isReference) {
+              node.customProperties[existingPropertyIdx].value = this.replacePaths(node.customProperties[existingPropertyIdx].value, directedGraph);
+            }
           }
-        }
-      });
+        });
+      }
     });
   }
+  
+  private replacePaths(filePath: string | undefined, directedGraph: IDirectedGraph): string | undefined {
+    let fixedFilepath = filePath;
+    if (fixedFilepath !== undefined && directedGraph.paths !== undefined && directedGraph.paths.length > 0) {
+      directedGraph.paths.forEach(path => {
+        fixedFilepath = fixedFilepath?.replace(`\$(${path.id})`, path.value);
+      });
+    }
+    return fixedFilepath;
+  }
 }

src/dgmlParser.ts

@@ -1,8 +1,9 @@
 import {
   ICategory,
-  Link,
+  IPath,
   IProperty,
   IStyle,
+  Link,
   Node
 } from '@model';
 
@@ -22,4 +23,5 @@ export interface IDirectedGraph {
   categories: ICategory[];
   properties: IProperty[];
   styles: IStyle[];
+  paths: IPath[];
 }

src/model/IDirectedGraph.ts

@@ -0,0 +1,4 @@
+export interface IPath {
+  id: string;
+  value: string;
+}

src/model/IPath.ts

@@ -32,7 +32,8 @@ export class Node extends BaseElement {
   public minWidth: number | undefined;
   public maxWidth: number | undefined;
   public nodeRadius: number | undefined;
-  // CodeSchemaAttributes - Not included
+  // CodeSchemaAttributes - Not all included
+  public filePath: string | undefined;
   // Visual Studio generated properties
   public boundsX: number | undefined;
   public boundsY: number | undefined;
@@ -44,7 +45,7 @@ export class Node extends BaseElement {
     this.categoryRef = categoryRef;
   }
 
-  public properties: IProperty[] = [];
+  public customProperties: IProperty[] = [];
 
   constructor(filename: string) {
     super();
@@ -113,24 +114,37 @@ export class Node extends BaseElement {
     if (this.boundsX !== undefined && this.boundsY !== undefined) { jsStringProperties.push(`x: ${this.boundsX}, y: ${this.boundsY}, fixed: { x: true, y: true}`); }
     if (this.boundsWidth !== undefined) { jsStringProperties.push(`widthConstraint: { minimum: ${this.boundsWidth} }`); }
     if (this.boundsHeight !== undefined) { jsStringProperties.push(`heightConstraint: { minimum: ${this.boundsHeight}, valign: top }`); }
-    if (this.properties.length > 0) {
-      const referenceProperties = this.properties.find(property => property.isReference === true);
-      if (referenceProperties !== undefined && referenceProperties.value !== undefined) {
-        const fsUtil = new FileSystemUtils();
-        if (fsUtil.fileExists(referenceProperties.value)) {
-          let referenceFilename = referenceProperties.value.split('\\').join('/');
-          jsStringProperties.push(`filepath: "${referenceFilename}"`);
-        } else {
-          const currentDocumentFolder = path.dirname(this.filename);
-          let referenceFilename = path.join(currentDocumentFolder, referenceProperties.value);
-          if (fsUtil.fileExists(referenceFilename)) {
-            referenceFilename = referenceFilename.split('\\').join('/');
-            jsStringProperties.push(`filepath: "${referenceFilename}"`);
-          }
-        }
+    let referencePropertyValue: string | undefined;
+    if (this.filePath !== undefined) {
+      referencePropertyValue = this.getReferenceFilename(this.filePath);
+    }
+    if (referencePropertyValue === undefined && this.customProperties.length > 0) {
+      const firstReferenceProperty = this.customProperties.find(property => property.isReference === true);
+      if (firstReferenceProperty !== undefined && firstReferenceProperty.value !== undefined) {
+        referencePropertyValue = this.getReferenceFilename(firstReferenceProperty.value);
+      }
+    }
+    if (referencePropertyValue !== undefined) {
+      jsStringProperties.push(`filepath: "${referencePropertyValue}"`);
+    }
+  return `{${jsStringProperties.join(', ')}}`;
+  }
+
+  private getReferenceFilename(propertyValue: string): string | undefined {
+    let referenceFilename: string | undefined = undefined;
+    const fsUtil = new FileSystemUtils();
+    if (fsUtil.fileExists(propertyValue)) {
+      referenceFilename = propertyValue.split('\\').join('/');
+    } else {
+      const currentDocumentFolder = path.dirname(this.filename);
+      referenceFilename = path.join(currentDocumentFolder, propertyValue);
+      if (fsUtil.fileExists(referenceFilename)) {
+        referenceFilename = referenceFilename.split('\\').join('/');
+      } else {
+        referenceFilename = undefined;
       }
     }
-    return `{${jsStringProperties.join(', ')}}`;
+    return referenceFilename;
   }
 
   private convertNewlines(text: string | undefined): string {

src/model/Node.ts

@@ -2,6 +2,7 @@ export * from './ICategory';
 export * from './ICondition';
 export * from './IDirectedGraph';
 export * from './Link';
+export * from './IPath';
 export * from './IProperty';
 export * from './ISetter';
 export * from './IStyle';