Merge pull request #673 from SVG-Edit/external-html

externalized html templates for better modularity
master
JFH 2021-12-04 12:53:17 +01:00 committed by GitHub
commit a529258774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 2067 additions and 1470 deletions

1304
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -138,6 +138,7 @@
"rollup": "2.60.2",
"rollup-plugin-copy": "3.4.0",
"rollup-plugin-filesize": "9.1.1",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-node-polyfills": "0.2.1",
"rollup-plugin-progress": "1.1.2",
"rollup-plugin-re": "1.0.7",

View File

@ -12,6 +12,9 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import url from '@rollup/plugin-url'; // for XML/SVG files
// eslint-disable-next-line node/no-extraneous-import
import html from 'rollup-plugin-html';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
import { terser } from 'rollup-plugin-terser';
// import progress from 'rollup-plugin-progress';
@ -91,6 +94,11 @@ const config = [ {
{ src: 'src/editor/svgedit.css', dest }
]
}),
html({ include: [
'src/editor/panels/*.html',
'src/editor/templates/*.html',
'src/editor/dialogs/*.html'
] }),
nodeResolve({
browser: true,
preferBuiltins: false
@ -124,6 +132,9 @@ extensionDirs.forEach((extensionDir) => {
limit: 0,
fileName: '[name][extname]'
}),
html({ include: [
'src/editor/extensions/*/*.html'
] }),
nodeResolve({
browser: true,
preferBuiltins: true

View File

@ -7,7 +7,7 @@ import {
import {
hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom
} from './contextmenu.js';
import editorTemplate from './templates/editorTemplate.js';
import editorTemplate from './templates/editorTemplate.html';
import SvgCanvas from '../svgcanvas/svgcanvas.js';
import Rulers from './Rulers.js';
@ -71,7 +71,10 @@ class EditorStartup {
await import(`./dialogs/index.js`);
try {
// add editor components to the DOM
this.$container.append(editorTemplate.content.cloneNode(true));
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = editorTemplate;
this.$container.append(template.content.cloneNode(true));
this.$svgEditor = $qq('.svg_editor');
// allow to prepare the dom without display
this.$svgEditor.style.visibility = 'hidden';

View File

@ -1,5 +1,5 @@
import { getTypeMap } from '../common/units.js';
import rulersTemplate from './templates/rulersTemplate.js';
import rulersTemplate from './templates/rulersTemplate.html';
/**
*
*/
@ -18,7 +18,10 @@ class Rulers {
this.svgCanvas = editor.svgCanvas;
this.editor = editor;
// add rulers component to the DOM
this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = rulersTemplate;
this.editor.$svgEditor.append(template.content.cloneNode(true));
const { $id } = this.svgCanvas;
this.rulerX = $id('ruler_x');
this.rulerY = $id('ruler_y');

View File

@ -0,0 +1,117 @@
<style>
.contextMenu {
position: absolute;
z-index: 99999;
border: solid 1px rgba(0, 0, 0, .33);
background: rgba(255, 255, 255, .95);
padding: 5px 0;
margin: 0px;
display: none;
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
}
.contextMenu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu .shortcut {
width: 115px;
text-align: right;
float: right;
}
.contextMenu a {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
color: #222;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 0px 15px 1px 20px;
}
.contextMenu li.hover a {
background-color: #2e5dea;
color: white;
cursor: default;
}
.contextMenu li.disabled a {
color: #999;
}
.contextMenu li.hover.disabled a {
background-color: transparent;
}
.contextMenu li.separator {
border-top: solid 1px #E3E3E3;
padding-top: 5px;
margin-top: 5px;
}
</style>
<ul id="cmenu_canvas" class="contextMenu">
<li>
<a href="#cut" id="se-cut">
<span class="shortcut">META+X</span>
</a>
</li>
<li>
<a href="#copy" id="se-copy">
<span class="shortcut">META+C</span>
</a>
</li>
<li>
<a href="#paste" id="se-paste"></a>
</li>
<li>
<a href="#paste_in_place" id="se-paste-in-place"></a>
</li>
<li class="separator">
<a href="#delete" id="se-delete">
<span class="shortcut">BACKSPACE</span>
</a>
</li>
<li class="separator">
<a href="#group" id="se-group">
<span class="shortcut">G</span>
</a>
</li>
<li>
<a href="#ungroup" id="se-ungroup">
<span class="shortcut">G</span>
</a>
</li>
<li class="separator">
<a href="#move_front" id="se-move-front">
<span class="shortcut">CTRL+SHFT+]</span>
</a>
</li>
<li>
<a href="#move_up" id="se-move-up">
<span class="shortcut">CTRL+]</span>
</a>
</li>
<li>
<a href="#move_down" id="se-move-down">
<span class="shortcut">CTRL+[</span>
</a>
</li>
<li>
<a href="#move_back" id="se-move-back">
<span class="shortcut">CTRL+SHFT+[</span>
</a>
</li>
</ul>

View File

@ -1,122 +1,7 @@
import cMenuDialogHTML from './cmenuDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
.contextMenu {
position: absolute;
z-index: 99999;
border: solid 1px rgba(0,0,0,.33);
background: rgba(255,255,255,.95);
padding: 5px 0;
margin: 0px;
display: none;
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
box-shadow: 2px 5px 10px rgba(0,0,0,.3);
}
.contextMenu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu .shortcut {
width: 115px;
text-align:right;
float:right;
}
.contextMenu a {
-moz-user-select: none;
-webkit-user-select: none;
color: #222;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 0px 15px 1px 20px;
}
.contextMenu li.hover a {
background-color: #2e5dea;
color: white;
cursor: default;
}
.contextMenu li.disabled a {
color: #999;
}
.contextMenu li.hover.disabled a {
background-color: transparent;
}
.contextMenu li.separator {
border-top: solid 1px #E3E3E3;
padding-top: 5px;
margin-top: 5px;
}
</style>
<ul id="cmenu_canvas" class="contextMenu">
<li>
<a href="#cut" id="se-cut">
<span class="shortcut">META+X</span>
</a>
</li>
<li>
<a href="#copy" id="se-copy">
<span class="shortcut">META+C</span>
</a>
</li>
<li>
<a href="#paste" id="se-paste"></a>
</li>
<li>
<a href="#paste_in_place" id="se-paste-in-place"></a>
</li>
<li class="separator">
<a href="#delete" id="se-delete">
<span class="shortcut">BACKSPACE</span>
</a>
</li>
<li class="separator">
<a href="#group" id="se-group">
<span class="shortcut">G</span>
</a>
</li>
<li>
<a href="#ungroup" id="se-ungroup">
<span class="shortcut">G</span>
</a>
</li>
<li class="separator">
<a href="#move_front" id="se-move-front">
<span class="shortcut">CTRL+SHFT+]</span>
</a>
</li>
<li>
<a href="#move_up" id="se-move-up">
<span class="shortcut">CTRL+]</span>
</a>
</li>
<li>
<a href="#move_down" id="se-move-down">
<span class="shortcut">CTRL+[</span>
</a>
</li>
<li>
<a href="#move_back" id="se-move-back">
<span class="shortcut">CTRL+SHFT+[</span>
</a>
</li>
</ul>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = cMenuDialogHTML;
/**
* @class SeCMenuDialog
*/

View File

@ -0,0 +1,70 @@
<style>
.contextMenu {
position: absolute;
z-index: 99999;
border: solid 1px rgba(0, 0, 0, .33);
background: rgba(255, 255, 255, .95);
padding: 5px 0;
margin: 0px;
display: none;
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
}
.contextMenu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu .shortcut {
width: 115px;
text-align: right;
float: right;
}
.contextMenu a {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
color: #222;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 0px 15px 1px 20px;
}
.contextMenu li.hover a {
background-color: #2e5dea;
color: white;
cursor: default;
}
.contextMenu li.disabled a {
color: #999;
}
.contextMenu li.hover.disabled a {
background-color: transparent;
}
.contextMenu li.separator {
border-top: solid 1px #E3E3E3;
padding-top: 5px;
margin-top: 5px;
}
</style>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe" id="se-dupe">#{svgEditor.i18next.t('layers.dupe')}</a></li>
<li><a href="#delete" id="se-layer-delete">#{svgEditor.i18next.t('layers.del')}</a></li>
<li><a href="#merge_down" id="se-merge-down">#{svgEditor.i18next.t('layers.merge_down')}</a></li>
<li><a href="#merge_all" id="se-merge-all">#{svgEditor.i18next.t('layers.merge_all')}</a></li>
</ul>

View File

@ -1,75 +1,8 @@
import cMenuLayersDialog from './cmenuLayersDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
.contextMenu {
position: absolute;
z-index: 99999;
border: solid 1px rgba(0,0,0,.33);
background: rgba(255,255,255,.95);
padding: 5px 0;
margin: 0px;
display: none;
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
box-shadow: 2px 5px 10px rgba(0,0,0,.3);
}
.contextMenu li {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu .shortcut {
width: 115px;
text-align:right;
float:right;
}
.contextMenu a {
-moz-user-select: none;
-webkit-user-select: none;
color: #222;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 0px 15px 1px 20px;
}
.contextMenu li.hover a {
background-color: #2e5dea;
color: white;
cursor: default;
}
.contextMenu li.disabled a {
color: #999;
}
.contextMenu li.hover.disabled a {
background-color: transparent;
}
.contextMenu li.separator {
border-top: solid 1px #E3E3E3;
padding-top: 5px;
margin-top: 5px;
}
</style>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe" id="se-dupe">#{svgEditor.i18next.t('layers.dupe')}</a></li>
<li><a href="#delete" id="se-layer-delete">#{svgEditor.i18next.t('layers.del')}</a></li>
<li><a href="#merge_down" id="se-merge-down">#{svgEditor.i18next.t('layers.merge_down')}</a></li>
<li><a href="#merge_all" id="se-merge-all">#{svgEditor.i18next.t('layers.merge_all')}</a></li>
</ul>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = cMenuLayersDialog;
/**
* @class SeCMenuLayerDialog
*/

View File

@ -0,0 +1,239 @@
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
.toolbar_button button {
border: 1px solid #dedede;
line-height: 130%;
float: left;
background: #E8E8E8 none;
padding: 5px 10px 5px 7px;
/* Firefox */
line-height: 17px;
/* Safari */
margin: 5px 20px 0 0;
border: 1px var(--border-color) solid;
border-top-color: #FFF;
border-left-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
.toolbar_button button:hover {
border: 1px #e0a874 solid;
border-top-color: #fcd9ba;
border-left-color: #fcd9ba;
background-color: #FFC;
}
.toolbar_button button:active {
background-color: #F4E284;
border-left: 1px solid #663300;
border-top: 1px solid #663300;
}
.toolbar_button button .svg_icon {
margin: 0 3px -3px 0 !important;
padding: 0;
border: none;
width: 16px;
height: 16px;
}
.color_block {
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
#bg_blocks {
overflow: auto;
margin-left: 30px;
}
#bg_blocks .color_block {
position: static;
}
#svginfo_bg_note {
font-size: .9em;
font-style: italic;
color: #444;
}
#svg_prefs #svg_prefs_container {
padding: 10px;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
#tool_prefs_back {
margin-left: 1em;
overflow: auto;
}
#tool_prefs_save {
width: 30%;
background-color: #c79605;
margin-left: 20%;
}
#tool_prefs_cancel {
width: 30%;
background-color: #c8c8c8;
}
#svg_prefs #svg_docprops_prefs {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_prefs_container fieldset+fieldset {
float: right;
}
#svg_prefs legend {
max-width: 195px;
}
#svg_prefs_container>fieldset>legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_prefs fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_prefs_container label {
display: block;
margin: .5em;
}
#svg_prefs_container div.color_block {
float: left;
margin: 2px;
padding: 20px;
border: 1px solid #6f6f6f;
}
#change_background div.cur_background {
border: 2px solid blue;
padding: 19px;
}
#canvas_bg_url {
display: block;
width: 96%;
}
#svg_prefs button {
margin-top: 0;
margin-bottom: 5px;
}
</style>
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save"></button>
<button id="tool_prefs_cancel"></button>
</div>
<fieldset>
<legend id="svginfo_editor_prefs"></legend>
<label>
<span id="svginfo_lang"></span>
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
<select id="lang_select">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pl" value="pl">Polski</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Română</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_sl" value="sl">Slovenščina</option>
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
</label>
<fieldset id="change_background">
<legend id="svginfo_change_background"></legend>
<div id="bg_blocks"></div>
<label>
<span id="svginfo_bg_url"></span>
<input type="text" id="canvas_bg_url" />
</label>
<p id="svginfo_bg_note"></p>
</fieldset>
<fieldset id="change_grid">
<legend id="svginfo_grid_settings"></legend>
<label for="svginfo_snap_onoff">
<span id="svginfo_snap_onoff"></span>
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
</label>
<label for="grid_snapping_step">
<span id="svginfo_snap_step"></span>
<input type="text" id="grid_snapping_step" size="3" value="10" />
</label>
<label>
<span id="svginfo_grid_color"></span>
<input type="text" id="grid_color" size="3" value="#000" />
</label>
</fieldset>
<fieldset id="units_rulers">
<legend id="svginfo_units_rulers"></legend>
<label>
<span id="svginfo_rulers_onoff"></span>
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
</label>
<label>
<span id="svginfo_unit"></span>
<select id="base_unit">
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>
<option value="mm">Millimeters</option>
<option value="in">Inches</option>
<option value="pt">Points</option>
<option value="pc">Picas</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
</label>
</fieldset>
</fieldset>
</div>
</elix-dialog>

View File

@ -1,231 +1,7 @@
import editorPreferencesDialog from './editorPreferencesDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
.toolbar_button button {
border:1px solid #dedede;
line-height:130%;
float: left;
background: #E8E8E8 none;
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
margin: 5px 20px 0 0;
border: 1px var(--border-color) solid;
border-top-color: #FFF;
border-left-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
}
.toolbar_button button:hover {
border: 1px #e0a874 solid;
border-top-color: #fcd9ba;
border-left-color: #fcd9ba;
background-color: #FFC;
}
.toolbar_button button:active {
background-color: #F4E284;
border-left: 1px solid #663300;
border-top: 1px solid #663300;
}
.toolbar_button button .svg_icon {
margin: 0 3px -3px 0 !important;
padding: 0;
border: none;
width: 16px;
height: 16px;
}
.color_block {
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
#bg_blocks {
overflow: auto;
margin-left: 30px;
}
#bg_blocks .color_block {
position: static;
}
#svginfo_bg_note {
font-size: .9em;
font-style: italic;
color: #444;
}
#svg_prefs #svg_prefs_container {
padding: 10px;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
#tool_prefs_back {
margin-left: 1em;
overflow: auto;
}
#tool_prefs_save {
width: 30%;
background-color: #c79605;
margin-left: 20%;
}
#tool_prefs_cancel {
width: 30%;
background-color: #c8c8c8;
}
#svg_prefs #svg_docprops_prefs {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_prefs_container fieldset + fieldset {
float: right;
}
#svg_prefs legend {
max-width: 195px;
}
#svg_prefs_container > fieldset > legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_prefs fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_prefs_container label {
display: block;
margin: .5em;
}
#svg_prefs_container div.color_block {
float: left;
margin: 2px;
padding: 20px;
border: 1px solid #6f6f6f;
}
#change_background div.cur_background {
border: 2px solid blue;
padding: 19px;
}
#canvas_bg_url {
display: block;
width: 96%;
}
#svg_prefs button {
margin-top: 0;
margin-bottom: 5px;
}
</style>
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save"></button>
<button id="tool_prefs_cancel"></button>
</div>
<fieldset>
<legend id="svginfo_editor_prefs"></legend>
<label>
<span id="svginfo_lang"></span>
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
<select id="lang_select">
<option id="lang_ar" value="ar">العربية</option>
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fa" value="fa">فارسی</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_fy" value="fy">Frysk</option>
<option id="lang_hi" value="hi">ि, ि</option>
<option id="lang_it" value="it">Italiano</option>
<option id="lang_ja" value="ja">日本語</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_pl" value="pl">Polski</option>
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
<option id="lang_ro" value="ro">Română</option>
<option id="lang_ru" value="ru">Русский</option>
<option id="lang_sk" value="sk">Slovenčina</option>
<option id="lang_sl" value="sl">Slovenščina</option>
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
</select>
</label>
<fieldset id="change_background">
<legend id="svginfo_change_background"></legend>
<div id="bg_blocks"></div>
<label>
<span id="svginfo_bg_url"></span>
<input type="text" id="canvas_bg_url" />
</label>
<p id="svginfo_bg_note"></p>
</fieldset>
<fieldset id="change_grid">
<legend id="svginfo_grid_settings"></legend>
<label for="svginfo_snap_onoff">
<span id="svginfo_snap_onoff"></span>
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
</label>
<label for="grid_snapping_step">
<span id="svginfo_snap_step"></span>
<input type="text" id="grid_snapping_step" size="3" value="10" />
</label>
<label>
<span id="svginfo_grid_color"></span>
<input type="text" id="grid_color" size="3" value="#000" />
</label>
</fieldset>
<fieldset id="units_rulers">
<legend id="svginfo_units_rulers"></legend>
<label>
<span id="svginfo_rulers_onoff"></span>
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
</label>
<label>
<span id="svginfo_unit"></span>
<select id="base_unit">
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>
<option value="mm">Millimeters</option>
<option value="in">Inches</option>
<option value="pt">Points</option>
<option value="pc">Picas</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
</label>
</fieldset>
</fieldset>
</div>
</elix-dialog>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = editorPreferencesDialog;
/**
* @class SeEditPrefsDialog
*/

