WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix rotation handler and drag offset

Browse Source
This commit is contained in:
raphael 2020-05-22 18:04:17 +02:00
parent a45b6f919f
commit e84189d9d8
1 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/js/whiteboard.js
View File

@ -764,6 +764,7 @@ const whiteboard = {
'<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' + '<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>' +
"</div>" + "</div>" +
'<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>' + '<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>' +
'<div class="rotationHandle" style="position:absolute; bottom: -30px; left: 0px; width:100%; text-align:center; cursor:ew-resize;"><i class="fa fa-undo"></i></div>' +
"</div>" "</div>"
); );
imgDiv.find(".xCanvasBtn").click(function () { imgDiv.find(".xCanvasBtn").click(function () {
@ -799,7 +800,21 @@ const whiteboard = {
_this.setTool(oldTool); _this.setTool(oldTool);
}); });
_this.mouseOverlay.append(imgDiv); _this.mouseOverlay.append(imgDiv);
imgDiv.draggable(); var recoupLeft, recoupTop;
imgDiv.draggable({
start: function (event, ui) {
var left = parseInt($(this).css("left"), 10);
left = isNaN(left) ? 0 : left;
var top = parseInt($(this).css("top"), 10);
top = isNaN(top) ? 0 : top;
recoupLeft = left - ui.position.left;
recoupTop = top - ui.position.top;
},
drag: function (event, ui) {
ui.position.left += recoupLeft;
ui.position.top += recoupTop;
},
});
imgDiv.resizable(); imgDiv.resizable();
var params = { var params = {
// Callback fired on rotation start. // Callback fired on rotation start.
@ -808,17 +823,9 @@ const whiteboard = {
rotate: function (event, ui) {}, rotate: function (event, ui) {},
// Callback fired on rotation end. // Callback fired on rotation end.
stop: function (event, ui) {}, stop: function (event, ui) {},
// Set the rotation center handle: imgDiv.find(".rotationHandle"),
rotationCenterOffset: {
top: 20,
left: 20,
},
transforms: {
translate: "(50%, 50%)",
scale: "(2)",
},
}; };
imgDiv.rotatable(); imgDiv.rotatable(params);
// render newly added icons // render newly added icons
dom.i2svg(); dom.i2svg();