diff --git a/images/circle.png b/images/circle.png index 4e7c247b..e7bd228b 100644 Binary files a/images/circle.png and b/images/circle.png differ diff --git a/images/clear.png b/images/clear.png index 448bfa53..514710d1 100644 Binary files a/images/clear.png and b/images/clear.png differ diff --git a/images/delete.png b/images/delete.png index 2a85f02b..d586098e 100644 Binary files a/images/delete.png and b/images/delete.png differ diff --git a/images/line.png b/images/line.png index 2015d85d..37975742 100644 Binary files a/images/line.png and b/images/line.png differ diff --git a/images/path.png b/images/path.png index 341408d5..9255cc50 100644 Binary files a/images/path.png and b/images/path.png differ diff --git a/images/rect.png b/images/rect.png index 37dc66aa..0ca71a67 100644 Binary files a/images/rect.png and b/images/rect.png differ diff --git a/images/select.png b/images/select.png index 0259c9c0..1d741f16 100644 Binary files a/images/select.png and b/images/select.png differ diff --git a/images/submit.png b/images/submit.png index 53d3d6e3..9c4c8d9d 100644 Binary files a/images/submit.png and b/images/submit.png differ diff --git a/svg-editor.css b/svg-editor.css index d36e34ad..3feb1e1b 100644 --- a/svg-editor.css +++ b/svg-editor.css @@ -1,4 +1,18 @@ -#svg_editor .canvas { +#svg_editor { + font-size: 8pt; + font-family: Verdana, Helvetica, Arial; +} + +#svg_editor hr { + border: none; + border-bottom: 1px solid #808080; +} + +#svg_editor select { + margin-top: 4px; +} + +#svg_editor .svgcanvas { width: 640px; height: 480px; border: 1px solid #808080; @@ -18,6 +32,7 @@ height: 16px; width: 16px; border: 1px solid #808080; + cursor: pointer; } #fill_color { @@ -48,16 +63,39 @@ float: left; } -.tool_button { - height: 16px; - width: 16px; - border: 4px solid #E8E8E4; +#tools { + background: #E8E8E8; + height: 504px; + border: 1px solid #808080; + border-right: none; + padding: 4px; +} + +.tool_button, .tool_button_current { + height: 24px; + width: 24px; + border: 1px solid red; + margin: 2px; + padding: 2px; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + cursor: pointer; +} + +.tool_button_current { + border-left: 1px solid #808080; + border-top: 1px solid #808080; + border-right: 1px solid #FFFFFF; + border-bottom: 1px solid #FFFFFF; + background-color: #B0B0B0; } #color_pick { position: absolute; display: none; - background: white; + background: #E8E8E8; border: 1px solid #808080; padding: 5px; } @@ -69,3 +107,32 @@ float: left; margin: 5px; } + +#color_pick_ok { + background: #E8E8E8; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; +} + +#tools_rect, #tools_circle { + position: absolute; + display: none; + height: 28px; + width: 90px; + background: red; + cursor: pointer; + float: left; +} + +#tools_rect div, #tools_circle div { + float: left; + background: #E8E8E8; + border-left: 1px solid #FFFFFF; + border-top: 1px solid #FFFFFF; + border-right: 1px solid #808080; + border-bottom: 1px solid #808080; + height: 28px; + width: 28px; +} diff --git a/svg-editor.html b/svg-editor.html index ba147c18..2473c932 100644 --- a/svg-editor.html +++ b/svg-editor.html @@ -10,40 +10,52 @@ +
+
-
+
+
square
+
rectangle
+
freehand
+
+ +
+
circle
+
ellipse
+
freehand
+
- - - -
- - - -
- - - -
- - - + +
+
+
+
+
+
+
-
Fill +
+ +
fill
-
Stroke +
+ +
stroke
+
+
- +
-
- - +
+ +
diff --git a/svg-editor.js b/svg-editor.js index d899bbb1..e4e070ea 100644 --- a/svg-editor.js +++ b/svg-editor.js @@ -8,6 +8,11 @@ $(document).ready(function(){ }); $('#palette').append(str); + var pos = $('#tools_rect_show').position(); + $('#tools_rect').css({'left': pos.left+2, 'top': pos.top+2}); + pos = $('#tools_circle_show').position(); + $('#tools_circle').css({'left': pos.left+2, 'top': pos.top+2}); + $('#stroke_width').change(function(){ SvgCanvas.setStrokeWidth(this.options[this.selectedIndex].value); }); @@ -40,42 +45,68 @@ $(document).ready(function(){ $('#tool_select').click(function(){ SvgCanvas.setMode('select'); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $(this).addClass('tool_button_current'); }); $('#tool_path').click(function(){ SvgCanvas.setMode('path'); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $(this).addClass('tool_button_current'); }); $('#tool_line').click(function(){ SvgCanvas.setMode('line'); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $(this).addClass('tool_button_current'); }); $('#tool_square').click(function(){ SvgCanvas.setMode('square'); + $('#tools_rect').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_rect_show').addClass('tool_button_current'); }); $('#tool_rect').click(function(){ SvgCanvas.setMode('rect'); + $('#tools_rect').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_rect_show').addClass('tool_button_current'); }); $('#tool_fhrect').click(function(){ SvgCanvas.setMode('fhrect'); + $('#tools_rect').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_rect_show').addClass('tool_button_current'); }); $('#tool_circle').click(function(){ SvgCanvas.setMode('circle'); + $('#tools_circle').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_circle_show').addClass('tool_button_current'); }); $('#tool_ellipse').click(function(){ SvgCanvas.setMode('ellipse'); + $('#tools_circle').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_circle_show').addClass('tool_button_current'); }); $('#tool_fhellipse').click(function(){ SvgCanvas.setMode('fhellipse'); + $('#tools_circle').hide(); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tools_circle_show').addClass('tool_button_current'); }); $('#tool_delete').click(function(){ SvgCanvas.setMode('delete'); + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $(this).addClass('tool_button_current'); }); $('#tool_clear').click(function(){ @@ -124,6 +155,22 @@ $(document).ready(function(){ picker.setColor($(this).attr('value')); }); + $('#tools_rect_show').click(function(){ + $('#tools_rect').show(); + }); +/* + $('#tools_rect').mouseout(function(){ + $('#tools_rect').hide(); + }); +*/ + $('#tools_circle_show').click(function(){ + $('#tools_circle').show(); + }); +/* + $('#tools_circle').mouseout(function(){ + $('#tools_circle').hide(); + }); +*/ }) function serializeHandler(svg) {