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

refactor with Panel classes

Browse Source
This commit is contained in:
JFH
2021-03-14 21:16:35 +01:00
parent cb52db7324
commit 57e7fe316b
17 changed files with 2061 additions and 2231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
src/editor/panels/BottomPanel.js Normal file
View File

@@ -0,0 +1,244 @@
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
const {$id, $qa} = SvgCanvas;
/*
* register actions for left panel
*/
/**
* @type {module}
*/
class BottomPanel {
/**
* @param {PlainObject} editor svgedit handler
*/
constructor (editor) {
this.editor = editor;
}
/**
* @type {module}
*/
get selectedElement () {
return this.editor.selectedElement;
}
/**
* @type {module}
*/
get multiselected () {
return this.editor.multiselected;
}
/**
* @type {module}
*/
changeStrokeWidth (e) {
let val = e.target.value;
if (val === 0 && this.editor.selectedElement && ['line', 'polyline'].includes(this.editor.selectedElement.nodeName)) {
val = 1;
}
this.editor.svgCanvas.setStrokeWidth(val);
}
/**
* @type {module}
*/
changeZoom (value) {
switch (value) {
case 'canvas':
case 'selection':
case 'layer':
case 'content':
this.editor.zoomChanged(window, value);
break;
default:
{
const zoomlevel = Number(value) / 100;
if (zoomlevel < 0.001) {
value = 0.1;
return;
}
const zoom = this.editor.svgCanvas.getZoom();
const wArea = this.editor.workarea;
this.editor.zoomChanged(window, {
width: 0,
height: 0,
// center pt of scroll position
x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
zoom: zoomlevel
}, true);
}
}
}
/**
* @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
* @returns {void}
*/
updateToolButtonState () {
const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path'
];
if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect();
}
$(btn).disabled = true;
});
} else {
buttonsNeedingStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
if (bNoStroke && bNoFill) {
buttonsNeedingFillAndStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect();
}
$(btn).disabled = true;
});
} else {
buttonsNeedingFillAndStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
this.editor.svgCanvas.runExtensions(
'toolButtonStateUpdate',
/** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
nofill: bNoFill,
nostroke: bNoStroke
}
);
}
/**
* @type {module}
*/
handleColorPicker (type, evt) {
const {paint} = evt.detail;
this.editor.svgCanvas.setPaint(type, paint);
this.updateToolButtonState();
}
/**
* @type {module}
*/
handleStrokeAttr (type, evt) {
this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
}
/**
* @type {module}
*/
handleOpacity (evt) {
// if ($(this).find('div').length) { return; }
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.editor.svgCanvas.setOpacity(val / 100);
}
/**
* @type {module}
*/
handlePalette (e) {
e.preventDefault();
// shift key or right click for stroke
const {picker, color} = e.detail;
// Webkit-based browsers returned 'initial' here for no stroke
const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
if (picker === 'fill') {
$id('fill_color').setPaint(paint);
} else {
$id('stroke_color').setPaint(paint);
}
this.editor.svgCanvas.setColor(picker, color);
if (color !== 'none' && this.editor.svgCanvas.getPaintOpacity(picker) !== 1) {
this.editor.svgCanvas.setPaintOpacity(picker, 1.0);
}
this.updateToolButtonState();
}
/**
* @type {module}
*/
init () {
// register actions for Bottom panel
const template = document.createElement('template');
template.innerHTML = `
<div id="tools_bottom">
<!-- Zoom buttons -->
<se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
<div value="1000">1000</div>
<div value="400">400</div>
<div value="200">200</div>
<div value="100">100</div>
<div value="50">50</div>
<div value="25">25</div>
<div value="canvas">Fit to canvas</div>
<div value="selection">Fit to selection</div>
<div value="layer">Fit to layer content</div>
<div value="content">Fit to all content</div>
</se-zoom>
<se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
<se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke">
</se-colorpicker>
<se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
<se-list id="stroke_style" title="Change stroke dash style" label="" width="22px" height="24px">
<se-list-item value="none">&#8212;</se-list-item>
<se-list-item value="2,2">...</se-list-item>
<se-list-item value="5,5">- -</se-list-item>
<se-list-item value="5,2,2,2">- .</se-list-item>
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list>
<se-list id="stroke_linejoin" title="Linejoin: Miter" label="" width="22px" height="24px">
<se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg"
height="22px"></img></se-list-item>
<se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg"
height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"
height="22px"></img></se-list-item>
</se-list>
<se-list id="stroke_linecap" title="Linecap: Butt" label="" width="22px" height="24px">
<se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg"
height="22px"></img></se-list-item>
<se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg"
height="22px"></img></se-list-item>
<se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg"
height="22px"></img></se-list-item>
</se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity"
src="./images/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette>
</div> <!-- tools_bottom -->
`
this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('palette').addEventListener('change', this.handlePalette.bind(this));
const {curConfig} = this.editor.configObj;
$id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
$id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
$id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
$id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
$id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));
$id('stroke_width').addEventListener('change', this.changeStrokeWidth.bind(this));
$id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
$id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
$id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
$id('opacity').addEventListener('change', this.handleOpacity.bind(this));
}
/**
* @type {module}
*/
updateColorpickers (apply) {
$id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
$id('stroke_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
}
}
export default BottomPanel;

197
src/editor/panels/BottomPanelHandlers.js
View File

@@ -1,197 +0,0 @@
/* globals $ */
import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
const {$id} = SvgCanvas;
/*
* register actions for left panel
*/
/**
*
*/
class BottomPanelHandlers {
/**
* @param {PlainObject} editor svgedit handler
*/
constructor (editor) {
this.editor = editor;
this.svgCanvas = editor.svgCanvas;
}
/**
* @type {module}
*/
get selectedElement () {
return this.editor.selectedElement;
}
/**
* @type {module}
*/
get multiselected () {
return this.editor.multiselected;
}
/**
* @type {module}
*/
changeStrokeWidth (e) {
let val = e.target.value;
if (val === 0 && this.selectedElement && ['line', 'polyline'].includes(this.selectedElement.nodeName)) {
val = 1;
}
this.svgCanvas.setStrokeWidth(val);
}
/**
* @type {module}
*/
changeZoom (value) {
switch (value) {
case 'canvas':
case 'selection':
case 'layer':
case 'content':
this.editor.zoomChanged(window, value);
break;
default:
{
const zoomlevel = Number(value) / 100;
if (zoomlevel < 0.001) {
value = 0.1;
return;
}
const zoom = this.svgCanvas.getZoom();
const wArea = this.editor.workarea;
this.editor.zoomChanged(window, {
width: 0,
height: 0,
// center pt of scroll position
x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
zoom: zoomlevel
}, true);
}
}
}
/**
* @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
* @returns {void}
*/
updateToolButtonState () {
const bNoFill = (this.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path'
];
if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect();
}
$(btn).disabled = true;
});
} else {
buttonsNeedingStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
if (bNoStroke && bNoFill) {
buttonsNeedingFillAndStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect();
}
$(btn).disabled = true;
});
} else {
buttonsNeedingFillAndStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
this.svgCanvas.runExtensions(
'toolButtonStateUpdate',
/** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
nofill: bNoFill,
nostroke: bNoStroke
}
);
}
/**
* @type {module}
*/
updateColorpickers (apply) {
$id('fill_color').update(this.svgCanvas, this.selectedElement, apply);
$id('stroke_color').update(this.svgCanvas, this.selectedElement, apply);
}
/**
* @type {module}
*/
handleColorPicker (type, evt) {
const {paint} = evt.detail;
this.svgCanvas.setPaint(type, paint);
this.updateToolButtonState();
}
/**
* @type {module}
*/
handleStrokeAttr (type, evt) {
this.svgCanvas.setStrokeAttr(type, evt.detail.value);
}
/**
* @type {module}
*/
handleOpacity (evt) {
// if ($(this).find('div').length) { return; }
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.svgCanvas.setOpacity(val / 100);
}
/**
* @type {module}
*/
handlePalette (e) {
e.preventDefault();
// shift key or right click for stroke
const {picker, color} = e.detail;
// Webkit-based browsers returned 'initial' here for no stroke
const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
if (picker === 'fill') {
$id('fill_color').setPaint(paint);
} else {
$id('stroke_color').setPaint(paint);
}
this.svgCanvas.setColor(picker, color);
if (color !== 'none' && this.svgCanvas.getPaintOpacity(picker) !== 1) {
this.svgCanvas.setPaintOpacity(picker, 1.0);
}
this.updateToolButtonState();
}
/**
* @type {module}
*/
init () {
// register actions for bottom panel
$id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
$id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
$id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));
$id('stroke_width').addEventListener('change', this.changeStrokeWidth.bind(this));
$id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
$id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
$id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
$id('opacity').addEventListener('change', this.handleOpacity.bind(this));
$id('palette').addEventListener('change', this.handlePalette.bind(this));
const {curConfig} = this.editor.configObj;
$id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
$id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
}
}
export default BottomPanelHandlers;

357
src/editor/panels/LayersPanel.js
View File

@@ -1,11 +1,11 @@
/* eslint-disable max-len */
/* eslint-disable no-alert */
/* globals $ */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
const SIDEPANEL_MAXWIDTH = 300;
const SIDEPANEL_OPENWIDTH = 150;
const {$id} = SvgCanvas;
const { $id } = SvgCanvas;
/**
*
@@ -14,10 +14,9 @@ class LayersPanel {
/**
* @param {PlainObject} editor
*/
constructor (editor) {
this.svgCanvas = editor.svgCanvas;
constructor(editor) {
this.uiStrings = editor.uiStrings;
this.updateContextPanel = editor.topPanelHandlers.updateContextPanel;
this.updateContextPanel = editor.topPanel.updateContextPanel;
this.sidedrag = -1;
this.sidedragging = false;
this.allowmove = false;
@@ -29,25 +28,37 @@ class LayersPanel {
* @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
* @returns {void}
*/
changeSidePanelWidth (delta) {
const rulerX = document.querySelector('#ruler_x');
$('#sidepanels').width('+=' + delta);
$('#layerpanel').width('+=' + delta);
rulerX.style.right = (parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) + delta) + "px";
this.editor.workarea.style.right = (parseFloat(getComputedStyle(this.editor.workarea, null).right.replace("px", "")) + delta) + "px";
this.svgCanvas.runExtensions('workareaResized');
changeSidePanelWidth(delta) {
const rulerX = document.querySelector("#ruler_x");
$("#sidepanels").width("+=" + delta);
$("#layerpanel").width("+=" + delta);
rulerX.style.right =
parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
delta +
"px";
this.editor.workarea.style.right =
parseFloat(
getComputedStyle(this.editor.workarea, null).right.replace("px", "")
) +
delta +
"px";
this.editor.svgCanvas.runExtensions("workareaResized");
}
/**
* @param {Event} evt
* @returns {void}
*/
resizeSidePanel (evt) {
if (!this.allowmove) { return; }
if (this.sidedrag === -1) { return; }
* @param {Event} evt
* @returns {void}
*/
resizeSidePanel(evt) {
if (!this.allowmove) {
return;
}
if (this.sidedrag === -1) {
return;
}
this.sidedragging = true;
let deltaX = this.sidedrag - evt.pageX;
const sideWidth = $('#sidepanels').width();
const sideWidth = $("#sidepanels").width();
if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
// sideWidth = SIDEPANEL_MAXWIDTH;
@@ -55,7 +66,9 @@ class LayersPanel {
deltaX = 2 - sideWidth;
// sideWidth = 2;
}
if (deltaX === 0) { return; }
if (deltaX === 0) {
return;
}
this.sidedrag -= deltaX;
this.changeSidePanelWidth(deltaX);
}
@@ -65,11 +78,12 @@ class LayersPanel {
* @param {boolean} close Forces the side panel closed
* @returns {void}
*/
toggleSidePanel (close) {
toggleSidePanel(close) {
const dpr = window.devicePixelRatio || 1;
const w = $('#sidepanels').width();
const w = $("#sidepanels").width();
const isOpened = (dpr < 1 ? w : w / dpr) > 2;
const zoomAdjustedSidepanelWidth = (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
const zoomAdjustedSidepanelWidth =
(dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
this.changeSidePanelWidth(deltaX);
}
@@ -77,90 +91,147 @@ class LayersPanel {
* @param {PlainObject} e event
* @returns {void}
*/
lmenuFunc (e) {
lmenuFunc(e) {
const action = e?.detail?.trigger;
switch (action) {
case 'dupe':
this.cloneLayer();
break;
case 'delete':
this.deleteLayer();
break;
case 'merge_down':
this.mergeLayer();
break;
case 'merge_all':
this.svgCanvas.mergeAllLayers();
this.updateContextPanel();
this.populateLayers();
break;
case "dupe":
this.cloneLayer();
break;
case "delete":
this.deleteLayer();
break;
case "merge_down":
this.mergeLayer();
break;
case "merge_all":
this.editor.svgCanvas.mergeAllLayers();
this.updateContextPanel();
this.populateLayers();
break;
}
}
/**
* @returns {void}
*/
init () {
init() {
const template = document.createElement("template");
template.innerHTML = `
<div id="sidepanels">
<div id="layerpanel">
<h3 id="layersLabel">Layers</h3>
<fieldset id="layerbuttons">
<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">
<td class="layervis"></td>
<td class="layername">Layer 1</td>
</tr>
</table>
<span id="selLayerLabel">Move elements to:</span>
<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
<option selected="selected" value="layer1">Layer 1</option>
</select>
</div>
<div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
</div>
</div>
`;
this.editor.$svgEditor.append(template.content.cloneNode(true));
this.editor.svgCanvas = this.editor.svgCanvas;
// layer menu added to DOM
const menuMore = document.createElement('se-cmenu-layers');
menuMore.setAttribute('id', 'se-cmenu-layers-more');
menuMore.value = 'layer_moreopts';
menuMore.setAttribute('leftclick', true);
const menuMore = document.createElement("se-cmenu-layers");
menuMore.setAttribute("id", "se-cmenu-layers-more");
menuMore.value = "layer_moreopts";
menuMore.setAttribute("leftclick", true);
document.body.append(menuMore);
const menuLayerBox = document.createElement('se-cmenu-layers');
menuLayerBox.setAttribute('id', 'se-cmenu-layers-list');
menuLayerBox.value = 'layerlist';
menuLayerBox.setAttribute('leftclick', false);
const menuLayerBox = document.createElement("se-cmenu-layers");
menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
menuLayerBox.value = "layerlist";
menuLayerBox.setAttribute("leftclick", false);
document.body.append(menuLayerBox);
document.getElementById('layer_new').addEventListener('click', this.newLayer.bind(this));
document.getElementById('layer_delete').addEventListener('click', this.deleteLayer.bind(this));
document.getElementById('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1));
document.getElementById('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1));
document.getElementById('layer_rename').addEventListener('click', this.layerRename.bind(this));
$id('se-cmenu-layers-more').addEventListener('change', this.lmenuFunc.bind(this));
$id('se-cmenu-layers-list').addEventListener('change', (e) => {
document
.getElementById("layer_new")
.addEventListener("click", this.newLayer.bind(this));
document
.getElementById("layer_delete")
.addEventListener("click", this.deleteLayer.bind(this));
document
.getElementById("layer_up")
.addEventListener("click", () => this.moveLayer.bind(this)(-1));
document
.getElementById("layer_down")
.addEventListener("click", () => this.moveLayer.bind(this)(1));
document
.getElementById("layer_rename")
.addEventListener("click", this.layerRename.bind(this));
$id("se-cmenu-layers-more").addEventListener(
"change",
this.lmenuFunc.bind(this)
);
$id("se-cmenu-layers-list").addEventListener("change", e => {
this.lmenuFunc.bind(this)(e?.detail?.trigger, e?.detail?.source);
});
$id('sidepanel_handle').addEventListener('click', this.toggleSidePanel.bind(this));
$id("sidepanel_handle").addEventListener(
"click",
this.toggleSidePanel.bind(this)
);
if (this.editor.configObj.curConfig.showlayers) {
this.toggleSidePanel();
}
$id('sidepanel_handle').addEventListener('mousedown', (evt) => {
$id("sidepanel_handle").addEventListener("mousedown", evt => {
this.sidedrag = evt.pageX;
window.addEventListener('mousemove', this.resizeSidePanel.bind(this));
window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
this.allowmove = false;
// Silly hack for Chrome, which always runs mousemove right after mousedown
setTimeout(() => {
this.allowmove = true;
}, 20);
});
$id('sidepanel_handle').addEventListener('mouseup', (evt) => {
if (!this.sidedragging) { this.toggleSidePanel(); }
$id("sidepanel_handle").addEventListener("mouseup", evt => {
if (!this.sidedragging) {
this.toggleSidePanel();
}
this.sidedrag = -1;
this.sidedragging = false;
});
window.addEventListener('mouseup', (evt) => {
window.addEventListener("mouseup", evt => {
this.sidedrag = -1;
this.sidedragging = false;
$id('svg_editor').removeEventListener('mousemove', this.resizeSidePanel.bind(this));
$id("svg_editor").removeEventListener(
"mousemove",
this.resizeSidePanel.bind(this)
);
});
}
/**
* @returns {void}
*/
newLayer () {
newLayer() {
let uniqName;
let i = this.svgCanvas.getCurrentDrawing().getNumLayers();
let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
do {
uniqName = this.uiStrings.layers.layer + ' ' + (++i);
} while (this.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
uniqName = this.uiStrings.layers.layer + " " + ++i;
} while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
const newName = prompt(
this.uiStrings.notification.enterUniqueLayerName,
uniqName
);
if (!newName) {
return;
}
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
alert(this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.createLayer(newName);
this.editor.svgCanvas.createLayer(newName);
this.updateContextPanel();
this.populateLayers();
}
@@ -169,15 +240,15 @@ class LayersPanel {
*
* @returns {void}
*/
deleteLayer () {
if (this.svgCanvas.deleteCurrentLayer()) {
deleteLayer() {
if (this.editor.svgCanvas.deleteCurrentLayer()) {
this.updateContextPanel();
this.populateLayers();
// This matches what this.svgCanvas does
// This matches what this.editor.svgCanvas does
// TODO: make this behavior less brittle (svg-editor should get which
// layer is selected from the canvas and then select that one in the UI)
$('#layerlist tr.layer').removeClass('layersel');
$('#layerlist tr.layer:first').addClass('layersel');
$("#layerlist tr.layer").removeClass("layersel");
$("#layerlist tr.layer:first").addClass("layersel");
}
}
@@ -185,16 +256,22 @@ class LayersPanel {
*
* @returns {void}
*/
cloneLayer () {
const name = this.svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy';
cloneLayer() {
const name =
this.editor.svgCanvas.getCurrentDrawing().getCurrentLayerName() + " copy";
const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
if (!newName) { return; }
if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
const newName = prompt(
this.uiStrings.notification.enterUniqueLayerName,
name
);
if (!newName) {
return;
}
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
alert(this.uiStrings.notification.dupeLayerName);
return;
}
this.svgCanvas.cloneLayer(newName);
this.editor.svgCanvas.cloneLayer(newName);
this.updateContextPanel();
this.populateLayers();
}
@@ -203,11 +280,14 @@ class LayersPanel {
*
* @returns {void}
*/
mergeLayer () {
if ($('#layerlist tr.layersel').index() === this.svgCanvas.getCurrentDrawing().getNumLayers() - 1) {
mergeLayer() {
if (
$("#layerlist tr.layersel").index() ===
this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
) {
return;
}
this.svgCanvas.mergeLayer();
this.editor.svgCanvas.mergeLayer();
this.updateContextPanel();
this.populateLayers();
}
@@ -216,13 +296,13 @@ class LayersPanel {
* @param {Integer} pos
* @returns {void}
*/
moveLayer (pos) {
const total = this.svgCanvas.getCurrentDrawing().getNumLayers();
moveLayer(pos) {
const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
let curIndex = $('#layerlist tr.layersel').index();
let curIndex = $("#layerlist tr.layersel").index();
if (curIndex > 0 || curIndex < total - 1) {
curIndex += pos;
this.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
this.populateLayers();
}
}
@@ -230,16 +310,21 @@ class LayersPanel {
/**
* @returns {void}
*/
layerRename () {
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
const oldName = $('#layerlist tr.layersel td.layername').text();
const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
if (!newName) { return; }
if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
layerRename() {
// const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
const oldName = $("#layerlist tr.layersel td.layername").text();
const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
if (!newName) {
return;
}
if (
oldName === newName ||
this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
) {
alert(this.uiStrings.notification.layerHasThatName);
return;
}
this.svgCanvas.renameCurrentLayer(newName);
this.editor.svgCanvas.renameCurrentLayer(newName);
this.populateLayers();
}
@@ -248,72 +333,86 @@ class LayersPanel {
* If no layer is passed in, this function restores the other layers.
* @param {string} [layerNameToHighlight]
* @returns {void}
*/
toggleHighlightLayer (layerNameToHighlight) {
*/
toggleHighlightLayer(layerNameToHighlight) {
let i;
const curNames = [], numLayers = this.svgCanvas.getCurrentDrawing().getNumLayers();
const curNames = [],
numLayers = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
for (i = 0; i < numLayers; i++) {
curNames[i] = this.svgCanvas.getCurrentDrawing().getLayerName(i);
curNames[i] = this.editor.svgCanvas.getCurrentDrawing().getLayerName(i);
}
if (layerNameToHighlight) {
curNames.forEach((curName) => {
curNames.forEach(curName => {
if (curName !== layerNameToHighlight) {
this.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 0.5);
this.editor.svgCanvas
.getCurrentDrawing()
.setLayerOpacity(curName, 0.5);
}
});
} else {
curNames.forEach((curName) => {
this.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
curNames.forEach(curName => {
this.editor.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
});
}
}
/**
* @returns {void}
*/
populateLayers () {
this.svgCanvas.clearSelection();
const layerlist = $('#layerlist tbody').empty();
const selLayerNames = $('#selLayerNames').empty();
const drawing = this.svgCanvas.getCurrentDrawing();
* @returns {void}
*/
populateLayers() {
this.editor.svgCanvas.clearSelection();
const layerlist = $("#layerlist tbody").empty();
const selLayerNames = $("#selLayerNames").empty();
const drawing = this.editor.svgCanvas.getCurrentDrawing();
const currentLayerName = drawing.getCurrentLayerName();
let layer = this.svgCanvas.getCurrentDrawing().getNumLayers();
let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
while (layer--) {
const name = drawing.getLayerName(layer);
const layerTr = $('<tr class="layer">').toggleClass('layersel', name === currentLayerName);
const layerVis = $('<td class="layervis">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));
const layerName = $('<td class="layername">' + name + '</td>');
const layerTr = $('<tr class="layer">').toggleClass(
"layersel",
name === currentLayerName
);
const layerVis = $('<td class="layervis">').toggleClass(
"layerinvis",
!drawing.getLayerVisibility(name)
);
const layerName = $('<td class="layername">' + name + "</td>");
layerlist.append(layerTr.append(layerVis, layerName));
selLayerNames.append('<option value="' + name + '">' + name + '</option>');
selLayerNames.append(
'<option value="' + name + '">' + name + "</option>"
);
}
// handle selection of layer
$('#layerlist td.layername')
.mouseup((evt) => {
$('#layerlist tr.layer').removeClass('layersel');
$(evt.currentTarget.parentNode).addClass('layersel');
this.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
$("#layerlist td.layername")
.mouseup(evt => {
$("#layerlist tr.layer").removeClass("layersel");
$(evt.currentTarget.parentNode).addClass("layersel");
this.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
evt.preventDefault();
})
.mouseover((evt) => {
this.toggleHighlightLayer(this.svgCanvas, evt.currentTarget.textContent);
.mouseover(evt => {
this.toggleHighlightLayer(
this.editor.svgCanvas,
evt.currentTarget.textContent
);
})
.mouseout(() => {
this.toggleHighlightLayer(this.svgCanvas);
this.toggleHighlightLayer(this.editor.svgCanvas);
});
$('#layerlist td.layervis').click((evt) => {
$("#layerlist td.layervis").click(evt => {
const row = $(evt.currentTarget.parentNode).prevAll().length;
const name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
const vis = $(evt.currentTarget).hasClass('layerinvis');
this.svgCanvas.setLayerVisibility(name, vis);
$(evt.currentTarget).toggleClass('layerinvis');
const name = $("#layerlist tr.layer:eq(" + row + ") td.layername").text();
const vis = $(evt.currentTarget).hasClass("layerinvis");
this.editor.svgCanvas.setLayerVisibility(name, vis);
$(evt.currentTarget).toggleClass("layerinvis");
});
// if there were too few rows, let's add a few to make it not so lonely
let num = 5 - $('#layerlist tr.layer').size();
let num = 5 - $("#layerlist tr.layer").size();
while (num-- > 0) {
// TODO: there must a better way to do this
// TODO: there must a better way to do this
layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
}
}

253
src/editor/panels/LeftPanel.js Normal file
View File

@@ -0,0 +1,253 @@
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
const { $id, $qa } = SvgCanvas;
/*
* register actions for left panel
*/
/**
* @type {module}
*/
class LeftPanel {
/**
* @param {PlainObject} editor svgedit handler
*/
constructor(editor) {
this.editor = editor;
}
/**
* This is a common function used when a tool has been clicked (chosen).
* It does several common things:
* - Removes the pressed button from whatever tool currently has it.
* - Adds the the pressed button to the button passed in.
* @function this.updateLeftPanel
* @param {string|Element} button The DOM element or string selector representing the toolbar button
* @returns {boolean} Whether the button was disabled or not
*/
// eslint-disable-next-line class-methods-use-this
updateLeftPanel(button) {
if (button.disabled) return false;
// remove the pressed state on other(s) button(s)
$qa("#tools_left *[pressed]").forEach(b => {
b.pressed = false;
});
// pressed state for the clicked button
$id(button).pressed = true;
return true;
}
/**
* Unless the select toolbar button is disabled, sets the button
* and sets the select mode and cursor styles.
* @function module:SVGEditor.clickSelect
* @returns {void}
*/
clickSelect() {
if (this.updateLeftPanel("tool_select")) {
this.editor.workarea.style.cursor = "auto";
this.editor.svgCanvas.setMode("select");
}
}
/**
*
* @returns {void}
*/
clickFHPath() {
if (this.updateLeftPanel("tool_fhpath")) {
this.editor.svgCanvas.setMode("fhpath");
}
}
/**
*
* @returns {void}
*/
clickLine() {
if (this.updateLeftPanel("tool_line")) {
this.editor.svgCanvas.setMode("line");
}
}
/**
*
* @returns {void}
*/
clickSquare() {
if (this.updateLeftPanel("tool_square")) {
this.editor.svgCanvas.setMode("square");
}
}
/**
*
* @returns {void}
*/
clickRect() {
if (this.updateLeftPanel("tool_rect")) {
this.editor.svgCanvas.setMode("rect");
}
}
/**
*
* @returns {void}
*/
clickFHRect() {
if (this.updateLeftPanel("tool_fhrect")) {
this.editor.svgCanvas.setMode("fhrect");
}
}
/**
*
* @returns {void}
*/
clickCircle() {
if (this.updateLeftPanel("tool_circle")) {
this.editor.svgCanvas.setMode("circle");
}
}
/**
*
* @returns {void}
*/
clickEllipse() {
if (this.updateLeftPanel("tool_ellipse")) {
this.editor.svgCanvas.setMode("ellipse");
}
}
/**
*
* @returns {void}
*/
clickFHEllipse() {
if (this.updateLeftPanel("tool_fhellipse")) {
this.editor.svgCanvas.setMode("fhellipse");
}
}
/**
*
* @returns {void}
*/
clickImage() {
if (this.updateLeftPanel("tool_image")) {
this.editor.svgCanvas.setMode("image");
}
}
/**
*
* @returns {void}
*/
clickZoom() {
if (this.updateLeftPanel("tool_zoom")) {
this.editor.svgCanvas.setMode("zoom");
this.editor.workarea.style.cursor = this.editor.zoomInIcon;
}
}
/**
*
* @returns {void}
*/
dblclickZoom() {
if (this.updateLeftPanel("tool_zoom")) {
this.editor.zoomImage();
this.clickSelect();
}
}
/**
*
* @returns {void}
*/
clickText() {
if (this.updateLeftPanel("tool_text")) {
this.editor.svgCanvas.setMode("text");
}
}
/**
*
* @returns {void}
*/
clickPath() {
if (this.updateLeftPanel("tool_path")) {
this.editor.svgCanvas.setMode("path");
}
}
/**
* @type {module}
*/
add(id, handler) {
$id(id).addEventListener("click", () => {
if (this.updateLeftPanel(id)) {
handler();
}
});
}
/**
* @type {module}
*/
init() {
// add Left panel
const template = document.createElement("template");
template.innerHTML = `
<div id="tools_left">
<se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
<se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
<se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
<se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
<se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
<se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
<se-flyingbutton id="tools_rect" title="Square/Rect Tool">
<se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
<se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
<se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
</se-flyingbutton>
<se-flyingbutton id="tools_ellipse" title="Ellipse/Circle Tool">
<se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
<se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
<se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
</se-flyingbutton>
<se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
<se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
<se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
</se-flyingbutton>
<se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
<se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
<se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
<se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
<se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
src="./images/shapelib.svg"></se-explorerbutton>
</div> <!-- tools_left -->
`;
this.editor.$svgEditor.append(template.content.cloneNode(true));
// register actions for left panel
$id("tool_select").addEventListener("click", this.clickSelect.bind(this));
$id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));
$id("tool_text").addEventListener("click", this.clickText.bind(this));
$id("tool_image").addEventListener("click", this.clickImage.bind(this));
$id("tool_zoom").addEventListener("click", this.clickZoom.bind(this));
$id("tool_zoom").addEventListener("dblclick", this.dblclickZoom.bind(this));
$id("tool_path").addEventListener("click", this.clickPath.bind(this));
$id("tool_line").addEventListener("click", this.clickLine.bind(this));
// flyout
$id("tool_rect").addEventListener("click", this.clickRect.bind(this));
$id("tool_square").addEventListener("click", this.clickSquare.bind(this));
$id("tool_fhrect").addEventListener("click", this.clickFHRect.bind(this));
$id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
$id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
$id("tool_fhellipse").addEventListener(
"click",
this.clickFHEllipse.bind(this)
);
}
}
export default LeftPanel;

216
src/editor/panels/LeftPanelHandlers.js
View File

@@ -1,216 +0,0 @@
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
const {$id, $qa} = SvgCanvas;
/*
* register actions for left panel
*/
/**
* @type {module}
*/
class LeftPanelHandlers {
/**
* @param {PlainObject} editor svgedit handler
*/
constructor (editor) {
this.editor = editor;
this.svgCanvas = editor.svgCanvas;
}
/**
* This is a common function used when a tool has been clicked (chosen).
* It does several common things:
* - Removes the pressed button from whatever tool currently has it.
* - Adds the the pressed button to the button passed in.
* @function this.updateLeftPanel
* @param {string|Element} button The DOM element or string selector representing the toolbar button
* @returns {boolean} Whether the button was disabled or not
*/
// eslint-disable-next-line class-methods-use-this
updateLeftPanel (button) {
if (button.disabled) return false;
// remove the pressed state on other(s) button(s)
$qa('#tools_left *[pressed]').forEach((b) => { b.pressed = false; });
// pressed state for the clicked button
$id(button).pressed = true;
return true;
}
/**
* Unless the select toolbar button is disabled, sets the button
* and sets the select mode and cursor styles.
* @function module:SVGEditor.clickSelect
* @returns {void}
*/
clickSelect () {
if (this.updateLeftPanel('tool_select')) {
this.editor.workarea.style.cursor = "auto";
this.svgCanvas.setMode('select');
}
}
/**
*
* @returns {void}
*/
clickFHPath () {
if (this.updateLeftPanel('tool_fhpath')) {
this.svgCanvas.setMode('fhpath');
}
}
/**
*
* @returns {void}
*/
clickLine () {
if (this.updateLeftPanel('tool_line')) {
this.svgCanvas.setMode('line');
}
}
/**
*
* @returns {void}
*/
clickSquare () {
if (this.updateLeftPanel('tool_square')) {
this.svgCanvas.setMode('square');
}
}
/**
*
* @returns {void}
*/
clickRect () {
if (this.updateLeftPanel('tool_rect')) {
this.svgCanvas.setMode('rect');
}
}
/**
*
* @returns {void}
*/
clickFHRect () {
if (this.updateLeftPanel('tool_fhrect')) {
this.svgCanvas.setMode('fhrect');
}
}
/**
*
* @returns {void}
*/
clickCircle () {
if (this.updateLeftPanel('tool_circle')) {
this.svgCanvas.setMode('circle');
}
}
/**
*
* @returns {void}
*/
clickEllipse () {
if (this.updateLeftPanel('tool_ellipse')) {
this.svgCanvas.setMode('ellipse');
}
}
/**
*
* @returns {void}
*/
clickFHEllipse () {
if (this.updateLeftPanel('tool_fhellipse')) {
this.svgCanvas.setMode('fhellipse');
}
}
/**
*
* @returns {void}
*/
clickImage () {
if (this.updateLeftPanel('tool_image')) {
this.svgCanvas.setMode('image');
}
}
/**
*
* @returns {void}
*/
clickZoom () {
if (this.updateLeftPanel('tool_zoom')) {
this.svgCanvas.setMode('zoom');
this.editor.workarea.style.cursor = this.editor.zoomInIcon;
}
}
/**
*
* @returns {void}
*/
dblclickZoom () {
if (this.updateLeftPanel('tool_zoom')) {
this.editor.zoomImage();
this.clickSelect();
}
}
/**
*
* @returns {void}
*/
clickText () {
if (this.updateLeftPanel('tool_text')) {
this.svgCanvas.setMode('text');
}
}
/**
*
* @returns {void}
*/
clickPath () {
if (this.updateLeftPanel('tool_path')) {
this.svgCanvas.setMode('path');
}
}
/**
* @type {module}
*/
add (id, handler) {
$id(id).addEventListener('click', () => {
if (this.updateLeftPanel(id)) {
handler();
}
});
}
/**
* @type {module}
*/
init () {
// register actions for left panel
$id('tool_select').addEventListener('click', this.clickSelect.bind(this));
$id('tool_fhpath').addEventListener('click', this.clickFHPath.bind(this));
$id('tool_text').addEventListener('click', this.clickText.bind(this));
$id('tool_image').addEventListener('click', this.clickImage.bind(this));
$id('tool_zoom').addEventListener('click', this.clickZoom.bind(this));
$id('tool_zoom').addEventListener('dblclick', this.dblclickZoom.bind(this));
$id('tool_path').addEventListener('click', this.clickPath.bind(this));
$id('tool_line').addEventListener('click', this.clickLine.bind(this));
// flyout
$id('tool_rect').addEventListener('click', this.clickRect.bind(this));
$id('tool_square').addEventListener('click', this.clickSquare.bind(this));
$id('tool_fhrect').addEventListener('click', this.clickFHRect.bind(this));
$id('tool_ellipse').addEventListener('click', this.clickEllipse.bind(this));
$id('tool_circle').addEventListener('click', this.clickCircle.bind(this));
$id('tool_fhellipse').addEventListener('click', this.clickFHEllipse.bind(this));
}
}
export default LeftPanelHandlers;

1131
src/editor/panels/TopPanel.js Normal file
View File

File diff suppressed because it is too large Load Diff

645
src/editor/panels/TopPanelHandlers.js
View File

@@ -1,645 +0,0 @@
/* globals $ */
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js';
const {$id, isNullish} = SvgCanvas;
/*
* register actions for left panel
*/
/**
*
*/
class TopPanelHandlers {
/**
* @param {PlainObject} editor svgedit handler
*/
constructor (editor) {
this.editor = editor;
this.svgCanvas = editor.svgCanvas;
this.uiStrings = editor.uiStrings;
}
/**
* @type {module}
*/
get selectedElement () {
return this.editor.selectedElement;
}
/**
* @type {module}
*/
get multiselected () {
return this.editor.multiselected;
}
/**
* @type {module}
*/
get path () {
return this.svgCanvas.pathActions;
}
/**
* @param {PlainObject} [opts={}]
* @param {boolean} [opts.cancelDeletes=false]
* @returns {void} Resolves to `undefined`
*/
promptImgURL ({cancelDeletes = false} = {}) {
let curhref = this.svgCanvas.getHref(this.selectedElement);
curhref = curhref.startsWith('data:') ? '' : curhref;
// eslint-disable-next-line no-alert
const url = prompt(this.editor.uiStrings.notification.enterNewImgURL, curhref);
if (url) {
this.editor.setImageURL(url);
} else if (cancelDeletes) {
this.svgCanvas.deleteSelectedElements();
}
}
/**
* Updates the context panel tools based on the selected element.
* @returns {void}
*/
updateContextPanel () {
const setInputWidth = (elem) => {
const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
$(elem).width(w);
};
let elem = this.selectedElement;
// If element has just been deleted, consider it null
if (!isNullish(elem) && !elem.parentNode) { elem = null; }
const currentLayerName = this.svgCanvas.getCurrentDrawing().getCurrentLayerName();
const currentMode = this.svgCanvas.getMode();
const unit = this.editor.configObj.curConfig.baseUnit !== 'px' ? this.editor.configObj.curConfig.baseUnit : null;
const isNode = currentMode === 'pathedit'; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
const menuItems = document.getElementById('se-cmenu_canvas');
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,' +
'#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel,' +
' #use_panel, #a_panel').hide();
if (!isNullish(elem)) {
const elname = elem.nodeName;
// If this is a link with no transform and one child, pretend
// its child is selected
// if (elname === 'a') { // && !$(elem).attr('transform')) {
// elem = elem.firstChild;
// }
const angle = this.svgCanvas.getRotationAngle(elem);
$('#angle').val(angle);
const blurval = this.svgCanvas.getBlur(elem) * 10;
$id('blur').value = blurval;
if (this.svgCanvas.addedNew &&
elname === 'image' &&
this.svgCanvas.getMode() === 'image' &&
!this.svgCanvas.getHref(elem).startsWith('data:')) {
/* await */ this.promptImgURL({cancelDeletes: true});
}
if (!isNode && currentMode !== 'pathedit') {
$('#selected_panel').show();
// Elements in this array already have coord fields
if (['line', 'circle', 'ellipse'].includes(elname)) {
$('#xy_panel').hide();
} else {
let x, y;
// Get BBox vals for g, polyline and path
if (['g', 'polyline', 'path'].includes(elname)) {
const bb = this.svgCanvas.getStrokedBBox([elem]);
if (bb) {
({x, y} = bb);
}
} else {
x = elem.getAttribute('x');
y = elem.getAttribute('y');
}
if (unit) {
x = convertUnit(x);
y = convertUnit(y);
}
$('#selected_x').val(x || 0);
$('#selected_y').val(y || 0);
$('#xy_panel').show();
}
// Elements in this array cannot be converted to a path
$id('tool_topath').style.display = ['image', 'text', 'path', 'g', 'use'].includes(elname) ? 'none' : 'block';
$id('tool_reorient').style.display = (elname === 'path') ? 'block' : 'none';
$id('tool_reorient').disabled = (angle === 0);
} else {
const point = this.path.getNodePoint();
$('#tool_add_subpath').pressed = false;
$('#tool_node_delete').toggleClass('disabled', !this.path.canDeleteNodes);
// Show open/close button based on selected point
// setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
if (point) {
const segType = $('#seg_type');
if (unit) {
point.x = convertUnit(point.x);
point.y = convertUnit(point.y);
}
$('#path_node_x').val(point.x);
$('#path_node_y').val(point.y);
if (point.type) {
segType.val(point.type).removeAttr('disabled');
} else {
segType.val(4).attr('disabled', 'disabled');
}
}
return;
}
// update contextual tools here
const panels = {
g: [],
a: [],
rect: ['rx', 'width', 'height'],
image: ['width', 'height'],
circle: ['cx', 'cy', 'r'],
ellipse: ['cx', 'cy', 'rx', 'ry'],
line: ['x1', 'y1', 'x2', 'y2'],
text: [],
use: []
};
const {tagName} = elem;
// if ($(elem).data('gsvg')) {
// $('#g_panel').show();
// }
let linkHref = null;
if (tagName === 'a') {
linkHref = this.svgCanvas.getHref(elem);
$('#g_panel').show();
}
if (elem.parentNode.tagName === 'a' && !$(elem).siblings().length) {
$('#a_panel').show();
linkHref = this.svgCanvas.getHref(elem.parentNode);
}
// Hide/show the make_link buttons
$('#tool_make_link, #tool_make_link_multi').toggle(!linkHref);
if (linkHref) {
$('#link_url').val(linkHref);
}
if (panels[tagName]) {
const curPanel = panels[tagName];
$('#' + tagName + '_panel').show();
curPanel.forEach((item) => {
let attrVal = elem.getAttribute(item);
if (this.editor.configObj.curConfig.baseUnit !== 'px' && elem[item]) {
const bv = elem[item].baseVal.value;
attrVal = convertUnit(bv);
}
$id(`${tagName}_${item}`).value = attrVal || 0;
});
if (tagName === 'text') {
$('#text_panel').css('display', 'inline-block');
$('#tool_font_size').css('display', 'inline');
$id('tool_italic').pressed = this.svgCanvas.getItalic();
$id('tool_bold').pressed = this.svgCanvas.getBold();
$('#tool_font_family').val(elem.getAttribute('font-family'));
$('#font_size').val(elem.getAttribute('font-size'));
$('#text').val(elem.textContent);
const textAnchorStart = $id('tool_text_anchor_start');
const textAnchorMiddle = $id('tool_text_anchor_middle');
const textAnchorEnd = $id('tool_text_anchor_end');
switch (elem.getAttribute('text-anchor')) {
case 'start':
textAnchorStart.pressed = true;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = false;
break;
case 'middle':
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = true;
textAnchorEnd.pressed = false;
break;
case 'end':
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = true;
break;
}
if (this.svgCanvas.addedNew) {
// Timeout needed for IE9
setTimeout(() => {
$('#text').focus().select();
}, 100);
}
// text
} else if (tagName === 'image' && this.svgCanvas.getMode() === 'image') {
this.svgCanvas.setImageURL(this.svgCanvas.getHref(elem));
// image
} else if (tagName === 'g' || tagName === 'use') {
$('#container_panel').show();
const title = this.svgCanvas.getTitle();
const label = $('#g_title')[0];
label.value = title;
setInputWidth(label);
$('#g_title').prop('disabled', tagName === 'use');
}
}
menuItems.setAttribute((tagName === 'g' ? 'en' : 'dis') + 'ablemenuitems', '#ungroup');
menuItems.setAttribute(((tagName === 'g' || !this.multiselected) ? 'dis' : 'en') + 'ablemenuitems', '#group');
// if (!isNullish(elem))
} else if (this.multiselected) {
$('#multiselected_panel').show();
menuItems.setAttribute('enablemenuitems', '#group');
menuItems.setAttribute('disablemenuitems', '#ungroup');
} else {
menuItems.setAttribute('disablemenuitems', '#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');
}
// update history buttons
$id('tool_undo').disabled = (this.svgCanvas.undoMgr.getUndoStackSize() === 0);
$id('tool_redo').disabled = (this.svgCanvas.undoMgr.getRedoStackSize() === 0);
this.svgCanvas.addedNew = false;
if ((elem && !isNode) || this.multiselected) {
// update the selected elements' layer
$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
// Enable regular menu options
const canCMenu = document.getElementById('se-cmenu_canvas');
canCMenu.setAttribute('enablemenuitems', '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
} else {
$('#selLayerNames').attr('disabled', 'disabled');
}
}
/**
* @param {Event} [e] Not used.
* @param {boolean} forSaving
* @returns {void}
*/
showSourceEditor (e, forSaving) {
const $editorDialog = document.getElementById('se-svg-editor-dialog');
if ($editorDialog.getAttribute('dialog') === 'open') return;
const origSource = this.svgCanvas.getSvgString();
$editorDialog.setAttribute('dialog', 'open');
$editorDialog.setAttribute('value', origSource);
$editorDialog.setAttribute('copysec', Boolean(forSaving));
$editorDialog.setAttribute('applysec', !forSaving);
}
/**
*
* @returns {void}
*/
clickWireframe () {
$id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
this.editor.workarea.classList.toggle('wireframe');
const wfRules = $('#wireframe_rules');
if (!wfRules.length) {
/* wfRules = */ $('<style id="wireframe_rules"></style>').appendTo('head');
} else {
wfRules.empty();
}
this.editor.updateWireFrame();
}
/**
*
* @returns {void}
*/
clickUndo () {
const {undoMgr} = this.editor.svgCanvas;
if (undoMgr.getUndoStackSize() > 0) {
undoMgr.undo();
this.editor.layersPanel.populateLayers();
}
}
/**
*
* @returns {void}
*/
clickRedo () {
const {undoMgr} = this.editor.svgCanvas;
if (undoMgr.getRedoStackSize() > 0) {
undoMgr.redo();
this.editor.layersPanel.populateLayers();
}
}
/**
* @type {module}
*/
changeRectRadius (e) {
this.svgCanvas.setRectRadius(e.target.value);
}
/**
* @type {module}
*/
changeFontSize (e) {
this.svgCanvas.setFontSize(e.target.value);
}
/**
* @type {module}
*/
changeRotationAngle (e) {
this.svgCanvas.setRotationAngle(e.target.value);
$('#tool_reorient').toggleClass('disabled', Number.parseInt(e.target.value) === 0);
}
/**
* @param {PlainObject} e
* @returns {void}
*/
changeBlur (e) {
this.svgCanvas.setBlur(e.target.value / 10, true);
}
/**
*
* @returns {void}
*/
clickGroup () {
// group
if (this.editor.multiselected) {
this.svgCanvas.groupSelectedElements();
// ungroup
} else if (this.editor.selectedElement) {
this.svgCanvas.ungroupSelectedElement();
}
}
/**
*
* @returns {void}
*/
clickClone () {
this.svgCanvas.cloneSelectedElements(20, 20);
}
/**
* @param {PlainObject} evt
* @returns {void}
*/
clickAlignEle (evt) {
this.svgCanvas.alignSelectedElements(evt.detail.value, 'page');
}
/**
* @param {string} pos indicate the alignment relative to top, bottom, middle etc..
* @returns {void}
*/
clickAlign (pos) {
let value = $('#tool_align_relative').val();
if(value === ''){
value = 'selected';
}
this.svgCanvas.alignSelectedElements(pos, value);
}
/**
*
* @type {module}
*/
attrChanger (e) {
const attr = e.target.getAttribute('data-attr');
let val = e.target.value;
const valid = isValidUnit(attr, val, this.selectedElement);
if (!valid) {
e.target.value = this.selectedElement().getAttribute(attr);
// eslint-disable-next-line no-alert
alert(this.uiStrings.notification.invalidAttrValGiven);
return false;
}
if (attr !== 'id' && attr !== 'class') {
if (isNaN(val)) {
val = this.svgCanvas.convertToNum(attr, val);
} else if (this.editor.configObj.curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
const unitData = getTypeMap();
if (this.selectedElement[attr] || this.svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
val *= unitData[this.editor.configObj.curConfig.baseUnit];
}
}
}
// if the user is changing the id, then de-select the element first
// change the ID, then re-select it with the new ID
if (attr === 'id') {
const elem = this.selectedElement;
this.svgCanvas.clearSelection();
elem.id = val;
this.svgCanvas.addToSelection([elem], true);
} else {
this.svgCanvas.changeSelectedAttribute(attr, val);
}
return true;
}
/**
*
* @returns {void}
*/
convertToPath () {
if (!isNullish(this.selectedElement)) {
this.svgCanvas.convertToPath();
}
}
/**
*
* @returns {void}
*/
reorientPath () {
if (!isNullish(this.selectedElement)) {
this.path.reorient();
}
}
/**
*
* @returns {void} Resolves to `undefined`
*/
makeHyperlink () {
if (!isNullish(this.selectedElement) || this.multiselected) {
// eslint-disable-next-line no-alert
const url = prompt(this.uiStrings.notification.enterNewLinkURL, 'http://');
if (url) {
this.svgCanvas.makeHyperlink(url);
}
}
}
/**
*
* @returns {void}
*/
linkControlPoints () {
const linked = $id('tool_node_link').pressed;
$id('tool_node_link').pressed = !linked;
this.path.linkControlPoints(linked);
}
/**
*
* @returns {void}
*/
clonePathNode () {
if (this.path.getNodePoint()) {
this.path.clonePathNode();
}
}
/**
*
* @returns {void}
*/
deletePathNode () {
if (this.path.getNodePoint()) {
this.path.deletePathNode();
}
}
/**
*
* @returns {void}
*/
addSubPath () {
const button = $('#tool_add_subpath');
const sp = !button.hasClass('pressed');
button.pressed = sp;
// button.toggleClass('push_button_pressed tool_button');
this.path.addSubPath(sp);
}
/**
*
* @returns {void}
*/
opencloseSubPath () {
this.path.opencloseSubPath();
}
/**
* Delete is a contextual tool that only appears in the ribbon if
* an element has been selected.
* @returns {void}
*/
deleteSelected () {
if (!isNullish(this.selectedElement) || this.multiselected) {
this.svgCanvas.deleteSelectedElements();
}
}
/**
*
* @returns {void}
*/
moveToTopSelected () {
if (!isNullish(this.selectedElement)) {
this.svgCanvas.moveToTopSelectedElement();
}
}
/**
*
* @returns {void}
*/
moveToBottomSelected () {
if (!isNullish(this.selectedElement)) {
this.svgCanvas.moveToBottomSelectedElement();
}
}
/**
*
* @returns {false}
*/
clickBold () {
this.svgCanvas.setBold(!this.svgCanvas.getBold());
this.updateContextPanel();
return false;
}
/**
*
* @returns {false}
*/
clickItalic () {
this.svgCanvas.setItalic(!this.svgCanvas.getItalic());
this.updateContextPanel();
return false;
}
/**
*
* @param {string} value "start","end" or "middle"
* @returns {false}
*/
clickTextAnchor (value) {
this.svgCanvas.setTextAnchor(value);
this.updateContextPanel();
return false;
}
/**
* @type {module}
*/
init () {
// svg editor source dialoag added to DOM
const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
document.body.append(newSeEditorDialog);
// register action to top panel buttons
$id('tool_source').addEventListener('click', this.showSourceEditor.bind(this));
$id('tool_wireframe').addEventListener('click', this.clickWireframe.bind(this));
$id('tool_undo').addEventListener('click', this.clickUndo.bind(this));
$id('tool_redo').addEventListener('click', this.clickRedo.bind(this));
$id('tool_clone').addEventListener('click', this.clickClone.bind(this));
$id('tool_clone_multi').addEventListener('click', this.clickClone.bind(this));
$id('tool_delete').addEventListener('click', this.deleteSelected.bind(this));
$id('tool_delete_multi').addEventListener('click', this.deleteSelected.bind(this));
$id('tool_move_top').addEventListener('click', this.moveToTopSelected.bind(this));
$id('tool_move_bottom').addEventListener('click', this.moveToBottomSelected.bind(this));
$id('tool_topath').addEventListener('click', this.convertToPath.bind(this));
$id('tool_make_link').addEventListener('click', this.makeHyperlink.bind(this));
$id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this));
$id('tool_reorient').addEventListener('click', this.reorientPath.bind(this));
$id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this));
$id('tool_position').addEventListener('change', (evt) => this.clickAlignEle.bind(this)(evt));
$id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left'));
$id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right'));
$id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'));
$id('tool_align_top').addEventListener('click', () => this.clickAlign.bind(this)('top'));
$id('tool_align_bottom').addEventListener('click', () => this.clickAlign.bind(this)('bottom'));
$id('tool_align_middle').addEventListener('click', () => this.clickAlign.bind(this)('middle'));
$id('tool_node_clone').addEventListener('click', this.clonePathNode.bind(this));
$id('tool_node_delete').addEventListener('click', this.deletePathNode.bind(this));
$id('tool_openclose_path').addEventListener('click', this.opencloseSubPath.bind(this));
$id('tool_add_subpath').addEventListener('click', this.addSubPath.bind(this));
$id('tool_node_link').addEventListener('click', this.linkControlPoints.bind(this));
$id('angle').addEventListener('change', this.changeRotationAngle.bind(this));
$id('blur').addEventListener('change', this.changeBlur.bind(this));
$id('rect_rx').addEventListener('change', this.changeRectRadius.bind(this));
$id('font_size').addEventListener('change', this.changeFontSize.bind(this));
$id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this));
$id('tool_bold').addEventListener('click', this.clickBold.bind(this));
$id('tool_italic').addEventListener('click', this.clickItalic.bind(this));
$id('tool_text_anchor_start').addEventListener('click', () => this.clickTextAnchor.bind(this)('start'));
$id('tool_text_anchor_middle').addEventListener('click', () => this.clickTextAnchor.bind(this)('middle'));
$id('tool_text_anchor_end').addEventListener('click', () => this.clickTextAnchor.bind(this)('end'));
$id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this));
$id('change_image_url').addEventListener('click', this.promptImgURL.bind(this));
// all top panel attributes
['elem_id', 'elem_class', 'circle_cx', 'circle_cy', 'circle_r', 'ellipse_cx',
'ellipse_cy', 'ellipse_rx', 'ellipse_ry', 'selected_x', 'selected_y', 'rect_width',
'rect_height', 'line_x1', 'line_x2', 'line_y2', 'image_width', 'image_height', 'path_node_x',
'path_node_y'].forEach((attrId) => $id(attrId).addEventListener('change', this.attrChanger.bind(this)));
}
}
export default TopPanelHandlers;