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

Fix several bugs with gradient picking. Uplift to latest jGraduate. 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@348 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-08-01 05:03:51 +00:00
parent 70c9361e1c
commit d1d91c556e
3 changed files with 172 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
editor/jgraduate/jquery.jgraduate.js
View File

@ -18,13 +18,18 @@ where options is an object literal:
} }
- the Paint object is: - the Paint object is:
{ Paint {
// object describing the color picked used by jPicker type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
solidColor: { hex, }, alpha: Number representing opacity (0-100),
// DOM node for the linear gradient solidColor: String representing #RRGGBB hex of color,
linearGradient: { grad, a, linearGradient: object of interface SVGLinearGradientElement,
} }
- only one of solidColor and linearGradient must be non-null
$.jGraduate.Paint() -> constructs a 'none' color
$.jGraduate.Paint({copy: o}) -> creates a copy of the paint o
$.jGraduate.Paint({hex: "#rrggbb"}) -> creates a solid color paint with hex = "#rrggbb"
$.jGraduate.Paint({linearGradient: o, a: 50}) -> creates a linear gradient paint with opacity=0.5
$.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
- picker accepts the following object as input: - picker accepts the following object as input:
{ {
@ -46,21 +51,44 @@ if(!window.console) {
} }
$.jGraduate = { $.jGraduate = {
Paint: Paint:
function(copy) { function(opt) {
if (copy) { var options = opt || {};
if (copy.solidColor) this.alpha = options.alpha || 100;
this.solidColor = new $.jPicker.Color({ hex: copy.solidColor.hex, // copy paint object
a: copy.solidColor.a }); if (options.copy) {
this.type = options.copy.type;
// FIXME: linearGradient can be an object, but .grad can still be null this.alpha = options.copy.alpha;
if (copy.linearGradient) switch(this.type) {
// Opera throws NOT_SUPPORTED_ERROR if the cloneNode(null), the other browsers do not case "none":
this.linearGradient = { grad: copy.linearGradient.grad ? document.cloneNode(copy.linearGradient.grad, true) : null, this.solidColor = null;
a: copy.linearGradient.a }; this.linearGradient = null;
break;
case "solidColor":
this.solidColor = options.copy.solidColor;
this.linearGradient = null;
break;
case "linearGradient":
this.solidColor = null;
this.linearGradient = options.copy.linearGradient.cloneNode(true);
break;
} }
}
// create linear gradient paint
else if (options.linearGradient) {
this.type = "linearGradient";
this.solidColor = null;
this.linearGradient = options.linearGradient.cloneNode(true);
}
// create solid color paint
else if (options.solidColor) {
this.type = "solidColor";
this.solidColor = options.solidColor;
}
// create empty paint
else { else {
this.solidColor = new $.jPicker.Color({ hex: '000000', a: 100 }); this.type = "none";
this.linearGradient = { grad: null, a: 100 }; this.solidColor = null;
this.linearGradient = null;
} }
} }
}; };
@ -100,29 +128,17 @@ jQuery.fn.jGraduate =
$.extend(true, $this, // public properties, methods, and callbacks $.extend(true, $this, // public properties, methods, and callbacks
{ {
paint: $settings.paint, // make a copy of the incoming paint
paint: new $.jGraduate.Paint({copy: $settings.paint}),
okCallback: $.isFunction($arguments[1]) && $arguments[1] || null, okCallback: $.isFunction($arguments[1]) && $arguments[1] || null,
cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null, cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null,
}); });
var mode = "solidColor", var pos = $this.position(),
pos = $this.position(),
color = null; color = null;
if ($this.paint == null) { if ($this.paint.type == "none") {
$this.paint = { solidColor: new $.jPicker.Color({ hex: 'ffffff', a: 100 }), $this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
linearGradient: { grad: null, a: 100 } };
}
if ($this.paint.linearGradient.grad != null) {
mode = "linearGradient";
$this.paint.solidColor = new $.jPicker.Color({ hex: 'ffffff', a: 100 });
}
else if ($this.paint.solidColor != null) {
$this.paint.linearGradient = { grad: null, a: 100 };
}
else {
return null;
} }
$this.addClass('jGraduate_Picker'); $this.addClass('jGraduate_Picker');
@ -190,11 +206,12 @@ jQuery.fn.jGraduate =
svg.setAttribute('height', MAX); svg.setAttribute('height', MAX);
svg.setAttribute("xmlns", ns.svg); svg.setAttribute("xmlns", ns.svg);
if ($this.paint.linearGradient.grad) { // if we are sent a gradient, import it
$this.paint.linearGradient.grad = svg.appendChild( document.importNode($this.paint.linearGradient.grad, true) ); if ($this.paint.type == "linearGradient") {
$this.paint.linearGradient.grad.id = id+'_jgraduate_grad'; $this.paint.linearGradient.id = id+'_jgraduate_grad';
$this.paint.linearGradient = svg.appendChild(document.importNode($this.paint.linearGradient, true));
} }
else { else { // we create a gradient
var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient')); var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
grad.id = id+'_jgraduate_grad'; grad.id = id+'_jgraduate_grad';
grad.setAttribute('x1','0.0'); grad.setAttribute('x1','0.0');
@ -208,21 +225,21 @@ jQuery.fn.jGraduate =
var end = grad.appendChild(document.createElementNS(ns.svg, 'stop')); var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
end.setAttribute('offset', '1.0'); end.setAttribute('offset', '1.0');
end.setAttribute('stop-color', '#ff0'); end.setAttribute('stop-color', '#ffff00');
$this.paint.linearGradient.grad = grad; $this.paint.linearGradient = grad;
} }
var gradalpha = $this.paint.linearGradient.a; var gradalpha = $this.paint.alpha;
$('#' + id + '_jGraduate_OpacityInput').val(gradalpha); $('#' + id + '_jGraduate_OpacityInput').val(gradalpha);
var posx = parseInt(255*(gradalpha/100)) - 4.5; var posx = parseInt(255*(gradalpha/100)) - 4.5;
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx}); $('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
$('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100); $('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100);
var x1 = parseFloat($this.paint.linearGradient.grad.getAttribute('x1')||0.0); var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0);
var y1 = parseFloat($this.paint.linearGradient.grad.getAttribute('y1')||0.0); var y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0);
var x2 = parseFloat($this.paint.linearGradient.grad.getAttribute('x2')||1.0); var x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0);
var y2 = parseFloat($this.paint.linearGradient.grad.getAttribute('y2')||0.0); var y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
var rect = document.createElementNS(ns.svg, 'rect'); var rect = document.createElementNS(ns.svg, 'rect');
rect.id = id + '_jgraduate_rect'; rect.id = id + '_jgraduate_rect';
@ -267,6 +284,7 @@ jQuery.fn.jGraduate =
// bind GUI elements // bind GUI elements
$('#'+id+'_jGraduate_Ok').bind('click', function() { $('#'+id+'_jGraduate_Ok').bind('click', function() {
$this.paint.type = "linearGradient";
$this.paint.solidColor = null; $this.paint.solidColor = null;
okClicked(); okClicked();
}); });
@ -274,7 +292,7 @@ jQuery.fn.jGraduate =
cancelClicked(); cancelClicked();
}); });
var x1 = $this.paint.linearGradient.grad.getAttribute('x1'); var x1 = $this.paint.linearGradient.getAttribute('x1');
if(!x1) x1 = "0.0"; if(!x1) x1 = "0.0";
x1Input = $('#'+id+'_jGraduate_x1'); x1Input = $('#'+id+'_jGraduate_x1');
x1Input.val(x1); x1Input.val(x1);
@ -282,11 +300,11 @@ jQuery.fn.jGraduate =
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
this.value = 0.0; this.value = 0.0;
} }
$this.paint.linearGradient.grad.setAttribute('x1', this.value); $this.paint.linearGradient.setAttribute('x1', this.value);
beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
}); });
var y1 = $this.paint.linearGradient.grad.getAttribute('y1'); var y1 = $this.paint.linearGradient.getAttribute('y1');
if(!y1) y1 = "0.0"; if(!y1) y1 = "0.0";
y1Input = $('#'+id+'_jGraduate_y1'); y1Input = $('#'+id+'_jGraduate_y1');
y1Input.val(y1); y1Input.val(y1);
@ -294,11 +312,11 @@ jQuery.fn.jGraduate =
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
this.value = 0.0; this.value = 0.0;
} }
$this.paint.linearGradient.grad.setAttribute('y1', this.value); $this.paint.linearGradient.setAttribute('y1', this.value);
beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
}); });
var x2 = $this.paint.linearGradient.grad.getAttribute('x2'); var x2 = $this.paint.linearGradient.getAttribute('x2');
if(!x2) x2 = "1.0"; if(!x2) x2 = "1.0";
x2Input = $('#'+id+'_jGraduate_x2'); x2Input = $('#'+id+'_jGraduate_x2');
x2Input.val(x2); x2Input.val(x2);
@ -306,11 +324,11 @@ jQuery.fn.jGraduate =
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
this.value = 1.0; this.value = 1.0;
} }
$this.paint.linearGradient.grad.setAttribute('x2', this.value); $this.paint.linearGradient.setAttribute('x2', this.value);
endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
}); });
var y2 = $this.paint.linearGradient.grad.getAttribute('y2'); var y2 = $this.paint.linearGradient.getAttribute('y2');
if(!y2) y2 = "0.0"; if(!y2) y2 = "0.0";
y2Input = $('#'+id+'_jGraduate_y2'); y2Input = $('#'+id+'_jGraduate_y2');
y2Input.val(y2); y2Input.val(y2);
@ -318,19 +336,19 @@ jQuery.fn.jGraduate =
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
this.value = 0.0; this.value = 0.0;
} }
$this.paint.linearGradient.grad.setAttribute('y2', this.value); $this.paint.linearGradient.setAttribute('y2', this.value);
endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
}); });
var stops = $this.paint.linearGradient.grad.getElementsByTagNameNS(ns.svg, 'stop'); var stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
var numstops = stops.length; var numstops = stops.length;
// if there are not at least two stops, then // if there are not at least two stops, then
if (numstops < 2) { if (numstops < 2) {
while (numstops < 2) { while (numstops < 2) {
$this.paint.linearGradient.grad.appendChild( document.createElementNS(ns.svg, 'stop') ); $this.paint.linearGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
++numstops; ++numstops;
} }
stops = $this.paint.linearGradient.grad.getElementsByTagNameNS(ns.svg, 'stop'); stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
} }
var setOpacitySlider = function(e, div) { var setOpacitySlider = function(e, div) {
@ -344,7 +362,7 @@ jQuery.fn.jGraduate =
$('#' + id + '_jgraduate_rect').attr('fill-opacity', x); $('#' + id + '_jgraduate_rect').attr('fill-opacity', x);
x = parseInt(x*100); x = parseInt(x*100);
$('#' + id + '_jGraduate_OpacityInput').val(x); $('#' + id + '_jGraduate_OpacityInput').val(x);
$this.paint.linearGradient.a = x; $this.paint.alpha = x;
}; };
// handle dragging on the opacity slider // handle dragging on the opacity slider
@ -401,14 +419,14 @@ jQuery.fn.jGraduate =
if (draggingStop.id == (id+'_stop1')) { if (draggingStop.id == (id+'_stop1')) {
x1Input.val(fracx); x1Input.val(fracx);
y1Input.val(fracy); y1Input.val(fracy);
$this.paint.linearGradient.grad.setAttribute('x1', fracx); $this.paint.linearGradient.setAttribute('x1', fracx);
$this.paint.linearGradient.grad.setAttribute('y1', fracy); $this.paint.linearGradient.setAttribute('y1', fracy);
} }
else { else {
x2Input.val(fracx); x2Input.val(fracx);
y2Input.val(fracy); y2Input.val(fracy);
$this.paint.linearGradient.grad.setAttribute('x2', fracx); $this.paint.linearGradient.setAttribute('x2', fracx);
$this.paint.linearGradient.grad.setAttribute('y2', fracy); $this.paint.linearGradient.setAttribute('y2', fracy);
} }
evt.preventDefault(); evt.preventDefault();
@ -482,16 +500,17 @@ jQuery.fn.jGraduate =
}); });
// -------------- // --------------
colPicker.jPicker( colPicker.jPicker(
{ {
window: { title: $settings.window.pickerTitle }, window: { title: $settings.window.pickerTitle },
images: { clientPath: $settings.images.clientPath }, images: { clientPath: $settings.images.clientPath },
color: { active: $this.paint.solidColor, alphaSupport: true } color: { active: new $.jPicker.Color({hex:$this.paint.solidColor, a:$this.paint.alpha}), alphaSupport: true }
}, },
function(color) { function(color) {
$this.paint.solidColor = color; $this.paint.type = "solidColor";
$this.paint.linearGradient.grad = null; $this.paint.alpha = color.a;
$this.paint.solidColor = color.hex;
$this.paint.linearGradient = null;
okClicked(); okClicked();
}, },
null, null,
@ -511,7 +530,7 @@ jQuery.fn.jGraduate =
lgPicker.show(); lgPicker.show();
}); });
if (mode == "linearGradient") { if ($this.paint.type == "linearGradient") {
lgPicker.show(); lgPicker.show();
colPicker.hide(); colPicker.hide();
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current'); $(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');

99
editor/svg-editor.js
View File

@ -23,8 +23,8 @@ function svg_edit_setup() {
var multiselected = false; var multiselected = false;
var editingsource = false; var editingsource = false;
var fillPaint = new $.jGraduate.Paint(); var fillPaint = new $.jGraduate.Paint(); // a 'none' paint
var strokePaint = new $.jGraduate.Paint(); var strokePaint = new $.jGraduate.Paint({solidColor: "000000"}); // solid black
// called when we've selected a different element // called when we've selected a different element
var selectedChanged = function(window,elems) { var selectedChanged = function(window,elems) {
@ -74,35 +74,62 @@ function svg_edit_setup() {
if (isNaN(fillOpacity)) { if (isNaN(fillOpacity)) {
fillOpacity = 1.0; fillOpacity = 1.0;
} }
fillOpacity = (fillOpacity*100)+" %";
var strokeOpacity = parseFloat(selectedElement.getAttribute("stroke-opacity")); var strokeOpacity = parseFloat(selectedElement.getAttribute("stroke-opacity"));
if (isNaN(strokeOpacity)) { if (isNaN(strokeOpacity)) {
strokeOpacity = 1.0; strokeOpacity = 1.0;
} }
strokeOpacity = (strokeOpacity*100)+" %";
// update fill color and opacity
var fillColor = selectedElement.getAttribute("fill");
svgCanvas.setFillColor(fillColor);
svgCanvas.setFillOpacity(fillOpacity);
// update stroke color and opacity
var strokeColor = selectedElement.getAttribute("stroke");
svgCanvas.setStrokeColor(strokeColor);
svgCanvas.setStrokeOpacity(strokeOpacity);
fillOpacity *= 100;
strokeOpacity *= 100;
// update the editor's fill paint
if (fillColor.substr(0,5) == "url(#") {
fillPaint = new $.jGraduate.Paint({alpha: fillOpacity,
linearGradient: document.getElementById(fillColor.substr(5,fillColor.length-6))});
}
else if (fillColor.substr(0,1) == "#") {
fillPaint = new $.jGraduate.Paint({alpha: fillOpacity, solidColor: fillColor.substr(1)});
}
else {
fillPaint = new $.jGraduate.Paint();
}
if (strokeColor.substr(0,5) == "url(#") {
strokePaint = new $.jGraduate.Paint({alpha: strokeOpacity,
linearGradient: document.getElementById(strokeColor.substr(5,strokeColor.length-6))});
}
else if (strokeColor.substr(0,1) == "#") {
strokePaint = new $.jGraduate.Paint({alpha: strokeOpacity, solidColor: strokeColor.substr(1)});
}
else {
strokePaint = new $.jGraduate.Paint();
}
fillOpacity = fillOpacity + " %";
strokeOpacity = strokeOpacity + " %";
// update fill color // update fill color
var fillColor = selectedElement.getAttribute("fill");
// TODO: get a Paint from this and store in fillPaint ?
// TODO: call setFillPaint() ?
svgCanvas.setFillColor(fillColor);
if (fillColor == "none") { if (fillColor == "none") {
fillColor = "none";
fillOpacity = "N/A"; fillOpacity = "N/A";
} }
// update the rect inside #fill_color
document.getElementById("gradbox_fill").parentNode.firstChild.setAttribute("fill", fillColor); document.getElementById("gradbox_fill").parentNode.firstChild.setAttribute("fill", fillColor);
// update stroke color
var strokeColor = selectedElement.getAttribute("stroke");
// TODO: get a Paint from this and store in strokePaint ?
// TODO: call setStrokePaint() ?
svgCanvas.setStrokeColor(strokeColor);
if (strokeColor == null || strokeColor == "" || strokeColor == "none") { if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
strokeOpacity = "N/A";
strokeColor = "none"; strokeColor = "none";
strokeOpacity = "N/A";
} }
// update the rect inside #fill_color // update the rect inside #fill_color
document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor); document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor);
@ -257,23 +284,30 @@ function svg_edit_setup() {
var id = (evt.shiftKey ? '#stroke_' : '#fill_'); var id = (evt.shiftKey ? '#stroke_' : '#fill_');
var color = $(this).attr('data-rgb'); var color = $(this).attr('data-rgb');
var rectbox = document.getElementById("gradbox_"+picker).parentNode.firstChild; var rectbox = document.getElementById("gradbox_"+picker).parentNode.firstChild;
var paint = null;
// Webkit-based browsers returned 'initial' here for no stroke // Webkit-based browsers returned 'initial' here for no stroke
if (color == 'transparent' || color == 'initial') { if (color == 'transparent' || color == 'initial') {
color = 'none'; color = 'none';
$(id + "opacity").html("N/A"); $(id + "opacity").html("N/A");
paint = new $.jGraduate.Paint();
}
else {
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
} }
rectbox.setAttribute("fill", color); rectbox.setAttribute("fill", color);
if (evt.shiftKey) { if (evt.shiftKey) {
strokePaint = paint;
svgCanvas.setStrokeColor(color); svgCanvas.setStrokeColor(color);
if (color != 'none' && $("#stroke_opacity").html() == 'N/A') { if (color != 'none') {
svgCanvas.setStrokeOpacity(1.0); svgCanvas.setStrokeOpacity(1.0);
$("#stroke_opacity").html("100 %"); $("#stroke_opacity").html("100 %");
} }
} else { } else {
fillPaint = paint;
svgCanvas.setFillColor(color); svgCanvas.setFillColor(color);
if (color != 'none' && $("#fill_opacity").html() == 'N/A') { if (color != 'none') {
svgCanvas.setFillOpacity(1.0); svgCanvas.setFillOpacity(1.0);
$("#fill_opacity").html("100 %"); $("#fill_opacity").html("100 %");
} }
@ -560,25 +594,21 @@ function svg_edit_setup() {
$(document).bind('keydown', {combi:'v', disableInInput: true}, clickPaste); $(document).bind('keydown', {combi:'v', disableInInput: true}, clickPaste);
$(document).bind('keydown', {combi:'esc', disableInInput: false}, hideSourceEditor); $(document).bind('keydown', {combi:'esc', disableInInput: false}, hideSourceEditor);
// TODO: fix opacity being updated
// TODO: go back to the color boxes having white background-color and then setting
// background-image to none.png (otherwise partially transparent gradients look weird)
var colorPicker = function(elem) { var colorPicker = function(elem) {
var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill'; var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill';
var oldopacity = (picker == 'stroke' ? $('#stroke_opacity').html() : $('#fill_opacity').html()); var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
var paint = (picker == 'stroke' ? strokePaint : fillPaint); var paint = (picker == 'stroke' ? strokePaint : fillPaint);
var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity'); var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
var oldPaint = new $.jGraduate.Paint(paint);
var was_none = false; var was_none = false;
if (paint.solidColor == null && paint.linearGradient == null) { if (paint.type == "none") {
paint = new $.jGraduate.Paint(); // if it was none, then set to solid white
paint = new $.jGraduate.Paint({solidColor: 'ffffff'});
was_none = true; was_none = true;
} else {
var alpha;
if (oldopacity == 'N/A') {
alpha = 100;
} else {
alpha = oldopacity.split(' ')[0];
}
} }
var pos = elem.position(); var pos = elem.position();
$('#color_picker').css({'left': pos.left - 140, 'bottom': 124 - pos.top}).jGraduate( $('#color_picker').css({'left': pos.left - 140, 'bottom': 124 - pos.top}).jGraduate(
@ -588,23 +618,22 @@ function svg_edit_setup() {
images: { clientPath: "jgraduate/images/" }, images: { clientPath: "jgraduate/images/" },
}, },
function(p) { function(p) {
paint.solidColor = p.solidColor; paint = new $.jGraduate.Paint(p);
paint.linearGradient.grad = p.linearGradient.grad;
paint.linearGradient.a = p.linearGradient.a;
var oldgrad = document.getElementById("gradbox_"+picker); var oldgrad = document.getElementById("gradbox_"+picker);
var svgbox = oldgrad.parentNode; var svgbox = oldgrad.parentNode;
var rectbox = svgbox.firstChild; var rectbox = svgbox.firstChild;
if (paint.linearGradient.grad) { if (paint.type == "linearGradient") {
svgbox.removeChild(oldgrad); svgbox.removeChild(oldgrad);
var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient.grad, true)); var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient, true));
newgrad.id = "gradbox_"+picker; newgrad.id = "gradbox_"+picker;
rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")"); rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
} }
else { else {
rectbox.setAttribute("fill", "#" + paint.solidColor.hex); rectbox.setAttribute("fill", "#" + paint.solidColor);
} }
opacity.html(paint.alpha + " %");
if (picker == 'stroke') { if (picker == 'stroke') {
svgCanvas.setStrokePaint(paint); svgCanvas.setStrokePaint(paint);

31
editor/svgcanvas.js
View File

@ -415,7 +415,7 @@ function SvgCanvas(c)
var current_mode = "select"; var current_mode = "select";
var current_resize_mode = "none"; var current_resize_mode = "none";
var current_fill = "none"; var current_fill = "none";
var current_stroke = "black"; var current_stroke = "#000000";
var current_stroke_paint = null; var current_stroke_paint = null;
var current_fill_paint = null; var current_fill_paint = null;
var current_stroke_width = 1; var current_stroke_width = 1;
@ -1540,16 +1540,14 @@ function SvgCanvas(c)
return null; return null;
}; };
// TODO: what to do about the opacity in these functions?
this.setStrokePaint = function(p) { this.setStrokePaint = function(p) {
current_stroke_paint = p; current_stroke_paint = new $.jGraduate.Paint(p);
if (p.solidColor) { if (current_stroke_paint.type == "solidColor") {
this.setStrokeColor("#"+p.solidColor.hex); this.setStrokeColor("#"+current_stroke_paint.solidColor);
} }
else if(p.linearGradient.grad) { else if(current_stroke_paint.type == "linearGradient") {
// find out if there is a duplicate gradient already in the defs // find out if there is a duplicate gradient already in the defs
var grad = p.linearGradient.grad; var grad = current_stroke_paint.linearGradient;
var duplicate_grad = findDuplicateGradient(grad); var duplicate_grad = findDuplicateGradient(grad);
var defs = findDefs(); var defs = findDefs();
@ -1569,16 +1567,22 @@ function SvgCanvas(c)
else { else {
// console.log("none!"); // console.log("none!");
} }
this.setStrokeOpacity(current_stroke_paint.alpha/100);
}; };
// TODO: rework this so that we are not append elements into the SVG at this stage
// This should only be done at the actual creation stage or when we change a selected
// element's fill paint - at that point, batch up the creation of the gradient element
// with the creation/change
this.setFillPaint = function(p) { this.setFillPaint = function(p) {
current_fill_paint = p; // copy the incoming paint object
if (p.solidColor) { current_fill_paint = new $.jGraduate.Paint(p);
this.setFillColor("#"+p.solidColor.hex); if (current_fill_paint.type == "solidColor") {
this.setFillColor("#"+current_fill_paint.solidColor);
} }
else if(p.linearGradient.grad) { else if(current_fill_paint.type == "linearGradient") {
// find out if there is a duplicate gradient already in the defs // find out if there is a duplicate gradient already in the defs
var grad = p.linearGradient.grad; var grad = current_fill_paint.linearGradient;
var duplicate_grad = findDuplicateGradient(grad); var duplicate_grad = findDuplicateGradient(grad);
var defs = findDefs(); var defs = findDefs();
@ -1598,6 +1602,7 @@ function SvgCanvas(c)
else { else {
// console.log("none!"); // console.log("none!");
} }
this.setFillOpacity(current_fill_paint.alpha/100);
}; };
this.getStrokeWidth = function() { this.getStrokeWidth = function() {