'+(aj.title||"Drag Markers To Pick A Color")+' | new | |||||||
| ° | ||||||||
| % | ||||||||
| % | ||||||||
| % | ||||||||
- ' +
+ '
- Solid Color ' + + '
- Linear Gradient ' + + '
' +
+ '
' +
+ '' + $settings.window.pickerTitle + '
' + + '' + + '' +
+ '
' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '' +
+ '%' +
+ '
' +
+ '' +
+ '' +
+ '' +
+ '
' +
+ '' +
+ '');
+
+ // --------------
+ // Set up all the SVG elements (the gradient, stops and rectangle)
+ var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
+ SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
+// var container = document.getElementById(id+'_jGraduate_Swatch');
+ var container = document.getElementById(id+'_jGraduate_GradContainer');
+ var svg = container.appendChild(document.createElementNS(ns.svg, 'svg'));
+ svg.id = id+'_jgraduate_svg';
+ svg.setAttribute('width', MAX);
+ 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';
+ }
+ else {
+ var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
+ grad.id = id+'_jgraduate_grad';
+ grad.setAttribute('x1','0.0');
+ grad.setAttribute('y1','0.0');
+ grad.setAttribute('x2','1.0');
+ grad.setAttribute('y2','1.0');
+
+ var begin = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
+ begin.setAttribute('offset', '0.0');
+ begin.setAttribute('stop-color', '#ff0000');
+
+ var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
+ end.setAttribute('offset', '1.0');
+ end.setAttribute('stop-color', '#ff0');
+
+ $this.paint.linearGradient.grad = grad;
+ }
+
+ var gradalpha = $this.paint.linearGradient.a;
+ $('#' + 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 rect = document.createElementNS(ns.svg, 'rect');
+ rect.id = id + '_jgraduate_rect';
+ rect.setAttribute('x', MARGINX);
+ rect.setAttribute('y', MARGINY);
+ rect.setAttribute('width', SIZEY);
+ rect.setAttribute('height', SIZEY);
+ rect.setAttribute('fill', 'url(#'+id+'_jgraduate_grad)');
+ rect.setAttribute('fill-opacity', '1.0');
+ rect = svg.appendChild(rect);
+
+ // stop visuals created here
+ var beginStop = document.createElementNS(ns.svg, 'image');
+ beginStop.id = id + "_stop1";
+ beginStop.setAttribute('class', 'stop');
+ beginStop.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint.gif');
+ beginStop.setAttributeNS(ns.xlink, "title", "Begin Stop");
+ beginStop.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
+ document.createTextNode("Begin Stop"));
+ beginStop.setAttribute('width', 18);
+ beginStop.setAttribute('height', 18);
+ beginStop.setAttribute('x', MARGINX + SIZEX*x1 - STOP_RADIUS);
+ beginStop.setAttribute('y', MARGINY + SIZEY*y1 - STOP_RADIUS);
+ beginStop.setAttribute('cursor', 'move');
+ // must append only after setting all attributes due to Webkit Bug 27952
+ // https://bugs.webkit.org/show_bug.cgi?id=27592
+ beginStop = svg.appendChild(beginStop);
+
+ var endStop = document.createElementNS(ns.svg, 'image');
+ endStop.id = id + "_stop2";
+ endStop.setAttribute('class', 'stop');
+ endStop.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint.gif');
+ endStop.setAttributeNS(ns.xlink, "title", "End Stop");
+ endStop.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
+ document.createTextNode("End Stop"));
+ endStop.setAttribute('width', 18);
+ endStop.setAttribute('height', 18);
+ endStop.setAttribute('x', MARGINX + SIZEX*x2 - STOP_RADIUS);
+ endStop.setAttribute('y', MARGINY + SIZEY*y2 - STOP_RADIUS);
+ endStop.setAttribute('cursor', 'move');
+ endStop = svg.appendChild(endStop);
+
+ // bind GUI elements
+ $('#'+id+'_jGraduate_Ok').bind('click', function() {
+ $this.paint.solidColor = null;
+ okClicked();
+ });
+ $('#'+id+'_jGraduate_Cancel').bind('click', function(paint) {
+ cancelClicked();
+ });
+
+ var x1 = $this.paint.linearGradient.grad.getAttribute('x1');
+ if(!x1) x1 = "0.0";
+ x1Input = $('#'+id+'_jGraduate_x1');
+ x1Input.val(x1);
+ x1Input.change( function() {
+ 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);
+ beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
+ });
+
+ var y1 = $this.paint.linearGradient.grad.getAttribute('y1');
+ if(!y1) y1 = "0.0";
+ y1Input = $('#'+id+'_jGraduate_y1');
+ y1Input.val(y1);
+ y1Input.change( function() {
+ 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);
+ beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
+ });
+
+ var x2 = $this.paint.linearGradient.grad.getAttribute('x2');
+ if(!x2) x2 = "1.0";
+ x2Input = $('#'+id+'_jGraduate_x2');
+ x2Input.val(x2);
+ x2Input.change( function() {
+ 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);
+ endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
+ });
+
+ var y2 = $this.paint.linearGradient.grad.getAttribute('y2');
+ if(!y2) y2 = "0.0";
+ y2Input = $('#'+id+'_jGraduate_y2');
+ y2Input.val(y2);
+ y2Input.change( function() {
+ 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);
+ endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
+ });
+
+ var stops = $this.paint.linearGradient.grad.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') );
+ ++numstops;
+ }
+ stops = $this.paint.linearGradient.grad.getElementsByTagNameNS(ns.svg, 'stop');
+ }
+
+ var setOpacitySlider = function(e, div) {
+ var offset = div.offset();
+ var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
+ if (x > 255) x = 255;
+ if (x < 0) x = 0;
+ var posx = x - 4.5;
+ x /= 255;
+ $('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
+ $('#' + id + '_jgraduate_rect').attr('fill-opacity', x);
+ x = parseInt(x*100);
+ $('#' + id + '_jGraduate_OpacityInput').val(x);
+ $this.paint.linearGradient.a = x;
+ };
+
+ // handle dragging on the opacity slider
+ var bSlidingOpacity = false;
+ $('.jGraduate_Opacity').mousedown(function(evt) {
+ setOpacitySlider(evt, $(this));
+ bSlidingOpacity = true;
+ evt.preventDefault();
+ });
+ $('.jGraduate_Opacity').mousemove(function(evt) {
+ if (bSlidingOpacity) {
+ setOpacitySlider(evt, $(this));
+ evt.preventDefault();
+ }
+ });
+ $('.jGraduate_Opacity').mouseup(function(evt) {
+ setOpacitySlider(evt, $(this));
+ bSlidingOpacity = false;
+ evt.preventDefault();
+ });
+
+ // handle dragging the stop around the swatch
+ var draggingStop = null;
+ var startx = -1, starty = -1;
+ // for whatever reason, Opera does not allow $('image.stop') here
+ $('.stop').mousedown(function(evt) {
+ draggingStop = this;
+ startx = evt.clientX;
+ starty = evt.clientY;
+ evt.preventDefault();
+ });
+ $('#'+id+'_jgraduate_svg').mousemove(function(evt) {
+ if (null != draggingStop) {
+ var dx = evt.clientX - startx;
+ var dy = evt.clientY - starty;
+ startx += dx;
+ starty += dy;
+ var x = parseFloat(draggingStop.getAttribute('x')) + dx;
+ var y = parseFloat(draggingStop.getAttribute('y')) + dy;
+
+ // clamp stop to the swatch
+ if (x < MARGINX - STOP_RADIUS) x = MARGINX - STOP_RADIUS;
+ if (y < MARGINY - STOP_RADIUS) y = MARGINY - STOP_RADIUS;
+ if (x > MARGINX + SIZEX - STOP_RADIUS) x = MARGINX + SIZEX - STOP_RADIUS;
+ if (y > MARGINY + SIZEY - STOP_RADIUS) y = MARGINY + SIZEY - STOP_RADIUS;
+
+ draggingStop.setAttribute('x', x);
+ draggingStop.setAttribute('y', y);
+
+ // calculate stop offset
+ var fracx = (x - MARGINX + STOP_RADIUS)/SIZEX;
+ var fracy = (y - MARGINY + STOP_RADIUS)/SIZEY;
+
+ 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);
+ }
+ else {
+ x2Input.val(fracx);
+ y2Input.val(fracy);
+ $this.paint.linearGradient.grad.setAttribute('x2', fracx);
+ $this.paint.linearGradient.grad.setAttribute('y2', fracy);
+ }
+
+ evt.preventDefault();
+ }
+ });
+ $('#'+id+'_jgraduate_svg').mouseup(function(evt) {
+ draggingStop = null;
+ });
+
+ var beginColor = stops[0].getAttribute('stop-color');
+ if(!beginColor) beginColor = '#000';
+ beginColorBox = $('#'+id+'_jGraduate_colorBoxBegin');
+ beginColorBox.css({'background-color':beginColor});
+
+ var beginOpacity = stops[0].getAttribute('stop-opacity');
+ if(!beginOpacity) beginOpacity = '1.0';
+ $('#'+id+'jGraduate_beginOpacity').html( (beginOpacity*100)+'%' );
+
+ var endColor = stops[stops.length-1].getAttribute('stop-color');
+ if(!endColor) endColor = '#000';
+ endColorBox = $('#'+id+'_jGraduate_colorBoxEnd');
+ endColorBox.css({'background-color':endColor});
+
+ var endOpacity = stops[stops.length-1].getAttribute('stop-opacity');
+ if(!endOpacity) endOpacity = '1.0';
+ $('#'+id+'jGraduate_endOpacity').html( (endOpacity*100)+'%' );
+
+ $('#'+id+'_jGraduate_colorBoxBegin').click(function() {
+ $('div.jGraduate_LightBox').show();
+ var colorbox = $(this);
+ color = new $.jPicker.Color({ hex: beginColor.substr(1), a:(parseFloat(beginOpacity)*100) });
+ $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
+ window: { title: "Pick the start color and opacity for the gradient" },
+ images: { clientPath: $settings.images.clientPath },
+ color: { active: color, alphaSupport: true }
+ }, function(color){
+ beginColor = '#' + this.settings.color.active.hex;
+ beginOpacity = this.settings.color.active.a/100;
+ colorbox.css('background', beginColor);
+ $('#'+id+'_jGraduate_beginOpacity').html(parseInt(beginOpacity*100)+'%');
+ stops[0].setAttribute('stop-color', beginColor);
+ stops[0].setAttribute('stop-opacity', beginOpacity);
+ $('div.jGraduate_LightBox').hide();
+ $('#'+id+'_jGraduate_stopPicker').hide();
+ }, null, function() {
+ $('div.jGraduate_LightBox').hide();
+ $('#'+id+'_jGraduate_stopPicker').hide();
+ });
+ });
+ $('#'+id+'_jGraduate_colorBoxEnd').click(function() {
+ $('div.jGraduate_LightBox').show();
+ var colorbox = $(this);
+ color = new $.jPicker.Color({ hex: endColor.substr(1), a:(parseFloat(endOpacity)*100) });
+ $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({
+ window: { title: "Pick the end color and opacity for the gradient" },
+ images: { clientPath: $settings.images.clientPath },
+ color: { active: color, alphaSupport: true }
+ }, function(color){
+ endColor = '#' + this.settings.color.active.hex;
+ endOpacity = this.settings.color.active.a/100;
+ colorbox.css('background', endColor);
+ $('#'+id+'_jGraduate_endOpacity').html(parseInt(endOpacity*100)+'%');
+ stops[1].setAttribute('stop-color', endColor);
+ stops[1].setAttribute('stop-opacity', endOpacity);
+ $('div.jGraduate_LightBox').hide();
+ $('#'+id+'_jGraduate_stopPicker').hide();
+ }, null, function() {
+ $('div.jGraduate_LightBox').hide();
+ $('#'+id+'_jGraduate_stopPicker').hide();
+ });
+ });
+
+ // --------------
+
+ colPicker.jPicker(
+ {
+ window: { title: $settings.window.pickerTitle },
+ images: { clientPath: $settings.images.clientPath },
+ color: { active: $this.paint.solidColor, alphaSupport: true }
+ },
+ function(color) {
+ $this.paint.solidColor = color;
+ $this.paint.linearGradient.grad = null;
+ okClicked();
+ },
+ null,
+ function(){ cancelClicked(); }
+ );
+
+ $(idref + ' .jGraduate_tab_color').click( function(){
+ $(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current');
+ $(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current');
+ lgPicker.hide();
+ colPicker.show();
+ });
+ $(idref + ' .jGraduate_tab_lingrad').click( function(){
+ $(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');
+ $(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current');
+ colPicker.hide();
+ lgPicker.show();
+ });
+
+ if (mode == "linearGradient") {
+ lgPicker.show();
+ colPicker.hide();
+ $(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');
+ $(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current');
+ }
+ else {
+ colPicker.show();
+ lgPicker.hide();
+ $(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current');
+ $(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current');
+ }
+
+ $this.show();
+ });
+ };
diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index ca8401ff..db98fb1d 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -49,14 +49,6 @@ body {
cursor: pointer;
}
-#svg_editor #fill_color {
- background: url('images/none.png');
-}
-
-#svg_editor #stroke_color {
- background: #000000;
-}
-
#svg_editor div#palette {
float: left;
width: 6848px;
@@ -103,6 +95,7 @@ body {
/* TODO: fix this */
div.color_block {
+ background-image: url('images/none.png');
display: inline-block;
}
@@ -191,10 +184,6 @@ div.color_block {
padding: 2px;
}
-#svg_editor #paint_picker {
- display: none;
-}
-
#svg_editor #color_picker {
position: absolute;
display: none;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index befd51d4..731b5fdd 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -2,17 +2,17 @@
-
+
+
-
-
+
+
-
@@ -207,9 +207,6 @@
-
-
-
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index f1dcffee..cf06845f 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -22,6 +22,9 @@ function svg_edit_setup() {
var selectedElement = null;
var multiselected = false;
var editingsource = false;
+
+ var fillPaint = new $.jGraduate.Paint();
+ var strokePaint = new $.jGraduate.Paint();
// called when we've selected a different element
var selectedChanged = function(window,elems) {
@@ -81,21 +84,27 @@ function svg_edit_setup() {
// 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 = 'url(\'images/none.png\')';
+ fillColor = "none";
fillOpacity = "N/A";
}
- $('#fill_color').css('background', fillColor);
+ // 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") {
- strokeColor = 'url(\'images/none.png\')';
strokeOpacity = "N/A";
+ strokeColor = "none";
}
- $('#stroke_color').css('background', strokeColor);
+ // update the rect inside #fill_color
+ document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor);
$('#fill_opacity').html(fillOpacity);
$('#stroke_opacity').html(strokeOpacity);
@@ -200,9 +209,9 @@ function svg_edit_setup() {
svgCanvas.bind("selected", selectedChanged);
svgCanvas.bind("changed", elementChanged);
- var str = ''
+ var str = ''
$.each(palette, function(i,item){
- str += '';
+ str += '';
});
$('#palette').append(str);
@@ -244,17 +253,19 @@ function svg_edit_setup() {
});
$('.palette_item').click(function(evt){
+ var picker = (evt.shiftKey ? "stroke" : "fill");
var id = (evt.shiftKey ? '#stroke_' : '#fill_');
- color = $(this).css('background-color');
+ var color = $(this).attr('data-rgb');
+ var rectbox = document.getElementById("gradbox_"+picker).parentNode.firstChild;
+
// Webkit-based browsers returned 'initial' here for no stroke
if (color == 'transparent' || color == 'initial') {
color = 'none';
- $(id + "color").css('background', 'url(\'images/none.png\')');
$(id + "opacity").html("N/A");
- } else {
- $(id + "color").css('background', color);
}
- if (evt.shiftKey) {
+ rectbox.setAttribute("fill", color);
+
+ if (evt.shiftKey) {
svgCanvas.setStrokeColor(color);
if (color != 'none' && $("#stroke_opacity").html() == 'N/A') {
svgCanvas.setStrokeOpacity(1.0);
@@ -550,18 +561,16 @@ function svg_edit_setup() {
$(document).bind('keydown', {combi:'esc', disableInInput: false}, hideSourceEditor);
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 picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill';
+ var oldopacity = (picker == 'stroke' ? $('#stroke_opacity').html() : $('#fill_opacity').html());
+
+ 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 (color == 'transparent' || color == 'initial') {
- color = new $.jPicker.Color({ hex: 'ffffff', a: 100 });
+
+ if (paint.solidColor == null && paint.linearGradient == null) {
+ paint = new $.jGraduate.Paint();
was_none = true;
} else {
var alpha;
@@ -570,53 +579,45 @@ function svg_edit_setup() {
} else {
alpha = oldopacity.split(' ')[0];
}
- if (color.length == 7 && color[0] == '#') { // #hheexx notation
- 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], a: alpha });
- } else {
- color = new $.jPicker.Color({ hex: 'ffffff', a: alpha });
- }
}
var pos = elem.position();
- var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill';
- $('#color_picker').css({'left': pos.left - 140, 'bottom': 104 - pos.top}).jPicker({
- window: { title: "Choose the " + picker + " color and opacity"},
- images: { clientPath: "jpicker/images/" },
- 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();
- }
- , 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').css({'left': pos.left - 140, 'bottom': 124 - pos.top}).jGraduate(
+ {
+ paint: paint,
+ window: { pickerTitle: title },
+ images: { clientPath: "jGraduate/images/" },
+ },
+ function(p) {
+ paint.solidColor = p.solidColor;
+ paint.linearGradient.grad = p.linearGradient.grad;
+ paint.linearGradient.a = p.linearGradient.a;
+
+ var oldgrad = document.getElementById("gradbox_"+picker);
+ var svgbox = oldgrad.parentNode;
+ var rectbox = svgbox.firstChild;
+
+ if (paint.linearGradient.grad) {
+ svgbox.removeChild(oldgrad);
+ var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient.grad, true));
+ newgrad.id = "gradbox_"+picker;
+ rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
}
- }
- $('#color_picker').hide();
- });
+ else {
+ rectbox.setAttribute("fill", "#" + paint.solidColor.hex);
+ }
+
+ if (picker == 'stroke') {
+ svgCanvas.setStrokePaint(paint);
+ }
+ else {
+ svgCanvas.setFillPaint(paint);
+ }
+
+ $('#color_picker').hide();
+ },
+ function(p) {
+ $('#color_picker').hide();
+ });
}
function updateToolButtonState() {
@@ -657,6 +658,22 @@ function svg_edit_setup() {
}
}
+ // set up gradients to be used for the buttons
+ var svgdocbox = new DOMParser().parseFromString(
+ '', 'text/xml');
+
+ var boxgrad = svgdocbox.getElementById('gradbox_');
+ boxgrad.id = 'gradbox_fill';
+ $('#fill_color').append( document.importNode(svgdocbox.documentElement,true) );
+
+ boxgrad.id = 'gradbox_stroke';
+ $(svgdocbox.documentElement.firstChild).attr('fill', '#000');
+ $('#stroke_color').append( document.importNode(svgdocbox.documentElement,true) );
+
$('#fill_color').click(function(){
colorPicker($(this));
updateToolButtonState();
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 04ac8615..87f5c554 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -14,7 +14,7 @@ var svgWhiteList = {
"linearGradient": ["id", "x1", "x2", "y1", "y2"],
"path": ["d", "fill", "fill-opacity", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"],
"rect": ["fill", "fill-opacity", "height", "id", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray", "width", "x", "y"],
- "stop": ["id", "stop-color", "stop-opacity"],
+ "stop": ["id", "offset", "stop-color", "stop-opacity"],
"svg": ["id", "height", "width", "xmlns"],
"text": ["font-family", "font-size", "font-style", "font-weight", "id", "x", "y"],
};
@@ -239,6 +239,7 @@ function SvgCanvas(c)
}
this.showGrips = function(show) {
+ // TODO: use suspendRedraw() here
for (dir in this.selectorGrips) {
this.selectorGrips[dir].setAttribute("display", show ? "inline" : "none");
}
@@ -258,6 +259,7 @@ function SvgCanvas(c)
}
var bbox = bbox || this.selectedElement.getBBox();
var l=bbox.x-offset, t=bbox.y-offset, w=bbox.width+(offset<<1), h=bbox.height+(offset<<1);
+ // TODO: use suspendRedraw() here
selectedBox.x.baseVal.value = l;
selectedBox.y.baseVal.value = t;
selectedBox.width.baseVal.value = w;
@@ -414,6 +416,8 @@ function SvgCanvas(c)
var current_resize_mode = "none";
var current_fill = "none";
var current_stroke = "black";
+ var current_stroke_paint = null;
+ var current_fill_paint = null;
var current_stroke_width = 1;
var current_stroke_style = "none";
var current_opacity = 1;
@@ -464,10 +468,17 @@ function SvgCanvas(c)
var nodes = svgroot.childNodes;
var i = svgroot.childNodes.length;
while (i--) {
- if (nodes[i].id != "selectorParentGroup" &&
- Utils.rectsIntersect(rubberBBox, nodes[i].getBBox()))
- {
- resultList.push(nodes[i]);
+ // need to do this since the defs has no bbox and causes an exception
+ // to be thrown in Mozilla
+ try {
+// if (nodes[i].tagName == "defs") continue;
+ if (nodes[i].id != "selectorParentGroup" &&
+ Utils.rectsIntersect(rubberBBox, nodes[i].getBBox()))
+ {
+ resultList.push(nodes[i]);
+ }
+ } catch(e) {
+ // do nothing, this element did not have a bbox
}
}
}
@@ -514,14 +525,17 @@ function SvgCanvas(c)
};
var assignAttributes = function(node, attrs) {
+ var handle = svgroot.suspendRedraw(60);
for (i in attrs) {
node.setAttributeNS(null, i, attrs[i]);
}
+ svgroot.unsuspendRedraw(handle);
};
// remove unneeded attributes
// makes resulting SVG smaller
var cleanupElement = function(element) {
+ var handle = svgroot.suspendRedraw(60);
if (element.getAttribute('fill-opacity') == '1')
element.removeAttribute('fill-opacity');
if (element.getAttribute('opacity') == '1')
@@ -538,6 +552,7 @@ function SvgCanvas(c)
element.removeAttribute('rx')
if (element.getAttribute('ry') == '0')
element.removeAttribute('ry')
+ svgroot.unsuspendRedraw(handle);
};
var addSvgElementFromJson = function(data) {
@@ -644,7 +659,7 @@ function SvgCanvas(c)
indent--;
if (!bOneLine) {
out.push("\n");
- for (i=0; i");
} else {
@@ -732,46 +747,56 @@ function SvgCanvas(c)
changes["y1"] = selected.y1.baseVal.value;
changes["x2"] = selected.x2.baseVal.value;
changes["y2"] = selected.y2.baseVal.value;
+ var handle = svgroot.suspendRedraw(1000);
selected.x1.baseVal.value = remapx(selected.x1.baseVal.value);
selected.y1.baseVal.value = remapy(selected.y1.baseVal.value);
selected.x2.baseVal.value = remapx(selected.x2.baseVal.value);
selected.y2.baseVal.value = remapy(selected.y2.baseVal.value);
+ svgroot.unsuspendRedraw(handle);
break;
case "circle":
changes["cx"] = selected.cx.baseVal.value;
changes["cy"] = selected.cy.baseVal.value;
changes["r"] = selected.r.baseVal.value;
+ var handle = svgroot.suspendRedraw(1000);
selected.cx.baseVal.value = remapx(selected.cx.baseVal.value);
selected.cy.baseVal.value = remapy(selected.cy.baseVal.value);
// take the minimum of the new selected box's dimensions for the new circle radius
selected.r.baseVal.value = Math.min(selectedBBox.width/2,selectedBBox.height/2);
+ svgroot.unsuspendRedraw(handle);
break;
case "ellipse":
changes["cx"] = selected.cx.baseVal.value;
changes["cy"] = selected.cy.baseVal.value;
changes["rx"] = selected.rx.baseVal.value;
changes["ry"] = selected.ry.baseVal.value;
+ var handle = svgroot.suspendRedraw(1000);
selected.cx.baseVal.value = remapx(selected.cx.baseVal.value);
selected.cy.baseVal.value = remapy(selected.cy.baseVal.value);
selected.rx.baseVal.value = scalew(selected.rx.baseVal.value);
selected.ry.baseVal.value = scaleh(selected.ry.baseVal.value);
+ svgroot.unsuspendRedraw(handle);
break;
case "text":
// cannot use x.baseVal.value here because x is a SVGLengthList
changes["x"] = selected.getAttribute("x");
changes["y"] = selected.getAttribute("y");
+ var handle = svgroot.suspendRedraw(1000);
selected.setAttribute("x", remapx(selected.getAttribute("x")));
selected.setAttribute("y", remapy(selected.getAttribute("y")));
+ svgroot.unsuspendRedraw(handle);
break;
case "rect":
changes["x"] = selected.x.baseVal.value;
changes["y"] = selected.y.baseVal.value;
changes["width"] = selected.width.baseVal.value;
changes["height"] = selected.height.baseVal.value;
+ var handle = svgroot.suspendRedraw(1000);
selected.x.baseVal.value = remapx(selected.x.baseVal.value);
selected.y.baseVal.value = remapy(selected.y.baseVal.value);
selected.width.baseVal.value = scalew(selected.width.baseVal.value);
selected.height.baseVal.value = scaleh(selected.height.baseVal.value);
+ svgroot.unsuspendRedraw(handle);
break;
default: // rect
console.log("Unknown shape type: " + selected.tagName);
@@ -1143,25 +1168,33 @@ function SvgCanvas(c)
selectorManager.requestSelector(selected).resize(selectedBBox);
break;
case "text":
+ var handle = svgroot.suspendRedraw(1000);
shape.setAttribute("x", x);
shape.setAttribute("y", y);
+ svgroot.unsuspendRedraw(handle);
break;
case "line":
+ var handle = svgroot.suspendRedraw(1000);
shape.setAttributeNS(null, "x2", x);
shape.setAttributeNS(null, "y2", y);
+ svgroot.unsuspendRedraw(handle);
break;
case "square":
var size = Math.max( Math.abs(x - start_x), Math.abs(y - start_y) );
+ var handle = svgroot.suspendRedraw(1000);
shape.setAttributeNS(null, "width", size);
shape.setAttributeNS(null, "height", size);
shape.setAttributeNS(null, "x", start_x < x ? start_x : start_x - size);
shape.setAttributeNS(null, "y", start_y < y ? start_y : start_y - size);
+ svgroot.unsuspendRedraw(handle);
break;
case "rect":
+ var handle = svgroot.suspendRedraw(1000);
shape.setAttributeNS(null, "x", Math.min(start_x,x));
shape.setAttributeNS(null, "y", Math.min(start_y,y));
shape.setAttributeNS(null, "width", Math.abs(x-start_x));
shape.setAttributeNS(null, "height", Math.abs(y-start_y));
+ svgroot.unsuspendRedraw(handle);
break;
case "circle":
var cx = shape.getAttributeNS(null, "cx");
@@ -1172,8 +1205,10 @@ function SvgCanvas(c)
case "ellipse":
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
+ var handle = svgroot.suspendRedraw(1000);
shape.setAttributeNS(null, "rx", Math.abs(x - cx) );
shape.setAttributeNS(null, "ry", Math.abs(y - cy) );
+ svgroot.unsuspendRedraw(handle);
break;
case "fhellipse":
case "fhrect":
@@ -1406,8 +1441,11 @@ function SvgCanvas(c)
this.setResolution = function(x, y) {
var w = svgroot.getAttribute("width"),
h = svgroot.getAttribute("height");
+
+ var handle = svgroot.suspendRedraw(1000);
svgroot.setAttribute("width", x);
svgroot.setAttribute("height", y);
+ svgroot.unsuspendRedraw(handle);
addCommandToHistory(new ChangeElementCommand(svgroot, {"width":w,"height":h}, "resolution"));
call("changed", [svgroot]);
};
@@ -1448,6 +1486,120 @@ function SvgCanvas(c)
this.changeSelectedAttribute("fill", val, elems);
};
+ var findDefs = function() {
+ var defs = svgroot.getElementsByTagNameNS(svgns, "defs");
+ if (defs.length > 0) {
+ defs = defs[0];
+ }
+ else {
+ defs = svgroot.insertBefore( svgdoc.createElementNS(svgns, "defs" ), svgroot.firstChild);
+ }
+ return defs;
+ };
+
+ var findDuplicateGradient = function(grad) {
+ var defs = findDefs();
+ var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient");
+ var i = existing_grads.length;
+ while (i--) {
+ var og = existing_grads.item(i);
+ if (grad.getAttribute('x1') != og.getAttribute('x1') ||
+ grad.getAttribute('y1') != og.getAttribute('y1') ||
+ grad.getAttribute('x2') != og.getAttribute('x2') ||
+ grad.getAttribute('y2') != og.getAttribute('y2'))
+ {
+ continue;
+ }
+
+ // else could be a duplicate, iterate through stops
+ var stops = grad.getElementsByTagNameNS(svgns, "stop");
+ var ostops = og.getElementsByTagNameNS(svgns, "stop");
+
+ if (stops.length != ostops.length) {
+ continue;
+ }
+
+ var j = stops.length;
+ while(j--) {
+ var stop = stops.item(j);
+ var ostop = ostops.item(j);
+
+ if (stop.getAttribute('offset') != ostop.getAttribute('offset') ||
+ stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') ||
+ stop.getAttribute('stop-color') != ostop.getAttribute('stop-color'))
+ {
+ break;
+ }
+ }
+
+ if (j == -1) {
+ return og;
+ }
+ } // for each gradient in defs
+
+ 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);
+ }
+ else if(p.linearGradient.grad) {
+ // find out if there is a duplicate gradient already in the defs
+ var grad = p.linearGradient.grad;
+ var duplicate_grad = findDuplicateGradient(grad);
+ var defs = findDefs();
+
+ // no duplicate found, so import gradient into defs
+ if (!duplicate_grad) {
+ grad = defs.appendChild( svgdoc.importNode(grad, true) );
+
+ // get next id and set it on the grad
+ grad.id = getNextId();
+ }
+ else { // use existing gradient
+ grad = duplicate_grad;
+ }
+
+ this.setStrokeColor("url(#" + grad.id + ")");
+ }
+ else {
+// console.log("none!");
+ }
+ };
+
+ this.setFillPaint = function(p) {
+ current_fill_paint = p;
+ if (p.solidColor) {
+ this.setFillColor("#"+p.solidColor.hex);
+ }
+ else if(p.linearGradient.grad) {
+ // find out if there is a duplicate gradient already in the defs
+ var grad = p.linearGradient.grad;
+ var duplicate_grad = findDuplicateGradient(grad);
+ var defs = findDefs();
+
+ // no duplicate found, so import gradient into defs
+ if (!duplicate_grad) {
+ grad = defs.appendChild( svgdoc.importNode(grad, true) );
+
+ // get next id and set it on the grad
+ grad.id = getNextId();
+ }
+ else { // use existing gradient
+ grad = duplicate_grad;
+ }
+
+ this.setFillColor("url(#" + grad.id + ")");
+ }
+ else {
+// console.log("none!");
+ }
+ };
+
this.getStrokeWidth = function() {
return current_stroke_width;
};
@@ -1608,6 +1760,7 @@ function SvgCanvas(c)
var elems = elems || selectedElements;
var batchCmd = new BatchCommand("Change " + attr);
var i = elems.length;
+ var handle = svgroot.suspendRedraw(1000);
while(i--) {
var elem = elems[i];
if (elem == null) continue;
@@ -1623,6 +1776,7 @@ function SvgCanvas(c)
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attr));
}
}
+ svgroot.unsuspendRedraw(handle);
if (!batchCmd.isEmpty()) {
addCommandToHistory(batchCmd);
call("changed", elems);
@@ -1675,7 +1829,11 @@ function SvgCanvas(c)
var oldParent = t.parentNode;
var oldNextSibling = t.nextSibling;
if (oldNextSibling == selectorManager.selectorParentGroup) oldNextSibling = null;
- t = t.parentNode.insertBefore(t, t.parentNode.firstChild);
+ var firstChild = t.parentNode.firstChild;
+ if (firstChild.tagName == 'defs') {
+ firstChild = firstChild.nextSibling;
+ }
+ t = t.parentNode.insertBefore(t, firstChild);
addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "bottom"));
}
};