@elyra/canvas 12.32.1 → 12.33.0

package/locales/common-properties/locales/de.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "Zeilen ausgewählt.",
   "multi.selected.row.action": "Durch die Änderung eines Werts in dieser Zeile wird der Wert in allen zulässigen ausgewählten Zeilen geändert.",
   "datetimefield.format.error.message": "Ungültiges Formatobjekt angegeben. Überprüfen Sie die Eingabedefinitionen.",
+  "datepickerRangeStart.default.label": "Starten",
+  "datepickerRangeEnd.default.label": "Ende",
   "editorform.group.type.error": "(Unbekannter Gruppentyp '{group.groupType()}')",
   "moveable.table.button.top": "An  den Anfang",
   "moveable.table.button.up": "Nach oben",

package/locales/common-properties/locales/es.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "filas seleccionadas.",
   "multi.selected.row.action": "Si se cambia un valor en esta fila se cambiará el valor en todas las filas seleccionadas permitidas.",
   "datetimefield.format.error.message": "Se ha proporcionado un objeto con formato no válido. Compruebe las definiciones de entrada.",
+  "datepickerRangeStart.default.label": "Iniciar",
+  "datepickerRangeEnd.default.label": "Fin",
   "editorform.group.type.error": "(Tipo de grupo desconocido '{group.groupType()}')",
   "moveable.table.button.top": "Subir al principio",
   "moveable.table.button.up": "Subir",

package/locales/common-properties/locales/fr.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "lignes sélectionnées.",
   "multi.selected.row.action": "La modification d'une valeur dans cette ligne modifiera la valeur dans toutes les lignes sélectionnées autorisées.",
   "datetimefield.format.error.message": "Objet de format non valide indiqué. Vérifiez les définitions d'entrée.",
+  "datepickerRangeStart.default.label": "Démarrer",
+  "datepickerRangeEnd.default.label": "Fin",
   "editorform.group.type.error": "(Type de groupe inconnu '{group.groupType()}')",
   "moveable.table.button.top": "Placer en haut",
   "moveable.table.button.up": "Déplacer vers le haut",

package/locales/common-properties/locales/it.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "righe selezionate.",
   "multi.selected.row.action": "La modifica di un valore in questa riga modificherà il valore in tutte le righe selezionate consentite.",
   "datetimefield.format.error.message": "È stato fornito un oggetto con formato non valido. Controllare le definizioni di input.",
+  "datepickerRangeStart.default.label": "Avvio",
+  "datepickerRangeEnd.default.label": "Fine",
   "editorform.group.type.error": "(Tipo di gruppo '{group.groupType()}' sconosciuto)",
   "moveable.table.button.top": "Sposta in alto",
   "moveable.table.button.up": "Sposta su",

package/locales/common-properties/locales/ja.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "選択された行。",
   "multi.selected.row.action": "この行の値を変更すると、許可され選択されたすべての行の値が変更されます。",
   "datetimefield.format.error.message": "無効なフォーマットのオブジェクトが指定されました。 入力定義を確認してください。",
+  "datepickerRangeStart.default.label": "開始",
+  "datepickerRangeEnd.default.label": "語末",
   "editorform.group.type.error": "(不明なグループ・タイプ「{group.groupType()}」)",
   "moveable.table.button.top": "一番上に移動",
   "moveable.table.button.up": "上へ移動",

package/locales/common-properties/locales/ko.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "행이 선택되었습니다.",
   "multi.selected.row.action": "이 행의 값을 변경하면 허용되는 모든 선택된 행의 값이 변경됩니다.",
   "datetimefield.format.error.message": "제공된 형식 오브젝트가 올바르지 않습니다. 입력 정의를 확인하십시오.",
+  "datepickerRangeStart.default.label": "시작",
+  "datepickerRangeEnd.default.label": "종료",
   "editorform.group.type.error": "(알 수 없는 그룹 유형 '{group.groupType()}')",
   "moveable.table.button.top": "맨 위로 이동",
   "moveable.table.button.up": "위로 이동",

package/locales/common-properties/locales/pt-br.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "linhas selecionadas.",
   "multi.selected.row.action": "A mudança de um valor nesta linha mudará o valor em todas as linhas selecionadas permitidas.",
   "datetimefield.format.error.message": "Objeto de formato inválido fornecido. Verifique as definições de entrada.",
+  "datepickerRangeStart.default.label": "Iniciar",
+  "datepickerRangeEnd.default.label": "Terminar",
   "editorform.group.type.error": "(Tipo de grupo desconhecido '{group.groupType()}')",
   "moveable.table.button.top": "Mover para o topo",
   "moveable.table.button.up": "Mover para cima",

package/locales/common-properties/locales/sv.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "rader har valts.",
   "multi.selected.row.action": "Om du ändrar ett värde i den här raden ändras värdet i alla tillåtna valda rader.",
   "datetimefield.format.error.message": "Ett ogiltigt formatobjekt har angetts. Kontrollera indatadefinitioner.",
+  "datepickerRangeStart.default.label": "Start",
+  "datepickerRangeEnd.default.label": "Slut",
   "editorform.group.type.error": "(Okänd grupptyp \"{group.groupType()}\")",
   "moveable.table.button.top": "Flytta överst",
   "moveable.table.button.up": "Flytta upp",

package/locales/common-properties/locales/zh-CN.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "行已选定。",
   "multi.selected.row.action": "如果更改此行中的值，就会更改所有允许的选定行中的值。",
   "datetimefield.format.error.message": "提供的对象格式无效。 请检查输入定义。",
+  "datepickerRangeStart.default.label": "启动",
+  "datepickerRangeEnd.default.label": "结束",
   "editorform.group.type.error": "（未知组类型“{group.groupType()}”）",
   "moveable.table.button.top": "移至顶部",
   "moveable.table.button.up": "上移",

package/locales/common-properties/locales/zh-TW.json

@@ -82,6 +82,8 @@
   "multi.selected.row.label": "列已選定。",
   "multi.selected.row.action": "變更此列中的值將會變更所有容許的所選列中的值。",
   "datetimefield.format.error.message": "所提供的格式物件無效。 請檢查輸入定義。",
+  "datepickerRangeStart.default.label": "開始",
+  "datepickerRangeEnd.default.label": "結束",
   "editorform.group.type.error": "（群組類型 '{group.groupType()}' 不明）",
   "moveable.table.button.top": "移至頂端",
   "moveable.table.button.up": "上移",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.32.1",
+  "version": "12.33.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",

package/src/common-canvas/svg-canvas-renderer.js

@@ -237,6 +237,7 @@ export default class SVGCanvasRenderer {
 		this.initializeGhostDiv();
 
 		this.canvasSVG = this.createCanvasSVG();
+		this.canvasDefs = this.canvasSVG.selectChildren("defs");
 		this.canvasGrp = this.createCanvasGroup(this.canvasSVG, "d3-canvas-group"); // Group to contain all canvas objects
 		this.canvasUnderlay = this.createCanvasUnderlay(this.canvasGrp, "d3-canvas-underlay"); // Put underlay rectangle under comments, nodes and links
 		this.commentsGrp = this.createCanvasGroup(this.canvasGrp, "d3-comments-group"); // Group to always position comments under nodes and links
@@ -3727,16 +3728,53 @@ export default class SVGCanvasRenderer {
 			// Save image field in DOM object to avoid unnecessary image refreshes.
 			imageSel.attr("data-image", image);
 			if (nodeImageType === "svg") {
-				imageSel.selectChild("svg").remove();
-				d3.svg(image, { cache: "force-cache" }).then((data) => {
-					imageSel.node().append(data.documentElement);
-				});
+				if (this.config.enableImageDisplay === "LoadSVGToDefs") {
+					this.loadSVGToDefs(imageSel, image);
+
+				} else {
+					imageSel.selectChild("svg").remove();
+					d3.svg(image, { cache: "force-cache" }).then((data) => {
+						imageSel.node().append(data.documentElement);
+					});
+				}
 			} else {
 				imageSel.attr("xlink:href", image);
 			}
 		}
 	}
 
+	// The default behavior for SVG files is to load them in-line regardless
+	// of how many times a unique image is used for a particular flow. This
+	// can be unnecessarily slow if an image is referenced many times. This
+	// method provides a performance enhancement for displaying SVG images.
+	// It stores each unique SVG file encountered in the <defs> element for the
+	// canvas as a <symbol> element. It then adds <use> elements to each place
+	// where that image is referenced. So, if the same image is referenced many
+	// times there is just one symbol for the SVG file stored in the <defs>
+	// element. This is faster but can restrict customization capabilities of
+	// the canvas images.
+	loadSVGToDefs(imageSel, image) {
+		const symbolId = "img" + image.replaceAll(/[/.]/g, "-"); // Replace all / and . characters with -
+		const symbolSelector = "#" + symbolId;
+		const symbol = this.canvasDefs.selectChildren(symbolSelector);
+		// If no symbol exists in <defs> for this image, add a place holder
+		// <symbol> for it.
+		if (symbol.empty()) {
+			this.canvasDefs.append("symbol").attr("id", symbolId);
+
+			d3.svg(image, { cache: "force-cache" }).then((data) => {
+				// Asynchronously, populate placeholder <symbol> with SVG file contents.
+				this.canvasDefs.selectChildren(symbolSelector)
+					.node()
+					.append(data.documentElement);
+			});
+		}
+
+		// Use <symbol> containing our SVG image from <defs>
+		imageSel.selectChild("use").remove();
+		imageSel.append("use").attr("href", symbolSelector);
+	}
+
 	// Returns the appropriate image from the object (either node or decoration)
 	// passed in.
 	getNodeImage(d) {
@@ -3757,7 +3795,7 @@ export default class SVGCanvasRenderer {
 	// Returns the type of image passed in, either "svg" or "image". This will
 	// be used to append an svg or image element to the DOM.
 	getImageType(nodeImage) {
-		return nodeImage && nodeImage.endsWith(".svg") ? "svg" : "image";
+		return nodeImage && nodeImage.endsWith(".svg") && this.config.enableImageDisplay !== "SVGAsImage" ? "svg" : "image";
 	}
 
 	setNodeStyles(d, type, nodeGrp) {
@@ -4601,14 +4639,26 @@ export default class SVGCanvasRenderer {
 		const newLink = this.getNewLinkOnDrag(d3Event);
 
 		if (newLink) {
-			this.canvasController.editActionHandler({
-				editType: "updateLink",
-				editSource: "canvas",
-				newLink: newLink,
-				pipelineId: this.pipelineId });
+			const editSubType = this.getLinkEditSubType(newLink);
+			// If editSubType is set the user did a gesture that requires a change
+			// to the object model.
+			if (editSubType) {
+				this.canvasController.editActionHandler({
+					editType: "updateLink",
+					editSubType: editSubType,
+					editSource: "canvas",
+					newLink: newLink,
+					pipelineId: this.pipelineId });
+			// If editSubType is null, the user performed a gesture which should
+			// not be executed as an action so draw the link back in its old position.
+			} else {
+				this.snapBackOldLink();
+			}
+		// newLink might be null when we are dragging a link handle with
+		// enableLinkSelection not set to detachable. If that's the case the
+		// link needs to snap back (redrawn) to its original position.
 		} else {
-			this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
-			this.displayLinks();
+			this.snapBackOldLink();
 		}
 
 		// Switch 'new link over node' highlighting off
@@ -4620,6 +4670,70 @@ export default class SVGCanvasRenderer {
 		this.stopDraggingLink();
 	}
 
+	// Resets and redraws the link being dragged back to its original position.
+	// This is necessary when the user performs a link drag gesture which should
+	// NOT be executed as an action -- therefore the link need to be drawn back
+	// in its original position.
+	snapBackOldLink() {
+		this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
+		this.displayLinks();
+	}
+
+	// Returns the edit sub-type for the link action being performed to further
+	// explain the updateLink action.
+	getLinkEditSubType(newLink) {
+		const oldLink = this.draggingLinkData.oldLink;
+
+		if (oldLink.srcNodeId && !newLink.srcNodeId) {
+			return "detachFromSrcNode";
+
+		} else if (oldLink.trgNodeId && !newLink.trgNodeId) {
+			return "detachFromTrgNode";
+
+		} else if (!oldLink.srcNodeId && newLink.srcNodeId) {
+			return "attachToSrcNode";
+
+		} else if (!oldLink.trgNodeId && newLink.trgNodeId) {
+			return "attachToTrgNode";
+
+		} else if (!oldLink.srcNodeId && !newLink.srcNodeId &&
+								(oldLink.srcPos.x_pos !== newLink.srcPos.x_pos ||
+									oldLink.srcPos.y_pos !== newLink.srcPos.y_pos)) {
+			return "moveSrcPosition";
+
+		} else if (!oldLink.trgNodeId && !newLink.trgNodeId &&
+								(oldLink.trgPos.x_pos !== newLink.trgPos.x_pos ||
+									oldLink.trgPos.y_pos !== newLink.trgPos.y_pos)) {
+			return "moveTrgPosition";
+
+		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
+							oldLink.srcNodeId !== newLink.srcNodeId) {
+			return "switchSrcNode";
+
+		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
+							oldLink.trgNodeId !== newLink.trgNodeId) {
+			return "switchTrgNode";
+
+		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
+							oldLink.srcNodeId === newLink.srcNodeId &&
+							oldLink.srcNodePortId !== newLink.srcNodePortId) {
+			return "switchSrcNodePort";
+
+		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
+							oldLink.trgNodeId === newLink.trgNodeId &&
+							oldLink.trgNodePortId !== newLink.trgNodePortId) {
+			return "switchTrgNodePort";
+		}
+		// We arrive here, in two ways:
+		// 1. if the user dragged a link handle from a node/port and dropped it
+		//    back on the same node/port.
+		// 2. If the user clicked on the unattached end of a detached link but did
+		//    not move it anywhere
+		// In these cases, the updateLink action should NOT be performed and
+		// consequently NO command should be added to the command stack.
+		return null;
+	}
+
 	// Returns a new link if one can be created given the current data in the
 	// this.draggingLinkData object. Returns null if a link cannot be created.
 	getNewLinkOnDrag(d3Event, nodeProximity) {
@@ -4627,6 +4741,7 @@ export default class SVGCanvasRenderer {
 		const newLink = cloneDeep(oldLink);
 
 		if (this.draggingLinkData.endBeingDragged === "start") {
+			delete newLink.srcObj;
 			delete newLink.srcNodeId;
 			delete newLink.srcNodePortId;
 			delete newLink.srcPos;
@@ -4637,6 +4752,7 @@ export default class SVGCanvasRenderer {
 
 			if (srcNode) {
 				newLink.srcNodeId = srcNode.id;
+				newLink.srcObj = this.activePipeline.getNode(srcNode.id);
 				newLink.srcNodePortId = nodeProximity
 					? this.getNodePortIdNearMousePos(d3Event, OUTPUT_TYPE, srcNode)
 					: this.getOutputNodePortId(d3Event, srcNode);
@@ -4645,6 +4761,7 @@ export default class SVGCanvasRenderer {
 			}
 
 		} else {
+			delete newLink.trgNode;
 			delete newLink.trgNodeId;
 			delete newLink.trgNodePortId;
 			delete newLink.trgPos;
@@ -4655,6 +4772,7 @@ export default class SVGCanvasRenderer {
 
 			if (trgNode) {
 				newLink.trgNodeId = trgNode.id;
+				newLink.trgNode = this.activePipeline.getNode(trgNode.id);
 				newLink.trgNodePortId = nodeProximity
 					? this.getNodePortIdNearMousePos(d3Event, INPUT_TYPE, trgNode)
 					: this.getInputNodePortId(d3Event, trgNode);
@@ -6511,6 +6629,7 @@ export default class SVGCanvasRenderer {
 					: null;
 			const coords = this.linkUtils.getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation);
 
+			// Set additional calculated fields on link object.
 			link.coordsUpdated =
 				link.x1 !== coords.x1 ||
 				link.y1 !== coords.y1 ||
@@ -6518,8 +6637,6 @@ export default class SVGCanvasRenderer {
 				link.y2 !== coords.y2;
 
 			link.assocLinkVariation = assocLinkVariation;
-			link.srcPortId = srcPortId;
-			link.trgPortId = trgPortId;
 			link.x1 = coords.x1;
 			link.y1 = coords.y1;
 			link.x2 = coords.x2;
@@ -6587,14 +6704,13 @@ export default class SVGCanvasRenderer {
 			}
 		}
 
+		// Set additional calculated fields on link object.
 		link.coordsUpdated =
 			link.x1 !== coords.x1 ||
 			link.y1 !== coords.y1 ||
 			link.x2 !== coords.x2 ||
 			link.y2 !== coords.y2;
 
-		link.srcPortId = srcPortId;
-		link.trgPortId = trgPortId;
 		link.x1 = coords.x1;
 		link.y1 = coords.y1;
 		link.x2 = coords.x2;

package/src/common-properties/components/flexible-table/flexible-table.jsx

@@ -251,11 +251,11 @@ class FlexibleTable extends React.Component {
 		let dynamicH = this.state.dynamicHeight;
 		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;
 		if (Array.isArray(this.props.data) && this.props.data.length < this.state.rows) {
-			newHeight = (REM_ROW_HEIGHT * this.props.data.length + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+			newHeight = (REM_ROW_HEIGHT * this.props.data.length + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) * ONE_REM_HEIGHT;
 		} else if (this.state.rows > 0) {
-			newHeight = (REM_ROW_HEIGHT * this.state.rows + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+			newHeight = (REM_ROW_HEIGHT * this.state.rows + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) * ONE_REM_HEIGHT;
 		} else if (this.state.rows === 0) { // only display header
-			newHeight = REM_HEADER_HEIGHT + "rem";
+			newHeight = REM_HEADER_HEIGHT * ONE_REM_HEIGHT;
 		} else if (this.state.rows === -1) {
 			if (this.flexibleTable) {
 				const labelAndDescriptionHeight = 50; // possible dynamically set this in the future
@@ -267,7 +267,7 @@ class FlexibleTable extends React.Component {
 					dynamicH = -1;
 				} else {
 					const totalHeight = flyoutHeight !== 0 ? flyoutHeight : tearsheetHeight;
-					newHeight = `calc(${totalHeight - ftHeaderHeight - labelAndDescriptionHeight}px - 3.5rem)`; // 3.5rem to adjust padding
+					newHeight = `calc(${totalHeight - ftHeaderHeight - labelAndDescriptionHeight}px - ${(3.5 * ONE_REM_HEIGHT)}px)`; // 3.5rem to adjust padding
 					dynamicH = (totalHeight - ftHeaderHeight - labelAndDescriptionHeight) - (3.5 * 16);
 				}
 			}
@@ -528,7 +528,7 @@ class FlexibleTable extends React.Component {
 		const multiSelectEditRowsPixels = multiSelectEditRowsRem * ONE_REM_HEIGHT;
 		if (this.state.rows !== -1 && this.state.tableHeight) {
 			const remHeight = parseInt(this.state.tableHeight, 10);
-			tableHeight = (remHeight - (this.props.selectedEditRow ? multiSelectEditRowsRem : 0)) * ONE_REM_HEIGHT;
+			tableHeight = (remHeight - (this.props.selectedEditRow ? multiSelectEditRowsRem : 0));
 		} else if (this.state.rows === -1 && this.state.dynamicHeight && this.state.dynamicHeight !== -1) {
 			tableHeight = this.state.dynamicHeight - (this.props.selectedEditRow ? multiSelectEditRowsPixels : 0);
 		}

package/src/common-properties/constants/constants.js

@@ -162,7 +162,7 @@ export const DATEPICKER_TYPE = {
 
 export const DEFAULT_DATEPICKER_FORMAT = "Y-m-d"; // ISO format
 
-export const DEFAULT_DATE_FORMAT = "yyyy-mm-dd";
+export const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
 
 export const DEFAULT_TIME_FORMAT = "H:m:s";
 

package/src/common-properties/controls/numberfield/numberfield.jsx

@@ -30,6 +30,10 @@ import { has } from "lodash";
 class NumberfieldControl extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			invalidNumber: false
+		};
 		this.onDirection = this.onDirection.bind(this);
 		this.generateNumber = this.generateNumber.bind(this);
 		this.id = ControlUtils.getControlId(this.props.propertyId);
@@ -56,6 +60,15 @@ class NumberfieldControl extends React.Component {
 		}
 	}
 
+	onInput(evt) {
+		// There's a specific case when manually deleting negative number (eg. -1), 1 is deleted first and then - becomes an invalid number
+		// After user deletes - sign , onInput is called however onChange event isn't triggered.
+		// At this time, invalidNumber state variable is true but the evt.target.value will be a valid "empty" number because - sign was deleted.
+		if (this.state.invalidNumber && evt.target.validity && !evt.target.validity.badInput) {
+			this.handleChange(evt);
+		}
+	}
+
 	handleChange(evt, direction) {
 		if (typeof direction === "string") {
 			this.onDirection(direction);
@@ -79,11 +92,16 @@ class NumberfieldControl extends React.Component {
 				};
 				this.props.controller.updateErrorMessage(this.props.propertyId, errorMessage);
 			}
+			this.setState({ invalidNumber: true });
 			// Return without updating property value
 			return;
 		}
 		// Number is valid, clear invalid number error if it exists
-		const invalidNumberError = this.props.controller.getErrorMessage(this.props.propertyId) !== null &&
+		if (this.state.invalidNumber) {
+			this.setState({ invalidNumber: false });
+		}
+
+		const invalidNumberError = this.props.controller.getErrorMessage(this.props.propertyId) &&
 		this.props.controller.getErrorMessage(this.props.propertyId).validation_id === "invalid_number";
 		if (invalidNumberError) {
 			this.props.controller.updateErrorMessage(this.props.propertyId, null);
@@ -151,6 +169,7 @@ class NumberfieldControl extends React.Component {
 					allowEmpty
 					light={this.props.controller.getLight() && this.props.control.light}
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+					onInput={this.onInput.bind(this)}
 				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
@@ -176,7 +195,7 @@ NumberfieldControl.propTypes = {
 const mapStateToProps = (state, ownProps) => ({
 	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
 	state: ownProps.controller.getControlState(ownProps.propertyId),
-	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId, true) // Filter error messages for hidden/disabled controls
 });
 
 export default connect(mapStateToProps, null)(NumberfieldControl);

package/src/object-model/config-utils.js

@@ -62,6 +62,7 @@ export default class CanvasUtils {
 			enableInternalObjectModel: true,
 			enablePaletteLayout: "Flyout",
 			enableToolbarLayout: "Top",
+			enableImageDisplay: "SVGInline",
 			enableResizableNodes: false,
 			enableInsertNodeDroppedOnLink: false,
 			enableHighlightNodeOnNewLinkDrag: false,