fix: 【文件】新版流程图右侧及底部被隐藏问题修改
This commit is contained in:
韦荣超
parent
a4799a1bc0
commit
2c1b944b7c
@ -456,198 +456,5 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
var editorUiInit = EditorUi.prototype.init;
|
||||
|
||||
EditorUi.prototype.init = function () {
|
||||
editorUiInit.apply(this, arguments);
|
||||
this.actions.get('new').setEnabled(false);
|
||||
this.actions.get('export').setEnabled(false);
|
||||
this.actions.get('open').setEnabled(false);
|
||||
this.actions.get('import').setEnabled(false);
|
||||
this.actions.get('save').setEnabled(true);
|
||||
this.actions.get('saveAs').setEnabled(false);
|
||||
this.actions.get('export').setEnabled(false);
|
||||
};
|
||||
|
||||
EditorUi.prototype.saveFile = function () {
|
||||
window.parent.postMessage({
|
||||
act: 'save',
|
||||
params: {
|
||||
|
||||
}
|
||||
}, '*');
|
||||
};
|
||||
|
||||
EditorUi.prototype.menubarHeight = 0;
|
||||
EditorUi.prototype.footerHeight = 0;
|
||||
|
||||
mxResources.loadDefaultBundle = false;
|
||||
var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
|
||||
|
||||
mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
|
||||
mxResources.parse(xhr[0].getText());
|
||||
var themes = {};
|
||||
themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
|
||||
|
||||
var editorUi = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
|
||||
var graph = editorUi.editor.graph;
|
||||
|
||||
var getPos = function () {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
var data = {
|
||||
p1: {left: 0, top: 0},
|
||||
p2: {left: 0, top: 0},
|
||||
};
|
||||
if (svg != null) {
|
||||
data = {
|
||||
p1: {
|
||||
left: svg.clientWidth / 2,
|
||||
top: svg.clientHeight / 2,
|
||||
},
|
||||
p2: {
|
||||
left: graph.container.clientWidth / 2 + graph.container.scrollLeft,
|
||||
top: graph.container.clientHeight / 2 + graph.container.scrollTop,
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: data.p2.left - data.p1.left,
|
||||
top: data.p2.top - data.p1.top,
|
||||
};
|
||||
}
|
||||
|
||||
var setPos = function (diff) {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (svg == null) {
|
||||
return;
|
||||
}
|
||||
graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2;
|
||||
graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2;
|
||||
}
|
||||
|
||||
var newXml;
|
||||
var newPos;
|
||||
var randXml;
|
||||
var backupParams;
|
||||
|
||||
var changePost = function (immediately) {
|
||||
var randTmp = (randXml = Math.random());
|
||||
setTimeout(() => {
|
||||
if (randTmp != randXml) {
|
||||
return;
|
||||
}
|
||||
if (!backupParams) {
|
||||
return;
|
||||
}
|
||||
newPos = getPos();
|
||||
newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
|
||||
if (backupParams.xml && backupParams.xml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
|
||||
if (backupParams.scale && backupParams.scale == graph.getView().scale) {
|
||||
if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
backupParams.xml = newXml;
|
||||
window.parent.postMessage({
|
||||
act: 'change',
|
||||
params: {
|
||||
xml: newXml,
|
||||
scale: graph.getView().scale,
|
||||
diffpos: newPos,
|
||||
}
|
||||
}, '*');
|
||||
}, immediately === true ? 0 : 200)
|
||||
}
|
||||
|
||||
graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) }));
|
||||
graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) }));
|
||||
graph.container.addEventListener("scroll", changePost);
|
||||
|
||||
window.addEventListener("message", function(event){
|
||||
var data = event.data;
|
||||
switch (data.act) {
|
||||
case 'setXml':
|
||||
try {
|
||||
backupParams = data.params;
|
||||
editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement);
|
||||
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
|
||||
typeof data.params.diffpos === "object" && setPos(data.params.diffpos);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case 'exportPNG':
|
||||
try {
|
||||
(function (name, scale, type) {
|
||||
name = name || '未命名';
|
||||
type = type || 'png';
|
||||
scale = scale || 1;
|
||||
var graph = editorUi.editor.graph;
|
||||
var bounds = graph.getGraphBounds();
|
||||
var width = Math.ceil(bounds.width / graph.view.scale * scale);
|
||||
var height = Math.ceil(bounds.height / graph.view.scale * scale);
|
||||
var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
|
||||
var image = new Image()
|
||||
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
var context = canvas.getContext('2d')
|
||||
context.fillStyle = '#fff'
|
||||
context.fillRect(0, 0, 10000, 10000)
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0)
|
||||
if (type == 'imageContent') {
|
||||
window.parent.postMessage({
|
||||
act: 'imageContent',
|
||||
params: {
|
||||
name: name,
|
||||
width: width,
|
||||
height: height,
|
||||
content: canvas.toDataURL(`image/${type}`)
|
||||
}
|
||||
}, '*');
|
||||
} else {
|
||||
var a = document.createElement('a')
|
||||
a.download = `${name}.${type}`
|
||||
a.href = canvas.toDataURL(`image/${type}`)
|
||||
a.click()
|
||||
}
|
||||
}
|
||||
})(data.params.name, data.params.scale, data.params.type);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage({
|
||||
act: 'ready',
|
||||
params: {}
|
||||
}, '*');
|
||||
}, function () {
|
||||
document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -818,7 +818,6 @@ App.main = function(callback, createUi)
|
||||
{
|
||||
// Adds bundle text to resources
|
||||
mxResources.parse(xhr[0].getText());
|
||||
|
||||
// Configuration mode
|
||||
if (isLocalStorage && localStorage != null && window.location.hash != null &&
|
||||
window.location.hash.substring(0, 9) == '#_CONFIG_')
|
||||
@ -3260,14 +3259,7 @@ App.prototype.start = function()
|
||||
else
|
||||
{
|
||||
var id = this.getDiagramId();
|
||||
|
||||
if (EditorUi.enableDrafts && urlParams['mode'] == null &&
|
||||
this.getServiceName() == 'draw.io' && (id == null || id.length == 0) &&
|
||||
!this.editor.isChromelessView())
|
||||
{
|
||||
this.checkDrafts();
|
||||
}
|
||||
else if (id != null && id.length > 0)
|
||||
if (id != null && id.length > 0)
|
||||
{
|
||||
this.loadFile(id, null, null, mxUtils.bind(this, function()
|
||||
{
|
||||
@ -3290,7 +3282,7 @@ App.prototype.start = function()
|
||||
}
|
||||
else if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true);
|
||||
}
|
||||
else if (!EditorUi.isElectronApp)
|
||||
{
|
||||
@ -3473,6 +3465,9 @@ App.prototype.start = function()
|
||||
}
|
||||
};
|
||||
|
||||
App.prototype.loadContent = function (){
|
||||
|
||||
};
|
||||
/**
|
||||
* Checks for orphaned drafts.
|
||||
*/
|
||||
@ -3569,6 +3564,49 @@ App.prototype.checkDrafts = function()
|
||||
this.removeDatabaseItem(drafts[0].key);
|
||||
}));
|
||||
}
|
||||
else if (drafts.length > 1)
|
||||
{
|
||||
var ts = new Date(drafts[0].modified);
|
||||
|
||||
var dlg = new DraftDialog(this, (drafts.length > 1) ? mxResources.get('selectDraft') :
|
||||
mxResources.get('draftFound', [ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString()]),
|
||||
(drafts.length > 1) ? null : drafts[0].data, mxUtils.bind(this, function(index)
|
||||
{
|
||||
this.hideDialog();
|
||||
index = (index != '') ? index : 0;
|
||||
|
||||
this.loadDraft(drafts[index].data, mxUtils.bind(this, function()
|
||||
{
|
||||
this.removeDatabaseItem(drafts[index].key);
|
||||
}));
|
||||
}), mxUtils.bind(this, function(index, success)
|
||||
{
|
||||
index = (index != '') ? index : 0;
|
||||
|
||||
// Discard draft
|
||||
this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, function()
|
||||
{
|
||||
this.removeDatabaseItem(drafts[index].key);
|
||||
|
||||
if (success != null)
|
||||
{
|
||||
success();
|
||||
}
|
||||
}), mxResources.get('no'), mxResources.get('yes'));
|
||||
}), null, null, null, (drafts.length > 1) ? drafts : null);
|
||||
this.showDialog(dlg.container, 640, 480, true, false, mxUtils.bind(this, function(cancel)
|
||||
{
|
||||
if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true);
|
||||
}
|
||||
}));
|
||||
dlg.init();
|
||||
}
|
||||
else if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1761,7 +1761,7 @@ EditorUi.prototype.createShapePicker = function(x, y, source, callback, directio
|
||||
}
|
||||
|
||||
graph.container.appendChild(div);
|
||||
console.log(1111)
|
||||
|
||||
var addCell = mxUtils.bind(this, function(cell)
|
||||
{
|
||||
// Wrapper needed to catch events
|
||||
@ -4181,7 +4181,7 @@ EditorUi.prototype.refresh = function(sizeDidChange)
|
||||
|
||||
if (this.toolbar != null)
|
||||
{
|
||||
this.toolbarContainer.style.top = this.menubarHeight + 'px';
|
||||
this.toolbarContainer.style.top = '0px';//this.menubarHeight + 'px';
|
||||
this.toolbarContainer.style.height = this.toolbarHeight + 'px';
|
||||
tmp += this.toolbarHeight;
|
||||
}
|
||||
@ -4321,8 +4321,7 @@ EditorUi.prototype.createSidebarFooterContainer = function()
|
||||
EditorUi.prototype.createUi = function()
|
||||
{
|
||||
// Creates menubar
|
||||
this.menubar = (this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar'));
|
||||
|
||||
this.menubar = null;//(this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar'));
|
||||
if (this.menubar != null)
|
||||
{
|
||||
this.menubarContainer.appendChild(this.menubar.container);
|
||||
@ -4403,6 +4402,162 @@ EditorUi.prototype.createUi = function()
|
||||
this.refresh();
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
var editorUi = this;
|
||||
var graph = editorUi.editor.graph;
|
||||
var getPos = function () {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
var data = {
|
||||
p1: {left: 0, top: 0},
|
||||
p2: {left: 0, top: 0},
|
||||
};
|
||||
if (svg != null) {
|
||||
data = {
|
||||
p1: {
|
||||
left: svg.clientWidth / 2,
|
||||
top: svg.clientHeight / 2,
|
||||
},
|
||||
p2: {
|
||||
left: graph.container.clientWidth / 2 + graph.container.scrollLeft,
|
||||
top: graph.container.clientHeight / 2 + graph.container.scrollTop,
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: data.p2.left - data.p1.left,
|
||||
top: data.p2.top - data.p1.top,
|
||||
};
|
||||
}
|
||||
|
||||
var setPos = function (diff) {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (svg == null) {
|
||||
return;
|
||||
}
|
||||
graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2;
|
||||
graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2;
|
||||
}
|
||||
|
||||
var newXml;
|
||||
var newPos;
|
||||
var randXml;
|
||||
var backupParams;
|
||||
var changePost = function (immediately) {
|
||||
var randTmp = (randXml = Math.random());
|
||||
setTimeout(() => {
|
||||
if (randTmp != randXml) {
|
||||
return;
|
||||
}
|
||||
if (!backupParams) {
|
||||
return;
|
||||
}
|
||||
newPos = getPos();
|
||||
newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
|
||||
if (backupParams.xml && backupParams.xml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
|
||||
if (backupParams.scale && backupParams.scale == graph.getView().scale) {
|
||||
if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
backupParams.xml = newXml;
|
||||
window.parent.postMessage({
|
||||
act: 'change',
|
||||
params: {
|
||||
xml: newXml,
|
||||
scale: graph.getView().scale,
|
||||
diffpos: newPos,
|
||||
}
|
||||
}, '*');
|
||||
}, immediately === true ? 0 : 200)
|
||||
}
|
||||
|
||||
graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) }));
|
||||
graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) }));
|
||||
var container = document.getElementsByClassName('geDiagramContainer')[0];
|
||||
container.addEventListener("scroll", changePost);
|
||||
|
||||
window.addEventListener("message", function(event){
|
||||
var data = event.data;
|
||||
switch (data.act) {
|
||||
case 'setXml':
|
||||
try {
|
||||
backupParams = data.params;
|
||||
editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement);
|
||||
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
|
||||
typeof data.params.diffpos === "object" && setPos(data.params.diffpos);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case 'exportPNG':
|
||||
try {
|
||||
(function (name, scale, type) {
|
||||
name = name || '未命名';
|
||||
type = type || 'png';
|
||||
scale = scale || 1;
|
||||
var graph = editorUi.editor.graph;
|
||||
var bounds = graph.getGraphBounds();
|
||||
var width = Math.ceil(bounds.width / graph.view.scale * scale);
|
||||
var height = Math.ceil(bounds.height / graph.view.scale * scale);
|
||||
var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
|
||||
var image = new Image()
|
||||
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
var context = canvas.getContext('2d')
|
||||
context.fillStyle = '#fff'
|
||||
context.fillRect(0, 0, 10000, 10000)
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0)
|
||||
if (type == 'imageContent') {
|
||||
window.parent.postMessage({
|
||||
act: 'imageContent',
|
||||
params: {
|
||||
name: name,
|
||||
width: width,
|
||||
height: height,
|
||||
content: canvas.toDataURL(`image/${type}`)
|
||||
}
|
||||
}, '*');
|
||||
} else {
|
||||
var a = document.createElement('a')
|
||||
a.download = `${name}.${type}`
|
||||
a.href = canvas.toDataURL(`image/${type}`)
|
||||
a.click()
|
||||
}
|
||||
}
|
||||
})(data.params.name, data.params.scale, data.params.type);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage({
|
||||
act: 'ready',
|
||||
params: {}
|
||||
}, '*');
|
||||
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -456,198 +456,5 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
var editorUiInit = EditorUi.prototype.init;
|
||||
|
||||
EditorUi.prototype.init = function () {
|
||||
editorUiInit.apply(this, arguments);
|
||||
this.actions.get('new').setEnabled(false);
|
||||
this.actions.get('export').setEnabled(false);
|
||||
this.actions.get('open').setEnabled(false);
|
||||
this.actions.get('import').setEnabled(false);
|
||||
this.actions.get('save').setEnabled(true);
|
||||
this.actions.get('saveAs').setEnabled(false);
|
||||
this.actions.get('export').setEnabled(false);
|
||||
};
|
||||
|
||||
EditorUi.prototype.saveFile = function () {
|
||||
window.parent.postMessage({
|
||||
act: 'save',
|
||||
params: {
|
||||
|
||||
}
|
||||
}, '*');
|
||||
};
|
||||
|
||||
EditorUi.prototype.menubarHeight = 0;
|
||||
EditorUi.prototype.footerHeight = 0;
|
||||
|
||||
mxResources.loadDefaultBundle = false;
|
||||
var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) || mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);
|
||||
|
||||
mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function (xhr) {
|
||||
mxResources.parse(xhr[0].getText());
|
||||
var themes = {};
|
||||
themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();
|
||||
|
||||
var editorUi = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));
|
||||
var graph = editorUi.editor.graph;
|
||||
|
||||
var getPos = function () {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
var data = {
|
||||
p1: {left: 0, top: 0},
|
||||
p2: {left: 0, top: 0},
|
||||
};
|
||||
if (svg != null) {
|
||||
data = {
|
||||
p1: {
|
||||
left: svg.clientWidth / 2,
|
||||
top: svg.clientHeight / 2,
|
||||
},
|
||||
p2: {
|
||||
left: graph.container.clientWidth / 2 + graph.container.scrollLeft,
|
||||
top: graph.container.clientHeight / 2 + graph.container.scrollTop,
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: data.p2.left - data.p1.left,
|
||||
top: data.p2.top - data.p1.top,
|
||||
};
|
||||
}
|
||||
|
||||
var setPos = function (diff) {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (svg == null) {
|
||||
return;
|
||||
}
|
||||
graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2;
|
||||
graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2;
|
||||
}
|
||||
|
||||
var newXml;
|
||||
var newPos;
|
||||
var randXml;
|
||||
var backupParams;
|
||||
|
||||
var changePost = function (immediately) {
|
||||
var randTmp = (randXml = Math.random());
|
||||
setTimeout(() => {
|
||||
if (randTmp != randXml) {
|
||||
return;
|
||||
}
|
||||
if (!backupParams) {
|
||||
return;
|
||||
}
|
||||
newPos = getPos();
|
||||
newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
|
||||
if (backupParams.xml && backupParams.xml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
|
||||
if (backupParams.scale && backupParams.scale == graph.getView().scale) {
|
||||
if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
backupParams.xml = newXml;
|
||||
window.parent.postMessage({
|
||||
act: 'change',
|
||||
params: {
|
||||
xml: newXml,
|
||||
scale: graph.getView().scale,
|
||||
diffpos: newPos,
|
||||
}
|
||||
}, '*');
|
||||
}, immediately === true ? 0 : 200)
|
||||
}
|
||||
|
||||
graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) }));
|
||||
graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) }));
|
||||
graph.container.addEventListener("scroll", changePost);
|
||||
|
||||
window.addEventListener("message", function(event){
|
||||
var data = event.data;
|
||||
switch (data.act) {
|
||||
case 'setXml':
|
||||
try {
|
||||
backupParams = data.params;
|
||||
editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement);
|
||||
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
|
||||
typeof data.params.diffpos === "object" && setPos(data.params.diffpos);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case 'exportPNG':
|
||||
try {
|
||||
(function (name, scale, type) {
|
||||
name = name || '未命名';
|
||||
type = type || 'png';
|
||||
scale = scale || 1;
|
||||
var graph = editorUi.editor.graph;
|
||||
var bounds = graph.getGraphBounds();
|
||||
var width = Math.ceil(bounds.width / graph.view.scale * scale);
|
||||
var height = Math.ceil(bounds.height / graph.view.scale * scale);
|
||||
var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
|
||||
var image = new Image()
|
||||
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
var context = canvas.getContext('2d')
|
||||
context.fillStyle = '#fff'
|
||||
context.fillRect(0, 0, 10000, 10000)
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0)
|
||||
if (type == 'imageContent') {
|
||||
window.parent.postMessage({
|
||||
act: 'imageContent',
|
||||
params: {
|
||||
name: name,
|
||||
width: width,
|
||||
height: height,
|
||||
content: canvas.toDataURL(`image/${type}`)
|
||||
}
|
||||
}, '*');
|
||||
} else {
|
||||
var a = document.createElement('a')
|
||||
a.download = `${name}.${type}`
|
||||
a.href = canvas.toDataURL(`image/${type}`)
|
||||
a.click()
|
||||
}
|
||||
}
|
||||
})(data.params.name, data.params.scale, data.params.type);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage({
|
||||
act: 'ready',
|
||||
params: {}
|
||||
}, '*');
|
||||
}, function () {
|
||||
document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -818,7 +818,6 @@ App.main = function(callback, createUi)
|
||||
{
|
||||
// Adds bundle text to resources
|
||||
mxResources.parse(xhr[0].getText());
|
||||
|
||||
// Configuration mode
|
||||
if (isLocalStorage && localStorage != null && window.location.hash != null &&
|
||||
window.location.hash.substring(0, 9) == '#_CONFIG_')
|
||||
@ -3260,14 +3259,7 @@ App.prototype.start = function()
|
||||
else
|
||||
{
|
||||
var id = this.getDiagramId();
|
||||
|
||||
if (EditorUi.enableDrafts && urlParams['mode'] == null &&
|
||||
this.getServiceName() == 'draw.io' && (id == null || id.length == 0) &&
|
||||
!this.editor.isChromelessView())
|
||||
{
|
||||
this.checkDrafts();
|
||||
}
|
||||
else if (id != null && id.length > 0)
|
||||
if (id != null && id.length > 0)
|
||||
{
|
||||
this.loadFile(id, null, null, mxUtils.bind(this, function()
|
||||
{
|
||||
@ -3290,7 +3282,7 @@ App.prototype.start = function()
|
||||
}
|
||||
else if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true);
|
||||
}
|
||||
else if (!EditorUi.isElectronApp)
|
||||
{
|
||||
@ -3473,6 +3465,9 @@ App.prototype.start = function()
|
||||
}
|
||||
};
|
||||
|
||||
App.prototype.loadContent = function (){
|
||||
|
||||
};
|
||||
/**
|
||||
* Checks for orphaned drafts.
|
||||
*/
|
||||
@ -3569,6 +3564,49 @@ App.prototype.checkDrafts = function()
|
||||
this.removeDatabaseItem(drafts[0].key);
|
||||
}));
|
||||
}
|
||||
else if (drafts.length > 1)
|
||||
{
|
||||
var ts = new Date(drafts[0].modified);
|
||||
|
||||
var dlg = new DraftDialog(this, (drafts.length > 1) ? mxResources.get('selectDraft') :
|
||||
mxResources.get('draftFound', [ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString()]),
|
||||
(drafts.length > 1) ? null : drafts[0].data, mxUtils.bind(this, function(index)
|
||||
{
|
||||
this.hideDialog();
|
||||
index = (index != '') ? index : 0;
|
||||
|
||||
this.loadDraft(drafts[index].data, mxUtils.bind(this, function()
|
||||
{
|
||||
this.removeDatabaseItem(drafts[index].key);
|
||||
}));
|
||||
}), mxUtils.bind(this, function(index, success)
|
||||
{
|
||||
index = (index != '') ? index : 0;
|
||||
|
||||
// Discard draft
|
||||
this.confirm(mxResources.get('areYouSure'), null, mxUtils.bind(this, function()
|
||||
{
|
||||
this.removeDatabaseItem(drafts[index].key);
|
||||
|
||||
if (success != null)
|
||||
{
|
||||
success();
|
||||
}
|
||||
}), mxResources.get('no'), mxResources.get('yes'));
|
||||
}), null, null, null, (drafts.length > 1) ? drafts : null);
|
||||
this.showDialog(dlg.container, 640, 480, true, false, mxUtils.bind(this, function(cancel)
|
||||
{
|
||||
if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.createFile(this.defaultFilename, this.getFileData(), null, null, null, null, null, true);
|
||||
}
|
||||
}));
|
||||
dlg.init();
|
||||
}
|
||||
else if (urlParams['splash'] != '0')
|
||||
{
|
||||
this.loadFile();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -4181,7 +4181,7 @@ EditorUi.prototype.refresh = function(sizeDidChange)
|
||||
|
||||
if (this.toolbar != null)
|
||||
{
|
||||
this.toolbarContainer.style.top = this.menubarHeight + 'px';
|
||||
this.toolbarContainer.style.top = '0px';//this.menubarHeight + 'px';
|
||||
this.toolbarContainer.style.height = this.toolbarHeight + 'px';
|
||||
tmp += this.toolbarHeight;
|
||||
}
|
||||
@ -4321,8 +4321,7 @@ EditorUi.prototype.createSidebarFooterContainer = function()
|
||||
EditorUi.prototype.createUi = function()
|
||||
{
|
||||
// Creates menubar
|
||||
this.menubar = (this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar'));
|
||||
|
||||
this.menubar = null;//(this.editor.chromeless) ? null : this.menus.createMenubar(this.createDiv('geMenubar'));
|
||||
if (this.menubar != null)
|
||||
{
|
||||
this.menubarContainer.appendChild(this.menubar.container);
|
||||
@ -4403,6 +4402,162 @@ EditorUi.prototype.createUi = function()
|
||||
this.refresh();
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
var editorUi = this;
|
||||
var graph = editorUi.editor.graph;
|
||||
var getPos = function () {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
var data = {
|
||||
p1: {left: 0, top: 0},
|
||||
p2: {left: 0, top: 0},
|
||||
};
|
||||
if (svg != null) {
|
||||
data = {
|
||||
p1: {
|
||||
left: svg.clientWidth / 2,
|
||||
top: svg.clientHeight / 2,
|
||||
},
|
||||
p2: {
|
||||
left: graph.container.clientWidth / 2 + graph.container.scrollLeft,
|
||||
top: graph.container.clientHeight / 2 + graph.container.scrollTop,
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: data.p2.left - data.p1.left,
|
||||
top: data.p2.top - data.p1.top,
|
||||
};
|
||||
}
|
||||
|
||||
var setPos = function (diff) {
|
||||
var svg = null;
|
||||
var childNodes = graph.container.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
if (childNodes[i].nodeName.toLocaleLowerCase() == 'svg') {
|
||||
svg = childNodes[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (svg == null) {
|
||||
return;
|
||||
}
|
||||
graph.container.scrollLeft = svg.clientWidth / 2 + diff.left - graph.container.clientWidth / 2;
|
||||
graph.container.scrollTop = svg.clientHeight / 2 + diff.top - graph.container.clientHeight / 2;
|
||||
}
|
||||
|
||||
var newXml;
|
||||
var newPos;
|
||||
var randXml;
|
||||
var backupParams;
|
||||
var changePost = function (immediately) {
|
||||
var randTmp = (randXml = Math.random());
|
||||
setTimeout(() => {
|
||||
if (randTmp != randXml) {
|
||||
return;
|
||||
}
|
||||
if (!backupParams) {
|
||||
return;
|
||||
}
|
||||
newPos = getPos();
|
||||
newXml = mxUtils.getPrettyXml(editorUi.editor.getGraphXml());
|
||||
if (backupParams.xml && backupParams.xml.replace(/^<mxGraphModel(.*?)>/, '') == newXml.replace(/^<mxGraphModel(.*?)>/, '')) {
|
||||
if (backupParams.scale && backupParams.scale == graph.getView().scale) {
|
||||
if (typeof backupParams.diffpos === "object" && Math.abs(backupParams.diffpos.left - newPos.left) < 10 && Math.abs(backupParams.diffpos.top - newPos.top) < 10) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
backupParams.xml = newXml;
|
||||
window.parent.postMessage({
|
||||
act: 'change',
|
||||
params: {
|
||||
xml: newXml,
|
||||
scale: graph.getView().scale,
|
||||
diffpos: newPos,
|
||||
}
|
||||
}, '*');
|
||||
}, immediately === true ? 0 : 200)
|
||||
}
|
||||
|
||||
graph.getModel().addListener(mxEvent.CHANGE, mxUtils.bind(editorUi, function() { changePost(true) }));
|
||||
graph.getView().addListener(mxEvent.SCALE, mxUtils.bind(editorUi, function() {changePost(true) }));
|
||||
var container = document.getElementsByClassName('geDiagramContainer')[0];
|
||||
container.addEventListener("scroll", changePost);
|
||||
|
||||
window.addEventListener("message", function(event){
|
||||
var data = event.data;
|
||||
switch (data.act) {
|
||||
case 'setXml':
|
||||
try {
|
||||
backupParams = data.params;
|
||||
editorUi.editor.setGraphXml(mxUtils.parseXml(data.params.xml).documentElement);
|
||||
typeof data.params.scale === "number" && graph.zoomTo(data.params.scale);
|
||||
typeof data.params.diffpos === "object" && setPos(data.params.diffpos);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
|
||||
case 'exportPNG':
|
||||
try {
|
||||
(function (name, scale, type) {
|
||||
name = name || '未命名';
|
||||
type = type || 'png';
|
||||
scale = scale || 1;
|
||||
var graph = editorUi.editor.graph;
|
||||
var bounds = graph.getGraphBounds();
|
||||
var width = Math.ceil(bounds.width / graph.view.scale * scale);
|
||||
var height = Math.ceil(bounds.height / graph.view.scale * scale);
|
||||
var source = '<?xml version="1.0" standalone="no"?>\r\n' + mxUtils.getXml(graph.getSvg(null, scale, 0))
|
||||
var image = new Image()
|
||||
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
var context = canvas.getContext('2d')
|
||||
context.fillStyle = '#fff'
|
||||
context.fillRect(0, 0, 10000, 10000)
|
||||
image.onload = function () {
|
||||
context.drawImage(image, 0, 0)
|
||||
if (type == 'imageContent') {
|
||||
window.parent.postMessage({
|
||||
act: 'imageContent',
|
||||
params: {
|
||||
name: name,
|
||||
width: width,
|
||||
height: height,
|
||||
content: canvas.toDataURL(`image/${type}`)
|
||||
}
|
||||
}, '*');
|
||||
} else {
|
||||
var a = document.createElement('a')
|
||||
a.download = `${name}.${type}`
|
||||
a.href = canvas.toDataURL(`image/${type}`)
|
||||
a.click()
|
||||
}
|
||||
}
|
||||
})(data.params.name, data.params.scale, data.params.type);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
window.parent.postMessage({
|
||||
act: 'ready',
|
||||
params: {}
|
||||
}, '*');
|
||||
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user