diff --git a/src/editor/browser-not-supported.html b/src/editor/browser-not-supported.html
index ca55d156..1e7595e1 100644
--- a/src/editor/browser-not-supported.html
+++ b/src/editor/browser-not-supported.html
@@ -3,7 +3,7 @@
-
+
Browser does not support SVG | SVG-edit
-
+
Sorry, but your browser does not support SVG. Below is a list of
alternate browsers and versions that support SVG and SVG-edit
(from caniuse.com ).
diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js
index da380e9e..4d3ee83a 100644
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -221,7 +221,7 @@ export class FlyingButton extends HTMLElement {
break;
case 'SE-BUTTON':
// change to the current action
- this.setAttribute('src', ev.target.getAttribute('src'));
+ this.$img.setAttribute('src', ev.target.getAttribute('src'));
this.currentAction = ev.target;
this.setAttribute('pressed', 'pressed');
// and close the menu
diff --git a/src/editor/embedapi.html b/src/editor/embedapi.html
index dda45a19..a065db3d 100644
--- a/src/editor/embedapi.html
+++ b/src/editor/embedapi.html
@@ -3,7 +3,7 @@
Embed API
-
+
diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js
index 094a9618..acdf2b41 100644
--- a/src/editor/extensions/ext-connector/ext-connector.js
+++ b/src/editor/extensions/ext-connector/ext-connector.js
@@ -361,7 +361,6 @@ export default {
/** @todo JFH special flag */
newUI: true,
name: strings.name,
- svgicons: 'conn.svg',
buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button);
}),
diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
index 641bea96..b87dce50 100644
--- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
+++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
@@ -74,7 +74,6 @@ export default {
const buttons = [
{
id: 'tool_eyedropper',
- icon: 'eyedropper.png',
type: 'mode',
events: {
click () {
@@ -86,7 +85,7 @@ export default {
return {
name: strings.name,
- svgicons: 'eyedropper-icon.xml',
+ newUI: true,
buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button);
}),
diff --git a/src/editor/extensions/ext-imagelib/index.html b/src/editor/extensions/ext-imagelib/index.html
index c3da0a8c..2374b06c 100644
--- a/src/editor/extensions/ext-imagelib/index.html
+++ b/src/editor/extensions/ext-imagelib/index.html
@@ -3,7 +3,7 @@
-
-
+
@@ -19,7 +19,7 @@
Select an image:
smiley.svg
-logo.png
+logo.svg
diff --git a/src/editor/extensions/ext-imagelib/openclipart.html b/src/editor/extensions/ext-imagelib/openclipart.html
index 31b4a1a0..7771afb4 100644
--- a/src/editor/extensions/ext-imagelib/openclipart.html
+++ b/src/editor/extensions/ext-imagelib/openclipart.html
@@ -3,7 +3,7 @@
-
-
+
diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js
index be145ef8..7c93f5f3 100644
--- a/src/editor/extensions/ext-panning/ext-panning.js
+++ b/src/editor/extensions/ext-panning/ext-panning.js
@@ -39,8 +39,8 @@ export default {
}
}];
return {
+ newUI: true,
name: strings.name,
- svgicons: 'ext-panning.xml',
buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button);
}),
diff --git a/src/editor/extensions/ext-polygon/ext-polygon.js b/src/editor/extensions/ext-polygon/ext-polygon.js
index e6e403a1..ab5d9ab8 100644
--- a/src/editor/extensions/ext-polygon/ext-polygon.js
+++ b/src/editor/extensions/ext-polygon/ext-polygon.js
@@ -164,8 +164,8 @@ export default {
}
}];
return {
+ newUI: true,
name: strings.name,
- svgicons: 'polygon-icons.svg',
buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button);
}),
diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js
index f146d84a..ede8eb33 100644
--- a/src/editor/extensions/ext-shapes/ext-shapes.js
+++ b/src/editor/extensions/ext-shapes/ext-shapes.js
@@ -154,7 +154,7 @@ export default {
loadIcons();
}
const buttons = [{
- id: 'tool_shapelib',
+ id: 'tool_shapelib_show',
icon: 'shapes.png',
type: 'mode_flyout',
position: 6,
@@ -166,6 +166,7 @@ export default {
}];
return {
+ newUI: true,
svgicons: 'ext-shapes.xml',
buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button);
diff --git a/src/editor/extensions/ext-star/ext-star.js b/src/editor/extensions/ext-star/ext-star.js
index 3bf58395..2778106a 100644
--- a/src/editor/extensions/ext-star/ext-star.js
+++ b/src/editor/extensions/ext-star/ext-star.js
@@ -120,6 +120,7 @@ export default {
}];
return {
+ newUI: true,
name: strings.name,
svgicons: 'star-icons.svg',
buttons: strings.buttons.map((button, i) => {
diff --git a/src/editor/images/eyedropper-icon.xml b/src/editor/images/eye_dropper.svg
similarity index 95%
rename from src/editor/images/eyedropper-icon.xml
rename to src/editor/images/eye_dropper.svg
index 8f8233e4..28004dff 100644
--- a/src/editor/images/eyedropper-icon.xml
+++ b/src/editor/images/eye_dropper.svg
@@ -1,6 +1,3 @@
-
-
-
@@ -27,8 +24,4 @@
-
-
-
-
-
+
\ No newline at end of file
diff --git a/src/editor/images/image.png b/src/editor/images/image.png
deleted file mode 100644
index f8fe5641..00000000
Binary files a/src/editor/images/image.png and /dev/null differ
diff --git a/src/editor/images/logo.png b/src/editor/images/logo.png
deleted file mode 100644
index 479125ad..00000000
Binary files a/src/editor/images/logo.png and /dev/null differ
diff --git a/src/editor/images/markers-icons.xml b/src/editor/images/markers-icons.xml
index 7a9f3047..5e07db49 100644
--- a/src/editor/images/markers-icons.xml
+++ b/src/editor/images/markers-icons.xml
@@ -60,11 +60,6 @@
-
-
-
-
-
diff --git a/src/editor/images/panning.png b/src/editor/images/panning.png
deleted file mode 100644
index 95947801..00000000
Binary files a/src/editor/images/panning.png and /dev/null differ
diff --git a/src/editor/images/ext-panning.xml b/src/editor/images/panning.svg
similarity index 86%
rename from src/editor/images/ext-panning.xml
rename to src/editor/images/panning.svg
index 5fa1aac4..21badbf0 100644
--- a/src/editor/images/ext-panning.xml
+++ b/src/editor/images/panning.svg
@@ -1,6 +1,4 @@
-
-
+
-
-
-
+
+
diff --git a/src/editor/images/polygon-icons.svg b/src/editor/images/polygon-icons.svg
deleted file mode 100644
index 732fa814..00000000
--- a/src/editor/images/polygon-icons.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/editor/images/polygon.png b/src/editor/images/polygon.png
deleted file mode 100644
index 5bb96ce9..00000000
Binary files a/src/editor/images/polygon.png and /dev/null differ
diff --git a/src/editor/images/polygon.svg b/src/editor/images/polygon.svg
index e4962213..732fa814 100644
--- a/src/editor/images/polygon.svg
+++ b/src/editor/images/polygon.svg
@@ -1,76 +1,14 @@
-
-
-
- This file is released under the MIT license.
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
diff --git a/src/editor/images/rect.png b/src/editor/images/rect.png
deleted file mode 100644
index d7e673cf..00000000
Binary files a/src/editor/images/rect.png and /dev/null differ
diff --git a/src/editor/images/redo.png b/src/editor/images/redo.png
deleted file mode 100644
index f959305b..00000000
Binary files a/src/editor/images/redo.png and /dev/null differ
diff --git a/src/editor/images/reorient.png b/src/editor/images/reorient.png
deleted file mode 100644
index 728a70bd..00000000
Binary files a/src/editor/images/reorient.png and /dev/null differ
diff --git a/src/editor/images/select.png b/src/editor/images/select.png
deleted file mode 100644
index b81c8547..00000000
Binary files a/src/editor/images/select.png and /dev/null differ
diff --git a/src/editor/images/select_node.png b/src/editor/images/select_node.png
deleted file mode 100644
index 9705e9a4..00000000
Binary files a/src/editor/images/select_node.png and /dev/null differ
diff --git a/src/editor/images/ext-shapes.xml b/src/editor/images/shapelib.svg
similarity index 93%
rename from src/editor/images/ext-shapes.xml
rename to src/editor/images/shapelib.svg
index 5befd016..511f843f 100644
--- a/src/editor/images/ext-shapes.xml
+++ b/src/editor/images/shapelib.svg
@@ -1,10 +1,6 @@
-
-
-
-
diff --git a/src/editor/images/source.png b/src/editor/images/source.png
deleted file mode 100644
index 39471617..00000000
Binary files a/src/editor/images/source.png and /dev/null differ
diff --git a/src/editor/images/square.png b/src/editor/images/square.png
deleted file mode 100644
index 08fc39dd..00000000
Binary files a/src/editor/images/square.png and /dev/null differ
diff --git a/src/editor/images/star.png b/src/editor/images/star.png
deleted file mode 100644
index 321e3cee..00000000
Binary files a/src/editor/images/star.png and /dev/null differ
diff --git a/src/editor/images/star-icons.svg b/src/editor/images/star.svg
similarity index 100%
rename from src/editor/images/star-icons.svg
rename to src/editor/images/star.svg
diff --git a/src/editor/images/to_path.png b/src/editor/images/to_path.png
deleted file mode 100644
index 4e0e3c05..00000000
Binary files a/src/editor/images/to_path.png and /dev/null differ
diff --git a/src/editor/images/undo.png b/src/editor/images/undo.png
deleted file mode 100644
index 8187a691..00000000
Binary files a/src/editor/images/undo.png and /dev/null differ
diff --git a/src/editor/images/wireframe.png b/src/editor/images/wireframe.png
deleted file mode 100644
index 8ac3c85b..00000000
Binary files a/src/editor/images/wireframe.png and /dev/null differ
diff --git a/src/editor/images/zoom.png b/src/editor/images/zoom.png
deleted file mode 100644
index 557220af..00000000
Binary files a/src/editor/images/zoom.png and /dev/null differ
diff --git a/src/editor/index.html b/src/editor/index.html
index 562f1d4a..8a8c2aed 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -385,24 +385,29 @@
-
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/editor/locale.js b/src/editor/locale.js
index 600107e8..4a827961 100644
--- a/src/editor/locale.js
+++ b/src/editor/locale.js
@@ -279,12 +279,12 @@ export const readLang = function (langData) {
text: properties.text_contents,
toggle_stroke_tools: ui.toggle_stroke_tools,
tool_add_subpath: tools.add_subpath,
- tool_alignbottom: tools.align_bottom,
- tool_aligncenter: tools.align_center,
- tool_alignleft: tools.align_left,
- tool_alignmiddle: tools.align_middle,
- tool_alignright: tools.align_right,
- tool_aligntop: tools.align_top,
+ tool_align_bottom: tools.align_bottom,
+ tool_align_center: tools.align_center,
+ tool_align_left: tools.align_left,
+ tool_align_middle: tools.align_middle,
+ tool_align_right: tools.align_right,
+ tool_align_top: tools.align_top,
tool_angle: properties.angle,
tool_blur: properties.blur,
tool_bold: properties.bold,
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 987f0a08..d4f2ded5 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -956,7 +956,7 @@ editor.init = () => {
// Todo: Set `alts: {}` with keys as the IDs in fallback set to
// `uiStrings` (localized) values
fallback: {
- logo: 'logo.png',
+ logo: 'logo.svg',
select_node: 'select_node.png',
square: 'square.png',
rect: 'rect.png',
@@ -1151,7 +1151,7 @@ editor.init = () => {
let resizeTimer, curScrollPos;
let exportWindow = null,
- defaultImageURL = curConfig.imgPath + 'logo.png',
+ defaultImageURL = curConfig.imgPath + 'logo.svg',
zoomInIcon = 'crosshair',
zoomOutIcon = 'crosshair',
uiContext = 'toolbars';
@@ -1442,23 +1442,6 @@ editor.init = () => {
$(opt).addClass('current').siblings().removeClass('current');
}
- /**
- * This is a common function used when a tool has been clicked (chosen).
- * It does several common things:
- * - Removes the `tool_button_current` class from whatever tool currently has it.
- * - Adds the `tool_button_current` class to the button passed in.
- * @function module:SVGEditor.toolButtonClick
- * @param {string|Element} button The DOM element or string selector representing the toolbar button
- * @returns {boolean} Whether the button was disabled or not
- */
- const toolButtonClick = editor.toolButtonClick = function (button) {
- if ($(button).hasClass('disabled')) { return false; }
- $('#styleoverrides').text('');
- workarea.css('cursor', 'auto');
- $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
- $(button).addClass('tool_button_current').removeClass('tool_button');
- return true;
- };
/**
* This is a common function used when a tool has been clicked (chosen).
* It does several common things:
@@ -2784,7 +2767,7 @@ editor.init = () => {
button.bind(name, func);
} else {
button.bind(name, function () {
- if (toolButtonClick(button)) {
+ if (updateLeftPanel(button)) {
func();
}
});
@@ -2831,6 +2814,7 @@ editor.init = () => {
// Set button up according to its type
switch (btn.type) {
case 'mode_flyout':
+ case 'mode':
$id(btn.id).addEventListener('click', () => {
if (updateLeftPanel(btn.id)) {
btn.events.click();
@@ -3440,7 +3424,7 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickFHPath = function () {
+ const clickFHPath = () => {
if (updateLeftPanel('tool_fhpath')) {
svgCanvas.setMode('fhpath');
}
@@ -3450,7 +3434,7 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickLine = function () {
+ const clickLine = () => {
if (updateLeftPanel('tool_line')) {
svgCanvas.setMode('line');
}
@@ -3460,8 +3444,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickSquare = function () {
- if (toolButtonClick('#tool_square')) {
+ const clickSquare = () => {
+ if (updateLeftPanel('tool_square')) {
svgCanvas.setMode('square');
}
};
@@ -3470,8 +3454,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickRect = function () {
- if (toolButtonClick('#tool_rect')) {
+ const clickRect = () => {
+ if (updateLeftPanel('tool_rect')) {
svgCanvas.setMode('rect');
}
};
@@ -3480,8 +3464,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickFHRect = function () {
- if (toolButtonClick('#tool_fhrect')) {
+ const clickFHRect = () => {
+ if (updateLeftPanel('tool_fhrect')) {
svgCanvas.setMode('fhrect');
}
};
@@ -3490,8 +3474,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickCircle = function () {
- if (toolButtonClick('#tool_circle')) {
+ const clickCircle = () => {
+ if (updateLeftPanel('tool_circle')) {
svgCanvas.setMode('circle');
}
};
@@ -3500,8 +3484,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickEllipse = function () {
- if (toolButtonClick('#tool_ellipse')) {
+ const clickEllipse = () => {
+ if (updateLeftPanel('tool_ellipse')) {
svgCanvas.setMode('ellipse');
}
};
@@ -3510,8 +3494,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickFHEllipse = function () {
- if (toolButtonClick('#tool_fhellipse')) {
+ const clickFHEllipse = () => {
+ if (updateLeftPanel('tool_fhellipse')) {
svgCanvas.setMode('fhellipse');
}
};
@@ -3520,7 +3504,7 @@ editor.init = () => {
*
* @returns {void}
*/
- const clickImage = function () {
+ const clickImage = () => {
if (updateLeftPanel('tool_image')) {
svgCanvas.setMode('image');
}
@@ -3555,8 +3539,8 @@ editor.init = () => {
*
* @returns {void}
*/
- const dblclickZoom = function () {
- if (toolButtonClick('#tool_zoom')) {
+ const dblclickZoom = () => {
+ if (updateLeftPanel('tool_zoom')) {
zoomImage();
clickSelect();
}
@@ -4542,7 +4526,7 @@ editor.init = () => {
// Test for embedImage support (use timeout to not interfere with page load)
setTimeout(function () {
- svgCanvas.embedImage('images/logo.png', function (datauri) {
+ svgCanvas.embedImage('images/logo.svg', function (datauri) {
if (!datauri) {
// Disable option
$('#image_save_opts [value=embed]').attr('disabled', 'disabled');
@@ -4903,9 +4887,16 @@ editor.init = () => {
$id('tool_text').addEventListener('click', clickText);
$id('tool_image').addEventListener('click', clickImage);
$id('tool_zoom').addEventListener('click', clickZoom);
+ $id('tool_zoom').addEventListener('dblclick', dblclickZoom);
$id('tool_path').addEventListener('click', clickPath);
$id('tool_line').addEventListener('click', clickLine);
- // $id('tool_').addEventListener('click', clickP);
+ // flyout
+ $id('tool_rect').addEventListener('click', clickRect);
+ $id('tool_square').addEventListener('click', clickSquare);
+ $id('tool_fhrect').addEventListener('click', clickFHRect);
+ $id('tool_ellipse').addEventListener('click', clickEllipse);
+ $id('tool_circle').addEventListener('click', clickCircle);
+ $id('tool_fhellipse').addEventListener('click', clickFHEllipse);
// register actions for layer toolbar
$id('layer_new').addEventListener('click', newLayer);
@@ -4915,18 +4906,6 @@ editor.init = () => {
$id('layer_rename').addEventListener('click', layerRename);
const toolButtons = [
- {sel: '#tool_rect', fn: clickRect, evt: 'mouseup',
- key: ['R', true], parent: '#tools_rect', icon: 'rect'},
- {sel: '#tool_square', fn: clickSquare, evt: 'mouseup',
- parent: '#tools_rect', icon: 'square'},
- {sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',
- parent: '#tools_rect', icon: 'fh_rect'},
- {sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',
- key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse'},
- {sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',
- parent: '#tools_ellipse', icon: 'circle'},
- {sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',
- parent: '#tools_ellipse', icon: 'fh_ellipse'},
{sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
{sel: '#tool_save', fn () {
if (editingsource) {
@@ -5105,8 +5084,6 @@ editor.init = () => {
selectPrev();
}
});
-
- $('#tool_zoom').dblclick(dblclickZoom);
},
/**
* @returns {void}
diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js
index 7db161ef..2506477c 100644
--- a/src/svgcanvas/svgcanvas.js
+++ b/src/svgcanvas/svgcanvas.js
@@ -954,7 +954,7 @@ class SvgCanvas {
let
// String with image URL of last loadable image
- lastGoodImgUrl = curConfig.imgPath + 'logo.png',
+ lastGoodImgUrl = curConfig.imgPath + 'logo.svg',
// Boolean indicating whether or not a draw action has been started
started = false,