Gitlab CSE Unil

Commit 5cf6cdaf authored by M. Chardon's avatar M. Chardon
Browse files

possibilité de changer les propriétés après dessin

parent 2fa65b06
/**
* anodate environment
*
* Created by jfurrer on 30.06.15.
* Created by mchardon on 11.01.17.
*/
define([
"jquery",
......
......@@ -14,8 +14,8 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
* This copyright notice MUST APPEAR in all copies of the file.
*
* @AUTHOR: Julien Furrer <Julien.Furrer@unil.ch>
* @CREATION-DATE: 30.06.15
* @AUTHOR: marion.chardon@unil.ch
* @CREATION-DATE: 11.01.17
*
*/
define([
......@@ -105,7 +105,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('drawing');
tools.activateTool('drawinggeo');
return false;
}
}],
......@@ -116,7 +116,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('arrow');
tools.activateTool('arrowgeo');
return false;
}
}],
......@@ -127,7 +127,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('lines');
tools.activateTool('linesgeo');
return false;
}
}],
......@@ -137,7 +137,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('ellipse');
tools.activateTool('ellipsegeo');
return false;
}
}],
......@@ -147,7 +147,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('rectangle');
tools.activateTool('rectanglegeo');
return false;
}
}],
......@@ -157,7 +157,7 @@ define([
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('text');
tools.activateTool('textgeo');
return false;
}
}]
......
......@@ -47,7 +47,8 @@ define([
"tools/linesgeo",
"tools/ellipsegeo",
"tools/rectanglegeo",
"tools/arrowgeo"
"tools/arrowgeo",
"tools/textgeo"
],
function(_, Signal){
// ----- Locale variables -----------------------------
......
......@@ -541,6 +541,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper,Shape, Ca
_create = false;
_creatingArrow.selected = true;
_creatingArrow.visible = true;
_events.annotationSelected.dispatch(_creatingArrow);
_creatingArrow = null;
}
}
......
......@@ -201,6 +201,7 @@ define(["paper", "tools/Shape.class","adim/category"], function(paper, Shape, Ca
newPath.fullySelected = true;
_events.annotationAdded.dispatch(newPath);
_events.annotationSelected.dispatch(newPath);
}
}
......
......@@ -166,6 +166,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
_events.annotationAdded.dispatch(newEllGeo);
_startPoint = null;
create = false;
return newEllGeo;
}
function itemMouseDown(event) {
......@@ -336,9 +337,11 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
if (_startPoint) {
if (_drawingLine && terminateOnRelease) {
drawEllGeo(this,event);
_terminateCreate(event);
var newEllGeo = _terminateCreate(event);
newEllGeo.selected=true;
_events.annotationSelected.dispatch(newEllGeo);
} else {
_startPoint=null;
cancelCreate();
}
}
_editedSegmentIdx = _editedRecGeo = null;
......
......@@ -226,6 +226,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
if (_changed) {
_changed = false;
_events.annotationChanged.dispatch(_segment.path);
_events.annotationSelected.dispatch(_segment.path);
}
_segment = null;
}
......
......@@ -154,6 +154,18 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
_events.annotationAdded.dispatch(newRecGeo);
_startPoint = null;
create = false;
return newRecGeo;
}
function setSelected(selected) {
if (selected) {
_events.annotationSelected.dispatch(this);
//drawMarker(this,{highlight:true});
} else {
//drawMarker(this);
}
paper.Group.prototype.setSelected.call(this, selected);
}
function itemMouseDown(event) {
......@@ -164,7 +176,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
paper.project.deselectAll();
hitItem.selected = true;
_events.annotationSelected.dispatch(hitItem);
//_events.annotationSelected.dispatch(hitItem);
_editedSegmentIdx = null;
if (hitResult && hitResult.type === 'segment') {
......@@ -251,6 +263,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
}
// ----- Tool Def -------------------------------------
var _selectedTool = null;
var toolDef = {
onMouseDown: function(event) {
......@@ -296,9 +309,15 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
if (_startPoint) {
if (_drawingLine && terminateOnRelease) {
drawRecGeo(this,event);
_terminateCreate(event);
//itemMouseDown.call(marker, event);
var newRecto = _terminateCreate(event);
newRecto.selected=true;
_selectedTool = newRecto;
_events.annotationSelected.dispatch(newRecto);
} else {
_startPoint=null;
cancelCreate();
}
}
_editedSegmentIdx = _editedRecGeo = null;
......@@ -316,7 +335,6 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
};
// ----- Functions ------------------------------------
function _setCategory(catId) {
defaultProperties.category = catId;
}
......
......@@ -216,6 +216,8 @@ define(["paper", "jquery","adim/category"], function (paper, $, Category) {
if (_events.annotationAdded && typeof _events.annotationAdded.dispatch === 'function') {
_events.annotationAdded.dispatch(gText);
}
gText.selected=true;
_events.annotationSelected.dispatch(gText);
} else {
if (_events.annotationChanged && typeof _events.annotationChanged.dispatch === 'function') {
_events.annotationChanged.dispatch(gText);
......@@ -228,6 +230,7 @@ define(["paper", "jquery","adim/category"], function (paper, $, Category) {
}
overlay.hide();
input.val("").blur().hide();
return gText;
}
......
......@@ -11610,7 +11610,7 @@ var CanvasProvider = {
 
getContext: function(width, height) {
return this.getCanvas(width, height).getContext('2d');
},
},var CanvasProvider = {
 
release: function(obj) {
var canvas = obj.canvas ? obj.canvas : obj;
......@@ -20955,465 +20955,6 @@ define('tools/arrowgeo',["paper", "tools/Shape.class","adim/category"], function
}
};
});
define('tools/textgeo',["paper", "jquery","adim/category"], function (paper, $, Category) {
// ----- Const ---------------------------------------
var TOOL_TYPE = "textgeo";
// ----- Locale variables -----------------------------
var edit = false; // is editing
var text = null; // the point text
var gText = null; // the group
var input = null; // the input helper
var overlay = null; // the overlay div used to catch mouse click when input is active
var _ro = false; // local value of ReadOnly Status
// Events
var _events = {
annotationAdded: null,
annotationChanged: null,
annotationSelected: null
};
var hitOptions = {
type: 'point-text',
tolerance: 5,
fill: true
};
// Properties
var defaultProperties = {
comment: "",
category: "cat_geo_1",
fill: true
};
// ----- Initialisations ------------------------------
var _noop = function(){};
// ----- Item's event listeners -----------------------
function itemMouseDown(event) {
var textGroup = this;
textGroup.selected = true;
if (_events.annotationSelected && typeof _events.annotationSelected.dispatch === 'function') {
_events.annotationSelected.dispatch(textGroup);
}
}
var DRAG_MODES = {
FULL_DRAG: 1,
DRAG_HANDLE: 4
};
var _dragMode = null;
var _dragOpts = {};
var _dragModified = false; // this is set to true if a drag event changed the item and need to emmit a change event
function setDragMode(mode, opts) {
if (! mode in DRAG_MODES) {
_dragMode = null;
_dragOpts = {};
_dragModified = false;
} else {
_dragMode = DRAG_MODES[mode];
_dragOpts = opts;
}
}
function itemMouseDrag(event) {
switch (_dragMode) {
case DRAG_MODES.DRAG_HANDLE:
if (_dragOpts.nameParts[1] === 'center')
return;
var bounds = _dragOpts.item.bounds,
height = (_dragOpts.nameParts[0] === 'top') ?
bounds.bottom - event.point.y :
event.point.y - bounds.top,
fontSize = height / 1.2,
offset = [0, 0];
if (_dragOpts.nameParts[0] === 'bottom') {
offset[1] = height - bounds.height;
}
if (fontSize > 9 && fontSize < 999) {
setFontSize.call(_dragOpts.item, fontSize);
}
_dragOpts.item.translate(offset);
break;
case DRAG_MODES.FULL_DRAG:
default:
this.translate(event.delta);
}
}
function attachListeners(item) {
item.oGetSelected = function() {
return this.children[1].selected;
// for (var i = 0, l = this.children.length; i<l; i++) {
// if (!this.children.selected)
// return false;
// }
// return true;
};
item.oSetSelected = function(selected) {
//this.children.map(function(c) {c.selected = selected});
this.children[1].selected = selected;
};
// item.data.prop = item.data.prop || {comment:""};
// item.data.prop.comment = item.data.prop.comment || "";
item.data.setDragMode = setDragMode;
item.data.itemMouseDrag = itemMouseDrag;
// item.onMouseDown = itemMouseDown;
// item.onMouseDrag = itemMouseDrag;
}
// ----- Functions ------------------------------------
function _startEdit(myText) {
if (edit) { _terminateEdit(false); }
if (_ro) return;
edit = true;
if (!input) {
input = $("<input>",
{
type: "text",
'class': "text-tool-input",
placeholder: "Votre texte",
maxlength: 128, size: 128,
style: "display:none;position:absolute;top:0;left:0;padding:10px;border:0;border-radius:5px;background:rgba(255,255,255,0.75);"
}
)
.appendTo(paper.project.view.element.parentNode)
.on("blur", function(){ if(edit) _terminateEdit(); })
.on("keydown", function(event){ if(event.which === 27 || event.which == 13) _terminateEdit(); })
.autoGrowInput();
overlay = overlay || $("<div>").css({
zIndex: 999,
position: "fixed", display: "none",
top: "-10px", left: "-10px",
width: "5000px", height: "5000px"
})
.click(function(){ _terminateEdit() });
input.before(overlay);
}
myText.selected = false;
myText.visible = false;
var inputPoint = myText.children[1].point;
inputPoint = inputPoint.subtract(paper.view.bounds.point).multiply(paper.view.zoom);
var inputFontSize = myText.fontSize * paper.view.zoom;
myText.data.color = _getColor(defaultProperties.category);
input
.val(myText.data.content)
.css({
"fontSize": inputFontSize + "px",
"fontFamily": myText.font,
"color": myText.data.color,
"top": inputPoint.y - inputFontSize + 1 - 10,
"left": inputPoint.x - 1 - 10,
"zIndex": 1000
})
.show();
overlay.show();
var tester = input.nextAll("tester");
tester.css({
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing')
});
tester.text( (myText.data.content === "") ? input.attr("placeholder") : myText.data.content);
input.width(tester.width()+30);
gText = myText;
setTimeout(function(){
input.focus();
},100);
}
/**
* Terminate the editing phase of the text item. The item is selected after editing
* if the parameter `selectAfter` is set to true (default).
* @param {boolean} [selectAfter=true] Select the text item after terminating the editing phase
* @private
*/
function _terminateEdit(selectAfter) {
selectAfter = !(selectAfter === false);
edit = false;
if (gText) {
var textVal = input.val();
if (!textVal || textVal === "") {
gText.remove();
gText = null;
} else {
var isNewText = gText.data.content === "";
gText.data.content = textVal;
gText.children[0].content = textVal;
gText.children[1].content = textVal;
gText.visible = true;
gText.onPropertyChange = itemPropertyChange;
if(selectAfter)
if (_events.annotationSelected && typeof _events.annotationSelected.dispatch === 'function') {
_events.annotationSelected.dispatch(gText);
}
if (isNewText) {
attachListeners(gText);
if (_events.annotationAdded && typeof _events.annotationAdded.dispatch === 'function') {
_events.annotationAdded.dispatch(gText);
}
} else {
if (_events.annotationChanged && typeof _events.annotationChanged.dispatch === 'function') {
_events.annotationChanged.dispatch(gText);
}
}
gText.oSetSelected(selectAfter);
paper.project.view.draw();
}
}
overlay.hide();
input.val("").blur().hide();
}
function setTextColor(color) {
var textGroup = this;
var changed = textGroup.children[1].fillColor !== color;
textGroup.children[1].fillColor = color;
textGroup.data.color = color;
return changed;
}
function setFontSize(size) {
var textGroup = this;
var sw = size / 10;
if (sw < 3) { sw = 3; }
textGroup.children[0].fontSize = size;
textGroup.children[0].strokeWidth = sw;
textGroup.children[1].fontSize = size;
}
function getFontSize() {
return this.children[0].fontSize;
}
function setFontWidth(fontWidth) {
}
function getFontWidth() {
return "normal";
}
// ----- Functions ------------------------------------
function _setCategory(catId) {
defaultProperties.category = catId;
}
function _getColor(catId) {
var category = Category.getCategory(catId),
color = (category && category.color) || "#000000";
return color;
}
function _getColorBg(catId) {
var category = Category.getCategory(catId),
color = (category && category.colorbg) || "#000000";
return color;
}
function _getColorBgD() {
if (this.prop){
var category = Category.getCategory(this.prop.category),
color = (category && category.colorbg) || "#000000";
return color;
} else {
return "#000000";
}
}
// ----- Tool Def -------------------------------------
var toolDef = {
onMouseDown: function(event){
if (_ro) return;
var hitResult = paper.project.activeLayer.hitTest(event.point, hitOptions);
if (hitResult) {
var hitGroup = hitResult.item.parent;
_startEdit(hitGroup);
}
else {
var fontSize = paper.project.currentStyle.fontSize;
if (!edit) {
// Start editing new text
paper.project.deselectAll();
var textPoint = event.point;
var txtBg = new paper.PointText({
point: textPoint,
fillColor: 'white',
strokeColor: 'white',
strokeWidth: fontSize/6,
strokeJoin: 'round',
// shadowColor: 'black',
// shadowBlur: 10,
// shadowOffset: new paper.Point([5, 3]),
content: ""
});
var c = paper.project.currentStyle.strokeColor || paper.project.currentStyle.fillColor;
c = c.toCSS();
var txtFg = new paper.PointText({
point: textPoint,
fillColor: c,
strokeColor: c,
strokeWidth: 0,
content: ""
});
txtFg.on('doubleclick', function(){
_startEdit(this.parent);
});
// Extend tool's item properties with default values
var properties = {};
for (var p in defaultProperties) {
if (!properties.hasOwnProperty(p))
properties[p] = defaultProperties[p];
}
gText = new paper.Group({
children: [txtBg, txtFg],
data: {
type: TOOL_TYPE,
setColor: setTextColor,
setFill: _noop,
setStrokeWidth: _noop,
setFontSize: setFontSize,
getFontSize: getFontSize,
// Properties
prop: properties,
setCategory: _setCategory,
getColorBgD: _getColorBgD,
content: "",
color: c
}
});
gText.data.tId = "a" + gText._id;
gText.data.content = "";
_startEdit(gText);
} else {
_terminateEdit();
}
}
}
};
function importJSON(jsonStr, layer, listening) {
var gText = layer.importJSON(jsonStr);
// Extend tool's item properties with default values
var properties = gText.data.prop;
for (var p in defaultProperties) {
if (!properties.hasOwnProperty(p))
properties[p] = defaultProperties[p];
}
$.extend(gText.data, {
setColor: setTextColor,
setFill: _noop,
setStrokeWidth: _noop,
setFontSize: setFontSize,
getFontSize: getFontSize,
prop: properties,