Merge pull request #16 from OptimistikSAS/se-menu
#se-menu main menu convert as web componentmaster
JFH
GitHub
commit
191a482b4c
|
|
@ -5,3 +5,5 @@ import './seDropdown.js';
|
|||
import './seInput.js';
|
||||
import './seSpinInput.js';
|
||||
import './sePalette.js';
|
||||
import './seMenu.js';
|
||||
import './seMenuItem.js';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import 'elix/define/MenuButton.js';
|
||||
import 'elix/define/MenuItem.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
padding: 0px;
|
||||
}
|
||||
elix-menu-button::part(menu) {
|
||||
background-color: #eee !important;
|
||||
}
|
||||
elix-menu-button::part(popup-toggle) {
|
||||
padding: 0.25em 0.60em !important
|
||||
}
|
||||
</style>
|
||||
|
||||
<elix-menu-button id="MenuButton" aria-label="Main Menu">
|
||||
<slot></slot>
|
||||
</elix-menu-button>
|
||||
|
||||
`;
|
||||
/**
|
||||
* @class SeMenu
|
||||
*/
|
||||
export class SeMenu 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.$menu = this._shadowRoot.querySelector('elix-menu-button');
|
||||
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['label', 'src'];
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
var image = new Image();
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'src':
|
||||
image.src = newValue;
|
||||
image.width = 18;
|
||||
image.height = 18;
|
||||
this.$label.prepend(image);
|
||||
break;
|
||||
case 'label':
|
||||
this.$label.prepend(newValue);
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get label () {
|
||||
return this.getAttribute('label');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (value) {
|
||||
this.setAttribute('label', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.$menu.addEventListener('openedchange', (e) => {
|
||||
e.preventDefault();
|
||||
const selectedItem = e?.detail?.closeResult;
|
||||
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
|
||||
document.getElementById(selectedItem.id).click();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-menu', SeMenu);
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import 'elix/define/Menu.js';
|
||||
import 'elix/define/MenuItem.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
</style>
|
||||
<elix-menu-item>
|
||||
<div>
|
||||
<img src="" alt="icon" style="display:none;" />
|
||||
<span></span>
|
||||
</div>
|
||||
</elix-menu-item>
|
||||
`;
|
||||
/**
|
||||
* @class SeMenuItem
|
||||
*/
|
||||
export class SeMenuItem 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.$img = this._shadowRoot.querySelector('img');
|
||||
this.$label = this._shadowRoot.querySelector('span');
|
||||
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['label', 'src'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
let shortcut = '';
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
this.$img.style.display = 'inline-block';
|
||||
break;
|
||||
case 'label':
|
||||
shortcut = this.getAttribute('shortcut');
|
||||
this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`;
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get label () {
|
||||
return this.getAttribute('label');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set label (value) {
|
||||
this.setAttribute('label', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
// capture shortcuts
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
if (shortcut) {
|
||||
// register the keydown event
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// only track keyboard shortcuts for the body containing the SVG-Editor
|
||||
if (e.target.nodeName !== 'BODY') return;
|
||||
// normalize key
|
||||
const key = `${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toUpperCase()}`;
|
||||
if (shortcut !== key) return;
|
||||
// launch the click event
|
||||
if (this.id) {
|
||||
document.getElementById(this.id).click();
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-menu-item', SeMenuItem);
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient y2="1" x2="1" y1="0.5" x1="1" id="svg_53">
|
||||
<stop stop-opacity="1" stop-color="#606060" offset="0"/>
|
||||
<stop stop-opacity="0" stop-color="#5e5e5e" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect stroke="#606060" fill="#eaeaea" id="svg_55" height="21" width="18" y="1.6692" x="2.42792"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_56" y2="4.37757" x2="14.89023" y1="4.37757" x1="6.696"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_57" y2="7.10804" x2="12.92026" y1="7.10804" x1="6.6948"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_58" y2="9.84241" x2="15.64716" y1="9.84241" x1="6.6942"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_59" y2="12.36585" x2="13.21805" y1="12.36585" x1="6.69691"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_60" y2="15.06507" x2="14.43591" y1="15.06507" x1="6.69691"/>
|
||||
<line fill="none" stroke="#a0a0a0" id="svg_61" y2="17.84241" x2="13.36979" y1="17.84241" x1="6.69691"/>
|
||||
<g id="svg_54">
|
||||
<path transform="rotate(-45, 12.5448, 11.7085)" stroke="none" fill="#606060" id="svg_31" d="m11.24329,8.73944l0,2.79974l2.53499,0.07777l0,-2.95528c1.78134,0.07777 2.26093,1.39987 2.12391,2.95528c-0.06851,1.63318 -1.30175,3.49967 -3.49418,3.26636c-2.19242,-0.31108 -2.87755,-1.39987 -3.15161,-2.72197c-0.27406,-1.39987 0.41108,-3.34413 1.98689,-3.4219z"/>
|
||||
<rect opacity="0.95" transform="rotate(-45, 16.2485, 15.1732)" stroke="none" fill="url(#svg_53)" id="svg_50" height="4.85445" width="2.57974" y="12.746" x="15.04047"/>
|
||||
</g>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"/></svg></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="svg_5" x1="0.77734" y1="0.51172" x2="0.09375" y2="0.53516">
|
||||
<stop offset="0" stop-color="#81bbf4"/>
|
||||
<stop offset="1" stop-color="#376eb7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<rect x="7.22599" y="1.3603" width="15.76465" height="21.51735" id="svg_55" fill="#eaeaea" stroke="#606060"/>
|
||||
<circle fill="#31abed" stroke-width="0.5" cx="17.4206" cy="11.1278" r="4.69727" id="svg_3"/>
|
||||
<path fill="#ffcc00" stroke-width="0.5" d="m9.67673,20.24302l7.38701,-6.80778l2.91746,6.71323" id="svg_4"/>
|
||||
<rect fill="#ff5555" stroke-width="0.5" x="9.5385" y="2.94914" width="5.74652" height="5.74652" id="svg_2"/>
|
||||
<path d="m6.13727,17.94236l5.77328,-4.91041l-5.86949,-5.1832l-0.09622,2.36426l-4.64805,-0.06751l-0.04665,5.54694l4.79093,-0.02342l0.09623,2.27334z" id="svg_45" fill="url(#svg_5)" stroke="#285582"/>
|
||||
</g>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 211">
|
||||
<g>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
|
||||
<path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
|
||||
<path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
|
||||
<path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
|
||||
<path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
|
||||
</g>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient y2="0.875" x2="0.21484" y1="0.00391" x1="0.04297" id="svg_46_import">
|
||||
<stop stop-opacity="1" stop-color="#81f4bb" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#37b76e" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
|
||||
<path stroke="#285582" fill="url(#svg_46_import)" id="svg_45" d="m7.14286,12.74903l5.21236,5.79151l5.50193,-5.88803l-2.50965,-0.09653l0,-2.79923c0,-2.3166 -2.3166,-5.59846 -6.56371,-5.59846c-4.05405,0 -6.27413,3.37838 -6.56371,6.75676c0.48263,-1.5444 2.7027,-4.53668 4.44015,-4.44015c2.12355,-0.09653 2.79923,1.64093 2.79923,3.37838l0.09653,2.79923l-2.41313,0.09653z"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 977 B |
|
|
@ -0,0 +1,15 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22">
|
||||
<defs>
|
||||
<linearGradient y2="0.91406" x2="0.65234" y1="0.14063" x1="0.42578" id="svg_76">
|
||||
<stop stop-opacity="1" stop-color="#81bbf4" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#376eb7" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1.65" y="3.75" width="9.8" height="16.72712" id="svg_98" fill="#c0c0c0" stroke="#606060"/>
|
||||
<rect stroke="none" fill="#a0a0a0" id="svg_88" height="14.17459" width="6.39585" y="4.9758" x="2.89542"/>
|
||||
<path d="m18.62576,4.54365l0,6.91443l-9.9395,0l-0.08643,-10.11236l6.828,0l3.19792,3.19793z" id="svg_99" fill="#e0e0e0" stroke="#404040"/>
|
||||
<path d="m2.95,20.53644l1.65,-12.03644l16.2,0l-1.5,12l-16.35,0.03643z" id="svg_97" fill="url(#svg_76)" stroke="#285582"/>
|
||||
<line fill="none" stroke="#606060" id="svg_89" y2="4.28436" x2="13.95851" y1="4.28436" x1="10.32844"/>
|
||||
<line fill="none" stroke="#606060" id="svg_91" y2="6.53155" x2="14.82282" y1="6.53155" x1="10.32844"/>
|
||||
<path stroke="none" fill="#ffffff" id="svg_100" d="m15.25895,1.95069l-0.00401,2.85225l2.89558,0.00004l-2.89157,-2.85229z"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_41">
|
||||
<stop stop-opacity="1" stop-color="#727272" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#d6d6d6" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient y2="0.875" x2="0.21484" y1="0.00391" x1="0.04297" id="svg_46">
|
||||
<stop stop-opacity="1" stop-color="#81bbf4" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#376eb7" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#202020" fill="#e0e0e0" id="svg_21" d="m1.51669,22.3458l21.13245,-0.10111l0,-6.06673l-2.62892,-9.80789l-16.27907,0.10111l-2.32558,9.20121l0.10111,6.67341z"/>
|
||||
<rect stroke="#efefef" fill="url(#svg_41)" id="svg_32" height="4.75108" width="19.21031" y="16.58227" x="2.42667"/>
|
||||
<path stroke="#ffffff" fill="#c0c0c0" id="svg_42" d="m4.55005,11.12235l0.70779,-2.83114l13.04348,0l0.70779,3.13448c-0.70779,2.52781 -4.04479,3.84227 -7.17897,3.84227c-2.72977,0 -6.37007,-1.41557 -7.28008,-4.1456z"/>
|
||||
<path stroke="#285582" fill="url(#svg_46)" id="svg_45" d="m7.14286,9.74903l5.21236,5.79151l5.50193,-5.88803l-2.50965,-0.09653l0,-2.79923c0,-2.3166 -2.3166,-5.59846 -6.56371,-5.59846c-4.05405,0 -6.27413,3.37838 -6.56371,6.75676c0.48263,-1.5444 2.7027,-4.53668 4.44015,-4.44015c2.12355,-0.09653 2.79923,1.64093 2.79923,3.37838l0.09653,2.79923l-2.41313,0.09653z"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
|
||||
<defs>
|
||||
<radialGradient id="svg_8" spreadMethod="pad" cx="0.5" cy="0.32513">
|
||||
<stop stop-color="#7791ef" stop-opacity="0.99219" offset="0"/>
|
||||
<stop stop-color="#3c3cfc" offset="1"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="svg_10" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#333333" stop-opacity="0.99609"/>
|
||||
<stop offset="1" stop-opacity="0.99609" stop-color="#666666"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<g opacity="0.8" id="svg_5">
|
||||
<circle id="svg_1" r="27.90625" cy="33" cx="33" stroke-width="0" stroke="#AAAAAA" fill="url(#svg_8)"/>
|
||||
<g id="svg_7">
|
||||
<path d="m38.2478,36.06121c-0.43732,0 -0.87463,0 -1.31195,0c-0.43731,0 -0.87463,0 -2.6239,0c-0.87463,0 -1.74926,0 -2.18658,0c-0.43732,0 -2.19828,0.33684 -2.6239,0.43732c-0.95172,0.22467 -1.27098,0.48253 -1.74927,0.87463c-1.21939,0.99965 -1.44004,1.00272 -1.74926,1.31195c-0.30923,0.30923 -0.21265,0.79756 -0.43732,1.74926c-0.10048,0.42562 0.16736,0.90792 0,1.31195c-0.23668,0.57138 -0.43732,0.87463 -0.43732,1.74926c0,0.43732 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 1.32364,0.77415 1.74926,0.87463c0.95171,0.22467 0.69349,0.69349 1.31195,1.31195c0.30923,0.30923 0.90791,-0.16736 1.31195,0c0.57138,0.23668 0.56541,0.56541 0.87463,0.87463c0.30923,0.30923 0.56541,0.12809 0.87463,0.43732c0.61846,0.61846 -0.10048,1.32365 0,1.74926c0.22467,0.95171 0.43732,1.31195 0.43732,2.6239c0,0.87463 0,2.18658 0,3.06121c0,0.43732 0,1.31195 0,2.6239c0,0.43732 0.12809,1.00272 0.43732,1.31195c0.30922,0.30923 1.31195,0 1.74926,0c0.87463,0 1.31195,0 1.74927,0c0.43731,0 0.6065,-0.40129 1.74926,-0.87464c0.40403,-0.16736 0.74057,-0.20064 1.31195,-0.43732c0.40403,-0.16736 0.63795,-0.74057 0.87463,-1.31195c0.16736,-0.40403 0.15712,-2.20917 0.43732,-3.93585c0.22151,-1.36505 0.43732,-2.18658 0.43732,-2.6239c0,-0.43732 -0.12928,-0.88101 0,-2.18658c0.21973,-2.21904 0.43732,-3.49853 0.43732,-3.93585c0,-0.43732 0,-0.87463 0,-1.74927c0,-1.31195 0.16736,-1.78254 0,-2.18658c-0.23668,-0.57138 -1.00272,-0.56541 -1.31195,-0.87463c-0.30923,-0.30922 -0.43732,-0.43731 -1.74926,-1.74926l0,-0.87463l-0.43732,0l0,-0.43732" id="svg_2" stroke="#007f00" fill="#44b544" stroke-width="0"/>
|
||||
<path d="m5.66773,37.0452c1.12973,-0.3645 0.87463,-0.2187 1.74927,-0.656c0.87463,-0.4373 1.34081,-0.8211 2.18658,-1.3119c1.36372,-0.7915 1.44002,-1.4401 1.74922,-1.7493c0.3093,-0.3092 0.1281,-0.5654 0.4374,-0.8746c0.6184,-0.6185 0.8746,-0.4374 1.7492,-1.312c0.8747,-0.8746 1.0027,-1.0027 1.312,-1.3119c0.6184,-0.6185 0.1281,-1.0028 0.4373,-1.312c0.3092,-0.3092 0,-0.8746 0,-1.3119c0,-0.4374 0,-1.312 0,-1.7493c0,-0.4373 0.2009,-1.7727 0,-2.6239c-0.2247,-0.9517 -0.1281,-1.4401 -0.4373,-1.7493c-0.3093,-0.3092 -0.7073,-1.3452 -0.8746,-1.7492c-0.2367,-0.5714 -0.8747,-0.8747 -0.8747,-1.312c0,-0.4373 -0.4373,-0.4373 -0.4373,-0.8746l0,-0.4374l-1.2026,-0.8746c-3.7901,5.8674 -6.81486,11.6253 -5.79446,21.2099l-0.00001,0z" id="svg_3" stroke="#007f00" fill="#44b544" stroke-width="0"/>
|
||||
<path d="m52.2419,13.1021c-0.4373,0.4373 -1.3495,0.8398 -2.1866,1.0933c-3.0182,0.9138 -3.2212,2.2857 -3.4985,2.6239c-1.4137,1.7245 -2.4979,1.3039 -4.8105,1.7493c-0.4294,0.0827 -0.4373,0.4373 -0.8746,0.4373c-0.4373,0 -0.8746,0 -1.312,0c-0.4373,0 -1.3119,0 -1.7492,0c-0.4373,0 -1.3453,-0.27 -1.7493,-0.4373c-0.5714,-0.2367 -0.5654,-0.5654 -0.8746,-0.8747c-0.3092,-0.3092 -0.5654,-0.1281 -0.8746,-0.4373c-0.3093,-0.3092 -0.8747,0 -1.312,0c-0.4373,0 -0.9079,-0.1673 -1.3119,0c-0.5714,0.2367 -0.3033,1.0753 -0.8747,1.312c-0.404,0.1673 -0.1281,0.5654 -0.4373,0.8746c-0.3092,0.3092 -0.4373,0.4373 -0.4373,0.8746c0,0.4373 0,0.8747 0,1.312c0,0.4373 0.0333,0.7073 0.4373,0.8746c0.5714,0.2367 0.638,0.7406 0.8746,1.312c0.1674,0.404 0.4374,0.4373 0.4374,0.8746c0,0.4373 0,0.8746 0,1.3119c0,0.4374 -0.4374,0.4374 -0.8747,0.8747c-1.3119,1.3119 -1.9499,1.1779 -2.1865,1.7492c-0.1674,0.4041 -1.0753,0.3033 -1.312,0.8747c-0.1674,0.404 0,0.8746 0.4373,0.8746c0.4373,0 0.8746,0.4373 1.312,0.4373c0.4373,0 0.8746,-0.4373 1.3119,-0.4373c0.4373,0 0.5654,-0.1281 0.8746,-0.4373c0.6185,-0.6185 1.312,0 1.7493,0c0.4373,0 0.397,-0.6543 2.1866,-0.8747c0.434,-0.0534 2.8801,-0.2561 3.4985,-0.8746c0.3093,-0.3092 0.8343,-0.6543 2.6239,-0.8746c0.4341,-0.0535 0.8747,0 1.312,0c0.4373,0 0.8746,0.4373 0.8746,0.8746c0,0.4373 0.4373,0.4373 0.4373,0.8746c0,0.4374 0.5654,2.3147 0.8746,2.6239c0.3093,0.3093 0.1281,1.0028 0.4374,1.312c0.3092,0.3092 2.1095,2.8366 3.0612,3.0612c0.4256,0.1005 0.8215,0.2158 2.1866,0.4373c0.4316,0.0701 1.3119,0 1.7492,0c0.4373,0 0.8864,0.1005 1.312,0c0.9517,-0.2246 1.44,-0.5654 1.7492,-0.8746c0.3093,-0.3092 0.8747,-0.4373 1.312,-0.4373c0.4373,0 0.5654,-0.5654 0.8746,-0.8746c0.3092,-0.3093 0.8746,0 1.312,0l1.0933,-0.656c1.1661,-7.7259 -2.4782,-14.1399 -7.6531,-20.5539l0,0z" id="svg_4" stroke="#007f00" fill="#44b544" stroke-width="0"/>
|
||||
<path id="svg_6" d="m10.0409,48.3061c2.1137,-0.2187 4.6647,-0.2187 6.3411,1.9679c1.1662,1.5306 1.239,3.7172 0.2186,4.5918c-2.4052,-0.8746 -5.0291,-2.6239 -6.5597,-6.5597l0,0z" stroke="#007f00" fill="#44b544" stroke-width="0"/>
|
||||
</g>
|
||||
</g>
|
||||
<rect transform="rotate(45, 16.9336, 16.9375)" ry="9" rx="9" id="svg_9" height="19.32339" width="29.34293" y="7.27574" x="2.26257" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
|
||||
<rect id="svg_11" transform="rotate(45, 49.0664, 49.0625)" ry="9" rx="9" height="19.32339" width="29.34293" y="39.40074" x="34.39538" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
|
||||
<line id="svg_12" y2="45.75" x2="45.75" y1="20.25" x1="20.25" stroke-linecap="round" stroke-width="5" stroke="url(#svg_10)" fill="none"/>
|
||||
</g>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -74,14 +74,24 @@
|
|||
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
|
||||
</div>
|
||||
</div>
|
||||
<div id="main_button">
|
||||
<se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg">
|
||||
<!-- File-like buttons: New, Save, Source -->
|
||||
<se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
|
||||
<se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/svg-edit-home.svg"></se-menu-item>
|
||||
</se-menu>
|
||||
<!-- <div id="main_button">
|
||||
<div id="main_icon" class="tool_button" title="Main Menu">
|
||||
<span>SVG-Edit</span>
|
||||
<div id="logo"></div>
|
||||
<div class="dropdown"></div>
|
||||
</div>
|
||||
<div id="main_menu">
|
||||
<!-- File-like buttons: New, Save, Source -->
|
||||
<ul>
|
||||
<li id="tool_clear">
|
||||
<div></div>
|
||||
|
|
@ -122,8 +132,9 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> <!-- main_menu -->
|
||||
</div> <!-- main_button -->
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div id="tools_top">
|
||||
<div id="editor_panel">
|
||||
<div class="tool_sep"></div>
|
||||
|
|
|
|||
|
|
@ -4680,18 +4680,28 @@ editor.init = () => {
|
|||
$id('tool_italic').addEventListener('click', clickItalic);
|
||||
$id('palette').addEventListener('change', handlePalette);
|
||||
|
||||
$id('tool_clear').addEventListener('click', clickClear);
|
||||
$id('tool_open').addEventListener('click', function (e) {
|
||||
clickOpen();
|
||||
window.dispatchEvent(new CustomEvent('openImage'));
|
||||
});
|
||||
$id('tool_import').addEventListener('click', function (e) {
|
||||
clickImport();
|
||||
window.dispatchEvent(new CustomEvent('importImage'));
|
||||
});
|
||||
$id('tool_save').addEventListener('click', function (e) {
|
||||
if (editingsource) {
|
||||
saveSourceEditor();
|
||||
} else {
|
||||
clickSave();
|
||||
}
|
||||
});
|
||||
$id('tool_export').addEventListener('click', clickExport);
|
||||
$id('tool_docprops').addEventListener('click', showDocProperties);
|
||||
$id('tool_editor_prefs').addEventListener('click', showPreferences);
|
||||
$id('tool_editor_homepage').addEventListener('click', openHomePage);
|
||||
|
||||
const toolButtons = [
|
||||
{sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
|
||||
{sel: '#tool_save', fn () {
|
||||
if (editingsource) {
|
||||
saveSourceEditor();
|
||||
} else {
|
||||
clickSave();
|
||||
}
|
||||
}, evt: 'mouseup', key: ['S', true]},
|
||||
{sel: '#tool_export', fn: clickExport, evt: 'mouseup'},
|
||||
{sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},
|
||||
{sel: '#tool_import', fn: clickImport, evt: 'mouseup'},
|
||||
{
|
||||
key: ['esc', false, false],
|
||||
fn () {
|
||||
|
|
@ -4707,12 +4717,7 @@ editor.init = () => {
|
|||
key: ['esc', false, false], hidekey: true},
|
||||
{sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
|
||||
{sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
|
||||
{sel: '#tool_docprops', fn: showDocProperties, evt: 'click'},
|
||||
{sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
|
||||
{sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'},
|
||||
{sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},
|
||||
{sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
|
||||
{sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
|
||||
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
|
||||
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
|
||||
{sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
|
||||
|
|
|
|||
Loading…
Reference in New Issue