Start of Edit Source capabilities for SVG-edit
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@312 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Jeff Schiller
parent
b3484861e8
commit
8e8f44861d
|
|
@ -272,3 +272,37 @@ div.color_block {
|
|||
#svg_editor #copyright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#svg_source_editor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#svg_source_overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#svg_source_container {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
background-color: #B0B0B0;
|
||||
opacity: 1.0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#svg_source_textarea {
|
||||
position: relative;
|
||||
width: 95%;
|
||||
top: 35px;
|
||||
height: 90%;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -28,10 +28,11 @@
|
|||
</div>
|
||||
|
||||
<div id="tools_top" class="tools_panel">
|
||||
<!-- File-like buttons: New, Save -->
|
||||
<!-- File-like buttons: New, Save, Source -->
|
||||
<div>
|
||||
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
|
||||
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
|
||||
<!--img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/-->
|
||||
</div>
|
||||
|
||||
<!-- History buttons -->
|
||||
|
|
@ -216,6 +217,16 @@
|
|||
<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
|
||||
</div>
|
||||
|
||||
</div> <!-- svg_editor -->
|
||||
|
||||
<div id="svg_source_editor">
|
||||
<div id="svg_source_overlay"></div>
|
||||
<div id="svg_source_container">
|
||||
<div id="tool_source_back" class="toolbar_button"></div>
|
||||
<form>
|
||||
<textarea id="svg_source_textarea"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -16,9 +16,13 @@ function svg_edit_setup() {
|
|||
svgCanvas.setMode('select');
|
||||
}
|
||||
|
||||
// used to make the flyouts stay ont he screen longer the very first time
|
||||
var ellipse_flyout_speed = 'slow';
|
||||
var rect_flyout_speed = 'slow';
|
||||
var textBeingEntered = false;
|
||||
var selectedElement = null;
|
||||
var multiselected = false;
|
||||
var editingsource = false;
|
||||
|
||||
// called when we've selected a different element
|
||||
var selectedChanged = function(window,elems) {
|
||||
|
|
@ -288,61 +292,61 @@ function svg_edit_setup() {
|
|||
svgCanvas.setMode('select');
|
||||
$('#styleoverrides').text('*{cursor:move;pointer-events:all} svg{cursor:default}');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var clickPath = function() {
|
||||
if (toolButtonClick('#tool_path')) {
|
||||
svgCanvas.setMode('path');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var clickLine = function() {
|
||||
if (toolButtonClick('#tool_line')) {
|
||||
svgCanvas.setMode('line');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var clickSquare = function(){
|
||||
if (toolButtonClick('#tools_rect_show')) {
|
||||
svgCanvas.setMode('square');
|
||||
}
|
||||
$('#tools_rect_show').attr('src', 'images/square.png');
|
||||
}
|
||||
};
|
||||
|
||||
var clickRect = function(){
|
||||
if (toolButtonClick('#tools_rect_show')) {
|
||||
svgCanvas.setMode('rect');
|
||||
}
|
||||
$('#tools_rect_show').attr('src', 'images/rect.png');
|
||||
}
|
||||
};
|
||||
|
||||
var clickFHRect = function(){
|
||||
if (toolButtonClick('#tools_rect_show')) {
|
||||
svgCanvas.setMode('fhrect');
|
||||
}
|
||||
$('#tools_rect_show').attr('src', 'images/freehand-square.png');
|
||||
}
|
||||
};
|
||||
|
||||
var clickCircle = function(){
|
||||
if (toolButtonClick('#tools_ellipse_show')) {
|
||||
svgCanvas.setMode('circle');
|
||||
}
|
||||
$('#tools_ellipse_show').attr('src', 'images/circle.png');
|
||||
}
|
||||
};
|
||||
|
||||
var clickEllipse = function(){
|
||||
if (toolButtonClick('#tools_ellipse_show')) {
|
||||
svgCanvas.setMode('ellipse');
|
||||
}
|
||||
$('#tools_ellipse_show').attr('src', 'images/ellipse.png');
|
||||
}
|
||||
};
|
||||
|
||||
var clickFHEllipse = function(){
|
||||
if (toolButtonClick('#tools_ellipse_show')) {
|
||||
svgCanvas.setMode('fhellipse');
|
||||
}
|
||||
$('#tools_ellipse_show').attr('src', 'images/freehand-circle.png');
|
||||
}
|
||||
};
|
||||
|
||||
// Delete is a contextual tool that only appears in the ribbon if
|
||||
// an element has been selected
|
||||
|
|
@ -350,37 +354,37 @@ function svg_edit_setup() {
|
|||
if (selectedElement != null || multiselected) {
|
||||
svgCanvas.deleteSelectedElements();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var moveToTopSelected = function() {
|
||||
if (selectedElement != null) {
|
||||
svgCanvas.moveToTopSelectedElement();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var moveToBottomSelected = function() {
|
||||
if (selectedElement != null) {
|
||||
svgCanvas.moveToBottomSelectedElement();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var moveSelected = function(dx,dy) {
|
||||
if (selectedElement != null || multiselected) {
|
||||
svgCanvas.moveSelectedElement(dx,dy);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var clickText = function(){
|
||||
toolButtonClick('#tool_text');
|
||||
svgCanvas.setMode('text');
|
||||
}
|
||||
};
|
||||
|
||||
var clickClear = function(){
|
||||
if( confirm('Do you want to clear the drawing?\nThis will also erase your undo history!') ) {
|
||||
svgCanvas.clear();
|
||||
updateContextPanel();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var clickBold = function(){
|
||||
svgCanvas.setBold( !svgCanvas.getBold() );
|
||||
|
|
@ -394,17 +398,56 @@ function svg_edit_setup() {
|
|||
|
||||
var clickSave = function(){
|
||||
svgCanvas.save();
|
||||
}
|
||||
};
|
||||
|
||||
var clickUndo = function(){
|
||||
if (svgCanvas.getUndoStackSize() > 0)
|
||||
svgCanvas.undo();
|
||||
}
|
||||
};
|
||||
|
||||
var clickRedo = function(){
|
||||
if (svgCanvas.getRedoStackSize() > 0)
|
||||
svgCanvas.redo();
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: prevent 'u' from showing up in the textarea
|
||||
// TODO: prevent extra carriage returns
|
||||
// TODO: properly size the text area during resize
|
||||
// TODO: properly handle error conditions (error msg dialog)
|
||||
// TODO: prevent @style showing up on the svg element
|
||||
// TODO: create new button or Source Editor
|
||||
var showSourceEditor = function(){
|
||||
if (editingsource) return;
|
||||
editingsource = true;
|
||||
var str = svgCanvas.getSvgString();
|
||||
console.log(str);
|
||||
$('#svg_source_textarea').val(str);
|
||||
$('#svg_source_editor').fadeIn();
|
||||
properlySourceSizeTextArea();
|
||||
};
|
||||
|
||||
var properlySourceSizeTextArea = function(){
|
||||
// TODO: remove magic numbers here
|
||||
var height = ($(window).height() - 115)/(12*1.5);
|
||||
$('#svg_source_textarea').attr('rows', height);
|
||||
};
|
||||
|
||||
var hideSourceEditor = function(){
|
||||
if (!editingsource) return;
|
||||
|
||||
if (svgCanvas.setSvgString($('#svg_source_textarea').val())) {
|
||||
console.log('yo');
|
||||
}
|
||||
$('#svg_source_editor').hide();
|
||||
editingsource = false;
|
||||
};
|
||||
|
||||
// TODO: add canvas-centering code in here
|
||||
$(window).resize(function(evt) {
|
||||
if (!editingsource) return;
|
||||
|
||||
properlySourceSizeTextArea();
|
||||
});
|
||||
|
||||
$('#tool_select').click(clickSelect);
|
||||
$('#tool_path').click(clickPath);
|
||||
|
|
@ -418,13 +461,14 @@ function svg_edit_setup() {
|
|||
$('#tool_text').click(clickText);
|
||||
$('#tool_clear').click(clickClear);
|
||||
$('#tool_save').click(clickSave);
|
||||
$('#tool_source').click(showSourceEditor);
|
||||
$('#tool_delete').click(deleteSelected);
|
||||
$('#tool_delete_multi').click(deleteSelected);
|
||||
$('#tool_move_top').click(moveToTopSelected);
|
||||
$('#tool_move_bottom').click(moveToBottomSelected);
|
||||
$('#tool_undo').click(clickUndo);
|
||||
$('#tool_redo').click(clickRedo);
|
||||
// these two lines are required to make Opera work properly with the new flyout mechanism
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
$('#tools_rect_show').click(clickSquare);
|
||||
$('#tools_ellipse_show').click(clickCircle);
|
||||
$('#tool_bold').mousedown(clickBold);
|
||||
|
|
@ -438,6 +482,9 @@ function svg_edit_setup() {
|
|||
$('#tool_save').mousedown(function(){$('#tool_save').addClass('tool_button_current');});
|
||||
$('#tool_save').mouseup(function(){$('#tool_save').removeClass('tool_button_current');});
|
||||
$('#tool_save').mouseout(function(){$('#tool_save').removeClass('tool_button_current');});
|
||||
$('#tool_source').mousedown(function(){$('#tool_source').addClass('tool_button_current');});
|
||||
$('#tool_source').mouseup(function(){$('#tool_source').removeClass('tool_button_current');});
|
||||
$('#tool_source').mouseout(function(){$('#tool_source').removeClass('tool_button_current');});
|
||||
$('#tool_delete').mousedown(function(){$('#tool_delete').addClass('tool_button_current');});
|
||||
$('#tool_delete').mouseup(function(){$('#tool_delete').removeClass('tool_button_current');});
|
||||
$('#tool_delete').mouseout(function(){$('#tool_delete').removeClass('tool_button_current');});
|
||||
|
|
@ -479,6 +526,8 @@ function svg_edit_setup() {
|
|||
$(document).bind('keydown', {combi:'z', disableInInput: true}, clickUndo);
|
||||
$(document).bind('keydown', {combi:'shift+z', disableInInput: true}, clickRedo);
|
||||
$(document).bind('keydown', {combi:'y', disableInInput: true}, clickRedo);
|
||||
$(document).bind('keydown', {combi:'u', disableInInput: true}, showSourceEditor);
|
||||
$(document).bind('keydown', {combi:'esc', disableInInput: false}, hideSourceEditor);
|
||||
// temporary binding to test setSvgString()
|
||||
/*
|
||||
$(document).bind('keydown', {combi:'t', disableInInput: true}, function() {
|
||||
|
|
@ -609,7 +658,8 @@ function svg_edit_setup() {
|
|||
});
|
||||
|
||||
$('#tools_rect_show').mousedown(function(evt){
|
||||
$('#tools_rect').show();
|
||||
$('#tools_rect').show(rect_flyout_speed);
|
||||
rect_flyout_speed = '';
|
||||
// this prevents the 'image drag' behavior in Firefox
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
|
@ -618,7 +668,8 @@ function svg_edit_setup() {
|
|||
});
|
||||
|
||||
$('#tools_ellipse_show').mousedown(function(evt){
|
||||
$('#tools_ellipse').show();
|
||||
$('#tools_ellipse').show(ellipse_flyout_speed);
|
||||
ellipse_flyout_speed = '';
|
||||
// this prevents the 'image drag' behavior in Firefox
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ var svgWhiteList = {
|
|||
"ellipse": ["cx", "cy", "fill", "fill-opacity", "id", "stroke", "rx", "ry", "stroke-opacity", "stroke-width", "stroke-dasharray"],
|
||||
"line": ["fill", "fill-opacity", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "x1", "x2", "y1", "y2"],
|
||||
"path": ["d", "fill", "fill-opacity", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"],
|
||||
"rect": ["fill", "fill-opacity", "height", "id", "rx", "ry", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "width"],
|
||||
"rect": ["fill", "fill-opacity", "height", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "width", "x", "y"],
|
||||
"svg": ["id", "height", "width", "xmlns"],
|
||||
"text": ["font-family", "font-size", "font-style", "font-weight", "id", "x", "y"],
|
||||
};
|
||||
|
|
@ -501,9 +501,7 @@ function SvgCanvas(c)
|
|||
obj_num++;
|
||||
id = getId();
|
||||
}
|
||||
console.log(id);
|
||||
return id;
|
||||
|
||||
return id;
|
||||
};
|
||||
|
||||
var call = function(event, arg) {
|
||||
|
|
@ -620,7 +618,9 @@ function SvgCanvas(c)
|
|||
out.push(svgToString(childs.item(i), indent));
|
||||
} else if (child.nodeType == 3) { // text node
|
||||
bOneLine = true;
|
||||
out.push(child.nodeValue + "");
|
||||
if (child.nodeValue != "") {
|
||||
out.push(child.nodeValue + "");
|
||||
}
|
||||
}
|
||||
}
|
||||
indent--;
|
||||
|
|
@ -1338,6 +1338,7 @@ function SvgCanvas(c)
|
|||
// FIXME: after parsing in the new file, how do we synchronize getId()?
|
||||
this.setSvgString = function(xmlString) {
|
||||
try {
|
||||
console.log(xmlString);
|
||||
// convert string into XML document
|
||||
var newDoc = Utils.text2xml(xmlString);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue