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-75d572ba1dddmaster
Jeff Schiller
parent
70c9361e1c
commit
d1d91c556e
|
|
@ -18,13 +18,18 @@ where options is an object literal:
|
|||
}
|
||||
|
||||
- the Paint object is:
|
||||
{
|
||||
// object describing the color picked used by jPicker
|
||||
solidColor: { hex, },
|
||||
// DOM node for the linear gradient
|
||||
linearGradient: { grad, a,
|
||||
Paint {
|
||||
type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
|
||||
alpha: Number representing opacity (0-100),
|
||||
solidColor: String representing #RRGGBB hex of color,
|
||||
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:
|
||||
{
|
||||
|
|
@ -46,21 +51,44 @@ if(!window.console) {
|
|||
}
|
||||
$.jGraduate = {
|
||||
Paint:
|
||||
function(copy) {
|
||||
if (copy) {
|
||||
if (copy.solidColor)
|
||||
this.solidColor = new $.jPicker.Color({ hex: copy.solidColor.hex,
|
||||
a: copy.solidColor.a });
|
||||
|
||||
// FIXME: linearGradient can be an object, but .grad can still be null
|
||||
if (copy.linearGradient)
|
||||
// Opera throws NOT_SUPPORTED_ERROR if the cloneNode(null), the other browsers do not
|
||||
this.linearGradient = { grad: copy.linearGradient.grad ? document.cloneNode(copy.linearGradient.grad, true) : null,
|
||||
a: copy.linearGradient.a };
|
||||
function(opt) {
|
||||
var options = opt || {};
|
||||
this.alpha = options.alpha || 100;
|
||||
// copy paint object
|
||||
if (options.copy) {
|
||||
this.type = options.copy.type;
|
||||
this.alpha = options.copy.alpha;
|
||||
switch(this.type) {
|
||||
case "none":
|
||||
this.solidColor = null;
|
||||
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 {
|
||||
this.solidColor = new $.jPicker.Color({ hex: '000000', a: 100 });
|
||||
this.linearGradient = { grad: null, a: 100 };
|
||||
this.type = "none";
|
||||
this.solidColor = null;
|
||||
this.linearGradient = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -100,31 +128,19 @@ jQuery.fn.jGraduate =
|
|||
|
||||
$.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,
|
||||
cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null,
|
||||
});
|
||||
|
||||
var mode = "solidColor",
|
||||
pos = $this.position(),
|
||||
var pos = $this.position(),
|
||||
color = null;
|
||||
|
||||
if ($this.paint == null) {
|
||||
$this.paint = { solidColor: new $.jPicker.Color({ hex: 'ffffff', a: 100 }),
|
||||
linearGradient: { grad: null, a: 100 } };
|
||||
|
||||
if ($this.paint.type == "none") {
|
||||
$this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
|
||||
}
|
||||
|
||||
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.html('<ul class="jGraduate_tabs">' +
|
||||
'<li class="jGraduate_tab_color jGraduate_tab_current">Solid Color</li>' +
|
||||
|
|
@ -190,11 +206,12 @@ jQuery.fn.jGraduate =
|
|||
svg.setAttribute('height', MAX);
|
||||
svg.setAttribute("xmlns", ns.svg);
|
||||
|
||||
if ($this.paint.linearGradient.grad) {
|
||||
$this.paint.linearGradient.grad = svg.appendChild( document.importNode($this.paint.linearGradient.grad, true) );
|
||||
$this.paint.linearGradient.grad.id = id+'_jgraduate_grad';
|
||||
// if we are sent a gradient, import it
|
||||
if ($this.paint.type == "linearGradient") {
|
||||
$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'));
|
||||
grad.id = id+'_jgraduate_grad';
|
||||
grad.setAttribute('x1','0.0');
|
||||
|
|
@ -208,21 +225,21 @@ jQuery.fn.jGraduate =
|
|||
|
||||
var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
|
||||
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);
|
||||
var posx = parseInt(255*(gradalpha/100)) - 4.5;
|
||||
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
$('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100);
|
||||
|
||||
var x1 = parseFloat($this.paint.linearGradient.grad.getAttribute('x1')||0.0);
|
||||
var y1 = parseFloat($this.paint.linearGradient.grad.getAttribute('y1')||0.0);
|
||||
var x2 = parseFloat($this.paint.linearGradient.grad.getAttribute('x2')||1.0);
|
||||
var y2 = parseFloat($this.paint.linearGradient.grad.getAttribute('y2')||0.0);
|
||||
var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0);
|
||||
var y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0);
|
||||
var x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0);
|
||||
var y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
|
||||
|
||||
var rect = document.createElementNS(ns.svg, 'rect');
|
||||
rect.id = id + '_jgraduate_rect';
|
||||
|
|
@ -267,6 +284,7 @@ jQuery.fn.jGraduate =
|
|||
|
||||
// bind GUI elements
|
||||
$('#'+id+'_jGraduate_Ok').bind('click', function() {
|
||||
$this.paint.type = "linearGradient";
|
||||
$this.paint.solidColor = null;
|
||||
okClicked();
|
||||
});
|
||||
|
|
@ -274,7 +292,7 @@ jQuery.fn.jGraduate =
|
|||
cancelClicked();
|
||||
});
|
||||
|
||||
var x1 = $this.paint.linearGradient.grad.getAttribute('x1');
|
||||
var x1 = $this.paint.linearGradient.getAttribute('x1');
|
||||
if(!x1) x1 = "0.0";
|
||||
x1Input = $('#'+id+'_jGraduate_x1');
|
||||
x1Input.val(x1);
|
||||
|
|
@ -282,11 +300,11 @@ jQuery.fn.jGraduate =
|
|||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.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);
|
||||
});
|
||||
|
||||
var y1 = $this.paint.linearGradient.grad.getAttribute('y1');
|
||||
var y1 = $this.paint.linearGradient.getAttribute('y1');
|
||||
if(!y1) y1 = "0.0";
|
||||
y1Input = $('#'+id+'_jGraduate_y1');
|
||||
y1Input.val(y1);
|
||||
|
|
@ -294,11 +312,11 @@ jQuery.fn.jGraduate =
|
|||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.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);
|
||||
});
|
||||
|
||||
var x2 = $this.paint.linearGradient.grad.getAttribute('x2');
|
||||
var x2 = $this.paint.linearGradient.getAttribute('x2');
|
||||
if(!x2) x2 = "1.0";
|
||||
x2Input = $('#'+id+'_jGraduate_x2');
|
||||
x2Input.val(x2);
|
||||
|
|
@ -306,11 +324,11 @@ jQuery.fn.jGraduate =
|
|||
if (isNaN(parseFloat(this.value)) || this.value < 0.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);
|
||||
});
|
||||
|
||||
var y2 = $this.paint.linearGradient.grad.getAttribute('y2');
|
||||
var y2 = $this.paint.linearGradient.getAttribute('y2');
|
||||
if(!y2) y2 = "0.0";
|
||||
y2Input = $('#'+id+'_jGraduate_y2');
|
||||
y2Input.val(y2);
|
||||
|
|
@ -318,19 +336,19 @@ jQuery.fn.jGraduate =
|
|||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.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);
|
||||
});
|
||||
|
||||
var stops = $this.paint.linearGradient.grad.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
var stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
var numstops = stops.length;
|
||||
// if there are not at least two stops, then
|
||||
if (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;
|
||||
}
|
||||
stops = $this.paint.linearGradient.grad.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
}
|
||||
|
||||
var setOpacitySlider = function(e, div) {
|
||||
|
|
@ -344,7 +362,7 @@ jQuery.fn.jGraduate =
|
|||
$('#' + id + '_jgraduate_rect').attr('fill-opacity', x);
|
||||
x = parseInt(x*100);
|
||||
$('#' + id + '_jGraduate_OpacityInput').val(x);
|
||||
$this.paint.linearGradient.a = x;
|
||||
$this.paint.alpha = x;
|
||||
};
|
||||
|
||||
// handle dragging on the opacity slider
|
||||
|
|
@ -401,14 +419,14 @@ jQuery.fn.jGraduate =
|
|||
if (draggingStop.id == (id+'_stop1')) {
|
||||
x1Input.val(fracx);
|
||||
y1Input.val(fracy);
|
||||
$this.paint.linearGradient.grad.setAttribute('x1', fracx);
|
||||
$this.paint.linearGradient.grad.setAttribute('y1', fracy);
|
||||
$this.paint.linearGradient.setAttribute('x1', fracx);
|
||||
$this.paint.linearGradient.setAttribute('y1', fracy);
|
||||
}
|
||||
else {
|
||||
x2Input.val(fracx);
|
||||
y2Input.val(fracy);
|
||||
$this.paint.linearGradient.grad.setAttribute('x2', fracx);
|
||||
$this.paint.linearGradient.grad.setAttribute('y2', fracy);
|
||||
$this.paint.linearGradient.setAttribute('x2', fracx);
|
||||
$this.paint.linearGradient.setAttribute('y2', fracy);
|
||||
}
|
||||
|
||||
evt.preventDefault();
|
||||
|
|
@ -482,16 +500,17 @@ jQuery.fn.jGraduate =
|
|||
});
|
||||
|
||||
// --------------
|
||||
|
||||
colPicker.jPicker(
|
||||
{
|
||||
window: { title: $settings.window.pickerTitle },
|
||||
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) {
|
||||
$this.paint.solidColor = color;
|
||||
$this.paint.linearGradient.grad = null;
|
||||
function(color) {
|
||||
$this.paint.type = "solidColor";
|
||||
$this.paint.alpha = color.a;
|
||||
$this.paint.solidColor = color.hex;
|
||||
$this.paint.linearGradient = null;
|
||||
okClicked();
|
||||
},
|
||||
null,
|
||||
|
|
@ -511,7 +530,7 @@ jQuery.fn.jGraduate =
|
|||
lgPicker.show();
|
||||
});
|
||||
|
||||
if (mode == "linearGradient") {
|
||||
if ($this.paint.type == "linearGradient") {
|
||||
lgPicker.show();
|
||||
colPicker.hide();
|
||||
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ function svg_edit_setup() {
|
|||
var multiselected = false;
|
||||
var editingsource = false;
|
||||
|
||||
var fillPaint = new $.jGraduate.Paint();
|
||||
var strokePaint = new $.jGraduate.Paint();
|
||||
var fillPaint = new $.jGraduate.Paint(); // a 'none' paint
|
||||
var strokePaint = new $.jGraduate.Paint({solidColor: "000000"}); // solid black
|
||||
|
||||
// called when we've selected a different element
|
||||
var selectedChanged = function(window,elems) {
|
||||
|
|
@ -74,35 +74,62 @@ function svg_edit_setup() {
|
|||
if (isNaN(fillOpacity)) {
|
||||
fillOpacity = 1.0;
|
||||
}
|
||||
fillOpacity = (fillOpacity*100)+" %";
|
||||
|
||||
var strokeOpacity = parseFloat(selectedElement.getAttribute("stroke-opacity"));
|
||||
if (isNaN(strokeOpacity)) {
|
||||
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
|
||||
var fillColor = selectedElement.getAttribute("fill");
|
||||
// TODO: get a Paint from this and store in fillPaint ?
|
||||
// TODO: call setFillPaint() ?
|
||||
svgCanvas.setFillColor(fillColor);
|
||||
if (fillColor == "none") {
|
||||
fillColor = "none";
|
||||
fillOpacity = "N/A";
|
||||
}
|
||||
// update the rect inside #fill_color
|
||||
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") {
|
||||
strokeOpacity = "N/A";
|
||||
strokeColor = "none";
|
||||
strokeOpacity = "N/A";
|
||||
}
|
||||
|
||||
// update the rect inside #fill_color
|
||||
document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor);
|
||||
|
||||
|
|
@ -257,23 +284,30 @@ function svg_edit_setup() {
|
|||
var id = (evt.shiftKey ? '#stroke_' : '#fill_');
|
||||
var color = $(this).attr('data-rgb');
|
||||
var rectbox = document.getElementById("gradbox_"+picker).parentNode.firstChild;
|
||||
var paint = null;
|
||||
|
||||
// Webkit-based browsers returned 'initial' here for no stroke
|
||||
if (color == 'transparent' || color == 'initial') {
|
||||
color = 'none';
|
||||
$(id + "opacity").html("N/A");
|
||||
paint = new $.jGraduate.Paint();
|
||||
}
|
||||
else {
|
||||
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
|
||||
}
|
||||
rectbox.setAttribute("fill", color);
|
||||
|
||||
if (evt.shiftKey) {
|
||||
if (evt.shiftKey) {
|
||||
strokePaint = paint;
|
||||
svgCanvas.setStrokeColor(color);
|
||||
if (color != 'none' && $("#stroke_opacity").html() == 'N/A') {
|
||||
if (color != 'none') {
|
||||
svgCanvas.setStrokeOpacity(1.0);
|
||||
$("#stroke_opacity").html("100 %");
|
||||
}
|
||||
} else {
|
||||
fillPaint = paint;
|
||||
svgCanvas.setFillColor(color);
|
||||
if (color != 'none' && $("#fill_opacity").html() == 'N/A') {
|
||||
if (color != 'none') {
|
||||
svgCanvas.setFillOpacity(1.0);
|
||||
$("#fill_opacity").html("100 %");
|
||||
}
|
||||
|
|
@ -560,25 +594,21 @@ function svg_edit_setup() {
|
|||
$(document).bind('keydown', {combi:'v', disableInInput: true}, clickPaste);
|
||||
$(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 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 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;
|
||||
|
||||
if (paint.solidColor == null && paint.linearGradient == null) {
|
||||
paint = new $.jGraduate.Paint();
|
||||
if (paint.type == "none") {
|
||||
// if it was none, then set to solid white
|
||||
paint = new $.jGraduate.Paint({solidColor: 'ffffff'});
|
||||
was_none = true;
|
||||
} else {
|
||||
var alpha;
|
||||
if (oldopacity == 'N/A') {
|
||||
alpha = 100;
|
||||
} else {
|
||||
alpha = oldopacity.split(' ')[0];
|
||||
}
|
||||
}
|
||||
var pos = elem.position();
|
||||
$('#color_picker').css({'left': pos.left - 140, 'bottom': 124 - pos.top}).jGraduate(
|
||||
|
|
@ -588,23 +618,22 @@ function svg_edit_setup() {
|
|||
images: { clientPath: "jgraduate/images/" },
|
||||
},
|
||||
function(p) {
|
||||
paint.solidColor = p.solidColor;
|
||||
paint.linearGradient.grad = p.linearGradient.grad;
|
||||
paint.linearGradient.a = p.linearGradient.a;
|
||||
paint = new $.jGraduate.Paint(p);
|
||||
|
||||
var oldgrad = document.getElementById("gradbox_"+picker);
|
||||
var svgbox = oldgrad.parentNode;
|
||||
var rectbox = svgbox.firstChild;
|
||||
|
||||
if (paint.linearGradient.grad) {
|
||||
if (paint.type == "linearGradient") {
|
||||
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;
|
||||
rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
|
||||
}
|
||||
else {
|
||||
rectbox.setAttribute("fill", "#" + paint.solidColor.hex);
|
||||
rectbox.setAttribute("fill", "#" + paint.solidColor);
|
||||
}
|
||||
opacity.html(paint.alpha + " %");
|
||||
|
||||
if (picker == 'stroke') {
|
||||
svgCanvas.setStrokePaint(paint);
|
||||
|
|
|
|||
|
|
@ -415,7 +415,7 @@ function SvgCanvas(c)
|
|||
var current_mode = "select";
|
||||
var current_resize_mode = "none";
|
||||
var current_fill = "none";
|
||||
var current_stroke = "black";
|
||||
var current_stroke = "#000000";
|
||||
var current_stroke_paint = null;
|
||||
var current_fill_paint = null;
|
||||
var current_stroke_width = 1;
|
||||
|
|
@ -1540,16 +1540,14 @@ function SvgCanvas(c)
|
|||
return null;
|
||||
};
|
||||
|
||||
// TODO: what to do about the opacity in these functions?
|
||||
|
||||
this.setStrokePaint = function(p) {
|
||||
current_stroke_paint = p;
|
||||
if (p.solidColor) {
|
||||
this.setStrokeColor("#"+p.solidColor.hex);
|
||||
current_stroke_paint = new $.jGraduate.Paint(p);
|
||||
if (current_stroke_paint.type == "solidColor") {
|
||||
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
|
||||
var grad = p.linearGradient.grad;
|
||||
var grad = current_stroke_paint.linearGradient;
|
||||
var duplicate_grad = findDuplicateGradient(grad);
|
||||
var defs = findDefs();
|
||||
|
||||
|
|
@ -1569,16 +1567,22 @@ function SvgCanvas(c)
|
|||
else {
|
||||
// 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) {
|
||||
current_fill_paint = p;
|
||||
if (p.solidColor) {
|
||||
this.setFillColor("#"+p.solidColor.hex);
|
||||
// copy the incoming paint object
|
||||
current_fill_paint = new $.jGraduate.Paint(p);
|
||||
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
|
||||
var grad = p.linearGradient.grad;
|
||||
var grad = current_fill_paint.linearGradient;
|
||||
var duplicate_grad = findDuplicateGradient(grad);
|
||||
var defs = findDefs();
|
||||
|
||||
|
|
@ -1598,6 +1602,7 @@ function SvgCanvas(c)
|
|||
else {
|
||||
// console.log("none!");
|
||||
}
|
||||
this.setFillOpacity(current_fill_paint.alpha/100);
|
||||
};
|
||||
|
||||
this.getStrokeWidth = function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue