Gitlab CSE Unil

Skip to content

GitLab

Commit b445d59c authored by Julien Furrer's avatar Julien Furrer
Browse files

Changes in zoom 

Zoom is centered on the mouse pointer when done
whit the mouse wheel

Added button for 100% and fitAll in the TB, fixed
css too
parent 587a9b24
Hide whitespace changes
Inline Side-by-side
adim_app/static/_src/adim/attributes.js
View file @ b445d59c
......@@ -319,42 +319,42 @@ function (paper, Signal, view) {
/**
* Zoom the view. Scroll if needed.
* @param {Number} zoom The zoom factor 1 = 100%
* @param {Boolean} [center=false] If true, the view is scrolled in order to center the image
* @param {Object} fixedPt [offsetX, offsetY] from mouse event. If defined, the view is scrolled in order to have this point fixed
*/
function setZoom(zoom, center) {
function setZoom(zoom, fixedPt) {
var beta, pc, offset, imgLayer;
// validate params
zoom = (zoom > _maxZoom) ? _maxZoom : (zoom < _minZoom) ? _minZoom : zoom;
center = (center === true);
if (paper.project.view.zoom !== zoom) {
paper.project.view.zoom = zoom;
_imageLayer = _imageLayer || view.getLayerByName('image');
if (center && _imageLayer) {
var imgC = _imageLayer.localToGlobal(_imageLayer.bounds.center);
paper.view.scrollBy(imgC.subtract(paper.view.center));
/*
var imgS = _imageLayer.bounds.size.multiply(paper.view.zoom); // size of the image in global coordinate
var viwS = paper.view.viewSize; // size of the view in global coordinate
var p = paper.view.bounds.point;
if (paper.Size.min(imgS, viwS).equals(imgS)) {
// If the scaled image is smaller than the view, fix the top left corner
paper.view.scrollBy(p.multiply(-1).add(1));
zoom = Math.max(_minZoom, Math.min(_maxZoom, zoom));
if (paper.project.view.zoom === zoom)
return;
if (fixedPt) {
if (fixedPt === 'center') {
_imageLayer = _imageLayer || view.getLayerByName('image');
if (_imageLayer) {
offset = _imageLayer.localToGlobal(_imageLayer.bounds.center).subtract(paper.view.center);
} else {
// The scaled image is bigger thant the view
if (Math.min(p.x, p.y)<0) {
// if any coordinate is negative we have a left or top "margin", avoid this
p.x = p.x < 0 ? -p.x : 0;
p.y = p.y < 0 ? -p.y : 0;
paper.view.scrollBy(p.add(1));
}
offset = [0,0];
}
*/
} else {
fixedPt = paper.view.viewToProject(fixedPt);
// Thanks to http://matthiasberth.com/articles/stable-zoom-and-pan-in-paperjs/
beta = paper.view.zoom / zoom;
pc = fixedPt.subtract(paper.view.center);
offset = fixedPt.subtract( pc.multiply(beta) ).subtract(paper.view.center);
}
_events.zoomChanged.dispatch(zoom);
}
paper.project.view.zoom = zoom;
if (offset)
paper.view.setCenter(paper.view.center.add(offset));
_events.zoomChanged.dispatch(zoom);
}
function deltaZoom(delta) {
function deltaZoom(delta, fixedPt) {
var dMax = 20, dMin = 5; // Max and Min delta used for normalization
if (delta !== 0) {
var dVal = Math.abs(delta); // Unsigned delta
......@@ -365,7 +365,7 @@ function (paper, Signal, view) {
var zoom = paper.project.view.zoom;
zoom += paper.project.view.zoom * delta / 100;
setZoom(zoom);
setZoom(zoom, fixedPt);
}
}
......
adim_app/static/_src/adim/ui.js
View file @ b445d59c
......@@ -316,6 +316,10 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
})();
$("#but-zoom-fit").on('click', zoomFitContent);
$("#but-zoom-100").on('click', function(event) {
event.preventDefault();
attributes.setZoom(1, 'center');
});
//
// AnObj name edit
......@@ -583,8 +587,16 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
var zoomContainer = $("#attr-zoom");
var zoomInput = zoomContainer.find("input[name=zoomLevel]")
.val(100)
.on('blur', function(){
var $me = $(this);
$me.val(parseInt(parseFloat($(this).val())) + " %");
})
.on('focus', function(){
var $me = $(this);
$me.val(parseInt(parseFloat($(this).val())));
})
.on('change', function(){
var zoom = parseInt($(this).val(), 10);
var zoom = parseInt(parseFloat($(this).val()));
if (isNaN(zoom))
return;
//zoomSlider.slider('setValue', zoom);
......@@ -625,17 +637,17 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
}
else if (event.altKey || event.metaKey) {
event.preventDefault();
attributes.deltaZoom(event.deltaY / 20);
attributes.deltaZoom(event.deltaY / 20, [event.offsetX, event.offsetY]);
}
else {
event.preventDefault();
attributes.deltaZoom(event.deltaY);
attributes.deltaZoom(event.deltaY, [event.offsetX, event.offsetY]);
}
});
attributes.events.zoomChanged.add(function(zoomPC){
var zoom = Math.floor(zoomPC * 100);
zoomInput.val(zoom);
zoomInput.val(zoom + " %");
zoomSlider.slider('setValue', zoom);
});
......@@ -646,8 +658,8 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
// Auto adjust zoom to fit content
var imageLayer = view.getLayerByName('image');
var raster = imageLayer.children[1];
var s = paper.view.size.divide(raster.size);
attributes.setZoom(Math.min(s.width, s.height), true);
var s = paper.view.viewSize.divide(raster.size);
attributes.setZoom(Math.min(s.width, s.height), 'center');
paper.view.draw();
}
......@@ -1061,7 +1073,6 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
* @param event
*/
function onPropertyBlur(event) {
//console.log(event);
}
......
adim_app/static/_src/less/adim.css
View file @ b445d59c
......@@ -808,7 +808,7 @@ canvas {
}
#canvas-bbar #attr-zoom .input-group {
float: left;
width: 65px;
width: 95px;
}
#canvas-bbar #attr-zoom .input-group .form-control,
#canvas-bbar #attr-zoom .input-group .input-group-addon {
......@@ -1276,7 +1276,8 @@ canvas.cursor-tool-concordantstr {
canvas.cursor-tool-discordantstr {
cursor: crosshair;
}
canvas.cursor-tool-arrow {
canvas.cursor-tool-arrow,
canvas.cursor-tool-arrow2 {
cursor: crosshair;
}
.nav .nav-divider {
......
adim_app/static/_src/less/adim.less
View file @ b445d59c
......@@ -479,7 +479,7 @@ canvas {
#attr-zoom {
.input-group {
float: left;
width: 65px;
width: 95px;
.form-control, .input-group-addon {
font-size: 12px;
......@@ -1113,7 +1113,7 @@ canvas {
&.cursor-tool-discordantstr {
cursor: crosshair;
}
&.cursor-tool-arrow {
&.cursor-tool-arrow, &.cursor-tool-arrow2 {
cursor: crosshair;
}
cursor: default;
......
adim_app/templates/adim_app/base_annotation.html
View file @ b445d59c
......@@ -292,10 +292,14 @@ if (t === "light") {
<label>Zoom: &nbsp;</label>
<div class="input-group">
<input type="text" size="3" class="form-control" name="zoomLevel">
<span class="input-group-addon" style="border-left:none">%</span>
{# <span class="input-group-addon btn" title="Zoom pour afficher toute l'image" id="but-zoom-fit"><span class="glyphicon glyphicon-resize-small"></span></span> #}
<span class="input-group-addon btn" style="border-left:none" title="Zoom 100%" id="but-zoom-100">
<small>1:1</small>
</span>
<span class="input-group-addon btn" title="Zoom pour afficher toute l'image" id="but-zoom-fit">
<span class="icon-resize"></span>
</span>
</div>
<div class="sldr">
<div class="sldr pull-left">
<input type="text" class="slider" value="100" data-attr-name="zoom" autocomplete="off"
data-slider-min="10" data-slider-max="800" data-slider-value="100">
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment