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;