fix sidepanel with grid css
JFH
parent
b50fe0aee1
commit
ddf3269bd0
|
|
@ -28,7 +28,7 @@ describe('utilities performance', function () {
|
|||
<div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;">
|
||||
|
||||
<!-- Must include this thumbnail view to see some of the performance issues -->
|
||||
<svg id="overviewMiniView" width="150" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
|
||||
<svg id="overviewMiniView" width="132" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<use x="0" y="0" xlink:href="#svgroot"></use>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@ class EditorStartup {
|
|||
if (evt.type === 'mouseup') { panning = false; }
|
||||
return false;
|
||||
});
|
||||
$id('svgcanvas').addEventListener('mousemove', function(evt) {
|
||||
$id('svgcanvas').addEventListener('mousemove', (evt) => {
|
||||
if (panning === false) { return true; }
|
||||
|
||||
this.workarea.scrollLeft -= (evt.clientX - lastX);
|
||||
|
|
@ -302,7 +302,7 @@ class EditorStartup {
|
|||
if (evt.type === 'mouseup') { panning = false; }
|
||||
return false;
|
||||
});
|
||||
$id('svgcanvas').addEventListener('mousedown', function(evt) {
|
||||
$id('svgcanvas').addEventListener('mousedown', (evt) => {
|
||||
if (evt.button === 1 || keypan === true) {
|
||||
panning = true;
|
||||
lastX = evt.clientX;
|
||||
|
|
@ -312,7 +312,7 @@ class EditorStartup {
|
|||
return true;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', function() {
|
||||
window.addEventListener('mouseup', () => {
|
||||
panning = false;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -25,9 +25,15 @@ class Rulers {
|
|||
this.rulerCorner = $id('ruler_corner');
|
||||
}
|
||||
display (on) {
|
||||
this.rulerX.style.display = on ? 'block' : 'none';
|
||||
this.rulerY.style.display = on ? 'block': 'none';
|
||||
this.rulerCorner.style.display = on ? 'block': 'none';
|
||||
if (on) {
|
||||
this.rulerX.style.removeProperty('display');
|
||||
this.rulerY.style.removeProperty('display');
|
||||
this.rulerCorner.style.removeProperty('display');
|
||||
} else {
|
||||
this.rulerX.style.display = 'none';
|
||||
this.rulerY.style.display = 'none';
|
||||
this.rulerCorner.style.display = 'none';
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @type {Module}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ template.innerHTML = `
|
|||
}
|
||||
</style>
|
||||
<div title="title">
|
||||
<img src="logo.svg" alt="icon">
|
||||
<img alt="icon">
|
||||
</div>
|
||||
`;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ class Dropdown extends ListComboBox {
|
|||
const source = result.content.getElementById('source');
|
||||
// add a icon before our dropdown
|
||||
source.prepend(fragmentFrom.html`
|
||||
<img src="logo.svg" alt="icon" width="18" height="18"></img>
|
||||
<img src="dropdown.svg" alt="icon" width="18" height="18"></img>
|
||||
`.cloneNode(true));
|
||||
// change the style so it fits in our toolbar
|
||||
result.content.append(
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ template.innerHTML = `
|
|||
|
||||
<div class="overall">
|
||||
<div class="menu-button">
|
||||
<img class="button-icon" src="logo.svg" alt="icon">
|
||||
<img class="button-icon" src="explorer.svg" alt="icon">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
<div class="image-lib"">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ template.innerHTML = `
|
|||
}
|
||||
</style>
|
||||
<div>
|
||||
<img src="logo.svg" alt="icon" width="12" height="12" />
|
||||
<img alt="icon" width="12" height="12" />
|
||||
<span id="label">label</span>
|
||||
<elix-input></elix-input>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ template.innerHTML = `
|
|||
}
|
||||
</style>
|
||||
<div>
|
||||
<img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
|
||||
<img alt="icon" width="24" height="24" aria-labelledby="label" />
|
||||
<span id="label">label</span>
|
||||
<elix-number-spin-box min="1" step="1"></elix-number-spin-box>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,29 +11,20 @@ import { dragmove } from './dragmove/dragmove.js';
|
|||
|
||||
export default {
|
||||
name: 'overview_window',
|
||||
init ({ _$, isChrome }) {
|
||||
init ({ _$ }) {
|
||||
const svgEditor = this;
|
||||
const { $id } = svgEditor.svgCanvas;
|
||||
const overviewWindowGlobals = {};
|
||||
// Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
|
||||
// https://code.google.com/p/chromium/issues/detail?id=565120.
|
||||
if (isChrome()) {
|
||||
const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
|
||||
const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
|
||||
if (chromeVersion < 49) {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Define and insert the base html element.
|
||||
const propsWindowHtml =
|
||||
'<div id="overview_window_content_pane" style="width:100%; ' +
|
||||
'word-wrap:break-word; display:inline-block; margin-top:20px;">' +
|
||||
'<div id="overview_window_content" style="position:relative; ' +
|
||||
'left:12px; top:0px;">' +
|
||||
'left:15px; top:0px;">' +
|
||||
'<div style="background-color:#A0A0A0; display:inline-block; ' +
|
||||
'overflow:visible;">' +
|
||||
'<svg id="overviewMiniView" width="150" height="100" x="0" ' +
|
||||
'<svg id="overviewMiniView" width="132" height="100" x="0" ' +
|
||||
'y="0" viewBox="0 0 4800 3600" ' +
|
||||
'xmlns="http://www.w3.org/2000/svg" ' +
|
||||
'xmlns:xlink="http://www.w3.org/1999/xlink">' +
|
||||
|
|
@ -47,7 +38,7 @@ export default {
|
|||
'</div>' +
|
||||
'</div>';
|
||||
// eslint-disable-next-line no-unsanitized/method
|
||||
$id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml );
|
||||
$id("sidepanel_content").insertAdjacentHTML( 'beforeend', propsWindowHtml );
|
||||
|
||||
// Define dynamic animation of the view box.
|
||||
const updateViewBox = function () {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klik om te verander vul kleur, verskuiwing klik om 'n beroerte kleur verander',
|
||||
zoom_level: 'Change zoom vlak',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'انقر لتغيير لون التعبئة ، تحولا مزدوجا فوق لتغيير لون السكتة الدماغية',
|
||||
zoom_level: 'تغيير مستوى التكبير',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click to change fill color, shift-click to change stroke color',
|
||||
zoom_level: 'Change zoom level',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Націсніце для змены колеру залівання, Shift-Click змяніць обводка',
|
||||
zoom_level: 'Змяненне маштабу',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Кликнете, за да промени попълнете цвят, на смени, кликнете да променят цвета си удар',
|
||||
zoom_level: 'Промяна на ниво на мащабиране',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Feu clic per canviar el color de farciment, shift-clic per canviar el color del traç',
|
||||
zoom_level: 'Canviar el nivell de zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Zobrazit/schovat více možností',
|
||||
palette_info: 'Kliknutím změníte barvu výplně, kliknutím současně s klávesou shift změníte barvu čáry',
|
||||
zoom_level: 'Změna přiblížení',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Cliciwch yma i lenwi newid lliw, sifft-cliciwch i newid lliw strôc',
|
||||
zoom_level: 'Newid lefel chwyddo',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klik for at ændre fyldfarve, shift-klik for at ændre stregfarve',
|
||||
zoom_level: 'Skift zoomniveau',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Zeige/Verberge weitere Linien-Werkzeuge',
|
||||
palette_info: 'Klick zum Ändern der Füllfarbe, Shift-Klick zum Ändern der Linienfarbe',
|
||||
zoom_level: 'vergrößern',
|
||||
panel_drag: 'Nach links/rechts ziehen, um die Größe vom Seitenpanel zu ändern',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Κάντε κλικ για να συμπληρώσετε την αλλαγή χρώματος, στροφή κλικ για να αλλάξετε το χρώμα εγκεφαλικό',
|
||||
zoom_level: 'Αλλαγή επίπεδο μεγέθυνσης',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click to change fill color, shift-click to change stroke color',
|
||||
zoom_level: 'Change zoom level',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel: 'Panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Mostrar/ocultar herramientas de trazo adicionales',
|
||||
palette_info: 'Haga clic para cambiar el color de relleno. Pulse Mayús y haga clic para cambiar el color del contorno.',
|
||||
zoom_level: 'Cambiar el nivel de zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click muuta täitke värvi, Shift-nuppu, et muuta insult värvi',
|
||||
zoom_level: 'Muuda suumi taset',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'برای تغییر رنگ، کلیک کنید. برای تغییر رنگ لبه، کلید تبدیل (shift) را فشرده و کلیک کنید',
|
||||
zoom_level: 'تغییر بزرگ نمایی',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klikkaa muuttaa täyttöväri, Shift-click vaihtaa aivohalvauksen väriä',
|
||||
zoom_level: 'Muuta suurennustaso',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: "Montrer/cacher plus d'outils de contour",
|
||||
palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
|
||||
zoom_level: 'Changer le niveau de zoom',
|
||||
panel_drag: 'Tirer vers la gauche/droite pour redimensionner le panneau',
|
||||
panel_action: 'Cliquer pour ouvrir le panel de côté',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klik om de folkleur te feroarjen, shift-klik om de linekleur te feroarjen.',
|
||||
zoom_level: 'Yn-/útzoome',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Cliceáil chun athrú a líonadh dath, aistriú-cliceáil chun dath a athrú stróc',
|
||||
zoom_level: 'Athraigh súmáil leibhéal',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Preme aquí para cambiar a cor de recheo, Shift-clic para cambiar a cor do curso',
|
||||
zoom_level: 'Cambiar o nivel de zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'לחץ כדי לשנות צבע מילוי, לחץ על Shift-לשנות צבע שבץ',
|
||||
zoom_level: 'שינוי גודל תצוגה',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'रंग बदलने पर क्लिक करें, बदलाव भरने के क्लिक करने के लिए स्ट्रोक का रंग बदलने के लिए',
|
||||
zoom_level: 'बदलें स्तर ज़ूम',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Kliknite promijeniti boju ispune, shift-click to promijeniti boju moždanog udara',
|
||||
zoom_level: 'Promjena razine zumiranja',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Kattints ide a változások töltse szín, shift-click változtatni stroke color',
|
||||
zoom_level: 'Change nagyítási',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click to change fill color, shift-click to change stroke color',
|
||||
zoom_level: 'Change zoom level',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klik untuk mengubah warna mengisi, shift-klik untuk mengubah warna stroke',
|
||||
zoom_level: 'Mengubah tingkat pembesaran',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Smelltu hér til að breyta fylla lit, Shift-smelltu til að breyta högg lit',
|
||||
zoom_level: 'Breyta Stækkunarstig',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Mostra/nascondi strumenti per il tratto',
|
||||
palette_info: 'Fare clic per cambiare il colore di riempimento, shift-click per cambiare colore del tratto',
|
||||
zoom_level: 'Cambia il livello di zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'クリックで塗りの色を選択、Shift+クリックで線の色を選択',
|
||||
zoom_level: 'ズーム倍率の変更',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: '색상을 클릭, 근무 시간 채우기 스트로크 색상을 변경하려면 변경하려면',
|
||||
zoom_level: '변경 수준으로 확대',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Spustelėkite norėdami keisti užpildo spalvą, perėjimo spustelėkite pakeisti insultas spalva',
|
||||
zoom_level: 'Keisti mastelį',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Noklikšķiniet, lai mainītu aizpildījuma krāsu, shift-click to mainīt stroke krāsa',
|
||||
zoom_level: 'Pārmaiņu mērogu',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Кликни за да внесете промени бојата, промена клик да се промени бојата удар',
|
||||
zoom_level: 'Промена зум ниво',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klik untuk menukar warna mengisi, shift-klik untuk menukar warna stroke',
|
||||
zoom_level: 'Mengubah peringkat pembesaran',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Ikklikkja biex timla l-bidla fil-kulur, ikklikkja-bidla għall-bidla color stroke',
|
||||
zoom_level: 'Bidla zoom livell',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Toon/verberg meer lijn gereedschap',
|
||||
palette_info: 'Klik om de vul kleur te veranderen, shift-klik om de lijn kleur te veranderen',
|
||||
zoom_level: 'In-/uitzoomen',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click å endre fyllfarge, shift-klikke for å endre slag farge',
|
||||
zoom_level: 'Endre zoomnivå',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
toggle_stroke_tools: 'Pokaż/ukryj więcej opcji obramowania',
|
||||
palette_info: 'Kliknij aby zmienić kolor wypełnienia, przytrzymaj shift aby zmienić kolor obramowania',
|
||||
zoom_level: 'Zmiana powiększenia',
|
||||
panel_drag: 'Przeciągnij w lewo/prawo aby zmienić szerokość panelu',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Mais opções de traço',
|
||||
palette_info: 'Click para mudar a cor de preenchimento, shift-click para mudar a cor do traço',
|
||||
zoom_level: 'Mudar zoom',
|
||||
panel_drag: 'Arraste para redimensionar o painel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Clique para mudar a cor de preenchimento, shift-clique para mudar a cor do curso',
|
||||
zoom_level: 'Alterar o nível de zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Arătaţi/ascundeţi mai multe unelte de contur',
|
||||
palette_info: 'Faceţi clic pentru a schimba culoarea de umplere, Shift-clic pentru a schimba culoarea de contur',
|
||||
zoom_level: 'Schimbarea nivelului de zoom',
|
||||
panel_drag: 'Trageţi la stanga/dreapta pentru redimensionare panou lateral',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Показать/скрыть инструменты обводки',
|
||||
palette_info: 'Нажмите для изменения цвета заливки, Shift-Click изменить цвета обводки',
|
||||
zoom_level: 'Изменить масштаб',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Качество:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Skryť/ukázať viac nástrojov pre krivku',
|
||||
palette_info: 'Kliknutím zmeníte farbu výplne, so Shiftom zmeníte farbu obrysu',
|
||||
zoom_level: 'Zmena priblíženia',
|
||||
panel_drag: 'Potiahnutie vľavo/vpravo na zmenu veľkosti bočného panela',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Pokaži/skrij več orodij za oris',
|
||||
palette_info: 'Kliknite, če želite spremeniti barvo polnila, kliknite+Shift, če želite spremeniti barvo orisa',
|
||||
zoom_level: 'Povečava',
|
||||
panel_drag: 'Povlecite levo/desno za ogled stranske vrstice',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klikoni për të ndryshuar mbushur me ngjyra, shift-klikoni për të ndryshuar ngjyrën pash',
|
||||
zoom_level: 'Ndryshimi zoom nivel',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Кликните да бисте променили боју попуне, Схифт-кликните да промените боју удар',
|
||||
zoom_level: 'Промените ниво зумирања',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Klicka för att ändra fyllningsfärg, shift-klicka för att ändra färgar',
|
||||
zoom_level: 'Ändra zoomnivå',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click kubadili kujaza color, skiftarbete-click kubadili kiharusi color',
|
||||
zoom_level: 'Change zoom ngazi',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Click to change fill color, shift-click to change stroke color',
|
||||
zoom_level: 'Change zoom level',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'คลิกเพื่อเปลี่ยนใส่สีกะคลิกเปลี่ยนสีจังหวะ',
|
||||
zoom_level: 'เปลี่ยนระดับการซูม',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'I-click upang baguhin ang punan ang kulay, paglilipat-click upang baguhin ang paghampas ng kulay',
|
||||
zoom_level: 'Baguhin ang antas ng zoom',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Tıklatın renk, vardiya dolgu zamanlı rengini değiştirmek için tıklayın değiştirmek için',
|
||||
zoom_level: 'Yakınlaştırma düzeyini değiştirebilirsiniz',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Натисніть для зміни кольору заливки, Shift-Click змінити обвід',
|
||||
zoom_level: 'Зміна масштабу',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'Nhấn vào đây để thay đổi đầy màu sắc, thay đổi nhấp chuột để thay đổi màu sắc đột quỵ',
|
||||
zoom_level: 'Thay đổi mức độ phóng',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: 'גיט צו ענדערן אָנעסן קאָליר, יבעררוק-גיט צו טוישן מאַך קאָליר',
|
||||
zoom_level: 'ענדערן פארגרעסער הייך',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: '显示/隐藏更式边线工具',
|
||||
palette_info: '点击更改填充颜色，按住Shift键单击更改线条颜色',
|
||||
zoom_level: '更改缩放级别',
|
||||
panel_drag: '左右拖拽调整面板大小',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: '点击更改填充颜色，按住Shift键单击更改颜色中风',
|
||||
zoom_level: '更改缩放级别',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default {
|
|||
toggle_stroke_tools: 'Show/hide more stroke tools',
|
||||
palette_info: '點擊更改填充顏色，按住Shift鍵單擊更改線條顏色',
|
||||
zoom_level: '更改縮放級別',
|
||||
panel_drag: 'Drag left/right to resize side panel',
|
||||
panel_action: 'Click to open side panel',
|
||||
quality: 'Quality:',
|
||||
pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
|
||||
pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
|
||||
|
|
|
|||
|
|
@ -186,14 +186,14 @@ class BottomPanel {
|
|||
<se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
|
||||
</se-colorpicker>
|
||||
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
|
||||
<se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="24px">
|
||||
<se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
|
||||
<se-list-item value="none">—</se-list-item>
|
||||
<se-list-item value="2,2">...</se-list-item>
|
||||
<se-list-item value="5,5">- -</se-list-item>
|
||||
<se-list-item value="5,2,2,2">- .</se-list-item>
|
||||
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
|
||||
</se-list>
|
||||
<se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="24px">
|
||||
<se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
|
||||
<se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
|
||||
height="22px"></img></se-list-item>
|
||||
<se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
|
||||
|
|
@ -201,7 +201,7 @@ class BottomPanel {
|
|||
<se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
|
||||
height="22px"></img></se-list-item>
|
||||
</se-list>
|
||||
<se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="24px">
|
||||
<se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="22px">
|
||||
<se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
|
||||
height="22px"></img></se-list-item>
|
||||
<se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
/* eslint-disable max-len */
|
||||
/* eslint-disable no-alert */
|
||||
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
|
||||
|
||||
const SIDEPANEL_MAXWIDTH = 300;
|
||||
const SIDEPANEL_OPENWIDTH = 150;
|
||||
const { $id } = SvgCanvas;
|
||||
|
||||
/**
|
||||
|
|
@ -15,76 +12,9 @@ class LayersPanel {
|
|||
*/
|
||||
constructor(editor) {
|
||||
this.updateContextPanel = editor.topPanel.updateContextPanel;
|
||||
this.sidedrag = -1;
|
||||
this.sidedragging = false;
|
||||
this.allowmove = false;
|
||||
this.editor = editor;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Float} delta
|
||||
* @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
|
||||
* @returns {void}
|
||||
*/
|
||||
changeSidePanelWidth(delta) {
|
||||
const rulerX = document.querySelector("#ruler_x");
|
||||
$id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
|
||||
$id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
|
||||
rulerX.style.right =
|
||||
parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
|
||||
delta +
|
||||
"px";
|
||||
this.editor.workarea.style.right =
|
||||
parseFloat(
|
||||
getComputedStyle(this.editor.workarea, null).right.replace("px", "")
|
||||
) +
|
||||
delta +
|
||||
"px";
|
||||
this.editor.svgCanvas.runExtensions("workareaResized");
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Event} evt
|
||||
* @returns {void}
|
||||
*/
|
||||
resizeSidePanel(evt) {
|
||||
if (!this.allowmove) {
|
||||
return;
|
||||
}
|
||||
if (this.sidedrag === -1) {
|
||||
return;
|
||||
}
|
||||
this.sidedragging = true;
|
||||
let deltaX = this.sidedrag - evt.pageX;
|
||||
const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
|
||||
if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
|
||||
deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
|
||||
// sideWidth = SIDEPANEL_MAXWIDTH;
|
||||
} else if (sideWidth + deltaX < 2) {
|
||||
deltaX = 2 - sideWidth;
|
||||
// sideWidth = 2;
|
||||
}
|
||||
if (deltaX === 0) {
|
||||
return;
|
||||
}
|
||||
this.sidedrag -= deltaX;
|
||||
this.changeSidePanelWidth(deltaX);
|
||||
}
|
||||
|
||||
/**
|
||||
* If width is non-zero, then fully close it; otherwise fully open it.
|
||||
* @param {boolean} close Forces the side panel closed
|
||||
* @returns {void}
|
||||
*/
|
||||
toggleSidePanel(close) {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
|
||||
const isOpened = (dpr < 1 ? w : w / dpr) > 2;
|
||||
const zoomAdjustedSidepanelWidth =
|
||||
(dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
|
||||
const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
|
||||
this.changeSidePanelWidth(deltaX);
|
||||
}
|
||||
/**
|
||||
* @param {PlainObject} e event
|
||||
* @returns {void}
|
||||
|
|
@ -119,30 +49,31 @@ class LayersPanel {
|
|||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = `
|
||||
<div id="sidepanels">
|
||||
<div id="layerpanel">
|
||||
<h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
|
||||
<fieldset id="layerbuttons">
|
||||
<se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
|
||||
<se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
|
||||
<se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
|
||||
<se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
|
||||
<se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
|
||||
<se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
|
||||
</se-button>
|
||||
</fieldset>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
<td class="layervis"></td>
|
||||
<td class="layername">Layer 1</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
|
||||
<select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
|
||||
<option selected="selected" value="layer1">Layer 1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="sidepanel_handle" title="${i18next.t('ui.panel_drag')}">L a y e r s
|
||||
</div>
|
||||
<div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
|
||||
<div id="sidepanel_content">
|
||||
<div id="layerpanel">
|
||||
<h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
|
||||
<fieldset id="layerbuttons">
|
||||
<se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
|
||||
<se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
|
||||
<se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
|
||||
<se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
|
||||
<se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
|
||||
<se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
|
||||
</se-button>
|
||||
</fieldset>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
<td class="layervis"></td>
|
||||
<td class="layername">Layer 1</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
|
||||
<select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
|
||||
<option selected="selected" value="layer1">Layer 1</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.editor.$svgEditor.append(template.content.cloneNode(true));
|
||||
|
|
@ -182,36 +113,18 @@ class LayersPanel {
|
|||
this.lmenuFunc(e);
|
||||
});
|
||||
$id("sidepanel_handle").addEventListener(
|
||||
"click",
|
||||
this.toggleSidePanel.bind(this)
|
||||
"click", () => this.toggleSidePanel()
|
||||
);
|
||||
if (this.editor.configObj.curConfig.showlayers) {
|
||||
this.toggleSidePanel();
|
||||
this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
|
||||
}
|
||||
toggleSidePanel(displayFlag) {
|
||||
if (displayFlag === undefined) {
|
||||
this.editor.$svgEditor.classList.toggle('open');
|
||||
} else if (displayFlag) {
|
||||
this.editor.$svgEditor.classList.add('open');
|
||||
} else {
|
||||
this.editor.$svgEditor.classList.remove('open');
|
||||
}
|
||||
$id("sidepanel_handle").addEventListener("mousedown", (evt) => {
|
||||
this.sidedrag = evt.pageX;
|
||||
window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
|
||||
this.allowmove = false;
|
||||
// Silly hack for Chrome, which always runs mousemove right after mousedown
|
||||
setTimeout(() => {
|
||||
this.allowmove = true;
|
||||
}, 20);
|
||||
});
|
||||
$id("sidepanel_handle").addEventListener("mouseup", (_evt) => {
|
||||
if (!this.sidedragging) {
|
||||
this.toggleSidePanel();
|
||||
}
|
||||
this.sidedrag = -1;
|
||||
this.sidedragging = false;
|
||||
});
|
||||
window.addEventListener("mouseup", (_evt) => {
|
||||
this.sidedrag = -1;
|
||||
this.sidedragging = false;
|
||||
this.editor.$svgEditor.removeEventListener(
|
||||
"mousemove",
|
||||
this.resizeSidePanel.bind(this)
|
||||
);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @returns {void}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
.svg_editor {
|
||||
display: grid;
|
||||
grid-template-rows: auto 15px 1fr 40px;
|
||||
grid-template-columns: 34px 15px 1fr 10px;
|
||||
grid-template-columns: 34px 15px 1fr 15px;
|
||||
grid-template-areas:
|
||||
"top top top top"
|
||||
"left corner rulerX side"
|
||||
|
|
@ -32,12 +32,17 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.svg_editor.open {
|
||||
grid-template-columns: 34px 15px 1fr 150px;
|
||||
}
|
||||
|
||||
/* on smaller screen, allow 2 lines for the toolbar */
|
||||
|
||||
@media screen and (max-width:1250px) {
|
||||
.svg_editor {
|
||||
grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#svgroot {
|
||||
user-select: none;
|
||||
|
|
@ -60,7 +65,24 @@
|
|||
background: var(--canvas-bg-color);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position:relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidepanels {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
#sidepanel_handle {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
color: white;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top:50%;
|
||||
}
|
||||
|
||||
.svg_editor:not(.open) #sidepanel_content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -77,53 +99,13 @@ hr {
|
|||
padding-top: 4px;
|
||||
}
|
||||
|
||||
#sidepanels {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
padding: 10px;
|
||||
border-color: var(--border-color);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-left: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
#layersLabel {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#layerpanel {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
bottom: 0;
|
||||
left: 12px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#sidepanel_handle {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: --main-bg-color;
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
left: 0;
|
||||
top: 40%;
|
||||
width: 1em;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#sidepanel_handle * {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#layerbuttons {
|
||||
|
|
@ -133,10 +115,7 @@ hr {
|
|||
padding-right: 2px;
|
||||
width: 125px;
|
||||
height: 20px;
|
||||
border-right: 1px solid #FFFFFF;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-left: 1px solid var(--border-color);
|
||||
border-top: 1px solid var(--border-color);
|
||||
border: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -146,7 +125,7 @@ hr {
|
|||
#layerlist {
|
||||
margin: 1px;
|
||||
padding: 0;
|
||||
width: 127px;
|
||||
width: 132px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -319,16 +298,18 @@ hr {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
/* leave space for the main menu */
|
||||
/* leave space for the main menu */
|
||||
position: relative;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
#tools_top > *{
|
||||
display:flex;
|
||||
|
||||
#tools_top>* {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
/*—————————————————————————————*/
|
||||
|
||||
#tools_bottom {
|
||||
|
|
@ -338,6 +319,11 @@ hr {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
#tools_bottom se-list {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*—————————————————————————————*/
|
||||
|
||||
#tools_left {
|
||||
|
|
@ -525,7 +511,7 @@ input[type=text] {
|
|||
}
|
||||
|
||||
#palette {
|
||||
margin-left:auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#stroke_expand {
|
||||
|
|
@ -606,4 +592,4 @@ ul li.current {
|
|||
|
||||
.dropdown li.tool_button {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue