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

add disabled attribute for undo/redo button

master
jfh 2020-10-21 22:21:10 +02:00
parent f9143671c3
commit bc21386cb6
6 changed files with 59 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/editor/components/ToolButton.js
View File

@ -4,7 +4,7 @@
const template = document.createElement('template');
template.innerHTML = `
<style>
:host :hover
:host :hover :not(.disabled)
{
background-color: #ffc;
}
@ -29,6 +29,10 @@ template.innerHTML = `
background-color: #F4E284 !important;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
}
.disabled {
opacity: 0.3;
cursor: default;
}
</style>
<div title="title">
<img class="svg_icon" src="./images/logo.svg" alt="icon">
@ -55,7 +59,7 @@ export class ToolButton extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return ['title', 'src', 'pressed'];
return ['title', 'src', 'pressed', 'disabled'];
}
/**
* @function attributeChangedCallback
@ -83,6 +87,13 @@ export class ToolButton extends HTMLElement {
this.$div.classList.remove('pressed');
}
break;
case 'disabled':
if (newValue) {
this.$div.classList.add('disabled');
} else {
this.$div.classList.remove('disabled');
}
break;
default:
// eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`);
@ -124,6 +135,26 @@ export class ToolButton extends HTMLElement {
this.removeAttribute('pressed', '');
}
}
/**
* @function get
* @returns {any}
*/
get disabled () {
return this.hasAttribute('disabled');
}
/**
* @function set
* @returns {void}
*/
set disabled (value) {
// boolean value => existence = true
if (value) {
this.setAttribute('disabled', 'true');
} else {
this.removeAttribute('disabled', '');
}
}
/**
* @function get
* @returns {any}
@ -145,6 +176,7 @@ export class ToolButton extends HTMLElement {
* @returns {void}
*/
connectedCallback () {
// capture shortcuts
const shortcut = this.getAttribute('shortcut');
if (shortcut) {
// register the keydown event

9
src/editor/images/redo.svg Normal file
View File

@ -0,0 +1,9 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_71">
<stop stop-opacity="1" stop-color="#98fc46" offset="0"/>
<stop stop-opacity="1" stop-color="#56aa25" offset="1"/>
</linearGradient>
</defs>
<path transform="rotate(-90, 12.7299, 11.5526)" d="m9.11294,12.43144l6.54089,6.84566l6.6439,-6.95624l-3.78628,-0.03064l0,-2.61259c-0.04248,-2.62946 -2.75924,-5.5951 -7.79561,-5.77807c-5.17464,0 -7.10734,3.60294 -7.47697,7.11967c0.61604,-1.60771 3.14238,-3.63109 5.36009,-3.53053c2.71053,-0.10056 4.40555,0.59221 4.40555,2.40076l0,2.54198l-3.89159,0z" id="svg_45" fill="url(#svg_71)" stroke="#44aa00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

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

@ -442,30 +442,6 @@
</svg>
</g>
<g id="undo">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="svg_66" x1="0.04297" y1="0.00391" x2="0.21484" y2="0.875">
<stop offset="0" stop-color="#f7f963" stop-opacity="1"/>
<stop offset="1" stop-color="#d3c310" stop-opacity="1"/>
</linearGradient>
</defs>
<path transform="rotate(-90, 10.3017, 11.5526)" d="m6.70188,10.72562l6.55493,-7.13388l6.65817,7.24912l-3.79441,0.03193l0,2.72259c-0.04257,2.74017 -2.76516,5.83068 -7.81235,6.02135c-5.18575,0 -7.1226,-3.75464 -7.49302,-7.41944c0.61736,1.6754 3.14913,3.78397 5.3716,3.67918c2.71635,0.1048 4.41501,-0.61714 4.41501,-2.50184l0,-2.64901l-3.89995,0z" id="svg_45" fill="url(#svg_66)" stroke="#b7a800"/>
</svg>
</g>
<g id="redo">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_71">
<stop stop-opacity="1" stop-color="#98fc46" offset="0"/>
<stop stop-opacity="1" stop-color="#56aa25" offset="1"/>
</linearGradient>
</defs>
<path transform="rotate(-90, 12.7299, 11.5526)" d="m9.11294,12.43144l6.54089,6.84566l6.6439,-6.95624l-3.78628,-0.03064l0,-2.61259c-0.04248,-2.62946 -2.75924,-5.5951 -7.79561,-5.77807c-5.17464,0 -7.10734,3.60294 -7.47697,7.11967c0.61604,-1.60771 3.14238,-3.63109 5.36009,-3.53053c2.71053,-0.10056 4.40555,0.59221 4.40555,2.40076l0,2.54198l-3.89159,0z" id="svg_45" fill="url(#svg_71)" stroke="#44aa00"/>
</svg>
</g>
<g id="clone">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 65 KiB

9
src/editor/images/undo.svg Normal file
View File

@ -0,0 +1,9 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="svg_66" x1="0.04297" y1="0.00391" x2="0.21484" y2="0.875">
<stop offset="0" stop-color="#f7f963" stop-opacity="1"/>
<stop offset="1" stop-color="#d3c310" stop-opacity="1"/>
</linearGradient>
</defs>
<path transform="rotate(-90, 10.3017, 11.5526)" d="m6.70188,10.72562l6.55493,-7.13388l6.65817,7.24912l-3.79441,0.03193l0,2.72259c-0.04257,2.74017 -2.76516,5.83068 -7.81235,6.02135c-5.18575,0 -7.1226,-3.75464 -7.49302,-7.41944c0.61736,1.6754 3.14913,3.78397 5.3716,3.67918c2.71635,0.1048 4.41501,-0.61714 4.41501,-2.50184l0,-2.64901l-3.89995,0z" id="svg_45" fill="url(#svg_66)" stroke="#b7a800"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

4
src/editor/index.html
View File

@ -126,8 +126,8 @@
<!-- History buttons -->
<div id="history_panel">
<div class="tool_sep"></div>
<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
<tool-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></tool-button>
<tool-button id="tool_redo" title="Redo" shortcut="Y" src="./images/redo.svg" disabled></tool-button>
</div>
<!-- Buttons when a single element is selected -->
<div id="selected_panel">

27
src/editor/svgedit.js
View File

@ -1060,9 +1060,6 @@ editor.init = () => {
import: 'import.png',
docprops: 'document-properties.png',
undo: 'undo.png',
redo: 'redo.png',
clone: 'clone.png',
delete: 'delete.png',
go_up: 'go-up.png',
@ -1123,9 +1120,6 @@ editor.init = () => {
'#tool_editor_prefs > div': 'config',
'#tool_editor_homepage > div': 'globe_link',
'#tool_undo': 'undo',
'#tool_redo': 'redo',
'#tool_select': 'select',
'#tool_fhpath': 'pencil',
'#tool_line': 'pen',
@ -2277,8 +2271,8 @@ editor.init = () => {
}
// update history buttons
$('#tool_undo').toggleClass('disabled', undoMgr.getUndoStackSize() === 0);
$('#tool_redo').toggleClass('disabled', undoMgr.getRedoStackSize() === 0);
$id('tool_undo').disabled = (undoMgr.getUndoStackSize() === 0);
$id('tool_redo').disabled = (undoMgr.getRedoStackSize() === 0);
svgCanvas.addedNew = false;
@ -4434,7 +4428,6 @@ editor.init = () => {
* @returns {void}
*/
const clickWireframe = function () {
console.log($id('tool_wireframe').pressed);
$id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
workarea.toggleClass('wireframe');
@ -4769,12 +4762,6 @@ editor.init = () => {
}).bind('mousedown mouseout', function () {
$(this).removeClass(curClass);
});
$('#tool_undo, #tool_redo').mousedown(function () {
if (!$(this).hasClass('disabled')) { $(this).addClass(curClass); }
}).bind('mousedown mouseout', function () {
$(this).removeClass(curClass);
});
}());
/**
@ -5356,6 +5343,9 @@ editor.init = () => {
// register action to buttons
$id('tool_source').addEventListener('click', showSourceEditor);
$id('tool_wireframe').addEventListener('click', clickWireframe);
$id('tool_undo').addEventListener('click', clickUndo);
$id('tool_redo').addEventListener('click', clickRedo);
const toolButtons = [
{sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
{sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},
@ -5388,8 +5378,6 @@ editor.init = () => {
{sel: '#tool_export', fn: clickExport, evt: 'mouseup'},
{sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},
{sel: '#tool_import', fn: clickImport, evt: 'mouseup'},
// {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
// {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
{
key: ['esc', false, false],
fn () {
@ -5423,16 +5411,11 @@ editor.init = () => {
{sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['},
{sel: '#tool_topath', fn: convertToPath, evt: 'click'},
{sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'},
{sel: '#tool_undo', fn: clickUndo, evt: 'click'},
{sel: '#tool_redo', fn: clickRedo, evt: 'click'},
{sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]},
{sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true]},
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
{sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
{sel: '[id^=tool_align]', fn: clickAlign, evt: 'click'},
// these two lines are required to make Opera work properly with the flyout mechanism
// {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
// {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
{sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},
{sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},
{sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},