v0.4.5

doc/API.md

@@ -4,11 +4,21 @@
 
 ---
 
+## \$\$append
+
+- [source](../src/append/append.index.js)
+- [detail](../src/append/README.md)
+
 ## \$\$appendRotateTransform
 
 - [source](../src/appendRotateTransform/appendRotateTransform.index.js)
 - [detail](../src/appendRotateTransform/README.md)
 
+## \$\$appendTo
+
+- [source](../src/appendTo/appendTo.index.js)
+- [detail](../src/appendTo/README.md)
+
 ## \$\$appendTranslateTransform
 
 - [source](../src/appendTranslateTransform/appendTranslateTransform.index.js)
@@ -209,6 +219,16 @@
 - [source](../src/mergeTranslateTransform/mergeTranslateTransform.index.js)
 - [detail](../src/mergeTranslateTransform/README.md)
 
+## \$\$qs
+
+- [source](../src/qs/qs.index.js)
+- [detail](../src/qs/README.md)
+
+## \$\$qsa
+
+- [source](../src/qsa/qsa.index.js)
+- [detail](../src/qsa/README.md)
+
 ## \$\$removeAttrNS
 
 - [source](../src/removeAttrNS/removeAttrNS.index.js)

doc/API_KR.md

@@ -6,13 +6,29 @@
 
 ---
 
+## \$\$append
+
+- [source](../src/append/append.index.js)
+- [detail](../src/append/README.md)
+
+첫 번째로 받은 엘리먼트를 두 번째로 받은 엘리먼트의 자식 엘리먼트로 추가합니다.
+`appendChild` 와 동일한 함수입니다.
+
 ## \$\$appendRotateTransform
 
 - [source](../src/appendRotateTransform/appendRotateTransform.index.js)
 - [detail](../src/appendRotateTransform/README.md)
 
 `SVGTransform.SVG_TRANSFORM_ROTATE` 타입의 `SVGTransform` 의 `angle` 값에 입력받은 `angle`을 더합니다.
 
+## \$\$appendTo
+
+- [source](../src/appendTo/appendTo.index.js)
+- [detail](../src/appendTo/README.md)
+
+첫 번째로 받은 엘리먼트에 두 번째로 받은 엘리먼트를 자식 엘리먼트로 추가합니다.
+`appendChild` 와 동일한 함수입니다.
+
 ## \$\$appendTranslateTransform
 
 - [source](../src/appendTranslateTransform/appendTranslateTransform.index.js)
