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

#46 ColorValuePicker and js convertion

master
Agriya Dev5 2021-02-04 18:04:19 +05:30
parent 4a6d8efea0
commit 0f1d714eab
2 changed files with 183 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/editor/components/jgraduate/ColorValuePicker.js
View File

@ -1,4 +1,3 @@
/* globals $ */
/* eslint-disable max-len */ /* eslint-disable max-len */
/* eslint-disable unicorn/prefer-math-trunc */ /* eslint-disable unicorn/prefer-math-trunc */
/* eslint-disable no-bitwise */ /* eslint-disable no-bitwise */
@ -43,90 +42,90 @@ export default class ColorValuePicker {
* @returns {Event|false|void} * @returns {Event|false|void}
*/ */
function keyDown (e) { function keyDown (e) {
if (e.target.value === '' && e.target !== hex.get(0) && ((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) || isNullish(bindedHex))) return undefined; if (e.target.value === '' && e.target !== hex && ((!isNullish(bindedHex) && e.target !== bindedHex) || isNullish(bindedHex))) return undefined;
if (!validateKey(e)) return e; if (!validateKey(e)) return e;
switch (e.target) { switch (e.target) {
case red.get(0): case red:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
red.val(setValueInRange.call(that, (red.val() << 0) + 1, 0, 255)); red.value = setValueInRange.call(that, (red.value << 0) + 1, 0, 255);
color.val('r', red.val(), e.target); color.val('r', red.value, e.target);
return false; return false;
case 40: case 40:
red.val(setValueInRange.call(that, (red.val() << 0) - 1, 0, 255)); red.value = setValueInRange.call(that, (red.value << 0) - 1, 0, 255);
color.val('r', red.val(), e.target); color.val('r', red.value, e.target);
return false; return false;
} }
break; break;
case green.get(0): case green:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
green.val(setValueInRange.call(that, (green.val() << 0) + 1, 0, 255)); green.value = setValueInRange.call(that, (green.value << 0) + 1, 0, 255);
color.val('g', green.val(), e.target); color.val('g', green.value, e.target);
return false; return false;
case 40: case 40:
green.val(setValueInRange.call(that, (green.val() << 0) - 1, 0, 255)); green.value = setValueInRange.call(that, (green.value << 0) - 1, 0, 255);
color.val('g', green.val(), e.target); color.val('g', green.value, e.target);
return false; return false;
} }
break; break;
case blue.get(0): case blue:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
blue.val(setValueInRange.call(that, (blue.val() << 0) + 1, 0, 255)); blue.value = setValueInRange.call(that, (blue.value << 0) + 1, 0, 255);
color.val('b', blue.val(), e.target); color.val('b', blue.value, e.target);
return false; return false;
case 40: case 40:
blue.val(setValueInRange.call(that, (blue.val() << 0) - 1, 0, 255)); blue.value = setValueInRange.call(that, (blue.value << 0) - 1, 0, 255);
color.val('b', blue.val(), e.target); color.val('b', blue.value, e.target);
return false; return false;
} }
break; break;
case alpha && alpha.get(0): case alpha:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
alpha.val(setValueInRange.call(that, Number.parseFloat(alpha.val()) + 1, 0, 100)); alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) + 1, 0, 100);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target); color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
return false; return false;
case 40: case 40:
alpha.val(setValueInRange.call(that, Number.parseFloat(alpha.val()) - 1, 0, 100)); alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) - 1, 0, 100);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target); color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
return false; return false;
} }
break; break;
case hue.get(0): case hue:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
hue.val(setValueInRange.call(that, (hue.val() << 0) + 1, 0, 360)); hue.value = setValueInRange.call(that, (hue.value << 0) + 1, 0, 360);
color.val('h', hue.val(), e.target); color.val('h', hue.value, e.target);
return false; return false;
case 40: case 40:
hue.val(setValueInRange.call(that, (hue.val() << 0) - 1, 0, 360)); hue.value =setValueInRange.call(that, (hue.value << 0) - 1, 0, 360);
color.val('h', hue.val(), e.target); color.val('h', hue.value, e.target);
return false; return false;
} }
break; break;
case saturation.get(0): case saturation:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
saturation.val(setValueInRange.call(that, (saturation.val() << 0) + 1, 0, 100)); saturation.value = setValueInRange.call(that, (saturation.value << 0) + 1, 0, 100);
color.val('s', saturation.val(), e.target); color.val('s', saturation.value, e.target);
return false; return false;
case 40: case 40:
saturation.val(setValueInRange.call(that, (saturation.val() << 0) - 1, 0, 100)); saturation.value = setValueInRange.call(that, (saturation.value << 0) - 1, 0, 100);
color.val('s', saturation.val(), e.target); color.val('s', saturation.value, e.target);
return false; return false;
} }
break; break;
case value.get(0): case value:
switch (e.keyCode) { switch (e.keyCode) {
case 38: case 38:
value.val(setValueInRange.call(that, (value.val() << 0) + 1, 0, 100)); value.value = setValueInRange.call(that, (value.value << 0) + 1, 0, 100);
color.val('v', value.val(), e.target); color.val('v', value.value, e.target);
return false; return false;
case 40: case 40:
value.val(setValueInRange.call(that, (value.val() << 0) - 1, 0, 100)); value.value = setValueInRange.call(that, (value.value << 0) - 1, 0, 100);
color.val('v', value.val(), e.target); color.val('v', value.value, e.target);
return false; return false;
} }
break; break;
@ -140,52 +139,52 @@ export default class ColorValuePicker {
* @todo Why is this returning an event? * @todo Why is this returning an event?
*/ */
function keyUp (e) { function keyUp (e) {
if (e.target.value === '' && e.target !== hex.get(0) && if (e.target.value === '' && e.target !== hex &&
((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) || ((!isNullish(bindedHex) && e.target !== bindedHex) ||
isNullish(bindedHex))) return undefined; isNullish(bindedHex))) return undefined;
if (!validateKey(e)) return e; if (!validateKey(e)) return e;
switch (e.target) { switch (e.target) {
case red.get(0): case red:
red.val(setValueInRange.call(that, red.val(), 0, 255)); red.value = setValueInRange.call(that, red.value, 0, 255);
color.val('r', red.val(), e.target); color.val('r', red.value, e.target);
break; break;
case green.get(0): case green:
green.val(setValueInRange.call(that, green.val(), 0, 255)); green.value = setValueInRange.call(that, green.value, 0, 255);
color.val('g', green.val(), e.target); color.val('g', green.value, e.target);
break; break;
case blue.get(0): case blue:
blue.val(setValueInRange.call(that, blue.val(), 0, 255)); blue.value = setValueInRange.call(that, blue.value, 0, 255);
color.val('b', blue.val(), e.target); color.val('b', blue.value, e.target);
break; break;
case alpha && alpha.get(0): case alpha:
alpha.val(setValueInRange.call(that, alpha.val(), 0, 100)); alpha.value = setValueInRange.call(that, alpha.value, 0, 100);
color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target); color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
break; break;
case hue.get(0): case hue:
hue.val(setValueInRange.call(that, hue.val(), 0, 360)); hue.value = setValueInRange.call(that, hue.value, 0, 360);
color.val('h', hue.val(), e.target); color.val('h', hue.value, e.target);
break; break;
case saturation.get(0): case saturation:
saturation.val(setValueInRange.call(that, saturation.val(), 0, 100)); saturation.value = setValueInRange.call(that, saturation.value, 0, 100);
color.val('s', saturation.val(), e.target); color.val('s', saturation.value, e.target);
break; break;
case value.get(0): case value:
value.val(setValueInRange.call(that, value.val(), 0, 100)); value.value = setValueInRange.call(that, value.value, 0, 100);
color.val('v', value.val(), e.target); color.val('v', value.value, e.target);
break; break;
case hex.get(0): case hex:
hex.val(hex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6)); hex.value = hex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
bindedHex && bindedHex.val(hex.val()); bindedHex && bindedHex.val(hex.value);
color.val('hex', hex.val() !== '' ? hex.val() : null, e.target); color.val('hex', hex.value !== '' ? hex.value : null, e.target);
break; break;
case bindedHex && bindedHex.get(0): case bindedHex:
bindedHex.val(bindedHex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6)); bindedHex.value = bindedHex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
hex.val(bindedHex.val()); hex.val(bindedHex.value);
color.val('hex', bindedHex.val() !== '' ? bindedHex.val() : null, e.target); color.val('hex', bindedHex.value !== '' ? bindedHex.value : null, e.target);
break; break;
case ahex && ahex.get(0): case ahex:
ahex.val(ahex.val().replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 2)); ahex.value = ahex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 2);
color.val('a', !isNullish(ahex.val()) ? Number.parseInt(ahex.val(), 16) : null, e.target); color.val('a', !isNullish(ahex.value) ? Number.parseInt(ahex.value, 16) : null, e.target);
break; break;
} }
return undefined; return undefined;
@ -196,21 +195,46 @@ export default class ColorValuePicker {
* @returns {void} * @returns {void}
*/ */
function blur (e) { function blur (e) {
if (!isNullish(color.val())) { if (!isNullish(color.value)) {
switch (e.target) { switch (e.target) {
case red.get(0): red.val(color.val('r')); break; case red:
case green.get(0): green.val(color.val('g')); break; color.value = 'r';
case blue.get(0): blue.val(color.val('b')); break; red.value = color.value;
case alpha && alpha.get(0): alpha.val(toFixedNumeric((color.val('a') * 100) / 255, alphaPrecision)); break; break;
case hue.get(0): hue.val(color.val('h')); break; case green:
case saturation.get(0): saturation.val(color.val('s')); break; color.value = 'g';
case value.get(0): value.val(color.val('v')); break; green.value = color.value;
case hex.get(0): break;
case bindedHex && bindedHex.get(0): case blue:
hex.val(color.val('hex')); color.value = 'b';
bindedHex && bindedHex.val(color.val('hex')); blue.value = color.value;
break;
case alpha:
color.value = 'a';
alpha.value = toFixedNumeric((color.value * 100) / 255, alphaPrecision);
break;
case hue:
color.value = 'h';
hue.value = color.value;
break;
case saturation:
color.value = 's';
saturation.value = color.value;
break;
case value:
color.value = 'v';
value.value = color.value;
break;
case hex:
case bindedHex:
color.value = 'hex';
hex.value = color.value;
bindedHex.value = color.value;
break;
case ahex:
color.value = 'ahex';
ahex.value = color.value.substring(6);
break; break;
case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
} }
} }
} }
@ -269,8 +293,42 @@ export default class ColorValuePicker {
* @returns {void} * @returns {void}
*/ */
function destroy () { function destroy () {
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur); red.removeEventListener('keyup', keyUp);
red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown); green.removeEventListener('keyup', keyUp);
blue.removeEventListener('keyup', keyUp);
hue.removeEventListener('keyup', keyUp);
saturation.removeEventListener('keyup', keyUp);
value.removeEventListener('keyup', keyUp);
hex.removeEventListener('keyup', keyUp);
red.removeEventListener('blur', blur);
green.removeEventListener('blur', blur);
blue.removeEventListener('blur', blur);
hue.removeEventListener('blur', blur);
saturation.removeEventListener('blur', blur);
value.removeEventListener('blur', blur);
hex.removeEventListener('blur', blur);
red.removeEventListener('keydown', keyDown);
green.removeEventListener('keydown', keyDown);
blue.removeEventListener('keydown', keyDown);
hue.removeEventListener('keydown', keyDown);
saturation.removeEventListener('keydown', keyDown);
value.removeEventListener('keydown', keyDown);
if (alpha !== null) {
alpha.removeEventListener('keyup', keyUp);
alpha.removeEventListener('blur', blur);
alpha.removeEventListener('keydown', keyDown);
}
if (ahex !== null) {
ahex.removeEventListener('keyup', keyUp);
ahex.removeEventListener('blur', blur);
}
if (bindedHex !== null) {
bindedHex.removeEventListener('keyup', keyUp);
bindedHex.removeEventListener('blur', blur);
}
color.unbind(colorChanged); color.unbind(colorChanged);
red = null; red = null;
green = null; green = null;
@ -332,8 +390,6 @@ export default class ColorValuePicker {
bindedHex.addEventListener('keyup', keyUp); bindedHex.addEventListener('keyup', keyUp);
bindedHex.addEventListener('blur', blur); bindedHex.addEventListener('blur', blur);
} }
// red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
// red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
color.bind(colorChanged); color.bind(colorChanged);
} }
} }

69
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@ -649,23 +649,30 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
'stroke-width': 1.5 'stroke-width': 1.5
}, stopGroup); }, stopGroup);
$(path).mousedown(function (e) { path.addEventListener('mousedown', function (e) {
selectStop(this); selectStop(this);
drag = curStop; drag = curStop;
$win.addEventListener('mousemove', dragColor); $win.addEventListener('mousemove', dragColor);
$win.addEventListener('mouseup', remDrags); $win.addEventListener('mouseup', remDrags);
stopOffset = stopMakerDiv.offset(); stopOffset = findPos(stopMakerDiv);
e.preventDefault(); e.preventDefault();
return false; return false;
}).data('stop', stop).data('bg', pathbg).dblclick(function () { });
$wc('div.jGraduate_LightBox').show(); $(path).data('stop', stop).data('bg', pathbg);
// path.dataset.stop = stop;
// path.dataset.bg = pathbg;
path.addEventListener('dblclick', function () {
$this.querySelector('#jGraduate_LightBox').style.display = 'block';
const colorhandle = this; const colorhandle = this;
let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1; let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;
let stopColor = stop.getAttribute('stop-color') || 1; let stopColor = stop.getAttribute('stop-color') || 1;
let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16); let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; } while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
colr = stopColor.substr(1) + thisAlpha; colr = stopColor.substr(1) + thisAlpha;
jPickerMethod($wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}), { const jqPickerElem = $this.querySelector('#' + id + '_jGraduate_stopPicker');
jqPickerElem.style.left = '100px';
jqPickerElem.style.bottom = '15px';
jPickerMethod(jqPickerElem, {
window: {title: 'Pick the start color and opacity for the gradient'}, window: {title: 'Pick the start color and opacity for the gradient'},
images: {clientPath: $settings.images.clientPath}, images: {clientPath: $settings.images.clientPath},
color: {active: colr, alphaSupport: true} color: {active: colr, alphaSupport: true}
@ -676,30 +683,31 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
colorhandle.setAttribute('fill-opacity', stopOpacity); colorhandle.setAttribute('fill-opacity', stopOpacity);
stop.setAttribute('stop-color', stopColor); stop.setAttribute('stop-color', stopColor);
stop.setAttribute('stop-opacity', stopOpacity); stop.setAttribute('stop-opacity', stopOpacity);
$wc('div.jGraduate_LightBox').hide(); $this.querySelector('#jGraduate_LightBox').style.display = 'none';
$wc('#' + id + '_jGraduate_stopPicker').hide(); $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none';
}, null, function () { }, null, function () {
$wc('div.jGraduate_LightBox').hide(); $this.querySelector('#jGraduate_LightBox').style.display = 'none';
$wc('#' + id + '_jGraduate_stopPicker').hide(); $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none';
}); });
}); });
const jqStopEls = curGradient.querySelectorAll('stop');
$(curGradient).find('stop').each(function () { for (const jqStopEl of jqStopEls) {
const curS = $(this); const curS = jqStopEl;
if (Number(this.getAttribute('offset')) > n) { if (Number(jqStopEl.getAttribute('offset')) > n) {
if (!colr) { if (!colr) {
const newcolor = this.getAttribute('stop-color'); const newcolor = jqStopEl.getAttribute('stop-color');
const newopac = this.getAttribute('stop-opacity'); const newopac = jqStopEl.getAttribute('stop-opacity');
stop.setAttribute('stop-color', newcolor); stop.setAttribute('stop-color', newcolor);
path.setAttribute('fill', newcolor); path.setAttribute('fill', newcolor);
stop.setAttribute('stop-opacity', newopac === null ? 1 : newopac); stop.setAttribute('stop-opacity', newopac === null ? 1 : newopac);
path.setAttribute('fill-opacity', newopac === null ? 1 : newopac); path.setAttribute('fill-opacity', newopac === null ? 1 : newopac);
} }
curS.before(stop); curS.insertAdjacentElement('beforebegin', stop);
return false; // curS.before(stop);
// return false;
} }
return true; // return true;
}); }
if (sel) selectStop(path); if (sel) selectStop(path);
return stop; return stop;
} }
@ -709,6 +717,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
* @returns {void} * @returns {void}
*/ */
function remStop () { function remStop () {
console.log("remStop --> ", curStop);
delStop.setAttribute('display', 'none'); delStop.setAttribute('display', 'none');
const path = $wc(curStop); const path = $wc(curStop);
const stop = path.data('stop'); const stop = path.data('stop');
@ -716,7 +725,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
$([curStop, stop, bg]).remove(); $([curStop, stop, bg]).remove();
} }
const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider'); const stopMakerDiv = $this.querySelector('#' + id + '_jGraduate_StopSlider');
let stops, curStop, drag; let stops, curStop, drag;
@ -806,12 +815,13 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
stop.setAttribute('offset', sX); stop.setAttribute('offset', sX);
let last = 0; let last = 0;
$(curGradient).find('stop').each(function (i) { const jqStopElems = curGradient.querySelectorAll('stop');
const cur = this.getAttribute('offset'); [].forEach.call(jqStopElems, function (jqStopElem) {
const t = $(this); const cur = jqStopElem.getAttribute('offset');
const t = jqStopElem;
if (cur < last) { if (cur < last) {
t.prev().before(t); t.previousElementSibling.insertAdjacentElement('beforebegin', t);
stops = $(curGradient).find('stop'); stops = curGradient.querySelectorAll('stop');
} }
last = cur; last = cur;
}); });
@ -820,7 +830,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const stopMakerSVG = mkElem('svg', { const stopMakerSVG = mkElem('svg', {
width: '100%', width: '100%',
height: 45 height: 45
}, stopMakerDiv[0]); }, stopMakerDiv);
const transPattern = mkElem('pattern', { const transPattern = mkElem('pattern', {
width: 16, width: 16,
@ -838,8 +848,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
transImg.setAttributeNS(ns.xlink, 'xlink:href', bgImage); transImg.setAttributeNS(ns.xlink, 'xlink:href', bgImage);
$(stopMakerSVG).click(function (evt) { stopMakerSVG.addEventListener('click', function (evt) {
stopOffset = stopMakerDiv.offset(); stopOffset = findPos(stopMakerDiv);
const {target} = evt; const {target} = evt;
if (target.tagName === 'path') return; if (target.tagName === 'path') return;
let x = evt.pageX - stopOffset.left - 8; let x = evt.pageX - stopOffset.left - 8;
@ -848,7 +858,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
evt.stopPropagation(); evt.stopPropagation();
}); });
$(stopMakerSVG).mouseover(function () { stopMakerSVG.addEventListener('mouseover', function () {
stopMakerSVG.append(delStop); stopMakerSVG.append(delStop);
}); });
@ -959,7 +969,6 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
const onMouseDownGradCoords = (e) => { const onMouseDownGradCoords = (e) => {
e.preventDefault(); e.preventDefault();
draggingCoord = e.target; draggingCoord = e.target;
// const sPos = draggingCoord.offset();
offset = findPos(draggingCoord.parentNode); offset = findPos(draggingCoord.parentNode);
$win.addEventListener('mousemove', onCoordDrag); $win.addEventListener('mousemove', onCoordDrag);
$win.addEventListener('mouseup', onCoordUp); $win.addEventListener('mouseup', onCoordUp);