move layout buttons to web components
jfh
parent
f2698c2ca8
commit
c7d816155c
|
|
@ -19,11 +19,17 @@ template.innerHTML = `
|
|||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.small {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.pressed {
|
||||
background-color: #F4E284 !important;
|
||||
|
|
@ -35,7 +41,7 @@ template.innerHTML = `
|
|||
}
|
||||
</style>
|
||||
<div title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
<img src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
`;
|
||||
/**
|
||||
|
|
@ -59,7 +65,7 @@ export class ToolButton extends HTMLElement {
|
|||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'src', 'pressed', 'disabled'];
|
||||
return ['title', 'src', 'pressed', 'disabled', 'size'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
|
|
@ -74,7 +80,7 @@ export class ToolButton extends HTMLElement {
|
|||
case 'title':
|
||||
{
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
this.$div.setAttribute('title', `${newValue} [${shortcut}]`);
|
||||
this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||
}
|
||||
break;
|
||||
case 'src':
|
||||
|
|
@ -87,6 +93,13 @@ export class ToolButton extends HTMLElement {
|
|||
this.$div.classList.remove('pressed');
|
||||
}
|
||||
break;
|
||||
case 'size':
|
||||
if (newValue === 'small') {
|
||||
this.$div.classList.add('small');
|
||||
} else {
|
||||
this.$div.classList.remove('small');
|
||||
}
|
||||
break;
|
||||
case 'disabled':
|
||||
if (newValue) {
|
||||
this.$div.classList.add('disabled');
|
||||
|
|
@ -171,6 +184,22 @@ export class ToolButton extends HTMLElement {
|
|||
this.setAttribute('src', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get size () {
|
||||
return this.getAttribute('size');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set size (value) {
|
||||
this.setAttribute('size', value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="0" id="svg_11" d="m4.5,46.5l52,0l-26,38l-26,-38z" stroke="#000" fill="#000"/>
|
||||
<g id="svg_16">
|
||||
<line stroke-width="10" id="svg_12" y2="27.5" x2="117.5" y1="27.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_13" stroke-width="10" y2="51.5" x2="117.5" y1="51.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_14" stroke-width="10" y2="73.5" x2="117.5" y1="73.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_15" stroke-width="10" y2="97.5" x2="117.5" y1="97.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 643 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_75">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#008000" fill="url(#svg_75)" id="svg_33" d="m5.3015,1.69202l6.93483,0l0,5.07323l4.07045,0l-7.53786,9.84803l-7.53786,-9.84803l4.07045,0l0,-5.07323z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 495 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_74">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#008000" fill="url(#svg_74)" id="svg_33" d="m5.38492,16.77043l7.07692,0l0,-5.23077l4.15385,0l-7.69231,-10.15385l-7.69231,10.15385l4.15385,0l0,5.23077z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 512 B |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
|
||||
<circle stroke="none" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
|
||||
<defs>
|
||||
<radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 527 B |
|
|
@ -257,19 +257,6 @@
|
|||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="new_image">
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
|
||||
<circle stroke="none" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
|
||||
<defs>
|
||||
<radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="save">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
|
|
@ -360,42 +347,6 @@
|
|||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="go_up">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_74">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#008000" fill="url(#svg_74)" id="svg_33" d="m5.38492,16.77043l7.07692,0l0,-5.23077l4.15385,0l-7.69231,-10.15385l-7.69231,10.15385l4.15385,0l0,5.23077z"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="go_down">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_75">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#008000" fill="url(#svg_75)" id="svg_33" d="m5.3015,1.69202l6.93483,0l0,5.07323l4.07045,0l-7.53786,9.84803l-7.53786,-9.84803l4.07045,0l0,-5.07323z"/>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="context_menu">
|
||||
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="0" id="svg_11" d="m4.5,46.5l52,0l-26,38l-26,-38z" stroke="#000" fill="#000"/>
|
||||
<g id="svg_16">
|
||||
<line stroke-width="10" id="svg_12" y2="27.5" x2="117.5" y1="27.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_13" stroke-width="10" y2="51.5" x2="117.5" y1="51.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_14" stroke-width="10" y2="73.5" x2="117.5" y1="73.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
<line id="svg_15" stroke-width="10" y2="97.5" x2="117.5" y1="97.5" x1="59.5" stroke="#000" fill="#000"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="link_controls">
|
||||
<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-width="2" id="svg_102" d="m9.875,23c-2,-4.25 -1.6875,-7.375 1.6875,-10.5c3.375,-3.125 7.5625,-2.75 11.0625,2" stroke="#8dd35f" fill="none"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 41 KiB |
|
|
@ -52,12 +52,12 @@
|
|||
<div id="layerpanel">
|
||||
<h3 id="layersLabel">Layers</h3>
|
||||
<fieldset id="layerbuttons">
|
||||
<div id="layer_new" class="layer_button" title="New Layer"></div>
|
||||
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
|
||||
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
|
||||
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
|
||||
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
|
||||
<div id="layer_moreopts" class="layer_button" title="More Options"></div>
|
||||
<se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
|
||||
<se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
|
||||
<se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
|
||||
<se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
|
||||
<se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
|
||||
<se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg"></se-button>
|
||||
</fieldset>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
<se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.png"></se-button>
|
||||
<se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
|
||||
<se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
|
||||
<se-button id="tool_make_link" title="Make (hyper)link" src="./images/make_link.svg"></se-button>
|
||||
<se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
|
||||
<div class="tool_sep"></div>
|
||||
<label id="idLabel" title="Identify the element">
|
||||
<span>id:</span>
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
<se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace" src="./images/delete.svg"></se-button>
|
||||
<div class="tool_sep"></div>
|
||||
<se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg"></se-button>
|
||||
<se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/make_link.svg"></se-button>
|
||||
<se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
|
||||
<se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
|
||||
<se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
|
||||
<se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
|
||||
|
|
|
|||
|
|
@ -243,34 +243,9 @@ select {
|
|||
border-left: 1px solid #808080;
|
||||
border-top: 1px solid #808080;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layer_button {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 1px;
|
||||
border-left: 1px solid #FFFFFF;
|
||||
border-top: 1px solid #FFFFFF;
|
||||
border-right: 1px solid #808080;
|
||||
border-bottom: 1px solid #808080;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.layer_button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.layer_buttonpressed {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 1px;
|
||||
border-right: 1px solid #FFFFFF;
|
||||
border-bottom: 1px solid #FFFFFF;
|
||||
border-left: 1px solid #808080;
|
||||
border-top: 1px solid #808080;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#layerlist {
|
||||
|
|
|
|||
|
|
@ -1062,7 +1062,7 @@ editor.init = () => {
|
|||
placement: {
|
||||
'#logo': 'logo',
|
||||
|
||||
'#tool_clear div,#layer_new': 'new_image',
|
||||
'#tool_clear div': 'new_image',
|
||||
'#tool_save div': 'save',
|
||||
'#tool_export div': 'export',
|
||||
'#tool_open div': 'open',
|
||||
|
|
@ -1078,12 +1078,10 @@ editor.init = () => {
|
|||
'#tool_ellipse,#tools_ellipse_show': 'ellipse',
|
||||
'#tool_circle': 'circle',
|
||||
'#tool_fhellipse': 'fh_ellipse',
|
||||
'#layer_rename': 'text',
|
||||
'#tool_image': 'image',
|
||||
'#tool_zoom': 'zoom',
|
||||
|
||||
'#tool_node_clone': 'node_clone',
|
||||
'#layer_delete': 'delete',
|
||||
'#tool_node_delete': 'node_delete',
|
||||
'#tool_add_subpath': 'add_subpath',
|
||||
'#tool_openclose_path': 'open_path',
|
||||
|
|
@ -1110,10 +1108,6 @@ editor.init = () => {
|
|||
'#linejoin_bevel': 'linejoin_bevel',
|
||||
|
||||
'#url_notice': 'warning',
|
||||
|
||||
'#layer_up': 'go_up',
|
||||
'#layer_down': 'go_down',
|
||||
'#layer_moreopts': 'context_menu',
|
||||
'#layerlist td.layervis': 'eye',
|
||||
|
||||
'#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
|
||||
|
|
@ -1138,7 +1132,7 @@ editor.init = () => {
|
|||
resize: {
|
||||
'#logo .svg_icon': 28,
|
||||
'.flyout_arrow_horiz .svg_icon': 5,
|
||||
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
|
||||
'.svg_icon, #layerlist td.layervis .svg_icon': 14,
|
||||
'.dropdown button .svg_icon': 7,
|
||||
'#main_button .dropdown .svg_icon': 9,
|
||||
'.palette_item:first .svg_icon': 15,
|
||||
|
|
@ -4928,14 +4922,6 @@ editor.init = () => {
|
|||
$(window).mouseup();
|
||||
});
|
||||
|
||||
$('.layer_button').mousedown(function () {
|
||||
$(this).addClass('layer_buttonpressed');
|
||||
}).mouseout(function () {
|
||||
$(this).removeClass('layer_buttonpressed');
|
||||
}).mouseup(function () {
|
||||
$(this).removeClass('layer_buttonpressed');
|
||||
});
|
||||
|
||||
$('.push_button').mousedown(function () {
|
||||
if (!$(this).hasClass('disabled')) {
|
||||
$(this).addClass('push_button_pressed').removeClass('push_button');
|
||||
|
|
@ -4947,7 +4933,7 @@ editor.init = () => {
|
|||
});
|
||||
|
||||
// ask for a layer name
|
||||
$('#layer_new').click(async function () {
|
||||
const newLayer = async () => {
|
||||
let uniqName,
|
||||
i = svgCanvas.getCurrentDrawing().getNumLayers();
|
||||
do {
|
||||
|
|
@ -4963,7 +4949,7 @@ editor.init = () => {
|
|||
svgCanvas.createLayer(newName);
|
||||
updateContextPanel();
|
||||
populateLayers();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -5016,7 +5002,7 @@ editor.init = () => {
|
|||
* @param {Integer} pos
|
||||
* @returns {void}
|
||||
*/
|
||||
function moveLayer (pos) {
|
||||
const moveLayer = (pos) => {
|
||||
const total = svgCanvas.getCurrentDrawing().getNumLayers();
|
||||
|
||||
let curIndex = $('#layerlist tr.layersel').index();
|
||||
|
|
@ -5025,19 +5011,9 @@ editor.init = () => {
|
|||
svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
|
||||
populateLayers();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$('#layer_delete').click(deleteLayer);
|
||||
|
||||
$('#layer_up').click(() => {
|
||||
moveLayer(-1);
|
||||
});
|
||||
|
||||
$('#layer_down').click(() => {
|
||||
moveLayer(1);
|
||||
});
|
||||
|
||||
$('#layer_rename').click(async function () {
|
||||
const layerRename = async () => {
|
||||
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
|
||||
const oldName = $('#layerlist tr.layersel td.layername').text();
|
||||
const newName = await $.prompt(uiStrings.notification.enterNewLayerName, '');
|
||||
|
|
@ -5049,7 +5025,7 @@ editor.init = () => {
|
|||
|
||||
svgCanvas.renameCurrentLayer(newName);
|
||||
populateLayers();
|
||||
});
|
||||
};
|
||||
|
||||
const SIDEPANEL_MAXWIDTH = 300;
|
||||
const SIDEPANEL_OPENWIDTH = 150;
|
||||
|
|
@ -5268,7 +5244,7 @@ editor.init = () => {
|
|||
$id('tool_align_bottom').addEventListener('click', () => clickAlign('bottom'));
|
||||
$id('tool_align_middle').addEventListener('click', () => clickAlign('middle'));
|
||||
|
||||
// left panel
|
||||
// register actions for left panel
|
||||
$id('tool_select').addEventListener('click', clickSelect);
|
||||
$id('tool_fhpath').addEventListener('click', clickFHPath);
|
||||
$id('tool_text').addEventListener('click', clickText);
|
||||
|
|
@ -5277,6 +5253,13 @@ editor.init = () => {
|
|||
$id('tool_path').addEventListener('click', clickPath);
|
||||
// $id('tool_').addEventListener('click', clickP);
|
||||
|
||||
// register actions for layer toolbar
|
||||
$id('layer_new').addEventListener('click', newLayer);
|
||||
$id('layer_delete').addEventListener('click', deleteLayer);
|
||||
$id('layer_up').addEventListener('click', () => moveLayer(-1));
|
||||
$id('layer_down').addEventListener('click', () => moveLayer(1));
|
||||
$id('layer_rename').addEventListener('click', layerRename);
|
||||
|
||||
const toolButtons = [
|
||||
{sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true],
|
||||
parent: '#tools_line', prepend: true},
|
||||
|
|
|
|||
Loading…
Reference in New Issue