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

Merge branch 'master' of https://github.com/SVG-Edit/svgedit into V7-preview

Browse Source
This commit is contained in:
Agriya Dev5
2021-05-18 13:04:27 +05:30
parent a90fe20d32 0aba04316d
commit b0e2bd5b9f
188 changed files with 4534 additions and 4567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/editor/panels/BottomPanel.js
View File

@@ -1,7 +1,7 @@
import SvgCanvas from '../../svgcanvas/svgcanvas.js';
import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
import { jGraduate } from '../components/jgraduate/jQuery.jGraduate.js';
const {$id} = SvgCanvas;
const { $id } = SvgCanvas;
/*
* register actions for left panel
@@ -28,18 +28,16 @@ class BottomPanel {
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)) {
if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) {
val = 1;
}
this.editor.svgCanvas.setStrokeWidth(val);
}
/**
* @type {module}
*/
@@ -60,7 +58,6 @@ class BottomPanel {
}
const zoom = this.editor.svgCanvas.getZoom();
const wArea = this.editor.workarea;
this.editor.zoomChanged(window, {
width: 0,
height: 0,
@@ -79,7 +76,7 @@ class BottomPanel {
updateToolButtonState () {
const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ];
const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path'
@@ -98,7 +95,6 @@ class BottomPanel {
$id(btn).disabled = false;
});
}
if (bNoStroke && bNoFill) {
// eslint-disable-next-line sonarjs/no-identical-functions
buttonsNeedingFillAndStroke.forEach((btn) => {
@@ -113,7 +109,6 @@ class BottomPanel {
$id(btn).disabled = false;
});
}
this.editor.svgCanvas.runExtensions(
'toolButtonStateUpdate',
/** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
@@ -122,12 +117,11 @@ class BottomPanel {
}
);
}
/**
* @type {module}
*/
handleColorPicker (type, evt) {
const {paint} = evt.detail;
const { paint } = evt.detail;
this.editor.svgCanvas.setPaint(type, paint);
this.updateToolButtonState();
}
@@ -150,9 +144,9 @@ class BottomPanel {
handlePalette (e) {
e.preventDefault();
// shift key or right click for stroke
const {picker, color} = e.detail;
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)});
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 {
@@ -164,7 +158,6 @@ class BottomPanel {
}
this.updateToolButtonState();
}
/**
* @type {module}
*/
@@ -217,12 +210,12 @@ class BottomPanel {
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}));
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));

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

