From f9143671c3582c93a59fda4d1a0f20d46b8c3ce6 Mon Sep 17 00:00:00 2001 From: jfh Date: Tue, 20 Oct 2020 23:54:06 +0200 Subject: [PATCH] addd boolean attribute to implement wireframe --- src/editor/components/ToolButton.js | 33 +++++++++++++++++++++++++++- src/editor/images/svg_edit_icons.svg | 19 ---------------- src/editor/images/wireframe.svg | 4 ++++ src/editor/index.html | 2 +- src/editor/locale/lang.en.js | 2 +- src/editor/svgedit.js | 21 ++++-------------- 6 files changed, 42 insertions(+), 39 deletions(-) create mode 100644 src/editor/images/wireframe.svg diff --git a/src/editor/components/ToolButton.js b/src/editor/components/ToolButton.js index 7bb50bd4..209b653c 100644 --- a/src/editor/components/ToolButton.js +++ b/src/editor/components/ToolButton.js @@ -25,6 +25,10 @@ template.innerHTML = ` height: 24px; overflow: none; } + .pressed { + background-color: #F4E284 !important; + box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important; + }
icon @@ -51,7 +55,7 @@ export class ToolButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src']; + return ['title', 'src', 'pressed']; } /** * @function attributeChangedCallback @@ -72,6 +76,13 @@ export class ToolButton extends HTMLElement { case 'src': this.$img.setAttribute('src', newValue); break; + case 'pressed': + if (newValue) { + this.$div.classList.add('pressed'); + } else { + this.$div.classList.remove('pressed'); + } + break; default: // eslint-disable-next-line no-console console.error(`unknown attribute: ${name}`); @@ -93,6 +104,26 @@ export class ToolButton extends HTMLElement { set title (value) { this.setAttribute('title', value); } + /** + * @function get + * @returns {any} + */ + get pressed () { + return this.hasAttribute('pressed'); + } + + /** + * @function set + * @returns {void} + */ + set pressed (value) { + // boolean value => existence = true + if (value) { + this.setAttribute('pressed', 'true'); + } else { + this.removeAttribute('pressed', ''); + } + } /** * @function get * @returns {any} diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg index 98aa7b8a..598c5450 100644 --- a/src/editor/images/svg_edit_icons.svg +++ b/src/editor/images/svg_edit_icons.svg @@ -442,25 +442,6 @@ - - - s - v - g - - - - - - - - - - - - - - diff --git a/src/editor/images/wireframe.svg b/src/editor/images/wireframe.svg new file mode 100644 index 00000000..5274fa79 --- /dev/null +++ b/src/editor/images/wireframe.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 26e4ff5a..0ae4c5cd 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -121,7 +121,7 @@
-
+
diff --git a/src/editor/locale/lang.en.js b/src/editor/locale/lang.en.js index f91f7639..fe2ac3ca 100644 --- a/src/editor/locale/lang.en.js +++ b/src/editor/locale/lang.en.js @@ -116,7 +116,7 @@ export default { undo: 'Undo [Z]', redo: 'Redo [Y]', tool_source: 'Edit Source [U]', - wireframe_mode: 'Wireframe Mode [F]', + wireframe_mode: 'Wireframe Mode', clone: 'Duplicate Element(s) [D]', del: 'Delete Element(s) [Delete/Backspace]', group_elements: 'Group Elements [G]', diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 01a9e9c3..459b6370 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1059,7 +1059,6 @@ editor.init = () => { open: 'open.png', import: 'import.png', docprops: 'document-properties.png', - wireframe: 'wireframe.png', undo: 'undo.png', redo: 'redo.png', @@ -1123,7 +1122,6 @@ editor.init = () => { '#tool_docprops > div': 'docprops', '#tool_editor_prefs > div': 'config', '#tool_editor_homepage > div': 'globe_link', - '#tool_wireframe': 'wireframe', '#tool_undo': 'undo', '#tool_redo': 'redo', @@ -4436,7 +4434,8 @@ editor.init = () => { * @returns {void} */ const clickWireframe = function () { - $('#tool_wireframe').toggleClass('push_button_pressed tool_button'); + console.log($id('tool_wireframe').pressed); + $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed; workarea.toggleClass('wireframe'); if (supportsNonSS) { return; } @@ -5356,6 +5355,7 @@ editor.init = () => { */ // register action to buttons $id('tool_source').addEventListener('click', showSourceEditor); + $id('tool_wireframe').addEventListener('click', clickWireframe); const toolButtons = [ {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]}, {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]}, @@ -5389,7 +5389,7 @@ editor.init = () => { {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]}, + // {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]}, { key: ['esc', false, false], fn () { @@ -6150,19 +6150,6 @@ editor.loadFromString = function (str, {noAlert} = {}) { }); }; -/** -* Not presently in use. -* @function module:SVGEditor.disableUI -* @param {PlainObject} featList -* @returns {void} -*/ -editor.disableUI = function (featList) { - // $(function () { - // $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove(); - // $('#tools_top').css('left', 5); - // }); -}; - /** * @callback module:SVGEditor.URLLoadCallback * @param {boolean} success