zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change to css grid

master
JFH 2021-08-07 00:06:58 +02:00
parent b048afb72e
commit cfb47fa952
16 changed files with 422 additions and 490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/editor/Editor.js
View File

@ -457,23 +457,23 @@ class Editor extends EditorStartup {
*/ */
updateCanvas(center, newCtr) { updateCanvas(center, newCtr) {
const zoom = this.svgCanvas.getZoom(); const zoom = this.svgCanvas.getZoom();
const wArea = this.workarea; const { workarea } = this;
const cnvs = $id("svgcanvas"); const cnvs = $id("svgcanvas");
let w = parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")); let w = parseFloat(getComputedStyle(workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
const wOrig = w; const hOrig = h; const wOrig = w; const hOrig = h;
const oldCtr = { const oldCtr = {
x: wArea.scrollLeft + wOrig / 2, x: workarea.scrollLeft + wOrig / 2,
y: wArea.scrollTop + hOrig / 2 y: workarea.scrollTop + hOrig / 2
}; };
const multi = this.configObj.curConfig.canvas_expansion; const multi = this.configObj.curConfig.canvas_expansion;
w = Math.max(wOrig, this.svgCanvas.contentW * zoom * multi); w = Math.max(wOrig, this.svgCanvas.contentW * zoom * multi);
h = Math.max(hOrig, this.svgCanvas.contentH * zoom * multi); h = Math.max(hOrig, this.svgCanvas.contentH * zoom * multi);
if (w === wOrig && h === hOrig) { if (w === wOrig && h === hOrig) {
this.workarea.style.overflow = 'hidden'; workarea.style.overflow = 'hidden';
} else { } else {
this.workarea.style.overflow = 'scroll'; workarea.style.overflow = 'scroll';
} }
const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2; const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2;
@ -508,22 +508,22 @@ class Editor extends EditorStartup {
if (center) { if (center) {
// Go to top-left for larger documents // Go to top-left for larger documents
if (this.svgCanvas.contentW > parseFloat(getComputedStyle(wArea, null).width.replace("px", ""))) { if (this.svgCanvas.contentW > parseFloat(getComputedStyle(workarea, null).width.replace("px", ""))) {
// Top-left // Top-left
this.workarea.scrollLeft = offset.x - 10; workarea.scrollLeft = offset.x - 10;
this.workarea.scrollTop = offset.y - 10; workarea.scrollTop = offset.y - 10;
} else { } else {
// Center // Center
wArea.scrollLeft = scrollX; workarea.scrollLeft = scrollX;
wArea.scrollTop = scrollY; workarea.scrollTop = scrollY;
} }
} else { } else {
wArea.scrollLeft = newCtr.x - wOrig / 2; workarea.scrollLeft = newCtr.x - wOrig / 2;
wArea.scrollTop = newCtr.y - hOrig / 2; workarea.scrollTop = newCtr.y - hOrig / 2;
} }
if (this.configObj.curConfig.showRulers) { if (this.configObj.curConfig.showRulers) {
this.rulers.updateRulers(cnvs, zoom); this.rulers.updateRulers(cnvs, zoom);
this.workarea.scroll(); workarea.scroll();
} }
if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') { if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') {
@ -706,8 +706,7 @@ class Editor extends EditorStartup {
*/ */
zoomChanged(win, bbox, autoCenter) { zoomChanged(win, bbox, autoCenter) {
const scrbar = 15; const scrbar = 15;
const wArea = this.workarea; const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) - scrbar);
const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) - scrbar);
if (!zInfo) { return; } if (!zInfo) { return; }
const zoomlevel = zInfo.zoom; const zoomlevel = zInfo.zoom;
const bb = zInfo.bbox; const bb = zInfo.bbox;
@ -857,9 +856,10 @@ class Editor extends EditorStartup {
* @returns {void} * @returns {void}
*/ */
pasteInCenter() { pasteInCenter() {
const { workarea } = this;
const zoom = this.svgCanvas.getZoom(); const zoom = this.svgCanvas.getZoom();
const x = (this.workarea.scrollLeft + parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW; const x = (workarea.scrollLeft + parseFloat(getComputedStyle(workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW;
const y = (this.workarea.scrollTop + parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH; const y = (workarea.scrollTop + parseFloat(getComputedStyle(workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH;
this.svgCanvas.pasteElements('point', x, y); this.svgCanvas.pasteElements('point', x, y);
} }

82
src/editor/EditorStartup.js
View File

@ -41,7 +41,7 @@ const readySignal = () => {
} }
}; };
const { $id } = SvgCanvas; const { $id, $qq } = SvgCanvas;
/** /**
* *
@ -53,7 +53,7 @@ class EditorStartup {
constructor (div) { constructor (div) {
this.extensionsAdded = false; this.extensionsAdded = false;
this.messageQueue = []; this.messageQueue = [];
this.$svgEditor = div??$id('svg_editor'); this.$container = div??$id('svg_editor');
} }
/** /**
* Auto-run after a Promise microtask. * Auto-run after a Promise microtask.
@ -65,43 +65,44 @@ class EditorStartup {
this.storage = window.localStorage; this.storage = window.localStorage;
} }
this.configObj.load(); this.configObj.load();
const self = this;
const { i18next } = await putLocale(this.configObj.pref('lang'), this.goodLangs); const { i18next } = await putLocale(this.configObj.pref('lang'), this.goodLangs);
this.i18next = i18next; this.i18next = i18next;
await import(`./components/index.js`); await import(`./components/index.js`);
await import(`./dialogs/index.js`); await import(`./dialogs/index.js`);
// allow to prepare the dom without display
this.$svgEditor.style.visibility = 'hidden';
try { try {
// add editor components to the DOM // add editor components to the DOM
this.$svgEditor.append(editorTemplate.content.cloneNode(true)); this.$container.append(editorTemplate.content.cloneNode(true));
this.$svgEditor = $qq('.svg_editor');
// allow to prepare the dom without display
// JFH this.$svgEditor.style.visibility = 'hidden';
this.workarea = $id('workarea');
// Image props dialog added to DOM // Image props dialog added to DOM
const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
newSeImgPropDialog.setAttribute('id', 'se-img-prop'); newSeImgPropDialog.setAttribute('id', 'se-img-prop');
this.$svgEditor.append(newSeImgPropDialog); this.$container.append(newSeImgPropDialog);
newSeImgPropDialog.init(this.i18next); newSeImgPropDialog.init(this.i18next);
// editor prefences dialoag added to DOM // editor prefences dialoag added to DOM
const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog'); const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs'); newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
this.$svgEditor.append(newSeEditPrefsDialog); this.$container.append(newSeEditPrefsDialog);
newSeEditPrefsDialog.init(this.i18next); newSeEditPrefsDialog.init(this.i18next);
// canvas menu added to DOM // canvas menu added to DOM
const dialogBox = document.createElement('se-cmenu_canvas-dialog'); const dialogBox = document.createElement('se-cmenu_canvas-dialog');
dialogBox.setAttribute('id', 'se-cmenu_canvas'); dialogBox.setAttribute('id', 'se-cmenu_canvas');
this.$svgEditor.append(dialogBox); this.$container.append(dialogBox);
dialogBox.init(this.i18next); dialogBox.init(this.i18next);
// alertDialog added to DOM // alertDialog added to DOM
const alertBox = document.createElement('se-alert-dialog'); const alertBox = document.createElement('se-alert-dialog');
alertBox.setAttribute('id', 'se-alert-dialog'); alertBox.setAttribute('id', 'se-alert-dialog');
this.$svgEditor.append(alertBox); this.$container.append(alertBox);
// promptDialog added to DOM // promptDialog added to DOM
const promptBox = document.createElement('se-prompt-dialog'); const promptBox = document.createElement('se-prompt-dialog');
promptBox.setAttribute('id', 'se-prompt-dialog'); promptBox.setAttribute('id', 'se-prompt-dialog');
this.$svgEditor.append(promptBox); this.$container.append(promptBox);
// Export dialog added to DOM // Export dialog added to DOM
const exportDialog = document.createElement('se-export-dialog'); const exportDialog = document.createElement('se-export-dialog');
exportDialog.setAttribute('id', 'se-export-dialog'); exportDialog.setAttribute('id', 'se-export-dialog');
this.$svgEditor.append(exportDialog); this.$container.append(exportDialog);
exportDialog.init(this.i18next); exportDialog.init(this.i18next);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
@ -123,8 +124,7 @@ class EditorStartup {
this.mainMenu.init(); this.mainMenu.init();
const { undoMgr } = this.svgCanvas; const { undoMgr } = this.svgCanvas;
this.workarea = document.getElementById('workarea'); this.canvMenu = $id('se-cmenu_canvas');
this.canvMenu = document.getElementById('se-cmenu_canvas');
this.exportWindow = null; this.exportWindow = null;
this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg'; this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg';
const zoomInIcon = 'crosshair'; const zoomInIcon = 'crosshair';
@ -218,9 +218,9 @@ class EditorStartup {
// fired when user wants to move elements to another layer // fired when user wants to move elements to another layer
let promptMoveLayerOnce = false; let promptMoveLayerOnce = false;
$id('selLayerNames').addEventListener('change', function(evt) { $id('selLayerNames').addEventListener('change', (evt) => {
const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value; const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
const confirmStr = self.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer); const confirmStr = this.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer);
/** /**
* @param {boolean} ok * @param {boolean} ok
* @returns {void} * @returns {void}
@ -228,9 +228,9 @@ class EditorStartup {
const moveToLayer = (ok) => { const moveToLayer = (ok) => {
if (!ok) { return; } if (!ok) { return; }
promptMoveLayerOnce = true; promptMoveLayerOnce = true;
self.svgCanvas.moveSelectedToLayer(destLayer); this.svgCanvas.moveSelectedToLayer(destLayer);
self.svgCanvas.clearSelection(); this.svgCanvas.clearSelection();
self.layersPanel.populateLayers(); this.layersPanel.populateLayers();
}; };
if (destLayer) { if (destLayer) {
if (promptMoveLayerOnce) { if (promptMoveLayerOnce) {
@ -244,12 +244,12 @@ class EditorStartup {
} }
} }
}); });
$id('tool_font_family').addEventListener('change', function(evt) { $id('tool_font_family').addEventListener('change', (evt) => {
self.svgCanvas.setFontFamily(evt.detail.value); this.svgCanvas.setFontFamily(evt.detail.value);
}); });
$id('seg_type').addEventListener('change', function(evt) { $id('seg_type').addEventListener('change', (evt) => {
self.svgCanvas.setSegType(evt.currentTarget.value); this.svgCanvas.setSegType(evt.currentTarget.value);
}); });
function addListenerMulti(element, eventNames, listener) { function addListenerMulti(element, eventNames, listener) {
@ -259,35 +259,33 @@ class EditorStartup {
} }
} }
addListenerMulti($id('text'), 'keyup input', function(evt){ addListenerMulti($id('text'), 'keyup input', (evt) => {
self.svgCanvas.setTextContent(evt.currentTarget.value); this.svgCanvas.setTextContent(evt.currentTarget.value);
}); });
$id('image_url').addEventListener('change', function(evt) { $id('image_url').addEventListener('change', (evt) => {
self.setImageURL(evt.currentTarget.value); this.setImageURL(evt.currentTarget.value);
}); });
$id('link_url').addEventListener('change', function(evt) { $id('link_url').addEventListener('change', (evt) => {
if (evt.currentTarget.value.length) { if (evt.currentTarget.value.length) {
self.svgCanvas.setLinkURL(evt.currentTarget.value); this.svgCanvas.setLinkURL(evt.currentTarget.value);
} else { } else {
self.svgCanvas.removeHyperlink(); this.svgCanvas.removeHyperlink();
} }
}); });
$id('g_title').addEventListener('change', function(evt) { $id('g_title').addEventListener('change', (evt) => {
self.svgCanvas.setGroupTitle(evt.currentTarget.value); this.svgCanvas.setGroupTitle(evt.currentTarget.value);
}); });
const wArea = this.workarea;
let lastX = null; let lastY = null; let lastX = null; let lastY = null;
let panning = false; let keypan = false; let panning = false; let keypan = false;
$id('svgcanvas').addEventListener('mouseup', function(evt) { $id('svgcanvas').addEventListener('mouseup', (evt) => {
if (panning === false) { return true; } if (panning === false) { return true; }
wArea.scrollLeft -= (evt.clientX - lastX); this.workarea.scrollLeft -= (evt.clientX - lastX);
wArea.scrollTop -= (evt.clientY - lastY); this.workarea.scrollTop -= (evt.clientY - lastY);
lastX = evt.clientX; lastX = evt.clientX;
lastY = evt.clientY; lastY = evt.clientY;
@ -298,8 +296,8 @@ class EditorStartup {
$id('svgcanvas').addEventListener('mousemove', function(evt) { $id('svgcanvas').addEventListener('mousemove', function(evt) {
if (panning === false) { return true; } if (panning === false) { return true; }
wArea.scrollLeft -= (evt.clientX - lastX); this.workarea.scrollLeft -= (evt.clientX - lastX);
wArea.scrollTop -= (evt.clientY - lastY); this.workarea.scrollTop -= (evt.clientY - lastY);
lastX = evt.clientX; lastX = evt.clientX;
lastY = evt.clientY; lastY = evt.clientY;
@ -535,7 +533,11 @@ class EditorStartup {
$id('tool_wireframe').click(); $id('tool_wireframe').click();
} }
$id('rulers').style.display = (this.configObj.curConfig.showRulers) ? 'block' : 'none'; if (this.configObj.curConfig.showRulers) {
$id('rulers').style.removeProperty('display');
} else {
$id('rulers').style.display = 'none';
}
if (this.configObj.curConfig.showRulers) { if (this.configObj.curConfig.showRulers) {
$editDialog.setAttribute('showrulers', true); $editDialog.setAttribute('showrulers', true);

1
src/editor/MainMenu.js
View File

@ -306,7 +306,6 @@ class MainMenu {
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
template.innerHTML = ` template.innerHTML = `
<se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo"> <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
<!-- File-like buttons: New, Save, Source -->
<se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg"> <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg">
</se-menu-item> </se-menu-item>
<se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg"> <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg">

2
src/editor/Rulers.js
View File

@ -18,7 +18,7 @@ class Rulers {
this.svgCanvas = editor.svgCanvas; this.svgCanvas = editor.svgCanvas;
this.editor = editor; this.editor = editor;
// add rulers component to the DOM // add rulers component to the DOM
this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true)); this.editor.workarea.append(rulersTemplate.content.cloneNode(true));
} }
/** /**
* @type {Module} * @type {Module}

7
src/editor/components/seInput.js
View File

@ -3,6 +3,11 @@ import 'elix/define/Input.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
div {
height: 24px;
margin: 5px 1px;
padding: 3px;
}
img { img {
top: 2px; top: 2px;
left: 4px; left: 4px;
@ -20,9 +25,11 @@ template.innerHTML = `
border-radius: 3px; border-radius: 3px;
} }
</style> </style>
<div>
<img src="./images/logo.svg" alt="icon" width="12" height="12" /> <img src="./images/logo.svg" alt="icon" width="12" height="12" />
<span id="label">label</span> <span id="label">label</span>
<elix-input></elix-input> <elix-input></elix-input>
</div>
`; `;
/** /**

7
src/editor/components/seSpinInput.js
View File

@ -3,6 +3,11 @@ import '../dialogs/se-elix/define/NumberSpinBox.js';
const template = document.createElement('template'); const template = document.createElement('template');
template.innerHTML = ` template.innerHTML = `
<style> <style>
div {
height: 24px;
margin: 5px 1px;
padding: 3px;
}
img { img {
position: relative; position: relative;
right: -4px; right: -4px;
@ -34,9 +39,11 @@ template.innerHTML = `
height: 24px; height: 24px;
} }
</style> </style>
<div>
<img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" /> <img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
<span id="label">label</span> <span id="label">label</span>
<elix-number-spin-box min="1" step="1"></elix-number-spin-box> <elix-number-spin-box min="1" step="1"></elix-number-spin-box>
</div>
`; `;
/** /**

10
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@ -51,11 +51,11 @@ export default {
// Define dynamic animation of the view box. // Define dynamic animation of the view box.
const updateViewBox = function () { const updateViewBox = function () {
const warea = document.getElementById('workarea'); const { workarea } = svgEditor;
const portHeight = parseFloat(getComputedStyle(warea, null).height.replace("px", "")); const portHeight = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", "")); const portWidth = parseFloat(getComputedStyle(workarea, null).width.replace("px", ""));
const portX = warea.scrollLeft; const portX = workarea.scrollLeft;
const portY = warea.scrollTop; const portY = workarea.scrollTop;
const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", "")); const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", "")); const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", "")); const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));

2
src/editor/extensions/ext-storage/ext-storage.js
View File

@ -82,7 +82,7 @@ export default {
// storageDialog added to DOM // storageDialog added to DOM
const storageBox = document.createElement('se-storage-dialog'); const storageBox = document.createElement('se-storage-dialog');
storageBox.setAttribute('id', 'se-storage-dialog'); storageBox.setAttribute('id', 'se-storage-dialog');
svgEditor.$svgEditor.append(storageBox); svgEditor.$container.append(storageBox);
storageBox.init(svgEditor.i18next); storageBox.init(svgEditor.i18next);
// manage the change in the storageDialog // manage the change in the storageDialog

6
src/editor/index.html
View File

@ -25,7 +25,7 @@
<script type="module"> <script type="module">
/* for available options see the file `docs/tutorials/ConfigOptions.md */ /* for available options see the file `docs/tutorials/ConfigOptions.md */
import Editor from './Editor.js'; import Editor from './Editor.js';
const svgEditor = new Editor(document.getElementsByClassName('svg_editor')[0]); const svgEditor = new Editor(document.getElementById('container'));
svgEditor.init(); svgEditor.init();
svgEditor.setConfig({ svgEditor.setConfig({
allowInitialUserOverride: true, allowInitialUserOverride: true,
@ -51,7 +51,9 @@
</head> </head>
<body> <body>
<div class="svg_editor" role="main"></div> <h1>SVGEdit</h1>
<div id="container" style="width:100%;height:550px"></div>
<h1>End</h1>
</body> </body>
</html> </html>

8
src/editor/panels/BottomPanel.js
View File

@ -57,13 +57,13 @@ class BottomPanel {
return; return;
} }
const zoom = this.editor.svgCanvas.getZoom(); const zoom = this.editor.svgCanvas.getZoom();
const wArea = this.editor.workarea; const { workarea } = this.editor;
this.editor.zoomChanged(window, { this.editor.zoomChanged(window, {
width: 0, width: 0,
height: 0, height: 0,
// center pt of scroll position // center pt of scroll position
x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom, x: (workarea.scrollLeft + parseFloat(getComputedStyle(workarea, null).width.replace("px", "")) / 2) / zoom,
y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom, y: (workarea.scrollTop + parseFloat(getComputedStyle(workarea, null).height.replace("px", "")) / 2) / zoom,
zoom: zoomlevel zoom: zoomlevel
}, true); }, true);
} }
@ -210,7 +210,7 @@ class BottomPanel {
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}" <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
src="./images/opacity.svg"></se-spin-input> src="./images/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette> <se-palette id="palette"></se-palette>
</div> <!-- tools_bottom --> </div>
`; `;
this.editor.$svgEditor.append(template.content.cloneNode(true)); this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('palette').addEventListener('change', this.handlePalette.bind(this)); $id('palette').addEventListener('change', this.handlePalette.bind(this));

4
src/editor/panels/LayersPanel.js
View File

@ -149,13 +149,13 @@ class LayersPanel {
menuMore.setAttribute("id", "se-cmenu-layers-more"); menuMore.setAttribute("id", "se-cmenu-layers-more");
menuMore.value = "layer_moreopts"; menuMore.value = "layer_moreopts";
menuMore.setAttribute("leftclick", true); menuMore.setAttribute("leftclick", true);
this.editor.$svgEditor.append(menuMore); this.editor.$container.append(menuMore);
menuMore.init(i18next); menuMore.init(i18next);
const menuLayerBox = document.createElement("se-cmenu-layers"); const menuLayerBox = document.createElement("se-cmenu-layers");
menuLayerBox.setAttribute("id", "se-cmenu-layers-list"); menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
menuLayerBox.value = "layerlist"; menuLayerBox.value = "layerlist";
menuLayerBox.setAttribute("leftclick", false); menuLayerBox.setAttribute("leftclick", false);
this.editor.$svgEditor.append(menuLayerBox); this.editor.$container.append(menuLayerBox);
menuLayerBox.init(i18next); menuLayerBox.init(i18next);
document document
.getElementById("layer_new") .getElementById("layer_new")

2
src/editor/panels/LeftPanel.js
View File

@ -244,7 +244,7 @@ class LeftPanel {
} }
]; ];
const template = document.createElement("template"); const template = document.createElement("template");
template.innerHTML = `<div id="tools_left"></div> <!-- tools_left -->`; template.innerHTML = `<div id="tools_left"></div>`;
this.editor.$svgEditor.append(template.content.cloneNode(true)); this.editor.$svgEditor.append(template.content.cloneNode(true));
const leftMenuSort = leftMenu.sort((a, b) => (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0)); const leftMenuSort = leftMenu.sort((a, b) => (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0));
const parent = $id("tools_left"); const parent = $id("tools_left");

10
src/editor/panels/TopPanel.js
View File

@ -203,7 +203,7 @@ class TopPanel {
} }
if (!isNode && currentMode !== "pathedit") { if (!isNode && currentMode !== "pathedit") {
$id("selected_panel").style.display = 'block'; $id("selected_panel").style.removeProperty('display');
// Elements in this array already have coord fields // Elements in this array already have coord fields
if ([ "line", "circle", "ellipse" ].includes(elname)) { if ([ "line", "circle", "ellipse" ].includes(elname)) {
$id("xy_panel").style.display = 'none'; $id("xy_panel").style.display = 'none';
@ -228,7 +228,7 @@ class TopPanel {
$id("selected_x").value = (x || 0); $id("selected_x").value = (x || 0);
$id("selected_y").value = (y || 0); $id("selected_y").value = (y || 0);
$id("xy_panel").style.display = 'block'; $id("xy_panel").style.removeProperty('display');
} }
// Elements in this array cannot be converted to a path // Elements in this array cannot be converted to a path
@ -324,7 +324,7 @@ class TopPanel {
}); });
if (tagName === "text") { if (tagName === "text") {
$id("text_panel").style.display = 'block'; $id("text_panel").style.removeProperty('display');
$id("tool_italic").pressed = this.editor.svgCanvas.getItalic(); $id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
$id("tool_bold").pressed = this.editor.svgCanvas.getBold(); $id("tool_bold").pressed = this.editor.svgCanvas.getBold();
$id("tool_font_family").value = elem.getAttribute("font-family"); $id("tool_font_family").value = elem.getAttribute("font-family");
@ -988,7 +988,7 @@ class TopPanel {
<se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="./images/tool_add_subpath.svg"></se-button> <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="./images/tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel --> </div> <!-- path_node_panel -->
<div id="cur_context_panel"></div> <div id="cur_context_panel"></div>
</div> <!-- tools_top --> </div>
`; `;
this.editor.$svgEditor.append(template.content.cloneNode(true)); this.editor.$svgEditor.append(template.content.cloneNode(true));
// svg editor source dialoag added to DOM // svg editor source dialoag added to DOM
@ -996,7 +996,7 @@ class TopPanel {
"se-svg-source-editor-dialog" "se-svg-source-editor-dialog"
); );
newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog"); newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
this.editor.$svgEditor.append(newSeEditorDialog); this.editor.$container.append(newSeEditorDialog);
newSeEditorDialog.init(i18next); newSeEditorDialog.init(i18next);
// register action to top panel buttons // register action to top panel buttons
$id("tool_source").addEventListener( $id("tool_source").addEventListener(

190
src/editor/svgedit.css
View File

@ -1,4 +1,4 @@
:root{ :root {
--main-bg-color: #72797A; --main-bg-color: #72797A;
--text-color: #000000; --text-color: #000000;
--border-color: #808080; --border-color: #808080;
@ -10,26 +10,50 @@
--input-color: #B2B2B2; --input-color: #B2B2B2;
} }
body {
background: var(--main-bg-color);
}
html, body, div{
user-select: text;
}
.svg_editor * { .svg_editor * {
transform-origin: 0 0; transform-origin: 0 0;
} }
.svg_editor { .svg_editor {
display: grid;
grid-template-rows: 40px 1fr 40px;
grid-template-columns: 34px 1fr 10px;
grid-template-areas: "top top top" "left workarea side" "left bottom bottom";
font-size: 8pt; font-size: 8pt;
background: var(--main-bg-color);
font-family: Verdana, Helvetica, Arial; font-family: Verdana, Helvetica, Arial;
color: var(--text-color); color: var(--text-color);
user-select: text;
width: 100%;
height: 100%;
}
#svgroot {
user-select: none;
position: absolute;
top: 0;
left: 0;
}
#workarea {
grid-area: workarea;
background-color: #A0A0A0;
border: 1px solid var(--border-color);
overflow: auto;
text-align: center;
}
#svgcanvas {
line-height: normal;
display: inline-block;
background: var(--canvas-bg-color);
text-align: center;
vertical-align: middle;
position:relative;
} }
a { a {
color:var(--link-color); color: var(--link-color);
} }
hr { hr {
@ -37,14 +61,14 @@ hr {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
#linkLabel > svg { #linkLabel>svg {
height: 20px; height: 20px;
padding-top: 4px; padding-top: 4px;
} }
#sidepanels { #sidepanels {
display: inline-block; display: inline-block;
position:absolute; position: absolute;
top: 40px; top: 40px;
bottom: 40px; bottom: 40px;
right: 0; right: 0;
@ -54,13 +78,13 @@ hr {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-left: none; border-left: none;
overflow-x:hidden; overflow-x: hidden;
overflow-y:visible; overflow-y: visible;
} }
#layerpanel { #layerpanel {
display: inline-block; display: inline-block;
position:relative; position: relative;
top: 0px; top: 0px;
bottom: 0; bottom: 0;
left: 12px; left: 12px;
@ -70,11 +94,6 @@ hr {
user-select: none; user-select: none;
} }
/*
border-style: solid;
border-color: #666;
border-width: 0px 0px 0px 1px;
*/
#sidepanel_handle { #sidepanel_handle {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -95,6 +114,7 @@ hr {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
#layerbuttons { #layerbuttons {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -175,12 +195,11 @@ hr {
—————————————————————————————*/ —————————————————————————————*/
#main_button { #main_button {
position: absolute; grid-area: top;
top: 4px;
left: 5px;
z-index: 5;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
padding-block: 2px;
padding-left: 3px;
} }
#main_button:hover { #main_button:hover {
@ -218,7 +237,7 @@ hr {
height: 28px; height: 28px;
} }
#main_icon > div { #main_icon>div {
float: left; float: left;
} }
@ -258,15 +277,14 @@ hr {
top: -9px; top: -9px;
} }
#main_menu ul, #main_menu ul, #main_menu li {
#main_menu li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#main_menu li { #main_menu li {
/* height: 35px;*/ /* height: 35px;*/
line-height: 22px; line-height: 22px;
padding-top: 7px; padding-top: 7px;
padding-left: 7px; padding-left: 7px;
@ -279,7 +297,7 @@ hr {
background: #FFC; background: #FFC;
} }
#main_menu li > div { #main_menu li>div {
float: left; float: left;
padding-right: 5px; padding-right: 5px;
} }
@ -291,46 +309,21 @@ hr {
/*—————————————————————————————*/ /*—————————————————————————————*/
#tools_top { #tools_top {
position: absolute; grid-area: top;
left: 96px; display: flex;
top: 2px; flex-direction: row;
min-height: 40px; /* leave space for the main menu */
border-bottom: none;
overflow: visible;
right:1px;
}
#tools_top .tool_sep {
margin-top: 5px;
}
#tools_top > div > * {
float: left;
}
#tools_top se-input {
margin-top: 5px;
height: 34px;
}
#tools_top se-spin-input, #tools_top se-list {
margin-top: 0;
height: 34px;
position: relative; position: relative;
top: 5px; left: 95px;
} }
#tools_top > *{
#tools_top se-dropdown-list { display:flex;
margin-top: 5px; flex-direction: row;
height: 34px;
} }
/*—————————————————————————————*/ /*—————————————————————————————*/
#tools_bottom { #tools_bottom {
position: absolute; grid-area: bottom;
left: 40px;
right: 0;
bottom: 0;
height: 33px;
overflow: visible; overflow: visible;
} }
@ -342,25 +335,19 @@ hr {
#tools_bottom se-spin-input { #tools_bottom se-spin-input {
float: left; float: left;
vertical-align: middle; vertical-align: middle;
display:flex; display: flex;
align-items: center; align-items: center;
} }
#tools_bottom elix-dropdown-list{
width:22px; #tools_bottom elix-dropdown-list {
width: 22px;
} }
/*—————————————————————————————*/ /*—————————————————————————————*/
#tools_left { #tools_left {
position: absolute; grid-area: left;
border-right: none; border-right: none;
width: 32px;
top: 40px;
left: 1px;
margin-top: -2px;
padding-left: 2px;
background: --main-bg-color;
z-index: 4;
} }
/*—————————————————————————————*/ /*—————————————————————————————*/
@ -381,7 +368,7 @@ hr {
stroke: none; stroke: none;
} }
#workarea.wireframe #canvasBackground > rect { #workarea.wireframe #canvasBackground>rect {
fill: #FFF !important; fill: #FFF !important;
} }
@ -395,6 +382,7 @@ hr {
} }
/*TODO: Adjust position of rulers are not visible*/ /*TODO: Adjust position of rulers are not visible*/
#cur_context_panel { #cur_context_panel {
position: absolute; position: absolute;
top: 57px; top: 57px;
@ -418,22 +406,11 @@ hr {
text-decoration: underline; text-decoration: underline;
} }
div.toolset, div.toolset > * { .toolset {
float: left; display: flex;
flex-direction: row;
} }
div.toolset {
height: 34px;
}
div.toolset label span {
/* outline: 1px solid red;*/
padding-top: 3px;
display: inline-block;
}
input[type=text] { input[type=text] {
padding: 2px; padding: 2px;
} }
@ -509,7 +486,7 @@ input[type=text] {
margin-right: 0; margin-right: 0;
} }
#main_menu li#tool_open, #main_menu li#tool_import { #main_menu li#tool_open, #main_menu li#tool_import {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -518,16 +495,15 @@ input[type=text] {
overflow: hidden; overflow: hidden;
} }
#tool_open input, #tool_open input, #tool_import input, #tool_image input {
#tool_import input,
#tool_image input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
font-size: 10em; font-size: 10em;
top: -5px; top: -5px;
right: -5px; right: -5px;
margin: 0; margin: 0;
cursor: pointer; /* Sadly doesn't appear to have an effect */ cursor: pointer;
/* Sadly doesn't appear to have an effect */
} }
.disabled { .disabled {
@ -536,12 +512,8 @@ input[type=text] {
} }
.tool_sep { .tool_sep {
width: 1px;
background: #888;
border-left: 1px outset #EEE; border-left: 1px outset #EEE;
margin: 2px 3px; margin: 6px 2px;
padding: 0;
height: 24px;
} }
.width_label { .width_label {
@ -562,7 +534,6 @@ input[type=text] {
width: 22px; width: 22px;
} }
#palette { #palette {
float: right; float: right;
} }
@ -598,7 +569,9 @@ input[type=text] {
background: white; background: white;
} }
#tool_opacity { right: 0;} #tool_opacity {
right: 0;
}
#tool_opacity { #tool_opacity {
overflow: visible; overflow: visible;
@ -608,7 +581,7 @@ ul li.current {
background-color: #F4E284; background-color: #F4E284;
} }
#copyright { #copyright {
text-align: right; text-align: right;
padding-right: .3em; padding-right: .3em;
} }
@ -660,22 +633,9 @@ ul li.current {
#workarea, #sidepanels { #workarea, #sidepanels {
top: 70px !important; top: 70px !important;
} }
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y {
top: 86px;
}
#cur_context_panel { #cur_context_panel {
top: 87px; top: 87px;
} }
#selected_panel {
clear: right;
}
} }
@media screen and (max-width:1100px) { @media screen and (max-width:1100px) {

43
src/editor/templates/editorTemplate.js
View File

@ -1,46 +1,11 @@
const editorTemplate = document.createElement('template'); const editorTemplate = document.createElement('template');
editorTemplate.innerHTML = ` editorTemplate.innerHTML = `
<style> <div class="svg_editor">
#svgroot { <div id="workarea">
-moz-user-select: none; <div id="svgcanvas"></div>
-webkit-user-select: none; </div>
position: absolute;
top: 0;
left: 0;
}
#workarea {
display: inline-table-cell;
position:absolute;
top: 40px;
left: 40px;
bottom: 40px;
right: 14px;
background-color: #A0A0A0;
border: 1px solid var(--border-color);
overflow: auto;
text-align: center;
}
#svgcanvas {
line-height: normal;
display: inline-block;
background: var(--canvas-bg-color);
text-align: center;
vertical-align: middle;
width: 640px;
height: 480px;
/* for widget regions that shouldn't react to dragging */
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px);
position: relative;
}
</style>
</div>
<div id="workarea">
<div id="svgcanvas" style="position: relative;">
</div> </div>
</div>
`; `;
export default editorTemplate; export default editorTemplate;

20
src/editor/templates/rulersTemplate.js
View File

@ -5,9 +5,11 @@ rulersTemplate.innerHTML = `
/* Rulers /* Rulers
——————————————————————————————————————*/ ——————————————————————————————————————*/
#rulers {
position: relative;
top: -14px;
}
#rulers > div { #rulers > div {
position: absolute;
background: var(--ruler-color); background: var(--ruler-color);
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
@ -54,18 +56,6 @@ rulersTemplate.innerHTML = `
#ruler_y > div { #ruler_y > div {
overflow: hidden; overflow: hidden;
} }
/*
@media screen and (max-width: 1250px) {
#rulers #ruler_corner,
#rulers #ruler_x {
top: 71px;
}
#rulers #ruler_y {
top: 57px;
}
}
*/
</style> </style>
<div id="rulers"> <div id="rulers">
<div id="ruler_corner"></div> <div id="ruler_corner"></div>
@ -79,7 +69,7 @@ rulersTemplate.innerHTML = `
<canvas width="15"></canvas> <canvas width="15"></canvas>
</div> </div>
</div> </div>
</div> </div>
`; `;
export default rulersTemplate; export default rulersTemplate;