@@ -14,7 +14,6 @@ class LayersPanel {
* @param {PlainObject} editor
*/
constructor(editor) {
this.uiStrings = editor.uiStrings;
this.updateContextPanel = editor.topPanel.updateContextPanel;
this.sidedrag = -1;
this.sidedragging = false;
@@ -79,7 +78,7 @@ class LayersPanel {
*/
toggleSidePanel(close) {
const dpr = window.devicePixelRatio || 1;
const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""))
const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
const isOpened = (dpr < 1 ? w : w / dpr) > 2;
const zoomAdjustedSidepanelWidth =
(dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
@@ -173,7 +172,7 @@ class LayersPanel {
"change",
this.lmenuFunc.bind(this)
);
$id("se-cmenu-layers-list").addEventListener("change", e => {
$id("se-cmenu-layers-list").addEventListener("change", (e) => {
this.lmenuFunc(e);
});
$id("sidepanel_handle").addEventListener(
@@ -183,7 +182,7 @@ class LayersPanel {
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));
this.allowmove = false;
@@ -192,14 +191,14 @@ class LayersPanel {
this.allowmove = true;
}, 20);
});
$id("sidepanel_handle").addEventListener("mouseup", _evt => {
$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(
@@ -215,18 +214,18 @@ class LayersPanel {
let uniqName;
let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
do {
uniqName = this.uiStrings.layers.layer + " " + ++i;
uniqName = this.editor.i18next.t("layers.layer") + " " + ++i;
} while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
const newName = prompt(
this.uiStrings.notification.enterUniqueLayerName,
this.editor.i18next.t('notification.enterUniqueLayerName'),
uniqName
);
if (!newName) {
return;
}
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
alert(this.uiStrings.notification.dupeLayerName);
alert(this.editor.i18next.t('notification.dupeLayerName'));
return;
}
this.editor.svgCanvas.createLayer(newName);
@@ -263,14 +262,14 @@ class LayersPanel {
this.editor.svgCanvas.getCurrentDrawing().getCurrentLayerName() + " copy";
const newName = prompt(
this.uiStrings.notification.enterUniqueLayerName,
this.editor.i18next.t('notification.enterUniqueLayerName'),
name
);
if (!newName) {
return;
}
if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
alert(this.uiStrings.notification.dupeLayerName);
alert(this.editor.i18next.t('notification.dupeLayerName'));
return;
}
this.editor.svgCanvas.cloneLayer(newName);
@@ -323,7 +322,7 @@ class LayersPanel {
*/
layerRename() {
const oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
const newName = prompt(this.editor.i18next.t('notification.enterNewLayerName'), "");
if (!newName) {
return;
}
@@ -331,7 +330,7 @@ class LayersPanel {
oldName === newName ||
this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
) {
alert(this.uiStrings.notification.layerHasThatName);
alert(this.editor.i18next.t('notification.layerHasThatName'));
return;
}
this.editor.svgCanvas.renameCurrentLayer(newName);
@@ -353,7 +352,7 @@ class LayersPanel {
}
if (layerNameToHighlight) {
curNames.forEach(curName => {
curNames.forEach((curName) => {
if (curName !== layerNameToHighlight) {
this.editor.svgCanvas
.getCurrentDrawing()
@@ -361,7 +360,7 @@ class LayersPanel {
}
});
} else {
curNames.forEach(curName => {
curNames.forEach((curName) => {
this.editor.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
});
}
@@ -387,7 +386,7 @@ class LayersPanel {
// 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 = document.createElement("tr");
const layerTr = document.createElement("tr");
layerTr.className = (name === currentLayerName) ? 'layer layersel' : 'layer';
const layerVis = document.createElement("td");
layerVis.className = (!drawing.getLayerVisibility(name)) ? "layerinvis layervis" : 'layervis';
@@ -410,16 +409,13 @@ class LayersPanel {
});
evt.currentTarget.parentNode.classList.add("layersel");
self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
evt.preventDefault();
evt.preventDefault();
});
element.addEventListener('mouseup', function(evt) {
self.toggleHighlightLayer(
self.editor.svgCanvas,
evt.currentTarget.textContent
);
element.addEventListener('mouseup', (evt) => {
self.toggleHighlightLayer(evt.currentTarget.textContent);
});
element.addEventListener('mouseout', function(_evt) {
self.toggleHighlightLayer(self.editor.svgCanvas);
element.addEventListener('mouseout', (_evt) => {
self.toggleHighlightLayer();
});
});
const elements = $id('layerlist').querySelectorAll("td.layervis");

2
src/editor/panels/LeftPanel.js
View File

@@ -28,7 +28,7 @@ class LeftPanel {
updateLeftPanel(button) {
if (button.disabled) return false;
// remove the pressed state on other(s) button(s)
$qa("#tools_left *[pressed]").forEach(b => {
$qa("#tools_left *[pressed]").forEach((b) => {
b.pressed = false;
});
// pressed state for the clicked button

47
src/editor/panels/TopPanel.js
View File

@@ -15,7 +15,6 @@ class TopPanel {
*/
constructor(editor) {
this.editor = editor;
this.uiStrings = editor.uiStrings;
}
/**
* @type {module}
@@ -45,7 +44,7 @@ class TopPanel {
setStrokeOpt(opt, changeElem) {
const { id } = opt;
const bits = id.split('_');
const [pre, val] = bits;
const [ pre, val ] = bits;
if (changeElem) {
this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
@@ -138,7 +137,7 @@ class TopPanel {
curhref = curhref.startsWith("data:") ? "" : curhref;
// eslint-disable-next-line no-alert
const url = prompt(
this.editor.uiStrings.notification.enterNewImgURL,
this.editor.i18next.t('notification.enterNewImgURL'),
curhref
);
if (url) {
@@ -152,7 +151,7 @@ class TopPanel {
* @returns {void}
*/
updateContextPanel() {
const setInputWidth = elem => {
const setInputWidth = (elem) => {
const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
elem.style.width = w + 'px';
};
@@ -206,14 +205,14 @@ class TopPanel {
if (!isNode && currentMode !== "pathedit") {
$id("selected_panel").style.display = 'block';
// Elements in this array already have coord fields
if (["line", "circle", "ellipse"].includes(elname)) {
if ([ "line", "circle", "ellipse" ].includes(elname)) {
$id("xy_panel").style.display = 'none';
} else {
let x, y;
// Get BBox vals for g, polyline and path
if (["g", "polyline", "path"].includes(elname)) {
const bb = this.editor.svgCanvas.getStrokedBBox([elem]);
if ([ "g", "polyline", "path" ].includes(elname)) {
const bb = this.editor.svgCanvas.getStrokedBBox([ elem ]);
if (bb) {
({ x, y } = bb);
}
@@ -276,11 +275,11 @@ class TopPanel {
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"],
rect: [ "rx", "width", "height" ],
image: [ "width", "height" ],
circle: [ "cx", "cy", "r" ],
ellipse: [ "cx", "cy", "rx", "ry" ],
line: [ "x1", "y1", "x2", "y2" ],
text: [],
use: []
};
@@ -292,7 +291,7 @@ class TopPanel {
linkHref = this.editor.svgCanvas.getHref(elem);
$id("g_panel").style.display = 'block';
}
// siblings
// siblings
const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
return child !== elem;
});
@@ -313,7 +312,7 @@ class TopPanel {
const curPanel = panels[tagName];
$id(tagName + "_panel").style.display = 'block';
curPanel.forEach(item => {
curPanel.forEach((item) => {
let attrVal = elem.getAttribute(item);
if (this.editor.configObj.curConfig.baseUnit !== "px" && elem[item]) {
const bv = elem[item].baseVal.value;
@@ -352,7 +351,7 @@ class TopPanel {
if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9
setTimeout(() => {
$id("text").focus()
$id("text").focus();
$id("text").select();
}, 100);
}
@@ -406,7 +405,7 @@ class TopPanel {
if ((elem && !isNode) || this.multiselected) {
// update the selected elements' layer
$id("selLayerNames").removeAttribute("disabled")
$id("selLayerNames").removeAttribute("disabled");
$id("selLayerNames").value = currentLayerName;
// Enable regular menu options
@@ -553,12 +552,12 @@ class TopPanel {
attrChanger(e) {
const attr = e.target.getAttribute("data-attr");
let val = e.target.value;
const valid = isValidUnit(attr, val, this.editor.selectedElement);
const valid = isValidUnit(attr, val, this.selectedElement);
if (!valid) {
e.target.value = this.editor.selectedElement().getAttribute(attr);
e.target.value = this.selectedElement.getAttribute(attr);
// eslint-disable-next-line no-alert
alert(this.uiStrings.notification.invalidAttrValGiven);
alert(this.i18next.t('notification.invalidAttrValGiven'));
return false;
}
@@ -587,7 +586,7 @@ class TopPanel {
const elem = this.editor.selectedElement;
this.editor.svgCanvas.clearSelection();
elem.id = val;
this.editor.svgCanvas.addToSelection([elem], true);
this.editor.svgCanvas.addToSelection([ elem ], true);
} else {
this.editor.svgCanvas.changeSelectedAttribute(attr, val);
}
@@ -619,7 +618,7 @@ class TopPanel {
if (!isNullish(this.editor.selectedElement) || this.multiselected) {
// eslint-disable-next-line no-alert
const url = prompt(
this.uiStrings.notification.enterNewLinkURL,
this.i18next.t('notification.enterNewLinkURL'),
"http://"
);
if (url) {
@@ -742,7 +741,7 @@ class TopPanel {
init() {
// add Top panel
const template = document.createElement("template");
const {i18next} = this.editor
const { i18next } = this.editor;
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
<div id="tools_top">
@@ -1040,7 +1039,7 @@ class TopPanel {
"click",
this.clickGroup.bind(this)
);
$id("tool_position").addEventListener("change", evt =>
$id("tool_position").addEventListener("change", (evt) =>
this.clickAlignEle.bind(this)(evt)
);
$id("tool_align_left").addEventListener("click", () =>
@@ -1130,7 +1129,7 @@ class TopPanel {
"image_height",
"path_node_x",
"path_node_y"
].forEach(attrId =>
].forEach((attrId) =>
$id(attrId).addEventListener("change", this.attrChanger.bind(this))
);
}