fix: stopAnimation trigger finish event (#203)

* fix: stopAnimation trigger finish event

* fix: trigger finish only when stopAnimation by method

* fix: set animateParam as null

* fix: check new duration by nullish coalescing

* chore: fix typo

* chore: fix unit test

* docs: add PanInput to axes logo

* chore: update demo build path

.gitignore

@@ -198,4 +198,3 @@ outjs/
 declaration/
 packages/*/dist/
 dist/
-demo/

package.json

@@ -9,9 +9,9 @@
     "packages:build": "lerna run build --ignore demo",
     "packages:publish": "lerna-helper publish --commit 'chore: update packages versions'",
     "docs:build": "rm -rf ./packages/demo/docs/api && jsdoc-to-mdx -c ./jsdoc-to-mdx.json",
-    "demo:build": "",
+    "demo:build": "npm run docs:build && npm run build --prefix packages/demo",
     "demo:build-docusaurus": "npm run build --prefix demo",
-    "demo:deploy": "",
+    "demo:deploy": "lerna-helper deploy --base @egjs/axes --remote upstream",
     "demo:deploy-origin": "lerna-helper deploy --base @egjs/axes --remote origin",
     "release": "lerna-helper release --base @egjs/axes --remote upstream --branch master",
     "prepush": "npm run lint",

packages/axes/src/Axes.ts

@@ -540,6 +540,7 @@ class Axes extends Component<AxesEvents> {
    */
   public stopAnimation() {
     this.animationManager.stopAnimation();
+    this.animationManager.finish(false);
     return this;
   }
 

packages/axes/src/animation/EasingManager.ts

@@ -26,7 +26,7 @@ export class EasingManager extends AnimationManager {
 
     const diffTime = new Date().getTime() - animateParam.startTime;
     const pos = options?.destPos || animateParam.destPos;
-    const duration = options?.duration || animateParam.duration;
+    const duration = options?.duration ?? animateParam.duration;
     if (options?.restart || duration <= diffTime) {
       this.setTo(pos, duration - diffTime);
       return;

packages/axes/src/inputType/PanInput.ts

@@ -78,7 +78,7 @@ export const getDirectionByAngle = (
  * @param {Number} [scale[1]=1] vertical axis scale <ko>수직축 배율</ko>
  * @param {Number} [thresholdAngle=45] The threshold value that determines whether user action is horizontal or vertical (0~90) <ko>사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)</ko>
  * @param {Number} [threshold=0] Minimal pan distance required before recognizing <ko>사용자의 Pan 동작을 인식하기 위해산 최소한의 거리</ko>
- * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than 1 pixel <ko>사용자가 1픽셀 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부/ko>
+ * @param {Boolean} [preventClickOnDrag=false] Whether to cancel the {@link https://developer.mozilla.org/en/docs/Web/API/Element/click_event click} event when the user finishes dragging more than 1 pixel <ko>사용자가 1픽셀 이상 드래그를 마쳤을 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트 취소 여부</ko>
  * @param {Number} [iOSEdgeSwipeThreshold=30] Area (px) that can go to the next page when swiping the right edge in iOS safari <ko>iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)</ko>
  * @param {String} [touchAction=null] Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis. <ko>엘리먼트의 "touch-action" CSS 속성을 덮어쓰는 값. 만약 null로 설정된 경우, 연결된 축 방향으로의 스크롤을 방지하게끔 자동으로 설정된다.</ko>
  **/

packages/demo/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start --host 0.0.0.0",
-    "build": "docusaurus build --out-dir ../../demo",
+    "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

packages/demo/src/css/demos/logo.css

@@ -0,0 +1,37 @@
+#container {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 320px;
+  margin-top: 40px;
+}
+
+.item {
+  z-index: 2;
+  cursor: grab;
+}
+
+.item svg {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+}
+
+.item.light svg {
+  width: 60px;
+  margin-left: -5px;
+}
+
+.item.bold svg {
+  width: 50px;
+  height: 40px;
+  padding-top: 5px;
+}
+
+.line {
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  height: 320px;
+}

packages/demo/src/pages/Home.tsx

@@ -4,8 +4,8 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import CodeBlock from "@theme/CodeBlock";
 
-import AxesIcon from "../../static/img/axes.svg";
 import Frameworks from ".//main/Frameworks";
+import Logo from "@site/src/pages/demos/logo";
 
 import "@site/src/css/index.css";
 import styles from "./home.module.css";
@@ -16,7 +16,7 @@ class Home extends React.Component {
       <Layout>
         <div className="container pb-6">
           <div className={styles.max400}>
-            <AxesIcon className={styles.mainImg} />
+            <Logo />
           </div>
           <section className="py-4">
             <div

packages/demo/src/pages/demos/logo.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import { useAxes, PanInput } from "@egjs/react-axes";
+import "../../css/demos/logo.css";
+
+import SquareIcon from "../../../static/img/demos/logo/square.svg";
+import TriangleIcon from "../../../static/img/demos/logo/triangle.svg";
+import CircleIcon from "../../../static/img/demos/logo/circle.svg";
+import XIcon from "../../../static/img/demos/logo/x.svg";
+import YIcon from "../../../static/img/demos/logo/y.svg";
+import ZIcon from "../../../static/img/demos/logo/z.svg";
+
+export default function Logo() {
+  const [offsetX1, setOffsetX1] = useState(null);
+  const [offsetX2, setOffsetX2] = useState(null);
+  const offsetY = 25;
+  const square = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: -125,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 55,
+    },
+  });
+  const triangle = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: -125,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 135,
+    },
+  });
+  const circle = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: -125,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 215,
+    },
+  });
+  const x = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: 75,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 55,
+    },
+  });
+  const y = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: 75,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 135,
+    },
+  });
+  const z = useAxes({
+    x: {
+      range: [-200, 150],
+      startPos: 75,
+    },
+    y: {
+      range: [0, 275],
+      startPos: 215,
+    },
+  });
+
+  useEffect(() => {
+    const container = document.getElementById("container");
+    const containerWidth = container.getBoundingClientRect().width;
+    setOffsetX1(60 + containerWidth / 2);
+    setOffsetX2(containerWidth / 2);
+    square.connect("x y", new PanInput("#square"));
+    triangle.connect("x y", new PanInput("#triangle"));
+    circle.connect("x y", new PanInput("#circle"));
+    x.connect("x y", new PanInput("#x"));
+    y.connect("x y", new PanInput("#y"));
+    z.connect("x y", new PanInput("#z"));
+    [square, triangle, circle, x, y, x].forEach(axes => {
+      axes.setAxis({
+        x: {
+          range: [-(containerWidth / 2) + 10, (containerWidth / 2) - 60],
+        }
+      });
+    })
+  }, []);
+
+  return (
+    <div>
+      <div id="container" style={{ opacity: `${offsetX1 ? "1" : "0"}` }}>
+        <div id="square" className="item" style={{ transform: `translateX(${square.x}px) translateY(${square.y}px)` }}><SquareIcon /></div>
+        <div id="triangle" className="item light" style={{ transform: `translateX(${triangle.x}px) translateY(${triangle.y}px)` }}><TriangleIcon /></div>
+        <div id="circle" className="item" style={{ transform: `translateX(${circle.x}px) translateY(${circle.y}px)` }}><CircleIcon /></div>
+        <div id="x" className="item bold" style={{ transform: `translateX(${x.x}px) translateY(${x.y}px)` }}><XIcon /></div>
+        <div id="y" className="item" style={{ transform: `translateX(${y.x}px) translateY(${y.y}px)` }}><YIcon /></div>
+        <div id="z" className="item bold" style={{ transform: `translateX(${z.x}px) translateY(${z.y}px)` }}><ZIcon /></div>
+        <svg className="line"><line x1={ offsetX1 + square.x } y1={ offsetY + square.y } x2={ offsetX2 + x.x } y2={ offsetY + x.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + square.x } y1={ offsetY + square.y } x2={ offsetX2 + y.x } y2={ offsetY + y.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + triangle.x } y1={ offsetY + triangle.y } x2={ offsetX2 + x.x } y2={ offsetY + x.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + triangle.x } y1={ offsetY + triangle.y } x2={ offsetX2 + y.x } y2={ offsetY + y.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + triangle.x } y1={ offsetY + triangle.y } x2={ offsetX2 + z.x } y2={ offsetY + z.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + circle.x } y1={ offsetY + circle.y } x2={ offsetX2 + y.x } y2={ offsetY + y.y } stroke="black" strokeWidth="4"/></svg>
+        <svg className="line"><line x1={ offsetX1 + circle.x } y1={ offsetY + circle.y } x2={ offsetX2 + z.x } y2={ offsetY + z.y } stroke="black" strokeWidth="4"/></svg>
+      </div>
+    </div>
+  );
+};