Revert reverse arc direction (#32)

* Revert "Reverse the arc direction (#30)", use-rough-arrow.ts only

This reverts commit b4bcfaa.

* Update comment

* Update slides.md

* Fix slides.md

* Add changeset

Author: whitphx

.changeset/olive-otters-add.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+[BREAKING] Revert the previous version

components/use-rough-arrow.ts

@@ -101,7 +101,7 @@ export function useRoughArrow(props: {
         lineOptions,
       );
       const angle =
-        Math.atan2(point2.y - point1.y, point2.x - point1.x) + Math.PI / 2;
+        Math.atan2(point2.y - point1.y, point2.x - point1.x) - Math.PI / 2;
       return {
         svg,
         angle1: angle,
@@ -123,8 +123,8 @@ export function useRoughArrow(props: {
 
     // Unit vector perpendicular to the chord.
     const n = {
-      x: dy / chordLength,
-      y: -dx / chordLength,
+      x: -dy / chordLength,
+      y: dx / chordLength,
     };
 
     // Offset for the arc's center from the midpoint.
@@ -172,7 +172,7 @@ export function useRoughArrow(props: {
     // So we use .path() instead as below.
     const largeArcFlag =
       centerPositionParam < -1 || 1 < centerPositionParam ? 1 : 0;
-    const sweepFlag = centerPositionParam > 0 ? 0 : 1;
+    const sweepFlag = centerPositionParam > 0 ? 1 : 0;
     const svg = roughSvg.path(
       `M${point1.x} ${point1.y} A${R} ${R} 0 ${largeArcFlag} ${sweepFlag} ${point2.x} ${point2.y}`,
       lineOptions,
@@ -248,14 +248,14 @@ export function useRoughArrow(props: {
 
     arrowHead2.setAttribute(
       "transform",
-      `translate(${point2Ref.value.x},${point2Ref.value.y}) rotate(${(arcData.value.angle2 * 180) / Math.PI + (centerPositionParam >= 0 ? -90 : 90)})`,
+      `translate(${point2Ref.value.x},${point2Ref.value.y}) rotate(${(arcData.value.angle2 * 180) / Math.PI + (centerPositionParam >= 0 ? 90 : -90)})`,
     );
     svg.value.appendChild(arrowHead2);
 
     if (twoWay) {
       arrowHead1.setAttribute(
         "transform",
-        `translate(${point1Ref.value.x},${point1Ref.value.y}) rotate(${(arcData.value.angle1 * 180) / Math.PI + (centerPositionParam >= 0 ? 90 : -90)})`,
+        `translate(${point1Ref.value.x},${point1Ref.value.y}) rotate(${(arcData.value.angle1 * 180) / Math.PI + (centerPositionParam >= 0 ? -90 : 90)})`,
       );
       svg.value.appendChild(arrowHead1);
     }

slides.md

@@ -172,16 +172,16 @@ mdc: true
 
 # Arc
 
-<code id="arc-start" absolute left-300px top-400px style="transform: translate(-50%, -50%);">#arc-start</code>
-<code id="arc-end" absolute left-300px top-100px style="transform: translate(-50%, -50%);">#arc-end</code>
+<code id="arc-start" absolute left-300px top-100px style="transform: translate(-50%, -50%);">#arc-start</code>
+<code id="arc-end" absolute left-300px top-400px style="transform: translate(-50%, -50%);">#arc-end</code>
 
-<FancyArrow id1="arc-start" id2="arc-end" arc="1.5" color="red" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="1.0" color="orange" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="0.5" color="yellow" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="0.0" color="green" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="-0.5" color="blue" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="-1.0" color="purple" />
-<FancyArrow id1="arc-start" id2="arc-end" arc="-1.5" color="pink" />
+<FancyArrow arc="1.5" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="red" />
+<FancyArrow arc="1.0" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="orange" />
+<FancyArrow arc="0.5" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="yellow" />
+<FancyArrow arc="0.0" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="green" />
+<FancyArrow arc="-0.5" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="blue" />
+<FancyArrow arc="-1.0" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="purple" />
+<FancyArrow arc="-1.5" id1="arc-start" pos1="bottom" id2="arc-end" pos2="top" color="pink" />
 
 <Arrow x1="50" y1="450" x2="550" y2="450" />
 
@@ -224,16 +224,16 @@ mdc: true
     <span id="bar">Bar</span>
 </div>
 
-<FancyArrow v-click="1" forward:delay-100 id1="foo" pos1="bottomleft" id2="bar" pos2="topleft" color="red" width="2" arc="0.3" seed="1" roughness="2" >Hey</FancyArrow>
-<FancyArrow v-click="1" forward:delay-100 id2="foo" pos2="bottomright" id1="bar" pos1="topright" color="red" width="2" arc="0.3" seed="1" roughness="2" >
+<FancyArrow v-click="1" forward:delay-100 id1="foo" pos1="bottomright" id2="bar" pos2="topright" color="red" width="2" arc="0.3" seed="1" roughness="2" >Hey</FancyArrow>
+<FancyArrow v-click="1" forward:delay-100 id2="foo" pos2="bottomleft" id1="bar" pos1="topleft" color="red" width="2" arc="0.3" seed="1" roughness="2" >
     <span text-red>Ahoy</span>
 </FancyArrow>
 
 <div v-click p-8 :class="$clicks === 0 ? 'translate-y--32' : $clicks === 1 ? 'translate-y--16' : ''">
     <span id="baz">Baz</span>
 </div>
 
-<FancyArrow v-click="2" forward:delay-100 id1="bar" pos1="bottomleft" id2="baz" pos2="topleft" color="green" width="2" arc="0.3" seed="1" roughness="2" >
+<FancyArrow v-click="2" forward:delay-100 id1="bar" pos1="bottomright" id2="baz" pos2="topright" color="green" width="2" arc="0.3" seed="1" roughness="2" >
     <span text-green v-mark.green="2">Hola!</span>
 </FancyArrow>
 ---