drawio-offline
Version:
diagrams.net desktop
1,014 lines (912 loc) • 24.4 kB
JavaScript
/**
* Copyright (c) 2006-2017, JGraph Ltd
* Copyright (c) 2006-2017, Gaudenz Alder
*/
//Add a closure to hide the class private variables without changing the code a lot
(function()
{
var _token = null;
window.DropboxClient = function(editorUi)
{
DrawioClient.call(this, editorUi, 'dbauth');
this.client = new Dropbox({clientId: this.clientId});
};
// Extends DrawioClient
mxUtils.extend(DropboxClient, DrawioClient);
/**
* FIXME: How to find name of app folder for current user. The Apps part of the
* name is internationalized so this hardcoded check does not work everywhere.
*/
DropboxClient.prototype.appPath = '/drawio/';
/**
* Executes the first step for connecting to Google Drive.
*/
DropboxClient.prototype.extension = '.drawio';
/**
* Executes the first step for connecting to Google Drive.
*/
DropboxClient.prototype.writingFile = false;
/**
* Executes the first step for connecting to Google Drive.
*/
DropboxClient.prototype.maxRetries = 4;
DropboxClient.prototype.clientId = window.DRAWIO_DROPBOX_ID;
DropboxClient.prototype.redirectUri = window.location.protocol + '//' + window.location.host + '/dropbox';
/**
* Authorizes the client, gets the userId and calls <open>.
*/
DropboxClient.prototype.logout = function()
{
//Send to server to clear refresh token cookie
this.ui.editor.loadUrl(this.redirectUri + '?doLogout=1&state=' + encodeURIComponent('cId=' + this.clientId + '&domain=' + window.location.hostname));
this.clearPersistentToken();
this.setUser(null);
_token = null;
this.client.authTokenRevoke().then(mxUtils.bind(this, function()
{
this.client.setAccessToken(null);
}));
};
/**
* Checks if the client is authorized and calls the next step.
*/
DropboxClient.prototype.updateUser = function(success, error, failOnAuth)
{
var acceptResponse = true;
var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
{
acceptResponse = false;
error({code: App.ERROR_TIMEOUT});
}), this.ui.timeout);
var promise = this.client.usersGetCurrentAccount();
promise.then(mxUtils.bind(this, function(response)
{
window.clearTimeout(timeoutThread);
if (acceptResponse)
{
this.setUser(new DrawioUser(response.account_id,
response.email, response.name.display_name));
success();
}
}));
// Workaround for IE8/9 support with catch function
promise['catch'](mxUtils.bind(this, function(err)
{
window.clearTimeout(timeoutThread);
if (acceptResponse)
{
if (err != null && err.status === 401 && !failOnAuth)
{
this.setUser(null);
this.client.setAccessToken(null);
_token = null;
this.authenticate(mxUtils.bind(this, function()
{
this.updateUser(success, error, true);
}), error);
}
else
{
error({message: mxResources.get('accessDenied')});
}
}
}));
};
/**
* Authorizes the client, gets the userId and calls <open>.
*/
DropboxClient.prototype.authenticate = function(success, error)
{
var req = new mxXmlRequest(this.redirectUri + '?getState=1', null, 'GET');
req.send(mxUtils.bind(this, function(req)
{
if (req.getStatus() >= 200 && req.getStatus() <= 299)
{
this.authenticateStep2(req.getText(), success, error);
}
else if (error != null)
{
error(req);
}
}), error);
};
DropboxClient.prototype.authenticateStep2 = function(state, success, error)
{
if (window.onDropboxCallback == null)
{
var auth = mxUtils.bind(this, function()
{
var acceptAuthResponse = true;
var authRemembered = this.getPersistentToken(true);
if (authRemembered != null)
{
var req = new mxXmlRequest(this.redirectUri + '?state=' + encodeURIComponent('cId=' + this.clientId + '&domain=' + window.location.hostname + '&token=' + state), null, 'GET'); //To identify which app/domain is used
req.send(mxUtils.bind(this, function(req)
{
if (req.getStatus() >= 200 && req.getStatus() <= 299)
{
_token = JSON.parse(req.getText()).access_token;
this.client.setAccessToken(_token);
this.setUser(null);
success();
}
else
{
this.clearPersistentToken();
this.setUser(null);
_token = null;
this.client.setAccessToken(null);
if (req.getStatus() == 401) // (Unauthorized) [e.g, invalid refresh token]
{
auth();
}
else
{
error({message: mxResources.get('accessDenied'), retry: auth});
}
}
}), error);
}
else
{
this.ui.showAuthDialog(this, true, mxUtils.bind(this, function(remember, authSuccess)
{
var win = window.open('https://www.dropbox.com/oauth2/authorize?client_id=' +
this.clientId + (remember? '&token_access_type=offline' : '') +
'&redirect_uri=' + encodeURIComponent(this.redirectUri) +
'&response_type=code&state=' + encodeURIComponent('cId=' + this.clientId + //To identify which app/domain is used
'&domain=' + window.location.hostname + '&token=' + state), 'dbauth');
if (win != null)
{
window.onDropboxCallback = mxUtils.bind(this, function(newAuthInfo, authWindow)
{
if (acceptAuthResponse)
{
window.onDropboxCallback = null;
acceptAuthResponse = false;
try
{
if (newAuthInfo == null)
{
error({message: mxResources.get('accessDenied'), retry: auth});
}
else
{
if (authSuccess != null)
{
authSuccess();
}
_token = newAuthInfo.access_token;
this.client.setAccessToken(_token);
this.setUser(null);
if (remember)
{
this.setPersistentToken('remembered');
}
success();
}
}
catch (e)
{
error(e);
}
finally
{
if (authWindow != null)
{
authWindow.close();
}
}
}
else if (authWindow != null)
{
authWindow.close();
}
});
}
else
{
error({message: mxResources.get('serviceUnavailableOrBlocked'), retry: auth});
}
}), mxUtils.bind(this, function()
{
if (acceptAuthResponse)
{
window.onDropboxCallback = null;
acceptAuthResponse = false;
error({message: mxResources.get('accessDenied'), retry: auth});
}
}));
}
});
auth();
}
else
{
error({code: App.ERROR_BUSY});
}
};
/**
* Authorizes the client, gets the userId and calls <open>.
*/
DropboxClient.prototype.executePromise = function(promiseFn, success, error)
{
var doExecute = mxUtils.bind(this, function(failOnAuth)
{
var acceptResponse = true;
var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
{
acceptResponse = false;
error({code: App.ERROR_TIMEOUT, retry: fn});
}), this.ui.timeout);
//Dropbox client start executing the promise once created so auth fails, so we send a function instead to delay promise creation
var promise = promiseFn();
promise.then(mxUtils.bind(this, function(response)
{
window.clearTimeout(timeoutThread);
if (acceptResponse && success != null)
{
success(response);
}
}));
// Workaround for IE8/9 support with catch function
promise['catch'](mxUtils.bind(this, function(err)
{
window.clearTimeout(timeoutThread);
if (acceptResponse)
{
if (err != null && (err.status == 500 || err.status == 400 ||
err.status == 401))
{
this.setUser(null);
this.client.setAccessToken(null);
_token = null;
if (!failOnAuth)
{
this.authenticate(function()
{
doExecute(true);
}, error);
}
else
{
error({message: mxResources.get('accessDenied'), retry: mxUtils.bind(this, function()
{
this.authenticate(function()
{
fn(true);
}, error);
})});
}
}
else
{
error({message: mxResources.get('error') + ' ' + err.status});
}
}
}));
});
var fn = mxUtils.bind(this, function(failOnAuth)
{
if (this.user == null)
{
this.updateUser(function()
{
fn(true);
}, error, failOnAuth);
}
else
{
doExecute(failOnAuth);
}
});
if (_token == null)
{
this.authenticate(function()
{
fn(true);
}, error);
}
else
{
fn(false);
}
};
/**
* Checks if the client is authorized and calls the next step.
*/
DropboxClient.prototype.getLibrary = function(path, success, error)
{
this.getFile(path, success, error, true);
};
/**
* DenyConvert is ignored in this client, just added for API compatibility.
*/
DropboxClient.prototype.getFile = function(path, success, error, asLibrary)
{
asLibrary = (asLibrary != null) ? asLibrary : false;
var binary = /\.png$/i.test(path);
if (/^https:\/\//i.test(path) || /\.v(dx|sdx?)$/i.test(path) || /\.gliffy$/i.test(path) ||
/\.pdf$/i.test(path) || (!this.ui.useCanvasForExport && binary))
{
var fn = mxUtils.bind(this, function()
{
var tokens = path.split('/');
var name = (tokens.length > 0) ? tokens[tokens.length - 1] : path;
this.ui.convertFile(path, name, null, this.extension, success, error);
});
if (_token != null)
{
fn();
}
else
{
this.authenticate(fn, error);
}
}
else
{
var arg = {path: '/' + path};
if (urlParams['rev'] != null)
{
arg.rev = urlParams['rev'];
}
this.readFile(arg, mxUtils.bind(this, function(data, response)
{
var index = (binary) ? data.lastIndexOf(',') : -1;
var file = null;
if (index > 0)
{
var xml = this.ui.extractGraphModelFromPng(data);
if (xml != null && xml.length > 0)
{
data = xml;
}
else
{
// Imports as PNG image
file = new LocalFile(this, data, path, true);
}
}
success((file != null) ? file :
((asLibrary) ? new DropboxLibrary(this.ui, data, response) :
new DropboxFile(this.ui, data, response)));
}), error, binary);
}
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.readFile = function(arg, success, error, binary)
{
var doExecute = mxUtils.bind(this, function(failOnAuth)
{
var acceptResponse = true;
var timeoutThread = window.setTimeout(mxUtils.bind(this, function()
{
acceptResponse = false;
error({code: App.ERROR_TIMEOUT});
}), this.ui.timeout);
// Workaround for Uncaught DOMException in filesDownload is to
// get the metadata to handle the file not found case
var checkPromise = this.client.filesGetMetadata({path: '/' + arg.path.substring(1), include_deleted: false});
checkPromise.then(mxUtils.bind(this, function(response)
{
// ignore
}));
// Workaround for IE8/9 support with catch function
checkPromise['catch'](function(err)
{
window.clearTimeout(timeoutThread);
if (acceptResponse && err != null && err.status == 409)
{
acceptResponse = false;
error({message: mxResources.get('fileNotFound')});
}
});
// Download file in parallel
// LATER: Report Uncaught DOMException with path/not_found in filesDownload
var promise = this.client.filesDownload(arg);
promise.then(mxUtils.bind(this, function(response)
{
window.clearTimeout(timeoutThread);
if (acceptResponse)
{
acceptResponse = false;
try
{
var reader = new FileReader();
reader.onload = mxUtils.bind(this, function(event)
{
success(reader.result, response);
});
if (binary)
{
reader.readAsDataURL(response.fileBlob);
}
else
{
reader.readAsText(response.fileBlob);
}
}
catch (e)
{
error(e);
}
}
}));
// Workaround for IE8/9 support with catch function
promise['catch'](mxUtils.bind(this, function(err)
{
window.clearTimeout(timeoutThread);
if (acceptResponse)
{
acceptResponse = false;
if (err != null && (err.status == 500 || err.status == 400 ||
err.status == 401))
{
this.client.setAccessToken(null);
this.setUser(null);
_token = null;
if (!failOnAuth)
{
this.authenticate(function()
{
doExecute(true);
}, error);
}
else
{
error({message: mxResources.get('accessDenied'), retry: mxUtils.bind(this, function()
{
this.authenticate(function()
{
fn(true);
}, error);
})});
}
}
else
{
error({message: mxResources.get('error') + ' ' + err.status});
}
}
}));
});
var fn = mxUtils.bind(this, function(failOnAuth)
{
if (this.user == null)
{
this.updateUser(function()
{
fn(true);
}, error, failOnAuth);
}
else
{
doExecute(failOnAuth);
}
});
if (_token == null)
{
this.authenticate(function()
{
fn(true);
}, error);
}
else
{
fn(false);
}
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.checkExists = function(filename, fn, noConfirm)
{
var promiseFn = mxUtils.bind(this, function()
{
return this.client.filesGetMetadata({path: '/' + filename.toLowerCase(), include_deleted: false});
});
this.executePromise(promiseFn, mxUtils.bind(this, function(response)
{
if (noConfirm)
{
fn(false, true, response);
}
else
{
this.ui.confirm(mxResources.get('replaceIt', [filename]), function()
{
fn(true, true, response);
}, function()
{
fn(false, true, response);
});
}
}), function(err)
{
fn(true, false);
});
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.renameFile = function(file, filename, success, error)
{
if (/[\\\/:\?\*"\|]/.test(filename))
{
error({message: mxResources.get('dropboxCharsNotAllowed')});
}
else
{
// Appends working directory of source file
if (file != null && filename != null)
{
var path = file.stat.path_display.substring(1);
var idx = path.lastIndexOf('/');
if (idx > 0)
{
filename = path.substring(0, idx + 1) + filename;
}
}
if (file != null && filename != null && file.stat.path_lower.substring(1) !== filename.toLowerCase())
{
// Checks if file exists
this.checkExists(filename, mxUtils.bind(this, function(checked, exists, response)
{
if (checked)
{
var thenHandler = mxUtils.bind(this, function(deleteResponse)
{
var move = mxUtils.bind(this, function()
{
return this.client.filesMove({from_path: file.stat.path_display, to_path: '/' +
filename, autorename: false});
});
this.executePromise(move, success, error);
});
// API fails on same name with different upper-/lowercase
if (!exists || response.path_lower.substring(1) === filename.toLowerCase())
{
thenHandler();
}
else
{
// Deletes file first to avoid conflict in filesMove (non-atomic)
var promiseFn = mxUtils.bind(this, function()
{
return this.client.filesDelete({path: '/' + filename.toLowerCase()});
});
this.executePromise(promiseFn, thenHandler, error);
}
}
else
{
error();
}
}));
}
else
{
// Same name with different upper-/lowercase not supported by Dropbox API
error({message: mxResources.get('invalidName')});
}
}
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.insertLibrary = function(filename, data, success, error)
{
this.insertFile(filename, data, success, error, true);
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.insertFile = function(filename, data, success, error, asLibrary)
{
asLibrary = (asLibrary != null) ? asLibrary : false;
this.checkExists(filename, mxUtils.bind(this, function(checked)
{
if (checked)
{
this.saveFile(filename, data, mxUtils.bind(this, function(stat)
{
if (asLibrary)
{
success(new DropboxLibrary(this.ui, data, stat));
}
else
{
success(new DropboxFile(this.ui, data, stat));
}
}), error);
}
else
{
error();
}
}));
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.saveFile = function(filename, data, success, error, folder)
{
if (/[\\\/:\?\*"\|]/.test(filename))
{
error({message: mxResources.get('dropboxCharsNotAllowed')});
}
else if (data.length >= 150000000 /*150MB*/)
{
error({message: mxResources.get('drawingTooLarge') + ' (' +
this.ui.formatFileSize(data.length) + ' / 150 MB)'});
}
else
{
folder = (folder != null) ? folder : '';
// Mute switch is ignored
var promiseFn = mxUtils.bind(this, function()
{
return this.client.filesUpload({path: '/' + folder + filename,
mode: {'.tag': 'overwrite'}, mute: true,
contents: new Blob([data], {type: 'text/plain'})});
});
this.executePromise(promiseFn, success, error);
}
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.pickLibrary = function(fn)
{
// Authentication will be carried out on open to make sure the
// autosave does not show an auth dialog. Showing it here will
// block the second dialog (the file picker) so it's too early.
Dropbox.choose(
{
linkType : 'direct',
cancel: mxUtils.bind(this, function()
{
// do nothing
}),
success : mxUtils.bind(this, function(files)
{
if (this.ui.spinner.spin(document.body, mxResources.get('loading')))
{
var error = mxUtils.bind(this, function(e)
{
this.ui.spinner.stop();
this.ui.handleError(e);
});
var tmp = files[0].link.indexOf(this.appPath);
if (tmp > 0)
{
// Checks if file is in app folder by loading file from there and comparing the ID
var rel = decodeURIComponent(files[0].link.substring(tmp + this.appPath.length - 1));
this.readFile({path: rel}, mxUtils.bind(this, function(data, stat)
{
if (stat != null && stat.id == files[0].id)
{
// No need to load file a second time
try
{
this.ui.spinner.stop();
fn(rel.substring(1), new DropboxLibrary(this.ui, data, stat));
}
catch (e)
{
this.ui.handleError(e);
}
}
else
{
this.createLibrary(files[0], fn, error);
}
}), error);
}
else
{
this.createLibrary(files[0], fn, error);
}
}
})
});
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.createLibrary = function(file, success, error)
{
this.ui.confirm(mxResources.get('note') + ': ' + mxResources.get('fileWillBeSavedInAppFolder',
[file.name]), mxUtils.bind(this, function()
{
this.ui.editor.loadUrl(file.link, mxUtils.bind(this, function(data)
{
this.insertFile(file.name, data, mxUtils.bind(this, function(newFile)
{
try
{
this.ui.spinner.stop();
success(newFile.getHash().substring(1), newFile);
}
catch (e)
{
error(e);
}
}), error, true);
}), error);
}), mxUtils.bind(this, function()
{
this.ui.spinner.stop();
}));
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.pickFile = function(fn, readOnly)
{
if (Dropbox.choose != null)
{
fn = (fn != null) ? fn : mxUtils.bind(this, function(path, file)
{
this.ui.loadFile((path != null) ? 'D' + encodeURIComponent(path) : file.getHash(), null, file);
});
// Authentication will be carried out on open to make sure the
// autosave does not show an auth dialog. Showing it here will
// block the second dialog (the file picker) so it's too early.
Dropbox.choose(
{
linkType : 'direct',
cancel: mxUtils.bind(this, function()
{
// do nothing
}),
success : mxUtils.bind(this, function(files)
{
if (this.ui.spinner.spin(document.body, mxResources.get('loading')))
{
// File used for read-only
if (readOnly)
{
this.ui.spinner.stop();
fn(files[0].link);
}
else
{
var error = mxUtils.bind(this, function(e)
{
this.ui.spinner.stop();
this.ui.handleError(e);
});
var success = mxUtils.bind(this, function(path, file)
{
this.ui.spinner.stop();
fn(path, file);
});
var binary = /\.png$/i.test(files[0].name);
if (/\.vsdx$/i.test(files[0].name) || /\.gliffy$/i.test(files[0].name) ||
(!this.ui.useCanvasForExport && binary))
{
success(files[0].link);
}
else
{
var tmp = files[0].link.indexOf(this.appPath);
if (tmp > 0)
{
// Checks if file is in app folder by loading file from there and comparing the ID
var rel = decodeURIComponent(files[0].link.substring(tmp + this.appPath.length - 1));
this.readFile({path: rel}, mxUtils.bind(this, function(data, stat)
{
if (stat != null && stat.id == files[0].id)
{
var index = (binary) ? data.lastIndexOf(',') : -1;
this.ui.spinner.stop();
var file = null;
if (index > 0)
{
var xml = this.ui.extractGraphModelFromPng(data);
if (xml != null && xml.length > 0)
{
data = xml;
}
else
{
// Imports as PNG image
file = new LocalFile(this, data, rel, true);
}
}
// No need to load file a second time
fn(rel.substring(1), (file != null) ? file : new DropboxFile(this.ui, data, stat));
}
else
{
this.createFile(files[0], success, error);
}
}), error, binary);
}
else
{
this.createFile(files[0], success, error);
}
}
}
}
})
});
}
else
{
this.ui.handleError({message: mxResources.get('serviceUnavailableOrBlocked')});
}
};
/**
* Translates this point by the given vector.
*
* @param {number} dx X-coordinate of the translation.
* @param {number} dy Y-coordinate of the translation.
*/
DropboxClient.prototype.createFile = function(file, success, error)
{
var binary = /(\.png)$/i.test(file.name);
this.ui.editor.loadUrl(file.link, mxUtils.bind(this, function(data)
{
if (data != null && data.length > 0)
{
this.ui.confirm(mxResources.get('note') + ': ' + mxResources.get('fileWillBeSavedInAppFolder', [file.name]), mxUtils.bind(this, function()
{
var index = (binary) ? data.lastIndexOf(',') : -1;
if (index > 0)
{
var xml = this.ui.extractGraphModelFromPng(data.substring(index + 1));
if (xml != null && xml.length > 0)
{
data = xml;
}
}
this.insertFile(file.name, data, mxUtils.bind(this, function(newFile)
{
success(file.name, newFile);
}), error);
}), mxUtils.bind(this, function()
{
this.ui.spinner.stop();
}));
}
else
{
this.ui.spinner.stop();
error({message: mxResources.get('errorLoadingFile')});
}
}), error, binary);
};
})();