#631 globals svgEditor to get imgpath and set changes
parent
8df8efedf0
commit
b958009e16
|
@ -292,9 +292,6 @@ class MainMenu {
|
||||||
/**
|
/**
|
||||||
* Associate all button actions as well as non-button keyboard shortcuts.
|
* Associate all button actions as well as non-button keyboard shortcuts.
|
||||||
*/
|
*/
|
||||||
[ "main_button", "tool_import", "tool_export", "tool_docprops", "tool_editor_prefs", "tool_editor_homepage" ].forEach((attrId) =>
|
|
||||||
$id(attrId).init(this.editor)
|
|
||||||
);
|
|
||||||
$id("tool_import").addEventListener("click", () => {
|
$id("tool_import").addEventListener("click", () => {
|
||||||
this.clickImport();
|
this.clickImport();
|
||||||
window.dispatchEvent(new CustomEvent("importImages"));
|
window.dispatchEvent(new CustomEvent("importImages"));
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
const template = document.createElement('template');
|
const template = document.createElement('template');
|
||||||
// eslint-disable-next-line no-unsanitized/property
|
// eslint-disable-next-line no-unsanitized/property
|
||||||
|
@ -55,18 +56,7 @@ export class ToolButton extends HTMLElement {
|
||||||
// locate the component
|
// locate the component
|
||||||
this.$div = this._shadowRoot.querySelector('div');
|
this.$div = this._shadowRoot.querySelector('div');
|
||||||
this.$img = this._shadowRoot.querySelector('img');
|
this.$img = this._shadowRoot.querySelector('img');
|
||||||
this.editor = null;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -83,7 +73,7 @@ export class ToolButton extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'title':
|
case 'title':
|
||||||
{
|
{
|
||||||
|
@ -97,9 +87,8 @@ export class ToolButton extends HTMLElement {
|
||||||
case 'src':
|
case 'src':
|
||||||
if (newValue.indexOf("data:") !== -1) {
|
if (newValue.indexOf("data:") !== -1) {
|
||||||
this.$img.setAttribute('src', newValue);
|
this.$img.setAttribute('src', newValue);
|
||||||
} else if(this.editor !== null) {
|
} else {
|
||||||
const { imgPath } = this.editor.configObj.curConfig;
|
this.$img.setAttribute('src', this.imgPath + "/" + newValue);
|
||||||
this.$img.setAttribute('src', imgPath + "/" + newValue);
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'pressed':
|
case 'pressed':
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
|
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
|
||||||
import PaintBox from './PaintBox.js';
|
import PaintBox from './PaintBox.js';
|
||||||
|
@ -666,20 +667,16 @@ 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;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function init
|
* @function init
|
||||||
* @param {any} name
|
* @param {any} name
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
init (i18next, editor) {
|
init (i18next) {
|
||||||
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
|
||||||
|
@ -696,13 +693,10 @@ export class SeColorPicker extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'src':
|
case 'src':
|
||||||
if(this.editor !== null) {
|
this.$logo.setAttribute('src', this.imgPath + '/' + newValue);
|
||||||
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));
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
/* eslint-disable no-unsanitized/property */
|
/* eslint-disable no-unsanitized/property */
|
||||||
const template = document.createElement('template');
|
const template = document.createElement('template');
|
||||||
template.innerHTML = `
|
template.innerHTML = `
|
||||||
|
@ -119,18 +120,7 @@ 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;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -147,7 +137,7 @@ export class ExplorerButton extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
async attributeChangedCallback (name, oldValue, newValue) {
|
async attributeChangedCallback (name, oldValue, newValue) {
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'title':
|
case 'title':
|
||||||
{
|
{
|
||||||
|
@ -184,10 +174,7 @@ export class ExplorerButton extends HTMLElement {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'src':
|
case 'src':
|
||||||
if(this.editor !== null) {
|
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
|
||||||
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
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
const template = document.createElement('template');
|
const template = document.createElement('template');
|
||||||
template.innerHTML = `
|
template.innerHTML = `
|
||||||
|
@ -100,18 +101,7 @@ 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;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -246,10 +236,10 @@ export class FlyingButton extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
connectedCallback () {
|
connectedCallback () {
|
||||||
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
||||||
|
this.$img.setAttribute('src', this.imgPath + '/' + 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) {
|
||||||
|
@ -262,7 +252,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', imgPath + '/' + ev.target.getAttribute('src'));
|
this.$img.setAttribute('src', this.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
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import 'elix/define/DropdownList.js';
|
import 'elix/define/DropdownList.js';
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
|
|
||||||
|
@ -46,6 +47,7 @@ export class SeList extends HTMLElement {
|
||||||
this.$label = this._shadowRoot.querySelector('label');
|
this.$label = this._shadowRoot.querySelector('label');
|
||||||
this.$selction = this.$dropdown.shadowRoot.querySelector('#source').querySelector('#value');
|
this.$selction = this.$dropdown.shadowRoot.querySelector('#source').querySelector('#value');
|
||||||
this.items = this.querySelectorAll("se-list-item");
|
this.items = this.querySelectorAll("se-list-item");
|
||||||
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
@ -85,7 +87,7 @@ export class SeList extends HTMLElement {
|
||||||
while(currentObj.$selction.firstChild)
|
while(currentObj.$selction.firstChild)
|
||||||
currentObj.$selction.removeChild(currentObj.$selction.firstChild);
|
currentObj.$selction.removeChild(currentObj.$selction.firstChild);
|
||||||
const img = document.createElement('img');
|
const img = document.createElement('img');
|
||||||
img.src = './images/' + element.getAttribute("src");
|
img.src = currentObj.imgPath + '/' + element.getAttribute("src");
|
||||||
img.style.height = element.getAttribute("img-height");
|
img.style.height = element.getAttribute("img-height");
|
||||||
img.setAttribute('title', t(element.getAttribute("title")));
|
img.setAttribute('title', t(element.getAttribute("title")));
|
||||||
currentObj.$selction.append(img);
|
currentObj.$selction.append(img);
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import 'elix/define/Option.js';
|
import 'elix/define/Option.js';
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
|
|
||||||
|
@ -34,18 +35,7 @@ export class SeListItem extends HTMLElement {
|
||||||
this.$svg.setAttribute('style', 'display: none;');
|
this.$svg.setAttribute('style', 'display: none;');
|
||||||
this.$img = this._shadowRoot.querySelector('img');
|
this.$img = this._shadowRoot.querySelector('img');
|
||||||
this.$img.setAttribute('style', 'display: none;');
|
this.$img.setAttribute('style', 'display: none;');
|
||||||
this.editor = null;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -63,18 +53,15 @@ export class SeListItem extends HTMLElement {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'option':
|
case 'option':
|
||||||
this.$menuitem.setAttribute('option', newValue);
|
this.$menuitem.setAttribute('option', newValue);
|
||||||
this.$menuitem.textContent = t(newValue);
|
this.$menuitem.textContent = t(newValue);
|
||||||
break;
|
break;
|
||||||
case 'src':
|
case 'src':
|
||||||
if(this.editor !== null) {
|
|
||||||
const { imgPath } = this.editor.configObj.curConfig;
|
|
||||||
this.$img.setAttribute('style', 'display: block;');
|
this.$img.setAttribute('style', 'display: block;');
|
||||||
this.$img.setAttribute('src', imgPath + '/' + newValue);
|
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'title':
|
case 'title':
|
||||||
this.$img.setAttribute('title', t(newValue));
|
this.$img.setAttribute('title', t(newValue));
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import 'elix/define/MenuItem.js';
|
import 'elix/define/MenuItem.js';
|
||||||
import './sePlainMenuButton.js';
|
import './sePlainMenuButton.js';
|
||||||
|
|
||||||
|
@ -43,18 +44,7 @@ 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;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -73,16 +63,13 @@ export class SeMenu extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
const image = new Image();
|
const image = new Image();
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'src':
|
case 'src':
|
||||||
if (this.editor !== null) {
|
image.src = this.imgPath + '/' + newValue;
|
||||||
const { imgPath } = this.editor.configObj.curConfig;
|
|
||||||
image.src = imgPath + '/' + newValue;
|
|
||||||
image.width = 24;
|
image.width = 24;
|
||||||
image.height = 24;
|
image.height = 24;
|
||||||
this.$label.prepend(image);
|
this.$label.prepend(image);
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'label':
|
case 'label':
|
||||||
this.$label.prepend(newValue);
|
this.$label.prepend(newValue);
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import 'elix/define/Menu.js';
|
import 'elix/define/Menu.js';
|
||||||
import 'elix/define/MenuItem.js';
|
import 'elix/define/MenuItem.js';
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
|
@ -29,18 +30,7 @@ export class SeMenuItem extends HTMLElement {
|
||||||
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
|
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
|
||||||
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
|
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
|
||||||
this.$svg.setAttribute('style', 'display: none;');
|
this.$svg.setAttribute('style', 'display: none;');
|
||||||
this.editor = null;
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @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
|
||||||
|
@ -58,14 +48,11 @@ export class SeMenuItem extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
attributeChangedCallback (name, oldValue, newValue) {
|
attributeChangedCallback (name, oldValue, newValue) {
|
||||||
let shortcut = '';
|
let shortcut = '';
|
||||||
if (oldValue === newValue && name !== 'src') return;
|
if (oldValue === newValue) return;
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'src':
|
case 'src':
|
||||||
if(this.editor !== null) {
|
|
||||||
const { imgPath } = this.editor.configObj.curConfig;
|
|
||||||
this.$img.style.display = 'inline-block';
|
this.$img.style.display = 'inline-block';
|
||||||
this.$img.setAttribute('src', imgPath + '/' + newValue);
|
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'label':
|
case 'label':
|
||||||
shortcut = this.getAttribute('shortcut');
|
shortcut = this.getAttribute('shortcut');
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import '../dialogs/se-elix/define/NumberSpinBox.js';
|
import '../dialogs/se-elix/define/NumberSpinBox.js';
|
||||||
import { t } from '../locale.js';
|
import { t } from '../locale.js';
|
||||||
|
|
||||||
|
@ -68,6 +69,7 @@ export class SESpinInput extends HTMLElement {
|
||||||
this.$label = this.shadowRoot.getElementById('label');
|
this.$label = this.shadowRoot.getElementById('label');
|
||||||
this.$event = new CustomEvent('change');
|
this.$event = new CustomEvent('change');
|
||||||
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
|
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
|
||||||
|
this.imgPath = svgEditor.configObj.curConfig.imgPath;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @function observedAttributes
|
* @function observedAttributes
|
||||||
|
@ -93,7 +95,7 @@ export class SESpinInput extends HTMLElement {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'src':
|
case 'src':
|
||||||
this.$img.setAttribute('src', './images/' + newValue);
|
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
|
||||||
this.$label.remove();
|
this.$label.remove();
|
||||||
this.$div.classList.add('imginside');
|
this.$div.classList.add('imginside');
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* globals svgEditor */
|
||||||
import ListComboBox from 'elix/define/ListComboBox.js';
|
import ListComboBox from 'elix/define/ListComboBox.js';
|
||||||
import * as internal from 'elix/src/base/internal.js';
|
import * as internal from 'elix/src/base/internal.js';
|
||||||
import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js';
|
import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js';
|
||||||
|
@ -59,17 +60,6 @@ class Zoom extends ListComboBox {
|
||||||
);
|
);
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
/**
|
|
||||||
* @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
|
||||||
* @returns {any} observed
|
* @returns {any} observed
|
||||||
|
@ -91,8 +81,8 @@ class Zoom extends ListComboBox {
|
||||||
// this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
// this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||||
break;
|
break;
|
||||||
case 'src':
|
case 'src':
|
||||||
if (this.editor !== null && this.editor !== undefined) {
|
{
|
||||||
const { imgPath } = this.editor.configObj.curConfig;
|
const { imgPath } = svgEditor.configObj.curConfig;
|
||||||
this.src = imgPath + '/' + newValue;
|
this.src = imgPath + '/' + newValue;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -364,7 +364,6 @@ export default {
|
||||||
svgCanvas.setMode('connector');
|
svgCanvas.setMode('connector');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$id('mode_connect').init(svgEditor);
|
|
||||||
},
|
},
|
||||||
/* async */ addLangData({ _lang }) { // , importLocale: importLoc
|
/* async */ addLangData({ _lang }) { // , importLocale: importLoc
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -94,7 +94,6 @@ export default {
|
||||||
svgCanvas.setMode('eyedropper');
|
svgCanvas.setMode('eyedropper');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$id('tool_eyedropper').init(svgEditor);
|
|
||||||
},
|
},
|
||||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||||
selectedChanged: getStyle,
|
selectedChanged: getStyle,
|
||||||
|
|
|
@ -174,7 +174,6 @@ export default {
|
||||||
svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
|
svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
|
||||||
gridUpdate();
|
gridUpdate();
|
||||||
});
|
});
|
||||||
$id('view_grid').init(svgEditor);
|
|
||||||
if (showGrid) {
|
if (showGrid) {
|
||||||
gridUpdate();
|
gridUpdate();
|
||||||
}
|
}
|
||||||
|
|
|
@ -530,7 +530,6 @@ export default {
|
||||||
$id('tool_imagelib').addEventListener("click", () => {
|
$id('tool_imagelib').addEventListener("click", () => {
|
||||||
showBrowser();
|
showBrowser();
|
||||||
});
|
});
|
||||||
$id('tool_imagelib').init(svgEditor);
|
|
||||||
|
|
||||||
const style = document.createElement('style');
|
const style = document.createElement('style');
|
||||||
style.textContent = '#imgbrowse_holder {' +
|
style.textContent = '#imgbrowse_holder {' +
|
||||||
|
|
|
@ -174,9 +174,6 @@ export default {
|
||||||
$id("tool_open").addEventListener("click", clickOpen.bind(this));
|
$id("tool_open").addEventListener("click", clickOpen.bind(this));
|
||||||
$id("tool_save").addEventListener("click", clickSave.bind(this, "save"));
|
$id("tool_save").addEventListener("click", clickSave.bind(this, "save"));
|
||||||
$id("tool_save_as").addEventListener("click", clickSave.bind(this, "saveas"));
|
$id("tool_save_as").addEventListener("click", clickSave.bind(this, "saveas"));
|
||||||
[ "tool_clear", "tool_open", "tool_save", "tool_save_as" ].forEach((attrId) =>
|
|
||||||
$id(attrId).init(svgEditor)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,7 +57,6 @@ export default {
|
||||||
svgCanvas.setMode('ext-panning');
|
svgCanvas.setMode('ext-panning');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$id('ext-panning').init(svgEditor);
|
|
||||||
},
|
},
|
||||||
mouseDown() {
|
mouseDown() {
|
||||||
if (svgCanvas.getMode() === 'ext-panning') {
|
if (svgCanvas.getMode() === 'ext-panning') {
|
||||||
|
|
|
@ -108,10 +108,6 @@ export default {
|
||||||
showPanel(false, "star");
|
showPanel(false, "star");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$id("tool_star").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`;
|
||||||
const label1 = `${name}:contextTools.1.label`;
|
const label1 = `${name}:contextTools.1.label`;
|
||||||
|
|
|
@ -54,7 +54,6 @@ export default {
|
||||||
canv.setMode(modeId);
|
canv.setMode(modeId);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$id('tool_shapelib').init(svgEditor);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mouseDown (opts) {
|
mouseDown (opts) {
|
||||||
|
|
|
@ -216,13 +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, this.editor);
|
$id('fill_color').init(i18next);
|
||||||
$id('stroke_color').init(i18next, this.editor);
|
$id('stroke_color').init(i18next);
|
||||||
$id('zoom').init(this.editor);
|
|
||||||
// eslint-disable-next-line max-len
|
|
||||||
[ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) => {
|
|
||||||
$id(attrId).init(this.editor);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @type {module}
|
* @type {module}
|
||||||
|
|
|
@ -97,12 +97,6 @@ class LayersPanel {
|
||||||
$id("se-cmenu-layers-more").addEventListener("change", this.lmenuFunc.bind(this));
|
$id("se-cmenu-layers-more").addEventListener("change", this.lmenuFunc.bind(this));
|
||||||
$id("se-cmenu-layers-list").addEventListener("change", (e) => { this.lmenuFunc(e); });
|
$id("se-cmenu-layers-list").addEventListener("change", (e) => { this.lmenuFunc(e); });
|
||||||
$id("sidepanel_handle").addEventListener("click", () => this.toggleSidePanel());
|
$id("sidepanel_handle").addEventListener("click", () => this.toggleSidePanel());
|
||||||
$id("layer_new").init(this.editor);
|
|
||||||
$id("layer_delete").init(this.editor);
|
|
||||||
$id("layer_up").init(this.editor);
|
|
||||||
$id("layer_down").init(this.editor);
|
|
||||||
$id("layer_rename").init(this.editor);
|
|
||||||
$id("layer_moreopts").init(this.editor);
|
|
||||||
this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
|
this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
|
||||||
}
|
}
|
||||||
toggleSidePanel(displayFlag) {
|
toggleSidePanel(displayFlag) {
|
||||||
|
|
|
@ -268,11 +268,6 @@ class LeftPanel {
|
||||||
$id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
|
$id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
|
||||||
$id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
|
$id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
|
||||||
$id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
|
$id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
|
||||||
|
|
||||||
// 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", "tools_rect", "tools_ellipse" ].forEach((attrId) =>
|
|
||||||
$id(attrId).init(this.editor)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1040,11 +1040,6 @@ class TopPanel {
|
||||||
$id("tool_unlink_use").addEventListener("click", this.clickGroup.bind(this));
|
$id("tool_unlink_use").addEventListener("click", this.clickGroup.bind(this));
|
||||||
$id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value);});
|
$id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value);});
|
||||||
|
|
||||||
// eslint-disable-next-line max-len
|
|
||||||
[ "tool_add_subpath", "tool_openclose_path", "tool_node_delete", "tool_node_clone", "tool_node_link", "tool_ungroup", "tool_unlink_use", "tool_text_anchor_start", "tool_text_anchor_middle", "tool_text_anchor_end", "tool_bold", "tool_italic", "tool_align_bottom", "tool_align_middle", "tool_align_top", "tool_align_left", "tool_align_center", "tool_align_right", "tool_make_link_multi", "tool_group_elements", "tool_delete_multi", "tool_make_link", "tool_reorient", "tool_topath", "tool_move_bottom", "tool_move_top", "tool_delete", "tool_clone", "tool_redo", "tool_undo", "tool_wireframe", "tool_source", "tool_clone_multi", "tool_posleft", "tool_poscenter", "tool_posright", "tool_postop", "tool_posmiddle", "tool_posbottom" ].forEach((attrId) =>
|
|
||||||
$id(attrId).init(this.editor)
|
|
||||||
);
|
|
||||||
|
|
||||||
// all top panel attributes
|
// all top panel attributes
|
||||||
[
|
[
|
||||||
"elem_id",
|
"elem_id",
|
||||||
|
|
Loading…
Reference in New Issue