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

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