github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make top panel more flexible

Browse Source
This commit is contained in:
JFH
2021-08-16 14:19:56 +02:00
parent 945569cfab
commit c3c8429312
4 changed files with 117 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/editor/Editor.js
View File

@@ -337,34 +337,6 @@ class Editor extends EditorStartup {
}); });
} }
/**
* @param {boolean} editmode
* @param {module:svgcanvas.SvgCanvas#event:selected} elems
* @returns {void}
*/
togglePathEditMode(editMode, elems) {
const { imgPath } = this.configObj.curConfig;
if (editMode) {
$id('path_node_panel').style.removeProperty('display');
} else {
$id('path_node_panel').style.display = 'none';
}
if (editMode) {
// Change select icon
$id('tool_path').pressed = false;
$id('tool_select').pressed = true;
$id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
this.multiselected = false;
if (elems.length) {
this.selectedElement = elems[0];
}
} else {
setTimeout(() => {
$id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
}, 1000);
}
}
/** /**
* @param {external:Window} win * @param {external:Window} win
* @param {module:svgcanvas.SvgCanvas#event:exported} data * @param {module:svgcanvas.SvgCanvas#event:exported} data
@@ -549,7 +521,7 @@ class Editor extends EditorStartup {
} // if (!isNullish(elem)) } // if (!isNullish(elem))
// Deal with pathedit mode // Deal with pathedit mode
this.togglePathEditMode(isNode, elems); this.topPanel.togglePathEditMode(isNode, elems);
this.topPanel.updateContextPanel(); this.topPanel.updateContextPanel();
this.svgCanvas.runExtensions('selectedChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} */ { this.svgCanvas.runExtensions('selectedChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} */ {
elems, elems,

9
src/editor/EditorStartup.js
View File

@@ -252,12 +252,9 @@ class EditorStartup {
this.svgCanvas.setSegType(evt.currentTarget.value); this.svgCanvas.setSegType(evt.currentTarget.value);
}); });
function addListenerMulti(element, eventNames, listener) { const addListenerMulti = (element, eventNames, listener)=> {
const events = eventNames.split(' '); eventNames.split(' ').forEach((eventName)=> element.addEventListener(eventName, listener, false));
for (let i=0, iLen=events.length; i<iLen; i++) { };
element.addEventListener(events[i], listener, false);
}
}
addListenerMulti($id('text'), 'keyup input', (evt) => { addListenerMulti($id('text'), 'keyup input', (evt) => {
this.svgCanvas.setTextContent(evt.currentTarget.value); this.svgCanvas.setTextContent(evt.currentTarget.value);

215
src/editor/panels/TopPanel.js
View File

@@ -3,7 +3,7 @@
import SvgCanvas from "../../svgcanvas/svgcanvas.js"; import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js"; import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
const { $id, isNullish } = SvgCanvas; const { $qa, $id } = SvgCanvas;
/* /*
* register actions for left panel * register actions for left panel
@@ -21,15 +21,15 @@ class TopPanel {
/** /**
* @type {module} * @type {module}
*/ */
displayTool(id) { displayTool(className) {
// default display is 'none' so removing the property will make the panel visible // default display is 'none' so removing the property will make the panel visible
$id(id).style.removeProperty('display'); $qa(`.${className}`).map( (el) => el.style.removeProperty('display'));
} }
/** /**
* @type {module} * @type {module}
*/ */
hideTool(id) { hideTool(className) {
$id(id).style.display = 'none'; $qa(`.${className}`).map( (el) => el.style.display = 'none');
} }
/** /**
* @type {module} * @type {module}
@@ -81,7 +81,7 @@ class TopPanel {
*/ */
update() { update() {
let i; let len; let i; let len;
if (!isNullish(this.selectedElement)) { if (this.selectedElement) {
switch (this.selectedElement.tagName) { switch (this.selectedElement.tagName) {
case "use": case "use":
case "image": case "image":
@@ -129,7 +129,7 @@ class TopPanel {
} }
// All elements including image and group have opacity // All elements including image and group have opacity
if (!isNullish(this.selectedElement)) { if (this.selectedElement) {
const opacPerc = const opacPerc =
(this.selectedElement.getAttribute("opacity") || 1.0) * 100; (this.selectedElement.getAttribute("opacity") || 1.0) * 100;
$id("opacity").value = opacPerc; $id("opacity").value = opacPerc;
@@ -165,7 +165,7 @@ class TopPanel {
updateContextPanel() { updateContextPanel() {
let elem = this.editor.selectedElement; let elem = this.editor.selectedElement;
// If element has just been deleted, consider it null // If element has just been deleted, consider it null
if (!isNullish(elem) && !elem.parentNode) { if (!elem?.parentNode) {
elem = null; elem = null;
} }
const currentLayerName = this.editor.svgCanvas const currentLayerName = this.editor.svgCanvas
@@ -616,7 +616,7 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
convertToPath() { convertToPath() {
if (!isNullish(this.editor.selectedElement)) { if (this.editor.selectedElement) {
this.editor.svgCanvas.convertToPath(); this.editor.svgCanvas.convertToPath();
} }
} }
@@ -625,7 +625,7 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
reorientPath() { reorientPath() {
if (!isNullish(this.editor.selectedElement)) { if (this.editor.selectedElement) {
this.path.reorient(); this.path.reorient();
} }
} }
@@ -634,7 +634,7 @@ class TopPanel {
* @returns {void} Resolves to `undefined` * @returns {void} Resolves to `undefined`
*/ */
makeHyperlink() { makeHyperlink() {
if (!isNullish(this.editor.selectedElement) || this.multiselected) { if (this.editor.selectedElement || this.multiselected) {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
const url = prompt( const url = prompt(
this.editor.i18next.t('notification.enterNewLinkURL'), this.editor.i18next.t('notification.enterNewLinkURL'),
@@ -700,7 +700,7 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
deleteSelected() { deleteSelected() {
if (!isNullish(this.editor.selectedElement) || this.editor.multiselected) { if (this.editor.selectedElement || this.editor.multiselected) {
this.editor.svgCanvas.deleteSelectedElements(); this.editor.svgCanvas.deleteSelectedElements();
} }
} }
@@ -709,7 +709,7 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
moveToTopSelected() { moveToTopSelected() {
if (!isNullish(this.editor.selectedElement)) { if (this.editor.selectedElement) {
this.editor.svgCanvas.moveToTopSelectedElement(); this.editor.svgCanvas.moveToTopSelectedElement();
} }
} }
@@ -719,7 +719,7 @@ class TopPanel {
* @returns {void} * @returns {void}
*/ */
moveToBottomSelected() { moveToBottomSelected() {
if (!isNullish(this.editor.selectedElement)) { if (this.editor.selectedElement) {
this.editor.svgCanvas.moveToBottomSelectedElement(); this.editor.svgCanvas.moveToBottomSelectedElement();
} }
} }
@@ -789,6 +789,33 @@ class TopPanel {
this.displayTool("image_url"); this.displayTool("image_url");
} }
} }
/**
* @param {boolean} editmode
* @param {module:svgcanvas.SvgCanvas#event:selected} elems
* @returns {void}
*/
togglePathEditMode(editMode, elems) {
const { imgPath } = this.editor.configObj.curConfig;
if (editMode) {
this.displayTool('path_node_panel');
} else {
this.hideTool('path_node_panel');
}
if (editMode) {
// Change select icon
$id('tool_path').pressed = false;
$id('tool_select').pressed = true;
$id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
this.editor.multiselected = false;
if (elems.length) {
this.editor.selectedElement = elems[0];
}
} else {
setTimeout(() => {
$id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
}, 1000);
}
}
/** /**
* @type {module} * @type {module}
@@ -822,32 +849,28 @@ class TopPanel {
<se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button> <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
</div> <!-- history_panel --> </div> <!-- history_panel -->
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->
<div id="selected_panel"> <div class="selected_panel">
<div class="toolset"> <div class="tool_sep"></div>
<div class="tool_sep"></div> <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button> <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"></se-button>
<se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg"> </div>
</se-button> <div class="selected_panel">
</div> <div class="tool_sep"></div>
<div class="toolset"> <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"></se-button>
<div class="tool_sep"></div> <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"></se-button>
<se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg"> </div>
</se-button> <div class="selected_panel">
<se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg"> <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button>
</se-button> <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button>
</div> <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
<div class="toolset"> </div>
<se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button> <div class="selected_panel">
<se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button> <div class="tool_sep"></div>
<se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button> <se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input>
</div> </div>
<div class="toolset"> <div class="selected_panel">
<div class="tool_sep"></div> <se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
<se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input> <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
</div>
<div class="toolset">
<se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
title="${i18next.t('properties.angle')}"></se-spin-input> title="${i18next.t('properties.angle')}"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg" <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
title="${i18next.t('properties.blur')}"></se-spin-input> title="${i18next.t('properties.blur')}"></se-spin-input>
@@ -871,21 +894,21 @@ class TopPanel {
<img title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg" height="22px"> <img title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg" height="22px">
</se-list-item> </se-list-item>
</se-list> </se-list>
</div>
</div> <div id="xy_panel" class="selected_panel">
<div id="xy_panel" class="toolset"> <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}"> </se-spin-input>
</se-spin-input> <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}">
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}"> </se-spin-input>
</se-spin-input> </div>
</div>
</div> <!-- selected_panel -->
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel"> <div class="multiselected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button> <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button>
<se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" <se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
src="${imgPath}/delete.svg"></se-button> src="${imgPath}/delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg"> <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg">
</se-button> </se-button>
@@ -902,54 +925,44 @@ class TopPanel {
<se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item> <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
<se-list-item id="page" value="page">${i18next.t('tools.page')}</se-list-item> <se-list-item id="page" value="page">${i18next.t('tools.page')}</se-list-item>
</se-list> </se-list>
<div class="tool_sep"></div>
</div> <!-- multiselected_panel --> </div> <!-- multiselected_panel -->
<div id="rect_panel"> <div class="rect_panel">
<div class="toolset">
<se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}"> <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
</se-spin-input> </se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}"> <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}">
</se-spin-input> </se-spin-input>
</div>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}" <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input> data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel --> </div> <!-- rect_panel -->
<div id="image_panel"> <div class="image_panel">
<div class="toolset">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}"> <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}">
</se-spin-input> </se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h" <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
title="${i18next.t('properties.image_height')}"></se-spin-input> title="${i18next.t('properties.image_height')}"></se-spin-input>
</div> </div>
<div class="toolset"> <div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input>
</div> </div>
</div> <!-- image_panel --> <div class="circle_panel">
<div id="circle_panel">
<div class="toolset">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input> <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input> <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input>
</div> </div>
<div class="toolset"> <div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input> <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
</div> </div>
</div> <!-- circle_panel --> <div class="ellipse_panel">
<div id="ellipse_panel">
<div class="toolset">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx"> <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy"> <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy">
</se-spin-input> </se-spin-input>
</div> </div>
<div class="toolset"> <div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx"> <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx">
</se-spin-input> </se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry"> <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry">
</se-spin-input> </se-spin-input>
</div> </div>
</div> <!-- ellipse_panel --> <div class="line_panel">
<div id="line_panel">
<div class="toolset">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1"> <se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1">
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1"> <se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1">
@@ -958,53 +971,51 @@ class TopPanel {
</se-spin-input> </se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2"> <se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2">
</se-spin-input> </se-spin-input>
</div> </div>
</div> <!-- line_panel --> <div class="text_panel">
<div id="text_panel"> <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
<div class="toolset"> <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
<se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button> <se-list id="tool_font_family" label="Font:">
<se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button> <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
<se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
<se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
<se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
<se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
<se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
<se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
<se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
</se-list>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
src="${imgPath}/fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button> <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button> <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button> <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button>
<se-list id="tool_font_family" label="Font:"> </div>
<se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item> <!-- Not visible, but still used -->
<se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item> <input id="text" type="text" size="35" />
<se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item> <div class="container_panel">
<se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
<se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
<se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
<se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
<se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
</se-list>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
src="${imgPath}/fontsize.svg"></se-spin-input>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
</div> <!-- text_panel -->
<!-- formerly gsvg_panel -->
<div id="container_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input> <se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input>
</div> <!-- container_panel --> </div> <!-- container_panel -->
<div id="use_panel"> <div class="use_panel">
<se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}" <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
src="${imgPath}/unlink_use.svg"> src="${imgPath}/unlink_use.svg">
</se-button> </se-button>
</div> <!-- use_panel --> </div> <!-- use_panel -->
<div id="g_panel"> <div class="g_panel">
<se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg"> <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg">
</se-button> </se-button>
</div> <!-- g_panel --> </div> <!-- g_panel -->
<!-- For anchor elements --> <!-- For anchor elements -->
<div id="a_panel"> <div class="a_panel">
<label id="tool_link_url" title="${i18next.t('tools.set_link_url')}"> <label id="tool_link_url" title="${i18next.t('tools.set_link_url')}">
<span id="linkLabel" class="icon_label"></span> <span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" /> <input id="link_url" type="text" size="35" />
</label> </label>
</div> <!-- a_panel --> </div> <!-- a_panel -->
<div id="path_node_panel"> <div class="path_node_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed> <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed>
</se-button> </se-button>

9
src/editor/svgedit.css
View File

@@ -359,10 +359,6 @@ hr {
float: left; float: left;
} }
#multiselected_panel .selected_tool {
vertical-align: 12px;
}
#cur_context_panel { #cur_context_panel {
position: absolute; position: absolute;
top: 57px; top: 57px;
@@ -386,11 +382,6 @@ hr {
text-decoration: underline; text-decoration: underline;
} }
.toolset {
display: flex;
flex-direction: row;
}
input[type=text] { input[type=text] {
padding: 2px; padding: 2px;
} }