Merge pull request #607 from SVG-Edit/build-update

Make easier the integration of svgEdit into other applications

package.json

@@ -1,9 +1,9 @@
 {
   "name": "svgedit",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "description": "Powerful SVG-Editor for your browser ",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/Editor.js",
+  "module": "dist/Editor.js",
   "directories": {
     "doc": "docs",
     "example": "examples",
@@ -79,7 +79,7 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "canvg": "3.0.7",
-    "core-js": "3.15.2",
+    "core-js": "3.16.0",
     "elix": "15.0.0",
     "html2canvas": "1.1.4",
     "i18next": "20.3.5",
@@ -91,41 +91,41 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.8",
-    "@babel/preset-env": "7.14.8",
+    "@babel/preset-env": "7.14.9",
     "@babel/register": "7.14.5",
-    "@babel/runtime-corejs3": "7.14.8",
-    "@cypress/code-coverage": "3.9.9",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@cypress/code-coverage": "3.9.10",
     "@cypress/fiddle": "1.19.2",
     "@fintechstudios/eslint-plugin-chai-as-promised": "3.1.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "18.0.0",
-    "@rollup/plugin-dynamic-import-vars": "1.3.0",
+    "@rollup/plugin-dynamic-import-vars": "1.4.0",
     "@rollup/plugin-node-resolve": "13.0.4",
     "@rollup/plugin-replace": "3.0.0",
-    "@rollup/plugin-url": "6.0.0",
-    "@web/dev-server": "0.1.17",
-    "@web/dev-server-rollup": "0.3.6",
-    "axe-core": "4.3.1",
+    "@rollup/plugin-url": "6.1.0",
+    "@web/dev-server": "0.1.20",
+    "@web/dev-server-rollup": "0.3.8",
+    "axe-core": "4.3.2",
     "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
     "copyfiles": "2.4.1",
-    "core-js-bundle": "3.15.2",
+    "core-js-bundle": "3.16.0",
     "cp-cli": "2.0.0",
-    "cypress": "8.0.0",
+    "cypress": "8.1.0",
     "cypress-axe": "0.12.2",
     "cypress-multi-reporters": "1.5.0",
     "cypress-plugin-snapshots": "1.4.4",
-    "eslint": "7.31.0",
+    "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-plugin-array-func": "3.1.7",
     "eslint-plugin-chai-expect": "2.2.0",
     "eslint-plugin-chai-expect-keywords": "2.1.0",
-    "eslint-plugin-chai-friendly": "0.7.1",
+    "eslint-plugin-chai-friendly": "0.7.2",
     "eslint-plugin-compat": "3.11.1",
     "eslint-plugin-cypress": "2.11.3",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-html": "6.1.2",
     "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsdoc": "36.0.2",
+    "eslint-plugin-jsdoc": "36.0.6",
     "eslint-plugin-markdown": "2.2.0",
     "eslint-plugin-no-unsanitized": "3.1.5",
     "eslint-plugin-no-use-extend-native": "0.5.0",
@@ -146,13 +146,13 @@
     "remark-cli": "9.0.0",
     "remark-lint-ordered-list-marker-value": "2.0.1",
     "rimraf": "3.0.2",
-    "rollup": "2.54.0",
+    "rollup": "2.55.1",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-filesize": "9.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-re": "1.0.7",
     "rollup-plugin-terser": "7.0.2",
-    "start-server-and-test": "1.13.0"
+    "start-server-and-test": "1.13.1"
   }
 }

rollup.config.js

@@ -37,19 +37,19 @@ rimraf('./dist', () => console.info('recreating dist'));
 
 // config for svgedit core module
 const config = [ {
-  input: [ 'src/editor/index.js' ],
+  input: [ 'src/editor/Editor.js' ],
   output: [
     {
       format: 'es',
       inlineDynamicImports: true,
       sourcemap: true,
-      file: 'dist/editor/index.js'
+      file: 'dist/editor/Editor.js'
     },
     {
       format: 'es',
       inlineDynamicImports: true,
       sourcemap: true,
-      file: 'dist/editor/xdomain-index.js',
+      file: 'dist/editor/xdomain-Editor.js',
       intro: 'const XDOMAIN = true;'
     }
   ],

src/editor/ConfigObj.js

@@ -183,7 +183,6 @@ export default class ConfigObj {
       'ext-polystar',
       'ext-storage',
       'ext-opensave'
-      // 'ext-helloworld',
     ];
     this.curConfig = {
       // We do not put on defaultConfig to simplify object copying

src/editor/Editor.js

@@ -40,8 +40,8 @@ class Editor extends EditorStartup {
   /**
    *
    */
-  constructor() {
-    super();
+  constructor(div = null) {
+    super(div);
     /**
     * @type {boolean}
     */

src/editor/EditorStartup.js

@@ -50,10 +50,10 @@ class EditorStartup {
   /**
    *
    */
-  constructor () {
+  constructor (div) {
     this.extensionsAdded = false;
     this.messageQueue = [];
-    this.$svgEditor = $id('svg_editor');
+    this.$svgEditor = div??$id('svg_editor');
   }
   /**
   * Auto-run after a Promise microtask.
@@ -365,7 +365,7 @@ class EditorStartup {
       inp.blur();
     };
 
-    const liElems = document.getElementById('svg_editor').querySelectorAll('button, select, input:not(#text)');
+    const liElems = this.$svgEditor.querySelectorAll('button, select, input:not(#text)');
     Array.prototype.forEach.call(liElems, function(el){
       el.addEventListener("focus", (e) => {
         inp = e.currentTarget;

src/editor/index.html

@@ -22,13 +22,36 @@
 
   <!-- If you do not wish to add extensions by URL, you can add calls
       within the following file to svgEditor.setConfig -->
-  <script type="module" src="./index.js"></script>
+  <script type="module">
+    /* for available options see the file `docs/tutorials/ConfigOptions.md */
+    import Editor from './Editor.js';
+    const svgEditor = new Editor(document.getElementsByClassName('svg_editor')[0]);
+    svgEditor.init();
+    svgEditor.setConfig({
+      allowInitialUserOverride: true,
+      extensions: [],
+      noDefaultExtensions: false,
+      userExtensions: [/* '../ext-helloworld/ext-helloworld.js' */]
+    });
+
+    // Variable XDOMAIN below is created by Rollup for the Xdomain build (see rollup.config.js)
+    /* globals XDOMAIN */
+    try { // try clause to avoid js to complain if XDOMAIN undefined
+      if (XDOMAIN) {
+        svgEditor.setConfig({
+          canvasName: 'xdomain', // Namespace this
+          allowedOrigins: [ '*' ]
+        });
+        console.info('xdomain config activated');
+      }
+    } catch (error) {/* empty fn */ }
+  </script>
 
   <title>SVG-edit</title>
 </head>
 
 <body>
-  <div id="svg_editor" role="main"></div>
+  <div class="svg_editor" role="main"></div>
 </body>
 
 </html>

src/editor/index.js

@@ -1,142 +0,0 @@
-// CONFIG AND EXTENSION SETTING
-/*
-For default config and extensions (and available options) available to
-`setConfig()`, see the file `docs/tutorials/ConfigOptions.md`
-*/
-
-import Editor from './Editor.js';
-
-const svgEditor = new Editor();
-svgEditor.init();
-
-// URL OVERRIDE CONFIG
-svgEditor.setConfig({
-  /* To override the ability for URLs to set URL-based SVG content,
-  uncomment the following: */
-  // preventURLContentLoading: true,
-  /* To override the ability for URLs to set other configuration (including
-    extension config), uncomment the following: */
-  // preventAllURLConfig: true,
-  /* To override the ability for URLs to set their own extensions, uncomment the
-  following (note that if `setConfig()` is used in extension code, it will still
-  be additive to extensions, however): */
-  // lockExtensions: true,
-});
-
-svgEditor.setConfig(
-  {
-    // Indicate pref settings here if you wish to allow user storage or URL
-    //   settings to be able to override your default preferences (unless
-    //   other config options have already explicitly prevented one or the
-    //   other)
-  },
-  { allowInitialUserOverride: true }
-);
-
-// EXTENSION CONFIG
-svgEditor.setConfig({
-  extensions: [],
-  noDefaultExtensions: false,
-  // in addition to standard extensions, it is possible to add user extensions.
-  // they behave exactly like all extensions but they can be anywhere
-  // so the full relative path needs to specified for each user extensions.
-  userExtensions: [/* '../ext-helloworld/ext-helloworld.js' */]
-});
-
-// OTHER CONFIG
-svgEditor.setConfig({
-  // canvasName: 'default',
-  // canvas_expansion: 3,
-  // initFill: {
-  //   color: 'FF0000', // solid red
-  //   opacity: 1
-  // },
-  // initStroke: {
-  //   width: 5,
-  //   color: '000000', // solid black
-  //   opacity: 1
-  // },
-  // initOpacity: 1,
-  // initTool: 'select',
-  // exportWindowType: 'new', // 'same'
-  // wireframe: false,
-  // showlayers: false,
-  // no_save_warning: false,
-  // PATH CONFIGURATION
-  // imgPath: 'images/',
-  /*
-  Uncomment the following to allow at least same domain (embedded) access,
-  including `file:///` access.
-  Setting as `['*']` would allow any domain to access but would be unsafe to
-  data privacy and integrity.
-  */
-  // May be 'null' (as a string) when used as a `file:///` URL
-  // allowedOrigins: [location.origin || 'null'],
-  // DOCUMENT PROPERTIES
-  // dimensions: [640, 480],
-  // EDITOR OPTIONS
-  // gridSnapping: false,
-  // gridColor: '#000',
-  // baseUnit: 'px',
-  // snappingStep: 10,
-  // showRulers: true,
-  // EXTENSION-RELATED (GRID)
-  // showGrid: false, // Set by ext-grid.js
-  // EXTENSION-RELATED (STORAGE)
-  // Some interaction with `ext-storage.js`; prevent even the loading of
-  //  previously saved local storage
-  // noStorageOnLoad: false,
-  // Some interaction with `ext-storage.js`; strongly discouraged from
-  //  modification as it bypasses user privacy by preventing them from
-  //  choosing whether to keep local storage or not
-  // forceStorage: false,
-  // Used by `ext-storage.js`; empty any prior storage if the user
-  //  declines to store
-  // emptyStorageOnDecline: true,
-});
-
-// PREF CHANGES
-/*
-setConfig() can also be used to set preferences in addition to
-  configuration (see defaultPrefs in svg-editor.js for a list of
-  possible settings), but at least if you are using ext-storage.js
-  to store preferences, it will probably be better to let your
-  users control these.
-As with configuration, one may use allowInitialUserOverride, but
-  in the case of preferences, any previously stored preferences
-  will also thereby be enabled to override this setting (and at a
-  higher priority than any URL preference setting overrides).
-  Failing to use allowInitialUserOverride will ensure preferences
-  are hard-coded here regardless of URL or prior user storage setting.
-*/
-svgEditor.setConfig({
-  // Set dynamically within locale.js if not previously set
-  // lang: '',
-  // Will default to 's' if the window height is smaller than the minimum
-  //  height and 'm' otherwise
-  /**
-  * When showing the preferences dialog, svg-editor.js currently relies
-  * on `curPrefs` instead of `svgEditor.pref`, so allowing an override for
-  * `bkgd_color` means that this value won't have priority over block
-  * auto-detection as far as determining which color shows initially
-  * in the preferences dialog (though it can be changed and saved).
-  */
-  // bkgd_color: '#FFF',
-  // bkgd_url: '',
-  // img_save: 'embed',
-  // Only shows in UI as far as alert notices
-  // save_notice_done: false,
-  // export_notice_done: false
-});
-
-// Variable XDOMAIN below is created by Rollup for the Xdomain build (see rollup.config.js)
-/* globals XDOMAIN */
-try { // try clause to avoid js to complain if XDOMAIN undefined
-  if (XDOMAIN) {
-    svgEditor.setConfig({
-      canvasName: 'xdomain', // Namespace this
-      allowedOrigins: [ '*' ]
-    });
-    console.info('xdomain config activated');
-  }
-} catch (error) {/* empty fn */}

src/editor/panels/LayersPanel.js

@@ -205,7 +205,7 @@ class LayersPanel {
     window.addEventListener("mouseup", (_evt) => {
       this.sidedrag = -1;
       this.sidedragging = false;
-      $id("svg_editor").removeEventListener(
+      this.editor.$svgEditor.removeEventListener(
         "mousemove",
         this.resizeSidePanel.bind(this)
       );

src/editor/svgedit.css

@@ -15,23 +15,14 @@ body {
 }
 
 html, body, div{
-  -webkit-user-select: text;
-  -khtml-user-select: text;
-  -moz-user-select: text;
-  -o-user-select: text;
   user-select: text;
-  /* this will work for QtWebKit in future */
-  -webkit-user-drag: text;
 }
 
-#svg_editor * {
+.svg_editor * {
   transform-origin: 0 0;
-  -moz-transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
 }
 
-#svg_editor {
+.svg_editor {
   font-size: 8pt;
   font-family: Verdana, Helvetica, Arial;
   color: var(--text-color);
@@ -76,8 +67,7 @@ hr {
   width: 0;
   overflow: hidden;
   margin: 0;
-  -moz-user-select: none;
-  -webkit-user-select: none;
+  user-select: none;
 }
 
 /*
@@ -98,16 +88,12 @@ hr {
   margin-left: 6px;
   cursor: pointer;
   border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
+  user-select: none;
 }
 
 #sidepanel_handle * {
   cursor: pointer;
-  -moz-user-select: none;
-  -webkit-user-select: none;
+  user-select: none;
 }
 #layerbuttons {
   margin: 0;