github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- replaced circles in grips with squares

Browse Source 
- circles will be used for rotation
- added simple switch (selectedOperation) which sets it
  (does not modify the behaviour, yet)


git-svn-id: http://svg-edit.googlecode.com/svn/trunk@178 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Pavol Rusnak
2009-06-23 07:48:15 +00:00
parent cf2a8a9005
commit 07c349048a
3 changed files with 110 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
editor/svg-editor.html
View File

@@ -38,9 +38,9 @@
<!-- Buttons when something is selected -->
<div id="selected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [X]" alt="Delete"/>
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top" alt="Top"/>
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom" alt="Bottom"/>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete]" alt="Delete"/>
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Page Up]" alt="Top"/>
<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Page Down]" alt="Bottom"/>
</div>
<!-- TODO: also add x, y, width, height -->

34
editor/svg-editor.js
View File

@@ -42,7 +42,7 @@ function svg_edit_setup() {
strokeColor = 'url(\'images/none.png\')';
}
$('#stroke_color').css('background', strokeColor);
// update fill opacity
var fillOpacity = elem.getAttribute("fill-opacity");
if (fillOpacity == null || fillColor == "") {
@@ -80,10 +80,10 @@ function svg_edit_setup() {
strokeDashArray = "none";
}
$('#stroke_style').val(strokeDashArray);
updateToolButtonState();
} // if (elem != null)
updateContextPanel();
}
@@ -109,9 +109,9 @@ function svg_edit_setup() {
$('#text').select();
break;
}
}
}
}
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
@@ -148,19 +148,19 @@ function svg_edit_setup() {
$('#group_opacity').change(function(){
svgCanvas.setOpacity(this.options[this.selectedIndex].value);
});
$('#font_size').change(function(){
svgCanvas.setFontSize(this.options[this.selectedIndex].value);
});
$('#font_family').change(function(){
svgCanvas.setFontFamily(this.options[this.selectedIndex].value);
});
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('#rect_radius').change(function(){
svgCanvas.setRectRadius(this.options[this.selectedIndex].value);
});
@@ -177,7 +177,7 @@ function svg_edit_setup() {
}
if (evt.shiftKey) svgCanvas.setStrokeColor(color);
else svgCanvas.setFillColor(color);
updateToolButtonState();
updateToolButtonState();
});
// This is a common function used when a tool has been clicked (chosen)
@@ -187,7 +187,7 @@ function svg_edit_setup() {
// - adds the tool_button_current class to the button passed in
var toolButtonClick = function(button) {
if ($(button).hasClass('tool_button_disabled')) return false;
$('#styleoverrides').text('');
$('.tools_flyout').hide();
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
@@ -303,7 +303,7 @@ function svg_edit_setup() {
$('#tool_move_top').click(moveToTopSelected);
$('#tool_move_bottom').click(moveToBottomSelected);
// added these event handlers for all the push buttons so they
// added these event handlers for all the push buttons so they
// behave more like buttons being pressed-in and not images
$('#tool_clear').mousedown(function(){$('#tool_clear').addClass('tool_button_current');});
$('#tool_clear').mouseup(function(){$('#tool_clear').removeClass('tool_button_current');});
@@ -332,8 +332,10 @@ function svg_edit_setup() {
$(document).bind('keydown', {combi:'6', disableInInput: true}, clickText);
$(document).bind('keydown', {combi:'N', disableInInput: true}, clickClear);
$(document).bind('keydown', {combi:'S', disableInInput: true}, clickSave);
$(document).bind('keydown', {combi:'X', disableInInput: true}, deleteSelected);
$(document).bind('keydown', {combi:'del', disableInInput: true}, deleteSelected);
$(document).bind('keydown', {combi:'pageup', disableInInput: true}, moveToTopSelected);
$(document).bind('keydown', {combi:'pagedown', disableInInput: true}, moveToBottomSelected);
var colorPicker = function(elem) {
$('.tools_flyout').hide();
var oldbg = elem.css('background');
@@ -399,7 +401,7 @@ function svg_edit_setup() {
$(button).removeClass('tool_button_disabled').addClass('tool_button');
}
}
if (bNoStroke && bNoFill) {
for (index in buttonsNeedingFillAndStroke) {
var button = buttonsNeedingFillAndStroke[index];
@@ -416,7 +418,7 @@ function svg_edit_setup() {
}
}
}
$('#fill_color').click(function(){
colorPicker($(this));
updateToolButtonState();

146
editor/svgcanvas.js
View File

@@ -47,7 +47,7 @@ function SvgCanvas(c)
var selected = null;
var selectedOutline = null;
var selectedBBox = null;
var selectedGrips = { "nw":null,
var selectedGrips = { "nw":null,
"n":null,
"ne":null,
"w":null,
@@ -56,6 +56,7 @@ function SvgCanvas(c)
"s":null,
"se":null,
};
var selectedOperation = 'resize'; // could be {resize,rotate}
var events = {};
// private functions
@@ -145,7 +146,7 @@ function SvgCanvas(c)
var remapy = function(y) {return ((y-box.y)/box.height)*selectedBBox.height + selectedBBox.y;}
var scalew = function(w) {return w*selectedBBox.width/box.width;}
var scaleh = function(h) {return h*selectedBBox.height/box.height;}
selected.removeAttribute("transform");
switch (selected.tagName)
{
@@ -225,32 +226,51 @@ function SvgCanvas(c)
selectedBox.y.baseVal.value = t;
selectedBox.width.baseVal.value = w;
selectedBox.height.baseVal.value = h;
selectedGrips.nw.cx.baseVal.value = l;
selectedGrips.nw.cy.baseVal.value = t;
selectedGrips.ne.cx.baseVal.value = l+w;
selectedGrips.ne.cy.baseVal.value = t;
selectedGrips.sw.cx.baseVal.value = l;
selectedGrips.sw.cy.baseVal.value = t+h;
selectedGrips.se.cx.baseVal.value = l+w;
selectedGrips.se.cy.baseVal.value = t+h;
selectedGrips.n.cx.baseVal.value = l+w/2;
selectedGrips.n.cy.baseVal.value = t;
selectedGrips.w.cx.baseVal.value = l;
selectedGrips.w.cy.baseVal.value = t+h/2;
selectedGrips.e.cx.baseVal.value = l+w;
selectedGrips.e.cy.baseVal.value = t+h/2;
selectedGrips.s.cx.baseVal.value = l+w/2;
selectedGrips.s.cy.baseVal.value = t+h;
}
if (selectedOperation == 'resize') {
selectedGrips.nw.x.baseVal.value = l-3;
selectedGrips.nw.y.baseVal.value = t-3;
selectedGrips.ne.x.baseVal.value = l+w-3;
selectedGrips.ne.y.baseVal.value = t-3;
selectedGrips.sw.x.baseVal.value = l-3;
selectedGrips.sw.y.baseVal.value = t+h-3;
selectedGrips.se.x.baseVal.value = l+w-3;
selectedGrips.se.y.baseVal.value = t+h-3;
selectedGrips.n.x.baseVal.value = l+w/2-3;
selectedGrips.n.y.baseVal.value = t-3;
selectedGrips.w.x.baseVal.value = l-3;
selectedGrips.w.y.baseVal.value = t+h/2-3;
selectedGrips.e.x.baseVal.value = l+w-3;
selectedGrips.e.y.baseVal.value = t+h/2-3;
selectedGrips.s.x.baseVal.value = l+w/2-3;
selectedGrips.s.y.baseVal.value = t+h-3;
} else if (selectedOperation == 'rotate') {
selectedGrips.nw.cx.baseVal.value = l;
selectedGrips.nw.cy.baseVal.value = t;
selectedGrips.ne.cx.baseVal.value = l+w;
selectedGrips.ne.cy.baseVal.value = t;
selectedGrips.sw.cx.baseVal.value = l;
selectedGrips.sw.cy.baseVal.value = t+h;
selectedGrips.se.cx.baseVal.value = l+w;
selectedGrips.se.cy.baseVal.value = t+h;
selectedGrips.n.cx.baseVal.value = l+w/2;
selectedGrips.n.cy.baseVal.value = t;
selectedGrips.w.cx.baseVal.value = l;
selectedGrips.w.cy.baseVal.value = t+h/2;
selectedGrips.e.cx.baseVal.value = l+w;
selectedGrips.e.cy.baseVal.value = t+h/2;
selectedGrips.s.cx.baseVal.value = l+w/2;
selectedGrips.s.cy.baseVal.value = t+h;
}
}
}
// public events
// call this function to set the selected element
// call this function with null to clear the selected element
var selectElement = function(newSelected)
var selectElement = function(newSelected)
{
if (selected == newSelected) return;
// remove selected outline from previously selected element
if (selected != null && selectedOutline != null) {
// remove from DOM and store reference in JS but only if it exists in the DOM
@@ -259,15 +279,15 @@ function SvgCanvas(c)
selectedOutline = theOutline;
} catch(e) { }
}
selected = newSelected;
if (selected != null) {
selectedBBox = selected.getBBox();
// we create this element for the first time here
if (selectedOutline == null) {
// create a group that will hold all the elements that make
// create a group that will hold all the elements that make
// up the selected outline
selectedOutline = addSvgElementFromJson({
"element": "g",
@@ -275,7 +295,7 @@ function SvgCanvas(c)
"id": "selectedGroup",
}
});
// add the bounding box
selectedOutline.appendChild( addSvgElementFromJson({
"element": "rect",
@@ -294,17 +314,29 @@ function SvgCanvas(c)
// add the corner grips
for (dir in selectedGrips) {
var cursType = (dir+"-resize");
selectedGrips[dir] = selectedOutline.appendChild( addSvgElementFromJson({
"element": "circle",
"attr": {
"id": (dir+"_grip"),
"fill": "blue",
"r": 3,
"style": ("cursor:"+cursType),
}
}) );
$('#'+selectedGrips[dir].id).mousedown( function() {
if (selectedOperation == 'resize') {
selectedGrips[dir] = selectedOutline.appendChild( addSvgElementFromJson({
"element": "rect",
"attr": {
"id": dir + "_grip",
"fill": "blue",
"width": 6,
"height": 6,
"style": ("cursor:" + dir + "-resize"),
}
}) );
} else if (selectedOperation == 'rotate') {
selectedGrips[dir] = selectedOutline.appendChild( addSvgElementFromJson({
"element": "circle",
"attr": {
"id": (dir + "_grip"),
"fill": "blue",
"r": 3,
"style": "cursor: crosshair",
}
}) );
}
$('#'+selectedGrips[dir].id).mousedown( function() {
current_mode = "resize";
current_resize_mode = this.id.substr(0,this.id.indexOf("_"));
});
@@ -313,7 +345,7 @@ function SvgCanvas(c)
// recalculate size and then re-append to bottom of document
recalculateSelectedOutline();
svgroot.appendChild(selectedOutline);
// set all our current styles to the selected styles
current_fill = selected.getAttribute("fill");
current_fill_opacity = selected.getAttribute("fill-opacity");
@@ -325,17 +357,17 @@ function SvgCanvas(c)
current_font_size = selected.getAttribute("font-size");
current_font_family = selected.getAttribute("font-family");
}
// do now show resize grips on text elements
var gripDisplay = (selected.tagName == "text" ? "none" : "inline");
for (dir in selectedGrips) {
selectedGrips[dir].setAttribute("display", gripDisplay);
}
}
call("selected", selected);
}
var mouseDown = function(evt)
{
var x = evt.pageX - container.offsetLeft;
@@ -510,14 +542,14 @@ function SvgCanvas(c)
selectedBBox.y += dy;
var ts = "translate(" + dx + "," + dy + ")";
selected.setAttribute("transform", ts);
recalculateSelectedOutline();
recalculateSelectedOutline();
}
break;
case "resize":
// we track the resize bounding box and translate/scale the selected element
// while the mouse is down, when mouse goes up, we use this to recalculate
// the shape's coordinates
var box=selected.getBBox(), left=box.x, top=box.y, width=box.width,
var box=selected.getBBox(), left=box.x, top=box.y, width=box.width,
height=box.height, dx=(x-start_x), dy=(y-start_y);
var tx=0, ty=0, sx=1, sy=1;
var ts = null;
@@ -535,8 +567,8 @@ function SvgCanvas(c)
tx = dx;
sx = (width-dx)/width;
}
selectedBBox.x = left+tx;
selectedBBox.x = left+tx;
selectedBBox.y = top+ty;
selectedBBox.width = width*sx;
selectedBBox.height = height*sy;
@@ -549,13 +581,13 @@ function SvgCanvas(c)
selectedBBox.y += selectedBBox.height;
selectedBBox.height = -selectedBBox.height;
}
ts = "translate(" + (left+tx) + "," + (top+ty) + ") scale(" + (sx) + "," + (sy) +
ts = "translate(" + (left+tx) + "," + (top+ty) + ") scale(" + (sx) + "," + (sy) +
") translate(" + (-left) + "," + (-top) + ")";
selected.setAttribute("transform", ts);
recalculateSelectedOutline();
break;
break;
case "text":
shape.setAttribute("x", x);
shape.setAttribute("y", y);
@@ -607,7 +639,7 @@ function SvgCanvas(c)
break;
}
}
var mouseUp = function(evt)
{
if (!started) return;
@@ -860,7 +892,7 @@ function SvgCanvas(c)
this.getFontFamily = function() {
return current_font_family;
}
this.setFontFamily = function(val) {
current_font_family = val;
if (selected != null) {
@@ -873,7 +905,7 @@ function SvgCanvas(c)
this.getFontSize = function() {
return current_font_size;
}
this.setFontSize = function(val) {
current_font_size = val;
if (selected != null) {
@@ -882,12 +914,12 @@ function SvgCanvas(c)
call("changed", selected);
}
}
this.getText = function() {
if (selected == null) { return ""; }
return selected.textContent;
}
this.setTextContent = function(val) {
if (selected != null) {
selected.textContent = val;
@@ -895,7 +927,7 @@ function SvgCanvas(c)
call("changed", selected);
}
}
this.setRectRadius = function(val) {
if (selected != null && selected.tagName == "rect") {
selected.setAttribute("rx", val);
@@ -903,7 +935,7 @@ function SvgCanvas(c)
call("changed", selected);
}
}
$(container).mouseup(mouseUp);
$(container).mousedown(mouseDown);
$(container).mousemove(mouseMove);
@@ -950,7 +982,7 @@ var Utils = {
// public domain. It would be nice if you left this header intact.
// Base64 code from Tyler Akins -- http://rumkin.com
// schiller: Removed string concatenation in favour of Array.join() optimization,
// schiller: Removed string concatenation in favour of Array.join() optimization,
// also precalculate the size of the array needed.
"_keyStr" : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",