#631 menu, explorer and flybutton image path update
parent
36ff98c499
commit
5ed960cb1a
|
@ -285,15 +285,14 @@ class MainMenu {
|
||||||
<se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
|
<se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
|
||||||
<se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
|
<se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
|
||||||
<se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="logo.svg"></se-menu-item>
|
<se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="logo.svg"></se-menu-item>
|
||||||
</se-menu>
|
</se-menu>`;
|
||||||
`;
|
|
||||||
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
||||||
|
|
||||||
// register action to main menu entries
|
// register action to main menu entries
|
||||||
/**
|
/**
|
||||||
* Associate all button actions as well as non-button keyboard shortcuts.
|
* Associate all button actions as well as non-button keyboard shortcuts.
|
||||||
*/
|
*/
|
||||||
[ "tool_import", "tool_export", "tool_docprops", "tool_editor_prefs", "tool_editor_homepage" ].forEach((attrId) =>
|
[ "main_button", "tool_import", "tool_export", "tool_docprops", "tool_editor_prefs", "tool_editor_homepage" ].forEach((attrId) =>
|
||||||
$id(attrId).init(this.editor)
|
$id(attrId).init(this.editor)
|
||||||
);
|
);
|
||||||
$id("tool_import").addEventListener("click", () => {
|
$id("tool_import").addEventListener("click", () => {
|
||||||
|
|
|
@ -119,6 +119,18 @@ export class ExplorerButton extends HTMLElement {
|
||||||
this.$lib = this._shadowRoot.querySelector('.image-lib');
|
this.$lib = this._shadowRoot.querySelector('.image-lib');
|
||||||
this.files = [];
|
this.files = [];
|
||||||
this.request = new XMLHttpRequest();
|
this.request = new XMLHttpRequest();
|
||||||
|
this.editor = null;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function init
|
||||||
|
* @param {any} name
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
init (editor) {
|
||||||
|
this.editor = editor;
|
||||||
|
if (this.hasAttribute("src")) {
|
||||||
|
this.setAttribute('src', this.getAttribute("src"));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
@ -135,7 +147,7 @@ export class ExplorerButton extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
async attributeChangedCallback (name, oldValue, newValue) {
|
async attributeChangedCallback (name, oldValue, newValue) {
|
||||||
if (oldValue === newValue) return;
|
if (oldValue === newValue && name !== 'src') return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'title':
|
case 'title':
|
||||||
{
|
{
|
||||||
|
@ -172,7 +184,10 @@ export class ExplorerButton extends HTMLElement {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'src':
|
case 'src':
|
||||||
this.$img.setAttribute('src', './images/' + newValue);
|
if(this.editor !== null) {
|
||||||
|
const { imgPath } = this.editor.configObj.curConfig;
|
||||||
|
this.$img.setAttribute('src', imgPath + '/' + newValue);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
|
|
|
@ -100,6 +100,18 @@ export class FlyingButton extends HTMLElement {
|
||||||
// the last element of the div is the slot
|
// the last element of the div is the slot
|
||||||
// we retrieve all elements added in the slot (i.e. se-buttons)
|
// we retrieve all elements added in the slot (i.e. se-buttons)
|
||||||
this.$elements = this.$menu.lastElementChild.assignedElements();
|
this.$elements = this.$menu.lastElementChild.assignedElements();
|
||||||
|
this.editor = null;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function init
|
||||||
|
* @param {any} name
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
init (editor) {
|
||||||
|
this.editor = editor;
|
||||||
|
// initialize currentAction with the first slot of the list
|
||||||
|
const { imgPath } = this.editor.configObj.curConfig;
|
||||||
|
this.$img.setAttribute('src', imgPath + '/' + this.activeSlot.getAttribute('src'));
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
@ -233,12 +245,11 @@ export class FlyingButton extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
connectedCallback () {
|
connectedCallback () {
|
||||||
// initialize currentAction with the first slot of the list
|
|
||||||
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
||||||
this.$img.setAttribute('src', './images/' + this.activeSlot.getAttribute('src'));
|
|
||||||
// capture click event on the button to manage the logic
|
// capture click event on the button to manage the logic
|
||||||
const onClickHandler = (ev) => {
|
const onClickHandler = (ev) => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
|
const { imgPath } = this.editor.configObj.curConfig;
|
||||||
switch (ev.target.nodeName) {
|
switch (ev.target.nodeName) {
|
||||||
case 'SE-FLYINGBUTTON':
|
case 'SE-FLYINGBUTTON':
|
||||||
if (this.pressed) {
|
if (this.pressed) {
|
||||||
|
@ -251,7 +262,7 @@ export class FlyingButton extends HTMLElement {
|
||||||
break;
|
break;
|
||||||
case 'SE-BUTTON':
|
case 'SE-BUTTON':
|
||||||
// change to the current action
|
// change to the current action
|
||||||
this.$img.setAttribute('src', './images/' + ev.target.getAttribute('src'));
|
this.$img.setAttribute('src', imgPath + '/' + ev.target.getAttribute('src'));
|
||||||
this.activeSlot = ev.target;
|
this.activeSlot = ev.target;
|
||||||
this.setAttribute('pressed', 'pressed');
|
this.setAttribute('pressed', 'pressed');
|
||||||
// and close the menu
|
// and close the menu
|
||||||
|
|
|
@ -43,6 +43,18 @@ export class SeMenu extends HTMLElement {
|
||||||
this._shadowRoot.append(template.content.cloneNode(true));
|
this._shadowRoot.append(template.content.cloneNode(true));
|
||||||
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
|
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
|
||||||
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
|
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
|
||||||
|
this.editor = null;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @function init
|
||||||
|
* @param {any} name
|
||||||
|
* @returns {void}
|
||||||
|
*/
|
||||||
|
init (editor) {
|
||||||
|
this.editor = editor;
|
||||||
|
if (this.hasAttribute("src")) {
|
||||||
|
this.setAttribute('src', this.getAttribute("src"));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
@ -61,13 +73,16 @@ export class SeMenu extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
const image = new Image();
|
const image = new Image();
|
||||||
if (oldValue === newValue) return;
|
if (oldValue === newValue && name !== 'src') return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'src':
|
case 'src':
|
||||||
image.src = './images/' + newValue;
|
if (this.editor !== null) {
|
||||||
image.width = 24;
|
const { imgPath } = this.editor.configObj.curConfig;
|
||||||
image.height = 24;
|
image.src = imgPath + '/' + newValue;
|
||||||
this.$label.prepend(image);
|
image.width = 24;
|
||||||
|
image.height = 24;
|
||||||
|
this.$label.prepend(image);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case 'label':
|
case 'label':
|
||||||
this.$label.prepend(newValue);
|
this.$label.prepend(newValue);
|
||||||
|
|
|
@ -110,6 +110,7 @@ export default {
|
||||||
});
|
});
|
||||||
$id("tool_star").init(svgEditor);
|
$id("tool_star").init(svgEditor);
|
||||||
$id("tool_polygon").init(svgEditor);
|
$id("tool_polygon").init(svgEditor);
|
||||||
|
$id("tools_polygon").init(svgEditor);
|
||||||
|
|
||||||
const label0 = `${name}:contextTools.0.label`;
|
const label0 = `${name}:contextTools.0.label`;
|
||||||
const title0 = `${name}:contextTools.0.title`;
|
const title0 = `${name}:contextTools.0.title`;
|
||||||
|
|
|
@ -54,6 +54,7 @@ export default {
|
||||||
canv.setMode(modeId);
|
canv.setMode(modeId);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
$id('tool_shapelib').init(svgEditor);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mouseDown (opts) {
|
mouseDown (opts) {
|
||||||
|
|
|
@ -270,7 +270,7 @@ class LeftPanel {
|
||||||
$id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
|
$id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
|
||||||
|
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
[ "tool_rect", "tool_square", "tool_fhrect", "tool_ellipse", "tool_circle", "tool_fhellipse", "tool_select", "tool_fhpath", "tool_text", "tool_image", "tool_zoom", "tool_path", "tool_line" ].forEach((attrId) =>
|
[ "tool_rect", "tool_square", "tool_fhrect", "tool_ellipse", "tool_circle", "tool_fhellipse", "tool_select", "tool_fhpath", "tool_text", "tool_image", "tool_zoom", "tool_path", "tool_line", "tools_rect", "tools_ellipse" ].forEach((attrId) =>
|
||||||
$id(attrId).init(this.editor)
|
$id(attrId).init(this.editor)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue