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

fix several ui issues

master
JFH 2021-09-04 19:32:22 +02:00
parent f67bc59d17
commit d4d933820e
12 changed files with 198 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/editor/EditorStartup.js
View File

@ -249,7 +249,7 @@ class EditorStartup {
});
$id('seg_type').addEventListener('change', (evt) => {
this.svgCanvas.setSegType(evt.currentTarget.value);
this.svgCanvas.setSegType(evt.detail.value);
});
const addListenerMulti = (element, eventNames, listener)=> {

2
src/editor/MainMenu.js
View File

@ -289,7 +289,7 @@ class MainMenu {
<se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item>
</se-menu>
`;
$id('tools_top').prepend(template.content.cloneNode(true));
this.editor.$svgEditor.append(template.content.cloneNode(true));
// register action to main menu entries
/**

2
src/editor/components/index.js
View File

@ -10,3 +10,5 @@ import './seMenuItem.js';
import './seList.js';
import './seListItem.js';
import './seColorPicker.js';
import './seSelect';

2
src/editor/components/seButton.js
View File

@ -10,7 +10,7 @@ template.innerHTML = `
{
height: 24px;
width: 24px;
margin: 2px 1px 4px;
margin: 4px 1px 4px;
padding: 3px;
background-color: var(--icon-bg-color);
cursor: pointer;

1
src/editor/components/seInput.js
View File

@ -23,6 +23,7 @@ template.innerHTML = `
elix-input {
background-color: var(--input-color);
border-radius: 3px;
height: 24px;
}
</style>
<div>

6
src/editor/components/seList.js
View File

@ -11,7 +11,11 @@ elix-dropdown-list:hover {
background-color: var(--icon-bg-color-hover);
}
::part(popup-toggle) {
elix-dropdown-list::part(value) {
background-color: var(--main-bg-color);
}
elix-dropdown-list::part(popup-toggle) {
display: none;
}
::slotted(*) {

149
src/editor/components/seSelect.js Normal file
View File

@ -0,0 +1,149 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
select {
margin-top: 8px;
background-color: var(--input-color);
appearance: none;
outline: none;
padding: 3px;
}
label {
margin-left: 2px;
}
::slotted(*) {
padding:0;
width:100%;
}
</style>
<label>Label</label>
<select>
</select>
`;
/**
* @class SeList
*/
export class SeSelect extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.append(template.content.cloneNode(true));
this.$select = this._shadowRoot.querySelector('select');
this.$label = this._shadowRoot.querySelector('label');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return [ 'label', 'width', 'height', 'options', 'values' ];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
let options;
if (oldValue === newValue) return;
switch (name) {
case 'label':
this.$label.textContent = newValue;
break;
case 'height':
this.$select.style.height = newValue;
break;
case 'width':
this.$select.style.width = newValue;
break;
case 'options':
options = newValue.split(',');
options.forEach((option) => {
const optionNode = document.createElement("OPTION");
const text = document.createTextNode(option);
optionNode.appendChild(text);
this.$select.appendChild(optionNode);
});
break;
case 'values':
options = newValue.split(' ');
options.forEach((option, index) => {
this.$select.children[index].setAttribute('value', option);
});
break;
default:
// eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`);
break;
}
}
/**
* @function get
* @returns {any}
*/
get label () {
return this.getAttribute('label');
}
/**
* @function set
* @returns {void}
*/
set label (value) {
this.setAttribute('label', value);
}
/**
* @function get
* @returns {any}
*/
get width () {
return this.getAttribute('width');
}
/**
* @function set
* @returns {void}
*/
set width (value) {
this.setAttribute('width', value);
}
/**
* @function get
* @returns {any}
*/
get height () {
return this.getAttribute('height');
}
/**
* @function set
* @returns {void}
*/
set height (value) {
this.setAttribute('height', value);
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
const currentObj = this;
this.$select.addEventListener('change', () => {
const value = this.$select.value;
const closeEvent = new CustomEvent('change', { detail: { value } });
currentObj.dispatchEvent(closeEvent);
currentObj.value = value;
});
}
}
// Register
customElements.define('se-select', SeSelect);

1
src/editor/components/seSpinInput.js
View File

@ -14,6 +14,7 @@ template.innerHTML = `
img {
position: relative;
right: -4px;
top: 2px;
}
span {
bottom: -0.5em;

11
src/editor/panels/BottomPanel.js
View File

@ -186,13 +186,10 @@ class BottomPanel {
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
</se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
<se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
<se-list-item value="none">&#8212;</se-list-item>
<se-list-item value="2,2">...</se-list-item>
<se-list-item value="5,5">- -</se-list-item>
<se-list-item value="5,2,2,2">- .</se-list-item>
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list>
<se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
options="&#8212;,...,- -,- .,- .."
values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">
</se-select>
<se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
<se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
height="22px"></img></se-list-item>

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

@ -920,12 +920,13 @@ class TopPanel {
<se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button>
<se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button>
<se-list id="tool_align_relative" label="relative to:">
<se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
<se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_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>
<se-select id="tool_align_relative" label="relative to:"
options="${i18next.t('tools.selected_objects')},
${i18next.t('tools.largest_object')},
${i18next.t('tools.smallest_object')},
${i18next.t('tools.page')}"
values="selected largest smallest page"></se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
@ -976,16 +977,17 @@ class TopPanel {
<div class="text_panel">
<se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
<se-list id="tool_font_family" label="Font:">
<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-select id="tool_font_family" label="Font:"
options="${i18next.t('properties.serif')},
${i18next.t('properties.sans_serif')},
${i18next.t('properties.cursive')},
${i18next.t('properties.fantasy')},
${i18next.t('properties.monospace')},
${i18next.t('properties.courier')},
${i18next.t('properties.helvetica')},
${i18next.t('properties.times')} "
>
</select>
<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>
@ -1025,10 +1027,11 @@ class TopPanel {
</se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:">
</se-spin-input>
<select id="seg_type" title="${i18next.t('tools.seg_type')}">
<option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
<option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
</select>
<se-select id="seg_type" title="${i18next.t('tools.seg_type')}" label=""
options="${i18next.t('properties.straight_segments')}, ${i18next.t('properties.curve_segments')}"
values="4 6"
>
</se-select>
<se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg">

22
src/editor/svgedit.css
View File

@ -18,12 +18,12 @@
.svg_editor {
display: grid;
grid-template-rows: auto 15px 1fr 40px;
grid-template-columns: 34px 15px 1fr 15px;
grid-template-columns: 34px 15px 50px 1fr 15px;
grid-template-areas:
"top top top top"
"left corner rulerX side"
"left rulerY workarea side"
"left bottom bottom bottom";
"main main main top top"
"left corner rulerX rulerX side"
"left rulerY workarea workarea side"
"left bottom bottom bottom bottom";
font-size: 8pt;
background: var(--main-bg-color);
font-family: Verdana, Helvetica, Arial;
@ -33,12 +33,7 @@
height: 100%;
}
.svg_editor.open {
grid-template-columns: 34px 15px 1fr 150px;
}
/* on smaller screen, allow 2 lines for the toolbar */
@media screen and (max-width:1250px) {
.svg_editor {
grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
@ -186,6 +181,7 @@ hr {
—————————————————————————————*/
#main_button {
grid-area: main;
color: #fff;
border-radius: 3px;
padding-block: 2px;
@ -299,8 +295,7 @@ hr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* leave space for the main menu */
position: relative;
align-items: flex-start;
background-color: var(--main-bg-color);
}
@ -325,11 +320,12 @@ hr {
width: 3px;
}
#tools_bottom se-list {
#tools_bottom se-list, #tools_bottom se-select {
margin-bottom: 8px;
}
/*—————————————————————————————*/
#tools_left {

2
src/svgcanvas/path-actions.js
View File

@ -1179,7 +1179,7 @@ export const pathActionsMethod = (function () {
* @returns {void}
*/
setSegType (v) {
path.setSegType(v);
path?.setSegType(v);
},
/**
* @param {string} attr