- Fix: Add images (and references) for fallback (#135)

- Fix (canvg): blur export fix
- i18n (Chinese): A few fixes (#135)
- Optimize: Further image optimizing
- Refactoring: Avoid custom JS substitution syntax
- Refactoring: Reorder default extension list

CHANGES.md

@@ -8,14 +8,17 @@
 - Fix: Ensure SVG icon of flyout right-arrow is cloned to can be applied to
   more than one extension
 - Fix: Ensure line tool shows as selected when "L" key command is used
+- Fix: Add images (and references) for fallback (#135)
 - Fix (svgIcons plugin): Race condition
 - Fix (canvg): Regression for `text` and `tspan` elements as far as
   `captureTextNodes` with canvg (inheriting class had set
   `captureTextNodes` too late)
+- Fix (canvg): Regression on blur
 - Fix (canvg): Avoid errors for `tspan` passed to `getGradient`
 - i18n: picking stroke/fill paint and opacity
 - Enhancement: Create xdomain file build which works without ES6 Modules
 - Enhancement: Build xdomain files dynamically
+- Optimize: Further image optimizing
 - Optimize: Avoid rewriting `points` attribute for free-hand path;
   incorporates #176 (fixes #175)
 - Refactoring: Avoid passing on `undefined` var. (#147)

dist/canvg.js

@@ -4051,7 +4051,7 @@ var canvg = (function (exports) {
           ctx.canvas.id = svg.UniqueId();
           ctx.canvas.style.display = 'none';
           document.body.append(ctx.canvas);
-          canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
+          canvasRGBA_(ctx.canvas, x, y, width, height, this.blurRadius);
           ctx.canvas.remove();
         }
       }]);

dist/extensions/ext-closepath.js

@@ -97,6 +97,7 @@ var svgEditorExtension_closepath = (function () {
 
                 buttons = [{
                   id: 'tool_openpath',
+                  icon: svgEditor.curConfig.extIconsPath + 'openpath.png',
                   type: 'context',
                   panel: 'closepath_panel',
                   events: {
@@ -106,6 +107,7 @@ var svgEditorExtension_closepath = (function () {
                   }
                 }, {
                   id: 'tool_closepath',
+                  icon: svgEditor.curConfig.extIconsPath + 'closepath.png',
                   type: 'context',
                   panel: 'closepath_panel',
                   events: {

dist/extensions/ext-eyedropper.js

@@ -97,6 +97,7 @@ var svgEditorExtension_eyedropper = (function () {
                 };
                 buttons = [{
                   id: 'tool_eyedropper',
+                  icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
                   type: 'mode',
                   events: {
                     click: function click() {

dist/extensions/ext-foreignobject.js

@@ -130,6 +130,7 @@ var svgEditorExtension_foreignobject = (function () {
 
                 buttons = [{
                   id: 'tool_foreign',
+                  icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
                   type: 'mode',
                   events: {
                     click: function click() {
@@ -138,6 +139,7 @@ var svgEditorExtension_foreignobject = (function () {
                   }
                 }, {
                   id: 'edit_foreign',
+                  icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
                   type: 'context',
                   panel: 'foreignObject_panel',
                   events: {

dist/extensions/ext-grid.js

@@ -179,6 +179,7 @@ var svgEditorExtension_grid = (function () {
 
                 buttons = [{
                   id: 'view_grid',
+                  icon: svgEditor.curConfig.extIconsPath + 'grid.png',
                   type: 'context',
                   panel: 'editor_panel',
                   events: {

dist/extensions/ext-helloworld.js

@@ -112,6 +112,9 @@ var svgEditorExtension_helloworld = (function () {
                     // Must match the icon ID in helloworld-icon.xml
                     id: 'hello_world',
 
+                    // Fallback, e.g., for `file://` access
+                    icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
+
                     // This indicates that the button will be added to the "mode"
                     // button panel on the left side
                     type: 'mode',

dist/extensions/ext-imagelib.js

@@ -392,6 +392,7 @@ var svgEditorExtension_imagelib = (function () {
                 buttons = [{
                   id: 'tool_imagelib',
                   type: 'app_menu', // _flyout
+                  icon: svgEditor.curConfig.extIconsPath + 'imagelib.png',
                   position: 4,
                   events: {
                     mouseup: showBrowser

dist/extensions/ext-markers.js

@@ -99,11 +99,12 @@ var svgEditorExtension_markers = (function () {
                   $.each(mtypes, function (k, pos) {
                     var listname = pos + '_marker_list';
                     var def = true;
-                    $.each(markerTypes, function (id, v) {
+                    Object.keys(markerTypes).forEach(function (id) {
                       var title = getTitle(String(id));
                       buttons.push({
                         id: idPrefix + pos + '_' + id,
                         svgicon: id,
+                        icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
                         title: title,
                         type: 'context',
                         events: { click: setArrowFromButton },
@@ -486,7 +487,7 @@ var svgEditorExtension_markers = (function () {
 
                 // duplicate shapes to support unfilled (open) marker types with an _o suffix
 
-                $.each(['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'], function (i, v) {
+                ['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach(function (v) {
                   markerTypes[v + '_o'] = markerTypes[v];
                 });
 

dist/extensions/ext-mathjax.js

@@ -334,6 +334,7 @@ var svgEditorExtension_mathjax = (function () {
                 buttons = [{
                   id: 'tool_mathjax',
                   type: 'mode',
+                  icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
                   events: {
                     click: function click() {
                       // Only load Mathjax when needed, we don't want to strain Svg-Edit any more.

dist/extensions/ext-panning.js

@@ -60,6 +60,7 @@ var svgEditorExtension_panning = (function () {
                 svgCanvas = svgEditor.canvas;
                 buttons = [{
                   id: 'ext-panning',
+                  icon: svgEditor.curConfig.extIconsPath + 'panning.png',
                   type: 'mode',
                   events: {
                     click: function click() {

dist/extensions/ext-polygon.js

@@ -148,6 +148,7 @@ var svgEditorExtension_polygon = (function () {
                 */
                 buttons = [{
                   id: 'tool_polygon',
+                  icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
                   type: 'mode',
                   position: 11,
                   events: {

dist/extensions/ext-server_moinsave.js

@@ -4028,7 +4028,7 @@ var svgEditorExtension_server_moinsave = (function () {
           ctx.canvas.id = svg.UniqueId();
           ctx.canvas.style.display = 'none';
           document.body.append(ctx.canvas);
-          canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
+          canvasRGBA_(ctx.canvas, x, y, width, height, this.blurRadius);
           ctx.canvas.remove();
         }
       }]);

dist/extensions/ext-server_opensave.js

@@ -4028,7 +4028,7 @@ var svgEditorExtension_server_opensave = (function () {
           ctx.canvas.id = svg.UniqueId();
           ctx.canvas.style.display = 'none';
           document.body.append(ctx.canvas);
-          canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
+          canvasRGBA_(ctx.canvas, x, y, width, height, this.blurRadius);
           ctx.canvas.remove();
         }
       }]);

dist/extensions/ext-shapes.js

@@ -164,6 +164,7 @@ var svgEditorExtension_shapes = (function () {
                 curLib = library.basic;
                 buttons = [{
                   id: 'tool_shapelib',
+                  icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
                   type: 'mode_flyout', // _flyout
                   position: 6,
                   events: {

dist/extensions/ext-star.js

@@ -89,6 +89,7 @@ var svgEditorExtension_star = (function () {
                 */
                 buttons = [{
                   id: 'tool_star',
+                  icon: svgEditor.curConfig.extIconsPath + 'star.png',
                   type: 'mode',
                   position: 12,
                   events: {

dist/extensions/ext-webappfind.js

@@ -117,6 +117,7 @@ var svgEditorExtension_webappfind = (function () {
                 */
                 buttons = [{
                   id: 'webappfind_save', //
+                  icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
                   type: 'app_menu',
                   position: 4, // Before 0-based index position 4 (after the regular "Save Image (S)")
                   events: {

dist/index-es.js

@@ -25014,7 +25014,7 @@ defaultPrefs = /** @lends module:SVGEditor~defaultPrefs */{
 * @name module:SVGEditor~defaultExtensions
 * @type {string[]}
 */
-defaultExtensions = ['ext-overview_window.js', 'ext-markers.js', 'ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js', 'ext-grid.js', 'ext-polygon.js', 'ext-star.js', 'ext-panning.js', 'ext-storage.js'],
+defaultExtensions = ['ext-connector.js', 'ext-eyedropper.js', 'ext-grid.js', 'ext-imagelib.js', 'ext-markers.js', 'ext-overview_window.js', 'ext-panning.js', 'ext-polygon.js', 'ext-shapes.js', 'ext-star.js', 'ext-storage.js'],
 
 /**
 * @typedef {"@default"|string} module:SVGEditor.Stylesheet `@default` will automatically load all of the default CSS paths for SVGEditor
@@ -26076,42 +26076,68 @@ editor.init = function () {
     no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images
     fallback_path: curConfig.imgPath,
     fallback: {
-      new_image: 'clear.png',
-      save: 'save.png',
-      open: 'open.png',
-      source: 'source.png',
-      docprops: 'document-properties.png',
-      wireframe: 'wireframe.png',
-
-      undo: 'undo.png',
-      redo: 'redo.png',
+      logo: 'logo.png',
 
       select: 'select.png',
       select_node: 'select_node.png',
-      pencil: 'fhpath.png',
-      pen: 'line.png',
+
       square: 'square.png',
       rect: 'rect.png',
       fh_rect: 'freehand-square.png',
       circle: 'circle.png',
       ellipse: 'ellipse.png',
       fh_ellipse: 'freehand-circle.png',
-      path: 'path.png',
+      pencil: 'fhpath.png',
+      pen: 'line.png',
       text: 'text.png',
+      path: 'path.png',
+      add_subpath: 'add_subpath.png',
+      close_path: 'closepath.png',
+      open_path: 'openpath.png',
+
       image: 'image.png',
       zoom: 'zoom.png',
 
+      arrow_right: 'flyouth.png',
+      arrow_right_big: 'arrow_right_big.png',
+      arrow_down: 'dropdown.gif',
+      fill: 'fill.png',
+      stroke: 'stroke.png',
+      opacity: 'opacity.png',
+
+      new_image: 'clear.png',
+      save: 'save.png',
+      export: 'export.png',
+      open: 'open.png',
+      import: 'import.png',
+      docprops: 'document-properties.png',
+      source: 'source.png',
+      wireframe: 'wireframe.png',
+
+      undo: 'undo.png',
+      redo: 'redo.png',
+
       clone: 'clone.png',
-      node_clone: 'node_clone.png',
       delete: 'delete.png',
-      node_delete: 'node_delete.png',
-      group: 'shape_group_elements.png',
-      ungroup: 'shape_ungroup.png',
-      move_top: 'move_top.png',
+      go_up: 'go-up.png',
+      go_down: 'go-down.png',
+      context_menu: 'context_menu.png',
       move_bottom: 'move_bottom.png',
+      move_top: 'move_top.png',
       to_path: 'to_path.png',
       link_controls: 'link_controls.png',
       reorient: 'reorient.png',
+      group_elements: 'shape_group_elements.png',
+
+      ungroup: 'shape_ungroup.png',
+      unlink_use: 'unlink_use.png',
+      width: 'width.png',
+      height: 'height.png',
+      c_radius: 'c_radius.png',
+      angle: 'angle.png',
+      blur: 'blur.png',
+      fontsize: 'fontsize.png',
+      align: 'align.png',
 
       align_left: 'align-left.png',
       align_center: 'align-center.png',
@@ -26120,14 +26146,23 @@ editor.init = function () {
       align_middle: 'align-middle.png',
       align_bottom: 'align-bottom.png',
 
-      go_up: 'go-up.png',
-      go_down: 'go-down.png',
+      linecap_butt: 'linecap_butt.png',
+      linecap_square: 'linecap_square.png',
+      linecap_round: 'linecap_round.png',
+      linejoin_miter: 'linejoin_miter.png',
+      linejoin_bevel: 'linejoin_bevel.png',
+      linejoin_round: 'linejoin_round.png',
+      eye: 'eye.png',
+      no_color: 'no_color.png',
 
       ok: 'save.png',
       cancel: 'cancel.png',
+      warning: 'warning.png',
 
-      arrow_right: 'flyouth.png',
-      arrow_down: 'dropdown.gif'
+      node_delete: 'node_delete.png',
+      node_clone: 'node_clone.png',
+
+      globe_link: 'globe_link.png'
     },
     placement: {
       '#logo': 'logo',

dist/index-umd.js

@@ -25020,7 +25020,7 @@
   * @name module:SVGEditor~defaultExtensions
   * @type {string[]}
   */
-  defaultExtensions = ['ext-overview_window.js', 'ext-markers.js', 'ext-connector.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-imagelib.js', 'ext-grid.js', 'ext-polygon.js', 'ext-star.js', 'ext-panning.js', 'ext-storage.js'],
+  defaultExtensions = ['ext-connector.js', 'ext-eyedropper.js', 'ext-grid.js', 'ext-imagelib.js', 'ext-markers.js', 'ext-overview_window.js', 'ext-panning.js', 'ext-polygon.js', 'ext-shapes.js', 'ext-star.js', 'ext-storage.js'],
 
   /**
   * @typedef {"@default"|string} module:SVGEditor.Stylesheet `@default` will automatically load all of the default CSS paths for SVGEditor
@@ -26082,42 +26082,68 @@
       no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images
       fallback_path: curConfig.imgPath,
       fallback: {
-        new_image: 'clear.png',
-        save: 'save.png',
-        open: 'open.png',
-        source: 'source.png',
-        docprops: 'document-properties.png',
-        wireframe: 'wireframe.png',
-
-        undo: 'undo.png',
-        redo: 'redo.png',
+        logo: 'logo.png',
 
         select: 'select.png',
         select_node: 'select_node.png',
-        pencil: 'fhpath.png',
-        pen: 'line.png',
+
         square: 'square.png',
         rect: 'rect.png',
         fh_rect: 'freehand-square.png',
         circle: 'circle.png',
         ellipse: 'ellipse.png',
         fh_ellipse: 'freehand-circle.png',
-        path: 'path.png',
+        pencil: 'fhpath.png',
+        pen: 'line.png',
         text: 'text.png',
+        path: 'path.png',
+        add_subpath: 'add_subpath.png',
+        close_path: 'closepath.png',
+        open_path: 'openpath.png',
+
         image: 'image.png',
         zoom: 'zoom.png',
 
+        arrow_right: 'flyouth.png',
+        arrow_right_big: 'arrow_right_big.png',
+        arrow_down: 'dropdown.gif',
+        fill: 'fill.png',
+        stroke: 'stroke.png',
+        opacity: 'opacity.png',
+
+        new_image: 'clear.png',
+        save: 'save.png',
+        export: 'export.png',
+        open: 'open.png',
+        import: 'import.png',
+        docprops: 'document-properties.png',
+        source: 'source.png',
+        wireframe: 'wireframe.png',
+
+        undo: 'undo.png',
+        redo: 'redo.png',
+
         clone: 'clone.png',
-        node_clone: 'node_clone.png',
         delete: 'delete.png',
-        node_delete: 'node_delete.png',
-        group: 'shape_group_elements.png',
-        ungroup: 'shape_ungroup.png',
-        move_top: 'move_top.png',
+        go_up: 'go-up.png',
+        go_down: 'go-down.png',
+        context_menu: 'context_menu.png',
         move_bottom: 'move_bottom.png',
+        move_top: 'move_top.png',
         to_path: 'to_path.png',
         link_controls: 'link_controls.png',
         reorient: 'reorient.png',
+        group_elements: 'shape_group_elements.png',
+
+        ungroup: 'shape_ungroup.png',
+        unlink_use: 'unlink_use.png',
+        width: 'width.png',
+        height: 'height.png',
+        c_radius: 'c_radius.png',
+        angle: 'angle.png',
+        blur: 'blur.png',
+        fontsize: 'fontsize.png',
+        align: 'align.png',
 
         align_left: 'align-left.png',
         align_center: 'align-center.png',
@@ -26126,14 +26152,23 @@
         align_middle: 'align-middle.png',
         align_bottom: 'align-bottom.png',
 
-        go_up: 'go-up.png',
-        go_down: 'go-down.png',
+        linecap_butt: 'linecap_butt.png',
+        linecap_square: 'linecap_square.png',
+        linecap_round: 'linecap_round.png',
+        linejoin_miter: 'linejoin_miter.png',
+        linejoin_bevel: 'linejoin_bevel.png',
+        linejoin_round: 'linejoin_round.png',
+        eye: 'eye.png',
+        no_color: 'no_color.png',
 
         ok: 'save.png',
         cancel: 'cancel.png',
+        warning: 'warning.png',
 
-        arrow_right: 'flyouth.png',
-        arrow_down: 'dropdown.gif'
+        node_delete: 'node_delete.png',
+        node_clone: 'node_clone.png',
+
+        globe_link: 'globe_link.png'
       },
       placement: {
         '#logo': 'logo',

editor/canvg/canvg.js

@@ -2691,7 +2691,7 @@ function build (opts) {
       ctx.canvas.id = svg.UniqueId();
       ctx.canvas.style.display = 'none';
       document.body.append(ctx.canvas);
-      canvasRGBA_(ctx.canvas.id, x, y, width, height, this.blurRadius);
+      canvasRGBA_(ctx.canvas, x, y, width, height, this.blurRadius);
       ctx.canvas.remove();
     }
   };

editor/extensions/ext-closepath.js

@@ -51,6 +51,7 @@ export default {
     const buttons = [
       {
         id: 'tool_openpath',
+        icon: svgEditor.curConfig.extIconsPath + 'openpath.png',
         type: 'context',
         panel: 'closepath_panel',
         events: {
@@ -61,6 +62,7 @@ export default {
       },
       {
         id: 'tool_closepath',
+        icon: svgEditor.curConfig.extIconsPath + 'closepath.png',
         type: 'context',
         panel: 'closepath_panel',
         events: {

editor/extensions/ext-eyedropper.js

@@ -59,6 +59,7 @@ export default {
     const buttons = [
       {
         id: 'tool_eyedropper',
+        icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png',
         type: 'mode',
         events: {
           click () {

editor/extensions/ext-foreignobject.js

@@ -91,6 +91,7 @@ export default {
 
     const buttons = [{
       id: 'tool_foreign',
+      icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png',
       type: 'mode',
       events: {
         click () {
@@ -99,6 +100,7 @@ export default {
       }
     }, {
       id: 'edit_foreign',
+      icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png',
       type: 'context',
       panel: 'foreignObject_panel',
       events: {

editor/extensions/ext-grid.js

@@ -133,6 +133,7 @@ export default {
     }
     const buttons = [{
       id: 'view_grid',
+      icon: svgEditor.curConfig.extIconsPath + 'grid.png',
       type: 'context',
       panel: 'editor_panel',
       events: {

editor/extensions/ext-helloworld.js

@@ -32,6 +32,9 @@ export default {
         // Must match the icon ID in helloworld-icon.xml
         id: 'hello_world',
 
+        // Fallback, e.g., for `file://` access
+        icon: svgEditor.curConfig.extIconsPath + 'helloworld.png',
+
         // This indicates that the button will be added to the "mode"
         // button panel on the left side
         type: 'mode',

editor/extensions/ext-imagelib.js

@@ -364,6 +364,7 @@ export default {
     const buttons = [{
       id: 'tool_imagelib',
       type: 'app_menu', // _flyout
+      icon: svgEditor.curConfig.extIconsPath + 'imagelib.png',
       position: 4,
       events: {
         mouseup: showBrowser

editor/extensions/ext-markers.js

@@ -75,7 +75,7 @@ export default {
     };
 
     // duplicate shapes to support unfilled (open) marker types with an _o suffix
-    $.each(['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'], function (i, v) {
+    ['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach((v) => {
       markerTypes[v + '_o'] = markerTypes[v];
     });
 
@@ -432,11 +432,12 @@ export default {
       $.each(mtypes, function (k, pos) {
         const listname = pos + '_marker_list';
         let def = true;
-        $.each(markerTypes, function (id, v) {
+        Object.keys(markerTypes).forEach(function (id) {
           const title = getTitle(String(id));
           buttons.push({
             id: idPrefix + pos + '_' + id,
             svgicon: id,
+            icon: svgEditor.curConfig.extIconsPath + 'markers-' + id + '.png',
             title,
             type: 'context',
             events: {click: setArrowFromButton},

editor/extensions/ext-mathjax.js

@@ -120,6 +120,7 @@ export default {
     const buttons = [{
       id: 'tool_mathjax',
       type: 'mode',
+      icon: svgEditor.curConfig.extIconsPath + 'mathjax.png',
       events: {
         click () {
           // Only load Mathjax when needed, we don't want to strain Svg-Edit any more.

editor/extensions/ext-panning.js

@@ -17,6 +17,7 @@ export default {
     const svgCanvas = svgEditor.canvas;
     const buttons = [{
       id: 'ext-panning',
+      icon: svgEditor.curConfig.extIconsPath + 'panning.png',
       type: 'mode',
       events: {
         click () {

editor/extensions/ext-polygon.js

@@ -112,6 +112,7 @@ export default {
     */
     const buttons = [{
       id: 'tool_polygon',
+      icon: svgEditor.curConfig.extIconsPath + 'polygon.png',
       type: 'mode',
       position: 11,
       events: {

editor/extensions/ext-shapes.js

@@ -125,6 +125,7 @@ export default {
     }
     const buttons = [{
       id: 'tool_shapelib',
+      icon: svgEditor.curConfig.extIconsPath + 'shapes.png',
       type: 'mode_flyout', // _flyout
       position: 6,
       events: {

editor/extensions/ext-star.js

@@ -56,6 +56,7 @@ export default {
     */
     const buttons = [{
       id: 'tool_star',
+      icon: svgEditor.curConfig.extIconsPath + 'star.png',
       type: 'mode',
       position: 12,
       events: {

editor/extensions/ext-webappfind.js

@@ -70,6 +70,7 @@ export default {
     */
     const buttons = [{
       id: 'webappfind_save', //
+      icon: svgEditor.curConfig.extIconsPath + 'webappfind.png',
       type: 'app_menu',
       position: 4, // Before 0-based index position 4 (after the regular "Save Image (S)")
       events: {