in progress
jfh
parent
a6479913ea
commit
ff79759922
|
|
@ -4,7 +4,7 @@
|
|||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host :hover :not(.disabled)
|
||||
:host(:hover) :not(.disabled)
|
||||
{
|
||||
background-color: #ffc;
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ template.innerHTML = `
|
|||
height: 100%;
|
||||
}
|
||||
.pressed {
|
||||
background-color: #F4E284 !important;
|
||||
background-color: #F4E284;
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
}
|
||||
.disabled {
|
||||
|
|
@ -65,7 +65,7 @@ export class ToolButton extends HTMLElement {
|
|||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'src', 'pressed', 'disabled', 'size'];
|
||||
return ['title', 'src', 'pressed', 'disabled', 'size', 'style'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -83,6 +83,9 @@ export class ToolButton extends HTMLElement {
|
|||
this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||
}
|
||||
break;
|
||||
case 'style':
|
||||
this.$div.style = newValue;
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@
|
|||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host
|
||||
:host {
|
||||
position:relative;
|
||||
}
|
||||
:host(:hover) :not(.disabled)
|
||||
{
|
||||
position:absolute;
|
||||
background-color: #ffc;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
|
|
@ -28,12 +31,30 @@ template.innerHTML = `
|
|||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu-button :hover
|
||||
{
|
||||
background-color: #ffc;
|
||||
.handle {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
background: no-repeat url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCAzIDQiIHdpZHRoPSIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIGZpbGw9IiM4MDg2OEIiIHBvaW50cz0iNDg4LjI1IDY1Mi43NSA0ODYuMjUgNjU1LjI1IDQ4NC4yNSA2NTIuNzUiIHRyYW5zZm9ybT0icm90YXRlKC05MCAtODIuMjUgNTcwLjUpIi8+PC9zdmc+);
|
||||
transform: scale(2);
|
||||
position:absolute;
|
||||
bottom: 2px;
|
||||
right: 1px;
|
||||
}
|
||||
.button-icon {
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top:-2px;
|
||||
left:32px;
|
||||
background: none !important;
|
||||
}
|
||||
.menu-item {
|
||||
display: inline;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
|
|
@ -41,55 +62,33 @@ template.innerHTML = `
|
|||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
.handle {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 3px;
|
||||
width: 3px;
|
||||
height: 4px;
|
||||
background: no-repeat url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCAzIDQiIHdpZHRoPSIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIGZpbGw9IiM4MDg2OEIiIHBvaW50cz0iNDg4LjI1IDY1Mi43NSA0ODYuMjUgNjU1LjI1IDQ4NC4yNSA2NTIuNzUiIHRyYW5zZm9ybT0icm90YXRlKC05MCAtODIuMjUgNTcwLjUpIi8+PC9zdmc+);
|
||||
display: block;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
.open .item1 {
|
||||
transition-duration: 190ms;
|
||||
transform: translate(35px);
|
||||
}
|
||||
.open .item2 {
|
||||
transition-duration: 290ms;
|
||||
transform: translate(70px);
|
||||
}
|
||||
.open .item3 {
|
||||
transition-duration: 390ms;
|
||||
transform: translate(105px);
|
||||
}
|
||||
.open .item4 {
|
||||
transition-duration: 490ms;
|
||||
transform: translate(140px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="menu-button open">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
<div class="handle"></div>
|
||||
<div class="menu-item item1" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
<div ">
|
||||
<div class="menu-button">
|
||||
<img class="button-icon" src="./images/logo.svg" alt="icon">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
<div class="menu-item item2" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item3" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item4" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
<div class="menu">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`;
|
||||
/**
|
||||
* @class FlyingButton
|
||||
|
|
@ -106,6 +105,15 @@ export class FlyingButton extends HTMLElement {
|
|||
// locate the component
|
||||
this.$open = this._shadowRoot.querySelector('.menu-button');
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
// the last element of the div is the slot
|
||||
// we retrieve all elements added in the slot (i.e. se-buttons)
|
||||
this.$elements = this.$open.lastElementChild.assignedElements();
|
||||
this.$elements[0].style.transitionDuration = '190ms';
|
||||
this.$elements[0].style.transform = 'translate(2px,-3px)';
|
||||
this.$elements[1].style.transitionDuration = '`2500ms';
|
||||
this.$elements[1].style.transform = 'translate(0px,-3px)';
|
||||
this.$elements[2].style.transitionDuration = '`2500ms';
|
||||
this.$elements[2].style.transform = 'translate(0px,-3px)';
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
|
|
@ -124,9 +132,9 @@ export class FlyingButton extends HTMLElement {
|
|||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'titloe':
|
||||
case 'title':
|
||||
{
|
||||
const shortcut = this.getAttribute('title');
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
this.$open.setAttribute('title', `${newValue} [${shortcut}]`);
|
||||
}
|
||||
break;
|
||||
|
|
@ -227,3 +235,17 @@ export class FlyingButton extends HTMLElement {
|
|||
|
||||
// Register
|
||||
customElements.define('se-flyingbutton', FlyingButton);
|
||||
/*
|
||||
<div class="menu-item item1" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item2" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item3" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item4" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,235 @@
|
|||
/* eslint-disable max-len */
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host
|
||||
{
|
||||
position:absolute;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
width: 24px;
|
||||
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;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
.menu-button {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-button :hover
|
||||
{
|
||||
background-color: #ffc;
|
||||
}
|
||||
.menu-item {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
.handle {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 3px;
|
||||
width: 3px;
|
||||
height: 4px;
|
||||
background: no-repeat url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCAzIDQiIHdpZHRoPSIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIGZpbGw9IiM4MDg2OEIiIHBvaW50cz0iNDg4LjI1IDY1Mi43NSA0ODYuMjUgNjU1LjI1IDQ4NC4yNSA2NTIuNzUiIHRyYW5zZm9ybT0icm90YXRlKC05MCAtODIuMjUgNTcwLjUpIi8+PC9zdmc+);
|
||||
display: block;
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
.open .item1 {
|
||||
transition-duration: 190ms;
|
||||
transform: translate(35px);
|
||||
}
|
||||
.open .item2 {
|
||||
transition-duration: 290ms;
|
||||
transform: translate(70px);
|
||||
}
|
||||
.open .item3 {
|
||||
transition-duration: 390ms;
|
||||
transform: translate(105px);
|
||||
}
|
||||
.open .item4 {
|
||||
transition-duration: 490ms;
|
||||
transform: translate(140px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="menu-button open">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
<div class="handle"></div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
/**
|
||||
* @class FlyingButton
|
||||
*/
|
||||
export class FlyingButton 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));
|
||||
// locate the component
|
||||
this.$open = this._shadowRoot.querySelector('.menu-button');
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'src', 'pressed', 'disabled', 'style'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'title':
|
||||
{
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
this.$open.setAttribute('title', `${newValue} [${shortcut}]`);
|
||||
}
|
||||
break;
|
||||
case 'style':
|
||||
this.$open.style = newValue;
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
break;
|
||||
case 'pressed':
|
||||
if (newValue) {
|
||||
this.$div.classList.add('pressed');
|
||||
} else {
|
||||
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}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get title () {
|
||||
return this.getAttribute('title');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
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}
|
||||
*/
|
||||
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}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-flyingbutton', FlyingButton);
|
||||
/*
|
||||
<div class="menu-item item1" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item2" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item3" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
<div class="menu-item item4" title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
*/
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
|
||||
<defs>
|
||||
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
|
||||
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 491 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
|
||||
<defs>
|
||||
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
|
||||
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="15" cy="27" cx="27"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
|
|
@ -0,0 +1,16 @@
|
|||
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
|
||||
<stop offset="0" stop-color="#f9d225" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ff6666" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
|
||||
<path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
|
||||
<path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fce0a9" stroke="#000000" stroke-width="2"/>
|
||||
<path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<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_16" x1="0.46484" y1="0.15625" x2="0.9375" y2="0.39453">
|
||||
<stop offset="0" stop-color="#f2feff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#14609b" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_19" x1="0.18359" y1="0.26172" x2="0.77734" y2="0.56641">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#fce564" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0.99844" y1="1.49067" x2="12.97691" y2="21.14149" id="svg_5" stroke="#000000" fill="none"/>
|
||||
<path d="m14.05272,13.68732l-1.46451,7.52632l4.03769,-6.32571" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
|
||||
<path d="m13.61215,10.26563c-0.38567,1.05257 -0.60723,2.40261 -0.50403,3.125l4.33468,1.81452c0.46153,-0.30769 1.6129,-1.71371 1.6129,-2.52016" id="svg_7" fill="url(#svg_19)" stroke="#000000"/>
|
||||
<path d="m16.61335,1.00028l-3.67325,8.60247l7.10285,3.47318l3.17783,-7.20549" id="svg_8" fill="url(#svg_16)" stroke="#000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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.10156" x1="0.36328" id="svg_2">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#000000" fill="url(#svg_2)" id="svg_1" height="12" width="20" y="5.5" x="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 471 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<circle stroke="#0000ff" fill="#00ffff" id="svg_44" r="3.87891" cy="5.3" cx="8.7" stroke-width="1.5"/>
|
||||
<path d="m9.18161,5.6695l0.07763,15.16198l3.41588,-2.33775l2.71718,5.00947l4.34748,-2.33775l-3.41587,-4.27474l4.73565,-0.33397l-11.87794,-10.88723z" id="svg_13" fill="#000000" stroke="#ffffff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 418 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="svg_2" x1="0.36328" y1="0.10156" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#3b7e9b" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1.5" y="1.5" width="20" height="20" id="svg_1" fill="url(#svg_2)" stroke="#000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 434 B |
|
|
@ -1,156 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- All images created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
|
||||
|
||||
<g id="logo">
|
||||
<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
|
||||
<stop offset="0" stop-color="#ff7f00" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffff00"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#666666" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
|
||||
<path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
|
||||
<path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="none"/>
|
||||
<path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="none"/>
|
||||
<rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="none" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
|
||||
<rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="none" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
|
||||
<ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="none" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
|
||||
<path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="none"/>
|
||||
<path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="none"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="select_node">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<circle stroke="#0000ff" fill="#00ffff" id="svg_44" r="3.87891" cy="5.3" cx="8.7" stroke-width="1.5"/>
|
||||
<path d="m9.18161,5.6695l0.07763,15.16198l3.41588,-2.33775l2.71718,5.00947l4.34748,-2.33775l-3.41587,-4.27474l4.73565,-0.33397l-11.87794,-10.88723z" id="svg_13" fill="#000000" stroke="#ffffff"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="square">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient id="svg_2" x1="0.36328" y1="0.10156" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#3b7e9b" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="1.5" y="1.5" width="20" height="20" id="svg_1" fill="url(#svg_2)" stroke="#000000"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="rect">
|
||||
<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.10156" x1="0.36328" id="svg_2">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#000000" fill="url(#svg_2)" id="svg_1" height="12" width="20" y="5.5" x="1.5"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="fh_rect">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||||
<defs>
|
||||
<linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
|
||||
<stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
|
||||
<path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
|
||||
<path stroke-width="2" stroke="#000000" fill="#fce0a9" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
|
||||
<path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
|
||||
<g id="circle">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
|
||||
<defs>
|
||||
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
|
||||
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="ellipse">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
|
||||
<defs>
|
||||
<linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
|
||||
<stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="15" cy="27" cx="27"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="fh_ellipse">
|
||||
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
|
||||
<stop offset="0" stop-color="#f9d225" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ff6666" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
|
||||
<path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
|
||||
<path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fce0a9" stroke="#000000" stroke-width="2"/>
|
||||
<path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="pen">
|
||||
<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_16" x1="0.46484" y1="0.15625" x2="0.9375" y2="0.39453">
|
||||
<stop offset="0" stop-color="#f2feff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#14609b" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="svg_19" x1="0.18359" y1="0.26172" x2="0.77734" y2="0.56641">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#fce564" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line x1="0.99844" y1="1.49067" x2="12.97691" y2="21.14149" id="svg_5" stroke="#000000" fill="none"/>
|
||||
<path d="m14.05272,13.68732l-1.46451,7.52632l4.03769,-6.32571" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
|
||||
<path d="m13.61215,10.26563c-0.38567,1.05257 -0.60723,2.40261 -0.50403,3.125l4.33468,1.81452c0.46153,-0.30769 1.6129,-1.71371 1.6129,-2.52016" id="svg_7" fill="url(#svg_19)" stroke="#000000"/>
|
||||
<path d="m16.61335,1.00028l-3.67325,8.60247l7.10285,3.47318l3.17783,-7.20549" id="svg_8" fill="url(#svg_16)" stroke="#000000"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="add_subpath">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 124" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 30 KiB |
|
|
@ -380,7 +380,11 @@
|
|||
<div id="tools_left" class="tools_panel">
|
||||
<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="test" title="Line Tool" src="./images/line.png"></se-flyingbutton>
|
||||
<se-flyingbutton id="test" title="Line Tool" src="./images/pen.svg">
|
||||
<se-button id="tool_fhath" title="1" src="./images/logo.svg" shortcut="Q"></se-button>
|
||||
<se-button id="tool_fhpth" title="2" src="./images/logo.svg" shortcut="Q"></se-button>
|
||||
<se-button id="tool_fhpth" title="3" src="./images/logo.svg" shortcut="Q"></se-button>
|
||||
</se-flyingbutton>
|
||||
|
||||
<se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
|
||||
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue