in progress

master
jfh 2020-10-31 22:42:39 +01:00
parent a6479913ea
commit ff79759922
13 changed files with 380 additions and 190 deletions

View File

@ -4,7 +4,7 @@
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
:host :hover :not(.disabled) :host(:hover) :not(.disabled)
{ {
background-color: #ffc; background-color: #ffc;
} }
@ -32,7 +32,7 @@ template.innerHTML = `
height: 100%; height: 100%;
} }
.pressed { .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; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
} }
.disabled { .disabled {
@ -65,7 +65,7 @@ export class ToolButton extends HTMLElement {
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return ['title', 'src', 'pressed', 'disabled', 'size']; return ['title', 'src', 'pressed', 'disabled', 'size', 'style'];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback
@ -83,6 +83,9 @@ export class ToolButton extends HTMLElement {
this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`); this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
} }
break; break;
case 'style':
this.$div.style = newValue;
break;
case 'src': case 'src':
this.$img.setAttribute('src', newValue); this.$img.setAttribute('src', newValue);
break; break;

View File

@ -2,9 +2,12 @@
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
:host :host {
position:relative;
}
:host(:hover) :not(.disabled)
{ {
position:absolute; background-color: #ffc;
} }
img { img {
border: none; border: none;
@ -28,12 +31,30 @@ template.innerHTML = `
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3); box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8; background-color: #E8E8E8;
cursor: pointer; cursor: pointer;
position: relative;
border-radius: 3px;
overflow: hidden;
} }
.menu-button :hover .handle {
{ height: 4px;
background-color: #ffc; 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 { .menu-item {
display: inline;
height: 24px; height: 24px;
width: 24px; width: 24px;
margin: 2px 2px 4px; 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); box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8; background-color: #E8E8E8;
cursor: pointer; cursor: pointer;
position:absolute;
top:0px; top:0px;
left: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 { .open .item1 {
transition-duration: 190ms; transition-duration: 190ms;
transform: translate(35px);
} }
.open .item2 { .open .item2 {
transition-duration: 290ms; transition-duration: 290ms;
transform: translate(70px);
} }
.open .item3 { .open .item3 {
transition-duration: 390ms; transition-duration: 390ms;
transform: translate(105px);
} }
.open .item4 { .open .item4 {
transition-duration: 490ms; transition-duration: 490ms;
transform: translate(140px);
} }
</style> </style>
<div class="menu-button open"> <div ">
<img class="svg_icon" src="./images/logo.svg" alt="icon"> <div class="menu-button">
<img class="button-icon" src="./images/logo.svg" alt="icon">
<div class="handle"></div> <div class="handle"></div>
<div class="menu-item item1" title="title">
<img class="svg_icon" src="./images/logo.svg" alt="icon">
</div> </div>
<div class="menu-item item2" title="title"> <div class="menu">
<img class="svg_icon" src="./images/logo.svg" alt="icon"> <slot></slot>
</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> </div>
</div> </div>
`; `;
/** /**
* @class FlyingButton * @class FlyingButton
@ -106,6 +105,15 @@ export class FlyingButton extends HTMLElement {
// locate the component // locate the component
this.$open = this._shadowRoot.querySelector('.menu-button'); this.$open = this._shadowRoot.querySelector('.menu-button');
this.$img = this._shadowRoot.querySelector('img'); 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 * @function observedAttributes
@ -124,9 +132,9 @@ export class FlyingButton extends HTMLElement {
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return; if (oldValue === newValue) return;
switch (name) { switch (name) {
case 'titloe': case 'title':
{ {
const shortcut = this.getAttribute('title'); const shortcut = this.getAttribute('shortcut');
this.$open.setAttribute('title', `${newValue} [${shortcut}]`); this.$open.setAttribute('title', `${newValue} [${shortcut}]`);
} }
break; break;
@ -227,3 +235,17 @@ export class FlyingButton extends HTMLElement {
// Register // Register
customElements.define('se-flyingbutton', FlyingButton); 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>
*/

View File

@ -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>
*/

View File

@ -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

View File

@ -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

View File

@ -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

View File

16
src/editor/images/pen.svg Normal file
View File

@ -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

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.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

View File

@ -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

View File

@ -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

View File

@ -1,156 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg">
<!-- All images created with SVG-edit - https://github.com/SVG-Edit/svgedit --> <!-- 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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 124" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <defs>

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -380,7 +380,11 @@
<div id="tools_left" class="tools_panel"> <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_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-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_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> <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>