- 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
master
Brett Zamir 2018-05-25 22:43:01 +08:00
parent 52268c4324
commit 5ad83b9b87
13 changed files with 1108 additions and 1448 deletions

745
dist/index-es.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

745
dist/index-umd.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

304
dist/locale/lang.en.js vendored
View File

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

View File

@ -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();
this.base = that.Type.matrix;
this.base(s);
super(s);
this.angle = new svg.Property('angle', s);
}
};
this.Type.skewX = class extends this.Type.SkewBase {
constructor (s) {
super();
this.base = that.Type.SkewBase;
this.base(s);
super(s);
this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
}
};
this.Type.skewY = class extends this.Type.SkewBase {
constructor (s) {
super();
this.base = that.Type.SkewBase;
this.base(s);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.setContext = function (ctx) {
// fill
@ -926,9 +917,7 @@ function build (opts) {
svg.Element.PathElementBase = class extends svg.Element.RenderedElementBase {
constructor (node) {
super();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.polyline;
this.base(node);
super(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();
this.base = svg.Element.PathElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.GradientBase;
this.base(node);
super(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();
this.base = svg.Element.GradientBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.AnimateBase;
this.base(node);
super(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();
this.base = svg.Element.AnimateBase;
this.base(node);
super(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();
this.base = svg.Element.AnimateBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.path;
this.base(node);
super(node);
this.horizAdvX = 0;
}
@ -2070,9 +2015,7 @@ function build (opts) {
// glyph element
svg.Element.glyph = class extends svg.Element.path {
constructor (node) {
super();
this.base = svg.Element.path;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.TextElementBase;
this.base(node);
super(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();
this.base = svg.Element.TextElementBase;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.RenderedElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(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();
this.base = svg.Element.ElementBase;
this.base(node);
super(node);
this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
this.extraFilterDistance = this.blurRadius;

View File

@ -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(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
svgCanvas.rasterExport('PNG', null, exportWindow.name);
const exportWindow = window.open(
'data:text/html;charset=utf-8,' + encodeURIComponent('<title>' + str + '</title><h1>' + str + '</h1>'),
'svg-edit-exportWindow'
);
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
svgCanvas.bind('exportedPDF', function (win, data) {
alert(data.dataurlstring);
/**
// If you want to handle the PDF blob yourself, do as follows
svgCanvas.bind('exportedPDF', function (win, data) {
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);

View File

@ -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;

View File

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

View File

@ -579,13 +579,254 @@ editor.init = function () {
editor.putLocale(null, goodLangs, curConfig);
};
// Load extensions
// Bit of a hack to run extensions in local Opera/IE9
if (document.location.protocol === 'file:') {
setTimeout(extFunc, 100);
} else {
extFunc();
}
const stateObj = {tool_scale: editor.tool_scale};
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 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) {

View File

@ -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;
})();
}
};