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

moves from index.html to js

Browse Source
This commit is contained in:
JFH
2021-01-09 13:41:07 +01:00
parent 82c036e61f
commit b439822516
6 changed files with 140 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/editor/EditorStartup.js
View File

@@ -4,7 +4,7 @@ import {convertUnit} from '../common/units.js';
import { import {
hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom
} from './contextmenu.js'; } from './contextmenu.js';
import editorTemplate from './templates/editorTemplate.js';
import SvgCanvas from '../svgcanvas/svgcanvas.js'; import SvgCanvas from '../svgcanvas/svgcanvas.js';
import LayersPanel from './panels/LayersPanel.js'; import LayersPanel from './panels/LayersPanel.js';
import LeftPanelHandlers from './panels/LeftPanelHandlers.js'; import LeftPanelHandlers from './panels/LeftPanelHandlers.js';
@@ -64,7 +64,9 @@ class EditorStartup {
// allow to prepare the dom without display // allow to prepare the dom without display
$id('svg_editor').style.visibility = 'hidden'; $id('svg_editor').style.visibility = 'hidden';
try { try {
// Image props dialog added to DOM // add editor components to the DOM
document.body.append(editorTemplate.content.cloneNode(true));
// 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');
document.body.append(newSeImgPropDialog); document.body.append(newSeImgPropDialog);

4
src/editor/Rulers.js
View File

@@ -1,6 +1,6 @@
/* globals $ */ /* globals $ */
import {getTypeMap} from '../common/units.js'; import {getTypeMap} from '../common/units.js';
import rulersTemplate from './templates/rulersTemplate.js';
/** /**
* *
*/ */
@@ -18,6 +18,8 @@ class Rulers {
} }
this.svgCanvas = editor.svgCanvas; this.svgCanvas = editor.svgCanvas;
this.editor = editor; this.editor = editor;
// add rulers component to the DOM
document.body.append(rulersTemplate.content.cloneNode(true));
} }
/** /**
* @type {Module} * @type {Module}

17
src/editor/index.html
View File

@@ -29,23 +29,6 @@
<body> <body>
<div id="svg_editor" role="main"> <div id="svg_editor" role="main">
<div id="rulers">
<div id="ruler_corner"></div>
<div id="ruler_x">
<div>
<canvas height="15"></canvas>
</div>
</div>
<div id="ruler_y">
<div>
<canvas width="15"></canvas>
</div>
</div>
</div>
<div id="workarea">
<div id="svgcanvas" style="position: relative;">
</div>
</div>
<div id="sidepanels"> <div id="sidepanels">
<div id="layerpanel"> <div id="layerpanel">
<h3 id="layersLabel">Layers</h3> <h3 id="layersLabel">Layers</h3>

93
src/editor/svgedit.css
View File

@@ -43,96 +43,11 @@ hr {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
#svgroot {
-moz-user-select: none;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
#svgcanvas {
line-height: normal;
display: inline-block;
background: var(--canvas-bg-color);
text-align: center;
vertical-align: middle;
width: 640px;
height: 480px;
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
position: relative;
}
/* Rulers
——————————————————————————————————————*/
#rulers > div {
position: absolute;
background: var(--ruler-color);
z-index: 1;
overflow: hidden;
}
#ruler_corner {
top: 41px;
left: 41px;
width: 15px;
height: 15px;
}
#ruler_x {
height: 15px;
top: 41px;
left: 56px;
right: 30px;
border-bottom: 1px solid;
border-left: 1px solid #777;
}
#ruler_y {
width: 15px;
top: 55px;
left: 41px;
bottom: 56px;
border-right: 1px solid;
border-top: 1px solid #777;
}
#ruler_x canvas:first-child {
margin-left: -16px;
}
#ruler_x canvas {
float: left;
}
#ruler_y canvas {
margin-top: -16px;
}
#ruler_x > div,
#ruler_y > div {
overflow: hidden;
}
#linkLabel > svg { #linkLabel > svg {
height: 20px; height: 20px;
padding-top: 4px; padding-top: 4px;
} }
#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;
}
#sidepanels { #sidepanels {
display: inline-block; display: inline-block;
position:absolute; position:absolute;
@@ -810,13 +725,9 @@ ul li.current {
#workarea, #sidepanels { #workarea, #sidepanels {
top: 70px; top: 70px;
} }
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y { #tools_left {
top: 86px; top: 71px;
} }
#cur_context_panel { #cur_context_panel {

46
src/editor/templates/editorTemplate.js Normal file
View File

@@ -0,0 +1,46 @@
const editorTemplate = document.createElement('template');
editorTemplate.innerHTML = `
<style>
#svgroot {
-moz-user-select: none;
-webkit-user-select: none;
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>
`;
export default editorTemplate;

85
src/editor/templates/rulersTemplate.js Normal file
View File

@@ -0,0 +1,85 @@
const rulersTemplate = document.createElement('template');
rulersTemplate.innerHTML = `
<style>
/* Rulers
——————————————————————————————————————*/
#rulers > div {
position: absolute;
background: var(--ruler-color);
z-index: 1;
overflow: hidden;
}
#ruler_corner {
top: 41px;
left: 41px;
width: 15px;
height: 15px;
}
#ruler_x {
height: 15px;
top: 41px;
left: 56px;
right: 30px;
border-bottom: 1px solid;
border-left: 1px solid #777;
}
#ruler_y {
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;
}
#ruler_x canvas {
float: left;
}
#ruler_y canvas {
margin-top: -16px;
}
#ruler_x > div,
#ruler_y > div {
overflow: hidden;
}
/*
@media screen and (max-width: 1250px) {
#rulers #ruler_corner,
#rulers #ruler_x {
top: 71px;
}
#rulers #ruler_y {
top: 57px;
}
}
*/
</style>
<div id="rulers">
<div id="ruler_corner"></div>
<div id="ruler_x">
<div>
<canvas height="15"></canvas>
</div>
</div>
<div id="ruler_y">
<div>
<canvas width="15"></canvas>
</div>
</div>
</div>
`;
export default rulersTemplate;