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

Merge branch 'V7-preview' into storageDialog

master
JFH 2020-12-30 10:01:24 +01:00 committed by GitHub
parent f71a3fb6d9 5420090866
commit 5d832073f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 386 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,12 @@
import './seButton.js';
import './seFlyingButton.js';
import './seExplorerButton.js';
import './seDropdown.js';
import './seZoom.js';
import './seInput.js';
import './seSpinInput.js';
import './sePalette.js';
import './seMenu.js';
import './seMenuItem.js';
import './seList.js';
import './seListItem.js';
import './seColorPicker.js';

87
src/editor/components/seList.js Normal file
View File

@ -0,0 +1,87 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/DropdownList.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
</style>
<label>Label</label>
<elix-dropdown-list>
<slot></slot>
</elix-dropdown-list>
`;
/**
* @class SeList
*/
export class SeList extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list');
this.$label = this._shadowRoot.querySelector('label');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['label'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
switch (name) {
case 'label':
this.$label.textContent = newValue;
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 connectedCallback
* @returns {void}
*/
connectedCallback () {
this.$dropdown.addEventListener('change', (e) => {
e.preventDefault();
const selectedItem = e?.detail?.closeResult;
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
document.getElementById(selectedItem.id).click();
}
});
}
}
// Register
customElements.define('se-list', SeList);

71
src/editor/components/seListItem.js Normal file
View File

@ -0,0 +1,71 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Option.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
</style>
<elix-option aria-label="option">
<slot></slot>
</elix-option>
`;
/**
* @class SeMenu
*/
export class SeListItem extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['option'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
switch (name) {
case 'option':
this.$menuitem.setAttribute('option', newValue);
break;
default:
// eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`);
break;
}
}
/**
* @function get
* @returns {any}
*/
get option () {
return this.getAttribute('option');
}
/**
* @function set
* @returns {void}
*/
set option (value) {
this.setAttribute('option', value);
}
}
// Register
customElements.define('se-list-item', SeListItem);

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

@ -1,6 +1,5 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/MenuButton.js';
import 'elix/define/MenuItem.js';
const template = document.createElement('template');
template.innerHTML = `

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

@ -1,5 +1,4 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Menu.js';
import 'elix/define/MenuItem.js';
const template = document.createElement('template');

4
src/editor/components/seDropdown.js → src/editor/components/seZoom.js
View File

@ -8,7 +8,7 @@ import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
/**
* @class Dropdown
*/
class Dropdown extends ListComboBox {
class Zoom extends ListComboBox {
/**
* @function get
* @returns {PlainObject}
@ -157,7 +157,7 @@ class Dropdown extends ListComboBox {
}
// Register
customElements.define('se-dropdown', Dropdown);
customElements.define('se-zoom', Zoom);
/*
{TODO

1
src/editor/dialogs/index.js
View File

@ -5,5 +5,6 @@ import './cmenuDialog.js';
import './cmenuLayersDialog.js';
import './seSelectDialog.js';
import './seConfirmDialog.js';
import './sePromptDialog.js';
import './seAlertDialog.js';
import './storageDialog.js';

62
src/editor/dialogs/seAlertDialog.js
View File

@ -1,59 +1,11 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
/**
* @class SeAlertDialog
*/
export class SeAlertDialog extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog();
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['title'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
switch (name) {
case 'title':
this.dialog.textContent = newValue;
this.dialog.open();
break;
default:
console.error('unkonw attr for:', name, 'newValue =', newValue);
break;
}
}
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
}
const dialog = new AlertDialog();
const seAlert = (type, text) => {
dialog.textContent = text;
dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel'];
dialog.open();
};
// Register
customElements.define('se-alert-dialog', SeAlertDialog);
window.seAlert = seAlert;

83
src/editor/dialogs/sePromptDialog.js Normal file
View File

@ -0,0 +1,83 @@
// eslint-disable-next-line node/no-unpublished-import
import AlertDialog from 'elix/define/AlertDialog.js';
/**
* @class SePromptDialog
*/
export class SePromptDialog extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this.dialog = new AlertDialog();
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'close'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
switch (name) {
case 'title':
if (this.dialog.opened) {
this.dialog.close();
}
this.dialog.textContent = newValue;
this.dialog.choices = ['Cancel'];
this.dialog.open();
break;
case 'close':
if (this.dialog.opened) {
this.dialog.close();
}
break;
default:
console.error('unkonw attr for:', name, 'newValue =', newValue);
break;
}
}
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title');
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value);
}
/**
* @function get
* @returns {any}
*/
get close () {
return this.getAttribute('close');
}
/**
* @function set
* @returns {void}
*/
set close (value) {
this.setAttribute('close', value);
}
}
// Register
customElements.define('se-prompt-dialog', SePromptDialog);

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

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

4
src/editor/extensions/ext-imagelib/index.js
View File

@ -1,4 +1,4 @@
/* globals jQuery */
/* globals jQuery seAlert */
const $ = jQuery;
$('a').click(function () {
const {href} = this;
@ -32,7 +32,7 @@ $('a').click(function () {
data = canvas.toDataURL();
} catch (err) {
// This fails in Firefox with `file:///` URLs :(
document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
seAlert('alert', 'Data URL conversion failed: ' + err);
data = '';
}
post({href, data});

