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

#path-node-panel-se-button node clone,delete, suppath button change to se-button

Browse Source
This commit is contained in:
Agriya Dev5
2020-11-12 19:48:59 +05:30
parent 63999c017d
commit cb096f3ecf
83 changed files with 363 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/editor/images/tool_add_subpath.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124 124">
<defs>
<linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
<stop offset="1" stop-color="#33a533" stop-opacity="1"/>
</linearGradient>
</defs>
<g>
<path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
<g id="svg_7">
<circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
<line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
<line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
</g>
</g>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

8
src/editor/images/tool_node_clone.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
<circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
<circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
<circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
<line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
<line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/editor/images/tool_node_delete.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
<circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
<circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
<circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
<g transform="rotate(-45.291072845458984 9.81157112121582,9.244086265563965) " id="svg_6">
<line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
<line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
</g>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

17
src/editor/images/tool_openclose_path.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<g>
<path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
<line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
<g stroke-width="15" stroke="#00f" fill="#0ff">
<circle r="30" cy="41" cx="123"/>
<circle r="30" cy="146" cx="40"/>
<circle r="30" cy="260" cx="69"/>
<circle r="30" cy="260" cx="228"/>
<circle r="30" cy="148" cx="260"/>
</g>
<g stroke="#A00" stroke-width="15" fill="none">
<line x1="168" y1="24" x2="210" y2="150"/>
<line x1="210" y1="24" x2="168" y2="150"/>
</g>
</g>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

8
src/editor/index.html
View File

@@ -374,10 +374,10 @@
<option id="straight_segments" selected="selected" value="4">Straight</option>
<option id="curve_segments" value="6">Curve</option>
</select>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
<se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg"></se-button>
<se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
</div>
</div> <!-- tools_top -->
<div id="cur_context_panel">

19
src/editor/svgedit.js
View File

@@ -1303,8 +1303,8 @@ editor.init = () => {
* @returns {void}
*/
const togglePathEditMode = function (editmode, elems) {
// $('#path_node_panel').toggle(editmode);
// $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
$('#path_node_panel').toggle(editmode);
$('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
if (editmode) {
// Change select icon
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
@@ -1978,7 +1978,7 @@ editor.init = () => {
$('#tool_reorient').toggleClass('disabled', angle === 0);
} else {
const point = path.getNodePoint();
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
$('#tool_add_subpath').pressed = false;
$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
// Show open/close button based on selected point
@@ -3724,8 +3724,9 @@ editor.init = () => {
*/
const addSubPath = function () {
const button = $('#tool_add_subpath');
const sp = !button.hasClass('push_button_pressed');
button.toggleClass('push_button_pressed tool_button');
const sp = !button.hasClass('pressed');
button.pressed = sp;
// button.toggleClass('push_button_pressed tool_button');
path.addSubPath(sp);
};
@@ -4880,6 +4881,10 @@ editor.init = () => {
$id('tool_align_top').addEventListener('click', () => clickAlign('top'));
$id('tool_align_bottom').addEventListener('click', () => clickAlign('bottom'));
$id('tool_align_middle').addEventListener('click', () => clickAlign('middle'));
$id('tool_node_clone').addEventListener('click', clonePathNode);
$id('tool_node_delete').addEventListener('click', deletePathNode);
$id('tool_openclose_path').addEventListener('click', opencloseSubPath);
$id('tool_add_subpath').addEventListener('click', addSubPath);
// register actions for left panel
$id('tool_select').addEventListener('click', clickSelect);
@@ -4939,10 +4944,6 @@ editor.init = () => {
{sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
{sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
{sel: '#tool_node_clone', fn: clonePathNode, evt: 'click'},
{sel: '#tool_node_delete', fn: deletePathNode, evt: 'click'},
{sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click'},
{sel: '#tool_add_subpath', fn: addSubPath, evt: 'click'},
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
{sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
{sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},