extend css grid to rulers

master
JFH 2021-08-07 23:52:50 +02:00
parent cfb47fa952
commit cc4b3676a1
7 changed files with 43 additions and 70 deletions

View File

@ -74,7 +74,7 @@ class EditorStartup {
this.$container.append(editorTemplate.content.cloneNode(true)); this.$container.append(editorTemplate.content.cloneNode(true));
this.$svgEditor = $qq('.svg_editor'); this.$svgEditor = $qq('.svg_editor');
// allow to prepare the dom without display // allow to prepare the dom without display
// JFH this.$svgEditor.style.visibility = 'hidden'; this.$svgEditor.style.visibility = 'hidden';
this.workarea = $id('workarea'); 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');
@ -413,7 +413,6 @@ class EditorStartup {
}); });
this.workarea.addEventListener('scroll', () => { this.workarea.addEventListener('scroll', () => {
// TODO: jQuery's scrollLeft/Top() wouldn't require a null check
this.rulers.manageScroll(); this.rulers.manageScroll();
}); });
@ -534,9 +533,9 @@ class EditorStartup {
} }
if (this.configObj.curConfig.showRulers) { if (this.configObj.curConfig.showRulers) {
$id('rulers').style.removeProperty('display'); this.rulers.display(true);
} else { } else {
$id('rulers').style.display = 'none'; this.rulers.display(false);
} }
if (this.configObj.curConfig.showRulers) { if (this.configObj.curConfig.showRulers) {

View File

@ -306,23 +306,17 @@ 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">
<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>
<se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg"> <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
</se-menu-item>
<se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg">
</se-menu-item>
<se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item> <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item>
<se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item> <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item>
<se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"> <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"></se-menu-item>
</se-menu-item> <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg"></se-menu-item>
<se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg"> <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg"></se-menu-item>
</se-menu-item>
<se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg">
</se-menu-item>
</se-menu> </se-menu>
`; `;
this.editor.$svgEditor.append(template.content.cloneNode(true)); $id('tools_top').prepend(template.content.cloneNode(true));
// register action to main menu entries // register action to main menu entries
/** /**

View File

@ -18,16 +18,23 @@ 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.workarea.append(rulersTemplate.content.cloneNode(true)); this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
const { $id } = this.svgCanvas;
this.rulerX = $id('ruler_x');
this.rulerY = $id('ruler_y');
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';
} }
/** /**
* @type {Module} * @type {Module}
*/ */
manageScroll () { manageScroll () {
const rulerX = document.getElementById('ruler_x'); if (this.rulerX) this.rulerX.scrollLeft = this.editor.workarea.scrollLeft;
const rulerY = document.getElementById('ruler_y'); if (this.rulerY) this.rulerY.scrollTop = this.editor.workarea.scrollTop;
if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft;
if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop;
} }
/** /**

View File

@ -355,8 +355,6 @@ export default {
}; };
return { return {
/** @todo JFH special flag */
newUI: true,
name: svgEditor.i18next.t(`${name}:name`), name: svgEditor.i18next.t(`${name}:name`),
callback() { callback() {
const btitle = svgEditor.i18next.t(`${name}:langListTitle`); const btitle = svgEditor.i18next.t(`${name}:langListTitle`);

View File

@ -16,9 +16,13 @@
.svg_editor { .svg_editor {
display: grid; display: grid;
grid-template-rows: 40px 1fr 40px; grid-template-rows: 40px 15px 1fr 40px;
grid-template-columns: 34px 1fr 10px; grid-template-columns: 34px 15px 1fr 10px;
grid-template-areas: "top top top" "left workarea side" "left bottom bottom"; grid-template-areas:
"top top top top"
"left corner rulerX side"
"left rulerY workarea side"
"left bottom bottom bottom";
font-size: 8pt; font-size: 8pt;
background: var(--main-bg-color); background: var(--main-bg-color);
font-family: Verdana, Helvetica, Arial; font-family: Verdana, Helvetica, Arial;
@ -195,16 +199,11 @@ hr {
*/ */
#main_button { #main_button {
grid-area: top;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
padding-block: 2px; padding-block: 2px;
padding-left: 3px; padding-left: 3px;
} height: 34px;
#main_button:hover {
background-color: var(--icon-bg-color-hover);
color: #fff;
} }
#main_icon { #main_icon {
@ -314,7 +313,6 @@ hr {
flex-direction: row; flex-direction: row;
/* leave space for the main menu */ /* leave space for the main menu */
position: relative; position: relative;
left: 95px;
} }
#tools_top > *{ #tools_top > *{
display:flex; display:flex;
@ -381,8 +379,6 @@ hr {
vertical-align: 12px; vertical-align: 12px;
} }
/*TODO: Adjust position of rulers are not visible*/
#cur_context_panel { #cur_context_panel {
position: absolute; position: absolute;
top: 57px; top: 57px;

View File

@ -5,59 +5,40 @@ rulersTemplate.innerHTML = `
/* Rulers /* Rulers
*/ */
#rulers {
position: relative; #ruler_corner {
top: -14px;
}
#rulers > div {
background: var(--ruler-color); background: var(--ruler-color);
grid-area: corner;
width: 15px;
height: 15px;
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
} }
#ruler_corner {
top: 41px;
left: 41px;
width: 15px;
height: 15px;
}
#ruler_x { #ruler_x {
background: var(--ruler-color);
grid-area: rulerX;
height: 15px; height: 15px;
top: 41px;
left: 56px;
right: 30px;
border-bottom: 1px solid; border-bottom: 1px solid;
border-left: 1px solid #777; border-left: 1px solid #777;
z-index: 1;
overflow: hidden;
} }
#ruler_y { #ruler_y {
background: var(--ruler-color);
grid-area: rulerY;
width: 15px; width: 15px;
top: 55px;
left: 41px;
bottom: 41px;
border-right: 1px solid; border-right: 1px solid;
border-top: 1px solid #777; border-top: 1px solid #777;
} z-index: 1;
overflow: hidden;
#ruler_x canvas:first-child {
margin-left: -16px;
} }
#ruler_x canvas { #ruler_x canvas {
float: left; float: left;
} }
#ruler_y canvas {
margin-top: -16px;
}
#ruler_x > div,
#ruler_y > div {
overflow: hidden;
}
</style> </style>
<div id="rulers">
<div id="ruler_corner"></div> <div id="ruler_corner"></div>
<div id="ruler_x"> <div id="ruler_x">
<div> <div>
@ -69,7 +50,6 @@ rulersTemplate.innerHTML = `
<canvas width="15"></canvas> <canvas width="15"></canvas>
</div> </div>
</div> </div>
</div>
`; `;
export default rulersTemplate; export default rulersTemplate;

View File

@ -224,7 +224,6 @@ class SvgCanvas {
// "document" element associated with the container (same as window.document using default svg-editor.js) // "document" element associated with the container (same as window.document using default svg-editor.js)
// NOTE: This is not actually a SVG document, but an HTML document. // NOTE: This is not actually a SVG document, but an HTML document.
// JFH const svgdoc = container.ownerDocument;
const svgdoc = window.document; const svgdoc = window.document;
// This is a container for the document being edited, not the document itself. // This is a container for the document being edited, not the document itself.