Skip to content

Commit

Permalink
bugfix for Emucharts export image (image was erroneously misaligned b…
Browse files Browse the repository at this point in the history 
…ecause of errneous calculation of bounding box) + improved remote file browser
  • Loading branch information
@pmasci
pmasci committed Feb 23, 2016
1 parent 9c3e30e commit b2be93c
Show file tree
Hide file tree
Showing 8 changed files with 156 additions and 58 deletions.
34 changes: 27 additions & 7 deletions src/client/app/plugins/emulink/Emulink.js
View file
Expand Up @@ -46,7 +46,8 @@ define(function (require, exports, module) {
PIMEmulink = require("plugins/emulink/models/pim/PIMEmulink"),
ContextTable = require("plugins/emulink/tools/ContextTable"),
MachineStatesTable = require("plugins/emulink/tools/MachineStatesTable"),
ExportDiagram = require("plugins/emulink/tools/ExportDiagram");
ExportDiagram = require("plugins/emulink/tools/ExportDiagram"),
MIME = require("util/MIME").getInstance();

var instance;
var fs;
Expand Down Expand Up @@ -443,11 +444,7 @@ define(function (require, exports, module) {

// bootstrap buttons
function openChart(callback) {
var opt = {
header: "Open EmuChart file...",
extensions: ".emdl,.muz,.pim"
};
FileHandler.openLocalFileAsText(function (err, res) {
function doOpen(err, res) {
if (res) {
if (res.name.lastIndexOf(".emdl") === res.name.length - 5) {
res.content = JSON.parse(res.content);
Expand All @@ -464,7 +461,30 @@ define(function (require, exports, module) {
} else {
console.log("Error while opening file (" + err + ")");
}
}, opt);
}
var opt = {
header: "Open EmuChart file...",
extensions: ".emdl,.muz,.pim"
};
if (PVSioWebClient.getInstance().serverOnLocalhost()) {
return new Promise(function (resolve, reject) {
fs.readFileDialog({
encoding: "utf8",
title: opt.header,
filter: MIME.filter(opt.extensions.split(","))
}).then(function (descriptors) {
doOpen(null, descriptors[0]);
resolve(descriptors[0]);
}).catch(function (err) {
doOpen(err, null);
reject(err);
});
});
} else {
FileHandler.openLocalFileAsText(function (err, res) {
doOpen(err, res);
}, opt);
}
}
function importChart(callback) {
var opt = {
Expand Down
19 changes: 13 additions & 6 deletions src/client/app/plugins/emulink/tools/ExportDiagram.js
View file
Expand Up @@ -20,11 +20,17 @@ define(function (require, exports, module) {
var minY = (states.length > 0) ? Math.min.apply(Math, states.map(function (data) { return data.y; })) : 0;
var maxX = (states.length > 0) ? Math.max.apply(Math, states.map(function (data) { return data.x; })) : 0;
var maxY = (states.length > 0) ? Math.max.apply(Math, states.map(function (data) { return data.y; })) : 0;

var transitions = diagram.emuchartsManager.getTransitions();
var minTX = (transitions.length > 0) ? Math.min.apply(Math, transitions.map(function (data) { return data.controlPoint.x; })) : 0;
var minTY = (transitions.length > 0) ? Math.min.apply(Math, transitions.map(function (data) { return data.controlPoint.y; })) : 0;
var maxTX = (transitions.length > 0) ? Math.max.apply(Math, transitions.map(function (data) { return data.controlPoint.x; })) : 0;
var maxTY = (transitions.length > 0) ? Math.max.apply(Math, transitions.map(function (data) { return data.controlPoint.y; })) : 0;
return {
minX: minX,
maxX: maxX,
minY: minY,
maxY: maxY
minX: (minX < minTX) ? minX : minTX,
maxX: (maxX > maxTX) ? maxX : maxTX,
minY: (minY < minTY) ? minY : minTY,
maxY: (maxY > maxTY) ? maxY : maxTY
};
}

Expand Down Expand Up @@ -63,7 +69,8 @@ define(function (require, exports, module) {
var padding = 4;
var width = (opt && opt.width && opt.width > 320) ? opt.width - (padding * 2) : 320;
var rowHeight = 32;
var height = variables.length * rowHeight;
var headerHeight = 64;
var height = headerHeight + variables.length * rowHeight;
var svg = diagram.svg.append("foreignObject")
.attr("x", 10).attr("y", 10).attr("width", width).attr("height", height)
.attr("requiredExtension", "http://www.w3.org/1999/xhtml")
Expand All @@ -72,7 +79,7 @@ define(function (require, exports, module) {
svg.html(
"<div style='background-color: rgb(8, 88, 154); color: white; padding: " + padding + "px;'>Context Variables</div>" +
variables.map(function (v) {
return "<div style='padding: 2px 0 2px " + padding + "px;'>" + v.name + ": " + v.type + " = " + v.value + "</div>";
return "<div style='padding: 2px 0 2px 4px;'>" + v.name + ": " + v.type + " = " + v.value + "</div>";
}).join("")
);
return { width: width, height: height };
Expand Down
9 changes: 7 additions & 2 deletions src/client/app/plugins/prototypebuilder/PrototypeBuilder.js
View file
Expand Up @@ -21,7 +21,8 @@ define(function (require, exports, module) {
FileSystem = require("filesystem/FileSystem"),
NotificationManager = require("project/NotificationManager"),
SaveProjectChanges = require("project/forms/SaveProjectChanges"),
Descriptor = require("project/Descriptor");
Descriptor = require("project/Descriptor"),
MIME = require("util/MIME").getInstance();

var instance;
var currentProject,
Expand Down Expand Up @@ -419,7 +420,11 @@ define(function (require, exports, module) {
d3.selectAll("#btnLoadPicture").on("click", function () {
return new Promise(function (resolve, reject) {
if (PVSioWebClient.getInstance().serverOnLocalhost()) {
fs.readFileDialog({encoding: "base64", title: "Select a picture"}).then(function (descriptors) {
fs.readFileDialog({
encoding: "base64",
title: "Select a picture",
filter: MIME.imageFilter
}).then(function (descriptors) {
_prototypeBuilder.changeImage(descriptors[0].name, descriptors[0].content).then(function (res) {
renderImage(res).then(function (res) {
if (d3.select("#imageDiv svg").node() === null) {
Expand Down
80 changes: 57 additions & 23 deletions src/client/app/plugins/prototypebuilder/RemoteFileBrowser.js
View file
Expand Up @@ -43,8 +43,7 @@ define(function (require, exports, module) {
"input #baseDirectory": "onTextChanged",
"input #currentPath": "onEdit",
"click #btnHome": "selectHome",
"click #btnEdit": "enableEdit",
"click #btnUp": "goUpADirectory"
"click #btnEdit": "enableEdit"
},
onTextChanged: function (event) {
clearTimeout(timer);
Expand All @@ -53,11 +52,15 @@ define(function (require, exports, module) {
}, 100);
},
onEdit: function (event) {
//TODO
clearTimeout(timer);
timer = setTimeout(function () {
rfb.rebaseDirectory($("#currentPath").val());
}, 100);
},
selectHome: function (event) {
rfb.rebaseDirectory("~");
rfb._treeList.selectItem("~");
document.getElementById("currentPath").value = rfb.examplesFolder;
rfb.rebaseDirectory(rfb.examplesFolder);
rfb._treeList.selectItem(rfb.examplesFolder);
},
enableEdit: function (event) {
if (document.getElementById("currentPath").readOnly) {
Expand Down Expand Up @@ -90,8 +93,8 @@ define(function (require, exports, module) {
}

RemoteFileBrowser.prototype._treeList = null;

RemoteFileBrowser.prototype._baseDirectory = null;

/**
* Utility function to sort the list of files returned by the remote file browser
* @param {String} a first argument
Expand All @@ -115,6 +118,22 @@ define(function (require, exports, module) {
});
});
}

function readExamplesFolder() {
var ws = WSManager.getWebSocket();
return new Promise(function (resolve, reject) {
ws.send({ type: "readExamplesFolder" }, function (err, res) {
if (err) {
reject(err);
} else {
resolve({
files: res.files.filter(rfb.filterFunc).sort(fileSort),
examplesFolder: res.path
});
}
});
});
}

/**
* Gets the current base directory whose content is being rendered in the remote browser.
Expand All @@ -125,15 +144,14 @@ define(function (require, exports, module) {
};

RemoteFileBrowser.prototype.rebaseDirectory = function (path) {
var self = this;
getRemoteDirectory(path)
.then(function (files) {
var data = {name: path, path: path, children: files, isDirectory: true};
self._treeList.data = data;
self._treeList.render(data);
self._baseDirectory = path;
rfb._treeList.data = data;
rfb._treeList.render(data);
rfb._baseDirectory = path;
}).catch(function (err) {
self._treeList.data = [];
rfb._treeList.data = [];
});
};

Expand All @@ -159,38 +177,54 @@ define(function (require, exports, module) {
return result;
}

path = path || "~";
path = path || "";
opt = opt || {};
var view = new OpenFilesView({baseDirectory: path, title: (opt.title || "Open file")});
var self = this;
getRemoteDirectory(path)
.then(function (files) {
var data = {name: path, path: path, children: files || [], isDirectory: true};
self._treeList = new TreeList(data, "#file-browser", true);
self._treeList.addListener("SelectedItemChanged", function (event) {
// getRemoteDirectory(path)
readExamplesFolder()
.then(function (ans) {
var files = ans.files;
var path = ans.examplesFolder;
rfb.examplesFolder = ans.examplesFolder;
rfb._baseDirectory = ans.examplesFolder;
document.getElementById("currentPath").value = ans.examplesFolder;
document.getElementById("baseDirectory").value = ans.examplesFolder;
var data = { name: path, path: path, children: files || [], isDirectory: true };
rfb._treeList = new TreeList(data, "#file-browser", true);
rfb._treeList.addListener("SelectedItemChanged", function (event) {
var data = event.data,
size = data.stats ? toUserFriendlySize(data.stats.size) : "";
size = data.stats ? toUserFriendlySize(data.stats.size) : "",
modified = data.stats ? new Date(data.stats.modified).toString() : "";
document.getElementById("currentPath").value = data.path;
d3.select("#file-name").html(data.path);
d3.select("#file-size").html(size.value);
d3.select("#file-size-unit").html(size.unit);
d3.select("#file-last-modified").html(new Date(data.stats.modified).toString());
d3.select("#file-last-modified").html(modified);
//if the file is an image retrieve a preview
if (MIME.isImage(data.path)) {
WSManager.getWebSocket().readFile({path: data.path, encoding: "base64"}, function (err, res) {
if (!err) {
d3.select("#image-preview").attr("src", res.content);
d3.select("#image-preview").attr("src", res.content).style("display", "block");
}
});
}

if (data.isDirectory) {
d3.select("#file-browser").style("width", "100%");
d3.select("#file-preview").style("display", "none");
} else {
d3.select("#file-browser").style("width", "400px");
d3.select("#file-preview").style("width", "230px").style("display", "block");
}

if (data.isDirectory && !data.children && !data._children) {
getRemoteDirectory(data.path)
.then(function (files) {
data.children = files || [];
if (data.children.length === 0) {
data.empty = true;
}
self._treeList.render(data);
rfb._treeList.render(data);
}).catch(function (err) {
console.log(err);
});
Expand All @@ -204,7 +238,7 @@ define(function (require, exports, module) {
reject();
}).on("ok", function (event, view) {
clearTimeout(timer);
var selectedFiles = self._treeList.getSelectedItems();
var selectedFiles = rfb._treeList.getSelectedItems();
var firstFile = selectedFiles[0],
fileDirectory;
if (firstFile.isDirectory) {
Expand Down
20 changes: 10 additions & 10 deletions src/client/app/plugins/prototypebuilder/forms/BaseDialog.js
View file
Expand Up @@ -45,16 +45,16 @@ define(function (require, exports, module) {
});
},
keypress: function (event) {
switch (event.which) {
case 13: //enter pressed
this.ok(event);
break;
case 27: //esc pressed
this.cancel(event);
break;
default:
break;
}
// switch (event.which) {
// case 13: //enter pressed
// this.ok(event);
// break;
// case 27: //esc pressed
// this.cancel(event);
// break;
// default:
// break;
// }
},
ok: function (event) {
var form = this.el,
Expand Down
16 changes: 8 additions & 8 deletions src/client/app/plugins/prototypebuilder/forms/templates/fileBrowser.handlebars
View file
Expand Up @@ -27,22 +27,22 @@
readonly
autofocus
alt="Path of the selected element">
<!--
<span class="input-group-addon" id="btnUp" style="cursor:pointer;">
<button><span class="glyphicon glyphicon-arrow-up" alt="Up"></span></button>
</span>
-->
</div>
<div class="center">
<div id="file-browser">

</div>
<div id="file-preview" class="media">
<div class="center" style="height:320px;">
<div id="file-browser"></div>
<div id="file-preview" class="media" style="display:none;">
<div class="media-left">
<a href="#">
<img id="image-preview" class="media-object" src=""/>
<img id="image-preview" class="media-object" src="" style="display:none;"/>
</a>
</div>
<div class="media-body">
<h5 id="file-name" class="media-heading"></h5>
<div id="file-details">
<h5 id="file-name" class="media-heading" style="display:none"></h5>
<p><strong>Size </strong><span id="file-size"></span><span id="file-size-unit"></span></p>
<p><strong>Last Modified </strong><span id="file-last-modified"></span></p>
</div>
Expand Down
10 changes: 8 additions & 2 deletions src/client/css/style.css
View file
Expand Up @@ -919,6 +919,8 @@ fadeOut
height: 300px;
overflow-y: auto;
width: 100%;
height: 100%;
float:left;
}

input.input_text{
Expand Down Expand Up @@ -949,10 +951,14 @@ input.input_text{
border-top: 1px solid grey;
padding-top: 10px;
margin-top: 0 !important;
height: 100%;
padding:20px !important;
border: 1px solid;
float:right;
}
#image-preview {
max-width: 100px;
width: 100px;
max-width: 200px;
max-height: 140px;
}

#btnBuilderView.active a, #btnSimulatorView.active a{
Expand Down

0 comments on commit b2be93c

Please sign in to comment.