Merge pull request #23 from OptimistikSAS/svgSourceEditorDialog
#svgSourceEditorDiaog editor dialog changedmaster
JFH
GitHub
commit
109997a718
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
import './imagePropertiesDialog.js';
|
||||
import './editorPreferencesDialog.js';
|
||||
import './svgSourceDialog.js';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -412,24 +412,6 @@
|
|||
</div>
|
||||
<!-- hidden divs -->
|
||||
<div id="color_picker"></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>
|
||||
</div>
|
||||
<div id="dialog_box">
|
||||
<div class="overlay"></div>
|
||||
|
|
|
|||
|
|
@ -963,27 +963,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;
|
||||
|
|
|
|||
|
|
@ -234,6 +234,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();
|
||||
|
|
@ -634,14 +638,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;
|
||||
|
|
@ -2822,18 +2825,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();
|
||||
|
|
@ -2843,7 +2845,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;
|
||||
|
|
@ -2938,10 +2940,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) {
|
||||
|
|
@ -2951,7 +2953,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();
|
||||
|
|
@ -3446,11 +3448,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);
|
||||
|
|
@ -3490,6 +3490,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
|
||||
|
|
|
|||
Loading…
Reference in New Issue