--- 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) {
--- 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
--- 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
--- 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;
--- 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 @@
<div class="row">
<div class="col-md-6 col-md-offset-3">
- <a class="btn btn-link" href="{% url 'image_detail' collection_name image_ref %}"><i class="fa fa-plus"></i> Créer une nouvelle annotation</a>
+ <a class="btn btn-link" href="{% url 'annotation_create' collection_name image_ref %}"><i class="fa fa-plus"></i> Créer une nouvelle annotation</a>
{% thumbnail image.media "x800" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">