ThomasRohde/Browser integration.ajs

## Browser integration.ajs
// *** WARNING ***
// On the surface, this seems to work OK, but it does not work with the Archi undo/redo mechanism,
// and there is a risk of corrupting the model  Also, changes might disappear if you run another script while the browser is open

/*
Author: Thomas Klok Rohde
Description:
    Proof-of-concept for interacting with a browser. Enter a regular expression in the search bar,
    and edit any of listed documentation fields. Press 'Refresh' to update the model.
History:
    November 29, 2022 : Created
*/

console.show();
console.clear();

const BrowserEditorInput = Java.type('com.archimatetool.editor.browser.BrowserEditorInput');
const IBrowserEditor = Java.type('com.archimatetool.editor.browser.IBrowserEditor');
const EditorManager = Java.type('com.archimatetool.editor.ui.services.EditorManager');
const CustomFunction = Java.extend(Java.type('org.eclipse.swt.browser.BrowserFunction'));

let html = /* html */
`<!DOCTYPE HTML>
<html>
<head>
    <title>Interacting with the browser</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
      html, body {
        margin: 1em;
        font-family: Verdana, Arial, Helvetica, sans-serif;
      }
    </style>
</head>
<body>
    <div class="row g-3">
        <div class="col-sm-7">
            <div class="input-group mb-3">
                <button class="btn btn-outline-primary" type="button" id="submit" onclick='submit()'>Search</button>
                <input type="text" class="form-control" onchange='submit()' id="content" placeholder="Insert a regular expression as search term" aria-label="Search in the current model" aria-describedby="button-addon1">
            </div>
        </div>
        <div class="col">
            <button class="btn btn-outline-primary" type="button" id="refresh" onclick='refresh()'>Refresh</button>
        </div>
    <div>
    <table class="table table-striped" id="table">
    </table>
    <div id='editor_holder'></div>
    <script type="text/javascript">
        function submit() {
            let content = document.querySelector("#content").value;
            let table = document.querySelector("#table");
            let result = submitEvent(content);
            let outputArea = document.querySelector("#output");

            table.innerHTML = result;
        }
        function refresh() {
            let docAreas = document.querySelectorAll("[data='documentation']");
            let result = {};
            for (const docArea of docAreas) {
                result[docArea.id] = docArea.value;
            }
            refreshEvent(JSON.stringify(result));
        }
    </script>
  </body>
</html>`;

// Write the HTML to a temporary file, so we are allowed to execute a local script
let System = Java.type('java.lang.System');
let tmpfile = System.getProperty("java.io.tmpdir") + "testbrowser.html";
$.fs.writeFile(tmpfile, html);

let input = new BrowserEditorInput("file:///" + tmpfile, "Test browser");
let browser = EditorManager.openEditor(input, IBrowserEditor.ID).getBrowser();
let display = shell.getDisplay();

// Custom browser function to fetch matching elements
let fncSubmit = new CustomFunction(browser, "submitEvent", {
    function: function (args) {
        let search = new RegExp(args[0].toLowerCase().trim());
        let rows = "";
        $("*").each(e => {
            let name = e.name.toLowerCase();
            if (name.match(search)) {
                rows += `<tr><th scope="row">${e.name}</th><td>${e.type}</td><td><textarea data="documentation" class="form-control" id="${e.id}" rows="1">${e.documentation}</textarea></td></tr>`
            }
        })
        let result = `<thead><tr><th scope="col">Name</th><th scope="col">Type</th><th style="width: 60%" scope="col">Documentation</th></tr></thead><tbody>${rows}</tbody>`
        return result;
    }
});

// Custom browser function to update the model
let fncRefresh = new CustomFunction(browser, "refreshEvent", {
    function: function (args) {
        let updates = JSON.parse(args[0]);
        for (const id in updates)
            $("#" + id).first().documentation = updates[id];
    }
});

