github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

- Fix (jPicker): Avoid setting Math.precision pseudo-global

Browse Source 
- Refactoring (jPicker): Use ES6 templates; avoid unnecessary check
- Refactoring: Avoid useless assignment (courtesty lgtm)
- Build: Update files
This commit is contained in:
Brett Zamir
2018-09-22 08:49:14 +08:00
parent be17cd249c
commit dab1ff81af
15 changed files with 399 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
editor/jgraduate/jQuery.jPicker.js
View File

@@ -24,10 +24,10 @@
* @param {Float} precision
* @returns {Float}
*/
Math.precision = function (value, precision) {
function toFixedNumeric (value, precision) {
if (precision === undefined) precision = 0;
return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
};
}
/**
* @function module:jPicker.jPicker
@@ -354,11 +354,11 @@ const jPicker = function ($) {
switch (e.keyCode) {
case 38:
alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
return false;
case 40:
alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
return false;
}
break;
@@ -421,7 +421,7 @@ const jPicker = function ($) {
break;
case alpha && alpha.get(0):
alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);
break;
case hue.get(0):
hue.val(setValueInRange.call($this, hue.val(), 0, 360));
@@ -458,7 +458,7 @@ const jPicker = function ($) {
case red.get(0): red.val(color.val('r')); break;
case green.get(0): green.val(color.val('g')); break;
case blue.get(0): blue.val(color.val('b')); break;
case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
case alpha && alpha.get(0): alpha.val(toFixedNumeric((color.val('a') * 100) / 255, alphaPrecision)); break;
case hue.get(0): hue.val(color.val('h')); break;
case saturation.get(0): saturation.val(color.val('s')); break;
case value.get(0): value.val(color.val('v')); break;
@@ -497,7 +497,7 @@ const jPicker = function ($) {
if (context !== red.get(0)) red.val(all != null ? all.r : '');
if (context !== green.get(0)) green.val(all != null ? all.g : '');
if (context !== blue.get(0)) blue.val(all != null ? all.b : '');
if (alpha && context !== alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
if (alpha && context !== alpha.get(0)) alpha.val(all != null ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
if (context !== hue.get(0)) hue.val(all != null ? all.h : '');
if (context !== saturation.get(0)) saturation.val(all != null ? all.s : '');
if (context !== value.get(0)) value.val(all != null ? all.v : '');
@@ -718,7 +718,7 @@ const jPicker = function ($) {
}
break;
case 'a':
newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
newV.a = value && value.a != null ? value.a | 0 : value | 0;
if (newV.a < 0) newV.a = 0;
else if (newV.a > 255) newV.a = 255;
if (a !== newV.a) {
@@ -1323,7 +1323,7 @@ const jPicker = function ($) {
try {
const all = ui.val('all');
activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
setAlpha.call($this, activePreview, (all && Math.precision((all.a * 100) / 255, 4)) || 0);
setAlpha.call($this, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
} catch (e) { }
}
function updateMapVisuals (ui) {
@@ -1341,36 +1341,36 @@ const jPicker = function ($) {
setAlpha.call($this, colorMapL1, v != null ? v : 100);
break;
case 'r':
setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
setAlpha.call($this, colorMapL2, toFixedNumeric((ui.val('r') || 0) / 255 * 100, 4));
break;
case 'g':
setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
setAlpha.call($this, colorMapL2, toFixedNumeric((ui.val('g') || 0) / 255 * 100, 4));
break;
case 'b':
setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
setAlpha.call($this, colorMapL2, toFixedNumeric((ui.val('b') || 0) / 255 * 100));
break;
}
const a = ui.val('a');
setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
setAlpha.call($this, colorMapL3, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4));
}
function updateBarVisuals (ui) {
switch (settings.color.mode) {
case 'h':
const a = ui.val('a');
setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
setAlpha.call($this, colorBarL5, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4));
break;
case 's':
const hva = ui.val('hva'),
saturatedColor = new Color({h: (hva && hva.h) || 0, s: 100, v: hva != null ? hva.v : 100});
setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4));
setAlpha.call($this, colorBarL5, toFixedNumeric(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4));
break;
case 'v':
const hsa = ui.val('hsa'),
valueColor = new Color({h: (hsa && hsa.h) || 0, s: hsa != null ? hsa.s : 100, v: 100});
setBG.call($this, colorBarDiv, valueColor.val('hex'));
setAlpha.call($this, colorBarL5, Math.precision(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4));
setAlpha.call($this, colorBarL5, toFixedNumeric(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4));
break;
case 'r':
case 'g':
@@ -1388,10 +1388,10 @@ const jPicker = function ($) {
vValue = (rgba && rgba.g) || 0;
}
const middle = vValue > hValue ? hValue : vValue;
setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
setAlpha.call($this, colorBarL5, Math.precision(((255 - ((rgba && rgba.a) || 0)) * 100) / 255, 4));
setAlpha.call($this, colorBarL2, hValue > vValue ? toFixedNumeric(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
setAlpha.call($this, colorBarL3, vValue > hValue ? toFixedNumeric(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
setAlpha.call($this, colorBarL4, toFixedNumeric((middle / 255) * 100, 4));
setAlpha.call($this, colorBarL5, toFixedNumeric(((255 - ((rgba && rgba.a) || 0)) * 100) / 255, 4));
break;
case 'a': {
const a = ui.val('a');
@@ -1423,8 +1423,8 @@ const jPicker = function ($) {
src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')
)) {
obj.css({filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'});
} else obj.css({opacity: Math.precision(alpha / 100, 4)});
} else obj.css({opacity: Math.precision(alpha / 100, 4)});
} else obj.css({opacity: toFixedNumeric(alpha / 100, 4)});
} else obj.css({opacity: toFixedNumeric(alpha / 100, 4)});
} else if (alpha === 0 || alpha === 100) {
if (isLessThanIE7) {
const src = obj.attr('pngSrc');
@@ -1467,13 +1467,13 @@ const jPicker = function ($) {
function currentColorChanged (ui, context) {
const hex = ui.val('hex');
currentPreview.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
setAlpha.call($this, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4));
}
function expandableColorChanged (ui, context) {
const hex = ui.val('hex');
const va = ui.val('va');
iconColor.css({backgroundColor: (hex && '#' + hex) || 'transparent'});
setAlpha.call($this, iconAlpha, Math.precision(((255 - ((va && va.a) || 0)) * 100) / 255, 4));
setAlpha.call($this, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4));
if (settings.window.bindToInput && settings.window.updateInputColor) {
settings.window.input.css({
backgroundColor: (hex && '#' + hex) || 'transparent',
@@ -1567,7 +1567,47 @@ const jPicker = function ($) {
const all = color.active.val('all');
if (win.alphaPrecision < 0) win.alphaPrecision = 0;
else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
const controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode === 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode === 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode === 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode === 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode === 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode === 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode === 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
const controlHtml = `<table class="jPicker" cellpadding="0" cellspacing="0">
<tbody>
${win.expandable ? `<tr><td class="Move" colspan="5">&nbsp;</td></tr>` : ''}
<tr>
<td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
<td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
<td colspan="2" class="Preview">${localization.text.newColor}<div><span class="Active" title="${localization.tooltips.colors.newColor}">&nbsp;</span><span class="Current" title="${localization.tooltips.colors.currentColor}">&nbsp;</span></div>${localization.text.currentColor}</td>
<td rowspan="9" class="Button"><input type="button" class="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid">&nbsp;</div></td>
</tr>
<tr class="Hue">
<td class="Radio"><label title="${localization.tooltips.hue.radio}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.h : ''}" title="${localization.tooltips.hue.textbox}"/>&nbsp;&deg;</td>
</tr>
<tr class="Saturation">
<td class="Radio"><label title="${localization.tooltips.saturation.radio}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.s : ''}" title="${localization.tooltips.saturation.textbox}"/>&nbsp;%</td>
</tr>
<tr class="Value">
<td class="Radio"><label title="${localization.tooltips.value.radio}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.v : ''}" title="${localization.tooltips.value.textbox}"/>&nbsp;%<br/><br/></td>
</tr>
<tr class="Red">
<td class="Radio"><label title="${localization.tooltips.red.radio}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.r : ''}" title="${localization.tooltips.red.textbox}"/></td>
</tr>
<tr class="Green">
<td class="Radio"><label title="${localization.tooltips.green.radio}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.g : ''}" title="${localization.tooltips.green.textbox}"/></td>
</tr>
<tr class="Blue">
<td class="Radio"><label title="${localization.tooltips.blue.radio}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
<td class="Text"><input type="text" maxlength="3" value="${all != null ? all.b : ''}" title="${localization.tooltips.blue.textbox}"/></td>
</tr>
<tr class="Alpha">
<td class="Radio">${win.alphaSupport ? `<label title="${localization.tooltips.alpha.radio}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</td>
<td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${all != null ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${localization.tooltips.alpha.textbox}"/>&nbsp;%` : '&nbsp;'}</td>
</tr>
<tr class="Hex">
<td colspan="2" class="Text"><label title="${localization.tooltips.hex.textbox}">#:<input type="text" maxlength="6" class="Hex" value="${all != null ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${all != null ? all.ahex.substring(6) : ''}" title="${localization.tooltips.hex.alpha}"/></td>` : '&nbsp;'}
</tr>
</tbody></table>`;
if (win.expandable) {
container.html(controlHtml);
if (!$(document.body).children('div.jPicker.Container').length) {
@@ -1659,7 +1699,7 @@ const jPicker = function ($) {
button = tbody.find('.Button');
activePreview = preview.find('.Active:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});
currentPreview = preview.find('.Current:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);
setAlpha.call($this, currentPreview, Math.precision((color.current.val('a') * 100) / 255, 4));
setAlpha.call($this, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4));
okButton = button.find('.Ok:first').bind('click', okClicked);
cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
grid = button.find('.Grid:first');
@@ -1687,7 +1727,7 @@ const jPicker = function ($) {
if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
const quickHex = color.quickList[i].val('hex');
if (!ahex) ahex = '00000000';
html += '<span class="QuickColor"' + (' title="#' + ahex + '"') + ' style="background-color:' + ((quickHex && '#' + quickHex) || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
html += '<span class="QuickColor"' + (' title="#' + ahex + '"') + ' style="background-color:' + ((quickHex && '#' + quickHex) || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + toFixedNumeric(alpha / 255, 4) + ';filter:Alpha(opacity=' + toFixedNumeric(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
}
setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
grid.html(html);
@@ -1703,7 +1743,7 @@ const jPicker = function ($) {
iconColor = $this.icon.find('.Color:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});
iconAlpha = $this.icon.find('.Alpha:first');
setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
setAlpha.call($this, iconAlpha, toFixedNumeric(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
iconImage = $this.icon.find('.Image:first').css({
backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
}).bind('click', iconImageClicked);

5
editor/recalculate.js
View File

@@ -431,8 +431,7 @@ export const recalculateDimensions = function (selected) {
const children = selected.childNodes;
let c = children.length;
let clipPathsDone = [];
const clipPathsDone = [];
while (c--) {
const child = children.item(c);
if (child.nodeType === 1) {
@@ -479,8 +478,6 @@ export const recalculateDimensions = function (selected) {
}
}
}
clipPathsDone = [];
context_.setStartTransform(oldStartTransform);
}
// else, a matrix imposition from a parent group

179
editor/xdomain-svgedit-config-iife.js
View File

File diff suppressed because one or more lines are too long