From 125fb5fd5f4ea80a9414f0a459a0dc325e594903 Mon Sep 17 00:00:00 2001
From: Kai Sassnowski <me@kai-sassnowski.com>
Date: Wed, 21 Aug 2024 11:02:36 +0200
Subject: [PATCH] feat: add cursors interactivity to components

---
 src/components/Circle.vue                 |   6 +
 src/components/Ellipse.vue                |  10 ++
 src/components/Graph.vue                  |  24 ++-
 src/components/Label.vue                  |   9 +
 src/components/Line.vue                   |  14 ++
 src/components/Point.vue                  |  22 ++-
 src/components/PolyLine.vue               |  15 ++
 src/components/Polygon.vue                |   6 +
 src/components/Sector.vue                 |   9 +
 src/components/Vector.vue                 |  16 +-
 src/composables/usePointerIntersection.ts |  20 +++
 src/types.ts                              |   3 +-
 src/utils/geometry.ts                     | 205 ++++++++++++++++++++++
 13 files changed, 355 insertions(+), 4 deletions(-)
 create mode 100644 src/composables/usePointerIntersection.ts
 create mode 100644 src/utils/geometry.ts

diff --git a/src/components/Circle.vue b/src/components/Circle.vue
index 3770972..9f0ccca 100644
--- a/src/components/Circle.vue
+++ b/src/components/Circle.vue
@@ -18,6 +18,8 @@ import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { type Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideCircle } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -40,6 +42,10 @@ const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) =>
+  pointInsideCircle(Vector2.wrap(props.position), props.radius, point),
+);
 
 const position = computed(() =>
   new Vector2(props.position).transform(matrix.value),
diff --git a/src/components/Ellipse.vue b/src/components/Ellipse.vue
index d1f1f69..f7832f7 100644
--- a/src/components/Ellipse.vue
+++ b/src/components/Ellipse.vue
@@ -20,6 +20,8 @@ import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { type Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideEllipse } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -47,6 +49,14 @@ const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) =>
+  pointInsideEllipse(
+    Vector2.wrap(props.position),
+    Vector2.wrap(props.radius),
+    point,
+  ),
+);
 
 const position = computed(() =>
   new Vector2(props.position).transform(matrix.value),
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index ab20068..196f833 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -5,6 +5,7 @@
     :width="size.x"
     :height="size.y"
     xmlns="http://www.w3.org/2000/svg"
+    v-on="interactive ? { mousemove: onMouseMove } : {}"
   >
     <defs>
       <clipPath :id="`clip-${id}`">
@@ -134,6 +135,7 @@ const props = withDefaults(
     axis?: boolean;
     grid?: boolean;
     units?: boolean;
+    interactive?: boolean;
   }>(),
   {
     width: 300,
@@ -145,13 +147,15 @@ const props = withDefaults(
     axis: true,
     grid: true,
     units: true,
+    interactive: false,
   },
 );
 
 const id = Math.random().toString(16).slice(2);
 const { colors } = useColors();
-const el = ref<SVGElement | null>();
+const el = ref<SVGSVGElement | null>();
 const containerSize = ref(new Vector2(props.width, props.height));
+const svgPoint = ref<SVGPoint | null>();
 
 const origin = computed(() => {
   if (props.origin) {
@@ -189,6 +193,16 @@ const matrixWorld = computed(() => {
   return matrix;
 });
 
+const cursor = computed<Vector2 | null>(() => {
+  if (!svgPoint.value) {
+    return null;
+  }
+  const pos = svgPoint.value!.matrixTransform(
+    el.value!.getScreenCTM()!.inverse(),
+  );
+  return new Vector2(pos.x, pos.y).transform(matrixWorld.value.inverse);
+});
+
 const context = {
   size,
   scale,
@@ -196,6 +210,7 @@ const context = {
   offset,
   domain,
   invScale,
+  cursor,
   matrix: matrixWorld,
 };
 
@@ -205,6 +220,13 @@ function formatLabelValue(value: number) {
   return value.toFixed(2).replace(/\.?0+$/, "");
 }
 
+function onMouseMove(event: MouseEvent) {
+  const point = el.value!.createSVGPoint();
+  point.x = event.clientX;
+  point.y = event.clientY;
+  svgPoint.value = point;
+}
+
 onMounted(() => {
   const observer = new ResizeObserver((entries) => {
     const entry = entries[0];
diff --git a/src/components/Label.vue b/src/components/Label.vue
index 2cedd30..7b1ec52 100644
--- a/src/components/Label.vue
+++ b/src/components/Label.vue
@@ -32,6 +32,8 @@ import { type Color } from "../types.ts";
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideRectangle } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -66,6 +68,13 @@ const { matrix, invScale } = useGraphContext();
 const { colors, parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  const center = Vector2.wrap(props.position);
+  const width = boxWidth.value / matrix.value.a;
+  const height = boxHeight.value / matrix.value.a;
+  return pointInsideRectangle(center, new Vector2(width, height), point);
+});
 
 const position = computed(() =>
   Vector2.wrap(props.position).transform(matrix.value),
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 9b9437b..94a1394 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -27,6 +27,8 @@ import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import Label from "./Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -39,12 +41,14 @@ const props = withDefaults(
     lineWidth?: number;
     label?: string;
     labelSize?: "small" | "normal" | "large";
+    highlightThreshold?: number;
   }>(),
   {
     dashed: false,
     lineWidth: 1.75,
     yIntercept: 0,
     labelSize: "small",
+    highlightThreshold: 0.25,
   },
 );
 
@@ -56,6 +60,16 @@ const { domain, matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
+const active = defineModel("active", { default: false });
+usePointerIntersection(
+  active,
+  (point) =>
+    distanceToLineSegment(
+      from.value.transform(matrix.value.inverse),
+      to.value.transform(matrix.value.inverse),
+      point,
+    ) <= props.highlightThreshold,
+);
 
 function clamp(x: number, min: number, max: number) {
   return Math.min(max, Math.max(min, x));
diff --git a/src/components/Point.vue b/src/components/Point.vue
index 927b029..53201fc 100644
--- a/src/components/Point.vue
+++ b/src/components/Point.vue
@@ -11,6 +11,7 @@
 
     <Label
       v-if="label"
+      v-model:active="labelActive"
       :text="label"
       :position="labelPosition"
       :color="color"
@@ -20,13 +21,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRef } from "vue";
+import { ref, computed, toRef } from "vue";
 
 import { type Color } from "../types.ts";
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import Label from "./Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideCircle } from "../utils/geometry.ts";
 
 type LabelPosition = "top" | "bottom" | "left" | "right";
 
@@ -39,6 +42,7 @@ const props = withDefaults(
     label?: string;
     filled?: boolean;
     lineWidth?: number;
+    highlightThreshold?: number;
   }>(),
   {
     radius: 4,
@@ -46,12 +50,28 @@ const props = withDefaults(
     labelPosition: "bottom",
     filled: true,
     lineWidth: 1.5,
+    highlightThreshold: 0.1,
   },
 );
 
 const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 const color = parseColor(toRef(props, "color"), "points");
+const labelActive = ref(false);
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  const center = Vector2.wrap(props.position);
+  const pointActive = pointInsideCircle(
+    center,
+    (props.radius + props.lineWidth) / matrix.value.a +
+      props.highlightThreshold,
+    point,
+  );
+  if (!props.label) {
+    return pointActive;
+  }
+  return labelActive.value || pointActive;
+});
 
 const padding = 25;
 const position = computed(() => new Vector2(props.position));
diff --git a/src/components/PolyLine.vue b/src/components/PolyLine.vue
index f8cbe02..24afc06 100644
--- a/src/components/PolyLine.vue
+++ b/src/components/PolyLine.vue
@@ -19,6 +19,8 @@ import { type Color } from "../types.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -26,10 +28,12 @@ const props = withDefaults(
     color?: Color;
     lineWidth?: number;
     dashed?: boolean;
+    highlightThreshold?: number;
   }>(),
   {
     dashed: false,
     lineWidth: 1.5,
+    highlightThreshold: 0.25,
   },
 );
 
@@ -37,6 +41,17 @@ const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  for (let i = 0; i < props.points.length - 1; i++) {
+    const p0 = Vector2.wrap(props.points[i]);
+    const p1 = Vector2.wrap(props.points[i + 1]);
+    if (distanceToLineSegment(p0, p1, point) <= props.highlightThreshold) {
+      return true;
+    }
+  }
+  return false;
+});
 
 const parsedPoints = computed(() =>
   props.points.map((point) => Vector2.wrap(point).transform(matrix.value)),
diff --git a/src/components/Polygon.vue b/src/components/Polygon.vue
index 293ddc4..6ae4180 100644
--- a/src/components/Polygon.vue
+++ b/src/components/Polygon.vue
@@ -27,6 +27,8 @@ import Angle from "./Angle.vue";
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsidePolygon } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -55,6 +57,10 @@ const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) =>
+  pointInsidePolygon(vertices.value, point),
+);
 
 const vertices = computed(() => props.vertices.map((v) => Vector2.wrap(v)));
 const points = computed(() =>
diff --git a/src/components/Sector.vue b/src/components/Sector.vue
index 2087574..a7edd45 100644
--- a/src/components/Sector.vue
+++ b/src/components/Sector.vue
@@ -18,6 +18,8 @@ import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { DEG2RAD } from "../utils/constants.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideSector } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -44,6 +46,13 @@ const props = withDefaults(
 const { matrix, invScale } = useGraphContext();
 const { color, fill } = toRefs(props);
 const { parseColor } = useColors();
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  const b = Vector2.wrap(props.position);
+  const a = Vector2.fromPolar(from.value, props.radius).add(b);
+  const c = Vector2.fromPolar(to.value, props.radius).add(b);
+  return pointInsideSector(a, b, c, props.radius, point);
+});
 
 const strokeColor = parseColor(color, "stroke");
 const fillColor = parseColor(fill);
