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

Refactor2 (#712)

Browse Source 
* review svg-exec

* review selection.js elemgetset and selectedelems

* Update svgcanvas.js
This commit is contained in:
JFH
2022-01-22 21:25:49 +01:00
committed by GitHub
parent 18f14755b3
commit 77646cd14e
5 changed files with 1680 additions and 927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,13 +24,53 @@ let svgCanvas = null
*/ */
export const init = (canvas) => { export const init = (canvas) => {
svgCanvas = canvas svgCanvas = canvas
svgCanvas.getBold = getBoldMethod // Check whether selected element is bold or not.
svgCanvas.setBold = setBoldMethod // Make the selected element bold or normal.
svgCanvas.getItalic = getItalicMethod // Check whether selected element is in italics or not.
svgCanvas.setItalic = setItalicMethod // Make the selected element italic or normal.
svgCanvas.hasTextDecoration = hasTextDecorationMethod // Check whether the selected element has the given text decoration or not.
svgCanvas.addTextDecoration = addTextDecorationMethod // Adds the given value to the text decoration
svgCanvas.removeTextDecoration = removeTextDecorationMethod // Removes the given value from the text decoration
svgCanvas.setTextAnchor = setTextAnchorMethod // Set the new text anchor.
svgCanvas.setLetterSpacing = setLetterSpacingMethod // Set the new letter spacing.
svgCanvas.setWordSpacing = setWordSpacingMethod // Set the new word spacing.
svgCanvas.setTextLength = setTextLengthMethod // Set the new text length.
svgCanvas.setLengthAdjust = setLengthAdjustMethod // Set the new length adjust.
svgCanvas.getFontFamily = getFontFamilyMethod // The current font family
svgCanvas.setFontFamily = setFontFamilyMethod // Set the new font family.
svgCanvas.setFontColor = setFontColorMethod // Set the new font color.
svgCanvas.getFontColor = getFontColorMethod // The current font color
svgCanvas.getFontSize = getFontSizeMethod // The current font size
svgCanvas.setFontSize = setFontSizeMethod // Applies the given font size to the selected element.
svgCanvas.getText = getTextMethod // current text (`textContent`) of the selected element
svgCanvas.setTextContent = setTextContentMethod // Updates the text element with the given string.
svgCanvas.setImageURL = setImageURLMethod // Sets the new image URL for the selected image element
svgCanvas.setLinkURL = setLinkURLMethod // Sets the new link URL for the selected anchor element.
svgCanvas.setRectRadius = setRectRadiusMethod // Sets the `rx` and `ry` values to the selected `rect` element
svgCanvas.makeHyperlink = makeHyperlinkMethod // Wraps the selected element(s) in an anchor element or converts group to one.
svgCanvas.removeHyperlink = removeHyperlinkMethod
svgCanvas.setSegType = setSegTypeMethod // Sets the new segment type to the selected segment(s).
svgCanvas.setStrokeWidth = setStrokeWidthMethod // Sets the stroke width for the current selected elements.
svgCanvas.getResolution = getResolutionMethod // The current dimensions and zoom level in an object
svgCanvas.getTitle = getTitleMethod // the current group/SVG's title contents or `undefined` if no element
svgCanvas.setGroupTitle = setGroupTitleMethod // Sets the group/SVG's title content.
svgCanvas.setStrokeAttr = setStrokeAttrMethod // Set the given stroke-related attribute the given value for selected elements.
svgCanvas.setBackground = setBackgroundMethod // Set the background of the editor (NOT the actual document).
svgCanvas.setDocumentTitle = setDocumentTitleMethod // Adds/updates a title element for the document with the given name.
svgCanvas.getEditorNS = getEditorNSMethod // Returns the editor's namespace URL, optionally adding it to the root element.
svgCanvas.setResolution = setResolutionMethod // Changes the document's dimensions to the given size.
svgCanvas.setBBoxZoom = setBBoxZoomMethod // Sets the zoom level on the canvas-side based on the given value.
svgCanvas.setCurrentZoom = setZoomMethod // Sets the zoom to the given level.
svgCanvas.setColor = setColorMethod // Change the current stroke/fill color/gradien
svgCanvas.setGradient = setGradientMethod // Apply the current gradient to selected element's fill or stroke.
svgCanvas.setPaint = setPaintMethod // Set a color/gradient to a fill/stroke.
} }
/** /**
* @function module:elem-get-set.SvgCanvas#getResolution * @function module:elem-get-set.SvgCanvas#getResolution
* @returns {DimensionsAndZoom} The current dimensions and zoom level in an object * @returns {DimensionsAndZoom} The current dimensions and zoom level in an object
*/ */
export const getResolutionMethod = () => { const getResolutionMethod = () => {
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const w = svgCanvas.getSvgContent().getAttribute('width') / zoom const w = svgCanvas.getSvgContent().getAttribute('width') / zoom
const h = svgCanvas.getSvgContent().getAttribute('height') / zoom const h = svgCanvas.getSvgContent().getAttribute('height') / zoom
@@ -48,7 +88,7 @@ export const getResolutionMethod = () => {
* @returns {string|void} the current group/SVG's title contents or * @returns {string|void} the current group/SVG's title contents or
* `undefined` if no element is passed nd there are no selected elements. * `undefined` if no element is passed nd there are no selected elements.
*/ */
export const getTitleMethod = (elem) => { const getTitleMethod = (elem) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const dataStorage = svgCanvas.getDataStorage() const dataStorage = svgCanvas.getDataStorage()
elem = elem || selectedElements[0] elem = elem || selectedElements[0]
@@ -74,7 +114,7 @@ export const getTitleMethod = (elem) => {
* @todo Combine this with `setDocumentTitle` * @todo Combine this with `setDocumentTitle`
* @returns {void} * @returns {void}
*/ */
export const setGroupTitleMethod = (val) => { const setGroupTitleMethod = (val) => {
const { const {
InsertElementCommand, RemoveElementCommand, InsertElementCommand, RemoveElementCommand,
ChangeElementCommand, BatchCommand ChangeElementCommand, BatchCommand
@@ -119,7 +159,7 @@ export const setGroupTitleMethod = (val) => {
* @param {string} newTitle - String with the new title * @param {string} newTitle - String with the new title
* @returns {void} * @returns {void}
*/ */
export const setDocumentTitleMethod = (newTitle) => { const setDocumentTitleMethod = (newTitle) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const childs = svgCanvas.getSvgContent().childNodes const childs = svgCanvas.getSvgContent().childNodes
let docTitle = false; let oldTitle = '' let docTitle = false; let oldTitle = ''
@@ -159,7 +199,7 @@ export const setDocumentTitleMethod = (newTitle) => {
* @returns {boolean} Indicates if resolution change was successful. * @returns {boolean} Indicates if resolution change was successful.
* It will fail on "fit to content" option with no content to fit to. * It will fail on "fit to content" option with no content to fit to.
*/ */
export const setResolutionMethod = (x, y) => { const setResolutionMethod = (x, y) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const res = svgCanvas.getResolution() const res = svgCanvas.getResolution()
@@ -220,7 +260,7 @@ export const setResolutionMethod = (x, y) => {
* @param {boolean} [add] - Indicates whether or not to add the namespace value * @param {boolean} [add] - Indicates whether or not to add the namespace value
* @returns {string} The editor's namespace URL * @returns {string} The editor's namespace URL
*/ */
export const getEditorNSMethod = (add) => { const getEditorNSMethod = (add) => {
if (add) { if (add) {
svgCanvas.getSvgContent().setAttribute('xmlns:se', NS.SE) svgCanvas.getSvgContent().setAttribute('xmlns:se', NS.SE)
} }
@@ -240,7 +280,7 @@ export const getEditorNSMethod = (add) => {
* @param {Integer} editorH - The editor's workarea box's height * @param {Integer} editorH - The editor's workarea box's height
* @returns {module:elem-get-set.ZoomAndBBox|void} * @returns {module:elem-get-set.ZoomAndBBox|void}
*/ */
export const setBBoxZoomMethod = (val, editorW, editorH) => { const setBBoxZoomMethod = (val, editorW, editorH) => {
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
let spacer = 0.85 let spacer = 0.85
@@ -299,7 +339,7 @@ export const setBBoxZoomMethod = (val, editorW, editorH) => {
* @fires module:elem-get-set.SvgCanvas#event:ext_zoomChanged * @fires module:elem-get-set.SvgCanvas#event:ext_zoomChanged
* @returns {void} * @returns {void}
*/ */
export const setZoomMethod = (zoomLevel) => { const setZoomMethod = (zoomLevel) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const res = svgCanvas.getResolution() const res = svgCanvas.getResolution()
svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel) svgCanvas.getSvgContent().setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel)
@@ -317,11 +357,11 @@ export const setZoomMethod = (zoomLevel) => {
* @function module:elem-get-set.SvgCanvas#setColor * @function module:elem-get-set.SvgCanvas#setColor
* @param {string} type - String indicating fill or stroke * @param {string} type - String indicating fill or stroke
* @param {string} val - The value to set the stroke attribute to * @param {string} val - The value to set the stroke attribute to
* @param {boolean} preventUndo - Boolean indicating whether or not this should be an undoable option * @param {boolean} preventUndo - Boolean indicating whether or not svgCanvas should be an undoable option
* @fires module:elem-get-set.SvgCanvas#event:changed * @fires module:elem-get-set.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setColorMethod = (type, val, preventUndo) => { const setColorMethod = (type, val, preventUndo) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurShape(type, val) svgCanvas.setCurShape(type, val)
svgCanvas.setCurProperties(type + '_paint', { type: 'solidColor' }) svgCanvas.setCurProperties(type + '_paint', { type: 'solidColor' })
@@ -367,7 +407,7 @@ export const setColorMethod = (type, val, preventUndo) => {
* @param {"fill"|"stroke"} type - String indicating "fill" or "stroke" to apply to an element * @param {"fill"|"stroke"} type - String indicating "fill" or "stroke" to apply to an element
* @returns {void} * @returns {void}
*/ */
export const setGradientMethod = (type) => { const setGradientMethod = (type) => {
if (!svgCanvas.getCurProperties(type + '_paint') || if (!svgCanvas.getCurProperties(type + '_paint') ||
svgCanvas.getCurProperties(type + '_paint').type === 'solidColor') { return } svgCanvas.getCurProperties(type + '_paint').type === 'solidColor') { return }
const canvas = svgCanvas const canvas = svgCanvas
@@ -394,7 +434,7 @@ export const setGradientMethod = (type) => {
* @param {SVGGradientElement} grad - The gradient DOM element to compare to others * @param {SVGGradientElement} grad - The gradient DOM element to compare to others
* @returns {SVGGradientElement} The existing gradient if found, `null` if not * @returns {SVGGradientElement} The existing gradient if found, `null` if not
*/ */
export const findDuplicateGradient = (grad) => { const findDuplicateGradient = (grad) => {
const defs = findDefs() const defs = findDefs()
const existingGrads = defs.querySelectorAll('linearGradient, radialGradient') const existingGrads = defs.querySelectorAll('linearGradient, radialGradient')
let i = existingGrads.length let i = existingGrads.length
@@ -468,7 +508,7 @@ export const findDuplicateGradient = (grad) => {
* @param {module:jGraduate.jGraduatePaintOptions} paint - The jGraduate paint object to apply * @param {module:jGraduate.jGraduatePaintOptions} paint - The jGraduate paint object to apply
* @returns {void} * @returns {void}
*/ */
export const setPaintMethod = (type, paint) => { const setPaintMethod = (type, paint) => {
// make a copy // make a copy
const p = new jGraduate.Paint(paint) const p = new jGraduate.Paint(paint)
svgCanvas.setPaintOpacity(type, p.alpha / 100, true) svgCanvas.setPaintOpacity(type, p.alpha / 100, true)
@@ -494,7 +534,7 @@ export const setPaintMethod = (type, paint) => {
* @fires module:elem-get-set.SvgCanvas#event:changed * @fires module:elem-get-set.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setStrokeWidthMethod = (val) => { const setStrokeWidthMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
if (val === 0 && ['line', 'path'].includes(svgCanvas.getMode())) { if (val === 0 && ['line', 'path'].includes(svgCanvas.getMode())) {
svgCanvas.setStrokeWidth(1) svgCanvas.setStrokeWidth(1)
@@ -538,7 +578,7 @@ export const setStrokeWidthMethod = (val) => {
* @fires module:elem-get-set.SvgCanvas#event:changed * @fires module:elem-get-set.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setStrokeAttrMethod = (attr, val) => { const setStrokeAttrMethod = (attr, val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurShape(attr.replace('-', '_'), val) svgCanvas.setCurShape(attr.replace('-', '_'), val)
const elems = [] const elems = []
@@ -564,7 +604,7 @@ export const setStrokeAttrMethod = (attr, val) => {
* @function module:svgcanvas.SvgCanvas#getBold * @function module:svgcanvas.SvgCanvas#getBold
* @returns {boolean} Indicates whether or not element is bold * @returns {boolean} Indicates whether or not element is bold
*/ */
export const getBoldMethod = () => { const getBoldMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
// should only have one element selected // should only have one element selected
const selected = selectedElements[0] const selected = selectedElements[0]
@@ -581,7 +621,7 @@ export const getBoldMethod = () => {
* @param {boolean} b - Indicates bold (`true`) or normal (`false`) * @param {boolean} b - Indicates bold (`true`) or normal (`false`)
* @returns {void} * @returns {void}
*/ */
export const setBoldMethod = (b) => { const setBoldMethod = (b) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && if (selected?.tagName === 'text' &&
@@ -597,7 +637,7 @@ export const setBoldMethod = (b) => {
* Check whether selected element has the given text decoration value or not. * Check whether selected element has the given text decoration value or not.
* @returns {boolean} Indicates whether or not element has the text decoration value * @returns {boolean} Indicates whether or not element has the text decoration value
*/ */
export const hasTextDecorationMethod = (value) => { const hasTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
@@ -614,7 +654,7 @@ export const hasTextDecorationMethod = (value) => {
* @param value The text decoration value * @param value The text decoration value
* @returns {void} * @returns {void}
*/ */
export const addTextDecorationMethod = (value) => { const addTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -631,7 +671,7 @@ export const addTextDecorationMethod = (value) => {
* @param value The text decoration value * @param value The text decoration value
* @returns {void} * @returns {void}
*/ */
export const removeTextDecorationMethod = (value) => { const removeTextDecorationMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -648,7 +688,7 @@ export const removeTextDecorationMethod = (value) => {
* @function module:svgcanvas.SvgCanvas#getItalic * @function module:svgcanvas.SvgCanvas#getItalic
* @returns {boolean} Indicates whether or not element is italic * @returns {boolean} Indicates whether or not element is italic
*/ */
export const getItalicMethod = () => { const getItalicMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -663,7 +703,7 @@ export const getItalicMethod = () => {
* @param {boolean} i - Indicates italic (`true`) or normal (`false`) * @param {boolean} i - Indicates italic (`true`) or normal (`false`)
* @returns {void} * @returns {void}
*/ */
export const setItalicMethod = (i) => { const setItalicMethod = (i) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -679,7 +719,7 @@ export const setItalicMethod = (i) => {
* @param {string} value - The text anchor value (start, middle or end) * @param {string} value - The text anchor value (start, middle or end)
* @returns {void} * @returns {void}
*/ */
export const setTextAnchorMethod = (value) => { const setTextAnchorMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -695,7 +735,7 @@ export const setTextAnchorMethod = (value) => {
* @param {string} value - The letter spacing value * @param {string} value - The letter spacing value
* @returns {void} * @returns {void}
*/ */
export const setLetterSpacingMethod = (value) => { const setLetterSpacingMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -711,7 +751,7 @@ export const setLetterSpacingMethod = (value) => {
* @param {string} value - The word spacing value * @param {string} value - The word spacing value
* @returns {void} * @returns {void}
*/ */
export const setWordSpacingMethod = (value) => { const setWordSpacingMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -727,7 +767,7 @@ export const setWordSpacingMethod = (value) => {
* @param {string} value - The text length value * @param {string} value - The text length value
* @returns {void} * @returns {void}
*/ */
export const setTextLengthMethod = (value) => { const setTextLengthMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -743,7 +783,7 @@ export const setTextLengthMethod = (value) => {
* @param {string} value - The length adjust value * @param {string} value - The length adjust value
* @returns {void} * @returns {void}
*/ */
export const setLengthAdjustMethod = (value) => { const setLengthAdjustMethod = (value) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (selected?.tagName === 'text' && !selectedElements[1]) { if (selected?.tagName === 'text' && !selectedElements[1]) {
@@ -758,7 +798,7 @@ export const setLengthAdjustMethod = (value) => {
* @function module:svgcanvas.SvgCanvas#getFontFamily * @function module:svgcanvas.SvgCanvas#getFontFamily
* @returns {string} The current font family * @returns {string} The current font family
*/ */
export const getFontFamilyMethod = () => { const getFontFamilyMethod = () => {
return svgCanvas.getCurText('font_family') return svgCanvas.getCurText('font_family')
} }
@@ -768,7 +808,7 @@ export const getFontFamilyMethod = () => {
* @param {string} val - String with the new font family * @param {string} val - String with the new font family
* @returns {void} * @returns {void}
*/ */
export const setFontFamilyMethod = (val) => { const setFontFamilyMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurText('font_family', val) svgCanvas.setCurText('font_family', val)
svgCanvas.changeSelectedAttribute('font-family', val) svgCanvas.changeSelectedAttribute('font-family', val)
@@ -783,7 +823,7 @@ export const setFontFamilyMethod = (val) => {
* @param {string} val - String with the new font color * @param {string} val - String with the new font color
* @returns {void} * @returns {void}
*/ */
export const setFontColorMethod = (val) => { const setFontColorMethod = (val) => {
svgCanvas.setCurText('fill', val) svgCanvas.setCurText('fill', val)
svgCanvas.changeSelectedAttribute('fill', val) svgCanvas.changeSelectedAttribute('fill', val)
} }
@@ -792,7 +832,7 @@ export const setFontColorMethod = (val) => {
* @function module:svgcanvas.SvgCanvas#getFontColor * @function module:svgcanvas.SvgCanvas#getFontColor
* @returns {string} The current font color * @returns {string} The current font color
*/ */
export const getFontColorMethod = () => { const getFontColorMethod = () => {
return svgCanvas.getCurText('fill') return svgCanvas.getCurText('fill')
} }
@@ -800,7 +840,7 @@ export const getFontColorMethod = () => {
* @function module:svgcanvas.SvgCanvas#getFontSize * @function module:svgcanvas.SvgCanvas#getFontSize
* @returns {Float} The current font size * @returns {Float} The current font size
*/ */
export const getFontSizeMethod = () => { const getFontSizeMethod = () => {
return svgCanvas.getCurText('font_size') return svgCanvas.getCurText('font_size')
} }
@@ -810,7 +850,7 @@ export const getFontSizeMethod = () => {
* @param {Float} val - Float with the new font size * @param {Float} val - Float with the new font size
* @returns {void} * @returns {void}
*/ */
export const setFontSizeMethod = (val) => { const setFontSizeMethod = (val) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
svgCanvas.setCurText('font_size', val) svgCanvas.setCurText('font_size', val)
svgCanvas.changeSelectedAttribute('font-size', val) svgCanvas.changeSelectedAttribute('font-size', val)
@@ -823,7 +863,7 @@ export const setFontSizeMethod = (val) => {
* @function module:svgcanvas.SvgCanvas#getText * @function module:svgcanvas.SvgCanvas#getText
* @returns {string} The current text (`textContent`) of the selected element * @returns {string} The current text (`textContent`) of the selected element
*/ */
export const getTextMethod = () => { const getTextMethod = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
return (selected) ? selected.textContent : '' return (selected) ? selected.textContent : ''
@@ -835,7 +875,7 @@ export const getTextMethod = () => {
* @param {string} val - String with the new text * @param {string} val - String with the new text
* @returns {void} * @returns {void}
*/ */
export const setTextContentMethod = (val) => { const setTextContentMethod = (val) => {
svgCanvas.changeSelectedAttribute('#text', val) svgCanvas.changeSelectedAttribute('#text', val)
svgCanvas.textActions.init(val) svgCanvas.textActions.init(val)
svgCanvas.textActions.setCursor() svgCanvas.textActions.setCursor()
@@ -849,7 +889,7 @@ export const setTextContentMethod = (val) => {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setImageURLMethod = (val) => { const setImageURLMethod = (val) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const elem = selectedElements[0] const elem = selectedElements[0]
@@ -898,7 +938,7 @@ export const setImageURLMethod = (val) => {
* @param {string} val - String with the link URL/path * @param {string} val - String with the link URL/path
* @returns {void} * @returns {void}
*/ */
export const setLinkURLMethod = (val) => { const setLinkURLMethod = (val) => {
const { ChangeElementCommand, BatchCommand } = svgCanvas.history const { ChangeElementCommand, BatchCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
let elem = selectedElements[0] let elem = selectedElements[0]
@@ -935,7 +975,7 @@ export const setLinkURLMethod = (val) => {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setRectRadiusMethod = (val) => { const setRectRadiusMethod = (val) => {
const { ChangeElementCommand } = svgCanvas.history const { ChangeElementCommand } = svgCanvas.history
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
@@ -956,7 +996,7 @@ export const setRectRadiusMethod = (val) => {
* @param {string} url * @param {string} url
* @returns {void} * @returns {void}
*/ */
export const makeHyperlinkMethod = (url) => { const makeHyperlinkMethod = (url) => {
svgCanvas.groupSelectedElements('a', url) svgCanvas.groupSelectedElements('a', url)
} }
@@ -964,7 +1004,7 @@ export const makeHyperlinkMethod = (url) => {
* @function module:svgcanvas.SvgCanvas#removeHyperlink * @function module:svgcanvas.SvgCanvas#removeHyperlink
* @returns {void} * @returns {void}
*/ */
export const removeHyperlinkMethod = () => { const removeHyperlinkMethod = () => {
svgCanvas.ungroupSelectedElement() svgCanvas.ungroupSelectedElement()
} }
@@ -978,7 +1018,7 @@ export const removeHyperlinkMethod = () => {
* @param {Integer} newType - New segment type. See {@link https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg} for list * @param {Integer} newType - New segment type. See {@link https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg} for list
* @returns {void} * @returns {void}
*/ */
export const setSegTypeMethod = (newType) => { const setSegTypeMethod = (newType) => {
svgCanvas.pathActions.setSegType(newType) svgCanvas.pathActions.setSegType(newType)
} }
@@ -989,7 +1029,7 @@ export const setSegTypeMethod = (newType) => {
* @param {string} url - URL or path to image to use * @param {string} url - URL or path to image to use
* @returns {void} * @returns {void}
*/ */
export const setBackgroundMethod = (color, url) => { const setBackgroundMethod = (color, url) => {
const bg = getElement('canvasBackground') const bg = getElement('canvasBackground')
const border = bg.querySelector('rect') const border = bg.querySelector('rect')
let bgImg = getElement('background_image') let bgImg = getElement('background_image')

540
src/svgcanvas/selected-elem.js
View File

@@ -10,32 +10,44 @@ import { NS } from './namespaces.js'
import * as hstry from './history.js' import * as hstry from './history.js'
import * as pathModule from './path.js' import * as pathModule from './path.js'
import { import {
getStrokedBBoxDefaultVisible, setHref, getElement, getHref, getVisibleElements, getStrokedBBoxDefaultVisible,
findDefs, getRotationAngle, getRefElem, getBBox as utilsGetBBox, walkTreePost, assignAttributes, getFeGaussianBlur setHref,
getElement,
getHref,
getVisibleElements,
findDefs,
getRotationAngle,
getRefElem,
getBBox as utilsGetBBox,
walkTreePost,
assignAttributes,
getFeGaussianBlur
} from './utilities.js' } from './utilities.js'
import { import {
transformPoint, matrixMultiply, transformListToTransform transformPoint,
matrixMultiply,
transformListToTransform
} from './math.js' } from './math.js'
import { import { recalculateDimensions } from './recalculate.js'
recalculateDimensions import { isGecko } from '../common/browser.js' // , supportsEditableText
} from './recalculate.js'
import {
isGecko
} from '../common/browser.js' // , supportsEditableText
import { getParents } from '../editor/components/jgraduate/Util.js' import { getParents } from '../editor/components/jgraduate/Util.js'
const { const {
MoveElementCommand, BatchCommand, InsertElementCommand, RemoveElementCommand, ChangeElementCommand MoveElementCommand,
BatchCommand,
InsertElementCommand,
RemoveElementCommand,
ChangeElementCommand
} = hstry } = hstry
let svgCanvas = null let svgCanvas = null
/** /**
* @function module:selected-elem.init * @function module:selected-elem.init
* @param {module:selected-elem.elementContext} elementContext * @param {module:selected-elem.elementContext} elementContext
* @returns {void} * @returns {void}
*/ */
export const init = (canvas) => { export const init = canvas => {
svgCanvas = canvas svgCanvas = canvas
svgCanvas.copySelectedElements = copySelectedElements svgCanvas.copySelectedElements = copySelectedElements
svgCanvas.groupSelectedElements = groupSelectedElements // Wraps all the selected elements in a group (`g`) element. svgCanvas.groupSelectedElements = groupSelectedElements // Wraps all the selected elements in a group (`g`) element.
@@ -53,12 +65,12 @@ export const init = (canvas) => {
} }
/** /**
* Repositions the selected element to the bottom in the DOM to appear on top of * Repositions the selected element to the bottom in the DOM to appear on top of
* other elements. * other elements.
* @function module:selected-elem.SvgCanvas#moveToTopSelectedElem * @function module:selected-elem.SvgCanvas#moveToTopSelectedElem
* @fires module:selected-elem.SvgCanvas#event:changed * @fires module:selected-elem.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
const moveToTopSelectedElem = () => { const moveToTopSelectedElem = () => {
const [selected] = svgCanvas.getSelectedElements() const [selected] = svgCanvas.getSelectedElements()
if (selected) { if (selected) {
@@ -69,19 +81,21 @@ const moveToTopSelectedElem = () => {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'top')) svgCanvas.addCommandToHistory(
new MoveElementCommand(t, oldNextSibling, oldParent, 'top')
)
svgCanvas.call('changed', [t]) svgCanvas.call('changed', [t])
} }
} }
} }
/** /**
* Repositions the selected element to the top in the DOM to appear under * Repositions the selected element to the top in the DOM to appear under
* other elements. * other elements.
* @function module:selected-elem.SvgCanvas#moveToBottomSelectedElement * @function module:selected-elem.SvgCanvas#moveToBottomSelectedElement
* @fires module:selected-elem.SvgCanvas#event:changed * @fires module:selected-elem.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
const moveToBottomSelectedElem = () => { const moveToBottomSelectedElem = () => {
const [selected] = svgCanvas.getSelectedElements() const [selected] = svgCanvas.getSelectedElements()
if (selected) { if (selected) {
@@ -101,32 +115,41 @@ const moveToBottomSelectedElem = () => {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom')) svgCanvas.addCommandToHistory(
new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom')
)
svgCanvas.call('changed', [t]) svgCanvas.call('changed', [t])
} }
} }
} }
/** /**
* Moves the select element up or down the stack, based on the visibly * Moves the select element up or down the stack, based on the visibly
* intersecting elements. * intersecting elements.
* @function module:selected-elem.SvgCanvas#moveUpDownSelected * @function module:selected-elem.SvgCanvas#moveUpDownSelected
* @param {"Up"|"Down"} dir - String that's either 'Up' or 'Down' * @param {"Up"|"Down"} dir - String that's either 'Up' or 'Down'
* @fires module:selected-elem.SvgCanvas#event:changed * @fires module:selected-elem.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
const moveUpDownSelected = (dir) => { const moveUpDownSelected = dir => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const selected = selectedElements[0] const selected = selectedElements[0]
if (!selected) { return } if (!selected) {
return
}
svgCanvas.setCurBBoxes([]) svgCanvas.setCurBBoxes([])
let closest; let foundCur let closest
let foundCur
// jQuery sorts this list // jQuery sorts this list
const list = svgCanvas.getIntersectionList(getStrokedBBoxDefaultVisible([selected])) const list = svgCanvas.getIntersectionList(
if (dir === 'Down') { list.reverse() } getStrokedBBoxDefaultVisible([selected])
)
if (dir === 'Down') {
list.reverse()
}
Array.prototype.forEach.call(list, (el) => { Array.prototype.forEach.call(list, el => {
if (!foundCur) { if (!foundCur) {
if (el === selected) { if (el === selected) {
foundCur = true foundCur = true
@@ -136,7 +159,9 @@ const moveUpDownSelected = (dir) => {
closest = el closest = el
return false return false
}) })
if (!closest) { return } if (!closest) {
return
}
const t = selected const t = selected
const oldParent = t.parentNode const oldParent = t.parentNode
@@ -149,20 +174,22 @@ const moveUpDownSelected = (dir) => {
// If the element actually moved position, add the command and fire the changed // If the element actually moved position, add the command and fire the changed
// event handler. // event handler.
if (oldNextSibling !== t.nextSibling) { if (oldNextSibling !== t.nextSibling) {
svgCanvas.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)) svgCanvas.addCommandToHistory(
new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)
)
svgCanvas.call('changed', [t]) svgCanvas.call('changed', [t])
} }
} }
/** /**
* Moves selected elements on the X/Y axis. * Moves selected elements on the X/Y axis.
* @function module:selected-elem.SvgCanvas#moveSelectedElements * @function module:selected-elem.SvgCanvas#moveSelectedElements
* @param {Float} dx - Float with the distance to move on the x-axis * @param {Float} dx - Float with the distance to move on the x-axis
* @param {Float} dy - Float with the distance to move on the y-axis * @param {Float} dy - Float with the distance to move on the y-axis
* @param {boolean} undoable - Boolean indicating whether or not the action should be undoable * @param {boolean} undoable - Boolean indicating whether or not the action should be undoable
* @fires module:selected-elem.SvgCanvas#event:changed * @fires module:selected-elem.SvgCanvas#event:changed
* @returns {BatchCommand|void} Batch command for the move * @returns {BatchCommand|void} Batch command for the move
*/ */
const moveSelectedElements = (dx, dy, undoable = true) => { const moveSelectedElements = (dx, dy, undoable = true) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
@@ -198,7 +225,10 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
batchCmd.addSubCommand(cmd) batchCmd.addSubCommand(cmd)
} }
svgCanvas.gettingSelectorManager().requestSelector(selected).resize() svgCanvas
.gettingSelectorManager()
.requestSelector(selected)
.resize()
} }
}) })
if (!batchCmd.isEmpty()) { if (!batchCmd.isEmpty()) {
@@ -212,22 +242,23 @@ const moveSelectedElements = (dx, dy, undoable = true) => {
} }
/** /**
* Create deep DOM copies (clones) of all selected elements and move them slightly * Create deep DOM copies (clones) of all selected elements and move them slightly
* from their originals. * from their originals.
* @function module:selected-elem.SvgCanvas#cloneSelectedElements * @function module:selected-elem.SvgCanvas#cloneSelectedElements
* @param {Float} x Float with the distance to move on the x-axis * @param {Float} x Float with the distance to move on the x-axis
* @param {Float} y Float with the distance to move on the y-axis * @param {Float} y Float with the distance to move on the y-axis
* @returns {void} * @returns {void}
*/ */
const cloneSelectedElements = (x, y) => { const cloneSelectedElements = (x, y) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const currentGroup = svgCanvas.getCurrentGroup() const currentGroup = svgCanvas.getCurrentGroup()
let i; let elem let i
let elem
const batchCmd = new BatchCommand('Clone Elements') const batchCmd = new BatchCommand('Clone Elements')
// find all the elements selected (stop at first null) // find all the elements selected (stop at first null)
const len = selectedElements.length const len = selectedElements.length
const index = (el) => { const index = el => {
if (!el) return -1 if (!el) return -1
let i = 0 let i = 0
do { do {
@@ -237,18 +268,20 @@ const cloneSelectedElements = (x, y) => {
} }
/** /**
* Sorts an array numerically and ascending. * Sorts an array numerically and ascending.
* @param {Element} a * @param {Element} a
* @param {Element} b * @param {Element} b
* @returns {Integer} * @returns {Integer}
*/ */
const sortfunction = (a, b) => { const sortfunction = (a, b) => {
return (index(b) - index(a)) return index(b) - index(a)
} }
selectedElements.sort(sortfunction) selectedElements.sort(sortfunction)
for (i = 0; i < len; ++i) { for (i = 0; i < len; ++i) {
elem = selectedElements[i] elem = selectedElements[i]
if (!elem) { break } if (!elem) {
break
}
} }
// use slice to quickly get the subset of elements we need // use slice to quickly get the subset of elements we need
const copiedElements = selectedElements.slice(0, i) const copiedElements = selectedElements.slice(0, i)
@@ -259,8 +292,8 @@ const cloneSelectedElements = (x, y) => {
i = copiedElements.length i = copiedElements.length
while (i--) { while (i--) {
// clone each element and replace it within copiedElements // clone each element and replace it within copiedElements
elem = copiedElements[i] = drawing.copyElem(copiedElements[i]); elem = copiedElements[i] = drawing.copyElem(copiedElements[i])
(currentGroup || drawing.getCurrentLayer()).append(elem) ;(currentGroup || drawing.getCurrentLayer()).append(elem)
batchCmd.addSubCommand(new InsertElementCommand(elem)) batchCmd.addSubCommand(new InsertElementCommand(elem))
} }
@@ -271,31 +304,49 @@ const cloneSelectedElements = (x, y) => {
} }
} }
/** /**
* Aligns selected elements. * Aligns selected elements.
* @function module:selected-elem.SvgCanvas#alignSelectedElements * @function module:selected-elem.SvgCanvas#alignSelectedElements
* @param {string} type - String with single character indicating the alignment type * @param {string} type - String with single character indicating the alignment type
* @param {"selected"|"largest"|"smallest"|"page"} relativeTo * @param {"selected"|"largest"|"smallest"|"page"} relativeTo
* @returns {void} * @returns {void}
*/ */
const alignSelectedElements = (type, relativeTo) => { const alignSelectedElements = (type, relativeTo) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const bboxes = [] // angles = []; const bboxes = [] // angles = [];
const len = selectedElements.length const len = selectedElements.length
if (!len) { return } if (!len) {
let minx = Number.MAX_VALUE; let maxx = Number.MIN_VALUE return
let miny = Number.MAX_VALUE; let maxy = Number.MIN_VALUE }
let curwidth = Number.MIN_VALUE; let curheight = Number.MIN_VALUE let minx = Number.MAX_VALUE
let maxx = Number.MIN_VALUE
let miny = Number.MAX_VALUE
let maxy = Number.MIN_VALUE
let curwidth = Number.MIN_VALUE
let curheight = Number.MIN_VALUE
for (let i = 0; i < len; ++i) { for (let i = 0; i < len; ++i) {
if (!selectedElements[i]) { break } if (!selectedElements[i]) {
break
}
const elem = selectedElements[i] const elem = selectedElements[i]
bboxes[i] = getStrokedBBoxDefaultVisible([elem]) bboxes[i] = getStrokedBBoxDefaultVisible([elem])
// now bbox is axis-aligned and handles rotation // now bbox is axis-aligned and handles rotation
switch (relativeTo) { switch (relativeTo) {
case 'smallest': case 'smallest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') && if (
(curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) || ((type === 'l' ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') && type === 'c' ||
type === 'r' ||
type === 'left' ||
type === 'center' ||
type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||
((type === 't' ||
type === 'm' ||
type === 'b' ||
type === 'top' ||
type === 'middle' ||
type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight > bboxes[i].height)) (curheight === Number.MIN_VALUE || curheight > bboxes[i].height))
) { ) {
minx = bboxes[i].x minx = bboxes[i].x
@@ -307,9 +358,20 @@ const alignSelectedElements = (type, relativeTo) => {
} }
break break
case 'largest': case 'largest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') && if (
(curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) || ((type === 'l' ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') && type === 'c' ||
type === 'r' ||
type === 'left' ||
type === 'center' ||
type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||
((type === 't' ||
type === 'm' ||
type === 'b' ||
type === 'top' ||
type === 'middle' ||
type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight < bboxes[i].height)) (curheight === Number.MIN_VALUE || curheight < bboxes[i].height))
) { ) {
minx = bboxes[i].x minx = bboxes[i].x
@@ -320,11 +382,20 @@ const alignSelectedElements = (type, relativeTo) => {
curheight = bboxes[i].height curheight = bboxes[i].height
} }
break break
default: // 'selected' default:
if (bboxes[i].x < minx) { minx = bboxes[i].x } // 'selected'
if (bboxes[i].y < miny) { miny = bboxes[i].y } if (bboxes[i].x < minx) {
if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width } minx = bboxes[i].x
if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height } }
if (bboxes[i].y < miny) {
miny = bboxes[i].y
}
if (bboxes[i].x + bboxes[i].width > maxx) {
maxx = bboxes[i].x + bboxes[i].width
}
if (bboxes[i].y + bboxes[i].height > maxy) {
maxy = bboxes[i].y + bboxes[i].height
}
break break
} }
} // loop for each element to find the bbox and adjust min/max } // loop for each element to find the bbox and adjust min/max
@@ -339,7 +410,9 @@ const alignSelectedElements = (type, relativeTo) => {
const dx = new Array(len) const dx = new Array(len)
const dy = new Array(len) const dy = new Array(len)
for (let i = 0; i < len; ++i) { for (let i = 0; i < len; ++i) {
if (!selectedElements[i]) { break } if (!selectedElements[i]) {
break
}
// const elem = selectedElements[i]; // const elem = selectedElements[i];
const bbox = bboxes[i] const bbox = bboxes[i]
dx[i] = 0 dx[i] = 0
@@ -375,12 +448,12 @@ const alignSelectedElements = (type, relativeTo) => {
} }
/** /**
* Removes all selected elements from the DOM and adds the change to the * Removes all selected elements from the DOM and adds the change to the
* history stack. * history stack.
* @function module:selected-elem.SvgCanvas#deleteSelectedElements * @function module:selected-elem.SvgCanvas#deleteSelectedElements
* @fires module:selected-elem.SvgCanvas#event:changed * @fires module:selected-elem.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
const deleteSelectedElements = () => { const deleteSelectedElements = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const batchCmd = new BatchCommand('Delete Elements') const batchCmd = new BatchCommand('Delete Elements')
@@ -389,7 +462,9 @@ const deleteSelectedElements = () => {
for (let i = 0; i < len; ++i) { for (let i = 0; i < len; ++i) {
const selected = selectedElements[i] const selected = selectedElements[i]
if (!selected) { break } if (!selected) {
break
}
let parent = selected.parentNode let parent = selected.parentNode
let t = selected let t = selected
@@ -414,20 +489,23 @@ const deleteSelectedElements = () => {
} }
svgCanvas.setEmptySelectedElements() svgCanvas.setEmptySelectedElements()
if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd) } if (!batchCmd.isEmpty()) {
svgCanvas.addCommandToHistory(batchCmd)
}
svgCanvas.call('changed', selectedCopy) svgCanvas.call('changed', selectedCopy)
svgCanvas.clearSelection() svgCanvas.clearSelection()
} }
/** /**
* Remembers the current selected elements on the clipboard. * Remembers the current selected elements on the clipboard.
* @function module:selected-elem.SvgCanvas#copySelectedElements * @function module:selected-elem.SvgCanvas#copySelectedElements
* @returns {void} * @returns {void}
*/ */
const copySelectedElements = () => { const copySelectedElements = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const data = const data = JSON.stringify(
JSON.stringify(selectedElements.map((x) => svgCanvas.getJsonFromSvgElements(x))) selectedElements.map(x => svgCanvas.getJsonFromSvgElements(x))
)
// Use sessionStorage for the clipboard data. // Use sessionStorage for the clipboard data.
sessionStorage.setItem(svgCanvas.getClipboardID(), data) sessionStorage.setItem(svgCanvas.getClipboardID(), data)
svgCanvas.flashStorage() svgCanvas.flashStorage()
@@ -438,15 +516,17 @@ const copySelectedElements = () => {
} }
/** /**
* Wraps all the selected elements in a group (`g`) element. * Wraps all the selected elements in a group (`g`) element.
* @function module:selected-elem.SvgCanvas#groupSelectedElements * @function module:selected-elem.SvgCanvas#groupSelectedElements
* @param {"a"|"g"} [type="g"] - type of element to group into, defaults to `<g>` * @param {"a"|"g"} [type="g"] - type of element to group into, defaults to `<g>`
* @param {string} [urlArg] * @param {string} [urlArg]
* @returns {void} * @returns {void}
*/ */
const groupSelectedElements = (type, urlArg) => { const groupSelectedElements = (type, urlArg) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
if (!type) { type = 'g' } if (!type) {
type = 'g'
}
let cmdStr = '' let cmdStr = ''
let url let url
@@ -455,7 +535,8 @@ const groupSelectedElements = (type, urlArg) => {
cmdStr = 'Make hyperlink' cmdStr = 'Make hyperlink'
url = urlArg || '' url = urlArg || ''
break break
} default: { }
default: {
type = 'g' type = 'g'
cmdStr = 'Group Elements' cmdStr = 'Group Elements'
break break
@@ -480,31 +561,40 @@ const groupSelectedElements = (type, urlArg) => {
let i = selectedElements.length let i = selectedElements.length
while (i--) { while (i--) {
let elem = selectedElements[i] let elem = selectedElements[i]
if (!elem) { continue } if (!elem) {
continue
}
if (elem.parentNode.tagName === 'a' && elem.parentNode.childNodes.length === 1) { if (
elem.parentNode.tagName === 'a' &&
elem.parentNode.childNodes.length === 1
) {
elem = elem.parentNode elem = elem.parentNode
} }
const oldNextSibling = elem.nextSibling const oldNextSibling = elem.nextSibling
const oldParent = elem.parentNode const oldParent = elem.parentNode
g.append(elem) g.append(elem)
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)) batchCmd.addSubCommand(
new MoveElementCommand(elem, oldNextSibling, oldParent)
)
}
if (!batchCmd.isEmpty()) {
svgCanvas.addCommandToHistory(batchCmd)
} }
if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd) }
// update selection // update selection
svgCanvas.selectOnly([g], true) svgCanvas.selectOnly([g], true)
} }
/** /**
* Pushes all appropriate parent group properties down to its children, then * Pushes all appropriate parent group properties down to its children, then
* removes them from the group. * removes them from the group.
* @function module:selected-elem.SvgCanvas#pushGroupProperty * @function module:selected-elem.SvgCanvas#pushGroupProperty
* @param {SVGAElement|SVGGElement} g * @param {SVGAElement|SVGGElement} g
* @param {boolean} undoable * @param {boolean} undoable
* @returns {BatchCommand|void} * @returns {BatchCommand|void}
*/ */
const pushGroupProperty = (g, undoable) => { const pushGroupProperty = (g, undoable) => {
const children = g.childNodes const children = g.childNodes
const len = children.length const len = children.length
@@ -528,24 +618,32 @@ const pushGroupProperty = (g, undoable) => {
filter: g.getAttribute('filter'), filter: g.getAttribute('filter'),
opacity: g.getAttribute('opacity') opacity: g.getAttribute('opacity')
} }
let gfilter; let gblur; let changes let gfilter
let gblur
let changes
const drawing = svgCanvas.getDrawing() const drawing = svgCanvas.getDrawing()
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
const elem = children[i] const elem = children[i]
if (elem.nodeType !== 1) { continue } if (elem.nodeType !== 1) {
continue
}
if (gattrs.opacity !== null && gattrs.opacity !== 1) { if (gattrs.opacity !== null && gattrs.opacity !== 1) {
// const c_opac = elem.getAttribute('opacity') || 1; // const c_opac = elem.getAttribute('opacity') || 1;
const newOpac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100 const newOpac =
Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) /
100
svgCanvas.changeSelectedAttribute('opacity', newOpac, [elem]) svgCanvas.changeSelectedAttribute('opacity', newOpac, [elem])
} }
if (gattrs.filter) { if (gattrs.filter) {
let cblur = svgCanvas.getBlur(elem) let cblur = svgCanvas.getBlur(elem)
const origCblur = cblur const origCblur = cblur
if (!gblur) { gblur = svgCanvas.getBlur(g) } if (!gblur) {
gblur = svgCanvas.getBlur(g)
}
if (cblur) { if (cblur) {
// Is this formula correct? // Is this formula correct?
cblur = Number(gblur) + Number(cblur) cblur = Number(gblur) + Number(cblur)
@@ -566,9 +664,14 @@ const pushGroupProperty = (g, undoable) => {
// const filterElem = getRefElem(gfilter); // const filterElem = getRefElem(gfilter);
const blurElem = getFeGaussianBlur(gfilter) const blurElem = getFeGaussianBlur(gfilter)
// Change this in future for different filters // Change this in future for different filters
const suffix = (blurElem?.tagName === 'feGaussianBlur') ? 'blur' : 'filter' const suffix =
blurElem?.tagName === 'feGaussianBlur' ? 'blur' : 'filter'
gfilter.id = elem.id + '_' + suffix gfilter.id = elem.id + '_' + suffix
svgCanvas.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [elem]) svgCanvas.changeSelectedAttribute(
'filter',
'url(#' + gfilter.id + ')',
[elem]
)
} }
} else { } else {
gfilter = getRefElem(elem.getAttribute('filter')) gfilter = getRefElem(elem.getAttribute('filter'))
@@ -586,13 +689,19 @@ const pushGroupProperty = (g, undoable) => {
let chtlist = elem.transform?.baseVal let chtlist = elem.transform?.baseVal
// Don't process gradient transforms // Don't process gradient transforms
if (elem.tagName.includes('Gradient')) { chtlist = null } if (elem.tagName.includes('Gradient')) {
chtlist = null
}
// Hopefully not a problem to add this. Necessary for elements like <desc/> // Hopefully not a problem to add this. Necessary for elements like <desc/>
if (!chtlist) { continue } if (!chtlist) {
continue
}
// Apparently <defs> can get get a transformlist, but we don't want it to have one! // Apparently <defs> can get get a transformlist, but we don't want it to have one!
if (elem.tagName === 'defs') { continue } if (elem.tagName === 'defs') {
continue
}
if (glist.numberOfItems) { if (glist.numberOfItems) {
// TODO: if the group's transform is just a rotate, we can always transfer the // TODO: if the group's transform is just a rotate, we can always transfer the
@@ -621,7 +730,11 @@ const pushGroupProperty = (g, undoable) => {
// get child's old center of rotation // get child's old center of rotation
const cbox = utilsGetBBox(elem) const cbox = utilsGetBBox(elem)
const ceqm = transformListToTransform(chtlist).matrix const ceqm = transformListToTransform(chtlist).matrix
const coldc = transformPoint(cbox.x + cbox.width / 2, cbox.y + cbox.height / 2, ceqm) const coldc = transformPoint(
cbox.x + cbox.width / 2,
cbox.y + cbox.height / 2,
ceqm
)
// sum group and child's angles // sum group and child's angles
const sangle = gangle + cangle const sangle = gangle + cangle
@@ -655,7 +768,8 @@ const pushGroupProperty = (g, undoable) => {
chtlist.appendItem(tr) chtlist.appendItem(tr)
} }
} }
} else { // more complicated than just a rotate } else {
// more complicated than just a rotate
// transfer the group's transform down to each child and then // transfer the group's transform down to each child and then
// call recalculateDimensions() // call recalculateDimensions()
const oldxform = elem.getAttribute('transform') const oldxform = elem.getAttribute('transform')
@@ -673,7 +787,9 @@ const pushGroupProperty = (g, undoable) => {
chtlist.appendItem(newxform) chtlist.appendItem(newxform)
} }
const cmd = recalculateDimensions(elem) const cmd = recalculateDimensions(elem)
if (cmd) { batchCmd.addSubCommand(cmd) } if (cmd) {
batchCmd.addSubCommand(cmd)
}
} }
} }
@@ -693,13 +809,13 @@ const pushGroupProperty = (g, undoable) => {
} }
/** /**
* Converts selected/given `<use>` or child SVG element to a group. * Converts selected/given `<use>` or child SVG element to a group.
* @function module:selected-elem.SvgCanvas#convertToGroup * @function module:selected-elem.SvgCanvas#convertToGroup
* @param {Element} elem * @param {Element} elem
* @fires module:selected-elem.SvgCanvas#event:selected * @fires module:selected-elem.SvgCanvas#event:selected
* @returns {void} * @returns {void}
*/ */
const convertToGroup = (elem) => { const convertToGroup = elem => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
if (!elem) { if (!elem) {
elem = selectedElements[0] elem = selectedElements[0]
@@ -752,7 +868,13 @@ const convertToGroup = (elem) => {
const prev = $elem.previousElementSibling const prev = $elem.previousElementSibling
// Remove <use> element // Remove <use> element
batchCmd.addSubCommand(new RemoveElementCommand($elem, $elem.nextElementSibling, $elem.parentNode)) batchCmd.addSubCommand(
new RemoveElementCommand(
$elem,
$elem.nextElementSibling,
$elem.parentNode
)
)
$elem.remove() $elem.remove()
// See if other elements reference this symbol // See if other elements reference this symbol
@@ -772,7 +894,9 @@ const convertToGroup = (elem) => {
// Duplicate the gradients for Gecko, since they weren't included in the <symbol> // Duplicate the gradients for Gecko, since they weren't included in the <symbol>
if (isGecko()) { if (isGecko()) {
const svgElement = findDefs() const svgElement = findDefs()
const gradients = svgElement.querySelectorAll('linearGradient,radialGradient,pattern') const gradients = svgElement.querySelectorAll(
'linearGradient,radialGradient,pattern'
)
for (let i = 0, im = gradients.length; im > i; i++) { for (let i = 0, im = gradients.length; im > i; i++) {
g.appendChild(gradients[i].cloneNode(true)) g.appendChild(gradients[i].cloneNode(true))
} }
@@ -789,7 +913,9 @@ const convertToGroup = (elem) => {
// Put the dupe gradients back into <defs> (after uniquifying them) // Put the dupe gradients back into <defs> (after uniquifying them)
if (isGecko()) { if (isGecko()) {
const svgElement = findDefs() const svgElement = findDefs()
const elements = g.querySelectorAll('linearGradient,radialGradient,pattern') const elements = g.querySelectorAll(
'linearGradient,radialGradient,pattern'
)
for (let i = 0, im = elements.length; im > i; i++) { for (let i = 0, im = elements.length; im > i; i++) {
svgElement.appendChild(elements[i]) svgElement.appendChild(elements[i])
} }
@@ -805,7 +931,9 @@ const convertToGroup = (elem) => {
// remove symbol/svg element // remove symbol/svg element
const { nextSibling } = elem const { nextSibling } = elem
elem.remove() elem.remove()
batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent)) batchCmd.addSubCommand(
new RemoveElementCommand(elem, nextSibling, parent)
)
} }
batchCmd.addSubCommand(new InsertElementCommand(g)) batchCmd.addSubCommand(new InsertElementCommand(g))
} }
@@ -820,7 +948,7 @@ const convertToGroup = (elem) => {
// recalculate dimensions on the top-level children so that unnecessary transforms // recalculate dimensions on the top-level children so that unnecessary transforms
// are removed // are removed
walkTreePost(g, (n) => { walkTreePost(g, n => {
try { try {
recalculateDimensions(n) recalculateDimensions(n)
} catch (e) { } catch (e) {
@@ -830,8 +958,10 @@ const convertToGroup = (elem) => {
// Give ID for any visible element missing one // Give ID for any visible element missing one
const visElems = g.querySelectorAll(svgCanvas.getVisElems()) const visElems = g.querySelectorAll(svgCanvas.getVisElems())
Array.prototype.forEach.call(visElems, (el) => { Array.prototype.forEach.call(visElems, el => {
if (!el.id) { el.id = svgCanvas.getNextId() } if (!el.id) {
el.id = svgCanvas.getNextId()
}
}) })
svgCanvas.selectOnly([g]) svgCanvas.selectOnly([g])
@@ -848,11 +978,11 @@ const convertToGroup = (elem) => {
} }
/** /**
* Unwraps all the elements in a selected group (`g`) element. This requires * Unwraps all the elements in a selected group (`g`) element. This requires
* significant recalculations to apply group's transforms, etc. to its children. * significant recalculations to apply group's transforms, etc. to its children.
* @function module:selected-elem.SvgCanvas#ungroupSelectedElement * @function module:selected-elem.SvgCanvas#ungroupSelectedElement
* @returns {void} * @returns {void}
*/ */
const ungroupSelectedElement = () => { const ungroupSelectedElement = () => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const dataStorage = svgCanvas.getDataStorage() const dataStorage = svgCanvas.getDataStorage()
@@ -882,7 +1012,9 @@ const ungroupSelectedElement = () => {
if (g.tagName === 'g' || g.tagName === 'a') { if (g.tagName === 'g' || g.tagName === 'a') {
const batchCmd = new BatchCommand('Ungroup Elements') const batchCmd = new BatchCommand('Ungroup Elements')
const cmd = pushGroupProperty(g, true) const cmd = pushGroupProperty(g, true)
if (cmd) { batchCmd.addSubCommand(cmd) } if (cmd) {
batchCmd.addSubCommand(cmd)
}
const parent = g.parentNode const parent = g.parentNode
const anchor = g.nextSibling const anchor = g.nextSibling
@@ -897,13 +1029,17 @@ const ungroupSelectedElement = () => {
// Remove child title elements // Remove child title elements
if (elem.tagName === 'title') { if (elem.tagName === 'title') {
const { nextSibling } = elem const { nextSibling } = elem
batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, oldParent)) batchCmd.addSubCommand(
new RemoveElementCommand(elem, nextSibling, oldParent)
)
elem.remove() elem.remove()
continue continue
} }
children[i++] = parent.insertBefore(elem, anchor) children[i++] = parent.insertBefore(elem, anchor)
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)) batchCmd.addSubCommand(
new MoveElementCommand(elem, oldNextSibling, oldParent)
)
} }
// remove the group from the selection // remove the group from the selection
@@ -914,20 +1050,22 @@ const ungroupSelectedElement = () => {
g.remove() g.remove()
batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent)) batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent))
if (!batchCmd.isEmpty()) { svgCanvas.addCommandToHistory(batchCmd) } if (!batchCmd.isEmpty()) {
svgCanvas.addCommandToHistory(batchCmd)
}
// update selection // update selection
svgCanvas.addToSelection(children) svgCanvas.addToSelection(children)
} }
} }
/** /**
* Updates the editor canvas width/height/position after a zoom has occurred. * Updates the editor canvas width/height/position after a zoom has occurred.
* @function module:svgcanvas.SvgCanvas#updateCanvas * @function module:svgcanvas.SvgCanvas#updateCanvas
* @param {Float} w - Float with the new width * @param {Float} w - Float with the new width
* @param {Float} h - Float with the new height * @param {Float} h - Float with the new height
* @fires module:svgcanvas.SvgCanvas#event:ext_canvasUpdated * @fires module:svgcanvas.SvgCanvas#event:ext_canvasUpdated
* @returns {module:svgcanvas.CanvasInfo} * @returns {module:svgcanvas.CanvasInfo}
*/ */
const updateCanvas = (w, h) => { const updateCanvas = (w, h) => {
svgCanvas.getSvgRoot().setAttribute('width', w) svgCanvas.getSvgRoot().setAttribute('width', w)
svgCanvas.getSvgRoot().setAttribute('height', h) svgCanvas.getSvgRoot().setAttribute('height', h)
@@ -935,8 +1073,8 @@ const updateCanvas = (w, h) => {
const bg = document.getElementById('canvasBackground') const bg = document.getElementById('canvasBackground')
const oldX = Number(svgCanvas.getSvgContent().getAttribute('x')) const oldX = Number(svgCanvas.getSvgContent().getAttribute('x'))
const oldY = Number(svgCanvas.getSvgContent().getAttribute('y')) const oldY = Number(svgCanvas.getSvgContent().getAttribute('y'))
const x = ((w - svgCanvas.contentW * zoom) / 2) const x = (w - svgCanvas.contentW * zoom) / 2
const y = ((h - svgCanvas.contentH * zoom) / 2) const y = (h - svgCanvas.contentH * zoom) / 2
assignAttributes(svgCanvas.getSvgContent(), { assignAttributes(svgCanvas.getSvgContent(), {
width: svgCanvas.contentW * zoom, width: svgCanvas.contentW * zoom,
@@ -961,43 +1099,57 @@ const updateCanvas = (w, h) => {
}) })
} }
svgCanvas.selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')') svgCanvas.selectorManager.selectorParentGroup.setAttribute(
'transform',
'translate(' + x + ',' + y + ')'
)
/** /**
* Invoked upon updates to the canvas. * Invoked upon updates to the canvas.
* @event module:svgcanvas.SvgCanvas#event:ext_canvasUpdated * @event module:svgcanvas.SvgCanvas#event:ext_canvasUpdated
* @type {PlainObject} * @type {PlainObject}
* @property {Integer} new_x * @property {Integer} new_x
* @property {Integer} new_y * @property {Integer} new_y
* @property {string} old_x (Of Integer) * @property {string} old_x (Of Integer)
* @property {string} old_y (Of Integer) * @property {string} old_y (Of Integer)
* @property {Integer} d_x * @property {Integer} d_x
* @property {Integer} d_y * @property {Integer} d_y
*/ */
svgCanvas.runExtensions( svgCanvas.runExtensions(
'canvasUpdated', 'canvasUpdated',
/** /**
* @type {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated} * @type {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated}
*/ */
{ new_x: x, new_y: y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY } {
new_x: x,
new_y: y,
old_x: oldX,
old_y: oldY,
d_x: x - oldX,
d_y: y - oldY
}
) )
return { x, y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY } return { x, y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY }
} }
/** /**
* Select the next/previous element within the current layer. * Select the next/previous element within the current layer.
* @function module:svgcanvas.SvgCanvas#cycleElement * @function module:svgcanvas.SvgCanvas#cycleElement
* @param {boolean} next - true = next and false = previous element * @param {boolean} next - true = next and false = previous element
* @fires module:svgcanvas.SvgCanvas#event:selected * @fires module:svgcanvas.SvgCanvas#event:selected
* @returns {void} * @returns {void}
*/ */
const cycleElement = (next) => { const cycleElement = next => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
const currentGroup = svgCanvas.getCurrentGroup() const currentGroup = svgCanvas.getCurrentGroup()
let num let num
const curElem = selectedElements[0] const curElem = selectedElements[0]
let elem = false let elem = false
const allElems = getVisibleElements(currentGroup || svgCanvas.getCurrentDrawing().getCurrentLayer()) const allElems = getVisibleElements(
if (!allElems.length) { return } currentGroup || svgCanvas.getCurrentDrawing().getCurrentLayer()
)
if (!allElems.length) {
return
}
if (!curElem) { if (!curElem) {
num = next ? allElems.length - 1 : 0 num = next ? allElems.length - 1 : 0
elem = allElems[num] elem = allElems[num]

29
src/svgcanvas/selection.js
View File

@@ -28,6 +28,15 @@ let svgCanvas = null
*/ */
export const init = (canvas) => { export const init = (canvas) => {
svgCanvas = canvas svgCanvas = canvas
svgCanvas.getMouseTarget = getMouseTargetMethod
svgCanvas.clearSelection = clearSelectionMethod
svgCanvas.addToSelection = addToSelectionMethod
svgCanvas.getIntersectionList = getIntersectionListMethod
svgCanvas.runExtensions = runExtensionsMethod
svgCanvas.groupSvgElem = groupSvgElem
svgCanvas.prepareSvg = prepareSvg
svgCanvas.recalculateAllSelectedDimensions = recalculateAllSelectedDimensions
svgCanvas.setRotationAngle = setRotationAngle
} }
/** /**
@@ -37,7 +46,7 @@ export const init = (canvas) => {
* @type {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} * @type {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection}
* @fires module:selection.SvgCanvas#event:selected * @fires module:selection.SvgCanvas#event:selected
*/ */
export const clearSelectionMethod = (noCall) => { const clearSelectionMethod = (noCall) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
selectedElements.forEach((elem) => { selectedElements.forEach((elem) => {
if (!elem) { if (!elem) {
@@ -59,7 +68,7 @@ export const clearSelectionMethod = (noCall) => {
* @type {module:path.EditorContext#addToSelection} * @type {module:path.EditorContext#addToSelection}
* @fires module:selection.SvgCanvas#event:selected * @fires module:selection.SvgCanvas#event:selected
*/ */
export const addToSelectionMethod = (elemsToAdd, showGrips) => { const addToSelectionMethod = (elemsToAdd, showGrips) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
if (!elemsToAdd.length) { if (!elemsToAdd.length) {
return return
@@ -134,7 +143,7 @@ export const addToSelectionMethod = (elemsToAdd, showGrips) => {
* @name module:svgcanvas.SvgCanvas#getMouseTarget * @name module:svgcanvas.SvgCanvas#getMouseTarget
* @type {module:path.EditorContext#getMouseTarget} * @type {module:path.EditorContext#getMouseTarget}
*/ */
export const getMouseTargetMethod = (evt) => { const getMouseTargetMethod = (evt) => {
if (!evt) { if (!evt) {
return null return null
} }
@@ -211,7 +220,7 @@ export const getMouseTargetMethod = (evt) => {
* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus. * @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.
*/ */
/* eslint-enable max-len */ /* eslint-enable max-len */
export const runExtensionsMethod = ( const runExtensionsMethod = (
action, action,
vars, vars,
returnArray returnArray
@@ -248,7 +257,7 @@ export const runExtensionsMethod = (
* @param {Element} parent - The parent DOM element to search within * @param {Element} parent - The parent DOM element to search within
* @returns {ElementAndBBox[]} An array with objects that include: * @returns {ElementAndBBox[]} An array with objects that include:
*/ */
export const getVisibleElementsAndBBoxes = (parent) => { const getVisibleElementsAndBBoxes = (parent) => {
if (!parent) { if (!parent) {
const svgContent = svgCanvas.getSvgContent() const svgContent = svgCanvas.getSvgContent()
parent = svgContent.children // Prevent layers from being included parent = svgContent.children // Prevent layers from being included
@@ -275,7 +284,7 @@ export const getVisibleElementsAndBBoxes = (parent) => {
* @param {SVGRect} rect * @param {SVGRect} rect
* @returns {Element[]|NodeList} Bbox elements * @returns {Element[]|NodeList} Bbox elements
*/ */
export const getIntersectionListMethod = (rect) => { const getIntersectionListMethod = (rect) => {
const zoom = svgCanvas.getZoom() const zoom = svgCanvas.getZoom()
if (!svgCanvas.getRubberBox()) { if (!svgCanvas.getRubberBox()) {
return null return null
@@ -338,7 +347,7 @@ export const getIntersectionListMethod = (rect) => {
* @param {Element} elem - SVG element to wrap * @param {Element} elem - SVG element to wrap
* @returns {void} * @returns {void}
*/ */
export const groupSvgElem = (elem) => { const groupSvgElem = (elem) => {
const dataStorage = svgCanvas.getDataStorage() const dataStorage = svgCanvas.getDataStorage()
const g = document.createElementNS(NS.SVG, 'g') const g = document.createElementNS(NS.SVG, 'g')
elem.replaceWith(g) elem.replaceWith(g)
@@ -353,7 +362,7 @@ export const groupSvgElem = (elem) => {
* @param {XMLDocument} newDoc - The SVG DOM document * @param {XMLDocument} newDoc - The SVG DOM document
* @returns {void} * @returns {void}
*/ */
export const prepareSvg = (newDoc) => { const prepareSvg = (newDoc) => {
svgCanvas.sanitizeSvg(newDoc.documentElement) svgCanvas.sanitizeSvg(newDoc.documentElement)
// convert paths into absolute commands // convert paths into absolute commands
@@ -374,7 +383,7 @@ export const prepareSvg = (newDoc) => {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const setRotationAngle = (val, preventUndo) => { const setRotationAngle = (val, preventUndo) => {
const selectedElements = svgCanvas.getSelectedElements() const selectedElements = svgCanvas.getSelectedElements()
// ensure val is the proper type // ensure val is the proper type
val = Number.parseFloat(val) val = Number.parseFloat(val)
@@ -444,7 +453,7 @@ export const setRotationAngle = (val, preventUndo) => {
* @fires module:svgcanvas.SvgCanvas#event:changed * @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void} * @returns {void}
*/ */
export const recalculateAllSelectedDimensions = () => { const recalculateAllSelectedDimensions = () => {
const text = const text =
svgCanvas.getCurrentResizeMode() === 'none' ? 'position' : 'size' svgCanvas.getCurrentResizeMode() === 'none' ? 'position' : 'size'
const batchCmd = new BatchCommand(text) const batchCmd = new BatchCommand(text)

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

File diff suppressed because it is too large Load Diff

1154
src/svgcanvas/svgcanvas.js
View File

File diff suppressed because it is too large Load Diff