#326 unpositioned extension button in wrong place
agriyadev5
parent
83632b65d9
commit
3bce54b3db
|
|
@ -360,13 +360,11 @@ export default {
|
|||
name: svgEditor.i18next.t(`${name}:name`),
|
||||
callback() {
|
||||
const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
|
||||
// Add the button and its handler(s)
|
||||
const buttonTemplate = document.createElement("template");
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
buttonTemplate.innerHTML = `
|
||||
const buttonTemplate = `
|
||||
<se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
|
||||
`;
|
||||
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
|
||||
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
|
||||
$id('mode_connect').addEventListener("click", () => {
|
||||
svgCanvas.setMode('connector');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -82,14 +82,13 @@ export default {
|
|||
name: svgEditor.i18next.t(`${name}:name`),
|
||||
callback() {
|
||||
// Add the button and its handler(s)
|
||||
const buttonTemplate = document.createElement("template");
|
||||
const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
|
||||
const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
buttonTemplate.innerHTML = `
|
||||
const buttonTemplate = `
|
||||
<se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
|
||||
`;
|
||||
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
|
||||
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
|
||||
$id('tool_eyedropper').addEventListener("click", () => {
|
||||
svgCanvas.setMode('eyedropper');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -79,9 +79,8 @@ export default {
|
|||
const fbtitle = svgEditor.i18next.t(`${name}:title`);
|
||||
const title_star = svgEditor.i18next.t(`${name}:buttons.0.title`);
|
||||
const title_polygon = svgEditor.i18next.t(`${name}:buttons.1.title`);
|
||||
const buttonTemplate = document.createElement("template");
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
buttonTemplate.innerHTML = `
|
||||
const buttonTemplate = `
|
||||
<se-flyingbutton id="tools_polygon" title="${fbtitle}">
|
||||
<se-button id="tool_star" title="${title_star}" src="./images/star.svg">
|
||||
</se-button>
|
||||
|
|
@ -89,7 +88,7 @@ export default {
|
|||
</se-button>
|
||||
</se-flyingbutton>
|
||||
`;
|
||||
$id("tools_left").append(buttonTemplate.content.cloneNode(true));
|
||||
svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 10);
|
||||
// handler
|
||||
$id("tool_star").addEventListener("click", () => {
|
||||
if (this.leftPanel.updateLeftPanel("tool_star")) {
|
||||
|
|
|
|||
|
|
@ -43,13 +43,12 @@ export default {
|
|||
return {
|
||||
callback () {
|
||||
if ($id('tool_shapelib') === null) {
|
||||
const buttonTemplate = document.createElement("template");
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
buttonTemplate.innerHTML = `
|
||||
const buttonTemplate = `
|
||||
<se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/"
|
||||
src="./images/shapelib.svg"></se-explorerbutton>
|
||||
`;
|
||||
$id('tools_left').append(buttonTemplate.content.cloneNode(true));
|
||||
canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
|
||||
$id('tool_shapelib').addEventListener("click", () => {
|
||||
canv.setMode(modeId);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
|
||||
import { insertChildAtIndex, stringToHTML } from '../../svgcanvas/utilities.js';
|
||||
|
||||
const { $id, $qa } = SvgCanvas;
|
||||
|
||||
|
|
@ -196,30 +197,60 @@ class LeftPanel {
|
|||
init() {
|
||||
const { i18next } = this.editor;
|
||||
// add Left panel
|
||||
const leftMenu = [
|
||||
{
|
||||
menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>`,
|
||||
position: 1
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="./images/zoom.svg" shortcut="Z"></se-button>`,
|
||||
position: 2
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="./images/pencil.svg" shortcut="Q"></se-button>`,
|
||||
position: 3
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="./images/pen.svg" shortcut="L"></se-button>`,
|
||||
position: 4
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="./images/path.svg" shortcut="P"></se-button>`,
|
||||
position: 5
|
||||
},
|
||||
{
|
||||
menu: `<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
|
||||
<se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="./images/rect.svg" shortcut="R"></se-button>
|
||||
<se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="./images/square.svg"></se-button>
|
||||
<se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="./images/fh_rect.svg"></se-button>
|
||||
</se-flyingbutton>`,
|
||||
position: 6
|
||||
},
|
||||
{
|
||||
menu: `<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
|
||||
<se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="./images/ellipse.svg" shortcut="E"></se-button>
|
||||
<se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="./images/circle.svg"></se-button>
|
||||
<se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="./images/fh_ellipse.svg"></se-button>
|
||||
</se-flyingbutton>`,
|
||||
position: 7
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="./images/text.svg" shortcut="T"></se-button>`,
|
||||
position: 8
|
||||
},
|
||||
{
|
||||
menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="./images/image.svg"></se-button>`,
|
||||
position: 11
|
||||
}
|
||||
];
|
||||
const template = document.createElement("template");
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = `
|
||||
<div id="tools_left">
|
||||
<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>
|
||||
<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="./images/zoom.svg" shortcut="Z"></se-button>
|
||||
<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="./images/pencil.svg" shortcut="Q"></se-button>
|
||||
<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="./images/pen.svg" shortcut="L"></se-button>
|
||||
<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="./images/path.svg" shortcut="P"></se-button>
|
||||
<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
|
||||
<se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="./images/rect.svg" shortcut="R"></se-button>
|
||||
<se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="./images/square.svg"></se-button>
|
||||
<se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="./images/fh_rect.svg"></se-button>
|
||||
</se-flyingbutton>
|
||||
<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
|
||||
<se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="./images/ellipse.svg" shortcut="E"></se-button>
|
||||
<se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="./images/circle.svg"></se-button>
|
||||
<se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="./images/fh_ellipse.svg"></se-button>
|
||||
</se-flyingbutton>
|
||||
<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="./images/text.svg" shortcut="T"></se-button>
|
||||
<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="./images/image.svg"></se-button>
|
||||
</div> <!-- tools_left -->
|
||||
`;
|
||||
template.innerHTML = `<div id="tools_left"></div> <!-- tools_left -->`;
|
||||
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
||||
const leftMenuSort = leftMenu.sort((a, b) => (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0));
|
||||
const parent = $id("tools_left");
|
||||
leftMenuSort.forEach(function (value) {
|
||||
insertChildAtIndex(parent, value.menu, value.position);
|
||||
});
|
||||
// register actions for left panel
|
||||
$id("tool_select").addEventListener("click", this.clickSelect.bind(this));
|
||||
$id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ import {
|
|||
preventClickDefault, walkTree, getBBoxOfElementAsPath, convertToPath, encode64, decode64,
|
||||
getVisibleElements, dropXMLInternalSubset, init as utilsInit,
|
||||
getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish, blankPageObjectURL,
|
||||
$id, $qa, $qq, getFeGaussianBlur
|
||||
$id, $qa, $qq, getFeGaussianBlur, stringToHTML, insertChildAtIndex
|
||||
} from './utilities.js';
|
||||
import {
|
||||
transformPoint, matrixMultiply, hasMatrixTransform, transformListToTransform,
|
||||
|
|
@ -188,6 +188,8 @@ class SvgCanvas {
|
|||
this.$id = $id;
|
||||
this.$qq = $qq;
|
||||
this.$qa = $qa;
|
||||
this.stringToHTML = stringToHTML;
|
||||
this.insertChildAtIndex = insertChildAtIndex;
|
||||
this.getClosest = getClosest;
|
||||
this.getParents = getParents;
|
||||
/** A storage solution aimed at replacing jQuerys data function.
|
||||
|
|
|
|||
|
|
@ -1375,6 +1375,22 @@ export const mock = ({
|
|||
getRotationAngle = getRotationAngleUser;
|
||||
};
|
||||
|
||||
export const stringToHTML = (str) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(str, 'text/html');
|
||||
return doc.body.firstChild;
|
||||
};
|
||||
|
||||
export const insertChildAtIndex = function(parent, child, index) {
|
||||
const doc = stringToHTML(child);
|
||||
if (!index) index = 0;
|
||||
if (index >= parent.children.length) {
|
||||
parent.appendChild(doc);
|
||||
} else {
|
||||
parent.insertBefore(doc, parent.children[index]);
|
||||
}
|
||||
};
|
||||
|
||||
// shortcuts to common DOM functions
|
||||
export const $id = (id) => document.getElementById(id);
|
||||
export const $qq = (sel) => document.querySelector(sel);
|
||||
|
|
|
|||
Loading…
Reference in New Issue