View File

@ -0,0 +1,78 @@
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #5a6162;
overflow: auto;
text-align: left;
border: 1px solid #c8c8c8;
}
#dialog_content p,
#dialog_content select,
#dialog_content label {
margin: 10px;
line-height: 0.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 400px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.8em;
}
#dialog_container,
#dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
.se-select {
text-align: center;
}
elix-number-spin-box {
margin-left: 15px;
}
</style>
<elix-dialog id="export_box" aria-label="export svg" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p class="se-select" id="export_select"></p>
<p class="se-select">
<select id="se-storage-pref">
<option value="PNG">PNG</option>
<option value="JPEG">JPEG</option>
<option value="BMP">BMP</option>
<option value="WEBP">WEBP</option>
<option value="PDF">PDF</option>
</select>
</p>
<p id="se-quality">
<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box>
</p>
</div>
<div id="dialog_buttons">
<button id="export_ok"></button>
<button id="export_cancel"></button>
</div>
</div>
</elix-dialog>

View File

@ -1,80 +1,9 @@
import './se-elix/define/NumberSpinBox.js';
import exportDialogHTML from './exportDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #5a6162;
overflow: auto;
text-align: left;
border: 1px solid #c8c8c8;
}
#dialog_content p, #dialog_content select, #dialog_content label {
margin: 10px;
line-height: 0.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 400px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
#dialog_container, #dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
.se-select{
text-align: center;
}
elix-number-spin-box{
margin-left: 15px;
}
</style>
<elix-dialog id="export_box" aria-label="export svg" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p class="se-select" id="export_select"></p>
<p class="se-select">
<select id="se-storage-pref">
<option value="PNG">PNG</option>
<option value="JPEG">JPEG</option>
<option value="BMP">BMP</option>
<option value="WEBP">WEBP</option>
<option value="PDF">PDF</option>
</select>
</p>
<p id="se-quality"><elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
</div>
<div id="dialog_buttons">
<button id="export_ok"></button>
<button id="export_cancel"></button>
</div>
</div>
</elix-dialog>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = exportDialogHTML;
/**
* @class SeExportDialog
*/

