diff options
| -rw-r--r-- | spec/spec/types/Matrix.js | 5 | ||||
| -rw-r--r-- | spec/spec/utils/utils.js | 17 | ||||
| -rw-r--r-- | src/modules/optional/css.js | 11 | ||||
| -rw-r--r-- | src/types/Matrix.js | 29 | ||||
| -rw-r--r-- | src/utils/utils.js | 7 | ||||
| -rw-r--r-- | svg.js.d.ts | 28 |
6 files changed, 38 insertions, 59 deletions
diff --git a/spec/spec/types/Matrix.js b/spec/spec/types/Matrix.js index f395c43..36882a9 100644 --- a/spec/spec/types/Matrix.js +++ b/spec/spec/types/Matrix.js @@ -594,6 +594,11 @@ describe('Matrix.js', () => { svg.screenCTM() expect(spy).toHaveBeenCalled() }) + + it('does not throw and returns identity matrix if element is not rendered', () => { + const canvas = SVG().viewbox(0, 0, 0, 0) + expect(canvas.screenCTM()).toEqual(new Matrix()) + }) }) }) }) diff --git a/spec/spec/utils/utils.js b/spec/spec/utils/utils.js index 0b3015e..314c757 100644 --- a/spec/spec/utils/utils.js +++ b/spec/spec/utils/utils.js @@ -5,7 +5,6 @@ import { filter, radians, degrees, - camelCase, unCamelCase, capitalize, proportionalSize, @@ -81,22 +80,6 @@ describe('utils.js', function () { }) }) - describe('camelCase()', function () { - it('converts dash-case and PascalCase to camelCase', function () { - var dash1 = 'dash-1' - var dashTwo = 'dash-two' - var camelOne = 'camelOne' - var pascalOne = 'PascalOne' - var mixOne = 'mix-One' - - expect(camelCase(dash1)).toBe('dash1') - expect(camelCase(dashTwo)).toBe('dashTwo') - expect(camelCase(camelOne)).toBe('camelone') - expect(camelCase(pascalOne)).toBe('pascalone') - expect(camelCase(mixOne)).toBe('mixOne') - }) - }) - describe('unCamelCase()', function () { it('converts camelCase to dash-case', function () { var dash1 = 'dash-1' diff --git a/src/modules/optional/css.js b/src/modules/optional/css.js index 49a467b..1c5ed40 100644 --- a/src/modules/optional/css.js +++ b/src/modules/optional/css.js @@ -1,9 +1,6 @@ -import { camelCase } from '../../utils/utils.js' import { isBlank } from '../core/regex.js' import { registerMethods } from '../../utils/methods.js' -const camelCaseWithVars = (str) => (str.startsWith('--') ? str : camelCase(str)) - // Dynamic style generator export function css(style, val) { const ret = {} @@ -25,7 +22,7 @@ export function css(style, val) { // get style properties as array if (Array.isArray(style)) { for (const name of style) { - const cased = camelCaseWithVars(name) + const cased = name ret[name] = this.node.style.getPropertyValue(cased) } return ret @@ -33,7 +30,7 @@ export function css(style, val) { // get style for property if (typeof style === 'string') { - return this.node.style.getPropertyValue(camelCaseWithVars(style)) + return this.node.style.getPropertyValue(style) } // set styles in object @@ -41,7 +38,7 @@ export function css(style, val) { for (const name in style) { // set empty string if null/undefined/'' was given this.node.style.setProperty( - camelCaseWithVars(name), + name, style[name] == null || isBlank.test(style[name]) ? '' : style[name] ) } @@ -51,7 +48,7 @@ export function css(style, val) { // set style for property if (arguments.length === 2) { this.node.style.setProperty( - camelCaseWithVars(style), + style, val == null || isBlank.test(val) ? '' : val ) } diff --git a/src/types/Matrix.js b/src/types/Matrix.js index 760f002..f409a50 100644 --- a/src/types/Matrix.js +++ b/src/types/Matrix.js @@ -520,17 +520,24 @@ export function ctm() { } export function screenCTM() { - /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537 - This is needed because FF does not return the transformation matrix - for the inner coordinate system when getScreenCTM() is called on nested svgs. - However all other Browsers do that */ - if (typeof this.isRoot === 'function' && !this.isRoot()) { - const rect = this.rect(1, 1) - const m = rect.node.getScreenCTM() - rect.remove() - return new Matrix(m) - } - return new Matrix(this.node.getScreenCTM()) + try { + /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537 + This is needed because FF does not return the transformation matrix + for the inner coordinate system when getScreenCTM() is called on nested svgs. + However all other Browsers do that */ + if (typeof this.isRoot === 'function' && !this.isRoot()) { + const rect = this.rect(1, 1) + const m = rect.node.getScreenCTM() + rect.remove() + return new Matrix(m) + } + return new Matrix(this.node.getScreenCTM()) + } catch (e) { + console.warn( + `Cannot get CTM from SVG node ${this.node.nodeName}. Is the element rendered?` + ) + return new Matrix() + } } register(Matrix, 'Matrix') diff --git a/src/utils/utils.js b/src/utils/utils.js index 90ef548..edd98b6 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -36,13 +36,6 @@ export function degrees(r) { return ((r * 180) / Math.PI) % 360 } -// Convert dash-separated-string to camelCase -export function camelCase(s) { - return s.toLowerCase().replace(/-(.)/g, function (m, g) { - return g.toUpperCase() - }) -} - // Convert camel cased string to dash separated export function unCamelCase(s) { return s.replace(/([A-Z])/g, function (m, g) { diff --git a/svg.js.d.ts b/svg.js.d.ts index a91629e..d941fed 100644 --- a/svg.js.d.ts +++ b/svg.js.d.ts @@ -1340,35 +1340,29 @@ declare module '@svgdotjs/svg.js' { } interface Sugar { - fill(): any + fill(): string fill(fill: FillData): this fill(color: string): this fill(pattern: Element): this fill(image: Image): this - stroke(): any + stroke(): string stroke(stroke: StrokeData): this stroke(color: string): this + matrix(): Matrix matrix( - a?: number, - b?: number, - c?: number, - d?: number, - e?: number, - f?: number - ): this - matrix( - mat: MatrixAlias, - b?: number, - c?: number, - d?: number, - e?: number, - f?: number + a: number, + b: number, + c: number, + d: number, + e: number, + f: number ): this + matrix(mat: MatrixAlias): this rotate(degrees: number, cx?: number, cy?: number): this skew(skewX?: number, skewY?: number, cx?: number, cy?: number): this scale(scaleX?: number, scaleY?: number, cx?: number, cy?: number): this translate(x: number, y: number): this - shear(lam: Matrix, cx: number, cy: number): this + shear(lam: number, cx: number, cy: number): this relative(x: number, y: number): this flip(direction?: string, around?: number): this flip(around: number): this |