- 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 fixesmaster
parent
52268c4324
commit
5ad83b9b87
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
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
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
/* globals jQuery */
|
||||
import EmbeddedSVGEdit from './embedapi.js';
|
||||
import svgEditor from './svg-editor.js';
|
||||
|
||||
const $ = jQuery;
|
||||
|
||||
|
@ -24,17 +23,20 @@ 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);
|
||||
});
|
||||
}
|
||||
|
||||
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
|
||||
|
@ -50,6 +52,7 @@ function exportPDF () {
|
|||
'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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -23,7 +23,7 @@ export function importScript(url) {
|
|||
destructor();
|
||||
};
|
||||
script.onload = () => {
|
||||
resolve(window[vector]);
|
||||
resolve();
|
||||
destructor();
|
||||
};
|
||||
script.src = url;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
})();
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue