fix editor start with src and dist using es-dev-server

src/editor/extensions/ext-closepath.js

@@ -14,7 +14,6 @@ export default {
   name: 'closepath',
   async init ({importLocale, $}) {
     const strings = await importLocale();
-    const svgEditor = this;
     let selElems;
     const updateButton = function (path) {
       const seglist = path.pathSegList,
@@ -49,7 +48,7 @@ export default {
     const buttons = [
       {
         id: 'tool_openpath',
-        icon: svgEditor.curConfig.extIconsPath + 'openpath.png',
+        icon: 'openpath.png',
         type: 'context',
         panel: 'closepath_panel',
         events: {
@@ -60,7 +59,7 @@ export default {
       },
       {
         id: 'tool_closepath',
-        icon: svgEditor.curConfig.extIconsPath + 'closepath.png',
+        icon: 'closepath.png',
         type: 'context',
         panel: 'closepath_panel',
         events: {
@@ -73,7 +72,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg',
+      svgicons: 'closepath_icons.svg',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-connector.js

@@ -366,7 +366,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.imgPath + 'conn.svg',
+      svgicons: 'conn.svg',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-eyedropper.js

@@ -7,8 +7,6 @@
  *
  */
 
-import './eyedropper-icon.xml';
-
 export default {
   name: 'eyedropper',
   async init (S) {
@@ -64,7 +62,7 @@ export default {
     const buttons = [
       {
         id: 'tool_eyedropper',
-        icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
+        icon: 'eyedropper.png',
         type: 'mode',
         events: {
           click () {
@@ -76,7 +74,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml',
+      svgicons: 'eyedropper-icon.xml',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-foreignobject.js

@@ -7,8 +7,6 @@
  *
  */
 
-import './foreignobject-icons.xml';
-
 export default {
   name: 'foreignobject',
   async init (S) {
@@ -108,7 +106,7 @@ export default {
 
     const buttons = [{
       id: 'tool_foreign',
-      icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
+      icon: 'foreignobject-tool.png',
       type: 'mode',
       events: {
         click () {
@@ -117,7 +115,7 @@ export default {
       }
     }, {
       id: 'edit_foreign',
-      icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
+      icon: 'foreignobject-edit.png',
       type: 'context',
       panel: 'foreignObject_panel',
       events: {
@@ -163,7 +161,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml',
+      svgicons: 'foreignobject-icons.xml',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-grid.js

@@ -7,8 +7,6 @@
  *
  */
 
-import './grid-icon.xml';
-
 export default {
   name: 'grid',
   async init ({$, NS, getTypeMap, importLocale}) {
@@ -140,7 +138,7 @@ export default {
     }
     const buttons = [{
       id: 'view_grid',
-      icon: svgEditor.curConfig.extIconsPath + 'grid.png',
+      icon: 'grid.png',
       type: 'context',
       panel: 'editor_panel',
       events: {
@@ -152,7 +150,7 @@ export default {
     }];
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml',
+      svgicons: 'grid-icon.xml',
 
       zoomChanged (zoom) {
         if (showGrid) { updateGrid(zoom); }

src/editor/extensions/ext-helloworld.js

@@ -23,7 +23,7 @@ export default {
       name: strings.name,
       // For more notes on how to make an icon file, see the source of
       // the helloworld-icon.xml
-      svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',
+      svgicons: 'helloworld-icon.xml',
 
       // Multiple buttons can be added in this array
       buttons: [{
@@ -31,7 +31,7 @@ export default {
         id: 'hello_world',
 
         // Fallback, e.g., for `file:///` access
-        icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
+        icon: 'helloworld.png',
 
         // This indicates that the button will be added to the "mode"
         // button panel on the left side

src/editor/extensions/ext-imagelib.js

@@ -7,8 +7,6 @@
  *
  */
 
-import './ext-imagelib.xml';
-
 export default {
   name: 'imagelib',
   async init ({$, decode64, importLocale, dropXMLInternalSubset}) {
@@ -20,15 +18,13 @@ export default {
 
     const svgEditor = this;
 
-    const {uiStrings, canvas: svgCanvas, curConfig: {extIconsPath}} = svgEditor;
+    const {uiStrings, canvas: svgCanvas} = svgEditor;
 
     imagelibStrings.imgLibs = imagelibStrings.imgLibs.map(({name, url, description}) => {
       // Todo: Adopt some standard formatting library like `fluent.js` instead
       url = url
         // Keep these regexes as is in prep. for switching to `u` flag
         //  which will require escaping
-        // eslint-disable-next-line unicorn/better-regex
-        .replace(/\{path\}/g, extIconsPath)
         .replace(
           // eslint-disable-next-line unicorn/better-regex
           /\{modularVersion\}/g,
@@ -466,7 +462,7 @@ export default {
     const buttons = [{
       id: 'tool_imagelib',
       type: 'app_menu', // _flyout
-      icon: extIconsPath + 'imagelib.png',
+      icon: 'imagelib.png',
       position: 4,
       events: {
         mouseup: showBrowser
@@ -474,7 +470,7 @@ export default {
     }];
 
     return {
-      svgicons: extIconsPath + 'ext-imagelib.xml',
+      svgicons: 'ext-imagelib.xml',
       buttons: imagelibStrings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-markers.js

@@ -29,8 +29,6 @@
  *
 */
 
-import './markers-icons.xml';
-
 export default {
   name: 'markers',
   async init (S) {
@@ -500,7 +498,7 @@ export default {
           buttons.push({
             id: idPrefix + pos + '_' + id,
             svgicon: id,
-            icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
+            icon: 'markers-' + id + '.png',
             title,
             type: 'context',
             events: {click: setArrowFromButton},
@@ -557,7 +555,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'markers-icons.xml',
+      svgicons: 'markers-icons.xml',
       callback () {
         $('#marker_panel').addClass('toolset').hide();
       },

src/editor/extensions/ext-mathjax.js

@@ -124,7 +124,7 @@ export default {
     const buttons = [{
       id: 'tool_mathjax',
       type: 'mode',
-      icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
+      icon: 'mathjax.png',
       events: {
         async click () {
           // Set the mode.
@@ -203,7 +203,7 @@ export default {
             //  the modular type as does `extPath`
             try {
               // eslint-disable-next-line node/no-unsupported-features/es-syntax
-              await import(svgEditor.curConfig.extIconsPath + mathjaxSrcSecure);
+              await import(mathjaxSrcSecure);
               // When MathJax is loaded get the div where the math will be rendered.
               MathJax.Hub.queue.Push(function () {
                 math = MathJax.Hub.getAllJax('#mathjax_creator')[0];
@@ -222,7 +222,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'mathjax-icons.xml',
+      svgicons: 'mathjax-icons.xml',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-panning.js

@@ -10,8 +10,6 @@
   This is a very basic SVG-Edit extension to let tablet/mobile devices pan without problem
 */
 
-import './ext-panning.xml';
-
 export default {
   name: 'panning',
   async init ({importLocale}) {
@@ -20,7 +18,7 @@ export default {
     const svgCanvas = svgEditor.canvas;
     const buttons = [{
       id: 'ext-panning',
-      icon: svgEditor.curConfig.extIconsPath + 'panning.png',
+      icon: 'panning.png',
       type: 'mode',
       events: {
         click () {
@@ -30,7 +28,7 @@ export default {
     }];
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'ext-panning.xml',
+      svgicons: 'ext-panning.xml',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-placemark.js

@@ -276,7 +276,7 @@ export default {
         buttons.push({
           id: 'placemark_marker_' + id,
           svgicon: id,
-          icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
+          icon: 'markers-' + id + '.png',
           title,
           type: 'context',
           events: {click: setArrowFromButton},
@@ -290,7 +290,7 @@ export default {
 
     const buttons = [{
       id: 'tool_placemark',
-      icon: svgEditor.curConfig.extIconsPath + 'placemark.png',
+      icon: 'placemark.png',
       type: 'mode',
       position: 12,
       events: {
@@ -335,7 +335,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'placemark-icons.xml',
+      svgicons: 'placemark-icons.xml',
       buttons: addMarkerButtons(strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       })),

src/editor/extensions/ext-polygon.js

@@ -6,8 +6,6 @@
  *
  */
 
-import './polygon-icons.svg';
-
 export default {
   name: 'polygon',
   async init (S) {
@@ -131,7 +129,7 @@ export default {
     */
     const buttons = [{
       id: 'tool_polygon',
-      icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
+      icon: 'polygon.png',
       type: 'mode',
       position: 11,
       events: {
@@ -155,7 +153,7 @@ export default {
     }];
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'polygon-icons.svg',
+      svgicons: 'polygon-icons.svg',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-shapes.js

@@ -7,8 +7,6 @@
  *
  */
 
-import './ext-shapes.xml';
-
 export default {
   name: 'shapes',
   async init ({$, importLocale}) {
@@ -128,7 +126,7 @@ export default {
 
       if (!lib) {
         $('#shape_buttons').html(strings.loading);
-        $.getJSON(svgEditor.curConfig.extIconsPath + 'shapelib/' + catId + '.json', function (result) {
+        $.getJSON('./shapelib/' + catId + '.json', function (result) {
           curLib = library[catId] = {
             data: result.data,
             size: result.size,
@@ -145,7 +143,7 @@ export default {
     }
     const buttons = [{
       id: 'tool_shapelib',
-      icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
+      icon: 'shapes.png',
       type: 'mode_flyout', // _flyout
       position: 6,
       events: {
@@ -156,7 +154,7 @@ export default {
     }];
 
     return {
-      svgicons: svgEditor.curConfig.extIconsPath + 'ext-shapes.xml',
+      svgicons: 'ext-shapes.xml',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-star.js

@@ -6,8 +6,6 @@
  *
  */
 
-import './star-icons.svg';
-
 export default {
   name: 'star',
   async init (S) {
@@ -69,7 +67,7 @@ export default {
     */
     const buttons = [{
       id: 'tool_star',
-      icon: svgEditor.curConfig.extIconsPath + 'star.png',
+      icon: 'star.png',
       type: 'mode',
       position: 12,
       events: {
@@ -111,7 +109,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
+      svgicons: 'star-icons.svg',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       }),

src/editor/extensions/ext-webappfind.js

@@ -73,7 +73,7 @@ export default {
     */
     const buttons = [{
       id: 'webappfind_save', //
-      icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
+      icon: 'webappfind.png',
       type: 'app_menu',
       position: 4, // Before 0-based index position 4 (after the regular "Save Image (S)")
       events: {
@@ -100,7 +100,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: svgEditor.curConfig.extIconsPath + 'webappfind-icon.svg',
+      svgicons: 'webappfind-icon.svg',
       buttons: strings.buttons.map((button, i) => {
         return Object.assign(buttons[i], button);
       })

src/editor/index.js

@@ -78,9 +78,7 @@ svgEditor.setConfig({
   // no_save_warning: false,
   // PATH CONFIGURATION
   // imgPath: 'images/',
-  // langPath: './locale/',
   // extPath: 'extensions/',
-  // jGraduatePath: 'jgraduate/images/',
   /*
   Uncomment the following to allow at least same domain (embedded) access,
   including `file:///` access.

src/editor/locale.js

@@ -363,13 +363,12 @@ export const readLang = async function (langData) {
  * @function module:locale.putLocale
  * @param {string} givenParam
  * @param {string[]} goodLangs
- * @param {{langPath: string}} conf
  * @fires module:svgcanvas.SvgCanvas#event:ext_addLangData
  * @fires module:svgcanvas.SvgCanvas#event:ext_langReady
  * @fires module:svgcanvas.SvgCanvas#event:ext_langChanged
  * @returns {Promise<module:locale.LangAndData>} Resolves to result of {@link module:locale.readLang}
 */
-export const putLocale = async function (givenParam, goodLangs, conf) {
+export const putLocale = async function (givenParam, goodLangs) {
   if (givenParam) {
     langParam = givenParam;
   } else if (navigator.userLanguage) { // Explorer
@@ -384,8 +383,7 @@ export const putLocale = async function (givenParam, goodLangs, conf) {
   if (!goodLangs.includes(langParam) && langParam !== 'test') {
     langParam = 'en';
   }
-  const url = `${conf.langPath}lang.${langParam}.js`;
   // eslint-disable-next-line node/no-unsupported-features/es-syntax
-  const module = await import(url);
+  const module = await import(`./locale/lang.${langParam}.js`);
   return readLang(module.default);
 };

src/editor/svgedit.js

@@ -44,7 +44,7 @@ import {
   readLang, putLocale,
   setStrings,
   init as localeInit
-} from './locale/locale.js';
+} from './locale.js';
 
 const {$q} = Utils;
 
@@ -157,10 +157,7 @@ const callbacks = [],
   * @property {string} [canvasName="default"] Used to namespace storage provided via `ext-storage.js`; you can use this if you wish to have multiple independent instances of SVG Edit on the same domain
   * @property {boolean} [no_save_warning=false] If `true`, prevents the warning dialog box from appearing when closing/reloading the page. Mostly useful for testing.
   * @property {string} [imgPath="images/"] The path where the SVG icons are located, with trailing slash. Note that as of version 2.7, this is not configurable by URL for security reasons.
-  * @property {string} [langPath="locale/"] The path where the language files are located, with trailing slash. Default will be changed to `../dist/locale/` if this is a modular load. Note that as of version 2.7, this is not configurable by URL for security reasons.
   * @property {string} [extPath="extensions/"] The path used for extension files, with trailing slash. Default will be changed to `../dist/extensions/` if this is a modular load. Note that as of version 2.7, this is not configurable by URL for security reasons.
-  * @property {string} [extIconsPath="extensions/"] The path used for extension icons, with trailing slash.
-  * @property {string} [jGraduatePath="jgraduate/images/"] The path where jGraduate images are located. Note that as of version 2.7, this is not configurable by URL for security reasons.
   * @property {boolean} [preventAllURLConfig=false] Set to `true` to override the ability for URLs to set non-content configuration (including extension config). Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!
   * @property {boolean} [preventURLContentLoading=false] Set to `true` to override the ability for URLs to set URL-based SVG content. Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!
   * @property {boolean} [lockExtensions=false] Set to `true` to override the ability for URLs to set their own extensions; disallowed in URL setting. There is no need for this when `preventAllURLConfig` is used. Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!
@@ -234,11 +231,8 @@ const callbacks = [],
     no_save_warning: false,
     // PATH CONFIGURATION
     // The following path configuration items are disallowed in the URL (as should any future path configurations)
-    langPath: './locale/', // Default will be changed if this is a non-modular load
     extPath: './extensions/', // Default will be changed if this is a non-modular load
     imgPath: './images/',
-    jGraduatePath: './images/',
-    extIconsPath: './extensions/',
     // DOCUMENT PROPERTIES
     // Change the following to a preference (already in the Document Properties dialog)?
     dimensions: [640, 480],
@@ -734,7 +728,7 @@ editor.init = function () {
       // security reasons, even for same-domain
       // ones given potential to interact in undesirable
       // ways with other script resources
-      ['langPath', 'extPath', 'imgPath', 'jGraduatePath', 'extIconsPath']
+      ['extPath', 'imgPath']
         .forEach(function (pathConfig) {
           if (urldata[pathConfig]) {
             delete urldata[pathConfig];
@@ -804,9 +798,7 @@ editor.init = function () {
    */
   const extAndLocaleFunc = async function () {
     // const lang = ('lang' in curPrefs) ? curPrefs.lang : null;
-    const {langParam, langData} = await editor.putLocale(
-      editor.pref('lang'), goodLangs, curConfig
-    );
+    const {langParam, langData} = await editor.putLocale(editor.pref('lang'), goodLangs);
     await setLang(langParam, langData);
 
     const {ok, cancel} = uiStrings.common;
@@ -3299,7 +3291,7 @@ editor.init = function () {
 
       if (svgicons) {
         return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new
-          $.svgIcons(svgicons, {
+          $.svgIcons(`${curConfig.imgPath}${svgicons}`, {
             w: 24, h: 24,
             id_match: false,
             no_img: (!isWebkit()),
@@ -4687,7 +4679,7 @@ editor.init = function () {
     // set language
     const lang = $('#lang_select').val();
     if (lang && lang !== editor.pref('lang')) {
-      const {langParam, langData} = await editor.putLocale(lang, goodLangs, curConfig);
+      const {langParam, langData} = await editor.putLocale(lang, goodLangs);
       await setLang(langParam, langData);
     }
 
@@ -4878,9 +4870,10 @@ editor.init = function () {
       .css(curConfig.colorPickerCSS || {left: pos.left - 140, bottom: 40})
       .jGraduate(
         {
+          images: {clientPath: './jgraduate/images/'},
           paint,
           window: {pickerTitle: title},
-          images: {clientPath: curConfig.jGraduatePath},
+          // images: {clientPath: curConfig.imgPath},
           newstop: 'inverse'
         },
         function (p) {