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,