addd boolean attribute to implement wireframe
jfh
parent
256e602a96
commit
f9143671c3
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
<div title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="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}
|
||||
|
|
|
|||
|
|
@ -442,25 +442,6 @@
|
|||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="source">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 52">
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_40" y="15" x="28.23" font-weight="bold">s</text>
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_47" y="30" x="28.23" font-weight="bold">v</text>
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_48" y="44" x="28.23" font-weight="bold">g</text>
|
||||
<line stroke-width="3" fill="none" stroke="#aa0000" id="svg_51" y2="43" x2="16" y1="25" x1="5"/>
|
||||
<line id="svg_62" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="16" y1="26" x1="5"/>
|
||||
<line id="svg_63" stroke-width="3" fill="none" stroke="#aa0000" y2="43" x2="39" y1="25" x1="50"/>
|
||||
<line id="svg_64" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="39" y1="26" x1="51"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="wireframe">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<circle stroke="#000000" fill="none" id="svg_49" r="8" cy="9.5" cx="9.5"/>
|
||||
<rect stroke="#000000" fill="none" id="svg_52" height="14" width="14" y="8.5" x="8.5"/>
|
||||
</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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<circle stroke="#000000" fill="none" id="svg_49" r="8" cy="9.5" cx="9.5"/>
|
||||
<rect stroke="#000000" fill="none" id="svg_52" height="14" width="14" y="8.5" x="8.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 277 B |
|
|
@ -121,7 +121,7 @@
|
|||
<div id="editor_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<tool-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></tool-button>
|
||||
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
|
||||
<tool-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></tool-button>
|
||||
</div>
|
||||
<!-- History buttons -->
|
||||
<div id="history_panel">
|
||||
|
|
|
|||
|
|
@ -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]',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue