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

Implement horizontal or vertical distribution alignment (#779)

Browse Source 
* Implement horizontal or vertical distribution alignment

* fix lint issue and change align svg image
This commit is contained in:
mulder
2022-06-23 16:48:56 +09:00
committed by GitHub
parent 9e3a4a9091
commit 0598e8e978
5 changed files with 219 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/images/align_distrib_horiz.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" height="17" id="svg_3" width="11.59" x="30.16" y="16.23"/><rect class="cls-2" height="24.34" id="svg_1" width="11.59" x="9.29" y="12.56"/><line class="cls-3" x1="36.21" x2="36.21" y1="4.81" y2="44.66"/><line class="cls-3" x1="14.96" x2="14.96" y1="4.81" y2="44.66"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

1
src/editor/images/align_distrib_verti.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" height="17" width="11.59" x="20.2" y="6.28" transform="rotate(-90 26 14.7767)"/><rect class="cls-2" height="24.34" width="11.59" x="20.21" y="23.48" transform="rotate(-90 26 35.6533)"/><line class="cls-3" x1="26" x2="26" y1="-5.4" y2="34.45" transform="rotate(-90 26 14.5226)"/><line class="cls-3" x1="26" x2="26" y1="15.85" y2="55.7" transform="rotate(-90 26 35.7734)"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

6
src/editor/panels/TopPanel.html
View File

@@ -52,6 +52,10 @@
img-height="22px"></se-list-item>
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
img-height="22px"></se-list-item>
<se-list-item id="tool_poshoriz" value="dh" src="align_distrib_horiz.svg" title="tools.align_distrib_horiz"
img-height="22px"></se-list-item>
<se-list-item id="tool_posverti" value="dv" src="align_distrib_verti.svg" title="tools.align_distrib_verti"
img-height="22px"></se-list-item>
</se-list>
</div>
<div class="xy_panel">
@@ -79,6 +83,8 @@
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-button id="tool_align_distrib_horiz" title="tools.align_distrib_horiz" src="align_distrib_horiz.svg"></se-button>
<se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti" src="align_distrib_verti.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected::largest::smallest::page">

2
src/editor/panels/TopPanel.js
View File

@@ -944,6 +944,8 @@ class TopPanel {
$click($id('tool_align_top'), () => this.clickAlign.bind(this)('top'))
$click($id('tool_align_bottom'), () => this.clickAlign.bind(this)('bottom'))
$click($id('tool_align_middle'), () => this.clickAlign.bind(this)('middle'))
$click($id('tool_align_distrib_horiz'), () => this.clickAlign.bind(this)('distrib_horiz'))
$click($id('tool_align_distrib_verti'), () => this.clickAlign.bind(this)('distrib_verti'))
$click($id('tool_node_clone'), this.clonePathNode.bind(this))
$click($id('tool_node_delete'), this.deletePathNode.bind(this))
$click($id('tool_openclose_path'), this.opencloseSubPath.bind(this))