fix colorbox

This commit is contained in:
JFH
2020-12-24 22:40:30 +01:00
parent 1a938fc522
commit fe6470bcdd
3 changed files with 12 additions and 9 deletions

View File

@@ -59,16 +59,17 @@ class PaintBox {
this.rect.setAttribute('opacity', opac); this.rect.setAttribute('opacity', opac);
} }
/** /**
* @param {PlainObject} svgCanvas
* @param {string} color * @param {string} color
* @param {Float} opac * @param {Float} opac
* @param {string} type * @param {string} type
* @returns {module:jGraduate~Paint} * @returns {module:jGraduate~Paint}
*/ */
getPaint (color, opac, type) { static getPaint (svgCanvas, color, opac, type) {
// update the editor's fill paint // update the editor's fill paint
const opts = {alpha: opac}; const opts = {alpha: opac};
if (color.startsWith('url(#')) { if (color.startsWith('url(#')) {
let refElem = this.svgCanvas.getRefElem(color); let refElem = svgCanvas.getRefElem(color);
refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0]; refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
opts[refElem.tagName] = refElem; opts[refElem.tagName] = refElem;
} else if (color.startsWith('#')) { } else if (color.startsWith('#')) {
@@ -80,10 +81,11 @@ class PaintBox {
} }
/** /**
* @param {PlainObject} svgcanvas
* @param {PlainObject} selectedElement * @param {PlainObject} selectedElement
* @returns {any} * @returns {any}
*/ */
update (selectedElement) { update (svgcanvas, selectedElement) {
if (!selectedElement) { return null; } if (!selectedElement) { return null; }
const {type} = this; const {type} = this;
@@ -131,7 +133,7 @@ class PaintBox {
this._paintOpacity *= 100; this._paintOpacity *= 100;
const paint = this.getPaint(this._paintColor, this._paintOpacity, type); const paint = PaintBox.getPaint(svgcanvas, this._paintColor, this._paintOpacity, type);
// update the rect inside #fill_color/#stroke_color // update the rect inside #fill_color/#stroke_color
this.setPaint(paint); this.setPaint(paint);
return (paint); return (paint);
@@ -147,7 +149,7 @@ class PaintBox {
case 'linearGradient': case 'linearGradient':
case 'radialGradient': { case 'radialGradient': {
const paint = new $.jGraduate.Paint({copy: this.paint}); const paint = new $.jGraduate.Paint({copy: this.paint});
this.svgCanvas.setPaint(this.type, paint); this.setPaint(this.type, paint);
break; break;
} }
} }

View File

@@ -146,12 +146,13 @@ export class SeColorPicker extends HTMLElement {
} }
/** /**
* @param {PlainObject} svgCanvas
* @param {PlainObject} selectedElement * @param {PlainObject} selectedElement
* @param {bool} apply * @param {bool} apply
* @returns {void} * @returns {void}
*/ */
update (selectedElement, apply) { update (svgCanvas, selectedElement, apply) {
const paint = this.paintBox.update(selectedElement); const paint = this.paintBox.update(svgCanvas, selectedElement);
if (paint && apply) { if (paint && apply) {
const changeEvent = new CustomEvent('change', {detail: { const changeEvent = new CustomEvent('change', {detail: {
paint paint

View File

@@ -1133,8 +1133,8 @@ editor.init = () => {
}; };
const updateColorpickers = (apply) => { const updateColorpickers = (apply) => {
$id('fill_color').update(selectedElement, apply); $id('fill_color').update(svgCanvas, selectedElement, apply);
$id('stroke_color').update(selectedElement, apply); $id('stroke_color').update(svgCanvas, selectedElement, apply);
}; };
/** /**