diff --git a/editor/jgraduate/jquery.jgraduate.js b/editor/jgraduate/jquery.jgraduate.js
index 4fe55203..653f1d5b 100644
--- a/editor/jgraduate/jquery.jgraduate.js
+++ b/editor/jgraduate/jquery.jgraduate.js
@@ -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('
' +
'- Solid Color
' +
@@ -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');
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 55494fca..0bc1783a 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -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);
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 87f5c554..1c575c17 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -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() {