Skip to content

Commit

Permalink
v0.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
daengdaengLee committed Jun 4, 2020
2 parents 6ec75fe + 5052c70 commit 84d2958
Show file tree
Hide file tree
Showing 22 changed files with 711 additions and 205 deletions.
9 changes: 6 additions & 3 deletions bin/build.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down
14 changes: 14 additions & 0 deletions doc/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 2 additions & 0 deletions src/fxsvg.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -56,6 +57,7 @@ export const FxSVG = {
setSVG: $$setSVG,
initMatrixTransform: $$initMatrixTransform,
initRotateTransform: $$initRotateTransform,
initScaleTransform: $$initScaleTransform,
initTranslateTransform: $$initTranslateTransform,
isMatrixSVGTransform: $$isMatrixSVGTransform,
isRotateSVGTransform: $$isRotateSVGTransform,
Expand Down
2 changes: 1 addition & 1 deletion src/getBoxPoints/getBoxPoints.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe(`$$getBoxPoints`, function () {
$el.setAttributeNS(
null,
"transform",
makeRandomTransformAttributeValue(1)
makeRandomTransformAttributeValue(1, 10, () => makeRandomInt(-10, 10))
);

const { transformed, bounding } = $$getBoxPoints()($el);
Expand Down
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
17 changes: 11 additions & 6 deletions src/initMatrixTransform/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 으로 초기화됩니다.

[`<svg></svg>` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다.

Expand Down Expand Up @@ -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}
```
8 changes: 6 additions & 2 deletions src/initMatrixTransform/initMatrixTransform.index.js
Original file line number Diff line number Diff line change
@@ -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
);
144 changes: 100 additions & 44 deletions src/initMatrixTransform/initMatrixTransform.spec.js
Original file line number Diff line number Diff line change
@@ -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()(`
<rect
x="${makeRandomNumber()}"
y="${makeRandomNumber()}"
width="${makeRandomNumber(1)}"
height="${makeRandomNumber(1)}"
${go1(makeRandomTransformAttributeValue(), (t) =>
t ? `transform="${t}"` : ""
)}
>
</rect>
`);
});
const createMockEl = () =>
$$el()(`
<rect
x="${makeRandomNumber()}"
y="${makeRandomNumber()}"
width="${makeRandomNumber(1)}"
height="${makeRandomNumber(1)}"
${go1(makeRandomTransformAttributeValue(), (t) =>
t ? `transform="${t}"` : ""
)}
>
</rect>
`);

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);
});
});
29 changes: 16 additions & 13 deletions src/initRotateTransform/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 으로 초기화됩니다.

[`<svg></svg>` 커링](../../doc/SVG_CURRYING.md)이 적용된 함수입니다.

Expand All @@ -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}
Expand Down Expand Up @@ -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}
```
8 changes: 4 additions & 4 deletions src/initRotateTransform/initRotateTransform.index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 84d2958

Please sign in to comment.