', {id: btn.panel}).appendTo('#tools_top');
- }
- break;
- case 'app_menu':
- cls = '';
- parent = '#main_menu ul';
- break;
- }
-
- const button = $((btn.list || btn.type === 'app_menu') ? '' : '')
- .attr('id', id)
- .attr('title', btn.title)
- .addClass(cls);
- if (!btn.includeWith && !btn.list) {
- if ('position' in btn) {
- if ($(parent).children().eq(btn.position).length) {
- $(parent).children().eq(btn.position).before(button);
- } else {
- $(parent).children().last().after(button);
- }
- } else {
- button.appendTo(parent);
- }
-
- if (btn.type === 'app_menu') {
- button.append('
').append(btn.title);
- }
- } else if (btn.list) {
- // Add button to list
- button.addClass('push_button');
- $('#' + btn.list + '_opts').append(button);
- if (btn.isDefault) {
- $('#cur_' + btn.list).append(button.children().clone());
- const svgicon = btn.svgicon || btn.id;
- placementObj['#cur_' + btn.list] = svgicon;
- }
- }
- if (!svgicons) {
- button.append(icon);
- }
-
- if (!btn.list) {
- // Add given events to button
- $.each(btn.events, function (name, func) {
- if (name === 'click' && btn.type === 'mode') {
- // `touch.js` changes `touchstart` to `mousedown`,
- // so we must map extension click events as well
- if (isTouch() && name === 'click') {
- name = 'mousedown';
- }
- if (btn.includeWith) {
- button.bind(name, func);
- } else {
- button.bind(name, function () {
- if (updateLeftPanel(button)) {
- func();
- }
- });
- }
- if (btn.key) {
- $(document).bind('keydown', btn.key, func);
- if (btn.title) {
- button.attr('title', btn.title + ' [' + btn.key + ']');
- }
- }
- } else {
- button.bind(name, func);
- }
- });
- }
- });
- $.each(btnSelects, function () {
- addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
- });
-
- if (svgicons) {
- return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new
- $.svgIcons(`${curConfig.imgPath}${svgicons}`, {
- w: 24, h: 24,
- id_match: false,
- no_img: (!isWebkit()),
- fallback: fallbackObj,
- placement: placementObj,
- callback (icons) {
- // Non-ideal hack to make the icon match the current size
- // if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
- if (editor.pref('iconsize') !== 'm') {
- prepResize();
- }
- runCallback();
- resolve();
- }
- });
- });
- }
- }
- if (ext.buttons && ext.newUI) {
- ext.buttons.forEach((btn) => {
- // Set button up according to its type
- switch (btn.type) {
- case 'mode_flyout':
- case 'mode':
- $id(btn.id).addEventListener('click', () => {
- if (updateLeftPanel(btn.id)) {
- btn.events.click();
- }
- });
- break;
+ if (ext.events) {
+ $id(ext.events.id).addEventListener('click', () => {
+ if (updateLeftPanel(ext.events.id)) {
+ ext.events.click();
}
});
}
@@ -3117,6 +2736,7 @@ editor.init = () => {
}
});
+ /*
addAltDropDown('#stroke_linecap', '#linecap_opts', function () {
setStrokeOpt(this, true);
}, {dropUp: true});
@@ -3129,6 +2749,7 @@ editor.init = () => {
const letter = this.id.replace('tool_pos', '').charAt(0);
svgCanvas.alignSelectedElements(letter, 'page');
}, {multiclick: true});
+ */
// Unfocus text input when workarea is mousedowned.
(function () {
@@ -3261,8 +2882,8 @@ editor.init = () => {
* @returns {void}
*/
const zoomImage = function (multiplier) {
- const res = svgCanvas.getResolution();
- multiplier = multiplier ? res.zoom * multiplier : 1;
+ const resolution = svgCanvas.getResolution();
+ multiplier = multiplier ? resolution.zoom * multiplier : 1;
// setResolution(res.w * multiplier, res.h * multiplier, true);
$id('zoom').value = (multiplier * 100).toFixed(1);
svgCanvas.setZoom(multiplier);
@@ -3735,11 +3356,6 @@ editor.init = () => {
updateToolButtonState();
};
- /* $('#svg_prefs_container').draggable({
- cancel: 'button,fieldset',
- containment: 'window'
- }).css('position', 'absolute'); */
-
let docprops = false;
let preferences = false;
@@ -3753,14 +3369,14 @@ editor.init = () => {
const $imgDialog = document.getElementById('se-img-prop');
// update resolution option with actual resolution
- const res = svgCanvas.getResolution();
+ const resolution = svgCanvas.getResolution();
if (curConfig.baseUnit !== 'px') {
- res.w = convertUnit(res.w) + curConfig.baseUnit;
- res.h = convertUnit(res.h) + curConfig.baseUnit;
+ resolution.w = convertUnit(resolution.w) + curConfig.baseUnit;
+ resolution.h = convertUnit(resolution.h) + curConfig.baseUnit;
}
$imgDialog.setAttribute('save', editor.pref('img_save'));
- $imgDialog.setAttribute('width', res.w);
- $imgDialog.setAttribute('height', res.h);
+ $imgDialog.setAttribute('width', resolution.w);
+ $imgDialog.setAttribute('height', resolution.h);
$imgDialog.setAttribute('title', svgCanvas.getDocumentTitle());
$imgDialog.setAttribute('dialog', 'open');
};
@@ -3855,7 +3471,7 @@ editor.init = () => {
};
/**
- *
+ * @param {Event} e
* @returns {boolean} Whether there were problems saving the document properties
*/
const saveDocProperties = function (e) {
@@ -3885,11 +3501,12 @@ editor.init = () => {
/**
* Save user preferences based on current values in the UI.
+ * @param {Event} e
* @function module:SVGEditor.savePreferences
* @returns {Promise}
*/
const savePreferences = editor.savePreferences = async function (e) {
- const {lang, iconsize, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail;
+ const {lang, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail;
// Set background
setBackground(bgcolor, bgurl);
@@ -3899,9 +3516,6 @@ editor.init = () => {
await setLang(langParam, langData);
}
- // set icon size
- setIconSize(iconsize);
-
// set grid setting
curConfig.gridSnapping = gridsnappingon;
curConfig.snappingStep = gridsnappingstep;
@@ -4631,8 +4245,8 @@ editor.init = () => {
// Tooltips not directly associated with a single function
const keyAssocs = {
- '4/Shift+4': '#tools_rect_show',
- '5/Shift+5': '#tools_ellipse_show'
+ '4/Shift+4': '#tools_rect',
+ '5/Shift+5': '#tools_ellipse'
};
return {
diff --git a/src/editor/svgicons/jQuery.svgIcons.js b/src/editor/svgicons/jQuery.svgIcons.js
deleted file mode 100644
index 9f9499c5..00000000
--- a/src/editor/svgicons/jQuery.svgIcons.js
+++ /dev/null
@@ -1,544 +0,0 @@
-/**
- * @file SVG Icon Loader 2.0
- *
- * jQuery Plugin for loading SVG icons from a single file
- *
- * Adds {@link external:jQuery.svgIcons}, {@link external:jQuery.getSvgIcon}, {@link external:jQuery.resizeSvgIcons}
- *
- * How to use:
-
-1. Create the SVG master file that includes all icons:
-
-The master SVG icon-containing file is an SVG file that contains
-`` elements. Each `` element should contain the markup of an SVG
-icon. The `` element has an ID that should
-correspond with the ID of the HTML element used on the page that should contain
-or optionally be replaced by the icon. Additionally, one empty element should be
-added at the end with id "svg_eof".
-
-2. Optionally create fallback raster images for each SVG icon.
-
-3. Include the jQuery and the SVG Icon Loader scripts on your page.
-
-4. Run `$.svgIcons()` when the document is ready. See its signature
-
-5. To access an icon at a later point without using the callback, use this:
- `$.getSvgIcon(id (string), uniqueClone (boolean))`;
-
-This will return the icon (as jQuery object) with a given ID.
-
-6. To resize icons at a later point without using the callback, use this:
- `$.resizeSvgIcons(resizeOptions)` (use the same way as the "resize" parameter)
- *
- * @module jQuerySVGIcons
- * @license MIT
- * @copyright (c) 2009 Alexis Deveria
- * {@link http://a.deveria.com}
- * @example
- $(function () {
- $.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons
- // No options have been set, so all icons will automatically be inserted
- // into HTML elements that match the same IDs.
- });
-
- * @example
- $(function () {
- // The SVG file that contains all icons
- $.svgIcons('my_icon_set.svg', {
- callback (icons) { // Custom callback function that sets click
- // events for each icon
- $.each(icons, function (id, icon) {
- icon.click(function () {
- alert('You clicked on the icon with id ' + id);
- });
- });
- }
- });
- });
-
- * @example
- $(function () {
- // The SVGZ file that contains all icons
- $.svgIcons('my_icon_set.svgz', {
- w: 32, // All icons will be 32px wide
- h: 32, // All icons will be 32px high
- fallback_path: 'icons/', // All fallback files can be found here
- fallback: {
- '#open_icon': 'open.png', // The "open.png" will be appended to the
- // HTML element with ID "open_icon"
- '#close_icon': 'close.png',
- '#save_icon': 'save.png'
- },
- placement: {'.open_icon': 'open'}, // The "open" icon will be added
- // to all elements with class "open_icon"
- resize: {
- '#save_icon .svg_icon': 64 // The "save" icon will be resized to 64 x 64px
- },
-
- callback (icons) { // Sets background color for "close" icon
- icons.close.css('background', 'red');
- },
-
- svgz: true // Indicates that an SVGZ file is being used
- });
- });
-*/
-
-// Todo: Move to own module (and have it import a modular base64 encoder)
-import {encode64} from '../../common/utilities.js';
-
-const isOpera = Boolean(window.opera);
-
-const fixIDs = function (svgEl, svgNum, force) {
- const defs = svgEl.find('defs');
- if (!defs.length) return svgEl;
-
- const idElems = (isOpera)
- ? defs.find('*').filter(function () {
- return Boolean(this.id);
- })
- : defs.find('[id]');
-
- const allElems = svgEl[0].getElementsByTagName('*'),
- len = allElems.length;
-
- idElems.each(function (i) {
- const {id} = this;
- /*
- const noDupes = ($(svgdoc).find('#' + id).length <= 1);
- if (isOpera) noDupes = false; // Opera didn't clone svgEl, so not reliable
- if(!force && noDupes) return;
- */
- const newId = 'x' + id + svgNum + i;
- this.id = newId;
-
- const oldVal = 'url(#' + id + ')';
- const newVal = 'url(#' + newId + ')';
-
- // Selector method, possibly faster but fails in Opera / jQuery 1.4.3
- // svgEl.find('[fill="url(#' + id + ')"]').each(function() {
- // this.setAttribute('fill', 'url(#' + newId + ')');
- // }).end().find('[stroke="url(#' + id + ')"]').each(function() {
- // this.setAttribute('stroke', 'url(#' + newId + ')');
- // }).end().find('use').each(function() {
- // if(this.getAttribute('xlink:href') == '#' + id) {
- // this.setAttributeNS(xlinkns,'href','#' + newId);
- // }
- // }).end().find('[filter="url(#' + id + ')"]').each(function() {
- // this.setAttribute('filter', 'url(#' + newId + ')');
- // });
-
- for (i = 0; i < len; i++) {
- const elem = allElems[i];
- if (elem.getAttribute('fill') === oldVal) {
- elem.setAttribute('fill', newVal);
- }
- if (elem.getAttribute('stroke') === oldVal) {
- elem.setAttribute('stroke', newVal);
- }
- if (elem.getAttribute('filter') === oldVal) {
- elem.setAttribute('filter', newVal);
- }
- }
- });
- return svgEl;
-};
-
-/**
-* @callback module:jQuerySVGIcons.SVGIconsLoadedCallback
-* @param {PlainObject} svgIcons IDs keyed to jQuery objects of images
-* @returns {void}
-*/
-
-/**
- * @function module:jQuerySVGIcons.jQuerySVGIcons
- * @param {external:jQuery} $ Its keys include all icon IDs and the values, the icon as a jQuery object
- * @returns {external:jQuery} The enhanced jQuery object
-*/
-export default function jQueryPluginSVGIcons ($) {
- const svgIcons = {};
-
- /**
- * Map of raster images with each key being the SVG icon ID
- * to replace, and the value the image file name.
- * @typedef {PlainObject} external:jQuery.svgIcons.Fallback
- */
- /**
- * Map of raster images with each key being the SVG icon ID
- * whose `alt` will be set, and the value being the `alt` text.
- * @typedef {PlainObject} external:jQuery.svgIcons.Alts
- */
- /**
- * @function external:jQuery.svgIcons
- * @param {string} file The location of a local SVG or SVGz file
- * @param {PlainObject} [opts]
- * @param {Float} [opts.w] The icon widths
- * @param {Float} [opts.h] The icon heights
- * @param {external:jQuery.svgIcons.Fallback} [opts.fallback]
- * @param {string} [opts.fallback_path] The path to use for all images
- * listed under "fallback"
- * @param {boolean} [opts.replace] If set to `true`, HTML elements will
- * be replaced by, rather than include the SVG icon.
- * @param {PlainObject} [opts.placement] Map with selectors
- * for keys and SVG icon ids as values. This provides a custom method of
- * adding icons.
- * @param {PlainObject} [opts.resize] Map
- * with selectors for keys and numbers as values. This allows an easy way to
- * resize specific icons.
- * @param {module:jQuerySVGIcons.SVGIconsLoadedCallback} [opts.callback] A
- * function to call when all icons have been loaded.
- * @param {boolean} [opts.id_match=true] Automatically attempt to match
- * SVG icon ids with corresponding HTML id
- * @param {boolean} [opts.no_img] Prevent attempting to convert the icon
- * into an `![]()
` element (may be faster, help for browser consistency)
- * @param {boolean} [opts.svgz] Indicate that the file is an SVGZ file, and
- * thus not to parse as XML. SVGZ files add compression benefits, but
- * getting data from them fails in Firefox 2 and older.
- * @param {jQuery.svgIcons.Alts} [opts.alts] Map of images with each key
- * being the SVG icon ID whose `alt` will be set, and the value being
- * the `alt` text
- * @param {string} [opts.testIconAlt="icon"] Alt text for the injected test image.
- * In case wish to ensure have one for accessibility
- * @returns {void}
- */
- $.svgIcons = function (file, opts = {}) {
- const svgns = 'http://www.w3.org/2000/svg',
- xlinkns = 'http://www.w3.org/1999/xlink',
- iconW = opts.w || 24,
- iconH = opts.h || 24;
- let elems, svgdoc, testImg,
- iconsMade = false,
- dataLoaded = false,
- loadAttempts = 0;
- const // ua = navigator.userAgent,
- // isSafari = (ua.includes('Safari/') && !ua.includes('Chrome/')),
- dataPre = 'data:image/svg+xml;charset=utf-8;base64,';
-
- let dataEl;
- if (opts.svgz) {
- dataEl = $('