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

Merge pull request #696 from SVG-Edit/more-es6 

More es6
master
JFH 2022-01-05 19:39:39 -03:00 committed by GitHub
parent 6bdfcaee1b fb3aa92042
commit 4d79e27f8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 93 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/integration/unit/utilities-bbox.js
View File

@ -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)

43
src/common/units.js
View File

@ -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) === '%') {

2
src/editor/ConfigObj.js
View File

@ -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
}
}

13
src/editor/Editor.js
View File

@ -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
}
})

2
src/editor/MainMenu.js
View File

@ -167,7 +167,7 @@ class MainMenu {
</head>
<body><h1>${loadingImage}</h1></body>
<html>`
if (typeof URL !== 'undefined' && URL.createObjectURL) {
if (URL?.createObjectURL) {
const blob = new Blob([popHTML], { type: 'text/html' })
popURL = URL.createObjectURL(blob)
} else {

2
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@ -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)

13
src/editor/components/seMenu.js
View File

@ -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

4
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -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')

4
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -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')

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

@ -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')

4
src/svgcanvas/coords.js
View File

@ -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
@ -62,7 +62,7 @@ export const remapElement = function (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) {

2
src/svgcanvas/draw.js
View File

@ -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)

26
src/svgcanvas/elem-get-set.js
View File

@ -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)
}
@ -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()
}
}
@ -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 : ''
}
@ -895,9 +894,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]) {
}
/**
@ -918,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)
}

23
src/svgcanvas/event.js
View File

@ -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 <div> when the canvas is clicked, Firefox/Opera return <svg>
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)
}
})

79
src/svgcanvas/jQuery.attr.js
View File

@ -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<string, string|Float>} module:jQueryAttr.Attributes
*/
/**
* @function external:jQuery.fn.attr
* @param {string|string[]|PlainObject<string, string>} 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 $
}

2
src/svgcanvas/layer.js
View File

@ -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
}
}

2
src/svgcanvas/paste-elem.js
View File

@ -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]
}

4
src/svgcanvas/path-actions.js
View File

@ -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')

4
src/svgcanvas/path-method.js
View File

@ -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]

4
src/svgcanvas/recalculate.js
View File

@ -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'

6
src/svgcanvas/select.js
View File

@ -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')
}

2
src/svgcanvas/svg-exec.js
View File

@ -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)

13
src/svgcanvas/svgcanvas.js
View File

@ -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

2
src/svgcanvas/text-actions.js
View File

@ -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()
}

8
src/svgcanvas/undo.js
View File

@ -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;

57
src/svgcanvas/utilities.js
View File

@ -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) => {
// &apos; is ok in XML, but not HTML
// &gt; 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('<svg:svg')) {
sXML = sXML.replace(/<(\/?)svg:/g, '<$1').replace('xmlns:svg', 'xmlns')
}
@ -269,7 +269,7 @@ export const text2xml = function (sXML) {
* @param {SVGRect} bbox - a SVGRect
* @returns {module:utilities.BBoxObject} An object with properties names x, y, width, height.
*/
export const bboxToObj = function ({ x, y, width, height }) {
export const bboxToObj = ({ x, y, width, height }) => {
return { x, y, width, height }
}
@ -286,8 +286,8 @@ 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) {
if (elem && elem.nodeType === 1) {
export const walkTree = (elem, cbFn) => {
if (elem?.nodeType === 1) {
cbFn(elem)
let i = elem.childNodes.length
while (i--) {
@ -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 (isNullish(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 {