svgedit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Source: extensions/ext-storage/ext-storage.js</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Source: extensions/ext-storage/ext-storage.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>/** * @file ext-storage.js * * This extension allows automatic saving of the SVG canvas contents upon * page unload (which can later be automatically retrieved upon future * editor loads). * * The functionality was originally part of the SVG Editor, but moved to a * separate extension to make the setting behavior optional, and adapted * to inform the user of its setting of local data. * * @license MIT * * @copyright 2010 Brett Zamir * @todo Revisit on whether to use `svgEditor.pref` over directly setting * `curConfig` in all extensions for a more public API (not only for `extPath` * and `imagePath`, but other currently used config in the extensions) * @todo We might provide control of storage settings through the UI besides the * initial (or URL-forced) dialog. * */ import './storageDialog.js' /** * Expire the storage cookie. * @returns {void} */ const removeStoragePrefCookie = () => { expireCookie('svgeditstore') } /** * Set the cookie to expire. * @param {string} cookie * @returns {void} */ const expireCookie = cookie => { document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT' } /** * Replace `storagePrompt` parameter within URL. * @param {string} val * @returns {void} * @todo Replace the string manipulation with `searchParams.set` */ const replaceStoragePrompt = val => { val = val ? 'storagePrompt=' + val : '' const loc = top.location // Allow this to work with the embedded editor as well if (loc.href.includes('storagePrompt=')) { loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function ( n0, n1, amp ) { return (val ? n1 : '') + val + (!val && amp ? n1 : amp || '') }) } else { loc.href += (loc.href.includes('?') ? '&' : '?') + val } } export default { name: 'storage', init () { const svgEditor = this const { svgCanvas, storage } = svgEditor // We could empty any already-set data for users when they decline storage, // but it would be a risk for users who wanted to store but accidentally // said "no"; instead, we'll let those who already set it, delete it themselves; // to change, set the "emptyStorageOnDecline" config setting to true // in svgedit-config-iife.js/svgedit-config-es.js. const { // When the code in svg-editor.js prevents local storage on load per // user request, we also prevent storing on unload here so as to // avoid third-party sites making XSRF requests or providing links // which would cause the user's local storage not to load and then // upon page unload (such as the user closing the window), the storage // would thereby be set with an empty value, erasing any of the // user's prior work. To change this behavior so that no use of storage // or adding of new storage takes place regardless of settings, set // the "noStorageOnLoad" config setting to true in svgedit-config-*.js. noStorageOnLoad, forceStorage, canvasName } = svgEditor.configObj.curConfig // LOAD STORAGE CONTENT IF ANY if ( storage && // Cookies do not have enough available memory to hold large documents (forceStorage || (!noStorageOnLoad && /(?:^|;\s*)svgeditstore=prefsAndContent/.test(document.cookie))) ) { const key = 'svgedit-' + canvasName const cached = storage.getItem(key) if (cached) { svgEditor.loadFromString(cached) const name = storage.getItem(`title-${key}`) ?? 'untitled.svg' svgEditor.topPanel.updateTitle(name) svgEditor.layersPanel.populateLayers() } } // storageDialog added to DOM const storageBox = document.createElement('se-storage-dialog') storageBox.setAttribute('id', 'se-storage-dialog') svgEditor.$container.append(storageBox) storageBox.init(svgEditor.i18next) // manage the change in the storageDialog storageBox.addEventListener('change', e => { storageBox.setAttribute('dialog', 'close') if (e?.detail?.trigger === 'ok') { if (e?.detail?.select !== 'noPrefsOrContent') { const storagePrompt = new URL(top.location).searchParams.get( 'storagePrompt' ) document.cookie = 'svgeditstore=' + encodeURIComponent(e.detail.select) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT' if (storagePrompt === 'true' && e?.detail?.checkbox) { replaceStoragePrompt() return } } else { removeStoragePrefCookie() if ( svgEditor.configObj.curConfig.emptyStorageOnDecline && e?.detail?.checkbox ) { setSvgContentStorage('') Object.keys(svgEditor.curPrefs).forEach(name => { name = 'svg-edit-' + name if (svgEditor.storage) { svgEditor.storage.removeItem(name) } expireCookie(name) }) } if (e?.detail?.select && e?.detail?.checkbox) { replaceStoragePrompt('false') return } } } else if (e?.detail?.trigger === 'cancel') { removeStoragePrefCookie() } setupBeforeUnloadListener() svgEditor.storagePromptState = 'closed' svgEditor.updateCanvas(true) }) /** * Sets SVG content as a string with "svgedit-" and the current * canvas name as namespace. * @param {string} svgString * @returns {void} */ const setSvgContentStorage = svgString => { const name = `svgedit-${svgEditor.configObj.curConfig.canvasName}` if (!svgString) { storage.removeItem(name) storage.removeItem(`${name}-title`) } else { storage.setItem(name, svgString) storage.setItem(`title-${name}`, svgEditor.title) } } /** * Listen for unloading: If and only if opted in by the user, set the content * document and preferences into storage: * 1. Prevent save warnings (since we're automatically saving unsaved * content into storage) * 2. Use localStorage to set SVG contents (potentially too large to allow in cookies) * 3. Use localStorage (where available) or cookies to set preferences. * @returns {void} */ const setupBeforeUnloadListener = () => { window.addEventListener('beforeunload', function () { // Don't save anything unless the user opted in to storage if ( !/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/.test( document.cookie ) ) { return } if (/(?:^|;\s*)svgeditstore=prefsAndContent/.test(document.cookie)) { setSvgContentStorage(svgCanvas.getSvgString()) } svgEditor.setConfig({ no_save_warning: true }) // No need for explicit saving at all once storage is on const { curPrefs } = svgEditor.configObj Object.entries(curPrefs).forEach(([key, val]) => { const store = val !== undefined key = 'svg-edit-' + key if (!store) { return } if (storage) { storage.setItem(key, val) } else if (window.widget) { window.widget.setPreferenceForKey(val, key) } else { val = encodeURIComponent(val) document.cookie = encodeURIComponent(key) + '=' + val + '; expires=Fri, 31 Dec 9999 23:59:59 GMT' } }) }) } let loaded = false return { name: 'storage', callback () { const storagePrompt = new URL(top.location).searchParams.get( 'storagePrompt' ) // No need to run this one-time dialog again just because the user // changes the language if (loaded) { return } loaded = true // Note that the following can load even if "noStorageOnLoad" is // set to false; to avoid any chance of storage, avoid this // extension! (and to avoid using any prior storage, set the // config option "noStorageOnLoad" to true). if ( !forceStorage && // If the URL has been explicitly set to always prompt the // user (e.g., so one can be pointed to a URL where one // can alter one's settings, say to prevent future storage)... (storagePrompt === 'true' || // ...or...if the URL at least doesn't explicitly prevent a // storage prompt (as we use for users who // don't want to set cookies at all but who don't want // continual prompts about it)... (storagePrompt !== 'false' && // ...and this user hasn't previously indicated a desire for storage !/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/.test( document.cookie ))) // ...then show the storage prompt. ) { const options = Boolean(storage) // Open select-with-checkbox dialog // From svg-editor.js svgEditor.storagePromptState = 'waiting' const $storageDialog = document.getElementById('se-storage-dialog') $storageDialog.setAttribute('dialog', 'open') $storageDialog.setAttribute('storage', options) } else if (!noStorageOnLoad || forceStorage) { setupBeforeUnloadListener() } } } } } </code></pre> </article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="editor_extensions_ext-layer_view_locale_zh-CN.module_js.html">editor/extensions/ext-layer_view/locale/zh-CN.js</a></li><li><a href="module-SVGEditor.html">SVGEditor</a></li><li><a href="module-contextmenu.html">contextmenu</a></li><li><a href="module-jGraduate.html">jGraduate</a></li><li><a href="module-jPicker.html">jPicker</a></li><li><a href="module-locale.html">locale</a></li></ul><h3>Externals</h3><ul><li><a href="external-JamilihArray.html">JamilihArray</a></li><li><a href="external-Math.html">Math</a></li><li><a href="external-Window.html">Window</a></li><li><a href="external-jQuery.html">jQuery</a></li></ul><h3>Namespaces</h3><ul><li><a href="external-jQuery.fn.html">fn</a></li><li><a href="external-jQuery.fn.$.fn.jPicker.defaults.html">defaults</a></li><li><a href="external-jQuery.fn.exports.jPickerMethod.html">exports.jPickerMethod</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.html">jGraduateDefaults</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.images.html">images</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.window.html">window</a></li><li><a href="external-jQuery.jGraduate.html">jGraduate</a></li><li><a href="external-jQuery.jPicker.html">jPicker</a></li><li><a href="external-jQuery.jPicker.ColorMethods.html">ColorMethods</a></li></ul><h3>Classes</h3><ul><li><a href="BottomPanel.html">BottomPanel</a></li><li><a href="Dropdown.html">Dropdown</a></li><li><a href="EditorStartup.html">EditorStartup</a></li><li><a href="ElixMenuButton.html">ElixMenuButton</a></li><li><a href="ElixNumberSpinBox.html">ElixNumberSpinBox</a></li><li><a href="ExplorerButton.html">ExplorerButton</a></li><li><a href="FlyingButton.html">FlyingButton</a></li><li><a href="LayersPanel.html">LayersPanel</a></li><li><a href="LeftPanel.html">LeftPanel</a></li><li><a href="MainMenu.html">MainMenu</a></li><li><a href="NumberSpinBox.html">NumberSpinBox</a></li><li><a href="PaintBox.html">PaintBox</a></li><li><a href="PlainNumberSpinBox.html">PlainNumberSpinBox</a></li><li><a href="Rulers.html">Rulers</a></li><li><a href="SEInput.html">SEInput</a></li><li><a href="SEPalette.html">SEPalette</a></li><li><a href="SESpinInput.html">SESpinInput</a></li><li><a href="SeCMenuDialog.html">SeCMenuDialog</a></li><li><a href="SeCMenuLayerDialog.html">SeCMenuLayerDialog</a></li><li><a href="SeColorPicker.html">SeColorPicker</a></li><li><a href="SeEditPrefsDialog.html">SeEditPrefsDialog</a></li><li><a href="SeExportDialog.html">SeExportDialog</a></li><li><a href="SeImgPropDialog.html">SeImgPropDialog</a></li><li><a href="SeList.html">SeList</a></li><li><a href="SeMenu.html">SeMenu</a></li><li><a href="SeMenuItem.html">SeMenuItem</a></li><li><a href="SePlainAlertDialog.html">SePlainAlertDialog</a></li><li><a href="SePlainBorderButton.html">SePlainBorderButton</a></li><li><a href="SePromptDialog.html">SePromptDialog</a></li><li><a href="SeStorageDialog.html">SeStorageDialog</a></li><li><a href="SeSvgSourceEditorDialog.html">SeSvgSourceEditorDialog</a></li><li><a href="SeText.html">SeText</a></li><li><a href="ToolButton.html">ToolButton</a></li><li><a href="TopPanel.html">TopPanel</a></li><li><a href="configObj.html">configObj</a></li><li><a href="external-jQuery.jGraduate.Paint.html">Paint</a></li><li><a href="external-jQuery.jPicker.Color.html">Color</a></li><li><a href="module.exports.html">exports</a></li><li><a href="module.exports_module.exports.html">exports</a></li><li><a href="module-SVGEditor-Editor.html">Editor</a></li><li><a href="module-jPicker.module.exports.html">module.exports</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-SVGEditor.Config.html">Config</a></li><li><a href="module-SVGEditor.Prefs.html">Prefs</a></li><li><a href="module-SVGthis.CustomHandler.html">CustomHandler</a></li><li><a href="module-locale.LocaleEditorInit.html">LocaleEditorInit</a></li></ul><h3>Events</h3><ul><li><a href="module-SVGEditor.html#event:event:svgEditorReadyEvent">svgEditorReadyEvent</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-CanvasAPI.html">CanvasAPI</a></li><li><a href="tutorial-Editor.html">Editor</a></li><li><a href="tutorial-EditorAPI.html">EditorAPI</a></li><li><a href="tutorial-Events.html">Events</a></li><li><a href="tutorial-FrequentlyAskedQuestions.html">Frequently Asked Questions (FAQ)</a></li></ul><h3>Global</h3><ul><li><a href="global.html#attributeChangedCallback">attributeChangedCallback</a></li><li><a href="global.html#connectedCallback">connectedCallback</a></li><li><a href="global.html#constructor">constructor</a></li><li><a href="global.html#createTemplate">createTemplate</a></li><li><a href="global.html#decrement">decrement</a></li><li><a href="global.html#expireCookie">expireCookie</a></li><li><a href="global.html#formatValueFormatthenumericvalueasastring.Thisisusedafterincrementing/decrementingthevaluetoreformatthevalueasastring.">formatValue Format the numeric value as a string. This is used after incrementing/decrementing the value to reformat the value as a string.</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#handleClick">handleClick</a></li><li><a href="global.html#handleClose">handleClose</a></li><li><a href="global.html#handleInput">handleInput</a></li><li><a href="global.html#handleKeyDown">handleKeyDown</a></li><li><a href="global.html#handleMouseDown">handleMouseDown</a></li><li><a href="global.html#handleMouseUp">handleMouseUp</a></li><li><a href="global.html#handleOptionsChange">handleOptionsChange</a></li><li><a href="global.html#handleSelect">handleSelect</a></li><li><a href="global.html#handleShow">handleShow</a></li><li><a href="global.html#increment">increment</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#inputsize">inputsize</a></li><li><a href="global.html#isNullish">isNullish</a></li><li><a href="global.html#loadloadConfig">load load Config</a></li><li><a href="global.html#loadFromURLLoadconfig/datafromURLifgiven">loadFromURL Load config/data from URL if given</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#observedAttributes">observedAttributes</a></li><li><a href="global.html#parseValue">parseValue</a></li><li><a href="global.html#pref">pref</a></li><li><a href="global.html#readySignal">readySignal</a></li><li><a href="global.html#regexEscape">regexEscape</a></li><li><a href="global.html#removeStoragePrefCookie">removeStoragePrefCookie</a></li><li><a href="global.html#replaceStoragePrompt">replaceStoragePrompt</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#setupCurConfig">setupCurConfig</a></li><li><a href="global.html#setupCurPrefs">setupCurPrefs</a></li><li><a href="global.html#src">src</a></li><li><a href="global.html#stateEffects">stateEffects</a></li><li><a href="global.html#stepDown">stepDown</a></li><li><a href="global.html#stepUp">stepUp</a></li><li><a href="global.html#triggerInputChanged">triggerInputChanged</a></li><li><a href="global.html#updateLib">updateLib</a></li><li><a href="global.html#value">value</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.5</a> on Sun Dec 07 2025 19:46:40 GMT+0100 (Central European Standard Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>