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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/editor/EditorStartup.js
View File

@ -74,7 +74,7 @@ class EditorStartup {
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.$svgEditor.style.visibility = 'hidden';
this.workarea = $id('workarea');
// Image props dialog added to DOM
const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
@ -413,7 +413,6 @@ class EditorStartup {
});
this.workarea.addEventListener('scroll', () => {
// TODO: jQuery's scrollLeft/Top() wouldn't require a null check
this.rulers.manageScroll();
});
@ -534,9 +533,9 @@ class EditorStartup {
}
if (this.configObj.curConfig.showRulers) {
$id('rulers').style.removeProperty('display');
this.rulers.display(true);
} else {
$id('rulers').style.display = 'none';
this.rulers.display(false);
}
if (this.configObj.curConfig.showRulers) {

20
src/editor/MainMenu.js
View File

@ -306,23 +306,17 @@ class MainMenu {
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<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>
<se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg">
</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_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg"></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_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_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>
<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_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg">
</se-menu-item>
<se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"></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_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg"></se-menu-item>
</se-menu>
`;
this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('tools_top').prepend(template.content.cloneNode(true));
// register action to main menu entries
/**

17
src/editor/Rulers.js
View File

@ -18,16 +18,23 @@ class Rulers {
this.svgCanvas = editor.svgCanvas;
this.editor = editor;
// 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}
*/
manageScroll () {
const rulerX = document.getElementById('ruler_x');
const rulerY = document.getElementById('ruler_y');
if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft;
if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop;
if (this.rulerX) this.rulerX.scrollLeft = this.editor.workarea.scrollLeft;
if (this.rulerY) this.rulerY.scrollTop = this.editor.workarea.scrollTop;
}
/**

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

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

20
src/editor/svgedit.css
View File

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

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

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

1
src/svgcanvas/svgcanvas.js
View File

@ -224,7 +224,6 @@ class SvgCanvas {
// "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.
// JFH const svgdoc = container.ownerDocument;
const svgdoc = window.document;
// This is a container for the document being edited, not the document itself.