ThomasRohde/Edit properties.ajs

## Edit properties.ajs
/*
Author: Thomas Klok Rohde
Description: Edit properties of selected elements in a spreadsheet
History:
    October 22, 2022	: Created
*/

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

let objects = [];

//$(selection).each(o => { if ($(o).is("element")) objects.push(o); } );
$(selection).each(o => objects.push(o));

if (objects.length == 0) throw new Error("No elements selected");
// Super-set of all the properties defined for the selected objects
let properties = new Set();

objects.forEach(o => {
    let props = o.prop();
    props.forEach(p => properties.add(p));
});

let columns = new Array({
    type: 'text',
    width: '250',
    name: 'name',
    title: 'Name',
    align: 'left',
    readOnly: true,
});

let mapping = new Map();
let reverse = new Map();
let jstypes = new Set(["hidden", "text", "checkbox", "calendar", "dropdown", "color", "image", "html"]);

properties.forEach(p => {
    let cmps = p.split(":");
    let jstype = 'text';
    let jsvalues;
    let jsname = cmps[1];
    if (jstypes.has(jsname)) {
        if (cmps.length == 2) {
            // Syntax: <name> | <name> ":" <JSON object>
            let parse = cmps[1].split(/\s*(\w+)\s*(\[[^\]]*\])/);
            if (parse.length > 0) {
                if (parse.length == 1)
                    jstype = parse[0];
                else
                    jstype = parse[1];
                if (parse.length == 4) {
                    try {
                        jsvalues = JSON.parse(parse[2]);
                    }
                    catch (error) {
                        console.log("Not a JSON value: ", parse[2]);
                    }
                }
            }
            else jsname = cmps[1];
        }
    } else jsname = p;
    mapping.set(jsname, p);
    reverse.set(p, jsname);
    let column = {
        type: jstype,
        width: '100',
        name: jsname,
        align: 'left',
        title: jsname
    };
    if (jsvalues && jstype == 'dropdown') column.source = jsvalues;
    if (jstype == 'color') column.render = 'square';
    if (jstype == 'rating') column.render = 'stars';
    if (jstype == 'calendar') column.options = { format: 'DD/MM/YYYY' };
    columns.push(column);
})
// We need the id's to properly get the data back to the elements - but we don't need to show them
columns.push({
    type: 'hidden',
    name: 'id',
    align: 'left',
    title: 'id'
});

let data = [];
objects.forEach(o => {
    let row = {
        name: ($(o).is("relationship") ? `${o.type} (${o.source.name} - ${o.target.name})` : o.name),
    };
    properties.forEach(p => {
        let value = o.prop(p);
        row[reverse.get(p)] = (value) ? o.prop(p) : "";
    })
    row.id = o.id;
    data.push(row);
})

const SWT = Java.type('org.eclipse.swt.SWT');
const FillLayout = Java.type('org.eclipse.swt.layout.FillLayout');
const Shell = Java.type('org.eclipse.swt.widgets.Shell');
const Browser = Java.type('org.eclipse.swt.browser.Browser');
const ProgressAdapter = Java.extend(Java.type('org.eclipse.swt.browser.ProgressAdapter'));
const LocationAdapter = Java.extend(Java.type('org.eclipse.swt.browser.LocationAdapter'));
const CustomFunction = Java.extend(Java.type('org.eclipse.swt.browser.BrowserFunction'));
const IArchiImages = Java.type('com.archimatetool.editor.ui.IArchiImages');
const ImageFactory = Java.type('com.archimatetool.editor.ui.ImageFactory');

let display = shell.getDisplay();

let newShell = new Shell(display, SWT.SHELL_TRIM | SWT.ON_TOP | SWT.APPLICATION_MODAL);
newShell.setText("Edit properties");
newShell.setLayout(new FillLayout());
let sheet = [];
let headers = [];
let jsondata = {};

html = `<html>
<script src="${__DIR__ + "/lib/jexcel.js"}"></script>
<script src="${__DIR__ + "/lib/jsuites.js"}"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<style>
    :root {
        font-family: Sans-serif;
    }
    button {
        margin-right: 10px;
        padding: 5px;
        width: 100px;
    }
    .jexcel > tbody > tr > td.readonly {
        color: rgba(0,0,0,0.6);
    }
    table
    {
        font-size:0.8em;
    }
</style>
<div id="buttons">
<button onclick="okPressed()">Ok</button><button onclick="cancelPressed()">Cancel</button>
<p style="font-size: 0.7em;">Double-click in a cell to edit. Right-click in the table header to add or rename properties (columns) or save to Excel. Empty cells will delete properties.
Keyboard shortcuts work as expected, including copy/paste and undo. You can add a calculated column and enter an 'Excel' formula, e.g., '=B2*1.1'. The calculated values will be returned and the formulas lost.
</p>
</div>
<div id="spreadsheet"></div>
<script>
    let data = ${JSON.stringify(data, null, 3)};
    let columns = ${JSON.stringify(columns, null, 3)};
    function okPressed() {
        okPressedEvent(
            JSON.stringify(table.getData(false,false)),
            JSON.stringify(table.getHeaders(true)),
            JSON.stringify(table.getJson()));
    }
    function cancelPressed() {
        cancelPressedEvent();
    }
    let table = jspreadsheet(document.getElementById('spreadsheet'), {
        data: data,
        columns: columns,
        allowDeleteColumn: false,
        includeHeadersOnDownload: true,
        freezeColumns: 1,
        allowInsertRow: false,
        allowManualInsertRow: false,
        allowDeleteRow: false,
        allowDeletingAllRows: false,
        copyCompatibility: true
    });
</script>
</html>`;

var okPressed = false;
var cancelPressed = false;
let browser = new Browser(newShell, SWT.NONE);

browser.addProgressListener(new ProgressAdapter({
    completed: function (event) {
        let fncOk = new CustomFunction(browser, "okPressedEvent", {
            function: (args) => {
                okPressed = true;
                sheet = JSON.parse(args[0]);
                headers = JSON.parse(args[1]);
                jsondata = JSON.parse(args[2]);
            }
        });
        let fncCancel = new CustomFunction(browser, "cancelPressedEvent", {
            function: (args) => {
                cancelPressed = true;
            }
        });
        browser.addLocationListener(new LocationAdapter({
            changed: (e) => {
                browser.removeLocationListener(this);
                fncOk.dispose();
                fncCancel.dispose();
            }
        }));
    }
}));

// 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") + "editproperties.html";
$.fs.writeFile(tmpfile, html);

browser.setUrl("file:///" + tmpfile);

// Set icon to Archi icon
newShell.setImage(IArchiImages.ImageFactory.getImage(IArchiImages.ICON_APP));
// Some sizing heuristics. I have no clue what I'm doing!
// newShell.setSize(((columns.length * 100) + 250 + 50) * 1.25, (objects.length > 30 ? 30 : objects.length) * 41 * 1.25);
newShell.open();

while (!newShell.isDisposed() && !okPressed && !cancelPressed) {
    if (!display.readAndDispatch()) display.sleep();
}

if (okPressed) {
    jsondata.forEach(row => {
        let concept = $('#' + row.id);
        let props = new Set();
        concept.prop().forEach(p => props.add(p));
        for (const key in row) {
            // Skip if columns are id or name - we shouldn't mess with them
            if (key == "id" || key == "name") continue;
            // New columns will have the column number as key in the jsondata
            let columnId = parseInt(key);
            let realKey = key;
            if (!isNaN(columnId))
                // Praying that headers contain the column names in the right order!
                realKey = headers[columnId] ? headers[columnId] : realKey;
            // The table name have typing removed for readability. Fetch the original property names
            let originalKey = mapping.get(realKey);
            if (!originalKey) originalKey = realKey;
            if (row[key])
                concept.prop(originalKey, row[key].toString());
            else
                concept.removeProp(originalKey);
            // Make sure all keys are marked as visited
            props.delete(key);
            props.delete(realKey);
            props.delete(originalKey);
        }
        // Remove properties from renamed columns
        props.forEach(p => {
            concept.removeProp(p);
        })
    })
}
else if (cancelPressed)
    console.log('Cancelled.')