diff --git a/src/components/Vector.vue b/src/components/Vector.vue
index 7e5b9a0..c8cad9b 100644
--- a/src/components/Vector.vue
+++ b/src/components/Vector.vue
@@ -38,12 +38,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed} from "vue";
+import { computed } from "vue";
 
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import Label from "../components/Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -55,6 +57,7 @@ const props = withDefaults(
     labelSize?: "small" | "normal" | "large";
     lineWidth?: number;
     arrowSize?: number;
+    highlightThreshold?: number;
   }>(),
   {
     from: () => new Vector2(),
@@ -62,6 +65,7 @@ const props = withDefaults(
     lineWidth: 1.75,
     labelSize: "normal",
     arrowSize: 18,
+    highlightThreshold: 0.25,
   },
 );
 
@@ -70,6 +74,16 @@ const id = Math.random().toString(16).slice(2);
 const { matrix, invScale } = useGraphContext();
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
+const active = defineModel("active", { default: false });
+usePointerIntersection(
+  active,
+  (point) =>
+    distanceToLineSegment(
+      Vector2.wrap(props.from),
+      Vector2.wrap(props.to),
+      point,
+    ) <= props.highlightThreshold,
+);
 
 const pixelVector = computed(() =>
   Vector2.wrap(props.to).transform(matrix.value).sub(from.value),
diff --git a/src/composables/usePointerIntersection.ts b/src/composables/usePointerIntersection.ts
new file mode 100644
index 0000000..a9ab032
--- /dev/null
+++ b/src/composables/usePointerIntersection.ts
@@ -0,0 +1,20 @@
+import { Vector2 } from "src";
+import { useGraphContext } from "./useGraphContext";
+import { Ref, watch } from "vue";
+
+export type IntersectionFn = (pointer: Vector2) => boolean;
+
+export function usePointerIntersection(
+  ref: Ref<boolean>,
+  intersectionFn: IntersectionFn,
+) {
+  const { cursor } = useGraphContext();
+
+  watch(cursor, (position: Vector2 | null) => {
+    if (!position) {
+      ref.value = false;
+      return;
+    }
+    ref.value = intersectionFn(position);
+  });
+}
diff --git a/src/types.ts b/src/types.ts
index be3d9b9..6bb1752 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
 import type { ComputedRef, InjectionKey } from "vue";
 import { Vector2 } from "./utils/Vector2.ts";
-import {Matrix2D} from "./utils/Matrix2D.ts";
+import { Matrix2D } from "./utils/Matrix2D.ts";
 
 export type Color = string | { light: string; dark: string };
 
@@ -9,6 +9,7 @@ export const graphContext = Symbol() as InjectionKey<{
   scale: ComputedRef<Vector2>;
   invScale: ComputedRef<number>;
   origin: ComputedRef<Vector2>;
+  cursor: ComputedRef<Vector2 | null>;
   offset: ComputedRef<Vector2>;
   domain: ComputedRef<{ x: Vector2; y: Vector2 }>;
   matrix: ComputedRef<Matrix2D>;
diff --git a/src/utils/geometry.ts b/src/utils/geometry.ts
new file mode 100644
index 0000000..5e0df24
--- /dev/null
+++ b/src/utils/geometry.ts
@@ -0,0 +1,205 @@
+import { Vector2 } from "./Vector2";
+import { TAU } from "./constants";
+
+function isAngleBetweenAngles(
+  angle: number,
+  theta1: number,
+  theta2: number,
+): boolean {
+  theta1 = (theta1 + TAU) % TAU;
+  theta2 = (theta2 + TAU) % TAU;
+  angle = (angle + TAU) % TAU;
+
+  if (theta2 === 0) {
+    theta2 = TAU;
+  }
+
+  if (theta1 < theta2) {
+    return theta1 <= angle && angle < theta2;
+  }
+
+  return angle >= theta1 || angle < theta2;
+}
+
+function circularDifference(alpha: number, beta: number): number {
+  alpha = (alpha + TAU) % TAU;
+  beta = (beta + TAU) % TAU;
+  return Math.min((beta - alpha + TAU) % TAU, (alpha - beta + TAU) % TAU);
+}
+
+function findClosestAngleToAngle(
+  angle: number,
+  alpha: number,
+  beta: number,
+): number {
+  const diff1 = circularDifference(angle, alpha);
+  const diff2 = circularDifference(angle, beta);
+  return diff1 < diff2 ? alpha : beta;
+}
+
+/**
+ * Checks if the given point is inside the circle with
+ * the given center and radius.
+ *
+ * @param center - The center of the circle.
+ * @param radius - The radius of the circle.
+ * @param point - The point to check.
+ */
+export function pointInsideCircle(
+  center: Vector2,
+  radius: number,
+  point: Vector2,
+): boolean {
+  return center.distanceTo(point) <= radius;
+}
+
+/**
+ * Checks if the given point is inside the ellipse at
+ * the given center with the given major and minor radii.
+ *
+ * @param center - The center of the ellipse.
+ * @param radius - The major and minor radii of the ellipse.
+ * @param point - The point to check.
+ */
+export function pointInsideEllipse(
+  center: Vector2,
+  radius: Vector2,
+  point: Vector2,
+): boolean {
+  return (
+    (point.x - center.x) ** 2 / radius.x ** 2 +
+      (point.y - center.y) ** 2 / radius.y ** 2 <=
+    1
+  );
+}
+
+/**
+ * Check if the given point is inside the sector defined
+ * by points a, b, and c with the given radius.
+ *
+ * @param a - The first vertex of the sector.
+ * @param b - The center vertex of the sector.
+ * @param c - The second vertex of the sector.
+ * @param radius - The radius of the sector.
+ * @param point - The point to check.
+ */
+export function pointInsideSector(
+  a: Vector2,
+  b: Vector2,
+  c: Vector2,
+  radius: number,
+  point: Vector2,
+): boolean {
+  const d = point.distanceTo(b);
+
+  if (d >= radius) {
+    return false;
+  }
+
+  const bToA = a.sub(b);
+  const bToC = c.sub(b);
+  const bToPoint = point.sub(b);
+  const totalAngle = bToA.clockwiseAngleTo(bToC);
+  const angleToPoint = bToA.clockwiseAngleTo(bToPoint);
+
+  return angleToPoint >= 0 && angleToPoint <= totalAngle;
+}
+
+export function pointInsideRectangle(
+  center: Vector2,
+  size: Vector2,
+  point: Vector2,
+): boolean {
+  const minX = center.x - size.width / 2;
+  const maxX = center.x + size.width / 2;
+  const minY = center.y - size.height / 2;
+  const maxY = center.y + size.height / 2;
+  return (
+    point.x >= minX && point.x <= maxX && point.y >= minY && point.y <= maxY
+  );
+}
+
+/**
+ * Checks if a point is inside a polygon defined by a list
+ * of vertices.
+ *
+ * @remarks
+ * This function uses raycasting to determine if the given
+ * point is inside the polygon or not. It counts how many
+ * edges a ray cast from the point crosses. If the number
+ * is even, the point is outside the polygon. If it is odd,
+ * the point is inside the polygon.
+ *
+ * @param vertices - The vertices of the polygon.
+ * @param point - The point to check.
+ */
+export function pointInsidePolygon(
+  vertices: Vector2[],
+  point: Vector2,
+): boolean {
+  const p = point;
+  let isInside = false;
+
+  for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
+    const a = vertices[i];
+    const b = vertices[j];
+    if (
+      a.y > p.y !== b.y > p.y &&
+      p.x < ((b.x - a.x) * (p.y - a.y)) / (b.y - a.y) + a.x
+    ) {
+      isInside = !isInside;
+    }
+  }
+
+  return isInside;
+}
+
+/**
+ * Calculates the shortest distance from a given point
+ * to any point on a line segment.
+ *
+ * @param a - The first point of the line segment.
+ * @param b - The second point of the line segment.
+ * @param point - The point to check.
+ */
+export function distanceToLineSegment(
+  a: Vector2,
+  b: Vector2,
+  point: Vector2,
+): number {
+  const lineSegment = b.sub(a);
+  const squaredLength = lineSegment.squaredLength();
+
+  // Special case where a == b. In this case, simply return
+  // the distance from the point to point a.
+  if (squaredLength === 0) {
+    return point.distanceTo(a);
+  }
+
+  let t = point.sub(a).dot(lineSegment) / squaredLength;
+  t = Math.max(0, Math.min(1, t));
+  const projection = a.add(lineSegment.scale(t));
+
+  return point.distanceTo(projection);
+}
+
+export function distanceToArc(
+  center: Vector2,
+  fromAngle: number,
+  toAngle: number,
+  radius: number,
+  point: Vector2,
+): number {
+  const centerToPoint = point.sub(center);
+  let angleToPoint = centerToPoint.angle;
+
+  let angle: number;
+  if (isAngleBetweenAngles(angleToPoint, fromAngle, toAngle)) {
+    angle = angleToPoint;
+  } else {
+    angle = findClosestAngleToAngle(angleToPoint, fromAngle, toAngle);
+  }
+
+  const pointOnArc = center.add(Vector2.fromPolar(angle, radius));
+  return point.distanceTo(pointOnArc);
+}