feat: make diagrams responsive

Author: ksassnowski

src/components/Angle.vue

@@ -8,7 +8,7 @@
 
   <path
     :d="`M ${start.x} ${start.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${end.x} ${end.y}`"
-    :stroke-width="lineWidth"
+    :stroke-width="lineWidth * invScale"
     :stroke="stroke"
     :stroke-dasharray="dashArray"
     fill="none"
@@ -42,7 +42,7 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset } = useGraphContext();
+const { scale, offset, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
@@ -78,5 +78,7 @@ const end = computed(() => {
     .mul(scale.value)
     .add(offset.value);
 });
-const dashArray = computed(() => (props.dashed ? "6,4" : "0,0"));
+const dashArray = computed(() =>
+  props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
+);
 </script>

src/components/Circle.vue

@@ -5,7 +5,7 @@
     :r="scaledRadius"
     :fill="fill"
     :stroke="stroke"
-    :stroke-width="lineWidth"
+    :stroke-width="lineWidth * invScale"
     :stroke-dasharray="dashArray"
   />
 </template>
@@ -34,7 +34,7 @@ const props = withDefaults(
   },
 );
 
-const context = useGraphContext();
+const { scale, offset, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
@@ -43,9 +43,11 @@ const fill = parseColor(toRef(props, "fill"));
 const position = computed(() =>
   new Vector2(props.position)
     .mul(new Vector2(1, -1))
-    .mul(context.scale.value)
-    .add(context.offset.value),
+    .mul(scale.value)
+    .add(offset.value),
+);
+const scaledRadius = computed(() => props.radius * scale.value.x);
+const dashArray = computed(() =>
+  props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
-const scaledRadius = computed(() => props.radius * context.scale.value.x);
-const dashArray = computed(() => (props.dashed ? "6,4" : "0,0"));
 </script>

src/components/Ellipse.vue

@@ -6,7 +6,7 @@
     :ry="scaledRadius.y"
     :fill="fill"
     :stroke="stroke"
-    :stroke-width="lineWidth"
+    :stroke-width="lineWidth * invScale"
     :stroke-dasharray="dashArray"
   />
 </template>
@@ -36,7 +36,7 @@ const props = withDefaults(
   },
 );
 
-const context = useGraphContext();
+const { offset, scale, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
@@ -45,11 +45,11 @@ const fill = parseColor(toRef(props, "fill"));
 const position = computed(() =>
   new Vector2(props.position)
     .mul(new Vector2(1, -1))
-    .mul(context.scale.value)
-    .add(context.offset.value),
+    .mul(scale.value)
+    .add(offset.value),
 );
-const scaledRadius = computed(() =>
-  new Vector2(props.radius).mul(context.scale.value),
+const scaledRadius = computed(() => new Vector2(props.radius).mul(scale.value));
+const dashArray = computed(() =>
+  props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
-const dashArray = computed(() => (props.dashed ? "6,4" : "0,0"));
 </script>

src/components/FunctionPlot.vue

@@ -6,7 +6,7 @@
     :x2="visiblePoints[i + 1].x * scale.x + offset.x"
     :y2="visiblePoints[i + 1].y * scale.y + offset.y"
     :stroke="color"
-    :stroke-width="lineWidth"
+    :stroke-width="lineWidth * invScale"
   />
 </template>
 
@@ -38,7 +38,7 @@ const props = withDefaults(
 
 let animationFrameID: number | null = null;
 
-const { domain, scale, offset, size } = useGraphContext();
+const { domain, scale, offset, size, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");

src/components/Graph.vue

@@ -1,8 +1,9 @@
 <template>
   <svg
+    ref="el"
     :viewBox="`${-padding} ${-padding} ${width + padding * 2} ${height + padding * 2}`"
-    :width="width"
-    :height="height"
+    :width="size.x"
+    :height="size.y"
     xmlns="http://www.w3.org/2000/svg"
   >
     <defs>
@@ -23,7 +24,7 @@
             :d="`M 0 0 L 0 ${scale.y * gridSize} ${scale.x * gridSize} ${scale.y * gridSize} ${scale.x * gridSize} 0 0 0`"
             fill="none"
             :stroke="colors.grid"
-            stroke-width="0.75"
+            :stroke-width="0.75 * invScale"
           />
         </pattern>
       </defs>
@@ -37,15 +38,15 @@
         :x2="offset.x"
         :y2="height"
         :stroke="colors.axis"
-        stroke-width="1.5"
+        :stroke-width="1.5 * invScale"
       />
       <line
         :x1="0"
         :y1="offset.y"
         :x2="width"
         :y2="offset.y"
         :stroke="colors.axis"
-        stroke-width="1.5"
+        :stroke-width="1.5 * invScale"
       />
     </template>
 
@@ -60,18 +61,18 @@
           :x2="scale.x * (i - 1) * gridSize"
           :y2="offset.y + 5"
           :stroke="colors.units"
-          stroke-width="1"
+          :stroke-width="1 * invScale"
         />
 
         <text
           :x="scale.x * (i - 1) * gridSize"
           :y="offset.y + 14"
-          style="
+          :style="`
             dominant-baseline: middle;
             text-anchor: middle;
-            font-size: 12px;
+            font-size: ${12 * invScale}px;
             font-family: sans-serif;
-          "
+          `"
           :fill="colors.units"
         >
           {{ formatLabelValue((i - 1) * gridSize - origin.x) }}
@@ -88,18 +89,18 @@
           :x2="offset.x - 5"
           :y2="scale.y * (i - 1) * gridSize"
           :stroke="colors.units"
-          stroke-width="1"
+          :stroke-width="1 * invScale"
         />
 
         <text
           :x="offset.x - 14"
           :y="scale.y * (i - 1) * gridSize"
-          style="
+          :style="`
             dominant-baseline: middle;
             text-anchor: middle;
-            font-size: 12px;
+            font-size: ${12 * invScale}px;
             font-family: sans-serif;
-          "
+          `"
           :fill="colors.units"
         >
           {{ formatLabelValue(origin.y - (i - 1) * gridSize) }}
@@ -114,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide } from "vue";
+import { computed, onMounted, provide, ref } from "vue";
 
 import { graphContext } from "../types.ts";
 import { PossibleVector2, Vector2 } from "../math/Vector2.ts";
@@ -148,6 +149,8 @@ const props = withDefaults(
 
 const id = Math.random().toString(16).slice(2);
 const { colors } = useColors();
+const el = ref<SVGElement | null>();
+const containerSize = ref(new Vector2(props.width, props.height));
 
 const origin = computed(() => {
   if (props.origin) {
@@ -170,19 +173,36 @@ const scale = computed(
       props.height / Math.abs(domain.value.y.x - domain.value.y.y),
     ),
 );
-const size = computed(() => new Vector2(props.width, props.height));
+const aspect = computed(() => props.width / props.height);
+const size = computed(() => {
+  const width = Math.min(props.width, containerSize.value.x);
+  const height = width / aspect.value;
+  return new Vector2(width, height);
+});
+const invScale = computed(() => props.width / size.value.x);
 
 const context = {
   size,
   scale,
   origin,
   offset,
   domain,
+  invScale,
 };
 
 provide(graphContext, context);
 
 function formatLabelValue(value: number) {
   return value.toFixed(2).replace(/\.?0+$/, "");
 }
+
+onMounted(() => {
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    const contentBox = entry.contentBoxSize[0];
+    containerSize.value.x = contentBox.inlineSize;
+    containerSize.value.y = contentBox.blockSize;
+  });
+  observer.observe(el.value!.parentElement!);
+});
 </script>

src/components/Label.vue

@@ -12,7 +12,7 @@
   <text
     :x="position.x"
     :y="position.y"
-    :style="`font-family: monospace; font-size: ${fontSizes[size]}px; dominant-baseline: middle; text-anchor: middle; font-weight: 500;`"
+    :style="`font-family: monospace; font-size: ${fontSize}px; dominant-baseline: middle; text-anchor: middle; font-weight: 500;`"
     :fill="color"
   >
     {{ text }}
@@ -49,24 +49,29 @@ const sizes = {
   large: 12,
 };
 
-const context = useGraphContext();
+const { scale, offset, invScale } = useGraphContext();
 const { colors, parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 
 const position = computed(() =>
   new Vector2(props.position)
     .mul(new Vector2(1, -1))
-    .mul(context.scale.value)
-    .add(context.offset.value),
+    .mul(scale.value)
+    .add(offset.value),
 );
-const boxWidth = computed(() =>
-  Math.max(
-    (props.text.length + 1) * sizes[props.size],
-    sizes[props.size] * 2.5,
-  ),
+const boxWidth = computed(
+  () =>
+    Math.max(
+      (props.text.length + 1) * sizes[props.size],
+      sizes[props.size] * 2.5,
+    ) * invScale.value,
 );
-const boxHeight = computed(() =>
-  Math.min(sizes[props.size] * 3, boxWidth.value),
+const boxHeight = computed(
+  () => Math.min(sizes[props.size] * 3, boxWidth.value) * invScale.value,
 );
+const fontSize = computed(() => {
+  console.log(invScale.value);
+  return fontSizes[props.size] * invScale.value;
+});
 </script>

src/components/Line.vue

@@ -5,7 +5,7 @@
     :x2="to.x"
     :y2="to.y"
     :stroke="color"
-    :stroke-width="lineWidth"
+    :stroke-width="lineWidth * invScale"
     :stroke-dasharray="dashArray"
   />
   <Label
@@ -50,7 +50,7 @@ if (props.to === undefined && props.slope === undefined) {
   throw new Error("Line requires either a `to` prop or a `slope` prop");
 }
 
-const context = useGraphContext();
+const { domain, scale, offset, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
@@ -63,52 +63,54 @@ const from = computed(() => {
   if (props.from) {
     return new Vector2(props.from)
       .mul(new Vector2(1, -1))
-      .mul(context.scale.value)
-      .add(context.offset.value);
+      .mul(scale.value)
+      .add(offset.value);
   }
 
   if (props.to) {
     return new Vector2(0, 0)
       .mul(new Vector2(1, -1))
-      .mul(context.scale.value)
-      .add(context.offset.value);
+      .mul(scale.value)
+      .add(offset.value);
   }
 
-  let x = (context.domain.value.y.x - props.yIntercept) / props.slope!;
-  x = clamp(x, context.domain.value.x.x, context.domain.value.x.y);
+  let x = (domain.value.y.x - props.yIntercept) / props.slope!;
+  x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
   return new Vector2(x, y)
     .mul(new Vector2(1, -1))
-    .mul(context.scale.value)
-    .add(context.offset.value);
+    .mul(scale.value)
+    .add(offset.value);
 });
 const to = computed(() => {
   if (props.to) {
     return new Vector2(props.to)
       .mul(new Vector2(1, -1))
-      .mul(context.scale.value)
-      .add(context.offset.value);
+      .mul(scale.value)
+      .add(offset.value);
   }
 
-  let x = (context.domain.value.y.y - props.yIntercept) / props.slope!;
-  x = clamp(x, context.domain.value.x.x, context.domain.value.x.y);
+  let x = (domain.value.y.y - props.yIntercept) / props.slope!;
+  x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
   return new Vector2(x, y)
     .mul(new Vector2(1, -1))
-    .mul(context.scale.value)
-    .add(context.offset.value);
+    .mul(scale.value)
+    .add(offset.value);
 });
 const labelPosition = computed(() => {
   const localSpaceFrom = from.value
-    .sub(context.offset.value)
-    .div(context.scale.value)
+    .sub(offset.value)
+    .div(scale.value)
     .mul(new Vector2(1, -1));
   const localSpaceTo = to.value
-    .sub(context.offset.value)
-    .div(context.scale.value)
+    .sub(offset.value)
+    .div(scale.value)
     .mul(new Vector2(1, -1));
   const diff = localSpaceTo.sub(localSpaceFrom);
   return localSpaceFrom.add(diff.normalized().scale(diff.length() / 2));
 });
-const dashArray = computed(() => (props.dashed ? "6,4" : "0,0"));
+const dashArray = computed(() =>
+  props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
+);
 </script>