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

minor improvements

Browse Source
This commit is contained in:
JFH
2020-11-30 11:00:09 +01:00
parent 8ab5d331c8
commit 7950f7ce4a
3 changed files with 73 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/editor/index.html
View File

@@ -122,32 +122,28 @@
</a>
</li>
</ul>
</div>
</div>
</div> <!-- main_menu -->
</div> <!-- main_button -->
<div id="tools_top">
<div id="editor_panel">
<div class="tool_sep"></div>
<se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
<se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
</div>
<!-- History buttons -->
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></se-button>
<se-button id="tool_redo" title="Redo" shortcut="Y" src="./images/redo.svg" disabled></se-button>
</div>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div id="selected_panel">
<div class="toolset">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
<se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
</se-button>
<se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg"></se-button>
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
</se-button>
<se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+["
src="./images/move_bottom.png"></se-button>
<se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.png"></se-button>
<se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
<se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
<se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
@@ -155,11 +151,9 @@
<se-input id="elem_id" data-attr="id" size="10" label="id:" title="Identify the element"></se-input>
<se-input id="elem_class" data-attr="class" size="10" label="class:" title="Element class"></se-input>
</div>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
title="Change rotation angle"></se-spin-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
<div class="toolset" id="tool_blur" title="Change gaussian blur value">
<se-spin-input size="2" id="blur" min=0 max=10 step=0.1 src="./images/blur.svg"
title="Change gaussian blur value"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=10 step=0.1 src="./images/blur.svg" title="Change gaussian blur value"></se-spin-input>
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
@@ -179,16 +173,14 @@
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
</se-input>
</div>
</div>
</div> <!-- selected_panel -->
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="Clone Elements" shortcut="C" src="./images/clone.svg"></se-button>
<se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace"
src="./images/delete.svg"></se-button>
<se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace" src="./images/delete.svg"></se-button>
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg">
</se-button>
<se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg"></se-button>
<se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
<se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
<se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
@@ -206,23 +198,18 @@
</select>
</label>
<div class="tool_sep"></div>
</div>
</div> <!-- multiselected_panel -->
<div id="rect_panel">
<div class="toolset">
<se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
title="Change rectangle width"></se-input>
<se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
title="Change rectangle height"></se-input>
<se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg" title="Change rectangle width"></se-input>
<se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg" title="Change rectangle height"></se-input>
</div>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
</div>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius" data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div id="image_panel">
<div class="toolset">
<se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
title="Change image width"></se-input>
<se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
title="Change image height"></se-input>
<se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg" title="Change image width"></se-input>
<se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg" title="Change image height"></se-input>
</div>
<div class="toolset">
<label id="tool_image_url">url:
@@ -234,7 +221,7 @@
title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
</label>
</div>
</div>
</div> <!-- image_panel -->
<div id="circle_panel">
<div class="toolset">
<se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
@@ -243,33 +230,27 @@
<div class="toolset">
<se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
</div>
</div>
</div> <!-- circle_panel -->
<div id="ellipse_panel">
<div class="toolset">
<se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
</se-input>
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
</se-input>
<se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:"></se-input>
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:"></se-input>
</div>
<div class="toolset">
<se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
<se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
</div>
</div>
</div> <!-- ellipse_panel -->
<div id="line_panel">
<div class="toolset">
<se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
</se-input>
<se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
</se-input>
<se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:"></se-input>
<se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:"></se-input>
</div>
<div class="toolset">
<se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
</se-input>
<se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
</se-input>
<se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:"></se-input>
<se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:"></se-input>
</div>
</div>
</div> <!-- line_panel -->
<div id="text_panel">
<div class="toolset">
<se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
@@ -294,11 +275,10 @@
</ul>
</div>
</div>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
src="./images/fontsize.svg"></se-spin-input>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
</div>
</div> <!-- text_panel -->
<!-- formerly gsvg_panel -->
<div id="container_panel">
<div class="tool_sep"></div>
@@ -307,20 +287,20 @@
<span>label:</span>
<input id="g_title" data-attr="title" size="10" type="text" />
</label>
</div>
</div> <!-- container_panel -->
<div id="use_panel">
<div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
</div>
</div> <!-- use_panel -->
<div id="g_panel">
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
</div>
</div> <!-- g_panel -->
<!-- For anchor elements -->
<div id="a_panel">
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" />
</label>
</div>
</div> <!-- a_panel -->
<div id="path_node_panel">
<div class="tool_sep"></div>
<div id="tool_node_link" class="tool_button push_button_pressed" title="Link Control Points"></div>
@@ -333,10 +313,9 @@
</select>
<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_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> <!-- path_node_panel -->
</div> <!-- tools_top -->
<div id="cur_context_panel">
</div>
@@ -415,10 +394,8 @@
<div id="cur_linecap" title="Linecap: Butt"></div>
<button></button>
</div>
<div id="tool_opacity">
<se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity">
</se-spin-input>
<se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity" label=""></se-spin-input>
<div id="opacity_dropdown" class="dropdown">
<button></button>
<ul>
@@ -432,7 +409,7 @@
</li>
</ul>
</div>
</div>
</div> <!-- tool_opacity -->
<se-palette id="palette"></se-palette>
</div> <!-- tools_bottom -->
<div id="option_lists" class="dropdown">
@@ -455,8 +432,6 @@
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
</ul>
</div>
<!-- hidden divs -->
<div id="color_picker"></div>
</div> <!-- svg_editor -->
<div id="svg_source_editor">
<div class="overlay"></div>

36
src/editor/svgedit.css
View File

@@ -38,10 +38,6 @@ hr {
border-bottom: 1px solid #808080;
}
select {
margin-top: 4px;
}
#svgroot {
-moz-user-select: none;
-webkit-user-select: none;
@@ -420,6 +416,31 @@ select {
margin-top: 5px;
}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
.color_block {
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
#tools_left {
position: absolute;
border-right: none;
@@ -728,6 +749,13 @@ input[type=text] {
#toggle_stroke_tools:hover {
background: white;
}
.color_tool > * {
float: left;
margin-right: 5px;
}
#tool_opacity { right: 0;}
#tool_fill { left: 0; }
#tool_stroke { left: 60px;}
#tool_opacity {
overflow: visible;

21
src/editor/svgedit.js
View File

@@ -946,7 +946,7 @@ editor.init = () => {
* @type {module:svgcanvas.SvgCanvas}
*/
editor.canvas = svgCanvas = new SvgCanvas(
document.getElementById('svgcanvas'),
$id('svgcanvas'),
curConfig
);
@@ -1217,18 +1217,6 @@ editor.init = () => {
}
};
/**
*
* @returns {void}
*/
const operaRepaint = function () {
// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
if (!window.opera) {
return;
}
$('<p/>').hide().appendTo('body').remove();
};
/**
*
* @param {Element} opt
@@ -1243,7 +1231,6 @@ editor.init = () => {
if (changeElem) {
svgCanvas.setStrokeAttr('stroke-' + pre, val);
}
operaRepaint();
setIcon('#cur_' + pre, id, 20);
$(opt).addClass('current').siblings().removeClass('current');
}
@@ -1343,7 +1330,7 @@ editor.init = () => {
* @param {Element} elem
* @returns {void}
*/
const setInputWidth = function (elem) {
const setInputWidth = (elem) => {
const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
$(elem).width(w);
};
@@ -1631,8 +1618,6 @@ editor.init = () => {
nostroke: bNoStroke
}
);
operaRepaint();
};
/**
@@ -2789,12 +2774,10 @@ editor.init = () => {
$('#stroke_style').change(function () {
svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
operaRepaint();
});
$('#stroke_linejoin').change(function () {
svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());
operaRepaint();
});
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)