Skip to content

Commit

Permalink
fix issue #974
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfhenon
jfhenon committed Sep 15, 2024
1 parent ea80155 commit 80c3bf7
Show file tree
Hide file tree
Showing 2 changed files with 368 additions and 710 deletions.
233 changes: 136 additions & 97 deletions packages/svgcanvas/core/coords.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,97 @@
*/

import {
snapToGrid, assignAttributes, getBBox, getRefElem, findDefs
snapToGrid,
assignAttributes,
getBBox,
getRefElem,
findDefs
} from './utilities.js'
import {
transformPoint, transformListToTransform, matrixMultiply, transformBox, getTransformList
transformPoint,
transformListToTransform,
matrixMultiply,
transformBox,
getTransformList
} from './math.js'

// this is how we map paths to our preferred relative segment types
const pathMap = [
0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a',
'H', 'h', 'V', 'v', 'S', 's', 'T', 't'
]

/**
* @interface module:coords.EditorContext
*/
/**
* @function module:coords.EditorContext#getGridSnapping
* @returns {boolean}
*/
/**
* @function module:coords.EditorContext#getSvgRoot
* @returns {SVGSVGElement}
*/

let svgCanvas = null

/**
* @function module:coords.init
* @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext
* @returns {void}
*/
export const init = (canvas) => {
* Initialize the coords module with the SVG canvas.
* @function module:coords.init
* @param {Object} canvas - The SVG canvas object
* @returns {void}
*/
export const init = canvas => {
svgCanvas = canvas
}

// This is how we map path segment types to their corresponding commands
const pathMap = [
0,
'z',
'M',
'm',
'L',
'l',
'C',
'c',
'Q',
'q',
'A',
'a',
'H',
'h',
'V',
'v',
'S',
's',
'T',
't'
]

/**
* Applies coordinate changes to an element based on the given matrix.
* @name module:coords.remapElement
* @type {module:path.EditorContext#remapElement}
*/
* @function module:coords.remapElement
* @param {Element} selected - The DOM element to remap
* @param {Object} changes - An object containing attribute changes
* @param {SVGMatrix} m - The transformation matrix
* @returns {void}
*/
export const remapElement = (selected, changes, m) => {
const remap = (x, y) => transformPoint(x, y, m)
const scalew = (w) => m.a * w
const scaleh = (h) => m.d * h
const doSnapping = svgCanvas.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg'
const scalew = w => m.a * w
const scaleh = h => m.d * h
const doSnapping =
svgCanvas.getGridSnapping() &&
selected.parentNode.parentNode.localName === 'svg'
const finishUp = () => {
if (doSnapping) {
Object.entries(changes).forEach(([o, value]) => {
changes[o] = snapToGrid(value)
Object.entries(changes).forEach(([attr, value]) => {
changes[attr] = snapToGrid(value)
})
}
assignAttributes(selected, changes, 1000, true)
}
const box = getBBox(selected);
const box = getBBox(selected)

['fill', 'stroke'].forEach((type) => {
// Handle gradients and patterns
;['fill', 'stroke'].forEach(type => {
const attrVal = selected.getAttribute(type)
if (attrVal?.startsWith('url(') && (m.a < 0 || m.d < 0)) {
const grad = getRefElem(attrVal)
const newgrad = grad.cloneNode(true)
if (m.a < 0) {
// flip x
// Flip x
const x1 = newgrad.getAttribute('x1')
const x2 = newgrad.getAttribute('x2')
newgrad.setAttribute('x1', -(x1 - 1))
newgrad.setAttribute('x2', -(x2 - 1))
}

if (m.d < 0) {
// flip y
// Flip y
const y1 = newgrad.getAttribute('y1')
const y2 = newgrad.getAttribute('y2')
newgrad.setAttribute('y1', -(y1 - 1))
Expand All @@ -87,34 +108,22 @@ export const remapElement = (selected, changes, m) => {
})

const elName = selected.tagName
if (elName === 'g' || elName === 'text' || elName === 'tspan' || elName === 'use') {
// if it was a translate, then just update x,y
if (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && (m.e !== 0 || m.f !== 0)) {
// [T][M] = [M][T']
// therefore [T'] = [M_inv][T][M]
const existing = transformListToTransform(selected).matrix
const tNew = matrixMultiply(existing.inverse(), m, existing)
changes.x = Number.parseFloat(changes.x) + tNew.e
changes.y = Number.parseFloat(changes.y) + tNew.f
} else {
// we just absorb all matrices into the element and don't do any remapping
const chlist = getTransformList(selected)
const mt = svgCanvas.getSvgRoot().createSVGTransform()
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
chlist.clear()
chlist.appendItem(mt)
}

// **Skip remapping for '<use>' elements**
if (elName === 'use') {
// Do not remap '<use>' elements; transformations are handled via 'transform' attribute
return
}

// now we have a set of changes and an applied reduced transform list
// we apply the changes directly to the DOM
// Now we have a set of changes and an applied reduced transform list
// We apply the changes directly to the DOM
switch (elName) {
case 'foreignObject':
case 'rect':
case 'image': {
// Allow images to be inverted (give them matrix when flipped)
// Allow images to be inverted (give them matrix when flipped)
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
// Convert to matrix
// Convert to matrix
const chlist = getTransformList(selected)
const mt = svgCanvas.getSvgRoot().createSVGTransform()
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m))
Expand All @@ -131,66 +140,69 @@ export const remapElement = (selected, changes, m) => {
}
finishUp()
break
} case 'ellipse': {
}
case 'ellipse': {
const c = remap(changes.cx, changes.cy)
changes.cx = c.x
changes.cy = c.y
changes.rx = scalew(changes.rx)
changes.ry = scaleh(changes.ry)
changes.rx = Math.abs(changes.rx)
changes.ry = Math.abs(changes.ry)
changes.rx = Math.abs(scalew(changes.rx))
changes.ry = Math.abs(scaleh(changes.ry))
finishUp()
break
} case 'circle': {
}
case 'circle': {
const c = remap(changes.cx, changes.cy)
changes.cx = c.x
changes.cy = c.y
// take the minimum of the new selected box's dimensions for the new circle radius
// Take the minimum of the new dimensions for the new circle radius
const tbox = transformBox(box.x, box.y, box.width, box.height, m)
const w = tbox.tr.x - tbox.tl.x; const h = tbox.bl.y - tbox.tl.y
changes.r = Math.min(w / 2, h / 2)

if (changes.r) { changes.r = Math.abs(changes.r) }
const w = tbox.tr.x - tbox.tl.x
const h = tbox.bl.y - tbox.tl.y
changes.r = Math.min(Math.abs(w / 2), Math.abs(h / 2))
finishUp()
break
} case 'line': {
}
case 'line': {
const pt1 = remap(changes.x1, changes.y1)
const pt2 = remap(changes.x2, changes.y2)
changes.x1 = pt1.x
changes.y1 = pt1.y
changes.x2 = pt2.x
changes.y2 = pt2.y
} // Fallthrough
finishUp()
break
}
case 'text':
case 'tspan':
case 'use': {
case 'tspan': {
const pt = remap(changes.x, changes.y)
changes.x = pt.x
changes.y = pt.y
finishUp()
break
} case 'g': {
}
case 'g': {
const dataStorage = svgCanvas.getDataStorage()
const gsvg = dataStorage.get(selected, 'gsvg')
if (gsvg) {
assignAttributes(gsvg, changes, 1000, true)
}
break
} case 'polyline':
}
case 'polyline':
case 'polygon': {
changes.points.forEach((pt) => {
changes.points.forEach(pt => {
const { x, y } = remap(pt.x, pt.y)
pt.x = x
pt.y = y
})

// const len = changes.points.length;
let pstr = ''
changes.points.forEach((pt) => {
pstr += pt.x + ',' + pt.y + ' '
})
const pstr = changes.points.map(pt => `${pt.x},${pt.y}`).join(' ')
selected.setAttribute('points', pstr)
break
} case 'path': {
}
case 'path': {
// Handle path segments
const segList = selected.pathSegList
let len = segList.numberOfItems
const len = segList.numberOfItems
changes.d = []
for (let i = 0; i < len; ++i) {
const seg = segList.getItem(i)
Expand All @@ -210,7 +222,6 @@ export const remapElement = (selected, changes, m) => {
}
}

len = changes.d.length
const firstseg = changes.d[0]
let currentpt
if (len > 0) {
Expand All @@ -221,11 +232,10 @@ export const remapElement = (selected, changes, m) => {
for (let i = 1; i < len; ++i) {
const seg = changes.d[i]
const { type } = seg
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
// if relative, we want to scalew, scaleh
if (type % 2 === 0) { // absolute
const thisx = (seg.x !== undefined) ? seg.x : currentpt.x // for V commands
const thisy = (seg.y !== undefined) ? seg.y : currentpt.y // for H commands
// If absolute or first segment, remap x, y, x1, y1, x2, y2
if (type % 2 === 0) {
const thisx = seg.x !== undefined ? seg.x : currentpt.x // For V commands
const thisy = seg.y !== undefined ? seg.y : currentpt.y // For H commands
const pt = remap(thisx, thisy)
const pt1 = remap(seg.x1, seg.y1)
const pt2 = remap(seg.x2, seg.y2)
Expand All @@ -237,7 +247,8 @@ export const remapElement = (selected, changes, m) => {
seg.y2 = pt2.y
seg.r1 = scalew(seg.r1)
seg.r2 = scaleh(seg.r2)
} else { // relative
} else {
// For relative segments, scale x, y, x1, y1, x2, y2
seg.x = scalew(seg.x)
seg.y = scaleh(seg.y)
seg.x1 = scalew(seg.x1)
Expand All @@ -247,10 +258,10 @@ export const remapElement = (selected, changes, m) => {
seg.r1 = scalew(seg.r1)
seg.r2 = scaleh(seg.r2)
}
} // for each segment
}

let dstr = ''
changes.d.forEach((seg) => {
changes.d.forEach(seg => {
const { type } = seg
dstr += pathMap[type]
switch (type) {
Expand All @@ -272,27 +283,55 @@ export const remapElement = (selected, changes, m) => {
break
case 7: // relative cubic (c)
case 6: // absolute cubic (C)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
seg.x + ',' + seg.y + ' '
dstr +=
seg.x1 +
',' +
seg.y1 +
' ' +
seg.x2 +
',' +
seg.y2 +
' ' +
seg.x +
',' +
seg.y +
' '
break
case 9: // relative quad (q)
case 8: // absolute quad (Q)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' '
break
case 11: // relative elliptical arc (a)
case 10: // absolute elliptical arc (A)
dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' '
dstr +=
seg.r1 +
',' +
seg.r2 +
' ' +
seg.angle +
' ' +
Number(seg.largeArcFlag) +
' ' +
Number(seg.sweepFlag) +
' ' +
seg.x +
',' +
seg.y +
' '
break
case 17: // relative smooth cubic (s)
case 16: // absolute smooth cubic (S)
dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' '
break
default:
break
}
})

selected.setAttribute('d', dstr)
break
}
default:
break
}
}
Loading

0 comments on commit 80c3bf7

Please sign in to comment.