View File

@ -0,0 +1,114 @@
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
#svg_docprops #svg_docprops_container {
padding: 10px;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
#svg_docprops .error {
border: 1px solid red;
padding: 3px;
}
#svg_docprops #resolution {
max-width: 14em;
}
#tool_docprops_back {
margin-left: 1em;
overflow: auto;
}
#svg_docprops_container #svg_docprops_docprops {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_docprops legend {
max-width: 195px;
}
#svg_docprops_docprops>legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_docprops_container fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_docprops_container label {
display: block;
margin: .5em;
}
</style>
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save"></button>
<button id="tool_docprops_cancel"></button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props"></legend>
<label>
<span id="svginfo_title"></span>
<input type="text" id="canvas_title" />
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim"></legend>
<label>
<span id="svginfo_width"></span>
<input type="text" id="canvas_width" size="6" />
</label>
<label>
<span id="svginfo_height"></span>
<input type="text" id="canvas_height" size="6" />
</label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected"></option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content"></option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages"></legend>
<label>
<input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
<span id="image_opt_embed"></span>
</label>
<label>
<input type="radio" id="image_ref" name="image_opt" value="ref" />
<span id="image_opt_ref"></span>
</label>
</fieldset>
</fieldset>
</div>
</elix-dialog>

View File

@ -1,121 +1,9 @@
import { isValidUnit } from '../../common/units.js';
import imagePropertiesDialogHTML from './imagePropertiesDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
#svg_docprops #svg_docprops_container {
padding: 10px;
background-color: #5a6162;
color: #c5c5c5;
border: 1px outset #777;
opacity: 1.0;
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
#svg_docprops .error {
border: 1px solid red;
padding: 3px;
}
#svg_docprops #resolution {
max-width: 14em;
}
#tool_docprops_back {
margin-left: 1em;
overflow: auto;
}
#svg_docprops_container #svg_docprops_docprops {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_docprops legend {
max-width: 195px;
}
#svg_docprops_docprops > legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_docprops_container fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_docprops_container label {
display: block;
margin: .5em;
}
</style>
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save"></button>
<button id="tool_docprops_cancel"></button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props"></legend>
<label>
<span id="svginfo_title"></span>
<input type="text" id="canvas_title" />
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim"></legend>
<label>
<span id="svginfo_width"></span>
<input type="text" id="canvas_width" size="6" />
</label>
<label>
<span id="svginfo_height"></span>
<input type="text" id="canvas_height" size="6" />
</label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected"></option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content"></option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages"></legend>
<label>
<input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
<span id="image_opt_embed"></span>
</label>
<label>
<input type="radio" id="image_ref" name="image_opt" value="ref" />
<span id="image_opt_ref"></span>
</label>
</fieldset>
</fieldset>
</div>
</elix-dialog>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = imagePropertiesDialogHTML;
/**
* @class SeImgPropDialog
*/

View File

@ -0,0 +1,77 @@
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
#svg_source_editor #svg_source_container {
background-color: #5a6162;
color: #c5c5c5;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
z-index: 6;
}
#save_output_btns {
display: none;
text-align: left;
}
#save_output_btns p {
margin: .5em 1.5em;
display: inline-block;
}
#svg_source_editor form {
width: 100%;
}
#svg_source_editor #svg_source_textarea {
padding: 5px;
font-size: 12px;
min-height: 200px;
width: 95%;
height: 95%;
}
#svg_source_editor #tool_source_back {
text-align: left;
height: 30px;
}
#tool_source_save {
width: 20%;
background-color: #c79605;
margin-left: 30%;
margin-top: 5px;
}
#tool_source_cancel {
width: 20%;
background-color: #c8c8c8;
}
</style>
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save"></button>
<button id="tool_source_cancel"></button>
</div>
<div id="save_output_btns">
<p id="copy_save_note"></p>
<button id="copy_save_done"></button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
</form>
</div>
</elix-dialog>

