--- a/src/iconolab/templates/iconolab/fragment_draw.html Tue Jun 07 11:43:56 2016 +0200
+++ b/src/iconolab/templates/iconolab/fragment_draw.html Tue Jun 07 17:57:08 2016 +0200
@@ -13,10 +13,9 @@
<div id="drawing-zone" style="padding-top: 10px">
<p class="pullright"><a href='javascript:;'>Retour</a></p>
-
<div class='col-md-2'>
<ul class='form-drawing-wrapper list-inline'>
- <p class='form-drawing pullright'><strong>Formes</strong></p>
+ <p class='form-drawing pullright'><strong>Sélection</strong></p>
<li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
<li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
</ul>
@@ -52,43 +51,49 @@
<script>
var drawingVue = new Vue({
el: '#drawing-zone',
- MODE_RECT: 'RECTANGLE',
- MODE_FREE: 'FREE',
-
+ MODE_RECT: 'RECT',
+ MODE_FREE: 'FREE',
+
data: {
- mode: this.MODE_RECT,
+ mode:"",
isRect: true,
},
init: function () {
+ this.mode = this.$options.MODE_RECT;
+ this.drawingComponent = iconolab.initCutoutComponent({
+ wrapperId: '#iconolab-image-wrapper',
+ actionWrapper: '#action-wrapper'
+ });
+
+ console.log("mode", this.mode);
+ this.drawingComponent.setMode(this.mode);
},
methods: {
setRectangleMode: function () {
- this.mode = this.MODE_RECT;
+ this.mode = this.$options.MODE_RECT;
this.isRect = true;
+ this.drawingComponent.setMode(this.mode);
+ console.log("mode", this.mode);
},
setFreeMode: function () {
- this.mode = this.MODE_FREE;
+ this.mode = this.$options.MODE_FREE;
this.isRect = false;
+ this.drawingComponent.setMode(this.mode);
},
save: function () {
- alert("...save the drawing...");
+ console.log('drawingPath', this.drawingComponent.getPath());
},
clear: function () {
- alert('res');
+ this.drawingComponent.clear();
}
}
});
-
- iconolab.initCutoutComponent({
- wrapperId: '#iconolab-image-wrapper',
- actionWrapper: '#action-wrapper'
- });
</script>
{% endblock %}
\ No newline at end of file
--- a/src/static/iconolab/js/components/cutout/index.js Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/components/cutout/index.js Tue Jun 07 17:57:08 2016 +0200
@@ -19,6 +19,8 @@
var config = null;
var startPoint = null;
var drawing_path = null;
+var canDraw = false;
+var rectZone = null;
var PATH_COLOR = "#ff00ff";
var SELECTED_COLOR = "#ffff00";
var FIRST_NODE_COLOR = "#FF0000";
@@ -27,7 +29,9 @@
var enablePoint = true;
var pathIsClosed = false;
var ENABLE_NEW_NODE = true;
-var mode = "rect"; //free
+var RECT_MODE ='RECT';
+var drawingMode = RECT_MODE; //free
+var FREE_MODE = 'FREE';
var getId = (function () {
var cpt = 0;
@@ -102,9 +106,6 @@
jQuery("#action-wrapper").show();
};
-var drawRectangle = function () {
- //draw rectangle point and draw
-}
var onClickOnHandler = function (point, p, e) {
//close path
@@ -186,14 +187,9 @@
return point;
}
-var setPath = function () {
-
-}
-
//create paper
var createPoint = function (paper, x, y, pointData) {
- console.log("... Inside createPoint ... ");
var point = {x:x, y:y, id: getId()};
/**/
@@ -206,42 +202,34 @@
enablePoint = true;
return false;
}
-
+
point = createPointHandler(paper, point);
pointData.push(point);
updatePath(paper);
};
-var createFragment = function () {
-}
-
-/* remove previous points */
-var reset = function () {
- console.log(pathIsClosed);
- console.log("radical blaze");
-}
-var attachEvents = function (paper) {
+var attachRectEvents = function (paper) {
var startPosition = {};
var currentPosition = {};
- var zone = null;
- var canDraw = false;
+ /* add resizer */
paper.mousedown(function (e) {
+ if (drawingMode === FREE_MODE || pathIsClosed) { return; }
startPosition.x = e.offsetX;
startPosition.y = e.offsetY;
canDraw = true;
- var startPoint = paper.rect(currentPosition.x, currentPosition.y, 6, 6);
- startPoint.attr({stroke:'yellow'});
});
paper.mousemove(function (e) {
+ if (drawingMode === FREE_MODE) { return; }
+ if (!canDraw) { return; }
+ var x, y;
currentPosition.x = e.offsetX;
currentPosition.y = e.offsetY;
- if (!canDraw) { return; }
- if (zone) {
- zone.remove();
+ if (rectZone) {
+ rectZone.remove();
}
/* bas -> droite */
@@ -270,18 +258,76 @@
x = currentPosition.x
y = currentPosition.y - height;
}
-
- zone = paper.rect(x, y, width, height);
- zone.attr({opacity: 0.4});
- zone.drag();
+ if(!x || !y) { return; }
+ rectZone = paper.rect(x, y, width, height);
+ rectZone.attr({opacity: 0.4});
});
paper.mouseup(function () {
+ if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
+ rectZone.drag();
canDraw = false;
+ pathIsClosed = true;
+ });
+};
+
+var attachPointEvents = function (paper) {
+
+ paper.click( function(e) {
+ if (drawingMode === RECT_MODE) {
+ return true;
+ }
+
+ if (!ENABLE_NEW_NODE) { return true; }
+ createPoint(paper, e.offsetX, e.offsetY, pointData);
});
-}
+};
+
+var API = {
+
+ setMode: function (mode) {
+ var availableMode = ['RECT', 'FREE'];
+ console.log("undefined", mode);
+ if (availableMode.indexOf(mode) !== -1) {
+ drawingMode = mode;
+ }
+ this.clear();
+ },
+
+ clear: function () {
+ /* clear previous path, point, handler */
+ pointData.map(function (point) {
+ if (point.handler) {
+ point.handler.remove();
+ }
+ });
+ /*clear path is exists*/
+ if (drawing_path) {
+ drawing_path.remove();
+ }
+
+ if (rectZone) {
+ rectZone.remove();
+ }
+
+ pointData = [];
+ startPoint = null;
+ drawing_path = null;
+ isDragged = false;
+ enablePoint = true;
+ pathIsClosed = false;
+ ENABLE_NEW_NODE = true;
+ /* clear path */
+
+ },
+
+ getPath: function () {
+ /* retourne le chemin */
+ console.log();
+ }
+};
module.exports = {
@@ -316,17 +362,10 @@
paper = new Snap(cutCanvas.get(0));
- /* handleEvents */
- jQuery(config.actionWrapper).on("click", ".create", function () { alert("Kotew te ye...");});
- jQuery(config.actionWrapper).on("click", ".delete", function () { alert("delete..."); });
+ /* handle drawin here */
+ attachPointEvents(paper);
+ attachRectEvents(paper);
- /* show path, init the drawing module*/
- paper.click( function(e) {
- if (!ENABLE_NEW_NODE) { return true; }
- createPoint(paper, e.offsetX, e.offsetY, pointData);
- });
-
- /* handle drawin here */
- attachEvents(paper);
+ return API;
},
};
\ No newline at end of file
--- a/src/static/iconolab/js/components/cutout/save.js Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/components/cutout/save.js Tue Jun 07 17:57:08 2016 +0200
@@ -196,9 +196,6 @@
return point;
}
-var setPath = function () {
-
-}
//create paper
var createPoint = function (paper, x, y, pointData) {
@@ -222,13 +219,8 @@
updatePath(paper);
};
-var createFragment = function () {
-
-}
/* remove previous points */
-
-
module.exports = {
init: function(config) {
--- a/src/static/iconolab/js/dist/bundle.js Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/dist/bundle.js Tue Jun 07 17:57:08 2016 +0200
@@ -89,6 +89,8 @@
var config = null;
var startPoint = null;
var drawing_path = null;
+ var canDraw = false;
+ var rectZone = null;
var PATH_COLOR = "#ff00ff";
var SELECTED_COLOR = "#ffff00";
var FIRST_NODE_COLOR = "#FF0000";
@@ -97,7 +99,9 @@
var enablePoint = true;
var pathIsClosed = false;
var ENABLE_NEW_NODE = true;
- var mode = "rect"; //free
+ var RECT_MODE ='RECT';
+ var drawingMode = RECT_MODE; //free
+ var FREE_MODE = 'FREE';
var getId = (function () {
var cpt = 0;
@@ -172,9 +176,6 @@
jQuery("#action-wrapper").show();
};
- var drawRectangle = function () {
- //draw rectangle point and draw
- }
var onClickOnHandler = function (point, p, e) {
//close path
@@ -256,14 +257,9 @@
return point;
}
- var setPath = function () {
-
- }
-
//create paper
var createPoint = function (paper, x, y, pointData) {
- console.log("... Inside createPoint ... ");
var point = {x:x, y:y, id: getId()};
/**/
@@ -276,42 +272,34 @@
enablePoint = true;
return false;
}
-
+
point = createPointHandler(paper, point);
pointData.push(point);
updatePath(paper);
};
- var createFragment = function () {
-
- }
-
- /* remove previous points */
- var reset = function () {
- console.log(pathIsClosed);
- console.log("radical blaze");
- }
- var attachEvents = function (paper) {
+
+ var attachRectEvents = function (paper) {
var startPosition = {};
var currentPosition = {};
- var zone = null;
- var canDraw = false;
+ /* add resizer */
paper.mousedown(function (e) {
+ if (drawingMode === FREE_MODE || pathIsClosed) { return; }
startPosition.x = e.offsetX;
startPosition.y = e.offsetY;
canDraw = true;
- var startPoint = paper.rect(currentPosition.x, currentPosition.y, 6, 6);
- startPoint.attr({stroke:'yellow'});
});
paper.mousemove(function (e) {
+ if (drawingMode === FREE_MODE) { return; }
+ if (!canDraw) { return; }
+ var x, y;
currentPosition.x = e.offsetX;
currentPosition.y = e.offsetY;
- if (!canDraw) { return; }
- if (zone) {
- zone.remove();
+ if (rectZone) {
+ rectZone.remove();
}
/* bas -> droite */
@@ -340,18 +328,76 @@
x = currentPosition.x
y = currentPosition.y - height;
}
-
- zone = paper.rect(x, y, width, height);
- zone.attr({opacity: 0.4});
- zone.drag();
+ if(!x || !y) { return; }
+ rectZone = paper.rect(x, y, width, height);
+ rectZone.attr({opacity: 0.4});
});
paper.mouseup(function () {
+ if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
+ rectZone.drag();
canDraw = false;
+ pathIsClosed = true;
+ });
+ };
+
+ var attachPointEvents = function (paper) {
+
+ paper.click( function(e) {
+ if (drawingMode === RECT_MODE) {
+ return true;
+ }
+
+ if (!ENABLE_NEW_NODE) { return true; }
+ createPoint(paper, e.offsetX, e.offsetY, pointData);
});
- }
-
+ };
+
+ var API = {
+
+ setMode: function (mode) {
+ var availableMode = ['RECT', 'FREE'];
+ console.log("undefined", mode);
+ if (availableMode.indexOf(mode) !== -1) {
+ drawingMode = mode;
+ }
+ this.clear();
+ },
+
+ clear: function () {
+ /* clear previous path, point, handler */
+ pointData.map(function (point) {
+ if (point.handler) {
+ point.handler.remove();
+ }
+ });
+
+ /*clear path is exists*/
+ if (drawing_path) {
+ drawing_path.remove();
+ }
+
+ if (rectZone) {
+ rectZone.remove();
+ }
+
+ pointData = [];
+ startPoint = null;
+ drawing_path = null;
+ isDragged = false;
+ enablePoint = true;
+ pathIsClosed = false;
+ ENABLE_NEW_NODE = true;
+ /* clear path */
+
+ },
+
+ getPath: function () {
+ /* retourne le chemin */
+ console.log();
+ }
+ };
module.exports = {
@@ -386,18 +432,11 @@
paper = new Snap(cutCanvas.get(0));
- /* handleEvents */
- jQuery(config.actionWrapper).on("click", ".create", function () { alert("Kotew te ye...");});
- jQuery(config.actionWrapper).on("click", ".delete", function () { alert("delete..."); });
-
- /* show path, init the drawing module*/
- paper.click( function(e) {
- if (!ENABLE_NEW_NODE) { return true; }
- createPoint(paper, e.offsetX, e.offsetY, pointData);
- });
-
/* handle drawin here */
- attachEvents(paper);
+ attachPointEvents(paper);
+ attachRectEvents(paper);
+
+ return API;
},
};