Skip to content

Commit

Permalink
Bottom panel styling, palette is more adaptive to screenwidth, popup …
Browse files Browse the repository at this point in the history 
…palette
  • Loading branch information
@olekhshch
olekhshch committed Dec 21, 2023
1 parent 2f9f6e2 commit 83d54ff
Show file tree
Hide file tree
Showing 5 changed files with 491 additions and 134 deletions.
300 changes: 245 additions & 55 deletions src/editor/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,49 +71,240 @@ class Editor extends EditorStartup {
this.docprops = false
this.configObj.preferences = false
this.canvMenu = null
this.goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'sv', 'tr', 'uk', 'zh-CN', 'zh-TW']
const modKey = (isMac() ? 'meta+' : 'ctrl+')
this.goodLangs = [
'ar',
'cs',
'de',
'en',
'es',
'fa',
'fr',
'fy',
'hi',
'it',
'ja',
'nl',
'pl',
'pt-BR',
'ro',
'ru',
'sk',
'sl',
'sv',
'tr',
'uk',
'zh-CN',
'zh-TW'
]
const modKey = isMac() ? 'meta+' : 'ctrl+'
this.shortcuts = [
// Shortcuts not associated with buttons
{ key: 'ctrl+arrowleft', fn: () => { this.rotateSelected(0, 1) } },
{ key: 'ctrl+arrowright', fn: () => { this.rotateSelected(1, 1) } },
{ key: 'ctrl+shift+arrowleft', fn: () => { this.rotateSelected(0, 5) } },
{ key: 'ctrl+shift+arrowright', fn: () => { this.rotateSelected(1, 5) } },
{ key: 'shift+o', fn: () => { this.svgCanvas.cycleElement(0) } },
{ key: 'shift+p', fn: () => { this.svgCanvas.cycleElement(1) } },
{ key: 'tab', fn: () => { this.svgCanvas.cycleElement(0) } },
{ key: 'shift+tab', fn: () => { this.svgCanvas.cycleElement(1) } },
{ key: [modKey + 'arrowup', true], fn: () => { this.zoomImage(2) } },
{ key: [modKey + 'arrowdown', true], fn: () => { this.zoomImage(0.5) } },
{ key: [modKey + ']', true], fn: () => { this.moveUpDownSelected('Up') } },
{ key: [modKey + '[', true], fn: () => { this.moveUpDownSelected('Down') } },
{ key: ['arrowup', true], fn: () => { this.moveSelected(0, -1) } },
{ key: ['arrowdown', true], fn: () => { this.moveSelected(0, 1) } },
{ key: ['arrowleft', true], fn: () => { this.moveSelected(-1, 0) } },
{ key: ['arrowright', true], fn: () => { this.moveSelected(1, 0) } },
{ key: 'shift+arrowup', fn: () => { this.moveSelected(0, -10) } },
{ key: 'shift+arrowdown', fn: () => { this.moveSelected(0, 10) } },
{ key: 'shift+arrowleft', fn: () => { this.moveSelected(-10, 0) } },
{ key: 'shift+arrowright', fn: () => { this.moveSelected(10, 0) } },
{ key: ['alt+arrowup', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, -1) } },
{ key: ['alt+arrowdown', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, 1) } },
{ key: ['alt+arrowleft', true], fn: () => { this.svgCanvas.cloneSelectedElements(-1, 0) } },
{ key: ['alt+arrowright', true], fn: () => { this.svgCanvas.cloneSelectedElements(1, 0) } },
{ key: ['alt+shift+arrowup', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, -10) } },
{ key: ['alt+shift+arrowdown', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, 10) } },
{ key: ['alt+shift+arrowleft', true], fn: () => { this.svgCanvas.cloneSelectedElements(-10, 0) } },
{ key: ['alt+shift+arrowright', true], fn: () => { this.svgCanvas.cloneSelectedElements(10, 0) } },
{
key: ['ctrl+arrowleft', true],
fn: () => {
this.rotateSelected(0, 1)
}
},
{
key: 'ctrl+arrowright',
fn: () => {
this.rotateSelected(1, 1)
}
},
{
key: ['ctrl+shift+arrowleft', true],
fn: () => {
this.rotateSelected(0, 5)
}
},
{
key: 'ctrl+shift+arrowright',
fn: () => {
this.rotateSelected(1, 5)
}
},
{
key: 'shift+o',
fn: () => {
this.svgCanvas.cycleElement(0)
}
},
{
key: 'shift+p',
fn: () => {
this.svgCanvas.cycleElement(1)
}
},
{
key: 'tab',
fn: () => {
this.svgCanvas.cycleElement(0)
}
},
{
key: 'shift+tab',
fn: () => {
this.svgCanvas.cycleElement(1)
}
},
{
key: [modKey + 'arrowup', true],
fn: () => {
this.zoomImage(2)
}
},
{
key: [modKey + 'arrowdown', true],
fn: () => {
this.zoomImage(0.5)
}
},
{
key: [modKey + ']', true],
fn: () => {
this.moveUpDownSelected('Up')
}
},
{
key: [modKey + '[', true],
fn: () => {
this.moveUpDownSelected('Down')
}
},
{
key: ['arrowup', true],
fn: () => {
this.moveSelected(0, -1)
}
},
{
key: ['arrowdown', true],
fn: () => {
this.moveSelected(0, 1)
}
},
{
key: ['arrowleft', true],
fn: () => {
this.moveSelected(-1, 0)
}
},
{
key: ['arrowright', true],
fn: () => {
this.moveSelected(1, 0)
}
},
{
key: 'shift+arrowup',
fn: () => {
this.moveSelected(0, -10)
}
},
{
key: 'shift+arrowdown',
fn: () => {
this.moveSelected(0, 10)
}
},
{
key: 'shift+arrowleft',
fn: () => {
this.moveSelected(-10, 0)
}
},
{
key: 'shift+arrowright',
fn: () => {
this.moveSelected(10, 0)
}
},
{
key: ['alt+arrowup', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(0, -1)
}
},
{
key: ['alt+arrowdown', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(0, 1)
}
},
{
key: ['alt+arrowleft', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(-1, 0)
}
},
{
key: ['alt+arrowright', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(1, 0)
}
},
{
key: ['alt+shift+arrowup', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(0, -10)
}
},
{
key: ['alt+shift+arrowdown', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(0, 10)
}
},
{
key: ['alt+shift+arrowleft', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(-10, 0)
}
},
{
key: ['alt+shift+arrowright', true],
fn: () => {
this.svgCanvas.cloneSelectedElements(10, 0)
}
},
{
key: ['delete/backspace', true],
fn: () => {
if (this.selectedElement || this.multiselected) { this.svgCanvas.deleteSelectedElements() }
if (this.selectedElement || this.multiselected) {
this.svgCanvas.deleteSelectedElements()
}
}
},
{
key: 'a',
fn: () => {
this.svgCanvas.selectAllInCurrentLayer()
}
},
{
key: [modKey + 'a', true],
fn: () => {
this.svgCanvas.selectAllInCurrentLayer()
}
},
{ key: 'a', fn: () => { this.svgCanvas.selectAllInCurrentLayer() } },
{ key: modKey + 'a', fn: () => { this.svgCanvas.selectAllInCurrentLayer() } },
{ key: modKey + 'x', fn: () => { this.cutSelected() } },
{ key: modKey + 'c', fn: () => { this.copySelected() } },
{ key: modKey + 'v', fn: () => { this.pasteInCenter() } }
{
key: modKey + 'x',
fn: () => {
this.cutSelected()
}
},
{
key: modKey + 'c',
fn: () => {
this.copySelected()
}
},
{
key: modKey + 'v',
fn: () => {
this.pasteInCenter()
}
}
]
this.leftPanel = new LeftPanel(this)
this.bottomPanel = new BottomPanel(this)
Expand Down Expand Up @@ -204,7 +395,7 @@ class Editor extends EditorStartup {
setAll () {
const keyHandler = {} // will contain the action for each pressed key

this.shortcuts.forEach(shortcut => {
this.shortcuts.forEach((shortcut) => {
// Bind function to shortcut key
if (shortcut.key) {
// Set shortcut based on options
Expand All @@ -218,14 +409,14 @@ class Editor extends EditorStartup {
}
keyval = String(keyval)
const { fn } = shortcut
keyval.split('/').forEach(key => {
keyval.split('/').forEach((key) => {
keyHandler[key] = { fn, pd }
})
}
return true
})
// register the keydown event
document.addEventListener('keydown', e => {
document.addEventListener('keydown', (e) => {
// only track keyboard shortcuts for the body containing the SVG-Editor
if (e.target.nodeName !== 'BODY') return
// normalize key
Expand Down Expand Up @@ -282,7 +473,7 @@ class Editor extends EditorStartup {
* @returns {module:SVGthis.ToolButton}
*/
getButtonData (sel) {
return Object.values(this.shortcuts).find(btn => {
return Object.values(this.shortcuts).find((btn) => {
return btn.sel === sel
})
}
Expand Down Expand Up @@ -350,7 +541,9 @@ class Editor extends EditorStartup {
const { workarea } = this
const cnvs = $id('svgcanvas')

let w = parseFloat(getComputedStyle(workarea, null).width.replace('px', ''))
let w = parseFloat(
getComputedStyle(workarea, null).width.replace('px', '')
)
let h = parseFloat(
getComputedStyle(workarea, null).height.replace('px', '')
)
Expand Down Expand Up @@ -444,9 +637,8 @@ class Editor extends EditorStartup {
}
`
if (document.querySelectorAll('#wireframe_rules').length > 0) {
document.querySelector(
'#wireframe_rules'
).textContent = this.workarea.classList.contains('wireframe') ? rule : ''
document.querySelector('#wireframe_rules').textContent =
this.workarea.classList.contains('wireframe') ? rule : ''
}
}

Expand Down Expand Up @@ -538,7 +730,7 @@ class Editor extends EditorStartup {
this.leftPanel.clickSelect()
}

elems.forEach(elem => {
elems.forEach((elem) => {
const isSvgElem = elem?.tagName === 'svg'
if (isSvgElem || this.svgCanvas.isLayer(elem)) {
this.layersPanel.populateLayers()
Expand Down Expand Up @@ -593,18 +785,14 @@ class Editor extends EditorStartup {
* @returns {void}
*/
afterClear (win) {
this.svgCanvas.runExtensions(
'afterClear'
)
this.svgCanvas.runExtensions('afterClear')
}

/**
* @returns {void}
*/
beforeClear (win) {
this.svgCanvas.runExtensions(
'beforeClear'
)
this.svgCanvas.runExtensions('beforeClear')
}

/**
Expand Down Expand Up @@ -1135,7 +1323,7 @@ class Editor extends EditorStartup {
return this.ready(() => {
return new Promise((resolve, reject) => {
fetch(url, { cache: cache ? 'force-cache' : 'no-cache' })
.then(response => {
.then((response) => {
if (!response.ok) {
if (noAlert) {
reject(new Error('URLLoadFail'))
Expand All @@ -1146,16 +1334,18 @@ class Editor extends EditorStartup {
}
return response.text()
})
.then(str => {
.then((str) => {
this.loadSvgString(str, { noAlert })
return str
})
.catch(error => {
.catch((error) => {
if (noAlert) {
reject(new Error('URLLoadFail'))
return
}
seAlert(this.i18next.t('notification.URLLoadFail') + ': \n' + error)
seAlert(
this.i18next.t('notification.URLLoadFail') + ': \n' + error
)
resolve()
})
})
Expand Down
Loading

0 comments on commit 83d54ff

Please sign in to comment.