#91 issue fix and JavaScript changes (#93)

* #91 clickSelect issue fixed

* #90 image src set issue fixed

* #91 svgcanvas undefined issue fixed

* #91 console removed and each changes

* #91 $.each changes

* #91 $.each changes

* #91 forech change to Object.entries

* #91 each and entries changes

* #91 jquery extend changes

* #91 extend modification changes

src/editor/Editor.js

@@ -22,6 +22,7 @@ import { isMac } from '../common/browser.js';
 
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
 import ConfigObj from './ConfigObj.js';
+import {mergeDeep} from './components/jgraduate/Util.js';
 
 import {
   readLang, putLocale,
@@ -1207,7 +1208,7 @@ class Editor extends EditorStartup {
     // Todo: Add proper RTL Support!
     // Todo: Use RTL detection instead and take out of locales?
     // document.documentElement.dir = allStrings.dir;
-    $.extend(this.uiStrings, allStrings);
+    this.uiStrings = mergeDeep(this.uiStrings, allStrings);
 
     // const notif = allStrings.notification; // Currently unused
     // $.extend will only replace the given strings

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

@@ -215,7 +215,7 @@ export default {
       const mtypes = ['start', 'mid', 'end'];
       const defs = svgCanvas.findDefs();
 
-      $.each(mtypes, function (i, type) {
+      mtypes.forEach(function(type, i){
         const marker = getLinked(elem, 'marker-' + type);
         if (!marker) { return; }
 

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

@@ -24,7 +24,7 @@ export default {
   async init(S) {
     const svgEditor = this;
     const { svgCanvas } = svgEditor;
-    const { getElem, $id } = svgCanvas;
+    const { getElem, $id, mergeDeep } = svgCanvas;
     const { $, svgroot } = S,
       addElem = svgCanvas.addSVGElementFromJson,
       selManager = S.selectorManager;
@@ -51,7 +51,7 @@ export default {
     const getBBintersect = (x, y, bb, offset) => {
       if (offset) {
         offset -= 0;
-        bb = $.extend({}, bb);
+        bb = mergeDeep({}, bb);
         bb.width += offset;
         bb.height += offset;
         bb.x -= offset / 2;

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

@@ -28,7 +28,7 @@ export default {
     const { $id } = svgEditor.svgCanvas;
     const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
 
-    const { uiStrings, canvas: svgCanvas } = svgEditor;
+    const { uiStrings, svgCanvas } = svgEditor;
 
     const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({ url }) => {
       try {
@@ -332,9 +332,9 @@ export default {
     }
 
     const toggleMultiLoop = () => {
-      $.each(multiArr, function (i) {
-        const type = this[0];
-        const data = this[1];
+      multiArr.forEach(function(item, i){
+        const type = item[0];
+        const data = item[1];
         if (type === 'svg') {
           svgCanvas.importSvgString(data);
         } else {

src/editor/panels/BottomPanel.js

@@ -89,7 +89,7 @@ class BottomPanel {
         buttonsNeedingStroke.forEach((btn) => {
           // if btn is pressed, change to select button
           if ($id(btn).pressed) {
-            this.editor.leftPanelHandlers.clickSelect();
+            this.editor.leftPanel.clickSelect();
           }
           $id(btn).disabled = true;
         });
@@ -103,7 +103,7 @@ class BottomPanel {
         buttonsNeedingFillAndStroke.forEach((btn) => {
           // if btn is pressed, change to select button
           if ($id(btn).pressed) {
-            this.editor.leftPanelHandlers.clickSelect();
+            this.editor.leftPanel.clickSelect();
           }
           $id(btn).disabled = true;
         });

src/svgcanvas/elem-get-set.js

@@ -180,7 +180,7 @@ export const setResolutionMethod = function (x, y) {
       const visEls = getVisibleElements();
       elemContext_.getCanvas().addToSelection(visEls);
       const dx = [], dy = [];
-      $.each(visEls, function (_i, _item) {
+      visEls.forEach(function(_item, _i){
         dx.push(bbox.x * -1);
         dy.push(bbox.y * -1);
       });
@@ -309,7 +309,7 @@ export const setZoomMethod = function (zoomLevel) {
   const res = elemContext_.getCanvas().getResolution();
   elemContext_.getSVGContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel);
   elemContext_.setCurrentZoom(zoomLevel);
-  $.each(selectedElements, function (i, elem) {
+  selectedElements.forEach(function(elem, i){
     if (!elem) { return; }
     elemContext_.getCanvas().selectorManager.requestSelector(elem).resize();
   });

src/svgcanvas/event.js

@@ -787,7 +787,7 @@ export const mouseUpEvent = function (evt) {
     mouse_y: mouseY
   }, true);
 
-  $.each(extResult, function (i, r) {
+  extResult.forEach(function(r, i){
     if (r) {
       keep = r.keep || keep;
       ({ element } = r);
@@ -1062,9 +1062,9 @@ export const mouseDownEvent = function (evt) {
       // want to orient around it
       eventContext_.setInitBbox(utilsGetBBox($id('selectedBox0')));
       const bb = {};
-      $.each(eventContext_.getInitBbox(), function (key, val) {
+      for (const [key, val] of Object.entries(eventContext_.getInitBbox())) {
         bb[key] = val / currentZoom;
-      });
+      };
       eventContext_.setInitBbox(bb);
 
       // append three dummy transforms to the tlist so that
@@ -1292,7 +1292,7 @@ export const mouseDownEvent = function (evt) {
     selectedElements
   }, true);
 
-  $.each(extResult, function (i, r) {
+  extResult.forEach(function(r, i){
     if (r && r.started) {
       eventContext_.setStarted(true);
     }

src/svgcanvas/paste-elem.js

@@ -118,7 +118,7 @@ export const pasteElementsMethod = function (type, x, y) {
       dx = [],
       dy = [];
 
-    $.each(pasted, function (i, item) {
+    pasted.forEach(function(item, i){
       dx.push(cx);
       dy.push(cy);
     });

src/svgcanvas/path-actions.js

@@ -216,7 +216,7 @@ export const convertPath = function (pth, toRel) {
  * @returns {string}
  */
 function pathDSegment (letter, points, morePoints, lastPoint) {
-  $.each(points, function (i, pnt) {
+  points.forEach(function(pnt, i){
     points[i] = shortFloat(pnt);
   });
   let segment = letter + points.join(' ');
@@ -911,7 +911,7 @@ export const pathActionsMethod = (function () {
         const type = seg.pathSegType;
         if (type === 1) { continue; }
         const pts = [];
-        $.each(['', 1, 2], function (j, n) {
+        ['', 1, 2].forEach(function(n, j){
           const x = seg['x' + n], y = seg['y' + n];
           if (x !== undefined && y !== undefined) {
             const pt = transformPoint(x, y, m);

src/svgcanvas/path.js

@@ -244,7 +244,7 @@ export const init = function (editorContext) {
     'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',
     'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth'
   ];
-  $.each(pathFuncsStrs, function (i, s) {
+  pathFuncsStrs.forEach(function(s, i){
     pathFuncs.push(s + 'Abs');
     pathFuncs.push(s + 'Rel');
   });
@@ -777,7 +777,7 @@ export const convertPath = function (pth, toRel) {
  * @returns {string}
  */
 function pathDSegment (letter, points, morePoints, lastPoint) {
-  $.each(points, function (i, pnt) {
+  points.forEach(function(pnt, i){
     points[i] = shortFloat(pnt);
   });
   let segment = letter + points.join(' ');

src/svgcanvas/selection.js

@@ -210,7 +210,7 @@ export const getMouseTargetMethod = function (evt) {
 */
 export const runExtensionsMethod = function (action, vars, returnArray, nameFilter) {
   let result = returnArray ? [] : false;
-  $.each(selectionContext_.getExtensions(), function (name, ext) {
+  for (const [name, ext] of Object.entries(selectionContext_.getExtensions())) {
     if (nameFilter && !nameFilter(name)) {
       return;
     }
@@ -224,7 +224,7 @@ export const runExtensionsMethod = function (action, vars, returnArray, nameFilt
         result = ext[action](vars);
       }
     }
-  });
+  }
   return result;
 };
 

src/svgcanvas/svg-exec.js

@@ -656,7 +656,7 @@ export const embedImage = function (src) {
     imgI.addEventListener("error", (e) => {
       reject(new Error('Error loading image: '));
     });
-    imgI.attr('src', src);
+    imgI.setAttribute('src', src);
   });
 };
 
@@ -903,7 +903,7 @@ export const uniquifyElemsMethod = function (g) {
 
       // now search for all attributes on this element that might refer
       // to other elements
-      $.each(svgContext_.getrefAttrs(), function (i, attr) {
+      svgContext_.getrefAttrs().forEach(function(attr, i){
         const attrnode = n.getAttributeNode(attr);
         if (attrnode) {
           // the incoming file has been sanitized, so we should be able to safely just strip off the leading #

src/svgcanvas/svgcanvas.js

@@ -111,7 +111,7 @@ import {
   init as clearInit
 } from './clear.js';
 import {
-  getClosest, getParents
+  getClosest, getParents, mergeDeep
 } from '../editor/components/jgraduate/Util.js';
 
 const $ = jQueryPluginSVG(jQuery);
@@ -191,6 +191,7 @@ 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.
@@ -2392,7 +2393,7 @@ class SvgCanvas {
     this.convertToPath = function (elem, getBBox) {
       if (isNullish(elem)) {
         const elems = selectedElements;
-        $.each(elems, function (i, el) {
+        elems.forEach(function(el, i){
           if (el) { canvas.convertToPath(el); }
         });
         return undefined;
@@ -2797,6 +2798,7 @@ SvgCanvas.decode64 = decode64;
 SvgCanvas.$id = $id;
 SvgCanvas.$qq = $qq;
 SvgCanvas.$qa = $qa;
+SvgCanvas.mergeDeep = mergeDeep;
 SvgCanvas.getClosest = getClosest;
 SvgCanvas.getParents = getParents;
 SvgCanvas.blankPageObjectURL = blankPageObjectURL;

src/svgcanvas/utilities.js

@@ -827,10 +827,10 @@ export const getExtraAttributesForConvertToPath = function (elem) {
   const attrs = {};
   // TODO: make this list global so that we can properly maintain it
   // TODO: what about @transform, @clip-rule, @fill-rule, etc?
-  $.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function () {
-    const a = elem.getAttribute(this);
+  ['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'].forEach(function(item, i){
+    const a = elem.getAttribute(item);
     if (a) {
-      attrs[this] = a;
+      attrs[item] = a;
     }
   });
   return attrs;
@@ -1077,10 +1077,10 @@ export const getStrokedBBox = function (elems, addSVGElementFromJson, pathAction
   if (!elems || !elems.length) { return false; }
 
   let fullBb;
-  $.each(elems, function () {
+  elems.forEach(function(elem, i){
     if (fullBb) { return; }
-    if (!this.parentNode) { return; }
-    fullBb = getBBoxWithTransform(this, addSVGElementFromJson, pathActions);
+    if (!elem.parentNode) { return; }
+    fullBb = getBBoxWithTransform(elem, addSVGElementFromJson, pathActions);
   });
 
   // This shouldn't ever happen...
@@ -1102,7 +1102,7 @@ export const getStrokedBBox = function (elems, addSVGElementFromJson, pathAction
     maxX += offset;
     maxY += offset;
   } else {
-    $.each(elems, function (i, elem) {
+    elems.forEach(function(elem, i){
       const curBb = getBBoxWithTransform(elem, addSVGElementFromJson, pathActions);
       if (curBb) {
         const offset = getStrokeOffsetForBBox(elem);