Made more improvents to textedit mode, now works on transformed elements
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1517 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
parent
010d395590
commit
7ac3d0456b
|
@ -608,6 +608,11 @@ span.zoom_tool {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#text {
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
#tool_bold span, #tool_italic span {
|
#tool_bold span, #tool_italic span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -337,10 +337,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
||||||
<span id="font_sizeLabel">size:</span>
|
<span id="font_sizeLabel">size:</span>
|
||||||
<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
|
<input id="font_size" title="Change Font Size" size="3" value="0" type="text"/>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
|
||||||
<!-- Text content -->
|
<!-- Not visible, but still used -->
|
||||||
<input id="text" type="text" title="Change text contents" size="35"/>
|
<input id="text" type="text" size="35"/>
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="path_node_panel">
|
<div id="path_node_panel">
|
||||||
|
|
|
@ -1221,6 +1221,7 @@
|
||||||
svgCanvas.bind("saved", saveHandler);
|
svgCanvas.bind("saved", saveHandler);
|
||||||
svgCanvas.bind("zoomed", zoomChanged);
|
svgCanvas.bind("zoomed", zoomChanged);
|
||||||
svgCanvas.bind("extension_added", extAdded);
|
svgCanvas.bind("extension_added", extAdded);
|
||||||
|
svgCanvas.textActions.setInputElem($("#text")[0]);
|
||||||
|
|
||||||
var str = '<div class="palette_item" data-rgb="none"></div>'
|
var str = '<div class="palette_item" data-rgb="none"></div>'
|
||||||
$.each(palette, function(i,item){
|
$.each(palette, function(i,item){
|
||||||
|
|
|
@ -3183,7 +3183,7 @@ function BatchCommand(text) {
|
||||||
"xml:space": "preserve"
|
"xml:space": "preserve"
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
newText.textContent = "text";
|
// newText.textContent = "text";
|
||||||
break;
|
break;
|
||||||
case "path":
|
case "path":
|
||||||
// Fall through
|
// Fall through
|
||||||
|
@ -3709,7 +3709,8 @@ function BatchCommand(text) {
|
||||||
break;
|
break;
|
||||||
case "text":
|
case "text":
|
||||||
keep = true;
|
keep = true;
|
||||||
canvas.clearSelection();
|
canvas.addToSelection([element]);
|
||||||
|
textActions.start(element);
|
||||||
break;
|
break;
|
||||||
case "path":
|
case "path":
|
||||||
// set element to null here so that it is not removed nor finalized
|
// 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 curtext;
|
||||||
var textinput;
|
var textinput;
|
||||||
var cursor;
|
var cursor;
|
||||||
|
@ -3873,24 +3874,31 @@ function BatchCommand(text) {
|
||||||
var blinker;
|
var blinker;
|
||||||
var chardata = [];
|
var chardata = [];
|
||||||
var textbb;
|
var textbb;
|
||||||
|
var xform, imatrix;
|
||||||
|
|
||||||
function setCursor(index) {
|
function setCursor(index) {
|
||||||
|
var empty = (textinput.value === "");
|
||||||
|
|
||||||
if(!arguments.length) {
|
if(!arguments.length) {
|
||||||
|
if(empty) {
|
||||||
|
index = 0;
|
||||||
|
} else {
|
||||||
index = textinput.selectionEnd;
|
index = textinput.selectionEnd;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var charbb;
|
var charbb;
|
||||||
charbb = chardata[index];
|
charbb = chardata[index];
|
||||||
|
if(!empty) {
|
||||||
textinput.setSelectionRange(index, index);
|
textinput.setSelectionRange(index, index);
|
||||||
|
}
|
||||||
cursor = getElem("text_cursor");
|
cursor = getElem("text_cursor");
|
||||||
if (!cursor) {
|
if (!cursor) {
|
||||||
cursor = document.createElementNS(svgns, "line");
|
cursor = document.createElementNS(svgns, "line");
|
||||||
assignAttributes(cursor, {
|
assignAttributes(cursor, {
|
||||||
'id': "text_cursor",
|
'id': "text_cursor",
|
||||||
'stroke': "#333",
|
'stroke': "#333",
|
||||||
'stroke-width': "1"
|
'stroke-width': 1
|
||||||
});
|
});
|
||||||
cursor = getElem("selectorParentGroup").appendChild(cursor);
|
cursor = getElem("selectorParentGroup").appendChild(cursor);
|
||||||
}
|
}
|
||||||
|
@ -3904,12 +3912,13 @@ function BatchCommand(text) {
|
||||||
}
|
}
|
||||||
|
|
||||||
assignAttributes(cursor, {
|
assignAttributes(cursor, {
|
||||||
x1: charbb.x,
|
x1: charbb.x * current_zoom,
|
||||||
y1: textbb.y,
|
y1: textbb.y * current_zoom,
|
||||||
x2: charbb.x,
|
x2: charbb.x * current_zoom,
|
||||||
y2: textbb.y + textbb.height,
|
y2: (textbb.y + textbb.height) * current_zoom,
|
||||||
visibility: 'visible',
|
visibility: 'visible',
|
||||||
display: 'inline'
|
display: 'inline',
|
||||||
|
transform: (xform || '')
|
||||||
});
|
});
|
||||||
|
|
||||||
if(selblock) selblock.setAttribute('width', 0);
|
if(selblock) selblock.setAttribute('width', 0);
|
||||||
|
@ -3943,11 +3952,12 @@ function BatchCommand(text) {
|
||||||
|
|
||||||
cursor.setAttribute('visibility', 'hidden');
|
cursor.setAttribute('visibility', 'hidden');
|
||||||
assignAttributes(selblock, {
|
assignAttributes(selblock, {
|
||||||
'x': startbb.x,
|
'x': startbb.x * current_zoom,
|
||||||
'y': textbb.y,
|
'y': textbb.y * current_zoom,
|
||||||
'width': endbb.x - startbb.x,
|
'width': (endbb.x - startbb.x) * current_zoom,
|
||||||
'height': textbb.height,
|
'height': textbb.height * current_zoom,
|
||||||
'display': 'inline'
|
'display': 'inline',
|
||||||
|
'transform': (xform || '')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3989,6 +3999,24 @@ function BatchCommand(text) {
|
||||||
setSelection(start, end, apply);
|
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;
|
var last_x, last_y;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -4000,17 +4028,27 @@ function BatchCommand(text) {
|
||||||
curtext = target;
|
curtext = target;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
start: function(elem) {
|
||||||
|
curtext = elem;
|
||||||
|
textActions.toEditMode();
|
||||||
|
},
|
||||||
mouseDown: function(evt, mouse_target, start_x, start_y) {
|
mouseDown: function(evt, mouse_target, start_x, start_y) {
|
||||||
|
var pt = screenToPt(start_x, start_y);
|
||||||
|
|
||||||
textinput.focus();
|
textinput.focus();
|
||||||
setCursorFromPoint(start_x, start_y);
|
setCursorFromPoint(pt.x, pt.y);
|
||||||
last_x = start_x;
|
last_x = start_x;
|
||||||
last_y = start_y;
|
last_y = start_y;
|
||||||
|
|
||||||
|
// TODO: Find way to block native selection
|
||||||
},
|
},
|
||||||
mouseMove: function(mouse_x, mouse_y) {
|
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) {
|
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) {
|
if(last_x === mouse_x && last_y === mouse_y && evt.target !== curtext) {
|
||||||
textActions.toSelectMode();
|
textActions.toSelectMode();
|
||||||
}
|
}
|
||||||
|
@ -4024,31 +4062,50 @@ function BatchCommand(text) {
|
||||||
textActions.init();
|
textActions.init();
|
||||||
$(curtext).css('cursor', 'text');
|
$(curtext).css('cursor', 'text');
|
||||||
|
|
||||||
setCursorFromPoint(x, y);
|
if(!arguments.length) {
|
||||||
|
setCursor();
|
||||||
|
} else {
|
||||||
|
var pt = screenToPt(x, y);
|
||||||
|
setCursorFromPoint(pt.x, pt.y);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
toSelectMode: function() {
|
toSelectMode: function() {
|
||||||
current_mode = "select";
|
current_mode = "select";
|
||||||
clearInterval(blinker);
|
clearInterval(blinker);
|
||||||
|
blinker = null;
|
||||||
if(selblock) $(selblock).attr('display','none');
|
if(selblock) $(selblock).attr('display','none');
|
||||||
if(cursor) $(cursor).attr('display','none');
|
if(cursor) $(cursor).attr('visibility','hidden');
|
||||||
|
|
||||||
canvas.clearSelection();
|
canvas.clearSelection();
|
||||||
|
$(curtext).css('cursor', 'move');
|
||||||
|
|
||||||
call("selected", [curtext]);
|
call("selected", [curtext]);
|
||||||
canvas.addToSelection([curtext], true);
|
canvas.addToSelection([curtext], true);
|
||||||
|
|
||||||
curtext = false;
|
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 str = curtext.textContent;
|
||||||
var len = str.length;
|
var len = str.length;
|
||||||
|
|
||||||
|
xform = curtext.getAttribute('transform');
|
||||||
|
if(xform) {
|
||||||
|
var tlist = canvas.getTransformList(curtext);
|
||||||
|
imatrix = transformListToTransform(tlist).matrix.inverse();
|
||||||
|
}
|
||||||
|
|
||||||
textbb = canvas.getBBox(curtext);
|
textbb = canvas.getBBox(curtext);
|
||||||
chardata = Array(len);
|
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.focus();
|
||||||
$(textinput).blur(function() {
|
$(textinput).blur(function() {
|
||||||
if(cursor) {
|
if(cursor) {
|
||||||
|
@ -4056,6 +4113,10 @@ function BatchCommand(text) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if(!len) {
|
||||||
|
var end = {x: textbb.x + (textbb.width/2)};
|
||||||
|
}
|
||||||
|
|
||||||
for(var i=0; i<len; i++) {
|
for(var i=0; i<len; i++) {
|
||||||
var start = curtext.getStartPositionOfChar(i);
|
var start = curtext.getStartPositionOfChar(i);
|
||||||
var end = curtext.getEndPositionOfChar(i);
|
var end = curtext.getEndPositionOfChar(i);
|
||||||
|
@ -4072,10 +4133,12 @@ function BatchCommand(text) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Add a last bbox for cursor at end of text
|
// Add a last bbox for cursor at end of text
|
||||||
chardata.push({
|
chardata.push({
|
||||||
x: end.x
|
x: end.x
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}();
|
}();
|
||||||
|
@ -7675,7 +7738,7 @@ function BatchCommand(text) {
|
||||||
|
|
||||||
this.setTextContent = function(val) {
|
this.setTextContent = function(val) {
|
||||||
this.changeSelectedAttribute("#text", val);
|
this.changeSelectedAttribute("#text", val);
|
||||||
textActions.init();
|
textActions.init(val);
|
||||||
textActions.setCursor();
|
textActions.setCursor();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -7739,10 +7802,6 @@ function BatchCommand(text) {
|
||||||
|
|
||||||
var ffClone = function(elem) {
|
var ffClone = function(elem) {
|
||||||
// Hack for Firefox bugs where text element features aren't updated
|
// Hack for Firefox bugs where text element features aren't updated
|
||||||
|
|
||||||
// May not be necessary, so let's try disabling.
|
|
||||||
return elem;
|
|
||||||
|
|
||||||
if(navigator.userAgent.indexOf('Gecko/') == -1) return elem;
|
if(navigator.userAgent.indexOf('Gecko/') == -1) return elem;
|
||||||
var clone = elem.cloneNode(true)
|
var clone = elem.cloneNode(true)
|
||||||
elem.parentNode.insertBefore(clone, elem);
|
elem.parentNode.insertBefore(clone, elem);
|
||||||
|
|
Loading…
Reference in New Issue