zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

in progress

master
jfh 2020-11-03 23:51:15 +01:00
parent 6cc38b7049
commit 3b771fa891
38 changed files with 79 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/browser-not-supported.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/> <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<link rel="icon" type="image/png" href="images/logo.png"/> <link rel="icon" type="image/png" href="images/logo.svg"/>
<link rel="stylesheet" href="svgedit.css"/> <link rel="stylesheet" href="svgedit.css"/>
<title>Browser does not support SVG | SVG-edit</title> <title>Browser does not support SVG | SVG-edit</title>
<style> <style>
@ -35,7 +35,7 @@
</style> </style>
</head> </head>
<body> <body>
<img id="logo" src="images/logo.png" width="48" height="48" alt="SVG-edit logo" /> <img id="logo" src="images/logo.svg" width="48" height="48" alt="SVG-edit logo" />
<p>Sorry, but your browser does not support SVG. Below is a list of <p>Sorry, but your browser does not support SVG. Below is a list of
alternate browsers and versions that support SVG and SVG-edit alternate browsers and versions that support SVG and SVG-edit
(from <a href="https://caniuse.com/#cats=SVG">caniuse.com</a>). (from <a href="https://caniuse.com/#cats=SVG">caniuse.com</a>).

2
src/editor/components/seFlyingButton.js
View File

@ -221,7 +221,7 @@ export class FlyingButton extends HTMLElement {
break; break;
case 'SE-BUTTON': case 'SE-BUTTON':
// change to the current action // 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.currentAction = ev.target;
this.setAttribute('pressed', 'pressed'); this.setAttribute('pressed', 'pressed');
// and close the menu // and close the menu

2
src/editor/embedapi.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Embed API</title> <title>Embed API</title>
<link rel="icon" type="image/png" href="images/logo.png"/> <link rel="icon" type="image/png" href="images/logo.svg"/>
<script src="jquery.min.js"></script> <script src="jquery.min.js"></script>
<script type="module" src="embedapi-dom.js"></script> <script type="module" src="embedapi-dom.js"></script>
</head> </head>

1
src/editor/extensions/ext-connector/ext-connector.js
View File

@ -361,7 +361,6 @@ export default {
/** @todo JFH special flag */ /** @todo JFH special flag */
newUI: true, newUI: true,
name: strings.name, name: strings.name,
svgicons: 'conn.svg',
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);
}), }),

3
src/editor/extensions/ext-eyedropper/ext-eyedropper.js
View File

@ -74,7 +74,6 @@ export default {
const buttons = [ const buttons = [
{ {
id: 'tool_eyedropper', id: 'tool_eyedropper',
icon: 'eyedropper.png',
type: 'mode', type: 'mode',
events: { events: {
click () { click () {
@ -86,7 +85,7 @@ export default {
return { return {
name: strings.name, name: strings.name,
svgicons: 'eyedropper-icon.xml', newUI: true,
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);
}), }),

4
src/editor/extensions/ext-imagelib/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>-</title> <title>-</title>
<link rel="icon" type="image/png" href="../../images/logo.png" /> <link rel="icon" type="image/png" href="../../images/logo.svg" />
<!-- Lacking browser support --> <!-- Lacking browser support -->
<script nomodule="" src="../../redirect-on-no-module-support.js"></script> <script nomodule="" src="../../redirect-on-no-module-support.js"></script>
@ -19,7 +19,7 @@
<h1>Select an image:</h1> <h1>Select an image:</h1>
<a href="smiley.svg">smiley.svg</a> <a href="smiley.svg">smiley.svg</a>
<br/> <br/>
<a href="../../images/logo.png">logo.png</a> <a href="../../images/logo.svg">logo.svg</a>
</body> </body>
</html> </html>

2
src/editor/extensions/ext-imagelib/openclipart.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>-</title> <title>-</title>
<link rel="icon" type="image/png" href="../../images/logo.png" /> <link rel="icon" type="image/svg" href="../../images/logo.svg" />
<!-- Lacking browser support --> <!-- Lacking browser support -->
<script nomodule="" src="../../redirect-on-no-module-support.js"></script> <script nomodule="" src="../../redirect-on-no-module-support.js"></script>

2
src/editor/extensions/ext-panning/ext-panning.js
View File

@ -39,8 +39,8 @@ export default {
} }
}]; }];
return { return {
newUI: true,
name: strings.name, name: strings.name,
svgicons: 'ext-panning.xml',
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);
}), }),

