diff --git a/public/svg-edit/editor/jgraduate/css/jGraduate-0.2.0.css b/public/svg-edit/editor/jgraduate/css/jgraduate.css similarity index 68% rename from public/svg-edit/editor/jgraduate/css/jGraduate-0.2.0.css rename to public/svg-edit/editor/jgraduate/css/jgraduate.css index 4b86287a..fcbb15b7 100644 --- a/public/svg-edit/editor/jgraduate/css/jGraduate-0.2.0.css +++ b/public/svg-edit/editor/jgraduate/css/jgraduate.css @@ -26,7 +26,7 @@ h2.jGraduate_Title { padding: 10px; } -li.jGraduate_tab_color, li.jGraduate_tab_lingrad { +.jGraduate_tabs li { background-color: #ccc; display: inline; border: solid 1px grey; @@ -55,6 +55,14 @@ li.jGraduate_tab_current { overflow: auto; } +.jGraduate_rgPick { + display: none; + border: outset 1px #666; + padding: 10px 7px 5px 5px; + overflow: auto; +/* position: relative;*/ +} + .jGraduate_tabs { position: relative; background-color: #EFEFEF; @@ -90,7 +98,7 @@ div.jGraduate_Opacity { cursor: ew-resize; } -div.jGraduate_OpacityField { +div.lg_jGraduate_OpacityField { position: absolute; bottom: 25px; left: 292px; @@ -107,6 +115,41 @@ div.jGraduate_StopSection { text-align: center; } +div.jGraduate_RadiusField { + + text-align: center; + float: left; +} + +div.jGraduate_RadiusField input { + margin-top: 10px; +} + +.jGraduate_RadiusField .jGraduate_Form_Section { + width: 250px; + padding: 2px; + height: 80px; + overflow: visible; +} + +.jGraduate_Radius { + border:1px solid #BBB; + cursor:ew-resize; + height:20px; + margin-top:14px; + position: relative; +} + + +.jGraduate_RadiusArrows { + top: 0; + left: 0; + position: absolute; + margin-top: -10px; + margin-left: 250.5px; +} + + div.jGraduate_OkCancel { float: left; width: 113px; @@ -173,4 +216,51 @@ div.jGraduate_stopPicker { position: absolute; display: none; background: #E8E8E8; +} + + +.jGraduate_rgPick { + width: 530px; +} + +.jGraduate_rgPick div.jGraduate_Form { + width: 270px; + position: absolute; + left: 284px; + width: 266px; + top: 130px; + margin: -3px 3px 0px 4px; +} + +.jGraduate_Colorblocks { + display: table; + border-spacing: 0 5px; +} + +.jGraduate_colorblock { + display: table-row; +} + +.jGraduate_Colorblocks .jGraduate_colorblock > * { + display: table-cell; + vertical-align: middle; + margin: 0; + float: none; +} + +.jGraduate_rgPick div.jGraduate_StopSection { + float: left; + width: 133px; + margin: 0; +} + +.jGraduate_rgPick .jGraduate_OkCancel { + position: absolute; + right: 0; +} + +.rg_jGraduate_OpacityField { + position: absolute; + left: 288px; + bottom: 24px; } \ No newline at end of file diff --git a/public/svg-edit/editor/jgraduate/images/mappoint_c.png b/public/svg-edit/editor/jgraduate/images/mappoint_c.png new file mode 100644 index 00000000..d0a6e1ce Binary files /dev/null and b/public/svg-edit/editor/jgraduate/images/mappoint_c.png differ diff --git a/public/svg-edit/editor/jgraduate/images/mappoint_f.png b/public/svg-edit/editor/jgraduate/images/mappoint_f.png new file mode 100644 index 00000000..563ff87c Binary files /dev/null and b/public/svg-edit/editor/jgraduate/images/mappoint_f.png differ diff --git a/public/svg-edit/editor/jgraduate/jquery.jgraduate.js b/public/svg-edit/editor/jgraduate/jquery.jgraduate.js index fe3f3c24..137919be 100644 --- a/public/svg-edit/editor/jgraduate/jquery.jgraduate.js +++ b/public/svg-edit/editor/jgraduate/jquery.jgraduate.js @@ -3,8 +3,10 @@ * * jQuery Plugin for a gradient picker * - * Copyright (c) 2009 Jeff Schiller + * Copyright (c) 2010 Jeff Schiller * http://blog.codedread.com/ + * Copyright (c) 2010 Alexis Deveria + * http://a.deveria.com/ * * Apache 2 License @@ -23,12 +25,14 @@ where options is an object literal: alpha: Number representing opacity (0-100), solidColor: String representing #RRGGBB hex of color, linearGradient: object of interface SVGLinearGradientElement, + radialGradient: object of interface SVGRadialGradientElement, } $.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({radialGradient: o, a: 7}) -> creates a radial gradient paint with opacity=0.07 $.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception? - picker accepts the following object as input: @@ -74,27 +78,38 @@ $.jGraduate = { if (options.copy) { this.type = options.copy.type; this.alpha = options.copy.alpha; + this.solidColor = null; + this.linearGradient = null; + this.radialGradient = null; + 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 = $.cloneNode(options.copy.linearGradient); break; + case "radialGradient": + this.radialGradient = $.cloneNode(options.copy.radialGradient); + break; } } // create linear gradient paint else if (options.linearGradient) { this.type = "linearGradient"; this.solidColor = null; + this.radialGradient = null; this.linearGradient = $.cloneNode(options.linearGradient); } + // create linear gradient paint + else if (options.radialGradient) { + this.type = "radialGradient"; + this.solidColor = null; + this.linearGradient = null; + this.radialGradient = $.cloneNode(options.radialGradient); + } // create solid color paint else if (options.solidColor) { this.type = "solidColor"; @@ -105,6 +120,7 @@ $.jGraduate = { this.type = "none"; this.solidColor = null; this.linearGradient = null; + this.radialGradient = null; } } }; @@ -134,6 +150,15 @@ jQuery.fn.jGraduate = } var okClicked = function() { + // TODO: Fix this ugly hack + if($this.paint.type == "radialGradient") { + $this.paint.linearGradient = null; + } else if($this.paint.type == "linearGradient") { + $this.paint.radialGradient = null; + } else if($this.paint.type == "solidColor") { + $this.paint.linearGradient = null; + $this.paint.radialGradient = null; + } $.isFunction($this.okCallback) && $this.okCallback($this.paint); $this.hide(); }, @@ -156,23 +181,26 @@ jQuery.fn.jGraduate = if ($this.paint.type == "none") { $this.paint = $.jGraduate.Paint({solidColor: 'ffffff'}); } - + $this.addClass('jGraduate_Picker'); $this.html('' + '
' + - '
'); + '
' + + '
'); var colPicker = $(idref + '> .jGraduate_colPick'); var lgPicker = $(idref + '> .jGraduate_lgPick'); + var rgPicker = $(idref + '> .jGraduate_rgPick'); lgPicker.html( '
' + '

' + $settings.window.pickerTitle + '

' + - '
' + - '
' + - '' + + '
' + + '
' + + '' + '
' + '
' + '
' + @@ -198,373 +226,859 @@ jQuery.fn.jGraduate = '' + '
' + '
' + - '
' + - '' + - '%' + + '
' + + '' + + '%' + '
' + '
' + '
' + - '' + - '' + + '' + + '' + '
' + '
' + '
'); + + rgPicker.html( + '
' + + '

' + $settings.window.pickerTitle + '

' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '' + + '
' + + '
Center:' + + '
' + + '
' + + + '
Outer:' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '' + + '' + + '' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '%' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '%' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
'); // -------------- // 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_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); + + $.each(['lg', 'rg'], function(i) { + var grad_id = id + '_' + this; + var container = document.getElementById(grad_id+'_jGraduate_GradContainer'); + var svg = container.appendChild(document.createElementNS(ns.svg, 'svg')); + svg.id = grad_id + '_jgraduate_svg'; + svg.setAttribute('width', MAX); + svg.setAttribute('height', MAX); + svg.setAttribute("xmlns", ns.svg); + }); - // 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($.cloneNode($this.paint.linearGradient)); - } - else { // we create a gradient - 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'); + + // Linear gradient + (function() { + var svg = document.getElementById(id + '_lg_jgraduate_svg'); - 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', '#ffff00'); - - $this.paint.linearGradient = grad; - } - - 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.getAttribute('x1')||0.0), - y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0), - x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0), - y2 = parseFloat($this.paint.linearGradient.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.type = "linearGradient"; - $this.paint.solidColor = null; - okClicked(); - }); - $('#'+id+'_jGraduate_Cancel').bind('click', function(paint) { - cancelClicked(); - }); - - var x1 = $this.paint.linearGradient.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.setAttribute('x1', this.value); - beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); - }); - - var y1 = $this.paint.linearGradient.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.setAttribute('y1', this.value); - beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); - }); - - var x2 = $this.paint.linearGradient.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.setAttribute('x2', this.value); - endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); - }); - - var y2 = $this.paint.linearGradient.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.setAttribute('y2', this.value); - endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); - }); - - 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.appendChild( document.createElementNS(ns.svg, 'stop') ); - ++numstops; - } - stops = $this.paint.linearGradient.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.alpha = 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, - // and Firefox 1.5 does not allow $('.stop') - $('.stop, #color_picker_jGraduate_GradContainer image').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.setAttribute('x1', fracx); - $this.paint.linearGradient.setAttribute('y1', fracy); - } - else { - x2Input.val(fracx); - y2Input.val(fracy); - $this.paint.linearGradient.setAttribute('x2', fracx); - $this.paint.linearGradient.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); - var thisAlpha = (parseFloat(beginOpacity)*255).toString(16); + // 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($.cloneNode($this.paint.linearGradient)); + } else { // we create a gradient + 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', '#ffff00'); + + $this.paint.linearGradient = grad; + } + + var gradalpha = $this.paint.alpha; + $('#' + id + '_lg_jGraduate_OpacityInput').val(gradalpha); + var posx = parseInt(255*(gradalpha/100)) - 4.5; + $('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx}); + + var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0), + y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0), + x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0), + y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0); + + var rect = document.createElementNS(ns.svg, 'rect'); + rect.id = id + '_lg_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); + $('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', gradalpha/100); + + // 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+'_lg_jGraduate_Ok').bind('click', function() { + $this.paint.type = "linearGradient"; + $this.paint.solidColor = null; + okClicked(); + }); + $('#'+id+'_lg_jGraduate_Ok').bind('click', function(paint) { + cancelClicked(); + }); + + var x1 = $this.paint.linearGradient.getAttribute('x1'); + if(!x1) x1 = "0.0"; + var 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.setAttribute('x1', this.value); + beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); + }); + + var y1 = $this.paint.linearGradient.getAttribute('y1'); + if(!y1) y1 = "0.0"; + var 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.setAttribute('y1', this.value); + beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); + }); + + var x2 = $this.paint.linearGradient.getAttribute('x2'); + if(!x2) x2 = "1.0"; + var 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.setAttribute('x2', this.value); + endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); + }); + + var y2 = $this.paint.linearGradient.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.setAttribute('y2', this.value); + endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); + }); + + 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.appendChild( document.createElementNS(ns.svg, 'stop') ); + ++numstops; + } + stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop'); + } + + var setLgOpacitySlider = 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 + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx}); + $('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', x); + x = parseInt(x*100); + $('#' + id + '_lg_jGraduate_OpacityInput').val(x); + $this.paint.alpha = x; + }; + + // handle dragging on the opacity slider + var bSlidingOpacity = false; + $('#' + id + '_lg_jGraduate_Opacity').mousedown(function(evt) { + setLgOpacitySlider(evt, $(this)); + bSlidingOpacity = true; + evt.preventDefault(); + }).mousemove(function(evt) { + if (bSlidingOpacity) { + setLgOpacitySlider(evt, $(this)); + evt.preventDefault(); + } + }).mouseup(function(evt) { + setLgOpacitySlider(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, + // and Firefox 1.5 does not allow $('.stop') + $('.stop, #color_picker_lg_jGraduate_GradContainer image').mousedown(function(evt) { + draggingStop = this; + startx = evt.clientX; + starty = evt.clientY; + evt.preventDefault(); + }); + $('#'+id+'_lg_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.setAttribute('x1', fracx); + $this.paint.linearGradient.setAttribute('y1', fracy); + } + else { + x2Input.val(fracx); + y2Input.val(fracy); + $this.paint.linearGradient.setAttribute('x2', fracx); + $this.paint.linearGradient.setAttribute('y2', fracy); + } + + evt.preventDefault(); + } + }); + $('#'+id+'_lg_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+'lg_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); + var thisAlpha = (parseFloat(beginOpacity)*255).toString(16); + while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } + color = beginColor.substr(1) + thisAlpha; + $('#'+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 = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; + beginOpacity = color.get_A() ? color.get_A()/100 : 1; + 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); + var thisAlpha = (parseFloat(endOpacity)*255).toString(16); + while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } + color = endColor.substr(1) + thisAlpha; + $('#'+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 = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; + endOpacity = color.get_A() ? color.get_A()/100 : 1; + 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(); + }); + }); + + // -------------- + var thisAlpha = ($this.paint.alpha*255/100).toString(16); while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } - color = beginColor.substr(1) + thisAlpha; - $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({ - window: { title: "Pick the start color and opacity for the gradient" }, + color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha; + colPicker.jPicker( + { + window: { title: $settings.window.pickerTitle }, images: { clientPath: $settings.images.clientPath }, color: { active: color, alphaSupport: true } - }, function(color){ - beginColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; - beginOpacity = color.get_A() ? color.get_A()/100 : 1; - 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); - var thisAlpha = (parseFloat(endOpacity)*255).toString(16); + }, + function(color) { + $this.paint.type = "solidColor"; + $this.paint.alpha = color.get_A() ? color.get_A() : 100; + $this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none"; + $this.paint.linearGradient = null; + okClicked(); + }, + null, + function(){ cancelClicked(); } + ); + }()); + + + // Radial gradient + (function() { + var svg = document.getElementById(id + '_rg_jgraduate_svg'); + + // if we are sent a gradient, import it + if ($this.paint.type == "radialGradient") { + $this.paint.radialGradient.id = id+'_rg_jgraduate_grad'; + $this.paint.radialGradient = svg.appendChild($.cloneNode($this.paint.radialGradient)); + } else { // we create a gradient + var grad = svg.appendChild(document.createElementNS(ns.svg, 'radialGradient')); + grad.id = id+'_rg_jgraduate_grad'; + grad.setAttribute('cx','0.5'); + grad.setAttribute('cy','0.5'); + grad.setAttribute('r','0.5'); + + 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', '#ffff00'); + + $this.paint.radialGradient = grad; + } + + var gradalpha = $this.paint.alpha; + $('#' + id + '_rg_jGraduate_OpacityInput').val(gradalpha); + var posx = parseInt(255*(gradalpha/100)) - 4.5; + $('#' + id + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx}); + + var grad = $this.paint.radialGradient; + + var cx = parseFloat(grad.getAttribute('cx')||0.5), + cy = parseFloat(grad.getAttribute('cy')||0.5), + fx = parseFloat(grad.getAttribute('fx')||0.5), + fy = parseFloat(grad.getAttribute('fy')||0.5); + + // No match, so show focus point + var showFocus = grad.getAttribute('fx') != null && !(cx == fx && cy == fy); + + var rect = document.createElementNS(ns.svg, 'rect'); + rect.id = id + '_rg_jgraduate_rect'; + rect.setAttribute('x', MARGINX); + rect.setAttribute('y', MARGINY); + rect.setAttribute('width', SIZEY); + rect.setAttribute('height', SIZEY); + rect.setAttribute('fill', 'url(#'+id+'_rg_jgraduate_grad)'); + rect.setAttribute('fill-opacity', '1.0'); + + rect = svg.appendChild(rect); + + $('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', gradalpha/100); + + // stop visuals created here + var centerPoint = document.createElementNS(ns.svg, 'image'); + centerPoint.id = id + "_center_pt"; + centerPoint.setAttribute('class', 'stop'); + centerPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_c.png'); + centerPoint.setAttributeNS(ns.xlink, "title", "Center Point"); + centerPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild( + document.createTextNode("Center Point")); + centerPoint.setAttribute('width', 18); + centerPoint.setAttribute('height', 18); + centerPoint.setAttribute('x', MARGINX + SIZEX*cx - STOP_RADIUS); + centerPoint.setAttribute('y', MARGINY + SIZEY*cy - STOP_RADIUS); + centerPoint.setAttribute('cursor', 'move'); + + + var focusPoint = document.createElementNS(ns.svg, 'image'); + focusPoint.id = id + "_focus_pt"; + focusPoint.setAttribute('class', 'stop'); + focusPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_f.png'); + focusPoint.setAttributeNS(ns.xlink, "title", "Focus Point"); + focusPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild( + document.createTextNode("Focus Point")); + focusPoint.setAttribute('width', 18); + focusPoint.setAttribute('height', 18); + focusPoint.setAttribute('x', MARGINX + SIZEX*fx - STOP_RADIUS); + focusPoint.setAttribute('y', MARGINY + SIZEY*fy - STOP_RADIUS); + focusPoint.setAttribute('cursor', 'move'); + + // must append only after setting all attributes due to Webkit Bug 27952 + // https://bugs.webkit.org/show_bug.cgi?id=27592 + + // centerPoint is added last so it is moved first + focusPoint = svg.appendChild(focusPoint); + centerPoint = svg.appendChild(centerPoint); + + // bind GUI elements + $('#'+id+'_rg_jGraduate_Ok').bind('click', function() { + $this.paint.type = "radialGradient"; + $this.paint.solidColor = null; + okClicked(); + }); + $('#'+id+'_rg_jGraduate_Cancel').bind('click', function(paint) { + cancelClicked(); + }); + + var cx = $this.paint.radialGradient.getAttribute('cx'); + if(!cx) cx = "0.0"; + var cxInput = $('#'+id+'_jGraduate_cx'); + cxInput.val(cx); + cxInput.change( function() { + if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { + this.value = 0.0; + } + $this.paint.radialGradient.setAttribute('cx', this.value); + centerPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); + }); + + var cy = $this.paint.radialGradient.getAttribute('cy'); + if(!cy) cy = "0.0"; + var cyInput = $('#'+id+'_jGraduate_cy'); + cyInput.val(cy); + cyInput.change( function() { + if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { + this.value = 0.0; + } + $this.paint.radialGradient.setAttribute('cy', this.value); + centerPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); + }); + + var fx = $this.paint.radialGradient.getAttribute('fx'); + if(!fx) fx = "1.0"; + var fxInput = $('#'+id+'_jGraduate_fx'); + fxInput.val(fx); + fxInput.change( function() { + if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { + this.value = 1.0; + } + $this.paint.radialGradient.setAttribute('fx', this.value); + focusPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS); + }); + + var fy = $this.paint.radialGradient.getAttribute('fy'); + if(!fy) fy = "0.0"; + var fyInput = $('#'+id+'_jGraduate_fy'); + fyInput.val(fy); + fyInput.change( function() { + if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { + this.value = 0.0; + } + $this.paint.radialGradient.setAttribute('fy', this.value); + focusPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS); + }); + + if(!showFocus) { + focusPoint.setAttribute('display', 'none'); + fxInput.val(""); + fyInput.val(""); + } + + $("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus; + + var lastfx, lastfy; + + $("#" + id + "_jGraduate_match_ctr").change(function() { + showFocus = !this.checked; + focusPoint.setAttribute('display', showFocus?'inline':'none'); + fxInput.val(""); + fyInput.val(""); + var grad = $this.paint.radialGradient; + if(!showFocus) { + lastfx = grad.getAttribute('fx'); + lastfy = grad.getAttribute('fy'); + grad.removeAttribute('fx'); + grad.removeAttribute('fy'); + } else { + var fx = lastfx || .5; + var fy = lastfy || .5; + grad.setAttribute('fx', fx); + grad.setAttribute('fy', fy); + fxInput.val(fx); + fyInput.val(fy); + } + }); + + var stops = $this.paint.radialGradient.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.radialGradient.appendChild( document.createElementNS(ns.svg, 'stop') ); + ++numstops; + } + stops = $this.paint.radialGradient.getElementsByTagNameNS(ns.svg, 'stop'); + } + var radius = $this.paint.radialGradient.getAttribute('r')-0; + var radiusx = parseInt((245/2)*(radius)) - 4.5; + $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':radiusx}); + $('#' + id + '_jGraduate_RadiusInput').val(parseInt(radius*100)).change(function(e) { + var x = this.value / 100; + if(x < 0.01) { + x = 0.01; + } + + $this.paint.radialGradient.setAttribute('r', x); + // Allow higher value, but pretend it's the max for the slider + if(x > 2) x = 2; + var posx = parseInt((245/2) * x) - 4.5; + $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx}); + + }); + + var setRgOpacitySlider = 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 + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx}); + $('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', x); + x = parseInt(x*100); + $('#' + id + '_rg_jGraduate_OpacityInput').val(x); + $this.paint.alpha = x; + }; + + // handle dragging on the opacity slider + var bSlidingOpacity = false; + $('#' + id + '_rg_jGraduate_Opacity').mousedown(function(evt) { + setRgOpacitySlider(evt, $(this)); + bSlidingOpacity = true; + evt.preventDefault(); + }).mousemove(function(evt) { + if (bSlidingOpacity) { + setRgOpacitySlider(evt, $(this)); + evt.preventDefault(); + } + }).mouseup(function(evt) { + setRgOpacitySlider(evt, $(this)); + bSlidingOpacity = false; + evt.preventDefault(); + }); + + var setRadiusSlider = function(e, div) { + var offset = div.offset(); + var x = (e.pageX - offset.left - parseInt(div.css('border-left-width'))); + if (x > 245) x = 245; + if (x <= 1) x = 1; + var posx = x - 5; + x /= (245/2); + $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx}); + $this.paint.radialGradient.setAttribute('r', x); + x = parseInt(x*100); + + $('#' + id + '_jGraduate_RadiusInput').val(x); + }; + + // handle dragging on the radius slider + var bSlidingRadius = false; + $('#' + id + '_jGraduate_Radius').mousedown(function(evt) { + setRadiusSlider(evt, $(this)); + bSlidingRadius = true; + evt.preventDefault(); + }).mousemove(function(evt) { + if (bSlidingRadius) { + setRadiusSlider(evt, $(this)); + evt.preventDefault(); + } + }).mouseup(function(evt) { + setRadiusSlider(evt, $(this)); + bSlidingRadius = 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, + // and Firefox 1.5 does not allow $('.stop') + $('.stop, #color_picker_rg_jGraduate_GradContainer image').mousedown(function(evt) { + draggingStop = this; + startx = evt.clientX; + starty = evt.clientY; + evt.preventDefault(); + }); + $('#'+id+'_rg_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+'_center_pt')) { + cxInput.val(fracx); + cyInput.val(fracy); + $this.paint.radialGradient.setAttribute('cx', fracx); + $this.paint.radialGradient.setAttribute('cy', fracy); + + if(!showFocus) { + $this.paint.radialGradient.setAttribute('fx', fracx); + $this.paint.radialGradient.setAttribute('fy', fracy); + } + } + else { + fxInput.val(fracx); + fyInput.val(fracy); + $this.paint.radialGradient.setAttribute('fx', fracx); + $this.paint.radialGradient.setAttribute('fy', fracy); + } + + evt.preventDefault(); + } + }); + $('#'+id+'_rg_jgraduate_svg').mouseup(function(evt) { + draggingStop = null; + }); + + var centerColor = stops[0].getAttribute('stop-color'); + if(!centerColor) centerColor = '#000'; + centerColorBox = $('#'+id+'_jGraduate_colorBoxCenter'); + centerColorBox.css({'background-color':centerColor}); + + var centerOpacity = stops[0].getAttribute('stop-opacity'); + if(!centerOpacity) centerOpacity = '1.0'; + $('#'+id+'jGraduate_centerOpacity').html( (centerOpacity*100)+'%' ); + + var outerColor = stops[stops.length-1].getAttribute('stop-color'); + if(!outerColor) outerColor = '#000'; + outerColorBox = $('#'+id+'_jGraduate_colorBoxOuter'); + outerColorBox.css({'background-color':outerColor}); + + var outerOpacity = stops[stops.length-1].getAttribute('stop-opacity'); + if(!outerOpacity) outerOpacity = '1.0'; + $('#'+id+'rg_jGraduate_outerOpacity').html( (outerOpacity*100)+'%' ); + + $('#'+id+'_jGraduate_colorBoxCenter').click(function() { + $('div.jGraduate_LightBox').show(); + var colorbox = $(this); + var thisAlpha = (parseFloat(centerOpacity)*255).toString(16); + while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } + color = centerColor.substr(1) + thisAlpha; + $('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({ + window: { title: "Pick the center color and opacity for the gradient" }, + images: { clientPath: $settings.images.clientPath }, + color: { active: color, alphaSupport: true } + }, function(color){ + centerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; + centerOpacity = color.get_A() ? color.get_A()/100 : 1; + colorbox.css('background', centerColor); + $('#'+id+'_rg_jGraduate_centerOpacity').html(parseInt(centerOpacity*100)+'%'); + stops[0].setAttribute('stop-color', centerColor); + stops[0].setAttribute('stop-opacity', centerOpacity); + $('div.jGraduate_LightBox').hide(); + $('#'+id+'_rg_jGraduate_stopPicker').hide(); + }, null, function() { + $('div.jGraduate_LightBox').hide(); + $('#'+id+'_rg_jGraduate_stopPicker').hide(); + }); + }); + $('#'+id+'_jGraduate_colorBoxOuter').click(function() { + $('div.jGraduate_LightBox').show(); + var colorbox = $(this); + var thisAlpha = (parseFloat(outerOpacity)*255).toString(16); + while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } + color = outerColor.substr(1) + thisAlpha; + $('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({ + window: { title: "Pick the outer color and opacity for the gradient" }, + images: { clientPath: $settings.images.clientPath }, + color: { active: color, alphaSupport: true } + }, function(color){ + outerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; + outerOpacity = color.get_A() ? color.get_A()/100 : 1; + colorbox.css('background', outerColor); + $('#'+id+'_jGraduate_outerOpacity').html(parseInt(outerOpacity*100)+'%'); + stops[1].setAttribute('stop-color', outerColor); + stops[1].setAttribute('stop-opacity', outerOpacity); + $('div.jGraduate_LightBox').hide(); + $('#'+id+'_rg_jGraduate_stopPicker').hide(); + }, null, function() { + $('div.jGraduate_LightBox').hide(); + $('#'+id+'_rg_jGraduate_stopPicker').hide(); + }); + }); + + // -------------- + var thisAlpha = ($this.paint.alpha*255/100).toString(16); while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } - color = endColor.substr(1) + thisAlpha; - $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({ - window: { title: "Pick the end color and opacity for the gradient" }, + color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha; + colPicker.jPicker( + { + window: { title: $settings.window.pickerTitle }, images: { clientPath: $settings.images.clientPath }, color: { active: color, alphaSupport: true } - }, function(color){ - endColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none"; - endOpacity = color.get_A() ? color.get_A()/100 : 1; - 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(); - }); - }); - - // -------------- - var thisAlpha = ($this.paint.alpha*255/100).toString(16); - while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; } - color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha; - colPicker.jPicker( - { - window: { title: $settings.window.pickerTitle }, - images: { clientPath: $settings.images.clientPath }, - color: { active: color, alphaSupport: true } - }, - function(color) { - $this.paint.type = "solidColor"; - $this.paint.alpha = color.get_A() ? color.get_A() : 100; - $this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none"; - $this.paint.linearGradient = 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(); + }, + function(color) { + $this.paint.type = "solidColor"; + $this.paint.alpha = color.get_A() ? color.get_A() : 100; + $this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none"; + $this.paint.radialGradient = null; + okClicked(); + }, + null, + function(){ cancelClicked(); } + ); + }()); + + var tabs = $(idref + ' .jGraduate_tabs li'); + tabs.click(function() { + tabs.removeClass('jGraduate_tab_current'); + $(this).addClass('jGraduate_tab_current'); + $(idref + " > div").hide(); + $(idref + ' .jGraduate_' + $(this).attr('data-type') + 'Pick').show(); }); - if ($this.paint.type == "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'); + $(idref + " > div").hide(); + tabs.removeClass('jGraduate_tab_current'); + var tab; + switch ( $this.paint.type ) { + case 'linearGradient': + tab = $(idref + ' .jGraduate_tab_lingrad'); + break; + case 'radialGradient': + tab = $(idref + ' .jGraduate_tab_radgrad'); + break; + default: + tab = $(idref + ' .jGraduate_tab_color'); + break; } + tab.addClass('jGraduate_tab_current').click(); $this.show(); }); diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html index baddecb8..bc1d7b95 100644 --- a/public/svg-edit/editor/svg-editor.html +++ b/public/svg-edit/editor/svg-editor.html @@ -6,7 +6,7 @@ - + diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js index dcd3d352..4f8b5e41 100644 --- a/public/svg-edit/editor/svg-editor.js +++ b/public/svg-edit/editor/svg-editor.js @@ -644,10 +644,9 @@ function svg_edit_setup() { // update the editor's fill paint var opts = null; if (color.substr(0,5) == "url(#") { - opts = { - alpha: opac, - linearGradient: document.getElementById(color.substr(5,color.length-6)) - }; + var grad = document.getElementById(color.substr(5,color.length-6)); + opts = { alpha: opac }; + opts[grad.tagName] = grad; } else if (color.substr(0,1) == "#") { opts = { @@ -1985,7 +1984,7 @@ function svg_edit_setup() { var was_none = false; var pos = elem.position(); $("#color_picker") - .draggable({cancel:'.jPicker_table,.jGraduate_lgPick'}) + .draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'}) .css({'left': pos.left, 'bottom': 50 - pos.top}) .jGraduate( { @@ -1999,11 +1998,10 @@ function svg_edit_setup() { var oldgrad = document.getElementById("gradbox_"+picker); var svgbox = oldgrad.parentNode; var rectbox = svgbox.firstChild; - - if (paint.type == "linearGradient") { + if (paint.type == "linearGradient" || paint.type == "radialGradient") { svgbox.removeChild(oldgrad); - var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient, true)); - svgCanvas.fixOperaXML(newgrad, paint.linearGradient) + var newgrad = svgbox.appendChild(document.importNode(paint[paint.type], true)); + svgCanvas.fixOperaXML(newgrad, paint[paint.type]) newgrad.id = "gradbox_"+picker; rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")"); } @@ -2815,7 +2813,7 @@ function svg_edit_setup() { updateCanvas(true); }); -// var revnums = "svg-editor.js ($Rev: 1449 $) "; +// var revnums = "svg-editor.js ($Rev: 1452 $) "; // revnums += svgCanvas.getVersion(); // $('#copyright')[0].setAttribute("title", revnums); return svgCanvas; diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index 960aa98a..9c9e819c 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/public/svg-edit/editor/svgcanvas.js @@ -943,6 +943,14 @@ function BatchCommand(text) { $(svgroot).appendTo(container); + var opac_ani = document.createElementNS(svgns, 'animate'); + $(opac_ani).attr({ + attributeName: 'opacity', + begin: 'indefinite', + dur: 1, + fill: 'freeze' + }).appendTo(svgroot); + //nonce to uniquify id's var nonce = Math.floor(Math.random()*100001); var randomize_ids = false; @@ -1501,11 +1509,11 @@ function BatchCommand(text) { } }); - var lgrads = svgcontent.getElementsByTagNameNS(svgns, "linearGradient"), + var grads = $(svgcontent).find("linearGradient, radialGradient"); grad_ids = [], - i = lgrads.length; + i = grads.length; while (i--) { - var grad = lgrads[i]; + var grad = grads[i]; var id = grad.id; if($.inArray(id, grad_uses) == -1) { // Not found, so remove @@ -1600,7 +1608,7 @@ function BatchCommand(text) { // map various namespaces to our fixed namespace prefixes // (the default xmlns attribute itself does not get a prefix) - if(!attr.namespaceURI || nsMap[attr.namespaceURI]) { + if(!attr.namespaceURI || attr.namespaceURI == svgns || nsMap[attr.namespaceURI]) { out.push(attr.nodeName); out.push("=\""); out.push(attrVal); out.push("\""); } @@ -3677,6 +3685,21 @@ function BatchCommand(text) { } else if (element != null) { canvas.addedNew = true; + var ani_dur = .2, c_ani; + if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) { + c_ani = $(opac_ani).clone().attr({ + to: cur_shape.opacity, + dur: ani_dur + }).appendTo(element); + c_ani[0].beginElement(); + } else { + ani_dur = 0; + } + + // Ideally this would be done on the endEvent of the animation, + // but that doesn't seem to be supported in Webkit + setTimeout(function() { + if(c_ani) c_ani.remove(); element.setAttribute("opacity", cur_shape.opacity); element.setAttribute("style", "pointer-events:inherit"); cleanupElement(element); @@ -3690,6 +3713,7 @@ function BatchCommand(text) { // undo means to call cmd.unapply(), redo means to call cmd.apply() addCommandToHistory(new InsertElementCommand(element)); call("changed",[element]); + }, ani_dur * 1000); } start_transform = null; @@ -6627,10 +6651,12 @@ function BatchCommand(text) { var findDuplicateGradient = function(grad) { var defs = findDefs(); - var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient"); + var existing_grads = $(defs).find("linearGradient, radialGradient"); var i = existing_grads.length; + var rad_attrs = ['r','cx','cy','fx','fy']; while (i--) { - var og = existing_grads.item(i); + var og = existing_grads[i]; + if(grad.tagName == "linearGradient") { if (grad.getAttribute('x1') != og.getAttribute('x1') || grad.getAttribute('y1') != og.getAttribute('y1') || grad.getAttribute('x2') != og.getAttribute('x2') || @@ -6638,6 +6664,17 @@ function BatchCommand(text) { { continue; } + } else { + var grad_attrs = $(grad).attr(rad_attrs); + var og_attrs = $(og).attr(rad_attrs); + + var diff = false; + $.each(rad_attrs, function(i, attr) { + if(grad_attrs[attr] != og_attrs[attr]) diff = true; + }); + + if(diff) continue; + } // else could be a duplicate, iterate through stops var stops = grad.getElementsByTagNameNS(svgns, "stop"); @@ -6649,8 +6686,8 @@ function BatchCommand(text) { var j = stops.length; while(j--) { - var stop = stops.item(j); - var ostop = ostops.item(j); + var stop = stops[j]; + var ostop = ostops[j]; if (stop.getAttribute('offset') != ostop.getAttribute('offset') || stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') || @@ -6684,6 +6721,10 @@ function BatchCommand(text) { canvas.strokeGrad = p.linearGradient; if(addGrad) addGradient(); } + else if(p.type == "radialGradient") { + canvas.strokeGrad = p.radialGradient; + if(addGrad) addGradient(); + } else { // console.log("none!"); } @@ -6703,6 +6744,10 @@ function BatchCommand(text) { canvas.fillGrad = p.linearGradient; if(addGrad) addGradient(); } + else if(p.type == "radialGradient") { + canvas.fillGrad = p.radialGradient; + if(addGrad) addGradient(); + } else { // console.log("none!"); } @@ -7990,7 +8035,7 @@ function BatchCommand(text) { // Function: getVersion // Returns a string which describes the revision number of SvgCanvas. this.getVersion = function() { - return "svgcanvas.js ($Rev: 1450 $)"; + return "svgcanvas.js ($Rev: 1454 $)"; }; this.setUiStrings = function(strs) {