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

move opacity control to jPicker 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@254 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Pavol Rusnak 2009-07-02 17:19:51 +00:00
parent 616390b297
commit a485b53595
7 changed files with 85 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
editor/jpicker/images/bar-opacity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
editor/jpicker/images/map-opacity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 B

BIN
editor/jpicker/images/rangearrows2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 B

47
editor/jpicker/jpicker.css
View File

@ -34,10 +34,10 @@
border: 1px outset #666;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
height: 320px;
height: 330px;
margin: 0px;
padding: 5px;
width: 560px;
width: 550px;
}
.jPicker_table td {
margin: 0px;
@ -54,7 +54,7 @@
border: 2px inset #eee;
cursor: crosshair;
height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
margin: 12px 5px;
margin: 12px 5px 0px 5px;
overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
padding: 0px;
position: relative; /* make this element an absolute positioning container */
@ -64,7 +64,7 @@ div[class="jPicker_ColorMap"] {
height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2 {
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_AlphaBar_l1, .jPicker_AlphaBar_l2 {
background-repeat: no-repeat;
display: block;
height: 100%;
@ -80,6 +80,9 @@ div[class="jPicker_ColorMap"] {
.jPicker_ColorMap_l2 {
background-color: transparent;
}
.jPicker_ColorMap_l3 {
background-repeat: repeat;
}
.jPicker_ColorMap_Arrow {
display: block;
position: absolute;
@ -88,7 +91,7 @@ div[class="jPicker_ColorMap"] {
border: 2px inset #eee;
cursor: n-resize;
height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
margin: 12px 10px;
margin: 12px 10px 0px 5px;
padding: 0px;
position: relative;
width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
@ -97,15 +100,6 @@ div[class="jPicker_ColorBar"] {
height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4 {
background-repeat: no-repeat;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3 {
background-color: transparent;
background-image: none;
@ -118,6 +112,24 @@ div[class="jPicker_ColorBar"] {
left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
position: absolute;
}
.jPicker_AlphaBar {
border: 2px inset #eee;
cursor: e-resize;
height: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
margin: 10px 5px 4px 5px;
padding: 0px;
position: relative;
width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
}
div[class="jPicker_AlphaBar"] {
height: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_AlphaBar_Arrow {
display: block;
top: -10px; /* (arrow height / 2) - (element height / 2) - position arrows' center in elements' center */
position: absolute;
}
.jPicker_Preview {
font-size: x-small;
text-align: center;
@ -172,6 +184,13 @@ div[class="jPicker_ColorBar"] {
margin: 0px 19px 0px 5px;
width: 50px;
}
td.jPicker_OpacityCol {
padding-top: 12px;
text-indent: -8px;
}
td.jPicker_HexCol {
text-align: left;
}
.jPicker_Grid {
text-align: center;
}

2
editor/jpicker/jpicker.js
View File

File diff suppressed because one or more lines are too long

30
editor/svg-editor.html
View File

@ -162,37 +162,11 @@
<tr>
<td>fill:</td>
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<td>
<select id="fill_opacity" title="Change fill opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</td>
<td><div id="fill_opacity">N/A</div></td>
</tr><tr>
<td>stroke:</td>
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td>
<select id="stroke_opacity" title="Change stroke opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</td>
<td><div id="stroke_opacity">100 %</div></td>
<td>
<select id="stroke_width" title="Change stroke width">
<option selected="selected" value="1">1</option>

72
editor/svg-editor.js
View File

@ -79,8 +79,8 @@ function svg_edit_setup() {
}
$('#stroke_color').css('background', strokeColor);
$('#fill_opacity').val(((selectedElement.getAttribute("fill-opacity")||1.0)*100)+" %");
$('#stroke_opacity').val(((selectedElement.getAttribute("stroke-opacity")||1.0)*100)+" %");
$('#fill_opacity').html(((selectedElement.getAttribute("fill-opacity")||1.0)*100)+" %");
$('#stroke_opacity').html(((selectedElement.getAttribute("stroke-opacity")||1.0)*100)+" %");
$('#group_opacity').val(((selectedElement.getAttribute("opacity")||1.0)*100)+" %");
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
@ -189,14 +189,6 @@ function svg_edit_setup() {
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);
});
@ -222,17 +214,29 @@ function svg_edit_setup() {
});
$('.palette_item').click(function(evt){
var id = (evt.shiftKey ? '#stroke_color' : '#fill_color');
var id = (evt.shiftKey ? '#stroke_' : '#fill_');
color = $(this).css('background-color');
// Webkit-based browsers returned 'initial' here for no stroke
if (color == 'transparent' || color == 'initial') {
color = 'none';
$(id).css('background', 'url(\'images/none.png\')');
$(id + "color").css('background', 'url(\'images/none.png\')');
$(id + "opacity").html("N/A");
} else {
$(id).css('background', color);
$(id + "color").css('background', color);
}
if (evt.shiftKey) {
svgCanvas.setStrokeColor(color);
if (color != 'none' && $("#stroke_opacity").html() == 'N/A') {
svgCanvas.setStrokeOpacity(100);
$("#stroke_opacity").html("100 %");
}
} else {
svgCanvas.setFillColor(color);
if (color != 'none' && $("#fill_opacity").html() == 'N/A') {
svgCanvas.setFillOpacity(100);
$("#fill_opacity").html("100 %");
}
}
if (evt.shiftKey) svgCanvas.setStrokeColor(color);
else svgCanvas.setFillColor(color);
updateToolButtonState();
});
@ -440,44 +444,66 @@ function svg_edit_setup() {
var colorPicker = function(elem) {
var oldbg = elem.css('background');
var color = elem.css('background-color');
var oldopacity = "100 %";
if (elem.attr('id') == 'stroke_color') {
oldopacity = $('#stroke_opacity').html();
}
if (elem.attr('id') == 'fill_color') {
oldopacity = $('#fill_opacity').html();
}
var was_none = false;
if (color == 'transparent' || color == 'initial') {
color = new $.jPicker.Color({ hex: 'ffffff' });
color = new $.jPicker.Color({ hex: 'ffffff', a: 0 });
was_none = true;
} else {
var alpha;
if (oldopacity == 'N/A') {
alpha = 0;
} else {
alpha = oldopacity.split(' ')[0];
}
if (color.length == 7 && color[0] == '#') { // #hheexx notation
color = new $.jPicker.Color( { hex: color.substring(1,7) } );
color = new $.jPicker.Color( { hex: color.substring(1,7) , a: alpha } );
} else if (color.substring(0,4) == 'rgb(' && color[color.length-1] == ')') { // rgb(r,g,b) notation
var rgb = color.substring(4,color.length-1).split(',');
color = new $.jPicker.Color({ r: rgb[0], g: rgb[1], b: rgb[2] });
color = new $.jPicker.Color({ r: rgb[0], g: rgb[1], b: rgb[2], a: alpha });
} else {
color = new $.jPicker.Color({ hex: 'ffffff' });
color = new $.jPicker.Color({ hex: 'ffffff', a: alpha });
}
}
var pos = elem.position();
picker = 'stroke';
$('#color_picker').css({'left': pos.left - 140, 'bottom': 104 - pos.top}).jPicker({
images: { clientPath: "jpicker/images/" },
color: { active: color }
color: { active: color, alphaSupport: true }
}, function(color){
elem.css('background', '#' + this.settings.color.active.hex);
if (elem.attr('id') == 'stroke_color') {
svgCanvas.setStrokeColor('#' + this.settings.color.active.hex);
svgCanvas.setStrokeOpacity(this.settings.color.active.a/100);
$('#stroke_opacity').html(this.settings.color.active.a+" %");
} else if (elem.attr('id') == 'fill_color') {
svgCanvas.setFillColor('#' + this.settings.color.active.hex);
svgCanvas.setFillOpacity(this.settings.color.active.a/100);
$('#fill_opacity').html(this.settings.color.active.a+" %");
}
$('#color_picker').hide();
}
, function(color){
elem.css('background', '#' + this.settings.color.active.hex);
}
, null
, function(){
elem.css('background', oldbg);
if (elem.attr('id') == 'stroke_color') {
$('#stroke_opacity').html(oldopacity);
} else if (elem.attr('id') == 'fill_color') {
$('#fill_opacity').html(oldopacity);
}
if (was_none) {
if (elem.attr('id') == 'stroke_color') {
svgCanvas.setStrokeColor('none');
$('#stroke_opacity').html('N/A');
} else if (elem.attr('id') == 'fill_color') {
svgCanvas.setFillColor('none');
$('#fill_opacity').html('N/A');
}
}
$('#color_picker').hide();