fxsvg - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "fxsvg",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Functional SVG Handling Library",
+  "type": "module",
   "main": "./src/index.js",
@@ -6,0 +7,0 @@ "scripts": {

README.md

@@ -7,11 +7,33 @@ # FxSVG
 
-### els
+### \$\$getSVG
 
+내부적으로 사용하는 svg 객체를 반환합니다.
+`$$setSVG` 함수로 설정하지 않은 경우 `document.createElementNS` 를 실행합니다.
+해당 함수를 실행하지 못하는 환경인 경우 `$$setSVG` 함수로 사용할 svg 객체를 설정합니다.
+
+```javascript
+console.log($$getSVG());
+// <svg></svg>
+```
+
+### \$\$setSVG
+
+내부적으로 사용하는 svg 객체를 설정한 후 설정한 svg 객체를 반환합니다.
+
+```javascript
+console.log(
+  $$setSVG(document.createElementNS("http://www.w3.org/2000/svg", "svg"))
+);
+// <svg></svg>
+```
+
+### \$\$els
+
 svg 문자열을 받아 svg 객체를 담은 배열을 생성합니다.
 
 ```javascript
-console.log(els('<rect x="0" y="0" width="10" height="10"></rect>'));
+console.log($$els('<rect x="0" y="0" width="10" height="10"></rect>'));
 // [rect]
 console.log(
-  els(
+  $$els(
     '<rect x="0" y="0" width="10" height="10"></rect><circle cx="1" cy="1" r="5"></circle>'
@@ -23,3 +45,3 @@ )
 
-### el
+### \$\$el
 
@@ -29,6 +51,6 @@ svg 문자열을 받아 svg 객체를 생성합니다.
 ```javascript
-console.log(els('<rect x="0" y="0" width="10" height="10"></rect>'));
+console.log($$el('<rect x="0" y="0" width="10" height="10"></rect>'));
 // rect
 console.log(
-  els(
+  $$el(
     '<rect x="0" y="0" width="10" height="10"></rect><circle cx="1" cy="1" r="5"></circle>'
@@ -39,1 +61,284 @@ )
 ```
+
+### \$\$createSVGPoint
+
+`SVGPoint` 객체를 생성합니다.
+
+```javascript
+console.log($$createSVGPoint());
+// SVGPoint {x: 0, y: 0}
+
+console.log($$createSVGPoint({ x: 10 }));
+// SVGPoint {x: 10, y: 0}
+
+console.log($$createSVGPoint({ y: 10 }));
+// SVGPoint {x: 0, y: 10}
+
+console.log($$createSVGPoint({ x: 10, y: 10 }));
+// SVGPoint {x: 10, y: 10}
+```
+
+### \$\$createSVGRect
+
+`SVGRect` 객체를 생성합니다.
+
+```javascript
+console.log($$createSVGRect());
+// SVGRect {x: 0, y: 0, width: 0, height: 0}
+
+console.log($$createSVGRect({ x: 10 }));
+// SVGRect {x: 10, y: 0, width: 0, height: 0}
+
+console.log($$createSVGRect({ width: 100 }));
+// SVGRect {x: 0, y: 0, width: 100, height: 0}
+
+console.log($$createSVGRect({ x: 10, y: 10, width: 100, height: 100 }));
+// SVGRect {x: 10, y: 10, width: 100, height: 100}
+```
+
+### \$\$createSVGMatrix
+
+`SVGMatrix` 객체를 생성합니다.
+
+```javascript
+console.log($$createSVGMatrix());
+// SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0}
+
+console.log($$createSVGMatrix({ e: 10, f: 20 }));
+// SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20}
+
+console.log($$createSVGMatrix({ a: 2, b: 0, c: 0, d: 4, e: 10, f: 20 }));
+// SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 10, f: 20}
+```
+
+### \$\$createSVGTransform
+
+`SVGTransform` 객체를 생성합니다.
+
+```javascript
+console.log($$createSVGTransform());
+// SVGTransform {type: 1, matrix: SVGMatrix, angle: 0}
+```
+
+### \$\$createSVGTransformTranslate
+
+`type`이 `SVGTransform.SVG_TRANSFORM_TRANSLATE`인 `SVGTransform` 객체를 생성합니다.
+`tx`로 x축 방향으로 이동할 값, `ty`로 y축 방향으로 이동할 값을 설정합니다.
+
+```javascript
+console.log($$createSVGTransformTranslate());
+// SVGTransform {type: 2, matrix: SVGMatrix, angle: 0}
+
+console.log($$createSVGTransformTranslate({ tx: 10 }));
+// SVGTransform {type: 2, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 0}
+
+console.log($$createSVGTransformTranslate({ tx: 10, ty: 20 }));
+// SVGTransform {type: 2, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 10, f: 20}
+```
+
+### \$\$createSVGTransformRotate
+
+`type`이 `SVGTransform.SVG_TRANSFORM_ROTATE`인 `SVGTransform` 객체를 생성합니다.
+`cx`, `cy`로 회전할 중심의 좌포를 설정하고 `angle`로 회전할 각도(`deg` 단위)를 설정합니다.
+`cx`, `cy`를 설정하지 않으면 `(0, 0)`으로 설정합니다.
+
+```javascript
+console.log($$createSVGTransformRotate());
+// SVGTransform {type: 4, matrix: SVGMatrix, angle: 0}
+
+console.log($$createSVGTransformRotate({ angle: 45 }));
+// SVGTransform {type: 4, matrix: SVGMatrix, angle: 45}
+
+console.log($$createSVGTransformRotate({ cx: 10, cy: 10, angle: 30 }));
+// SVGTransform {type: 4, matrix: SVGMatrix, angle: 30}
+```
+
+### \$\$createSVGTransformScale
+
+`type`이 `SVGTransform.SVG_TRANSFORM_SCALE`인 `SVGTransform` 객체를 생성합니다.
+`sx`로 x축 방향으로 확대할 비율을, `sy`로 y축 방향으로 확대할 비율을 설정합니다.
+`sx`, `sy`가 음수일 경우 해당 축을 기준으로 대칭이동합니다.
+
+```javascript
+console.log($$createSVGTransformScale());
+// SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0}
+
+console.log($$createSVGTransformScale({ sx: 2 }));
+// SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 2, b: 0, c: 0, d: 1, e: 0, f: 0}
+
+console.log($$createSVGTransformScale({ sx: 2, sy: 4 }));
+// SVGTransform {type: 3, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 2, b: 0, c: 0, d: 4, e: 0, f: 0}
+```
+
+### \$\$createSVGTransformMatrix
+
+`type`이 `SVGTransform.SVG_TRANSFORM_MATRIX`인 `SVGTransform` 객체를 생성합니다.
+`SVGTransform`에 인자로 받은 `SVGMatrix`를 설정합니다.
+
+```javascript
+console.log($$createSVGTransformMatrix($$createSVGMatrix()));
+// SVGTransform {type: 1, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0}
+
+console.log(
+  $$createSVGTransformMatrix(
+    $$createSVGMatrix({ a: 2, b: 3, c: 4, d: 5, e: 6, f: 7 })
+  )
+);
+// SVGTransform {type: 1, matrix: SVGMatrix, angle: 0}
+//   SVGMatrix {a: 2, b: 3, c: 4, d: 5, e: 6, f: 7}
+```
+
+### \$\$isTranslateSVGTransform
+
+해당 `SVGTransform`의 `type`이 `SVGTransform.SVG_TRANSFORM_TRANSLATE`인지 여부를 판단합니다.
+
+```javascript
+console.log($$isTranslateSVGTransform($$createSVGTransformTranslate()));
+// true
+
+console.log($$isTranslateSVGTransform($$createSVGTransformRotate()));
+// false
+```
+
+### \$\$isRotateSVGTransform
+
+해당 `SVGTransform`의 `type`이 `SVGTransform.SVG_TRANSFORM_ROTATE`인지 여부를 판단합니다.
+
+```javascript
+console.log($$isRotateSVGTransform($$createSVGTransformRotate()));
+// true
+
+console.log($$isRotateSVGTransform($$createSVGTransformTranslate()));
+// false
+```
+
+### \$\$isScaleSVGTransform
+
+해당 `SVGTransform`의 `type`이 `SVGTransform.SVG_TRANSFORM_SCALE`인지 여부를 판단합니다.
+
+```javascript
+console.log($$isScaleSVGTransform($$createSVGTransformScale()));
+// true
+
+console.log($$isScaleSVGTransform($$createSVGTransformTranslate()));
+// false
+```
+
+### \$\$getBaseTransformList
+
+입력받은 svg 객체의 `transform.baseVal` 값을 반환합니다.
+
+`SVGGraphicsElement` 인터페이스는 `transform` 속성으로 `SVGAnimatedTransformList` 객체를 가지고 있고
+해당 객체는 `baseVal` 속성으로 `SVGTransformList` 객체를 가지고 있습니다.
+
+```javascript
+const $el = $$el(`
+  <rect
+    x="0"
+    y="0"
+    width="10"
+    height="20"
+    transform="translate(10, 20) rotate(45, 100, 200) scale(2, 3)"
+  ></rect>
+`);
+console.log($$getBaseTransformList($el));
+// SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, length: 3, numberOfItem: 3}
+//   0: SVGTransform - type: SVG_TRANSFORM_TRANSLATE
+//   1: SVGTransform - type: SVG_TRANSFORM_ROTATE
+//   2: SVGTransform - type: SVG_TRANSFORM_SCALE
+```
+
+### \$\$getAnimTransformList
+
+입력받은 svg 객체의 `transform.animVal` 값을 반환합니다.
+
+`SVGGraphicsElement` 인터페이스는 `transform` 속성으로 `SVGAnimatedTransformList` 객체를 가지고 있고
+해당 객체는 `animVal` 속성으로 `SVGTransformList` 객체를 가지고 있습니다.
+
+`animVal`은 SMIL 애니메이션이 적용된 경우에만 `baseVal`과 다릅니다. 특별한 상황이 아닌 한 동일한 값을 가집니다.
+하지만 값은 동일해도 다른 래퍼런스를 가리킵니다.
+
+```javascript
+const $el = $$el(`
+  <rect
+    x="0"
+    y="0"
+    width="10"
+    height="20"
+    transform="translate(10, 20) rotate(45, 100, 200) scale(2, 3)"
+  ></rect>
+`);
+console.log($$getAnimTransformList($el));
+// SVGTransformList {0: SVGTransform, 1: SVGTransform, 2: SVGTransform, length: 3, numberOfItem: 3}
+//   0: SVGTransform - type: SVG_TRANSFORM_TRANSLATE
+//   1: SVGTransform - type: SVG_TRANSFORM_ROTATE
+//   2: SVGTransform - type: SVG_TRANSFORM_SCALE
+```
+
+### \$\$getBoxPoints
+
+svg 객체의 영역에 해당하는 `SVGPoint`들을 반환합니다. 해당 svg 객체는 DOM 트리의 `<svg></svg>` 태그에 속해 있어야 합니다.
+
+`original` 속성은 svg 객체가 `transform` 하기 전 영역입니다.
+`transformed` 속성은 svg 객체가 `transform` 한 후 영역입니다.
+`bounding` 속성은 svg 객체가 `transform` 한 후 영역을 덮는 최소 직사각형 영역입니다.
+
+```javascript
+const $el = $$el(`
+  <rect
+    x="10"
+    y="20"
+    width="100"
+    height="200"
+    transform="translate(400, 500)" 
+  >
+  </rect>
+`);
+$svg.appendChild($el);
+console.log($$getBoxPoints($el));
+// {original: {...}, transformed: {...}, bounding: {...}}
+// original:
+//   top_left: SVGPoint {x: 10, y: 20}
+//   top_right: SVGPoint {x: 110, y: 20}
+//   bottom_left: SVGPoint {x: 10, y: 220}
+//   bottom_right: SVGPoint {x: 110, y: 220}
+// transformed:
+//   top_left: SVGPoint {x: 410, y: 520}
+//   top_right: SVGPoint {x: 510, y: 520}
+//   bottom_left: SVGPoint {x: 410, y: 720}
+//   bottom_right: SVGPoint {x: 510, y: 720}
+// bounding:
+//   min: SVGPoint {x: 410, y: 520}
+//   max: SVGPoint {x: 510, y: 720}
+```
+
+### \$\$getCenterPoint
+
+svg 객체의 중심에 해당하는 `SVGPoint`를 반환합니다. 해당 svg 객체는 DOM 트리의 `<svg></svg>` 태그에 속해 있어야 합니다.
+
+`original` 속성은 svg 객체가 `transform` 하기 전 중심입니다.
+`transformed` 속성은 svg 객체가 `transform` 한 후 중심입니다.
+
+```javascript
+const $el = $$el(`
+  <rect
+    x="10"
+    y="20"
+    width="100"
+    height="200"
+    transform="translate(400, 500)" 
+  >
+  </rect>
+`);
+$svg.appendChild($el);
+console.log($$getCenterPoint($el));
+// {original: SVGPoint, transformed: SVGPoint}
+// original: SVGPoint {x: 60, y: 120}
+// transformed: SVGPoint {x: 460, y: 620}
+```

src/el.js

@@ -1,3 +0,3 @@
-import { els } from "./els.js";
+import { $$els } from "./els.js";
 
-export const el = (svg) => els(svg)[0];
+export const $$el = (svg) => $$els(svg)[0];

src/els.js

@@ -1,14 +0,10 @@
-import { getSVG } from "./getSetSVG.js";
+import { $$getSVG } from "./getSetSVG.js";
 
-export const els = (svg) => {
+export const $$els = (svg) => {
   svg = svg.trim();
-  const $svg = getSVG();
+  const $svg = $$getSVG();
   $svg.innerHTML = svg;
-  const result = [];
-  for (const $el of $svg.childNodes) {
-    $svg.removeChild($el);
-    result.push($el);
-  }
+  const result = [...$svg.childNodes];
   $svg.innerHTML = "";
   return result;
 };

src/getSetSVG.js

 let $svg;
 
-export const setSVG = ($new_svg) => {
+export const $$setSVG = ($new_svg) => {
   $svg = $new_svg;
@@ -8,7 +8,7 @@ return $svg;
 
-export const getSVG = () => {
+export const $$getSVG = () => {
   if (!$svg) {
-    setSVG(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
+    $$setSVG(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
   }
   return $svg;
 };

src/index.js

@@ -1,3 +0,19 @@
-export { getSVG, setSVG } from "./getSetSVG.js";
-export { els } from "./els.js";
-export { el } from "./el.js";
+export { $$getSVG, $$setSVG } from "./getSetSVG.js";
+export { $$els } from "./els.js";
+export { $$el } from "./el.js";
+export { $$createSVGPoint } from "./createSVGPoint.js";
+export { $$createSVGRect } from "./createSVGRect.js";
+export { $$createSVGMatrix } from "./createSVGMatrix.js";
+export { $$createSVGTransform } from "./createSVGTransform.js";
+export { $$createSVGTransformTranslate } from "./createSVGTransformTranslate.js";
+export { $$createSVGTransformRotate } from "./createSVGTransformRotate.js";
+export { $$createSVGTransformScale } from "./createSVGTransformScale.js";
+export { $$createSVGTransformMatrix } from "./createSVGTransformMatrix.js";
+export { $$isTranslateSVGTransform } from "./isTranslateSVGTransform.js";
+export { $$isRotateSVGTransform } from "./isRotateSVGTransform.js";
+export { $$isScaleSVGTransform } from "./isScaleSVGTransform.js";
+export { $$getBaseTransformList } from "./getBaseTransformList.js";
+export { $$getAnimTransformList } from "./getAnimTransformList.js";
+export { $$getBoxPoints } from "./getBoxPoints.js";
+export { $$getCenterPoint } from "./getCenterPoint.js";
+export { default } from "./index_default.js";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20528

increased by553.97%

Number of package files

23

increased by228.57%

Lines of code

238

increased by720.69%

Number of lines in readme file

341

increased by847.22%

Is type module

Yes

No dependency changes