- Enhancement: Create xdomain file build which works without ES6 Modules
- Enhancement: Build xdomain files dynamically - Fix: Race condition in svgIcons plugin - Build: Update `dist` filesmaster
Brett Zamir
parent
0a2da503f1
commit
5ad6e6ba48
|
|
@ -8,11 +8,14 @@
|
|||
- Fix: Ensure SVG icon of flyout right-arrow is cloned to can be applied to
|
||||
more than one extension
|
||||
- Fix: Ensure line tool shows as selected when "L" key command is used
|
||||
- Fix (svgIcons plugin): Race condition
|
||||
- Fix (canvg): Regression for `text` and `tspan` elements as far as
|
||||
`captureTextNodes` with canvg (inheriting class had set
|
||||
`captureTextNodes` too late)
|
||||
- Fix (canvg): Avoid errors for `tspan` passed to `getGradient`
|
||||
- i18n: picking stroke/fill paint and opacity
|
||||
- Enhancement: Create xdomain file build which works without ES6 Modules
|
||||
- Enhancement: Build xdomain files dynamically
|
||||
- Optimize: Avoid rewriting `points` attribute for free-hand path;
|
||||
incorporates #176 (fixes #175)
|
||||
- Refactoring: Avoid passing on `undefined` var. (#147)
|
||||
|
|
|
|||
139
build-html.js
139
build-html.js
|
|
@ -1,52 +1,101 @@
|
|||
/* eslint-env node */
|
||||
const fs = require('fs');
|
||||
fs.readFile('editor/svg-editor-es.html', 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.log('Error reading `svg-editor-es.html` file', err);
|
||||
return;
|
||||
}
|
||||
data = data
|
||||
.replace(
|
||||
'<!DOCTYPE html>',
|
||||
`<!DOCTYPE html>
|
||||
const fs = require('promise-fs');
|
||||
|
||||
const filesAndReplacements = [
|
||||
{
|
||||
input: 'editor/svg-editor-es.html',
|
||||
output: 'editor/xdomain-svg-editor-es.html',
|
||||
replacements: [
|
||||
[
|
||||
'<script type="module" src="../svgedit-config-es.js"></script>',
|
||||
`<script type="module" src="xdomain-svgedit-config-es.js"></script>`
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'editor/xdomain-svg-editor-es.html',
|
||||
output: 'editor/xdomain-svg-editor.html',
|
||||
replacements: [
|
||||
[
|
||||
'<!DOCTYPE html>',
|
||||
`<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM xdomain-svg-editor-es.html; DO NOT EDIT; use build-html.js to build -->`
|
||||
],
|
||||
[
|
||||
'<script type="module" src="redirect-on-lacking-support.js"></script>',
|
||||
'<script defer="defer" src="../dist/redirect-on-lacking-support.js"></script>'
|
||||
],
|
||||
[
|
||||
'<script type="module" src="xdomain-svgedit-config-es.js"></script>',
|
||||
'<script defer="defer" src="xdomain-svgedit-config-iife.js"></script>'
|
||||
],
|
||||
[
|
||||
'<script src="external/dom-polyfill/dom-polyfill.js"></script>',
|
||||
'<script src="../dist/dom-polyfill.js"></script>'
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'editor/svg-editor-es.html',
|
||||
output: 'editor/svg-editor.html',
|
||||
replacements: [
|
||||
[
|
||||
'<!DOCTYPE html>',
|
||||
`<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM svg-editor-es.html; DO NOT EDIT; use build-html.js to build -->`
|
||||
).replace(
|
||||
'<script type="module" src="redirect-on-lacking-support.js"></script>',
|
||||
'<script defer="defer" src="../dist/redirect-on-lacking-support.js"></script>'
|
||||
).replace(
|
||||
'<script type="module" src="../svgedit-config-es.js"></script>',
|
||||
'<script defer="defer" src="../svgedit-config-iife.js"></script>'
|
||||
).replace(
|
||||
'<script src="external/dom-polyfill/dom-polyfill.js"></script>',
|
||||
'<script src="../dist/dom-polyfill.js"></script>'
|
||||
);
|
||||
fs.writeFile('editor/svg-editor.html', data, (err) => {
|
||||
if (err) {
|
||||
console.log('Error writing file', err);
|
||||
return;
|
||||
}
|
||||
console.log('Completed file rewriting!');
|
||||
});
|
||||
});
|
||||
fs.readFile('editor/extensions/imagelib/index-es.html', 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.log('Error reading `imagelib/index-es.html` file', err);
|
||||
return;
|
||||
}
|
||||
data = data
|
||||
.replace(
|
||||
'<!DOCTYPE html>',
|
||||
`<!DOCTYPE html>
|
||||
],
|
||||
[
|
||||
'<script type="module" src="redirect-on-lacking-support.js"></script>',
|
||||
'<script defer="defer" src="../dist/redirect-on-lacking-support.js"></script>'
|
||||
],
|
||||
[
|
||||
'<script type="module" src="../svgedit-config-es.js"></script>',
|
||||
'<script defer="defer" src="../svgedit-config-iife.js"></script>'
|
||||
],
|
||||
[
|
||||
'<script src="external/dom-polyfill/dom-polyfill.js"></script>',
|
||||
'<script src="../dist/dom-polyfill.js"></script>'
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'editor/extensions/imagelib/index-es.html',
|
||||
output: 'editor/extensions/imagelib/index.html',
|
||||
replacements: [
|
||||
[
|
||||
'<!DOCTYPE html>',
|
||||
`<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM imagelib/index-es.html; DO NOT EDIT; use build-html.js to build -->`
|
||||
).replace(
|
||||
'<script type="module" src="index.js"></script>',
|
||||
'<script defer="defer" src="../../../dist/extensions/imagelib/index.js"></script>'
|
||||
);
|
||||
fs.writeFile('editor/extensions/imagelib/index.html', data, (err) => {
|
||||
if (err) {
|
||||
console.log('Error writing file', err);
|
||||
],
|
||||
[
|
||||
'<script type="module" src="index.js"></script>',
|
||||
'<script defer="defer" src="../../../dist/extensions/imagelib/index.js"></script>'
|
||||
]
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
filesAndReplacements.reduce((p, {input, output, replacements}) => {
|
||||
return p.then(async () => {
|
||||
let data;
|
||||
try {
|
||||
data = await fs.readFile(input, 'utf8');
|
||||
} catch (err) {
|
||||
console.log(`Error reading ${input} file`, err);
|
||||
}
|
||||
|
||||
data = replacements.reduce((s, [find, replacement]) => {
|
||||
return s.replace(find, replacement);
|
||||
}, data);
|
||||
|
||||
try {
|
||||
await fs.writeFile(output, data);
|
||||
} catch (err) {
|
||||
console.log(`Error writing file: ${err}`, err);
|
||||
return;
|
||||
}
|
||||
console.log('Completed file rewriting!');
|
||||
console.log(`Completed file ${input} rewriting!`);
|
||||
});
|
||||
}, Promise.resolve()).then(() => {
|
||||
console.log('Finished!');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -480,75 +480,76 @@ var svgEditorExtension_connector = (function () {
|
|||
// , y = opts.mouse_y / zoom,
|
||||
var mouseTarget = e.target;
|
||||
|
||||
if (svgCanvas.getMode() === 'connector') {
|
||||
var fo = $(mouseTarget).closest('foreignObject');
|
||||
if (fo.length) {
|
||||
mouseTarget = fo[0];
|
||||
}
|
||||
if (svgCanvas.getMode() !== 'connector') {
|
||||
return;
|
||||
}
|
||||
var fo = $(mouseTarget).closest('foreignObject');
|
||||
if (fo.length) {
|
||||
mouseTarget = fo[0];
|
||||
}
|
||||
|
||||
var parents = $(mouseTarget).parents();
|
||||
var parents = $(mouseTarget).parents();
|
||||
|
||||
if (mouseTarget === startElem) {
|
||||
// Start line through click
|
||||
started = true;
|
||||
return {
|
||||
keep: true,
|
||||
element: null,
|
||||
started: started
|
||||
};
|
||||
}
|
||||
if ($.inArray(svgcontent, parents) === -1) {
|
||||
// Not a valid target element, so remove line
|
||||
$(curLine).remove();
|
||||
started = false;
|
||||
return {
|
||||
keep: false,
|
||||
element: null,
|
||||
started: started
|
||||
};
|
||||
}
|
||||
// Valid end element
|
||||
endElem = mouseTarget;
|
||||
|
||||
var startId = startElem.id,
|
||||
endId = endElem.id;
|
||||
var connStr = startId + ' ' + endId;
|
||||
var altStr = endId + ' ' + startId;
|
||||
// Don't create connector if one already exists
|
||||
var dupe = $(svgcontent).find(connSel).filter(function () {
|
||||
var conn = this.getAttributeNS(seNs, 'connector');
|
||||
if (conn === connStr || conn === altStr) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (dupe.length) {
|
||||
$(curLine).remove();
|
||||
return {
|
||||
keep: false,
|
||||
element: null,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
|
||||
var bb = svgCanvas.getStrokedBBox([endElem]);
|
||||
|
||||
var pt = getBBintersect(startX, startY, bb, getOffset('start', curLine));
|
||||
setPoint(curLine, 'end', pt.x, pt.y, true);
|
||||
$(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb);
|
||||
seNs = svgCanvas.getEditorNS(true);
|
||||
curLine.setAttributeNS(seNs, 'se:connector', connStr);
|
||||
curLine.setAttribute('class', connSel.substr(1));
|
||||
curLine.setAttribute('opacity', 1);
|
||||
svgCanvas.addToSelection([curLine]);
|
||||
svgCanvas.moveToBottomSelectedElement();
|
||||
selManager.requestSelector(curLine).showGrips(false);
|
||||
started = false;
|
||||
if (mouseTarget === startElem) {
|
||||
// Start line through click
|
||||
started = true;
|
||||
return {
|
||||
keep: true,
|
||||
element: curLine,
|
||||
element: null,
|
||||
started: started
|
||||
};
|
||||
}
|
||||
if ($.inArray(svgcontent, parents) === -1) {
|
||||
// Not a valid target element, so remove line
|
||||
$(curLine).remove();
|
||||
started = false;
|
||||
return {
|
||||
keep: false,
|
||||
element: null,
|
||||
started: started
|
||||
};
|
||||
}
|
||||
// Valid end element
|
||||
endElem = mouseTarget;
|
||||
|
||||
var startId = startElem.id,
|
||||
endId = endElem.id;
|
||||
var connStr = startId + ' ' + endId;
|
||||
var altStr = endId + ' ' + startId;
|
||||
// Don't create connector if one already exists
|
||||
var dupe = $(svgcontent).find(connSel).filter(function () {
|
||||
var conn = this.getAttributeNS(seNs, 'connector');
|
||||
if (conn === connStr || conn === altStr) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (dupe.length) {
|
||||
$(curLine).remove();
|
||||
return {
|
||||
keep: false,
|
||||
element: null,
|
||||
started: false
|
||||
};
|
||||
}
|
||||
|
||||
var bb = svgCanvas.getStrokedBBox([endElem]);
|
||||
|
||||
var pt = getBBintersect(startX, startY, bb, getOffset('start', curLine));
|
||||
setPoint(curLine, 'end', pt.x, pt.y, true);
|
||||
$(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb);
|
||||
seNs = svgCanvas.getEditorNS(true);
|
||||
curLine.setAttributeNS(seNs, 'se:connector', connStr);
|
||||
curLine.setAttribute('class', connSel.substr(1));
|
||||
curLine.setAttribute('opacity', 1);
|
||||
svgCanvas.addToSelection([curLine]);
|
||||
svgCanvas.moveToBottomSelectedElement();
|
||||
selManager.requestSelector(curLine).showGrips(false);
|
||||
started = false;
|
||||
return {
|
||||
keep: true,
|
||||
element: curLine,
|
||||
started: started
|
||||
};
|
||||
},
|
||||
selectedChanged: function selectedChanged(opts) {
|
||||
// TODO: Find better way to skip operations if no connectors are in use
|
||||
|
|
|
|||
|
|
@ -13448,9 +13448,7 @@ function SvgCanvas(container, config) {
|
|||
}
|
||||
|
||||
extensions[name] = extObj;
|
||||
call('extension_added', extObj);
|
||||
_context.next = 15;
|
||||
break;
|
||||
return _context.abrupt('return', call('extension_added', extObj));
|
||||
|
||||
case 14:
|
||||
console.log('Cannot add extension "' + name + '", an extension by that name already exists.');
|
||||
|
|
@ -20319,7 +20317,7 @@ function jqPluginSVGIcons ($) {
|
|||
}
|
||||
}
|
||||
|
||||
var setIcon = function setIcon(target, icon, id, setID) {
|
||||
function setIcon(target, icon, id, setID) {
|
||||
if (isOpera) icon.css('visibility', 'hidden');
|
||||
if (opts.replace) {
|
||||
if (setID) icon.attr('id', id);
|
||||
|
|
@ -20334,15 +20332,15 @@ function jqPluginSVGIcons ($) {
|
|||
icon.removeAttr('style');
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var holder = void 0;
|
||||
var addIcon = function addIcon(icon, id) {
|
||||
function addIcon(icon, id) {
|
||||
if (opts.id_match === undefined || opts.id_match !== false) {
|
||||
setIcon(holder, icon, id, true);
|
||||
}
|
||||
svgIcons[id] = icon;
|
||||
};
|
||||
}
|
||||
|
||||
function makeIcons(toImage, fallback) {
|
||||
if (iconsMade) return;
|
||||
|
|
@ -25760,6 +25758,11 @@ editor.init = function () {
|
|||
*/
|
||||
function (win, data) {
|
||||
extensionsAdded = true;
|
||||
Actions.setAll();
|
||||
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
|
||||
});
|
||||
messageQueue.forEach(
|
||||
/**
|
||||
* @param {module:svgcanvas.SvgCanvas#event:message} messageObj
|
||||
|
|
@ -25798,9 +25801,13 @@ editor.init = function () {
|
|||
var setFlyoutPositions = function setFlyoutPositions() {
|
||||
$$b('.tools_flyout').each(function () {
|
||||
var shower = $$b('#' + this.id + '_show');
|
||||
var pos = shower.offset();
|
||||
|
||||
var _shower$offset = shower.offset(),
|
||||
left = _shower$offset.left,
|
||||
top = _shower$offset.top;
|
||||
|
||||
var w = shower.outerWidth();
|
||||
$$b(this).css({ left: (pos.left + w) * editor.tool_scale, top: pos.top });
|
||||
$$b(this).css({ left: (left + w) * editor.tool_scale, top: top });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -26294,12 +26301,6 @@ editor.init = function () {
|
|||
} }).then(function () {
|
||||
$$b('#svg_container')[0].style.visibility = 'visible';
|
||||
editor.runCallbacks();
|
||||
|
||||
setTimeout(function () {
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right').width(5).height(5));
|
||||
});
|
||||
}, 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -27692,47 +27693,84 @@ editor.init = function () {
|
|||
return;
|
||||
}
|
||||
|
||||
var tooltips = [];
|
||||
$$b(this).children().each(function () {
|
||||
tooltips.push(this.title);
|
||||
});
|
||||
var tooltips = $$b(this).children().map(function () {
|
||||
return this.title;
|
||||
}).get();
|
||||
shower[0].title = tooltips.join(' / ');
|
||||
});
|
||||
};
|
||||
|
||||
var allHolders = {};
|
||||
/**
|
||||
* @param {Object.<string, module:SVGEditor.ToolButton>} holders Key is a selector
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var setupFlyouts = function setupFlyouts(holders) {
|
||||
$$b.each(holders, function (holdSel, btnOpts) {
|
||||
var buttons = $$b(holdSel).children();
|
||||
var _allHolders$holdSel;
|
||||
|
||||
if (!allHolders[holdSel]) {
|
||||
allHolders[holdSel] = [];
|
||||
}
|
||||
(_allHolders$holdSel = allHolders[holdSel]).push.apply(_allHolders$holdSel, toConsumableArray(btnOpts));
|
||||
|
||||
var buttons = $$b(holdSel).children().not('.tool_button_evt_handled');
|
||||
var showSel = holdSel + '_show';
|
||||
var shower = $$b(showSel);
|
||||
var def = false;
|
||||
buttons.addClass('tool_button').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function (i) {
|
||||
// Get this buttons options
|
||||
var opts = btnOpts[i];
|
||||
buttons.addClass('tool_button tool_button_evt_handled').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function () {
|
||||
// Get this button's options
|
||||
var idSel = '#' + this.getAttribute('id');
|
||||
|
||||
var _Object$entries$find = Object.entries(btnOpts).find(function (_ref10) {
|
||||
var _ref11 = slicedToArray(_ref10, 2),
|
||||
i = _ref11[0],
|
||||
sel = _ref11[1].sel;
|
||||
|
||||
return sel === idSel;
|
||||
}),
|
||||
_Object$entries$find2 = slicedToArray(_Object$entries$find, 2),
|
||||
i = _Object$entries$find2[0],
|
||||
opts = _Object$entries$find2[1];
|
||||
|
||||
// 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
|
||||
var func = function func(event) {
|
||||
/**
|
||||
* Clicking the icon in flyout should set this set's icon
|
||||
* @param {Event} ev
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var flyoutAction = function flyoutAction(ev) {
|
||||
var options = opts;
|
||||
// Find the currently selected tool if comes from keystroke
|
||||
if (event.type === 'keydown') {
|
||||
if (ev.type === 'keydown') {
|
||||
var flyoutIsSelected = $$b(options.parent + '_show').hasClass('tool_button_current');
|
||||
var currentOperation = $$b(options.parent + '_show').attr('data-curopt');
|
||||
$$b.each(holders[opts.parent], function (i, tool) {
|
||||
if (tool.sel === currentOperation) {
|
||||
if (!event.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
options = holders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
Object.entries(holders[opts.parent]).some(function (_ref12) {
|
||||
var _ref13 = slicedToArray(_ref12, 2),
|
||||
i = _ref13[0],
|
||||
tool = _ref13[1];
|
||||
|
||||
if (tool.sel !== currentOperation) {
|
||||
return;
|
||||
}
|
||||
if (!ev.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
// If flyout is selected, allow shift key to iterate through subitems
|
||||
i = parseInt(i, 10);
|
||||
// Use `allHolders` to include both extension `includeWith` and toolbarButtons
|
||||
options = allHolders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
if ($$b(this).hasClass('disabled')) {
|
||||
|
|
@ -27754,10 +27792,10 @@ editor.init = function () {
|
|||
shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
|
||||
};
|
||||
|
||||
$$b(this).mouseup(func);
|
||||
$$b(this).mouseup(flyoutAction);
|
||||
|
||||
if (opts.key) {
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], func);
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -27884,7 +27922,7 @@ editor.init = function () {
|
|||
* @param {external:Window} win
|
||||
* @param {module:svgcanvas.SvgCanvas#event:extension_added} ext
|
||||
* @listens module:svgcanvas.SvgCanvas#event:extension_added
|
||||
* @returns {undefined}
|
||||
* @returns {Promise} Resolves to `undefined`
|
||||
*/
|
||||
var extAdded = function extAdded(win, ext) {
|
||||
if (!ext) {
|
||||
|
|
@ -28036,8 +28074,9 @@ editor.init = function () {
|
|||
|
||||
/**
|
||||
* @typedef {GenericArray} module:SVGEditor.KeyArray
|
||||
* @property {string} 0
|
||||
* @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
|
||||
|
|
@ -28061,7 +28100,7 @@ editor.init = function () {
|
|||
* @property {module:SVGEditor.Key} [key] The key to bind to the button
|
||||
*/
|
||||
// Add buttons given by extension
|
||||
$$b.each(ext.buttons, function (i, btn) {
|
||||
$$b.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */btn) {
|
||||
var id = btn.id;
|
||||
|
||||
var num = i;
|
||||
|
|
@ -28156,7 +28195,7 @@ editor.init = function () {
|
|||
icon: btn.id,
|
||||
// key: btn.key,
|
||||
isDefault: true
|
||||
}, refData];
|
||||
}]; // , refData
|
||||
//
|
||||
// // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
//
|
||||
|
|
@ -28197,7 +28236,6 @@ editor.init = function () {
|
|||
showBtn = refBtn.clone().attr('id', _tlsId + '_show').append($$b('<div>', { class: 'flyout_arrow_horiz' }));
|
||||
|
||||
refBtn.before(showBtn);
|
||||
|
||||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(_tlsId, refBtn);
|
||||
}
|
||||
|
|
@ -28215,7 +28253,7 @@ editor.init = function () {
|
|||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
key: btn.key,
|
||||
isDefault: btn.includeWith ? btn.includeWith.isDefault : 0
|
||||
isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
|
||||
}, refData];
|
||||
|
||||
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
|
|
@ -28269,26 +28307,27 @@ editor.init = function () {
|
|||
});
|
||||
|
||||
if (svgicons) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
return new Promise(function (resolve, reject) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
}
|
||||
runCallback();
|
||||
resolve();
|
||||
}
|
||||
runCallback();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!svgicons) {
|
||||
runCallback();
|
||||
}
|
||||
return runCallback();
|
||||
};
|
||||
|
||||
var getPaint = function getPaint(color, opac, type) {
|
||||
|
|
@ -28341,9 +28380,9 @@ editor.init = function () {
|
|||
* @listens module:svgcanvas.SvgCanvas#event:updateCanvas
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function (win, _ref10) {
|
||||
var center = _ref10.center,
|
||||
newCtr = _ref10.newCtr;
|
||||
function (win, _ref14) {
|
||||
var center = _ref14.center,
|
||||
newCtr = _ref14.newCtr;
|
||||
|
||||
updateCanvas(center, newCtr);
|
||||
});
|
||||
|
|
@ -29950,8 +29989,11 @@ editor.init = function () {
|
|||
changeSidePanelWidth(deltaX);
|
||||
};
|
||||
|
||||
// if width is non-zero, then fully close it, otherwise fully open it
|
||||
// the optional close argument forces the side panel closed
|
||||
/**
|
||||
* If width is non-zero, then fully close it, otherwise fully open it
|
||||
* @param {boolean} close Forces the side panel closed
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var toggleSidePanel = function toggleSidePanel(close) {
|
||||
var w = $$b('#sidepanels').width();
|
||||
var deltaX = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
|
||||
|
|
@ -30071,20 +30113,46 @@ editor.init = function () {
|
|||
// Prevent browser from erroneously repopulating fields
|
||||
$$b('input,select').attr('autocomplete', 'off');
|
||||
|
||||
// Associate all button actions as well as non-button keyboard shortcuts
|
||||
/**
|
||||
* Associate all button actions as well as non-button keyboard shortcuts
|
||||
* @namespace {PlainObject} module:SVGEditor~Actions
|
||||
*/
|
||||
var Actions = function () {
|
||||
// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true] }, { sel: '#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect' }, { sel: '#tool_square', fn: clickSquare, evt: 'mouseup', parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup', parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
/**
|
||||
* @typedef {PlainObject} module:SVGEditor.ToolButton
|
||||
* @property {string} sel The CSS selector for the tool
|
||||
* @property {external:jQuery.Function} fn A handler to be attached to the `evt`
|
||||
* @property {string} evt The event for which the `fn` listener will be added
|
||||
* @property {module:SVGEditor.Key} [key] [key, preventDefault, NoDisableInInput]
|
||||
* @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
|
||||
*/
|
||||
/**
|
||||
*
|
||||
* @name module:SVGEditor~ToolButtons
|
||||
* @type {module:SVGEditor.ToolButton[]}
|
||||
*/
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { 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',
|
||||
parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',
|
||||
parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',
|
||||
key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
if (editingsource) {
|
||||
saveSourceEditor();
|
||||
} else {
|
||||
clickSave();
|
||||
}
|
||||
},
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel',
|
||||
fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
showPreferences();return false;
|
||||
},
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,
|
||||
evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
// {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
|
||||
// {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
||||
|
|
@ -30179,6 +30247,10 @@ editor.init = function () {
|
|||
};
|
||||
|
||||
return {
|
||||
/** @lends module:SVGEditor~Actions */
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setAll: function setAll() {
|
||||
var flyouts = {};
|
||||
|
||||
|
|
@ -30203,8 +30275,10 @@ editor.init = function () {
|
|||
if (!fH.length) {
|
||||
fH = makeFlyoutHolder(opts.parent.substr(1));
|
||||
}
|
||||
|
||||
fH.append(btn);
|
||||
if (opts.prepend) {
|
||||
btn[0].style.margin = 'initial';
|
||||
}
|
||||
fH[opts.prepend ? 'prepend' : 'append'](btn);
|
||||
|
||||
if (!Array.isArray(flyouts[opts.parent])) {
|
||||
flyouts[opts.parent] = [];
|
||||
|
|
@ -30281,6 +30355,10 @@ editor.init = function () {
|
|||
|
||||
$$b('#tool_zoom').dblclick(dblclickZoom);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setTitles: function setTitles() {
|
||||
$$b.each(keyAssocs, function (keyval, sel) {
|
||||
var menu = $$b(sel).parents('#main_menu').length;
|
||||
|
|
@ -30311,20 +30389,19 @@ editor.init = function () {
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} sel Selector to match
|
||||
* @returns {module:SVGEditor.ToolButton}
|
||||
*/
|
||||
getButtonData: function getButtonData(sel) {
|
||||
var b = void 0;
|
||||
$$b.each(toolButtons, function (i, btn) {
|
||||
if (btn.sel === sel) {
|
||||
b = btn;
|
||||
}
|
||||
return Object.values(toolButtons).find(function (btn) {
|
||||
return btn.sel === sel;
|
||||
});
|
||||
return b;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
Actions.setAll();
|
||||
|
||||
// Select given tool
|
||||
editor.ready(function () {
|
||||
var tool = void 0;
|
||||
|
|
@ -30917,9 +30994,9 @@ var messageQueue = [];
|
|||
* @fires module:svgcanvas.SvgCanvas#event:message
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var messageListener = function messageListener(_ref11) {
|
||||
var data = _ref11.data,
|
||||
origin = _ref11.origin;
|
||||
var messageListener = function messageListener(_ref15) {
|
||||
var data = _ref15.data,
|
||||
origin = _ref15.origin;
|
||||
|
||||
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
|
||||
var messageObj = { data: data, origin: origin };
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -13454,9 +13454,7 @@
|
|||
}
|
||||
|
||||
extensions[name] = extObj;
|
||||
call('extension_added', extObj);
|
||||
_context.next = 15;
|
||||
break;
|
||||
return _context.abrupt('return', call('extension_added', extObj));
|
||||
|
||||
case 14:
|
||||
console.log('Cannot add extension "' + name + '", an extension by that name already exists.');
|
||||
|
|
@ -20325,7 +20323,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
var setIcon = function setIcon(target, icon, id, setID) {
|
||||
function setIcon(target, icon, id, setID) {
|
||||
if (isOpera) icon.css('visibility', 'hidden');
|
||||
if (opts.replace) {
|
||||
if (setID) icon.attr('id', id);
|
||||
|
|
@ -20340,15 +20338,15 @@
|
|||
icon.removeAttr('style');
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var holder = void 0;
|
||||
var addIcon = function addIcon(icon, id) {
|
||||
function addIcon(icon, id) {
|
||||
if (opts.id_match === undefined || opts.id_match !== false) {
|
||||
setIcon(holder, icon, id, true);
|
||||
}
|
||||
svgIcons[id] = icon;
|
||||
};
|
||||
}
|
||||
|
||||
function makeIcons(toImage, fallback) {
|
||||
if (iconsMade) return;
|
||||
|
|
@ -25766,6 +25764,11 @@
|
|||
*/
|
||||
function (win, data) {
|
||||
extensionsAdded = true;
|
||||
Actions.setAll();
|
||||
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
|
||||
});
|
||||
messageQueue.forEach(
|
||||
/**
|
||||
* @param {module:svgcanvas.SvgCanvas#event:message} messageObj
|
||||
|
|
@ -25804,9 +25807,13 @@
|
|||
var setFlyoutPositions = function setFlyoutPositions() {
|
||||
$$b('.tools_flyout').each(function () {
|
||||
var shower = $$b('#' + this.id + '_show');
|
||||
var pos = shower.offset();
|
||||
|
||||
var _shower$offset = shower.offset(),
|
||||
left = _shower$offset.left,
|
||||
top = _shower$offset.top;
|
||||
|
||||
var w = shower.outerWidth();
|
||||
$$b(this).css({ left: (pos.left + w) * editor.tool_scale, top: pos.top });
|
||||
$$b(this).css({ left: (left + w) * editor.tool_scale, top: top });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -26300,12 +26307,6 @@
|
|||
} }).then(function () {
|
||||
$$b('#svg_container')[0].style.visibility = 'visible';
|
||||
editor.runCallbacks();
|
||||
|
||||
setTimeout(function () {
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right').width(5).height(5));
|
||||
});
|
||||
}, 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -27698,47 +27699,84 @@
|
|||
return;
|
||||
}
|
||||
|
||||
var tooltips = [];
|
||||
$$b(this).children().each(function () {
|
||||
tooltips.push(this.title);
|
||||
});
|
||||
var tooltips = $$b(this).children().map(function () {
|
||||
return this.title;
|
||||
}).get();
|
||||
shower[0].title = tooltips.join(' / ');
|
||||
});
|
||||
};
|
||||
|
||||
var allHolders = {};
|
||||
/**
|
||||
* @param {Object.<string, module:SVGEditor.ToolButton>} holders Key is a selector
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var setupFlyouts = function setupFlyouts(holders) {
|
||||
$$b.each(holders, function (holdSel, btnOpts) {
|
||||
var buttons = $$b(holdSel).children();
|
||||
var _allHolders$holdSel;
|
||||
|
||||
if (!allHolders[holdSel]) {
|
||||
allHolders[holdSel] = [];
|
||||
}
|
||||
(_allHolders$holdSel = allHolders[holdSel]).push.apply(_allHolders$holdSel, toConsumableArray(btnOpts));
|
||||
|
||||
var buttons = $$b(holdSel).children().not('.tool_button_evt_handled');
|
||||
var showSel = holdSel + '_show';
|
||||
var shower = $$b(showSel);
|
||||
var def = false;
|
||||
buttons.addClass('tool_button').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function (i) {
|
||||
// Get this buttons options
|
||||
var opts = btnOpts[i];
|
||||
buttons.addClass('tool_button tool_button_evt_handled').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function () {
|
||||
// Get this button's options
|
||||
var idSel = '#' + this.getAttribute('id');
|
||||
|
||||
var _Object$entries$find = Object.entries(btnOpts).find(function (_ref10) {
|
||||
var _ref11 = slicedToArray(_ref10, 2),
|
||||
i = _ref11[0],
|
||||
sel = _ref11[1].sel;
|
||||
|
||||
return sel === idSel;
|
||||
}),
|
||||
_Object$entries$find2 = slicedToArray(_Object$entries$find, 2),
|
||||
i = _Object$entries$find2[0],
|
||||
opts = _Object$entries$find2[1];
|
||||
|
||||
// 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
|
||||
var func = function func(event) {
|
||||
/**
|
||||
* Clicking the icon in flyout should set this set's icon
|
||||
* @param {Event} ev
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var flyoutAction = function flyoutAction(ev) {
|
||||
var options = opts;
|
||||
// Find the currently selected tool if comes from keystroke
|
||||
if (event.type === 'keydown') {
|
||||
if (ev.type === 'keydown') {
|
||||
var flyoutIsSelected = $$b(options.parent + '_show').hasClass('tool_button_current');
|
||||
var currentOperation = $$b(options.parent + '_show').attr('data-curopt');
|
||||
$$b.each(holders[opts.parent], function (i, tool) {
|
||||
if (tool.sel === currentOperation) {
|
||||
if (!event.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
options = holders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
Object.entries(holders[opts.parent]).some(function (_ref12) {
|
||||
var _ref13 = slicedToArray(_ref12, 2),
|
||||
i = _ref13[0],
|
||||
tool = _ref13[1];
|
||||
|
||||
if (tool.sel !== currentOperation) {
|
||||
return;
|
||||
}
|
||||
if (!ev.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
// If flyout is selected, allow shift key to iterate through subitems
|
||||
i = parseInt(i, 10);
|
||||
// Use `allHolders` to include both extension `includeWith` and toolbarButtons
|
||||
options = allHolders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
if ($$b(this).hasClass('disabled')) {
|
||||
|
|
@ -27760,10 +27798,10 @@
|
|||
shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
|
||||
};
|
||||
|
||||
$$b(this).mouseup(func);
|
||||
$$b(this).mouseup(flyoutAction);
|
||||
|
||||
if (opts.key) {
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], func);
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -27890,7 +27928,7 @@
|
|||
* @param {external:Window} win
|
||||
* @param {module:svgcanvas.SvgCanvas#event:extension_added} ext
|
||||
* @listens module:svgcanvas.SvgCanvas#event:extension_added
|
||||
* @returns {undefined}
|
||||
* @returns {Promise} Resolves to `undefined`
|
||||
*/
|
||||
var extAdded = function extAdded(win, ext) {
|
||||
if (!ext) {
|
||||
|
|
@ -28042,8 +28080,9 @@
|
|||
|
||||
/**
|
||||
* @typedef {GenericArray} module:SVGEditor.KeyArray
|
||||
* @property {string} 0
|
||||
* @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
|
||||
|
|
@ -28067,7 +28106,7 @@
|
|||
* @property {module:SVGEditor.Key} [key] The key to bind to the button
|
||||
*/
|
||||
// Add buttons given by extension
|
||||
$$b.each(ext.buttons, function (i, btn) {
|
||||
$$b.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */btn) {
|
||||
var id = btn.id;
|
||||
|
||||
var num = i;
|
||||
|
|
@ -28162,7 +28201,7 @@
|
|||
icon: btn.id,
|
||||
// key: btn.key,
|
||||
isDefault: true
|
||||
}, refData];
|
||||
}]; // , refData
|
||||
//
|
||||
// // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
//
|
||||
|
|
@ -28203,7 +28242,6 @@
|
|||
showBtn = refBtn.clone().attr('id', _tlsId + '_show').append($$b('<div>', { class: 'flyout_arrow_horiz' }));
|
||||
|
||||
refBtn.before(showBtn);
|
||||
|
||||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(_tlsId, refBtn);
|
||||
}
|
||||
|
|
@ -28221,7 +28259,7 @@
|
|||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
key: btn.key,
|
||||
isDefault: btn.includeWith ? btn.includeWith.isDefault : 0
|
||||
isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
|
||||
}, refData];
|
||||
|
||||
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
|
|
@ -28275,26 +28313,27 @@
|
|||
});
|
||||
|
||||
if (svgicons) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
return new Promise(function (resolve, reject) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
}
|
||||
runCallback();
|
||||
resolve();
|
||||
}
|
||||
runCallback();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!svgicons) {
|
||||
runCallback();
|
||||
}
|
||||
return runCallback();
|
||||
};
|
||||
|
||||
var getPaint = function getPaint(color, opac, type) {
|
||||
|
|
@ -28347,9 +28386,9 @@
|
|||
* @listens module:svgcanvas.SvgCanvas#event:updateCanvas
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function (win, _ref10) {
|
||||
var center = _ref10.center,
|
||||
newCtr = _ref10.newCtr;
|
||||
function (win, _ref14) {
|
||||
var center = _ref14.center,
|
||||
newCtr = _ref14.newCtr;
|
||||
|
||||
updateCanvas(center, newCtr);
|
||||
});
|
||||
|
|
@ -29956,8 +29995,11 @@
|
|||
changeSidePanelWidth(deltaX);
|
||||
};
|
||||
|
||||
// if width is non-zero, then fully close it, otherwise fully open it
|
||||
// the optional close argument forces the side panel closed
|
||||
/**
|
||||
* If width is non-zero, then fully close it, otherwise fully open it
|
||||
* @param {boolean} close Forces the side panel closed
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var toggleSidePanel = function toggleSidePanel(close) {
|
||||
var w = $$b('#sidepanels').width();
|
||||
var deltaX = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
|
||||
|
|
@ -30077,20 +30119,46 @@
|
|||
// Prevent browser from erroneously repopulating fields
|
||||
$$b('input,select').attr('autocomplete', 'off');
|
||||
|
||||
// Associate all button actions as well as non-button keyboard shortcuts
|
||||
/**
|
||||
* Associate all button actions as well as non-button keyboard shortcuts
|
||||
* @namespace {PlainObject} module:SVGEditor~Actions
|
||||
*/
|
||||
var Actions = function () {
|
||||
// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true] }, { sel: '#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect' }, { sel: '#tool_square', fn: clickSquare, evt: 'mouseup', parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup', parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
/**
|
||||
* @typedef {PlainObject} module:SVGEditor.ToolButton
|
||||
* @property {string} sel The CSS selector for the tool
|
||||
* @property {external:jQuery.Function} fn A handler to be attached to the `evt`
|
||||
* @property {string} evt The event for which the `fn` listener will be added
|
||||
* @property {module:SVGEditor.Key} [key] [key, preventDefault, NoDisableInInput]
|
||||
* @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
|
||||
*/
|
||||
/**
|
||||
*
|
||||
* @name module:SVGEditor~ToolButtons
|
||||
* @type {module:SVGEditor.ToolButton[]}
|
||||
*/
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { 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',
|
||||
parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',
|
||||
parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',
|
||||
key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
if (editingsource) {
|
||||
saveSourceEditor();
|
||||
} else {
|
||||
clickSave();
|
||||
}
|
||||
},
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel',
|
||||
fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
showPreferences();return false;
|
||||
},
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,
|
||||
evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
// {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
|
||||
// {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
||||
|
|
@ -30185,6 +30253,10 @@
|
|||
};
|
||||
|
||||
return {
|
||||
/** @lends module:SVGEditor~Actions */
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setAll: function setAll() {
|
||||
var flyouts = {};
|
||||
|
||||
|
|
@ -30209,8 +30281,10 @@
|
|||
if (!fH.length) {
|
||||
fH = makeFlyoutHolder(opts.parent.substr(1));
|
||||
}
|
||||
|
||||
fH.append(btn);
|
||||
if (opts.prepend) {
|
||||
btn[0].style.margin = 'initial';
|
||||
}
|
||||
fH[opts.prepend ? 'prepend' : 'append'](btn);
|
||||
|
||||
if (!Array.isArray(flyouts[opts.parent])) {
|
||||
flyouts[opts.parent] = [];
|
||||
|
|
@ -30287,6 +30361,10 @@
|
|||
|
||||
$$b('#tool_zoom').dblclick(dblclickZoom);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setTitles: function setTitles() {
|
||||
$$b.each(keyAssocs, function (keyval, sel) {
|
||||
var menu = $$b(sel).parents('#main_menu').length;
|
||||
|
|
@ -30317,20 +30395,19 @@
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} sel Selector to match
|
||||
* @returns {module:SVGEditor.ToolButton}
|
||||
*/
|
||||
getButtonData: function getButtonData(sel) {
|
||||
var b = void 0;
|
||||
$$b.each(toolButtons, function (i, btn) {
|
||||
if (btn.sel === sel) {
|
||||
b = btn;
|
||||
}
|
||||
return Object.values(toolButtons).find(function (btn) {
|
||||
return btn.sel === sel;
|
||||
});
|
||||
return b;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
Actions.setAll();
|
||||
|
||||
// Select given tool
|
||||
editor.ready(function () {
|
||||
var tool = void 0;
|
||||
|
|
@ -30923,9 +31000,9 @@
|
|||
* @fires module:svgcanvas.SvgCanvas#event:message
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var messageListener = function messageListener(_ref11) {
|
||||
var data = _ref11.data,
|
||||
origin = _ref11.origin;
|
||||
var messageListener = function messageListener(_ref15) {
|
||||
var data = _ref15.data,
|
||||
origin = _ref15.origin;
|
||||
|
||||
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
|
||||
var messageObj = { data: data, origin: origin };
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -229,7 +229,7 @@ export default function ($) {
|
|||
}
|
||||
}
|
||||
|
||||
const setIcon = function (target, icon, id, setID) {
|
||||
function setIcon (target, icon, id, setID) {
|
||||
if (isOpera) icon.css('visibility', 'hidden');
|
||||
if (opts.replace) {
|
||||
if (setID) icon.attr('id', id);
|
||||
|
|
@ -244,15 +244,15 @@ export default function ($) {
|
|||
icon.removeAttr('style');
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let holder;
|
||||
const addIcon = function (icon, id) {
|
||||
function addIcon (icon, id) {
|
||||
if (opts.id_match === undefined || opts.id_match !== false) {
|
||||
setIcon(holder, icon, id, true);
|
||||
}
|
||||
svgIcons[id] = icon;
|
||||
};
|
||||
}
|
||||
|
||||
function makeIcons (toImage, fallback) {
|
||||
if (iconsMade) return;
|
||||
|
|
|
|||
|
|
@ -28,12 +28,7 @@
|
|||
<script src="external/babel-polyfill/polyfill.min.js"></script>
|
||||
<!-- If you do not wish to add extensions by URL, you can load them
|
||||
by creating the following file and adding by calls to svgEditor.setConfig -->
|
||||
<script type="module">
|
||||
import svgEditor from './svg-editor.js';
|
||||
svgEditor.setConfig({
|
||||
allowedOrigins: ['*']
|
||||
});
|
||||
</script>
|
||||
<script type="module" src="xdomain-svgedit-config-es.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,773 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- AUTO-GENERATED FROM xdomain-svg-editor-es.html; DO NOT EDIT; use build-html.js to build -->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<!-- STYLESHEETS (others loaded dynamically) -->
|
||||
<style id="styleoverrides" media="screen"></style>
|
||||
|
||||
<!-- SCRIPTS -->
|
||||
<!--{if jquery_release}>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<!{else}-->
|
||||
<script src="jquery.min.js"></script>
|
||||
<!--{endif}-->
|
||||
<!-- We keep this next module external to avoid the need to
|
||||
load further scripts if not supported -->
|
||||
<script defer="defer" src="../dist/redirect-on-lacking-support.js"></script>
|
||||
<!-- always minified scripts -->
|
||||
<script src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
<!-- The following could be removed for more modern browsers -->
|
||||
<script src="../dist/dom-polyfill.js"></script>
|
||||
<!-- The following could be removed for more modern browsers; currently
|
||||
using for at least `String.prototype.includes`, `Array.prototype.includes`,
|
||||
`String.prototype.startsWith` -->
|
||||
<script src="external/babel-polyfill/polyfill.min.js"></script>
|
||||
<!-- If you do not wish to add extensions by URL, you can load them
|
||||
by creating the following file and adding by calls to svgEditor.setConfig -->
|
||||
<script defer="defer" src="xdomain-svgedit-config-iife.js"></script>
|
||||
|
||||
<!-- FEEDS -->
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit General Discussion"
|
||||
href="https://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml"/>
|
||||
<link rel="alternate" type="application/atom+xml"
|
||||
title="SVG-edit Updates (Commits)"
|
||||
href="https://github.com/SVG-Edit/svgedit/commits/master.atom"/>
|
||||
<title>SVG-edit</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="svg_container" style="visibility: hidden;">
|
||||
<div id="svg_editor">
|
||||
<div id="rulers">
|
||||
<div id="ruler_corner"></div>
|
||||
<div id="ruler_x">
|
||||
<div>
|
||||
<canvas height="15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ruler_y">
|
||||
<div>
|
||||
<canvas width="15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="workarea">
|
||||
<div id="svgcanvas" style="position: relative;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidepanels">
|
||||
<div id="layerpanel">
|
||||
<h3 id="layersLabel">Layers</h3>
|
||||
<fieldset id="layerbuttons">
|
||||
<div id="layer_new" class="layer_button" title="New Layer"></div>
|
||||
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
|
||||
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
|
||||
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
|
||||
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
|
||||
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
|
||||
</fieldset>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
<td class="layervis"></td>
|
||||
<td class="layername">Layer 1</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span id="selLayerLabel">Move elements to:</span>
|
||||
<select id="selLayerNames" title="Move selected elements to a different layer"
|
||||
disabled="disabled">
|
||||
<option selected="selected" value="layer1">Layer 1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="sidepanel_handle"
|
||||
title="Drag left/right to resize side panel [X]">L a y e r s
|
||||
</div>
|
||||
</div>
|
||||
<div id="main_button">
|
||||
<div id="main_icon" class="tool_button" title="Main Menu">
|
||||
<span>SVG-Edit</span>
|
||||
<div id="logo"></div>
|
||||
<div class="dropdown"></div>
|
||||
</div>
|
||||
<div id="main_menu">
|
||||
<!-- File-like buttons: New, Save, Source -->
|
||||
<ul>
|
||||
<li id="tool_clear">
|
||||
<div></div>
|
||||
New Image (N)
|
||||
</li>
|
||||
<li id="tool_open" style="display:none;">
|
||||
<div id="fileinputs">
|
||||
<div></div>
|
||||
</div>
|
||||
Open SVG
|
||||
</li>
|
||||
<li id="tool_import" style="display:none;">
|
||||
<div id="fileinputs_import">
|
||||
<div></div>
|
||||
</div>
|
||||
Import Image
|
||||
</li>
|
||||
<li id="tool_save">
|
||||
<div></div>
|
||||
Save Image (S)
|
||||
</li>
|
||||
<li id="tool_export">
|
||||
<div></div>
|
||||
Export
|
||||
</li>
|
||||
<li id="tool_docprops">
|
||||
<div></div>
|
||||
Document Properties (D)
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href="https://github.com/SVG-Edit/svgedit" target="_blank">
|
||||
SVG-edit Home Page
|
||||
</a>
|
||||
</p>
|
||||
<button id="tool_prefs_option">
|
||||
Editor Options
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools_top" class="tools_panel">
|
||||
<div id="editor_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
|
||||
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
|
||||
</div>
|
||||
<!-- History buttons -->
|
||||
<div id="history_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button tool_button_disabled" id="tool_undo"
|
||||
title="Undo [Z]"></div>
|
||||
<div class="push_button tool_button_disabled" id="tool_redo"
|
||||
title="Redo [Y]"></div>
|
||||
</div>
|
||||
<!-- Buttons when a single element is selected -->
|
||||
<div id="selected_panel">
|
||||
<div class="toolset">
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_clone"
|
||||
title="Duplicate Element [D]"></div>
|
||||
<div class="push_button" id="tool_delete"
|
||||
title="Delete Element [Delete/Backspace]"></div>
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_move_top"
|
||||
title="Bring to Front [ Ctrl+Shift+] ]"></div>
|
||||
<div class="push_button" id="tool_move_bottom"
|
||||
title="Send to Back [ Ctrl+Shift+[ ]"></div>
|
||||
<div class="push_button" id="tool_topath"
|
||||
title="Convert to Path"></div>
|
||||
<div class="push_button" id="tool_reorient"
|
||||
title="Reorient path"></div>
|
||||
<div class="push_button" id="tool_make_link"
|
||||
title="Make (hyper)link"></div>
|
||||
<div class="tool_sep"></div>
|
||||
<label id="idLabel" title="Identify the element">
|
||||
<span>id:</span>
|
||||
<input id="elem_id" class="attr_changer"
|
||||
data-attr="id" size="10" type="text"/>
|
||||
</label>
|
||||
<label id="classLabel" title="Element class">
|
||||
<span>class:</span>
|
||||
<input id="elem_class" class="attr_changer"
|
||||
data-attr="class" size="10" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
<label id="tool_angle" title="Change rotation angle" class="toolset">
|
||||
<span id="angleLabel" class="icon_label"></span>
|
||||
<input id="angle" size="2" value="0" type="text"/>
|
||||
</label>
|
||||
<div class="toolset" id="tool_blur" title="Change gaussian blur value">
|
||||
<label>
|
||||
<span id="blurLabel" class="icon_label"></span>
|
||||
<input id="blur" size="2" value="0" type="text"/>
|
||||
</label>
|
||||
<div id="blur_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li class="special"><div id="blur_slider"></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
|
||||
<div id="cur_position" class="icon_label"></div>
|
||||
<button></button>
|
||||
</div>
|
||||
<div id="xy_panel" class="toolset">
|
||||
<label>
|
||||
x: <input id="selected_x" class="attr_changer"
|
||||
title="Change X coordinate" size="3" data-attr="x"/>
|
||||
</label>
|
||||
<label>
|
||||
y: <input id="selected_y" class="attr_changer"
|
||||
title="Change Y coordinate" size="3" data-attr="y"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Buttons when multiple elements are selected -->
|
||||
<div id="multiselected_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_clone_multi"
|
||||
title="Clone Elements [C]"></div>
|
||||
<div class="push_button" id="tool_delete_multi"
|
||||
title="Delete Selected Elements [Delete/Backspace]"></div>
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_group_elements" title="Group Elements [G]"></div>
|
||||
<div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div>
|
||||
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
|
||||
<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
|
||||
<div class="push_button" id="tool_alignright" title="Align Right"></div>
|
||||
<div class="push_button" id="tool_aligntop" title="Align Top"></div>
|
||||
<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
|
||||
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
|
||||
<label id="tool_align_relative">
|
||||
<span id="relativeToLabel">relative to:</span>
|
||||
<select id="align_relative_to" title="Align relative to ...">
|
||||
<option id="selected_objects" value="selected">selected objects</option>
|
||||
<option id="largest_object" value="largest">largest object</option>
|
||||
<option id="smallest_object" value="smallest">smallest object</option>
|
||||
<option id="page" value="page">page</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="tool_sep"></div>
|
||||
</div>
|
||||
<div id="rect_panel">
|
||||
<div class="toolset">
|
||||
<label id="rect_width_tool" title="Change rectangle width">
|
||||
<span id="rwidthLabel" class="icon_label"></span>
|
||||
<input id="rect_width" class="attr_changer" size="3" data-attr="width"/>
|
||||
</label>
|
||||
<label id="rect_height_tool" title="Change rectangle height">
|
||||
<span id="rheightLabel" class="icon_label"></span>
|
||||
<input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
|
||||
</label>
|
||||
</div>
|
||||
<label id="cornerRadiusLabel" class="toolset"
|
||||
title="Change Rectangle Corner Radius">
|
||||
<span class="icon_label"></span>
|
||||
<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
|
||||
</label>
|
||||
</div>
|
||||
<div id="image_panel">
|
||||
<div class="toolset">
|
||||
<label><span id="iwidthLabel" class="icon_label"></span>
|
||||
<input id="image_width" class="attr_changer"
|
||||
title="Change image width" size="3" data-attr="width"/>
|
||||
</label>
|
||||
<label><span id="iheightLabel" class="icon_label"></span>
|
||||
<input id="image_height" class="attr_changer"
|
||||
title="Change image height" size="3" data-attr="height"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_image_url">url:
|
||||
<input id="image_url" type="text" title="Change URL" size="35"/>
|
||||
</label>
|
||||
<label id="tool_change_image">
|
||||
<button id="change_image_url" style="display: none;">Change Image</button>
|
||||
<span id="url_notice"
|
||||
title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="circle_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_circle_cx">cx:
|
||||
<input id="circle_cx" class="attr_changer"
|
||||
title="Change circle's cx coordinate" size="3" data-attr="cx"/>
|
||||
</label>
|
||||
<label id="tool_circle_cy">cy:
|
||||
<input id="circle_cy" class="attr_changer"
|
||||
title="Change circle's cy coordinate" size="3" data-attr="cy"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_circle_r">r:
|
||||
<input id="circle_r" class="attr_changer"
|
||||
title="Change circle's radius" size="3" data-attr="r"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ellipse_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_ellipse_cx">cx:
|
||||
<input id="ellipse_cx" class="attr_changer"
|
||||
title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
|
||||
</label>
|
||||
<label id="tool_ellipse_cy">cy:
|
||||
<input id="ellipse_cy" class="attr_changer"
|
||||
title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_ellipse_rx">rx:
|
||||
<input id="ellipse_rx" class="attr_changer"
|
||||
title="Change ellipse's x radius" size="3" data-attr="rx"/>
|
||||
</label>
|
||||
<label id="tool_ellipse_ry">ry:
|
||||
<input id="ellipse_ry" class="attr_changer"
|
||||
title="Change ellipse's y radius" size="3" data-attr="ry"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="line_panel">
|
||||
<div class="toolset">
|
||||
<label id="tool_line_x1">x1:
|
||||
<input id="line_x1" class="attr_changer"
|
||||
title="Change line's starting x coordinate" size="3" data-attr="x1"/>
|
||||
</label>
|
||||
<label id="tool_line_y1">y1:
|
||||
<input id="line_y1" class="attr_changer"
|
||||
title="Change line's starting y coordinate" size="3" data-attr="y1"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="toolset">
|
||||
<label id="tool_line_x2">x2:
|
||||
<input id="line_x2" class="attr_changer"
|
||||
title="Change line's ending x coordinate" size="3" data-attr="x2"/>
|
||||
</label>
|
||||
<label id="tool_line_y2">y2:
|
||||
<input id="line_y2" class="attr_changer"
|
||||
title="Change line's ending y coordinate" size="3" data-attr="y2"/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="text_panel">
|
||||
<div class="toolset">
|
||||
<div class="tool_button" id="tool_bold"
|
||||
title="Bold Text [B]"><span></span>B</div>
|
||||
<div class="tool_button" id="tool_italic"
|
||||
title="Italic Text [I]"><span></span>i</div>
|
||||
</div>
|
||||
<div class="toolset" id="tool_font_family">
|
||||
<label>
|
||||
<!-- Font family -->
|
||||
<input id="font_family" type="text" title="Change Font Family" size="12"/>
|
||||
</label>
|
||||
<div id="font_family_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li style="font-family:serif">Serif</li>
|
||||
<li style="font-family:sans-serif">Sans-serif</li>
|
||||
<li style="font-family:cursive">Cursive</li>
|
||||
<li style="font-family:fantasy">Fantasy</li>
|
||||
<li style="font-family:monospace">Monospace</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<label id="tool_font_size" title="Change Font Size">
|
||||
<span id="font_sizeLabel" class="icon_label"></span>
|
||||
<input id="font_size" size="3" value="0" type="text"/>
|
||||
</label>
|
||||
<!-- Not visible, but still used -->
|
||||
<input id="text" type="text" size="35"/>
|
||||
</div>
|
||||
<!-- formerly gsvg_panel -->
|
||||
<div id="container_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<!-- Add viewBox field here? -->
|
||||
<label id="group_title" title="Group identification label">
|
||||
<span>label:</span>
|
||||
<input id="g_title" data-attr="title" size="10" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
<div id="use_panel">
|
||||
<div class="push_button" id="tool_unlink_use"
|
||||
title="Break link to reference element (make unique)"></div>
|
||||
</div>
|
||||
<div id="g_panel">
|
||||
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
|
||||
</div>
|
||||
<!-- For anchor elements -->
|
||||
<div id="a_panel">
|
||||
<label id="tool_link_url" title="Set link URL (leave empty to remove)">
|
||||
<span id="linkLabel" class="icon_label"></span>
|
||||
<input id="link_url" type="text" size="35"/>
|
||||
</label>
|
||||
</div>
|
||||
<div id="path_node_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<div id="tool_node_link" class="tool_button push_button_pressed"
|
||||
title="Link Control Points"></div>
|
||||
<div class="tool_sep"></div>
|
||||
<label id="tool_node_x">x:
|
||||
<input id="path_node_x" class="attr_changer"
|
||||
title="Change node's x coordinate" size="3" data-attr="x"/>
|
||||
</label>
|
||||
<label id="tool_node_y">y:
|
||||
<input id="path_node_y" class="attr_changer"
|
||||
title="Change node's y coordinate" size="3" data-attr="y"/>
|
||||
</label>
|
||||
<select id="seg_type" title="Change Segment type">
|
||||
<option id="straight_segments"
|
||||
selected="selected" value="4">Straight</option>
|
||||
<option id="curve_segments" value="6">Curve</option>
|
||||
</select>
|
||||
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
|
||||
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
|
||||
<div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
|
||||
<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
|
||||
</div>
|
||||
</div> <!-- tools_top -->
|
||||
<div id="cur_context_panel">
|
||||
</div>
|
||||
<div id="tools_left" class="tools_panel">
|
||||
<div class="tool_button" id="tool_select" title="Select Tool"></div>
|
||||
<div class="tool_button" id="tool_fhpath" title="Pencil Tool"></div>
|
||||
<div class="tool_button" id="tool_line" title="Line Tool"></div>
|
||||
<div id="tools_rect_show" class="tool_button flyout_current"
|
||||
title="Square/Rect Tool">
|
||||
<div class="flyout_arrow_horiz"></div>
|
||||
</div>
|
||||
<div id="tools_ellipse_show" class="tool_button flyout_current"
|
||||
title="Ellipse/Circle Tool">
|
||||
<div class="flyout_arrow_horiz"></div>
|
||||
</div>
|
||||
<div class="tool_button" id="tool_path" title="Path Tool"></div>
|
||||
<div class="tool_button" id="tool_text" title="Text Tool"></div>
|
||||
<div class="tool_button" id="tool_image" title="Image Tool"></div>
|
||||
<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
|
||||
<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 -->
|
||||
<div id="zoom_panel" class="toolset" title="Change zoom level">
|
||||
<label>
|
||||
<span id="zoomLabel" class="zoom_tool icon_label"></span>
|
||||
<input id="zoom" size="3" value="100" type="text"/>
|
||||
</label>
|
||||
<div id="zoom_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li>1000%</li>
|
||||
<li>400%</li>
|
||||
<li>200%</li>
|
||||
<li>100%</li>
|
||||
<li>50%</li>
|
||||
<li>25%</li>
|
||||
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
|
||||
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
|
||||
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
|
||||
<li id="fit_to_all" data-val="content">Fit to all content</li>
|
||||
<li>100%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tool_sep"></div>
|
||||
</div>
|
||||
<div id="tools_bottom_2">
|
||||
<div id="color_tools">
|
||||
<div class="color_tool" id="tool_fill">
|
||||
<label class="icon_label" for="fill_color" title="Change fill color"></label>
|
||||
<div class="color_block">
|
||||
<div id="fill_bg"></div>
|
||||
<div id="fill_color" class="color_block"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_tool" id="tool_stroke">
|
||||
<label class="icon_label" title="Change stroke color"></label>
|
||||
<div class="color_block">
|
||||
<div id="stroke_bg"></div>
|
||||
<div id="stroke_color" class="color_block" title="Change stroke color"></div>
|
||||
</div>
|
||||
<label class="stroke_label">
|
||||
<input id="stroke_width"
|
||||
title="Change stroke width by 1, shift-click to change by 0.1"
|
||||
size="2" value="5" type="text" data-attr="Stroke Width"/>
|
||||
</label>
|
||||
<div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
|
||||
<label class="stroke_tool">
|
||||
<select id="stroke_style" title="Change stroke dash style">
|
||||
<option selected="selected" value="none">—</option>
|
||||
<option value="2,2">...</option>
|
||||
<option value="5,5">- -</option>
|
||||
<option value="5,2,2,2">- .</option>
|
||||
<option value="5,2,2,2,2,2">- ..</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="stroke_tool dropdown" id="stroke_linejoin">
|
||||
<div id="cur_linejoin" title="Linejoin: Miter"></div>
|
||||
<button></button>
|
||||
</div>
|
||||
<div class="stroke_tool dropdown" id="stroke_linecap">
|
||||
<div id="cur_linecap" title="Linecap: Butt"></div>
|
||||
<button></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_tool" id="tool_opacity" title="Change selected item opacity">
|
||||
<label>
|
||||
<span id="group_opacityLabel" class="icon_label"></span>
|
||||
<input id="group_opacity" size="3" value="100" type="text"/>
|
||||
</label>
|
||||
<div id="opacity_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li>0%</li>
|
||||
<li>25%</li>
|
||||
<li>50%</li>
|
||||
<li>75%</li>
|
||||
<li>100%</li>
|
||||
<li class="special"><div id="opac_slider"></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tools_bottom_3">
|
||||
<div id="palette_holder">
|
||||
<div id="palette"
|
||||
title="Click to change fill color, shift-click to change stroke color">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="https://github.com/SVG-Edit/svgedit" target="_blank">SVG-edit v2.6-beta</a></div> -->
|
||||
</div>
|
||||
<div id="option_lists" class="dropdown">
|
||||
<ul id="linejoin_opts">
|
||||
<li class="tool_button current" id="linejoin_miter" title="Linejoin: Miter"></li>
|
||||
<li class="tool_button" id="linejoin_round" title="Linejoin: Round"></li>
|
||||
<li class="tool_button" id="linejoin_bevel" title="Linejoin: Bevel"></li>
|
||||
</ul>
|
||||
<ul id="linecap_opts">
|
||||
<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
|
||||
<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
|
||||
<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
|
||||
</ul>
|
||||
<ul id="position_opts" class="optcols3">
|
||||
<li class="push_button" id="tool_posleft" title="Align Left"></li>
|
||||
<li class="push_button" id="tool_poscenter" title="Align Center"></li>
|
||||
<li class="push_button" id="tool_posright" title="Align Right"></li>
|
||||
<li class="push_button" id="tool_postop" title="Align Top"></li>
|
||||
<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
|
||||
<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- hidden divs -->
|
||||
<div id="color_picker"></div>
|
||||
</div> <!-- svg_editor -->
|
||||
<div id="svg_source_editor">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_source_container">
|
||||
<div id="tool_source_back" class="toolbar_button">
|
||||
<button id="tool_source_save">Apply Changes</button>
|
||||
<button id="tool_source_cancel">Cancel</button>
|
||||
</div>
|
||||
<div id="save_output_btns">
|
||||
<p id="copy_save_note">
|
||||
Copy the contents of this box into a text editor,
|
||||
then save the file with a .svg extension.</p>
|
||||
<button id="copy_save_done">Done</button>
|
||||
</div>
|
||||
<form>
|
||||
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="svg_docprops">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_docprops_container">
|
||||
<div id="tool_docprops_back" class="toolbar_button">
|
||||
<button id="tool_docprops_save">OK</button>
|
||||
<button id="tool_docprops_cancel">Cancel</button>
|
||||
</div>
|
||||
<fieldset id="svg_docprops_docprops">
|
||||
<legend id="svginfo_image_props">Image Properties</legend>
|
||||
<label>
|
||||
<span id="svginfo_title">Title:</span>
|
||||
<input type="text" id="canvas_title"/>
|
||||
</label>
|
||||
<fieldset id="change_resolution">
|
||||
<legend id="svginfo_dim">Canvas Dimensions</legend>
|
||||
<label>
|
||||
<span id="svginfo_width">width:</span>
|
||||
<input type="text" id="canvas_width" size="6"/>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_height">height:</span>
|
||||
<input type="text" id="canvas_height" size="6"/>
|
||||
</label>
|
||||
<label>
|
||||
<select id="resolution">
|
||||
<option id="selectedPredefined"
|
||||
selected="selected">Select predefined:</option>
|
||||
<option>640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option id="fitToContent"
|
||||
value="content">Fit to Content</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="image_save_opts">
|
||||
<legend id="includedImages">Included Images</legend>
|
||||
<label>
|
||||
<input type="radio" name="image_opt" value="embed" checked="checked"/>
|
||||
<span id="image_opt_embed">Embed data (local files)</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="image_opt" value="ref"/>
|
||||
<span id="image_opt_ref">Use file reference</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="svg_prefs">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_prefs_container">
|
||||
<div id="tool_prefs_back" class="toolbar_button">
|
||||
<button id="tool_prefs_save">OK</button>
|
||||
<button id="tool_prefs_cancel">Cancel</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
|
||||
<label>
|
||||
<span id="svginfo_lang">Language:</span>
|
||||
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
|
||||
<select id="lang_select">
|
||||
<option id="lang_ar" value="ar">العربية</option>
|
||||
<option id="lang_cs" value="cs">Čeština</option>
|
||||
<option id="lang_de" value="de">Deutsch</option>
|
||||
<option id="lang_en" value="en" selected="selected">English</option>
|
||||
<option id="lang_es" value="es">Español</option>
|
||||
<option id="lang_fa" value="fa">فارسی</option>
|
||||
<option id="lang_fr" value="fr">Français</option>
|
||||
<option id="lang_fy" value="fy">Frysk</option>
|
||||
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
|
||||
<option id="lang_it" value="it">Italiano</option>
|
||||
<option id="lang_ja" value="ja">日本語</option>
|
||||
<option id="lang_nl" value="nl">Nederlands</option>
|
||||
<option id="lang_pl" value="pl">Polski</option>
|
||||
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
|
||||
<option id="lang_ro" value="ro">Română</option>
|
||||
<option id="lang_ru" value="ru">Русский</option>
|
||||
<option id="lang_sk" value="sk">Slovenčina</option>
|
||||
<option id="lang_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
|
||||
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_icons">Icon size:</span>
|
||||
<select id="iconsize">
|
||||
<option id="icon_small" value="s">Small</option>
|
||||
<option id="icon_medium" value="m" selected="selected">Medium</option>
|
||||
<option id="icon_large" value="l">Large</option>
|
||||
<option id="icon_xlarge" value="xl">Extra Large</option>
|
||||
</select>
|
||||
</label>
|
||||
<fieldset id="change_background">
|
||||
<legend id="svginfo_change_background">Editor Background</legend>
|
||||
<div id="bg_blocks"></div>
|
||||
<label>
|
||||
<span id="svginfo_bg_url">URL:</span>
|
||||
<input type="text" id="canvas_bg_url"/>
|
||||
</label>
|
||||
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
|
||||
</fieldset>
|
||||
<fieldset id="change_grid">
|
||||
<legend id="svginfo_grid_settings">Grid</legend>
|
||||
<label>
|
||||
<span id="svginfo_snap_onoff">Snapping on/off</span>
|
||||
<input type="checkbox" value="snapping_on" id="grid_snapping_on"/>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_snap_step">Snapping Step-Size:</span>
|
||||
<input type="text" id="grid_snapping_step" size="3" value="10"/>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_grid_color">Grid color:</span>
|
||||
<input type="text" id="grid_color" size="3" value="#000"/>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers">Units & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox"
|
||||
value="show_rulers" checked="checked"/>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_unit">Base Unit:</span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- Should this be an export option instead? -->
|
||||
<!--
|
||||
<span id="svginfo_unit_system">Unit System:</span>
|
||||
<label>
|
||||
<input type="radio" name="unit_system" value="single" checked="checked"/>
|
||||
<span id="svginfo_single_type_unit">Single type unit</span>
|
||||
<small id="svginfo_single_type_unit_sub">
|
||||
CSS unit type is set on root element.
|
||||
If a different unit type is entered in a text
|
||||
field, it is converted back to user units on export.
|
||||
</small>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="unit_system" value="multi"/>
|
||||
<span id="svginfo_multi_units">Multiple CSS units</span>
|
||||
<small id="svginfo_single_type_unit_sub">
|
||||
Attributes can be given different CSS units, which may
|
||||
lead to inconsistant results among viewers.
|
||||
</small>
|
||||
</label>
|
||||
-->
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialog_box">
|
||||
<div class="overlay"></div>
|
||||
<div id="dialog_container">
|
||||
<div id="dialog_content"></div>
|
||||
<div id="dialog_buttons"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="cmenu_canvas" class="contextMenu">
|
||||
<li><a href="#cut">Cut</a></li>
|
||||
<li><a href="#copy">Copy</a></li>
|
||||
<li><a href="#paste">Paste</a></li>
|
||||
<li><a href="#paste_in_place">Paste in Place</a></li>
|
||||
<li class="separator"><a href="#delete">Delete</a></li>
|
||||
<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
|
||||
<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
|
||||
<li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li>
|
||||
<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
|
||||
<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
|
||||
<li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li>
|
||||
</ul>
|
||||
<ul id="cmenu_layers" class="contextMenu">
|
||||
<li><a href="#dupe">Duplicate Layer...</a></li>
|
||||
<li><a href="#delete">Delete Layer</a></li>
|
||||
<li><a href="#merge_down">Merge Down</a></li>
|
||||
<li><a href="#merge_all">Merge All</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import svgEditor from './svg-editor.js';
|
||||
svgEditor.setConfig({
|
||||
allowedOrigins: ['*']
|
||||
});
|
||||
|
||||
// <CONDITIONAL-ADD>: window.svgEditor = svgEditor; // DO NOT DELETE THIS LINE: USED BY AUTOMATED SCRIPT
|
||||
// <CONDITIONAL-ADD>: window.svgEditor.modules = false; // DO NOT DELETE THIS LINE: USED BY AUTOMATED SCRIPT
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -40,6 +40,12 @@
|
|||
"integrity": "sha512-LAQ1d4OPfSJ/BMbI2DuizmYrrkD9JMaTdi2hQTlI53lQ4kRQPyZQRS4CYQ7O66bnBBnP/oYdRxbk++X0xuFU6A==",
|
||||
"dev": true
|
||||
},
|
||||
"@octetstream/promisify": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@octetstream/promisify/-/promisify-1.1.0.tgz",
|
||||
"integrity": "sha512-+ns1dHOaK4f8tvgf8uAkyuvdG+o9QkSQzLNU/a36cDPxKhORHCK0xNQ+GQb4ZOU8ouSS8akvfaKdJmZP5PrPow==",
|
||||
"dev": true
|
||||
},
|
||||
"@sinonjs/formatio": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
|
||||
|
|
@ -5177,6 +5183,15 @@
|
|||
"integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
|
||||
"dev": true
|
||||
},
|
||||
"promise-fs": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/promise-fs/-/promise-fs-1.3.0.tgz",
|
||||
"integrity": "sha512-CXT/dzuNzWDl9UoJ49MHgv5GqjLcOw5iq7laC3DfBjDRpDFVt3kal6Ar8rTafzEv1cS5BJIW/5o3tTKYHOcEtg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@octetstream/promisify": "1.1.0"
|
||||
}
|
||||
},
|
||||
"prr": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
"load-stylesheets": "^0.7.0",
|
||||
"node-static": "^0.7.10",
|
||||
"opn-cli": "^3.1.0",
|
||||
"promise-fs": "^1.3.0",
|
||||
"qunit": "^2.6.1",
|
||||
"rollup": "0.63.2",
|
||||
"rollup-plugin-babel": "^3.0.7",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,26 @@ import replace from 'rollup-plugin-re';
|
|||
// import {minify} from 'uglify-es';
|
||||
// import {uglify} from 'rollup-plugin-uglify';
|
||||
|
||||
const plugins = [
|
||||
replace({
|
||||
patterns: [
|
||||
{
|
||||
match: /svgedit-config-es\.js/,
|
||||
test: 'svgedit-config-es.js',
|
||||
replace: 'svgedit-config-iife.js'
|
||||
},
|
||||
{
|
||||
match: /svgedit-config-es\.js/,
|
||||
test: '// <CONDITIONAL-ADD>: ', // Sets `svgEditor` global for extensions/locales
|
||||
replace: ''
|
||||
}
|
||||
]
|
||||
}),
|
||||
babel({
|
||||
plugins: ['transform-object-rest-spread']
|
||||
})
|
||||
];
|
||||
|
||||
export default [
|
||||
{
|
||||
input: 'svgedit-config-es.js',
|
||||
|
|
@ -11,24 +31,14 @@ export default [
|
|||
format: 'iife',
|
||||
file: `svgedit-config-iife.js`
|
||||
},
|
||||
plugins: [
|
||||
replace({
|
||||
patterns: [
|
||||
{
|
||||
match: /svgedit-config-es\.js/,
|
||||
test: 'svgedit-config-es.js',
|
||||
replace: 'svgedit-config-iife.js'
|
||||
},
|
||||
{
|
||||
match: /svgedit-config-es\.js/,
|
||||
test: '// <CONDITIONAL-ADD>: ', // Sets `svgEditor` global for extensions/locales
|
||||
replace: ''
|
||||
}
|
||||
]
|
||||
}),
|
||||
babel({
|
||||
plugins: ['transform-object-rest-spread']
|
||||
})
|
||||
]
|
||||
plugins
|
||||
},
|
||||
{
|
||||
input: 'editor/xdomain-svgedit-config-es.js',
|
||||
output: {
|
||||
format: 'iife',
|
||||
file: `editor/xdomain-svgedit-config-iife.js`
|
||||
},
|
||||
plugins
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -13451,9 +13451,7 @@
|
|||
}
|
||||
|
||||
extensions[name] = extObj;
|
||||
call('extension_added', extObj);
|
||||
_context.next = 15;
|
||||
break;
|
||||
return _context.abrupt('return', call('extension_added', extObj));
|
||||
|
||||
case 14:
|
||||
console.log('Cannot add extension "' + name + '", an extension by that name already exists.');
|
||||
|
|
@ -20322,7 +20320,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
var setIcon = function setIcon(target, icon, id, setID) {
|
||||
function setIcon(target, icon, id, setID) {
|
||||
if (isOpera) icon.css('visibility', 'hidden');
|
||||
if (opts.replace) {
|
||||
if (setID) icon.attr('id', id);
|
||||
|
|
@ -20337,15 +20335,15 @@
|
|||
icon.removeAttr('style');
|
||||
}, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var holder = void 0;
|
||||
var addIcon = function addIcon(icon, id) {
|
||||
function addIcon(icon, id) {
|
||||
if (opts.id_match === undefined || opts.id_match !== false) {
|
||||
setIcon(holder, icon, id, true);
|
||||
}
|
||||
svgIcons[id] = icon;
|
||||
};
|
||||
}
|
||||
|
||||
function makeIcons(toImage, fallback) {
|
||||
if (iconsMade) return;
|
||||
|
|
@ -25763,6 +25761,11 @@
|
|||
*/
|
||||
function (win, data) {
|
||||
extensionsAdded = true;
|
||||
Actions.setAll();
|
||||
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
|
||||
});
|
||||
messageQueue.forEach(
|
||||
/**
|
||||
* @param {module:svgcanvas.SvgCanvas#event:message} messageObj
|
||||
|
|
@ -25801,9 +25804,13 @@
|
|||
var setFlyoutPositions = function setFlyoutPositions() {
|
||||
$$b('.tools_flyout').each(function () {
|
||||
var shower = $$b('#' + this.id + '_show');
|
||||
var pos = shower.offset();
|
||||
|
||||
var _shower$offset = shower.offset(),
|
||||
left = _shower$offset.left,
|
||||
top = _shower$offset.top;
|
||||
|
||||
var w = shower.outerWidth();
|
||||
$$b(this).css({ left: (pos.left + w) * editor.tool_scale, top: pos.top });
|
||||
$$b(this).css({ left: (left + w) * editor.tool_scale, top: top });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -26297,12 +26304,6 @@
|
|||
} }).then(function () {
|
||||
$$b('#svg_container')[0].style.visibility = 'visible';
|
||||
editor.runCallbacks();
|
||||
|
||||
setTimeout(function () {
|
||||
$$b('.flyout_arrow_horiz:empty').each(function () {
|
||||
$$b(this).append($$b.getSvgIcon('arrow_right').width(5).height(5));
|
||||
});
|
||||
}, 1);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -27695,47 +27696,84 @@
|
|||
return;
|
||||
}
|
||||
|
||||
var tooltips = [];
|
||||
$$b(this).children().each(function () {
|
||||
tooltips.push(this.title);
|
||||
});
|
||||
var tooltips = $$b(this).children().map(function () {
|
||||
return this.title;
|
||||
}).get();
|
||||
shower[0].title = tooltips.join(' / ');
|
||||
});
|
||||
};
|
||||
|
||||
var allHolders = {};
|
||||
/**
|
||||
* @param {Object.<string, module:SVGEditor.ToolButton>} holders Key is a selector
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var setupFlyouts = function setupFlyouts(holders) {
|
||||
$$b.each(holders, function (holdSel, btnOpts) {
|
||||
var buttons = $$b(holdSel).children();
|
||||
var _allHolders$holdSel;
|
||||
|
||||
if (!allHolders[holdSel]) {
|
||||
allHolders[holdSel] = [];
|
||||
}
|
||||
(_allHolders$holdSel = allHolders[holdSel]).push.apply(_allHolders$holdSel, toConsumableArray(btnOpts));
|
||||
|
||||
var buttons = $$b(holdSel).children().not('.tool_button_evt_handled');
|
||||
var showSel = holdSel + '_show';
|
||||
var shower = $$b(showSel);
|
||||
var def = false;
|
||||
buttons.addClass('tool_button').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function (i) {
|
||||
// Get this buttons options
|
||||
var opts = btnOpts[i];
|
||||
buttons.addClass('tool_button tool_button_evt_handled').unbind('click mousedown mouseup') // may not be necessary
|
||||
.each(function () {
|
||||
// Get this button's options
|
||||
var idSel = '#' + this.getAttribute('id');
|
||||
|
||||
var _Object$entries$find = Object.entries(btnOpts).find(function (_ref10) {
|
||||
var _ref11 = slicedToArray(_ref10, 2),
|
||||
i = _ref11[0],
|
||||
sel = _ref11[1].sel;
|
||||
|
||||
return sel === idSel;
|
||||
}),
|
||||
_Object$entries$find2 = slicedToArray(_Object$entries$find, 2),
|
||||
i = _Object$entries$find2[0],
|
||||
opts = _Object$entries$find2[1];
|
||||
|
||||
// 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
|
||||
var func = function func(event) {
|
||||
/**
|
||||
* Clicking the icon in flyout should set this set's icon
|
||||
* @param {Event} ev
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var flyoutAction = function flyoutAction(ev) {
|
||||
var options = opts;
|
||||
// Find the currently selected tool if comes from keystroke
|
||||
if (event.type === 'keydown') {
|
||||
if (ev.type === 'keydown') {
|
||||
var flyoutIsSelected = $$b(options.parent + '_show').hasClass('tool_button_current');
|
||||
var currentOperation = $$b(options.parent + '_show').attr('data-curopt');
|
||||
$$b.each(holders[opts.parent], function (i, tool) {
|
||||
if (tool.sel === currentOperation) {
|
||||
if (!event.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
options = holders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
Object.entries(holders[opts.parent]).some(function (_ref12) {
|
||||
var _ref13 = slicedToArray(_ref12, 2),
|
||||
i = _ref13[0],
|
||||
tool = _ref13[1];
|
||||
|
||||
if (tool.sel !== currentOperation) {
|
||||
return;
|
||||
}
|
||||
if (!ev.shiftKey || !flyoutIsSelected) {
|
||||
options = tool;
|
||||
} else {
|
||||
// If flyout is selected, allow shift key to iterate through subitems
|
||||
i = parseInt(i, 10);
|
||||
// Use `allHolders` to include both extension `includeWith` and toolbarButtons
|
||||
options = allHolders[opts.parent][i + 1] || holders[opts.parent][0];
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
if ($$b(this).hasClass('disabled')) {
|
||||
|
|
@ -27757,10 +27795,10 @@
|
|||
shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
|
||||
};
|
||||
|
||||
$$b(this).mouseup(func);
|
||||
$$b(this).mouseup(flyoutAction);
|
||||
|
||||
if (opts.key) {
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], func);
|
||||
$$b(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -27887,7 +27925,7 @@
|
|||
* @param {external:Window} win
|
||||
* @param {module:svgcanvas.SvgCanvas#event:extension_added} ext
|
||||
* @listens module:svgcanvas.SvgCanvas#event:extension_added
|
||||
* @returns {undefined}
|
||||
* @returns {Promise} Resolves to `undefined`
|
||||
*/
|
||||
var extAdded = function extAdded(win, ext) {
|
||||
if (!ext) {
|
||||
|
|
@ -28039,8 +28077,9 @@
|
|||
|
||||
/**
|
||||
* @typedef {GenericArray} module:SVGEditor.KeyArray
|
||||
* @property {string} 0
|
||||
* @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
|
||||
|
|
@ -28064,7 +28103,7 @@
|
|||
* @property {module:SVGEditor.Key} [key] The key to bind to the button
|
||||
*/
|
||||
// Add buttons given by extension
|
||||
$$b.each(ext.buttons, function (i, btn) {
|
||||
$$b.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */btn) {
|
||||
var id = btn.id;
|
||||
|
||||
var num = i;
|
||||
|
|
@ -28159,7 +28198,7 @@
|
|||
icon: btn.id,
|
||||
// key: btn.key,
|
||||
isDefault: true
|
||||
}, refData];
|
||||
}]; // , refData
|
||||
//
|
||||
// // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
//
|
||||
|
|
@ -28200,7 +28239,6 @@
|
|||
showBtn = refBtn.clone().attr('id', _tlsId + '_show').append($$b('<div>', { class: 'flyout_arrow_horiz' }));
|
||||
|
||||
refBtn.before(showBtn);
|
||||
|
||||
// Create a flyout div
|
||||
flyoutHolder = makeFlyoutHolder(_tlsId, refBtn);
|
||||
}
|
||||
|
|
@ -28218,7 +28256,7 @@
|
|||
fn: btn.events.click,
|
||||
icon: btn.id,
|
||||
key: btn.key,
|
||||
isDefault: btn.includeWith ? btn.includeWith.isDefault : 0
|
||||
isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
|
||||
}, refData];
|
||||
|
||||
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
|
||||
|
|
@ -28272,26 +28310,27 @@
|
|||
});
|
||||
|
||||
if (svgicons) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
return new Promise(function (resolve, reject) {
|
||||
$$b.svgIcons(svgicons, {
|
||||
w: 24, h: 24,
|
||||
id_match: false,
|
||||
no_img: !isWebkit(),
|
||||
fallback: fallbackObj,
|
||||
placement: placementObj,
|
||||
callback: function callback(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
// if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
|
||||
if ($$b.pref('iconsize') !== 'm') {
|
||||
prepResize();
|
||||
}
|
||||
runCallback();
|
||||
resolve();
|
||||
}
|
||||
runCallback();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!svgicons) {
|
||||
runCallback();
|
||||
}
|
||||
return runCallback();
|
||||
};
|
||||
|
||||
var getPaint = function getPaint(color, opac, type) {
|
||||
|
|
@ -28344,9 +28383,9 @@
|
|||
* @listens module:svgcanvas.SvgCanvas#event:updateCanvas
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function (win, _ref10) {
|
||||
var center = _ref10.center,
|
||||
newCtr = _ref10.newCtr;
|
||||
function (win, _ref14) {
|
||||
var center = _ref14.center,
|
||||
newCtr = _ref14.newCtr;
|
||||
|
||||
updateCanvas(center, newCtr);
|
||||
});
|
||||
|
|
@ -29953,8 +29992,11 @@
|
|||
changeSidePanelWidth(deltaX);
|
||||
};
|
||||
|
||||
// if width is non-zero, then fully close it, otherwise fully open it
|
||||
// the optional close argument forces the side panel closed
|
||||
/**
|
||||
* If width is non-zero, then fully close it, otherwise fully open it
|
||||
* @param {boolean} close Forces the side panel closed
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var toggleSidePanel = function toggleSidePanel(close) {
|
||||
var w = $$b('#sidepanels').width();
|
||||
var deltaX = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
|
||||
|
|
@ -30074,20 +30116,46 @@
|
|||
// Prevent browser from erroneously repopulating fields
|
||||
$$b('input,select').attr('autocomplete', 'off');
|
||||
|
||||
// Associate all button actions as well as non-button keyboard shortcuts
|
||||
/**
|
||||
* Associate all button actions as well as non-button keyboard shortcuts
|
||||
* @namespace {PlainObject} module:SVGEditor~Actions
|
||||
*/
|
||||
var Actions = function () {
|
||||
// sel:'selector', fn:function, evt:'event', key:[key, preventDefault, NoDisableInInput]
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true] }, { sel: '#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect' }, { sel: '#tool_square', fn: clickSquare, evt: 'mouseup', parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup', parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup', key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup', parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup', parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
/**
|
||||
* @typedef {PlainObject} module:SVGEditor.ToolButton
|
||||
* @property {string} sel The CSS selector for the tool
|
||||
* @property {external:jQuery.Function} fn A handler to be attached to the `evt`
|
||||
* @property {string} evt The event for which the `fn` listener will be added
|
||||
* @property {module:SVGEditor.Key} [key] [key, preventDefault, NoDisableInInput]
|
||||
* @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
|
||||
*/
|
||||
/**
|
||||
*
|
||||
* @name module:SVGEditor~ToolButtons
|
||||
* @type {module:SVGEditor.ToolButton[]}
|
||||
*/
|
||||
var toolButtons = [{ sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true] }, { sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true] }, { 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',
|
||||
parent: '#tools_rect', icon: 'square' }, { sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',
|
||||
parent: '#tools_rect', icon: 'fh_rect' }, { sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',
|
||||
key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse' }, { sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'circle' }, { sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',
|
||||
parent: '#tools_ellipse', icon: 'fh_ellipse' }, { sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true] }, { sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true] }, { sel: '#tool_image', fn: clickImage, evt: 'mouseup' }, { sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true] }, { sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true] }, { sel: '#tool_save', fn: function fn() {
|
||||
if (editingsource) {
|
||||
saveSourceEditor();
|
||||
} else {
|
||||
clickSave();
|
||||
}
|
||||
},
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
evt: 'mouseup', key: ['S', true] }, { sel: '#tool_export', fn: clickExport, evt: 'mouseup' }, { sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true] }, { sel: '#tool_import', fn: clickImport, evt: 'mouseup' }, { sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true] }, { sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true] }, { sel: '#tool_source_cancel,.overlay,#tool_docprops_cancel,#tool_prefs_cancel',
|
||||
fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true }, { sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click' }, { sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click' }, { sel: '#tool_docprops', fn: showDocProperties, evt: 'mouseup' }, { sel: '#tool_prefs_save', fn: savePreferences, evt: 'click' }, { sel: '#tool_prefs_option', fn: function fn() {
|
||||
showPreferences();return false;
|
||||
},
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
evt: 'mouseup' }, { sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,
|
||||
evt: 'click', key: ['del/backspace', true] }, { sel: '#tool_reorient', fn: reorientPath, evt: 'click' }, { sel: '#tool_node_link', fn: linkControlPoints, evt: 'click' }, { sel: '#tool_node_clone', fn: clonePathNode, evt: 'click' }, { sel: '#tool_node_delete', fn: deletePathNode, evt: 'click' }, { sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click' }, { sel: '#tool_add_subpath', fn: addSubPath, evt: 'click' }, { sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]' }, { sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+[' }, { sel: '#tool_topath', fn: convertToPath$$1, evt: 'click' }, { sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click' }, { sel: '#tool_undo', fn: clickUndo, evt: 'click' }, { sel: '#tool_redo', fn: clickRedo, evt: 'click' }, { sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true] }, { sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true] }, { sel: '#tool_ungroup', fn: clickGroup, evt: 'click' }, { sel: '#tool_unlink_use', fn: clickGroup, evt: 'click' }, { sel: '[id^=tool_align]', fn: clickAlign, evt: 'click' },
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
// {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
|
||||
// {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
|
||||
|
|
@ -30182,6 +30250,10 @@
|
|||
};
|
||||
|
||||
return {
|
||||
/** @lends module:SVGEditor~Actions */
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setAll: function setAll() {
|
||||
var flyouts = {};
|
||||
|
||||
|
|
@ -30206,8 +30278,10 @@
|
|||
if (!fH.length) {
|
||||
fH = makeFlyoutHolder(opts.parent.substr(1));
|
||||
}
|
||||
|
||||
fH.append(btn);
|
||||
if (opts.prepend) {
|
||||
btn[0].style.margin = 'initial';
|
||||
}
|
||||
fH[opts.prepend ? 'prepend' : 'append'](btn);
|
||||
|
||||
if (!Array.isArray(flyouts[opts.parent])) {
|
||||
flyouts[opts.parent] = [];
|
||||
|
|
@ -30284,6 +30358,10 @@
|
|||
|
||||
$$b('#tool_zoom').dblclick(dblclickZoom);
|
||||
},
|
||||
|
||||
/**
|
||||
* @returns {undefined}
|
||||
*/
|
||||
setTitles: function setTitles() {
|
||||
$$b.each(keyAssocs, function (keyval, sel) {
|
||||
var menu = $$b(sel).parents('#main_menu').length;
|
||||
|
|
@ -30314,20 +30392,19 @@
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} sel Selector to match
|
||||
* @returns {module:SVGEditor.ToolButton}
|
||||
*/
|
||||
getButtonData: function getButtonData(sel) {
|
||||
var b = void 0;
|
||||
$$b.each(toolButtons, function (i, btn) {
|
||||
if (btn.sel === sel) {
|
||||
b = btn;
|
||||
}
|
||||
return Object.values(toolButtons).find(function (btn) {
|
||||
return btn.sel === sel;
|
||||
});
|
||||
return b;
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
Actions.setAll();
|
||||
|
||||
// Select given tool
|
||||
editor.ready(function () {
|
||||
var tool = void 0;
|
||||
|
|
@ -30920,9 +30997,9 @@
|
|||
* @fires module:svgcanvas.SvgCanvas#event:message
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var messageListener = function messageListener(_ref11) {
|
||||
var data = _ref11.data,
|
||||
origin = _ref11.origin;
|
||||
var messageListener = function messageListener(_ref15) {
|
||||
var data = _ref15.data,
|
||||
origin = _ref15.origin;
|
||||
|
||||
// console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);
|
||||
var messageObj = { data: data, origin: origin };
|
||||
|
|
|
|||
Loading…
Reference in New Issue