feat: make cursor interaction work with nested components

Author: ksassnowski

src/components/Angle.vue

@@ -35,7 +35,7 @@ import { useGraphContext } from "../composables/useGraphContext.ts";
 import { Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
-import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { pointInsideSector } from "../utils/geometry.ts";
 import Label from "./Label.vue";
 
@@ -62,14 +62,22 @@ const props = withDefaults(
 );
 
 const { invScale } = useGraphContext();
-const matrix = useLocalToWorld(toRef(props, "position"));
+const { parentToWorld, cameraMatrix } = useMatrices(
+  toRef(props, "position"),
+);
 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) =>
-  pointInsideSector(a.value, b.value, c.value, props.radius, point),
+  pointInsideSector(
+    a.value.transform(cameraMatrix.value),
+    b.value.transform(cameraMatrix.value),
+    c.value.transform(cameraMatrix.value),
+    props.radius,
+    point,
+  ),
 );
 
 const a = computed(() => Vector2.wrap(props.a));
@@ -82,15 +90,15 @@ const sweep = computed(() => {
     c.value.x * (a.value.y - b.value.y);
   return orientation > 0 ? 1 : 0;
 });
-const scaledB = computed(() => b.value.transform(matrix.value));
-const scaledRadius = computed(() => props.radius * matrix.value.a);
+const scaledB = computed(() => b.value.transform(parentToWorld.value));
+const scaledRadius = computed(() => props.radius * parentToWorld.value.a);
 const start = computed(() => {
   const direction = a.value.sub(b.value).normalized();
-  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
+  return b.value.add(direction.scale(props.radius)).transform(parentToWorld.value);
 });
 const end = computed(() => {
   const direction = c.value.sub(b.value).normalized();
-  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
+  return b.value.add(direction.scale(props.radius)).transform(parentToWorld.value);
 });
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",

src/components/Arc.vue

@@ -2,7 +2,7 @@
   <Angle
     v-bind="$attrs"
     :a="a"
-    :b="position"
+    :b="0"
     :c="c"
     :radius="radius"
     :dashed="dashed"
@@ -16,13 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 
 import { DEG2RAD } from "../utils/constants.ts";
 import Angle from "../components/Angle.vue";
 import { useColors } from "../composables/useColors.ts";
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { distanceToArc } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -54,12 +55,13 @@ const props = withDefaults(
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
 const active = defineModel("active", { default: false });
+const { cameraPosition } = useMatrices(toRef(props, "position"));
 usePointerIntersection(active, (point) => {
   const fromAngle = props.radians ? props.from : props.from * DEG2RAD;
   const toAngle = props.radians ? props.to : props.to * DEG2RAD;
   return (
     distanceToArc(
-      Vector2.wrap(props.position),
+      cameraPosition.value,
       fromAngle,
       toAngle,
       props.radius,
@@ -68,13 +70,12 @@ usePointerIntersection(active, (point) => {
   );
 });
 
-const position = computed(() => Vector2.wrap(props.position));
 const a = computed(() => {
   const angle = props.radians ? props.from : props.from * DEG2RAD;
-  return Vector2.fromAngle(angle).add(position.value);
+  return Vector2.fromAngle(angle);
 });
 const c = computed(() => {
   const angle = props.radians ? props.to : props.to * DEG2RAD;
-  return Vector2.fromAngle(angle).add(position.value);
+  return Vector2.fromAngle(angle);
 });
 </script>

src/components/Circle.vue

@@ -21,7 +21,7 @@ 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 { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { pointInsideCircle } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -41,20 +41,22 @@ const props = withDefaults(
 );
 
 const { invScale } = useGraphContext();
-const matrix = useLocalToWorld(toRef(props, "position"));
+const { parentToWorld, cameraPosition } = useMatrices(
+  toRef(props, "position"),
+);
 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),
+  pointInsideCircle(cameraPosition.value, props.radius, point),
 );
 
 const position = computed(() =>
-  new Vector2(props.position).transform(matrix.value),
+  new Vector2(props.position).transform(parentToWorld.value),
 );
-const scaledRadius = computed(() => props.radius * matrix.value.a);
+const scaledRadius = computed(() => props.radius * parentToWorld.value.a);
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );

src/components/Ellipse.vue

@@ -23,7 +23,7 @@ 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 { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { pointInsideEllipse } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -48,25 +48,24 @@ const props = withDefaults(
 );
 
 const { invScale } = useGraphContext();
-const matrix = useLocalToWorld(toRef(props, "position"));
+const { parentToWorld, cameraPosition } = useMatrices(toRef(props, "position"));
 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,
-  ),
+  pointInsideEllipse(cameraPosition.value, Vector2.wrap(props.radius), point),
 );
 
 const position = computed(() =>
-  new Vector2(props.position).transform(matrix.value),
+  new Vector2(props.position).transform(parentToWorld.value),
 );
 const scaledRadius = computed(() =>
-  new Vector2(props.radius).mul([matrix.value.a, Math.abs(matrix.value.d)]),
+  new Vector2(props.radius).mul([
+    parentToWorld.value.a,
+    Math.abs(parentToWorld.value.d),
+  ]),
 );
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",

src/components/FunctionPlot.vue

@@ -12,7 +12,7 @@ import { computed, onMounted, ref, toRef, watch } from "vue";
 
 import { Color } from "../types.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
-import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useColors } from "../composables/useColors.ts";
 
