Merge pull request #673 from SVG-Edit/external-html
externalized html templates for better modularitymaster
JFH
GitHub
commit
a529258774
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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="—,...,- -,- .,- .."
|
||||
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>
|
||||
|
|
@ -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="—,...,- -,- .,- .."
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<div class="svg_editor">
|
||||
<div id="workarea">
|
||||
<div id="svgcanvas"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue