Merge pull request #542 from OptimistikSAS/issues/104

#104 Jquery convert to pure javascript

licenseInfo.json

@@ -7,8 +7,7 @@
     "stackblur-canvas",
     "regenerator-runtime",
     "core-js-bundle",
-    "underscore",
+    "underscore"
-    "deparam"
   ],
   "filesByLicense": {
     "(MIT OR GPL-2.0)": ["src/editor/jquerybbq/jquery.bbq.min.js"],

package.json

@@ -96,7 +96,6 @@
     "@web/dev-server-rollup": "0.3.4",
     "canvg": "3.0.7",
     "core-js": "3.12.1",
-    "deparam": "1.0.5",
     "elix": "15.0.0",
     "i18next": "20.3.0",
     "jquery": "3.6.0",

src/editor/ConfigObj.js

@@ -1,5 +1,4 @@
 // eslint-disable-next-line node/no-unpublished-import
-import deparam from 'deparam';
 import { mergeDeep } from './components/jgraduate/Util.js';
 
 /**
@@ -239,10 +238,14 @@ export default class ConfigObj {
    * @returns {void}
    */
   loadFromURL () {
+    const self = this;
     const { search, searchParams } = new URL(location);
-
     if (search) {
-      this.urldata = deparam(searchParams.toString());
+      this.urldata = {};
+      const entries = searchParams.entries();
+      for(const entry of entries) {
+        this.urldata[entry[0]] = entry[1];
+      }
 
       [ 'initStroke', 'initFill' ].forEach((prop) => {
         if (searchParams.has(`${prop}[color]`)) {
@@ -274,8 +277,8 @@ export default class ConfigObj {
       // ways with other script resources
       [ 'userExtensions', 'imgPath' ]
         .forEach(function (pathConfig) {
-          if (this.urldata[pathConfig]) {
+          if (self.urldata[pathConfig]) {
-            delete this.urldata[pathConfig];
+            delete self.urldata[pathConfig];
           }
         });
 
@@ -402,7 +405,6 @@ export default class ConfigObj {
      */
     const extendOrAdd = (cfgObj, key, val) => {
       if (cfgObj[key] && typeof cfgObj[key] === 'object') {
-        // $.extend(true, cfgObj[key], val);
         cfgObj[key] = mergeDeep(cfgObj[key], val);
       } else {
         cfgObj[key] = val;
@@ -452,7 +454,6 @@ export default class ConfigObj {
         } else if (this.defaultConfig[key] && typeof this.defaultConfig[key] === 'object') {
           this.curConfig[key] = Array.isArray(this.defaultConfig[key]) ? [] : {};
           this.curConfig[key] = mergeDeep(this.curConfig[key], val);
-          // $.extend(true, this.curConfig[key], val); // Merge properties recursively, e.g., on initFill, initStroke objects
         } else {
           this.curConfig[key] = val;
         }

src/editor/extensions/ext-connector/ext-connector.js

@@ -30,7 +30,7 @@ export default {
     const svgEditor = this;
     const { svgCanvas } = svgEditor;
     const { getElem, $id, mergeDeep } = svgCanvas;
-    const { $, svgroot } = S,
+    const { svgroot } = S,
       addElem = svgCanvas.addSVGElementFromJson,
       selManager = S.selectorManager;
     await loadExtensionTranslation(svgEditor);
@@ -392,8 +392,7 @@ export default {
           const mouseTarget = e.target;
 
           const parents = svgCanvas.getParents(mouseTarget.parentNode);
-
+          if (parents.includes(svgcontent)) {
-          if ($.inArray(svgcontent, parents) !== -1) {
             // Connectable element
 
             // If child of foreignObject, use parent

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -425,7 +425,7 @@ export default {
         const header = document.createElement('h1');
         browser.prepend(header);
         header.textContent = allLibs;
-        header.setAttribute('style', `position: absolute;top: 0;left: 0;width: 100%;`);
+        header.setAttribute('style', `position: absolute;top: 0px;left: 0px;width: 100%;`);
 
         const button = document.createElement('button');
         // eslint-disable-next-line max-len
@@ -437,10 +437,10 @@ export default {
         button.addEventListener('touchend', function () {
           $id("imgbrowse_holder").style.display = 'none';
         });
-        button.setAttribute('style', `position: absolute;top: 5;right: -10;`);
+        button.setAttribute('style', `position: absolute;top: 5px;right: 10px;`);
 
         const leftBlock = document.createElement('span');
-        leftBlock.setAttribute('style', `position: absolute;top: 5;left: 10;`);
+        leftBlock.setAttribute('style', `position: absolute;top: 5px;left: 10px;display: inline-flex;`);
         browser.appendChild(leftBlock);
 
         const back = document.createElement('button');

src/editor/extensions/ext-imagelib/index.js

@@ -1,4 +1,3 @@
-/* globals $ */
 const atags = document.querySelectorAll('a');
 Array.prototype.forEach.call(atags, function (aEle) {
   aEle.addEventListener('click', function (event) {
@@ -41,10 +40,15 @@ Array.prototype.forEach.call(atags, function (aEle) {
       });
       img.src = href;
     } else {
-      // Do ajax request for image's href value
+      fetch(href)
-      $.get(href, function (data) {
+      .then( (r) => r.text())
+      // eslint-disable-next-line promise/always-return
+      .then( (data) => {
         post({ href, data });
-      }, 'html'); // 'html' is necessary to keep returned data as a string
+        return data;
+      })
+      // eslint-disable-next-line no-console
+      .catch( (error) => console.log(error));
     }
     return false;
   });

src/editor/extensions/ext-server_opensave/ext-php_savefile.js

@@ -3,7 +3,7 @@
 
 export default {
   name: 'php_savefile',
-  init ({ $ }) {
+  init () {
     const svgEditor = this;
     const {
       canvas: svgCanvas
@@ -22,7 +22,15 @@ export default {
         const svg = '<?xml version="1.0" encoding="UTF-8"?>\n' + data,
           filename = getFileNameFromTitle();
 
-        $.post(saveSvgAction, { output_svg: svg, filename });
+        // $.post(saveSvgAction, { output_svg: svg, filename });
+        let postData =  { output_svg: svg, filename };
+        fetch(saveSvgAction, {
+          method: "POST",
+          body: JSON.stringify(postData)
+        }).then( (res) => {
+          return res;
+        })
+        .catch( (error) => { console.info('error =', error);});
       }
     });
   }

src/svgcanvas/path-actions.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Path functionality.
  * @module path
@@ -456,10 +455,9 @@ export const pathActionsMethod = (function () {
           // else, create a new point, update path element
           } else {
             // Checks if current target or parents are #svgcontent
-            if (!$.contains(
+            if (!(editorContext_.getContainer() !== editorContext_.getMouseTarget(evt) && editorContext_.getContainer().contains(
-              editorContext_.getContainer(),
               editorContext_.getMouseTarget(evt)
-            )) {
+            ))) {
               // Clicked outside canvas, so don't make point
               return false;
             }

src/svgcanvas/recalculate.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Recalculate.
  * @module recalculate
@@ -16,6 +15,9 @@ import {
   isIdentity, matrixMultiply, transformPoint, transformListToTransform,
   hasMatrixTransform
 } from './math.js';
+import {
+  mergeDeep
+} from '../editor/components/jgraduate/Util.js';
 
 let context_;
 
@@ -239,7 +241,7 @@ export const recalculateDimensions = function (selected) {
   // if we haven't created an initial array in polygon/polyline/path, then
   // make a copy of initial values and include the transform
   if (isNullish(initial)) {
-    initial = $.extend(true, {}, changes);
+    initial = mergeDeep({}, changes);
     for (const [ attr, val ] of Object.entries(initial)) {
       initial[attr] = convertToNum(attr, val);
     }

src/svgcanvas/selected-elem.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Tools for SVG selected element operation.
  * @module selected-elem
@@ -261,7 +260,7 @@ export const cloneSelectedElements = function (x, y) {
   }
   // use slice to quickly get the subset of elements we need
   const copiedElements = selectedElements.slice(0, i);
-  this.clearSelection(true);
+  elementContext_.clearSelection(true);
   // note that we loop in the reverse way because of the way elements are added
   // to the selectedElements array (top-first)
   const drawing = elementContext_.getDrawing();
@@ -723,7 +722,12 @@ export const convertToGroup = function (elem) {
       y: svg.getAttribute('y'),
     };
 
-    $(elem.firstChild.firstChild).unwrap();
+    // $(elem.firstChild.firstChild).unwrap();
+    const firstChild = elem.firstChild.firstChild;
+    if (firstChild) {
+      // eslint-disable-next-line no-unsanitized/property
+      firstChild.outerHTML = firstChild.innerHTML;
+    }
     dataStorage.remove(elem, 'gsvg');
 
     const tlist = getTransformList(elem);

src/svgcanvas/svg-exec.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Tools for svg.
  * @module svg
@@ -670,7 +669,12 @@ export const save = function (opts) {
   // remove the selected outline before serializing
   svgContext_.getCanvas().clearSelection();
   // Update save options if provided
-  if (opts) { $.extend(svgContext_.getSvgOption(), opts); }
+  if (opts) {
+    const saveOptions = svgContext_.getCanvas().mergeDeep(svgContext_.getSvgOption(), opts);
+    for (const [ key, value ] of Object.entries(saveOptions)) {
+      svgContext_.setSvgOption(key, value);
+    }
+  }
   svgContext_.setSvgOption('apply', true);
 
   // no need for doctype, see https://jwatt.org/svg/authoring/#doctype-declaration

src/svgcanvas/svgcanvas.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Numerous tools for working with the editor's "canvas".
  * @module svgcanvas
@@ -169,15 +168,16 @@ class SvgCanvas {
     // Alias Namespace constants
 
     // Default configuration options
-    const curConfig = {
+    let curConfig = {
       show_outside_canvas: true,
       selectNew: true,
       dimensions: [ 640, 480 ]
     };
 
     // Update config with new one if given
+    this.mergeDeep = mergeDeep;
     if (config) {
-      $.extend(curConfig, config);
+      curConfig = this.mergeDeep(curConfig, config);
     }
 
     // Array with width/height of canvas
@@ -188,7 +188,6 @@ class SvgCanvas {
     this.$id = $id;
     this.$qq = $qq;
     this.$qa = $qa;
-    this.mergeDeep = mergeDeep;
     this.getClosest = getClosest;
     this.getParents = getParents;
     /** A storage solution aimed at replacing jQuerys data function.
@@ -322,9 +321,8 @@ class SvgCanvas {
         opacity: curConfig.initOpacity
       }
     };
-
+    allProperties.text = this.mergeDeep({}, allProperties.shape);
-    allProperties.text = $.extend(true, {}, allProperties.shape);
+    allProperties.text = this.mergeDeep(allProperties.text, {
-    $.extend(allProperties.text, {
       fill: '#000000',
       stroke_width: curConfig.text && curConfig.text.stroke_width,
       font_size: curConfig.text && curConfig.text.font_size,
@@ -892,7 +890,7 @@ class SvgCanvas {
    * @type {module:svgcanvas.ExtensionArgumentObject}
    * @see {@link module:svgcanvas.PrivateMethods} source for the other methods/properties
    */
-      const argObj = $.extend(canvas.getPrivateMethods(), {
+      const argObj = canvas.mergeDeep(canvas.getPrivateMethods(), {
         $: jq,
         importLocale,
         svgroot,
@@ -904,7 +902,6 @@ class SvgCanvas {
       if (extObj) {
         extObj.name = name;
       }
-
       extensions[name] = extObj;
       return call('extension_added', extObj);
     };

src/svgcanvas/utilities.js

@@ -1,4 +1,3 @@
-/* globals $ */
 /**
  * Miscellaneous utilities.
  * @module utilities
@@ -17,7 +16,7 @@ import {
   isWebkit, supportsHVLineContainerBBox, supportsPathBBox, supportsXpath,
   supportsSelectors
 } from '../common/browser.js';
-import { getClosest } from '../editor/components/jgraduate/Util.js';
+import { getClosest, mergeDeep } from '../editor/components/jgraduate/Util.js';
 
 // String used to encode base64.
 const KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
@@ -719,7 +718,7 @@ export const getBBox = function (elem) {
 export const getPathDFromSegments = function (pathSegments) {
   let d = '';
 
-  $.each(pathSegments, function (j, [ singleChar, pts ]) {
+  pathSegments.forEach(function([ singleChar, pts ], _j){
     d += singleChar;
     for (let i = 0; i < pts.length; i += 2) {
       d += (pts[i] + ',' + pts[i + 1]) + ' ';
@@ -899,7 +898,7 @@ export const convertToPath = function (
   const batchCmd = new hstry.BatchCommand('Convert element to Path');
 
   // Any attribute on the element not covered by the passed-in attributes
-  attrs = $.extend({}, attrs, getExtraAttributesForConvertToPath(elem));
+  attrs = mergeDeep(attrs, getExtraAttributesForConvertToPath(elem));
 
   const path = addSVGElementFromJson({
     element: 'path',