deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Radial Gradients

Browse source 
Sync with latest SVG-Edit, which 
supports radial gradients.
This commit is contained in:
Jacques Distler 2010-03-10 19:02:40 -06:00
parent 9ed0772978
commit 7e7ae4c6f0
7 changed files with 1026 additions and 379 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
public/svg-edit/editor/jgraduate/css/jGraduate-0.2.0.css → public/svg-edit/editor/jgraduate/css/jgraduate.css
View file

@ -26,7 +26,7 @@ h2.jGraduate_Title {
padding: 10px; padding: 10px;
} }
li.jGraduate_tab_color, li.jGraduate_tab_lingrad { .jGraduate_tabs li {
background-color: #ccc; background-color: #ccc;
display: inline; display: inline;
border: solid 1px grey; border: solid 1px grey;
@ -55,6 +55,14 @@ li.jGraduate_tab_current {
overflow: auto; overflow: auto;
} }
.jGraduate_rgPick {
display: none;
border: outset 1px #666;
padding: 10px 7px 5px 5px;
overflow: auto;
/* position: relative;*/
}
.jGraduate_tabs { .jGraduate_tabs {
position: relative; position: relative;
background-color: #EFEFEF; background-color: #EFEFEF;
@ -90,7 +98,7 @@ div.jGraduate_Opacity {
cursor: ew-resize; cursor: ew-resize;
} }
div.jGraduate_OpacityField { div.lg_jGraduate_OpacityField {
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
left: 292px; left: 292px;
@ -107,6 +115,41 @@ div.jGraduate_StopSection {
text-align: center; 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 { div.jGraduate_OkCancel {
float: left; float: left;
width: 113px; width: 113px;
@ -174,3 +217,50 @@ div.jGraduate_stopPicker {
display: none; display: none;
background: #E8E8E8; 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;
}

BIN
public/svg-edit/editor/jgraduate/images/mappoint_c.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 252 B

BIN
public/svg-edit/editor/jgraduate/images/mappoint_f.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 255 B

642
public/svg-edit/editor/jgraduate/jquery.jgraduate.js
View file

@ -3,8 +3,10 @@
* *
* jQuery Plugin for a gradient picker * jQuery Plugin for a gradient picker
* *
* Copyright (c) 2009 Jeff Schiller * Copyright (c) 2010 Jeff Schiller
* http://blog.codedread.com/ * http://blog.codedread.com/
* Copyright (c) 2010 Alexis Deveria
* http://a.deveria.com/
* *
* Apache 2 License * Apache 2 License
@ -23,12 +25,14 @@ where options is an object literal:
alpha: Number representing opacity (0-100), alpha: Number representing opacity (0-100),
solidColor: String representing #RRGGBB hex of color, solidColor: String representing #RRGGBB hex of color,
linearGradient: object of interface SVGLinearGradientElement, linearGradient: object of interface SVGLinearGradientElement,
radialGradient: object of interface SVGRadialGradientElement,
} }
$.jGraduate.Paint() -> constructs a 'none' color $.jGraduate.Paint() -> constructs a 'none' color
$.jGraduate.Paint({copy: o}) -> creates a copy of the paint o $.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({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({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? $.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
- picker accepts the following object as input: - picker accepts the following object as input:
@ -74,27 +78,38 @@ $.jGraduate = {
if (options.copy) { if (options.copy) {
this.type = options.copy.type; this.type = options.copy.type;
this.alpha = options.copy.alpha; this.alpha = options.copy.alpha;
switch(this.type) {
case "none":
this.solidColor = null; this.solidColor = null;
this.linearGradient = null; this.linearGradient = null;
this.radialGradient = null;
switch(this.type) {
case "none":
break; break;
case "solidColor": case "solidColor":
this.solidColor = options.copy.solidColor; this.solidColor = options.copy.solidColor;
this.linearGradient = null;
break; break;
case "linearGradient": case "linearGradient":
this.solidColor = null;
this.linearGradient = $.cloneNode(options.copy.linearGradient); this.linearGradient = $.cloneNode(options.copy.linearGradient);
break; break;
case "radialGradient":
this.radialGradient = $.cloneNode(options.copy.radialGradient);
break;
} }
} }
// create linear gradient paint // create linear gradient paint
else if (options.linearGradient) { else if (options.linearGradient) {
this.type = "linearGradient"; this.type = "linearGradient";
this.solidColor = null; this.solidColor = null;
this.radialGradient = null;
this.linearGradient = $.cloneNode(options.linearGradient); 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 // create solid color paint
else if (options.solidColor) { else if (options.solidColor) {
this.type = "solidColor"; this.type = "solidColor";
@ -105,6 +120,7 @@ $.jGraduate = {
this.type = "none"; this.type = "none";
this.solidColor = null; this.solidColor = null;
this.linearGradient = null; this.linearGradient = null;
this.radialGradient = null;
} }
} }
}; };
@ -134,6 +150,15 @@ jQuery.fn.jGraduate =
} }
var okClicked = function() { 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); $.isFunction($this.okCallback) && $this.okCallback($this.paint);
$this.hide(); $this.hide();
}, },
@ -159,20 +184,23 @@ jQuery.fn.jGraduate =
$this.addClass('jGraduate_Picker'); $this.addClass('jGraduate_Picker');
$this.html('<ul class="jGraduate_tabs">' + $this.html('<ul class="jGraduate_tabs">' +
'<li class="jGraduate_tab_color jGraduate_tab_current">Solid Color</li>' + '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
'<li class="jGraduate_tab_lingrad">Linear Gradient</li>' + '<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
'</ul>' + '</ul>' +
'<div class="jGraduate_colPick"></div>' + '<div class="jGraduate_colPick"></div>' +
'<div class="jGraduate_lgPick"></div>'); '<div class="jGraduate_lgPick"></div>' +
'<div class="jGraduate_rgPick"></div>');
var colPicker = $(idref + '> .jGraduate_colPick'); var colPicker = $(idref + '> .jGraduate_colPick');
var lgPicker = $(idref + '> .jGraduate_lgPick'); var lgPicker = $(idref + '> .jGraduate_lgPick');
var rgPicker = $(idref + '> .jGraduate_rgPick');
lgPicker.html( lgPicker.html(
'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' + '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' + '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' + '<div id="' + id + '_lg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
'<div id="' + id + '_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' + '<div id="' + id + '_lg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
'<img id="' + id + '_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' + '<img id="' + id + '_lg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="jGraduate_Form">' + '<div class="jGraduate_Form">' +
@ -198,35 +226,107 @@ jQuery.fn.jGraduate =
'<label id="' + id + '_jGraduate_endOpacity">100%</label>' + '<label id="' + id + '_jGraduate_endOpacity">100%</label>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="jGraduate_OpacityField">' + '<div class="lg_jGraduate_OpacityField">' +
'<label class="jGraduate_OpacityLabel">A: </label>' + '<label class="lg_jGraduate_OpacityLabel">A: </label>' +
'<input type="text" id="' + id + '_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' + '<input type="text" id="' + id + '_lg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div class="jGraduate_OkCancel">' + '<div class="jGraduate_OkCancel">' +
'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' + '<input type="button" id="' + id + '_lg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' + '<input type="button" id="' + id + '_lg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
'</div>' + '</div>' +
'<div class="jGraduate_LightBox"></div>' + '<div class="jGraduate_LightBox"></div>' +
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'); '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
rgPicker.html(
'<div class="jGraduate_Swatch">' +
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
'<div id="' + id + '_rg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
'<div id="' + id + '_rg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
'<img id="' + id + '_rg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
'</div>' +
'</div>' +
'<div id="jGraduate_radColors" class="jGraduate_StopSection">' +
'<label class="jGraduate_Form_Heading">Colors</label>' +
'<div class="jGraduate_Form_Section jGraduate_Colorblocks">' +
'<div class="jGraduate_colorblock"><span>Center:</span>' +
'<div id="' + id + '_jGraduate_colorBoxCenter" class="colorBox"></div>' +
'<label id="' + id + '_rg_jGraduate_centerOpacity"> 100%</label></div>' +
'<div class="jGraduate_colorblock"><span>Outer:</span>' +
'<div id="' + id + '_jGraduate_colorBoxOuter" class="colorBox"></div>' +
'<label id="' + id + '_jGraduate_outerOpacity"> 100%</label></div>' +
'</div>' +
'</div>' +
'<div class="jGraduate_StopSection">' +
'</div>' +
'<div class="jGraduate_Form">' +
'<div class="jGraduate_StopSection">' +
'<label class="jGraduate_Form_Heading">Center Point</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"/>' +
'<label> y:</label>' +
'<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
'</div>' +
'</div>' +
'<div class="jGraduate_StopSection">' +
'<label class="jGraduate_Form_Heading">Focal Point</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"/>' +
'<label> y:</label>' +
'<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
'</div>' +
'</div>' +
'<div class="jGraduate_RadiusField">' +
'<label class="jGraduate_Form_Heading">Radius</label>' +
'<div class="jGraduate_Form_Section">' +
'<div id="' + id + '_jGraduate_RadiusContainer" class="jGraduate_RadiusContainer"></div>' +
'<input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%' +
'<div id="' + id + '_jGraduate_Radius" class="jGraduate_Radius" title="Click to set radius">' +
'<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="rg_jGraduate_OpacityField">' +
'<label class="rg_jGraduate_OpacityLabel">A: </label>' +
'<input type="text" id="' + id + '_rg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
'</div>' +
'<div class="jGraduate_OkCancel">' +
'<input type="button" id="' + id + '_rg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
'<input type="button" id="' + id + '_rg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
'</div>' +
'<div class="jGraduate_LightBox"></div>' +
'<div id="' + id + '_rg_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
// -------------- // --------------
// Set up all the SVG elements (the gradient, stops and rectangle) // Set up all the SVG elements (the gradient, stops and rectangle)
var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2, var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY; SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
var container = document.getElementById(id+'_jGraduate_GradContainer');
$.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')); var svg = container.appendChild(document.createElementNS(ns.svg, 'svg'));
svg.id = id+'_jgraduate_svg'; svg.id = grad_id + '_jgraduate_svg';
svg.setAttribute('width', MAX); svg.setAttribute('width', MAX);
svg.setAttribute('height', MAX); svg.setAttribute('height', MAX);
svg.setAttribute("xmlns", ns.svg); svg.setAttribute("xmlns", ns.svg);
});
// Linear gradient
(function() {
var svg = document.getElementById(id + '_lg_jgraduate_svg');
// if we are sent a gradient, import it // if we are sent a gradient, import it
if ($this.paint.type == "linearGradient") { if ($this.paint.type == "linearGradient") {
$this.paint.linearGradient.id = id+'_jgraduate_grad'; $this.paint.linearGradient.id = id+'_jgraduate_grad';
$this.paint.linearGradient = svg.appendChild($.cloneNode($this.paint.linearGradient)); $this.paint.linearGradient = svg.appendChild($.cloneNode($this.paint.linearGradient));
} } else { // we create a gradient
else { // we create a gradient
var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient')); var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
grad.id = id+'_jgraduate_grad'; grad.id = id+'_jgraduate_grad';
grad.setAttribute('x1','0.0'); grad.setAttribute('x1','0.0');
@ -246,10 +346,9 @@ jQuery.fn.jGraduate =
} }
var gradalpha = $this.paint.alpha; var gradalpha = $this.paint.alpha;
$('#' + id + '_jGraduate_OpacityInput').val(gradalpha); $('#' + id + '_lg_jGraduate_OpacityInput').val(gradalpha);
var posx = parseInt(255*(gradalpha/100)) - 4.5; var posx = parseInt(255*(gradalpha/100)) - 4.5;
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx}); $('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
$('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100);
var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0), var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0),
y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0), y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0),
@ -257,7 +356,7 @@ jQuery.fn.jGraduate =
y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0); y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
var rect = document.createElementNS(ns.svg, 'rect'); var rect = document.createElementNS(ns.svg, 'rect');
rect.id = id + '_jgraduate_rect'; rect.id = id + '_lg_jgraduate_rect';
rect.setAttribute('x', MARGINX); rect.setAttribute('x', MARGINX);
rect.setAttribute('y', MARGINY); rect.setAttribute('y', MARGINY);
rect.setAttribute('width', SIZEY); rect.setAttribute('width', SIZEY);
@ -265,6 +364,7 @@ jQuery.fn.jGraduate =
rect.setAttribute('fill', 'url(#'+id+'_jgraduate_grad)'); rect.setAttribute('fill', 'url(#'+id+'_jgraduate_grad)');
rect.setAttribute('fill-opacity', '1.0'); rect.setAttribute('fill-opacity', '1.0');
rect = svg.appendChild(rect); rect = svg.appendChild(rect);
$('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', gradalpha/100);
// stop visuals created here // stop visuals created here
var beginStop = document.createElementNS(ns.svg, 'image'); var beginStop = document.createElementNS(ns.svg, 'image');
@ -298,18 +398,18 @@ jQuery.fn.jGraduate =
endStop = svg.appendChild(endStop); endStop = svg.appendChild(endStop);
// bind GUI elements // bind GUI elements
$('#'+id+'_jGraduate_Ok').bind('click', function() { $('#'+id+'_lg_jGraduate_Ok').bind('click', function() {
$this.paint.type = "linearGradient"; $this.paint.type = "linearGradient";
$this.paint.solidColor = null; $this.paint.solidColor = null;
okClicked(); okClicked();
}); });
$('#'+id+'_jGraduate_Cancel').bind('click', function(paint) { $('#'+id+'_lg_jGraduate_Ok').bind('click', function(paint) {
cancelClicked(); cancelClicked();
}); });
var x1 = $this.paint.linearGradient.getAttribute('x1'); var x1 = $this.paint.linearGradient.getAttribute('x1');
if(!x1) x1 = "0.0"; if(!x1) x1 = "0.0";
x1Input = $('#'+id+'_jGraduate_x1'); var x1Input = $('#'+id+'_jGraduate_x1');
x1Input.val(x1); x1Input.val(x1);
x1Input.change( function() { x1Input.change( function() {
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
@ -321,7 +421,7 @@ jQuery.fn.jGraduate =
var y1 = $this.paint.linearGradient.getAttribute('y1'); var y1 = $this.paint.linearGradient.getAttribute('y1');
if(!y1) y1 = "0.0"; if(!y1) y1 = "0.0";
y1Input = $('#'+id+'_jGraduate_y1'); var y1Input = $('#'+id+'_jGraduate_y1');
y1Input.val(y1); y1Input.val(y1);
y1Input.change( function() { y1Input.change( function() {
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
@ -333,7 +433,7 @@ jQuery.fn.jGraduate =
var x2 = $this.paint.linearGradient.getAttribute('x2'); var x2 = $this.paint.linearGradient.getAttribute('x2');
if(!x2) x2 = "1.0"; if(!x2) x2 = "1.0";
x2Input = $('#'+id+'_jGraduate_x2'); var x2Input = $('#'+id+'_jGraduate_x2');
x2Input.val(x2); x2Input.val(x2);
x2Input.change( function() { x2Input.change( function() {
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) { if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
@ -366,35 +466,33 @@ jQuery.fn.jGraduate =
stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop'); stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
} }
var setOpacitySlider = function(e, div) { var setLgOpacitySlider = function(e, div) {
var offset = div.offset(); var offset = div.offset();
var x = (e.pageX - offset.left - parseInt(div.css('border-left-width'))); var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
if (x > 255) x = 255; if (x > 255) x = 255;
if (x < 0) x = 0; if (x < 0) x = 0;
var posx = x - 4.5; var posx = x - 4.5;
x /= 255; x /= 255;
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx}); $('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
$('#' + id + '_jgraduate_rect').attr('fill-opacity', x); $('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', x);
x = parseInt(x*100); x = parseInt(x*100);
$('#' + id + '_jGraduate_OpacityInput').val(x); $('#' + id + '_lg_jGraduate_OpacityInput').val(x);
$this.paint.alpha = x; $this.paint.alpha = x;
}; };
// handle dragging on the opacity slider // handle dragging on the opacity slider
var bSlidingOpacity = false; var bSlidingOpacity = false;
$('.jGraduate_Opacity').mousedown(function(evt) { $('#' + id + '_lg_jGraduate_Opacity').mousedown(function(evt) {
setOpacitySlider(evt, $(this)); setLgOpacitySlider(evt, $(this));
bSlidingOpacity = true; bSlidingOpacity = true;
evt.preventDefault(); evt.preventDefault();
}); }).mousemove(function(evt) {
$('.jGraduate_Opacity').mousemove(function(evt) {
if (bSlidingOpacity) { if (bSlidingOpacity) {
setOpacitySlider(evt, $(this)); setLgOpacitySlider(evt, $(this));
evt.preventDefault(); evt.preventDefault();
} }
}); }).mouseup(function(evt) {
$('.jGraduate_Opacity').mouseup(function(evt) { setLgOpacitySlider(evt, $(this));
setOpacitySlider(evt, $(this));
bSlidingOpacity = false; bSlidingOpacity = false;
evt.preventDefault(); evt.preventDefault();
}); });
@ -404,13 +502,13 @@ jQuery.fn.jGraduate =
var startx = -1, starty = -1; var startx = -1, starty = -1;
// for whatever reason, Opera does not allow $('image.stop') here, // for whatever reason, Opera does not allow $('image.stop') here,
// and Firefox 1.5 does not allow $('.stop') // and Firefox 1.5 does not allow $('.stop')
$('.stop, #color_picker_jGraduate_GradContainer image').mousedown(function(evt) { $('.stop, #color_picker_lg_jGraduate_GradContainer image').mousedown(function(evt) {
draggingStop = this; draggingStop = this;
startx = evt.clientX; startx = evt.clientX;
starty = evt.clientY; starty = evt.clientY;
evt.preventDefault(); evt.preventDefault();
}); });
$('#'+id+'_jgraduate_svg').mousemove(function(evt) { $('#'+id+'_lg_jgraduate_svg').mousemove(function(evt) {
if (null != draggingStop) { if (null != draggingStop) {
var dx = evt.clientX - startx; var dx = evt.clientX - startx;
var dy = evt.clientY - starty; var dy = evt.clientY - starty;
@ -448,7 +546,7 @@ jQuery.fn.jGraduate =
evt.preventDefault(); evt.preventDefault();
} }
}); });
$('#'+id+'_jgraduate_svg').mouseup(function(evt) { $('#'+id+'_lg_jgraduate_svg').mouseup(function(evt) {
draggingStop = null; draggingStop = null;
}); });
@ -459,7 +557,7 @@ jQuery.fn.jGraduate =
var beginOpacity = stops[0].getAttribute('stop-opacity'); var beginOpacity = stops[0].getAttribute('stop-opacity');
if(!beginOpacity) beginOpacity = '1.0'; if(!beginOpacity) beginOpacity = '1.0';
$('#'+id+'jGraduate_beginOpacity').html( (beginOpacity*100)+'%' ); $('#'+id+'lg_jGraduate_beginOpacity').html( (beginOpacity*100)+'%' );
var endColor = stops[stops.length-1].getAttribute('stop-color'); var endColor = stops[stops.length-1].getAttribute('stop-color');
if(!endColor) endColor = '#000'; if(!endColor) endColor = '#000';
@ -539,33 +637,449 @@ jQuery.fn.jGraduate =
null, null,
function(){ cancelClicked(); } function(){ cancelClicked(); }
); );
}());
$(idref + ' .jGraduate_tab_color').click( function(){
$(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current'); // Radial gradient
$(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current'); (function() {
lgPicker.hide(); var svg = document.getElementById(id + '_rg_jgraduate_svg');
colPicker.show();
// 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();
}); });
$(idref + ' .jGraduate_tab_lingrad').click( function(){ $('#'+id+'_rg_jGraduate_Cancel').bind('click', function(paint) {
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current'); cancelClicked();
$(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current');
colPicker.hide();
lgPicker.show();
}); });
if ($this.paint.type == "linearGradient") { var cx = $this.paint.radialGradient.getAttribute('cx');
lgPicker.show(); if(!cx) cx = "0.0";
colPicker.hide(); var cxInput = $('#'+id+'_jGraduate_cx');
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current'); cxInput.val(cx);
$(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current'); 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 { else {
colPicker.show(); fxInput.val(fracx);
lgPicker.hide(); fyInput.val(fracy);
$(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current'); $this.paint.radialGradient.setAttribute('fx', fracx);
$(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current'); $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 = $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.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();
});
$(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(); $this.show();
}); });
}; };

2
public/svg-edit/editor/svg-editor.html
View file

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1"/> <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<link rel="icon" type="image/png" href="images/logo.png"/> <link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.12.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jPicker-1.0.12.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/> <link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/> <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/> <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<!-- Development version of script tags: --> <!-- Development version of script tags: -->

18
public/svg-edit/editor/svg-editor.js
View file

@ -644,10 +644,9 @@ function svg_edit_setup() {
// update the editor's fill paint // update the editor's fill paint
var opts = null; var opts = null;
if (color.substr(0,5) == "url(#") { if (color.substr(0,5) == "url(#") {
opts = { var grad = document.getElementById(color.substr(5,color.length-6));
alpha: opac, opts = { alpha: opac };
linearGradient: document.getElementById(color.substr(5,color.length-6)) opts[grad.tagName] = grad;
};
} }
else if (color.substr(0,1) == "#") { else if (color.substr(0,1) == "#") {
opts = { opts = {
@ -1985,7 +1984,7 @@ function svg_edit_setup() {
var was_none = false; var was_none = false;
var pos = elem.position(); var pos = elem.position();
$("#color_picker") $("#color_picker")
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick'}) .draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
.css({'left': pos.left, 'bottom': 50 - pos.top}) .css({'left': pos.left, 'bottom': 50 - pos.top})
.jGraduate( .jGraduate(
{ {
@ -1999,11 +1998,10 @@ function svg_edit_setup() {
var oldgrad = document.getElementById("gradbox_"+picker); var oldgrad = document.getElementById("gradbox_"+picker);
var svgbox = oldgrad.parentNode; var svgbox = oldgrad.parentNode;
var rectbox = svgbox.firstChild; var rectbox = svgbox.firstChild;
if (paint.type == "linearGradient" || paint.type == "radialGradient") {
if (paint.type == "linearGradient") {
svgbox.removeChild(oldgrad); svgbox.removeChild(oldgrad);
var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient, true)); var newgrad = svgbox.appendChild(document.importNode(paint[paint.type], true));
svgCanvas.fixOperaXML(newgrad, paint.linearGradient) svgCanvas.fixOperaXML(newgrad, paint[paint.type])
newgrad.id = "gradbox_"+picker; newgrad.id = "gradbox_"+picker;
rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")"); rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
} }
@ -2815,7 +2813,7 @@ function svg_edit_setup() {
updateCanvas(true); updateCanvas(true);
}); });
// var revnums = "svg-editor.js ($Rev: 1449 $) "; // var revnums = "svg-editor.js ($Rev: 1452 $) ";
// revnums += svgCanvas.getVersion(); // revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums); // $('#copyright')[0].setAttribute("title", revnums);
return svgCanvas; return svgCanvas;

63
public/svg-edit/editor/svgcanvas.js
View file

@ -943,6 +943,14 @@ function BatchCommand(text) {
$(svgroot).appendTo(container); $(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 //nonce to uniquify id's
var nonce = Math.floor(Math.random()*100001); var nonce = Math.floor(Math.random()*100001);
var randomize_ids = false; 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 = [], grad_ids = [],
i = lgrads.length; i = grads.length;
while (i--) { while (i--) {
var grad = lgrads[i]; var grad = grads[i];
var id = grad.id; var id = grad.id;
if($.inArray(id, grad_uses) == -1) { if($.inArray(id, grad_uses) == -1) {
// Not found, so remove // Not found, so remove
@ -1600,7 +1608,7 @@ function BatchCommand(text) {
// map various namespaces to our fixed namespace prefixes // map various namespaces to our fixed namespace prefixes
// (the default xmlns attribute itself does not get a prefix) // (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(attr.nodeName); out.push("=\"");
out.push(attrVal); out.push("\""); out.push(attrVal); out.push("\"");
} }
@ -3677,6 +3685,21 @@ function BatchCommand(text) {
} else if (element != null) { } else if (element != null) {
canvas.addedNew = true; 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("opacity", cur_shape.opacity);
element.setAttribute("style", "pointer-events:inherit"); element.setAttribute("style", "pointer-events:inherit");
cleanupElement(element); cleanupElement(element);
@ -3690,6 +3713,7 @@ function BatchCommand(text) {
// undo means to call cmd.unapply(), redo means to call cmd.apply() // undo means to call cmd.unapply(), redo means to call cmd.apply()
addCommandToHistory(new InsertElementCommand(element)); addCommandToHistory(new InsertElementCommand(element));
call("changed",[element]); call("changed",[element]);
}, ani_dur * 1000);
} }
start_transform = null; start_transform = null;
@ -6627,10 +6651,12 @@ function BatchCommand(text) {
var findDuplicateGradient = function(grad) { var findDuplicateGradient = function(grad) {
var defs = findDefs(); var defs = findDefs();
var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient"); var existing_grads = $(defs).find("linearGradient, radialGradient");
var i = existing_grads.length; var i = existing_grads.length;
var rad_attrs = ['r','cx','cy','fx','fy'];
while (i--) { while (i--) {
var og = existing_grads.item(i); var og = existing_grads[i];
if(grad.tagName == "linearGradient") {
if (grad.getAttribute('x1') != og.getAttribute('x1') || if (grad.getAttribute('x1') != og.getAttribute('x1') ||
grad.getAttribute('y1') != og.getAttribute('y1') || grad.getAttribute('y1') != og.getAttribute('y1') ||
grad.getAttribute('x2') != og.getAttribute('x2') || grad.getAttribute('x2') != og.getAttribute('x2') ||
@ -6638,6 +6664,17 @@ function BatchCommand(text) {
{ {
continue; 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 // else could be a duplicate, iterate through stops
var stops = grad.getElementsByTagNameNS(svgns, "stop"); var stops = grad.getElementsByTagNameNS(svgns, "stop");
@ -6649,8 +6686,8 @@ function BatchCommand(text) {
var j = stops.length; var j = stops.length;
while(j--) { while(j--) {
var stop = stops.item(j); var stop = stops[j];
var ostop = ostops.item(j); var ostop = ostops[j];
if (stop.getAttribute('offset') != ostop.getAttribute('offset') || if (stop.getAttribute('offset') != ostop.getAttribute('offset') ||
stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') || stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') ||
@ -6684,6 +6721,10 @@ function BatchCommand(text) {
canvas.strokeGrad = p.linearGradient; canvas.strokeGrad = p.linearGradient;
if(addGrad) addGradient(); if(addGrad) addGradient();
} }
else if(p.type == "radialGradient") {
canvas.strokeGrad = p.radialGradient;
if(addGrad) addGradient();
}
else { else {
// console.log("none!"); // console.log("none!");
} }
@ -6703,6 +6744,10 @@ function BatchCommand(text) {
canvas.fillGrad = p.linearGradient; canvas.fillGrad = p.linearGradient;
if(addGrad) addGradient(); if(addGrad) addGradient();
} }
else if(p.type == "radialGradient") {
canvas.fillGrad = p.radialGradient;
if(addGrad) addGradient();
}
else { else {
// console.log("none!"); // console.log("none!");
} }
@ -7990,7 +8035,7 @@ function BatchCommand(text) {
// Function: getVersion // Function: getVersion
// Returns a string which describes the revision number of SvgCanvas. // Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() { this.getVersion = function() {
return "svgcanvas.js ($Rev: 1450 $)"; return "svgcanvas.js ($Rev: 1454 $)";
}; };
this.setUiStrings = function(strs) { this.setUiStrings = function(strs) {