@@ -311,6 +327,20 @@ svg 엘리먼트에 가장 마지막으로 적용된 `SVGTransform` 이 `SVGTran
 해당 `SVGTransform` 을 svg 엘리먼트의 `x`, `y` 속성 (혹은 그에 준하는 속성) 에 반영합니다.
 svg 엘리먼트에 다른 `SVGTransform` 이 있는 경우 각 `SVGTransform` 을 업데이트합니다.
 
+## \$\$qs
+
+- [source](../src/qs/qs.index.js)
+- [detail](../src/qs/README.md)
+
+부모 엘리먼트에서 가장 먼저 셀렉터에 해당하는 자손 엘리먼트를 찾아 반환합니다. `querySelector` 와 동일한 함수입니다.
+
+## \$\$qsa
+
+- [source](../src/qsa/qsa.index.js)
+- [detail](../src/qsa/README.md)
+
+부모 엘리먼트에서 셀렉터에 해당하는 자손 엘리먼트 목록을 찾아 반환합니다. `querySelectorAll` 과 동일한 함수입니다.
+
 ## \$\$removeAttrNS
 
 - [source](../src/removeAttrNS/removeAttrNS.index.js)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fxsvg",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Functional SVG Handling Library",
   "type": "module",
   "main": "./src/index.js",

src/LiveScaleTransform2/LiveScaleTransform2.spec.js

@@ -6,6 +6,7 @@ import { makeRandomNumber } from "../../test/utils/makeRandomNumber.js";
 import { makeRandomNumberExcept } from "../../test/utils/makeRandomNumberExcept.js";
 import { makeRandomTransformAttributeValue } from "../../test/utils/makeRandomTransformAttributeValue.js";
 import { $$createSVGTransformScale } from "../createSVGTransformScale/createSVGTransformScale.index.js";
+import { $$getAttrNS } from "../getAttrNS/getAttrNS.index.js";
 import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js";
 import { $$isScaleSVGTransform } from "../isScaleSVGTransform/isScaleSVGTransform.index.js";
 import { $$LiveScaleTransform2 } from "./LiveScaleTransform2.index.js";
@@ -186,7 +187,7 @@ export default ({ describe, it }) => [
       live_scale_transform.$$merge();
 
       const [x2, y2, width2, height2] = mapL(
-        (k) => parseFloat($el.getAttributeNS(null, k)),
+        (k) => parseFloat($$getAttrNS(k)($el)),
         [x_name, y_name, width_name, height_name]
       );
       let expect_x;

src/LiveTranslateTransform/LiveTranslateTransform.spec.js

@@ -5,6 +5,7 @@ import { makeRandomInt } from "../../test/utils/makeRandomInt.js";
 import { makeRandomNumber } from "../../test/utils/makeRandomNumber.js";
 import { makeRandomTransformAttributeValue } from "../../test/utils/makeRandomTransformAttributeValue.js";
 import { $$createSVGTransformTranslate } from "../createSVGTransformTranslate/createSVGTransformTranslate.index.js";
+import { $$getAttrNS } from "../getAttrNS/getAttrNS.index.js";
 import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js";
 import { $$isTranslateSVGTransform } from "../isTranslateSVGTransform/isTranslateSVGTransform.index.js";
 import { $$LiveTranslateTransform } from "./LiveTranslateTransform.index.js";
@@ -121,7 +122,7 @@ export default ({ describe, it }) => [
       live_translate_transform.$$merge();
 
       const { numberOfItems: l2 } = $$getBaseTransformList($el);
-      const [x2, y2] = mapL((k) => parseFloat($el.getAttributeNS(null, k)), [
+      const [x2, y2] = mapL((k) => parseFloat($$getAttrNS(k)($el)), [
         x_name,
         y_name,
       ]);

src/append/README.md

@@ -0,0 +1,19 @@
+# \$\$append
+
+- [source](./append.index.js)
+- [test](./append.spec.js)
+
+첫 번째로 받은 엘리먼트를 두 번째로 받은 엘리먼트의 자식 엘리먼트로 추가합니다.
+`appendChild` 와 동일한 함수입니다.
+
+```javascript
+const parent_el = $$el(`<g></g>`)();
+const child_el = $$el(`<circle cx="0" cy="0" r="10"></circle>`)();
+
+$$append(child_el)(parent_el);
+
+console.log(parent_el);
+// <g>
+//   <circle cx="0" cy="0" r="10"></circle>
+// </g>
+```

src/append/append.index.js

@@ -0,0 +1 @@
+export const $$append = (child) => (parent) => parent.appendChild(child);

src/append/append.spec.js

@@ -0,0 +1,19 @@
+import { expect } from "chai";
+import { $$el } from "../el/el.index.js";
+import { $$append } from "./append.index.js";
+
+export default ({ describe, it }) => [
+  describe(`$$append`, function () {
+    it(`The function append the element to the parent element as a child element.`, function () {
+      // given
+      const parent_el = $$el(`<g></g>`)();
+      const child_el = $$el(`<circle cx="0" cy="0" r="10"></circle>`)();
+
+      // when
+      $$append(child_el)(parent_el);
+
+      // then
+      expect(parent_el.contains(child_el)).true;
+    });
+  }),
+];

src/appendTo/README.md

@@ -0,0 +1,19 @@
+# \$\$appendTo
+
+- [source](./appendTo.index.js)
+- [test](./appendTo.spec.js)
+
+첫 번째로 받은 엘리먼트에 두 번째로 받은 엘리먼트를 자식 엘리먼트로 추가합니다.
+`appendChild` 와 동일한 함수입니다.
+
+```javascript
+const parent_el = $$el(`<g></g>`)();
+const child_el = $$el(`<circle cx="0" cy="0" r="10"></circle>`)();
+
+$$appendTo(parent_el)(child_el);
+
+console.log(parent_el);
+// <g>
+//   <circle cx="0" cy="0" r="10"></circle>
+// </g>
+```

src/appendTo/appendTo.index.js

@@ -0,0 +1,3 @@
+export const $$appendTo = (parent) => (child) => (
+  parent.appendChild(child), parent
+);

src/appendTo/appendTo.spec.js

@@ -0,0 +1,19 @@
+import { expect } from "chai";
+import { $$el } from "../el/el.index.js";
+import { $$appendTo } from "./appendTo.index.js";
+
+export default ({ describe, it }) => [
+  describe(`$$appendTo`, function () {
+    it(`The function append the element to the parent element as a child element.`, function () {
+      // given
+      const parent_el = $$el(`<g></g>`)();
+      const child_el = $$el(`<circle cx="0" cy="0" r="10"></circle>`)();
+
+      // when
+      $$appendTo(parent_el)(child_el);
+
+      // then
+      expect(parent_el.contains(child_el)).true;
+    });
+  }),
+];

src/el/el.spec.js

@@ -1,5 +1,6 @@
 import { expect } from "chai";
 import { flatMapL, mapL } from "fxjs2";
+import { $$getAttrNS } from "../getAttrNS/getAttrNS.index.js";
 import { $$el } from "./el.index.js";
 
 const MOCK_STR = `<circle cx="10" cy="20" r="30"></circle>`;
@@ -12,9 +13,9 @@ const setupSVGList = () => [
 const expectElFromMockStr = ($el) => {
   expect($el).instanceof(SVGElement);
   expect($el.nodeName.toLowerCase()).equal("circle");
-  expect($el.getAttributeNS(null, "cx")).equal("10");
-  expect($el.getAttributeNS(null, "cy")).equal("20");
-  expect($el.getAttributeNS(null, "r")).equal("30");
+  expect($$getAttrNS("cx")($el)).equal("10");
+  expect($$getAttrNS("cy")($el)).equal("20");
+  expect($$getAttrNS("r")($el)).equal("30");
 };
 
 export default ({ describe, it }) => [

src/els/els.spec.js

@@ -11,6 +11,7 @@ import {
   zip,
 } from "fxjs2";
 import { makeRandomInt } from "../../test/utils/makeRandomInt.js";
+import { $$getAttrNS } from "../getAttrNS/getAttrNS.index.js";
 import { $$els } from "./els.index.js";
 
 const setupSVGList = () => [
@@ -79,7 +80,7 @@ export default ({ describe, it }) => [
           expect($el).instanceof(SVGElement);
           expect($el.nodeName.toLowerCase()).equal(name);
           for (const [key, expect_value] of entriesL(attrs)) {
-            const receive_value = $el.getAttributeNS(null, key);
+            const receive_value = $$getAttrNS(key)($el);
             expect(receive_value).equal(expect_value);
           }
         }

src/fxsvg.js

@@ -1,4 +1,6 @@
+import { $$append } from "./append/append.index.js";
 import { $$appendRotateTransform } from "./appendRotateTransform/appendRotateTransform.index.js";
+import { $$appendTo } from "./appendTo/appendTo.index.js";
 import { $$appendTranslateTransform } from "./appendTranslateTransform/appendTranslateTransform.index.js";
 import { $$consolidateTransformList } from "./consolidateTransformList/consolidateTransformList.index.js";
 import { $$createSVGMatrix } from "./createSVGMatrix/createSVGMatrix.index.js";
@@ -38,6 +40,8 @@ import { $$mergeRotateTransform } from "./mergeRotateTransform/mergeRotateTransf
 import { $$mergeScaleTransform } from "./mergeScaleTransform/mergeScaleTransform.index.js";
 import { $$mergeScaleTransform2 } from "./mergeScaleTransform2/mergeScaleTransform2.index.js";
 import { $$mergeTranslateTransform } from "./mergeTranslateTransform/mergeTranslateTransform.index.js";
+import { $$qs } from "./qs/qs.index.js";
+import { $$qsa } from "./qsa/qsa.index.js";
 import { $$removeAttrNS } from "./removeAttrNS/removeAttrNS.index.js";
 import { $$setAttrNS } from "./setAttrNS/setAttrNS.index.js";
 import { $$updateMatrixTransform } from "./updateMatrixTransform/updateMatrixTransform.index.js";
@@ -46,7 +50,9 @@ import { $$updateScaleTransform } from "./updateScaleTransform/updateScaleTransf
 import { $$updateTranslateTransform } from "./updateTranslateTransform/updateTranslateTransform.index.js";
 
 export const FxSVG = {
+  append: $$append,
   appendRotateTransform: $$appendRotateTransform,
+  appendTo: $$appendTo,
   appendTranslateTransform: $$appendTranslateTransform,
   consolidateTransformList: $$consolidateTransformList,
   createSVGMatrix: $$createSVGMatrix,
@@ -87,6 +93,8 @@ export const FxSVG = {
   mergeScaleTransform: $$mergeScaleTransform,
   mergeScaleTransform2: $$mergeScaleTransform2,
   mergeTranslateTransform: $$mergeTranslateTransform,
+  qs: $$qs,
+  qsa: $$qsa,
   removeAttrNS: $$removeAttrNS,
   setAttrNS: $$setAttrNS,
   updateMatrixTransform: $$updateMatrixTransform,

src/getBoxPoints/README.md

@@ -21,7 +21,7 @@ const str = `
 </rect>
 `;
 const $el = $$el(str)();
-$svg.appendChild($el);
+$$append($el)($svg);
 console.log($$getBoxPoints($el));
 // {original: {...}, transformed: {...}, bounding: {...}}
 // original:

src/getBoxPoints/getBoxPoints.spec.js

@@ -4,6 +4,7 @@ import { makeMockRect } from "../../test/utils/makeMockRect.js";
 import { makeRandomInt } from "../../test/utils/makeRandomInt.js";
 import { makeRandomNumber } from "../../test/utils/makeRandomNumber.js";
 import { makeRandomTransformAttributeValue } from "../../test/utils/makeRandomTransformAttributeValue.js";
+import { $$append } from "../append/append.index.js";
 import { $$createSVGMatrix } from "../createSVGMatrix/createSVGMatrix.index.js";
 import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js";
 import { $$getBoxPoints } from "./getBoxPoints.index.js";
@@ -25,7 +26,7 @@ const setupMock = ({ transform } = {}) => {
   });
 
   document.body.appendChild($svg);
-  $svg.appendChild($el);
+  $$append($el)($svg);
 
   return { x, y, width, height, $el, $svg };
 };

src/getCenterPoint/README.md

@@ -23,7 +23,7 @@ const str = `
 </rect>
 `;
 const $el = $$el(str)();
-$svg.appendChild($el);
+$$append($el)($svg);
 
 console.log($$getCenterPoint($el));
 // {original: SVGPoint, transformed: SVGPoint}

src/getCenterPoint/getCenterPoint.spec.js

@@ -4,6 +4,7 @@ import { makeMockRect } from "../../test/utils/makeMockRect.js";
 import { makeRandomInt } from "../../test/utils/makeRandomInt.js";
 import { makeRandomNumber } from "../../test/utils/makeRandomNumber.js";
 import { makeRandomTransformAttributeValue } from "../../test/utils/makeRandomTransformAttributeValue.js";
+import { $$append } from "../append/append.index.js";
 import { $$createSVGPoint } from "../createSVGPoint/createSVGPoint.index.js";
 import { $$getBoxPoints } from "../getBoxPoints/getBoxPoints.index.js";
 import { $$getCenterPoint } from "./getCenterPoint.index.js";
@@ -20,7 +21,7 @@ const setupMock = ({ transform } = {}) => {
   });
 
   document.body.appendChild($svg);
-  $svg.appendChild($el);
+  $$append($el)($svg);
 
   return { $el, $svg };
 };

src/index.js

@@ -1,4 +1,6 @@
+export { $$append } from "./append/append.index.js";
 export { $$appendRotateTransform } from "./appendRotateTransform/appendRotateTransform.index.js";
+export { $$appendTo } from "./appendTo/appendTo.index.js";
 export { $$appendTranslateTransform } from "./appendTranslateTransform/appendTranslateTransform.index.js";
 export { $$consolidateTransformList } from "./consolidateTransformList/consolidateTransformList.index.js";
 export { $$createSVGMatrix } from "./createSVGMatrix/createSVGMatrix.index.js";
@@ -38,6 +40,8 @@ export { $$mergeRotateTransform } from "./mergeRotateTransform/mergeRotateTransf
 export { $$mergeScaleTransform } from "./mergeScaleTransform/mergeScaleTransform.index.js";
 export { $$mergeScaleTransform2 } from "./mergeScaleTransform2/mergeScaleTransform2.index.js";
 export { $$mergeTranslateTransform } from "./mergeTranslateTransform/mergeTranslateTransform.index.js";
+export { $$qs } from "./qs/qs.index.js";
+export { $$qsa } from "./qsa/qsa.index.js";
 export { $$removeAttrNS } from "./removeAttrNS/removeAttrNS.index.js";
 export { $$setAttrNS } from "./setAttrNS/setAttrNS.index.js";
 export { $$updateMatrixTransform } from "./updateMatrixTransform/updateMatrixTransform.index.js";

src/mergeScaleTransform2/mergeScaleTransform2.index.js

@@ -1,6 +1,8 @@
 import { each, go, go1, mapL, rangeL, some } from "fxjs2";
+import { $$getAttrNS } from "../getAttrNS/getAttrNS.index.js";
 import { $$getBaseTransformList } from "../getBaseTransformList/getBaseTransformList.index.js";
 import { $$isValidFxScaleSVGTransformList } from "../isValidFxScaleSVGTransformList/isValidFxScaleSVGTransformList.index.js";
+import { $$setAttrNS } from "../setAttrNS/setAttrNS.index.js";
 
 const VALID_DIRECTION = new Set(["n", "ne", "e", "se", "s", "sw", "w", "nw"]);
 
@@ -29,7 +31,7 @@ export const $$mergeScaleTransform2 = ({
   );
   const [x, y, width, height] = go(
     [x_name, y_name, width_name, height_name],
-    mapL((name) => $el.getAttributeNS(null, name)),
+    mapL((name) => $$getAttrNS(name)($el)),
     mapL(parseFloat)
   );
 
@@ -57,7 +59,7 @@ export const $$mergeScaleTransform2 = ({
       [height_name, height * Math.abs(sy)],
     ],
     mapL(([k, v]) => [k, `${v}`]),
-    each(([k, v]) => $el.setAttributeNS(null, k, v))
+    each((kv) => $$setAttrNS(kv)($el))
   );
 
   each(() => transform_list.removeItem(index - 1), rangeL(3));