3
src/editor/extensions/ext-imagelib/openclipart.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
// eslint-disable-next-line node/no-unpublished-import
import {jml, body, nbsp} from 'jamilih';
// eslint-disable-next-line node/no-unpublished-import
@ -39,7 +40,7 @@ async function processResults (url) {
// console.log('json', json);
if (!json || json.msg !== 'success') {
document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
seAlert('alert', 'There was a problem downloading the results');
return;
}
const {payload, info: {

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

@ -1,4 +1,4 @@
/* globals MathJax */
/* globals MathJax seAlert */
/**
* @file ext-mathjax.js
*
@ -202,8 +202,7 @@ export default {
});
} catch (e) {
console.log('Failed loading MathJax.'); // eslint-disable-line no-console
// eslint-disable-next-line max-len
document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
seAlert('alert', 'Failed loading MathJax. You will not be able to change the mathematics.');
}
}
}

3
src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
/**
* @file ext-server_moinsave.js
*
@ -64,7 +65,7 @@ export default {
<input type="hidden" name="contenttype" value="application/x-svgdraw">
`).appendTo('body')
.submit().remove();
document.getElementById('se-alert-dialog').title = strings.saved;
seAlert('alert', strings.saved);
top.window.location = '/' + name;
}
});

4
src/editor/extensions/ext-server_opensave/ext-server_opensave.js
View File

@ -1,3 +1,4 @@
/* globals seConfirm */
/**
* @file ext-server_opensave.js
*
@ -245,9 +246,8 @@ export default {
form.submit();
rebuildInput(form);
await $.process_cancel(strings.uploading);
await seConfirm(strings.uploading, ['Cancel']);
cancelled = true;
$('#dialog_box').hide();
}
if (form[0] === openSvgForm[0]) {

3
src/editor/extensions/ext-webappfind/ext-webappfind.js
View File

@ -1,3 +1,4 @@
/* globals seAlert */
/**
* Depends on Firefox add-on and executables from
* {@link https://github.com/brettz9/webappfind}.
@ -63,7 +64,7 @@ export default {
} */
break;
case 'save-end':
document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
seAlert('alert', `save complete for pathID ${pathID}!`);
break;
default:
throw new Error('Unexpected WebAppFind event type');

0
src/editor/images/linejoin_mitter.svg → src/editor/images/linejoin_miter.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 839 B

After

Width:  |  Height:  |  Size: 839 B

199
src/editor/index.html
View File

@ -127,15 +127,23 @@
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>
<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-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
</se-input>
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
</se-input>
<se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
</se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
</se-spin-input>
</div>
</div> <!-- selected_panel -->
<!-- Buttons when multiple elements are selected -->
@ -154,33 +162,30 @@
<se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
<se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
<label id="tool_align_relative">
<span id="relativeToLabel">relative to:</span>
<select id="align_relative_to" title="Align relative to ...">
<option id="selected_objects" value="selected">selected objects</option>
<option id="largest_object" value="largest">largest object</option>
<option id="smallest_object" value="smallest">smallest object</option>
<option id="page" value="page">page</option>
</select>
</label>
<se-list id="tool_align_relative" label="relative to:">
<se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
<se-list-item id="largest_object" value="largest">largest object</se-list-item>
<se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
<se-list-item id="page" value="page">page</se-list-item>
</se-list>
<div class="tool_sep"></div>
</div> <!-- multiselected_panel -->
<div id="rect_panel">
<div class="toolset">
<se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
title="Change rectangle width"></se-input>
<se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
title="Change rectangle height"></se-input>
<se-spin-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
title="Change rectangle width"></se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
title="Change rectangle height"></se-spin-input>
</div>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div id="image_panel">
<div class="toolset">
<se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
title="Change image width"></se-input>
<se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
title="Change image height"></se-input>
<se-spin-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
title="Change image width"></se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
title="Change image height"></se-spin-input>
</div>
<div class="toolset">
<label id="tool_image_url">url:
@ -195,37 +200,35 @@
</div> <!-- image_panel -->
<div id="circle_panel">
<div class="toolset">
<se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
<se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-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>
</div>
<div class="toolset">
<se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
<se-spin-input id="circle_r" data-attr="r" size="4" label="r:"></se-spin-input>
</div>
</div> <!-- circle_panel -->
<div id="ellipse_panel">
<div class="toolset">
<se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
</se-input>
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
</se-input>
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
</se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
</se-spin-input>
</div>
<div class="toolset">
<se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
<se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-spin-input>
</div>
</div> <!-- ellipse_panel -->
<div id="line_panel">
<div class="toolset">
<se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
</se-input>
<se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
</se-input>
</div>
<div class="toolset">
<se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
</se-input>
<se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
</se-input>
<se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
</se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
</se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
</se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
</se-spin-input>
</div>
</div> <!-- line_panel -->
<div id="text_panel">
@ -236,25 +239,16 @@
<se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
</div>
<div class="toolset" id="tool_font_family">
<label>
<!-- Font family -->
<input id="font_family" type="text" title="Change Font Family" size="12" />
</label>
<div id="font_family_dropdown" class="dropdown">
<button></button>
<ul>
<li style="font-family:serif">Serif</li>
<li style="font-family:sans-serif">Sans-serif</li>
<li style="font-family:cursive">Cursive</li>
<li style="font-family:fantasy">Fantasy</li>
<li style="font-family:monospace">Monospace</li>
<li style="font-family:courier">Courier</li>
<li style="font-family:helvetica">Helvetica</li>
<li style="font-family:times">Times</li>
</ul>
</div>
</div>
<se-list id="tool_font_family" label="Font:">
<se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
<se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
<se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
<se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
<se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
<se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
<se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
<se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item>
</se-list>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
src="./images/fontsize.svg"></se-spin-input>
<!-- Not visible, but still used -->
@ -286,8 +280,8 @@
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed></se-button>
<div class="tool_sep"></div>
<se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
<se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-spin-input>
<select id="seg_type" title="Change Segment type">
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
@ -332,7 +326,7 @@
</div> <!-- tools_left -->
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
<se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div>
<div value="400">400</div>
<div value="200">200</div>
@ -343,66 +337,37 @@
<div value="selection">Fit to selection</div>
<div value="layer">Fit to layer content</div>
<div value="content">Fit to all content</div>
</se-dropdown>
</se-zoom>
<se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
<label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&#8212;</option>
<option value="2,2">...</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">- .</option>
<option value="5,2,2,2,2,2">- ..</option>
</select>
</label>
<div class="stroke_tool dropdown" id="stroke_linejoin">
<div id="cur_linejoin" title="Linejoin: Miter"></div>
<button></button>
</div>
<div class="stroke_tool dropdown" id="stroke_linecap">
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
<div id="tool_opacity">
<se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
<li>0%</li>
<li>25%</li>
<li>50%</li>
<li>75%</li>
<li>100%</li>
<li class="special">
<div id="opac_slider"></div>
</li>
</ul>
</div>
</div> <!-- tool_opacity -->
<se-list id="stroke_style" title="Change stroke dash style" label="">
<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-list id="stroke_linejoin" title="Linejoin: Miter" label="">
<se-list-item id="linejoin_miter"><se-button size="small" title="Linejoin: Miter" src="./images/linejoin_miter.svg"></se-button></se-list-item>
<se-list-item id="linejoin_round"><se-button size="small" title="Linejoin: Round" src="./images/linejoin_round.svg"></se-button></se-list-item>
<se-list-item id="linejoin_bevel"><se-button size="small" title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"></se-button></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="Linecap: Butt" label="">
<se-list-item id="linecap_butt"><se-button size="small" title="Linecap: Butt" src="./images/linecap_butt.svg"></se-button></se-list-item>
<se-list-item id="linecap_square"><se-button size="small" title="Linecap: Square" src="./images/linecap_square.svg"></se-button></se-list-item>
<se-list-item id="linecap_round"><se-button size="small" title="Linecap: Round" src="./images/linecap_round.svg"></se-button></se-list-item>
</se-list>
<se-list id="opacity_dropdown" label="">
<se-list-item>0%</se-list-item>
<se-list-item>25%</se-list-item>
<se-list-item>50%</se-list-item>
<se-list-item>75%</se-list-item>
<se-list-item>100%</se-list-item>
</se-list>
<se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
<se-palette id="palette"></se-palette>
</div> <!-- tools_bottom -->
<div id="option_lists" class="dropdown">
<ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
</ul>
<ul id="linecap_opts">
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
</ul>
<ul id="position_opts" class="optcols3">
<li class="push_button" id="tool_posleft" title="Align Left"></li>
<li class="push_button" id="tool_poscenter" title="Align Center"></li>
<li class="push_button" id="tool_posright" title="Align Right"></li>
<li class="push_button" id="tool_postop" title="Align Top"></li>
<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
</ul>
</div>
</div>
<div id="dialog_box">
<div class="overlay"></div>
<div id="dialog_container">

8
src/editor/panels/LayersPanel.js
View File

@ -1,5 +1,5 @@
/* eslint-disable no-alert */
/* globals $ */
/* globals $ seAlert */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
const SIDEPANEL_MAXWIDTH = 300;
@ -156,7 +156,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
seAlert('alert', this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.createLayer(newName);
@ -190,7 +190,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName;
seAlert('alert', this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.cloneLayer(newName);
@ -235,7 +235,7 @@ class LayersPanel {
const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
if (!newName) { return; }
if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
seAlert('alert', this.uiStrings.notification.layerHasThatName);
return;
}
this.svgCanvas.renameCurrentLayer(newName);

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

@ -1,4 +1,4 @@
/* globals $ */
/* globals $ seAlert */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js';
@ -403,20 +403,20 @@ class TopPanelHandlers {
if (!valid) {
e.target.value = this.selectedElement().getAttribute(attr);
document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
seAlert('alert', this.uiStrings.notification.invalidAttrValGiven);
return false;
}
if (attr !== 'id' && attr !== 'class') {
if (isNaN(val)) {
val = this.svgCanvas.convertToNum(attr, val);
} else if (this.configObj.curConfig.baseUnit !== 'px') {
} else if (this.editor.configObj.curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
const unitData = getTypeMap();
if (this.selectedElement[attr] || this.svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
val *= unitData[this.configObj.curConfig.baseUnit];
val *= unitData[this.editor.configObj.curConfig.baseUnit];
}
}
}

45
src/editor/svgedit.css
View File

@ -379,25 +379,6 @@ hr {
/*—————————————————————————————*/
.tool_button:hover,
.push_button:hover,
.buttonup:hover,
.buttondown,
.tool_button_current,
.push_button_pressed
{
background-color: #ffc !important;
}
.tool_button_current,
.push_button_pressed,
.buttondown {
background-color: #f4e284 !important;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
-moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
}
#tools_top {
position: absolute;
left: 108px;
@ -405,7 +386,6 @@ hr {
top: 2px;
height: 40px;
border-bottom: none;
overflow: auto;
}
#tools_top .tool_sep {
@ -515,12 +495,6 @@ input[type=text] {
padding: 2px;
}
#tools_left .tool_button,
#tools_left .tool_button_current {
position: relative;
z-index: 11;
}
.dropdown {
position: relative;
}
@ -592,21 +566,6 @@ input[type=text] {
margin-right: 0;
}
.tool_button,
.push_button,
.tool_button_current,
.push_button_pressed
{
height: 24px;
width: 24px;
margin: 2px 2px 4px 2px;
padding: 3px;
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
cursor: pointer;
border-radius: 3px;
}
#main_menu li#tool_open, #main_menu li#tool_import {
position: relative;
overflow: hidden;
@ -683,10 +642,6 @@ input[type=text] {
float: right;
}
.dropdown li.tool_button {
width: 24px;
}
#stroke_expand {
width: 0;
overflow: hidden;

52
src/editor/svgedit.js
View File

@ -1,5 +1,5 @@
/* eslint-disable no-alert */
/* globals jQuery seSelect */
/* globals jQuery seSelect seAlert seConfirm */
/**
* The main module for the visual SVG Editor.
*
@ -230,6 +230,10 @@ editor.init = () => {
const storageBox = document.createElement('se-storage-dialog');
storageBox.setAttribute('id', 'se-storage-dialog');
document.body.append(storageBox);
// promptDialog added to DOM
const promptBox = document.createElement('se-prompt-dialog');
promptBox.setAttribute('id', 'se-prompt-dialog');
document.body.append(promptBox);
} catch (err) {}
editor.configObj.load();
@ -460,7 +464,7 @@ editor.init = () => {
editor.pref('save_notice_done', 'all');
}
if (done !== 'part') {
document.getElementById('se-alert-dialog').title = note;
seAlert('alert', note);
}
}
};
@ -477,7 +481,7 @@ editor.init = () => {
exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
if (!exportWindow || exportWindow.closed) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked;
seAlert('alert', uiStrings.notification.popupWindowBlocked);
return;
}
@ -793,7 +797,7 @@ editor.init = () => {
}
if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
}
};
@ -1296,7 +1300,7 @@ editor.init = () => {
// fired when user wants to move elements to another layer
let promptMoveLayerOnce = false;
$('#selLayerNames').change( async(evt) => {
$('#selLayerNames').change(async (evt) => {
const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
/**
@ -1314,7 +1318,7 @@ editor.init = () => {
if (promptMoveLayerOnce) {
moveToLayer(true);
} else {
const ok = await seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
const ok = await window.seConfirm(confirmStr, [uiStrings.common.ok, uiStrings.common.cancel]);
if (ok === uiStrings.common.cancel) {
return;
}
@ -1673,9 +1677,9 @@ editor.init = () => {
* @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
* @returns {void}
*/
const clickClear = async() => {
const clickClear = async () => {
const [x, y] = editor.configObj.curConfig.dimensions;
const cancel = await seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
const cancel = await window.seConfirm(uiStrings.notification.QwantToClear, [uiStrings.common.ok, uiStrings.common.cancel]);
if (cancel === uiStrings.common.cancel) {
return;
}
@ -1865,7 +1869,8 @@ editor.init = () => {
};
if (!svgCanvas.setSvgString(e.detail.value)) {
const resp = await seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
const resp =
await window.seConfirm(uiStrings.notification.QerrorsRevertToSource, [uiStrings.common.ok, uiStrings.common.cancel]);
if (resp === uiStrings.common.cancel) {
return;
}
@ -1906,17 +1911,16 @@ editor.init = () => {
const {title, w, h, save} = e.detail;
// set document title
svgCanvas.setDocumentTitle(title);
if (w !== 'fit' && !isValidUnit('width', w)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
seAlert('alert', uiStrings.notification.invalidAttrValGiven);
return false;
}
if (h !== 'fit' && !isValidUnit('height', h)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven;
seAlert('alert', uiStrings.notification.invalidAttrValGiven);
return false;
}
if (!svgCanvas.setResolution(w, h)) {
document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo;
seAlert('alert', uiStrings.notification.noContentToFitTo);
return false;
}
// Set image save option
@ -1963,7 +1967,6 @@ editor.init = () => {
* @returns {void} Resolves to `undefined`
*/
const cancelOverlays = async (e) => {
$('#dialog_box').hide();
const $editorDialog = document.getElementById('se-svg-editor-dialog');
const editingsource = $editorDialog.getAttribute('dialog') === 'open';
if (!editingsource && !docprops && !preferences) {
@ -1976,7 +1979,8 @@ editor.init = () => {
if (editingsource) {
const origSource = svgCanvas.getSvgString();
if (origSource !== e.detail.value) {
const resp = await seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
const resp =
await window.seConfirm(uiStrings.notification.QignoreSourceChanges, [uiStrings.common.ok, uiStrings.common.cancel]);
if (resp === uiStrings.common.ok) {
hideSourceEditor();
}
@ -2106,7 +2110,7 @@ editor.init = () => {
});
$('#url_notice').click(() => {
document.getElementById('se-alert-dialog').title = this.title;
seAlert('alert', this.title);
});
$('#stroke_width').val(editor.configObj.curConfig.initStroke.width);
@ -2577,13 +2581,13 @@ editor.init = () => {
* @returns {void}
*/
const importImage = function (e) {
$.process_cancel(uiStrings.notification.loadingImage);
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
e.stopPropagation();
e.preventDefault();
$('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
return;
}
@ -2604,7 +2608,7 @@ editor.init = () => {
svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
svgCanvas.selectOnly([newElement]);
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
@ -2634,7 +2638,7 @@ editor.init = () => {
svgCanvas.alignSelectedElements('m', 'page');
svgCanvas.alignSelectedElements('c', 'page');
editor.topPanelHandlers.updateContextPanel();
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;
@ -2662,7 +2666,7 @@ editor.init = () => {
if (!ok) { return; }
svgCanvas.clear();
if (this.files.length === 1) {
$.process_cancel(uiStrings.notification.loadingImage);
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
const reader = new FileReader();
reader.onloadend = async function ({target}) {
await loadSvgString(target.result);
@ -2828,7 +2832,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
dataType: 'text',
cache: Boolean(cache),
beforeSend () {
$.process_cancel(uiStrings.notification.loadingImage);
document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage;
},
success (str) {
loadSvgString(str, {noAlert});
@ -2842,11 +2846,11 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) {
reject(new Error('URLLoadFail'));
return;
}
document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err);
resolve();
},
complete () {
$('#dialog_box').hide();
document.getElementById('se-prompt-dialog').setAttribute('close', true);
}
});
});