diff --git a/CHANGES b/CHANGES
index f78a6d30..d043438a 100644
--- a/CHANGES
+++ b/CHANGES
@@ -1,8 +1,9 @@
2.0.1 - ???? ??, ????
---------------------
-* added tooltips (by codedread)
-* fix flyout menus (by codedread)
-* ask before clearing the drawing (by martin.vidner)
+* added tooltips (patch by codedread)
+* fix flyout menus (patch by codedread)
+* ask before clearing the drawing (suggested by martin.vidner)
+* control group, fill and stroke opacity (suggested by coderead)
2.0 - June 03, 2009
------------------
diff --git a/svg-editor.css b/svg-editor.css
index ed7db647..69b01131 100644
--- a/svg-editor.css
+++ b/svg-editor.css
@@ -16,6 +16,7 @@
width: 640px;
height: 480px;
border: 1px solid #808080;
+ border-left: none;
}
#svg_editor #svgcanvas {
@@ -26,6 +27,7 @@
#svg_editor div#palette_holder {
border: 1px solid #808080;
border-top: none;
+ border-left: none;
float: left;
width: 640px;
overflow-x: scroll;
@@ -70,9 +72,8 @@
#tools {
background: #E8E8E8;
- height: 504px;
+ height: 534px;
border: 1px solid #808080;
- border-right: none;
padding: 4px;
}
diff --git a/svg-editor.html b/svg-editor.html
index 46c76fbd..5ff29c57 100644
--- a/svg-editor.html
+++ b/svg-editor.html
@@ -52,6 +52,18 @@
fill
+
@@ -75,6 +87,35 @@
+
+
+
+
+
+
+
diff --git a/svg-editor.js b/svg-editor.js
index b21e8039..0df02caf 100644
--- a/svg-editor.js
+++ b/svg-editor.js
@@ -21,6 +21,18 @@ $(document).ready(function(){
SvgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
});
+ $('#stroke_opacity').change(function(){
+ SvgCanvas.setStrokeOpacity(this.options[this.selectedIndex].value);
+ });
+
+ $('#fill_opacity').change(function(){
+ SvgCanvas.setFillOpacity(this.options[this.selectedIndex].value);
+ });
+
+ $('#group_opacity').change(function(){
+ SvgCanvas.setOpacity(this.options[this.selectedIndex].value);
+ });
+
$('.palette_item').click(function(){
color = $(this).css('background-color');
if (color == 'transparent') {
diff --git a/svgcanvas.js b/svgcanvas.js
index 696d5e13..aefb7183 100644
--- a/svgcanvas.js
+++ b/svgcanvas.js
@@ -25,6 +25,8 @@ function SvgCanvas(doc)
var current_stroke_width = 1;
var current_stroke_style = "none";
var current_opacity = 1;
+ var current_stroke_opacity = 1;
+ var current_fill_opacity = 1;
var freehand_min_x = null;
var freehand_max_x = null;
var freehand_min_y = null;
@@ -147,7 +149,8 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": 0.5
+ "stroke-opacity": current_stroke_opacity,
+ "opacity": current_opacity / 2
}
});
freehand_min_x = x;
@@ -172,7 +175,9 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": 0.5
+ "stroke-opacity": current_stroke_opacity,
+ "fill-opacity": current_fill_opacity,
+ "opacity": current_opacity / 2
}
});
break;
@@ -189,7 +194,8 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": 0.5
+ "stroke-opacity": current_stroke_opacity,
+ "opacity": current_opacity / 2
}
});
break;
@@ -206,7 +212,9 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": 0.5
+ "stroke-opacity": current_stroke_opacity,
+ "fill-opacity": current_fill_opacity,
+ "opacity": current_opacity / 2
}
});
break;
@@ -224,7 +232,9 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": 0.5
+ "stroke-opacity": current_stroke_opacity,
+ "fill-opacity": current_fill_opacity,
+ "opacity": current_opacity / 2
}
});
break;
@@ -337,6 +347,7 @@ function SvgCanvas(doc)
d_attr = null;
element = svgdoc.getElementById("path_" + obj_num);
element.setAttribute("opacity", current_opacity);
+ element.setAttribute("stroke-opacity", current_stroke_opacity);
obj_num++;
break;
case "line":
@@ -347,6 +358,7 @@ function SvgCanvas(doc)
element = null;
} else {
element.setAttribute("opacity", current_opacity);
+ element.setAttribute("stroke-opacity", current_stroke_opacity);
obj_num++;
}
break;
@@ -359,6 +371,8 @@ function SvgCanvas(doc)
element = null;
} else {
element.setAttribute("opacity", current_opacity);
+ element.setAttribute("stroke-opacity", current_stroke_opacity);
+ element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++;
}
break;
@@ -369,6 +383,8 @@ function SvgCanvas(doc)
element = null;
} else {
element.setAttribute("opacity", current_opacity);
+ element.setAttribute("stroke-opacity", current_stroke_opacity);
+ element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++;
}
break;
@@ -380,6 +396,8 @@ function SvgCanvas(doc)
element = null;
} else {
element.setAttribute("opacity", current_opacity);
+ element.setAttribute("stroke-opacity", current_stroke_opacity);
+ element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++;
}
break;
@@ -401,7 +419,9 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": current_opacity
+ "opacity": current_opacity,
+ "stroke-opacity": current_stroke_opacity,
+ "fill-opacity": current_fill_opacity
}
});
obj_num++;
@@ -425,7 +445,9 @@ function SvgCanvas(doc)
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
- "opacity": current_opacity
+ "opacity": current_opacity,
+ "stroke-opacity": current_stroke_opacity,
+ "fill-opacity": current_fill_opacity
}
});
obj_num++;
@@ -479,6 +501,18 @@ function SvgCanvas(doc)
current_stroke_style = val;
}
+ this.setOpacity = function(val) {
+ current_opacity = val;
+ }
+
+ this.setFillOpacity = function(val) {
+ current_fill_opacity = val;
+ }
+
+ this.setStrokeOpacity = function(val) {
+ current_stroke_opacity = val;
+ }
+
this.setup = function(evt) {
assignAttributes(svgroot, {
"onmouseup": "svgcanvas.mouseUp(evt)",