From bfe96cfcefef16c764d1ea41bb63cd47ae0f6597 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 10:44:47 -0300 Subject: [PATCH 1/6] es6 improvements --- src/common/units.js | 43 +++---------------- src/editor/ConfigObj.js | 2 +- src/editor/Editor.js | 13 +++--- src/editor/MainMenu.js | 2 +- .../components/jgraduate/jQuery.jGraduate.js | 2 +- src/editor/components/seMenu.js | 13 ------ .../extensions/ext-imagelib/ext-imagelib.js | 4 +- .../extensions/ext-polystar/ext-polystar.js | 4 +- src/editor/panels/TopPanel.js | 2 +- src/svgcanvas/draw.js | 2 +- src/svgcanvas/elem-get-set.js | 7 +-- src/svgcanvas/event.js | 23 +++------- src/svgcanvas/layer.js | 2 +- src/svgcanvas/paste-elem.js | 2 +- src/svgcanvas/path-actions.js | 4 +- src/svgcanvas/path-method.js | 4 +- src/svgcanvas/recalculate.js | 4 +- src/svgcanvas/select.js | 6 +-- src/svgcanvas/svg-exec.js | 2 +- src/svgcanvas/svgcanvas.js | 13 +++--- src/svgcanvas/text-actions.js | 2 +- src/svgcanvas/undo.js | 8 ++-- src/svgcanvas/utilities.js | 4 +- 23 files changed, 55 insertions(+), 113 deletions(-) diff --git a/src/common/units.js b/src/common/units.js index 7c33da82..b7933a3b 100644 --- a/src/common/units.js +++ b/src/common/units.js @@ -98,7 +98,7 @@ export const init = function (elementContainer) { * @function module:units.getTypeMap * @returns {module:units.TypeMap} The unit object with values for each unit */ -export const getTypeMap = function () { +export const getTypeMap = () => { return typeMap_ } @@ -118,7 +118,7 @@ export const getTypeMap = function () { * @returns {Float|string} If a string/number was given, returns a Float. If an array, return a string * with comma-separated floats */ -export const shortFloat = function (val) { +export const shortFloat = (val) => { const digits = elementContainer_.getRoundDigits() if (!isNaN(val)) { return Number(Number(val).toFixed(digits)) @@ -136,7 +136,7 @@ export const shortFloat = function (val) { * @param {"em"|"ex"|"in"|"cm"|"mm"|"pt"|"pc"|"px"|"%"} [unit] * @returns {Float} */ -export const convertUnit = function (val, unit) { +export const convertUnit = (val, unit) => { unit = unit || elementContainer_.getBaseUnit() // baseVal.convertToSpecifiedUnits(unitNumMap[unit]); // const val = baseVal.valueInSpecifiedUnits; @@ -153,38 +153,7 @@ export const convertUnit = function (val, unit) { * @param {string} val - Attribute value to convert * @returns {void} */ -export const setUnitAttr = function (elem, attr, val) { - // if (!isNaN(val)) { - // New value is a number, so check currently used unit - // const oldVal = elem.getAttribute(attr); - - // Enable this for alternate mode - // if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) { - // // Old value was a number, so get unit, then convert - // let unit; - // if (oldVal.substr(-1) === '%') { - // const res = getResolution(); - // unit = '%'; - // val *= 100; - // if (wAttrs.includes(attr)) { - // val = val / res.w; - // } else if (hAttrs.includes(attr)) { - // val = val / res.h; - // } else { - // return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2); - // } - // } else { - // if (elementContainer_.getBaseUnit() !== 'px') { - // unit = elementContainer_.getBaseUnit(); - // } else { - // unit = oldVal.substr(-2); - // } - // val = val / typeMap_[unit]; - // } - // - // val += unit; - // } - // } +export const setUnitAttr = (elem, attr, val) => { elem.setAttribute(attr, val) } @@ -205,7 +174,7 @@ const attrsToConvert = { * @param {Element} element - A DOM element whose attributes should be converted * @returns {void} */ -export const convertAttrs = function (element) { +export const convertAttrs = (element) => { const elName = element.tagName const unit = elementContainer_.getBaseUnit() const attrs = attrsToConvert[elName] @@ -228,7 +197,7 @@ export const convertAttrs = function (element) { * @param {string} val - Attribute value to convert * @returns {Float} The converted number */ -export const convertToNum = function (attr, val) { +export const convertToNum = (attr, val) => { // Return a number if that's what it already is if (!isNaN(val)) { return val - 0 } if (val.substr(-1) === '%') { diff --git a/src/editor/ConfigObj.js b/src/editor/ConfigObj.js index 50889a88..62c373c2 100644 --- a/src/editor/ConfigObj.js +++ b/src/editor/ConfigObj.js @@ -291,7 +291,7 @@ export default class ConfigObj { let { source } = this.urldata if (!source) { // urldata.source may have been null if it ended with '=' const src = searchParams.get('source') - if (src && src.startsWith('data:')) { + if (src?.startsWith('data:')) { source = src } } diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 6cbf16c5..3d0a8265 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -29,7 +29,7 @@ import LayersPanel from './panels/LayersPanel.js' import MainMenu from './MainMenu.js' import { getParentsUntil } from './components/jgraduate/Util.js' -const { $id, $qa, isNullish, decode64, blankPageObjectURL } = SvgCanvas +const { $id, $qa, decode64, blankPageObjectURL } = SvgCanvas /** * @@ -487,8 +487,8 @@ class Editor extends EditorStartup { } const isNode = mode === 'pathedit' // if this.elems[1] is present, then we have more than one element - this.selectedElement = (elems.length === 1 || isNullish(elems[1]) ? elems[0] : null) - this.multiselected = (elems.length >= 2 && !isNullish(elems[1])) + this.selectedElement = (elems.length === 1 || !elems[1] ? elems[0] : null) + this.multiselected = (elems.length >= 2 && elems[1]) if (this.selectedElement && !isNode) { this.topPanel.update() } // if (elem) @@ -520,7 +520,7 @@ class Editor extends EditorStartup { return } - this.multiselected = (elems.length >= 2 && !isNullish(elems[1])) + this.multiselected = (elems.length >= 2 && elems[1]) // Only updating fields for single elements for now if (!this.multiselected) { switch (mode) { @@ -552,7 +552,7 @@ class Editor extends EditorStartup { } elems.forEach((elem) => { - const isSvgElem = (elem && elem.tagName === 'svg') + const isSvgElem = (elem?.tagName === 'svg') if (isSvgElem || this.svgCanvas.isLayer(elem)) { this.layersPanel.populateLayers() // if the element changed was the svg, then it could be a resolution change @@ -561,8 +561,7 @@ class Editor extends EditorStartup { } // Update selectedElement if element is no longer part of the image. // This occurs for the text elements in Firefox - } else if (elem && this.selectedElement && isNullish(this.selectedElement.parentNode)) { - // || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why + } else if (elem && !this.selectedElement?.parentNode) { this.selectedElement = elem } }) diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 7d5173eb..a8e6504a 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -167,7 +167,7 @@ class MainMenu {

${loadingImage}

` - if (typeof URL !== 'undefined' && URL.createObjectURL) { + if (URL?.createObjectURL) { const blob = new Blob([popHTML], { type: 'text/html' }) popURL = URL.createObjectURL(blob) } else { diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js index b100b8de..b2564918 100644 --- a/src/editor/components/jgraduate/jQuery.jGraduate.js +++ b/src/editor/components/jgraduate/jQuery.jGraduate.js @@ -127,7 +127,7 @@ function setAttrs (elem, attrs) { } else { Object.entries(attrs).forEach(([aname, val]) => { const prop = elem[aname] - if (prop && prop.constructor === 'SVGLength') { + if (prop?.constructor === 'SVGLength') { prop.baseVal.value = val } else { elem.setAttribute(aname, val) diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index b51e7bd6..6728a811 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -112,19 +112,6 @@ export class SeMenu extends HTMLElement { set src (value) { this.setAttribute('src', value) } - /** - * @function connectedCallback - * @returns {void} - */ - /* connectedCallback () { - this.$menu.addEventListener('openedchange', (e) => { - e.preventDefault(); - const selectedItem = e?.detail?.closeResult; - if (selectedItem !== undefined && selectedItem?.id !== undefined) { - document.getElementById(selectedItem.id).click(); - } - }); - } */ } // Register diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 6be807d9..93d3be3d 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -269,7 +269,7 @@ export default { curMeta = pending[id] let title if (svgStr) { - if (curMeta && curMeta.name) { + if (curMeta?.name) { title = curMeta.name } else { // Try to find a title @@ -299,7 +299,7 @@ export default { submit.removeAttribute('disabled') } } else { - if (curMeta && curMeta.preview_url) { + if (curMeta?.preview_url) { title = curMeta.name || '' entry = document.createElement('span') const img = document.createElement('img') diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 1d7dcadb..17571d61 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -421,7 +421,7 @@ export default { let i = selElems.length while (i--) { const elem = selElems[i] - if (elem && elem.getAttribute('shape') === 'star') { + if (elem?.getAttribute('shape') === 'star') { if (opts.selectedElement && !opts.multiselected) { $id('starNumPoints').value = elem.getAttribute('point') $id('radialShift').value = elem.getAttribute('radialshift') @@ -429,7 +429,7 @@ export default { } else { showPanel(false, 'star') } - } else if (elem && elem.getAttribute('shape') === 'regularPoly') { + } else if (elem?.getAttribute('shape') === 'regularPoly') { if (opts.selectedElement && !opts.multiselected) { $id('polySides').value = elem.getAttribute('sides') showPanel(true, 'polygon') diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index faa84768..1e3f98df 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -187,7 +187,7 @@ class TopPanel { ? this.editor.configObj.curConfig.baseUnit : null - const isNode = currentMode === 'pathedit' // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false; + const isNode = currentMode === 'pathedit' const menuItems = document.getElementById('se-cmenu_canvas') this.hideTool('selected_panel') this.hideTool('multiselected_panel') diff --git a/src/svgcanvas/draw.js b/src/svgcanvas/draw.js index 997c4963..0faf6d77 100644 --- a/src/svgcanvas/draw.js +++ b/src/svgcanvas/draw.js @@ -482,7 +482,7 @@ export class Drawing { for (let i = 0; i < numchildren; ++i) { const child = this.svgElem_.childNodes.item(i) // for each g, find its layer name - if (child && child.nodeType === 1) { + if (child?.nodeType === 1) { if (child.tagName === 'g') { childgroups = true const name = findLayerNameInGroup(child) diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index 2d237a53..d08f04b8 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -708,7 +708,7 @@ export const setFontFamilyMethod = (val) => { const selectedElements = svgCanvas.getSelectedElements() svgCanvas.setCurText('font_family', val) svgCanvas.changeSelectedAttribute('font-family', val) - if (selectedElements[0] && !selectedElements[0].textContent) { + if (!selectedElements[0]?.textContent) { svgCanvas.textActions.setCursor() } } @@ -750,7 +750,7 @@ export const setFontSizeMethod = (val) => { const selectedElements = svgCanvas.getSelectedElements() svgCanvas.setCurText('font_size', val) svgCanvas.changeSelectedAttribute('font-size', val) - if (selectedElements[0] && !selectedElements[0].textContent) { + if (!selectedElements[0]?.textContent) { svgCanvas.textActions.setCursor() } } @@ -895,9 +895,6 @@ export const setRectRadiusMethod = (val) => { */ export const makeHyperlinkMethod = (url) => { svgCanvas.groupSelectedElements('a', url) - - // TODO: If element is a single "g", convert to "a" - // if (selectedElements.length > 1 && selectedElements[1]) { } /** diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index e0149841..97ef3642 100644 --- a/src/svgcanvas/event.js +++ b/src/svgcanvas/event.js @@ -6,7 +6,7 @@ */ import { assignAttributes, cleanupElement, getElement, getRotationAngle, snapToGrid, walkTree, - isNullish, preventClickDefault, setHref, getBBox + preventClickDefault, setHref, getBBox } from './utilities.js' import { convertAttrs @@ -465,7 +465,7 @@ const mouseMoveEvent = (evt) => { ({ x, y } = xya) } - if (svgCanvas.getRubberBox() && svgCanvas.getRubberBox().getAttribute('display') !== 'none') { + if (svgCanvas.getRubberBox()?.getAttribute('display') !== 'none') { realX *= zoom realY *= zoom assignAttributes(svgCanvas.getRubberBox(), { @@ -482,15 +482,6 @@ const mouseMoveEvent = (evt) => { case 'textedit': { x *= zoom y *= zoom - // if (svgCanvas.getRubberBox() && svgCanvas.getRubberBox().getAttribute('display') !== 'none') { - // assignAttributes(svgCanvas.getRubberBox(), { - // x: Math.min(svgCanvas.getStartX(), x), - // y: Math.min(svgCanvas.getStartY(), y), - // width: Math.abs(x - svgCanvas.getStartX()), - // height: Math.abs(y - svgCanvas.getStartY()) - // }, 100); - // } - svgCanvas.textActions.mouseMove(mouseX, mouseY) break @@ -638,7 +629,7 @@ const mouseUpEvent = (evt) => { // no change in position/size, so maybe we should move to pathedit } else { t = evt.target - if (selectedElements[0].nodeName === 'path' && isNullish(selectedElements[1])) { + if (selectedElements[0].nodeName === 'path' && !selectedElements[1]) { svgCanvas.pathActions.select(selectedElements[0]) // if it was a path // else, if it was selected and this is a shift-click, remove it from selection @@ -832,8 +823,8 @@ const mouseUpEvent = (evt) => { // then go to Select mode. // WebKit returns
when the canvas is clicked, Firefox/Opera return if ((svgCanvas.getCurrentMode() !== 'path' || !svgCanvas.getDrawnPath()) && - t && t.parentNode && - t.parentNode.id !== 'selectorParentGroup' && + t && + t.parentNode?.id !== 'selectorParentGroup' && t.id !== 'svgcanvas' && t.id !== 'svgroot' ) { // switch into "select" mode if we've clicked on an element @@ -1078,7 +1069,7 @@ const mouseDownEvent = (evt) => { break case 'zoom': svgCanvas.setStarted(true) - if (isNullish(svgCanvas.getRubberBox())) { + if (!svgCanvas.getRubberBox()) { svgCanvas.setRubberBox(svgCanvas.selectorManager.getRubberBandBox()) } assignAttributes(svgCanvas.getRubberBox(), { @@ -1299,7 +1290,7 @@ const mouseDownEvent = (evt) => { }, true) extResult.forEach((r) => { - if (r && r.started) { + if (r?.started) { svgCanvas.setStarted(true) } }) diff --git a/src/svgcanvas/layer.js b/src/svgcanvas/layer.js index b9bca7df..fe87fbfb 100644 --- a/src/svgcanvas/layer.js +++ b/src/svgcanvas/layer.js @@ -150,7 +150,7 @@ class Layer { const len = this.group_.childNodes.length for (let i = 0; i < len; ++i) { const child = this.group_.childNodes.item(i) - if (child && child.tagName === 'title') { + if (child?.tagName === 'title') { return child } } diff --git a/src/svgcanvas/paste-elem.js b/src/svgcanvas/paste-elem.js index 8050c61c..cbe1bdf0 100644 --- a/src/svgcanvas/paste-elem.js +++ b/src/svgcanvas/paste-elem.js @@ -51,7 +51,7 @@ export const pasteElementsMethod = function (type, x, y) { * @returns {void} */ function checkIDs (elem) { - if (elem.attr && elem.attr.id) { + if (elem.attr?.id) { changedIDs[elem.attr.id] = svgCanvas.getNextId() elem.attr.id = changedIDs[elem.attr.id] } diff --git a/src/svgcanvas/path-actions.js b/src/svgcanvas/path-actions.js index 6deecbb2..720b7390 100644 --- a/src/svgcanvas/path-actions.js +++ b/src/svgcanvas/path-actions.js @@ -284,7 +284,7 @@ export const pathActionsMethod = (function () { // the control points on both sides if (prevCtlPt) { const newpts = svgCanvas.smoothControlPoints(prevCtlPt, ct1, curpos) - if (newpts && newpts.length === 2) { + if (newpts?.length === 2) { const prevArr = d[d.length - 1].split(',') prevArr[2] = newpts[0].x prevArr[3] = newpts[0].y @@ -736,7 +736,7 @@ export const pathActionsMethod = (function () { if (!evt.shiftKey && !hasMoved) { path.selectPt(lastPt) } - } else if (rubberBox && rubberBox.getAttribute('display') !== 'none') { + } else if (rubberBox?.getAttribute('display') !== 'none') { // Done with multi-node-select rubberBox.setAttribute('display', 'none') diff --git a/src/svgcanvas/path-method.js b/src/svgcanvas/path-method.js index 30890d31..52bc1351 100644 --- a/src/svgcanvas/path-method.js +++ b/src/svgcanvas/path-method.js @@ -464,7 +464,7 @@ export class Segment { this.type === 10 ? ptObjToArrMethod(this.type, item) : curPts ) - if (this.next && this.next.ctrlpts) { + if (this.next?.ctrlpts) { const next = this.next.item const nextPts = [ next.x, next.y, @@ -626,7 +626,7 @@ export class Path { } // Remember that this is a starter seg startI = i - } else if (nextSeg && nextSeg.type === 1) { + } else if (nextSeg?.type === 1) { // This is the last real segment of a closed sub-path // Next is first seg after "M" seg.next = segs[startI + 1] diff --git a/src/svgcanvas/recalculate.js b/src/svgcanvas/recalculate.js index 08fef8a0..57283e8c 100644 --- a/src/svgcanvas/recalculate.js +++ b/src/svgcanvas/recalculate.js @@ -77,7 +77,7 @@ export const recalculateDimensions = (selected) => { const dataStorage = svgCanvas.getDataStorage() const tlist = selected.transform?.baseVal // remove any unnecessary transforms - if (tlist && tlist.numberOfItems > 0) { + if (tlist?.numberOfItems > 0) { let k = tlist.numberOfItems const noi = k while (k--) { @@ -608,7 +608,7 @@ export const recalculateDimensions = (selected) => { // adjust it by recalculating the matrix transform. const fill = selected.getAttribute('fill') - if (fill && fill.startsWith('url(')) { + if (fill?.startsWith('url(')) { const paint = getRefElem(fill) if (paint) { let type = 'pattern' diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js index ec455f3f..8b7f478b 100644 --- a/src/svgcanvas/select.js +++ b/src/svgcanvas/select.js @@ -298,7 +298,7 @@ export class SelectorManager { initGroup () { const dataStorage = svgCanvas.getDataStorage() // remove old selector parent group if it existed - if (this.selectorParentGroup && this.selectorParentGroup.parentNode) { + if (this.selectorParentGroup?.parentNode) { this.selectorParentGroup.remove() } @@ -418,7 +418,7 @@ export class SelectorManager { return this.selectorMap[elem.id] } for (let i = 0; i < N; ++i) { - if (this.selectors[i] && !this.selectors[i].locked) { + if (!this.selectors[i]?.locked) { this.selectors[i].locked = true this.selectors[i].reset(elem, bbox) this.selectorMap[elem.id] = this.selectors[i] @@ -442,7 +442,7 @@ export class SelectorManager { if (!elem) { return } const N = this.selectors.length const sel = this.selectorMap[elem.id] - if (sel && !sel.locked) { + if (!sel?.locked) { // TODO(codedread): Ensure this exists in this module. console.warn('WARNING! selector was released but was already unlocked') } diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js index 04a57469..8901d5bf 100644 --- a/src/svgcanvas/svg-exec.js +++ b/src/svgcanvas/svg-exec.js @@ -1088,7 +1088,7 @@ export const convertGradientsMethod = function (elem) { // If has transform, convert const tlist = grad.gradientTransform.baseVal - if (tlist && tlist.numberOfItems > 0) { + if (tlist?.numberOfItems > 0) { const m = transformListToTransform(tlist).matrix const pt1 = transformPoint(gCoords.x1, gCoords.y1, m) const pt2 = transformPoint(gCoords.x2, gCoords.y2, m) diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index d9fc81d5..599814ca 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -44,7 +44,7 @@ import { findDefs, getHref, setHref, getRefElem, getRotationAngle, getBBoxOfElementAsPath, convertToPath, encode64, decode64, getVisibleElements, init as utilsInit, - getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish, blankPageObjectURL, + getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, blankPageObjectURL, $id, $qa, $qq, getFeGaussianBlur, stringToHTML, insertChildAtIndex } from './utilities.js' import { @@ -191,9 +191,9 @@ class SvgCanvas { allProperties.text = SvgCanvas.mergeDeep({}, allProperties.shape) allProperties.text = SvgCanvas.mergeDeep(allProperties.text, { fill: '#000000', - stroke_width: this.curConfig.text && this.curConfig.text.stroke_width, - font_size: this.curConfig.text && this.curConfig.text.font_size, - font_family: this.curConfig.text && this.curConfig.text.font_family + stroke_width: this.curConfig.text?.stroke_width, + font_size: this.curConfig.text?.font_size, + font_family: this.curConfig.text?.font_family }) this.curText = allProperties.text // Current text style properties @@ -450,7 +450,7 @@ class SvgCanvas { setMode (name) { this.pathActions.clear(true) this.textActions.clear() - this.curProperties = (this.selectedElements[0] && this.selectedElements[0].nodeName === 'text') ? this.curText : this.curShape + this.curProperties = (this.selectedElements[0]?.nodeName === 'text') ? this.curText : this.curShape this.currentMode = name } @@ -512,7 +512,7 @@ class SvgCanvas { attrs[item] = elem.getAttribute(item) }) Object.values(attrs).forEach((val) => { - if (val && val.startsWith('url(')) { + if (val?.startsWith('url(')) { const id = getUrlFromAttr(val).substr(1) const ref = getElement(id) if (!ref) { @@ -955,7 +955,6 @@ class SvgCanvas { SvgCanvas.$id = $id SvgCanvas.$qq = $qq SvgCanvas.$qa = $qa -SvgCanvas.isNullish = isNullish SvgCanvas.encode64 = encode64 SvgCanvas.decode64 = decode64 SvgCanvas.mergeDeep = mergeDeep diff --git a/src/svgcanvas/text-actions.js b/src/svgcanvas/text-actions.js index 0f017c06..3c9dd2c0 100644 --- a/src/svgcanvas/text-actions.js +++ b/src/svgcanvas/text-actions.js @@ -426,7 +426,7 @@ export const textActionsMethod = (function () { svgCanvas.call('selected', [curtext]) svgCanvas.addToSelection([curtext], true) } - if (curtext && !curtext.textContent.length) { + if (!curtext?.textContent.length) { // No content, so delete svgCanvas.deleteSelectedElements() } diff --git a/src/svgcanvas/undo.js b/src/svgcanvas/undo.js index d7529d34..a7d68a96 100644 --- a/src/svgcanvas/undo.js +++ b/src/svgcanvas/undo.js @@ -7,7 +7,7 @@ import * as draw from './draw.js' import * as hstry from './history.js' import { - getRotationAngle, getBBox as utilsGetBBox, isNullish, setHref, getStrokedBBoxDefaultVisible + getRotationAngle, getBBox as utilsGetBBox, setHref, getStrokedBBoxDefaultVisible } from './utilities.js' import { isGecko @@ -67,7 +67,7 @@ export const getUndoManager = () => { } else if (!isApply) { svgCanvas.restoreRefElements(cmd.elem) } - if (cmd.elem && cmd.elem.tagName === 'use') { + if (cmd.elem?.tagName === 'use') { svgCanvas.setUseData(cmd.elem) } } else if (cmdType === 'ChangeElementCommand') { @@ -149,7 +149,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele while (i--) { let elem = elems[i] - if (isNullish(elem)) { continue } + if (!elem) { continue } // Set x,y vals on elements that don't have them if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) { @@ -164,7 +164,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele // TODO: Missing statement body // if (elem.tagName === 'g' && goodGAttrs.includes(attr)) {} let oldval = attr === '#text' ? elem.textContent : elem.getAttribute(attr) - if (isNullish(oldval)) { oldval = '' } + if (!oldval) { oldval = '' } if (oldval !== String(newValue)) { if (attr === '#text') { // const oldW = utilsGetBBox(elem).width; diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index 3db8461b..bb8a2972 100644 --- a/src/svgcanvas/utilities.js +++ b/src/svgcanvas/utilities.js @@ -287,7 +287,7 @@ export const bboxToObj = function ({ x, y, width, height }) { * @returns {void} */ export const walkTree = function (elem, cbFn) { - if (elem && elem.nodeType === 1) { + if (elem?.nodeType === 1) { cbFn(elem) let i = elem.childNodes.length while (i--) { @@ -1061,7 +1061,7 @@ export const assignAttributes = function (elem, attrs, suspendLength, unitCheck) const ns = (key.substr(0, 4) === 'xml:' ? NS.XML : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null) - if (isNullish(value)) { + if (!value) { if (ns) { elem.removeAttributeNS(ns, key) } else { From f98456a21a07dc43e0d7549f2213ffd45ec874ef Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 15:19:08 -0300 Subject: [PATCH 2/6] Update scenario.js.snap --- .../ui/__snapshots__/scenario.js.snap | 28 ++++++++----------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap index db0a2bd4..b7ad5916 100644 --- a/cypress/integration/ui/__snapshots__/scenario.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario.js.snap @@ -44,7 +44,6 @@ exports[`use various parts of svg-edit > check tool_text #0`] = ` font-size="24" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -73,7 +72,6 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = ` font-size="24" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -87,7 +85,6 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = ` font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" x="66" xml:space="preserve" @@ -117,7 +114,6 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = ` font-style="italic" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -131,7 +127,6 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = ` font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="66" @@ -163,7 +158,6 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = ` font-weight="bold" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -177,7 +171,6 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = ` font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="66" @@ -209,7 +202,6 @@ exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate # font-weight="bold" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -224,7 +216,6 @@ exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate # font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" x="91" xml:space="preserve" @@ -255,7 +246,6 @@ exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = font-weight="bold" id="svg_1" stroke="#000000" - stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -269,7 +259,6 @@ exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -301,6 +290,7 @@ exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0` font-weight="bold" id="svg_1" stroke="#000000" + stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -314,7 +304,6 @@ exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0` font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -346,6 +335,7 @@ exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -359,7 +349,6 @@ exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -391,6 +380,7 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -405,7 +395,6 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="rotate(25 91 72)" x="91" @@ -437,6 +426,7 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -452,7 +442,6 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` font-size="24" id="svg_2" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="rotate(25 91 72)" x="91" @@ -489,6 +478,7 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -505,7 +495,6 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` id="svg_2" opacity="0.5" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="rotate(25 91 72)" x="91" @@ -542,6 +531,7 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -558,7 +548,6 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` id="svg_2" opacity="0.5" stroke="#000000" - stroke-width="0" text-anchor="middle" transform="rotate(25 91 72)" x="91" @@ -595,6 +584,7 @@ exports[`use various parts of svg-edit > check tool_text_delete #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -626,6 +616,7 @@ exports[`use various parts of svg-edit > check tool_text_change_font_family #0`] font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -656,6 +647,7 @@ exports[`use various parts of svg-edit > check tool_text_decoration_underline #0 font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" text-decoration="underline" x="46" @@ -687,6 +679,7 @@ exports[`use various parts of svg-edit > check tool_text_decoration_linethrough font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" text-decoration="underline line-through" x="46" @@ -718,6 +711,7 @@ exports[`use various parts of svg-edit > check tool_text_decoration_overline #0` font-weight="bold" id="svg_1" stroke="#0000bf" + stroke-width="2" text-anchor="middle" text-decoration="underline line-through overline" x="46" From 958832de9c0d8483cb17cf8ede5cba8271a90559 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 15:34:48 -0300 Subject: [PATCH 3/6] fix lgtm warning --- src/svgcanvas/elem-get-set.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index d08f04b8..2c7d57ab 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -762,7 +762,6 @@ export const setFontSizeMethod = (val) => { export const getTextMethod = () => { const selectedElements = svgCanvas.getSelectedElements() const selected = selectedElements[0] - if (!selected) { return '' } return (selected) ? selected.textContent : '' } From 1049fd7146d38dbc2c22659a69d1b1132d6ffb88 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 18:00:02 -0300 Subject: [PATCH 4/6] fix a test case issue --- cypress/integration/unit/utilities-bbox.js | 5 +- src/svgcanvas/coords.js | 2 +- src/svgcanvas/elem-get-set.js | 18 +++---- src/svgcanvas/utilities.js | 55 +++++++++++----------- 4 files changed, 38 insertions(+), 42 deletions(-) diff --git a/cypress/integration/unit/utilities-bbox.js b/cypress/integration/unit/utilities-bbox.js index 9e475390..b76310c3 100644 --- a/cypress/integration/unit/utilities-bbox.js +++ b/cypress/integration/unit/utilities-bbox.js @@ -476,10 +476,7 @@ describe('utilities bbox', function () { * @param {module:math.XYObject} origin * @returns {module:math.XYObject} */ - function rotatePoint (point, angle, origin) { - if (!origin) { - origin = { x: 0, y: 0 } - } + function rotatePoint (point, angle, origin = { x: 0, y: 0 }) { const x = point.x - origin.x const y = point.y - origin.y const theta = radians(angle) diff --git a/src/svgcanvas/coords.js b/src/svgcanvas/coords.js index c86bd6d3..496669fb 100644 --- a/src/svgcanvas/coords.js +++ b/src/svgcanvas/coords.js @@ -45,7 +45,7 @@ export const init = (canvas) => { * @name module:coords.remapElement * @type {module:path.EditorContext#remapElement} */ -export const remapElement = function (selected, changes, m) { +export const remapElement = (selected, changes, m) => { const remap = (x, y) => transformPoint(x, y, m) const scalew = (w) => m.a * w const scaleh = (h) => m.d * h diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index 2c7d57ab..28a9a7ce 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -91,7 +91,7 @@ export const setGroupTitleMethod = (val) => { const batchCmd = new BatchCommand('Set Label') let title - if (!val.length) { + if (val.length === 0) { // Remove title element const tsNextSibling = ts.nextSibling batchCmd.addSubCommand(new RemoveElementCommand(ts[0], tsNextSibling, elem)) @@ -175,7 +175,7 @@ export const setResolutionMethod = (x, y) => { const visEls = getVisibleElements() svgCanvas.addToSelection(visEls) const dx = []; const dy = [] - visEls.forEach(function (_item, _i) { + visEls.forEach((_item, _i) => { dx.push(bbox.x * -1) dy.push(bbox.y * -1) }) @@ -245,7 +245,7 @@ export const setBBoxZoomMethod = (val, editorW, editorH) => { const selectedElements = svgCanvas.getSelectedElements() let spacer = 0.85 let bb - const calcZoom = function (bb) { + const calcZoom = (bb) => { if (!bb) { return false } const wZoom = Math.round((editorW / bb.width) * 100 * spacer) / 100 const hZoom = Math.round((editorH / bb.height) * 100 * spacer) / 100 @@ -267,7 +267,7 @@ export const setBBoxZoomMethod = (val, editorW, editorH) => { switch (val) { case 'selection': { if (!selectedElements[0]) { return undefined } - const selectedElems = selectedElements.map(function (n, _) { + const selectedElems = selectedElements.map((n, _) => { if (n) { return n } @@ -304,7 +304,7 @@ export const setZoomMethod = (zoomLevel) => { const res = svgCanvas.getResolution() svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel) svgCanvas.setZoom(zoomLevel) - selectedElements.forEach(function (elem) { + selectedElements.forEach((elem) => { if (!elem) { return } svgCanvas.selectorManager.requestSelector(elem).resize() }) @@ -321,7 +321,7 @@ export const setZoomMethod = (zoomLevel) => { * @fires module:elem-get-set.SvgCanvas#event:changed * @returns {void} */ -export const setColorMethod = function (type, val, preventUndo) { +export const setColorMethod = (type, val, preventUndo) => { const selectedElements = svgCanvas.getSelectedElements() svgCanvas.setCurShape(type, val) svgCanvas.setCurProperties(type + '_paint', { type: 'solidColor' }) @@ -426,7 +426,7 @@ export const findDuplicateGradient = (grad) => { } let diff = false - radAttrs.forEach(function (attr) { + radAttrs.forEach((attr) => { if (gradAttrs[attr] !== ogAttrs[attr]) { diff = true } }) @@ -548,7 +548,7 @@ export const setStrokeAttrMethod = (attr, val) => { const elem = selectedElements[i] if (elem) { if (elem.tagName === 'g') { - walkTree(elem, function (e) { if (e.nodeName !== 'g') { elems.push(e) } }) + walkTree(elem, (e) => { if (e.nodeName !== 'g') { elems.push(e) } }) } else { elems.push(elem) } @@ -914,7 +914,7 @@ export const removeHyperlinkMethod = () => { * @param {Integer} newType - New segment type. See {@link https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg} for list * @returns {void} */ -export const setSegTypeMethod = function (newType) { +export const setSegTypeMethod = (newType) => { svgCanvas.pathActions.setSegType(newType) } diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index bb8a2972..b8e90261 100644 --- a/src/svgcanvas/utilities.js +++ b/src/svgcanvas/utilities.js @@ -104,7 +104,7 @@ export const dropXMLInternalSubset = (str) => { * @param {string} str - The string to be converted * @returns {string} The converted string */ -export const toXml = function (str) { +export const toXml = (str) => { // ' is ok in XML, but not HTML // > does not normally need escaping, though it can if within a CDATA expression (and preceded by "]]") return str @@ -159,7 +159,7 @@ export function decodeUTF8 (argString) { * @param {string} argString * @returns {string} */ -export const encodeUTF8 = function (argString) { +export const encodeUTF8 = (argString) => { return unescape(encodeURIComponent(argString)) } @@ -169,7 +169,7 @@ export const encodeUTF8 = function (argString) { * @param {string} dataurl * @returns {string} object URL or empty string */ -export const dataURLToObjectURL = function (dataurl) { +export const dataURLToObjectURL = (dataurl) => { if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) { return '' } @@ -196,7 +196,7 @@ export const dataURLToObjectURL = function (dataurl) { * @param {Blob} blob A Blob object or File object * @returns {string} object URL or empty string */ -export const createObjectURL = function (blob) { +export const createObjectURL = (blob) => { if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) { return '' } @@ -206,7 +206,7 @@ export const createObjectURL = function (blob) { /** * @property {string} blankPageObjectURL */ -export const blankPageObjectURL = (function () { +export const blankPageObjectURL = (() => { if (typeof Blob === 'undefined') { return '' } @@ -220,7 +220,7 @@ export const blankPageObjectURL = (function () { * @param {string} input * @returns {string} Decimal numeric character references */ -export const convertToXMLReferences = function (input) { +export const convertToXMLReferences = (input) => { let output = ''; [...input].forEach((ch) => { const c = ch.charCodeAt() @@ -237,7 +237,7 @@ export const convertToXMLReferences = function (input) { * @throws {Error} * @returns {XMLDocument} */ -export const text2xml = function (sXML) { +export const text2xml = (sXML) => { if (sXML.includes(' { return { x, y, width, height } } @@ -286,7 +286,7 @@ export const bboxToObj = function ({ x, y, width, height }) { * @param {module:utilities.TreeWalker} cbFn - Callback function to run on each element * @returns {void} */ -export const walkTree = function (elem, cbFn) { +export const walkTree = (elem, cbFn) => { if (elem?.nodeType === 1) { cbFn(elem) let i = elem.childNodes.length @@ -304,8 +304,8 @@ export const walkTree = function (elem, cbFn) { * @param {module:utilities.TreeWalker} cbFn - Callback function to run on each element * @returns {void} */ -export const walkTreePost = function (elem, cbFn) { - if (elem && elem.nodeType === 1) { +export const walkTreePost = (elem, cbFn) => { + if (elem?.nodeType === 1) { let i = elem.childNodes.length while (i--) { walkTree(elem.childNodes.item(i), cbFn) @@ -862,7 +862,7 @@ export const getBBoxWithTransform = function (elem, addSVGElementsFromJson, path * @todo This is problematic with large stroke-width and, for example, a single * horizontal line. The calculated BBox extends way beyond left and right sides. */ -function getStrokeOffsetForBBox (elem) { +const getStrokeOffsetForBBox = (elem) => { const sw = elem.getAttribute('stroke-width') return (!isNaN(sw) && elem.getAttribute('stroke') !== 'none') ? sw / 2 : 0 } @@ -883,11 +883,11 @@ function getStrokeOffsetForBBox (elem) { * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object */ -export const getStrokedBBox = function (elems, addSVGElementsFromJson, pathActions) { +export const getStrokedBBox = (elems, addSVGElementsFromJson, pathActions) => { if (!elems || !elems.length) { return false } let fullBb - elems.forEach(function (elem) { + elems.forEach((elem) => { if (fullBb) { return } if (!elem.parentNode) { return } fullBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions) @@ -912,7 +912,7 @@ export const getStrokedBBox = function (elems, addSVGElementsFromJson, pathActio maxX += offset maxY += offset } else { - elems.forEach(function (elem) { + elems.forEach((elem) => { const curBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions) if (curBb) { const offset = getStrokeOffsetForBBox(elem) @@ -942,7 +942,7 @@ export const getStrokedBBox = function (elems, addSVGElementsFromJson, pathActio * @param {Element} parentElement - The parent DOM element to search within * @returns {Element[]} All "visible" elements. */ -export const getVisibleElements = function (parentElement) { +export const getVisibleElements = (parentElement) => { if (!parentElement) { const svgContent = svgCanvas.getSvgContent() parentElement = svgContent.children[0] // Prevent layers from being included @@ -965,7 +965,7 @@ export const getVisibleElements = function (parentElement) { * @param {Element[]} elems - Array with DOM elements to check * @returns {module:utilities.BBoxObject} A single bounding box object */ -export const getStrokedBBoxDefaultVisible = function (elems) { +export const getStrokedBBoxDefaultVisible = (elems) => { if (!elems) { elems = getVisibleElements() } return getStrokedBBox( elems, @@ -999,7 +999,7 @@ export const getRotationAngleFromTransformList = (tlist, toRad) => { * @param {boolean} [toRad=false] - When true returns the value in radians rather than degrees * @returns {Float} The angle in degrees or radians */ -export let getRotationAngle = function (elem, toRad) { +export let getRotationAngle = (elem, toRad) => { const selected = elem || svgCanvas.getSelectedElements()[0] // find the rotation transform (if any) and set it const tlist = selected.transform?.baseVal @@ -1012,7 +1012,7 @@ export let getRotationAngle = function (elem, toRad) { * @param {string} attrVal - The attribute value as a string * @returns {Element} Reference element */ -export const getRefElem = function (attrVal) { +export const getRefElem = (attrVal) => { return getElement(getUrlFromAttr(attrVal).substr(1)) } /** @@ -1021,7 +1021,7 @@ export const getRefElem = function (attrVal) { * @param {any} Element * @returns {any} Reference element */ -export const getFeGaussianBlur = function (ele) { +export const getFeGaussianBlur = (ele) => { if (ele?.firstChild?.tagName === 'feGaussianBlur') { return ele.firstChild } else { @@ -1056,12 +1056,12 @@ export const getElement = (id) => { * @param {boolean} [unitCheck=false] - Boolean to indicate the need to use units.setUnitAttr * @returns {void} */ -export const assignAttributes = function (elem, attrs, suspendLength, unitCheck) { +export const assignAttributes = (elem, attrs, suspendLength, unitCheck) => { for (const [key, value] of Object.entries(attrs)) { const ns = (key.substr(0, 4) === 'xml:' ? NS.XML : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null) - if (!value) { + if (value === undefined) { if (ns) { elem.removeAttributeNS(ns, key) } else { @@ -1085,7 +1085,7 @@ export const assignAttributes = function (elem, attrs, suspendLength, unitCheck) * @param {Element} element - DOM element to clean up * @returns {void} */ -export const cleanupElement = function (element) { +export const cleanupElement = (element) => { const defaults = { 'fill-opacity': 1, 'stop-opacity': 1, @@ -1119,7 +1119,7 @@ export const cleanupElement = function (element) { * @param {Float} value * @returns {Integer} */ -export const snapToGrid = function (value) { +export const snapToGrid = (value) => { const unit = svgCanvas.getBaseUnit() let stepSize = svgCanvas.getSnappingStep() if (unit !== 'px') { @@ -1135,8 +1135,8 @@ export const snapToGrid = function (value) { * @param {Element} img - The DOM element to prevent the click on * @returns {void} */ -export const preventClickDefault = function (img) { - img.addEventListener('click', function (e) { +export const preventClickDefault = (img) => { + img.addEventListener('click', (e) => { e.preventDefault() }) } @@ -1178,9 +1178,8 @@ export const stringToHTML = (str) => { return doc.body.firstChild } -export const insertChildAtIndex = function (parent, child, index) { +export const insertChildAtIndex = (parent, child, index = 0) => { const doc = stringToHTML(child) - if (!index) index = 0 if (index >= parent.children.length) { parent.appendChild(doc) } else { From db11629d52e0de52d0d40cf1ec7a8b2e4e806145 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 18:17:05 -0300 Subject: [PATCH 5/6] Update scenario.js.snap --- cypress/integration/ui/__snapshots__/scenario.js.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap index b7ad5916..c6f15fb9 100644 --- a/cypress/integration/ui/__snapshots__/scenario.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario.js.snap @@ -396,7 +396,7 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = id="svg_2" stroke="#000000" text-anchor="middle" - transform="rotate(25 91 72)" + transform="rotate(25 91 72.25)" x="91" xml:space="preserve" y="80" @@ -443,7 +443,7 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` id="svg_2" stroke="#000000" text-anchor="middle" - transform="rotate(25 91 72)" + transform="rotate(25 91 72.25)" x="91" xml:space="preserve" y="80" @@ -496,7 +496,7 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` opacity="0.5" stroke="#000000" text-anchor="middle" - transform="rotate(25 91 72)" + transform="rotate(25 91 72.25)" x="91" xml:space="preserve" y="80" @@ -549,7 +549,7 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` opacity="0.5" stroke="#000000" text-anchor="middle" - transform="rotate(25 91 72)" + transform="rotate(25 91 72.25)" x="91" xml:space="preserve" y="80" From fb3aa920429a0bc190186e97472f2a8ca2bbc155 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 18:55:10 -0300 Subject: [PATCH 6/6] remove unused jquery.attr.js --- .../ui/__snapshots__/scenario.js.snap | 36 +++++---- src/svgcanvas/coords.js | 2 +- src/svgcanvas/jQuery.attr.js | 79 ------------------- 3 files changed, 22 insertions(+), 95 deletions(-) delete mode 100644 src/svgcanvas/jQuery.attr.js diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap index c6f15fb9..db0a2bd4 100644 --- a/cypress/integration/ui/__snapshots__/scenario.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario.js.snap @@ -44,6 +44,7 @@ exports[`use various parts of svg-edit > check tool_text #0`] = ` font-size="24" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -72,6 +73,7 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = ` font-size="24" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -85,6 +87,7 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = ` font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" x="66" xml:space="preserve" @@ -114,6 +117,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = ` font-style="italic" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -127,6 +131,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = ` font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="66" @@ -158,6 +163,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = ` font-weight="bold" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -171,6 +177,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = ` font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="66" @@ -202,6 +209,7 @@ exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate # font-weight="bold" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -216,6 +224,7 @@ exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate # font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" x="91" xml:space="preserve" @@ -246,6 +255,7 @@ exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = font-weight="bold" id="svg_1" stroke="#000000" + stroke-width="0" text-anchor="middle" x="46" xml:space="preserve" @@ -259,6 +269,7 @@ exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -290,7 +301,6 @@ exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0` font-weight="bold" id="svg_1" stroke="#000000" - stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -304,6 +314,7 @@ exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0` font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -335,7 +346,6 @@ exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -349,6 +359,7 @@ exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="91" @@ -380,7 +391,6 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -395,8 +405,9 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" - transform="rotate(25 91 72.25)" + transform="rotate(25 91 72)" x="91" xml:space="preserve" y="80" @@ -426,7 +437,6 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -442,8 +452,9 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` font-size="24" id="svg_2" stroke="#000000" + stroke-width="0" text-anchor="middle" - transform="rotate(25 91 72.25)" + transform="rotate(25 91 72)" x="91" xml:space="preserve" y="80" @@ -478,7 +489,6 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -495,8 +505,9 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` id="svg_2" opacity="0.5" stroke="#000000" + stroke-width="0" text-anchor="middle" - transform="rotate(25 91 72.25)" + transform="rotate(25 91 72)" x="91" xml:space="preserve" y="80" @@ -531,7 +542,6 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -548,8 +558,9 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` id="svg_2" opacity="0.5" stroke="#000000" + stroke-width="0" text-anchor="middle" - transform="rotate(25 91 72.25)" + transform="rotate(25 91 72)" x="91" xml:space="preserve" y="80" @@ -584,7 +595,6 @@ exports[`use various parts of svg-edit > check tool_text_delete #0`] = ` font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" transform="matrix(1 0 0 1 0 0)" x="46" @@ -616,7 +626,6 @@ exports[`use various parts of svg-edit > check tool_text_change_font_family #0`] font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" x="46" xml:space="preserve" @@ -647,7 +656,6 @@ exports[`use various parts of svg-edit > check tool_text_decoration_underline #0 font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" text-decoration="underline" x="46" @@ -679,7 +687,6 @@ exports[`use various parts of svg-edit > check tool_text_decoration_linethrough font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" text-decoration="underline line-through" x="46" @@ -711,7 +718,6 @@ exports[`use various parts of svg-edit > check tool_text_decoration_overline #0` font-weight="bold" id="svg_1" stroke="#0000bf" - stroke-width="2" text-anchor="middle" text-decoration="underline line-through overline" x="46" diff --git a/src/svgcanvas/coords.js b/src/svgcanvas/coords.js index 496669fb..1b984514 100644 --- a/src/svgcanvas/coords.js +++ b/src/svgcanvas/coords.js @@ -62,7 +62,7 @@ export const remapElement = (selected, changes, m) => { ['fill', 'stroke'].forEach((type) => { const attrVal = selected.getAttribute(type) - if (attrVal && attrVal.startsWith('url(') && (m.a < 0 || m.d < 0)) { + if (attrVal?.startsWith('url(') && (m.a < 0 || m.d < 0)) { const grad = getRefElem(attrVal) const newgrad = grad.cloneNode(true) if (m.a < 0) { diff --git a/src/svgcanvas/jQuery.attr.js b/src/svgcanvas/jQuery.attr.js deleted file mode 100644 index 2383dc92..00000000 --- a/src/svgcanvas/jQuery.attr.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * A jQuery module to work with SVG attributes. - * @module jQueryAttr - * @license MIT - */ - -/** -* This fixes `$(...).attr()` to work as expected with SVG elements. -* Does not currently use `*AttributeNS()` since we rarely need that. -* Adds {@link external:jQuery.fn.attr}. -* See {@link https://api.jquery.com/attr/} for basic documentation of `.attr()`. -* -* Additional functionality: -* - When getting attributes, a string that's a number is returned as type number. -* - If an array is supplied as the first parameter, multiple values are returned -* as an object with values for each given attribute. -* @function module:jQueryAttr.jQueryAttr -* @param {external:jQuery} $ The jQuery object to which to add the plug-in -* @returns {external:jQuery} -*/ -export default function jQueryPluginSVG ($) { - const proxied = $.fn.attr - const svgns = 'http://www.w3.org/2000/svg' - /** - * @typedef {PlainObject} module:jQueryAttr.Attributes - */ - /** - * @function external:jQuery.fn.attr - * @param {string|string[]|PlainObject} key - * @param {string} value - * @returns {external:jQuery|module:jQueryAttr.Attributes} - */ - $.fn.attr = function (key, value) { - const len = this.length - if (!len) { return proxied.call(this, key, value) } - for (let i = 0; i < len; ++i) { - const elem = this[i] - // set/get SVG attribute - if (elem.namespaceURI === svgns) { - // Setting attribute - if (value !== undefined) { - elem.setAttribute(key, value) - } else if (Array.isArray(key)) { - // Getting attributes from array - const obj = {} - let j = key.length - - while (j--) { - const aname = key[j] - let attr = elem.getAttribute(aname) - // This returns a number when appropriate - if (attr || attr === '0') { - attr = isNaN(attr) ? attr : (attr - 0) - } - obj[aname] = attr - } - return obj - } - if (typeof key === 'object') { - // Setting attributes from object - for (const [name, val] of Object.entries(key)) { - elem.setAttribute(name, val) - } - // Getting attribute - } else { - let attr = elem.getAttribute(key) - if (attr || attr === '0') { - attr = isNaN(attr) ? attr : (attr - 0) - } - return attr - } - } else { - return proxied.call(this, key, value) - } - } - return this - } - return $ -}