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

#se-img-prop-dialog imagePropertiesDialog move separate file

master
Agriya Dev5 2020-12-08 18:25:05 +05:30
parent f349540ec4
commit 68f3efd03b
5 changed files with 154 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/editor/dialogs/imagePropertiesDialog.js Normal file
View File

@ -0,0 +1,117 @@
/* 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;
}
</style>
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">Image Properties</legend>
<label>
<span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title" />
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label>
<span id="svginfo_width">width:</span>
<input type="text" id="canvas_width" size="6" />
</label>
<label>
<span id="svginfo_height">height:</span>
<input type="text" id="canvas_height" size="6" />
</label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">Included Images</legend>
<label>
<input type="radio" name="image_opt" value="embed" checked="checked" />
<span id="image_opt_embed">Embed data (local files)</span>
</label>
<label>
<input type="radio" name="image_opt" value="ref" />
<span id="image_opt_ref">Use file reference</span>
</label>
</fieldset>
</fieldset>
</div>
</elix-dialog>
`;
/**
* @class SeImgPropDialog
*/
export class SeImgPropDialog 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.$cancel = this._shadowRoot.querySelector('#tool_docprops_cancel');
this.$resolution = this._shadowRoot.querySelector('#resolution');
this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width');
this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height');
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
const onChangeHandler = (ev) => {
if (!ev.target.selectedIndex) {
if (this.$canvasWidth.getAttribute('value') === 'fit') {
this.$canvasWidth.removeAttribute('disabled');
this.$canvasWidth.value = 100;
this.$canvasHeight.removeAttribute('disabled');
this.$canvasHeight.value = 100;
}
} else if (ev.target.value === 'content') {
this.$canvasWidth.setAttribute('disabled', 'disabled');
this.$canvasWidth.value = 'fit';
this.$canvasHeight.setAttribute('disabled', 'disabled');
this.$canvasHeight.value = 'fit';
} else {
const dims = ev.target.value.split('x');
this.$canvasWidth.value = dims[0];
this.$canvasWidth.removeAttribute('disabled');
this.$canvasHeight.value = dims[1];
this.$canvasHeight.removeAttribute('disabled');
}
};
this.$resolution.addEventListener('change', onChangeHandler);
}
}
// Register
customElements.define('se-img-prop-dialog', SeImgPropDialog);

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

@ -0,0 +1 @@
import './imagePropertiesDialog.js';

51
src/editor/index.html
View File

@ -91,7 +91,6 @@
</a>
</div>
</se-menu>
<div id="tools_top">
<div id="editor_panel">
<div class="tool_sep"></div>
@ -441,55 +440,7 @@
</form>
</div>
</div>
<div id="svg_docprops">
<div class="overlay"></div>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">Image Properties</legend>
<label>
<span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title" />
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim">Canvas Dimensions</legend>
<label>
<span id="svginfo_width">width:</span>
<input type="text" id="canvas_width" size="6" />
</label>
<label>
<span id="svginfo_height">height:</span>
<input type="text" id="canvas_height" size="6" />
</label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">Select predefined:</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">Fit to Content</option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">Included Images</legend>
<label>
<input type="radio" name="image_opt" value="embed" checked="checked" />
<span id="image_opt_embed">Embed data (local files)</span>
</label>
<label>
<input type="radio" name="image_opt" value="ref" />
<span id="image_opt_ref">Use file reference</span>
</label>
</fieldset>
</fieldset>
</div>
</div>
<se-img-prop-dialog id="se-img-prop"></se-img-prop-dialog>
<div id="svg_prefs">
<div class="overlay"></div>
<div id="svg_prefs_container">

1
src/editor/index.js
View File

@ -7,6 +7,7 @@ For default config and extensions (and available options) available to
import './jquery.min.js';
import './jquery-ui/jquery-ui-1.8.17.custom.min.js';
import './components/index.js';
import './dialogs/index.js';
import svgEditor from './svgedit.js';
// URL OVERRIDE CONFIG

79
src/editor/svgedit.js
View File

