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

add sePalette - in progress

master
JFH 2020-11-22 00:51:21 +01:00
parent 74ad604a08
commit 29f2847f27
9 changed files with 248 additions and 549 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/editor/components/index.js
View File

@ -4,3 +4,4 @@ import './seExplorerButton.js';
import './seDropdown.js'; import './seDropdown.js';
import './seInput.js'; import './seInput.js';
import './seSpinInput.js'; import './seSpinInput.js';
import './sePalette.js';

110
src/editor/components/sePalette.js Normal file
View File

@ -0,0 +1,110 @@
/* eslint-disable node/no-unpublished-import */
import 'elix/define/CenteredStrip.js';
const palette = [
// Todo: Make into configuration item?
'#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
'#ff0000', '#ff7f00', '#ffff00', '#7fff00',
'#00ff00', '#00ff7f', '#00ffff', '#007fff',
'#0000ff', '#7f00ff', '#ff00ff', '#ff007f',
'#7f0000', '#7f3f00', '#7f7f00', '#3f7f00',
'#007f00', '#007f3f', '#007f7f', '#003f7f',
'#00007f', '#3f007f', '#7f007f', '#7f003f',
'#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa',
'#aaffaa', '#aaffd4', '#aaffff', '#aad4ff',
'#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'
];
const template = document.createElement('template');
template.innerHTML = `
<style>
.square {
height: 15px;
width: 15px;
}
</style>
<div title="Click to change fill color, shift-click to change stroke color">
<elix-centered-strip style="width:300px">
</elix-centered-strip>
</div>
`;
/**
* @class SEPalette
*/
export class SEPalette extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super();
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$strip = this._shadowRoot.querySelector('elix-centered-strip');
palette.forEach((rgb) => {
const newDiv = document.createElement('div');
newDiv.classList.add('square');
newDiv.style.backgroundColor = rgb;
newDiv.dataset.rgb = rgb;
this.$strip.appendChild(newDiv);
});
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
this.$strip.addEventListener('click', (e) => {
e.preventDefault();
console.log(e);
this.dispatchEvent(this.$event);
});
}
}
// Register
customElements.define('se-palette', SEPalette);
/* #palette_holder {
overflow: hidden;
margin-top: 5px;
padding: 5px;
position: absolute;
right: 15px;
height: 16px;
background: #f0f0f0;
border-radius: 3px;
z-index: 2;
#palette {
float: left;
width: 632px;
height: 16px;
}
$('.palette_item').mousedown(function (evt) {
// shift key or right click for stroke
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
let color = $(this).data('rgb');
let paint;
// Webkit-based browsers returned 'initial' here for no stroke
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
paint = new $.jGraduate.Paint();
} else {
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
}
paintBox[picker].setPaint(paint);
svgCanvas.setColor(picker, color);
if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
svgCanvas.setPaintOpacity(picker, 1.0);
}
updateToolButtonState();
}).bind('contextmenu', function (e) { e.preventDefault(); });
*/

25
src/editor/components/seSpinInput.js
View File

@ -60,7 +60,6 @@ export class SESpinInput extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
console.log(name, newValue);
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'src': case 'src':
@ -177,27 +176,3 @@ export class SESpinInput extends HTMLElement {
// Register // Register
customElements.define('se-spin-input', SESpinInput); customElements.define('se-spin-input', SESpinInput);
/* TO DO
Call back for fontsize
function stepFontSize (elem, step) {
const origVal = Number(elem.value);
const sugVal = origVal + step;
const increasing = sugVal >= origVal;
if (step === 0) { return origVal; }
if (origVal >= 24) {
if (increasing) {
return Math.round(origVal * 1.1);
}
return Math.round(origVal / 1.1);
}
if (origVal <= 1) {
if (increasing) {
return origVal * 2;
}
return origVal / 2;
}
return sugVal;
}
*/

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 644 B

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

@ -0,0 +1,8 @@
<svg width="32" height="33" xmlns="http://www.w3.org/2000/svg">
<g id="svg_5">
<path id="svg_4" d="m17.49167,10.97621c6.9875,-0.325 12.1875,2.70833 12.13333,7.36667l-0.325,10.075c-0.75833,4.0625 -2.275,3.0875 -3.03333,0.10833l0.21667,-9.64166c-0.43333,-0.975 -1.08333,-1.625 -1.95,-1.51667" stroke-linejoin="round" stroke="#606060" fill="#c0c0c0"/>
<path id="svg_1" d="m2.00055,17.1309l10.72445,-10.72445l12.67445,12.13279l-3.52056,0.05389l-9.15389,9.26223l-10.72445,-10.72445z" stroke-linejoin="round" stroke="#000000" fill="#c0c0c0"/>
<path id="svg_3" d="m14.35,13.57621c-0.1625,-3.95417 0.86667,-11.7 -1.84167,-11.59167c-2.70833,0.10833 -2.6,2.05833 -2.16667,6.93333" stroke-linejoin="round" stroke="#000000" fill="none"/>
<circle id="svg_2" r="1.60938" cy="15.20121" cx="14.45833" stroke-linejoin="round" stroke="#000000" fill="none"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 867 B

11
src/editor/images/svg_edit_icons.svg
View File

@ -75,17 +75,6 @@
</svg> </svg>
</g> </g>
<g id="fill">
<svg width="32" height="33" xmlns="http://www.w3.org/2000/svg">
<g id="svg_5">
<path id="svg_4" d="m17.49167,10.97621c6.9875,-0.325 12.1875,2.70833 12.13333,7.36667l-0.325,10.075c-0.75833,4.0625 -2.275,3.0875 -3.03333,0.10833l0.21667,-9.64166c-0.43333,-0.975 -1.08333,-1.625 -1.95,-1.51667" stroke-linejoin="round" stroke="#606060" fill="#c0c0c0"/>
<path id="svg_1" d="m2.00055,17.1309l10.72445,-10.72445l12.67445,12.13279l-3.52056,0.05389l-9.15389,9.26223l-10.72445,-10.72445z" stroke-linejoin="round" stroke="#000000" fill="#c0c0c0"/>
<path id="svg_3" d="m14.35,13.57621c-0.1625,-3.95417 0.86667,-11.7 -1.84167,-11.59167c-2.70833,0.10833 -2.6,2.05833 -2.16667,6.93333" stroke-linejoin="round" stroke="#000000" fill="none"/>
<circle id="svg_2" r="1.60938" cy="15.20121" cx="14.45833" stroke-linejoin="round" stroke="#000000" fill="none"/>
</g>
</svg>
</g>
<g id="stroke"> <g id="stroke">
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<rect fill="none" stroke="#707070" stroke-width="10" x="8.625" y="8.625" width="32.75" height="32.75" id="svg_1"/> <rect fill="none" stroke="#707070" stroke-width="10" x="8.625" y="8.625" width="32.75" height="32.75" id="svg_1"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 28 KiB

125
src/editor/index.html
View File

@ -57,7 +57,8 @@
<se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button> <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
<se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button> <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
<se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button> <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
<se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg"></se-button> <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg">
</se-button>
</fieldset> </fieldset>
<table id="layerlist"> <table id="layerlist">
<tr class="layer"> <tr class="layer">
@ -116,13 +117,14 @@
</li> </li>
<li style="width:50%;margin:auto;"> <li style="width:50%;margin:auto;">
<a href="https://www.netlify.com"> <a href="https://www.netlify.com">
<img style="height:25px;" src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify" /> <img style="height:25px;" src="https://www.netlify.com/img/global/badges/netlify-dark.svg"
alt="Deploys by Netlify" />
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div id="tools_top" class="tools_panel"> <div id="tools_top">
<div id="editor_panel"> <div id="editor_panel">
<div class="tool_sep"></div> <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_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
@ -139,10 +141,13 @@
<div class="toolset"> <div class="toolset">
<div class="tool_sep"></div> <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_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> <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_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
<se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.png"></se-button> </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_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_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> <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
@ -150,12 +155,11 @@
<se-input id="elem_id" data-attr="id" size="10" label="id:" title="Identify the element"></se-input> <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> <se-input id="elem_class" data-attr="class" size="10" label="class:" title="Element class"></se-input>
</div> </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"> <div class="toolset" id="tool_blur" title="Change gaussian blur value">
<label> <se-spin-input size="2" id="blur" min=0 max=10 step=0.1 src="./images/blur.svg"
<span id="blurLabel" class="icon_label"></span> title="Change gaussian blur value"></se-spin-input>
<input id="blur" size="2" value="0" type="text" />
</label>
<div id="blur_dropdown" class="dropdown"> <div id="blur_dropdown" class="dropdown">
<button></button> <button></button>
<ul> <ul>
@ -170,17 +174,21 @@
<button></button> <button></button>
</div> </div>
<div id="xy_panel" class="toolset"> <div id="xy_panel" class="toolset">
<se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate"></se-input> <se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate"></se-input> </se-input>
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
</se-input>
</div> </div>
</div> </div>
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel"> <div id="multiselected_panel">
<div class="tool_sep"></div> <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_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> <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_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_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> <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
@ -201,15 +209,20 @@
</div> </div>
<div id="rect_panel"> <div id="rect_panel">
<div class="toolset"> <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_width" data-attr="width" size="4" src="./images/width.svg"
<se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg" title="Change rectangle height"></se-input> 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> </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> <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> </div>
<div id="image_panel"> <div id="image_panel">
<div class="toolset"> <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_width" data-attr="width" size="4" type="text" src="./images/width.svg"
<se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg" title="Change image height"></se-input> 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>
<div class="toolset"> <div class="toolset">
<label id="tool_image_url">url: <label id="tool_image_url">url:
@ -233,8 +246,10 @@
</div> </div>
<div id="ellipse_panel"> <div id="ellipse_panel">
<div class="toolset"> <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_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:"></se-input> </se-input>
<se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
</se-input>
</div> </div>
<div class="toolset"> <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_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
@ -243,12 +258,16 @@
</div> </div>
<div id="line_panel"> <div id="line_panel">
<div class="toolset"> <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_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
<se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:"></se-input> </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>
<div class="toolset"> <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_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
<se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:"></se-input> </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> </div>
<div id="text_panel"> <div id="text_panel">
@ -275,7 +294,8 @@
</ul> </ul>
</div> </div>
</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 --> <!-- Not visible, but still used -->
<input id="text" type="text" size="35" /> <input id="text" type="text" size="35" />
</div> </div>
@ -313,13 +333,14 @@
</select> </select>
<se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button> <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_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> <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
</div> </div>
</div> <!-- tools_top --> </div> <!-- tools_top -->
<div id="cur_context_panel"> <div id="cur_context_panel">
</div> </div>
<div id="tools_left" class="tools_panel"> <div id="tools_left">
<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">
@ -337,16 +358,18 @@
<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-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton> <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
src="./images/shapelib.svg"></se-explorerbutton>
<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="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="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_star" title="Star Tool" src="./images/star.svg"></se-button>
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.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">
<!-- Zoom buttons --> <!-- Zoom buttons -->
<se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px"> <se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div> <div value="1000">1000</div>
@ -360,23 +383,21 @@
<div value="layer">Fit to layer content</div> <div value="layer">Fit to layer content</div>
<div value="content">Fit to all content</div> <div value="content">Fit to all content</div>
</se-dropdown> </se-dropdown>
<div id="tools_bottom_2"> <div id="tool_fill">
<div id="color_tools"> <label for="fill_color" title="Change fill color"></label>
<div class="color_tool" id="tool_fill">
<label class="icon_label" for="fill_color" title="Change fill color"></label>
<div class="color_block"> <div class="color_block">
<div id="fill_bg"></div> <div id="fill_bg"></div>
<div id="fill_color" class="color_block"></div> <div id="fill_color" class="color_block"></div>
</div> </div>
</div> </div> <!-- tool_fill -->
<div class="color_tool" id="tool_stroke"> <div id="tool_stroke">
<label class="icon_label" title="Change stroke color"></label> <label title="Change stroke color"></label>
<div class="color_block"> <div class="color_block">
<div id="stroke_bg"></div> <div id="stroke_bg"></div>
<div id="stroke_color" class="color_block" title="Change stroke color"></div> <div id="stroke_color" class="color_block" title="Change stroke color" src="./images/fill.svg"></div>
</div>
</div> </div>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1"></se-spin-input> <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1"></se-spin-input>
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
<label class="stroke_tool"> <label class="stroke_tool">
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">
<option selected="selected" value="none">&#8212;</option> <option selected="selected" value="none">&#8212;</option>
@ -394,12 +415,10 @@
<div id="cur_linecap" title="Linecap: Butt"></div> <div id="cur_linecap" title="Linecap: Butt"></div>
<button></button> <button></button>
</div> </div>
</div>
<div class="color_tool" id="tool_opacity" title="Change selected item opacity"> <div id="tool_opacity">
<label> <se-spin-input size="3" id="group_opacity" min=0 max=100 step=5 title="Change selected item opacity">
<span id="group_opacityLabel" class="icon_label"></span> </se-spin-input>
<input id="group_opacity" size="3" value="100" type="text" />
</label>
<div id="opacity_dropdown" class="dropdown"> <div id="opacity_dropdown" class="dropdown">
<button></button> <button></button>
<ul> <ul>
@ -414,16 +433,8 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> <se-palette id="palette"></se-palette>
</div> </div> <!-- tools_bottom -->
<div id="tools_bottom_3">
<div id="palette_holder">
<div id="palette" title="Click to change fill color, shift-click to change stroke color">
</div>
</div>
</div>
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="https://github.com/SVG-Edit/svgedit" target="_blank">SVG-edit v2.6-beta</a></div> -->
</div>
<div id="option_lists" class="dropdown"> <div id="option_lists" class="dropdown">
<ul id="linejoin_opts"> <ul id="linejoin_opts">
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li> <li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>

170
src/editor/svgedit.css
View File

@ -1,6 +1,5 @@
@import "./jgraduate/css/jGraduate.css"; @import "./jgraduate/css/jGraduate.css";
@import "./jgraduate/css/jPicker.css"; @import "./jgraduate/css/jPicker.css";
@import "./spinbtn/jQuery.SpinButton.css";
body { body {
@ -121,36 +120,11 @@ select {
overflow: hidden; overflow: hidden;
} }
#palette_holder {
overflow: hidden;
margin-top: 5px;
padding: 5px;
position: absolute;
right: 15px;
height: 16px;
background: #f0f0f0;
border-radius: 3px;
z-index: 2;
}
#stroke_bg,
#fill_bg {
height: 16px;
width: 16px;
margin: 1px;
}
#linkLabel > svg { #linkLabel > svg {
height: 20px; height: 20px;
padding-top: 4px; padding-top: 4px;
} }
#palette {
float: left;
width: 632px;
height: 16px;
}
#workarea { #workarea {
display: inline-table-cell; display: inline-table-cell;
position:absolute; position:absolute;
@ -301,16 +275,6 @@ select {
display: block; display: block;
} }
div.palette_item {
height: 15px;
width: 15px;
float: left;
}
div.palette_item:first-child {
background: white;
}
/* Main button /* Main button
—————————————————————————————*/ —————————————————————————————*/
@ -476,7 +440,6 @@ div.palette_item:first-child {
stroke-dasharray: 0; stroke-dasharray: 0;
opacity: 1; opacity: 1;
pointer-events: stroke; pointer-events: stroke;
vector-effect: non-scaling-stroke;
filter: none; filter: none;
} }
@ -720,64 +683,19 @@ input[type=text] {
} }
#tools_bottom { #tools_bottom {
position: absolute; position: fixed;
left: 40px;
right: 0;
bottom: 0; bottom: 0;
width: 100%;
height: 40px; height: 40px;
overflow: visible; display: flex;
} flex-flow: row nowrap;
overflow-x: auto;
#tools_bottom_1 {
width: 115px;
float: left;
}
#tools_bottom input[type=text] {
width: 4em;
}
/* Color tools: fill, stroke, opacity
–––––––––––––––––––––––––––––––––––––*/
#tools_bottom_2 {
float: left;
width: 300px;
position: relative;
margin-top: 5px;
transition: width 150ms ease;
}
.expanded #tools_bottom_2 {
width: 450px;
}
#tools_bottom #tools_bottom_2 .dropdown button {
margin-top: 2px;
} }
.dropdown li.tool_button { .dropdown li.tool_button {
width: 24px; width: 24px;
} }
#tools_bottom_2 .icon_label {
display: block;
margin: 3px 5px;
padding: 0;
}
#tool_opacity { right: 0;}
#tool_fill { left: 0; }
#tool_stroke { left: 60px;}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
#stroke_expand { #stroke_expand {
width: 0; width: 0;
overflow: hidden; overflow: hidden;
@ -801,10 +719,6 @@ input[type=text] {
color: #666; color: #666;
} }
.expanded #tool_stroke.color_tool {
width: 280px;
}
.expanded #toggle_stroke_tools:before { .expanded #toggle_stroke_tools:before {
content: '<<'; content: '<<';
} }
@ -813,71 +727,11 @@ input[type=text] {
background: white; background: white;
} }
.color_tool {
position: absolute;
overflow: hidden;
background: #f0f0f0;
height: 26px;
line-height: 26px;
border-radius: 3px;
min-width: 52px;
}
#tool_stroke.color_tool {
width: 130px;
z-index: 2;
-webkit-transition: width 150ms ease;
-moz-transition: width 150ms ease;
-o-transition: width 150ms ease;
-ms-transition: width 150ms ease;
transition: width 150ms ease;
}
.color_block {
position: absolute;
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
.color_tool > * {
float: left;
margin-right: 5px;
}
.color_tool .dropdown > * {
float: left;
}
.color_tool #stroke_width {
margin-left: 25px;
float: left;
}
.color_tool > .color_block {
top: 3px;
left: 29px;
}
.color_tool input {
margin: 0;
}
#tool_opacity { #tool_opacity {
overflow: visible; overflow: visible;
} }
@media screen and (max-width:1250px) { @media screen and (max-width:1250px) {
.expanded #palette_holder {
left: 560px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
#tools_top { #tools_top {
height: 71px; height: 71px;
} }
@ -902,16 +756,6 @@ input[type=text] {
} }
} }
@media screen and (max-width:1100px) {
#tools_bottom:not(.expanded) #palette_holder {
left: 410px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
}
/*–––––––––––––––––––––––––––––––––––––*/ /*–––––––––––––––––––––––––––––––––––––*/
#option_lists ul { #option_lists ul {
@ -954,10 +798,6 @@ ul li.current {
-webkit-border-radius: 0; -webkit-border-radius: 0;
} }
#tools_bottom .dropdown button {
margin-top: 2px;
}
#opacity_dropdown li { #opacity_dropdown li {
width: 140px; width: 140px;
} }

267
src/editor/svgedit.js
View File

@ -755,7 +755,7 @@ editor.init = () => {
const {ok, cancel} = uiStrings.common; const {ok, cancel} = uiStrings.common;
jQueryPluginDBox($, {ok, cancel}); jQueryPluginDBox($, {ok, cancel});
setIcons(); // Wait for dbox as needed for i18n $('#svg_container')[0].style.visibility = 'visible';
try { try {
// load standard extensions // load standard extensions
@ -868,7 +868,6 @@ editor.init = () => {
* @returns {void} * @returns {void}
*/ */
const setIconSize = editor.setIconSize = function (size) { const setIconSize = editor.setIconSize = function (size) {
// const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' + const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' + ' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
' #g_panel > *, #tool_font_size > *'; ' #g_panel > *, #tool_font_size > *';
@ -942,176 +941,6 @@ editor.init = () => {
} }
}; };
/**
* Setup SVG icons.
* @returns {void}
*/
function setIcons () {
$.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {
w: 24, h: 24,
id_match: false,
no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images
fallback_path: curConfig.imgPath,
// Todo: Set `alts: {}` with keys as the IDs in fallback set to
// `uiStrings` (localized) values
fallback: {
logo: 'logo.svg',
select_node: 'select_node.png',
square: 'square.png',
rect: 'rect.png',
fh_rect: 'freehand-square.png',
circle: 'circle.png',
ellipse: 'ellipse.png',
fh_ellipse: 'freehand-circle.png',
pencil: 'fhpath.png',
pen: 'line.png',
text: 'text.png',
path: 'path.png',
add_subpath: 'add_subpath.png',
close_path: 'closepath.png',
open_path: 'openpath.png',
image: 'image.png',
arrow_right_big: 'arrow_right_big.png',
arrow_down: 'dropdown.gif',
fill: 'fill.png',
stroke: 'stroke.png',
opacity: 'opacity.png',
new_image: 'clear.png',
save: 'save.png',
export: 'export.png',
open: 'open.png',
import: 'import.png',
docprops: 'document-properties.png',
clone: 'clone.png',
delete: 'delete.png',
go_up: 'go-up.png',
go_down: 'go-down.png',
context_menu: 'context_menu.png',
move_bottom: 'move_bottom.png',
move_top: 'move_top.png',
to_path: 'to_path.png',
link_controls: 'link_controls.png',
reorient: 'reorient.png',
group_elements: 'shape_group_elements.png',
ungroup: 'shape_ungroup.png',
unlink_use: 'unlink_use.png',
c_radius: 'c_radius.png',
angle: 'angle.png',
blur: 'blur.png',
fontsize: 'fontsize.png',
align: 'align.png',
linecap_butt: 'linecap_butt.png',
linecap_square: 'linecap_square.png',
linecap_round: 'linecap_round.png',
linejoin_miter: 'linejoin_miter.png',
linejoin_bevel: 'linejoin_bevel.png',
linejoin_round: 'linejoin_round.png',
eye: 'eye.png',
no_color: 'no_color.png',
ok: 'save.png',
cancel: 'cancel.png',
warning: 'warning.png',
node_delete: 'node_delete.png',
node_clone: 'node_clone.png',
globe_link: 'globe_link.png',
config: 'config.png'
},
placement: {
'#logo': 'logo',
'#tool_clear div': 'new_image',
'#tool_save div': 'save',
'#tool_export div': 'export',
'#tool_open div': 'open',
'#tool_import div': 'import',
'#tool_docprops > div': 'docprops',
'#tool_editor_prefs > div': 'config',
'#tool_editor_homepage > div': 'globe_link',
'#tool_image': 'image',
'#tool_node_clone': 'node_clone',
'#tool_node_delete': 'node_delete',
'#tool_add_subpath': 'add_subpath',
'#tool_openclose_path': 'open_path',
'#tool_node_link': 'link_controls',
'#tool_reorient': 'reorient',
'#tool_group_elements': 'group_elements',
'#tool_ungroup': 'ungroup',
'#tool_unlink_use': 'unlink_use',
'#tool_posleft': 'align_left',
'#tool_poscenter': 'align_center',
'#tool_posright': 'align_right',
'#tool_postop': 'align_top',
'#tool_posmiddle': 'align_middle',
'#tool_posbottom': 'align_bottom',
'#cur_position': 'align',
'#linecap_butt,#cur_linecap': 'linecap_butt',
'#linecap_round': 'linecap_round',
'#linecap_square': 'linecap_square',
'#linejoin_miter,#cur_linejoin': 'linejoin_miter',
'#linejoin_round': 'linejoin_round',
'#linejoin_bevel': 'linejoin_bevel',
'#url_notice': 'warning',
'#layerlist td.layervis': 'eye',
'#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
'#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel': 'cancel',
'#cornerRadiusLabel span': 'c_radius',
'#angleLabel': 'angle',
'#linkLabel,#tool_make_link_multi': 'globe_link',
'#tool_fill label': 'fill',
'#tool_stroke .icon_label': 'stroke',
'#group_opacityLabel': 'opacity',
'#blurLabel': 'blur',
'#font_sizeLabel': 'fontsize',
'.dropdown button, #main_button .dropdown': 'arrow_down',
'#palette .palette_item:first, #fill_bg, #stroke_bg': 'no_color'
},
resize: {
'#logo .svg_icon': 28,
'.svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7,
'#main_button .dropdown .svg_icon': 9,
'.palette_item:first .svg_icon': 15,
'#fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
'.toolbar_button button .svg_icon': 16,
'.stroke_tool div div .svg_icon': 20,
'#tools_bottom label .svg_icon': 18
},
async callback (icons) {
$('.toolbar_button button > svg, .toolbar_button button > img').each(function () {
$(this).parent().prepend(this);
});
const tleft = $('#tools_left');
let minHeight;
if (tleft.length) {
minHeight = tleft.offset().top + tleft.outerHeight();
}
const size = editor.pref('iconsize');
editor.setIconSize(size || ($(window).height() < minHeight ? 's' : 'm'));
$('#svg_container')[0].style.visibility = 'visible';
await editor.runCallbacks();
}
});
}
/** /**
* @name module:SVGEditor.canvas * @name module:SVGEditor.canvas
* @type {module:svgcanvas.SvgCanvas} * @type {module:svgcanvas.SvgCanvas}
@ -1120,26 +949,13 @@ editor.init = () => {
document.getElementById('svgcanvas'), document.getElementById('svgcanvas'),
curConfig curConfig
); );
const palette = [
// Todo: Make into configuration item? const modKey = (isMac() ? 'meta+' : 'ctrl+');
'#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff', const path = svgCanvas.pathActions;
'#ff0000', '#ff7f00', '#ffff00', '#7fff00', const {undoMgr} = svgCanvas;
'#00ff00', '#00ff7f', '#00ffff', '#007fff', const workarea = $('#workarea');
'#0000ff', '#7f00ff', '#ff00ff', '#ff007f', const canvMenu = $('#cmenu_canvas');
'#7f0000', '#7f3f00', '#7f7f00', '#3f7f00', const paintBox = {fill: null, stroke: null};
'#007f00', '#007f3f', '#007f7f', '#003f7f',
'#00007f', '#3f007f', '#7f007f', '#7f003f',
'#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa',
'#aaffaa', '#aaffd4', '#aaffff', '#aad4ff',
'#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'
],
modKey = (isMac() ? 'meta+' : 'ctrl+'), // ⌘
path = svgCanvas.pathActions,
{undoMgr} = svgCanvas,
workarea = $('#workarea'),
canvMenu = $('#cmenu_canvas'),
// layerMenu = $('#cmenu_layers'), // Unused
paintBox = {fill: null, stroke: null};
let resizeTimer, curScrollPos; let resizeTimer, curScrollPos;
let exportWindow = null, let exportWindow = null,
@ -1296,12 +1112,10 @@ editor.init = () => {
*/ */
const togglePathEditMode = function (editmode, elems) { const togglePathEditMode = function (editmode, elems) {
$('#path_node_panel').toggle(editmode); $('#path_node_panel').toggle(editmode);
$('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
if (editmode) { if (editmode) {
// Change select icon // Change select icon
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$('#tool_select').addClass('tool_button_current').removeClass('tool_button'); $('#tool_select').addClass('tool_button_current').removeClass('tool_button');
// setIcon('#tool_select', 'select_node');
multiselected = false; multiselected = false;
if (elems.length) { if (elems.length) {
selectedElement = elems[0]; selectedElement = elems[0];
@ -2881,16 +2695,9 @@ editor.init = () => {
svgCanvas.bind('extension_added', extAdded); svgCanvas.bind('extension_added', extAdded);
svgCanvas.textActions.setInputElem($('#text')[0]); svgCanvas.textActions.setInputElem($('#text')[0]);
let str = '<div class="palette_item" data-rgb="none"></div>';
$.each(palette, function (i, item) {
str += '<div class="palette_item" style="background-color: ' + item +
';" data-rgb="' + item + '"></div>';
});
$('#palette').append(str);
// Set up editor background functionality // Set up editor background functionality
const colorBlocks = ['#FFF', '#888', '#000', 'chessboard']; const colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
str = ''; let str = '';
$.each(colorBlocks, function (i, e) { $.each(colorBlocks, function (i, e) {
str += (e === 'chessboard') str += (e === 'chessboard')
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@ -2920,14 +2727,14 @@ editor.init = () => {
}; };
/** /**
* @type {module:jQuerySpinButton.ValueCallback} * @type {module}
*/ */
const changeFontSize = function (e) { const changeFontSize = function (e) {
svgCanvas.setFontSize(e.target.value); svgCanvas.setFontSize(e.target.value);
}; };
/** /**
* @type {module:jQuerySpinButton.ValueCallback} * @type {module}
*/ */
const changeStrokeWidth = function (e) { const changeStrokeWidth = function (e) {
let val = e.target.value; let val = e.target.value;
@ -2938,7 +2745,7 @@ editor.init = () => {
}; };
/** /**
* @type {module:jQuerySpinButton.ValueCallback} * @type {module}
*/ */
const changeRotationAngle = function (e) { const changeRotationAngle = function (e) {
svgCanvas.setRotationAngle(e.target.value); svgCanvas.setRotationAngle(e.target.value);
@ -2946,7 +2753,7 @@ editor.init = () => {
}; };
/** /**
* @param {external:jQuery.fn.SpinButton} ctl Spin Button * @param {PlainObject} ctl
* @param {string} [val=ctl.value] * @param {string} [val=ctl.value]
* @returns {void} * @returns {void}
*/ */
@ -2960,7 +2767,7 @@ editor.init = () => {
}; };
/** /**
* @param {external:jQuery.fn.SpinButton} ctl Spin Button * @param {PlainObject} ctl
* @param {string} [val=ctl.value] * @param {string} [val=ctl.value]
* @param {boolean} noUndo * @param {boolean} noUndo
* @returns {void} * @returns {void}
@ -3128,40 +2935,6 @@ editor.init = () => {
return true; return true;
}); });
// Prevent selection of elements when shift-clicking
$('#palette').mouseover(function () {
const inp = $('<input type="hidden">');
$(this).append(inp);
inp.focus().remove();
});
$('.palette_item').mousedown(function (evt) {
// shift key or right click for stroke
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
let color = $(this).data('rgb');
let paint;
// Webkit-based browsers returned 'initial' here for no stroke
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
paint = new $.jGraduate.Paint();
} else {
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
}
paintBox[picker].setPaint(paint);
svgCanvas.setColor(picker, color);
if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
svgCanvas.setPaintOpacity(picker, 1.0);
}
updateToolButtonState();
}).bind('contextmenu', function (e) { e.preventDefault(); });
$('#toggle_stroke_tools').on('click', function () {
$('#tools_bottom').toggleClass('expanded');
});
(function () { (function () {
const wArea = workarea[0]; const wArea = workarea[0];
@ -4560,12 +4333,12 @@ editor.init = () => {
}); });
}, 1000); }, 1000);
$('#fill_color, #tool_fill .icon_label').click(function () { $('#fill_color, #tool_fill').click(function () {
colorPicker($('#fill_color')); colorPicker($('#fill_color'));
updateToolButtonState(); updateToolButtonState();
}); });
$('#stroke_color, #tool_stroke .icon_label').click(function () { $('#stroke_color, #tool_stroke').click(function () {
colorPicker($('#stroke_color')); colorPicker($('#stroke_color'));
updateToolButtonState(); updateToolButtonState();
}); });
@ -5171,14 +4944,6 @@ editor.init = () => {
} }
}); });
// init SpinButtons
$('#group_opacity').SpinButton({
min: 0, max: 100, step: 5, stateObj, callback: changeOpacity
});
$('#blur').SpinButton({
min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur
});
// zoom // zoom
$id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1); $id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1);