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

Merge pull request #33 from OptimistikSAS/issue-fix 

Issue fix
master
JFH 2021-01-05 21:08:02 +01:00 committed by GitHub
parent 4e9b4b6f8d f351c37910
commit 1986cfaaf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 74 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/EditorStartup.js
View File

@ -220,8 +220,8 @@ class EditorStartup {
}
});
$('#font_family').change((evt) => {
this.svgCanvas.setFontFamily(evt.currentTarget.value);
$('#tool_font_family').change((evt) => {
this.svgCanvas.setFontFamily(evt.originalEvent.detail.value);
});
$('#seg_type').change((evt) => {

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

@ -83,11 +83,13 @@ export class SeList extends HTMLElement {
* @returns {void}
*/
connectedCallback () {
this.$dropdown.addEventListener('change', (e) => {
const currentObj = this;
this.$dropdown.addEventListener('selectedindexchange', (e) => {
e.preventDefault();
const selectedItem = e?.detail?.closeResult;
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
document.getElementById(selectedItem.id).click();
if (e?.detail?.selectedIndex !== undefined) {
const value = this.$dropdown.selectedItem.getAttribute('value');
const closeEvent = new CustomEvent('change', {detail: {value}});
currentObj.dispatchEvent(closeEvent);
}
});
}

5
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -1,3 +1,4 @@
/* globals seConfirm */
/**
* @file ext-imagelib.js
*
@ -181,11 +182,11 @@ export default {
const message = uiStrings.notification.retrieving.replace('%s', name);
if (mode !== 'm') {
await $.process_cancel(message);
await seConfirm(message);
transferStopped = true;
// Should a message be sent back to the frame?
$('#dialog_box').hide();
// $('#dialog_box').hide();
} else {
entry = $('<div>').text(message).data('id', curMeta.id);
preview.append(entry);

42
src/editor/index.html
View File

@ -127,18 +127,26 @@
title="Change rotation angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
title="Change gaussian blur value"></se-spin-input>
<se-list>
<se-list-item id="tool_posleft">Align Left</se-list-item>
<se-list-item id="tool_poscenter">Align Center</se-list-item>
<se-list-item id="tool_posright">Align Right</se-list-item>
<se-list-item id="tool_postop">Align Top</se-list-item>
<se-list-item id="tool_posmiddle">Align Middle</se-list-item>
<se-list-item id="tool_posbottom">Align Bottom</se-list-item>
<se-list id="tool_position" title="Align Element to Page" label="">
<se-list-item id="tool_posleft" value="l">
<img title="align left" src="./images/align_left.svg" height="22px">
</se-list-item>
<se-list-item id="tool_poscenter" value="c">
<img title="align center" src="./images/align_center.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posright" value="r">
<img title="align right" src="./images/align_right.svg" height="22px">
</se-list-item>
<se-list-item id="tool_postop" value="t">
<img title="align top" src="./images/align_top.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m">
<img title="align middle" src="./images/align_middle.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posbottom" value="b">
<img title="align bottom" src="./images/align_bottom.svg" height="22px">
</se-list-item>
</se-list>
<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
<div id="cur_position" class="icon_label"></div>
<button></button>
</div>
<div id="xy_panel" class="toolset">
<se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
</se-spin-input>
@ -348,14 +356,14 @@
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list>
<se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
<se-list-item id="linejoin_miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="Linecap: Butt" label="">
<se-list-item id="linecap_butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity" src="./images/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>

2
src/editor/panels/BottomPanelHandlers.js
View File

@ -142,7 +142,7 @@ class BottomPanelHandlers {
* @type {module}
*/
handleStrokeAttr (type, evt) {
this.svgCanvas.setStrokeAttr(type, evt.currentTarget.value);
this.svgCanvas.setStrokeAttr(type, evt.detail.value);
}
/**
* @type {module}

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

@ -210,7 +210,7 @@ class TopPanelHandlers {
$('#tool_font_size').css('display', 'inline');
$id('tool_italic').pressed = this.svgCanvas.getItalic();
$id('tool_bold').pressed = this.svgCanvas.getBold();
$('#font_family').val(elem.getAttribute('font-family'));
$('#tool_font_family').val(elem.getAttribute('font-family'));
$('#font_size').val(elem.getAttribute('font-size'));
$('#text').val(elem.textContent);
const textAnchorStart = $id('tool_text_anchor_start');
@ -385,6 +385,14 @@ class TopPanelHandlers {
this.svgCanvas.cloneSelectedElements(20, 20);
}
/**
* @param {PlainObject} evt
* @returns {void}
*/
clickAlignEle (evt) {
this.svgCanvas.alignSelectedElements(evt.detail.value, 'page');
}
/**
* @param {string} pos indicate the alignment relative to top, bottom, middle etc..
* @returns {void}
@ -598,6 +606,7 @@ class TopPanelHandlers {
$id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this));
$id('tool_reorient').addEventListener('click', this.reorientPath.bind(this));
$id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this));
$id('tool_position').addEventListener('change', (evt) => this.clickAlignEle.bind(this)(evt));
$id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left'));
$id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right'));
$id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'));

28
src/editor/svgedit.css
View File

@ -388,7 +388,7 @@ hr {
top: 2px;
min-height: 40px;
border-bottom: none;
overflow: scroll;
overflow: auto;
}
#tools_top .tool_sep {
@ -429,6 +429,7 @@ hr {
#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
display: none;
float: left;
}
#editor_panel, #history_panel {
@ -1021,3 +1022,28 @@ elix-alert-dialog::part(frame) {
font-size: 0.8em;
font-family: Verdana,Helvetica,sans-serif;
}
@media screen and (max-width: 1250px) {
#tools_top {
height: 71px;
}
#workarea, #sidepanels {
top: 70px;
}
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y {
top: 86px;
}
#cur_context_panel {
top: 87px;
}
#selected_panel {
clear: right;
}
}