From 00d98958f2baafaf8bf7b687beda8d68711b53f7 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Thu, 24 Dec 2020 16:01:53 +0100 Subject: [PATCH] fix colorpicker updates --- src/editor/components/PaintBox.js | 36 ++++++++------------------ src/editor/components/seColorPicker.js | 36 ++++++++++++++++++-------- src/editor/svgedit.js | 5 ++-- 3 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/editor/components/PaintBox.js b/src/editor/components/PaintBox.js index b1df023f..cc8ca793 100644 --- a/src/editor/components/PaintBox.js +++ b/src/editor/components/PaintBox.js @@ -5,40 +5,36 @@ class PaintBox { /** * @param {string|Element|external:jQuery} container - * @param {PlainObject} svgcanvas * @param {"fill"} type * @param {string} color * @param {number} opacity */ - constructor (container, svgcanvas, type, color, opacity) { + constructor (container, type, color, opacity) { // set up gradients to be used for the buttons const svgdocbox = new DOMParser().parseFromString( - ` + ` + fill="#${color}" opacity="${opacity}" width="22" height="22"/> `, 'text/xml' ); let docElem = svgdocbox.documentElement; - docElem = $(container)[0].appendChild(document.importNode(docElem, true)); - docElem.setAttribute('width', 16.5); + docElem = container.appendChild(document.importNode(docElem, true)); this.rect = docElem.firstElementChild; this.defs = docElem.getElementsByTagName('defs')[0]; this.grad = this.defs.firstElementChild; this.paint = new $.jGraduate.Paint({solidColor: color}); this.type = type; - this.svgcanvas = svgcanvas; } /** * @param {module:jGraduate~Paint} paint - * @param {boolean} apply * @returns {void} */ - setPaint (paint, apply) { + setPaint (paint) { this.paint = paint; const ptype = paint.type; @@ -61,11 +57,6 @@ class PaintBox { this.rect.setAttribute('fill', fillAttr); this.rect.setAttribute('opacity', opac); - - if (apply) { - this.svgCanvas.setColor(this.type, this._paintColor, true); - this.svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true); - } } /** * @param {string} color @@ -90,11 +81,10 @@ class PaintBox { /** * @param {PlainObject} selectedElement - * @param {boolean} apply - * @returns {void} + * @returns {any} */ - update (selectedElement, apply) { - if (!selectedElement) { return; } + update (selectedElement) { + if (!selectedElement) { return null; } const {type} = this; switch (selectedElement.tagName) { @@ -103,7 +93,7 @@ class PaintBox { case 'foreignObject': // These elements don't have fill or stroke, so don't change // the current value - return; + return null; case 'g': case 'a': { const childs = selectedElement.getElementsByTagName('*'); @@ -123,7 +113,7 @@ class PaintBox { if (gPaint === null) { // No common color, don't update anything this._paintColor = null; - return; + return null; } this._paintColor = gPaint; this._paintOpacity = 1; @@ -139,16 +129,12 @@ class PaintBox { } } - if (apply) { - this.svgCanvas.setColor(type, this._paintColor, true); - this.svgCanvas.setPaintOpacity(type, this._paintOpacity, true); - } - this._paintOpacity *= 100; const paint = this.getPaint(this._paintColor, this._paintOpacity, type); // update the rect inside #fill_color/#stroke_color this.setPaint(paint); + return (paint); } /** diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 443dd6c1..cbc8af05 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -17,7 +17,7 @@ template.innerHTML = ` height: 22px; width: 22px; } - .block { + #block { height: 22px; width: 22px; float: right; @@ -42,9 +42,7 @@ template.innerHTML = `
-
-
-
+
@@ -64,6 +62,7 @@ export class SeColorPicker extends HTMLElement { this._shadowRoot.appendChild(template.content.cloneNode(true)); this.$logo = this._shadowRoot.getElementById('logo'); this.$label = this._shadowRoot.getElementById('label'); + this.$block = this._shadowRoot.getElementById('block'); this.paintBox = null; this.$picker = this._shadowRoot.getElementById('picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker'); @@ -92,7 +91,7 @@ export class SeColorPicker extends HTMLElement { this.setAttribute('title', newValue); break; case 'type': - this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`); + this.$label.setAttribute('title', `Pick a ${newValue} Paint and Opacity`); break; default: // eslint-disable-next-line no-console @@ -152,7 +151,20 @@ export class SeColorPicker extends HTMLElement { * @returns {void} */ update (selectedElement, apply) { - this.paintBox.update(selectedElement, apply); + const paint = this.paintBox.update(selectedElement); + if (paint && apply) { + const changeEvent = new CustomEvent('change', {detail: { + paint + }}); + this.dispatchEvent(changeEvent); + } + } + /** + * @param {PlainObject} paint + * @returns {void} + */ + setPaint (paint) { + this.paintBox.setPaint(paint); } /** @@ -160,7 +172,7 @@ export class SeColorPicker extends HTMLElement { * @returns {void} */ connectedCallback () { - this.paintBox = new PaintBox(this, this.type); + this.paintBox = new PaintBox(this.$block, this.type); let {paint} = this.paintBox; $(this.$picker).click(() => { $(this.$color_picker) @@ -173,13 +185,15 @@ export class SeColorPicker extends HTMLElement { images: {clientPath: './components/jgraduate/images/'}, paint, window: {pickerTitle: this.label}, - // images: {clientPath: configObj.curConfig.imgPath}, newstop: 'inverse' }, - function (p) { + (p) => { paint = new $.jGraduate.Paint(p); - this.paintBox.setPaint(paint); - this.svgCanvas.setPaint(this.picker, paint); + this.setPaint(paint); + const changeEvent = new CustomEvent('change', {detail: { + paint + }}); + this.dispatchEvent(changeEvent); $('#color_picker').hide(); }, () => { diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 58e1b255..f9f47b17 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -2946,12 +2946,13 @@ editor.init = () => { $('#group_opacity').val(configObj.curConfig.initOpacity * 100); const handleColorPicker = (type, evt) => { - // const {paint} = evt.detail; + const {paint} = evt.detail; + svgCanvas.setPaint(type, paint); updateToolButtonState(); }; $id('stroke_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt)); - $id('fill_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt)); + $id('fill_color').addEventListener('change', (evt) => handleColorPicker('fill', evt)); $('#group_opacityLabel').click(() => { $('#opacity_dropdown button').mousedown();