// Keep the wheels spinning so we can update the model
while (true) {
    if (!display.readAndDispatch()) display.sleep();
}
	// * WARNING *
	// On the surface, this seems to work OK, but it does not work with the Archi undo/redo mechanism,
	// and there is a risk of corrupting the model Also, changes might disappear if you run another script while the browser is open

	/*
	Author: Thomas Klok Rohde
	Description:
	Proof-of-concept for interacting with a browser. Enter a regular expression in the search bar,
	and edit any of listed documentation fields. Press 'Refresh' to update the model.
	History:
	November 29, 2022 : Created
	*/

	console.show();
	console.clear();

	const BrowserEditorInput = Java.type('com.archimatetool.editor.browser.BrowserEditorInput');
	const IBrowserEditor = Java.type('com.archimatetool.editor.browser.IBrowserEditor');
	const EditorManager = Java.type('com.archimatetool.editor.ui.services.EditorManager');
	const CustomFunction = Java.extend(Java.type('org.eclipse.swt.browser.BrowserFunction'));

	let html = /* html */
	`<!DOCTYPE HTML>
	<html>
	<head>
	<title>Interacting with the browser</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style type="text/css">
	html, body {
	margin: 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	</style>
	</head>
	<body>
	<div class="row g-3">
	<div class="col-sm-7">
	<div class="input-group mb-3">
	<button class="btn btn-outline-primary" type="button" id="submit" onclick='submit()'>Search</button>
	<input type="text" class="form-control" onchange='submit()' id="content" placeholder="Insert a regular expression as search term" aria-label="Search in the current model" aria-describedby="button-addon1">
	</div>
	</div>
	<div class="col">
	<button class="btn btn-outline-primary" type="button" id="refresh" onclick='refresh()'>Refresh</button>
	</div>
	<div>
	<table class="table table-striped" id="table">
	</table>
	<div id='editor_holder'></div>
	<script type="text/javascript">
	function submit() {
	let content = document.querySelector("#content").value;
	let table = document.querySelector("#table");
	let result = submitEvent(content);
	let outputArea = document.querySelector("#output");

	table.innerHTML = result;
	}
	function refresh() {
	let docAreas = document.querySelectorAll("[data='documentation']");
	let result = {};
	for (const docArea of docAreas) {
	result[docArea.id] = docArea.value;
	}
	refreshEvent(JSON.stringify(result));
	}
	</script>
	</body>
	</html>`;

	// Write the HTML to a temporary file, so we are allowed to execute a local script
	let System = Java.type('java.lang.System');
	let tmpfile = System.getProperty("java.io.tmpdir") + "testbrowser.html";
	$.fs.writeFile(tmpfile, html);

	let input = new BrowserEditorInput("file:///" + tmpfile, "Test browser");
	let browser = EditorManager.openEditor(input, IBrowserEditor.ID).getBrowser();
	let display = shell.getDisplay();

	// Custom browser function to fetch matching elements
	let fncSubmit = new CustomFunction(browser, "submitEvent", {
	function: function (args) {
	let search = new RegExp(args[0].toLowerCase().trim());
	let rows = "";
	$("*").each(e => {
	let name = e.name.toLowerCase();
	if (name.match(search)) {
	rows += `<tr><th scope="row">${e.name}</th><td>${e.type}</td><td><textarea data="documentation" class="form-control" id="${e.id}" rows="1">${e.documentation}</textarea></td></tr>`
	}
	})
	let result = `<thead><tr><th scope="col">Name</th><th scope="col">Type</th><th style="width: 60%" scope="col">Documentation</th></tr></thead><tbody>${rows}</tbody>`
	return result;
	}
	});

	// Custom browser function to update the model
	let fncRefresh = new CustomFunction(browser, "refreshEvent", {
	function: function (args) {
	let updates = JSON.parse(args[0]);
	for (const id in updates)
	$("#" + id).first().documentation = updates[id];
	}
	});

	// Keep the wheels spinning so we can update the model
	while (true) {
	if (!display.readAndDispatch()) display.sleep();
	}