Skip to content

Commit

Permalink
Fixed a couple of issue with the gcode viewer
Browse files Browse the repository at this point in the history 
Most notably the interfering options tracked in #398, but also made "Center viewport on model" and "Zoom in on model" automatically deselect and de-apply if viewport gets manipulated by user, therefore properly allowing the re-select by the user to work to.

Closes #398
  • Loading branch information
@foosel
foosel committed Aug 8, 2014
1 parent 6474f25 commit f195af0
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 25 deletions.
122 changes: 99 additions & 23 deletions src/octoprint/static/gcodeviewer/js/renderer.js
View file
Expand Up @@ -47,7 +47,9 @@ GCODE.renderer = (function(){
invertAxes: {x: false, y: false},

bed: {x: 200, y: 200},
container: undefined
container: undefined,

onInternalOptionChange: undefined
};

var offsetModelX = 0, offsetModelY = 0;
Expand Down Expand Up @@ -142,45 +144,107 @@ GCODE.renderer = (function(){
ctx.lineCap = 'round';
trackTransforms(ctx);

canvas.addEventListener('mousedown',function(evt){
// dragging => translating
canvas.addEventListener('mousedown', function(event){
document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
dragStart = ctx.transformedPoint(lastX,lastY);

// remember starting point of dragging gesture
lastX = event.offsetX || (event.pageX - canvas.offsetLeft);
lastY = event.offsetY || (event.pageY - canvas.offsetTop);
dragStart = ctx.transformedPoint(lastX, lastY);

// not yet dragged anything
dragged = false;
},false);
canvas.addEventListener('mousemove',function(evt){
lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
}, false);

canvas.addEventListener('mousemove', function(event){
// save current mouse coordinates
lastX = event.offsetX || (event.pageX - canvas.offsetLeft);
lastY = event.offsetY || (event.pageY - canvas.offsetTop);

// mouse movement => dragged
dragged = true;
if (dragStart){

if (dragStart !== undefined){
// translate
var pt = ctx.transformedPoint(lastX,lastY);
ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);
reRender();

renderOptions["centerViewport"] = false;
renderOptions["zoomInOnModel"] = false;
renderOptions["zoomInOnBed"] = false;
offsetModelX = 0;
offsetModelY = 0;
offsetBedX = 0;
offsetBedY = 0;
scaleX = 1;
scaleY = 1;

if (renderOptions["onInternalOptionChange"] !== undefined) {
renderOptions["onInternalOptionChange"]({
centerViewport: false,
moveModel: false,
zoomInOnModel: false,
zoomInOnBed: false
});
}
}
},false);
canvas.addEventListener('mouseup',function(evt){
dragStart = null;
if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
},false);
}, false);

canvas.addEventListener('mouseup', function(event){
// reset dragStart
dragStart = undefined;
}, false);

// mouse wheel => zooming
var zoom = function(clicks){
var pt = ctx.transformedPoint(lastX,lastY);
// focus on last mouse position prior to zoom
var pt = ctx.transformedPoint(lastX, lastY);
ctx.translate(pt.x,pt.y);

// determine zooming factor and perform zoom
var factor = Math.pow(scaleFactor,clicks);
ctx.scale(factor,factor);

// return to old position
ctx.translate(-pt.x,-pt.y);

// render
reRender();

// disable conflicting options
renderOptions["zoomInOnModel"] = false;
renderOptions["zoomInOnBed"] = false;
offsetModelX = 0;
offsetModelY = 0;
offsetBedX = 0;
offsetBedY = 0;
scaleX = 1;
scaleY = 1;

if (renderOptions["onInternalOptionChange"] !== undefined) {
renderOptions["onInternalOptionChange"]({
zoomInOnModel: false,
zoomInOnBed: false
});
}
};
var handleScroll = function(evt){
var handleScroll = function(event){
var delta;
if(evt.detail<0 || evt.wheelDelta>0)delta=zoomFactorDelta;
else delta=-1*zoomFactorDelta;

// determine zoom direction & delta
if (event.detail < 0 || event.wheelDelta > 0) {
delta = zoomFactorDelta;
} else {
delta = -1 * zoomFactorDelta;
}
if (delta) zoom(delta);
return evt.preventDefault() && false;

return event.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false);
canvas.addEventListener('mousewheel',handleScroll,false);

};

var drawGrid = function() {
Expand Down Expand Up @@ -448,8 +512,13 @@ GCODE.renderer = (function(){
};

var applyZoom = function(mdlInfo) {
// get middle of canvas
var pt = ctx.transformedPoint(canvas.width/2,canvas.height/2);

// get current transform
var transform = ctx.getTransform();

// move to middle of canvas, reset scale, move back
if (scaleX && scaleY && transform.a && transform.d) {
ctx.translate(pt.x, pt.y);
ctx.scale(1 / scaleX, 1 / scaleY);
Expand All @@ -458,6 +527,7 @@ GCODE.renderer = (function(){
}

if (mdlInfo && renderOptions["zoomInOnModel"]) {
// if we need to zoom in on model, scale factor is calculated by longer side of object in relation to that axis of canvas
var scaleF = mdlInfo.modelSize.x > mdlInfo.modelSize.y ? (canvas.width - 10) / mdlInfo.modelSize.x : (canvas.height - 10) / mdlInfo.modelSize.y;
scaleF /= zoomFactor;
if (transform.a && transform.d) {
Expand All @@ -468,6 +538,7 @@ GCODE.renderer = (function(){
ctx.translate(-pt.x, -pt.y);
}
} else {
// reset scale to 1
scaleX = 1;
scaleY = 1;
}
Expand All @@ -477,18 +548,23 @@ GCODE.renderer = (function(){
var width = canvas.width - 10;
var height = canvas.height - 10;

// de-invert
if (currentInvertX || currentInvertY) {
ctx.scale(currentInvertX ? -1 : 1, currentInvertY ? -1 : 1);
ctx.translate(currentInvertX ? -width : 0, currentInvertY ? height : 0);
}

// get settings
var invertX = renderOptions["invertAxes"]["x"];
var invertY = renderOptions["invertAxes"]["y"];

// invert
if (invertX || invertY) {
ctx.translate(invertX ? width : 0, invertY ? -height : 0);
ctx.scale(invertX ? -1 : 1, invertY ? -1 : 1);
}

// save for later
currentInvertX = invertX;
currentInvertY = invertY;
};
Expand Down Expand Up @@ -530,7 +606,7 @@ GCODE.renderer = (function(){

dirty = true;
renderOptions[opt] = options[opt];
if ($.inArray(opt, ["moveModel", "centerViewport", "zoomInOnModel", "bed", "invertAxes"])) {
if ($.inArray(opt, ["moveModel", "centerViewport", "zoomInOnModel", "bed", "invertAxes"]) > -1) {
mustRefresh = true;
}
}
Expand Down
20 changes: 18 additions & 2 deletions src/octoprint/static/js/app/viewmodels/gcode.js
View file
Expand Up @@ -60,7 +60,8 @@ function GcodeViewModel(loginStateViewModel, settingsViewModel) {
extrusionWidth: self.renderer_extrusionWidthEnabled() ? self.renderer_extrusionWidth() : 1,
showNextLayer: self.renderer_showNext(),
showPreviousLayer: self.renderer_showPrevious(),
zoomInOnModel: self.renderer_zoomOnModel()
zoomInOnModel: self.renderer_zoomOnModel(),
onInternalOptionChange: self._onInternalRendererOptionChange
};
if (additionalRendererOptions) {
_.extend(renderer, additionalRendererOptions);
Expand Down Expand Up @@ -172,7 +173,7 @@ function GcodeViewModel(loginStateViewModel, settingsViewModel) {

self.clear = function() {
GCODE.ui.clear();
}
};

self._configureLayerSlider = function() {
self.layerSlider = $("#gcode_slider_layers").slider({
Expand Down Expand Up @@ -370,6 +371,20 @@ function GcodeViewModel(loginStateViewModel, settingsViewModel) {
}
};

self._onInternalRendererOptionChange = function(options) {
if (!options) return;

for (var opt in options) {
if (opt == "zoomInOnModel" && options[opt] != self.renderer_zoomOnModel()) {
self.renderer_zoomOnModel(false);
} else if (opt == "centerViewport" && options[opt] != self.renderer_centerViewport()) {
self.renderer_centerViewport(false);
} else if (opt == "moveModel" && options[opt] != self.renderer_centerModel()) {
self.renderer_centerModel(false);
}
}
};

self.changeLayer = function(event) {
if (self.currentlyPrinting && self.renderer_syncProgress()) self.renderer_syncProgress(false);

Expand All @@ -389,4 +404,5 @@ function GcodeViewModel(loginStateViewModel, settingsViewModel) {

GCODE.ui.changeSelectedCommands(self.layerSlider.slider("getValue"), tuple[0], tuple[1]);
};

}

0 comments on commit f195af0

Please sign in to comment.