2
src/editor/extensions/ext-polygon/ext-polygon.js
View File

@ -164,8 +164,8 @@ export default {
} }
}]; }];
return { return {
newUI: true,
name: strings.name, name: strings.name,
svgicons: 'polygon-icons.svg',
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);
}), }),

3
src/editor/extensions/ext-shapes/ext-shapes.js
View File

@ -154,7 +154,7 @@ export default {
loadIcons(); loadIcons();
} }
const buttons = [{ const buttons = [{
id: 'tool_shapelib', id: 'tool_shapelib_show',
icon: 'shapes.png', icon: 'shapes.png',
type: 'mode_flyout', type: 'mode_flyout',
position: 6, position: 6,
@ -166,6 +166,7 @@ export default {
}]; }];
return { return {
newUI: true,
svgicons: 'ext-shapes.xml', svgicons: 'ext-shapes.xml',
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);

1
src/editor/extensions/ext-star/ext-star.js
View File

@ -120,6 +120,7 @@ export default {
}]; }];
return { return {
newUI: true,
name: strings.name, name: strings.name,
svgicons: 'star-icons.svg', svgicons: 'star-icons.svg',
buttons: strings.buttons.map((button, i) => { buttons: strings.buttons.map((button, i) => {

9
src/editor/images/eyedropper-icon.xml → src/editor/images/eye_dropper.svg
View File

@ -1,6 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="tool_eyedropper">
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit --> <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
<defs> <defs>
@ -27,8 +24,4 @@
<path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#aa56ff" stroke="#000000" stroke-width="7"/> <path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#aa56ff" stroke="#000000" stroke-width="7"/>
<path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/> <path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/>
</g> </g>
</svg> </svg>
</g>
<g id="svg_eof"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/editor/images/image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 799 B

BIN
src/editor/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

5
src/editor/images/markers-icons.xml
View File

@ -60,11 +60,6 @@
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,-30l0,60l60,0l0,-60z"/> <path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-30,-30l0,60l60,0l0,-60z"/>
</svg> </svg>
</g> </g>
<g id="star">
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
<path stroke-width="10" stroke="#ff7f00" fill="#ff7f00" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
</svg>
</g>
<g id="box_o"> <g id="box_o">
<svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-60 -60 120 120" xmlns="http://www.w3.org/2000/svg">
<path stroke-width="10" stroke="#ff7f00" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/> <path stroke-width="10" stroke="#ff7f00" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/editor/images/panning.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

8
src/editor/images/ext-panning.xml → src/editor/images/panning.svg
View File

@ -1,6 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="ext-panning">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<path d="m8.00038,150.84583l51.60005,-51.78485l0,25.89205l26.28711,0l35.45559,-0.20444l-0.72941,-24.34613l0.93304,-37.61812l-25.79949,0l51.5997,-51.78508l51.60047,51.78508l-25.80024,0l0,33.87256l1.13677,26.21891l21.45996,2.07722l39.3497,0l0,-25.89205l51.60043,51.78485l-51.60043,51.78563l0,-25.89281l-38.41666,-0.93639l-20.52692,0.20445l-3.00285,42.13754l0,20.76308l25.80024,0l-51.60047,51.78561l-51.5997,-51.78561l25.79949,0l0,-20.76308l0.72941,-41.20115l-41.98688,-0.20445l-20.68886,0l0,25.89281l-51.60005,-51.78563z" fill="#b2b2b2" id="svg_1" stroke="#000000" stroke-width="10"/> </svg> <path d="m8.00038,150.84583l51.60005,-51.78485l0,25.89205l26.28711,0l35.45559,-0.20444l-0.72941,-24.34613l0.93304,-37.61812l-25.79949,0l51.5997,-51.78508l51.60047,51.78508l-25.80024,0l0,33.87256l1.13677,26.21891l21.45996,2.07722l39.3497,0l0,-25.89205l51.60043,51.78485l-51.60043,51.78563l0,-25.89281l-38.41666,-0.93639l-20.52692,0.20445l-3.00285,42.13754l0,20.76308l25.80024,0l-51.60047,51.78561l-51.5997,-51.78561l25.79949,0l0,-20.76308l0.72941,-41.20115l-41.98688,-0.20445l-20.68886,0l0,25.89281l-51.60005,-51.78563z" fill="#b2b2b2" id="svg_1" stroke="#000000" stroke-width="10"/>
</g> </svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 789 B

After

Width:  |  Height:  |  Size: 713 B

14
src/editor/images/polygon-icons.svg
View File

@ -1,14 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="tool_polygon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -2 25 24">
<defs>
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_i22">
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
<stop stop-opacity="1" stop-color="#666666" offset="1"/>
</linearGradient>
</defs>
<polygon points="6.09251,19.6032 0.577744,10.0516 6.09251,0.5 17.1217,0.5 22.6365,10.0516 17.1217,19.6032" stroke="#000000" fill="url(#svg_i22)"/> </svg>
</g>
<g id="svg_eof"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 619 B

BIN
src/editor/images/polygon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

84
src/editor/images/polygon.svg
View File

@ -1,76 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg">
<svg <g id="tool_polygon">
xmlns:dc="http://purl.org/dc/elements/1.1/" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -2 25 24">
xmlns:svg="http://www.w3.org/2000/svg" <defs>
xmlns="http://www.w3.org/2000/svg" <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_i22">
xmlns:xlink="http://www.w3.org/1999/xlink" <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" <stop stop-opacity="1" stop-color="#666666" offset="1"/>
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="22.000000px"
height="22.000000px"
id="svg8728"
sodipodi:docname="polygon.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata id="license">
This file is released under the MIT license.
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1414"
inkscape:window-height="1016"
id="namedview989"
showgrid="false"
inkscape:zoom="9.8636364"
inkscape:cx="2.1014226"
inkscape:cy="26.429249"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs3">
<linearGradient
id="linearGradient928">
<stop
style="stop-color:#777777;stop-opacity:1;"
offset="0"
id="stop924" />
<stop
style="stop-color:#ffffff;stop-opacity:0"
offset="1.0000000"
id="stop926" />
</linearGradient> </linearGradient>
<radialGradient </defs>
gradientUnits="userSpaceOnUse" <polygon points="6.09251,19.6032 0.577744,10.0516 6.09251,0.5 17.1217,0.5 22.6365,10.0516 17.1217,19.6032" stroke="#000000" fill="url(#svg_i22)"/> </svg>
gradientTransform="matrix(1.0033963,-0.00853162,0.00155275,0.18261755,-0.31483228,15.390226)"
r="9.9786386"
fy="18.71875"
fx="10.531251"
cy="18.71875"
cx="10.531251"
id="radialGradient919"
xlink:href="#linearGradient928" />
</defs>
<g
id="layer1">
<path
id="path911"
style="opacity:1;fill:url(#radialGradient919);fill-opacity:1;stroke:none;stroke-width:0.98000002;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:304.81887817;stroke-opacity:1"
ry="1.9786382"
rx="9.9786386"
cy="18.71875"
cx="10.281251" />
<path
d="M 10.312501,3.499999 18.198468,9.2294899 15.186297,18.5 5.438705,18.5 2.4265338,9.2294894 Z"
id="path909"
style="opacity:1;fill:#ffffda;fill-opacity:1;stroke:#000000;stroke-width:1.00000001;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:304.81887817;stroke-opacity:1" />
</g> </g>
<g id="svg_eof"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 619 B

BIN
src/editor/images/rect.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 379 B

BIN
src/editor/images/redo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 656 B

BIN
src/editor/images/reorient.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 646 B

BIN
src/editor/images/select.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 389 B

BIN
src/editor/images/select_node.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 731 B

4
src/editor/images/ext-shapes.xml → src/editor/images/shapelib.svg
View File

@ -1,10 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg">
<g id="tool_shapelib">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,194.72501l0,0c0,-10.30901 35.8172,-18.666 80,-18.666c44.18298,0 80,8.35699 80,18.666l0,74.66699c0,10.30899 -35.81702,18.66699 -80,18.66699c-44.1828,0 -80,-8.358 -80,-18.66699l0,-74.66699z"/> <path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,194.72501l0,0c0,-10.30901 35.8172,-18.666 80,-18.666c44.18298,0 80,8.35699 80,18.666l0,74.66699c0,10.30899 -35.81702,18.66699 -80,18.66699c-44.1828,0 -80,-8.358 -80,-18.66699l0,-74.66699z"/>
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,114.608l0,0c0,-10.309 35.8172,-18.6668 80,-18.6668c44.18298,0 80,8.3578 80,18.6668l0,74.66699c0,10.30901 -35.81702,18.666 -80,18.666c-44.1828,0 -80,-8.35699 -80,-18.666l0,-74.66699z"/> <path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,114.608l0,0c0,-10.309 35.8172,-18.6668 80,-18.6668c44.18298,0 80,8.3578 80,18.6668l0,74.66699c0,10.30901 -35.81702,18.666 -80,18.666c-44.1828,0 -80,-8.35699 -80,-18.666l0,-74.66699z"/>
<path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,33.6667l0,0c0,-10.3094 35.8172,-18.6667 80,-18.6667c44.18298,0 80,8.3573 80,18.6667l0,74.6663c0,10.31 -35.81702,18.667 -80,18.667c-44.1828,0 -80,-8.357 -80,-18.667l0,-74.6663z"/> <path fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,33.6667l0,0c0,-10.3094 35.8172,-18.6667 80,-18.6667c44.18298,0 80,8.3573 80,18.6667l0,74.6663c0,10.31 -35.81702,18.667 -80,18.667c-44.1828,0 -80,-8.357 -80,-18.667l0,-74.6663z"/>
<path id="svg_1" fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m230,32.33334c0,10.30931 -35.81726,18.66666 -80,18.66666c-44.1828,0 -80,-8.35735 -80,-18.66666"/> <path id="svg_1" fill="#c0c0c0" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m230,32.33334c0,10.30931 -35.81726,18.66666 -80,18.66666c-44.1828,0 -80,-8.35735 -80,-18.66666"/>
</svg> </svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/editor/images/source.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 893 B

BIN
src/editor/images/square.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 328 B

BIN
src/editor/images/star.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

0
src/editor/images/star-icons.svg → src/editor/images/star.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 687 B

After

Width:  |  Height:  |  Size: 687 B

BIN
src/editor/images/to_path.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 938 B

BIN
src/editor/images/undo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 837 B

BIN
src/editor/images/wireframe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 268 B

BIN
src/editor/images/zoom.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

23
src/editor/index.html
View File

@ -385,24 +385,29 @@
<div id="tools_left" class="tools_panel"> <div id="tools_left" class="tools_panel">
<se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button> <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
<se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button> <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
<se-flyingbutton id="_tools_line_show" title="Line Tool (L)/Connect two objects"> <se-flyingbutton id="tools_line_show" title="Line Tool (L)/Connect two objects">
<se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button> <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
<se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button> <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
</se-flyingbutton> </se-flyingbutton>
<se-flyingbutton id="_tools_rect_show" title="Square/Rect Tool"> <se-flyingbutton id="tools_rect" title="Square/Rect Tool">
<se-button id="_tool_rect" title="Rectangle" src="./images/rect.svg"></se-button> <se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
<se-button id="_tool_square" title="Square" src="./images/square.svg"></se-button> <se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
<se-button id="_tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button> <se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
</se-flyingbutton> </se-flyingbutton>
<se-flyingbutton id="_tools_ellipse_show" title="Ellipse/Circle Tool"> <se-flyingbutton id="tools_ellipse_show" title="Ellipse/Circle Tool">
<se-button id="_tool_ellipse" title="Rectangle" src="./images/ellipse.svg"></se-button> <se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
<se-button id="_tool_circle" title="Square" src="./images/circle.svg"></se-button> <se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
<se-button id="_tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button> <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
</se-flyingbutton> </se-flyingbutton>
<se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button> <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
<se-button id="tool_shapelib_show" title="Shape library" src="./images/shapelib.svg"></se-button>
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button> <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button> <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
<se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button> <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
<se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
<se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
<se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
</div> <!-- tools_left --> </div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel"> <div id="tools_bottom" class="tools_panel">
<!-- Zoom buttons --> <!-- Zoom buttons -->

12
src/editor/locale.js
View File

@ -279,12 +279,12 @@ export const readLang = function (langData) {
text: properties.text_contents, text: properties.text_contents,
toggle_stroke_tools: ui.toggle_stroke_tools, toggle_stroke_tools: ui.toggle_stroke_tools,
tool_add_subpath: tools.add_subpath, tool_add_subpath: tools.add_subpath,
tool_alignbottom: tools.align_bottom, tool_align_bottom: tools.align_bottom,
tool_aligncenter: tools.align_center, tool_align_center: tools.align_center,
tool_alignleft: tools.align_left, tool_align_left: tools.align_left,
tool_alignmiddle: tools.align_middle, tool_align_middle: tools.align_middle,
tool_alignright: tools.align_right, tool_align_right: tools.align_right,
tool_aligntop: tools.align_top, tool_align_top: tools.align_top,
tool_angle: properties.angle, tool_angle: properties.angle,
tool_blur: properties.blur, tool_blur: properties.blur,
tool_bold: properties.bold, tool_bold: properties.bold,

83
src/editor/svgedit.js
View File

@ -956,7 +956,7 @@ editor.init = () => {
// Todo: Set `alts: {}` with keys as the IDs in fallback set to // Todo: Set `alts: {}` with keys as the IDs in fallback set to
// `uiStrings` (localized) values // `uiStrings` (localized) values
fallback: { fallback: {
logo: 'logo.png', logo: 'logo.svg',
select_node: 'select_node.png', select_node: 'select_node.png',
square: 'square.png', square: 'square.png',
rect: 'rect.png', rect: 'rect.png',
@ -1151,7 +1151,7 @@ editor.init = () => {
let resizeTimer, curScrollPos; let resizeTimer, curScrollPos;
let exportWindow = null, let exportWindow = null,
defaultImageURL = curConfig.imgPath + 'logo.png', defaultImageURL = curConfig.imgPath + 'logo.svg',
zoomInIcon = 'crosshair', zoomInIcon = 'crosshair',
zoomOutIcon = 'crosshair', zoomOutIcon = 'crosshair',
uiContext = 'toolbars'; uiContext = 'toolbars';
@ -1442,23 +1442,6 @@ editor.init = () => {
$(opt).addClass('current').siblings().removeClass('current'); $(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). * This is a common function used when a tool has been clicked (chosen).
* It does several common things: * It does several common things:
@ -2784,7 +2767,7 @@ editor.init = () => {
button.bind(name, func); button.bind(name, func);
} else { } else {
button.bind(name, function () { button.bind(name, function () {
if (toolButtonClick(button)) { if (updateLeftPanel(button)) {
func(); func();
} }
}); });
@ -2831,6 +2814,7 @@ editor.init = () => {
// Set button up according to its type // Set button up according to its type
switch (btn.type) { switch (btn.type) {
case 'mode_flyout': case 'mode_flyout':
case 'mode':
$id(btn.id).addEventListener('click', () => { $id(btn.id).addEventListener('click', () => {
if (updateLeftPanel(btn.id)) { if (updateLeftPanel(btn.id)) {
btn.events.click(); btn.events.click();
@ -3440,7 +3424,7 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickFHPath = function () { const clickFHPath = () => {
if (updateLeftPanel('tool_fhpath')) { if (updateLeftPanel('tool_fhpath')) {
svgCanvas.setMode('fhpath'); svgCanvas.setMode('fhpath');
} }
@ -3450,7 +3434,7 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickLine = function () { const clickLine = () => {
if (updateLeftPanel('tool_line')) { if (updateLeftPanel('tool_line')) {
svgCanvas.setMode('line'); svgCanvas.setMode('line');
} }
@ -3460,8 +3444,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickSquare = function () { const clickSquare = () => {
if (toolButtonClick('#tool_square')) { if (updateLeftPanel('tool_square')) {
svgCanvas.setMode('square'); svgCanvas.setMode('square');
} }
}; };
@ -3470,8 +3454,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickRect = function () { const clickRect = () => {
if (toolButtonClick('#tool_rect')) { if (updateLeftPanel('tool_rect')) {
svgCanvas.setMode('rect'); svgCanvas.setMode('rect');
} }
}; };
@ -3480,8 +3464,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickFHRect = function () { const clickFHRect = () => {
if (toolButtonClick('#tool_fhrect')) { if (updateLeftPanel('tool_fhrect')) {
svgCanvas.setMode('fhrect'); svgCanvas.setMode('fhrect');
} }
}; };
@ -3490,8 +3474,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickCircle = function () { const clickCircle = () => {
if (toolButtonClick('#tool_circle')) { if (updateLeftPanel('tool_circle')) {
svgCanvas.setMode('circle'); svgCanvas.setMode('circle');
} }
}; };
@ -3500,8 +3484,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickEllipse = function () { const clickEllipse = () => {
if (toolButtonClick('#tool_ellipse')) { if (updateLeftPanel('tool_ellipse')) {
svgCanvas.setMode('ellipse'); svgCanvas.setMode('ellipse');
} }
}; };
@ -3510,8 +3494,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickFHEllipse = function () { const clickFHEllipse = () => {
if (toolButtonClick('#tool_fhellipse')) { if (updateLeftPanel('tool_fhellipse')) {
svgCanvas.setMode('fhellipse'); svgCanvas.setMode('fhellipse');
} }
}; };
@ -3520,7 +3504,7 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const clickImage = function () { const clickImage = () => {
if (updateLeftPanel('tool_image')) { if (updateLeftPanel('tool_image')) {
svgCanvas.setMode('image'); svgCanvas.setMode('image');
} }
@ -3555,8 +3539,8 @@ editor.init = () => {
* *
* @returns {void} * @returns {void}
*/ */
const dblclickZoom = function () { const dblclickZoom = () => {
if (toolButtonClick('#tool_zoom')) { if (updateLeftPanel('tool_zoom')) {
zoomImage(); zoomImage();
clickSelect(); clickSelect();
} }
@ -4542,7 +4526,7 @@ editor.init = () => {
// Test for embedImage support (use timeout to not interfere with page load) // Test for embedImage support (use timeout to not interfere with page load)
setTimeout(function () { setTimeout(function () {
svgCanvas.embedImage('images/logo.png', function (datauri) { svgCanvas.embedImage('images/logo.svg', function (datauri) {
if (!datauri) { if (!datauri) {
// Disable option // Disable option
$('#image_save_opts [value=embed]').attr('disabled', 'disabled'); $('#image_save_opts [value=embed]').attr('disabled', 'disabled');
@ -4903,9 +4887,16 @@ editor.init = () => {
$id('tool_text').addEventListener('click', clickText); $id('tool_text').addEventListener('click', clickText);
$id('tool_image').addEventListener('click', clickImage); $id('tool_image').addEventListener('click', clickImage);
$id('tool_zoom').addEventListener('click', clickZoom); $id('tool_zoom').addEventListener('click', clickZoom);
$id('tool_zoom').addEventListener('dblclick', dblclickZoom);
$id('tool_path').addEventListener('click', clickPath); $id('tool_path').addEventListener('click', clickPath);
$id('tool_line').addEventListener('click', clickLine); $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 // register actions for layer toolbar
$id('layer_new').addEventListener('click', newLayer); $id('layer_new').addEventListener('click', newLayer);
@ -4915,18 +4906,6 @@ editor.init = () => {
$id('layer_rename').addEventListener('click', layerRename); $id('layer_rename').addEventListener('click', layerRename);
const toolButtons = [ 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_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
{sel: '#tool_save', fn () { {sel: '#tool_save', fn () {
if (editingsource) { if (editingsource) {
@ -5105,8 +5084,6 @@ editor.init = () => {
selectPrev(); selectPrev();
} }
}); });
$('#tool_zoom').dblclick(dblclickZoom);
}, },
/** /**
* @returns {void} * @returns {void}

2
src/svgcanvas/svgcanvas.js
View File

@ -954,7 +954,7 @@ class SvgCanvas {
let let
// String with image URL of last loadable image // 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 // Boolean indicating whether or not a draw action has been started
started = false, started = false,