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

#se-input line, rectangel and coordinate related input changes

master
Agriya Dev5 2020-11-17 18:30:47 +05:30
parent ae81a32cdd
commit 9f7a370b9f
5 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/editor/components/seInput.js
View File

@ -31,7 +31,11 @@ class SeInput extends Input {
get [internal.template] () {
const result = super[internal.template];
result.content.prepend(fragmentFrom.html`
<label><span><img src="./images/logo.svg" alt="icon" width="18" height="18"></img></span></label>`.cloneNode(true));
<label>
<span class="icon_label">
<img src="./images/logo.svg" alt="icon" width="18" height="18" />
</span>
</label>`.cloneNode(true));
// change the style so it fits in our toolbar
result.content.append(
templateFrom.html`
@ -40,6 +44,15 @@ class SeInput extends Input {
margin-top: 5px;
height: 23px;
}
.icon_label {
float: left;
padding-top: 3px;
padding-right: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 0;
}
</style>
`.content
);

3
src/editor/images/height.svg Normal file
View File

@ -0,0 +1,3 @@
<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 100 100">
<path transform="rotate(90, 50, 50)" fill="#000000" stroke="#000000" stroke-width="8" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" id="svg_6"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 402 B

3
src/editor/images/width.svg Normal file
View File

@ -0,0 +1,3 @@
<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 100 100">
<path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>
</svg></svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

38
src/editor/index.html
View File

@ -173,12 +173,8 @@
<button></button>
</div>
<div id="xy_panel" class="toolset">
<label>
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x" />
</label>
<label>
y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y" />
</label>
<se-input id="selected_x" data-attr="x" inputsize="41px" type="text" label="x:" title="Change X coordinate"></se-input>
<se-input id="selected_y" data-attr="y" inputsize="41px" type="text" label="y:" title="Change Y coordinate"></se-input>
</div>
</div>
<!-- Buttons when multiple elements are selected -->
@ -208,14 +204,8 @@
</div>
<div id="rect_panel">
<div class="toolset">
<label id="rect_width_tool" title="Change rectangle width">
<span id="rwidthLabel" class="icon_label"></span>
<input id="rect_width" class="attr_changer" size="3" data-attr="width" />
</label>
<label id="rect_height_tool" title="Change rectangle height">
<span id="rheightLabel" class="icon_label"></span>
<input id="rect_height" class="attr_changer" size="3" data-attr="height" />
</label>
<se-input id="rect_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change rectangle width"></se-input>
<se-input id="rect_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change rectangle height"></se-input>
</div>
<label id="cornerRadiusLabel" class="toolset" title="Change Rectangle Corner Radius">
<span class="icon_label"></span>
@ -263,24 +253,12 @@
</div>
<div id="line_panel">
<div class="toolset">
<label id="tool_line_x1">x1:
<input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3"
data-attr="x1" />
</label>
<label id="tool_line_y1">y1:
<input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3"
data-attr="y1" />
</label>
<se-input id="line_x1" data-attr="x1" inputsize="41px" title="Change line's starting x coordinate" type="text" label="x1:"></se-input>
<se-input id="line_y1" data-attr="y1" inputsize="41px" title="Change line's starting y coordinate" type="text" label="y1:"></se-input>
</div>
<div class="toolset">
<label id="tool_line_x2">x2:
<input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3"
data-attr="x2" />
</label>
<label id="tool_line_y2">y2:
<input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3"
data-attr="y2" />
</label>
<se-input id="line_x2" data-attr="x2" inputsize="41px" title="Change line's ending x coordinate" type="text" label="x2:"></se-input>
<se-input id="line_y2" data-attr="y2" inputsize="41px" title="Change line's ending y coordinate" type="text" label="y2:"></se-input>
</div>
</div>
<div id="text_panel">

8
src/editor/svgedit.js
View File

@ -4908,6 +4908,14 @@ editor.init = () => {
$id('ellipse_cy').addEventListener('change', (e) => attrChanger(e));
$id('ellipse_rx').addEventListener('change', (e) => attrChanger(e));
$id('ellipse_ry').addEventListener('change', (e) => attrChanger(e));
$id('selected_x').addEventListener('change', (e) => attrChanger(e));
$id('selected_y').addEventListener('change', (e) => attrChanger(e));
$id('rect_width').addEventListener('change', (e) => attrChanger(e));
$id('rect_height').addEventListener('change', (e) => attrChanger(e));
$id('line_x1').addEventListener('change', (e) => attrChanger(e));
$id('line_y1').addEventListener('change', (e) => attrChanger(e));
$id('line_x2').addEventListener('change', (e) => attrChanger(e));
$id('line_y2').addEventListener('change', (e) => attrChanger(e));
// register actions for layer toolbar
$id('layer_new').addEventListener('click', newLayer);