progress
jfh
parent
dcd5c48124
commit
62c53bb731
|
|
@ -1,11 +1,10 @@
|
|||
/* eslint-disable max-len */
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position:relative;
|
||||
}
|
||||
:host(:hover) :not(.disabled)
|
||||
.overall:hover *
|
||||
{
|
||||
background-color: #ffc;
|
||||
}
|
||||
|
|
@ -14,9 +13,13 @@ template.innerHTML = `
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.pressed {
|
||||
background-color: #F4E284 !important;
|
||||
.overall.pressed .button-icon,
|
||||
.overall.pressed .handle {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
.overall.pressed .menu-button {
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
background-color: #F4E284 !important;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
|
|
@ -35,13 +38,12 @@ template.innerHTML = `
|
|||
overflow: hidden;
|
||||
}
|
||||
.handle {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
background: no-repeat url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCAzIDQiIHdpZHRoPSIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIGZpbGw9IiM4MDg2OEIiIHBvaW50cz0iNDg4LjI1IDY1Mi43NSA0ODYuMjUgNjU1LjI1IDQ4NC4yNSA2NTIuNzUiIHRyYW5zZm9ybT0icm90YXRlKC05MCAtODIuMjUgNTcwLjUpIi8+PC9zdmc+);
|
||||
transform: scale(2);
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-image: url(./images/handle.svg);
|
||||
position:absolute;
|
||||
bottom: 2px;
|
||||
right: 1px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.button-icon {
|
||||
}
|
||||
|
|
@ -62,9 +64,12 @@ template.innerHTML = `
|
|||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
.overall {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div ">
|
||||
<div class="overall">
|
||||
<div class="menu-button">
|
||||
<img class="button-icon" src="./images/logo.svg" alt="icon">
|
||||
<div class="handle"></div>
|
||||
|
|
@ -89,6 +94,7 @@ export class FlyingButton extends HTMLElement {
|
|||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
// locate the component
|
||||
this.$button = this._shadowRoot.querySelector('.menu-button');
|
||||
this.$overall = this._shadowRoot.querySelector('.overall');
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
this.$menu = this._shadowRoot.querySelector('.menu');
|
||||
// the last element of the div is the slot
|
||||
|
|
@ -123,9 +129,9 @@ export class FlyingButton extends HTMLElement {
|
|||
break;
|
||||
case 'pressed':
|
||||
if (newValue) {
|
||||
this.$div.classList.add('pressed');
|
||||
this.$overall.classList.add('pressed');
|
||||
} else {
|
||||
this.$div.classList.remove('pressed');
|
||||
this.$overall.classList.remove('pressed');
|
||||
}
|
||||
break;
|
||||
case 'disabled':
|
||||
|
|
@ -216,11 +222,36 @@ export class FlyingButton extends HTMLElement {
|
|||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
// capture click event
|
||||
this.$button.addEventListener('click', () => {
|
||||
// normalize key
|
||||
this.$menu.classList.toggle('open');
|
||||
});
|
||||
// initialize currentAction with the first slot of the list
|
||||
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
||||
// capture click event on the button to manage the logic
|
||||
const onClickHandler = (ev) => {
|
||||
switch (ev.target.nodeName) {
|
||||
case 'SE-FLYINGBUTTON':
|
||||
if (this.pressed) {
|
||||
this.$menu.classList.toggle('open');
|
||||
} else {
|
||||
// launch current action
|
||||
this.activeSlot.click();
|
||||
this.setAttribute('pressed', 'pressed');
|
||||
}
|
||||
break;
|
||||
case 'SE-BUTTON':
|
||||
console.log('change current action');
|
||||
// change icon to the current action and close the menu
|
||||
this.setAttribute('src', ev.target.getAttribute('src'));
|
||||
this.currentAction = ev.target;
|
||||
this.setAttribute('pressed', 'pressed');
|
||||
this.$menu.classList.remove('open');
|
||||
break;
|
||||
default:
|
||||
console.log(ev.target, ev.target.className);
|
||||
this.$menu.classList.remove('open');
|
||||
this.setAttribute('pressed', 'pressed');
|
||||
}
|
||||
};
|
||||
// capture event from slots
|
||||
this.addEventListener('click', onClickHandler);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,235 +0,0 @@
|
|||
/* 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,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<polygon points="5,5 14,10 5,15" fill="#000000" stroke="#000000" stroke-width="5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 191 B |
|
|
@ -386,7 +386,7 @@
|
|||
<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="_tools_line_show" title="Line Tool (L)/Connect two objects" src="./images/pen.svg">
|
||||
<se-button id="_tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
|
||||
<se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
|
||||
<se-button id="_mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
|
||||
</se-flyingbutton>
|
||||
<se-flyingbutton id="_tools_rect_show" title="Square/Rect Tool" src="./images/rect.svg">
|
||||
|
|
@ -403,14 +403,6 @@
|
|||
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
|
||||
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
|
||||
<se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
|
||||
<div style="display: none;">
|
||||
<div id="tool_rect" title="Rectangle"></div>
|
||||
<div id="tool_square" title="Square"></div>
|
||||
<div id="tool_fhrect" title="Free-Hand Rectangle"></div>
|
||||
<div id="tool_ellipse" title="Ellipse"></div>
|
||||
<div id="tool_circle" title="Circle"></div>
|
||||
<div id="tool_fhellipse" title="Free-Hand Ellipse"></div>
|
||||
</div>
|
||||
</div> <!-- tools_left -->
|
||||
<div id="tools_bottom" class="tools_panel">
|
||||
<!-- Zoom buttons -->
|
||||
|
|
|
|||
|
|
@ -1070,17 +1070,8 @@ editor.init = () => {
|
|||
'#tool_docprops > div': 'docprops',
|
||||
'#tool_editor_prefs > div': 'config',
|
||||
'#tool_editor_homepage > div': 'globe_link',
|
||||
'#tool_fhpath': 'pencil',
|
||||
'#tool_line': 'pen',
|
||||
'#tool_rect,#tools_rect_show': 'rect',
|
||||
'#tool_square': 'square',
|
||||
'#tool_fhrect': 'fh_rect',
|
||||
'#tool_ellipse,#tools_ellipse_show': 'ellipse',
|
||||
'#tool_circle': 'circle',
|
||||
'#tool_fhellipse': 'fh_ellipse',
|
||||
'#tool_image': 'image',
|
||||
'#tool_zoom': 'zoom',
|
||||
|
||||
'#tool_node_clone': 'node_clone',
|
||||
'#tool_node_delete': 'node_delete',
|
||||
'#tool_add_subpath': 'add_subpath',
|
||||
|
|
@ -1529,14 +1520,14 @@ editor.init = () => {
|
|||
* - Removes the `tool_button_current` class from whatever tool currently has it.
|
||||
* - Hides any flyouts.
|
||||
* - Adds the `tool_button_current` class to the button passed in.
|
||||
* @function leftPanelClick
|
||||
* @function updateLeftPanel
|
||||
* @param {string|Element} button The DOM element or string selector representing the toolbar button
|
||||
* @returns {boolean} Whether the button was disabled or not
|
||||
*/
|
||||
const leftPanelClick = (button) => {
|
||||
const updateLeftPanel = (button) => {
|
||||
if (button.disabled) return false;
|
||||
// remove the pressed state on other(s) button(s)
|
||||
$qq('#tools-left se-button[pressed]').forEach((b) => { b.pressed = false; });
|
||||
$qq('#tools_left *[pressed]').forEach((b) => { b.pressed = false; });
|
||||
// pressed state for the clicked button
|
||||
$id(button).pressed = true;
|
||||
return true;
|
||||
|
|
@ -1549,7 +1540,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickSelect = () => {
|
||||
if (leftPanelClick('tool_select')) {
|
||||
if (updateLeftPanel('tool_select')) {
|
||||
workarea.css('cursor', 'auto');
|
||||
svgCanvas.setMode('select');
|
||||
}
|
||||
|
|
@ -2981,7 +2972,7 @@ editor.init = () => {
|
|||
parent = '#main_menu ul';
|
||||
break;
|
||||
}
|
||||
let flyoutHolder, showBtn, refData, refBtn;
|
||||
// let flyoutHolder, showBtn, refData, refBtn;
|
||||
const button = $((btn.list || btn.type === 'app_menu') ? '<li/>' : '<div/>')
|
||||
.attr('id', id)
|
||||
.attr('title', btn.title)
|
||||
|
|
@ -2998,6 +2989,7 @@ editor.init = () => {
|
|||
}
|
||||
|
||||
if (btn.type === 'mode_flyout') {
|
||||
/*
|
||||
// Add to flyout menu / make flyout menu
|
||||
// const opts = btn.includeWith;
|
||||
// // opts.button, default, position
|
||||
|
|
@ -3026,7 +3018,7 @@ editor.init = () => {
|
|||
// TODO: Find way to set the current icon using the iconloader if this is not default
|
||||
|
||||
// Include data for extension button as well as ref button
|
||||
/* curH = */ holders['#' + flyoutHolder[0].id] = [{
|
||||
holders['#' + flyoutHolder[0].id] = [{
|
||||
sel: '#' + id,
|
||||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
|
|
@ -3046,6 +3038,7 @@ editor.init = () => {
|
|||
// flyoutHolder.append(button);
|
||||
// curH.reverse();
|
||||
// }
|
||||
*/
|
||||
} else if (btn.type === 'app_menu') {
|
||||
button.append('<div>').append(btn.title);
|
||||
}
|
||||
|
|
@ -3059,11 +3052,11 @@ editor.init = () => {
|
|||
placementObj['#cur_' + btn.list] = svgicon;
|
||||
}
|
||||
} else if (btn.includeWith) {
|
||||
/*
|
||||
// Add to flyout menu / make flyout menu
|
||||
const opts = btn.includeWith;
|
||||
// opts.button, default, position
|
||||
refBtn = $(opts.button);
|
||||
|
||||
flyoutHolder = refBtn.parent();
|
||||
// Create a flyout menu if there isn't one already
|
||||
let tlsId;
|
||||
|
|
@ -3078,7 +3071,6 @@ editor.init = () => {
|
|||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(tlsId, refBtn);
|
||||
}
|
||||
|
||||
refData = Actions.getButtonData(opts.button);
|
||||
|
||||
if (opts.isDefault) {
|
||||
|
|
@ -3105,8 +3097,8 @@ editor.init = () => {
|
|||
flyoutHolder.append(button);
|
||||
curH.reverse();
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
if (!svgicons) {
|
||||
button.append(icon);
|
||||
}
|
||||
|
|
@ -3143,7 +3135,6 @@ editor.init = () => {
|
|||
|
||||
setupFlyouts(holders);
|
||||
});
|
||||
|
||||
$.each(btnSelects, function () {
|
||||
addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
|
||||
});
|
||||
|
|
@ -3786,7 +3777,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickFHPath = function () {
|
||||
if (leftPanelClick('tool_fhpath')) {
|
||||
if (updateLeftPanel('tool_fhpath')) {
|
||||
svgCanvas.setMode('fhpath');
|
||||
}
|
||||
};
|
||||
|
|
@ -3796,7 +3787,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickLine = function () {
|
||||
if (toolButtonClick('#tool_line')) {
|
||||
if (updateLeftPanel('tool_line')) {
|
||||
svgCanvas.setMode('line');
|
||||
}
|
||||
};
|
||||
|
|
@ -3866,7 +3857,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickImage = function () {
|
||||
if (leftPanelClick('tool_image')) {
|
||||
if (updateLeftPanel('tool_image')) {
|
||||
svgCanvas.setMode('image');
|
||||
}
|
||||
};
|
||||
|
|
@ -3876,7 +3867,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickZoom = function () {
|
||||
if (leftPanelClick('tool_zoom')) {
|
||||
if (updateLeftPanel('tool_zoom')) {
|
||||
svgCanvas.setMode('zoom');
|
||||
workarea.css('cursor', zoomInIcon);
|
||||
}
|
||||
|
|
@ -3912,7 +3903,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickText = function () {
|
||||
if (leftPanelClick('tool_text')) {
|
||||
if (updateLeftPanel('tool_text')) {
|
||||
svgCanvas.setMode('text');
|
||||
}
|
||||
};
|
||||
|
|
@ -3922,7 +3913,7 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const clickPath = function () {
|
||||
if (leftPanelClick('tool_path')) {
|
||||
if (updateLeftPanel('tool_path')) {
|
||||
svgCanvas.setMode('path');
|
||||
}
|
||||
};
|
||||
|
|
@ -5251,6 +5242,7 @@ editor.init = () => {
|
|||
$id('tool_image').addEventListener('click', clickImage);
|
||||
$id('tool_zoom').addEventListener('click', clickZoom);
|
||||
$id('tool_path').addEventListener('click', clickPath);
|
||||
$id('tool_line').addEventListener('click', clickLine);
|
||||
// $id('tool_').addEventListener('click', clickP);
|
||||
|
||||
// register actions for layer toolbar
|
||||
|
|
@ -5261,8 +5253,6 @@ editor.init = () => {
|
|||
$id('layer_rename').addEventListener('click', layerRename);
|
||||
|
||||
const toolButtons = [
|
||||
{sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true],
|
||||
parent: '#tools_line', prepend: true},
|
||||
{sel: '#tool_rect', fn: clickRect, evt: 'mouseup',
|
||||
key: ['R', true], parent: '#tools_rect', icon: 'rect'},
|
||||
{sel: '#tool_square', fn: clickSquare, evt: 'mouseup',
|
||||
|
|
|
|||
Loading…
Reference in New Issue