1770 lines
46 KiB
JavaScript
1770 lines
46 KiB
JavaScript
/**
|
|
* Copyright (c) 2006-2016, JGraph Ltd
|
|
* Copyright (c) 2006-2016, Gaudenz Alder
|
|
*/
|
|
/**
|
|
* Creates an object that synchronizes the graph model and given realtime model.
|
|
* The session ID is used as a prefix in the model to produce unique IDs for new
|
|
* cells.
|
|
*/
|
|
function DriveRealtime(file, doc)
|
|
{
|
|
this.realtimeAutosaveDelay = this.defaultRealtimeAutosaveDelay;
|
|
this.realtimeMaxAutosaveDelay = this.defaultRealtimeMaxAutosaveDelay;
|
|
|
|
this.file = file;
|
|
this.doc = doc;
|
|
this.rtModel = this.doc.getModel();
|
|
this.root = this.rtModel.getRoot();
|
|
|
|
this.ui = file.getUi()
|
|
this.graph = this.ui.editor.graph;
|
|
this.model = this.graph.model;
|
|
this.userId = this.ui.drive.user.id;
|
|
|
|
this.ui.allowAnimation = false;
|
|
this.codec = new mxCodec();
|
|
|
|
this.disconnectListener = mxUtils.bind(this, function()
|
|
{
|
|
// LATER: How to reload realtime document without refreshing the page
|
|
this.sessionExpiredError();
|
|
});
|
|
|
|
this.ui.drive.addListener('disconnected', this.disconnectListener);
|
|
|
|
// Change of autosave triggers an immediate save to update thumbnail
|
|
this.autosaveChangeListener = mxUtils.bind(this, function()
|
|
{
|
|
var prevValue = this.ui.drive.enableThumbnails;
|
|
this.ui.drive.enableThumbnails = this.ui.editor.autosave;
|
|
this.ui.editor.setStatus(mxResources.get('saving') + '...');
|
|
|
|
this.file.save(true, mxUtils.bind(this, function()
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('allChangesSaved'));
|
|
}));
|
|
|
|
this.ui.drive.enableThumbnails = prevValue;
|
|
});
|
|
|
|
this.ui.editor.addListener('autosaveChanged', this.autosaveChangeListener);
|
|
};
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.logLevel = 2;
|
|
|
|
/**
|
|
* True if a change event is fired for a remote change.
|
|
*/
|
|
DriveRealtime.prototype.updateStatusInterval = 20000;
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.diagramsKey = 'diagrams';
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.diagrams = null;
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.rootKey = 'root';
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.diagramMap = null;
|
|
|
|
/**
|
|
* Specifies the key of the root element in the model. Default is root.
|
|
*/
|
|
DriveRealtime.prototype.chatHistory = null;
|
|
|
|
/**
|
|
* True if a change event is fired for a remote change.
|
|
*/
|
|
DriveRealtime.prototype.saving = false;
|
|
|
|
/**
|
|
* Sets the delay for autosave in milliseconds. Default is 5000.
|
|
*/
|
|
DriveRealtime.prototype.defaultRealtimeAutosaveDelay = 5000;
|
|
|
|
/**
|
|
* Sets the delay for autosave in milliseconds. Default is 60000.
|
|
*/
|
|
DriveRealtime.prototype.defaultRealtimeMaxAutosaveDelay = 60000;
|
|
|
|
/**
|
|
* Sets the delay for autosave in milliseconds. Default is 500.
|
|
*/
|
|
DriveRealtime.prototype.realtimeHeartbeat = 30000;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreChange = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignorePageFormatChanged = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreScaleChanged = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreBackgroundColorChanged = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreShadowVisibleChanged = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreBackgroundImageChanged = false;
|
|
|
|
/**
|
|
* True if a undoableEdit has been scheduled in <executeChange>.
|
|
*/
|
|
DriveRealtime.prototype.ignoreMathEnabledChanged = false;
|
|
|
|
/**
|
|
* Syncs initial state from collab model to graph model.
|
|
*/
|
|
DriveRealtime.prototype.getDiagramMap = function()
|
|
{
|
|
return (this.ui.currentPage != null) ? this.ui.currentPage.mapping.diagramMap : this.diagramMap;
|
|
};
|
|
|
|
/**
|
|
* Indirection for legacy support.
|
|
*/
|
|
DriveRealtime.prototype.getCurrentPage = function()
|
|
{
|
|
return (this.page != null) ? this.page : this.ui.currentPage;
|
|
};
|
|
|
|
/**
|
|
* Synchronizes the collaboration model and the graph model and installs
|
|
* the required listeners to keep them in sync.
|
|
*/
|
|
DriveRealtime.prototype.start = function()
|
|
{
|
|
if (urlParams['reset'] == '1')
|
|
{
|
|
this.root.clear();
|
|
this.log('reset realtime');
|
|
}
|
|
|
|
var prefix = this.createPrefix();
|
|
this.model.prefix = prefix + '-';
|
|
this.ui.editor.resetGraph();
|
|
|
|
// Creates diagrams list and default entry
|
|
this.diagrams = this.root.get(this.diagramsKey);
|
|
var diagramsCreated = false;
|
|
|
|
if (this.diagrams == null)
|
|
{
|
|
this.diagrams = this.rtModel.createList();
|
|
this.root.set(this.diagramsKey, this.diagrams);
|
|
diagramsCreated = true;
|
|
this.log('realtime model initialized');
|
|
}
|
|
|
|
// Specifies if the file should be saved immediately after setup
|
|
var forceSave = false;
|
|
|
|
if (this.file.getData() != '')
|
|
{
|
|
this.ui.fileNode = null;
|
|
this.ui.pages = null;
|
|
|
|
// Converts from XML to realtime
|
|
this.ui.setFileData(this.file.getData());
|
|
this.log('xml converted');
|
|
|
|
// Logs conversion of old RT models (converted from XML backup)
|
|
if (this.root.has('cells') && diagramsCreated)
|
|
{
|
|
try
|
|
{
|
|
var img = new Image();
|
|
|
|
// Timestamp is added to bypass client-side cache
|
|
img.src = 'https://log.draw.io/log?severity=CONFIG&msg=converted-oldrt&v=' +
|
|
encodeURIComponent(EditorUi.VERSION) + '&ts=' + new Date().getTime();
|
|
}
|
|
catch (e)
|
|
{
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
if (this.ui.pages != null)
|
|
{
|
|
for (var i = 0; i < this.ui.pages.length; i++)
|
|
{
|
|
var page = this.ui.pages[i];
|
|
|
|
var diagramMap = this.rtModel.createMap();
|
|
this.diagrams.push(diagramMap);
|
|
|
|
this.ui.updatePageRoot(page);
|
|
page.mapping = new RealtimeMapping(this, diagramMap, page);
|
|
|
|
if (this.file.isEditable())
|
|
{
|
|
// Read or create name for page
|
|
if (page.getName() != '')
|
|
{
|
|
diagramMap.set('name', page.getName());
|
|
}
|
|
else if (!diagramMap.has('name'))
|
|
{
|
|
diagramMap.set('name', mxResources.get('pageWithNumber', [i + 1]));
|
|
}
|
|
}
|
|
|
|
// Sync name and initialize
|
|
page.setName(diagramMap.get('name') || mxResources.get('pageWithNumber', [i + 1]));
|
|
page.mapping.init();
|
|
}
|
|
}
|
|
else if (urlParams['pages'] != '1')
|
|
{
|
|
this.diagramMap = this.rtModel.createMap();
|
|
this.diagrams.push(this.diagramMap);
|
|
// Dummy node, should be XML node if used
|
|
this.page = new DiagramPage(document.createElement('diagram'));
|
|
this.page.mapping = new RealtimeMapping(this, this.diagramMap, this.page);
|
|
this.page.mapping.init();
|
|
}
|
|
else
|
|
{
|
|
this.ui.fileNode = mxUtils.createXmlDocument().createElement('mxfile');
|
|
this.ui.pages = [];
|
|
|
|
var diagramMap = this.rtModel.createMap();
|
|
this.diagrams.push(diagramMap);
|
|
|
|
var page = new DiagramPage(this.ui.fileNode.ownerDocument.createElement('diagram'));
|
|
page.mapping = new RealtimeMapping(this, diagramMap, page);
|
|
this.ui.currentPage = page;
|
|
|
|
if (this.file.isEditable() && !page.mapping.diagramMap.has('name'))
|
|
{
|
|
page.mapping.diagramMap.set('name', mxResources.get('pageWithNumber', [1]));
|
|
}
|
|
|
|
page.setName(page.mapping.diagramMap.get('name') || mxResources.get('pageWithNumber', [1]));
|
|
this.ui.pages.push(page);
|
|
page.mapping.init();
|
|
}
|
|
|
|
forceSave = true;
|
|
}
|
|
else if (this.diagrams.length < 2 && urlParams['pages'] != '1')
|
|
{
|
|
this.ui.fileNode = null;
|
|
this.ui.pages = null;
|
|
|
|
if (this.diagrams.length == 0)
|
|
{
|
|
this.diagramMap = this.rtModel.createMap();
|
|
this.diagrams.push(this.diagramMap);
|
|
}
|
|
else
|
|
{
|
|
this.diagramMap = this.diagrams.get(0);
|
|
}
|
|
|
|
// Dummy node, should be XML node if used
|
|
this.page = new DiagramPage(document.createElement('diagram'));
|
|
this.page.mapping = new RealtimeMapping(this, this.diagramMap, this.page);
|
|
|
|
// Avoids scroll offset when switching page
|
|
this.page.mapping.init();
|
|
this.ui.editor.fireEvent(new mxEventObject('resetGraphView'));
|
|
}
|
|
else
|
|
{
|
|
this.ui.fileNode = mxUtils.createXmlDocument().createElement('mxfile');
|
|
this.ui.pages = [];
|
|
|
|
if (this.diagrams.length == 0)
|
|
{
|
|
this.diagrams.push(this.rtModel.createMap());
|
|
}
|
|
|
|
var pageIndex = Math.max(0, Math.min(this.diagrams.length - 1, urlParams['page'] || 0));
|
|
|
|
for (var i = 0; i < this.diagrams.length; i++)
|
|
{
|
|
var page = new DiagramPage(this.ui.fileNode.ownerDocument.createElement('diagram'));
|
|
page.mapping = new RealtimeMapping(this, this.diagrams.get(i), page);
|
|
|
|
if (this.file.isEditable() && !page.mapping.diagramMap.has('name'))
|
|
{
|
|
page.mapping.diagramMap.set('name', mxResources.get('pageWithNumber', [i + 1]));
|
|
}
|
|
|
|
page.setName(page.mapping.diagramMap.get('name') || mxResources.get('pageWithNumber', [i + 1]));
|
|
this.ui.pages.push(page);
|
|
}
|
|
|
|
// Sets the current page
|
|
this.ui.currentPage = this.ui.pages[Math.max(0, Math.min(this.ui.pages.length - 1, urlParams['page'] || 0))];;
|
|
|
|
// Initializes graphs and mappings
|
|
for (var i = 0; i < this.ui.pages.length; i++)
|
|
{
|
|
this.ui.pages[i].mapping.init();
|
|
}
|
|
}
|
|
|
|
this.installReadOnlyListener();
|
|
this.installUiChangeListeners();
|
|
this.installGraphModelListener();
|
|
this.installPageSelectListener();
|
|
|
|
this.chatHistory = this.root.get('chatHistory');
|
|
|
|
if (this.chatHistory == null)
|
|
{
|
|
this.initializeChat();
|
|
}
|
|
|
|
this.installSelectionModelListener();
|
|
this.installCollaboratorListener();
|
|
this.updateCollaborators();
|
|
|
|
this.doc.addEventListener(gapi.drive.realtime.EventType.DOCUMENT_SAVE_STATE_CHANGED, mxUtils.bind(this, function(evt)
|
|
{
|
|
if (this.saving && !evt.isPending && !evt.isSaving && !forceSave)
|
|
{
|
|
// Checks if the mime type of the file has changed on the server-side
|
|
// when the autosave is triggered to make sure we eventually check
|
|
// the mime type even if the user continues to change the diagram
|
|
// within the autosave interval, which will cancel the current thread.
|
|
if (this.ui.isLegacyDriveDomain() && urlParams['ignoremime'] != '1')
|
|
{
|
|
this.ui.drive.verifyMimeType(this.file.getId());
|
|
}
|
|
|
|
// Adds tooltip to small spinner and saves a backup XML copy of the file
|
|
if (this.file.isAutosave())
|
|
{
|
|
this.triggerAutosave();
|
|
}
|
|
else
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('allChangesSaved'));
|
|
}
|
|
|
|
this.saving = false;
|
|
this.resetUpdateStatusThread();
|
|
this.realtimeHeartbeat = DriveRealtime.prototype.realtimeHeartbeat;
|
|
|
|
if (this.isAliveThread != null)
|
|
{
|
|
window.clearTimeout(this.isAliveThread);
|
|
this.isAliveThread = null;
|
|
}
|
|
}
|
|
|
|
if (this.file.isEditable())
|
|
{
|
|
var avail = 10485760 - this.rtModel.bytesUsed;
|
|
|
|
if (avail > 0 && avail < 500000 && !this.sizeLimitWarningShown)
|
|
{
|
|
// Shows warning just once
|
|
this.sizeLimitWarningShown = true;
|
|
|
|
this.ui.showError(mxResources.get('warning'), mxResources.get('fileNearlyFullSeeFaq'),
|
|
mxResources.get('close'), mxUtils.bind(this, function()
|
|
{
|
|
// Hides the dialog
|
|
}), null, mxResources.get('show'), mxUtils.bind(this, function()
|
|
{
|
|
// Show FAQ entry
|
|
window.open('https://desk.draw.io/solution/articles/16000041695-what-does-the-error-message-file-nearly-full-please-see-faq-mean');
|
|
})
|
|
);
|
|
}
|
|
}
|
|
}));
|
|
|
|
var initialized = mxUtils.bind(this, function()
|
|
{
|
|
this.resetUpdateStatusThread();
|
|
this.ui.resetScrollbars();
|
|
this.updateStatus();
|
|
forceSave = false;
|
|
});
|
|
|
|
// Updates backup and preview
|
|
if (forceSave)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('saving') + '...');
|
|
this.file.save(false, initialized, initialized);
|
|
}
|
|
else
|
|
{
|
|
initialized();
|
|
}
|
|
|
|
// Implements separate undo history for each client
|
|
if (this.previousUndoListener == null)
|
|
{
|
|
this.previousUndoListener = this.ui.editor.undoListener;
|
|
this.ui.editor.undoListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreChange)
|
|
{
|
|
this.previousUndoListener.apply(this, arguments);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Syncs initial state from graph model to collab model.
|
|
*/
|
|
DriveRealtime.prototype.triggerAutosave = function()
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('updatingPreview'));
|
|
|
|
this.file.autosave(this.realtimeAutosaveDelay, this.realtimeMaxAutosaveDelay, mxUtils.bind(this, function(resp)
|
|
{
|
|
// Updates autosave delay to take into account actual delay
|
|
this.realtimeAutosaveDelay = this.defaultRealtimeAutosaveDelay + Math.min(10000, this.file.saveDelay);
|
|
|
|
// Does not update status if another autosave was scheduled
|
|
if (this.ui.getCurrentFile() == this.file && !this.saving)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('allChangesSaved'));
|
|
}
|
|
}),
|
|
mxUtils.bind(this, function(resp)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('errorUpdatingPreview'));
|
|
|
|
// Handles error where mime type cannot be overridden because it has been changed by another app and no
|
|
// new revision was created. This happens eg. if draw.io pro overwrites the mime type and adds a new realtime
|
|
// model to the file which is not visible for this app so we need to switch app to stay connected to RT.
|
|
// This could be improved to let the RT viewers know that the realtime is no longer valid, but currently
|
|
// the focus is on not losing data, so only clients that write to the file are being notified with this.
|
|
if (this.ui.isLegacyDriveDomain() && urlParams['ignoremime'] != '1' && resp != null &&
|
|
resp.error != null && (resp.error.code == 400 || resp.error.code == 403))
|
|
{
|
|
this.ui.drive.verifyMimeType(this.file.getId(), null, true);
|
|
}
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* Syncs initial state from graph model to collab model.
|
|
*/
|
|
DriveRealtime.prototype.triggerAutosave = function()
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('updatingPreview'));
|
|
|
|
this.file.autosave(this.realtimeAutosaveDelay, this.realtimeMaxAutosaveDelay, mxUtils.bind(this, function(resp)
|
|
{
|
|
// Updates autosave delay to take into account actual delay
|
|
this.realtimeAutosaveDelay = this.defaultRealtimeAutosaveDelay + Math.min(10000, this.file.saveDelay);
|
|
|
|
// Does not update status if another autosave was scheduled
|
|
if (this.ui.getCurrentFile() == this.file && !this.saving)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('allChangesSaved'));
|
|
}
|
|
}),
|
|
mxUtils.bind(this, function(resp)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('errorUpdatingPreview'));
|
|
|
|
// Handles error where mime type cannot be overridden because it has been changed by another app and no
|
|
// new revision was created. This happens eg. if draw.io pro overwrites the mime type and adds a new realtime
|
|
// model to the file which is not visible for this app so we need to switch app to stay connected to RT.
|
|
// This could be improved to let the RT viewers know that the realtime is no longer valid, but currently
|
|
// the focus is on not losing data, so only clients that write to the file are being notified with this.
|
|
if (this.ui.isLegacyDriveDomain() && urlParams['ignoremime'] != '1' && resp != null &&
|
|
resp.error != null && (resp.error.code == 400 || resp.error.code == 403))
|
|
{
|
|
this.ui.drive.verifyMimeType(this.file.getId(), null, true);
|
|
}
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* Syncs initial state from graph model to collab model.
|
|
*/
|
|
DriveRealtime.prototype.installReadOnlyListener = function()
|
|
{
|
|
// Handles change of read-only state
|
|
this.doc.addEventListener(gapi.drive.realtime.EventType.ATTRIBUTE_CHANGED, mxUtils.bind(this, function(evt)
|
|
{
|
|
if (evt.attribute == 'is_read_only')
|
|
{
|
|
this.file.descriptorChanged();
|
|
|
|
if (!this.file.isEditable())
|
|
{
|
|
this.ui.editor.graph.reset();
|
|
this.ui.editor.setStatus(mxResources.get('readOnly'));
|
|
}
|
|
else
|
|
{
|
|
this.ui.editor.setStatus('');
|
|
}
|
|
}
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* Syncs initial state from graph model to collab model.
|
|
*/
|
|
DriveRealtime.prototype.installUiChangeListeners = function()
|
|
{
|
|
this.pageFormatListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignorePageFormatChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('pageFormat', this.graph.pageFormat.width + ',' + this.graph.pageFormat.height);
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('pageFormatChanged', this.pageFormatListener);
|
|
|
|
this.pageScaleListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignorePageScaleChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('pageScale', this.graph.pageScale);
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('pageScaleChanged', this.pageScaleListener);
|
|
|
|
this.backgroundColorListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreBackgroundColorChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('backgroundColor', (this.graph.background != null) ? this.graph.background : '');
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('backgroundColorChanged', this.backgroundColorListener);
|
|
|
|
this.shadowVisibleListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreShadowVisibleChanged)
|
|
{
|
|
// Special case: This listener is called after switching page
|
|
// so we check if the value has actually changed
|
|
if (this.getDiagramMap().get('shadowVisible') != ((this.graph.shadowVisible) ? '1' : '0'))
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('shadowVisible', (this.graph.shadowVisible) ? '1' : '0');
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.graph.addListener('shadowVisibleChanged', this.shadowVisibleListener);
|
|
|
|
this.foldingEnabledListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreFoldingEnabledChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('foldingEnabled', (this.graph.foldingEnabled) ? '1' : '0');
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('foldingEnabledChanged', this.foldingEnabledListener);
|
|
|
|
this.backgroundImageListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreBackgroundImageChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('backgroundImage', (this.graph.backgroundImage != null) ? JSON.stringify(this.graph.backgroundImage) : '');
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('backgroundImageChanged', this.backgroundImageListener);
|
|
|
|
this.mathEnabledListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
if (!this.ignoreMathEnabledChanged)
|
|
{
|
|
try
|
|
{
|
|
this.setFileModified();
|
|
this.getDiagramMap().set('mathEnabled', (this.graph.mathEnabled) ? '1' : '0');
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.addListener('mathEnabledChanged', this.mathEnabledListener);
|
|
};
|
|
|
|
/**
|
|
* Returns true if the given event is local.
|
|
*/
|
|
DriveRealtime.prototype.isLocalEvent = function(evt)
|
|
{
|
|
return evt.isLocal;
|
|
};
|
|
|
|
/**
|
|
* Syncs initial state from graph model to collab model.
|
|
*/
|
|
DriveRealtime.prototype.resetUpdateStatusThread = function()
|
|
{
|
|
if (this.updateStatusThread != null)
|
|
{
|
|
window.clearInterval(this.updateStatusThread);
|
|
}
|
|
|
|
this.updateStatusThread = window.setInterval(mxUtils.bind(this, function()
|
|
{
|
|
this.ui.drive.checkToken(mxUtils.bind(this, function()
|
|
{
|
|
this.updateStatus();
|
|
}));
|
|
}), this.updateStatusInterval);
|
|
};
|
|
|
|
/**
|
|
* Translates this point by the given vector.
|
|
*
|
|
* @param {number} dx X-coordinate of the translation.
|
|
* @param {number} dy Y-coordinate of the translation.
|
|
*/
|
|
DriveRealtime.prototype.timeSince = function(date)
|
|
{
|
|
var seconds = Math.floor((new Date() - date) / 1000);
|
|
|
|
var interval = Math.floor(seconds / 31536000);
|
|
|
|
if (interval > 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('years');
|
|
}
|
|
|
|
interval = Math.floor(seconds / 2592000);
|
|
|
|
if (interval > 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('months');
|
|
}
|
|
|
|
interval = Math.floor(seconds / 86400);
|
|
|
|
if (interval > 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('days');
|
|
}
|
|
|
|
interval = Math.floor(seconds / 3600);
|
|
|
|
if (interval > 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('hours');
|
|
}
|
|
|
|
interval = Math.floor(seconds / 60);
|
|
|
|
if (interval > 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('minutes');
|
|
}
|
|
|
|
if (interval == 1)
|
|
{
|
|
return interval + ' ' + mxResources.get('minute');
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Adds the listener for added and removed cells in the collab model and maps
|
|
* them to the graph model.
|
|
*/
|
|
DriveRealtime.prototype.updateStatus = function()
|
|
{
|
|
if (!this.saving)
|
|
{
|
|
// LATER: Check if realtime model contains last modified timestamp
|
|
var mod = this.root.get('modifiedDate');
|
|
|
|
if (mod != '')
|
|
{
|
|
// LATER: Write out modified date for more than 2 weeks ago
|
|
var str = this.ui.timeSince(new Date(mod));
|
|
|
|
if (str == null)
|
|
{
|
|
str = mxResources.get('lessThanAMinute');
|
|
}
|
|
|
|
this.ui.editor.setStatus(mxResources.get('lastChange', [str]) +
|
|
(this.file.isEditable() ? '' : ' (' + mxResources.get('readOnly') + ')'));
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Currently the link back from map to page requires a loop.
|
|
*/
|
|
DriveRealtime.prototype.getPageIndexForMap = function(map)
|
|
{
|
|
for (var i = 0; i < this.ui.pages.length; i++)
|
|
{
|
|
if (this.ui.pages[i].mapping.diagramMap == map)
|
|
{
|
|
return i;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Adds the listener for changes on the graph model and maps them to the collab
|
|
* model as a single transaction.
|
|
*/
|
|
DriveRealtime.prototype.installPageSelectListener = function()
|
|
{
|
|
// Adds a graph model listener to update the view
|
|
this.pageChangeListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
var page = evt.getProperty('change').relatedPage;
|
|
|
|
if (page.mapping == null)
|
|
{
|
|
page.mapping = new RealtimeMapping(this, this.rtModel.createMap(), page);
|
|
page.mapping.init();
|
|
|
|
if (this.file.isEditable())
|
|
{
|
|
page.mapping.diagramMap.set('name', page.getName());
|
|
}
|
|
}
|
|
});
|
|
|
|
this.ui.editor.addListener('beforePageChange', this.pageChangeListener);
|
|
|
|
// Adds a graph model listener to update the view
|
|
this.viewStateListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
var page = this.getCurrentPage();
|
|
|
|
// Applies view state from realtime model without firing events
|
|
if (page.viewState == null)
|
|
{
|
|
// Resets part of the view that is in view state but not in realtime model
|
|
// via activate and not in setViewState (if state is null)
|
|
var graph = this.ui.editor.graph;
|
|
graph.view.scale = 1;
|
|
graph.gridEnabled = !this.ui.editor.chromeless || urlParams['grid'] == '1';
|
|
graph.gridSize = mxGraph.prototype.gridSize;
|
|
graph.pageScale = mxGraph.prototype.pageScale;
|
|
graph.pageVisible = this.ui.editor.graph.defaultPageVisible;
|
|
graph.scrollbars = this.ui.editor.graph.defaultScrollbars;
|
|
graph.graphHandler.guidesEnabled = true;
|
|
graph.defaultParent = null;
|
|
graph.setTooltips(true);
|
|
graph.setConnectable(true);
|
|
graph.setTooltips(true);
|
|
|
|
// Actives from realtime without calling event listeners
|
|
page.mapping.activate(true);
|
|
this.ui.resetScrollbars();
|
|
}
|
|
});
|
|
|
|
this.ui.editor.addListener('setViewState', this.viewStateListener);
|
|
|
|
this.diagrams.addEventListener(gapi.drive.realtime.EventType.VALUES_ADDED, mxUtils.bind(this, function(evt)
|
|
{
|
|
if (!this.isLocalEvent(evt))
|
|
{
|
|
if (evt.movedFromList == null)
|
|
{
|
|
this.ignoreChange = true;
|
|
|
|
for (var i = 0; i < evt.values.length; i++)
|
|
{
|
|
var page = new DiagramPage(document.createElement('diagram'));
|
|
page.mapping = new RealtimeMapping(this, evt.values[i], page);
|
|
page.setName(page.mapping.diagramMap.get('name') || mxResources.get('pageWithNumber',
|
|
[this.ui.pages.length + 1]));
|
|
this.ui.pages.splice(evt.index + i, 0, page);
|
|
page.mapping.init();
|
|
}
|
|
|
|
this.ignoreChange = false;
|
|
this.ui.updateTabContainer();
|
|
}
|
|
else if (evt.movedFromList == this.diagrams && evt.movedFromIndex != null)
|
|
{
|
|
this.ignoreChange = true;
|
|
|
|
for (var i = 0; i < evt.values.length; i++)
|
|
{
|
|
var index = this.getPageIndexForMap(evt.values[i]);
|
|
|
|
if (index != null)
|
|
{
|
|
this.ui.movePage(index + i, evt.index + i);
|
|
}
|
|
}
|
|
|
|
this.ignoreChange = false;
|
|
this.ui.updateTabContainer();
|
|
}
|
|
}
|
|
}));
|
|
|
|
this.diagrams.addEventListener(gapi.drive.realtime.EventType.VALUES_REMOVED, mxUtils.bind(this, function(evt)
|
|
{
|
|
if (!this.isLocalEvent(evt))
|
|
{
|
|
if (evt.movedToList == null)
|
|
{
|
|
this.ignoreChange = true;
|
|
|
|
for (var i = 0; i < evt.values.length; i++)
|
|
{
|
|
var index = this.getPageIndexForMap(evt.values[i]);
|
|
|
|
if (index != null)
|
|
{
|
|
var page = this.ui.pages[index];
|
|
|
|
if (page != null)
|
|
{
|
|
this.ui.removePage(page);
|
|
page.mapping.destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
this.ignoreChange = false;
|
|
}
|
|
}
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* Returns a string representation of the given ops.
|
|
*/
|
|
DriveRealtime.prototype.processChange = function(change)
|
|
{
|
|
//console.log('processChange: ' + this.dump(change));
|
|
if (change instanceof RenamePage)
|
|
{
|
|
change.page.mapping.diagramMap.set('name', change.page.getName());
|
|
}
|
|
else if (change instanceof ChangePage)
|
|
{
|
|
if (change.previousIndex == null)
|
|
{
|
|
this.diagrams.removeValue(change.relatedPage.mapping.diagramMap);
|
|
}
|
|
else
|
|
{
|
|
this.diagrams.insert(change.previousIndex, change.relatedPage.mapping.diagramMap);
|
|
}
|
|
}
|
|
else if (change instanceof MovePage)
|
|
{
|
|
this.diagrams.move(change.newIndex, change.oldIndex + ((change.newIndex < change.oldIndex) ? 1 : 0));
|
|
}
|
|
else if (change instanceof mxRootChange)
|
|
{
|
|
// Only process the root change that sets the current root
|
|
// ie. ignore previous root changes
|
|
if (change.root == this.model.root)
|
|
{
|
|
this.getCurrentPage().mapping.initRealtime();
|
|
}
|
|
}
|
|
else if (change instanceof mxChildChange)
|
|
{
|
|
if (change.parent != change.previous || change.index != change.previousIndex)
|
|
{
|
|
var childRtCell = change.child.rtCell;
|
|
|
|
if (childRtCell == null)
|
|
{
|
|
childRtCell = this.getCurrentPage().mapping.createRealtimeCell(change.child);
|
|
this.getCurrentPage().mapping.saveRealtimeCell(childRtCell.cell);
|
|
}
|
|
|
|
var parentRtCell = (change.parent != null) ? change.parent.rtCell : null;
|
|
|
|
if (change.previous != null)
|
|
{
|
|
var previousParentRtCell = change.previous.rtCell;
|
|
|
|
if (previousParentRtCell != null)
|
|
{
|
|
previousParentRtCell.children.removeValue(childRtCell);
|
|
}
|
|
}
|
|
|
|
if (parentRtCell != null)
|
|
{
|
|
parentRtCell.children.insert(Math.min(parentRtCell.children.length, change.index), childRtCell);
|
|
}
|
|
|
|
childRtCell.parent = parentRtCell;
|
|
}
|
|
}
|
|
else if (change.cell != null && change.cell.id != null)
|
|
{
|
|
var rtCell = change.cell.rtCell;
|
|
|
|
if (rtCell != null)
|
|
{
|
|
if (change instanceof mxTerminalChange)
|
|
{
|
|
var term = (change.terminal != null) ? change.terminal.rtCell : null;
|
|
rtCell[(change.source) ? 'source' : 'target'] = term;
|
|
}
|
|
else if (change instanceof mxGeometryChange)
|
|
{
|
|
rtCell.geometry = (change.geometry != null) ? mxUtils.getXml(this.codec.encode(change.geometry)) : null;
|
|
}
|
|
else if (change instanceof mxStyleChange)
|
|
{
|
|
rtCell.style = change.style;
|
|
}
|
|
else if (change instanceof mxValueChange)
|
|
{
|
|
if (mxUtils.isNode(change.value))
|
|
{
|
|
rtCell.value = null;
|
|
rtCell.xmlValue = mxUtils.getXml(change.value);
|
|
}
|
|
else
|
|
{
|
|
rtCell.xmlValue = null;
|
|
rtCell.value = change.value;
|
|
}
|
|
}
|
|
else if (change instanceof mxCollapseChange)
|
|
{
|
|
rtCell.collapsed = (change.collapsed) ? '1' : '0';
|
|
}
|
|
else if (change instanceof mxVisibleChange)
|
|
{
|
|
rtCell.visible = (change.visible) ? '1' : '0';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Adds the listener for changes on the graph model and maps them to the collab
|
|
* model as a single transaction.
|
|
*/
|
|
DriveRealtime.prototype.setFileModified = function()
|
|
{
|
|
this.root.set('modifiedDate', new Date().getTime());
|
|
this.file.setModified(true);
|
|
|
|
if (!this.saving)
|
|
{
|
|
this.ui.editor.setStatus(mxResources.get('saving') + '...');
|
|
this.saving = true;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Adds the listener for changes on the graph model and maps them to the collab
|
|
* model as a single transaction.
|
|
*/
|
|
DriveRealtime.prototype.installGraphModelListener = function()
|
|
{
|
|
// Adds a graph model listener to update the view
|
|
this.graphModelChangeListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
var edit = evt.getProperty('edit');
|
|
|
|
if (!this.ignoreChange && this.file.isEditable() && !edit.ignoreEdit)
|
|
{
|
|
//console.log('startEdit');
|
|
|
|
// TODO: Queuing for async token refresh and too many updates
|
|
this.ui.drive.checkToken(mxUtils.bind(this, function()
|
|
{
|
|
this.rtModel.beginCompoundOperation();
|
|
this.setFileModified();
|
|
|
|
try
|
|
{
|
|
var changes = edit.changes;
|
|
|
|
if (edit.undone)
|
|
{
|
|
for (var i = changes.length - 1; i >= 0; i--)
|
|
{
|
|
this.processChange(changes[i]);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for (var i = 0; i < changes.length; i++)
|
|
{
|
|
this.processChange(changes[i]);
|
|
}
|
|
}
|
|
|
|
this.rtModel.endCompoundOperation();
|
|
}
|
|
catch (e)
|
|
{
|
|
this.rtModel.endCompoundOperation();
|
|
this.ui.handleError(e);
|
|
}
|
|
|
|
if (this.isAliveThread == null)
|
|
{
|
|
this.isAliveThread = window.setTimeout(mxUtils.bind(this, function()
|
|
{
|
|
this.ui.editor.setStatus('<div class="geStatusAlert geBlink" style="cursor:pointer;">' +
|
|
mxResources.get('noResponse') + '</div>');
|
|
|
|
this.isAliveThread = window.setTimeout(mxUtils.bind(this, function()
|
|
{
|
|
this.isAliveThread = null;
|
|
this.timeoutError();
|
|
}), this.realtimeHeartbeat);
|
|
}), this.realtimeHeartbeat);
|
|
}
|
|
}));
|
|
|
|
//console.log('endEdit');
|
|
}
|
|
});
|
|
|
|
this.model.addListener(mxEvent.CHANGE, this.graphModelChangeListener);
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
DriveRealtime.prototype.sessionExpiredError = function()
|
|
{
|
|
// LATER: How to reload realtime document without refreshing the page
|
|
this.ui.showError(mxResources.get('error'), mxResources.get('sessionExpired'), mxResources.get('refresh'), mxUtils.bind(this, function()
|
|
{
|
|
this.ui.spinner.spin(document.body, mxResources.get('connecting'));
|
|
this.file.setModified(false);
|
|
window.location.reload();
|
|
}));
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
DriveRealtime.prototype.timeoutError = function()
|
|
{
|
|
// LATER: How to reload realtime document without refreshing the page
|
|
this.ui.showError(mxResources.get('timeout'), mxResources.get('realtimeTimeout'), mxResources.get('discardChangesAndReconnect'), mxUtils.bind(this, function()
|
|
{
|
|
this.ui.spinner.spin(document.body, mxResources.get('connecting'));
|
|
this.file.setModified(false);
|
|
window.location.reload();
|
|
}), null, mxResources.get('ignore'), mxUtils.bind(this, function()
|
|
{
|
|
this.ui.editor.setStatus('<div class="geStatusAlert geBlink" style="cursor:pointer;">' +
|
|
mxResources.get('disconnected') + '</div>');
|
|
this.realtimeHeartbeat *= 2;
|
|
}));
|
|
};
|
|
|
|
/**
|
|
*
|
|
*/
|
|
DriveRealtime.prototype.initializeChat = function()
|
|
{
|
|
this.chatHistory = this.rtModel.createList();
|
|
this.root.set('chatHistory', this.chatHistory);
|
|
//this.log('Chat history created');
|
|
};
|
|
|
|
/**
|
|
* Adds a listener to the graph selection model and writes changes
|
|
* in the RT selection map
|
|
*/
|
|
DriveRealtime.prototype.installSelectionModelListener = function()
|
|
{
|
|
this.graphSelectionModelChangeListener = mxUtils.bind(this, function(sender, evt)
|
|
{
|
|
this.ui.drive.checkToken(mxUtils.bind(this, function()
|
|
{
|
|
if (this.file.isEditable() && !this.graph.isSelectionEmpty())
|
|
{
|
|
try
|
|
{
|
|
// LATER: Clear value if selection is empty. This is currently
|
|
// disabled to avoid using up the quota in this case but the
|
|
// better solution is to mark this "transient" (ie no history).
|
|
var cells = this.graph.getSelectionCells();
|
|
var selectedCellIds = '';
|
|
|
|
for (var i = 0; i < cells.length; i++)
|
|
{
|
|
selectedCellIds += cells[i].id + ',';
|
|
}
|
|
|
|
this.getCurrentPage().mapping.selectionMap.set(this.userId, selectedCellIds);
|
|
}
|
|
catch (e)
|
|
{
|
|
this.ui.handleError(e);
|
|
}
|
|
}
|
|
}));
|
|
});
|
|
|
|
this.graph.getSelectionModel().addListener(mxEvent.CHANGE, this.graphSelectionModelChangeListener);
|
|
};
|
|
|
|
/**
|
|
* Connects the collaborator event listeners to the draw function.
|
|
*/
|
|
DriveRealtime.prototype.installCollaboratorListener = function()
|
|
{
|
|
this.doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_JOINED, mxUtils.bind(this, this.updateCollaborators));
|
|
this.doc.addEventListener(gapi.drive.realtime.EventType.COLLABORATOR_LEFT, mxUtils.bind(this, this.updateCollaborators));
|
|
};
|
|
|
|
/**
|
|
* Draw function for the collaborator list.
|
|
*/
|
|
DriveRealtime.prototype.updateCollaborators = function()
|
|
{
|
|
var n = this.doc.getCollaborators().length - 1;
|
|
|
|
if (this.collaboratorsElement == null)
|
|
{
|
|
this.collaboratorsElement = document.createElement('a');
|
|
this.collaboratorsElement.setAttribute('href', 'javascript:void(0);');
|
|
this.collaboratorsElement.className = 'geItem';
|
|
this.collaboratorsElement.style.position = 'absolute';
|
|
this.collaboratorsElement.style.display = 'inline-block';
|
|
this.collaboratorsElement.style.verticalAlign = 'bottom';
|
|
this.collaboratorsElement.style.color = '#666';
|
|
this.collaboratorsElement.style.top = '10px';
|
|
this.collaboratorsElement.style.right = (uiTheme == 'atlas') ? '42px' : '68px';
|
|
this.collaboratorsElement.style.padding = '2px';
|
|
this.collaboratorsElement.style.fontSize = '8pt';
|
|
this.collaboratorsElement.style.verticalAlign = 'middle';
|
|
this.collaboratorsElement.style.backgroundPosition = '100% 60%';
|
|
this.collaboratorsElement.style.backgroundRepeat = 'no-repeat';
|
|
|
|
this.ui.toolbarContainer.appendChild(this.collaboratorsElement);
|
|
|
|
mxEvent.addListener(this.collaboratorsElement, 'click', mxUtils.bind(this, function(evt)
|
|
{
|
|
if (this.collabPanel == null)
|
|
{
|
|
var div = document.createElement('div');
|
|
div.className = 'geDialog';
|
|
div.style.position = 'absolute';
|
|
div.style.maxHeight = '400px';
|
|
div.style.maxWidth = '300px';
|
|
div.style.right = '38px';
|
|
div.style.padding = '14px';
|
|
div.style.paddingRight = '30px';
|
|
|
|
this.collabPanel = div;
|
|
}
|
|
|
|
if (this.collabPanel.parentNode == null)
|
|
{
|
|
this.collabPanel.style.top = (this.collaboratorsElement.clientTop + this.collaboratorsElement.clientHeight + this.ui.menubarHeight + 8) + 'px';
|
|
document.body.appendChild(this.collabPanel);
|
|
this.collabPanel.innerHTML = '';
|
|
|
|
var img = document.createElement('img');
|
|
|
|
img.setAttribute('src', Dialog.prototype.closeImage);
|
|
img.setAttribute('title', mxResources.get('close'));
|
|
img.className = 'geDialogClose';
|
|
img.style.top = '8px';
|
|
img.style.right = '8px';
|
|
|
|
mxEvent.addListener(img, 'click', mxUtils.bind(this, function()
|
|
{
|
|
if (this.collabPanel.parentNode != null)
|
|
{
|
|
this.collabPanel.parentNode.removeChild(this.collabPanel);
|
|
}
|
|
}));
|
|
|
|
this.collabPanel.appendChild(img);
|
|
|
|
if (this.doc.getCollaborators().length > 1)
|
|
{
|
|
for (var i = 0; i < this.doc.getCollaborators().length; i = i + 1)
|
|
{
|
|
var collaborator = this.doc.getCollaborators()[i];
|
|
|
|
if (!collaborator.isMe)
|
|
{
|
|
var elt = document.createElement('div');
|
|
elt.style.cursor = 'pointer';
|
|
elt.style.whiteSpace = 'nowrap';
|
|
|
|
var img = document.createElement('img');
|
|
img.src = collaborator.photoUrl;
|
|
img.style.backgroundColor = collaborator.color;
|
|
img.style.paddingBottom = '8px';
|
|
img.style.marginRight = '10px';
|
|
img.style.marginTop = '2px';
|
|
img.style.marginBottom = '2px';
|
|
img.style.height = '25px';
|
|
img.style.width = '25px';
|
|
img.setAttribute('align', 'absmiddle');
|
|
|
|
elt.appendChild(img);
|
|
mxUtils.write(elt, collaborator.displayName);
|
|
|
|
this.collabPanel.appendChild(elt);
|
|
|
|
// Click on collaborator shows selection cells, scrolls to first cell
|
|
mxEvent.addListener(elt, 'click', mxUtils.bind(this, function()
|
|
{
|
|
var value = this.getCurrentPage().mapping.selectionMap.get(collaborator.userId);
|
|
|
|
if (value != null)
|
|
{
|
|
var cellIds = value.split(',');
|
|
|
|
for (var i = 0; i < cellIds.length; i++)
|
|
{
|
|
var cell = this.model.getCell(cellIds[i]);
|
|
this.highlight(cell, collaborator.sessionId);
|
|
|
|
if (cell != null && i == 0)
|
|
{
|
|
this.graph.scrollCellToVisible(cell);
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
mxUtils.write(this.collabPanel, mxResources.get('noOtherViewers'));
|
|
}
|
|
}
|
|
else if (this.collabPanel.parentNode != null)
|
|
{
|
|
this.collabPanel.parentNode.removeChild(this.collabPanel);
|
|
}
|
|
|
|
mxEvent.consume(evt);
|
|
}));
|
|
|
|
mxEvent.addListener(document.body, 'click', mxUtils.bind(this, function(evt)
|
|
{
|
|
if (!mxEvent.isConsumed(evt) && this.collabPanel != null && this.collabPanel.parentNode != null)
|
|
{
|
|
this.collabPanel.parentNode.removeChild(this.collabPanel);
|
|
}
|
|
}));
|
|
}
|
|
|
|
var viewers = mxResources.get((n == 0) ? 'noOtherViewers' : ((n == 1) ? 'otherViewer' : 'otherViewers'));
|
|
|
|
if (n > 0)
|
|
{
|
|
viewers = n + ' ' + viewers;
|
|
this.collaboratorsElement.style.paddingRight = '16px';
|
|
this.collaboratorsElement.style.backgroundImage = 'url(' + IMAGE_PATH + '/expanded.gif)';
|
|
this.collaboratorsElement.style.cursor = 'pointer';
|
|
}
|
|
else
|
|
{
|
|
this.collaboratorsElement.style.paddingRight = '0px';
|
|
this.collaboratorsElement.style.backgroundImage = '';
|
|
this.collaboratorsElement.style.cursor = 'default';
|
|
}
|
|
|
|
var html = '<div title="' + viewers + '" style="display:inline-block;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;">' + viewers + '</div>';
|
|
|
|
var names = new Object();
|
|
var count = 0;
|
|
|
|
for (var i = 0; i < this.doc.getCollaborators().length && count < 6; i = i + 1)
|
|
{
|
|
var c = this.doc.getCollaborators()[i];
|
|
|
|
if (!c.isMe && names[c.color] == null)
|
|
{
|
|
names[c.color] = c.displayName;
|
|
count++;
|
|
}
|
|
}
|
|
|
|
for (var color in names)
|
|
{
|
|
html += '<div title="' + mxUtils.htmlEntities(names[color]) + '" style="display:inline-block;background-color:' + color + ';width:13px;height:13px;margin-left:4px;margin-top:-1px;"></div>';
|
|
}
|
|
|
|
this.collaboratorsElement.innerHTML = html;
|
|
};
|
|
|
|
/**
|
|
* Creates and returns a prefix for cell IDs.
|
|
*/
|
|
DriveRealtime.prototype.createPrefix = function()
|
|
{
|
|
var collabs = this.doc.getCollaborators();
|
|
|
|
for (var i = 0; i < collabs.length; i++)
|
|
{
|
|
if (collabs[i]['isMe'])
|
|
{
|
|
return collabs[i]['sessionId'];
|
|
}
|
|
}
|
|
|
|
return '';
|
|
};
|
|
|
|
DriveRealtime.prototype.highlight = function(cell, sessionId)
|
|
{
|
|
var state = this.graph.view.getState(cell);
|
|
|
|
if (state != null)
|
|
{
|
|
var color = 'red'; // session not found
|
|
|
|
for (var i = 0; i < this.doc.getCollaborators().length; i = i + 1)
|
|
{
|
|
var collaborator = this.doc.getCollaborators()[i];
|
|
|
|
if (collaborator.sessionId == sessionId)
|
|
{
|
|
color = collaborator.color;
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
var sw = Math.max(5, mxUtils.getValue(state.style, mxConstants.STYLE_STROKEWIDTH, 1) + 4);
|
|
var hl = new mxCellHighlight(this.graph, color, sw, false);
|
|
hl.highlight(state);
|
|
|
|
// Fades out the highlight after a delay
|
|
window.setTimeout(function()
|
|
{
|
|
if (hl.shape != null)
|
|
{
|
|
mxUtils.setPrefixedStyle(hl.shape.node.style, 'transition', 'all 1200ms ease-in-out');
|
|
hl.shape.node.style.opacity = 0;
|
|
}
|
|
|
|
window.setTimeout(function()
|
|
{
|
|
hl.destroy();
|
|
}, 2000);
|
|
}, 1000);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Writes out a string representing the current state of the document.
|
|
*/
|
|
DriveRealtime.prototype.dumpRoot = function()
|
|
{
|
|
return this.dump(this.root);
|
|
};
|
|
|
|
/**
|
|
* Creates a dump of the given map.
|
|
*/
|
|
DriveRealtime.prototype.dump = function(obj)
|
|
{
|
|
var result = '';
|
|
|
|
if (obj != null)
|
|
{
|
|
if (obj.constructor == mxCell)
|
|
{
|
|
return obj.id;
|
|
}
|
|
else if (obj.constructor == mxRootChange)
|
|
{
|
|
result += 'mxRootChange[root=' + this.dump(obj.root) + ']';
|
|
}
|
|
else if (obj.constructor == mxChildChange)
|
|
{
|
|
result += 'mxChildChange[parent=' + this.dump(obj.parent) +
|
|
', child=' + this.dump(obj.child.id) +
|
|
', index=' + obj.index + ']';
|
|
}
|
|
else if (obj.constructor == mxTerminalChange)
|
|
{
|
|
result += 'mxTerminalChange[cell=' + this.dump(obj.cell) +
|
|
', terminal=' + this.dump(obj.terminal) +
|
|
', source=' + obj.source + ']';
|
|
}
|
|
else if (obj.constructor == mxValueChange)
|
|
{
|
|
result += 'mxValueChange[cell=' + this.dump(obj.cell) + ', value=' + obj.value + ']';
|
|
}
|
|
else if (obj.constructor == mxGeometryChange)
|
|
{
|
|
result += 'mxGeometryChange[cell=' + this.dump(obj.cell) + ', geometry=' +
|
|
((obj.cell.geometry != null) ? mxUtils.getXml(this.codec.encode(obj.cell.geometry)) : '[null]') + ']';
|
|
}
|
|
else if (obj.constructor == mxStyleChange)
|
|
{
|
|
result += 'mxStyleChange[cell=' + this.dump(obj.cell) + ', style=' + obj.style + ']';
|
|
}
|
|
else if (obj.constructor == mxVisibleChange)
|
|
{
|
|
result += 'mxVisibleChange[cell=' + this.dump(obj.cell) + ', visible=' + obj.visible + ']';
|
|
}
|
|
else if (obj.constructor == mxCollapseChange)
|
|
{
|
|
result += 'mxCollapseChange[cell=' + this.dump(obj.cell) + ', collapsed=' + obj.collapsed + ']';
|
|
}
|
|
else if (obj.constructor == mxRtCell)
|
|
{
|
|
result += '[id=' + obj.cellId + ',parent=' + ((obj.parent != null) ? obj.parent.cellId : '[null]');
|
|
|
|
if (obj.children.length > 0)
|
|
{
|
|
result += ',\n' + obj.children.length + ' children=[' +
|
|
this.dump(obj.children.get(0));
|
|
|
|
for (var i = 1; i < obj.children.length; i++)
|
|
{
|
|
result += ',' + this.dump(obj.children.get(i));
|
|
}
|
|
|
|
result += ']';
|
|
}
|
|
|
|
result += ']\n';
|
|
}
|
|
else if (obj.keys != null)
|
|
{
|
|
var keys = obj.keys();
|
|
result += '{\n';
|
|
|
|
for (var i = 0; i < keys.length; i++)
|
|
{
|
|
result += keys[i] + '=' + this.dump(obj.get(keys[i])) + ';\n';
|
|
}
|
|
|
|
result += '}';
|
|
}
|
|
else if (obj.asArray != null)
|
|
{
|
|
var arr = obj.asArray();
|
|
result += '[';
|
|
|
|
for (var i = 0; i < arr.length; i++)
|
|
{
|
|
result += arr[i] + ';';
|
|
}
|
|
|
|
result += ']';
|
|
}
|
|
else
|
|
{
|
|
result = obj;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
result = 'null';
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
/**
|
|
* Writes the given text to the log if <logging> is enabled.
|
|
*/
|
|
DriveRealtime.prototype.check = function()
|
|
{
|
|
console.log('checking consistency');
|
|
this.checkChildren(this.model.getRoot());
|
|
console.log('checking consistency done');
|
|
};
|
|
|
|
/**
|
|
* Writes the given text to the log if <logging> is enabled.
|
|
*/
|
|
DriveRealtime.prototype.checkChildren = function(cell)
|
|
{
|
|
if (cell.rtCell == null)
|
|
{
|
|
console.log('no realtime cell', 'cell', cell.id);
|
|
}
|
|
else
|
|
{
|
|
if (cell.getTerminal(true) != null && (cell.rtCell.source == null ||
|
|
cell.rtCell.source != cell.getTerminal(true).rtCell))
|
|
{
|
|
console.log('invalid source', 'edge', cell.id, 'source',
|
|
cell.getTerminal(true).id, 'rtSource', cell.rtCell.source);
|
|
}
|
|
|
|
if (cell.getTerminal(false) != null && (cell.rtCell.target == null ||
|
|
cell.rtCell.target != cell.getTerminal(false).rtCell))
|
|
{
|
|
console.log('invalid target', 'edge', cell.id, 'target',
|
|
cell.getTerminal(false).id, 'rtTarget', cell.rtCell.target);
|
|
}
|
|
|
|
var childCount = this.model.getChildCount(cell);
|
|
var children = cell.rtCell.children.asArray();
|
|
|
|
if (childCount != cell.rtCell.children.length)
|
|
{
|
|
console.log('invalid child count', 'cell', cell.id, 'children',
|
|
children.length, 'childCount', childCount);
|
|
}
|
|
|
|
for (var i = 0; i < cell.rtCell.children.length; i++)
|
|
{
|
|
var child = this.model.getChildAt(cell, i);
|
|
|
|
if (child == null)
|
|
{
|
|
console.log('no child', 'index', i, 'child', cell.rtCell.children.get(i));
|
|
}
|
|
else if (cell.rtCell.children.get(i) != child.rtCell)
|
|
{
|
|
console.log('invalid child', 'index', i, 'child',
|
|
cell.rtCell.children.get(i), 'graphChild', child);
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < childCount; i++)
|
|
{
|
|
var child = this.model.getChildAt(cell, i);
|
|
this.checkChildren(child);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Writes the given text to the log if <logging> is enabled.
|
|
*/
|
|
DriveRealtime.prototype.log = function(message)
|
|
{
|
|
if (this.logLevel > 1)
|
|
{
|
|
//mxLog.debug.apply(mxLog, arguments);
|
|
//console.log(message);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Writes the given text to the log if <logging> is enabled.
|
|
*/
|
|
DriveRealtime.prototype.warn = function(message)
|
|
{
|
|
if (this.logLevel > 0)
|
|
{
|
|
//mxLog.debug.apply(mxLog, arguments);
|
|
//console.log(message);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Destroys the instance and removes all listeners.
|
|
*/
|
|
DriveRealtime.prototype.destroy = function(unloading)
|
|
{
|
|
unloading = (unloading != null) ? unloading : false;
|
|
|
|
if (this.pageFormatListener != null)
|
|
{
|
|
this.ui.removeListener(this.pageFormatListener);
|
|
this.pageFormatListener = null;
|
|
}
|
|
|
|
if (this.pageScaleListener != null)
|
|
{
|
|
this.ui.removeListener(this.pageScaleListener);
|
|
this.pageScaleListener = null;
|
|
}
|
|
|
|
if (this.backgroundColorListener != null)
|
|
{
|
|
this.ui.removeListener(this.backgroundColorListener);
|
|
this.backgroundColorListener = null;
|
|
}
|
|
|
|
if (this.shadowVisibleListener != null)
|
|
{
|
|
this.graph.removeListener(this.shadowVisibleListener);
|
|
this.shadowVisibleListener = null;
|
|
}
|
|
|
|
if (this.foldingEnabledListener != null)
|
|
{
|
|
this.ui.removeListener(this.foldingEnabledListener);
|
|
this.foldingEnabledListener = null;
|
|
}
|
|
|
|
if (this.backgroundImageListener != null)
|
|
{
|
|
this.ui.removeListener(this.backgroundImageListener);
|
|
this.backgroundImageListener = null;
|
|
}
|
|
|
|
if (this.mathEnabledListener != null)
|
|
{
|
|
this.ui.removeListener(this.mathEnabledListener);
|
|
this.mathEnabledListener = null;
|
|
}
|
|
|
|
if (this.previousUndoListener != null)
|
|
{
|
|
this.ui.editor.undoListener = this.previousUndoListener;
|
|
this.previousUndoListener = null;
|
|
}
|
|
|
|
if (this.graphSelectionModelChangeListener != null)
|
|
{
|
|
this.graph.selectionModel.removeListener(this.graphSelectionModelChangeListener);
|
|
this.graphSelectionModelChangeListener = null;
|
|
}
|
|
|
|
if (this.disconnectListener != null)
|
|
{
|
|
this.ui.drive.removeListener(this.disconnectListener);
|
|
this.disconnectListener = null;
|
|
}
|
|
|
|
if (this.autosaveChangeListener != null)
|
|
{
|
|
this.ui.editor.removeListener(this.autosaveChangeListener);
|
|
this.autosaveChangeListener = null;
|
|
}
|
|
|
|
if (this.graphModelChangeListener != null)
|
|
{
|
|
this.model.removeListener(this.graphModelChangeListener);
|
|
this.graphModelChangeListener = null;
|
|
}
|
|
|
|
if (this.viewStateListener != null)
|
|
{
|
|
this.ui.editor.removeListener(this.viewStateListener);
|
|
this.viewStateListener = null;
|
|
}
|
|
|
|
if (this.collaboratorsElement != null)
|
|
{
|
|
this.collaboratorsElement.parentNode.removeChild(this.collaboratorsElement);
|
|
this.collaboratorsElement = null;
|
|
}
|
|
|
|
if (this.updateStatusThread != null)
|
|
{
|
|
window.clearInterval(this.updateStatusThread);
|
|
this.updateStatusThread = null;
|
|
}
|
|
|
|
this.ui.allowAnimation = true;
|
|
|
|
try
|
|
{
|
|
// KNOWN: Cannot access g of null error in realtime
|
|
// when called from window.onBeforeUnload handler
|
|
if (!unloading && !this.doc.isClosed)
|
|
{
|
|
this.doc.close();
|
|
}
|
|
}
|
|
catch (e)
|
|
{
|
|
// ignores possible document closed errors
|
|
}
|
|
};
|