View File

@ -1,78 +1,8 @@
import svgSourceDialogHTML from './svgSourceDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
:not(:defined) {
display: none;
}
/* Force the scroll bar to appear so we see it hide when overlay opens. */
body::-webkit-scrollbar {
background: lightgray;
}
body::-webkit-scrollbar-thumb {
background: darkgray;
}
#svg_source_editor #svg_source_container {
background-color: #5a6162;
color: #c5c5c5;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
z-index: 6;
}
#save_output_btns {
display: none;
text-align: left;
}
#save_output_btns p {
margin: .5em 1.5em;
display: inline-block;
}
#svg_source_editor form {
width: 100%;
}
#svg_source_editor #svg_source_textarea {
padding: 5px;
font-size: 12px;
min-height: 200px;
width: 95%;
height: 95%;
}
#svg_source_editor #tool_source_back {
text-align: left;
height: 30px;
}
#tool_source_save {
width: 20%;
background-color: #c79605;
margin-left: 30%;
margin-top: 5px;
}
#tool_source_cancel {
width: 20%;
background-color: #c8c8c8;
}
</style>
<elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save"></button>
<button id="tool_source_cancel"></button>
</div>
<div id="save_output_btns">
<p id="copy_save_note"></p>
<button id="copy_save_done"></button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
</form>
</div>
</elix-dialog>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = svgSourceDialogHTML;
/**
* @class SeSvgSourceEditorDialog
*/

View File

@ -0,0 +1,66 @@
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #5a6162;
}
#dialog_content p,
#dialog_content select,
#dialog_content label {
margin: 10px;
line-height: 1.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 440px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family: Verdana, Helvetica, sans-serif;
font-size: 0.8em;
}
#dialog_container,
#dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
</style>
<elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p id="notificationNote"> </p>
<select id="se-storage-pref">
<option value="prefsAndContent" id="prefsAndContent"></option>
<option value="prefsOnly" id="prefsOnly"></option>
<option value="noPrefsOrContent" id="noPrefsOrContent"></option>
</select>
<label title="" id="se-remember-title">
<input type="checkbox" id="se-remember" value="" checked>
</label>
</div>
<div id="dialog_buttons">
<button id="storage_ok"></button>
<button id="storage_cancel"></button>
</div>
</div>
</elix-dialog>

View File

@ -1,70 +1,8 @@
import storageDialogHTML from './storageDialog.html';
const template = document.createElement('template');
template.innerHTML = `
<style>
#dialog_content {
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #5a6162;
}
#dialog_content p, #dialog_content select, #dialog_content label {
margin: 10px;
line-height: 1.3em;
}
#dialog_container {
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
max-width: 440px;
z-index: 50001;
background: #5a6162;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
#dialog_container, #dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
</style>
<elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
<div class="overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
<p id="notificationNote"> </p>
<select id="se-storage-pref">
<option value="prefsAndContent" id="prefsAndContent"></option>
<option value="prefsOnly" id="prefsOnly"></option>
<option value="noPrefsOrContent" id="noPrefsOrContent"></option>
</select>
<label title="" id="se-remember-title">
<input type="checkbox" id="se-remember" value="" checked>
</label>
</div>
<div id="dialog_buttons">
<button id="storage_ok"></button>
<button id="storage_cancel"></button>
</div>
</div>
</elix-dialog>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = storageDialogHTML;
/**
* @class SeStorageDialog
*/

View File

@ -0,0 +1,34 @@
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="zoom.svg" title="Change zoom level" inputsize="40px">
<se-text value="1000" text="1000"></se-text>
<se-text value="400" text="400"></se-text>
<se-text value="200" text="200"></se-text>
<se-text value="100" text="100"></se-text>
<se-text value="50" text="50"></se-text>
<se-text value="25" text="25"></se-text>
<se-text value="canvas" text="tools.fit_to_canvas"></se-text>
<se-text value="selection" text="tools.fit_to_sel"></se-text>
<se-text value="layer" text="tools.fit_to_layer_content"></se-text>"
<se-text value="content" text="tools.fit_to_all"></se-text>
</se-zoom>
<se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
options="&#8212;,...,- -,- .,- .."
values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">
</se-select>
<se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
<se-list-item id="linejoin_miter" value="miter" src="linejoin_miter.svg" title="properties.linejoin_miter" img-height="22px"></se-list-item>
<se-list-item id="linejoin_round" value="round" src="linejoin_round.svg" title="properties.linejoin_round" img-height="22px"></se-list-item>
<se-list-item id="linejoin_bevel" value="bevel" src="linejoin_bevel.svg" title="properties.linejoin_bevel" img-height="22px"></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="properties.linecap_butt" label="" width="22px" height="22px">
<se-list-item id="linecap_butt" value="butt" src="linecap_butt.svg" title="properties.linecap_butt" img-height="22px"></se-list-item>
<se-list-item id="linecap_square" value="square" src="linecap_square.svg" title="properties.linecap_square" img-height="22px"></se-list-item>
<se-list-item id="linecap_round" value="round" src="linecap_round.svg" title="properties.linecap_round" img-height="22px"></se-list-item>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity" src="opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>
</div>

View File

@ -1,5 +1,6 @@
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import { jGraduate } from '../components/jgraduate/jQuery.jGraduate.js';
import BottomPanelHtml from './BottomPanel.html';
const { $id } = SvgCanvas;
@ -165,42 +166,8 @@ class BottomPanel {
const template = document.createElement('template');
const { i18next } = this.editor;
template.innerHTML = `
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="zoom.svg" title="Change zoom level" inputsize="40px">
<se-text value="1000" text="1000"></se-text>
<se-text value="400" text="400"></se-text>
<se-text value="200" text="200"></se-text>
<se-text value="100" text="100"></se-text>
<se-text value="50" text="50"></se-text>
<se-text value="25" text="25"></se-text>
<se-text value="canvas" text="tools.fit_to_canvas"></se-text>
<se-text value="selection" text="tools.fit_to_sel"></se-text>
<se-text value="layer" text="tools.fit_to_layer_content"></se-text>"
<se-text value="content" text="tools.fit_to_all"></se-text>
</se-zoom>
<se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
<se-select id="stroke_style" title="properties.stroke_style" label="" width="22px" height="22px"
options="&#8212;,...,- -,- .,- .."
values="none::2,2::5,5::5,2,2,2::5,2,2,2,2,2">
</se-select>
<se-list id="stroke_linejoin" title="properties.linejoin_miter" label="" width="22px" height="22px">
<se-list-item id="linejoin_miter" value="miter" src="linejoin_miter.svg" title="properties.linejoin_miter" img-height="22px"></se-list-item>
<se-list-item id="linejoin_round" value="round" src="linejoin_round.svg" title="properties.linejoin_round" img-height="22px"></se-list-item>
<se-list-item id="linejoin_bevel" value="bevel" src="linejoin_bevel.svg" title="properties.linejoin_bevel" img-height="22px"></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="properties.linecap_butt" label="" width="22px" height="22px">
<se-list-item id="linecap_butt" value="butt" src="linecap_butt.svg" title="properties.linecap_butt" img-height="22px"></se-list-item>
<se-list-item id="linecap_square" value="square" src="linecap_square.svg" title="properties.linecap_square" img-height="22px"></se-list-item>
<se-list-item id="linecap_round" value="round" src="linecap_round.svg" title="properties.linecap_round" img-height="22px"></se-list-item>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="properties.opacity" src="opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>
</div>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = BottomPanelHtml;
this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('palette').addEventListener('change', this.handlePalette.bind(this));
$id('palette').init(i18next);

View File

@ -0,0 +1,26 @@
<div id="sidepanels">
<se-text id="sidepanel_handle" title="ui.panel_action" text="ui.panel"></se-text>
<div id="sidepanel_content">
<div id="layerpanel">
<se-text id="layersLabel" text="layers.layers"></se-text>
<fieldset id="layerbuttons">
<se-button id="layer_new" title="layers.new" size="small" src="new.svg"></se-button>
<se-button id="layer_delete" title="layers.del" size="small" src="delete.svg"></se-button>
<se-button id="layer_rename" title="layers.rename" size="small" src="text.svg"></se-button>
<se-button id="layer_up" title="layers.move_up" size="small" src="go_up.svg"></se-button>
<se-button id="layer_down" title="layers.move_down" size="small" src="go_down.svg"></se-button>
<se-button id="layer_moreopts" title="common.more_opts" size="small" src="context_menu.svg">
</se-button>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<se-select id="selLayerNames" title="layers.move_selected" label="layers.move_elems_to" options="Layer 1"
values="layer1" value="layer1" disabled="disabled">
</se-select>
</div>
</div>
</div>

View File

@ -1,4 +1,5 @@
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import LayersPanelHtml from './LayersPanel.html';
const { $id } = SvgCanvas;
@ -44,34 +45,8 @@ class LayersPanel {
const template = document.createElement("template");
const { i18next } = this.editor;
template.innerHTML = `
<div id="sidepanels">
<se-text id="sidepanel_handle" title="ui.panel_action" text="ui.panel"></se-text>
<div id="sidepanel_content">
<div id="layerpanel">
<se-text id="layersLabel" text="layers.layers"></se-text>
<fieldset id="layerbuttons">
<se-button id="layer_new" title="layers.new" size="small" src="new.svg"></se-button>
<se-button id="layer_delete" title="layers.del" size="small" src="delete.svg"></se-button>
<se-button id="layer_rename" title="layers.rename" size="small" src="text.svg"></se-button>
<se-button id="layer_up" title="layers.move_up" size="small" src="go_up.svg"></se-button>
<se-button id="layer_down" title="layers.move_down" size="small" src="go_down.svg"></se-button>
<se-button id="layer_moreopts" title="common.more_opts" size="small" src="context_menu.svg">
</se-button>
</fieldset>
<table id="layerlist">
<tr class="layer">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<se-select id="selLayerNames" title="layers.move_selected" label="layers.move_elems_to" options="Layer 1"
values="layer1" value="layer1" disabled="disabled">
</se-select>
</div>
</div>
</div>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = LayersPanelHtml;
this.editor.$svgEditor.append(template.content.cloneNode(true));
// layer menu added to DOM
const menuMore = document.createElement("se-cmenu-layers");

View File

@ -0,0 +1,19 @@
<div id="tools_left">
<se-button id="tool_select" title="tools.mode_select" src="select.svg"></se-button>
<se-button id="tool_zoom" title="tools.mode_zoom" src="zoom.svg" shortcut="Z"></se-button>
<se-button id="tool_fhpath" title="tools.mode_fhpath" src="pencil.svg" shortcut="Q"></se-button>
<se-button id="tool_line" title="tools.mode_line" src="pen.svg" shortcut="L"></se-button>
<se-button id="tool_path" title="tools.mode_path" src="path.svg" shortcut="P"></se-button>
<se-flyingbutton id="tools_rect" title="tools.square_rect_tool">
<se-button id="tool_rect" title="tools.mode_rect" src="rect.svg" shortcut="R"></se-button>
<se-button id="tool_square" title="tools.mode_square" src="square.svg"></se-button>
<se-button id="tool_fhrect" title="tools.mode_fhrect" src="fh_rect.svg"></se-button>
</se-flyingbutton>
<se-flyingbutton id="tools_ellipse" title="tools.ellipse_circle_tool">
<se-button id="tool_ellipse" title="tools.mode_ellipse" src="ellipse.svg" shortcut="E"></se-button>
<se-button id="tool_circle" title="tools.mode_circle" src="circle.svg"></se-button>
<se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="fh_ellipse.svg"></se-button>
</se-flyingbutton>
<se-button id="tool_text" title="tools.mode_text" src="text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="tools.mode_image" src="image.svg"></se-button>
</div>

View File

@ -1,5 +1,5 @@
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { insertChildAtIndex } from '../../svgcanvas/utilities.js';
import leftPanelHTML from './LeftPanel.html';
const { $id, $qa } = SvgCanvas;
@ -196,60 +196,10 @@ class LeftPanel {
init() {
// add Left panel
const leftMenu = [
{
menu: `<se-button id="tool_select" title="tools.mode_select" src="select.svg"></se-button>`,
position: 1
},
{
menu: `<se-button id="tool_zoom" title="tools.mode_zoom" src="zoom.svg" shortcut="Z"></se-button>`,
position: 2
},
{
menu: `<se-button id="tool_fhpath" title="tools.mode_fhpath" src="pencil.svg" shortcut="Q"></se-button>`,
position: 3
},
{
menu: `<se-button id="tool_line" title="tools.mode_line" src="pen.svg" shortcut="L"></se-button>`,
position: 4
},
{
menu: `<se-button id="tool_path" title="tools.mode_path" src="path.svg" shortcut="P"></se-button>`,
position: 5
},
{
menu: `<se-flyingbutton id="tools_rect" title="tools.square_rect_tool">
<se-button id="tool_rect" title="tools.mode_rect" src="rect.svg" shortcut="R"></se-button>
<se-button id="tool_square" title="tools.mode_square" src="square.svg"></se-button>
<se-button id="tool_fhrect" title="tools.mode_fhrect" src="fh_rect.svg"></se-button>
</se-flyingbutton>`,
position: 6
},
{
menu: `<se-flyingbutton id="tools_ellipse" title="tools.ellipse_circle_tool">
<se-button id="tool_ellipse" title="tools.mode_ellipse" src="ellipse.svg" shortcut="E"></se-button>
<se-button id="tool_circle" title="tools.mode_circle" src="circle.svg"></se-button>
<se-button id="tool_fhellipse" title="tools.mode_fhellipse" src="fh_ellipse.svg"></se-button>
</se-flyingbutton>`,
position: 7
},
{
menu: `<se-button id="tool_text" title="tools.mode_text" src="text.svg" shortcut="T"></se-button>`,
position: 8
},
{
menu: `<se-button id="tool_image" title="tools.mode_image" src="image.svg"></se-button>`,
position: 11
}
];
const template = document.createElement("template");
template.innerHTML = `<div id="tools_left"></div>`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = leftPanelHTML;
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 parent = $id("tools_left");
leftMenuSort.forEach(function (value) {
insertChildAtIndex(parent, value.menu, value.position);
});
// register actions for left panel
$id("tool_select").addEventListener("click", this.clickSelect.bind(this));
$id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));

View File

@ -0,0 +1,181 @@
<div id="tools_top">
<div id="editor_panel">
<div class="tool_sep"></div>
<se-button id="tool_source" title="tools.tool_source" shortcut="U" src="source.svg"></se-button>
<se-button id="tool_wireframe" title="tools.wireframe_mode" shortcut="F" src="wireframe.svg"></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg">
</se-button>
</div>
<div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
<se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
<se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
</div>
<div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class">
</se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="angle.svg" title="properties.angle">
</se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="blur.svg" title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
img-height="22px"></se-list-item>
</se-list>
</div>
<div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label"
title="properties.pos_x">
</se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label"
title="properties.pos_y">
</se-spin-input>
</div>
<!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="clone.svg"></se-button>
<se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="group_elements.svg">
</se-button>
<se-button id="tool_make_link_multi" title="tools.make_link" src="globe_link.svg"></se-button>
<se-button id="tool_align_left" title="tools.align_left" src="align_left.svg"></se-button>
<se-button id="tool_align_center" title="tools.align_center" src="align_center.svg"></se-button>
<se-button id="tool_align_right" title="tools.align_right" src="align_right.svg"></se-button>
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected::largest::smallest::page">
</se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label"
title="properties.rect_width"></se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label"
title="properties.rect_height"></se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label"
title="properties.image_width"></se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
title="properties.image_height"></se-spin-input>
</div>
<div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx"
label="properties.cx_label"></se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy"
label="properties.cy_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx"
label="properties.rx_label"></se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry"
label="properties.ry_label"></se-spin-input>
</div>
<div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
</se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label">
</se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label">
</se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label">
</se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
<se-select id="tool_font_family" label="properties.font_family_label"
options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></select>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
src="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="anchor_middle.svg">
</se-button>
<se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="anchor_end.svg"></se-button>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
<div class="container_panel">
<div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
</div> <!-- container_panel -->
<div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" src="unlink_use.svg"></se-button>
</div> <!-- use_panel -->
<div class="g_panel">
<se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg"></se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
<div class="a_panel">
<label id="tool_link_url">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" />
</label>
</div> <!-- a_panel -->
<div class="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="tools.node_link" src="tool_node_link.svg" pressed></se-button>
<div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label">
</se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
</se-spin-input>
<se-select id="seg_type" title="properties.seg_type" label=""
options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
</div>

View File

@ -3,6 +3,7 @@
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
import topPanelHTML from './TopPanel.html';
const { $qa, $id } = SvgCanvas;
@ -822,157 +823,8 @@ class TopPanel {
// add Top panel
const template = document.createElement("template");
const { i18next } = this.editor;
template.innerHTML = `
<div id="tools_top">
<div id="editor_panel">
<div class="tool_sep"></div>
<se-button id="tool_source" title="tools.tool_source" shortcut="U" src="source.svg"></se-button>
<se-button id="tool_wireframe" title="tools.wireframe_mode" shortcut="F" src="wireframe.svg"></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg"></se-button>
</div>
<div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
<se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
<se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
</div>
<div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class"></se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="angle.svg" title="properties.angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="blur.svg" title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px"></se-list-item>
<se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg" img-height="22px"></se-list-item>
<se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg" img-height="22px"></se-list-item>
<se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px"></se-list-item>
<se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg" img-height="22px"></se-list-item>
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom" img-height="22px"></se-list-item>
</se-list>
</div>
<div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label" title="properties.pos_x">
</se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label" title="properties.pos_y">
</se-spin-input>
</div>
<!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="clone.svg"></se-button>
<se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="group_elements.svg">
</se-button>
<se-button id="tool_make_link_multi" title="tools.make_link" src="globe_link.svg"></se-button>
<se-button id="tool_align_left" title="tools.align_left" src="align_left.svg"></se-button>
<se-button id="tool_align_center" title="tools.align_center" src="align_center.svg"></se-button>
<se-button id="tool_align_right" title="tools.align_right" src="align_right.svg"></se-button>
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected::largest::smallest::page"></se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label" title="properties.rect_width"></se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label" title="properties.rect_height"></se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius" data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label" title="properties.image_width"></se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label" title="properties.image_height"></se-spin-input>
</div>
<div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx" label="properties.cx_label"></se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy" label="properties.cy_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx" label="properties.rx_label"></se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry" label="properties.ry_label"></se-spin-input>
</div>
<div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label"></se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label"></se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label"></se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label"></se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
<se-select id="tool_font_family" label="properties.font_family_label" options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times" values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></select>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size" src="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="anchor_middle.svg"></se-button>
<se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="anchor_end.svg"></se-button>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
<div class="container_panel">
<div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
</div> <!-- container_panel -->
<div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" src="unlink_use.svg"></se-button>
</div> <!-- use_panel -->
<div class="g_panel">
<se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg"></se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
<div class="a_panel">
<label id="tool_link_url">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" />
</label>
</div> <!-- a_panel -->
<div class="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="tools.node_link" src="tool_node_link.svg" pressed></se-button>
<div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label"></se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label"></se-spin-input>
<se-select id="seg_type" title="properties.seg_type" label="" options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
</div>
`;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = topPanelHTML;
this.editor.$svgEditor.append(template.content.cloneNode(true));
// svg editor source dialoag added to DOM
const newSeEditorDialog = document.createElement(

View File

@ -0,0 +1,5 @@
<div class="svg_editor">
<div id="workarea">
<div id="svgcanvas"></div>
</div>
</div>

View File

@ -1,11 +0,0 @@
const editorTemplate = document.createElement('template');
editorTemplate.innerHTML = `
<div class="svg_editor">
<div id="workarea">
<div id="svgcanvas"></div>
</div>
</div>
`;
export default editorTemplate;

View File

@ -0,0 +1,45 @@
<style>
/* Rulers
——————————————————————————————————————*/
#ruler_corner {
background: var(--ruler-color);
grid-area: corner;
width: 15px;
height: 15px;
overflow: hidden;
}
#ruler_x {
background: var(--ruler-color);
grid-area: rulerX;
height: 15px;
border-bottom: 1px solid;
border-left: 1px solid #777;
overflow: hidden;
}
#ruler_y {
background: var(--ruler-color);
grid-area: rulerY;
width: 15px;
border-right: 1px solid;
border-top: 1px solid #777;
overflow: hidden;
}
#ruler_x canvas {
float: left;
}
</style>
<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>

View File

@ -1,52 +0,0 @@
const rulersTemplate = document.createElement('template');
rulersTemplate.innerHTML = `
<style>
/* Rulers
*/
#ruler_corner {
background: var(--ruler-color);
grid-area: corner;
width: 15px;
height: 15px;
overflow: hidden;
}
#ruler_x {
background: var(--ruler-color);
grid-area: rulerX;
height: 15px;
border-bottom: 1px solid;
border-left: 1px solid #777;
overflow: hidden;
}
#ruler_y {
background: var(--ruler-color);
grid-area: rulerY;
width: 15px;
border-right: 1px solid;
border-top: 1px solid #777;
overflow: hidden;
}
#ruler_x canvas {
float: left;
}
</style>
<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>
`;
export default rulersTemplate;

View File

@ -2,11 +2,35 @@
import { fromRollup } from '@web/dev-server-rollup';
// eslint-disable-next-line node/no-unpublished-import
import rollupCommonjs from '@rollup/plugin-commonjs';
// eslint-disable-next-line node/no-unpublished-import
import rollupHtml from 'rollup-plugin-html';
const commonjs = fromRollup(rollupCommonjs);
const html = fromRollup(rollupHtml);
export default {
mimeTypes: {
// serve imported html files as js
'src/editor/panels/*.html': 'js',
'src/editor/templates/*.html': 'js',
'src/editor/dialogs/*.html': 'js',
'src/editor/extensions/*/*.html': 'js',
'instrumented/editor/panels/*.html': 'js',
'instrumented/editor/templates/*.html': 'js',
'instrumented/editor/dialogs/*.html': 'js',
'instrumented/editor/extensions/*/*.html': 'js'
},
plugins: [
html({ include: [
'src/editor/panels/*.html',
'src/editor/templates/*.html',
'src/editor/dialogs/*.html',
'src/editor/extensions/*/*.html',
'instrumented/editor/panels/*.html',
'instrumented/editor/templates/*.html',
'instrumented/editor/dialogs/*.html',
'instrumented/editor/extensions/*/*.html'
] }),
commonjs({
// explicitely list packages to increase performance
include: [