Gitlab CSE Unil

Commit efbf4080 authored by Julien Furrer's avatar Julien Furrer
Browse files

Modification in Text tool

Fixed FontSize popover css (update bootstrap-spinedit lib)
Texts can be resized with the select tool by drag-n-drop
parent 24cc68f6
......@@ -101,7 +101,7 @@ define([
(p[1] === 'right') ? 1 : -1,
(p[0] === 'bottom') ? 1 : -1
];
_selectedShapeResizeDir = resizeDir;
// _selectedShapeResizeDir = resizeDir;
// _selectedShapeBound = itemHitResult.item.bounds[fixedLoc];
// _selectedShape = itemHitResult.item;
......@@ -124,6 +124,21 @@ define([
} catch(e) {}
// _selectedArrowBound = itemHitResult.item.bounds;
}
else if (itemHitResult.item.data.type === 'text') {
if (p[0] === 'center' || p[1] === 'center') {
item.data.setDragMode('FULL_DRAG', {item: item});
} else {
try {
itemHitResult.item.data.setDragMode.call(itemHitResult.item, 'DRAG_HANDLE', {
item: itemHitResult.item,
nameStr: itemHitResult.name,
nameParts: p
});
} catch(e) {
}
}
}
break;
}
}
......
......@@ -34,8 +34,48 @@ define(["paper", "jquery"], function (paper, $) {
}
}
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) {
this.translate(event.delta);
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) {
......@@ -52,11 +92,14 @@ define(["paper", "jquery"], function (paper, $) {
this.children[1].selected = selected;
};
//item.data.prop = item.data.prop || {comment:""};
//item.data.prop.comment = item.data.prop.comment || "";
// item.data.prop = item.data.prop || {comment:""};
// item.data.prop.comment = item.data.prop.comment || "";
//item.onMouseDown = itemMouseDown;
//item.onMouseDrag = itemMouseDrag;
item.data.setDragMode = setDragMode;
item.data.itemMouseDrag = itemMouseDrag;
// item.onMouseDown = itemMouseDown;
// item.onMouseDrag = itemMouseDrag;
}
......@@ -185,13 +228,24 @@ define(["paper", "jquery"], function (paper, $) {
function setFontSize(size) {
var textGroup = this;
var sw = size / 6;
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";
}
// ----- Tool Def -------------------------------------
var toolDef = {
......@@ -217,9 +271,9 @@ define(["paper", "jquery"], function (paper, $) {
strokeColor: 'white',
strokeWidth: fontSize/6,
strokeJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: new paper.Point([5, 3]),
// shadowColor: 'black',
// shadowBlur: 10,
// shadowOffset: new paper.Point([5, 3]),
content: ""
});
......@@ -240,13 +294,13 @@ define(["paper", "jquery"], function (paper, $) {
gText = new paper.Group({
children: [txtBg, txtFg],
fontSize: fontSize,
data: {
type: TOOL_TYPE,
setColor: setTextColor,
setFill: _noop,
setStrokeWidth: _noop,
setFontSize: setFontSize,
getFontSize: getFontSize,
content: "",
color: c
}
......@@ -271,7 +325,8 @@ define(["paper", "jquery"], function (paper, $) {
setColor: setTextColor,
setFill: _noop,
setStrokeWidth: _noop,
setFontSize: setFontSize
setFontSize: setFontSize,
getFontSize: getFontSize
});
attachListeners(gText);
if (!!listening) {
......@@ -287,6 +342,13 @@ define(["paper", "jquery"], function (paper, $) {
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; }
......@@ -299,6 +361,7 @@ define(["paper", "jquery"], function (paper, $) {
return {
name: TOOL_TYPE,
tool: new paper.Tool(toolDef),
exportJSON: exportJSON,
importJSON: importJSON,
registerEvent: function(eventName, evt) { _events[eventName] = evt; }
};
......
......@@ -182,6 +182,11 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
$("#tool-fill-color").toggleClass("active", isFill);
attributes.setFill(isFill, false, true);
// -- fontSize
var fontSize = (typeof item.data.getFontSize === 'function') ?
item.data.getFontSize.call(item) : attributes.getFontSize();
$("#attr-font-size").val(fontSize);
attributes.setFontSize(fontSize, false, true);
}
......@@ -488,9 +493,9 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
trigger: 'click',
delay: 0,
content: '<div style="width:160px">' +
'<label style="float:left; line-height: 35px">Taille: &nbsp;</label>' +
'<label style="float:left; line-height: 35px" class="small text-muted">Taille: &nbsp;</label>' +
'<div class="input-group" style="width: 70px;">' +
'<input type="text" size="10" class="form-control" name="fontSize">' +
'<input type="text" size="10" class="form-control" name="fontSize" id="attr-font-size">' +
'</div>' +
'</div>'
})
......@@ -502,7 +507,7 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
.spinedit({
value: attributes.getFontSize(),
minimum: 9,
maximum: 72,
maximum: 999,
step: 1,
numberOfDecimals: 0
})
......
......@@ -23,7 +23,7 @@
"paper": "~0.9.20",
"jquery.autoGrowInput": "~0.0.2",
"signals": "~1.0.0",
"bootstrap-spinedit": "https://github.com/ahamid/bootstrap-spinedit.git#*",
"bootstrap-spinedit": "https://github.com/jujug42/bootstrap-spinedit.git#*",
"seiyria-bootstrap-slider": "git://github.com/seiyria/bootstrap-slider#~4.0.1",
"backbone": "~1.1.2",
"jquery-file-upload": "~9.7.1",
......
......@@ -262,17 +262,14 @@ span.spinedit .glyphicon-chevron-up {
}
span.spinedit .glyphicon-chevron-up {
top: -8px;
left: -3px;
left: -8px;
}
span.spinedit .glyphicon-chevron-down {
top: 8px;
margin-right: -10px;
}
input.spinedit {
padding: 6px;
margin-right: -5px;
}
span.spinedit {
padding: 6px 0 6px 3px;
.spinedit {
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
......@@ -283,6 +280,18 @@ span.spinedit {
vertical-align: middle;
box-sizing: border-box;
}
.form-control.spinedit {
padding: 6px;
}
span.input-group-addon.spinedit {
padding: 6px 0 6px 6px;
}
span.input-group-addon.spinedit .glyphicon-chevron-up {
left: -3px;
}
span.input-group-addon.spinedit .glyphicon-chevron-down {
margin-right: -10px;
}
@font-face {
font-family: 'WebHostingHub-Glyphs';
......
Supports Markdown
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