Refactored canvas code to use the canvas datastructures

main.js

@@ -38,6 +38,7 @@ var lines = [];
 var fromnode = -1;
 var locations = {};
 var visitslocs = {};
+var colorGreen = "4";
 var x86_flow_graph = class extends import_obsidian.Plugin {
   async onload() {
     this.addCommand({
@@ -54,7 +55,7 @@ var x86_flow_graph = class extends import_obsidian.Plugin {
         edgeid = 5555;
         workingx = 0;
         workingy = 0;
-        var tmp = editor.getSelection().split("\n");
+        const tmp = editor.getSelection().split("\n");
         tmp.forEach((element) => {
           if (element != "" && !element.contains("```")) {
             lines.push(element);
@@ -62,7 +63,7 @@ var x86_flow_graph = class extends import_obsidian.Plugin {
         });
         lines.forEach((line, linenum) => {
           if (line[0] != "	" && line[0] != " ") {
-            var newkey = line.trim().split("#")[0].trim();
+            let newkey = line.trim().split("#")[0].trim();
             if (newkey[newkey.length - 1] == ":") {
               newkey = newkey.slice(0, newkey.length - 1);
             }
@@ -73,24 +74,25 @@ var x86_flow_graph = class extends import_obsidian.Plugin {
           }
         });
         generatenodes(0, lines, fromnode, "");
-        var outfile = "";
+        let outfile = "";
-        var currfile = this.app.workspace.getActiveFile();
+        const currfile = this.app.workspace.getActiveFile();
         const d = new Date();
         if (currfile) {
-          var outfile = currfile.parent.path + "/" + d.getTime() + ".canvas";
+          outfile = currfile.parent.path + "/" + d.getTime() + ".canvas";
         }
-        this.app.vault.create(outfile, '{ "nodes":' + JSON.stringify(nodes) + ',"edges":' + JSON.stringify(edges) + "}");
+        let finalCanvas = { nodes, edges };
+        this.app.vault.create(outfile, JSON.stringify(finalCanvas));
       }
     });
   }
 };
 function generatenodes(linenum, text, fromnode2, edgelabel) {
-  var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel);
+  const retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel);
-  var newnode = retarray[0];
+  let newnode = retarray[0];
-  var whereto = retarray[1];
+  let whereto = retarray[1];
   if (newnode != null) {
     fromnode2 = newnode["id"];
-    var wegood = nodeAlredyAdded(newnode);
+    const wegood = nodeAlredyAdded(newnode);
     if (wegood) {
       return;
     } else {
@@ -100,13 +102,13 @@ function generatenodes(linenum, text, fromnode2, edgelabel) {
   if (whereto == "fin") {
     return;
   }
-  var edgelabel = "";
+  edgelabel = "";
   if (whereto.length != 1) {
     edgelabel = "true";
   }
   if (!(whereto[0] in locations)) {
     newnode = generateNewNode("```\nERROR: Jumping to non-existant\nlocation " + whereto[0].trim() + "\n```", -1, -1, 1);
-    var newedge = { "id": edgeid, "fromNode": nodeid - 2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": "true", "color": "4" };
+    const newedge = { id: edgeid.toString(), fromNode: (nodeid - 2).toString(), fromSide: "bottom", toNode: newnode["id"], toSide: "top", label: "true", color: colorGreen };
     edges.push(newedge);
     nodes.push(newnode);
     edgeid = edgeid + 1;
@@ -119,7 +121,7 @@ function generatenodes(linenum, text, fromnode2, edgelabel) {
   return;
 }
 function nodeAlredyAdded(checknode) {
-  var retval = false;
+  let retval = false;
   nodes.forEach((node) => {
     if (checknode["startline"] == node["startline"] && checknode["endline"] == node["endline"]) {
       retval = true;
@@ -128,13 +130,13 @@ function nodeAlredyAdded(checknode) {
   return retval;
 }
 function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
-  var currnode = "```\n";
+  let currnode = "```\n";
-  var i = linenum;
+  let i = linenum;
-  var newnode;
+  let newnode;
-  var jmploc;
+  let jmploc;
-  var newedge = {};
+  let newedge;
-  var edgecolor = "";
+  let edgecolor = "";
-  var side = 1;
+  let side = 1;
   if (edgelabel == "false") {
     edgecolor = "1";
     side = -1;
@@ -143,13 +145,13 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
     side = 1;
   }
   while (i < text.length) {
-    var line = text[i];
+    let line = text[i];
     if (line[0] == "	" || line[0] == " ") {
       if (line.trim()[0] == "j") {
         currnode = currnode + line + "\n```";
         newnode = generateNewNode(currnode, linenum, i, side);
         if (fromnode2 != -1) {
-          newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
+          newedge = { id: edgeid.toString(), fromNode: fromnode2.toString(), fromSide: "bottom", toNode: newnode["id"], toSide: "top", label: edgelabel, color: edgecolor };
           edges.push(newedge);
           edgeid = edgeid + 1;
         }
@@ -172,7 +174,7 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
         newnode = generateNewNode(currnode, linenum, i, side);
         jmploc = [line.trim().slice(line.trim().indexOf(" ") + 1, line.length).split("#")[0].trim()];
         if (fromnode2 != -1) {
-          newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
+          newedge = { id: edgeid.toString(), fromNode: fromnode2.toString(), fromSide: "bottom", toNode: newnode["id"].toString(), toSide: "top", label: edgelabel, color: edgecolor };
           edges.push(newedge);
           edgeid = edgeid + 1;
         }
@@ -182,17 +184,17 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
         visitslocs[line.trim()] = nodeid;
       } else {
         if (currnode == "```\n") {
-          newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": visitslocs[line.trim()], "toSide": "top", "label": edgelabel, "color": edgecolor };
+          newedge = { id: edgeid.toString(), fromNode: fromnode2.toString(), fromSide: "bottom", toNode: visitslocs[line.trim()].toString(), toSide: "top", label: edgelabel, color: edgecolor };
           edges.push(newedge);
           edgeid = edgeid + 1;
         } else {
           currnode = currnode + "\n```";
           newnode = generateNewNode(currnode, linenum, i, side);
           if (fromnode2 != -1) {
-            newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
+            newedge = { id: edgeid.toString(), fromNode: fromnode2.toString(), fromSide: "bottom", toNode: newnode["id"].toString(), toSide: "top", label: edgelabel, color: edgecolor };
             edges.push(newedge);
             edgeid = edgeid + 1;
-            newedge = { "id": edgeid, "fromNode": newnode["id"], "fromSide": "bottom", "toNode": visitslocs[line.trim()], "toSide": "top", "label": "" };
+            newedge = { id: edgeid.toString(), fromNode: newnode["id"].toString(), fromSide: "bottom", toNode: visitslocs[line.trim()].toString(), toSide: "top", label: "" };
             edges.push(newedge);
             edgeid = edgeid + 1;
           }
@@ -212,7 +214,7 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
     newnode = generateNewNode(currnode, linenum, i, side);
     jmploc = "fin";
     if (fromnode2 != -1) {
-      newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
+      newedge = { id: edgeid.toString(), fromNode: fromnode2.toString(), fromSide: "bottom", toNode: newnode["id"].toString(), toSide: "top", label: edgelabel, color: edgecolor };
       edges.push(newedge);
       edgeid = edgeid + 1;
     }
@@ -220,7 +222,17 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
   return [newnode, jmploc];
 }
 function generateNewNode(nodeText, startLineNum, endLineNum, side) {
-  var newnode = { "id": nodeid, "x": workingx * side, "y": workingy, "width": 550, "height": 25 * nodeText.split("\n").length, "type": "text", "text": nodeText, "startline": startLineNum, "endline": endLineNum };
+  const newnode = {
+    type: "text",
+    id: nodeid.toString(),
+    x: workingx * side,
+    y: workingy,
+    width: 550,
+    height: 35 * nodeText.split("\n").length,
+    text: nodeText,
+    startline: startLineNum,
+    endline: endLineNum
+  };
   workingy = workingy + 300;
   workingx = workingx + 50 * nodeid;
   nodeid = nodeid + 1;

node_modules/obsidian/CHANGELOG.md

@@ -0,0 +1,100 @@
+# Changelog
+
+## v1.1.1 (2022-12-8 — Insider build)
+
+<!-- _[Changes since v1.0](https://github.com/obsidianmd/obsidian-api/compare/32fe4c3f...TODO)_ -->
+
+- [`file-open`](https://github.com/obsidianmd/obsidian-api/blob/ec589e9762a1d7e2faad01f894cb34c41b10ecaf/obsidian.d.ts#L4189) event is now fired when focusing a Canvas file card.
+- Exposed the `activeEditor` on the Workspace. When a markdown view is active, this will point to the underlying `MarkdownEditView`. If a canvas view is active, this will be an EmbeddedEditor component.
+
+With these two changes, plugins should be able to adapt to the new Canvas view quite easily. Custom
+views that react the the currently focused views will automatically respond to the user clicking 
+on file cards in the canvas. If a plugin is currently accessing the `Editor` using the following
+approach:
+
+```ts
+let view = app.workspace.getActiveViewOfType(MarkdownView);
+
+if (view) {
+    let editor = view.editor;
+    // or
+    let file = view.file;
+}
+```
+
+Instead you can access the `editor` or `file` by looking under the `activeEditor`:
+```ts
+let { activeEditor } = app.workspace;
+if (activeEditor) {
+    let editor = activeEditor.editor;
+    let file = activeEditor.file;
+}
+```
+
+## v1.1.0 (2022-12-05 — Insider build)
+
+_[Changes since v1.0](https://github.com/obsidianmd/obsidian-api/compare/1b4f6e2...32fe4c3f)_
+
+### New Metadata API
+
+In anticipation of bigger improvements to metadata and frontmatter in Obsidian, we have introduced a new metadata API.
+It is currently defined as follows:
+
+```ts
+interface FileManager {
+/**
+     * Atomically read, modify, and save the frontmatter of a note.
+     * The frontmatter is passed in as a JS object, and should be mutated directly to achieve the desired result.
+     * @param file - the file to be modified. Must be a markdown file.
+     * @param fn - a callback function which mutates the frontMatter object synchronously.
+     * @public
+     */
+    processFrontMatter(file: TFile, fn: (frontMatter: any) => void): Promise<void>
+}
+```
+
+To use it:
+
+```ts
+app.fileManager.processFrontMatter(file, (frontmatter) => {
+    frontmatter["key1"] = value;
+    delete frontmatter["key2"];
+});
+```
+
+All changes made within the callback block will be applied at once.
+
+
+### Improved
+
+- `setTooltip` now accepts an optional tooltip position.
+- The `size?: number` parameter has been removed from `setIcon`. This is now configurable via CSS. You can add override the CSS var `--icon-size` on the parent class of your element to override the sizing (e.g. `.parent-element { --icon-size: var(--icon-xs) } `) The following icon sizes are available out-of-the-box: `--icon-xs`, `--icon-s`, `--icon-m`, and `--icon-l`.
+- `editorCallback` no longer passes the active `view: MarkdownView`. Instead, it now provides either the MarkdownView or a MarkdownFileInfo object. This change allows for editor commands to work within a Canvas.
+- `registerHoverLinkSource` is now available in the API to register your plugin's view with the Page preview core plugin.
+
+### No longer broken
+
+- Fixed `Editor.replaceSelection` not working when run immediately after closing a modal.
+
+### Notable Changes
+
+- Added support for an optional `donation` field the plugin manifest. The donation URL will be shown in the plugin gallery entry.
+- Added macOS calendar entitlements. This allow scripts run from within Obsidian to request calendar access.
+
+## v1.0 (2022-10-13)
+
+_[Changes since v0.15.9](https://github.com/obsidianmd/obsidian-api/compare/ff121cd...1b4f6e2)_
+
+### New
+
+- Added standard [color picker component](https://github.com/obsidianmd/obsidian-api/blob/902badd38ba907689f0917d7b193f7e33d1284fe/obsidian.d.ts#L493).
+
+### Improved
+
+- `getLeaf` can now be used to create a leaf in a new tab, a new tab group, or a new window. The preferred usage of `getLeaf` would be `getLeaf(Keymap.isModEvent(evt))` where `evt` is the user's KeyboardEvent. This allows for a consistent user experience when opening files while a modifier key is pressed.
+
+### Notable Changes
+
+- Workspace information is no longer saved to the `.obsidian/workspace` file. It is now saved to `workspace.json`.
+- Added `.has-active-menu` class to file explorer item that received the right-click.
+- Added `.list-bullet` class to HTML markup for unordered list items.

node_modules/obsidian/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2022 Dynalist Inc.
+
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

node_modules/obsidian/README.md

@@ -2,12 +2,10 @@
 
 Type definitions for the latest [Obsidian](https://obsidian.md) API.
 
-**Warning:** The Obsidian API is still in early alpha and is subject to change at any time!
-
 ### Documentation
 
 All API documentation is located in the file `obsidian.d.ts`.
-This will include types, properties, methods and comments explaining what everything does.
+This will include types, properties, methods, and comments explaining what everything does.
 
 For a full example on how to create Obsidian plugins, use the template at https://github.com/obsidianmd/obsidian-sample-plugin 
 

node_modules/obsidian/canvas.d.ts

@@ -0,0 +1,61 @@
+
+// A color used to encode color data for nodes and edges
+// can be a number (like "1") representing one of the (currently 6) supported colors.
+// or can be a custom color using the hex format "#FFFFFFF".
+export type CanvasColor = string;
+
+// The overall canvas file's JSON
+export interface CanvasData {
+    nodes: (CanvasFileData | CanvasTextData | CanvasLinkData)[];
+    edges: CanvasEdgeData[];
+}
+
+// A node
+export interface CanvasNodeData {
+    // The unique ID for this node
+    id: string;
+    // The positional data
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    // The color of this node
+    color?: CanvasColor;
+}
+
+// A node that is a file, where the file is located somewhere in the vault.
+export interface CanvasFileData extends CanvasNodeData {
+    type: 'file';
+    file: string;
+}
+
+// A node that is plaintext.
+export interface CanvasTextData extends CanvasNodeData {
+    type: 'text';
+    text: string;
+}
+
+// A node that is an external resource.
+export interface CanvasLinkData extends CanvasNodeData {
+    type: 'link';
+    url: string;
+}
+
+// The side of the node that a connection is connected to
+export type NodeSide = 'top' | 'right' | 'bottom' | 'left';
+
+// An edge
+export interface CanvasEdgeData {
+    // The unique ID for this edge
+    id: string;
+    // The node ID and side where this edge starts
+    fromNode: string;
+    fromSide: NodeSide;
+    // The node ID and side where this edge ends
+    toNode: string;
+    toSide: NodeSide;
+    // The color of this edge
+    color?: CanvasColor;
+    // The text label of this edge, if available
+    label?: string;
+}

node_modules/obsidian/obsidian.d.ts

@@ -10,6 +10,9 @@ declare global {
             [key: string]: T;
         }, callback: (value: T, key?: string) => boolean | void, context?: any): boolean;
     }
+    interface ArrayConstructor {
+        combine<T>(arrays: T[][]): T[];
+    }
     interface Array<T> {
         first(): T | undefined;
         last(): T | undefined;
@@ -37,7 +40,7 @@ declare global {
     interface Node {
         detach(): void;
         empty(): void;
-        insertAfter(other: Node): void;
+        insertAfter<T extends Node>(node: T, child: Node | null): T;
         indexOf(other: Node): number;
         setChildrenInPlace(children: Node[]): void;
         appendText(val: string): void;
@@ -58,6 +61,7 @@ declare global {
          * The window object this node belongs to, or the global window.
          */
         win: Window;
+        constructorWin: Window;
     }
     interface Element extends Node {
         getText(): string;
@@ -75,6 +79,7 @@ declare global {
         getAttr(qualifiedName: string): string | null;
         matchParent(selector: string, lastParent?: Element): Element | null;
         getCssPropertyValue(property: string, pseudoElement?: string): string;
+        isActiveElement(): boolean;
     }
     interface HTMLElement extends Element {
         show(): void;
@@ -143,6 +148,23 @@ declare global {
         placeholder?: string;
         href?: string;
     }
+    interface SvgElementInfo {
+        /**
+         * The class to be assigned. Can be a space-separated string or an array of strings.
+         */
+        cls?: string | string[];
+        /**
+         * HTML attributes to be added.
+         */
+        attr?: {
+            [key: string]: string | number | boolean | null;
+        };
+        /**
+         * The parent element to be assigned to.
+         */
+        parent?: Node;
+        prepend?: boolean;
+    }
     interface Node {
         /**
          * Create an element and append it to this node.
@@ -150,10 +172,12 @@ declare global {
         createEl<K extends keyof HTMLElementTagNameMap>(tag: K, o?: DomElementInfo | string, callback?: (el: HTMLElementTagNameMap[K]) => void): HTMLElementTagNameMap[K];
         createDiv(o?: DomElementInfo | string, callback?: (el: HTMLDivElement) => void): HTMLDivElement;
         createSpan(o?: DomElementInfo | string, callback?: (el: HTMLSpanElement) => void): HTMLSpanElement;
+        createSvg<K extends keyof SVGElementTagNameMap>(tag: K, o?: SvgElementInfo | string, callback?: (el: SVGElementTagNameMap[K]) => void): SVGElementTagNameMap[K];
     }
     function createEl<K extends keyof HTMLElementTagNameMap>(tag: K, o?: DomElementInfo | string, callback?: (el: HTMLElementTagNameMap[K]) => void): HTMLElementTagNameMap[K];
     function createDiv(o?: DomElementInfo | string, callback?: (el: HTMLDivElement) => void): HTMLDivElement;
     function createSpan(o?: DomElementInfo | string, callback?: (el: HTMLSpanElement) => void): HTMLSpanElement;
+    function createSvg<K extends keyof SVGElementTagNameMap>(tag: K, o?: SvgElementInfo | string, callback?: (el: SVGElementTagNameMap[K]) => void): SVGElementTagNameMap[K];
     function createFragment(callback?: (el: DocumentFragment) => void): DocumentFragment;
     interface EventListenerInfo {
         selector: string;
@@ -410,7 +434,7 @@ export class ButtonComponent extends BaseComponent {
     /**
      * @public
      */
-    setTooltip(tooltip: string): this;
+    setTooltip(tooltip: string, options?: TooltipOptions): this;
     /**
      * @public
      */
@@ -418,7 +442,7 @@ export class ButtonComponent extends BaseComponent {
     /**
      * @public
      */
-    setIcon(icon: string): this;
+    setIcon(icon: IconName): this;
     /**
      * @public
      */
@@ -481,7 +505,6 @@ export interface CacheItem {
 
 /** @public */
 export interface CloseableComponent {
-
     /** @public */
     close(): any;
 }
@@ -546,7 +569,7 @@ export interface Command {
      * Icon ID to be used in the toolbar.
      * @public
      */
-    icon?: string;
+    icon?: IconName;
     /** @public */
     mobileOnly?: boolean;
     /**
@@ -579,13 +602,13 @@ export interface Command {
      * Overrides `callback` and `checkCallback`
      * @public
      */
-    editorCallback?: (editor: Editor, view: MarkdownView) => any;
+    editorCallback?: (editor: Editor, ctx: MarkdownView | MarkdownFileInfo) => any;
     /**
      * A command callback that is only triggered when the user is in an editor.
      * Overrides `editorCallback`, `callback` and `checkCallback`
      * @public
      */
-    editorCheckCallback?: (checking: boolean, editor: Editor, view: MarkdownView) => boolean | void;
+    editorCheckCallback?: (checking: boolean, editor: Editor, ctx: MarkdownView | MarkdownFileInfo) => boolean | void;
     /**
      * Sets the default hotkey. It is recommended for plugins to avoid setting default hotkeys if possible,
      * to avoid conflicting hotkeys with one that's set by the user, even though customized hotkeys have higher priority.
@@ -714,6 +737,10 @@ export interface DataAdapter {
      * @public
      */
     append(normalizedPath: string, data: string, options?: DataWriteOptions): Promise<void>;
+    /**
+     * @public
+     */
+    process(normalizedPath: string, fn: (data: string) => string, options?: DataWriteOptions): Promise<string>;
     /**
      * @public
      */
@@ -1144,11 +1171,11 @@ export class ExtraButtonComponent extends BaseComponent {
     /**
      * @public
      */
-    setTooltip(tooltip: string): this;
+    setTooltip(tooltip: string, options?: TooltipOptions): this;
     /**
      * @public
      */
-    setIcon(icon: string): this;
+    setIcon(icon: IconName): this;
     /**
      * @public
      */
@@ -1188,6 +1215,19 @@ export class FileManager {
      */
     generateMarkdownLink(file: TFile, sourcePath: string, subpath?: string, alias?: string): string;
 
+    /**
+     * Atomically read, modify, and save the frontmatter of a note.
+     * The frontmatter is passed in as a JS object, and should be mutated directly to achieve the desired result.
+     *
+     * Remember to handle errors thrown by this method.
+     *
+     * @param file - the file to be modified. Must be a markdown file.
+     * @param fn - a callback function which mutates the frontMatter object synchronously.
+     * @throws YAMLParseError if the YAML parsing fails
+     * @throws any errors that your callback function throws
+     * @public
+     */
+    processFrontMatter(file: TFile, fn: (frontMatter: any) => void): Promise<void>;
 }
 
 /**
@@ -1252,6 +1292,10 @@ export class FileSystemAdapter implements DataAdapter {
      * @public
      */
     append(normalizedPath: string, data: string, options?: DataWriteOptions): Promise<void>;
+    /**
+     * @public
+     */
+    process(normalizedPath: string, fn: (data: string) => string, options?: DataWriteOptions): Promise<string>;
 
     /**
      * @public
@@ -1436,10 +1480,15 @@ export function getBlobArrayBuffer(blob: Blob): Promise<ArrayBuffer>;
 /**
  * Create an SVG from an iconId. Returns null if no icon associated with the iconId.
  * @param iconId - the icon ID
- * @param size - the width and height to use
  * @public
  */
-export function getIcon(iconId: string, size?: number): SVGSVGElement | null;
+export function getIcon(iconId: string): SVGSVGElement | null;
+
+/**
+ * Get the list of registered icons
+ * @public
+ */
+export function getIconIds(): IconName[];
 
 /**
  * @public
@@ -1499,6 +1548,22 @@ export interface Hotkey {
 
 }
 
+/**
+ * @public
+ */
+export interface HoverLinkSource {
+    /**
+     * The string that will be displayed in the 'Page preview' plugin settings. It should match your plugin's display name.
+     * @public
+     */
+    display: string;
+    /**
+     * Whether or not the `hover-link` event requires the 'Mod' key to be pressed to trigger.
+     * @public
+     */
+    defaultMod: boolean;
+}
+
 /**
  * @public
  */
@@ -1598,7 +1663,7 @@ export abstract class ItemView extends View {
     /**
      * @public
      */
-    addAction(icon: string, title: string, callback: (evt: MouseEvent) => any, size?: number): HTMLElement;
+    addAction(icon: IconName, title: string, callback: (evt: MouseEvent) => any): HTMLElement;
 
 }
 
@@ -1839,7 +1904,8 @@ export interface MarkdownFileInfo extends HoverParent {
     /**
      * @public
      */
-    get file(): TFile;
+    get file(): TFile | null;
+
     /**
      * @public
      */
@@ -1988,7 +2054,7 @@ export class MarkdownRenderChild extends Component {
 /**
  * @public
  */
-export abstract class MarkdownRenderer extends MarkdownRenderChild implements MarkdownPreviewEvents, HoverParent, MarkdownFileInfo {
+export abstract class MarkdownRenderer extends MarkdownRenderChild implements MarkdownPreviewEvents, HoverParent {
     /** @public */
     app: App;
 
@@ -2103,23 +2169,19 @@ export interface MarkdownSubView {
 /**
  * @public
  */
-export class MarkdownView extends TextFileView {
+export class MarkdownView extends TextFileView implements MarkdownFileInfo {
 
-    /**
+    /** @public */
-     * @public
-     */
     editor: Editor;
 
-    /**
+    /** @public */
-     * @public
-     */
     previewMode: MarkdownPreviewView;
 
-    /**
+    /** @public */
-     * @public
-     */
     currentMode: MarkdownSubView;
 
+    /** @public */
+    hoverPopover: HoverPopover | null;
     /**
      * @public
      */
@@ -2164,7 +2226,7 @@ export type MarkdownViewModeType = 'source' | 'preview';
 /**
  * @public
  */
-export class Menu extends Component {
+export class Menu extends Component implements CloseableComponent {
 
     /**
      * @public
@@ -2199,11 +2261,13 @@ export class Menu extends Component {
     /**
      * @public
      */
-    showAtPosition(position: Point, doc?: Document): this;
+    showAtPosition(position: MenuPositionDef, doc?: Document): this;
     /**
      * @public
      */
     hide(): this;
+    /** @public */
+    close(): void;
     /**
      * @public
      */
@@ -2228,7 +2292,7 @@ export class MenuItem {
     /**
      * @public
      */
-    setIcon(icon: string | null, size?: number): this;
+    setIcon(icon: IconName | null): this;
 
     /**
      * @public
@@ -2259,6 +2323,20 @@ export class MenuItem {
 
 }
 
+/** @public */
+export interface MenuPositionDef {
+    /** @public */
+    x: number;
+    /** @public */
+    y: number;
+    /** @public */
+    width?: number;
+    /** @public */
+    overlap?: boolean;
+    /** @public */
+    left?: boolean;
+}
+
 /**
  * @public
  */
@@ -2354,6 +2432,7 @@ export class Modal implements CloseableComponent {
      * @public
      */
     scope: Scope;
+
     /**
      * @public
      */
@@ -2578,12 +2657,14 @@ export const Platform: {
      * @public
      */
     isMacOS: boolean;
+
     /**
      * We're running in Safari.
      * Typically used to provide workarounds for Safari bugs.
      * @public
      */
     isSafari: boolean;
+
 };
 
 /**
@@ -2609,7 +2690,7 @@ export abstract class Plugin_2 extends Component {
      * @param callback - The `click` callback.
      * @public
      */
-    addRibbonIcon(icon: string, title: string, callback: (evt: MouseEvent) => any): HTMLElement;
+    addRibbonIcon(icon: IconName, title: string, callback: (evt: MouseEvent) => any): HTMLElement;
     /**
      * @public
      */
@@ -2627,6 +2708,11 @@ export abstract class Plugin_2 extends Component {
      * @public
      */
     registerView(type: string, viewCreator: ViewCreator): void;
+    /**
+     * Register your view with the 'Page preview' core plugin as an emitter of the 'hover-link' on the event.
+     * @public
+     */
+    registerHoverLinkSource(id: string, info: HoverLinkSource): void;
     /**
      * @public
      */
@@ -2717,6 +2803,7 @@ export interface PluginManifest {
      * @public
      */
     authorUrl?: string;
+
     /**
      * @public
      */
@@ -2826,28 +2913,6 @@ export function prepareQuery(query: string): PreparedQuery;
  */
 export function prepareSimpleSearch(query: string): (text: string) => SearchResult | null;
 
-/**
- * @public
- */
-export interface Rect {
-    /**
-     * @public
-     */
-    x: number;
-    /**
-     * @public
-     */
-    y: number;
-    /**
-     * @public
-     */
-    width: number;
-    /**
-     * @public
-     */
-    height: number;
-}
-
 /**
  * @public
  */
@@ -2867,6 +2932,13 @@ export interface ReferenceCache extends CacheItem {
     displayText?: string;
 }
 
+/**
+ * Remove a custom icon from the library
+ * @param iconId - the icon ID
+ * @public
+ */
+export function removeIcon(iconId: string): void;
+
 /**
  * @public
  */
@@ -3070,10 +3142,9 @@ export interface SectionCache extends CacheItem {
  * Insert an SVG into the element from an iconId. Does nothing if no icon associated with the iconId.
  * @param parent - the HTML element to insert the icon
  * @param iconId - the icon ID
- * @param size - the pixel size for width and height, defaults to 16
  * @public
  */
-export function setIcon(parent: HTMLElement, iconId: string, size?: number): void;
+export function setIcon(parent: HTMLElement, iconId: IconName): void;
 
 /**
  * @public
@@ -3110,7 +3181,7 @@ export class Setting {
     /**
      * @public
      */
-    setTooltip(tooltip: string): this;
+    setTooltip(tooltip: string, options?: TooltipOptions): this;
     /**
      * @public
      */
@@ -3311,6 +3382,7 @@ export abstract class SuggestModal<T> extends Modal implements ISuggestOwner<T>
      * @public
      */
     inputEl: HTMLInputElement;
+
     /**
      * @public
      */
@@ -3552,7 +3624,7 @@ export class ToggleComponent extends ValueComponent<boolean> {
     /**
      * @public
      */
-    setTooltip(tooltip: string): this;
+    setTooltip(tooltip: string, options?: TooltipOptions): this;
     /**
      * @public
      */
@@ -3563,6 +3635,16 @@ export class ToggleComponent extends ValueComponent<boolean> {
     onChange(callback: (value: boolean) => any): this;
 }
 
+/** @public */
+export interface TooltipOptions {
+    /** @public */
+    placement?: TooltipPlacement;
+
+}
+
+/** @public */
+export type TooltipPlacement = 'bottom' | 'right' | 'left' | 'top';
+
 /** @public */
 export type UserEvent = MouseEvent | KeyboardEvent | TouchEvent | PointerEvent;
 
@@ -3674,6 +3756,15 @@ export class Vault extends Events {
      * @public
      */
     append(file: TFile, data: string, options?: DataWriteOptions): Promise<void>;
+    /**
+     * Atomically read, modify, and save the contents of a note.
+     * @param file - the file to be read and modified.
+     * @param fn - a callback function which returns the new content of the note synchronously.
+     * @param options - write options.
+     * @returns string - the text value of the note that was written.
+     * @public
+     */
+    process(file: TFile, fn: (data: string) => string, options?: DataWriteOptions): Promise<string>;
     /**
      * @public
      */
@@ -3731,7 +3822,7 @@ export abstract class View extends Component {
     /**
      * @public
      */
-    icon: string;
+    icon: IconName;
     /**
      * Whether or not the view is intended for navigation.
      * If your view is a static view that is not intended to be navigated away, set this to false.
@@ -3787,7 +3878,7 @@ export abstract class View extends Component {
     /**
      * @public
      */
-    getIcon(): string;
+    getIcon(): IconName;
     /**
      * Called when the size of this view is changed.
      * @public
@@ -3900,6 +3991,13 @@ export class Workspace extends Events {
      */
     requestSaveLayout: Debouncer<[], Promise<void>>;
 
+    /**
+     * A component managing the current editor. This can be null
+     * if the active view has no editor.
+     * @public
+     */
+    activeEditor: MarkdownFileInfo | null;
+
     /**
      * Runs the callback function right away if layout is already ready,
      * or push it to a queue to be called later when layout is ready.
@@ -3933,8 +4031,13 @@ export class Workspace extends Events {
 
     /**
      * @public
+     * @deprecated
      */
     duplicateLeaf(leaf: WorkspaceLeaf, direction?: SplitDirection): Promise<WorkspaceLeaf>;
+    /**
+     * @public
+     */
+    duplicateLeaf(leaf: WorkspaceLeaf, leafType: PaneType | boolean, direction?: SplitDirection): Promise<WorkspaceLeaf>;
     /**
      * @public
      * @deprecated - You should use {@link getLeaf|getLeaf(false)} instead which does the same thing.
@@ -4119,26 +4222,26 @@ export class Workspace extends Events {
      * Triggered when the user opens the context menu on an editor.
      * @public
      */
-    on(name: 'editor-menu', callback: (menu: Menu, editor: Editor, view: MarkdownView) => any, ctx?: any): EventRef;
+    on(name: 'editor-menu', callback: (menu: Menu, editor: Editor, info: MarkdownView | MarkdownFileInfo) => any, ctx?: any): EventRef;
     /**
      * Triggered when changes to an editor has been applied, either programmatically or from a user event.
      * @public
      */
-    on(name: 'editor-change', callback: (editor: Editor, markdownView: MarkdownView) => any, ctx?: any): EventRef;
+    on(name: 'editor-change', callback: (editor: Editor, info: MarkdownView | MarkdownFileInfo) => any, ctx?: any): EventRef;
     /**
      * Triggered when the editor receives a paste event.
      * Check for `evt.defaultPrevented` before attempting to handle this event, and return if it has been already handled.
      * Use `evt.preventDefault()` to indicate that you've handled the event.
      * @public
      */
-    on(name: 'editor-paste', callback: (evt: ClipboardEvent, editor: Editor, markdownView: MarkdownView) => any, ctx?: any): EventRef;
+    on(name: 'editor-paste', callback: (evt: ClipboardEvent, editor: Editor, info: MarkdownView | MarkdownFileInfo) => any, ctx?: any): EventRef;
     /**
      * Triggered when the editor receives a drop event.
      * Check for `evt.defaultPrevented` before attempting to handle this event, and return if it has been already handled.
      * Use `evt.preventDefault()` to indicate that you've handled the event.
      * @public
      */
-    on(name: 'editor-drop', callback: (evt: DragEvent, editor: Editor, markdownView: MarkdownView) => any, ctx?: any): EventRef;
+    on(name: 'editor-drop', callback: (evt: DragEvent, editor: Editor, info: MarkdownView | MarkdownFileInfo) => any, ctx?: any): EventRef;
 
     /**
      * @public
@@ -4256,7 +4359,7 @@ export class WorkspaceLeaf extends WorkspaceItem {
     /**
      * @public
      */
-    getIcon(): string;
+    getIcon(): IconName;
     /**
      * @public
      */
@@ -4391,3 +4494,7 @@ declare global {
 	 */
 	var app: App;
 }
+
+/** @public */
+type IconName = string;
+

node_modules/obsidian/package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian",
-    "version": "0.16.3",
+    "version": "1.1.1",
     "description": "Type definitions for the latest Obsidian API (https://obsidian.md)",
     "keywords": ["obsdmd"],
     "homepage": "https://obsidian.md",

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "obsidian-x86-flow-graph-plugin",
-	"version": "1.0.2",
+	"version": "1.2.5",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "obsidian-x86-flow-graph-plugin",
-			"version": "1.0.2",
+			"version": "1.2.5",
 			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^4.0.0"
@@ -19,7 +19,7 @@
 				"esbuild": "0.14.47",
 				"eslint": "^8.29.0",
 				"eslint-config-prettier": "^8.5.0",
-				"obsidian": "latest",
+				"obsidian": "^1.1.1",
 				"prettier": "^2.8.1",
 				"tslib": "2.4.0",
 				"typescript": "4.7.4"
@@ -1636,9 +1636,9 @@
 			"dev": true
 		},
 		"node_modules/obsidian": {
-			"version": "0.16.3",
+			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/obsidian/-/obsidian-0.16.3.tgz",
+			"resolved": "https://registry.npmjs.org/obsidian/-/obsidian-1.1.1.tgz",
-			"integrity": "sha512-hal9qk1A0GMhHSeLr2/+o3OpLmImiP+Y+sx2ewP13ds76KXsziG96n+IPFT0mSkup1zSwhEu+DeRhmbcyCCXWw==",
+			"integrity": "sha512-GcxhsHNkPEkwHEjeyitfYNBcQuYGeAHFs1pEpZIv0CnzSfui8p8bPLm2YKLgcg20B764770B1sYGtxCvk9ptxg==",
 			"dev": true,
 			"dependencies": {
 				"@types/codemirror": "0.0.108",
@@ -3185,9 +3185,9 @@
 			"dev": true
 		},
 		"obsidian": {
-			"version": "0.16.3",
+			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/obsidian/-/obsidian-0.16.3.tgz",
+			"resolved": "https://registry.npmjs.org/obsidian/-/obsidian-1.1.1.tgz",
-			"integrity": "sha512-hal9qk1A0GMhHSeLr2/+o3OpLmImiP+Y+sx2ewP13ds76KXsziG96n+IPFT0mSkup1zSwhEu+DeRhmbcyCCXWw==",
+			"integrity": "sha512-GcxhsHNkPEkwHEjeyitfYNBcQuYGeAHFs1pEpZIv0CnzSfui8p8bPLm2YKLgcg20B764770B1sYGtxCvk9ptxg==",
 			"dev": true,
 			"requires": {
 				"@types/codemirror": "0.0.108",

package.json

@@ -19,7 +19,7 @@
 		"esbuild": "0.14.47",
 		"eslint": "^8.29.0",
 		"eslint-config-prettier": "^8.5.0",
-		"obsidian": "latest",
+		"obsidian": "^1.1.1",
 		"prettier": "^2.8.1",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"

src/index.ts

@@ -1,20 +1,23 @@
 import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting, Vault, Workspace } from 'obsidian';
+import { CanvasTextData, CanvasColor, NodeSide, CanvasEdgeData, CanvasData } from 'obsidian/canvas';
+import * as internal from 'stream';
 
-// Remember to rename these classes and interfaces!
+let nodeid = 1;
-var nodeid = 1;
+let edgeid = 5555
-var edgeid = 5555
+let workingx = 0;
-var workingx = 0;
+let workingy = 0;
-var workingy = 0;
+let nodes: any[] = []
-var nodes: any[] = []
+let edges: CanvasEdgeData[] = [] //{"id":"d1e0d15da69178a9","fromNode":"4018052da21dde12","fromSide":"bottom","toNode":"0afaa4e14a75cfe1","toSide":"top","label":"false"}
-var edges: { id: number; fromNode: any; fromSide: string; toNode: number; toSide: string; label: string; }[] = [] //{"id":"d1e0d15da69178a9","fromNode":"4018052da21dde12","fromSide":"bottom","toNode":"0afaa4e14a75cfe1","toSide":"top","label":"false"}
+let lines: string[] = []
-var lines: string[] = []
+let fromnode = -1
-var fromnode = -1
+let locations: any = {}
-var locations: any = {}
+let visitslocs: any = {}
-var visitslocs: any = {}
+let colorGreen: CanvasColor = "4"
+let colorRed: CanvasColor = "1"
 
 export default class x86_flow_graph extends Plugin {
 
-	async onload() {
+	async onload(){
 		// This adds the command to take selected text and create code flow diagram
 		this.addCommand({
 			id: 'x86-create-flow-diagram',
@@ -34,7 +37,7 @@ export default class x86_flow_graph extends Plugin {
 				edgeid = 5555;
 				workingx = 0;
 				workingy = 0;
-				var tmp = editor.getSelection().split("\n")
+				const tmp = editor.getSelection().split("\n")
 				//For loop to remove blank lines and lines containing codeblock characters
 				tmp.forEach(element => {
 					if(element != "" && !element.contains("```")){
@@ -46,7 +49,7 @@ export default class x86_flow_graph extends Plugin {
 					//Only look at lines that could be locations
 					if(line[0] != '\t' && line[0] != " "){
 						//Cut out white space and comments (#)
-						var newkey = line.trim().split("#")[0].trim()
+						let newkey = line.trim().split("#")[0].trim()
 						//Strip off ":" if they are at the end of the location string
 						if(newkey[newkey.length-1] == ":"){
 							newkey = newkey.slice(0,newkey.length-1)
@@ -63,13 +66,14 @@ export default class x86_flow_graph extends Plugin {
 				generatenodes(0,lines,fromnode,"")
 
 				//Get current directory to produce canvas in
-				var outfile = ""
+				let outfile = ""
-				var currfile = this.app.workspace.getActiveFile()
+				const currfile = this.app.workspace.getActiveFile()
 				const d = new Date();
 				if(currfile){
-					var outfile = currfile.parent.path + "/" + d.getTime() + ".canvas"
+					outfile = currfile.parent.path + "/" + d.getTime() + ".canvas"
 				}
-				this.app.vault.create(outfile,"{ \"nodes\":"+JSON.stringify(nodes) + ",\"edges\":" + JSON.stringify(edges) + "}")
+				let finalCanvas: CanvasData = {nodes: nodes, edges: edges}
+				this.app.vault.create(outfile,JSON.stringify(finalCanvas))
 			}
 		});
 
@@ -79,13 +83,13 @@ export default class x86_flow_graph extends Plugin {
 //Recursive function alert! Runs itself once for uncondontional jumps (jmps) and twice for conditional jumps (jz)
 //Returns when it reaches the end of the assembly section OR if it returns to a code block it's seen before 
 function generatenodes(linenum: any, text: any, fromnode: any, edgelabel: string){
-    var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode, edgelabel)
+    const retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode, edgelabel)
-    var newnode: any = retarray[0]
+    let newnode: any = retarray[0]
-	var whereto: any = retarray[1]
+	let whereto: any = retarray[1]
 	if(newnode != null){
 		fromnode = newnode['id']
 		//Check if node is already in list
-		var wegood = nodeAlredyAdded(newnode)
+		const wegood = nodeAlredyAdded(newnode)
 		if(wegood){
 			return
 		}
@@ -97,7 +101,7 @@ function generatenodes(linenum: any, text: any, fromnode: any, edgelabel: string
     if(whereto == "fin"){
         return
     }
-	var edgelabel = "";
+	edgelabel = "";
 	if(whereto.length != 1){
 		edgelabel = "true"
 	}
@@ -106,7 +110,7 @@ function generatenodes(linenum: any, text: any, fromnode: any, edgelabel: string
 		//Make the error node
 		newnode = generateNewNode("```\nERROR: Jumping to non-existant\nlocation " + whereto[0].trim() + "\n```", -1, -1, 1)
 		//nodeid-2 refers to the ID of the node that generated the error
-		var newedge = {"id":edgeid,"fromNode":nodeid-2,"fromSide":"bottom","toNode":newnode['id'],"toSide":"top","label":"true", "color":"4"}
+		const newedge: CanvasEdgeData = {id:edgeid.toString(),fromNode:(nodeid-2).toString(),fromSide:"bottom",toNode:newnode['id'],toSide:"top",label:"true", color:colorGreen}
 		edges.push(newedge)
 		nodes.push(newnode)
 		edgeid = edgeid + 1
@@ -122,7 +126,7 @@ function generatenodes(linenum: any, text: any, fromnode: any, edgelabel: string
 
 //This function returns true if the node has already been added to the nodes array
 function nodeAlredyAdded(checknode: any){
-    var retval = false
+    let retval = false
     nodes.forEach(node => {
         if(checknode["startline"] == node["startline"] && checknode["endline"] == node["endline"]){
             retval = true
@@ -138,13 +142,13 @@ function nodeAlredyAdded(checknode: any){
 //fromnode : nodeID of the previous node that needs to be connected via an edge (-1 if there isn't one)
 //edgelabel : "true","false", or "" to color and label the edges 
 function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edgelabel: string) {
-    var currnode = "```\n"
+    let currnode = "```\n"
-    var i = linenum
+    let i = linenum
-    var newnode
+    let newnode
-    var jmploc
+    let jmploc
-	var newedge: any = {}
+	let newedge: CanvasEdgeData
-	var edgecolor = ""
+	let edgecolor = ""
-	var side = 1;
+	let side = 1;
 	if(edgelabel == "false"){
 		edgecolor = "1"
 		side = -1
@@ -154,7 +158,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
 		side = 1
 	}
     while(i < text.length){
-        var line = text[i]
+        let line = text[i]
 		//If the current line is an instruction and not a location
         if(line[0] == '\t' || line[0] == " "){
 			//If the current instruction is a jump
@@ -163,7 +167,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
                 newnode = generateNewNode(currnode, linenum, i, side)
                 //Only parse the first node
                 if(fromnode != -1){
-                    newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel, "color":edgecolor}
+                    newedge = {id:edgeid.toString(),fromNode:fromnode.toString(),fromSide:"bottom",toNode:newnode["id"],toSide:"top",label:edgelabel, color:edgecolor}
                     edges.push(newedge)
                     edgeid = edgeid + 1
                 }
@@ -195,7 +199,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
 				jmploc = [line.trim().slice(line.trim().indexOf(" ")+1,line.length).split("#")[0].trim()]
 				//If there is a node before the current one
 				if(fromnode != -1){
-					newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel,"color":edgecolor}
+					newedge = {id:edgeid.toString(),fromNode:fromnode.toString(),fromSide:"bottom",toNode:newnode["id"].toString(),toSide:"top",label:edgelabel,color:edgecolor}
 					edges.push(newedge)
 					edgeid = edgeid + 1
 				}
@@ -210,7 +214,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
             else{
 				//If this is an empty node, just draw a line from the previous node to the already visited one
 				if(currnode == "```\n"){
-					newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":visitslocs[line.trim()],"toSide":"top","label":edgelabel,"color":edgecolor}
+					newedge = {id:edgeid.toString(),fromNode:fromnode.toString(),fromSide:"bottom",toNode:visitslocs[line.trim()].toString(),toSide:"top",label:edgelabel,color:edgecolor}
                     edges.push(newedge)
                     edgeid = edgeid + 1
 				}
@@ -220,11 +224,11 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
 					newnode = generateNewNode(currnode, linenum, i, side)
 					if(fromnode != -1){
 						//Draw edge from previous node to the new node
-						newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel,"color":edgecolor}
+						newedge = {id:edgeid.toString(),fromNode:fromnode.toString(),fromSide:"bottom",toNode:newnode["id"].toString(),toSide:"top",label:edgelabel,color:edgecolor}
 						edges.push(newedge)
 						edgeid = edgeid + 1
 						//Draw edge from new node to previously seen node
-						newedge = {"id":edgeid,"fromNode":newnode["id"],"fromSide":"bottom","toNode":visitslocs[line.trim()],"toSide":"top","label":""}
+						newedge = {id:edgeid.toString(),fromNode:newnode["id"].toString(),fromSide:"bottom",toNode:visitslocs[line.trim()].toString(),toSide:"top",label:""}
 						edges.push(newedge)
 						edgeid = edgeid + 1
 					}
@@ -249,7 +253,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
 		newnode = generateNewNode(currnode, linenum, i, side)
 		jmploc = "fin"
         if(fromnode != -1){
-            newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel, "color":edgecolor}
+            newedge = {id:edgeid.toString(),fromNode:fromnode.toString(),fromSide:"bottom",toNode:newnode["id"].toString(),toSide:"top",label:edgelabel, color:edgecolor}
             edges.push(newedge)
             edgeid = edgeid + 1
         }
@@ -258,9 +262,27 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edge
 }
 
 function generateNewNode(nodeText: string, startLineNum: any, endLineNum: any, side: any){
-	var newnode = {"id":nodeid, "x": workingx*side, "y": workingy, "width": 550,"height": 25*nodeText.split("\n").length, "type": "text", "text": nodeText, "startline": startLineNum,"endline": endLineNum}
+	//const newnode = {"id":nodeid, "x": workingx*side, "y": workingy, "width": 550,"height": 25*nodeText.split("\n").length, "type": "text", "text": nodeText, "startline": startLineNum,"endline": endLineNum}
+	const newnode: x86Node = {
+		type: 'text',
+		id: nodeid.toString(),
+		x: workingx*side,
+		y: workingy,
+		width: 550,
+		height: 35*nodeText.split("\n").length,
+		text: nodeText,
+		startline: startLineNum,
+		endline: endLineNum
+	  };
+	  
 	workingy = workingy + 300
 	workingx = workingx + (50*nodeid)
 	nodeid = nodeid + 1
 	return newnode
 }
+
+//Extending CanvasNodeData to add attributes for detecting repeated blocks of code
+interface x86Node extends CanvasTextData{
+	startline: number,
+	endline: number
+}