', {
class: 'tools_flyout',
id
}).appendTo('#svg_editor').append(child);
return div;
};
/**
* @param {string} elemSel
* @param {string} listSel
* @param {external:jQuery.Function} callback
* @param {PlainObject} opts
* @param {boolean} opts.dropUp
* @param {boolean} opts.seticon
* @param {boolean} opts.multiclick
* @todo Combine this with `addDropDown` or find other way to optimize.
* @returns {undefined}
*/
const addAltDropDown = function (elemSel, listSel, callback, opts) {
const button = $(elemSel);
const {dropUp} = opts;
const list = $(listSel);
if (dropUp) {
$(elemSel).addClass('dropup');
}
list.find('li').bind('mouseup', function (...args) {
if (opts.seticon) {
setIcon('#cur_' + button[0].id, $(this).children());
$(this).addClass('current').siblings().removeClass('current');
}
callback.apply(this, ...args);
});
let onButton = false;
$(window).mouseup(function (evt) {
if (!onButton) {
button.removeClass('down');
list.hide();
list.css({top: 0, left: 0});
}
onButton = false;
});
// const height = list.height(); // Currently unused
button.bind('mousedown', function () {
const off = button.offset();
if (dropUp) {
off.top -= list.height();
off.left += 8;
} else {
off.top += button.height();
}
list.offset(off);
if (!button.hasClass('down')) {
list.show();
onButton = true;
} else {
// CSS position must be reset for Webkit
list.hide();
list.css({top: 0, left: 0});
}
button.toggleClass('down');
}).hover(function () {
onButton = true;
}).mouseout(function () {
onButton = false;
});
if (opts.multiclick) {
list.mousedown(function () {
onButton = true;
});
}
};
const extsPreLang = [];
/**
* @param {external:Window} win
* @param {module:svgcanvas.SvgCanvas#event:extension_added} ext
* @listens module:svgcanvas.SvgCanvas#event:extension_added
* @returns {Promise|undefined} Resolves to `undefined`
*/
const extAdded = async function (win, ext) {
if (!ext) {
return undefined;
}
let cbCalled = false;
let resizeDone = false;
if (ext.langReady) {
if (editor.langChanged) { // We check for this since the "lang" pref could have been set by storage
const lang = $.pref('lang');
await ext.langReady({
lang,
uiStrings,
importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})
});
loadedExtensionNames.push(ext.name);
} else {
extsPreLang.push(ext);
}
}
/**
* Clear resize timer if present and if not previously performed,
* perform an icon resize.
* @returns {undefined}
*/
function prepResize () {
if (resizeTimer) {
clearTimeout(resizeTimer);
resizeTimer = null;
}
if (!resizeDone) {
resizeTimer = setTimeout(function () {
resizeDone = true;
setIconSize($.pref('iconsize'));
}, 50);
}
}
/**
*
* @returns {undefined}
*/
const runCallback = function () {
if (ext.callback && !cbCalled) {
cbCalled = true;
ext.callback.call(editor);
}
};
const btnSelects = [];
/**
* @typedef {PlainObject} module:SVGEditor.ContextTool
* @property {string} panel The ID of the existing panel to which the tool is being added. Required.
* @property {string} id The ID of the actual tool element. Required.
* @property {PlainObject.|PlainObject.<"change", external:jQuery.Function>} events DOM event names keyed to associated functions. Example: `{change () { alert('Option was changed') } }`. "change" event is one specifically handled for the "button-select" type. Required.
* @property {string} title The tooltip text that will appear when the user hovers over the tool. Required.
* @property {"tool_button"|"select"|"button-select"|"input"|string} type The type of tool being added. Expected.
* @property {PlainObject.} [options] List of options and their labels for select tools. Example: `{1: 'One', 2: 'Two', all: 'All' }`. Required by "select" tools.
* @property {string} [container_id] The ID to be given to the tool's container element.
* @property {string} [defval] Default value
* @property {string|Integer} [colnum] Added as part of the option list class.
* @property {string} [label] Label associated with the tool, visible in the UI
* @property {Integer} [size] Value of the "size" attribute of the tool input
* @property {module:jQuerySpinButton.SpinButtonConfig} [spindata] When added to a tool of type "input", this tool becomes a "spinner" which allows the number to be in/decreased.
*/
if (ext.context_tools) {
$.each(ext.context_tools, function (i, tool) {
// Add select tool
const contId = tool.container_id ? (' id="' + tool.container_id + '"') : '';
let panel = $('#' + tool.panel);
// create the panel if it doesn't exist
if (!panel.length) {
panel = $('
', {id: tool.panel}).appendTo('#tools_top');
}
let html;
// TODO: Allow support for other types, or adding to existing tool
switch (tool.type) {
case 'tool_button': {
html = '';
const div = $(html).appendTo(panel);
if (tool.events) {
$.each(tool.events, function (evt, func) {
$(div).bind(evt, func);
});
}
break;
} case 'select': {
html = '' +
'';
// Creates the tool, hides & adds it, returns the select element
const sel = $(html).appendTo(panel).find('select');
$.each(tool.events, function (evt, func) {
$(sel).bind(evt, func);
});
break;
} case 'button-select': {
html = '' +
'' +
tool.label + ':' +
'';
// Creates the tool, hides & adds it, returns the select element
// Add to given tool.panel
const inp = $(html).appendTo(panel).find('input');
if (tool.spindata) {
inp.SpinButton(tool.spindata);
}
if (tool.events) {
$.each(tool.events, function (evt, func) {
inp.bind(evt, func);
});
}
break;
} default:
break;
}
});
}
const {svgicons} = ext;
if (ext.buttons) {
const fallbackObj = {},
placementObj = {},
holders = {};
/**
* @typedef {GenericArray} module:SVGEditor.KeyArray
* @property {string} 0 The key to bind (on `keydown`)
* @property {boolean} 1 Whether to `preventDefault` on the `keydown` event
* @property {boolean} 2 Not apparently in use (NoDisableInInput)
*/
/**
* @typedef {string|module:SVGEditor.KeyArray} module:SVGEditor.Key
*/
/**
* @typedef {PlainObject} module:SVGEditor.Button
* @property {string} id A unique identifier for this button. If SVG icons are used, this must match the ID used in the icon file. Required.
* @property {"mode_flyout"|"mode"|"context"|"app_menu"} type Type of button. Required.
* @property {string} title The tooltip text that will appear when the user hovers over the icon. Required.
* @property {PlainObject.|PlainObject.<"click", external:jQuery.Function>} events DOM event names with associated functions. Example: `{click () { alert('Button was clicked') } }`. Click is used with `includeWith` and `type` of "mode_flyout" (and "mode"); any events may be added if `list` is not present. Expected.
* @property {string} panel The ID of the context panel to be included, if type is "context". Required only if type is "context".
* @property {string} icon The file path to the raster version of the icon image source. Required only if no `svgicons` is supplied from [ExtensionInitResponse]{@link module:svgcanvas.ExtensionInitResponse}.
* @property {string} [svgicon] If absent, will utilize the button "id"; used to set "placement" on the `svgIcons` call
* @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
*/
// Add buttons given by extension
$.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) {
let {id} = btn;
let num = i;
// Give button a unique ID
while ($('#' + id).length) {
id = btn.id + '_' + (++num);
}
let icon;
if (!svgicons) {
icon = $('
');
} else {
fallbackObj[id] = btn.icon;
const svgicon = btn.svgicon || btn.id;
if (btn.type === 'app_menu') {
placementObj['#' + id + ' > div'] = svgicon;
} else {
placementObj['#' + id] = svgicon;
}
}
let cls, parent;
// Set button up according to its type
switch (btn.type) {
case 'mode_flyout':
case 'mode':
cls = 'tool_button';
parent = '#tools_left';
break;
case 'context':
cls = 'tool_button';
parent = '#' + btn.panel;
// create the panel if it doesn't exist
if (!$(parent).length) {
$('
' +
'
';
const list = $('', {id: btn.panel}).appendTo('#tools_top');
}
break;
case 'app_menu':
cls = '';
parent = '#main_menu ul';
break;
}
let flyoutHolder, showBtn, refData, refBtn;
const button = $((btn.list || btn.type === 'app_menu') ? '' : '')
.attr('id', id)
.attr('title', btn.title)
.addClass(cls);
if (!btn.includeWith && !btn.list) {
if ('position' in btn) {
if ($(parent).children().eq(btn.position).length) {
$(parent).children().eq(btn.position).before(button);
} else {
$(parent).children().last().before(button);
}
} else {
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($('
', {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
/* curH = */ 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') {
button.append('
').append(btn.title);
}
} else if (btn.list) {
// Add button to list
button.addClass('push_button');
$('#' + btn.list + '_opts').append(button);
if (btn.isDefault) {
$('#cur_' + btn.list).append(button.children().clone());
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($('
', {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];
// {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();
}
}
if (!svgicons) {
button.append(icon);
}
if (!btn.list) {
// Add given events to button
$.each(btn.events, function (name, func) {
if (name === 'click' && btn.type === 'mode') {
// `touch.js` changes `touchstart` to `mousedown`,
// so we must map extension click events as well
if (isTouch() && name === 'click') {
name = 'mousedown';
}
if (btn.includeWith) {
button.bind(name, func);
} else {
button.bind(name, function () {
if (toolButtonClick(button)) {
func();
}
});
}
if (btn.key) {
$(document).bind('keydown', btn.key, func);
if (btn.title) {
button.attr('title', btn.title + ' [' + btn.key + ']');
}
}
} else {
button.bind(name, func);
}
});
}
setupFlyouts(holders);
});
$.each(btnSelects, function () {
addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
});
if (svgicons) {
return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new
$.svgIcons(svgicons, {
w: 24, h: 24,
id_match: false,
no_img: (!isWebkit()),
fallback: fallbackObj,
placement: placementObj,
callback (icons) {
// Non-ideal hack to make the icon match the current size
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
if ($.pref('iconsize') !== 'm') {
prepResize();
}
runCallback();
resolve();
}
});
});
}
}
return runCallback();
};
/**
* @param {string} color
* @param {Float} opac
* @param {string} type
* @returns {module:jGraduate~Paint}
*/
const getPaint = function (color, opac, type) {
// update the editor's fill paint
const opts = {alpha: opac};
if (color.startsWith('url(#')) {
let refElem = svgCanvas.getRefElem(color);
if (refElem) {
refElem = refElem.cloneNode(true);
} else {
refElem = $('#' + type + '_color defs *')[0];
}
opts[refElem.tagName] = refElem;
} else if (color.startsWith('#')) {
opts.solidColor = color.substr(1);
} else {
opts.solidColor = 'none';
}
return new $.jGraduate.Paint(opts);
};
// $('#text').focus(function () { textBeingEntered = true; });
// $('#text').blur(function () { textBeingEntered = false; });
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind('selected', selectedChanged);
svgCanvas.bind('transition', elementTransition);
svgCanvas.bind('changed', elementChanged);
svgCanvas.bind('saved', saveHandler);
svgCanvas.bind('exported', exportHandler);
svgCanvas.bind('exportedPDF', function (win, data) {
if (!data.output) { // Ignore Chrome
return;
}
const {exportWindowName} = data;
if (exportWindowName) {
exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one
}
if (!exportWindow || exportWindow.closed) {
/* await */ $.alert(uiStrings.notification.popupWindowBlocked);
return;
}
exportWindow.location.href = data.output;
});
svgCanvas.bind('zoomed', zoomChanged);
svgCanvas.bind('zoomDone', zoomDone);
svgCanvas.bind(
'updateCanvas',
/**
* @param {external:Window} win
* @param {PlainObject} centerInfo
* @param {false} centerInfo.center
* @param {module:math.XYObject} centerInfo.newCtr
* @listens module:svgcanvas.SvgCanvas#event:updateCanvas
* @returns {undefined}
*/
function (win, {center, newCtr}) {
updateCanvas(center, newCtr);
}
);
svgCanvas.bind('contextset', contextChanged);
svgCanvas.bind('extension_added', extAdded);
svgCanvas.textActions.setInputElem($('#text')[0]);
let str = '';
$.each(palette, function (i, item) {
str += '';
});
$('#palette').append(str);
// Set up editor background functionality
// TODO add checkerboard as "pattern"
const colorBlocks = ['#FFF', '#888', '#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
str = '';
$.each(colorBlocks, function () {
str += '';
});
$('#bg_blocks').append(str);
const blocks = $('#bg_blocks div');
const curBg = 'cur_background';
blocks.each(function () {
const blk = $(this);
blk.click(function () {
blocks.removeClass(curBg);
$(this).addClass(curBg);
});
});
setBackground($.pref('bkgd_color'), $.pref('bkgd_url'));
$('#image_save_opts input').val([$.pref('img_save')]);
/**
* @implements {module:jQuerySpinButton.ValueCallback}
*/
const changeRectRadius = function (ctl) {
svgCanvas.setRectRadius(ctl.value);
};
/**
* @implements {module:jQuerySpinButton.ValueCallback}
*/
const changeFontSize = function (ctl) {
svgCanvas.setFontSize(ctl.value);
};
/**
* @implements {module:jQuerySpinButton.ValueCallback}
*/
const changeStrokeWidth = function (ctl) {
let val = ctl.value;
if (val === 0 && selectedElement && ['line', 'polyline'].includes(selectedElement.nodeName)) {
val = ctl.value = 1;
}
svgCanvas.setStrokeWidth(val);
};
/**
* @implements {module:jQuerySpinButton.ValueCallback}
*/
const changeRotationAngle = function (ctl) {
svgCanvas.setRotationAngle(ctl.value);
$('#tool_reorient').toggleClass('disabled', parseInt(ctl.value) === 0);
};
/**
* @param {external:jQuery.fn.SpinButton} ctl Spin Button
* @param {string} [val=ctl.value]
* @returns {undefined}
*/
const changeOpacity = function (ctl, val) {
if (Utils.isNullish(val)) { val = ctl.value; }
$('#group_opacity').val(val);
if (!ctl || !ctl.handle) {
$('#opac_slider').slider('option', 'value', val);
}
svgCanvas.setOpacity(val / 100);
};
/**
* @param {external:jQuery.fn.SpinButton} ctl Spin Button
* @param {string} [val=ctl.value]
* @param {boolean} noUndo
* @returns {undefined}
*/
const changeBlur = function (ctl, val, noUndo) {
if (Utils.isNullish(val)) { val = ctl.value; }
$('#blur').val(val);
let complete = false;
if (!ctl || !ctl.handle) {
$('#blur_slider').slider('option', 'value', val);
complete = true;
}
if (noUndo) {
svgCanvas.setBlurNoUndo(val);
} else {
svgCanvas.setBlur(val, complete);
}
};
$('#stroke_style').change(function () {
svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
operaRepaint();
});
$('#stroke_linejoin').change(function () {
svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());
operaRepaint();
});
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
$('select').change(function () { $(this).blur(); });
// fired when user wants to move elements to another layer
let promptMoveLayerOnce = false;
$('#selLayerNames').change(async function () {
const destLayer = this.options[this.selectedIndex].value;
const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);
/**
* @param {boolean} ok
* @returns {undefined}
*/
const moveToLayer = function (ok) {
if (!ok) { return; }
promptMoveLayerOnce = true;
svgCanvas.moveSelectedToLayer(destLayer);
svgCanvas.clearSelection();
populateLayers();
};
if (destLayer) {
if (promptMoveLayerOnce) {
moveToLayer(true);
} else {
const ok = await $.confirm(confirmStr);
if (!ok) {
return;
}
moveToLayer(true);
}
}
});
$('#font_family').change(function () {
svgCanvas.setFontFamily(this.value);
});
$('#seg_type').change(function () {
svgCanvas.setSegType($(this).val());
});
$('#text').bind('keyup input', function () {
svgCanvas.setTextContent(this.value);
});
$('#image_url').change(function () {
setImageURL(this.value);
});
$('#link_url').change(function () {
if (this.value.length) {
svgCanvas.setLinkURL(this.value);
} else {
svgCanvas.removeHyperlink();
}
});
$('#g_title').change(function () {
svgCanvas.setGroupTitle(this.value);
});
$('.attr_changer').change(function () {
const attr = this.getAttribute('data-attr');
let val = this.value;
const valid = isValidUnit(attr, val, selectedElement);
if (!valid) {
this.value = selectedElement.getAttribute(attr);
/* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
return false;
}
if (attr !== 'id' && attr !== 'class') {
if (isNaN(val)) {
val = svgCanvas.convertToNum(attr, val);
} else if (curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
const unitData = getTypeMap();
if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
val *= unitData[curConfig.baseUnit];
}
}
}
// if the user is changing the id, then de-select the element first
// change the ID, then re-select it with the new ID
if (attr === 'id') {
const elem = selectedElement;
svgCanvas.clearSelection();
elem.id = val;
svgCanvas.addToSelection([elem], true);
} else {
svgCanvas.changeSelectedAttribute(attr, val);
}
this.blur();
return true;
});
// Prevent selection of elements when shift-clicking
$('#palette').mouseover(function () {
const inp = $('');
$(this).append(inp);
inp.focus().remove();
});
$('.palette_item').mousedown(function (evt) {
// shift key or right click for stroke
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
let color = $(this).data('rgb');
let paint;
// Webkit-based browsers returned 'initial' here for no stroke
if (color === 'none' || color === 'transparent' || color === 'initial') {
color = 'none';
paint = new $.jGraduate.Paint();
} else {
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
}
paintBox[picker].setPaint(paint);
svgCanvas.setColor(picker, color);
if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
svgCanvas.setPaintOpacity(picker, 1.0);
}
updateToolButtonState();
}).bind('contextmenu', function (e) { e.preventDefault(); });
$('#toggle_stroke_tools').on('click', function () {
$('#tools_bottom').toggleClass('expanded');
});
(function () {
const wArea = workarea[0];
let lastX = null, lastY = null,
panning = false, keypan = false;
$('#svgcanvas').bind('mousemove mouseup', function (evt) {
if (panning === false) { return true; }
wArea.scrollLeft -= (evt.clientX - lastX);
wArea.scrollTop -= (evt.clientY - lastY);
lastX = evt.clientX;
lastY = evt.clientY;
if (evt.type === 'mouseup') { panning = false; }
return false;
}).mousedown(function (evt) {
if (evt.button === 1 || keypan === true) {
panning = true;
lastX = evt.clientX;
lastY = evt.clientY;
return false;
}
return true;
});
$(window).mouseup(function () {
panning = false;
});
$(document).bind('keydown', 'space', function (evt) {
svgCanvas.spaceKey = keypan = true;
evt.preventDefault();
}).bind('keyup', 'space', function (evt) {
evt.preventDefault();
svgCanvas.spaceKey = keypan = false;
}).bind('keydown', 'shift', function (evt) {
if (svgCanvas.getMode() === 'zoom') {
workarea.css('cursor', zoomOutIcon);
}
}).bind('keyup', 'shift', function (evt) {
if (svgCanvas.getMode() === 'zoom') {
workarea.css('cursor', zoomInIcon);
}
});
/**
* @param {boolean} active
* @returns {undefined}
*/
editor.setPanning = function (active) {
svgCanvas.spaceKey = keypan = active;
};
}());
(function () {
const button = $('#main_icon');
const overlay = $('#main_icon span');
const list = $('#main_menu');
let onButton = false;
let height = 0;
let jsHover = true;
let setClick = false;
/*
// Currently unused
const hideMenu = function () {
list.fadeOut(200);
};
*/
$(window).mouseup(function (evt) {
if (!onButton) {
button.removeClass('buttondown');
// do not hide if it was the file input as that input needs to be visible
// for its change event to fire
if (evt.target.tagName !== 'INPUT') {
list.fadeOut(200);
} else if (!setClick) {
setClick = true;
$(evt.target).click(function () {
list.css('margin-left', '-9999px').show();
});
}
}
onButton = false;
}).mousedown(function (evt) {
// $('.contextMenu').hide();
const islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length;
if (!islib) {
$('.tools_flyout:visible,.contextMenu').fadeOut(250);
}
});
overlay.bind('mousedown', function () {
if (!button.hasClass('buttondown')) {
// Margin must be reset in case it was changed before;
list.css('margin-left', 0).show();
if (!height) {
height = list.height();
}
// Using custom animation as slideDown has annoying 'bounce effect'
list.css('height', 0).animate({
height
}, 200);
onButton = true;
} else {
list.fadeOut(200);
}
button.toggleClass('buttondown buttonup');
}).hover(function () {
onButton = true;
}).mouseout(function () {
onButton = false;
});
const listItems = $('#main_menu li');
// Check if JS method of hovering needs to be used (Webkit bug)
listItems.mouseover(function () {
jsHover = ($(this).css('background-color') === 'rgba(0, 0, 0, 0)');
listItems.unbind('mouseover');
if (jsHover) {
listItems.mouseover(function () {
this.style.backgroundColor = '#FFC';
}).mouseout(function () {
this.style.backgroundColor = 'transparent';
return true;
});
}
});
}());
// Made public for UI customization.
// TODO: Group UI functions into a public editor.ui interface.
/**
* See {@link http://api.jquery.com/bind/#bind-eventType-eventData-handler}
* @callback module:SVGEditor.DropDownCallback
* @param {external:jQuery.Event} ev See {@link http://api.jquery.com/Types/#Event}
* @listens external:jQuery.Event
* @returns {undefined|boolean} Calls `preventDefault()` and `stopPropagation()`
*/
/**
* @param {Element|string} elem DOM Element or selector
* @param {module:SVGEditor.DropDownCallback} callback Mouseup callback
* @param {boolean} dropUp
* @returns {undefined}
*/
editor.addDropDown = function (elem, callback, dropUp) {
if (!$(elem).length) { return; } // Quit if called on non-existent element
const button = $(elem).find('button');
const list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');
if (dropUp) {
$(elem).addClass('dropup');
} else {
// Move list to place where it can overflow container
$('#option_lists').append(list);
}
list.find('li').bind('mouseup', callback);
let onButton = false;
$(window).mouseup(function (evt) {
if (!onButton) {
button.removeClass('down');
list.hide();
}
onButton = false;
});
button.bind('mousedown', function () {
if (!button.hasClass('down')) {
if (!dropUp) {
const pos = $(elem).position();
list.css({
top: pos.top + 24,
left: pos.left - 10
});
}
list.show();
onButton = true;
} else {
list.hide();
}
button.toggleClass('down');
}).hover(function () {
onButton = true;
}).mouseout(function () {
onButton = false;
});
};
editor.addDropDown('#font_family_dropdown', function () {
$('#font_family').val($(this).text()).change();
});
editor.addDropDown('#opacity_dropdown', function () {
if ($(this).find('div').length) { return; }
const perc = parseInt($(this).text().split('%')[0]);
changeOpacity(false, perc);
}, true);
// For slider usage, see: http://jqueryui.com/demos/slider/
$('#opac_slider').slider({
start () {
$('#opacity_dropdown li:not(.special)').hide();
},
stop () {
$('#opacity_dropdown li').show();
$(window).mouseup();
},
slide (evt, ui) {
changeOpacity(ui);
}
});
editor.addDropDown('#blur_dropdown', $.noop);
let slideStart = false;
$('#blur_slider').slider({
max: 10,
step: 0.1,
stop (evt, ui) {
slideStart = false;
changeBlur(ui);
$('#blur_dropdown li').show();
$(window).mouseup();
},
start () {
slideStart = true;
},
slide (evt, ui) {
changeBlur(ui, null, slideStart);
}
});
editor.addDropDown('#zoom_dropdown', function () {
const item = $(this);
const val = item.data('val');
if (val) {
zoomChanged(window, val);
} else {
changeZoom({value: parseFloat(item.text())});
}
}, true);
addAltDropDown('#stroke_linecap', '#linecap_opts', function () {
setStrokeOpt(this, true);
}, {dropUp: true});
addAltDropDown('#stroke_linejoin', '#linejoin_opts', function () {
setStrokeOpt(this, true);
}, {dropUp: true});
addAltDropDown('#tool_position', '#position_opts', function () {
const letter = this.id.replace('tool_pos', '').charAt(0);
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;
/**
*
* @returns {undefined}
*/
const unfocus = function () {
$(inp).blur();
};
$('#svg_editor').find('button, select, input:not(#text)').focus(function () {
inp = this; // eslint-disable-line consistent-this
uiContext = 'toolbars';
workarea.mousedown(unfocus);
}).blur(function () {
uiContext = 'canvas';
workarea.unbind('mousedown', unfocus);
// Go back to selecting text if in textedit mode
if (svgCanvas.getMode() === 'textedit') {
$('#text').focus();
}
});
}());
/**
*
* @returns {undefined}
*/
const clickFHPath = function () {
if (toolButtonClick('#tool_fhpath')) {
svgCanvas.setMode('fhpath');
}
};
/**
*
* @returns {undefined}
*/
const clickLine = function () {
if (toolButtonClick('#tool_line')) {
svgCanvas.setMode('line');
}
};
/**
*
* @returns {undefined}
*/
const clickSquare = function () {
if (toolButtonClick('#tool_square')) {
svgCanvas.setMode('square');
}
};
/**
*
* @returns {undefined}
*/
const clickRect = function () {
if (toolButtonClick('#tool_rect')) {
svgCanvas.setMode('rect');
}
};
/**
*
* @returns {undefined}
*/
const clickFHRect = function () {
if (toolButtonClick('#tool_fhrect')) {
svgCanvas.setMode('fhrect');
}
};
/**
*
* @returns {undefined}
*/
const clickCircle = function () {
if (toolButtonClick('#tool_circle')) {
svgCanvas.setMode('circle');
}
};
/**
*
* @returns {undefined}
*/
const clickEllipse = function () {
if (toolButtonClick('#tool_ellipse')) {
svgCanvas.setMode('ellipse');
}
};
/**
*
* @returns {undefined}
*/
const clickFHEllipse = function () {
if (toolButtonClick('#tool_fhellipse')) {
svgCanvas.setMode('fhellipse');
}
};
/**
*
* @returns {undefined}
*/
const clickImage = function () {
if (toolButtonClick('#tool_image')) {
svgCanvas.setMode('image');
}
};
/**
*
* @returns {undefined}
*/
const clickZoom = function () {
if (toolButtonClick('#tool_zoom')) {
svgCanvas.setMode('zoom');
workarea.css('cursor', zoomInIcon);
}
};
/**
* @param {Float} multiplier
* @returns {undefined}
*/
const zoomImage = function (multiplier) {
const res = svgCanvas.getResolution();
multiplier = multiplier ? res.zoom * multiplier : 1;
// setResolution(res.w * multiplier, res.h * multiplier, true);
$('#zoom').val(multiplier * 100);
svgCanvas.setZoom(multiplier);
zoomDone();
updateCanvas(true);
};
/**
*
* @returns {undefined}
*/
const dblclickZoom = function () {
if (toolButtonClick('#tool_zoom')) {
zoomImage();
setSelectMode();
}
};
/**
*
* @returns {undefined}
*/
const clickText = function () {
if (toolButtonClick('#tool_text')) {
svgCanvas.setMode('text');
}
};
/**
*
* @returns {undefined}
*/
const clickPath = function () {
if (toolButtonClick('#tool_path')) {
svgCanvas.setMode('path');
}
};
/**
* Delete is a contextual tool that only appears in the ribbon if
* an element has been selected.
* @returns {undefined}
*/
const deleteSelected = function () {
if (!Utils.isNullish(selectedElement) || multiselected) {
svgCanvas.deleteSelectedElements();
}
};
/**
*
* @returns {undefined}
*/
const cutSelected = function () {
if (!Utils.isNullish(selectedElement) || multiselected) {
svgCanvas.cutSelectedElements();
}
};
/**
*
* @returns {undefined}
*/
const copySelected = function () {
if (!Utils.isNullish(selectedElement) || multiselected) {
svgCanvas.copySelectedElements();
}
};
/**
*
* @returns {undefined}
*/
const pasteInCenter = function () {
const zoom = svgCanvas.getZoom();
const x = (workarea[0].scrollLeft + workarea.width() / 2) / zoom - svgCanvas.contentW;
const y = (workarea[0].scrollTop + workarea.height() / 2) / zoom - svgCanvas.contentH;
svgCanvas.pasteElements('point', x, y);
};
/**
*
* @returns {undefined}
*/
const moveToTopSelected = function () {
if (!Utils.isNullish(selectedElement)) {
svgCanvas.moveToTopSelectedElement();
}
};
/**
*
* @returns {undefined}
*/
const moveToBottomSelected = function () {
if (!Utils.isNullish(selectedElement)) {
svgCanvas.moveToBottomSelectedElement();
}
};
/**
* @param {"Up"|"Down"} dir
* @returns {undefined}
*/
const moveUpDownSelected = function (dir) {
if (!Utils.isNullish(selectedElement)) {
svgCanvas.moveUpDownSelected(dir);
}
};
/**
*
* @returns {undefined}
*/
const convertToPath = function () {
if (!Utils.isNullish(selectedElement)) {
svgCanvas.convertToPath();
}
};
/**
*
* @returns {undefined}
*/
const reorientPath = function () {
if (!Utils.isNullish(selectedElement)) {
path.reorient();
}
};
/**
*
* @returns {Promise} Resolves to `undefined`
*/
const makeHyperlink = async function () {
if (!Utils.isNullish(selectedElement) || multiselected) {
const url = await $.prompt(uiStrings.notification.enterNewLinkURL, 'http://');
if (url) {
svgCanvas.makeHyperlink(url);
}
}
};
/**
* @param {Float} dx
* @param {Float} dy
* @returns {undefined}
*/
const moveSelected = function (dx, dy) {
if (!Utils.isNullish(selectedElement) || multiselected) {
if (curConfig.gridSnapping) {
// Use grid snap value regardless of zoom level
const multi = svgCanvas.getZoom() * curConfig.snappingStep;
dx *= multi;
dy *= multi;
}
svgCanvas.moveSelectedElements(dx, dy);
}
};
/**
*
* @returns {undefined}
*/
const linkControlPoints = function () {
$('#tool_node_link').toggleClass('push_button_pressed tool_button');
const linked = $('#tool_node_link').hasClass('push_button_pressed');
path.linkControlPoints(linked);
};
/**
*
* @returns {undefined}
*/
const clonePathNode = function () {
if (path.getNodePoint()) {
path.clonePathNode();
}
};
/**
*
* @returns {undefined}
*/
const deletePathNode = function () {
if (path.getNodePoint()) {
path.deletePathNode();
}
};
/**
*
* @returns {undefined}
*/
const addSubPath = function () {
const button = $('#tool_add_subpath');
const sp = !button.hasClass('push_button_pressed');
button.toggleClass('push_button_pressed tool_button');
path.addSubPath(sp);
};
/**
*
* @returns {undefined}
*/
const opencloseSubPath = function () {
path.opencloseSubPath();
};
/**
*
* @returns {undefined}
*/
const selectNext = function () {
svgCanvas.cycleElement(1);
};
/**
*
* @returns {undefined}
*/
const selectPrev = function () {
svgCanvas.cycleElement(0);
};
/**
* @param {0|1} cw
* @param {Integer} step
* @returns {undefined}
*/
const rotateSelected = function (cw, step) {
if (Utils.isNullish(selectedElement) || multiselected) { return; }
if (!cw) { step *= -1; }
const angle = parseFloat($('#angle').val()) + step;
svgCanvas.setRotationAngle(angle);
updateContextPanel();
};
/**
* @fires module:svgcanvas.SvgCanvas#event:ext-onNewDocument
* @returns {Promise} Resolves to `undefined`
*/
const clickClear = async function () {
const [x, y] = curConfig.dimensions;
const ok = await $.confirm(uiStrings.notification.QwantToClear);
if (!ok) {
return;
}
setSelectMode();
svgCanvas.clear();
svgCanvas.setResolution(x, y);
updateCanvas(true);
zoomImage();
populateLayers();
updateContextPanel();
prepPaints();
svgCanvas.runExtensions('onNewDocument');
};
/**
*
* @returns {false}
*/
const clickBold = function () {
svgCanvas.setBold(!svgCanvas.getBold());
updateContextPanel();
return false;
};
/**
*
* @returns {false}
*/
const clickItalic = function () {
svgCanvas.setItalic(!svgCanvas.getItalic());
updateContextPanel();
return false;
};
/**
*
* @returns {undefined}
*/
const clickSave = function () {
// In the future, more options can be provided here
const saveOpts = {
images: $.pref('img_save'),
round_digits: 6
};
svgCanvas.save(saveOpts);
};
let loadingURL;
/**
*
* @returns {Promise} Resolves to `undefined`
*/
const clickExport = async function () {
const imgType = await $.select('Select an image type for export: ', [
// See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
// 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
'PNG',
'JPEG', 'BMP', 'WEBP', 'PDF'
], function () {
const sel = $(this);
if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {
if (!$('#image-slider').length) {
$(``).appendTo(sel.parent());
}
} else {
$('#image-slider').parent().remove();
}
}); // todo: replace hard-coded msg with uiStrings.notification.
if (!imgType) {
return;
}
// Open placeholder window (prevents popup)
let exportWindowName;
/**
*
* @returns {undefined}
*/
function openExportWindow () {
const {loadingImage} = uiStrings.notification;
if (curConfig.exportWindowType === 'new') {
editor.exportWindowCt++;
}
exportWindowName = curConfig.canvasName + editor.exportWindowCt;
let popHTML, popURL;
if (loadingURL) {
popURL = loadingURL;
} else {
popHTML = `
${loadingImage}