Gitlab CSE Unil

Commit 1afd0570 authored by M. Chardon's avatar M. Chardon
Browse files

textgeo ok

parent 610a025d
......@@ -47,7 +47,8 @@ define([
"tools/linesgeo",
"tools/ellipsegeo",
"tools/rectanglegeo",
"tools/arrowgeo"
"tools/arrowgeo",
"tools/textgeo"
],
function(_, Signal){
// ----- Locale variables -----------------------------
......
define(["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,
setCategory: _setCategory,
getColorBgD: _getColorBgD,
});
gText.onPropertyChange = itemPropertyChange;
gText.data.color = _getColor(gText.data.prop.category);
gText.style = {
strokeColor: _getColorBg(gText.data.prop.category),
fillColor: _getColor(gText.data.prop.category)
};
//gText.data.setColor(_getColor(gText.data.prop.category));
attachListeners(gText);
if (!!listening) {
gText.children[1].on('doubleclick', function(){
_startEdit(this.parent);
});
}
return gText;
}
function exportJSON(param) {
var wasSelected = this.selected;
this.selected = false;
var json = this.exportJSON({asString:false});
$.each(json[1].children, function(i, c) {
delete(c[1].leading);
});
// console.log(json);
json = (param && param.asString === false) ? json : JSON.stringify(json);
if (wasSelected) { this.selected = wasSelected; }
return json;
}
function _setRo(ro) {
if (ro !== _ro)
_ro = ro;
return _ro;
}
function itemPropertyChange(property, value) {
if (property === 'category') {
_setCategory.call(this, value);
this.style = {
fillColor: _getColor(value),
strokeColor: _getColorBg(value)
};
paper.view.draw();
}
}
// ----- Returned Module ------------------------------
return {
name: TOOL_TYPE,
tool: new paper.Tool(toolDef),
setRo: _setRo,
exportJSON: exportJSON,
importJSON: importJSON,
registerEvent: function(eventName, evt) { _events[eventName] = evt; }
};
});
\ No newline at end of file
......@@ -46,7 +46,7 @@
<span class="icon icon-arrow-right"></span><span class="tool-text"> Flèche</span>
</label>
<label class="btn btn-lg-off btn-primary">
<input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text">
<input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="textgeo">
<span class="icon-font"></span><span class="tool-text"> Texte</span>
</label>
{% endblock %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment