Merge pull request #78 from OptimistikSAS/issue/77

#77 short key issue, console error and svg button issue fixed
master
JFH 2021-02-25 23:40:35 +01:00 committed by GitHub
commit 041c99a5c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 46 deletions

View File

@ -95,39 +95,42 @@ class Editor extends EditorStartup {
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
this.goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW']; this.goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW'];
const modKey = (isMac() ? 'meta+' : 'ctrl+'); const modKey = (isMac() ? 'meta+' : 'ctrl+');
const curObj = this;
this.toolButtons = [ this.toolButtons = [
// Shortcuts not associated with buttons // Shortcuts not associated with buttons
{key: 'ctrl+left', fn () { this.rotateSelected(0, 1); }}, {key: 'ctrl+arrowleft', fn () { curObj.rotateSelected(0, 1);}},
{key: 'ctrl+right', fn () { this.rotateSelected(1, 1); }}, {key: 'ctrl+arrowright', fn () { curObj.rotateSelected(1, 1); }},
{key: 'ctrl+shift+left', fn () { this.rotateSelected(0, 5); }}, {key: 'ctrl+shift+arrowleft', fn () { curObj.rotateSelected(0, 5); }},
{key: 'ctrl+shift+right', fn () { this.rotateSelected(1, 5); }}, {key: 'ctrl+shift+arrowright', fn () { curObj.rotateSelected(1, 5); }},
{key: 'shift+O', fn: this.selectPrev}, {key: 'shift+o', fn () { curObj.svgCanvas.cycleElement(0); }},
{key: 'shift+P', fn: this.selectNext}, {key: 'shift+p', fn () { curObj.svgCanvas.cycleElement(1); }},
{key: [modKey + 'up', true], fn () { this.zoomImage(2); }}, {key: 'tab', fn () { curObj.svgCanvas.cycleElement(0); }},
{key: [modKey + 'down', true], fn () { this.zoomImage(0.5); }}, {key: 'shift+tab', fn () { curObj.svgCanvas.cycleElement(1); }},
{key: [modKey + ']', true], fn () { this.moveUpDownSelected('Up'); }}, {key: [modKey + 'arrowup', true], fn () { curObj.zoomImage(2); }},
{key: [modKey + '[', true], fn () { this.moveUpDownSelected('Down'); }}, {key: [modKey + 'arrowdown', true], fn () { curObj.zoomImage(0.5); }},
{key: ['up', true], fn () { this.moveSelected(0, -1); }}, {key: [modKey + ']', true], fn () { curObj.moveUpDownSelected('Up'); }},
{key: ['down', true], fn () { this.moveSelected(0, 1); }}, {key: [modKey + '[', true], fn () { curObj.moveUpDownSelected('Down'); }},
{key: ['left', true], fn () { this.moveSelected(-1, 0); }}, {key: ['arrowup', true], fn () { curObj.moveSelected(0, -1); }},
{key: ['right', true], fn () { this.moveSelected(1, 0); }}, {key: ['arrowdown', true], fn () { curObj.moveSelected(0, 1); }},
{key: 'shift+up', fn () { this.moveSelected(0, -10); }}, {key: ['arrowleft', true], fn () { curObj.moveSelected(-1, 0); }},
{key: 'shift+down', fn () { this.moveSelected(0, 10); }}, {key: ['arrowright', true], fn () { curObj.moveSelected(1, 0); }},
{key: 'shift+left', fn () { this.moveSelected(-10, 0); }}, {key: 'shift+arrowup', fn () { curObj.moveSelected(0, -10); }},
{key: 'shift+right', fn () { this.moveSelected(10, 0); }}, {key: 'shift+arrowdown', fn () { curObj.moveSelected(0, 10); }},
{key: ['alt+up', true], fn () { this.svgCanvas.cloneSelectedElements(0, -1); }}, {key: 'shift+arrowleft', fn () { curObj.moveSelected(-10, 0); }},
{key: ['alt+down', true], fn () { this.svgCanvas.cloneSelectedElements(0, 1); }}, {key: 'shift+arrowright', fn () { curObj.moveSelected(10, 0); }},
{key: ['alt+left', true], fn () { this.svgCanvas.cloneSelectedElements(-1, 0); }}, {key: ['alt+arrowup', true], fn () { curObj.svgCanvas.cloneSelectedElements(0, -1); }},
{key: ['alt+right', true], fn () { this.svgCanvas.cloneSelectedElements(1, 0); }}, {key: ['alt+arrowdown', true], fn () { curObj.svgCanvas.cloneSelectedElements(0, 1); }},
{key: ['alt+shift+up', true], fn () { this.svgCanvas.cloneSelectedElements(0, -10); }}, {key: ['alt+arrowleft', true], fn () { curObj.svgCanvas.cloneSelectedElements(-1, 0); }},
{key: ['alt+shift+down', true], fn () { this.svgCanvas.cloneSelectedElements(0, 10); }}, {key: ['alt+arrowright', true], fn () { curObj.svgCanvas.cloneSelectedElements(1, 0); }},
{key: ['alt+shift+left', true], fn () { this.svgCanvas.cloneSelectedElements(-10, 0); }}, {key: ['alt+shift+arrowup', true], fn () { curObj.svgCanvas.cloneSelectedElements(0, -10); }},
{key: ['alt+shift+right', true], fn () { this.svgCanvas.cloneSelectedElements(10, 0); }}, {key: ['alt+shift+arrowdown', true], fn () { curObj.svgCanvas.cloneSelectedElements(0, 10); }},
{key: 'a', fn () { this.svgCanvas.selectAllInCurrentLayer(); }}, {key: ['alt+shift+arrowleft', true], fn () { curObj.svgCanvas.cloneSelectedElements(-10, 0); }},
{key: modKey + 'a', fn () { this.svgCanvas.selectAllInCurrentLayer(); }}, {key: ['alt+shift+arrowright', true], fn () { curObj.svgCanvas.cloneSelectedElements(10, 0); }},
{key: modKey + 'x', fn: this.cutSelected}, {key: 'a', fn () { curObj.svgCanvas.selectAllInCurrentLayer(); }},
{key: modKey + 'c', fn: this.copySelected}, {key: modKey + 'a', fn () { curObj.svgCanvas.selectAllInCurrentLayer(); }},
{key: modKey + 'v', fn: this.pasteInCenter} {key: modKey + 'x', fn () { curObj.cutSelected(); }},
{key: modKey + 'c', fn () { curObj.copySelected(); }},
{key: modKey + 'v', fn () { curObj.pasteInCenter(); }}
]; ];
} }
/** /**
@ -259,7 +262,7 @@ class Editor extends EditorStartup {
// only track keyboard shortcuts for the body containing the SVG-Editor // only track keyboard shortcuts for the body containing the SVG-Editor
if (e.target.nodeName !== 'BODY') return; if (e.target.nodeName !== 'BODY') return;
// normalize key // normalize key
const key = `${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toLowerCase()}`; const key = `${(e.altKey) ? 'alt+' : ''}${(e.shiftKey) ? 'shift+' : ''}${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toLowerCase()}`;
// return if no shortcut defined for this key // return if no shortcut defined for this key
if (!keyHandler[key]) return; if (!keyHandler[key]) return;
// launch associated handler and preventDefault if necessary // launch associated handler and preventDefault if necessary
@ -280,18 +283,6 @@ class Editor extends EditorStartup {
evt.preventDefault(); evt.preventDefault();
} }
); );
$(window).bind('keydown', 'tab', function (e) {
if (this.uiContext === 'canvas') {
e.preventDefault();
this.selectNext();
}
}.bind(this)).bind('keydown', 'shift+tab', function (e) {
if (this.uiContext === 'canvas') {
e.preventDefault();
this.selectPrev();
}
}.bind(this));
} }
/** /**
* @returns {void} * @returns {void}
@ -887,6 +878,7 @@ class Editor extends EditorStartup {
*/ */
setupFlyouts (holders) { setupFlyouts (holders) {
const allHolders = {}; const allHolders = {};
const currentObj = this;
$.each(holders, function (holdSel, btnOpts) { $.each(holders, function (holdSel, btnOpts) {
if (!allHolders[holdSel]) { if (!allHolders[holdSel]) {
allHolders[holdSel] = []; allHolders[holdSel] = [];
@ -907,7 +899,7 @@ class Editor extends EditorStartup {
}); });
// Remember the function that goes with this ID // Remember the function that goes with this ID
this.flyoutFuncs[opts.sel] = opts.fn; currentObj.flyoutFuncs[opts.sel] = opts.fn;
if (opts.isDefault) { def = i; } if (opts.isDefault) { def = i; }

View File

@ -75,7 +75,7 @@ export const svgCanvasToString = function () {
const nakedSvgs = []; const nakedSvgs = [];
// Unwrap gsvg if it has no special attributes (only id and style) // Unwrap gsvg if it has no special attributes (only id and style)
$(svgContext_.getSVGContent()).find('g:data(gsvg)').each(function () { $(svgContext_.getSVGContent()).find('g[data-gsvg]').each(function () {
const attrs = this.attributes; const attrs = this.attributes;
let len = attrs.length; let len = attrs.length;
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {