diff --git a/bin/build.cjs b/bin/build.cjs index 9761117..8d0be34 100644 --- a/bin/build.cjs +++ b/bin/build.cjs @@ -18,9 +18,12 @@ import $$ from "../src/index.js"; window.$$ = $$; `.trimStart(); Readable.from([browser_index_js]).pipe( - fs.createWriteStream(path.resolve(__dirname, "../dist/browser_index.js"), { - flags: "w", - }) + fs.createWriteStream( + path.resolve(__dirname, `../dist/${BROWSER_INDEX_FILENAME}.js`), + { + flags: "w", + } + ) ); await new Promise((resolve, reject) => diff --git a/doc/API.md b/doc/API.md index 937d3b6..a715a23 100644 --- a/doc/API.md +++ b/doc/API.md @@ -174,6 +174,20 @@ svg 엘리먼트에 총 3개의 `SVGTransform`을 순서대로 추가합니다. 2번 `SVGTransform` 객체를 반환합니다. 1번, 3번 `SVGTranform` 객체는 회전 중심을 설정합니다. +## \$\$initScaleTransform + +- [source](../src/initScaleTransform/initScaleTransform.index.js) +- [detail](../src/initScaleTransform/README.md) + +svg 엘리먼트에 총 3개의 `SVGTransform`을 순서대로 추가합니다. + +1. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`: `0`) +2. `SVGTransform.SVG_TRANSFORM_SCALE` 타입의 `SVGTransform` (`index`: `1`) +3. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`: `2`) + +2번 `SVGTransform` 객체를 반환합니다. +1번, 3번 `SVGTranform` 객체는 scale 중심을 설정합니다. + ## \$\$initTranslateTransform - [source](../src/initTranslateTransform/initTranslateTransform.index.js) diff --git a/package-lock.json b/package-lock.json index e55f9de..eb8e0ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fxsvg", - "version": "0.1.2", + "version": "0.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f34d23b..530b7cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fxsvg", - "version": "0.1.2", + "version": "0.2.0", "description": "Functional SVG Handling Library", "type": "module", "main": "./src/index.js", diff --git a/src/fxsvg.js b/src/fxsvg.js index 37553ca..5320481 100644 --- a/src/fxsvg.js +++ b/src/fxsvg.js @@ -20,6 +20,7 @@ import { $$getCenterPoint } from "./getCenterPoint/getCenterPoint.index.js"; import { $$getSVG, $$setSVG } from "./getSetSVG/getSetSVG.index.js"; import { $$initMatrixTransform } from "./initMatrixTransform/initMatrixTransform.index.js"; import { $$initRotateTransform } from "./initRotateTransform/initRotateTransform.index.js"; +import { $$initScaleTransform } from "./initScaleTransform/initScaleTransform.index.js"; import { $$initTranslateTransform } from "./initTranslateTransform/initTranslateTransform.index.js"; import { $$isMatrixSVGTransform } from "./isMatrixSVGTransform/isMatrixSVGTransform.index.js"; import { $$isRotateSVGTransform } from "./isRotateSVGTransform/isRotateSVGTransform.index.js"; @@ -56,6 +57,7 @@ export const FxSVG = { setSVG: $$setSVG, initMatrixTransform: $$initMatrixTransform, initRotateTransform: $$initRotateTransform, + initScaleTransform: $$initScaleTransform, initTranslateTransform: $$initTranslateTransform, isMatrixSVGTransform: $$isMatrixSVGTransform, isRotateSVGTransform: $$isRotateSVGTransform, diff --git a/src/getBoxPoints/getBoxPoints.spec.js b/src/getBoxPoints/getBoxPoints.spec.js index ba5ea9e..26b698d 100644 --- a/src/getBoxPoints/getBoxPoints.spec.js +++ b/src/getBoxPoints/getBoxPoints.spec.js @@ -131,7 +131,7 @@ describe(`$$getBoxPoints`, function () { $el.setAttributeNS( null, "transform", - makeRandomTransformAttributeValue(1) + makeRandomTransformAttributeValue(1, 10, () => makeRandomInt(-10, 10)) ); const { transformed, bounding } = $$getBoxPoints()($el); diff --git a/src/index.js b/src/index.js index 84507ba..4e4335a 100644 --- a/src/index.js +++ b/src/index.js @@ -20,6 +20,7 @@ export { $$getCenterPoint } from "./getCenterPoint/getCenterPoint.index.js"; export { $$getSVG, $$setSVG } from "./getSetSVG/getSetSVG.index.js"; export { $$initMatrixTransform } from "./initMatrixTransform/initMatrixTransform.index.js"; export { $$initRotateTransform } from "./initRotateTransform/initRotateTransform.index.js"; +export { $$initScaleTransform } from "./initScaleTransform/initScaleTransform.index.js"; export { $$initTranslateTransform } from "./initTranslateTransform/initTranslateTransform.index.js"; export { $$isMatrixSVGTransform } from "./isMatrixSVGTransform/isMatrixSVGTransform.index.js"; export { $$isRotateSVGTransform } from "./isRotateSVGTransform/isRotateSVGTransform.index.js"; diff --git a/src/initMatrixTransform/README.md b/src/initMatrixTransform/README.md index 3f8bb72..7aef8ad 100644 --- a/src/initMatrixTransform/README.md +++ b/src/initMatrixTransform/README.md @@ -4,8 +4,11 @@ - [test](./initMatrixTransform.spec.js) svg 엘리먼트에 `SVGTransform.SVG_TRANSFORM_MATRIX` 타입의 `SVGTransform` 을 추가합니다. -`SVGTransform` 은 항상 `transform.baseVal` 에 해당하는 `SVGTransformList` 의 `0` 인덱스에 추가됩니다. -`SVGTransformList` 는 역순으로 적용되기 때문에 추가된 `SVGTransform` 은 가장 마지막에 적용됩니다. +`SVGTransform` 은 항상 `transform.baseVal` 에 해당하는 `SVGTransformList` 의 전달한 `index` 에 추가됩니다. +`SVGTransformList` 는 역순으로 적용됩니다. + +`matrix` 값을 설정할 수 있으며 설정하지 않는 경우 Identity Matrix 로 초기화됩니다. +`SVGTransform`을 삽입할 `index` 를 설정할 수 있으며 설정하지 않는 경우 `0` 으로 초기화됩니다. [`` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다. @@ -50,12 +53,14 @@ console.log($$getBaseTransformList($el)); // matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} const matrix = $$createSVGMatrix()({ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }); -$$initMatrixTransform()($el, { matrix }); +$$initMatrixTransform()($el, { matrix, index: 1 }); +// index 를 1 로 설정했기 때문에 +// SVGTransformList 의 1 인덱스 위치에 SVGTransform 삽입 console.log($$getBaseTransformList($el)); // SVGTransformList {0: SVGTransform, 1: SVGTransform, length: 2, numberOfItems: 2} -// 0: SVGTransform {type: 1, matrix: SVGMatrix, angle: 0} -// matrix: SVGMatrix {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6} -// 1: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} +// 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} +// 1: SVGTransform {type: 1, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6} ``` diff --git a/src/initMatrixTransform/initMatrixTransform.index.js b/src/initMatrixTransform/initMatrixTransform.index.js index 82703aa..25f515a 100644 --- a/src/initMatrixTransform/initMatrixTransform.index.js +++ b/src/initMatrixTransform/initMatrixTransform.index.js @@ -1,9 +1,13 @@ +import { $$createSVGMatrix } from "../createSVGMatrix/createSVGMatrix.index.js"; import { $$createSVGTransformMatrix } from "../createSVGTransformMatrix/createSVGTransformMatrix.index.js"; import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js"; import { $$getSVG } from "../getSetSVG/getSetSVG.index.js"; -export const $$initMatrixTransform = ($svg = $$getSVG()) => ($el, { matrix }) => +export const $$initMatrixTransform = ($svg = $$getSVG()) => ( + $el, + { matrix = $$createSVGMatrix()(), index = 0 } = {} +) => $$getBaseTransformList($el).insertItemBefore( $$createSVGTransformMatrix($svg)({ matrix }), - 0 + index ); diff --git a/src/initMatrixTransform/initMatrixTransform.spec.js b/src/initMatrixTransform/initMatrixTransform.spec.js index b2ace55..74be1c0 100644 --- a/src/initMatrixTransform/initMatrixTransform.spec.js +++ b/src/initMatrixTransform/initMatrixTransform.spec.js @@ -1,62 +1,118 @@ import { expect } from "chai"; -import { drop, go1 } from "fxjs2"; -import { deepCopyTransformListToMatrixList } from "../../test/utils/deepCopyTransformListToMatrixList.js"; -import { makeRandomNumber } from "../../test/utils/makeRandomNumber.js"; -import { makeRandomSVGMatrix } from "../../test/utils/makeRandomSVGMatrix.js"; -import { makeRandomTransformAttributeValue } from "../../test/utils/makeRandomTransformAttributeValue.js"; +import { appendL, each, equals2, go, go1, mapL, object } from "fxjs2"; +import { expectSameValueSVGMatrix } from "../../test/assertions/index.js"; +import { + makeRandomSVGMatrix, + makeRandomNumber, + makeRandomInt, + deepCopyTransformListToMatrixList, + makeRandomTransformAttributeValue, + makeAllCombinations, +} from "../../test/utils/index.js"; +import { $$createSVGMatrix } from "../createSVGMatrix/createSVGMatrix.index.js"; import { $$el } from "../el/el.index.js"; import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js"; import { $$isMatrixSVGTransform } from "../isMatrixSVGTransform/isMatrixSVGTransform.index.js"; import { $$initMatrixTransform } from "./initMatrixTransform.index.js"; -describe(`$$initMatrixTransform`, function () { - let $el; - - beforeEach(function () { - $el = $$el()(` - - t ? `transform="${t}"` : "" - )} - > - - `); - }); +const createMockEl = () => + $$el()(` + + t ? `transform="${t}"` : "" + )} + > + + `); - it(`The length of the element's SVGTransformList will be increased by 1.`, function () { - const { numberOfItems: before_n } = $$getBaseTransformList($el); +const expectCorrectSVGTransformListLength = ($el, config) => { + const { numberOfItems: before_n } = $$getBaseTransformList($el); - $$initMatrixTransform()($el, { matrix: makeRandomSVGMatrix() }); + $$initMatrixTransform()($el, config); - const { numberOfItems: after_n } = $$getBaseTransformList($el); - expect(after_n).to.equal(before_n + 1); - }); + const { numberOfItems: after_n } = $$getBaseTransformList($el); + expect(after_n, "expectCorrectSVGTransformListLength").to.equal(before_n + 1); +}; - it(`The first SVGTransform will be a matrix SVGTransform with the input SVGMatrix.`, function () { - const matrix = makeRandomSVGMatrix(); +const expectCorrectSVGTransform = ($el, config) => { + const { matrix = $$createSVGMatrix()(), index = 0 } = config || {}; - $$initMatrixTransform()($el, { matrix }); + $$initMatrixTransform()($el, config); - const t = $$getBaseTransformList($el).getItem(0); - expect($$isMatrixSVGTransform(t)).to.be.true; - expect(t.matrix).to.deep.equal(matrix); - }); + const t = $$getBaseTransformList($el).getItem(index); + expect($$isMatrixSVGTransform(t), "expectCorrectSVGTransform").to.be.true; + expectSameValueSVGMatrix(t.matrix, matrix, "expectCorrectSVGTransform"); +}; - it(`The function do nothing on other SVGTransforms of the element.`, function () { - const before_l = deepCopyTransformListToMatrixList( - $$getBaseTransformList($el) - ); +const expectCorrectOtherSVGTransforms = ($el, config) => { + const { index = 0 } = config || {}; + + const before_l = deepCopyTransformListToMatrixList( + $$getBaseTransformList($el) + ); + + $$initMatrixTransform()($el, config); - $$initMatrixTransform()($el, { matrix: makeRandomSVGMatrix() }); + let after_l = deepCopyTransformListToMatrixList($$getBaseTransformList($el)); + after_l = [...after_l.slice(0, index), ...after_l.slice(index + 1)]; + expect(after_l, "expectCorrectOtherSVGTransforms").to.deep.equal(before_l); +}; + +const expectAllCorrect = ($el, config) => + each((f) => f($el, config), [ + expectCorrectSVGTransformListLength, + expectCorrectSVGTransform, + expectCorrectOtherSVGTransforms, + ]); + +describe(`$$initMatrixTransform`, function () { + describe(`No omitted arguments,`, function () { + it(`The length of the element's SVGTransformList will be increased by 1.`, function () { + const $el = createMockEl(); + const matrix = makeRandomSVGMatrix(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + expectCorrectSVGTransformListLength($el, { matrix, index }); + }); + + it(`The SVGTransform at input index is a matrix SVGTransform with the input SVGMatrix.`, function () { + const $el = createMockEl(); + const matrix = makeRandomSVGMatrix(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + expectCorrectSVGTransform($el, { matrix, index }); + }); + + it(`The function do nothing on other SVGTransforms of the element.`, function () { + const $el = createMockEl(); + const matrix = makeRandomSVGMatrix(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + expectCorrectOtherSVGTransforms($el, { matrix, index }); + }); + }); - const after_l = drop( - 1, - deepCopyTransformListToMatrixList($$getBaseTransformList($el)) + it(`If the second argument is omitted, use default values ({ matrix: Identity Matrix, index: 0 }).`, function () { + go( + ["matrix", "index"], + makeAllCombinations, + mapL((ks) => [createMockEl(), ks]), + mapL(([$el, ks]) => + go( + ks, + mapL((k) => [ + k, + equals2(k, "index") + ? makeRandomInt(0, $$getBaseTransformList($el).numberOfItems) + : makeRandomSVGMatrix(), + ]), + object, + (config) => [$el, config] + ) + ), + appendL([createMockEl()]), + each(([$el, config]) => expectAllCorrect($el, config)) ); - expect(after_l).to.deep.equal(before_l); }); }); diff --git a/src/initRotateTransform/README.md b/src/initRotateTransform/README.md index 9af6119..60a5f05 100644 --- a/src/initRotateTransform/README.md +++ b/src/initRotateTransform/README.md @@ -5,16 +5,16 @@ svg 엘리먼트에 총 3개의 `SVGTransform`을 순서대로 추가합니다. -1. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`: `0`) -2. `SVGTransform.SVG_TRANSFORM_ROTATE` 타입의 `SVGTransform` (`index`: `1`) -3. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`: `2`) +1. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`) +2. `SVGTransform.SVG_TRANSFORM_ROTATE` 타입의 `SVGTransform` (`index + 1`) +3. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index + 2`) 2번 `SVGTransform` 객체를 반환합니다. 1번, 3번 `SVGTranform` 객체는 회전 중심을 설정합니다. -회전 중심 `cx`, `cy` 를 설정할 수 있습니다. -초기 회전 각도 `angle` 을 설정할 수 있습니다. 단위는 `deg` 입니다. -설정하지 않는 경우 모두 `0` 으로 초기화됩니다. +회전 중심 `cx`, `cy` 를 설정할 수 있습니다. 설정하지 않는 경우 모두 `0` 으로 초기화됩니다. +초기 회전 각도 `angle` 을 설정할 수 있습니다. 단위는 `deg` 입니다. 설정하지 않는 경우 `0` 으로 초기화됩니다. +`SVGTransform` 을 추가할 `index` 를 설정할 수 있습니다. 설정하지 않는 경우 `0` 으로 초기화됩니다. [`` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다. @@ -32,7 +32,7 @@ const $el = $$el()(` console.log($$getBaseTransformList($el)); // SVGTransformList {length: 0, numberOfItems: 0} -$$initRotateTransform()($el, { tx: 10, ty: 20 }); +$$initRotateTransform()($el, { angle: 30, cx: 10, cy: 20 }); console.log($$getBaseTransformList($el)); // SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, length: 3, numberOfItems: 3} @@ -60,15 +60,18 @@ console.log($$getBaseTransformList($el)); // 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} -$$initTranslateTransform()($el, { tx: 10, ty: 20 }); +$$initRotateTransform()($el, { cx: 10, cy: 20, angle: 30, index: 1 }); +// index 를 1 로 설정할 경우 +// 기존 SVGTransformList 의 1 번 인덱스부터 3개의 SVGTransform 이 추가됨 +// 즉 1, 2, 3 번 인덱스 사용 console.log($$getBaseTransformList($el)); // SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, 3: SVGTransform, length: 4, numberOfItems: 4} -// 0: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} +// 1: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20} -// 1: SVGTransform {type: 4, matrix: SVGMatrix, angle: 30} -// 2: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// 2: SVGTransform {type: 4, matrix: SVGMatrix, angle: 30} +// 3: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -10, f: -20} -// 3: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} -// matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} ``` diff --git a/src/initRotateTransform/initRotateTransform.index.js b/src/initRotateTransform/initRotateTransform.index.js index 10db431..abee62c 100644 --- a/src/initRotateTransform/initRotateTransform.index.js +++ b/src/initRotateTransform/initRotateTransform.index.js @@ -5,21 +5,21 @@ import { $$getSVG } from "../getSetSVG/getSetSVG.index.js"; export const $$initRotateTransform = ($svg = $$getSVG()) => ( $el, - { angle = 0, cx = 0, cy = 0 } = {} + { angle = 0, cx = 0, cy = 0, index = 0 } = {} ) => { const transform_list = $$getBaseTransformList($el); transform_list.insertItemBefore( $$createSVGTransformTranslate($svg)({ tx: -cx, ty: -cy }), - 0 + index ); const transform = transform_list.insertItemBefore( $$createSVGTransformRotate($svg)({ angle }), - 0 + index ); transform_list.insertItemBefore( $$createSVGTransformTranslate($svg)({ tx: cx, ty: cy }), - 0 + index ); return transform; diff --git a/src/initRotateTransform/initRotateTransform.spec.js b/src/initRotateTransform/initRotateTransform.spec.js index e1377a9..a248d6a 100644 --- a/src/initRotateTransform/initRotateTransform.spec.js +++ b/src/initRotateTransform/initRotateTransform.spec.js @@ -1,7 +1,19 @@ import { expect } from "chai"; -import { drop, go1, mapL, rangeL } from "fxjs2"; +import { + appendL, + each, + equals2, + go, + go1, + mapL, + object, + rangeL, + rejectL, +} from "fxjs2"; +import { expectSameValueSVGMatrix } from "../../test/assertions/index.js"; import { deepCopyTransformListToMatrixList, + makeAllCombinations, makeRandomInt, makeRandomNumber, makeRandomTransformAttributeValue, @@ -12,90 +24,154 @@ import { $$isRotateSVGTransform } from "../isRotateSVGTransform/isRotateSVGTrans import { $$isTranslateSVGTransform } from "../isTranslateSVGTransform/isTranslateSVGTransform.index.js"; import { $$initRotateTransform } from "./initRotateTransform.index.js"; -describe(`$$initRotateTransform`, function () { - let $el; - - beforeEach(function () { - $el = $$el()(` - - t ? `transform="${t}"` : "" - )} - > - - `); - }); - - it(`The length of the element's SVGTransformList will be increased by 3.`, function () { - const { numberOfItems: before_n } = $$getBaseTransformList($el); +const createMockEl = () => + $$el()(` + + t ? `transform="${t}"` : "" + )} + > + + `); + +const expectCorrectSVGTransformListLength = ($el, config) => { + const { numberOfItems: before_n } = $$getBaseTransformList($el); + + $$initRotateTransform()($el, config); + + const { numberOfItems: after_n } = $$getBaseTransformList($el); + expect(after_n, "expectCorrectSVGTransformListLength").to.equal(before_n + 3); +}; + +const expectCorrectSVGTransform1 = ($el, config) => { + const { index = 0, cx = 0, cy = 0 } = config || {}; + + $$initRotateTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index); + expect($$isTranslateSVGTransform(t), "expectCorrectSVGTransform1").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: 1, b: 0, c: 0, d: 1, e: cx, f: cy }, + "expectCorrectSVGTransform1" + ); +}; + +const expectCorrectSVGTransform2 = ($el, config) => { + const { index = 0, angle = 0 } = config || {}; + + $$initRotateTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index + 1); + expect($$isRotateSVGTransform(t), "expectCorrectSVGTransform2").to.be.true; + expect(t.angle).to.equal(angle); + expect(t.matrix.e).to.equal(0); + expect(t.matrix.f).to.equal(0); +}; + +const expectCorrectSVGTransform3 = ($el, config) => { + const { index = 0, cx = 0, cy = 0 } = config || {}; + + $$initRotateTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index + 2); + expect($$isTranslateSVGTransform(t), "expectCorrectSVGTransform3").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: 1, b: 0, c: 0, d: 1, e: -cx, f: -cy }, + "expectCorrectSVGTransform3" + ); +}; + +const expectCorrectOtherSVGTransforms = ($el, config) => { + const { index = 0 } = config || {}; + + const before_l = deepCopyTransformListToMatrixList( + $$getBaseTransformList($el) + ); + + $$initRotateTransform()($el, config); + + let after_l = deepCopyTransformListToMatrixList($$getBaseTransformList($el)); + after_l = [...after_l.slice(0, index), ...after_l.slice(index + 3)]; + expect(after_l, "expectCorrectOtherSVGTransforms").to.deep.equal(before_l); +}; + +const expectAllCorrect = ($el, config) => + each((f) => f($el, config), [ + expectCorrectSVGTransformListLength, + expectCorrectSVGTransform1, + expectCorrectSVGTransform2, + expectCorrectSVGTransform3, + expectCorrectOtherSVGTransforms, + ]); - $$initRotateTransform()($el, { - angle: makeRandomNumber(), - cx: makeRandomNumber(), - cy: makeRandomNumber(), +describe(`$$initRotateTransform`, function () { + describe(`No omitted arguments.`, function () { + it(`The length of the element's SVGTransformList will be increased by 3.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [angle, cx, cy] = mapL(() => makeRandomNumber(), rangeL(3)); + expectCorrectSVGTransformListLength($el, { angle, cx, cy, index }); }); - const { numberOfItems: after_n } = $$getBaseTransformList($el); - expect(after_n).to.equal(before_n + 3); - }); - - it(`The first SVGTransform will be a translate SVGTransform with cx, cy.`, function () { - const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); - - $$initRotateTransform()($el, { angle: makeRandomNumber(), cx, cy }); - - const t = $$getBaseTransformList($el).getItem(0); - expect($$isTranslateSVGTransform(t)).to.be.true; - expect(t.matrix.e).to.equal(cx); - expect(t.matrix.f).to.equal(cy); - }); - - it(`The second SVGTransform will be a rotate SVGTransform with angle, cx = 0, cy = 0.`, function () { - const angle = makeRandomInt(); - - $$initRotateTransform()($el, { - angle, - cx: makeRandomNumber(), - cy: makeRandomNumber(), + it(`The first SVGTransform will be a translate SVGTransform with cx, cy.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); + const angle = makeRandomNumber(); + expectCorrectSVGTransform1($el, { index, cx, cy, angle }); }); - const t = $$getBaseTransformList($el).getItem(1); - expect($$isRotateSVGTransform(t)).to.be.true; - expect(t.angle).to.equal(angle); - expect(t.matrix.e).to.equal(0); - expect(t.matrix.f).to.equal(0); - }); - - it(`The third SVGTransform will be a translate SVGTransform with -cx, -cy.`, function () { - const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); - - $$initRotateTransform()($el, { angle: makeRandomNumber(), cx, cy }); - - const t = $$getBaseTransformList($el).getItem(2); - expect($$isTranslateSVGTransform(t)).to.be.true; - expect(t.matrix.e).to.equal(-cx); - expect(t.matrix.f).to.equal(-cy); - }); + it(`The second SVGTransform will be a rotate SVGTransform with angle, cx = 0, cy = 0.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomNumber(), rangeL(2)); + const angle = makeRandomInt(); + expectCorrectSVGTransform2($el, { angle, cx, cy, index }); + }); - it(`The function do nothing on other SVGTransforms of the element.`, function () { - const before_l = deepCopyTransformListToMatrixList( - $$getBaseTransformList($el) - ); + it(`The third SVGTransform will be a translate SVGTransform with -cx, -cy.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); + const angle = makeRandomNumber(); + expectCorrectSVGTransform3($el, { angle, cx, cy, index }); + }); - $$initRotateTransform()($el, { - angle: makeRandomNumber(), - cx: makeRandomNumber(), - cy: makeRandomNumber(), + it(`The function do nothing on other SVGTransforms of the element.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy, angle] = mapL(() => makeRandomNumber(), rangeL(3)); + expectCorrectOtherSVGTransforms($el, { angle, cx, cy, index }); }); + }); - const after_l = drop( - 3, - deepCopyTransformListToMatrixList($$getBaseTransformList($el)) + it(`If the second argument is omitted, use default values ({ angle: 0, cx: 0, cy: 0, index: 0 }).`, function () { + go( + ["angle", "cx", "cy", "index"], + makeAllCombinations, + rejectL((ks) => equals2(ks.length, 4)), + mapL((ks) => [createMockEl(), ks]), + mapL(([$el, ks]) => + go( + ks, + mapL((k) => [ + k, + equals2(k, "index") + ? makeRandomInt(0, $$getBaseTransformList($el).numberOfItems) + : makeRandomInt(), + ]), + object, + (config) => [$el, config] + ) + ), + appendL([createMockEl()]), + each(([$el, config]) => expectAllCorrect($el, config)) ); - expect(after_l).to.deep.equal(before_l); }); }); diff --git a/src/initScaleTransform/README.md b/src/initScaleTransform/README.md new file mode 100644 index 0000000..6b75268 --- /dev/null +++ b/src/initScaleTransform/README.md @@ -0,0 +1,77 @@ +# \$\$initScaleTransform + +- [source](./initScaleTransform.index.js) +- [test](./initScaleTransform.spec.js) + +svg 엘리먼트에 총 3개의 `SVGTransform`을 순서대로 추가합니다. + +1. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index`) +2. `SVGTransform.SVG_TRANSFORM_SCALE` 타입의 `SVGTransform` (`index + 1`) +3. `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` (`index + 2`) + +2번 `SVGTransform` 객체를 반환합니다. +1번, 3번 `SVGTranform` 객체는 scale 중심을 설정합니다. + +scale 중심 `cx`, `cy` 를 설정할 수 있습니다. 설정하지 않는 경우 모두 `0` 으로 초기화됩니다. +초기 scale 정도 `sx`, `sy` 를 설정할 수 있습니다. 설정하지 않는 경우 모두 `1` 으로 초기화됩니다. +`SVGTransform` 을 추가할 `index` 를 설정할 수 있습니다. 설정하지 않는 경우 `0` 으로 초기화됩니다. + +[`` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다. + +```javascript +const $el = $$el()(` + + +`); + +console.log($$getBaseTransformList($el)); +// SVGTransformList {length: 0, numberOfItems: 0} + +$$initScaleTransform()($el, { sx: 2, sy: 3, cx: 10, cy: 20, index: 0 }); + +console.log($$getBaseTransformList($el)); +// SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, length: 3, numberOfItems: 3} +// 0: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20} +// 1: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 3, e: 0, f: 0} +// 2: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -10, f: -20} +``` + +```javascript +const $el = $$el()(` + + +`); + +console.log($$getBaseTransformList($el)); +// SVGTransformList {0: SVGTransform, length: 1, numberOfItems: 1} +// 0: SVGTransform {type: 4, matrix: SVGMatrix, angle: 30} + +$$initScaleTransform()($el, { cx: 10, cy: 20, sx: 2, sy: 3, index: 1 }); +// index 를 1 로 설정할 경우 +// 기존 SVGTransformList 의 1 번 인덱스부터 3개의 SVGTransform 이 추가됨 +// 즉 1, 2, 3 번 인덱스 사용 + +console.log($$getBaseTransformList($el)); +// SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, 3: SVGTransform, length: 4, numberOfItems: 4} +// 0: SVGTransform {type: 4, matrix: SVGMatrix, angle: 30} +// 1: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20} +// 2: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 3, e: 0, f: 0} +// 3: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -10, f: -20} +``` diff --git a/src/initScaleTransform/initScaleTransform.index.js b/src/initScaleTransform/initScaleTransform.index.js new file mode 100644 index 0000000..ecfef47 --- /dev/null +++ b/src/initScaleTransform/initScaleTransform.index.js @@ -0,0 +1,26 @@ +import { $$createSVGTransformScale } from "../createSVGTransformScale/createSVGTransformScale.index.js"; +import { $$createSVGTransformTranslate } from "../createSVGTransformTranslate/createSVGTransformTranslate.index.js"; +import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js"; +import { $$getSVG } from "../getSetSVG/getSetSVG.index.js"; + +export const $$initScaleTransform = ($svg = $$getSVG()) => ( + $el, + { sx = 1, sy = 1, cx = 0, cy = 0, index = 0 } = {} +) => { + const transform_list = $$getBaseTransformList($el); + + transform_list.insertItemBefore( + $$createSVGTransformTranslate($svg)({ tx: -cx, ty: -cy }), + index + ); + const transform = transform_list.insertItemBefore( + $$createSVGTransformScale($svg)({ sx, sy }), + index + ); + transform_list.insertItemBefore( + $$createSVGTransformTranslate($svg)({ tx: cx, ty: cy }), + index + ); + + return transform; +}; diff --git a/src/initScaleTransform/initScaleTransform.spec.js b/src/initScaleTransform/initScaleTransform.spec.js new file mode 100644 index 0000000..70ddfca --- /dev/null +++ b/src/initScaleTransform/initScaleTransform.spec.js @@ -0,0 +1,169 @@ +import { expect } from "chai"; +import { appendL, each, equals2, go, go1, mapL, object, rangeL } from "fxjs2"; +import { + makeRandomTransformAttributeValue, + makeRandomNumber, + deepCopyTransformListToMatrixList, + makeAllCombinations, + makeRandomInt, +} from "../../test/utils/index.js"; +import { expectSameValueSVGMatrix } from "../../test/assertions/index.js"; +import { $$el } from "../el/el.index.js"; +import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js"; +import { $$isScaleSVGTransform } from "../isScaleSVGTransform/isScaleSVGTransform.index.js"; +import { $$isTranslateSVGTransform } from "../isTranslateSVGTransform/isTranslateSVGTransform.index.js"; +import { $$initScaleTransform } from "./initScaleTransform.index.js"; + +const createMockEl = () => + $$el()(` + + t ? `transform="${t}"` : "" + )} + > + + `); + +const expectCorrectSVGTransformListLength = ($el, config) => { + const { numberOfItems: before_n } = $$getBaseTransformList($el); + + $$initScaleTransform()($el, config); + + const { numberOfItems: after_n } = $$getBaseTransformList($el); + expect(after_n, "expectCorrectSVGTransformListLength").to.equal(before_n + 3); +}; + +const expectCorrectSVGTransform1 = ($el, config) => { + const { index = 0, cx = 0, cy = 0 } = config || {}; + + $$initScaleTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index); + expect($$isTranslateSVGTransform(t), "expectCorrectSVGTransform1").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: 1, b: 0, c: 0, d: 1, e: cx, f: cy }, + "expectCorrectSVGTransform1" + ); +}; + +const expectCorrectSVGTransform2 = ($el, config) => { + const { index = 0, sx = 1, sy = 1 } = config || {}; + + $$initScaleTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index + 1); + expect($$isScaleSVGTransform(t), "expectCorrectSVGTransform2").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: sx, b: 0, c: 0, d: sy, e: 0, f: 0 }, + "expectCorrectSVGTransform2" + ); +}; + +const expectCorrectSVGTransform3 = ($el, config) => { + const { index = 0, cx = 0, cy = 0 } = config || {}; + + $$initScaleTransform()($el, config); + + const t = $$getBaseTransformList($el).getItem(index + 2); + expect($$isTranslateSVGTransform(t), "expectCorrectSVGTransform3").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: 1, b: 0, c: 0, d: 1, e: -cx, f: -cy }, + "expectCorrectSVGTransform3" + ); +}; + +const expectCorrectOtherSVGTransforms = ($el, config) => { + const { index = 0 } = config || {}; + + const before_l = deepCopyTransformListToMatrixList( + $$getBaseTransformList($el) + ); + + $$initScaleTransform()($el, config); + + let after_l = deepCopyTransformListToMatrixList($$getBaseTransformList($el)); + after_l = [...after_l.slice(0, index), ...after_l.slice(index + 3)]; + expect(after_l, "expectCorrectOtherSVGTransforms").to.deep.equal(before_l); +}; + +const expectAllCorrect = ($el, config) => + each((f) => f($el, config), [ + expectCorrectSVGTransformListLength, + expectCorrectSVGTransform1, + expectCorrectSVGTransform2, + expectCorrectSVGTransform3, + expectCorrectOtherSVGTransforms, + ]); + +describe(`$$initScaleTransform`, function () { + describe(`No omitted arguments.`, function () { + it(`The length of the element's SVGTransformList will be increased by 3.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy, sx, sy] = mapL(() => makeRandomNumber(), rangeL(4)); + expectCorrectSVGTransformListLength($el, { index, cx, cy, sx, sy }); + }); + + it(`The SVGTransform at input index will be a translate SVGTransform with cx, cy.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); + const [sx, sy] = mapL(() => makeRandomNumber(), rangeL(2)); + expectCorrectSVGTransform1($el, { index, cx, cy, sx, sy }); + }); + + it(`The SVGTransform at index + 1 will be a scale SVGTransform with sx, sy.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomNumber(), rangeL(2)); + const [sx, sy] = mapL(() => makeRandomInt(), rangeL(2)); + expectCorrectSVGTransform2($el, { index, cx, cy, sx, sy }); + }); + + it(`The SVGTransform at index + 2 will be a translate SVGTransform with -cx, -cy.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [cx, cy] = mapL(() => makeRandomInt(), rangeL(2)); + const [sx, sy] = mapL(() => makeRandomNumber(), rangeL(2)); + expectCorrectSVGTransform3($el, { index, cx, cy, sx, sy }); + }); + + it(`The function do nothing on other SVGTransforms of the element.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [sx, sy, cx, cy] = mapL(() => makeRandomNumber(), rangeL(4)); + expectCorrectOtherSVGTransforms($el, { index, cx, cy, sx, sy }); + }); + }); + + it(`If the second argument is omitted, use default values ({ sx: 1, sy: 1, cx: 0, cy: 0, index: 0 }).`, function () { + this.slow(1000); + go( + ["sx", "sy", "cx", "cy", "index"], + makeAllCombinations, + mapL((ks) => [createMockEl(), ks]), + mapL(([$el, ks]) => + go( + ks, + mapL((k) => [ + k, + equals2(k, "index") + ? makeRandomInt(0, $$getBaseTransformList($el).numberOfItems) + : makeRandomInt(), + ]), + object, + (config) => [$el, config] + ) + ), + appendL([createMockEl()]), + each(([$el, config]) => expectAllCorrect($el, config)) + ); + }); +}); diff --git a/src/initTranslateTransform/README.md b/src/initTranslateTransform/README.md index d916454..bbc62bb 100644 --- a/src/initTranslateTransform/README.md +++ b/src/initTranslateTransform/README.md @@ -4,10 +4,11 @@ - [test](./initTranslateTransform.spec.js) svg 엘리먼트에 `SVGTransform.SVG_TRANSFORM_TRANSLATE` 타입의 `SVGTransform` 을 추가합니다. -`SVGTransform` 은 항상 `transform.baseVal` 에 해당하는 `SVGTransformList` 의 `0` 인덱스에 추가됩니다. -`SVGTransformList` 는 역순으로 적용되기 때문에 추가된 `SVGTransform` 은 가장 마지막에 적용됩니다. +`SVGTransform` 은 항상 `transform.baseVal` 에 해당하는 `SVGTransformList` 의 전달한 `index` 에 추가됩니다. +`SVGTransformList` 는 역순으로 적용됩니다. 초기 `tx`, `ty` 값을 설정할 수 있으며 설정하지 않는 경우 모두 `0` 으로 초기화됩니다. +`SVGTrnsform`을 삽입할 `index`를 설정할 수 있으며 설정하지 않는 경우 `0` 으로 초기화됩니다. [`` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다. @@ -50,12 +51,14 @@ console.log($$getBaseTransformList($el)); // 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} -$$initTranslateTransform()($el, { tx: 10, ty: 20 }); +$$initTranslateTransform()($el, { tx: 10, ty: 20, index: 1 }); +// index 를 1 로 설정했기 때문에 +// SVGTransformList 의 1 인덱스 위치에 SVGTransform 삽입 console.log($$getBaseTransformList($el)); // SVGTransformList {0: SVGTransform, 1: SVGTransform, length: 2, numberOfItems: 2} -// 0: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} -// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20} -// 1: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} +// 0: SVGTransform {type: 3, matrix: SVGMatrix, angle: 0} // matrix: SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0} +// 1: SVGTransform {type: 2, matrix: SVGMatrix, angle: 0} +// matrix: SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20} ``` diff --git a/src/initTranslateTransform/initTranslateTransform.index.js b/src/initTranslateTransform/initTranslateTransform.index.js index 0c8f1a1..546eac9 100644 --- a/src/initTranslateTransform/initTranslateTransform.index.js +++ b/src/initTranslateTransform/initTranslateTransform.index.js @@ -4,9 +4,9 @@ import { $$getSVG } from "../getSetSVG/getSetSVG.index.js"; export const $$initTranslateTransform = ($svg = $$getSVG()) => ( $el, - { tx = 0, ty = 0 } = {} + { tx = 0, ty = 0, index = 0 } = {} ) => $$getBaseTransformList($el).insertItemBefore( $$createSVGTransformTranslate($svg)({ tx, ty }), - 0 + index ); diff --git a/src/initTranslateTransform/initTranslateTransform.spec.js b/src/initTranslateTransform/initTranslateTransform.spec.js index bf6d060..f112d45 100644 --- a/src/initTranslateTransform/initTranslateTransform.spec.js +++ b/src/initTranslateTransform/initTranslateTransform.spec.js @@ -1,71 +1,120 @@ import { expect } from "chai"; -import { drop, go1, mapL, rangeL } from "fxjs2"; +import { appendL, each, equals2, go, go1, mapL, object, rangeL } from "fxjs2"; import { deepCopyTransformListToMatrixList, + makeAllCombinations, makeRandomInt, makeRandomNumber, makeRandomTransformAttributeValue, } from "../../test/utils/index.js"; +import { expectSameValueSVGMatrix } from "../../test/assertions/index.js"; import { $$el } from "../el/el.index.js"; import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js"; import { $$isTranslateSVGTransform } from "../isTranslateSVGTransform/isTranslateSVGTransform.index.js"; import { $$initTranslateTransform } from "./initTranslateTransform.index.js"; -describe(`$$initTranslateTransform`, function () { - let $el; - - beforeEach(function () { - $el = $$el()(` - - t ? `transform="${t}"` : "" - )} - > - - `); - }); +const createMockEl = () => + $$el()(` + + t ? `transform="${t}"` : "" + )} + > + + `); - it(`The length of the element's SVGTransformList will be increased by 1.`, function () { - const { numberOfItems: before_n } = $$getBaseTransformList($el); +const expectCorrectSVGTransformListLength = ($el, config) => { + const { numberOfItems: before_n } = $$getBaseTransformList($el); - $$initTranslateTransform()($el, { - tx: makeRandomNumber(), - ty: makeRandomNumber(), - }); + $$initTranslateTransform()($el, config); - const { numberOfItems: after_n } = $$getBaseTransformList($el); - expect(after_n).to.equal(before_n + 1); - }); + const { numberOfItems: after_n } = $$getBaseTransformList($el); + expect(after_n, "expectCorrectSVGTransformListLength").to.equal(before_n + 1); +}; - it(`The first SVGTransform will be a translate SVGTransform with the input tx, ty values.`, function () { - const [tx, ty] = mapL(() => makeRandomInt(), rangeL(2)); +const expectCorrectSVGTransform = ($el, config) => { + const { index = 0, tx = 0, ty = 0 } = config || {}; - $$initTranslateTransform()($el, { tx, ty }); + $$initTranslateTransform()($el, config); - const t = $$getBaseTransformList($el).getItem(0); - expect($$isTranslateSVGTransform(t)).to.be.true; - expect(t.matrix.e).to.equal(tx); - expect(t.matrix.f).to.equal(ty); - }); + const t = $$getBaseTransformList($el).getItem(index); + expect($$isTranslateSVGTransform(t), "expectCorrectSVGTransform").to.be.true; + expectSameValueSVGMatrix( + t.matrix, + { a: 1, b: 0, c: 0, d: 1, e: tx, f: ty }, + "expectCorrectSVGTransform" + ); +}; - it(`The function do nothing on other SVGTransforms of the element.`, function () { - const before_l = deepCopyTransformListToMatrixList( - $$getBaseTransformList($el) - ); +const expectCorrectOtherSVGTransforms = ($el, config) => { + const { index = 0 } = config || {}; + + const before_l = deepCopyTransformListToMatrixList( + $$getBaseTransformList($el) + ); + + $$initTranslateTransform()($el, config); - $$initTranslateTransform()($el, { - tx: makeRandomNumber(), - ty: makeRandomNumber(), + let after_l = deepCopyTransformListToMatrixList($$getBaseTransformList($el)); + after_l = [...after_l.slice(0, index), ...after_l.slice(index + 1)]; + expect(after_l, "expectCorrectOtherSVGTransforms").to.deep.equal(before_l); +}; + +const expectAllCorrect = ($el, config) => + each((f) => f($el, config), [ + expectCorrectSVGTransformListLength, + expectCorrectSVGTransform, + expectCorrectOtherSVGTransforms, + ]); + +describe(`$$initTranslateTransform`, function () { + describe(`No omitted arguments.`, function () { + it(`The length of the element's SVGTransformList will be increased by 1.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [tx, ty] = mapL(() => makeRandomNumber(), rangeL(2)); + expectCorrectSVGTransformListLength($el, { tx, ty, index }); + }); + + it(`The SVGTransform at input index is a translate SVGTransform with the input tx, ty values.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [tx, ty] = mapL(() => makeRandomInt(), rangeL(2)); + expectCorrectSVGTransform($el, { index, tx, ty }); + }); + + it(`The function do nothing on other SVGTransforms of the element.`, function () { + const $el = createMockEl(); + const index = makeRandomInt(0, $$getBaseTransformList($el).numberOfItems); + const [tx, ty] = mapL(() => makeRandomNumber(), rangeL(2)); + expectCorrectOtherSVGTransforms($el, { index, tx, ty }); }); + }); - const after_l = drop( - 1, - deepCopyTransformListToMatrixList($$getBaseTransformList($el)) + it(`If the second argument is omitted, use default values ({ tx: 0, ty: 0, index: 0 }).`, function () { + go( + ["tx", "ty", "index"], + makeAllCombinations, + mapL((ks) => [createMockEl(), ks]), + mapL(([$el, ks]) => + go( + ks, + mapL((k) => [ + k, + equals2(k, "index") + ? makeRandomInt(0, $$getBaseTransformList($el).numberOfItems) + : makeRandomInt(), + ]), + object, + (config) => [$el, config] + ) + ), + appendL([createMockEl()]), + each(([$el, config]) => expectAllCorrect($el, config)) ); - expect(after_l).to.deep.equal(before_l); }); }); diff --git a/test/assertions/expectSameValueSVGMatrix.js b/test/assertions/expectSameValueSVGMatrix.js new file mode 100644 index 0000000..adef985 --- /dev/null +++ b/test/assertions/expectSameValueSVGMatrix.js @@ -0,0 +1,13 @@ +import { expect } from "chai"; +import { each, go, mapL } from "fxjs2"; + +export const expectSameValueSVGMatrix = (receive_m, expect_m, message = "") => + go( + ["a", "b", "c", "d", "e", "f"], + mapL((k) => [ + receive_m[k], + expect_m[k], + `${message ? `${message}::` : ""}expectSameValueSVGMatrix::${k}`, + ]), + each(([receive_v, expect_v, m]) => expect(receive_v, m).to.equal(expect_v)) + ); diff --git a/test/assertions/index.js b/test/assertions/index.js new file mode 100644 index 0000000..afadcdd --- /dev/null +++ b/test/assertions/index.js @@ -0,0 +1 @@ +export { expectSameValueSVGMatrix } from "./expectSameValueSVGMatrix.js"; diff --git a/test/spec.js b/test/spec.js index c589b9b..4b87a6a 100644 --- a/test/spec.js +++ b/test/spec.js @@ -20,6 +20,7 @@ import "../src/getCenterPoint/getCenterPoint.spec.js"; import "../src/getSetSVG/getSetSVG.spec.js"; import "../src/initMatrixTransform/initMatrixTransform.spec.js"; import "../src/initRotateTransform/initRotateTransform.spec.js"; +import "../src/initScaleTransform/initScaleTransform.spec.js"; import "../src/initTranslateTransform/initTranslateTransform.spec.js"; import "../src/isMatrixSVGTransform/isMatrixSVGTransform.spec.js"; import "../src/isRotateSVGTransform/isRotateSVGTransform.spec.js"; @@ -31,3 +32,6 @@ import "../src/updateMatrixTransform/updateMatrixTransform.spec.js"; import "../src/updateRotateTransform/updateRotateTransform.spec.js"; import "../src/updateScaleTransform/updateScaleTransform.sepc.js"; import "../src/updateTranslateTransform/updateTranslateTransform.spec.js"; + +import FxSVG from "../src/index.js"; +window.FxSVG = FxSVG;