@ -3775,7 +3775,7 @@ editor.init = () => {
updateToolButtonState();
};
$('#svg_docprops_container, #svg_prefs_container').draggable({
$('#svg_prefs_container').draggable({
cancel: 'button,fieldset',
containment: 'window'
}).css('position', 'absolute');
@ -3790,9 +3790,11 @@ editor.init = () => {
const showDocProperties = function () {
if (docprops) { return; }
docprops = true;
const $imgDialog = document.getElementById('se-img-prop');
// This selects the correct radio button by using the array notation
$('#image_save_opts input').val([editor.pref('img_save')]);
const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts');
$imageSaveOpts.querySelector('input').value = [editor.pref('img_save')];
// update resolution option with actual resolution
const res = svgCanvas.getResolution();
@ -3800,12 +3802,10 @@ editor.init = () => {
res.w = convertUnit(res.w) + curConfig.baseUnit;
res.h = convertUnit(res.h) + curConfig.baseUnit;
}
$('#canvas_width').val(res.w);
$('#canvas_height').val(res.h);
$('#canvas_title').val(svgCanvas.getDocumentTitle());
$('#svg_docprops').show();
$imgDialog.shadowRoot.querySelector('#canvas_width').value = res.w;
$imgDialog.shadowRoot.querySelector('#canvas_height').value = res.h;
$imgDialog.shadowRoot.querySelector('#canvas_title').value = svgCanvas.getDocumentTitle();
$imgDialog.shadowRoot.querySelector('#svg_docprops').open();
};
/**
@ -3887,10 +3887,13 @@ editor.init = () => {
* @returns {void}
*/
const hideDocProperties = function () {
$('#svg_docprops').hide();
$('#canvas_width,#canvas_height').removeAttr('disabled');
$('#resolution')[0].selectedIndex = 0;
$('#image_save_opts input').val([editor.pref('img_save')]);
const $imgDialog = document.getElementById('se-img-prop');
$imgDialog.shadowRoot.querySelector('#svg_docprops').close();
$imgDialog.shadowRoot.querySelector('#canvas_width').removeAttribute('disabled');
$imgDialog.shadowRoot.querySelector('#canvas_height').removeAttribute('disabled');
$imgDialog.shadowRoot.querySelector('#resolution').selectedIndex = 0;
const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts');
$imageSaveOpts.querySelector('input').value = [editor.pref('img_save')];
docprops = false;
};
@ -3909,29 +3912,29 @@ editor.init = () => {
*/
const saveDocProperties = function () {
// set title
const newTitle = $('#canvas_title').val();
updateTitle(newTitle);
const $imgDialog = document.getElementById('se-img-prop');
const newTitle = $imgDialog.shadowRoot.querySelector('#canvas_title').value;
svgCanvas.setDocumentTitle(newTitle);
// update resolution
const width = $('#canvas_width'), w = width.val();
const height = $('#canvas_height'), h = height.val();
const width = $imgDialog.shadowRoot.querySelector('#canvas_width'), w = width.value;
const height = $imgDialog.shadowRoot.querySelector('#canvas_height'), h = height.value;
if (w !== 'fit' && !isValidUnit('width', w)) {
width.parent().addClass('error');
width.parentElement.classList.add('error');
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
return false;
}
width.parent().removeClass('error');
width.parentElement.classList.remove('error');
if (h !== 'fit' && !isValidUnit('height', h)) {
height.parent().addClass('error');
height.parentElement.classList.add('error');
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
return false;
}
height.parent().removeClass('error');
height.parentElement.classList.remove('error');
if (!svgCanvas.setResolution(w, h)) {
/* await */ $.alert(uiStrings.notification.noContentToFitTo);
@ -3939,7 +3942,8 @@ editor.init = () => {
}
// Set image save option
editor.pref('img_save', $('#image_save_opts :checked').val());
const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts');
editor.pref('img_save', $imageSaveOpts.querySelector(':checked').value);
updateCanvas();
hideDocProperties();
return true;
@ -4259,13 +4263,12 @@ editor.init = () => {
svgCanvas.embedImage('images/logo.svg', function (datauri) {
if (!datauri) {
// Disable option
$('#image_save_opts [value=embed]').attr('disabled', 'disabled');
$('#image_save_opts input').val(['ref']);
const $imageSaveOpts = $imgDialog.shadowRoot.querySelector('#image_save_opts');
$imageSaveOpts.querySelector('[value=embed]').setAttribute('disabled', 'disabled');
$imageSaveOpts.querySelector('input').value = ['ref'];
editor.pref('img_save', 'ref');
$('#image_opt_embed').css('color', '#666').attr(
'title',
uiStrings.notification.featNotSupported
);
$imageSaveOpts.querySelector('#image_opt_embed').style.color = "#666";
$imageSaveOpts.querySelector('#image_opt_embed').setAttribute('title', uiStrings.notification.featNotSupported);
}
});
}, 1000);
@ -4491,27 +4494,10 @@ editor.init = () => {
// // }
// }
$('#resolution').change(function () {
const wh = $('#canvas_width,#canvas_height');
if (!this.selectedIndex) {
if ($('#canvas_width').val() === 'fit') {
wh.removeAttr('disabled').val(100);
}
} else if (this.value === 'content') {
wh.val('fit').attr('disabled', 'disabled');
} else {
const dims = this.value.split('x');
$('#canvas_width').val(dims[0]);
$('#canvas_height').val(dims[1]);
wh.removeAttr('disabled');
}
});
// Prevent browser from erroneously repopulating fields
$('input,select').attr('autocomplete', 'off');
const dialogSelectors = [
'#tool_source_cancel', '#tool_docprops_cancel',
'#tool_prefs_cancel', '.overlay'
];
/* eslint-disable jsdoc/require-property */
@ -4640,6 +4626,10 @@ editor.init = () => {
$id('tool_docprops').addEventListener('click', showDocProperties);
$id('tool_editor_prefs').addEventListener('click', showPreferences);
$id('tool_editor_homepage').addEventListener('click', openHomePage);
const seImgProp = document.getElementById('se-img-prop');
seImgProp.shadowRoot.querySelector('#tool_docprops_save').addEventListener('click', saveDocProperties);
seImgProp.shadowRoot.querySelector('#tool_docprops_cancel').addEventListener('click', hideDocProperties);
seImgProp.shadowRoot.querySelector('#svg_docprops').addEventListener('close', hideDocProperties);
const toolButtons = [
{
@ -4656,7 +4646,6 @@ editor.init = () => {
{sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click',
key: ['esc', false, false], hidekey: true},
{sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
{sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
{sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},