# HG changeset patch # User Harris Baptiste # Date 1466763493 -7200 # Node ID 3ed91fed6dd838420aa3193314adf9bb2dfeed6e # Parent e34b70a00488fde355eaf4bf6f6abfe3c73c2845 adding list diff -r e34b70a00488 -r 3ed91fed6dd8 src/iconolab/static/iconolab/js/components/cutout/index.js --- a/src/iconolab/static/iconolab/js/components/cutout/index.js Thu Jun 23 17:27:44 2016 +0200 +++ b/src/iconolab/static/iconolab/js/components/cutout/index.js Fri Jun 24 12:18:13 2016 +0200 @@ -16,6 +16,11 @@ }; }); +Element.prototype.getTransformedXY = function( x,y ) { + var m = this.transform().globalMatrix; + return { x: m.x(x,y), y: m.y(x,y) }; + }; + var paper = null; var mainImage = null; var pointData = []; @@ -414,14 +419,26 @@ var path = ""; if (drawing_path) { if (drawingMode === RECT_MODE) { - path = Snap.path.toAbsolute(drawing_path.realPath).toString(); - var parentMatrix = drawing_path.transform(); - console.log("local Matrix", drawing_path.transform()); - console.log("drawing_path", drawing_path.getBBox()); - console.log("chemin...", path); + var bBox = drawing_path.getBBox(); + var transform = drawing_path.transform(); + + if (!transform.global.length) { + var shapePath = drawing_path.getBBox().path; + } + + else { - paper.path(path); - console.log("...radical blaze...", drawing_path); + var shapeX = drawing_path.node.getAttribute('x'); + var shapeY = drawing_path.node.getAttribute('y'); + + var transformMatrix = transform.globalMatrix; + var fakeShape = paper.rect(transformMatrix.x(shapeX, shapeY),transformMatrix.y(shapeX, shapeY), bBox.width, bBox.height); + shapePath = fakeShape.getBBox().path; + fakeShape.remove(); + } + + path = Snap.path.toAbsolute(shapePath).toString(); + } else { path = drawing_path.attr('d'); @@ -441,6 +458,7 @@ var normalizeMatrix = Snap.matrix(xRatio, 0, 0, yRatio, 0, 0); path = Snap.path.map(path, normalizeMatrix).toString(); + /* save the type */ var type = (drawingMode === RECT_MODE) ? ";RECT" : ";FREE"; if (path.search(/[z|Z]/gi) === -1) { diff -r e34b70a00488 -r 3ed91fed6dd8 src/iconolab/static/iconolab/js/components/egonomy-cutout/index.js --- a/src/iconolab/static/iconolab/js/components/egonomy-cutout/index.js Thu Jun 23 17:27:44 2016 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,287 +0,0 @@ - -var initCutout = funtion () { - var $ = jQuery; - - var startPath = $(".fragment-path").val(); - - var PATHCOLOR = "#ff00ff", - SELECTEDCOLOR = "#ffff00", - HANDLESIZE = 6; - - var jqs = $(".cutout-canvas"), - offset = jqs.offset(), - paper = new Raphael(jqs[0]), - closed = false, - rectangleMode = false, - closeTimeout, - points = []; - - paper.rect(0, 0, paper.width, paper.height) - .attr({ - stroke: "none", - fill: "#fff", - "fill-opacity": .01 - }) - .click(clickAddPoint) - .drag( - function(dx, dy, mx, my) { - - if (dx*dx+dy*dy < 4) { - return; - } - - if (!pathDragging) { - clearTimeout(closeTimeout); - closed = true; - resetPoints(); - for (var i = 0; i < 4; i++) { - addPoint(mx - offset.left, my - offset.top) - } - redrawPath(); - pathDragging = true; - rectangleMode = true; - } - - var x = mx - offset.left, - y = my - offset.top; - points[1].x = points[2].x = x; - points[2].y = points[3].y = y; - redrawPath(); - }, - function(mx, my) { - pathDragging = false; - }, - function() { - setTimeout(function() { - pointDragging = false; - },0); - } - ); - - function resetPoints() { - rectangleMode = false; - points.forEach(function(p) { - p.handle.remove(); - }); - points = []; - } - - function addPoint(x, y) { - - var dragdeltax, dragdeltay, pointDragging, - point = { - x: Math.floor(x), - y: Math.floor(y) - } - - var pointsWithSameX = [], pointsWithSameY = []; - - var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE) - .attr({ - stroke: PATHCOLOR, - fill: PATHCOLOR, - "fill-opacity": .3 - }) - .hover(shapeMouseOver, shapeMouseOut) - .drag( - function(dx, dy) { - pointDragging = true; - point.x = dx + dragdeltax; - point.y = dy + dragdeltay; - if (rectangleMode) { - pointsWithSameX.forEach(function(p) { - p.x = point.x; - }); - pointsWithSameY.forEach(function(p) { - p.y = point.y; - }); - } - redrawPath(); - }, - function() { - dragdeltax = point.x; - dragdeltay = point.y; - if (rectangleMode) { - pointsWithSameX = points.filter(function(p) { - return p !== point && p.x === point.x; - }); - pointsWithSameY = points.filter(function(p) { - return p !== point && p.y === point.y; - }); - } - }, - function() { - setTimeout(function() { - pointDragging = false; - shapeMouseOut(pointrect); - },0); - } - ) - .click(function() { - if (pointDragging) { - return; - } - this.remove(); - points = points.filter(function(p) { - return p != point; - }); - redrawPath(); - }); - - point.handle = pointrect; - - points.push(point); - - } - - function clickAddPoint(e, mx, my) { - - if (pathDragging) { - return; - } - - if (rectangleMode) { - resetPoints(); - } - - clearTimeout(closeTimeout); - closed = false; - - addPoint(mx - offset.left, my - offset.top); - - redrawPath(); - - closeTimeout = setTimeout(function() { - closed = true; - redrawPath(); - }, 1000) - - } - - function shapeMouseOver() { - points.forEach(function(point) { - if (point.handle !== this) { - point.handle.attr({ - stroke: PATHCOLOR, - fill: PATHCOLOR - }); - } - }); - if (this !== path) { - path.attr({ - stroke: PATHCOLOR, - fill: PATHCOLOR - }); - } - this.attr({ - stroke: SELECTEDCOLOR, - fill: SELECTEDCOLOR - }); - } - - function shapeMouseOut() { - if (pathDragging || !this || !this.attr) { - return; - } - this.attr({ - stroke: PATHCOLOR, - fill: PATHCOLOR - }); - } - - function redrawPath() { - var d = "M" - + points.map(function(p) { return p.x + " " + p.y }).join("L") - + (closed ? "Z" : ""); - path.attr({ - path: d - }); - points.forEach(function(point) { - point.handle.attr({ - x: point.x - HANDLESIZE / 2, - y: point.y - HANDLESIZE / 2 - }); - }); - var transd = "M" - + points.map(function(p) { return (p.x / paper.width).toString().replace(/(\.\d{4})\d*/,"$1") + " " + (p.y / paper.height).toString().replace(/(\.\d{4})\d*/,"$1") }).join("L") - + "Z"; - $(".fragment-path").val(transd).change(); - } - - var dragdeltax, dragdeltay, pathDragging; - - var path = paper.path() - .attr({ - stroke: PATHCOLOR, - fill: PATHCOLOR, - "fill-opacity": .1 - }) - .click(clickAddPoint) - .hover(shapeMouseOver, shapeMouseOut) - .drag( - function(dx, dy) { - pathDragging = true; - points.forEach(function(point) { - point.x += dx - dragdeltax; - point.y += dy - dragdeltay; - }); - dragdeltax = dx; - dragdeltay = dy; - redrawPath(); - }, - function() { - dragdeltax = 0; - dragdeltay = 0; - }, - function() { - setTimeout(function() { - pathDragging = false; - shapeMouseOut(path); - },0); - } - ); - - $(".clear-fragment").click(function() { - resetPoints(); - redrawPath(); - return false; - }); - - function revertPath() { - startPath.split(/\s*[A-Z]\s*/).forEach(function(coords) { - xy = coords.split(/[\s,]/); - if (xy.length === 2) { - addPoint(paper.width * parseFloat(xy[0]), paper.height * parseFloat(xy[1])); - } - }); - - if (points.length) { - closed = true; - } - - if ( - points.length === 4 - && points[0].x === points[3].x - && points[0].y === points[1].y - && points[1].x === points[2].x - && points[2].y === points[3].y - ) { - rectangleMode = true; - } - - redrawPath(); - } - - revertPath(); - - $(".reset-fragment").click(function() { - resetPoints(); - revertPath(); - return false; - }); - -}; - -module.export = { - initCutout: initCutout -} \ No newline at end of file diff -r e34b70a00488 -r 3ed91fed6dd8 src/iconolab/static/iconolab/js/components/snapplugins/index.js --- a/src/iconolab/static/iconolab/js/components/snapplugins/index.js Thu Jun 23 17:27:44 2016 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,1 +0,0 @@ -/* Snap svg box resizer plugins */ \ No newline at end of file diff -r e34b70a00488 -r 3ed91fed6dd8 src/iconolab/static/iconolab/js/dist/bundle.js --- a/src/iconolab/static/iconolab/js/dist/bundle.js Thu Jun 23 17:27:44 2016 +0200 +++ b/src/iconolab/static/iconolab/js/dist/bundle.js Fri Jun 24 12:18:13 2016 +0200 @@ -83,6 +83,11 @@ }; }); + Element.prototype.getTransformedXY = function( x,y ) { + var m = this.transform().globalMatrix; + return { x: m.x(x,y), y: m.y(x,y) }; + }; + var paper = null; var mainImage = null; var pointData = []; @@ -481,14 +486,26 @@ var path = ""; if (drawing_path) { if (drawingMode === RECT_MODE) { - path = Snap.path.toAbsolute(drawing_path.realPath).toString(); - var parentMatrix = drawing_path.transform(); - console.log("local Matrix", drawing_path.transform()); - console.log("drawing_path", drawing_path.getBBox()); - console.log("chemin...", path); - - paper.path(path); - console.log("...radical blaze...", drawing_path); + var bBox = drawing_path.getBBox(); + var transform = drawing_path.transform(); + + if (!transform.global.length) { + var shapePath = drawing_path.getBBox().path; + } + + else { + + var shapeX = drawing_path.node.getAttribute('x'); + var shapeY = drawing_path.node.getAttribute('y'); + + var transformMatrix = transform.globalMatrix; + var fakeShape = paper.rect(transformMatrix.x(shapeX, shapeY),transformMatrix.y(shapeX, shapeY), bBox.width, bBox.height); + shapePath = fakeShape.getBBox().path; + fakeShape.remove(); + } + + path = Snap.path.toAbsolute(shapePath).toString(); + } else { path = drawing_path.attr('d'); @@ -508,6 +525,7 @@ var normalizeMatrix = Snap.matrix(xRatio, 0, 0, yRatio, 0, 0); path = Snap.path.map(path, normalizeMatrix).toString(); + /* save the type */ var type = (drawingMode === RECT_MODE) ? ";RECT" : ";FREE"; if (path.search(/[z|Z]/gi) === -1) { @@ -575,7 +593,7 @@ /* 2 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;/*** IMPORTS FROM imports-loader ***/ + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_LOCAL_MODULE_0__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*** IMPORTS FROM imports-loader ***/ (function() { var fix = module.exports=0; diff -r e34b70a00488 -r 3ed91fed6dd8 src/iconolab/templates/iconolab/detail_image.html --- a/src/iconolab/templates/iconolab/detail_image.html Thu Jun 23 17:27:44 2016 +0200 +++ b/src/iconolab/templates/iconolab/detail_image.html Fri Jun 24 12:18:13 2016 +0200 @@ -10,7 +10,7 @@
- Créer une nouvelle annotation + Créer une nouvelle annotation {% thumbnail image.media "x800" crop="center" as im %}