#631 color picker image path changes

master
agriyadev5 2021-09-21 16:05:26 +05:30
parent 2f75dcb3e3
commit 36ff98c499
2 changed files with 14 additions and 7 deletions

View File

@ -666,15 +666,20 @@ export class SeColorPicker extends HTMLElement {
this.i18next = null; this.i18next = null;
this.$picker = this._shadowRoot.getElementById('picker'); this.$picker = this._shadowRoot.getElementById('picker');
this.$color_picker = this._shadowRoot.getElementById('color_picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker');
this.editor = null;
} }
/** /**
* @function init * @function init
* @param {any} name * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next, editor) {
this.i18next = i18next; this.i18next = i18next;
this.setAttribute('config-change_xxx_color', t('config.change_xxx_color')); this.setAttribute('config-change_xxx_color', t('config.change_xxx_color'));
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
} }
/** /**
* @function observedAttributes * @function observedAttributes
@ -691,10 +696,13 @@ export class SeColorPicker extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return; if (oldValue === newValue && name !== 'src') return;
switch (name) { switch (name) {
case 'src': case 'src':
this.$logo.setAttribute('src', './images/' + newValue); if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$logo.setAttribute('src', imgPath + '/' + newValue);
}
break; break;
case 'label': case 'label':
this.setAttribute('title', t(newValue)); this.setAttribute('title', t(newValue));

View File

@ -182,8 +182,7 @@ class BottomPanel {
<div value="content">${i18next.t('tools.fit_to_all')}</div> <div value="content">${i18next.t('tools.fit_to_all')}</div>
</se-zoom> </se-zoom>
<se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker> <se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"> <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
</se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input> <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px" <se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
options="&#8212;,...,- -,- .,- .." options="&#8212;,...,- -,- .,- .."
@ -217,8 +216,8 @@ class BottomPanel {
$id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt)); $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
$id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt)); $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
$id('opacity').addEventListener('change', this.handleOpacity.bind(this)); $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
$id('fill_color').init(i18next); $id('fill_color').init(i18next, this.editor);
$id('stroke_color').init(i18next); $id('stroke_color').init(i18next, this.editor);
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
[ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) => [ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) =>
$id(attrId).init(this.editor) $id(attrId).init(this.editor)