svgEditor

wente

2024-05-22 686e9cb12978d559130f816e5c2d2854a13c2f48

 web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js

@@ -17,10 +17,10 @@
    window: { title: "Pick the start color and opacity for the gradient" },
    images: { clientPath: "images/" },
    paint: a Paint object,
    newstop: String of value "same", "inverse", "black" or "white" 
    newstop: String of value "same", "inverse", "black" or "white"
         OR object with one or both values {color: #Hex color, opac: number 0-1}
  }
 

- the Paint object is:
  Paint {
    type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
@@ -48,9 +48,9 @@

 *
 */
 

(function() {
 

var ns = { svg: 'http://www.w3.org/2000/svg', xlink: 'http://www.w3.org/1999/xlink' };
if(!window.console) {
  window.console = new function() {
@@ -59,7 +59,7 @@
  };
}

$.jGraduate = { 
$.jGraduate = {
  Paint:
    function(opt) {
      var options = opt || {};
@@ -157,13 +157,13 @@
      var $this = $(this), $settings = $.extend(true, {}, jQuery.fn.jGraduateDefaults, options),
        id = $this.attr('id'),
        idref = '#'+$this.attr('id')+' ';
      

            if (!idref)
            {
              alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
              return;
            }
            

            var okClicked = function() {
              switch ( $this.paint.type ) {
                case "radialGradient":
@@ -199,146 +199,146 @@
      if ($this.paint.type == "none") {
        $this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
      }
      

            $this.addClass('jGraduate_Picker');
            $this.html('<ul class="jGraduate_tabs">' +
                    '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
                    '<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
                    '<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
                    '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">颜色</li>' +
                  '<li class="jGraduate_tab_lingrad" data-type="lg">线性渐变</li>' +
                    '<li class="jGraduate_tab_radgrad" data-type="rg">径向渐变</li>' +
                  '</ul>' +
                  '<div class="jGraduate_colPick"></div>' +
                  '<div class="jGraduate_gradPick"></div>' +
            '<div class="jGraduate_LightBox"></div>' +
            '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
                  
                  


                  );
      var colPicker = $(idref + '> .jGraduate_colPick');
      var gradPicker = $(idref + '> .jGraduate_gradPick');
      

            gradPicker.html(
              '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
                '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
                '<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
                '<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' +
              '</div>' + 
              '</div>' +
              '<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">' +
                '<div class="jGraduate_StopSection">' +
                  '<label class="jGraduate_Form_Heading">Begin Point</label>' +
                  '<label class="jGraduate_Form_Heading">起点</label>' +
                  '<div class="jGraduate_Form_Section">' +
                    '<label>x:</label>' +
                    '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' +
                    '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="输入介于0.0和1.0之间的起始x值"/>' +
                    '<label> y:</label>' +
                    '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' +
                    '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="输入介于0.0和1.0之间的起始y值"/>' +
                  '</div>' +
                '</div>' +
                '<div class="jGraduate_StopSection">' +
                  '<label class="jGraduate_Form_Heading">End Point</label>' +
                  '<label class="jGraduate_Form_Heading">终点</label>' +
                  '<div class="jGraduate_Form_Section">' +
                    '<label>x:</label>' +
                    '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' +
                    '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="输入介于0.0和1.0之间的起始x值"/>' +
                    '<label> y:</label>' +
                    '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' +
                    '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="输入介于0.0和1.0之间的起始y值"/>' +
                  '</div>' +
                '</div>' +
              '</div>' +
              '<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">' +
          '<div class="jGraduate_StopSection">' +
            '<label class="jGraduate_Form_Heading">Center Point</label>' +
            '<label class="jGraduate_Form_Heading">中心点</label>' +
            '<div class="jGraduate_Form_Section">' +
              '<label>x:</label>' +
              '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
              '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="输入介于0.0和1.0之间的起始x值"/>' +
              '<label> y:</label>' +
              '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
              '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="输入介于0.0和1.0之间的起始y值"/>' +
            '</div>' +
          '</div>' +
          '<div class="jGraduate_StopSection">' +
            '<label class="jGraduate_Form_Heading">Focal Point</label>' +
            '<label class="jGraduate_Form_Heading">焦点</label>' +
            '<div class="jGraduate_Form_Section">' +
              '<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
              '<label>x:</label>' +
              '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
              '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="输入介于0.0和1.0之间的起始x值"/>' +
              '<label> y:</label>' +
              '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
              '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="输入介于0.0和1.0之间的起始y值"/>' +
            '</div>' +
          '</div>' +
              '</div>' +
        '<div class="jGraduate_StopSection jGraduate_SpreadMethod">' +
          '<label class="jGraduate_Form_Heading">Spread method</label>' +
          '<label class="jGraduate_Form_Heading">扩散方式</label>' +
          '<div class="jGraduate_Form_Section">' +
            '<select class="jGraduate_spreadMethod">' +
              '<option value=pad selected>Pad</option>' +
              '<option value=reflect>Reflect</option>' +
              '<option value=repeat>Repeat</option>' +
            '</select>' + 
              '<option value=pad selected>延长</option>' +
              '<option value=reflect>映射</option>' +
              '<option value=repeat>重复</option>' +
            '</select>' +
          '</div>' +
        '</div>' +
              '<div class="jGraduate_Form">' +
                '<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">' +
            '<label class="prelabel">Radius:</label>' +
            '<label class="prelabel">半径:</label>' +
            '<div id="' + id + '_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="Click to set radius">' +
              '<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
            '</div>' +
            '<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' + 
            '<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' +
                '</div>' +
                '<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">' +
            '<label class="prelabel">Ellip:</label>' +
            '<label class="prelabel">椭圆:</label>' +
            '<div id="' + id + '_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="Click to set Ellip">' +
              '<img id="' + id + '_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
            '</div>' +
            '<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' + 
            '<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' +
                '</div>' +
                '<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">' +
            '<label class="prelabel">Angle:</label>' +
            '<label class="prelabel">角度:</label>' +
            '<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
              '<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
            '</div>' +
            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</label>' + 
            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</label>' +
                '</div>' +
                '<div class="jGraduate_Slider jGraduate_OpacField">' +
            '<label class="prelabel">Opac:</label>' +
            '<label class="prelabel">透明度:</label>' +
            '<div id="' + id + '_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac">' +
              '<img id="' + id + '_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
            '</div>' +
            '<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' + 
            '<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' +
                '</div>' +
              '</div>' +
              '<div class="jGraduate_OkCancel">' +
                '<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
                '<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
              '</div>');
              

      // --------------
            // 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 curType, curGradient, previewRect;  
            

            var curType, curGradient, previewRect;

      var attr_input = {};
            

            var SLIDERW = 145;
            $('.jGraduate_SliderBar').width(SLIDERW);
      

      var container = $('#' + id+'_jGraduate_GradContainer')[0];
      

      var svg = mkElem('svg', {
        id: id + '_jgraduate_svg',
        width: MAX,
        height: MAX,
        xmlns: ns.svg
      }, container);
      
      // if we are sent a gradient, import it 
      

      // if we are sent a gradient, import it

      curType = curType || $this.paint.type;
      

      var grad = curGradient = $this.paint[curType];
      

      var gradalpha = $this.paint.alpha;
      

      var isSolid = curType === 'solidColor';
      

      // Make any missing gradients
      switch ( curType ) {
        case "solidColor":
@@ -365,18 +365,18 @@
            y2: 0
          }, svg);
      }
      

      if(isSolid) {
        grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
        var color = $this.paint[curType];
        mkStop(0, '#' + color, 1);
        

        var type = typeof $settings.newstop;
        

        if(type === 'string') {
          switch ( $settings.newstop ) {
            case 'same':
              mkStop(1, '#' + color, 1);        
              mkStop(1, '#' + color, 1);
              break;

            case 'inverse':
@@ -393,11 +393,11 @@
              }
              mkStop(1, '#' + inverted, 1);
              break;
            

            case 'white':
              mkStop(1, '#ffffff', 1);
              break;
  

            case 'black':
              mkStop(1, '#000000', 1);
              break;
@@ -408,18 +408,18 @@
        }
      }

      

      var x1 = parseFloat(grad.getAttribute('x1')||0.0),
        y1 = parseFloat(grad.getAttribute('y1')||0.0),
        x2 = parseFloat(grad.getAttribute('x2')||1.0),
        y2 = parseFloat(grad.getAttribute('y2')||0.0);
        

      var cx = parseFloat(grad.getAttribute('cx')||0.5),
        cy = parseFloat(grad.getAttribute('cy')||0.5),
        fx = parseFloat(grad.getAttribute('fx')|| cx),
        fy = parseFloat(grad.getAttribute('fy')|| cy);

      

      var previewRect = mkElem('rect', {
        id: id + '_jgraduate_rect',
        x: MARGINX,
@@ -429,7 +429,7 @@
        fill: 'url(#'+id+'_jgraduate_grad)',
        'fill-opacity': gradalpha/100
      }, svg);
      

      // stop visuals created here
      var beginCoord = $('<div/>').attr({
        'class': 'grad_coord jGraduate_lg_field',
@@ -438,12 +438,12 @@
        top: y1 * MAX,
        left: x1 * MAX
      }).data('coord', 'start').appendTo(container);
      

      var endCoord = beginCoord.clone().text(2).css({
        top: y2 * MAX,
        left: x2 * MAX
      }).attr('title', 'End stop').data('coord', 'end').appendTo(container);
    

      var centerCoord = $('<div/>').attr({
        'class': 'grad_coord jGraduate_rg_field',
        title: 'Center stop'
@@ -451,22 +451,22 @@
        top: cy * MAX,
        left: cx * MAX
      }).data('coord', 'center').appendTo(container);
      

      var focusCoord = centerCoord.clone().text('F').css({
        top: fy * MAX,
        left: fx * MAX,
        display: 'none'
      }).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
      

      focusCoord[0].id = id + '_jGraduate_focusCoord';
      

      var coords = $(idref + ' .grad_coord');
      

      $.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function(i, attr) {
        var attrval = curGradient.getAttribute(attr);
        

        var isRadial = isNaN(attr[1]);
        

        if(!attrval) {
          // Set defaults
          if(isRadial) {
@@ -483,25 +483,25 @@
          .change(function() {
            // TODO: Support values < 0 and > 1 (zoomable preview?)
            if (isNaN(parseFloat(this.value)) || this.value < 0) {
              this.value = 0.0; 
              this.value = 0.0;
            } else if(this.value > 1) {
              this.value = 1.0;
            }
            

            if(!(attr[0] === 'f' && !showFocus)) {
              if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
                curGradient.setAttribute(attr, this.value);
              }
            }
            

            if(isRadial) {
              var $elem = attr[0] === "c" ? centerCoord : focusCoord;
            } else {
              var $elem = attr[1] === "1" ? beginCoord : endCoord;            
              var $elem = attr[1] === "1" ? beginCoord : endCoord;
            }
            

            var cssName = attr.indexOf('x') >= 0 ? 'left' : 'top';
            

            $elem.css(cssName, this.value * MAX);
        }).change();
      });
@@ -516,15 +516,15 @@
          curGradient.appendChild(stop);
        }
        if(opac === null) opac = 1;
        

        var picker_d = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
        

        var pathbg = mkElem('path',{
          d: picker_d,
          fill: 'url(#jGraduate_trans)',
          transform: 'translate(' + (10 + n * MAX) + ', 26)'
        }, stopGroup);
        

        var path = mkElem('path',{
          d: picker_d,
          fill: color,
@@ -542,7 +542,7 @@
          e.preventDefault();
          return false;
        }).data('stop', stop).data('bg', pathbg).dblclick(function() {
          $('div.jGraduate_LightBox').show();     
          $('div.jGraduate_LightBox').show();
          var colorhandle = this;
          var stopOpacity = +stop.getAttribute('stop-opacity') || 1;
          var stopColor = stop.getAttribute('stop-color') || 1;
@@ -567,7 +567,7 @@
              $('#'+id+'_jGraduate_stopPicker').hide();
            });
        });
        

        $(curGradient).find('stop').each(function() {
          var cur_s = $(this);
          if(+this.getAttribute('offset') > n) {
@@ -586,7 +586,7 @@
        if(sel) selectStop(path);
        return stop;
      }
      

      function remStop() {
        delStop.setAttribute('display', 'none');
        var path = $(cur_stop);
@@ -594,14 +594,14 @@
        var bg = path.data('bg');
        $([cur_stop, stop, bg]).remove();
      }
      
        


      var stops, stopGroup;
      

      var stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');

      var cur_stop, stopGroup, stopMakerSVG, drag;
      

      var delStop = mkElem('path',{
        d:'m9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',
        fill:'none',
@@ -610,7 +610,7 @@
        display:'none'
      }, stopMakerSVG);

      

      function selectStop(item) {
        if(cur_stop) cur_stop.setAttribute('stroke', '#000');
        item.setAttribute('stroke', 'blue');
@@ -620,9 +620,9 @@
      //  opac_select.val(cur_stop.attr('fill-opacity') || 1);
      //  root.append(delStop);
      }
      

      var stop_offset;
      

      function remDrags() {
        $win.unbind('mousemove', dragColor);
        if(delStop.getAttribute('display') !== 'none') {
@@ -630,11 +630,11 @@
        }
        drag = null;
      }
      

      var scale_x = 1, scale_y = 1, angle = 0;
      var c_x = cx;
      var c_y = cy;
      

      function xform() {
        var rot = angle?'rotate(' + angle + ',' + c_x + ',' + c_y + ') ':'';
        if(scale_x === 1 && scale_y === 1) {
@@ -647,7 +647,7 @@
//          $('#ang').removeClass('dis');
        }
      }
      

      function dragColor(evt) {

        var x = evt.pageX - stop_offset.left;
@@ -661,15 +661,15 @@
          } else {
            delStop.setAttribute('display', 'none');
          }
        

        drag.setAttribute('transform', xf_str);
        $.data(drag, 'bg').setAttribute('transform', xf_str);
        var stop = $.data(drag, 'stop');
        var s_x = (x - 10) / MAX;
        

        stop.setAttribute('offset', s_x);
        var last = 0;
        

        $(curGradient).find('stop').each(function(i) {
          var cur = this.getAttribute('offset');
          var t = $(this);
@@ -679,30 +679,30 @@
          }
          last = cur;
        });
        

      }
      

      stopMakerSVG = mkElem('svg', {
        width: '100%',
        height: 45
      }, stopMakerDiv[0]);
      

      var trans_pattern = mkElem('pattern', {
        width: 16,
        height: 16,
        patternUnits: 'userSpaceOnUse',
        id: 'jGraduate_trans'
      }, stopMakerSVG);
      

      var trans_img = mkElem('image', {
        width: 16,
        height: 16
      }, trans_pattern);
      

      var bg_image = $settings.images.clientPath + 'map-opacity.png';

      trans_img.setAttributeNS(ns.xlink, 'xlink:href', bg_image);
      

      $(stopMakerSVG).on("click touchstart", function(evt) {
        stop_offset = stopMakerDiv.offset();
        var target = evt.target;
@@ -712,13 +712,13 @@
        mkStop(x / MAX, 0, 0, true);
        evt.stopPropagation();
      });
      

      $(stopMakerSVG).mouseover(function() {
        stopMakerSVG.appendChild(delStop);
      });
      

      stopGroup = mkElem('g', {}, stopMakerSVG);
      

      mkElem('line', {
        x1: 10,
        y1: 15,
@@ -727,16 +727,16 @@
        'stroke-width': 2,
        stroke: '#000'
      }, stopMakerSVG);
      
      


      var spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function() {
        curGradient.setAttribute('spreadMethod', $(this).val());
      });
      
    


      // handle dragging the stop around the swatch
      var draggingCoord = null;
      

      var onCoordDrag = function(evt) {
        var x = evt.pageX - offset.left;
        var y = evt.pageY - offset.top;
@@ -744,16 +744,16 @@
        // clamp stop to the swatch
        x = x < 0 ? 0 : x > MAX ? MAX : x;
        y = y < 0 ? 0 : y > MAX ? MAX : y;
        

        draggingCoord.css('left', x).css('top', y);

        // calculate stop offset                
        // calculate stop offset
        var fracx = x / SIZEX;
        var fracy = y / SIZEY;
        

        var type = draggingCoord.data('coord');
        var grad = curGradient;
        

        switch ( type ) {
          case 'start':
            attr_input.x1.val(fracx);
@@ -783,22 +783,22 @@
            grad.setAttribute('fy', fracy);
            xform();
        }
        

        evt.preventDefault();
      }
      

      var onCoordUp = function() {
        draggingCoord = null;
        $win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
      }
      

      // Linear gradient
//      (function() {

      

      stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');

      // if there are not at least two stops, then 
      // if there are not at least two stops, then
      if (numstops < 2) {
        while (numstops < 2) {
          curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
@@ -806,22 +806,22 @@
        }
        stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
      }
      
      var numstops = stops.length;        

      var numstops = stops.length;
      for(var i = 0; i < numstops; i++) {
        mkStop(0, 0, 0, 0, stops[i]);
      }
      

      spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');

      var offset;
      

      // No match, so show focus point
      var showFocus = false; 
      
      var showFocus = false;

      previewRect.setAttribute('fill-opacity', gradalpha/100);

      

      $('#' + id + ' div.grad_coord').mousedown(function(evt) {
        evt.preventDefault();
        draggingCoord = $(this);
@@ -829,7 +829,7 @@
        offset = draggingCoord.parent().offset();
        $win.mousemove(onCoordDrag).mouseup(onCoordUp);
      });
      

      // bind GUI elements
      $('#'+id+'_jGraduate_Ok').bind('click touchstart', function() {
        $this.paint.type = curType;
@@ -843,7 +843,7 @@

      if(curType === 'radialGradient') {
        if(showFocus) {
          focusCoord.show();        
          focusCoord.show();
        } else {
          focusCoord.hide();
          attr_input.fx.val("");
@@ -852,9 +852,9 @@
      }

      $("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus;
      

      var lastfx, lastfy;
      

      $("#" + id + "_jGraduate_match_ctr").change(function() {
        showFocus = !this.checked;
        focusCoord.toggle(showFocus);
@@ -875,10 +875,10 @@
          attr_input.fy.val(fy);
        }
      });
      

      var stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
      var numstops = stops.length;
      // if there are not at least two stops, then 
      // if there are not at least two stops, then
      if (numstops < 2) {
        while (numstops < 2) {
          curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
@@ -886,9 +886,9 @@
        }
        stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
      }
      

      var slider;
      

      var setSlider = function(e) {
        var offset = slider.offset;
        var div = slider.parent;
@@ -897,7 +897,7 @@
        if (x <= 0) x = 0;
        var posx = x - 5;
        x /= SLIDERW;
        

        switch ( slider.type ) {
          case 'radius':
            x = Math.pow(x * 2, 2.5);
@@ -918,7 +918,7 @@
              x /= .5; // 2
              x = 2 - x;
              scale_y = x <= 0 ? .01 : x;
            } 
            }
            xform();
            x -= 1;
            if(scale_y === x + 1) {
@@ -936,9 +936,9 @@
        x = Math.round(x*100);
        slider.input.val(x);
      };
      

      var ellip_val = 0, angle_val = 0;
      

      if(curType === 'radialGradient') {
        var tlist = curGradient.gradientTransform.baseVal;
        if(tlist.numberOfItems === 2) {
@@ -947,33 +947,33 @@
          if(t.type === 2 && s.type === 3) {
            var m = s.matrix;
            if(m.a !== 1) {
              ellip_val = Math.round(-(1 - m.a) * 100); 
              ellip_val = Math.round(-(1 - m.a) * 100);
            } else if(m.d !== 1) {
              ellip_val = Math.round((1 - m.d) * 100);
            } 
            }
          }
        } else if(tlist.numberOfItems === 3) {
          // Assume [R][T][S]
          var r = tlist.getItem(0);
          var t = tlist.getItem(1);
          var s = tlist.getItem(2);
          
          if(r.type === 4 
            && t.type === 2 

          if(r.type === 4
            && t.type === 2
            && s.type === 3) {

            angle_val = Math.round(r.angle);
            var m = s.matrix;
            if(m.a !== 1) {
              ellip_val = Math.round(-(1 - m.a) * 100); 
              ellip_val = Math.round(-(1 - m.a) * 100);
            } else if(m.d !== 1) {
              ellip_val = Math.round((1 - m.d) * 100);
            } 
            
            }

          }
        }
      }
      

      var sliders = {
        radius: {
          handle: '#' + id + '_jGraduate_RadiusArrows',
@@ -996,7 +996,7 @@
          val: angle_val
        }
      }
      

      $.each(sliders, function(type, data) {
        var handle = $(data.handle);
        handle.mousedown(function(evt) {
@@ -1011,7 +1011,7 @@
          $win.mousemove(dragSlider).mouseup(stopSlider);
          evt.preventDefault();
        });
        

        $(data.input).val(data.val).change(function() {
          var val = +this.value;
          var xpos = 0;
@@ -1021,13 +1021,13 @@
              if(isRad) curGradient.setAttribute('r', val / 100);
              xpos = (Math.pow(val / 100, 1 / 2.5) / 2) * SLIDERW;
              break;
            

            case 'opacity':
              $this.paint.alpha = val;
              previewRect.setAttribute('fill-opacity', val / 100);
              xpos = val * (SLIDERW / 100);
              break;
              

            case 'ellip':
              scale_x = scale_y = 1;
              if(val === 0) {
@@ -1044,7 +1044,7 @@
              xpos = SLIDERW * ((val + 100) / 2) / 100;
              if(isRad) xform();
              break;
            

            case 'angle':
              angle = val;
              xpos = angle / 180;
@@ -1060,33 +1060,33 @@
          handle.css({'margin-left': xpos - 5});
        }).change();
      });
      

      var dragSlider = function(evt) {
        setSlider(evt);
        evt.preventDefault();
      };
      

      var stopSlider = function(evt) {
        $win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
        slider = null;
      };
      
      


      // --------------
      var thisAlpha = ($this.paint.alpha*255/100).toString(16);
      while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
      thisAlpha = thisAlpha.split(".")[0];
      color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
      

      if(!isSolid) {
        color = stops[0].getAttribute('stop-color');
      }
      

      // This should be done somewhere else, probably
      $.extend($.fn.jPicker.defaults.window, {
        alphaSupport: true, effects: {type: 'show',speed: 0}
      });
      

      colPicker.jPicker(
        {
          window: { title: $settings.window.pickerTitle },
@@ -1098,13 +1098,13 @@
          $this.paint.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
          $this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
          $this.paint.radialGradient = null;
          okClicked(); 
          okClicked();
        },
        null,
        function(){ cancelClicked(); }
        );

      

      var tabs = $(idref + ' .jGraduate_tabs li');
      tabs.on("click touchstart", function() {
        tabs.removeClass('jGraduate_tab_current');
@@ -1116,19 +1116,19 @@
          // Show/hide appropriate fields
          $('.jGraduate_' + type + '_field').show();
          $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
          

          $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
          

          // Copy stops
          

          curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
          

          $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
          

          var newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
          

          if(curGradient !== newGrad) {
            var cur_stops = $(curGradient).find('stop');  
            var cur_stops = $(curGradient).find('stop');
            $(newGrad).empty().append(cur_stops);
            curGradient = newGrad;
            var sm = spreadMethodOpt.val();
@@ -1159,11 +1159,11 @@
          break;
      }
      $this.show();
      

      // jPicker will try to show after a 0ms timeout, so need to fire this after that
      setTimeout(function() {
        tab.addClass('jGraduate_tab_current').click();  
        tab.addClass('jGraduate_tab_current').click();
      }, 10);
    });
  };
})();
})();