--- 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: {
--- 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
--- 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) {
--- 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;
}