newShell.dispose();
	/*
	Author: Thomas Klok Rohde
	Description: Edit properties of selected elements in a spreadsheet
	History:
	October 22, 2022 : Created
	*/

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

	let objects = [];

	//$(selection).each(o => { if ($(o).is("element")) objects.push(o); } );
	$(selection).each(o => objects.push(o));

	if (objects.length == 0) throw new Error("No elements selected");
	// Super-set of all the properties defined for the selected objects
	let properties = new Set();

	objects.forEach(o => {
	let props = o.prop();
	props.forEach(p => properties.add(p));
	});

	let columns = new Array({
	type: 'text',
	width: '250',
	name: 'name',
	title: 'Name',
	align: 'left',
	readOnly: true,
	});

	let mapping = new Map();
	let reverse = new Map();
	let jstypes = new Set(["hidden", "text", "checkbox", "calendar", "dropdown", "color", "image", "html"]);

	properties.forEach(p => {
	let cmps = p.split(":");
	let jstype = 'text';
	let jsvalues;
	let jsname = cmps[1];
	if (jstypes.has(jsname)) {
	if (cmps.length == 2) {
	// Syntax: <name> \| <name> ":" <JSON object>
	let parse = cmps[1].split(/\s(\w+)\s(\[[^\]]*\])/);
	if (parse.length > 0) {
	if (parse.length == 1)
	jstype = parse[0];
	else
	jstype = parse[1];
	if (parse.length == 4) {
	try {
	jsvalues = JSON.parse(parse[2]);
	}
	catch (error) {
	console.log("Not a JSON value: ", parse[2]);
	}
	}
	}
	else jsname = cmps[1];
	}
	} else jsname = p;
	mapping.set(jsname, p);
	reverse.set(p, jsname);
	let column = {
	type: jstype,
	width: '100',
	name: jsname,
	align: 'left',
	title: jsname
	};
	if (jsvalues && jstype == 'dropdown') column.source = jsvalues;
	if (jstype == 'color') column.render = 'square';
	if (jstype == 'rating') column.render = 'stars';
	if (jstype == 'calendar') column.options = { format: 'DD/MM/YYYY' };
	columns.push(column);
	})
	// We need the id's to properly get the data back to the elements - but we don't need to show them
	columns.push({
	type: 'hidden',
	name: 'id',
	align: 'left',
	title: 'id'
	});

	let data = [];
	objects.forEach(o => {
	let row = {
	name: ($(o).is("relationship") ? `${o.type} (${o.source.name} - ${o.target.name})` : o.name),
	};
	properties.forEach(p => {
	let value = o.prop(p);
	row[reverse.get(p)] = (value) ? o.prop(p) : "";
	})
	row.id = o.id;
	data.push(row);
	})

	const SWT = Java.type('org.eclipse.swt.SWT');
	const FillLayout = Java.type('org.eclipse.swt.layout.FillLayout');
	const Shell = Java.type('org.eclipse.swt.widgets.Shell');
	const Browser = Java.type('org.eclipse.swt.browser.Browser');
	const ProgressAdapter = Java.extend(Java.type('org.eclipse.swt.browser.ProgressAdapter'));
	const LocationAdapter = Java.extend(Java.type('org.eclipse.swt.browser.LocationAdapter'));
	const CustomFunction = Java.extend(Java.type('org.eclipse.swt.browser.BrowserFunction'));
	const IArchiImages = Java.type('com.archimatetool.editor.ui.IArchiImages');
	const ImageFactory = Java.type('com.archimatetool.editor.ui.ImageFactory');

	let display = shell.getDisplay();

	let newShell = new Shell(display, SWT.SHELL_TRIM \| SWT.ON_TOP \| SWT.APPLICATION_MODAL);
	newShell.setText("Edit properties");
	newShell.setLayout(new FillLayout());
	let sheet = [];
	let headers = [];
	let jsondata = {};

	html = `<html>
	<script src="${__DIR__ + "/lib/jexcel.js"}"></script>
	<script src="${__DIR__ + "/lib/jsuites.js"}"></script>
	<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
	<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
	<style>
	:root {
	font-family: Sans-serif;
	}
	button {
	margin-right: 10px;
	padding: 5px;
	width: 100px;
	}
	.jexcel > tbody > tr > td.readonly {
	color: rgba(0,0,0,0.6);
	}
	table
	{
	font-size:0.8em;
	}
	</style>
	<div id="buttons">
	<button onclick="okPressed()">Ok</button><button onclick="cancelPressed()">Cancel</button>
	<p style="font-size: 0.7em;">Double-click in a cell to edit. Right-click in the table header to add or rename properties (columns) or save to Excel. Empty cells will delete properties.
	Keyboard shortcuts work as expected, including copy/paste and undo. You can add a calculated column and enter an 'Excel' formula, e.g., '=B2*1.1'. The calculated values will be returned and the formulas lost.
	</p>
	</div>
	<div id="spreadsheet"></div>
	<script>
	let data = ${JSON.stringify(data, null, 3)};
	let columns = ${JSON.stringify(columns, null, 3)};
	function okPressed() {
	okPressedEvent(
	JSON.stringify(table.getData(false,false)),
	JSON.stringify(table.getHeaders(true)),
	JSON.stringify(table.getJson()));
	}
	function cancelPressed() {
	cancelPressedEvent();
	}
	let table = jspreadsheet(document.getElementById('spreadsheet'), {
	data: data,
	columns: columns,
	allowDeleteColumn: false,
	includeHeadersOnDownload: true,
	freezeColumns: 1,
	allowInsertRow: false,
	allowManualInsertRow: false,
	allowDeleteRow: false,
	allowDeletingAllRows: false,
	copyCompatibility: true
	});
	</script>
	</html>`;

	var okPressed = false;
	var cancelPressed = false;
	let browser = new Browser(newShell, SWT.NONE);

	browser.addProgressListener(new ProgressAdapter({
	completed: function (event) {
	let fncOk = new CustomFunction(browser, "okPressedEvent", {
	function: (args) => {
	okPressed = true;
	sheet = JSON.parse(args[0]);
	headers = JSON.parse(args[1]);
	jsondata = JSON.parse(args[2]);
	}
	});
	let fncCancel = new CustomFunction(browser, "cancelPressedEvent", {
	function: (args) => {
	cancelPressed = true;
	}
	});
	browser.addLocationListener(new LocationAdapter({
	changed: (e) => {
	browser.removeLocationListener(this);
	fncOk.dispose();
	fncCancel.dispose();
	}
	}));
	}
	}));

	// 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") + "editproperties.html";
	$.fs.writeFile(tmpfile, html);

	browser.setUrl("file:///" + tmpfile);

	// Set icon to Archi icon
	newShell.setImage(IArchiImages.ImageFactory.getImage(IArchiImages.ICON_APP));
	// Some sizing heuristics. I have no clue what I'm doing!
	// newShell.setSize(((columns.length * 100) + 250 + 50) * 1.25, (objects.length > 30 ? 30 : objects.length) * 41 * 1.25);
	newShell.open();

	while (!newShell.isDisposed() && !okPressed && !cancelPressed) {
	if (!display.readAndDispatch()) display.sleep();
	}

	if (okPressed) {
	jsondata.forEach(row => {
	let concept = $('#' + row.id);
	let props = new Set();
	concept.prop().forEach(p => props.add(p));
	for (const key in row) {
	// Skip if columns are id or name - we shouldn't mess with them
	if (key == "id" \|\| key == "name") continue;
	// New columns will have the column number as key in the jsondata
	let columnId = parseInt(key);
	let realKey = key;
	if (!isNaN(columnId))
	// Praying that headers contain the column names in the right order!
	realKey = headers[columnId] ? headers[columnId] : realKey;
	// The table name have typing removed for readability. Fetch the original property names
	let originalKey = mapping.get(realKey);
	if (!originalKey) originalKey = realKey;
	if (row[key])
	concept.prop(originalKey, row[key].toString());
	else
	concept.removeProp(originalKey);
	// Make sure all keys are marked as visited
	props.delete(key);
	props.delete(realKey);
	props.delete(originalKey);
	}
	// Remove properties from renamed columns
	props.forEach(p => {
	concept.removeProp(p);
	})
	})
	}
	else if (cancelPressed)
	console.log('Cancelled.')

	newShell.dispose();