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

es6 improvements

master
JFH 2022-01-05 10:44:47 -03:00
parent 6bdfcaee1b
commit bfe96cfcef
23 changed files with 55 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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)

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

@ -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]) {
}
/**

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

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;

4
src/svgcanvas/utilities.js
View File

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