More docs and added coloring/labels for the edges

This commit is contained in:
david 2023-02-04 17:34:39 -06:00
parent 99bd1d7ea5
commit 86659a9445
4 changed files with 64 additions and 161 deletions

View file

@ -45,6 +45,8 @@ running `x86-create-flow-diagram` on the above codeblock would result in the fol
![Sample Graph #1](./docs/images/graph1.png)
It won't look as nice as this at first, all of the blocks will be in a single column. You'll have to drag them around to make it look pretty. I'm working on doing this a little better...
### Plugin in practice
TODO: Add GIF of running plugin

102
main.js
View file

@ -38,20 +38,10 @@ var lines = [];
var fromnode = -1;
var locations = {};
var visitslocs = {};
var DEFAULT_SETTINGS = {
mySetting: "default"
};
var MyPlugin = class extends import_obsidian.Plugin {
async onload() {
await this.loadSettings();
const ribbonIconEl = this.addRibbonIcon("dice", "Sample Plugin", (evt) => {
new import_obsidian.Notice("This is a notice!");
});
ribbonIconEl.addClass("my-plugin-ribbon-class");
const statusBarItemEl = this.addStatusBarItem();
statusBarItemEl.setText("Status Bar Text");
this.addCommand({
id: "create-flow-diagram",
id: "x86-create-flow-diagram",
name: "Convert x86 assembly into a flow diagram on a canvas",
editorCallback: (editor, view) => {
console.log(editor.getSelection());
@ -81,68 +71,21 @@ var MyPlugin = class extends import_obsidian.Plugin {
}
}
});
generatenodes(0, lines, fromnode);
this.app.vault.create("/pleasegod.canvas", '{ "nodes":' + JSON.stringify(nodes) + ',"edges":' + JSON.stringify(edges) + "}");
console.log('{ "nodes":' + JSON.stringify(nodes) + ',"edges":' + JSON.stringify(edges) + "}");
}
});
this.addCommand({
id: "open-sample-modal-complex",
name: "Open sample modal (complex)",
checkCallback: (checking) => {
const markdownView = this.app.workspace.getActiveViewOfType(import_obsidian.MarkdownView);
if (markdownView) {
if (!checking) {
new SampleModal(this.app).open();
}
return true;
generatenodes(0, lines, fromnode, "");
var outfile = "";
var currfile = this.app.workspace.getActiveFile();
const d = new Date();
if (currfile) {
var outfile = currfile.parent.path + "/" + d.getTime() + ".canvas";
}
this.app.vault.create(outfile, '{ "nodes":' + JSON.stringify(nodes) + ',"edges":' + JSON.stringify(edges) + "}");
}
});
this.addSettingTab(new SampleSettingTab(this.app, this));
this.registerInterval(window.setInterval(() => console.log("setInterval"), 5 * 60 * 1e3));
}
onunload() {
}
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
};
var SampleModal = class extends import_obsidian.Modal {
constructor(app) {
super(app);
}
onOpen() {
const { contentEl } = this;
contentEl.setText("Woah!");
}
onClose() {
const { contentEl } = this;
contentEl.empty();
}
};
var SampleSettingTab = class extends import_obsidian.PluginSettingTab {
constructor(app, plugin) {
super(app, plugin);
this.plugin = plugin;
}
display() {
const { containerEl } = this;
containerEl.empty();
containerEl.createEl("h2", { text: "Settings for my awesome plugin." });
new import_obsidian.Setting(containerEl).setName("Setting #1").setDesc("It's a secret").addText((text) => text.setPlaceholder("Enter your secret").setValue(this.plugin.settings.mySetting).onChange(async (value) => {
console.log("Secret: " + value);
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
}
};
function generatenodes(linenum, text, fromnode2) {
function generatenodes(linenum, text, fromnode2, edgelabel) {
console.log(locations);
var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode2);
var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel);
var newnode = retarray[0];
var whereto = retarray[1];
if (newnode != null) {
@ -160,11 +103,15 @@ function generatenodes(linenum, text, fromnode2) {
if (whereto == "fin") {
return;
}
generatenodes(locations[whereto[0]], text, fromnode2);
var edgelabel = "";
if (whereto.length != 1) {
edgelabel = "false";
}
generatenodes(locations[whereto[0]], text, fromnode2, edgelabel);
if (whereto.length == 2) {
console.log("Oh boy, we at a split");
console.log("going to line: " + whereto[1]);
generatenodes(whereto[1], text, fromnode2);
generatenodes(whereto[1], text, fromnode2, "true");
}
return;
}
@ -177,13 +124,18 @@ function nodeAlredyAdded(checknode) {
});
return retval;
}
function MakeNodeFromLineToNextJump(linenum, text, fromnode2) {
function MakeNodeFromLineToNextJump(linenum, text, fromnode2, edgelabel) {
var currnode = "```\n";
var i = linenum;
var newnode;
var jmploc;
var newedge = {};
console.log("curr line: " + i);
var edgecolor = "";
if (edgelabel == "false") {
edgecolor = "1";
} else if (edgelabel == "true") {
edgecolor = "4";
}
while (i < text.length) {
var line = text[i];
console.log("currently processing this line: " + line);
@ -193,9 +145,10 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2) {
newnode = { "id": nodeid, "x": workingx, "y": workingy, "width": 550, "height": 25 * currnode.split("\n").length, "type": "text", "text": currnode, "startline": linenum, "endline": i };
nodeid = nodeid + 1;
workingy = workingy + 350;
workingx = workingx + 100;
console.log(line.trim().slice(0, 3));
if (fromnode2 != -1) {
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": "" };
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
edges.push(newedge);
edgeid = edgeid + 1;
}
@ -221,8 +174,9 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2) {
currnode = currnode + "\n```";
newnode = { "id": nodeid, "x": workingx, "y": workingy, "width": 550, "height": 25 * currnode.split("\n").length, "type": "text", "text": currnode, "startline": linenum, "endline": i };
workingy = workingy + 350;
workingx = workingx + 100;
if (fromnode2 != -1) {
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": "" };
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
edges.push(newedge);
edgeid = edgeid + 1;
newedge = { "id": edgeid, "fromNode": nodeid, "fromSide": "bottom", "toNode": visitslocs[line.trim()], "toSide": "top", "label": "" };
@ -244,7 +198,7 @@ function MakeNodeFromLineToNextJump(linenum, text, fromnode2) {
nodeid = nodeid + 1;
workingy = workingy + 350;
if (fromnode2 != -1) {
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": "" };
newedge = { "id": edgeid, "fromNode": fromnode2, "fromSide": "bottom", "toNode": newnode["id"], "toSide": "top", "label": edgelabel, "color": edgecolor };
edges.push(newedge);
edgeid = edgeid + 1;
}

View file

@ -1,9 +1,9 @@
{
"id": "obsidian-x86-coloring",
"name": "X86 Code Coloring",
"version": "0.0.1",
"id": "obsidian-x86-flow",
"name": "X86 Flow Graphing",
"version": "1.0.0",
"minAppVersion": "0.15.0",
"description": "An Obsidian plugin for coloring x86 code blocks",
"description": "An Obsidian plugin for converting x86 code blocks into ",
"author": "icebear",
"authorUrl": "https://github.com/dwolfe884",
"isDesktopOnly": false

View file

@ -1,4 +1,4 @@
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting, Vault } from 'obsidian';
import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting, Vault, Workspace } from 'obsidian';
// Remember to rename these classes and interfaces!
var nodeid = 1;
@ -12,20 +12,9 @@ var fromnode = -1
var locations: any = {}
var visitslocs: any = {}
interface MyPluginSettings {
mySetting: string;
}
const DEFAULT_SETTINGS: MyPluginSettings = {
mySetting: 'default'
}
export default class MyPlugin extends Plugin {
settings: MyPluginSettings;
async onload() {
await this.loadSettings();
// This adds a simple command that can be triggered anywhere
/*this.addCommand({
id: 'run-x86-parser',
@ -101,77 +90,24 @@ export default class MyPlugin extends Plugin {
}
}
});
generatenodes(0,lines,fromnode)
this.app.vault.create("/pleasegod.canvas","{ \"nodes\":"+JSON.stringify(nodes) + ",\"edges\":" + JSON.stringify(edges) + "}")
console.log("{ \"nodes\":"+JSON.stringify(nodes) + ",\"edges\":" + JSON.stringify(edges) + "}")
generatenodes(0,lines,fromnode,"")
var outfile = ""
var currfile = this.app.workspace.getActiveFile()
const d = new Date();
if(currfile){
var outfile = currfile.parent.path + "/" + d.getTime() + ".canvas"
}
this.app.vault.create(outfile,"{ \"nodes\":"+JSON.stringify(nodes) + ",\"edges\":" + JSON.stringify(edges) + "}")
}
});
// This adds a settings tab so the user can configure various aspects of the plugin
this.addSettingTab(new SampleSettingTab(this.app, this));
}
onunload() {
}
async loadSettings() {
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
}
async saveSettings() {
await this.saveData(this.settings);
}
}
class SampleModal extends Modal {
constructor(app: App) {
super(app);
}
onOpen() {
const {contentEl} = this;
contentEl.setText('Woah!');
}
onClose() {
const {contentEl} = this;
contentEl.empty();
}
}
class SampleSettingTab extends PluginSettingTab {
plugin: MyPlugin;
constructor(app: App, plugin: MyPlugin) {
super(app, plugin);
this.plugin = plugin;
}
display(): void {
const {containerEl} = this;
containerEl.empty();
containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'});
new Setting(containerEl)
.setName('Setting #1')
.setDesc('It\'s a secret')
.addText(text => text
.setPlaceholder('Enter your secret')
.setValue(this.plugin.settings.mySetting)
.onChange(async (value) => {
console.log('Secret: ' + value);
this.plugin.settings.mySetting = value;
await this.plugin.saveSettings();
}));
}
}
function generatenodes(linenum: any, text: any, fromnode: any){
function generatenodes(linenum: any, text: any, fromnode: any, edgelabel: string){
console.log(locations)
var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode)
var retarray = MakeNodeFromLineToNextJump(linenum, text, fromnode, edgelabel)
var newnode: any = retarray[0]
var whereto: any = retarray[1]
if(newnode != null){
@ -192,11 +128,15 @@ function generatenodes(linenum: any, text: any, fromnode: any){
if(whereto == "fin"){
return
}
generatenodes(locations[whereto[0]], text, fromnode)
var edgelabel = "";
if(whereto.length != 1){
edgelabel = "false"
}
generatenodes(locations[whereto[0]], text, fromnode, edgelabel)
if(whereto.length == 2){
console.log("Oh boy, we at a split")
console.log("going to line: " + whereto[1])
generatenodes(whereto[1], text, fromnode)
generatenodes(whereto[1], text, fromnode, "true")
}
return
}
@ -215,13 +155,19 @@ function nodeAlredyAdded(checknode: any){
//This function takes a line number and the assembly and creates a node from that line to the next jump instruction
//It then returns the new node at retarray[0] and the location to jump to at retarray[1]
//TODO: FIgure out nodeid, x, and y values
function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any) {
function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any, edgelabel: string) {
var currnode = "```\n"
var i = linenum
var newnode
var jmploc
var newedge: any = {}
console.log("curr line: " + i)
var edgecolor = ""
if(edgelabel == "false"){
edgecolor = "1"
}
else if(edgelabel == "true"){
edgecolor = "4"
}
while(i < text.length){
var line = text[i]
console.log("currently processing this line: " + line)
@ -231,10 +177,11 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any) {
newnode = {"id":nodeid, "x": workingx, "y": workingy, "width": 550,"height": 25*currnode.split("\n").length, "type": "text", "text": currnode, "startline": linenum,"endline": i}
nodeid = nodeid + 1
workingy = workingy + 350
workingx = workingx + 100
//Only parse the first node
console.log(line.trim().slice(0,3))
if(fromnode != -1){
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":""}
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel, "color":edgecolor}
edges.push(newedge)
edgeid = edgeid + 1
}
@ -251,7 +198,6 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any) {
}
}
else{
//TODO: Handle location lines
if(visitslocs[line.trim()] == 0){
currnode = currnode + line + "\n"
visitslocs[line.trim()] = nodeid
@ -266,8 +212,9 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any) {
currnode = currnode + "\n```"
newnode = {"id":nodeid, "x": workingx, "y": workingy, "width": 550,"height": 25*currnode.split("\n").length, "type": "text", "text": currnode, "startline": linenum,"endline": i}
workingy = workingy + 350
workingx = workingx + 100
if(fromnode != -1){
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":""}
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel,"color":edgecolor}
edges.push(newedge)
edgeid = edgeid + 1
newedge = {"id":edgeid,"fromNode":nodeid,"fromSide":"bottom","toNode":visitslocs[line.trim()],"toSide":"top","label":""}
@ -291,7 +238,7 @@ function MakeNodeFromLineToNextJump(linenum: any, text: any, fromnode: any) {
nodeid = nodeid + 1
workingy = workingy + 350
if(fromnode != -1){
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":""}
newedge = {"id":edgeid,"fromNode":fromnode,"fromSide":"bottom","toNode":newnode["id"],"toSide":"top","label":edgelabel, "color":edgecolor}
edges.push(newedge)
edgeid = edgeid + 1
}