@@ -37,7 +37,7 @@ const props = withDefaults(
 let animationFrameID: number | null = null;
 
 const { domain, size, invScale } = useGraphContext();
-const matrix = useLocalToWorld();
+const { parentToWorld } = useMatrices();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
@@ -56,7 +56,7 @@ const visiblePoints = computed(() => {
 
 const path = computed(() => {
   const points = visiblePoints.value.map((point) =>
-    point.transform(matrix.value),
+    point.transform(parentToWorld.value),
   );
 
   if (points.length === 0) {

src/components/Group.vue

@@ -7,10 +7,10 @@
 <script lang="ts" setup>
 import { toRef } from "vue";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
-import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 
 const props = withDefaults(
   defineProps<{ position?: PossibleVector2; }>(), { position: () => new Vector2() });
 
-useLocalToWorld(toRef(props, "position"));
+useMatrices(toRef(props, "position"));
 </script>

src/components/Label.vue

@@ -35,7 +35,7 @@ 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 { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { pointInsideRectangle } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -68,20 +68,23 @@ const sizes = {
 };
 
 const { invScale } = useGraphContext();
-const matrix = useLocalToWorld(toRef(props, "position"));
+const { parentToWorld, cameraPosition } = useMatrices(toRef(props, "position"));
 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 width = boxWidth.value / parentToWorld.value.a;
+  const height = boxHeight.value / parentToWorld.value.a;
+  return pointInsideRectangle(
+    cameraPosition.value,
+    new Vector2(width, height),
+    point,
+  );
 });
 
 const position = computed(() =>
-  Vector2.wrap(props.position).transform(matrix.value),
+  Vector2.wrap(props.position).transform(parentToWorld.value),
 );
 const boxWidth = computed(() =>
   Math.max(

src/components/Line.vue

@@ -9,6 +9,7 @@
       :stroke-width="lineWidth * invScale"
       :stroke-dasharray="dashArray"
     />
+
     <Label
       v-if="label"
       :text="label"
@@ -30,7 +31,7 @@ import Label from "./Label.vue";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { useColors } from "../composables/useColors.ts";
 import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
-import { useLocalToWorld } from "../composables/useLocalToWorld.ts";
+import { useMatrices } from "../composables/useMatrices.ts";
 import { distanceToLineSegment } from "../utils/geometry.ts";
 
 const props = withDefaults(
@@ -61,50 +62,59 @@ if (props.to === undefined && props.slope === undefined) {
 
 const { domain, invScale } = useGraphContext();
 const { parseColor } = useColors();
-const matrix = useLocalToWorld();
+const { parentToWorld, cameraMatrix } = useMatrices();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 const active = defineModel("active", { default: false });
-usePointerIntersection(
-  active,
-  (point) =>
+usePointerIntersection(active, (point) => {
+  const matrix = cameraMatrix.value.multiply(parentToWorld.value.inverse);
+  return (
     distanceToLineSegment(
-      from.value.transform(matrix.value.inverse),
-      to.value.transform(matrix.value.inverse),
+      from.value.transform(matrix),
+      to.value.transform(matrix),
       point,
-    ) <= props.highlightThreshold,
-);
+    ) <= props.highlightThreshold
+  );
+});
 
 function clamp(x: number, min: number, max: number) {
   return Math.min(max, Math.max(min, x));
 }
 
 const from = computed(() => {
   if (props.from) {
-    return new Vector2(props.from).transform(matrix.value);
+    return new Vector2(props.from).transform(parentToWorld.value);
   }
 
   if (props.to) {
-    return new Vector2(0, 0).transform(matrix.value);
+    return new Vector2(0, 0).transform(parentToWorld.value);
   }
 
   let x = (domain.value.y.x - props.yIntercept) / props.slope!;
-  x = clamp(x, domain.value.x.x, domain.value.x.y);
+  x = clamp(
+    x,
+    domain.value.x.x + cameraMatrix.value.tx,
+    domain.value.x.y - cameraMatrix.value.tx,
+  );
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y).transform(matrix.value);
+  return new Vector2(x, y).transform(parentToWorld.value);
 });
 const to = computed(() => {
   if (props.to) {
-    return new Vector2(props.to).transform(matrix.value);
+    return new Vector2(props.to).transform(parentToWorld.value);
   }
 
   let x = (domain.value.y.y - props.yIntercept) / props.slope!;
-  x = clamp(x, domain.value.x.x, domain.value.x.y);
+  x = clamp(
+    x,
+    domain.value.x.x + cameraMatrix.value.tx,
+    domain.value.x.y - cameraMatrix.value.tx,
+  );
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y).transform(matrix.value);
+  return new Vector2(x, y).transform(parentToWorld.value);
 });
 const labelPosition = computed(() => {
-  const worldToLocal = matrix.value.inverse;
+  const worldToLocal = parentToWorld.value.inverse;
   const localSpaceFrom = from.value.transform(worldToLocal);
   const localSpaceTo = to.value.transform(worldToLocal);
   const diff = localSpaceTo.sub(localSpaceFrom);