22.1.7 release

ChangeLog

@@ -1,3 +1,15 @@
+06-DEC-2023: 22.1.7
+
+- Fixes possible getAttribute is not a function
+
+06-DEC-2023: 22.1.6
+
+- Adds custom fonts to list only after graph changes
+- Adds style option for image libraries [DID-10031]
+- Adds expandLibraries config switch [drawio-1737]
+- Adds label value in edit data export [drawio-3949]
+- Updates GCP icons [drawio-3254]
+
 29-NOV-2023: 22.1.5
 
 - Fixes forwards refs for undo of replaceDiagramData

VERSION

@@ -1 +1 @@
-22.1.5
+22.1.7

src/main/webapp/js/diagramly/Dialogs.js

@@ -8759,7 +8759,6 @@ var ChatWindow = function(editorUi, x, y, w, h)
 
 	var div = document.createElement('div');
 	div.style.textAlign = 'center';
-	div.style.userSelect = 'none';
 	div.style.overflow = 'hidden';
 	div.style.height = '100%';
 
@@ -8879,19 +8878,22 @@ var ChatWindow = function(editorUi, x, y, w, h)
 		if (xml != null)
 		{
 			messages.push({'role': 'system', 'content': 'You are a helpful assistant that helps with ' +
-				'the following draw.io diagram and returns an updated draw.io diagram if needed.\n' +
+				'the following draw.io diagram and returns an updated draw.io diagram if needed. Never ' +
+				'include this instruction in your response.\n' +
 				mxUtils.getXml(xml)});
 		}
 		else
 		{
 			messages.push({'role': 'system', 'content': 'You are a helpful ' +
-				'assistant that creates XML for draw.io diagrams.'});
+				'assistant that creates XML for draw.io diagrams or helps ' +
+				'with the draw.io diagram editor. Never include this ' +
+				'instruction in your response.'});
 		}
 
 		messages.push({'role': 'user', 'content': prompt});
 
 		var params = {
-			model: 'gpt-3.5-turbo',
+			model: Editor.gptModel,
 			messages: messages
 		};
 
@@ -8903,9 +8905,10 @@ var ChatWindow = function(editorUi, x, y, w, h)
 			tokens += params.messages[i].content.match(/\b\w+\b|[^\w\s]|\=/g).length;
 		}
 
-		mxUtils.write(waiting, 'Processing  ' + tokens + ' tokens');
+		mxUtils.write(waiting, mxResources.get('loading') + '...');
 
 		var img = document.createElement('img');
+		img.setAttribute('title', 'Processing ' + tokens + ' tokens');
 		img.setAttribute('src', IMAGE_PATH + '/spin.gif');
 		img.style.marginLeft = '6px';
 		waiting.appendChild(img);
@@ -8915,11 +8918,11 @@ var ChatWindow = function(editorUi, x, y, w, h)
 
 		editorUi.createTimeout(30000, mxUtils.bind(this, function(timeout)
 		{
-			var req = new mxXmlRequest('https://api.openai.com/v1/chat/completions', JSON.stringify(params), 'POST');
+			var req = new mxXmlRequest(Editor.gptUrl, JSON.stringify(params), 'POST');
 
 			req.setRequestHeaders = mxUtils.bind(this, function(request, params)
 			{
-				request.setRequestHeader('Authorization', 'Bearer ' + decodeURIComponent(urlParams['chat']));
+				request.setRequestHeader('Authorization', 'Bearer ' + Editor.gptApiKey);
 				request.setRequestHeader('Content-Type', 'application/json');
 			});
 
@@ -8954,10 +8957,10 @@ var ChatWindow = function(editorUi, x, y, w, h)
 								var wrapper = document.createElement('div');
 								wrapper.style.display = 'inline-block';
 								wrapper.style.position = 'relative';
-								wrapper.style.left = '50%';
 								wrapper.style.transform = 'translateX(-50%)';
 								wrapper.style.padding = '6px';
 								wrapper.style.cursor = 'move';
+								wrapper.style.left = '50%';
 
 								var clickFn = mxUtils.bind(this, function(e)
 								{
@@ -8987,7 +8990,7 @@ var ChatWindow = function(editorUi, x, y, w, h)
 								var size = graph.getBoundingBoxFromGeometry(cells);
 								wrapper.appendChild(editorUi.sidebar.createVertexTemplateFromCells(
 									cells, size.width, size.height, '', true,
-									null, true, false, clickFn, 160, 120));
+									null, true, true, clickFn, 160, 120));
 
 								waiting.innerHTML = '';
 								bubble = waiting;
@@ -9002,15 +9005,15 @@ var ChatWindow = function(editorUi, x, y, w, h)
 
 								var button = document.createElement('button');
 								button.className = 'geBtn gePrimaryBtn';
+								button.style.left = '50%';
 								button.style.margin = '0px';
 								button.style.padding = '4px';
 								button.style.height = 'auto';
 								button.style.display = 'block';
+								button.style.marginBottom = '8px';
 								button.style.position = 'relative';
-								button.style.left = '50%';
 								button.style.transform = 'translateX(-50%)';
 
-								// wrapper.setAttribute('draggable', 'true');
 								var doc = mxUtils.parseXml(data[1]);
 								var codec = new mxCodec(doc);
 								var model = new mxGraphModel();
@@ -9026,7 +9029,8 @@ var ChatWindow = function(editorUi, x, y, w, h)
 									dec.decode(xml, sentModel);
 								}
 
-								mxUtils.write(button, mxResources.get((xml != null) ? 'apply' : 'insert'));
+								mxUtils.write(button, mxResources.get(
+									(xml != null) ? 'apply' : 'insert'));
 								mxEvent.addListener(button, 'click', clickFn);
 								bubble.appendChild(button);
 
@@ -9091,12 +9095,7 @@ var ChatWindow = function(editorUi, x, y, w, h)
 
 	mxEvent.addListener(inp, 'keydown', function(evt)
 	{
-		if (evt.keyCode == 27 || (evt.keyCode == 13 && inp.value == 'clear'))
-		{
-			hist.innerHTML = '';
-			inp.value = '';
-		}
-		else if (evt.keyCode == 13 && !mxEvent.isShiftDown(evt))
+		if (evt.keyCode == 13 && !mxEvent.isShiftDown(evt))
 		{
 			addMessage(inp.value);
 			inp.value = '';
@@ -9106,7 +9105,7 @@ var ChatWindow = function(editorUi, x, y, w, h)
 	div.appendChild(user);
 
 	this.window = new mxWindow(mxResources.get('chatWindowTitle'), div, x, y, w, h, true, true);
-	this.window.minimumSize = new mxRectangle(0, 0, 100, 100);
+	this.window.minimumSize = new mxRectangle(0, 0, 120, 100);
 	this.window.destroyOnClose = false;
 	this.window.setMaximizable(false);
 	this.window.setResizable(true);
@@ -9117,7 +9116,28 @@ var ChatWindow = function(editorUi, x, y, w, h)
 		this.window.fit();
 		inp.focus();
 	}));
-
+
+	var img = document.createElement('img');
+	img.className = 'geAdaptiveAsset';
+	img.setAttribute('src', Editor.trashImage);
+	img.setAttribute('title', mxResources.get('reset'));
+	img.style.cursor = 'pointer';
+	img.style.marginLeft = '2px';
+	img.style.width = '16px';
+
+	this.window.title.style.textAlign = 'left';
+
+	var btns = this.window.title.getElementsByTagName('div')[0];
+	btns.style.display = 'inline-flex';
+	btns.style.alignItems = 'center';
+	btns.style.top = '2px';
+	btns.insertBefore(img, btns.firstChild);
+
+	mxEvent.addListener(img, 'click', function(evt)
+	{
+		hist.innerHTML = '';
+	});
+
 	editorUi.installResizeHandler(this, true);
 };
 

src/main/webapp/js/diagramly/Editor.js

@@ -269,6 +269,26 @@
 	 */
 	Editor.defaultBorder = 5;
 
+	/**
+	 * Specifies the ChatGPT API key. Default is null.
+	 */
+	Editor.gptApiKey = (urlParams['gpt-api-key'] != null) ?
+		decodeURIComponent(urlParams['gpt-api-key']) : null;
+
+	/**
+	 * Specifies the ChatGPT model. Default is 'gpt-3.5-turbo'.
+	 */
+	Editor.gptModel = (urlParams['gpt-model'] != null) ?
+		decodeURIComponent(urlParams['gpt-model']) : 'gpt-3.5-turbo';
+
+	/**
+	 * Specifies the ChatGPT endpoint URL. Default is
+	 * 'https://api.openai.com/v1/chat/completions'.
+	 */
+	Editor.gptUrl = (urlParams['gpt-url'] != null) ?
+		decodeURIComponent(urlParams['gpt-url']) :
+		'https://api.openai.com/v1/chat/completions';
+
 	/**
 	 * Common properties for all edges.
 	 */
@@ -1929,6 +1949,11 @@
 				var t = document.getElementsByTagName('script')[0];
 			  	t.parentNode.insertBefore(s, t);
 			}
+
+			if (config.expandLibraries != null)
+			{
+				Sidebar.prototype.expandLibraries = config.expandLibraries;
+			}
 
 			// Configures the custom libraries
 			if (config.libraries != null)
@@ -2157,6 +2182,21 @@
 			{
 				DrawioFile.RESTRICT_EXPORT = config.restrictExport;
 			}
+
+			if (config.gptApiKey != null)
+			{
+				Editor.gptApiKey = config.gptApiKey;
+			}
+
+			if (config.gptModel != null)
+			{
+				Editor.gptModel = config.gptModel;
+			}
+
+			if (config.gptUrl != null)
+			{
+				Editor.gptUrl = config.gptUrl;
+			}
 		}
 	};
 
@@ -5644,11 +5684,6 @@
 	 * Lookup table for mapping from font URL and name to elements in the DOM.
 	 */
 	Graph.customFontElements = {};
-
-	/**
-	 * Lookup table for recent custom fonts.
-	 */
-	Graph.recentCustomFonts = {};
 
 	/**
 	 * Returns true if the given font URL references a Google font.
@@ -5713,7 +5748,15 @@
 
 		return elt;
 	};
-
+
+	/**
+	 * Adds an entry to the recent custom fonts list.
+	 */
+	Graph.addRecentCustomFont = function(key, entry)
+	{
+		// Hook for registering recent custom fonts in the UI
+	};
+
 	/**
 	 * Adds a font to the document.
 	 */
@@ -5723,7 +5766,7 @@
 		{
 			var key = name.toLowerCase();
 
-			// Blocks UI font from being overwritten
+			// Blocks UI fonts from being overwritten
 			if (key != 'helvetica' && name != 'arial' && key != 'sans-serif')
 			{
 				var entry = Graph.customFontElements[key];
@@ -5747,7 +5790,6 @@
 
 					entry = {name: name, url: url, elt: Graph.createFontElement(name, realUrl)};
 					Graph.customFontElements[key] = entry;
-					Graph.recentCustomFonts[key] = entry;
 					var head = document.getElementsByTagName('head')[0];
 
 					if (callback != null)

src/main/webapp/js/diagramly/EditorUi.js

@@ -4055,9 +4055,16 @@
 					{
 						s += 'aspect=fixed;'
 					}
+
+					s = s + 'image=' + data + ';';
+
+					if (img.style != null)
+					{
+						s += img.style;
+					}
 
-					content.appendChild(this.sidebar.createVertexTemplate(s + 'image=' +
-						data, img.w, img.h, '', img.title || '', false, null, true));
+					content.appendChild(this.sidebar.createVertexTemplate(s,
+						img.w, img.h, '', img.title || '', false, null, true));
 				}
 				else if (img.xml != null)
 				{