- Refactoring: Clean-up

- Fix: Race condition with svgicons and seticonsize
- Embedded editor: Use module form for now; drop unused inline attribute
- Embedded editor: Fix PNG export; work toward restoring PDF (add `getUIStrings` method to editor for assisting)
- canvg and importScript fixes

dist/locale/lang.en.js

@@ -11,37 +11,37 @@
       key_del: 'Del',
       key_down: 'Down',
       key_up: 'Up',
-      more_opts: 'more_opts',
+      more_opts: 'More options',
       url: 'url',
       width: 'width',
       height: 'height'
     },
     misc: {
-      powered_by: 'powered_by'
+      powered_by: 'Powered by'
     },
     ui: {
-      toggle_stroke_tools: 'toggle_stroke_tools',
+      toggle_stroke_tools: 'Show/hide more stroke tools',
-      palette_info: 'palette_info',
+      palette_info: 'Click to change fill color, shift-click to change stroke color',
-      zoom_level: 'zoom_level',
+      zoom_level: 'Change zoom level',
-      panel_drag: 'panel_drag',
+      panel_drag: 'Drag left/right to resize side panel',
       quality: 'Quality:',
       pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
       pathCtrlPtTooltip: 'Drag control point to adjust curve properties'
     },
     properties: {
       id: 'id',
-      fill_color: 'fill_color',
+      fill_color: 'Change fill color',
-      stroke_color: 'stroke_color',
+      stroke_color: 'Change stroke color',
-      stroke_style: 'stroke_style',
+      stroke_style: 'Change stroke dash style',
-      stroke_width: 'stroke_width',
+      stroke_width: 'Change stroke width by 1, shift-click to change by 0.1',
-      pos_x: 'pos_x',
+      pos_x: 'Change X coordinate',
-      pos_y: 'pos_y',
+      pos_y: 'Change Y coordinate',
-      linecap_butt: 'linecap_butt',
+      linecap_butt: 'Linecap: Butt',
-      linecap_round: 'linecap_round',
+      linecap_round: 'Linecap: Round',
-      linecap_square: 'linecap_square',
+      linecap_square: 'Linecap: Square',
-      linejoin_bevel: 'linejoin_bevel',
+      linejoin_bevel: 'Linejoin: Bevel',
-      linejoin_miter: 'linejoin_miter',
+      linejoin_miter: 'Linejoin: Miter',
-      linejoin_round: 'linejoin_round',
+      linejoin_round: 'Linejoin: Round',
       angle: 'angle',
       blur: 'blur',
       opacity: 'opacity',
@@ -56,140 +56,140 @@
       line_x2: "Change line's ending x coordinate",
       line_y1: "Change line's starting y coordinate",
       line_y2: "Change line's ending y coordinate",
-      rect_height: 'rect_height',
+      rect_height: 'Change rectangle height',
-      rect_width: 'rect_width',
+      rect_width: 'Change rectangle width',
-      corner_radius: 'corner_radius',
+      corner_radius: 'Change Rectangle Corner Radius',
-      image_width: 'image_width',
+      image_width: 'Change image width',
-      image_height: 'image_height',
+      image_height: 'Change image height',
-      image_url: 'image_url',
+      image_url: 'Change URL',
       node_x: "Change node's x coordinate",
       node_y: "Change node's y coordinate",
-      seg_type: 'seg_type',
+      seg_type: 'Change Segment type',
-      straight_segments: 'straight_segments',
+      straight_segments: 'Straight',
-      curve_segments: 'curve_segments',
+      curve_segments: 'Curve',
       text_contents: 'text_contents',
-      font_family: 'font_family',
+      font_family: 'Change Font Family',
-      font_size: 'font_size',
+      font_size: 'Change Font Size',
-      bold: 'bold',
+      bold: 'Bold Text [B]',
-      italic: 'italic'
+      italic: 'Italic Text [I]'
     },
     tools: {
-      main_menu: 'main_menu',
+      main_menu: 'Main Menu',
       bkgnd_color_opac: 'bkgnd_color_opac',
-      connector_no_arrow: 'connector_no_arrow',
+      connector_no_arrow: 'No arrow',
-      fitToContent: 'fitToContent',
+      fitToContent: 'Fit to Content',
-      fit_to_all: 'fit_to_all',
+      fit_to_all: 'Fit to all content',
-      fit_to_canvas: 'fit_to_canvas',
+      fit_to_canvas: 'Fit to canvas',
-      fit_to_layer_content: 'fit_to_layer_content',
+      fit_to_layer_content: 'Fit to layer content',
-      fit_to_sel: 'fit_to_sel',
+      fit_to_sel: 'Fit to selection',
-      align_relative_to: 'align_relative_to',
+      align_relative_to: 'Align relative to ...',
-      relativeTo: 'relativeTo',
+      relativeTo: 'relative to:',
       page: 'page',
-      largest_object: 'largest_object',
+      largest_object: 'largest object',
-      selected_objects: 'selected_objects',
+      selected_objects: 'selected objects',
-      smallest_object: 'smallest_object',
+      smallest_object: 'smallest object',
-      new_doc: 'new_doc',
+      new_doc: 'New Image',
-      open_doc: 'open_doc',
+      open_doc: 'Open SVG',
-      export_img: 'export_img',
+      export_img: 'Export',
-      save_doc: 'save_doc',
+      save_doc: 'Save Image',
-      import_doc: 'import_doc',
+      import_doc: 'Import Image',
-      align_to_page: 'align_to_page',
+      align_to_page: 'Align Element to Page',
-      align_bottom: 'align_bottom',
+      align_bottom: 'Align Bottom',
-      align_center: 'align_center',
+      align_center: 'Align Center',
-      align_left: 'align_left',
+      align_left: 'Align Left',
-      align_middle: 'align_middle',
+      align_middle: 'Align Middle',
-      align_right: 'align_right',
+      align_right: 'Align Right',
-      align_top: 'align_top',
+      align_top: 'Align Top',
-      mode_select: 'mode_select',
+      mode_select: 'Select Tool',
-      mode_fhpath: 'mode_fhpath',
+      mode_fhpath: 'Pencil Tool',
-      mode_line: 'mode_line',
+      mode_line: 'Line Tool',
-      mode_connect: 'mode_connect',
+      mode_connect: 'Connect two objects',
-      mode_rect: 'mode_rect',
+      mode_rect: 'Rectangle',
-      mode_square: 'mode_square',
+      mode_square: 'Square',
-      mode_fhrect: 'mode_fhrect',
+      mode_fhrect: 'Free-Hand Rectangle',
-      mode_ellipse: 'mode_ellipse',
+      mode_ellipse: 'Ellipse',
-      mode_circle: 'mode_circle',
+      mode_circle: 'Circle',
-      mode_fhellipse: 'mode_fhellipse',
+      mode_fhellipse: 'Free-Hand Ellipse',
-      mode_path: 'mode_path',
+      mode_path: 'Path Tool',
-      mode_shapelib: 'mode_shapelib',
+      mode_shapelib: 'Shape library',
-      mode_text: 'mode_text',
+      mode_text: 'Text Tool',
-      mode_image: 'mode_image',
+      mode_image: 'Image Tool',
-      mode_zoom: 'mode_zoom',
+      mode_zoom: 'Zoom Tool [Ctrl+Up/Down]',
-      mode_eyedropper: 'mode_eyedropper',
+      mode_eyedropper: 'Eye Dropper Tool',
-      no_embed: 'no_embed',
+      no_embed: 'NOTE: This image cannot be embedded. It will depend on this path to be displayed',
-      undo: 'undo',
+      undo: 'Undo [Z]',
-      redo: 'redo',
+      redo: 'Redo [Y]',
-      tool_source: 'tool_source',
+      tool_source: 'Edit Source [U]',
-      wireframe_mode: 'wireframe_mode',
+      wireframe_mode: 'Wireframe Mode [F]',
-      toggle_grid: 'toggle_grid',
+      toggle_grid: 'Show/Hide Grid',
-      clone: 'clone',
+      clone: 'Duplicate Element [D]',
-      del: 'del',
+      del: 'Delete Element [Delete/Backspace]',
-      group_elements: 'group_elements',
+      group_elements: 'Group Elements [G]',
-      make_link: 'make_link',
+      make_link: 'Make (hyper)link',
-      set_link_url: 'set_link_url',
+      set_link_url: 'Set link URL (leave empty to remove)',
-      to_path: 'to_path',
+      to_path: 'Convert to Path',
-      reorient_path: 'reorient_path',
+      reorient_path: 'Reorient path',
-      ungroup: 'ungroup',
+      ungroup: 'Ungroup Elements [G]',
-      docprops: 'docprops',
+      docprops: 'Document Properties (D)',
-      imagelib: 'imagelib',
+      imagelib: 'Image library',
-      move_bottom: 'move_bottom',
+      move_bottom: 'Send to Back [ Ctrl+Shift+[ ]',
-      move_top: 'move_top',
+      move_top: 'Bring to Front [ Ctrl+Shift+] ]',
-      node_clone: 'node_clone',
+      node_clone: 'Clone Node',
-      node_delete: 'node_delete',
+      node_delete: 'Delete Node',
-      node_link: 'node_link',
+      node_link: 'Link Control Points',
-      add_subpath: 'add_subpath',
+      add_subpath: 'Add sub-path',
-      openclose_path: 'openclose_path',
+      openclose_path: 'Open/close sub-path',
-      source_save: 'source_save',
+      source_save: 'Apply Changes',
-      cut: 'cut',
+      cut: 'Cut',
-      copy: 'copy',
+      copy: 'Copy',
-      paste: 'paste',
+      paste: 'Paste',
-      paste_in_place: 'paste_in_place',
+      paste_in_place: 'Paste in Place',
-      delete: 'delete',
+      delete: 'Delete',
-      group: 'group',
+      group: 'Group',
-      move_front: 'move_front',
+      move_front: 'Bring to Front (SHFT+CTRL+])',
-      move_up: 'move_up',
+      move_up: 'Bring Forward (CTRL+])',
-      move_down: 'move_down',
+      move_down: 'Send Backward (CTRL+[)',
-      move_back: 'move_back'
+      move_back: 'Send to Back (SHFT+CTRL+[)'
     },
     layers: {
       layer: 'Layer',
-      layers: 'layers',
+      layers: 'Layers',
-      del: 'del',
+      del: 'Delete Layer',
-      move_down: 'move_down',
+      move_down: 'Move Layer Down',
-      new: 'new',
+      new: 'New Layer',
-      rename: 'rename',
+      rename: 'Rename Layer',
-      move_up: 'move_up',
+      move_up: 'Move Layer Up',
-      dupe: 'dupe',
+      dupe: 'Duplicate Layer...',
-      merge_down: 'merge_down',
+      merge_down: 'Merge Down',
-      merge_all: 'merge_all',
+      merge_all: 'Merge All',
-      move_elems_to: 'move_elems_to',
+      move_elems_to: 'Move elements to:',
-      move_selected: 'move_selected'
+      move_selected: 'Move selected elements to a different layer'
     },
     config: {
-      image_props: 'image_props',
+      image_props: 'Image Properties',
-      doc_title: 'doc_title',
+      doc_title: 'Title:',
-      doc_dims: 'doc_dims',
+      doc_dims: 'Canvas Dimensions',
-      included_images: 'included_images',
+      included_images: 'Included Images',
-      image_opt_embed: 'image_opt_embed',
+      image_opt_embed: 'Embed data (local files)',
-      image_opt_ref: 'image_opt_ref',
+      image_opt_ref: 'Use file reference',
-      editor_prefs: 'editor_prefs',
+      editor_prefs: 'Editor Preferences',
-      icon_size: 'icon_size',
+      icon_size: 'Icon size:',
-      language: 'language',
+      language: 'Language:',
-      background: 'background',
+      background: 'Editor Background',
-      editor_img_url: 'editor_img_url',
+      editor_img_url: 'URL:',
-      editor_bg_note: 'editor_bg_note',
+      editor_bg_note: 'Note: Background will not be saved with image.',
-      icon_large: 'icon_large',
+      icon_large: 'Large',
-      icon_medium: 'icon_medium',
+      icon_medium: 'Medium',
-      icon_small: 'icon_small',
+      icon_small: 'Small',
-      icon_xlarge: 'icon_xlarge',
+      icon_xlarge: 'Extra Large',
-      select_predefined: 'select_predefined',
+      select_predefined: 'Select predefined:',
-      units_and_rulers: 'units_and_rulers',
+      units_and_rulers: 'Units & Rulers',
-      show_rulers: 'show_rulers',
+      show_rulers: 'Show rulers',
-      base_unit: 'base_unit',
+      base_unit: 'Base Unit:',
-      grid: 'grid',
+      grid: 'Grid',
-      snapping_onoff: 'snapping_onoff',
+      snapping_onoff: 'Snapping on/off',
-      snapping_stepsize: 'snapping_stepsize',
+      snapping_stepsize: 'Snapping Step-Size:',
-      grid_color: 'grid_color'
+      grid_color: 'Grid color:'
     },
     shape_cats: {
       basic: 'basic',
@@ -199,20 +199,20 @@
       flowchart: 'flowchart',
       animal: 'animal',
       game: 'game',
-      dialog_balloon: 'dialog_balloon',
+      dialog_balloon: 'Dialog balloons',
-      electronics: 'electronics',
+      electronics: 'Electronics',
-      math: 'math',
+      math: 'Mathematical',
-      music: 'music',
+      music: 'Music',
-      misc: 'misc',
+      misc: 'Miscellaneous',
-      raphael_1: 'raphael_1',
+      raphael_1: 'raphaeljs.com set 1',
-      raphael_2: 'raphael_2'
+      raphael_2: 'raphaeljs.com set 2'
     },
     imagelib: {
-      select_lib: 'select_lib',
+      select_lib: 'Select an image library',
-      show_list: 'show_list',
+      show_list: 'Show library list',
-      import_single: 'import_single',
+      import_single: 'Import single',
-      import_multi: 'import_multi',
+      import_multi: 'Import multiple',
-      open: 'open'
+      open: 'Open as new document'
     },
     notification: {
       invalidAttrValGiven: 'Invalid value given',

editor/canvg/canvg.js

@@ -495,7 +495,6 @@ function build (opts) {
 
   // transforms
   svg.Transform = function (v) {
-    const that = this;
     this.Type = {};
 
     // translate
@@ -561,27 +560,21 @@ function build (opts) {
 
     this.Type.SkewBase = class extends this.Type.matrix {
       constructor (s) {
-        super();
+        super(s);
-        this.base = that.Type.matrix;
-        this.base(s);
         this.angle = new svg.Property('angle', s);
       }
     };
 
     this.Type.skewX = class extends this.Type.SkewBase {
       constructor (s) {
-        super();
+        super(s);
-        this.base = that.Type.SkewBase;
-        this.base(s);
         this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
       }
     };
 
     this.Type.skewY = class extends this.Type.SkewBase {
       constructor (s) {
-        super();
+        super(s);
-        this.base = that.Type.SkewBase;
-        this.base(s);
         this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0];
       }
     };
@@ -833,9 +826,7 @@ function build (opts) {
 
   svg.Element.RenderedElementBase = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.setContext = function (ctx) {
         // fill
@@ -926,9 +917,7 @@ function build (opts) {
 
   svg.Element.PathElementBase = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.path = function (ctx) {
         if (ctx != null) ctx.beginPath();
@@ -979,9 +968,7 @@ function build (opts) {
   // svg element
   svg.Element.svg = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.baseClearContext = this.clearContext;
       this.clearContext = function (ctx) {
@@ -1066,9 +1053,7 @@ function build (opts) {
   // rect element
   svg.Element.rect = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       this.path = function (ctx) {
         const x = this.attribute('x').toPixels('x');
@@ -1103,9 +1088,7 @@ function build (opts) {
   // circle element
   svg.Element.circle = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       this.path = function (ctx) {
         const cx = this.attribute('cx').toPixels('x');
@@ -1126,9 +1109,7 @@ function build (opts) {
   // ellipse element
   svg.Element.ellipse = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       this.path = function (ctx) {
         const KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
@@ -1155,9 +1136,7 @@ function build (opts) {
   // line element
   svg.Element.line = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       this.getPoints = function () {
         return [
@@ -1188,9 +1167,7 @@ function build (opts) {
   // polyline element
   svg.Element.polyline = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       this.points = svg.CreatePath(this.attribute('points').value);
       this.path = function (ctx) {
@@ -1220,9 +1197,7 @@ function build (opts) {
   // polygon element
   svg.Element.polygon = class extends svg.Element.polyline {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.polyline;
-      this.base(node);
 
       this.basePath = this.path;
       this.path = function (ctx) {
@@ -1239,9 +1214,7 @@ function build (opts) {
   // path element
   svg.Element.path = class extends svg.Element.PathElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.PathElementBase;
-      this.base(node);
 
       let d = this.attribute('d').value;
       // TODO: convert to real lexer based on https://www.w3.org/TR/SVG11/paths.html#PathDataBNF
@@ -1580,9 +1553,7 @@ function build (opts) {
   // pattern element
   svg.Element.pattern = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.createPattern = function (ctx, element) {
         const width = this.attribute('width').toPixels('x', true);
@@ -1621,9 +1592,7 @@ function build (opts) {
   // marker element
   svg.Element.marker = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.baseRender = this.render;
       this.render = function (ctx, point, angle) {
@@ -1655,9 +1624,7 @@ function build (opts) {
   // definitions element
   svg.Element.defs = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.render = function (ctx) {
         // NOOP
@@ -1668,9 +1635,7 @@ function build (opts) {
   // base for gradients
   svg.Element.GradientBase = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
 
@@ -1741,9 +1706,7 @@ function build (opts) {
   // linear gradient element
   svg.Element.linearGradient = class extends svg.Element.GradientBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.GradientBase;
-      this.base(node);
 
       this.getGradient = function (ctx, element) {
         const bb = this.gradientUnits === 'objectBoundingBox'
@@ -1783,9 +1746,7 @@ function build (opts) {
   // radial gradient element
   svg.Element.radialGradient = class extends svg.Element.GradientBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.GradientBase;
-      this.base(node);
 
       this.getGradient = function (ctx, element) {
         const bb = element.getBoundingBox();
@@ -1826,9 +1787,7 @@ function build (opts) {
   // gradient stop element
   svg.Element.stop = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.offset = this.attribute('offset').numValue();
       if (this.offset < 0) this.offset = 0;
@@ -1845,9 +1804,7 @@ function build (opts) {
   // animation base element
   svg.Element.AnimateBase = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       svg.Animations.push(this);
 
@@ -1944,9 +1901,7 @@ function build (opts) {
   // animate element
   svg.Element.animate = class extends svg.Element.AnimateBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.AnimateBase;
-      this.base(node);
 
       this.calcValue = function () {
         const p = this.progress();
@@ -1961,9 +1916,7 @@ function build (opts) {
   // animate color element
   svg.Element.animateColor = class extends svg.Element.AnimateBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.AnimateBase;
-      this.base(node);
 
       this.calcValue = function () {
         const p = this.progress();
@@ -1985,9 +1938,7 @@ function build (opts) {
   // animate transform element
   svg.Element.animateTransform = class extends svg.Element.animate {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.AnimateBase;
-      this.base(node);
 
       this.calcValue = function () {
         const p = this.progress();
@@ -2007,9 +1958,7 @@ function build (opts) {
   // font element
   svg.Element.font = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.horizAdvX = this.attribute('horiz-adv-x').numValue();
 
@@ -2046,9 +1995,7 @@ function build (opts) {
   // font-face element
   svg.Element.fontface = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.ascent = this.attribute('ascent').value;
       this.descent = this.attribute('descent').value;
@@ -2059,9 +2006,7 @@ function build (opts) {
   // missing-glyph element
   svg.Element.missingglyph = class extends svg.Element.path {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.path;
-      this.base(node);
 
       this.horizAdvX = 0;
     }
@@ -2070,9 +2015,7 @@ function build (opts) {
   // glyph element
   svg.Element.glyph = class extends svg.Element.path {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.path;
-      this.base(node);
 
       this.horizAdvX = this.attribute('horiz-adv-x').numValue();
       this.unicode = this.attribute('unicode').value;
@@ -2083,10 +2026,8 @@ function build (opts) {
   // text element
   svg.Element.text = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
       this.captureTextNodes = true;
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.baseSetContext = this.setContext;
       this.setContext = function (ctx) {
@@ -2161,9 +2102,7 @@ function build (opts) {
   // text base
   svg.Element.TextElementBase = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.getGlyph = function (font, text, i) {
         const c = text[i];
@@ -2264,10 +2203,8 @@ function build (opts) {
   // tspan
   svg.Element.tspan = class extends svg.Element.TextElementBase {
     constructor (node) {
-      super();
+      super(node);
       this.captureTextNodes = true;
-      this.base = svg.Element.TextElementBase;
-      this.base(node);
 
       this.text = node.nodeValue || node.text || '';
       this.getText = function () {
@@ -2279,9 +2216,7 @@ function build (opts) {
   // tref
   svg.Element.tref = class extends svg.Element.TextElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.TextElementBase;
-      this.base(node);
 
       this.getText = function () {
         const element = this.getHrefAttribute().getDefinition();
@@ -2293,9 +2228,7 @@ function build (opts) {
   // a element
   svg.Element.a = class extends svg.Element.TextElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.TextElementBase;
-      this.base(node);
 
       this.hasText = true;
       for (let i = 0, childNode; (childNode = node.childNodes[i]); i++) {
@@ -2337,9 +2270,7 @@ function build (opts) {
   // image element
   svg.Element.image = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       const href = this.getHrefAttribute().value;
       if (href === '') {
@@ -2402,9 +2333,7 @@ function build (opts) {
   // group element
   svg.Element.g = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.getBoundingBox = function () {
         const bb = new svg.BoundingBox();
@@ -2419,9 +2348,7 @@ function build (opts) {
   // symbol element
   svg.Element.symbol = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.render = function (ctx) {
         // NO RENDER
@@ -2432,9 +2359,7 @@ function build (opts) {
   // style element
   svg.Element.style = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       // text, or spaces then CDATA
       let css = '';
@@ -2489,9 +2414,7 @@ function build (opts) {
   // use element
   svg.Element.use = class extends svg.Element.RenderedElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.RenderedElementBase;
-      this.base(node);
 
       this.baseSetContext = this.setContext;
       this.setContext = function (ctx) {
@@ -2539,9 +2462,7 @@ function build (opts) {
   // mask element
   svg.Element.mask = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.apply = function (ctx, element) {
         // render as temp svg
@@ -2596,9 +2517,7 @@ function build (opts) {
   // clip element
   svg.Element.clipPath = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.apply = function (ctx) {
         for (let i = 0; i < this.children.length; i++) {
@@ -2625,9 +2544,7 @@ function build (opts) {
   // filters
   svg.Element.filter = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.apply = function (ctx, element) {
         // render as temp svg
@@ -2675,9 +2592,7 @@ function build (opts) {
 
   svg.Element.feMorphology = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.apply = function (ctx, x, y, width, height) {
         // TODO: implement
@@ -2687,9 +2602,7 @@ function build (opts) {
 
   svg.Element.feComposite = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.apply = function (ctx, x, y, width, height) {
         // TODO: implement
@@ -2699,9 +2612,7 @@ function build (opts) {
 
   svg.Element.feColorMatrix = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       let matrix = svg.ToNumberArray(this.attribute('values').value);
       switch (this.attribute('type').valueOrDefault('matrix')) { // https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
@@ -2773,9 +2684,7 @@ function build (opts) {
 
   svg.Element.feGaussianBlur = class extends svg.Element.ElementBase {
     constructor (node) {
-      super();
+      super(node);
-      this.base = svg.Element.ElementBase;
-      this.base(node);
 
       this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
       this.extraFilterDistance = this.blurRadius;

editor/embedapi-dom.js

@@ -1,6 +1,5 @@
 /* globals jQuery */
 import EmbeddedSVGEdit from './embedapi.js';
-import svgEditor from './svg-editor.js';
 
 const $ = jQuery;
 
@@ -24,32 +23,36 @@ function saveSvg () {
 }
 
 function exportPNG () {
-  const str = svgEditor.uiStrings.notification.loadingImage;
+  svgCanvas.getUIStrings()(function (uiStrings) {
+    const str = uiStrings.notification.loadingImage;
 
-  const exportWindow = window.open(
+    const exportWindow = window.open(
-    'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+      'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
-    'svg-edit-exportWindow'
+      'svg-edit-exportWindow'
-  );
+    );
-  svgCanvas.rasterExport('PNG', null, exportWindow.name);
+    svgCanvas.rasterExport('PNG', null, exportWindow.name);
+  });
 }
 
 function exportPDF () {
-  const str = svgEditor.uiStrings.notification.loadingImage;
+  svgCanvas.getUIStrings()(function (uiStrings) {
+    const str = uiStrings.notification.loadingImage;
 
-  /**
+    /**
-  // If you want to handle the PDF blob yourself, do as follows
+    // If you want to handle the PDF blob yourself, do as follows
-  svgCanvas.bind('exportedPDF', function (win, data) {
+    svgCanvas.bind('exportedPDF', function (win, data) {
-    alert(data.dataurlstring);
+      alert(data.dataurlstring);
+    });
+    svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
+    return;
+    */
+
+    const exportWindow = window.open(
+      'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
+      'svg-edit-exportWindow'
+    );
+    svgCanvas.exportPDF(exportWindow.name);
   });
-  svgCanvas.exportPDF(); // Accepts two args: optionalWindowName supplied back to bound exportPDF handler and optionalOutputType (defaults to dataurlstring)
-  return;
-  */
-
-  const exportWindow = window.open(
-    'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
-    'svg-edit-exportWindow'
-  );
-  svgCanvas.exportPDF(exportWindow.name);
 }
 
 // Add event handlers
@@ -58,9 +61,9 @@ $('#save').click(saveSvg);
 $('#exportPNG').click(exportPNG);
 $('#exportPDF').click(exportPDF);
 
-const iframe = $('<iframe src="svg-editor.html?extensions=ext-xdomain-messaging.js' +
+const iframe = $('<iframe src="svg-editor-es.html?extensions=ext-xdomain-messaging.js' +
   window.location.href.replace(/\?(.*)$/, '&$1') + // Append arguments to this file onto the iframe
-  '" width="900px" height="600px" id="svgedit" onload="initEmbed();"></iframe>'
+  '" width="900px" height="600px" id="svgedit""></iframe>'
 );
 iframe[0].addEventListener('load', function () {
   svgCanvas = new EmbeddedSVGEdit(frame);

editor/embedapi.js

@@ -95,7 +95,7 @@ function getMessageListener (t) {
 *   messages will be allowed when same origin is not used; defaults to none.
 *   If supplied, it should probably be the same as svgEditor's allowedOrigins
 */
-class EmbeddedSVGEdit {
+export default class EmbeddedSVGEdit {
   constructor (frame, allowedOrigins) {
     this.allowedOrigins = allowedOrigins || [];
     // Initialize communication
@@ -116,7 +116,7 @@ class EmbeddedSVGEdit {
     // alert("['" + l.join("', '") + "']");
     // Run in svgedit itself
     const functions = [
-      'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'exportPDF', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready'
+      'clearSvgContentElement', 'setIdPrefix', 'getCurrentDrawing', 'addSvgElementFromJson', 'getTransformList', 'matrixMultiply', 'hasMatrixTransform', 'transformListToTransform', 'convertToNum', 'findDefs', 'getUrlFromAttr', 'getHref', 'setHref', 'getBBox', 'getRotationAngle', 'getElem', 'getRefElem', 'assignAttributes', 'cleanupElement', 'remapElement', 'recalculateDimensions', 'sanitizeSvg', 'runExtensions', 'addExtension', 'round', 'getIntersectionList', 'getStrokedBBox', 'getVisibleElements', 'getVisibleElementsAndBBoxes', 'groupSvgElem', 'getId', 'getNextId', 'call', 'bind', 'prepareSvg', 'setRotationAngle', 'recalculateAllSelectedDimensions', 'clearSelection', 'addToSelection', 'selectOnly', 'removeFromSelection', 'selectAllInCurrentLayer', 'getMouseTarget', 'removeUnusedDefElems', 'svgCanvasToString', 'svgToString', 'embedImage', 'setGoodImage', 'open', 'save', 'rasterExport', 'exportPDF', 'getSvgString', 'randomizeIds', 'uniquifyElems', 'setUseData', 'convertGradients', 'convertToGroup', 'setSvgString', 'importSvgString', 'identifyLayers', 'createLayer', 'cloneLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility', 'moveSelectedToLayer', 'mergeLayer', 'mergeAllLayers', 'leaveContext', 'setContext', 'clear', 'linkControlPoints', 'getContentElem', 'getRootElem', 'getSelectedElems', 'getResolution', 'getZoom', 'getVersion', 'setUiStrings', 'setConfig', 'getTitle', 'setGroupTitle', 'getDocumentTitle', 'setDocumentTitle', 'getEditorNS', 'setResolution', 'getOffset', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode', 'getColor', 'setColor', 'setGradient', 'setPaint', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth', 'setStrokeWidth', 'setStrokeAttr', 'getStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'getStrokeOpacity', 'setPaintOpacity', 'getPaintOpacity', 'getBlur', 'setBlurNoUndo', 'setBlurOffsets', 'setBlur', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'setFontColor', 'getFontColor', 'getFontSize', 'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setLinkURL', 'setRectRadius', 'makeHyperlink', 'removeHyperlink', 'setSegType', 'convertToPath', 'changeSelectedAttribute', 'deleteSelectedElements', 'cutSelectedElements', 'copySelectedElements', 'pasteElements', 'groupSelectedElements', 'pushGroupProperties', 'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveUpDownSelected', 'moveSelectedElements', 'cloneSelectedElements', 'alignSelectedElements', 'updateCanvas', 'setBackground', 'cycleElement', 'getPrivateMethods', 'zoomChanged', 'ready', 'getUIStrings'
     ];
 
     // TODO: rewrite the following, it's pretty scary.
@@ -167,5 +167,3 @@ class EmbeddedSVGEdit {
     return cbid;
   }
 }
-
-export default EmbeddedSVGEdit;

editor/external/dynamic-import-polyfill/importModule.js

@@ -23,7 +23,7 @@ export function importScript(url) {
       destructor();
     };
     script.onload = () => {
-      resolve(window[vector]);
+      resolve();
       destructor();
     };
     script.src = url;

editor/svg-editor.js

@@ -579,13 +579,254 @@ editor.init = function () {
     editor.putLocale(null, goodLangs, curConfig);
   };
 
-  // Load extensions
+  const stateObj = {tool_scale: editor.tool_scale};
-  // Bit of a hack to run extensions in local Opera/IE9
+
-  if (document.location.protocol === 'file:') {
+  const setFlyoutPositions = function () {
-    setTimeout(extFunc, 100);
+    $('.tools_flyout').each(function () {
-  } else {
+      const shower = $('#' + this.id + '_show');
-    extFunc();
+      const pos = shower.offset();
-  }
+      const w = shower.outerWidth();
+      $(this).css({left: (pos.left + w) * editor.tool_scale, top: pos.top});
+    });
+  };
+
+  const scaleElements = function (elems, scale) {
+    // const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused
+    const sides = ['top', 'left', 'bottom', 'right'];
+
+    elems.each(function () {
+      // Handled in CSS
+      // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
+      const el = $(this);
+      const w = el.outerWidth() * (scale - 1);
+      const h = el.outerHeight() * (scale - 1);
+      // const margins = {}; // Currently unused
+
+      for (let i = 0; i < 4; i++) {
+        const s = sides[i];
+        let cur = el.data('orig_margin-' + s);
+        if (cur == null) {
+          cur = parseInt(el.css('margin-' + s), 10);
+          // Cache the original margin
+          el.data('orig_margin-' + s, cur);
+        }
+        let val = cur * scale;
+        if (s === 'right') {
+          val += w;
+        } else if (s === 'bottom') {
+          val += h;
+        }
+
+        el.css('margin-' + s, val);
+        // el.css('outline', '1px solid red');
+      }
+    });
+  };
+
+  const setIconSize = editor.setIconSize = function (size) {
+    // const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
+    const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
+  '        #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
+  '        #g_panel > *, #tool_font_size > *, .tools_flyout';
+
+    const elems = $(selToscale);
+
+    let scale = 1;
+    if (typeof size === 'number') {
+      scale = size;
+    } else {
+      const iconSizes = {s: 0.75, m: 1, l: 1.25, xl: 1.5};
+      scale = iconSizes[size];
+    }
+
+    stateObj.tool_scale = editor.tool_scale = scale;
+
+    setFlyoutPositions();
+    // $('.tools_flyout').each(function () {
+    //   const pos = $(this).position();
+    //   console.log($(this), pos.left+(34 * scale));
+    //   $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
+    //   console.log('l', $(this).css('left'));
+    // });
+    //
+    // const scale = .75;
+
+    const hiddenPs = elems.parents(':hidden');
+    hiddenPs.css('visibility', 'hidden').show();
+    scaleElements(elems, scale);
+    hiddenPs.css('visibility', 'visible').hide();
+    // return;
+
+    $.pref('iconsize', size);
+    $('#iconsize').val(size);
+
+    // Change icon size
+    // $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
+    // .find('> svg, > img').each(function () {
+    //   this.setAttribute('width',size_num);
+    //   this.setAttribute('height',size_num);
+    // });
+    //
+    // $.resizeSvgIcons({
+    //   '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
+    //   '#logo > svg, #logo > img': size_num * 1.3,
+    //   '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
+    // });
+    // if (size != 's') {
+    //   $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
+    // }
+
+    // Note that all rules will be prefixed with '#svg_editor' when parsed
+    const cssResizeRules = {
+      // '.tool_button,\
+      // .push_button,\
+      // .tool_button_current,\
+      // .push_button_pressed,\
+      // .disabled,\
+      // .icon_label,\
+      // .tools_flyout .tool_button': {
+      //   width: {s: '16px', l: '32px', xl: '48px'},
+      //   height: {s: '16px', l: '32px', xl: '48px'},
+      //   padding: {s: '1px', l: '2px', xl: '3px'}
+      // },
+      // '.tool_sep': {
+      //   height: {s: '16px', l: '32px', xl: '48px'},
+      //   margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
+      // },
+      // '#main_icon': {
+      //   width: {s: '31px', l: '53px', xl: '75px'},
+      //   height: {s: '22px', l: '42px', xl: '64px'}
+      // },
+      '#tools_top': {
+        left: 50 + $('#main_button').width(),
+        height: 72
+      },
+      '#tools_left': {
+        width: 31,
+        top: 74
+      },
+      'div#workarea': {
+        left: 38,
+        top: 74
+      }
+      // '#tools_bottom': {
+      //   left: {s: '27px', l: '46px', xl: '65px'},
+      //   height: {s: '58px', l: '98px', xl: '145px'}
+      // },
+      // '#color_tools': {
+      //   'border-spacing': {s: '0 1px'},
+      //   'margin-top': {s: '-1px'}
+      // },
+      // '#color_tools .icon_label': {
+      //   width: {l:'43px', xl: '60px'}
+      // },
+      // '.color_tool': {
+      //   height: {s: '20px'}
+      // },
+      // '#tool_opacity': {
+      //   top: {s: '1px'},
+      //   height: {s: 'auto', l:'auto', xl:'auto'}
+      // },
+      // '#tools_top input, #tools_bottom input': {
+      //   'margin-top': {s: '2px', l: '4px', xl: '5px'},
+      //   height: {s: 'auto', l: 'auto', xl: 'auto'},
+      //   border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
+      //   'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
+      // },
+      // '#zoom_panel': {
+      //   'margin-top': {s: '3px', l: '4px', xl: '5px'}
+      // },
+      // '#copyright, #tools_bottom .label': {
+      //   'font-size': {l: '1.5em', xl: '2em'},
+      //   'line-height': {s: '15px'}
+      // },
+      // '#tools_bottom_2': {
+      //   width: {l: '295px', xl: '355px'},
+      //   top: {s: '4px'}
+      // },
+      // '#tools_top > div, #tools_top': {
+      //   'line-height': {s: '17px', l: '34px', xl: '50px'}
+      // },
+      // '.dropdown button': {
+      //   height: {s: '18px', l: '34px', xl: '40px'},
+      //   'line-height': {s: '18px', l: '34px', xl: '40px'},
+      //   'margin-top': {s: '3px'}
+      // },
+      // '#tools_top label, #tools_bottom label': {
+      //   'font-size': {s: '1em', l: '1.5em', xl: '2em'},
+      //   height: {s: '25px', l: '42px', xl: '64px'}
+      // },
+      // 'div.toolset': {
+      //   height: {s: '25px', l: '42px', xl: '64px'}
+      // },
+      // '#tool_bold, #tool_italic': {
+      //   'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
+      // },
+      // '#sidepanels': {
+      //   top: {s: '50px', l: '88px', xl: '125px'},
+      //   bottom: {s: '51px', l: '68px', xl: '65px'}
+      // },
+      // '#layerbuttons': {
+      //   width: {l: '130px', xl: '175px'},
+      //   height: {l: '24px', xl: '30px'}
+      // },
+      // '#layerlist': {
+      //   width: {l: '128px', xl: '150px'}
+      // },
+      // '.layer_button': {
+      //   width: {l: '19px', xl: '28px'},
+      //   height: {l: '19px', xl: '28px'}
+      // },
+      // 'input.spin-button': {
+      //   'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
+      //   'background-position': {l: '100% -5px', xl: '100% -2px'},
+      //   'padding-right': {l: '24px', xl: '24px' }
+      // },
+      // 'input.spin-button.up': {
+      //   'background-position': {l: '100% -45px', xl: '100% -42px'}
+      // },
+      // 'input.spin-button.down': {
+      //   'background-position': {l: '100% -85px', xl: '100% -82px'}
+      // },
+      // '#position_opts': {
+      //   width: {all: (size_num*4) +'px'}
+      // }
+    };
+
+    let ruleElem = $('#tool_size_rules');
+    if (!ruleElem.length) {
+      ruleElem = $('<style id="tool_size_rules"></style>').appendTo('head');
+    } else {
+      ruleElem.empty();
+    }
+
+    if (size !== 'm') {
+      let styleStr = '';
+      $.each(cssResizeRules, function (selector, rules) {
+        selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');
+        styleStr += selector + '{';
+        $.each(rules, function (prop, values) {
+          let val;
+          if (typeof values === 'number') {
+            val = (values * scale) + 'px';
+          } else if (values[size] || values.all) {
+            val = (values[size] || values.all);
+          }
+          styleStr += (prop + ':' + val + ';');
+        });
+        styleStr += '}';
+      });
+      // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
+      const prefix = '-' + uaPrefix.toLowerCase() + '-';
+      styleStr += (selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' +
+        ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers
+        ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1 / scale) + ');}' // Hack for sliders
+      );
+      ruleElem.text(styleStr);
+    }
+
+    setFlyoutPositions();
+  };
   $.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {
     w: 24, h: 24,
     id_match: false,
@@ -2053,15 +2294,6 @@ editor.init = function () {
     });
   };
 
-  const setFlyoutPositions = function () {
-    $('.tools_flyout').each(function () {
-      const shower = $('#' + this.id + '_show');
-      const pos = shower.offset();
-      const w = shower.outerWidth();
-      $(this).css({left: (pos.left + w) * editor.tool_scale, top: pos.top});
-    });
-  };
-
   const setupFlyouts = function (holders) {
     $.each(holders, function (holdSel, btnOpts) {
       const buttons = $(holdSel).children();
@@ -2196,244 +2428,6 @@ editor.init = function () {
     return '';
   }());
 
-  const scaleElements = function (elems, scale) {
-    // const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused
-    const sides = ['top', 'left', 'bottom', 'right'];
-
-    elems.each(function () {
-      // Handled in CSS
-      // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
-      const el = $(this);
-      const w = el.outerWidth() * (scale - 1);
-      const h = el.outerHeight() * (scale - 1);
-      // const margins = {}; // Currently unused
-
-      for (let i = 0; i < 4; i++) {
-        const s = sides[i];
-        let cur = el.data('orig_margin-' + s);
-        if (cur == null) {
-          cur = parseInt(el.css('margin-' + s), 10);
-          // Cache the original margin
-          el.data('orig_margin-' + s, cur);
-        }
-        let val = cur * scale;
-        if (s === 'right') {
-          val += w;
-        } else if (s === 'bottom') {
-          val += h;
-        }
-
-        el.css('margin-' + s, val);
-        // el.css('outline', '1px solid red');
-      }
-    });
-  };
-
-  const setIconSize = editor.setIconSize = function (size) {
-    // const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
-    const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
-'        #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
-'        #g_panel > *, #tool_font_size > *, .tools_flyout';
-
-    const elems = $(selToscale);
-
-    let scale = 1;
-    if (typeof size === 'number') {
-      scale = size;
-    } else {
-      const iconSizes = {s: 0.75, m: 1, l: 1.25, xl: 1.5};
-      scale = iconSizes[size];
-    }
-
-    stateObj.tool_scale = editor.tool_scale = scale;
-
-    setFlyoutPositions();
-    // $('.tools_flyout').each(function () {
-    //   const pos = $(this).position();
-    //   console.log($(this), pos.left+(34 * scale));
-    //   $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
-    //   console.log('l', $(this).css('left'));
-    // });
-    //
-    // const scale = .75;
-
-    const hiddenPs = elems.parents(':hidden');
-    hiddenPs.css('visibility', 'hidden').show();
-    scaleElements(elems, scale);
-    hiddenPs.css('visibility', 'visible').hide();
-    // return;
-
-    $.pref('iconsize', size);
-    $('#iconsize').val(size);
-
-    // Change icon size
-    // $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
-    // .find('> svg, > img').each(function () {
-    //   this.setAttribute('width',size_num);
-    //   this.setAttribute('height',size_num);
-    // });
-    //
-    // $.resizeSvgIcons({
-    //   '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
-    //   '#logo > svg, #logo > img': size_num * 1.3,
-    //   '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
-    // });
-    // if (size != 's') {
-    //   $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
-    // }
-
-    // Note that all rules will be prefixed with '#svg_editor' when parsed
-    const cssResizeRules = {
-      // '.tool_button,\
-      // .push_button,\
-      // .tool_button_current,\
-      // .push_button_pressed,\
-      // .disabled,\
-      // .icon_label,\
-      // .tools_flyout .tool_button': {
-      //   width: {s: '16px', l: '32px', xl: '48px'},
-      //   height: {s: '16px', l: '32px', xl: '48px'},
-      //   padding: {s: '1px', l: '2px', xl: '3px'}
-      // },
-      // '.tool_sep': {
-      //   height: {s: '16px', l: '32px', xl: '48px'},
-      //   margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
-      // },
-      // '#main_icon': {
-      //   width: {s: '31px', l: '53px', xl: '75px'},
-      //   height: {s: '22px', l: '42px', xl: '64px'}
-      // },
-      '#tools_top': {
-        left: 50 + $('#main_button').width(),
-        height: 72
-      },
-      '#tools_left': {
-        width: 31,
-        top: 74
-      },
-      'div#workarea': {
-        left: 38,
-        top: 74
-      }
-      // '#tools_bottom': {
-      //   left: {s: '27px', l: '46px', xl: '65px'},
-      //   height: {s: '58px', l: '98px', xl: '145px'}
-      // },
-      // '#color_tools': {
-      //   'border-spacing': {s: '0 1px'},
-      //   'margin-top': {s: '-1px'}
-      // },
-      // '#color_tools .icon_label': {
-      //   width: {l:'43px', xl: '60px'}
-      // },
-      // '.color_tool': {
-      //   height: {s: '20px'}
-      // },
-      // '#tool_opacity': {
-      //   top: {s: '1px'},
-      //   height: {s: 'auto', l:'auto', xl:'auto'}
-      // },
-      // '#tools_top input, #tools_bottom input': {
-      //   'margin-top': {s: '2px', l: '4px', xl: '5px'},
-      //   height: {s: 'auto', l: 'auto', xl: 'auto'},
-      //   border: {s: '1px solid #555', l: 'auto', xl: 'auto'},
-      //   'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
-      // },
-      // '#zoom_panel': {
-      //   'margin-top': {s: '3px', l: '4px', xl: '5px'}
-      // },
-      // '#copyright, #tools_bottom .label': {
-      //   'font-size': {l: '1.5em', xl: '2em'},
-      //   'line-height': {s: '15px'}
-      // },
-      // '#tools_bottom_2': {
-      //   width: {l: '295px', xl: '355px'},
-      //   top: {s: '4px'}
-      // },
-      // '#tools_top > div, #tools_top': {
-      //   'line-height': {s: '17px', l: '34px', xl: '50px'}
-      // },
-      // '.dropdown button': {
-      //   height: {s: '18px', l: '34px', xl: '40px'},
-      //   'line-height': {s: '18px', l: '34px', xl: '40px'},
-      //   'margin-top': {s: '3px'}
-      // },
-      // '#tools_top label, #tools_bottom label': {
-      //   'font-size': {s: '1em', l: '1.5em', xl: '2em'},
-      //   height: {s: '25px', l: '42px', xl: '64px'}
-      // },
-      // 'div.toolset': {
-      //   height: {s: '25px', l: '42px', xl: '64px'}
-      // },
-      // '#tool_bold, #tool_italic': {
-      //   'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
-      // },
-      // '#sidepanels': {
-      //   top: {s: '50px', l: '88px', xl: '125px'},
-      //   bottom: {s: '51px', l: '68px', xl: '65px'}
-      // },
-      // '#layerbuttons': {
-      //   width: {l: '130px', xl: '175px'},
-      //   height: {l: '24px', xl: '30px'}
-      // },
-      // '#layerlist': {
-      //   width: {l: '128px', xl: '150px'}
-      // },
-      // '.layer_button': {
-      //   width: {l: '19px', xl: '28px'},
-      //   height: {l: '19px', xl: '28px'}
-      // },
-      // 'input.spin-button': {
-      //   'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},
-      //   'background-position': {l: '100% -5px', xl: '100% -2px'},
-      //   'padding-right': {l: '24px', xl: '24px' }
-      // },
-      // 'input.spin-button.up': {
-      //   'background-position': {l: '100% -45px', xl: '100% -42px'}
-      // },
-      // 'input.spin-button.down': {
-      //   'background-position': {l: '100% -85px', xl: '100% -82px'}
-      // },
-      // '#position_opts': {
-      //   width: {all: (size_num*4) +'px'}
-      // }
-    };
-
-    let ruleElem = $('#tool_size_rules');
-    if (!ruleElem.length) {
-      ruleElem = $('<style id="tool_size_rules"></style>').appendTo('head');
-    } else {
-      ruleElem.empty();
-    }
-
-    if (size !== 'm') {
-      let styleStr = '';
-      $.each(cssResizeRules, function (selector, rules) {
-        selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');
-        styleStr += selector + '{';
-        $.each(rules, function (prop, values) {
-          let val;
-          if (typeof values === 'number') {
-            val = (values * scale) + 'px';
-          } else if (values[size] || values.all) {
-            val = (values[size] || values.all);
-          }
-          styleStr += (prop + ':' + val + ';');
-        });
-        styleStr += '}';
-      });
-      // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';
-      const prefix = '-' + uaPrefix.toLowerCase() + '-';
-      styleStr += (selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' +
-        ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers
-        ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1 / scale) + ');}' // Hack for sliders
-      );
-      ruleElem.text(styleStr);
-    }
-
-    setFlyoutPositions();
-  };
-
   // TODO: Combine this with addDropDown or find other way to optimize
   const addAltDropDown = function (elem, list, callback, opts) {
     const button = $(elem);
@@ -4822,7 +4816,6 @@ editor.init = function () {
   });
 
   // init SpinButtons
-  const stateObj = {tool_scale: editor.tool_scale};
   $('#rect_rx').SpinButton({min: 0, max: 1000, stateObj, callback: changeRectRadius});
   $('#stroke_width').SpinButton({min: 0, max: 99, smallStep: 0.1, stateObj, callback: changeStrokeWidth});
   $('#angle').SpinButton({min: -180, max: 180, step: 5, stateObj, callback: changeRotationAngle});
@@ -4951,6 +4944,10 @@ editor.init = function () {
     }
   }, false);
 
+  editor.canvas.getUIStrings = function () {
+    return uiStrings;
+  };
+
   editor.openPrep = function (func) {
     $('#main_menu').hide();
     if (undoMgr.getUndoStackSize() === 0) {
@@ -5156,6 +5153,13 @@ editor.init = function () {
     curConfig,
     setLang
   });
+  // Load extensions
+  // Bit of a hack to run extensions in local Opera/IE9
+  if (document.location.protocol === 'file:') {
+    setTimeout(extFunc, 100);
+  } else {
+    extFunc();
+  }
 };
 
 editor.ready = function (cb) {

editor/svgutils.js

@@ -1156,11 +1156,11 @@ export const executeAfterLoads = function (name, scripts, cb, options = {globals
         // Todo: Once `import()` and modules widely supported, switch to it
         return oldProm.then(() => importer(script));
       }, Promise.resolve()).then(function () {
-        loadedScripts[name] = true;
         endCallback();
         loadedScripts[name].forEach((cb) => {
           cb();
         });
+        loadedScripts[name] = true;
       })();
     }
   };