add sePalette - in progress
JFH
parent
74ad604a08
commit
29f2847f27
|
|
@ -4,3 +4,4 @@ import './seExplorerButton.js';
|
|||
import './seDropdown.js';
|
||||
import './seInput.js';
|
||||
import './seSpinInput.js';
|
||||
import './sePalette.js';
|
||||
|
|
|
|||
|
|
@ -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(); });
|
||||
|
||||
*/
|
||||
|
|
@ -60,7 +60,6 @@ export class SESpinInput extends HTMLElement {
|
|||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
console.log(name, newValue);
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'src':
|
||||
|
|
@ -177,27 +176,3 @@ export class SESpinInput extends HTMLElement {
|
|||
|
||||
// Register
|
||||
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;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 644 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 867 B |
|
|
@ -75,17 +75,6 @@
|
|||
</svg>
|
||||
</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">
|
||||
<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"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -57,7 +57,8 @@
|
|||
<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_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>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
|
|
@ -116,13 +117,14 @@
|
|||
</li>
|
||||
<li style="width:50%;margin:auto;">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools_top" class="tools_panel">
|
||||
<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>
|
||||
|
|
@ -139,10 +141,13 @@
|
|||
<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>
|
||||
|
|
@ -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_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">
|
||||
<label>
|
||||
<span id="blurLabel" class="icon_label"></span>
|
||||
<input id="blur" size="2" value="0" type="text" />
|
||||
</label>
|
||||
<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>
|
||||
|
|
@ -170,17 +174,21 @@
|
|||
<button></button>
|
||||
</div>
|
||||
<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_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate"></se-input>
|
||||
<se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
|
||||
</se-input>
|
||||
<se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
|
||||
</se-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
|
@ -201,15 +209,20 @@
|
|||
</div>
|
||||
<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>
|
||||
<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 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:
|
||||
|
|
@ -233,8 +246,10 @@
|
|||
</div>
|
||||
<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>
|
||||
|
|
@ -243,12 +258,16 @@
|
|||
</div>
|
||||
<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 id="text_panel">
|
||||
|
|
@ -275,7 +294,8 @@
|
|||
</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>
|
||||
|
|
@ -313,13 +333,14 @@
|
|||
</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> <!-- tools_top -->
|
||||
<div id="cur_context_panel">
|
||||
</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_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">
|
||||
|
|
@ -337,16 +358,18 @@
|
|||
<se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
|
||||
</se-flyingbutton>
|
||||
<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_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_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="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>
|
||||
</div> <!-- tools_left -->
|
||||
<div id="tools_bottom" class="tools_panel">
|
||||
<div id="tools_bottom">
|
||||
<!-- Zoom buttons -->
|
||||
<se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
|
||||
<div value="1000">1000</div>
|
||||
|
|
@ -360,23 +383,21 @@
|
|||
<div value="layer">Fit to layer content</div>
|
||||
<div value="content">Fit to all content</div>
|
||||
</se-dropdown>
|
||||
<div id="tools_bottom_2">
|
||||
<div id="color_tools">
|
||||
<div class="color_tool" id="tool_fill">
|
||||
<label class="icon_label" for="fill_color" title="Change fill color"></label>
|
||||
<div id="tool_fill">
|
||||
<label for="fill_color" title="Change fill color"></label>
|
||||
<div class="color_block">
|
||||
<div id="fill_bg"></div>
|
||||
<div id="fill_color" class="color_block"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_tool" id="tool_stroke">
|
||||
<label class="icon_label" title="Change stroke color"></label>
|
||||
</div> <!-- tool_fill -->
|
||||
<div id="tool_stroke">
|
||||
<label title="Change stroke color"></label>
|
||||
<div class="color_block">
|
||||
<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>
|
||||
<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">
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
<option selected="selected" value="none">—</option>
|
||||
|
|
@ -394,12 +415,10 @@
|
|||
<div id="cur_linecap" title="Linecap: Butt"></div>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
|
||||
<label>
|
||||
<span id="group_opacityLabel" class="icon_label"></span>
|
||||
<input id="group_opacity" size="3" value="100" type="text" />
|
||||
</label>
|
||||
|
||||
<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>
|
||||
<div id="opacity_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
|
|
@ -414,16 +433,8 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<se-palette id="palette"></se-palette>
|
||||
</div> <!-- tools_bottom -->
|
||||
<div id="option_lists" class="dropdown">
|
||||
<ul id="linejoin_opts">
|
||||
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "./jgraduate/css/jGraduate.css";
|
||||
@import "./jgraduate/css/jPicker.css";
|
||||
@import "./spinbtn/jQuery.SpinButton.css";
|
||||
|
||||
|
||||
body {
|
||||
|
|
@ -121,36 +120,11 @@ select {
|
|||
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 {
|
||||
height: 20px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
#palette {
|
||||
float: left;
|
||||
width: 632px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#workarea {
|
||||
display: inline-table-cell;
|
||||
position:absolute;
|
||||
|
|
@ -301,16 +275,6 @@ select {
|
|||
display: block;
|
||||
}
|
||||
|
||||
div.palette_item {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.palette_item:first-child {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Main button
|
||||
—————————————————————————————*/
|
||||
|
||||
|
|
@ -476,7 +440,6 @@ div.palette_item:first-child {
|
|||
stroke-dasharray: 0;
|
||||
opacity: 1;
|
||||
pointer-events: stroke;
|
||||
vector-effect: non-scaling-stroke;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
|
|
@ -720,64 +683,19 @@ input[type=text] {
|
|||
}
|
||||
|
||||
#tools_bottom {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#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;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.dropdown li.tool_button {
|
||||
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 {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -801,10 +719,6 @@ input[type=text] {
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.expanded #tool_stroke.color_tool {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.expanded #toggle_stroke_tools:before {
|
||||
content: '<<';
|
||||
}
|
||||
|
|
@ -813,71 +727,11 @@ input[type=text] {
|
|||
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 {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1250px) {
|
||||
.expanded #palette_holder {
|
||||
left: 560px;
|
||||
overflow-x: scroll;
|
||||
padding: 0 5px;
|
||||
margin-top: 2px;
|
||||
height: 30px;
|
||||
}
|
||||
#tools_top {
|
||||
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 {
|
||||
|
|
@ -954,10 +798,6 @@ ul li.current {
|
|||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
#tools_bottom .dropdown button {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#opacity_dropdown li {
|
||||
width: 140px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -755,7 +755,7 @@ editor.init = () => {
|
|||
const {ok, cancel} = uiStrings.common;
|
||||
jQueryPluginDBox($, {ok, cancel});
|
||||
|
||||
setIcons(); // Wait for dbox as needed for i18n
|
||||
$('#svg_container')[0].style.visibility = 'visible';
|
||||
|
||||
try {
|
||||
// load standard extensions
|
||||
|
|
@ -868,7 +868,6 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
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 > *,' +
|
||||
' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
|
||||
' #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
|
||||
* @type {module:svgcanvas.SvgCanvas}
|
||||
|
|
@ -1120,26 +949,13 @@ editor.init = () => {
|
|||
document.getElementById('svgcanvas'),
|
||||
curConfig
|
||||
);
|
||||
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'
|
||||
],
|
||||
modKey = (isMac() ? 'meta+' : 'ctrl+'), // ⌘
|
||||
path = svgCanvas.pathActions,
|
||||
{undoMgr} = svgCanvas,
|
||||
workarea = $('#workarea'),
|
||||
canvMenu = $('#cmenu_canvas'),
|
||||
// layerMenu = $('#cmenu_layers'), // Unused
|
||||
paintBox = {fill: null, stroke: null};
|
||||
|
||||
const modKey = (isMac() ? 'meta+' : 'ctrl+');
|
||||
const path = svgCanvas.pathActions;
|
||||
const {undoMgr} = svgCanvas;
|
||||
const workarea = $('#workarea');
|
||||
const canvMenu = $('#cmenu_canvas');
|
||||
const paintBox = {fill: null, stroke: null};
|
||||
|
||||
let resizeTimer, curScrollPos;
|
||||
let exportWindow = null,
|
||||
|
|
@ -1296,12 +1112,10 @@ editor.init = () => {
|
|||
*/
|
||||
const togglePathEditMode = function (editmode, elems) {
|
||||
$('#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');
|
||||
$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
|
||||
// setIcon('#tool_select', 'select_node');
|
||||
multiselected = false;
|
||||
if (elems.length) {
|
||||
selectedElement = elems[0];
|
||||
|
|
@ -2881,16 +2695,9 @@ editor.init = () => {
|
|||
svgCanvas.bind('extension_added', extAdded);
|
||||
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
|
||||
const colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
|
||||
str = '';
|
||||
let str = '';
|
||||
$.each(colorBlocks, function (i, e) {
|
||||
str += (e === 'chessboard')
|
||||
// eslint-disable-next-line max-len
|
||||
|
|
@ -2920,14 +2727,14 @@ editor.init = () => {
|
|||
};
|
||||
|
||||
/**
|
||||
* @type {module:jQuerySpinButton.ValueCallback}
|
||||
* @type {module}
|
||||
*/
|
||||
const changeFontSize = function (e) {
|
||||
svgCanvas.setFontSize(e.target.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* @type {module:jQuerySpinButton.ValueCallback}
|
||||
* @type {module}
|
||||
*/
|
||||
const changeStrokeWidth = function (e) {
|
||||
let val = e.target.value;
|
||||
|
|
@ -2938,7 +2745,7 @@ editor.init = () => {
|
|||
};
|
||||
|
||||
/**
|
||||
* @type {module:jQuerySpinButton.ValueCallback}
|
||||
* @type {module}
|
||||
*/
|
||||
const changeRotationAngle = function (e) {
|
||||
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]
|
||||
* @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 {boolean} noUndo
|
||||
* @returns {void}
|
||||
|
|
@ -3128,40 +2935,6 @@ editor.init = () => {
|
|||
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 () {
|
||||
const wArea = workarea[0];
|
||||
|
||||
|
|
@ -4560,12 +4333,12 @@ editor.init = () => {
|
|||
});
|
||||
}, 1000);
|
||||
|
||||
$('#fill_color, #tool_fill .icon_label').click(function () {
|
||||
$('#fill_color, #tool_fill').click(function () {
|
||||
colorPicker($('#fill_color'));
|
||||
updateToolButtonState();
|
||||
});
|
||||
|
||||
$('#stroke_color, #tool_stroke .icon_label').click(function () {
|
||||
$('#stroke_color, #tool_stroke').click(function () {
|
||||
colorPicker($('#stroke_color'));
|
||||
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
|
||||
$id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue