Merge branch 'V7-preview' into seColorPicker

master
JFH 2020-12-23 00:26:36 +01:00
commit 1616d214fd
7 changed files with 270 additions and 59 deletions

View File

@ -19,7 +19,7 @@
"build": "rollup -c",
"build:watch": "rollup -c --watch",
"start": "echo \"Open file, e.g., to http://localhost:8000/src/editor\" && web-dev-server --node-resolve",
"start:watch": "es-dev-server --node-resolve --watch",
"start:watch": "web-dev-server --node-resolve --watch",
"cypress:open": "run-p start cypress:open-no-start",
"cypress:open-no-start": "cypress open",
"cypress:instrument": "rimraf instrumented && cp-cli src instrumented && nyc instrument --compact=false src instrumented",

View File

@ -505,7 +505,7 @@ export class SeEditPrefsDialog extends HTMLElement {
this.dispatchEvent(closeEvent);
};
// Set up editor background functionality
const self = this;
const currentObj = this;
this.colorBlocks.forEach(function (e, i) {
const newdiv = document.createElement('div');
if (e === 'chessboard') {
@ -518,7 +518,7 @@ export class SeEditPrefsDialog extends HTMLElement {
newdiv.style.backgroundColor = e;
newdiv.classList.add('color_block');
}
self.$bgBlocks.append(newdiv);
currentObj.$bgBlocks.append(newdiv);
});
const blocks = this.$bgBlocks.querySelectorAll('div');
const curBg = 'cur_background';

View File

@ -1,2 +1,3 @@
import './imagePropertiesDialog.js';
import './editorPreferencesDialog.js';
import './svgSourceDialog.js';

View File

@ -0,0 +1,238 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/Dialog.js';
const template = document.createElement('template');
template.innerHTML = `
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
#svg_source_editor #svg_source_container {
background-color: #B0B0B0;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
z-index: 6;
}
#save_output_btns {
display: none;
text-align: left;
}
#save_output_btns p {
margin: .5em 1.5em;
display: inline-block;
}
#svg_source_editor form {
width: 100%;
}
#svg_source_editor #svg_source_textarea {
padding: 5px;
font-size: 12px;
min-height: 200px;
width: 95%;
height: 95%;
}
#svg_source_editor #tool_source_back {
text-align: left;
margin: 5px 10px;
}
</style>
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
Apply Changes
</button>
<button id="tool_source_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
Cancel
</button>
</div>
<div id="save_output_btns">
<p id="copy_save_note">
Copy the contents of this box into a text editor,
then save the file with a .svg extension.</p>
<button id="copy_save_done">Done</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
</form>
</div>
</elix-dialog>
`;
/**
* @class SeSvgSourceEditorDialog
*/
export class SeSvgSourceEditorDialog 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.$dialog = this._shadowRoot.querySelector('#svg_source_editor');
this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done');
this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save');
this.$cancelBtn = this._shadowRoot.querySelector('#tool_source_cancel');
this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea');
this.$copySec = this._shadowRoot.querySelector('#save_output_btns');
this.$applySec = this._shadowRoot.querySelector('#tool_source_back');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['dialog', 'value', 'applysec', 'copysec'];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return;
switch (name) {
case 'dialog':
if (newValue === 'open') {
this.$sourceTxt.focus();
this.$dialog.open();
} else {
this.$dialog.close();
this.$sourceTxt.blur();
}
break;
case 'applysec':
if (newValue === 'false') {
this.$applySec.style.display = 'none';
} else {
this.$applySec.style.display = 'block';
}
break;
case 'copysec':
if (newValue === 'false') {
this.$copySec.style.display = 'none';
} else {
this.$copySec.style.display = 'block';
}
break;
case 'value':
this.$sourceTxt.value = newValue;
break;
default:
super.attributeChangedCallback(name, oldValue, newValue);
break;
}
}
/**
* @function get
* @returns {any}
*/
get dialog () {
return this.getAttribute('dialog');
}
/**
* @function set
* @returns {void}
*/
set dialog (value) {
this.setAttribute('dialog', value);
}
/**
* @function get
* @returns {any}
*/
get value () {
return this.getAttribute('value');
}
/**
* @function set
* @returns {void}
*/
set value (value) {
this.setAttribute('value', value);
}
/**
* @function get
* @returns {any}
*/
get applysec () {
return this.getAttribute('applysec');
}
/**
* @function set
* @returns {void}
*/
set applysec (value) {
this.setAttribute('applysec', value);
}
/**
* @function get
* @returns {any}
*/
get copysec () {
return this.getAttribute('copysec');
}
/**
* @function set
* @returns {void}
*/
set copysec (value) {
this.setAttribute('copysec', value);
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
const onCancelHandler = (ev) => {
const closeEvent = new CustomEvent('change', {detail: {
dialog: 'closed'
}});
this.dispatchEvent(closeEvent);
};
const onCopyHandler = (ev) => {
const closeEvent = new CustomEvent('change', {
detail: {
copy: 'click',
value: this.$sourceTxt.value
}
});
this.dispatchEvent(closeEvent);
};
const onSaveHandler = (ev) => {
const closeEvent = new CustomEvent('change', {detail: {
value: this.$sourceTxt.value,
dialog: 'close'
}});
this.dispatchEvent(closeEvent);
};
this.$copyBtn.addEventListener('click', onCopyHandler);
this.$saveBtn.addEventListener('click', onSaveHandler);
this.$cancelBtn.addEventListener('click', onCancelHandler);
this.$dialog.addEventListener('close', onCancelHandler);
}
}
// Register
customElements.define('se-svg-source-editor-dialog', SeSvgSourceEditorDialog);

View File

@ -398,24 +398,8 @@
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
</ul>
</div>
</div> <!-- svg_editor -->
<div id="svg_source_editor">
<div class="overlay"></div>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button>
</div>
<div id="save_output_btns">
<p id="copy_save_note">
Copy the contents of this box into a text editor,
then save the file with a .svg extension.</p>
<button id="copy_save_done">Done</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
</div>
<div id="dialog_box">
<div class="overlay"></div>

View File

@ -923,27 +923,6 @@ ul li.current {
width: 96%;
}
#svg_source_editor form {
position: absolute;
top: 40px;
bottom: 30px;
width: 100%;
}
#svg_source_editor #svg_source_textarea {
position: relative;
width: 95%;
height: 95%;
padding: 5px;
font-size: 12px;
}
#svg_source_editor #tool_source_back {
text-align: left;
padding-left: 20px;
}
#svg_prefs_container div.color_block {
float: left;
margin: 2px;

View File

@ -228,6 +228,10 @@ editor.init = () => {
const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
document.body.append(newSeEditPrefsDialog);
// svg editor source dialoag added to DOM
const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
document.body.append(newSeEditorDialog);
} catch (err) {}
configObj.load();
@ -607,14 +611,13 @@ editor.init = () => {
*/
const showSourceEditor = function (e, forSaving) {
if (editingsource) { return; }
editingsource = true;
origSource = svgCanvas.getSvgString();
$('#save_output_btns').toggle(Boolean(forSaving));
$('#tool_source_back').toggle(!forSaving);
$('#svg_source_textarea').val(origSource);
$('#svg_source_editor').fadeIn();
$('#svg_source_textarea').focus();
const $editorDialog = document.getElementById('se-svg-editor-dialog');
$editorDialog.setAttribute('dialog', 'open');
$editorDialog.setAttribute('value', origSource);
$editorDialog.setAttribute('copysec', Boolean(forSaving));
$editorDialog.setAttribute('applysec', !forSaving);
};
let selectedElement = null;
@ -2774,18 +2777,17 @@ editor.init = () => {
* @returns {void}
*/
const hideSourceEditor = () => {
$('#svg_source_editor').hide();
const $editorDialog = document.getElementById('se-svg-editor-dialog');
$editorDialog.setAttribute('dialog', 'closed');
editingsource = false;
$('#svg_source_textarea').blur();
};
/**
*
* @param {Event} e
* @returns {Promise<void>} Resolves to `undefined`
*/
const saveSourceEditor = async () => {
const saveSourceEditor = async (e) => {
if (!editingsource) { return; }
const saveChanges = () => {
svgCanvas.clearSelection();
hideSourceEditor();
@ -2795,7 +2797,7 @@ editor.init = () => {
prepPaints();
};
if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
if (!svgCanvas.setSvgString(e.detail.value)) {
const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource);
if (!ok) {
return;
@ -2890,10 +2892,10 @@ editor.init = () => {
};
/**
*
* @param {Event} e
* @returns {Promise<void>} Resolves to `undefined`
*/
const cancelOverlays = async () => {
const cancelOverlays = async (e) => {
$('#dialog_box').hide();
if (!editingsource && !docprops && !preferences) {
if (curContext) {
@ -2903,7 +2905,7 @@ editor.init = () => {
}
if (editingsource) {
if (origSource !== $('#svg_source_textarea').val()) {
if (origSource !== e.detail.value) {
const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges);
if (ok) {
hideSourceEditor();
@ -3152,11 +3154,9 @@ editor.init = () => {
$id('font_size').addEventListener('change', (e) => changeFontSize(e));
// register actions in top toolbar
$id('tool_source_save').addEventListener('click', saveSourceEditor);
$id('tool_ungroup').addEventListener('click', clickGroup);
$id('tool_unlink_use').addEventListener('click', clickGroup);
$id('sidepanel_handle').addEventListener('click', toggleSidePanel);
$id('copy_save_done').addEventListener('click', cancelOverlays);
$id('tool_bold').addEventListener('click', clickBold);
$id('tool_italic').addEventListener('click', clickItalic);
@ -3196,6 +3196,15 @@ editor.init = () => {
savePreferences(e);
}
});
$id('se-svg-editor-dialog').addEventListener('change', function (e) {
if (e?.detail?.copy === 'click') {
cancelOverlays(e);
} else if (e?.detail?.dialog === 'closed') {
hideSourceEditor();
} else {
saveSourceEditor(e);
}
});
layersPanel.addEvents();
const toolButtons = [
// Shortcuts not associated with buttons