in progress
jfh
parent
62c53bb731
commit
6cc38b7049
|
|
@ -15,7 +15,7 @@ template.innerHTML = `
|
|||
}
|
||||
.overall.pressed .button-icon,
|
||||
.overall.pressed .handle {
|
||||
background-color: #000 !important;
|
||||
background-color: #F4E284 !important;
|
||||
}
|
||||
.overall.pressed .menu-button {
|
||||
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
|
||||
|
|
@ -106,7 +106,7 @@ export class FlyingButton extends HTMLElement {
|
|||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'src', 'pressed', 'disabled'];
|
||||
return ['title', 'pressed', 'disabled'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -124,9 +124,6 @@ export class FlyingButton extends HTMLElement {
|
|||
this.$button.setAttribute('title', `${newValue} [${shortcut}]`);
|
||||
}
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
break;
|
||||
case 'pressed':
|
||||
if (newValue) {
|
||||
this.$overall.classList.add('pressed');
|
||||
|
|
@ -202,21 +199,6 @@ export class FlyingButton extends HTMLElement {
|
|||
this.removeAttribute('disabled', '');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @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}
|
||||
|
|
@ -224,6 +206,7 @@ export class FlyingButton extends HTMLElement {
|
|||
connectedCallback () {
|
||||
// initialize currentAction with the first slot of the list
|
||||
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
|
||||
this.$img.setAttribute('src', this.activeSlot.getAttribute('src'));
|
||||
// capture click event on the button to manage the logic
|
||||
const onClickHandler = (ev) => {
|
||||
switch (ev.target.nodeName) {
|
||||
|
|
@ -237,17 +220,16 @@ export class FlyingButton extends HTMLElement {
|
|||
}
|
||||
break;
|
||||
case 'SE-BUTTON':
|
||||
console.log('change current action');
|
||||
// change icon to the current action and close the menu
|
||||
// change to the current action
|
||||
this.setAttribute('src', ev.target.getAttribute('src'));
|
||||
this.currentAction = ev.target;
|
||||
this.setAttribute('pressed', 'pressed');
|
||||
// and close the menu
|
||||
this.$menu.classList.remove('open');
|
||||
break;
|
||||
default:
|
||||
console.log(ev.target, ev.target.className);
|
||||
this.$menu.classList.remove('open');
|
||||
this.setAttribute('pressed', 'pressed');
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('unkonw nodeName for:', ev.target, ev.target.className);
|
||||
}
|
||||
};
|
||||
// capture event from slots
|
||||
|
|
|
|||
|
|
@ -349,13 +349,7 @@ export default {
|
|||
|
||||
const buttons = [{
|
||||
id: 'mode_connect',
|
||||
type: 'mode',
|
||||
icon: svgEditor.curConfig.imgPath + 'cut.png',
|
||||
includeWith: {
|
||||
button: '#tool_line',
|
||||
isDefault: false,
|
||||
position: 1
|
||||
},
|
||||
type: 'mode_flyout',
|
||||
events: {
|
||||
click () {
|
||||
svgCanvas.setMode('connector');
|
||||
|
|
@ -364,6 +358,8 @@ export default {
|
|||
}];
|
||||
const strings = await loadExtensionTranslation(svgEditor.curPrefs.lang);
|
||||
return {
|
||||
/** @todo JFH special flag */
|
||||
newUI: true,
|
||||
name: strings.name,
|
||||
svgicons: 'conn.svg',
|
||||
buttons: strings.buttons.map((button, i) => {
|
||||
|
|
|
|||
|
|
@ -454,7 +454,7 @@ export default {
|
|||
|
||||
const buttons = [{
|
||||
id: 'tool_imagelib',
|
||||
type: 'app_menu', // _flyout
|
||||
type: 'app_menu',
|
||||
icon: 'imagelib.png',
|
||||
position: 4,
|
||||
events: {
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ export default {
|
|||
const buttons = [{
|
||||
id: 'tool_shapelib',
|
||||
icon: 'shapes.png',
|
||||
type: 'mode_flyout', // _flyout
|
||||
type: 'mode_flyout',
|
||||
position: 6,
|
||||
events: {
|
||||
click () {
|
||||
|
|
@ -214,7 +214,6 @@ export default {
|
|||
if (!btn.length) { return; }
|
||||
|
||||
const copy = btn.children().clone();
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower
|
||||
.append(copy)
|
||||
.attr('data-curopt', '#' + btn[0].id) // This sets the current mode
|
||||
|
|
@ -223,8 +222,6 @@ export default {
|
|||
|
||||
curShapeId = btn[0].id.substr((modeId + '_').length);
|
||||
currentD = curLib.data[curShapeId];
|
||||
|
||||
$('.tools_flyout').fadeOut();
|
||||
});
|
||||
|
||||
const shapeCats = $('<div id="shape_cats">');
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="mode_connect">
|
||||
<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
|
||||
<line stroke-width="5" fill="none" stroke="#000000" id="svg_2" y2="121" x2="136" y1="7" x1="136">
|
||||
<stop stop-opacity="1" stop-color="#4687a0"/>
|
||||
<stop stop-opacity="1" stop-color="#ffffff"/>
|
||||
</line>
|
||||
<linearGradient y2="0.18359" x2="0.29688" y1="0.92188" x1="0.62109" id="svg_3">
|
||||
<stop stop-opacity="1" stop-color="#417dad" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<line x1="5.64676" y1="5.60056" x2="18.50037" y2="18.62557" id="svg_5" stroke="#000000" fill="none"/>
|
||||
<rect opacity="0.75" stroke-width="0.5" x="0.5" y="0.5" width="9.625" height="5.125" id="svg_1" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<rect opacity="0.75" id="svg_4" stroke-width="0.5" x="13.75" y="18.25" width="9.625" height="5.125" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<g id="svg_9">
|
||||
<path d="m14.57119,9.12143l-0.98244,5.18852l2.70861,-4.36084" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
|
||||
<path d="m14.27564,6.76258c-0.25872,0.72562 -0.40735,1.65632 -0.33812,2.15432l2.90784,1.2509c0.30961,-0.21212 1.08198,-1.1814 1.08198,-1.73736" id="svg_7" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<path d="m16.28893,0.37519l-2.46413,5.9304l4.76481,2.39435l2.13178,-4.96735" id="svg_8" fill="url(#svg_3)" stroke="#000000"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<line stroke-width="5" fill="none" stroke="#000000" id="svg_2" y2="121" x2="136" y1="7" x1="136">
|
||||
<stop stop-opacity="1" stop-color="#4687a0"/>
|
||||
<stop stop-opacity="1" stop-color="#ffffff"/>
|
||||
</line>
|
||||
<linearGradient y2="0.18359" x2="0.29688" y1="0.92188" x1="0.62109" id="svg_3">
|
||||
<stop stop-opacity="1" stop-color="#417dad" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<line x1="5.64676" y1="5.60056" x2="18.50037" y2="18.62557" id="svg_5" stroke="#000000" fill="none"/>
|
||||
<rect opacity="0.75" stroke-width="0.5" x="0.5" y="0.5" width="9.625" height="5.125" id="svg_1" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<rect opacity="0.75" id="svg_4" stroke-width="0.5" x="13.75" y="18.25" width="9.625" height="5.125" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<g id="svg_9">
|
||||
<path d="m14.57119,9.12143l-0.98244,5.18852l2.70861,-4.36084" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
|
||||
<path d="m14.27564,6.76258c-0.25872,0.72562 -0.40735,1.65632 -0.33812,2.15432l2.90784,1.2509c0.30961,-0.21212 1.08198,-1.1814 1.08198,-1.73736" id="svg_7" fill="url(#svg_3)" stroke="#000000"/>
|
||||
<path d="m16.28893,0.37519l-2.46413,5.9304l4.76481,2.39435l2.13178,-4.96735" id="svg_8" fill="url(#svg_3)" stroke="#000000"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -385,16 +385,16 @@
|
|||
<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="_tools_line_show" title="Line Tool (L)/Connect two objects" src="./images/pen.svg">
|
||||
<se-flyingbutton id="_tools_line_show" title="Line Tool (L)/Connect two objects">
|
||||
<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-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">
|
||||
<se-flyingbutton id="_tools_rect_show" title="Square/Rect Tool">
|
||||
<se-button id="_tool_rect" title="Rectangle" src="./images/rect.svg"></se-button>
|
||||
<se-button id="_tool_square" title="Square" src="./images/square.svg"></se-button>
|
||||
<se-button id="_tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
|
||||
</se-flyingbutton>
|
||||
<se-flyingbutton id="_tools_ellipse_show" title="Ellipse/Circle Tool" src="./images/ellipse.svg">
|
||||
<se-flyingbutton id="_tools_ellipse_show" title="Ellipse/Circle Tool">
|
||||
<se-button id="_tool_ellipse" title="Rectangle" src="./images/ellipse.svg"></se-button>
|
||||
<se-button id="_tool_circle" title="Square" src="./images/circle.svg"></se-button>
|
||||
<se-button id="_tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
|
||||
|
|
|
|||
|
|
@ -576,14 +576,6 @@ input[type=text] {
|
|||
z-index: 11;
|
||||
}
|
||||
|
||||
.flyout_arrow_horiz {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
span.zoom_tool {
|
||||
line-height: 26px;
|
||||
padding: 3px;
|
||||
|
|
@ -767,32 +759,6 @@ span.zoom_tool {
|
|||
z-index: 5;
|
||||
}
|
||||
|
||||
.tools_flyout {
|
||||
position: absolute;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
width: 400px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tools_flyout_v {
|
||||
position: absolute;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.tools_flyout .tool_button {
|
||||
float: left;
|
||||
background-color: #E8E8E8;
|
||||
border-left: 1px solid #FFFFFF;
|
||||
border-top: 1px solid #FFFFFF;
|
||||
border-right: 1px solid #808080;
|
||||
border-bottom: 1px solid #808080;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
#tools_bottom {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
|
|
@ -1342,18 +1308,6 @@ ul li.current {
|
|||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
/* Necessary to keep the flyouts sized properly */
|
||||
.tools_flyout .tool_button,
|
||||
.tools_flyout .tool_flyout {
|
||||
padding: 2px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
border-radius: 0px;
|
||||
-moz-border-radius: 0px;
|
||||
-webkit-border-radius: 0px;
|
||||
}
|
||||
|
||||
/* Generic context menu styles */
|
||||
.contextMenu {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -817,10 +817,6 @@ editor.init = () => {
|
|||
extensionsAdded = true;
|
||||
Actions.setAll();
|
||||
|
||||
$('.flyout_arrow_horiz:empty').each(function () {
|
||||
$(this).append($.getSvgIcon('arrow_right', true).width(5).height(5));
|
||||
});
|
||||
|
||||
if (editor.storagePromptState === 'ignore') {
|
||||
updateCanvas(true);
|
||||
}
|
||||
|
|
@ -846,19 +842,6 @@ editor.init = () => {
|
|||
|
||||
const stateObj = {tool_scale: editor.tool_scale};
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
const setFlyoutPositions = function () {
|
||||
$('.tools_flyout').each(function () {
|
||||
const shower = $('#' + this.id + '_show');
|
||||
const {left, top} = shower.offset();
|
||||
const w = shower.outerWidth();
|
||||
$(this).css({left: (left + w) * editor.tool_scale, top});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @type {string}
|
||||
*/
|
||||
|
|
@ -889,7 +872,7 @@ editor.init = () => {
|
|||
// const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
|
||||
const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +
|
||||
' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +
|
||||
' #g_panel > *, #tool_font_size > *, .tools_flyout';
|
||||
' #g_panel > *, #tool_font_size > *';
|
||||
|
||||
const elems = $(selToscale);
|
||||
|
||||
|
|
@ -903,16 +886,6 @@ editor.init = () => {
|
|||
|
||||
stateObj.tool_scale = editor.tool_scale = scale;
|
||||
|
||||
setFlyoutPositions();
|
||||
// $('.tools_flyout').each(function () {
|
||||
// const pos = $(this).position();
|
||||
// console.log($(this), pos.left+(34 * scale));
|
||||
// $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});
|
||||
// console.log('l', $(this).css('left'));
|
||||
// });
|
||||
//
|
||||
// const scale = .75;
|
||||
|
||||
const hiddenPs = elems.parents(':hidden');
|
||||
hiddenPs.css('visibility', 'hidden').show();
|
||||
hiddenPs.css('visibility', 'visible').hide();
|
||||
|
|
@ -968,8 +941,6 @@ editor.init = () => {
|
|||
);
|
||||
ruleElem.text(styleStr);
|
||||
}
|
||||
|
||||
setFlyoutPositions();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -1004,7 +975,6 @@ editor.init = () => {
|
|||
image: 'image.png',
|
||||
zoom: 'zoom.png',
|
||||
|
||||
arrow_right: 'flyouth.png',
|
||||
arrow_right_big: 'arrow_right_big.png',
|
||||
arrow_down: 'dropdown.gif',
|
||||
fill: 'fill.png',
|
||||
|
|
@ -1116,13 +1086,11 @@ editor.init = () => {
|
|||
'#blurLabel': 'blur',
|
||||
'#font_sizeLabel': 'fontsize',
|
||||
|
||||
'.flyout_arrow_horiz': 'arrow_right',
|
||||
'.dropdown button, #main_button .dropdown': 'arrow_down',
|
||||
'#palette .palette_item:first, #fill_bg, #stroke_bg': 'no_color'
|
||||
},
|
||||
resize: {
|
||||
'#logo .svg_icon': 28,
|
||||
'.flyout_arrow_horiz .svg_icon': 5,
|
||||
'.svg_icon, #layerlist td.layervis .svg_icon': 14,
|
||||
'.dropdown button .svg_icon': 7,
|
||||
'#main_button .dropdown .svg_icon': 9,
|
||||
|
|
@ -1147,19 +1115,6 @@ editor.init = () => {
|
|||
const size = editor.pref('iconsize');
|
||||
editor.setIconSize(size || ($(window).height() < minHeight ? 's' : 'm'));
|
||||
|
||||
// Look for any missing flyout icons from plugins
|
||||
$('.tools_flyout').each(function () {
|
||||
const shower = $('#' + this.id + '_show');
|
||||
const sel = shower.attr('data-curopt');
|
||||
// Check if there's an icon here
|
||||
if (!shower.children('svg, img').length) {
|
||||
const clone = $(sel).children().clone();
|
||||
if (clone.length) {
|
||||
clone[0].removeAttribute('style'); // Needed for Opera
|
||||
shower.append(clone);
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#svg_container')[0].style.visibility = 'visible';
|
||||
await editor.runCallbacks();
|
||||
}
|
||||
|
|
@ -1228,9 +1183,6 @@ editor.init = () => {
|
|||
}
|
||||
}());
|
||||
|
||||
// used to make the flyouts stay on the screen longer the very first time
|
||||
// const flyoutspeed = 1250; // Currently unused
|
||||
// let textBeingEntered = false; // Currently unused
|
||||
const origTitle = $('title:first').text();
|
||||
// Make [1,2,5] array
|
||||
const rIntervals = [];
|
||||
|
|
@ -1494,20 +1446,13 @@ editor.init = () => {
|
|||
* This is a common function used when a tool has been clicked (chosen).
|
||||
* It does several common things:
|
||||
* - 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 module:SVGEditor.toolButtonClick
|
||||
* @param {string|Element} button The DOM element or string selector representing the toolbar button
|
||||
* @param {boolean} noHiding Whether not to hide any flyouts
|
||||
* @returns {boolean} Whether the button was disabled or not
|
||||
*/
|
||||
const toolButtonClick = editor.toolButtonClick = function (button, noHiding) {
|
||||
const toolButtonClick = editor.toolButtonClick = function (button) {
|
||||
if ($(button).hasClass('disabled')) { return false; }
|
||||
if ($(button).parent().hasClass('tools_flyout')) { return true; }
|
||||
const fadeFlyouts = 'normal';
|
||||
if (!noHiding) {
|
||||
$('.tools_flyout').fadeOut(fadeFlyouts);
|
||||
}
|
||||
$('#styleoverrides').text('');
|
||||
workarea.css('cursor', 'auto');
|
||||
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
|
||||
|
|
@ -1518,7 +1463,6 @@ editor.init = () => {
|
|||
* This is a common function used when a tool has been clicked (chosen).
|
||||
* It does several common things:
|
||||
* - 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 updateLeftPanel
|
||||
* @param {string|Element} button The DOM element or string selector representing the toolbar button
|
||||
|
|
@ -1899,18 +1843,6 @@ editor.init = () => {
|
|||
}
|
||||
);
|
||||
|
||||
// Disable flyouts if all inside are disabled
|
||||
$('.tools_flyout').each(function () {
|
||||
const shower = $('#' + this.id + '_show');
|
||||
let hasEnabled = false;
|
||||
$(this).children().each(function () {
|
||||
if (!$(this).hasClass('disabled')) {
|
||||
hasEnabled = true;
|
||||
}
|
||||
});
|
||||
shower.toggleClass('disabled', !hasEnabled);
|
||||
});
|
||||
|
||||
operaRepaint();
|
||||
};
|
||||
|
||||
|
|
@ -2505,167 +2437,6 @@ editor.init = () => {
|
|||
paintBox.stroke.prep();
|
||||
};
|
||||
|
||||
const flyoutFuncs = {};
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
const setFlyoutTitles = function () {
|
||||
$('.tools_flyout').each(function () {
|
||||
const shower = $('#' + this.id + '_show');
|
||||
if (shower.data('isLibrary')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tooltips = $(this).children().map(function () {
|
||||
return this.title;
|
||||
}).get();
|
||||
shower[0].title = tooltips.join(' / ');
|
||||
});
|
||||
};
|
||||
|
||||
const allHolders = {};
|
||||
/**
|
||||
* @param {PlainObject<string, module:SVGEditor.ToolButton>} holders Key is a selector
|
||||
* @returns {void}
|
||||
*/
|
||||
const setupFlyouts = function (holders) {
|
||||
$.each(holders, function (holdSel, btnOpts) {
|
||||
if (!allHolders[holdSel]) {
|
||||
allHolders[holdSel] = [];
|
||||
}
|
||||
allHolders[holdSel].push(...btnOpts);
|
||||
|
||||
const buttons = $(holdSel).children().not('.tool_button_evt_handled');
|
||||
const showSel = holdSel + '_show';
|
||||
const shower = $(showSel);
|
||||
let def = false;
|
||||
buttons.addClass('tool_button tool_button_evt_handled')
|
||||
.unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function () {
|
||||
// Get this button's options
|
||||
const idSel = '#' + this.getAttribute('id');
|
||||
const [i, opts] = Object.entries(btnOpts).find(([_, {sel}]) => {
|
||||
return sel === idSel;
|
||||
});
|
||||
|
||||
// Remember the function that goes with this ID
|
||||
flyoutFuncs[opts.sel] = opts.fn;
|
||||
|
||||
if (opts.isDefault) { def = i; }
|
||||
|
||||
/**
|
||||
* Clicking the icon in flyout should set this set's icon.
|
||||
* @param {Event} ev
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const flyoutAction = function (ev) {
|
||||
let options = opts;
|
||||
// Find the currently selected tool if comes from keystroke
|
||||
if (ev.type === 'keydown') {
|
||||
const flyoutIsSelected = $(options.parent + '_show').hasClass('tool_button_current');
|
||||
const currentOperation = $(options.parent + '_show').attr('data-curopt');
|
||||
Object.entries(holders[opts.parent]).some(([j, tool]) => {
|
||||
if (tool.sel !== currentOperation) {
|
||||
return false;
|
||||
}
|
||||
if (!ev.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
// If flyout is selected, allow shift key to iterate through subitems
|
||||
j = Number.parseInt(j);
|
||||
// Use `allHolders` to include both extension `includeWith` and toolbarButtons
|
||||
options = allHolders[opts.parent][j + 1] ||
|
||||
holders[opts.parent][0];
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
if ($(this).hasClass('disabled')) { return false; }
|
||||
if (toolButtonClick(showSel)) {
|
||||
options.fn();
|
||||
}
|
||||
const icon = (options.icon) ? $.getSvgIcon(options.icon, true) : $(options.sel).children().eq(0).clone();
|
||||
icon[0].setAttribute('width', shower.width());
|
||||
icon[0].setAttribute('height', shower.height());
|
||||
shower.children(':not(.flyout_arrow_horiz)').remove();
|
||||
shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
|
||||
return true;
|
||||
};
|
||||
|
||||
$(this).mouseup(flyoutAction);
|
||||
|
||||
if (opts.key) {
|
||||
$(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (def) {
|
||||
shower.attr('data-curopt', btnOpts[def].sel);
|
||||
} else if (!shower.attr('data-curopt')) {
|
||||
// Set first as default
|
||||
shower.attr('data-curopt', btnOpts[0].sel);
|
||||
}
|
||||
|
||||
let timer;
|
||||
|
||||
// Clicking the "show" icon should set the current mode
|
||||
shower.mousedown(function (evt) {
|
||||
if (shower.hasClass('disabled')) {
|
||||
return false;
|
||||
}
|
||||
const holder = $(holdSel);
|
||||
const pos = $(showSel).position();
|
||||
const l = pos.left + 34;
|
||||
const w = holder.width() * -1;
|
||||
const time = holder.data('shown_popop') ? 200 : 0;
|
||||
timer = setTimeout(function () {
|
||||
// Show corresponding menu
|
||||
if (!shower.data('isLibrary')) {
|
||||
holder.css('left', w).show().animate({
|
||||
left: l
|
||||
}, 150);
|
||||
} else {
|
||||
holder.css('left', l).show();
|
||||
}
|
||||
holder.data('shown_popop', true);
|
||||
}, time);
|
||||
evt.preventDefault();
|
||||
return true;
|
||||
}).mouseup(function (evt) {
|
||||
clearTimeout(timer);
|
||||
const opt = $(this).attr('data-curopt');
|
||||
// Is library and popped up, so do nothing
|
||||
if (shower.data('isLibrary') && $(showSel.replace('_show', '')).is(':visible')) {
|
||||
toolButtonClick(showSel, true);
|
||||
return;
|
||||
}
|
||||
if (toolButtonClick(showSel) && flyoutFuncs[opt]) {
|
||||
flyoutFuncs[opt]();
|
||||
}
|
||||
});
|
||||
// $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); });
|
||||
});
|
||||
setFlyoutTitles();
|
||||
setFlyoutPositions();
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} id
|
||||
* @param {external:jQuery} child
|
||||
* @returns {external:jQuery}
|
||||
*/
|
||||
const makeFlyoutHolder = function (id, child) {
|
||||
const div = $('<div>', {
|
||||
class: 'tools_flyout',
|
||||
id
|
||||
}).appendTo('#svg_editor').append(child);
|
||||
|
||||
return div;
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {string} elemSel
|
||||
* @param {string} listSel
|
||||
|
|
@ -2890,11 +2661,10 @@ editor.init = () => {
|
|||
}
|
||||
|
||||
const {svgicons} = ext;
|
||||
if (ext.buttons) {
|
||||
if (ext.buttons && !ext.newUI) {
|
||||
const fallbackObj = {},
|
||||
altsObj = {},
|
||||
placementObj = {},
|
||||
holders = {};
|
||||
placementObj = {};
|
||||
|
||||
/**
|
||||
* @typedef {GenericArray} module:SVGEditor.KeyArray
|
||||
|
|
@ -2917,11 +2687,7 @@ editor.init = () => {
|
|||
* @property {string} [list] Points to the "id" of a `context_tools` item of type "button-select" into which the button will be added as a panel list item
|
||||
* @property {Integer} [position] The numeric index for placement; defaults to last position (as of the time of extension addition) if not present. For use with {@link http://api.jquery.com/eq/}.
|
||||
* @property {boolean} [isDefault] Whether or not the button is the default. Used with `list`.
|
||||
* @property {PlainObject} [includeWith] Object with flyout menu data
|
||||
* @property {boolean} [includeWith.isDefault] Indicates whether button is default in flyout list or not.
|
||||
* @property {string} includeWith.button jQuery selector of the existing button to be joined. Example: '#tool_line'. Required if `includeWith` is used.
|
||||
* @property {"last"|Integer} [includeWith.position] Position of icon in flyout list; will be added to end if not indicated. Integer is for use with {@link http://api.jquery.com/eq/}.
|
||||
* @property {module:SVGEditor.Key} [key] The key to bind to the button
|
||||
* @property {module:SVGEditor.Key} [key] The key to bind to the button
|
||||
*/
|
||||
// Add buttons given by extension
|
||||
$.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) {
|
||||
|
|
@ -2972,7 +2738,7 @@ editor.init = () => {
|
|||
parent = '#main_menu ul';
|
||||
break;
|
||||
}
|
||||
// let flyoutHolder, showBtn, refData, refBtn;
|
||||
|
||||
const button = $((btn.list || btn.type === 'app_menu') ? '<li/>' : '<div/>')
|
||||
.attr('id', id)
|
||||
.attr('title', btn.title)
|
||||
|
|
@ -2988,58 +2754,7 @@ editor.init = () => {
|
|||
button.appendTo(parent);
|
||||
}
|
||||
|
||||
if (btn.type === 'mode_flyout') {
|
||||
/*
|
||||
// Add to flyout menu / make flyout menu
|
||||
// const opts = btn.includeWith;
|
||||
// // opts.button, default, position
|
||||
refBtn = $(button);
|
||||
|
||||
flyoutHolder = refBtn.parent();
|
||||
// Create a flyout menu if there isn't one already
|
||||
let tlsId;
|
||||
if (!refBtn.parent().hasClass('tools_flyout')) {
|
||||
// Create flyout placeholder
|
||||
tlsId = refBtn[0].id.replace('tool_', 'tools_');
|
||||
showBtn = refBtn.clone()
|
||||
.attr('id', tlsId + '_show')
|
||||
.append($('<div>', {class: 'flyout_arrow_horiz'}));
|
||||
|
||||
refBtn.before(showBtn);
|
||||
|
||||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(tlsId, refBtn);
|
||||
flyoutHolder.data('isLibrary', true);
|
||||
showBtn.data('isLibrary', true);
|
||||
}
|
||||
// refData = Actions.getButtonData(opts.button);
|
||||
|
||||
placementObj['#' + tlsId + '_show'] = btn.id;
|
||||
// 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
|
||||
holders['#' + flyoutHolder[0].id] = [{
|
||||
sel: '#' + id,
|
||||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
// key: btn.key,
|
||||
isDefault: true
|
||||
}]; // , refData
|
||||
//
|
||||
// // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
//
|
||||
// const pos = ('position' in opts)?opts.position:'last';
|
||||
// const len = flyoutHolder.children().length;
|
||||
//
|
||||
// // Add at given position or end
|
||||
// if (!isNaN(pos) && pos >= 0 && pos < len) {
|
||||
// flyoutHolder.children().eq(pos).before(button);
|
||||
// } else {
|
||||
// flyoutHolder.append(button);
|
||||
// curH.reverse();
|
||||
// }
|
||||
*/
|
||||
} else if (btn.type === 'app_menu') {
|
||||
if (btn.type === 'app_menu') {
|
||||
button.append('<div>').append(btn.title);
|
||||
}
|
||||
} else if (btn.list) {
|
||||
|
|
@ -3051,53 +2766,6 @@ editor.init = () => {
|
|||
const svgicon = btn.svgicon || btn.id;
|
||||
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;
|
||||
if (!refBtn.parent().hasClass('tools_flyout')) {
|
||||
// Create flyout placeholder
|
||||
tlsId = refBtn[0].id.replace('tool_', 'tools_');
|
||||
showBtn = refBtn.clone()
|
||||
.attr('id', tlsId + '_show')
|
||||
.append($('<div>', {class: 'flyout_arrow_horiz'}));
|
||||
|
||||
refBtn.before(showBtn);
|
||||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(tlsId, refBtn);
|
||||
}
|
||||
refData = Actions.getButtonData(opts.button);
|
||||
|
||||
if (opts.isDefault) {
|
||||
placementObj['#' + tlsId + '_show'] = btn.id;
|
||||
}
|
||||
// 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
|
||||
const curH = holders['#' + flyoutHolder[0].id] = [{
|
||||
sel: '#' + id,
|
||||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
key: btn.key,
|
||||
isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
|
||||
}, refData];
|
||||
|
||||
const pos = ('position' in opts) ? opts.position : 'last';
|
||||
const len = flyoutHolder.children().length;
|
||||
|
||||
// Add at given position or end
|
||||
if (!isNaN(pos) && pos >= 0 && pos < len) {
|
||||
flyoutHolder.children().eq(pos).before(button);
|
||||
} else {
|
||||
flyoutHolder.append(button);
|
||||
curH.reverse();
|
||||
}
|
||||
*/
|
||||
}
|
||||
if (!svgicons) {
|
||||
button.append(icon);
|
||||
|
|
@ -3132,8 +2800,6 @@ editor.init = () => {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupFlyouts(holders);
|
||||
});
|
||||
$.each(btnSelects, function () {
|
||||
addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
|
||||
|
|
@ -3160,6 +2826,20 @@ editor.init = () => {
|
|||
});
|
||||
}
|
||||
}
|
||||
if (ext.buttons && ext.newUI) {
|
||||
ext.buttons.forEach((btn) => {
|
||||
// Set button up according to its type
|
||||
switch (btn.type) {
|
||||
case 'mode_flyout':
|
||||
$id(btn.id).addEventListener('click', () => {
|
||||
if (updateLeftPanel(btn.id)) {
|
||||
btn.events.click();
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
return runCallback();
|
||||
};
|
||||
|
||||
|
|
@ -3560,9 +3240,9 @@ editor.init = () => {
|
|||
onButton = false;
|
||||
}).mousedown(function (evt) {
|
||||
// $('.contextMenu').hide();
|
||||
const islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length;
|
||||
const islib = $(evt.target).closest('.contextMenu').length;
|
||||
if (!islib) {
|
||||
$('.tools_flyout:visible,.contextMenu').fadeOut(250);
|
||||
$('.contextMenu').fadeOut(250);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -3731,22 +3411,6 @@ editor.init = () => {
|
|||
svgCanvas.alignSelectedElements(letter, 'page');
|
||||
}, {multiclick: true});
|
||||
|
||||
/*
|
||||
|
||||
When a flyout icon is selected
|
||||
(if flyout) {
|
||||
- Change the icon
|
||||
- Make pressing the button run its stuff
|
||||
}
|
||||
- Run its stuff
|
||||
|
||||
When its shortcut key is pressed
|
||||
- If not current in list, do as above
|
||||
, else:
|
||||
- Just run its stuff
|
||||
|
||||
*/
|
||||
|
||||
// Unfocus text input when workarea is mousedowned.
|
||||
(function () {
|
||||
let inp;
|
||||
|
|
@ -4617,7 +4281,6 @@ editor.init = () => {
|
|||
workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2;
|
||||
winWh[type] = curval;
|
||||
});
|
||||
setFlyoutPositions();
|
||||
});
|
||||
|
||||
workarea.scroll(function () {
|
||||
|
|
@ -5205,7 +4868,6 @@ editor.init = () => {
|
|||
* @property {string} [parent] Selector
|
||||
* @property {boolean} [hidekey] Whether to show key value in title
|
||||
* @property {string} [icon] The button ID
|
||||
* @property {boolean} isDefault For flyout holders
|
||||
*/
|
||||
/**
|
||||
*
|
||||
|
|
@ -5362,7 +5024,6 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
setAll () {
|
||||
const flyouts = {};
|
||||
const keyHandler = {}; // will contain the action for each pressed key
|
||||
|
||||
toolButtons.forEach((opts) => {
|
||||
|
|
@ -5379,23 +5040,6 @@ editor.init = () => {
|
|||
}
|
||||
btn.addEventListener(opts.evt, opts.fn);
|
||||
}
|
||||
|
||||
// Add to parent flyout menu, if able to be displayed
|
||||
if (opts.parent && $(opts.parent + '_show').length) {
|
||||
let fH = $(opts.parent);
|
||||
if (!fH.length) {
|
||||
fH = makeFlyoutHolder(opts.parent.substr(1));
|
||||
}
|
||||
if (opts.prepend) {
|
||||
btn.style.margin = 'initial';
|
||||
}
|
||||
fH[opts.prepend ? 'prepend' : 'append'](btn);
|
||||
|
||||
if (!Array.isArray(flyouts[opts.parent])) {
|
||||
flyouts[opts.parent] = [];
|
||||
}
|
||||
flyouts[opts.parent].push(opts);
|
||||
}
|
||||
}
|
||||
|
||||
// Bind function to shortcut key
|
||||
|
|
@ -5438,9 +5082,6 @@ editor.init = () => {
|
|||
}
|
||||
});
|
||||
|
||||
// Setup flyouts
|
||||
setupFlyouts(flyouts);
|
||||
|
||||
// Misc additional actions
|
||||
|
||||
// Make 'return' keypress trigger the change event
|
||||
|
|
@ -5928,9 +5569,6 @@ editor.init = () => {
|
|||
|
||||
svgCanvas.runExtensions('langChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_langChanged} */ lang);
|
||||
|
||||
// Update flyout tooltips
|
||||
setFlyoutTitles();
|
||||
|
||||
// Copy title for certain tool elements
|
||||
const elems = {
|
||||
'#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',
|
||||
|
|
|
|||
Loading…
Reference in New Issue