# HG changeset patch # User Harris Baptiste # Date 1470147571 -7200 # Node ID 7f27a0071b87aa6e1152664239a605e26424ee59 # Parent 2bfbab23b524c7c687fee1c0cd45a1465ae79763 fixing zoom handler size diff -r 2bfbab23b524 -r 7f27a0071b87 src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/Cutout.vue --- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/Cutout.vue Fri Jul 29 15:15:46 2016 +0200 +++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/Cutout.vue Tue Aug 02 16:19:31 2016 +0200 @@ -38,7 +38,8 @@ } }); this.$refs.zoomview.setZoomTarget(this.drawingComponent.getPaper()); - this.showForm(); + this.showEditor(); + this.drawingComponent.createTestHandler(10,20, 50); }, methods: { diff -r 2bfbab23b524 -r 7f27a0071b87 src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/shape-resizer.js --- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/shape-resizer.js Fri Jul 29 15:15:46 2016 +0200 +++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/shape-resizer.js Tue Aug 02 16:19:31 2016 +0200 @@ -3,10 +3,13 @@ */ import { eventEmitter } from "../utils" -var ShapeResizer = function (paper, shape) { +var ShapeResizer = function (paper, shape, vp, vb) { + console.log("inside ShapeResizer ... "); this.paper = paper; this.shape = shape; this.handlers = []; + this.viewPort = vp; + this.viewBox = vb; this.isResizing = false; this.currentPosition = {}; this.HANDLER_SIZE = 8; @@ -19,16 +22,20 @@ var api = ShapeResizer.prototype = { init: function () { - this.currentZoomFactor = {x: 1, y: 1}; this.showHandlers(); + + }, + + computeHandlerSize: function () { + return this.HANDLER_SIZE * (Math.min(this.viewBox[2], this.viewBox[3])) / this.viewPort.width; //w==h }, showHandlers: function () { /* show handler here */ var bbox = this.shape.getBBox(); - var handleX = bbox.x - this.HANDLER_SIZE/2; - var handleY = bbox.y - this.HANDLER_SIZE/2; - var handler = this.paper.rect(handleX, handleY, this.HANDLER_SIZE, this.HANDLER_SIZE).attr({fill: 'red'}); + var handleX = bbox.x - (this.computeHandlerSize()/2); + var handleY = bbox.y - (this.computeHandlerSize()/2); + var handler = this.paper.rect(handleX, handleY, this.computeHandlerSize(), this.computeHandlerSize()).attr({fill: 'red'}); handler.addClass("drawingHandler"); this.shape.addClass("drawingHandler"); var handlerInfos = {position: "t_r", handler: handler}; @@ -42,8 +49,8 @@ //start var handlerBBox = handlerData.handler.getBBox(); var shapeBBox = this.shape.data("origBbox"); - var newX = handlerBBox.x + this.HANDLER_SIZE / 2; - var newY = handlerBBox.y + this.HANDLER_SIZE / 2; + var newX = handlerBBox.x + (this.computeHandlerSize() / 2); + var newY = handlerBBox.y + (this.computeHandlerSize() / 2); /*to the right => reduce the size */ var newWidth = (dx > 0) ? shapeBBox.width - dx : shapeBBox.width + Math.abs(dx); @@ -60,19 +67,24 @@ this.currentPosition = {}; handlerData.handler.data("origTransform", handlerData.handler.transform().local); this.shape.data("origBbox", this.shape.getBBox()); + this.shape.data("origBounding", this.shape.node.getBoundingClientRect()); this.shape.data("origTransform", this.shape.transform().local); }, onMove: function (handlerData, dx, dy, x, y, e) { - dx = dx / this.currentZoomFactor.x; - dy = dy / this.currentZoomFactor.y; - var transformValue = handlerData.handler.data('origTransform') + (handlerData.handler.data('origTransform') ? "T" : "t") + [dx, dy]; + + var tdx, tdy; + var snapInvMatrix = handlerData.handler.transform().diffMatrix.invert(); + snapInvMatrix.e = snapInvMatrix.f = 0; + tdx = snapInvMatrix.x( dx,dy ); + tdy = snapInvMatrix.y( dx,dy ); + this.currentPosition.x = e.clientX; this.currentPosition.y = e.clientY; - /* deal with boundaries */ if (! this.checkBondaries(dx, dy)) { return; } - handlerData.handler.attr({ transform: transformValue}); - this.updateShapePositions(handlerData, dx, dy); + + handlerData.handler.transform( "t" + [ tdx, tdy ] + handlerData.handler.data("origTransform") ); + this.updateShapePositions(handlerData, tdx, tdy); }, onStop: function () { @@ -84,12 +96,14 @@ checkBondaries: function (dx, dy) { var result = true; + var origBounding = this.shape.data("origBounding"); + var getBoundingClientRect = this.shape.node.getBoundingClientRect(); - if (this.shape.data("origBbox").width - dx <= this.SHAPE_MIN_SIZE) { + if (origBounding.width - dx <= this.SHAPE_MIN_SIZE) { result = false; } - if (this.shape.data("origBbox").height - dy <= this.SHAPE_MIN_SIZE) { + if (origBounding.height - dy <= this.SHAPE_MIN_SIZE) { result = false; } @@ -103,6 +117,13 @@ delete this; }, + getZoomFactor: function () { + return { + x: this.viewPort.width / this.viewBox[2], + y: this.viewPort.height / this.viewBox[3] + }; + }, + attachEvents: function () { var self = this; this.handlers.map(function (handlerData) { @@ -115,16 +136,15 @@ eventEmitter.on("cutout:clear", function () { self.destroy(); }); - - eventEmitter.on("zoomChanged", function (zoomInfos) { - self.currentZoomFactor = zoomInfos.zoomFactor; - }); - + this.shapesGroup.drag(function (dx, dy) { if (self.isResizing) { return; } - dx = dx / self.currentZoomFactor.x; - dy = dy / self.currentZoomFactor.y; - var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; + var snapInvMatrix = this.transform().diffMatrix.invert(); + snapInvMatrix.e = snapInvMatrix.f = 0; + var tdx = snapInvMatrix.x( dx,dy ); + var tdy = snapInvMatrix.y( dx,dy ); + + var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy]; this.transform(transformValue); }, function () { this.data('origTransform', this.transform().local); @@ -134,7 +154,7 @@ export default { - enable_resizer : function (paper, rect) { - new ShapeResizer(paper, rect); + enable_resizer : function (paper, rect, viewPort, cViewbox) { + new ShapeResizer(paper, rect, viewPort, cViewbox); } } \ No newline at end of file diff -r 2bfbab23b524 -r 7f27a0071b87 src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/snapsvg-zoom.js --- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/snapsvg-zoom.js Fri Jul 29 15:15:46 2016 +0200 +++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/snapsvg-zoom.js Tue Aug 02 16:19:31 2016 +0200 @@ -20,7 +20,7 @@ this.disableDrag = false; this.imgMinSize = Math.min(this.imageWidth, this.imageHeight); this.lastPosition = []; - this.updateViewBox([0 , 0, this.imageWidth, this.imageHeight], false); + this.updateViewBox([0 , 0, this.imageWidth, this.imageHeight]); } testShowCenter (cx, cy) { diff -r 2bfbab23b524 -r 7f27a0071b87 src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/svgboard.js --- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/svgboard.js Fri Jul 29 15:15:46 2016 +0200 +++ b/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/svgboard.js Tue Aug 02 16:19:31 2016 +0200 @@ -18,7 +18,7 @@ }; }); -Element.prototype.getTransformedXY = function( x,y ) { +Element.prototype.getTransformedXY = function( x, y ) { var m = this.transform().globalMatrix; return { x: m.x(x,y), y: m.y(x,y) }; }; @@ -28,6 +28,8 @@ var pointData = []; var viewBoxBounds = {X: 100, Y:100}; var zoomFactor = {x:1, y:1}; +var viewPort= {width:850, height:850}; +var currentViewBox = []; var config = null; var readOnly = false; var startPoint = null; @@ -40,7 +42,7 @@ var SELECTED_COLOR = "#ffff00"; var FIRST_NODE_COLOR = "#FF0000"; -var HANDLE_SIZE = 6; +var HANDLE_SIZE = 8; var isDragged = false; var enablePoint = true; var pathIsClosed = false; @@ -73,7 +75,7 @@ drawing_path = rectZone; canDraw = false; pathIsClosed = true; - ShapeResizer.enable_resizer(paper, drawing_path); + ShapeResizer.enable_resizer(paper, drawing_path, viewPort, currentViewBox); }; @@ -132,6 +134,7 @@ drawing_path.attr({ stroke: STROKE_COLOR, + "vector-effect": "non-scaling-stroke",//prevent line to be zoom in "stroke-width": 3, fill: "white", opacity: 0.1 @@ -139,6 +142,9 @@ /* bring all handler to front */ pointData.map(function (point) { + + /*deal with handler size */ + var handleSize = computeHandleSize(); if (point.handler) { point.handler.toFront(); } @@ -185,17 +191,27 @@ drawing_path.remove(); }; +var computeHandleSize = function () { + + if(!currentViewBox.length) { + currentViewBox = [0, 0, parseInt(mainImage.width()), parseInt(mainImage.height())] + } + var currentHandleSize = HANDLE_SIZE * Math.min(currentViewBox[2], currentViewBox[3]) / 850; + return currentHandleSize; +} + var onMoveHandler = function (dx, dy, posX, posY, e) { isDragged = true; - var factorX = zoomFactor.x ? zoomFactor.x : 1; - var factorY = zoomFactor.y ? zoomFactor.y : 1; - dx = dx / factorX; - dy = dy / factorY; - var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]; + var tdx, tdy; + var snapInvMatrix = this.transform().diffMatrix.invert(); + snapInvMatrix.e = snapInvMatrix.f = 0; + tdx = snapInvMatrix.x( dx,dy ); + tdy = snapInvMatrix.y( dx,dy ); + var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy]; this.attr({ transform: transformValue}); var boxSize = this.getBBox(); - var wasUpdated = updatePointPosition(this.data('point'), boxSize.x + (HANDLE_SIZE / 2) , boxSize.y + (HANDLE_SIZE / 2)); + var wasUpdated = updatePointPosition(this.data('point'), boxSize.x + (computeHandleSize() / 2) , boxSize.y + (computeHandleSize() / 2)); if (wasUpdated) { updatePath(this.paper); @@ -223,10 +239,13 @@ var createPointHandler = function (p, point) { var handler; - var handleX = point.x - HANDLE_SIZE/2; - var handleY = point.y - HANDLE_SIZE/2; + var handleSize = computeHandleSize(); + var handleX = point.x - handleSize / 2; + var handleY = point.y - handleSize / 2; - handler = p.rect(handleX, handleY, HANDLE_SIZE, HANDLE_SIZE); + /* preserve initial size of 5px a quoi correspond 5 deal with current vp */ + handler = p.rect(handleX, handleY, handleSize, handleSize); + handler.addClass("drawingHandler"); point.handler = handler; point.handler.data('point', point); @@ -326,7 +345,7 @@ paper.mouseup(function () { if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } drawing_path = rectZone; - ShapeResizer.enable_resizer(paper, rectZone); + ShapeResizer.enable_resizer(paper, rectZone, viewPort, currentViewBox); canDraw = false; pathIsClosed = true; }); @@ -345,9 +364,15 @@ var attachZoomEvents = function () { + eventEmitter.on("zoomChanged", function (zoomInfos) { zoomFactor = zoomInfos.zoomFactor; + currentViewBox = zoomInfos.currentViewBox; + var previousPath = API.getPath(); + API.clear(); + API.setPath(previousPath); }); + } @@ -524,21 +549,11 @@ cutCanvas.css({ - /*position: 'absolute', - top: '0px', - left: '15px',*/ marginLeft: 'auto', marginRight: 'auto', - width: 850, - height: 850 + width: viewPort.width, + height: viewPort.height, }); - - /* fix the container size */ - /*jQuery(config.wrapperId).css({ - width: mainImage.attr('width'), - height: parseInt(mainImage.attr('height')) + 5 - });*/ - if (typeof config.readOnly === 'boolean' && config.readOnly === true) { readOnly = true; }