/** * Copyright (c) 2006-2016, JGraph Ltd * Copyright (c) 2006-2016, Gaudenz Alder *//** * Constructs a new point for the optional x and y coordinates. If no * coordinates are given, then the default values for <x> and <y> are used. * @constructor * @class Implements a basic 2D point. Known subclassers = {@link mxRectangle}. * @param {number} x X-coordinate of the point. * @param {number} y Y-coordinate of the point. *//** * Global types */function DiagramPage(node, id){	this.node = node;	if (id != null)	{		this.node.setAttribute('id', id);	}	else if (this.getId() == null)	{		this.node.setAttribute('id', Editor.guid());	}};/** * Holds the diagram node for the page. */DiagramPage.prototype.node = null;/** * Holds the root cell for the page. */DiagramPage.prototype.root = null;/** * Holds the view state for the page. */DiagramPage.prototype.viewState = null;/** *  */DiagramPage.prototype.getId = function(){	return this.node.getAttribute('id');};/** *  */DiagramPage.prototype.getName = function(){	return this.node.getAttribute('name');};/** *  */DiagramPage.prototype.setName = function(value){	if (value == null)	{		this.node.removeAttribute('name');	}	else	{		this.node.setAttribute('name', value);	}};/** * Change types */function RenamePage(ui, page, name){	this.ui = ui;	this.page = page;	this.name = name;	this.previous = name;}/** * Implementation of the undoable page rename. */RenamePage.prototype.execute = function(){	var tmp = this.page.getName();	this.page.setName(this.previous);	this.name = this.previous;	this.previous = tmp;		// Required to update page name in placeholders	this.ui.editor.graph.updatePlaceholders();	this.ui.editor.fireEvent(new mxEventObject('pageRenamed'));};/** * Undoable change of page title. */function MovePage(ui, oldIndex, newIndex){	this.ui = ui;	this.oldIndex = oldIndex;	this.newIndex = newIndex;}/** * Implementation of the undoable page rename. */MovePage.prototype.execute = function(){	this.ui.pages.splice(this.newIndex, 0, this.ui.pages.splice(this.oldIndex, 1)[0]);	var tmp = this.oldIndex;	this.oldIndex = this.newIndex;	this.newIndex = tmp;		// Required to update page numbers in placeholders	this.ui.editor.graph.updatePlaceholders();	this.ui.editor.fireEvent(new mxEventObject('pageMoved'));};/** * Class: mxCurrentRootChange * * Action to change the current root in a view. * * Constructor: mxCurrentRootChange * * Constructs a change of the current root in the given view. */function SelectPage(ui, page, viewState){	this.ui = ui;	this.page = page;	this.previousPage = page;	this.neverShown = true;		if (page != null)	{		this.neverShown = page.viewState == null;		this.ui.updatePageRoot(page);				if (viewState != null)		{			page.viewState = viewState;			this.neverShown = false;		}	}};/** * Executes selection of a new page. */SelectPage.prototype.execute = function(){	var prevIndex = mxUtils.indexOf(this.ui.pages, this.previousPage);		if (this.page != null && prevIndex >= 0)	{		var page = this.ui.currentPage;		var editor = this.ui.editor;		var graph = editor.graph;				// Stores current diagram state in the page		var data = Graph.compressNode(editor.getGraphXml(true));		mxUtils.setTextContent(page.node, data);		page.viewState = graph.getViewState();		page.root = graph.model.root;				if (page.model != null)		{			// Updates internal structures of offpage model			page.model.rootChanged(page.root);		}				// Transitions for switching pages//		var curIndex = mxUtils.indexOf(this.ui.pages, page);//		mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', null);//		mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform',//			(curIndex > prevIndex) ? 'translate(-50%,0)' : 'translate(50%,0)');				// Removes the previous cells and clears selection		graph.view.clear(page.root, true);		graph.clearSelection();					// Switches the current page		this.ui.currentPage = this.previousPage;		this.previousPage = page;		page = this.ui.currentPage;			// Switches the root cell and sets the view state		graph.model.prefix = Editor.guid() + '-';		graph.model.rootChanged(page.root);		graph.setViewState(page.viewState);		// Handles grid state in chromeless mode which is stored in Editor instance		graph.gridEnabled = graph.gridEnabled && (!this.ui.editor.isChromelessView() ||			urlParams['grid'] == '1');		// Updates the display		editor.updateGraphComponents();		graph.view.validate();		graph.blockMathRender = true;		graph.sizeDidChange();		graph.blockMathRender = false;		//		mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transition', 'transform 0.2s');//		mxUtils.setPrefixedStyle(graph.view.canvas.style, 'transform', 'translate(0,0)');				if (this.neverShown)		{			this.neverShown = false;			graph.selectUnlockedLayer();		}				// Fires events		editor.graph.fireEvent(new mxEventObject(mxEvent.ROOT));		editor.fireEvent(new mxEventObject('pageSelected', 'change', this));	}};/** *  */function ChangePage(ui, page, select, index, noSelect){	SelectPage.call(this, ui, select);	this.relatedPage = page;	this.index = index;	this.previousIndex = null;	this.noSelect = noSelect;};mxUtils.extend(ChangePage, SelectPage);/** * Function: execute * * Changes the current root of the view. */ChangePage.prototype.execute = function(){	// Fires event to setting view state from realtime	this.ui.editor.fireEvent(new mxEventObject('beforePageChange', 'change', this));	this.previousIndex = this.index;		if (this.index == null)	{		var tmp = mxUtils.indexOf(this.ui.pages, this.relatedPage);		this.ui.pages.splice(tmp, 1);		this.index = tmp;	}	else	{		this.ui.pages.splice(this.index, 0, this.relatedPage);		this.index = null;	}		if (!this.noSelect)	{		SelectPage.prototype.execute.apply(this, arguments);	}};/** * Specifies the height of the tab container. Default is 38. */EditorUi.prototype.tabContainerHeight = 38;/** * Returns the index of the selected page. */EditorUi.prototype.getSelectedPageIndex = function(){	return this.getPageIndex(this.currentPage);};/** * Returns the index of the given page. */ EditorUi.prototype.getPageIndex = function(page) {	 var result = null;	 	 if (this.pages != null && page != null)	 {		 for (var i = 0; i < this.pages.length; i++)		 {			 if (this.pages[i] == page)			 {				 result = i;				 				 break;			 }		 }	 }	 	 return result; }; /** * Returns the page with the given ID from the optional array of pages. */EditorUi.prototype.getPageById = function(id, pages){	pages = (pages != null) ? pages : this.pages;	if (pages != null)	{		for (var i = 0; i < pages.length; i++)		{			if (pages[i].getId() == id)			{				return pages[i];			}		}	}	return null;};/** * Returns the background image for the given page link. */EditorUi.prototype.createImageForPageLink = function(src, sourcePage, sourceGraph){	var comma = src.indexOf(',');	var result = null;			if (comma > 0)	{		var page = this.getPageById(src.substring(comma + 1));		if (page != null && page != sourcePage)		{			result = this.getImageForPage(page, sourcePage, sourceGraph);			result.originalSrc = src;		}	}	if (result == null)	{		result = {originalSrc: src};	}	return result;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.getImageForPage = function(page, sourcePage, sourceGraph){	sourceGraph = (sourceGraph != null) ? sourceGraph : this.editor.graph;	var graphGetGlobalVariable = sourceGraph.getGlobalVariable;	var graph = this.createTemporaryGraph(sourceGraph.getStylesheet());	graph.defaultPageBackgroundColor = sourceGraph.defaultPageBackgroundColor;	graph.shapeBackgroundColor = sourceGraph.shapeBackgroundColor;	graph.shapeForegroundColor = sourceGraph.shapeForegroundColor;	var index = this.getPageIndex((sourcePage != null) ?		sourcePage : this.currentPage);	graph.getGlobalVariable = function(name)	{		if (name == 'pagenumber')		{			return index + 1;		}		else if (name == 'page' && sourcePage != null)		{			return sourcePage.getName();		}		else		{			return graphGetGlobalVariable.apply(this, arguments);		}	};	document.body.appendChild(graph.container);	this.updatePageRoot(page);	graph.model.setRoot(page.root);	var temp = Graph.foreignObjectWarningText;	Graph.foreignObjectWarningText = '';	var svgRoot = graph.getSvg(null, null, null, null, null,		null, null, null, null, null, null, true);	var bounds = graph.getGraphBounds();	document.body.removeChild(graph.container);	Graph.foreignObjectWarningText = temp;	return new mxImage(Editor.createSvgDataUri(mxUtils.getXml(svgRoot)),		bounds.width, bounds.height, bounds.x, bounds.y);};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.initPages = function(){	if (!this.editor.graph.standalone)	{		this.actions.addAction('previousPage', mxUtils.bind(this, function()		{			this.selectNextPage(false);		}));				this.actions.addAction('nextPage', mxUtils.bind(this, function()		{			this.selectNextPage(true);		}));		if (this.isPagesEnabled())		{			this.keyHandler.bindAction(33, true, 'previousPage', true); // Ctrl+Shift+PageUp			this.keyHandler.bindAction(34, true, 'nextPage', true); // Ctrl+Shift+PageDown		}					// Updates the tabs after loading the diagram		var graph = this.editor.graph;		var graphViewValidateBackground = graph.view.validateBackground; 				graph.view.validateBackground = mxUtils.bind(this, function()		{			if (this.tabContainer != null)			{				var prevHeight = this.tabContainer.style.height;								if (this.fileNode == null || this.pages == null ||					(this.pages.length == 1 && urlParams['pages'] == '0'))				{					this.tabContainer.style.height = '0px';				}				else				{					this.tabContainer.style.height = this.tabContainerHeight + 'px';				}								if (prevHeight != this.tabContainer.style.height)				{					this.refresh(false);				}			}						graphViewValidateBackground.apply(graph.view, arguments);		});			var lastPage = null;				var updateTabs = mxUtils.bind(this, function()		{			this.updateTabContainer();						// Updates scrollbar positions and backgrounds after validation				var p = this.currentPage;						if (p != null && p != lastPage)			{				if (p.viewState == null || p.viewState.scrollLeft == null)				{					this.resetScrollbars();						if (graph.isLightboxView())					{						this.lightboxFit();					}										if (this.chromelessResize != null)					{						graph.container.scrollLeft = 0;						graph.container.scrollTop = 0;						this.chromelessResize();					}				}				else				{					graph.container.scrollLeft = graph.view.translate.x * graph.view.scale + p.viewState.scrollLeft;					graph.container.scrollTop = graph.view.translate.y * graph.view.scale + p.viewState.scrollTop;				}								lastPage = p;			}						// Updates layers window			if (this.actions.layersWindow != null)			{				this.actions.layersWindow.refreshLayers();			}						// Workaround for math if tab is switched before typesetting has stopped			if (typeof(MathJax) !== 'undefined' && typeof(MathJax.Hub) !== 'undefined')			{				// Pending math should not be rendered if the graph has no math enabled				if (MathJax.Hub.queue.pending == 1 && this.editor != null && !this.editor.graph.mathEnabled)				{					// Since there is no way to stop/undo mathjax or					// clear the queue we have to refresh after typeset					MathJax.Hub.Queue(mxUtils.bind(this, function()					{						if (this.editor != null)						{							this.editor.graph.refresh();						}					}));				}			}			else if (typeof(Editor.MathJaxClear) !== 'undefined' && (this.editor == null || !this.editor.graph.mathEnabled))			{				// Clears our own queue for async loading				Editor.MathJaxClear();			}		});				// Adds a graph model listener to update the view		this.editor.graph.model.addListener(mxEvent.CHANGE, mxUtils.bind(this, function(sender, evt)		{			var edit = evt.getProperty('edit');			var changes = edit.changes;						for (var i = 0; i < changes.length; i++)			{				if (changes[i] instanceof SelectPage ||					changes[i] instanceof RenamePage ||					changes[i] instanceof MovePage ||					changes[i] instanceof mxRootChange)				{					updateTabs();					break;					}			}		}));				// Updates zoom in toolbar		if (this.toolbar != null)		{			this.editor.addListener('pageSelected', this.toolbar.updateZoom);		}	}};/** * Adds the listener for automatically saving the diagram for local changes. */EditorUi.prototype.restoreViewState = function(page, viewState, selection){	var newPage = (page != null) ? this.getPageById(page.getId()) : null;	var graph = this.editor.graph;		if (newPage != null && this.currentPage != null && this.pages != null)	{		if (newPage != this.currentPage)		{			this.selectPage(newPage, true, viewState);		}		else		{			// TODO: Pass viewState to setGraphXml			graph.setViewState(viewState);			this.editor.updateGraphComponents();			graph.view.revalidate();			graph.sizeDidChange();		}		graph.container.scrollLeft = graph.view.translate.x * graph.view.scale + viewState.scrollLeft;		graph.container.scrollTop = graph.view.translate.y * graph.view.scale + viewState.scrollTop;		graph.restoreSelection(selection);	}};/** * Overrides setDefaultParent */Graph.prototype.createViewState = function(node){	var pv = node.getAttribute('page');	var ps = parseFloat(node.getAttribute('pageScale'));	var pw = parseFloat(node.getAttribute('pageWidth'));	var ph = parseFloat(node.getAttribute('pageHeight'));	var bg = node.getAttribute('background');	var bgImg = this.parseBackgroundImage(node.getAttribute('backgroundImage'));	var extFonts = node.getAttribute('extFonts');		if (extFonts)	{		try		{			extFonts = extFonts.split('|').map(function(ef)			{				var parts = ef.split('^');				return {name: parts[0], url: parts[1]};			});		}		catch(e)		{			console.log('ExtFonts format error: ' + e.message);		}	}	return {		gridEnabled: node.getAttribute('grid') != '0',		//gridColor: node.getAttribute('gridColor') || mxSettings.getGridColor(uiTheme == 'dark'),		gridSize: parseFloat(node.getAttribute('gridSize')) || mxGraph.prototype.gridSize,		guidesEnabled: node.getAttribute('guides') != '0',		foldingEnabled: node.getAttribute('fold') != '0',		shadowVisible: node.getAttribute('shadow') == '1',		pageVisible: (this.isLightboxView()) ? false : ((pv != null) ? (pv != '0') : this.defaultPageVisible),		background: (bg != null && bg.length > 0) ? bg : null,		backgroundImage: bgImg,		pageScale: (!isNaN(ps)) ? ps : mxGraph.prototype.pageScale,		pageFormat: (!isNaN(pw) && !isNaN(ph)) ? new mxRectangle(0, 0, pw, ph) :			((typeof mxSettings === 'undefined' || this.defaultPageFormat != null) ?				mxGraph.prototype.pageFormat : mxSettings.getPageFormat()),		tooltips: node.getAttribute('tooltips') != '0',		connect: node.getAttribute('connect') != '0',		arrows: node.getAttribute('arrows') != '0',		mathEnabled: node.getAttribute('math') == '1',		selectionCells: null,		defaultParent: null,		scrollbars: this.defaultScrollbars,		scale: 1,		hiddenTags: [],		extFonts: extFonts || []	};};/** * Writes the graph properties from the realtime model to the given mxGraphModel node. */Graph.prototype.saveViewState = function(vs, node, ignoreTransient, resolveReferences){	if (!ignoreTransient)	{		node.setAttribute('grid', ((vs == null) ? this.defaultGridEnabled : vs.gridEnabled) ? '1' : '0');		node.setAttribute('page', ((vs == null) ? this.defaultPageVisible : vs.pageVisible) ? '1' : '0');		node.setAttribute('gridSize', (vs != null) ? vs.gridSize : mxGraph.prototype.gridSize);		node.setAttribute('guides', (vs == null || vs.guidesEnabled) ? '1' : '0');		node.setAttribute('tooltips', (vs == null || vs.tooltips) ? '1' : '0');		node.setAttribute('connect', (vs == null || vs.connect) ? '1' : '0');		node.setAttribute('arrows', (vs == null || vs.arrows) ? '1' : '0');				// Ignores fold to avoid checksum errors for lightbox mode		node.setAttribute('fold', (vs == null || vs.foldingEnabled) ? '1' : '0');	}	node.setAttribute('pageScale', (vs != null && vs.pageScale != null) ?		vs.pageScale : mxGraph.prototype.pageScale);		var pf = (vs != null) ? vs.pageFormat : (typeof mxSettings === 'undefined' ||		this.defaultPageFormat != null) ? mxGraph.prototype.pageFormat :			mxSettings.getPageFormat();		if (pf != null)	{		node.setAttribute('pageWidth', pf.width);		node.setAttribute('pageHeight', pf.height);	}	if (vs != null)	{		if (vs.background != null)		{			node.setAttribute('background', vs.background);		}		var bgImg = this.getBackgroundImageObject(vs.backgroundImage, resolveReferences);		if (bgImg != null)		{			node.setAttribute('backgroundImage', JSON.stringify(bgImg));		}	}	node.setAttribute('math', ((vs == null) ? this.defaultMathEnabled : vs.mathEnabled) ? '1' : '0');	node.setAttribute('shadow', (vs != null && vs.shadowVisible) ? '1' : '0');		if (vs != null && vs.extFonts != null && vs.extFonts.length > 0)	{		node.setAttribute('extFonts', vs.extFonts.map(function(ef)		{			return ef.name + '^' + ef.url;		}).join('|'));	}};/** * Overrides setDefaultParent */Graph.prototype.getViewState = function(){	return {		defaultParent: this.defaultParent,		currentRoot: this.view.currentRoot,		gridEnabled: this.gridEnabled,		//gridColor: this.view.gridColor,		gridSize: this.gridSize,		guidesEnabled: this.graphHandler.guidesEnabled,		foldingEnabled: this.foldingEnabled,		shadowVisible: this.shadowVisible,		scrollbars: this.scrollbars,		pageVisible: this.pageVisible,		background: this.background,		backgroundImage: this.backgroundImage,		pageScale: this.pageScale,		pageFormat: this.pageFormat,		tooltips: this.tooltipHandler.isEnabled(),		connect: this.connectionHandler.isEnabled(),		arrows: this.connectionArrowsEnabled,		scale: this.view.scale,		scrollLeft: this.container.scrollLeft - this.view.translate.x * this.view.scale,		scrollTop: this.container.scrollTop - this.view.translate.y * this.view.scale,		translate: this.view.translate.clone(),		lastPasteXml: this.lastPasteXml,		pasteCounter: this.pasteCounter,		mathEnabled: this.mathEnabled,		hiddenTags: this.hiddenTags,		extFonts: this.extFonts	};};/** * Overrides setDefaultParent */Graph.prototype.setViewState = function(state, removeOldExtFonts){	if (state != null)	{		this.lastPasteXml = state.lastPasteXml;		this.pasteCounter = state.pasteCounter || 0;		this.mathEnabled = state.mathEnabled;		this.gridEnabled = state.gridEnabled;		//this.view.gridColor = state.gridColor;		this.gridSize = state.gridSize;		this.graphHandler.guidesEnabled = state.guidesEnabled;		this.foldingEnabled = state.foldingEnabled;		this.setShadowVisible(state.shadowVisible, false);		this.scrollbars = state.scrollbars;		this.pageVisible = !this.isViewer() && state.pageVisible;		this.background = state.background;		this.pageScale = state.pageScale;		this.pageFormat = state.pageFormat;		this.view.currentRoot = state.currentRoot;		this.defaultParent = state.defaultParent;		this.connectionArrowsEnabled = state.arrows;		this.setTooltips(state.tooltips);		this.setConnectable(state.connect);		this.setBackgroundImage(state.backgroundImage);		this.hiddenTags = state.hiddenTags;		var oldExtFonts = this.extFonts;		this.extFonts = state.extFonts || [];		// Removing old fonts is important for real-time synchronization		// But, for page change, it results in undesirable font flicker		if (removeOldExtFonts && oldExtFonts != null)		{			for (var i = 0; i < oldExtFonts.length; i++)			{				var fontElem = document.getElementById('extFont_' + oldExtFonts[i].name);								if (fontElem != null)				{					fontElem.parentNode.removeChild(fontElem);				}			}		}				for (var i = 0; i < this.extFonts.length; i++)		{			this.addExtFont(this.extFonts[i].name, this.extFonts[i].url, true);		}				if (state.scale != null)		{			this.view.scale = state.scale;		}		else		{			this.view.scale = 1;		}				// Checks if current root or default parent have been removed		if (this.view.currentRoot != null &&			!this.model.contains(this.view.currentRoot))		{			this.view.currentRoot = null;		}				if (this.defaultParent != null &&			!this.model.contains(this.defaultParent))		{			this.setDefaultParent(null);			this.selectUnlockedLayer();		}				if (state.translate != null)		{			this.view.translate = state.translate;		}	}	else	{		this.view.currentRoot = null;		this.view.scale = 1;		this.gridEnabled = this.defaultGridEnabled;		this.gridSize = mxGraph.prototype.gridSize;		this.pageScale = mxGraph.prototype.pageScale;		this.pageFormat = (typeof mxSettings === 'undefined' || this.defaultPageFormat != null) ?			mxGraph.prototype.pageFormat : mxSettings.getPageFormat();		this.pageVisible = this.defaultPageVisible;		this.background = null;		this.backgroundImage = null;		this.scrollbars = this.defaultScrollbars;		this.graphHandler.guidesEnabled = true;		this.foldingEnabled = true;		this.setShadowVisible(false, false);		this.defaultParent = null;		this.setTooltips(true);		this.setConnectable(true);		this.lastPasteXml = null;		this.pasteCounter = 0;		this.mathEnabled = this.defaultMathEnabled;		this.connectionArrowsEnabled = true;		this.hiddenTags = [];		this.extFonts = [];	}		// Implicit settings	this.pageBreaksVisible = this.pageVisible; 	this.preferPageSize = this.pageVisible;	this.fireEvent(new mxEventObject('viewStateChanged', 'state', state));};Graph.prototype.addExtFont = function(fontName, fontUrl, dontRemember){	// KNOWN: Font not added when pasting cells with custom fonts	if (fontName && fontUrl)	{		if (urlParams['ext-fonts'] != '1')		{			// Adds inserted fonts to font family menu			Graph.recentCustomFonts[fontName.toLowerCase()] = {name: fontName, url: fontUrl};		}				var fontId = 'extFont_' + fontName;		if (document.getElementById(fontId) == null)		{			if (fontUrl.indexOf(Editor.GOOGLE_FONTS) == 0)			{				mxClient.link('stylesheet', fontUrl, null, fontId);			}			else			{				var head = document.getElementsByTagName('head')[0];								// KNOWN: Should load fonts synchronously				var style = document.createElement('style');								style.appendChild(document.createTextNode('@font-face {\n' +					'\tfont-family: "'+ fontName +'";\n' + 					'\tsrc: url("'+ fontUrl +'");\n}'));								style.setAttribute('id', fontId);				var head = document.getElementsByTagName('head')[0];		   		head.appendChild(style);			}		}				if (!dontRemember)		{			if (this.extFonts == null) 			{				this.extFonts = [];			}						var extFonts = this.extFonts, notFound = true;						for (var i = 0; i < extFonts.length; i++)			{				if (extFonts[i].name == fontName)				{					notFound = false;					break;				}			}						if (notFound)			{				this.extFonts.push({name: fontName, url: fontUrl});			}		}	}};/** * Executes selection of a new page. */EditorUi.prototype.updatePageRoot = function(page, checked){	if (page.root == null)	{		var node = this.editor.extractGraphModel(page.node, null, checked);		var cause = Editor.extractParserError(node);				if (cause)		{			throw new Error(cause);		}		else if (node != null)		{			page.graphModelNode = node;						// Converts model XML into page object with root cell			page.viewState = this.editor.graph.createViewState(node);			var codec = new mxCodec(node.ownerDocument);			page.root = codec.decode(node).root;		}		else		{			// Initializes page object with new empty root			page.root = this.editor.graph.model.createRoot();		}	}	else if (page.viewState == null)	{		if (page.graphModelNode == null)		{			var node = this.editor.extractGraphModel(page.node);						var cause = Editor.extractParserError(node);						if (cause)			{				throw new Error(cause);			}			else if (node != null)			{				page.graphModelNode = node;			}		}				if (page.graphModelNode != null)		{			page.viewState = this.editor.graph.createViewState(page.graphModelNode);			}	}		return page;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.selectPage = function(page, quiet, viewState){	try	{		if (page != this.currentPage)		{			if (this.editor.graph.isEditing())			{				this.editor.graph.stopEditing(false);			}						quiet = (quiet != null) ? quiet : false;			this.editor.graph.isMouseDown = false;			this.editor.graph.reset();						var edit = this.editor.graph.model.createUndoableEdit();						// Special flag to bypass autosave for this edit			edit.ignoreEdit = true;					var change = new SelectPage(this, page, viewState);			change.execute();			edit.add(change);			edit.notify();						this.editor.graph.tooltipHandler.hide();						if (!quiet)			{				this.editor.graph.model.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));			}		}	}	catch (e)	{		this.handleError(e);	}};/** *  */EditorUi.prototype.selectNextPage = function(forward){	var next = this.currentPage;		if (next != null && this.pages != null)	{		var tmp = mxUtils.indexOf(this.pages, next);				if (forward)		{			this.selectPage(this.pages[mxUtils.mod(tmp + 1, this.pages.length)]);		}		else if (!forward)		{			this.selectPage(this.pages[mxUtils.mod(tmp - 1, this.pages.length)]);		}	}};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.insertPage = function(page, index){	if (this.editor.graph.isEnabled())	{		if (this.editor.graph.isEditing())		{			this.editor.graph.stopEditing(false);		}				page = (page != null) ? page : this.createPage(null, this.createPageId());		index = (index != null) ? index : this.pages.length;				// Uses model to fire event and trigger autosave		var change = new ChangePage(this, page, page, index);		this.editor.graph.model.execute(change);	}		return page;};/** * Returns a unique page ID. */EditorUi.prototype.createPageId = function(){	var id = null;		do	{		id = Editor.guid();	} while (this.getPageById(id) != null)		return id;};/** * Returns a new DiagramPage instance. */EditorUi.prototype.createPage = function(name, id){	var page = new DiagramPage(this.fileNode.ownerDocument.createElement('diagram'), id);	page.setName((name != null) ? name : this.createPageName());	this.initDiagramNode(page);		return page;};/** * Returns a page name. */EditorUi.prototype.createPageName = function(){	// Creates a lookup with names	var existing = {};		for (var i = 0; i < this.pages.length; i++)	{		var tmp = this.pages[i].getName();				if (tmp != null && tmp.length > 0)		{			existing[tmp] = tmp;		}	}	// Avoids existing names	var nr = this.pages.length;	var name = null;		do	{		name = mxResources.get('pageWithNumber', [++nr]);	}	while (existing[name] != null);		return name;};/** * Removes the given page. */EditorUi.prototype.removePage = function(page){	try	{		var graph = this.editor.graph;		var tmp = mxUtils.indexOf(this.pages, page);				if (graph.isEnabled() && tmp >= 0)		{			if (this.editor.graph.isEditing())			{				this.editor.graph.stopEditing(false);			}						graph.model.beginUpdate();			try			{				var next = this.currentPage;								if (next == page && this.pages.length > 1)				{					if (tmp == this.pages.length - 1)					{						tmp--;					}					else					{						tmp++;					}										next = this.pages[tmp];				}				else if (this.pages.length <= 1)				{					// Removes label with incorrect page number to force					// default page name which is OK for a single page					next = this.insertPage();					graph.model.execute(new RenamePage(this, next,						mxResources.get('pageWithNumber', [1])));				}								// Uses model to fire event to trigger autosave				graph.model.execute(new ChangePage(this, page, next));			}			finally			{				graph.model.endUpdate();			}		}	}	catch (e)	{		this.handleError(e);	}		return page;};/** * Duplicates the given page. */EditorUi.prototype.duplicatePage = function(page, name){	var newPage = null;		try	{		var graph = this.editor.graph;				if (graph.isEnabled())		{			if (graph.isEditing())			{				graph.stopEditing();			}						// Clones the current page and takes a snapshot of the graph model and view state			var node = page.node.cloneNode(false);			node.removeAttribute('id');			var cloneMap = new Object();			var lookup = graph.createCellLookup([graph.model.root]);			var newPage = new DiagramPage(node);			newPage.root = graph.cloneCell(graph.model.root,				null, cloneMap);			// Updates cell IDs			var model = new mxGraphModel();			model.prefix = Editor.guid() + '-';			model.setRoot(newPage.root);			// Updates custom links			graph.updateCustomLinks(graph.createCellMapping(				cloneMap, lookup), [newPage.root]);						// Initializes diagram node			newPage.viewState = (page == this.currentPage) ?				graph.getViewState() : page.viewState;			this.initDiagramNode(newPage);						// Resets zoom and scrollbar positions			newPage.viewState.scale = 1;			newPage.viewState.scrollLeft = null;			newPage.viewState.scrollTop = null;			newPage.viewState.currentRoot = null;			newPage.viewState.defaultParent = null;			newPage.setName(name);						// Inserts new page after duplicated page			newPage = this.insertPage(newPage,				mxUtils.indexOf(this.pages,					page) + 1);		}	}	catch (e)	{		this.handleError(e);	}		return newPage;};/** * Duplicates the given page. */EditorUi.prototype.initDiagramNode = function(page){	var enc = new mxCodec(mxUtils.createXmlDocument());	var temp = enc.encode(new mxGraphModel(page.root));	this.editor.graph.saveViewState(page.viewState, temp);	mxUtils.setTextContent(page.node, Graph.compressNode(temp));};/** * Duplicates the given page. */EditorUi.prototype.clonePages = function(pages){	var result = [];		for (var i = 0; i < pages.length; i++)	{		result.push(this.clonePage(pages[i]));	}		return result;};/** * Duplicates the given page. */EditorUi.prototype.clonePage = function(page){	this.updatePageRoot(page);	var result = new DiagramPage(page.node.cloneNode(true));	var viewState = (page == this.currentPage) ?		this.editor.graph.getViewState() :		page.viewState;	result.viewState = mxUtils.clone(viewState,		EditorUi.transientViewStateProperties)	result.root = this.editor.graph.model.cloneCell(		page.root, null, true);	return result;};/** * Renames the given page using a dialog. */EditorUi.prototype.renamePage = function(page){	var graph = this.editor.graph;	if (graph.isEnabled())	{		var dlg = new FilenameDialog(this, page.getName(), mxResources.get('rename'), mxUtils.bind(this, function(name)		{			if (name != null && name.length > 0)			{				this.editor.graph.model.execute(new RenamePage(this, page, name));			}		}), mxResources.get('rename'));		this.showDialog(dlg.container, 300, 80, true, true);		dlg.init();	}		return page;}/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.movePage = function(oldIndex, newIndex){	this.editor.graph.model.execute(new MovePage(this, oldIndex, newIndex));}/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createTabContainer = function(){	var div = document.createElement('div');	div.className = 'geTabContainer';	div.style.position = 'absolute';	div.style.whiteSpace = 'nowrap';	div.style.overflow = 'hidden';	div.style.height = '0px';		return div;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.updateTabContainer = function(){	if (this.tabContainer != null && this.pages != null)	{		var graph = this.editor.graph;		var wrapper = document.createElement('div');		wrapper.style.position = 'relative';		wrapper.style.display = 'inline-block';		wrapper.style.verticalAlign = 'top';		wrapper.style.height = this.tabContainer.style.height;		wrapper.style.whiteSpace = 'nowrap';		wrapper.style.overflow = 'hidden';		wrapper.style.fontSize = '13px';				// Allows for negative left margin of first tab		wrapper.style.marginLeft = '30px';				// Automatic tab width to match available width		// TODO: Fix tabWidth in chromeless mode		var btnWidth = (this.editor.isChromelessView()) ? 29 : 59;		var tabWidth = Math.min(140, Math.max(20, (this.tabContainer.clientWidth - btnWidth) / this.pages.length) + 1);		var startIndex = null;		for (var i = 0; i < this.pages.length; i++)		{			// Install drag and drop for page reorder			(mxUtils.bind(this, function(index, tab)			{				if (this.pages[index] == this.currentPage)				{					tab.className = 'geActivePage';					tab.style.backgroundColor = Editor.isDarkMode() ? Editor.darkColor : '#fff';				}				else				{					tab.className = 'geInactivePage';				}								tab.setAttribute('draggable', 'true');								mxEvent.addListener(tab, 'dragstart', mxUtils.bind(this, function(evt)				{					if (graph.isEnabled())					{						// Workaround for no DnD on DIV in FF						if (mxClient.IS_FF)						{							// LATER: Check what triggers a parse as XML on this in FF after drop							evt.dataTransfer.setData('Text', '<diagram/>');						}												startIndex = index;					}					else					{						// Blocks event						mxEvent.consume(evt);					}				}));								mxEvent.addListener(tab, 'dragend', mxUtils.bind(this, function(evt)				{					startIndex = null;					evt.stopPropagation();					evt.preventDefault();				}));								mxEvent.addListener(tab, 'dragover', mxUtils.bind(this, function(evt)				{					if (startIndex != null)					{						evt.dataTransfer.dropEffect = 'move';					}										evt.stopPropagation();					evt.preventDefault();				}));								mxEvent.addListener(tab, 'drop', mxUtils.bind(this, function(evt)				{					if (startIndex != null && index != startIndex)					{						// LATER: Shift+drag for merge, ctrl+drag for clone 						this.movePage(startIndex, index);					}					evt.stopPropagation();					evt.preventDefault();				}));								wrapper.appendChild(tab);			}))(i, this.createTabForPage(this.pages[i], tabWidth, this.pages[i] != this.currentPage, i + 1));		}		// BUG: CWE-94 Improper Control of Generation of Code ('Code Injection')		// this.tabContainer.innerHTML = '';		// FIXED: 		this.tabContainer.innerText = '';		this.tabContainer.appendChild(wrapper);				// Adds floating menu with all pages and insert option		var menutab = this.createPageMenuTab();		this.tabContainer.appendChild(menutab);		var insertTab = null;				// Not chromeless and not read-only file		if (this.isPageInsertTabVisible())		{			insertTab = this.createPageInsertTab();			this.tabContainer.appendChild(insertTab);		}		if (wrapper.clientWidth > this.tabContainer.clientWidth - btnWidth)		{			if (insertTab != null)			{				insertTab.style.position = 'absolute';				insertTab.style.right = '0px';				wrapper.style.marginRight = '30px';			}						var temp = this.createControlTab(4, '&nbsp;&#10094;&nbsp;');			temp.style.position = 'absolute';			temp.style.right = (this.editor.chromeless) ? '29px' : '55px';			temp.style.fontSize = '13pt';						this.tabContainer.appendChild(temp);						var temp2 = this.createControlTab(4, '&nbsp;&#10095;');			temp2.style.position = 'absolute';			temp2.style.right = (this.editor.chromeless) ? '0px' : '29px';			temp2.style.fontSize = '13pt';						this.tabContainer.appendChild(temp2);						// TODO: Scroll to current page			var dx = Math.max(0, this.tabContainer.clientWidth - ((this.editor.chromeless) ? 86 : 116));			wrapper.style.width = dx + 'px';						var fade = 50;						mxEvent.addListener(temp, 'click', mxUtils.bind(this, function(evt)			{				wrapper.scrollLeft -= Math.max(20, dx - 20);				mxUtils.setOpacity(temp, (wrapper.scrollLeft > 0) ? 100 : fade);				mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade);				mxEvent.consume(evt);			}));					mxUtils.setOpacity(temp, (wrapper.scrollLeft > 0) ? 100 : fade);			mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade);			mxEvent.addListener(temp2, 'click', mxUtils.bind(this, function(evt)			{				wrapper.scrollLeft += Math.max(20, dx - 20);				mxUtils.setOpacity(temp, (wrapper.scrollLeft > 0) ? 100 : fade);				mxUtils.setOpacity(temp2, (wrapper.scrollLeft < wrapper.scrollWidth - wrapper.clientWidth) ? 100 : fade);				mxEvent.consume(evt);			}));		}	}};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.isPageInsertTabVisible = function(){	return urlParams['embed'] == 1 || (this.getCurrentFile() != null &&		this.getCurrentFile().isEditable());};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createTab = function(hoverEnabled){	var tab = document.createElement('div');	tab.style.display = 'inline-block';	tab.style.whiteSpace = 'nowrap';	tab.style.boxSizing = 'border-box';	tab.style.position = 'relative';	tab.style.overflow = 'hidden';	tab.style.textAlign = 'center';	tab.style.marginLeft = '-1px';	tab.style.height = this.tabContainer.clientHeight + 'px';	tab.style.padding = '12px 4px 8px 4px';	tab.style.border = Editor.isDarkMode() ? '1px solid #505759' : '1px solid #e8eaed';	tab.style.borderTopStyle = 'none';	tab.style.borderBottomStyle = 'none';	tab.style.backgroundColor = this.tabContainer.style.backgroundColor;	tab.style.cursor = 'move';	tab.style.color = 'gray';	if (hoverEnabled)	{		mxEvent.addListener(tab, 'mouseenter', mxUtils.bind(this, function(evt)		{			if (!this.editor.graph.isMouseDown)			{				tab.style.backgroundColor = Editor.isDarkMode() ? 'black' : '#e8eaed';				mxEvent.consume(evt);			}		}));				mxEvent.addListener(tab, 'mouseleave', mxUtils.bind(this, function(evt)		{			tab.style.backgroundColor = this.tabContainer.style.backgroundColor;			mxEvent.consume(evt);		}));	}		return tab;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createControlTab = function(paddingTop, html, hoverEnabled){	var tab = this.createTab((hoverEnabled != null) ? hoverEnabled : true);	tab.style.lineHeight = this.tabContainerHeight + 'px';	tab.style.paddingTop = paddingTop + 'px';	tab.style.cursor = 'pointer';	tab.style.width = '30px';	tab.innerHTML = html;	if (tab.firstChild != null && tab.firstChild.style != null)	{		mxUtils.setOpacity(tab.firstChild, 40);	}		return tab;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createPageMenuTab = function(hoverEnabled, invert){	var tab = this.createControlTab(3, '<div class="geSprite geSprite-dots"></div>', hoverEnabled);	tab.setAttribute('title', mxResources.get('pages'));	tab.style.position = 'absolute';	tab.style.marginLeft = '0px';	tab.style.top = '0px';	tab.style.left = '1px';		var div = tab.getElementsByTagName('div')[0];	div.style.display = 'inline-block';	div.style.marginTop = '5px';	div.style.width = '21px';	div.style.height = '21px';		mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt)	{		this.editor.graph.popupMenuHandler.hideMenu();		var menu = new mxPopupMenu(mxUtils.bind(this, function(menu, parent)		{			var addPages = mxUtils.bind(this, function()			{				for (var i = 0; i < this.pages.length; i++)				{					(mxUtils.bind(this, function(index)					{						var item = menu.addItem(this.pages[index].getName(), null, mxUtils.bind(this, function()						{							this.selectPage(this.pages[index]);						}), parent);						var id = this.pages[index].getId();						item.setAttribute('title', this.pages[index].getName() +							' (' + (index + 1) + '/' + this.pages.length + ')' +							((id != null) ? ' [' + id + ']' : ''));												// Adds checkmark to current page						if (this.pages[index] == this.currentPage)						{							menu.addCheckmark(item, Editor.checkmarkImage);						}					}))(i);				}			});			var addInsert = mxUtils.bind(this, function()			{				menu.addItem(mxResources.get('insertPage'), null, mxUtils.bind(this, function()				{					this.insertPage();				}), parent);			});			if (!invert)			{				addPages();			}						if (this.editor.graph.isEnabled())			{				if (!invert)				{					menu.addSeparator(parent);					addInsert();				}				var page = this.currentPage;								if (page != null)				{					menu.addSeparator(parent);					var pageName = page.getName();						menu.addItem(mxResources.get('removeIt', [pageName]), null, mxUtils.bind(this, function()					{						this.removePage(page);					}), parent);										menu.addItem(mxResources.get('renameIt', [pageName]), null, mxUtils.bind(this, function()					{						this.renamePage(page, page.getName());					}), parent);					if (!invert)					{						menu.addSeparator(parent);					}										menu.addItem(mxResources.get('duplicateIt', [pageName]), null, mxUtils.bind(this, function()					{						this.duplicatePage(page, mxResources.get('copyOf', [page.getName()]));					}), parent);				}			}			if (invert)			{				menu.addSeparator(parent);				addInsert();				menu.addSeparator(parent);				addPages();			}		}));				menu.div.className += ' geMenubarMenu';		menu.smartSeparators = true;		menu.showDisabled = true;		menu.autoExpand = true;				// Disables autoexpand and destroys menu when hidden		menu.hideMenu = mxUtils.bind(this, function()		{			mxPopupMenu.prototype.hideMenu.apply(menu, arguments);			menu.destroy();		});			var x = mxEvent.getClientX(evt);		var y = mxEvent.getClientY(evt);		menu.popup(x, y, null, evt);				// Allows hiding by clicking on document		this.setCurrentMenu(menu);		mxEvent.consume(evt);	}));		return tab;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createPageInsertTab = function(){	var tab = this.createControlTab(4, '<div class="geSprite geSprite-plus"></div>');	tab.setAttribute('title', mxResources.get('insertPage'));	var graph = this.editor.graph;		mxEvent.addListener(tab, 'click', mxUtils.bind(this, function(evt)	{		this.insertPage();		mxEvent.consume(evt);	}));		var div = tab.getElementsByTagName('div')[0];	div.style.display = 'inline-block';	div.style.width = '21px';	div.style.height = '21px';		return tab;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createTabForPage = function(page, tabWidth, hoverEnabled, pageNumber){	var tab = this.createTab(hoverEnabled);	var name = page.getName() || mxResources.get('untitled');	var id = page.getId();	tab.setAttribute('title', name + ((id != null) ? ' (' + id + ')' : '') + ' [' + pageNumber + ']');	mxUtils.write(tab, name);	tab.style.maxWidth = tabWidth + 'px';	tab.style.width = tabWidth + 'px';	this.addTabListeners(page, tab);		if (tabWidth > 42)	{		tab.style.textOverflow = 'ellipsis';	}		return tab;};/** * Translates this point by the given vector. *  * @param {number} dx X-coordinate of the translation. * @param {number} dy Y-coordinate of the translation. */EditorUi.prototype.addTabListeners = function(page, tab){	mxEvent.disableContextMenu(tab);	var graph = this.editor.graph;	var model = graph.model;	mxEvent.addListener(tab, 'dblclick', mxUtils.bind(this, function(evt)	{		this.renamePage(page)		mxEvent.consume(evt);	}));		var menuWasVisible = false;	var pageWasActive = false;		mxEvent.addGestureListeners(tab, mxUtils.bind(this, function(evt)	{		// Do not consume event here to allow for drag and drop of tabs		menuWasVisible = this.currentMenu != null;		pageWasActive = page == this.currentPage;				if (!graph.isMouseDown && !pageWasActive)		{			this.selectPage(page);		}	}), null, mxUtils.bind(this, function(evt)	{		if (graph.isEnabled() && !graph.isMouseDown &&			((mxEvent.isTouchEvent(evt) && pageWasActive) ||			mxEvent.isPopupTrigger(evt)))		{			graph.popupMenuHandler.hideMenu();			this.hideCurrentMenu();			if (!mxEvent.isTouchEvent(evt) || !menuWasVisible)			{				var menu = new mxPopupMenu(this.createPageMenu(page));								menu.div.className += ' geMenubarMenu';				menu.smartSeparators = true;				menu.showDisabled = true;				menu.autoExpand = true;								// Disables autoexpand and destroys menu when hidden				menu.hideMenu = mxUtils.bind(this, function()				{					mxPopupMenu.prototype.hideMenu.apply(menu, arguments);					this.resetCurrentMenu();					menu.destroy();				});						var x = mxEvent.getClientX(evt);				var y = mxEvent.getClientY(evt);				menu.popup(x, y, null, evt);				this.setCurrentMenu(menu, tab);			}						mxEvent.consume(evt);		}	}));};/** * Returns an absolute URL to the given page or null of absolute links * to pages are not supported in this file. */EditorUi.prototype.getLinkForPage = function(page, params, lightbox){	if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp)	{		var file = this.getCurrentFile();				if (file != null && file.constructor != LocalFile && this.getServiceName() == 'draw.io')		{			var search = this.getSearch(['create', 'title', 'mode', 'url', 'drive', 'splash',				'state', 'clibs', 'ui', 'viewbox', 'hide-pages', 'sketch']);			search += ((search.length == 0) ? '?' : '&') + 'page-id=' + page.getId();						if (params != null)			{				search += '&' + params.join('&');			}						return ((lightbox && urlParams['dev'] != '1') ? EditorUi.lightboxHost :				(((mxClient.IS_CHROMEAPP || EditorUi.isElectronApp ||				!(/.*\.draw\.io$/.test(window.location.hostname))) ?				EditorUi.drawHost : 'https://' + window.location.host))) +				'/' + search + '#' + file.getHash();		}	}		return null;};/** * Returns true if the given string contains an mxfile. */EditorUi.prototype.createPageMenu = function(page, label){	return mxUtils.bind(this, function(menu, parent)	{		var graph = this.editor.graph;		var model = graph.model;		menu.addItem(mxResources.get('insert'), null, mxUtils.bind(this, function()		{			this.insertPage(null, mxUtils.indexOf(this.pages, page) + 1);		}), parent);			menu.addItem(mxResources.get('delete'), null, mxUtils.bind(this, function()		{			this.removePage(page);		}), parent);				menu.addItem(mxResources.get('rename'), null, mxUtils.bind(this, function()		{			this.renamePage(page, label);		}), parent);				var url = this.getLinkForPage(page);		if (url != null)		{			menu.addSeparator(parent);						menu.addItem(mxResources.get('link'), null, mxUtils.bind(this, function()			{				this.showPublishLinkDialog(mxResources.get('url'), true, null, null,					mxUtils.bind(this, function(linkTarget, linkColor, allPages, lightbox, editLink, layers)				{					var params = this.createUrlParameters(linkTarget, linkColor, allPages, lightbox, editLink, layers);										if (!allPages)					{						params.push('hide-pages=1');					}										if (!graph.isSelectionEmpty())					{						var bounds = graph.getBoundingBox(graph.getSelectionCells());														var t = graph.view.translate;						var s = graph.view.scale;						bounds.width /= s;						bounds.height /= s;						bounds.x = bounds.x / s - t.x;						bounds.y = bounds.y / s - t.y;											params.push('viewbox=' + encodeURIComponent(JSON.stringify({x: Math.round(bounds.x), y: Math.round(bounds.y),							width: Math.round(bounds.width), height: Math.round(bounds.height), border: 100})));					}										var dlg = new EmbedDialog(this, this.getLinkForPage(page, params, lightbox));					this.showDialog(dlg.container, 450, 240, true, true);					dlg.init();				}));			}));		}				menu.addSeparator(parent);				menu.addItem(mxResources.get('duplicate'), null, mxUtils.bind(this, function()		{			this.duplicatePage(page, mxResources.get('copyOf', [page.getName()]));		}), parent);				if (!mxClient.IS_CHROMEAPP && !EditorUi.isElectronApp && this.getServiceName() == 'draw.io')		{					menu.addSeparator(parent);						menu.addItem(mxResources.get('openInNewWindow'), null, mxUtils.bind(this, function()			{				this.editor.editAsNew(this.getFileData(true, null, null, null, true, true));			}), parent);		}	});};// Overrides refresh to repaint tab container(function(){	var editorUiRefresh = EditorUi.prototype.refresh;		EditorUi.prototype.refresh = function(sizeDidChange)	{		editorUiRefresh.apply(this, arguments);		this.updateTabContainer();	}})();//Overrides ChangePageSetup codec to exclude page(function(){	var codec = mxCodecRegistry.getCodec(ChangePageSetup);	codec.exclude.push('page');})();//Registers codec for MovePage(function(){	var codec = new mxObjectCodec(new MovePage(), ['ui']);		codec.beforeDecode = function(dec, node, obj)	{		obj.ui = dec.ui;		  		return node;	};		codec.afterDecode = function(dec, node, obj)	{		var tmp = obj.oldIndex;		obj.oldIndex = obj.newIndex;		obj.newIndex = tmp;			    return obj;	};		mxCodecRegistry.register(codec);})();//Registers codec for RenamePage(function(){	var codec = new mxObjectCodec(new RenamePage(), ['ui', 'page']);		codec.beforeDecode = function(dec, node, obj)	{		obj.ui = dec.ui;	  		return node;	};		codec.afterDecode = function(dec, node, obj)	{	    var tmp = obj.previous;	    obj.previous = obj.name;	    obj.name = tmp;	    	    return obj;	};		mxCodecRegistry.register(codec);})();//Registers codec for ChangePage(function(){	var codec = new mxObjectCodec(new ChangePage(), ['ui', 'relatedPage',		'index', 'neverShown', 'page', 'previousPage']);		codec.afterEncode = function(enc, obj, node)	{		node.setAttribute('relatedPage', obj.relatedPage.getId())	    		if (obj.index == null)		{			node.setAttribute('name', obj.relatedPage.getName());			if (obj.relatedPage.viewState != null)			{	        	node.setAttribute('viewState', JSON.stringify(	        		obj.relatedPage.viewState, function(key, value)	        	{	        		return (mxUtils.indexOf(EditorUi.transientViewStateProperties, key) < 0) ? value : undefined;	        	}));			}	        			if (obj.relatedPage.root != null)			{				enc.encodeCell(obj.relatedPage.root, node);			}	    }	    	    return node;	};	codec.beforeDecode = function(dec, node, obj)	{		obj.ui = dec.ui;		obj.relatedPage = obj.ui.getPageById(node.getAttribute('relatedPage'));	    		if (obj.relatedPage == null)		{			var temp = node.ownerDocument.createElement('diagram');			temp.setAttribute('id', node.getAttribute('relatedPage'));			temp.setAttribute('name', node.getAttribute('name'));			obj.relatedPage = new DiagramPage(temp);			var vs = node.getAttribute('viewState');			if (vs != null)			{				obj.relatedPage.viewState = JSON.parse(vs);				node.removeAttribute('viewState');			}	        // Makes sure the original node isn't modified			node = node.cloneNode(true);			var tmp = node.firstChild;			if (tmp != null)			{				obj.relatedPage.root = dec.decodeCell(tmp, false);				var tmp2 = tmp.nextSibling;				tmp.parentNode.removeChild(tmp);				tmp = tmp2;				while (tmp != null)				{					tmp2 = tmp.nextSibling;					if (tmp.nodeType == mxConstants.NODETYPE_ELEMENT)					{						// Ignores all existing cells because those do not need to						// be re-inserted into the model. Since the encoded version						// of these cells contains the new parent, this would leave						// to an inconsistent state on the model (ie. a parent						// change without a call to parentForCellChanged).						var id = tmp.getAttribute('id');						if (dec.lookup(id) == null)						{							dec.decodeCell(tmp);						}					}					tmp.parentNode.removeChild(tmp);					tmp = tmp2;				}			}		}		return node;	};	codec.afterDecode = function(dec, node, obj)	{		obj.index = obj.previousIndex;		return obj;	};		mxCodecRegistry.register(codec);})();