diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 4a23b251..bc8286e7 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -608,6 +608,11 @@ span.zoom_tool {
position: relative;
}
+#text {
+ position: absolute;
+ left: -9999px;
+}
+
#tool_bold span, #tool_italic span {
position: absolute;
width: 100%;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 1d176f9c..1592a788 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -337,10 +337,9 @@ script type="text/javascript" src="locale/locale.min.js">
size:
-
+
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 4ed881e9..e1a838f0 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1221,6 +1221,7 @@
svgCanvas.bind("saved", saveHandler);
svgCanvas.bind("zoomed", zoomChanged);
svgCanvas.bind("extension_added", extAdded);
+ svgCanvas.textActions.setInputElem($("#text")[0]);
var str = '
'
$.each(palette, function(i,item){
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 062a7eef..352f46fc 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -3183,7 +3183,7 @@ function BatchCommand(text) {
"xml:space": "preserve"
}
});
- newText.textContent = "text";
+// newText.textContent = "text";
break;
case "path":
// Fall through
@@ -3709,7 +3709,8 @@ function BatchCommand(text) {
break;
case "text":
keep = true;
- canvas.clearSelection();
+ canvas.addToSelection([element]);
+ textActions.start(element);
break;
case "path":
// set element to null here so that it is not removed nor finalized
@@ -3865,7 +3866,7 @@ function BatchCommand(text) {
}());
- var textActions = function() {
+ var textActions = canvas.textActions = function() {
var curtext;
var textinput;
var cursor;
@@ -3873,24 +3874,31 @@ function BatchCommand(text) {
var blinker;
var chardata = [];
var textbb;
-
+ var xform, imatrix;
function setCursor(index) {
+ var empty = (textinput.value === "");
+
if(!arguments.length) {
- index = textinput.selectionEnd;
+ if(empty) {
+ index = 0;
+ } else {
+ index = textinput.selectionEnd;
+ }
}
var charbb;
charbb = chardata[index];
-
- textinput.setSelectionRange(index, index);
+ if(!empty) {
+ textinput.setSelectionRange(index, index);
+ }
cursor = getElem("text_cursor");
if (!cursor) {
cursor = document.createElementNS(svgns, "line");
assignAttributes(cursor, {
'id': "text_cursor",
'stroke': "#333",
- 'stroke-width': "1"
+ 'stroke-width': 1
});
cursor = getElem("selectorParentGroup").appendChild(cursor);
}
@@ -3904,12 +3912,13 @@ function BatchCommand(text) {
}
assignAttributes(cursor, {
- x1: charbb.x,
- y1: textbb.y,
- x2: charbb.x,
- y2: textbb.y + textbb.height,
+ x1: charbb.x * current_zoom,
+ y1: textbb.y * current_zoom,
+ x2: charbb.x * current_zoom,
+ y2: (textbb.y + textbb.height) * current_zoom,
visibility: 'visible',
- display: 'inline'
+ display: 'inline',
+ transform: (xform || '')
});
if(selblock) selblock.setAttribute('width', 0);
@@ -3943,11 +3952,12 @@ function BatchCommand(text) {
cursor.setAttribute('visibility', 'hidden');
assignAttributes(selblock, {
- 'x': startbb.x,
- 'y': textbb.y,
- 'width': endbb.x - startbb.x,
- 'height': textbb.height,
- 'display': 'inline'
+ 'x': startbb.x * current_zoom,
+ 'y': textbb.y * current_zoom,
+ 'width': (endbb.x - startbb.x) * current_zoom,
+ 'height': textbb.height * current_zoom,
+ 'display': 'inline',
+ 'transform': (xform || '')
});
}
@@ -3989,6 +3999,24 @@ function BatchCommand(text) {
setSelection(start, end, apply);
}
+ function screenToPt(x_in, y_in) {
+ var out = {
+ x: x_in,
+ y: y_in
+ }
+
+ if(xform) {
+ var pt = transformPoint(out.x, out.y, imatrix);
+ out.x = pt.x;
+ out.y = pt.y;
+ }
+
+ out.x /= current_zoom;
+ out.y /= current_zoom;
+
+ return out;
+ }
+
var last_x, last_y;
return {
@@ -4000,17 +4028,27 @@ function BatchCommand(text) {
curtext = target;
}
},
+ start: function(elem) {
+ curtext = elem;
+ textActions.toEditMode();
+ },
mouseDown: function(evt, mouse_target, start_x, start_y) {
+ var pt = screenToPt(start_x, start_y);
+
textinput.focus();
- setCursorFromPoint(start_x, start_y);
+ setCursorFromPoint(pt.x, pt.y);
last_x = start_x;
last_y = start_y;
+
+ // TODO: Find way to block native selection
},
mouseMove: function(mouse_x, mouse_y) {
- setEndSelectionFromPoint(mouse_x, mouse_y);
+ var pt = screenToPt(mouse_x, mouse_y);
+ setEndSelectionFromPoint(pt.x, pt.y);
},
mouseUp: function(evt, mouse_x, mouse_y) {
- setEndSelectionFromPoint(mouse_x, mouse_y, true);
+ var pt = screenToPt(mouse_x, mouse_y);
+ setEndSelectionFromPoint(pt.x, pt.y, true);
if(last_x === mouse_x && last_y === mouse_y && evt.target !== curtext) {
textActions.toSelectMode();
}
@@ -4024,37 +4062,60 @@ function BatchCommand(text) {
textActions.init();
$(curtext).css('cursor', 'text');
- setCursorFromPoint(x, y);
+ if(!arguments.length) {
+ setCursor();
+ } else {
+ var pt = screenToPt(x, y);
+ setCursorFromPoint(pt.x, pt.y);
+ }
},
toSelectMode: function() {
current_mode = "select";
clearInterval(blinker);
+ blinker = null;
if(selblock) $(selblock).attr('display','none');
- if(cursor) $(cursor).attr('display','none');
+ if(cursor) $(cursor).attr('visibility','hidden');
canvas.clearSelection();
+ $(curtext).css('cursor', 'move');
call("selected", [curtext]);
canvas.addToSelection([curtext], true);
curtext = false;
},
- init: function() {
+ setInputElem: function(elem) {
+ textinput = elem;
+ },
+ init: function(inputElem) {
+ if(!curtext) return;
+
+ if(!curtext.parentNode) {
+ curtext = selectedElements[0];
+ selectorManager.requestSelector(curtext).showGrips(false);
+ }
+
var str = curtext.textContent;
var len = str.length;
+ xform = curtext.getAttribute('transform');
+ if(xform) {
+ var tlist = canvas.getTransformList(curtext);
+ imatrix = transformListToTransform(tlist).matrix.inverse();
+ }
+
textbb = canvas.getBBox(curtext);
chardata = Array(len);
-
- // TODO: This element should be dynamically created and hidden
- // For now we use the svg-editor one for visibility purposes
- textinput = $('#text')[0];
textinput.focus();
$(textinput).blur(function() {
if(cursor) {
cursor.setAttribute('visibility', 'hidden');
}
});
+
+ if(!len) {
+ var end = {x: textbb.x + (textbb.width/2)};
+ }
for(var i=0; i