DOCSEARCHbyAlgolia
Submit Docs

Vueclid Documentation

website·Indexed 30 days ago

https://ksassnowski.github.io/vueclid-docs/

A library for creating interactive math diagrams using SVG. It provides a set of components for drawing geometric primitives including points, lines, vectors, circles, ellipses, arcs, polygons, polylines, angles, and circular sectors, as well as tools for plotting functions and adding labels.

Tokens
7K
Snippets
44
Records
53
Agent score
75%

What's inside Vueclid

  1. Use the <Graph> component as a coordinate system container

    The <Graph> component is the required top-level wrapper for every graph in vueclid. It establishes the coordinate system for all child components and handles the rendering of the axes, grid, and origin. Even if axes or grids are disabled, all other graph components must be wrapped inside a <Graph> component.

  2. Draw circular arcs using the Arc component

    The Arc component draws a circular arc based on a radius, center position, and angle range. Arcs are always drawn counter-clockwise from the from angle to the to angle. For drawing angles between lines or vectors, use the Angle component; for circular sectors, use the Sector component.

  3. Understand Vueclid diagram rendering quality

    Vueclid utilizes SVG (Scalable Vector Graphics) to render math diagrams, ensuring that they maintain high visual quality and remain sharp at any resolution.

  4. Draw circular sectors using the Sector component

    The <Sector /> component draws a circular sector based on a radius, a starting angle (from), and an ending angle (to). By default, angles are interpreted in degrees, but can be switched to radians using the radians prop.
    <template>
  <Graph :units="false">
    <Sector :radius="3" :from="45" :to="135" />
  </Graph>
</template>

  5. Override colors on a per-component basis

    Individual components can override global colors using their specific color properties. These properties accept a Color type, which can be a single string (used for both themes) or an object specifying different colors for light and dark modes. Colors can also be passed as computed values.
    <template>
  <!-- Same color for both modes -->
  <Line color="hotpink" />

  <!-- Different colors based on mode -->
  <Line :color="{ light: 'hotpink', dark: 'limegreen' }" />

  <!-- Using a computed value -->
  <Line :color="computedColor" />
</template>

<script setup lang="ts">
import { Line } from "@ksassnowski/vueclid";
import { computed } from "vue";

const computedColor = computed(() => ({
  light: "hotpink",
  dark: "limegreen",
}));
</script>

  6. Install Vueclid

    Vueclid can be installed using npm, pnpm, yarn, or bun.
    # Using npm
npm install @ksassnowski/vueclid

# Using pnpm
pnpm add @ksassnowski/vueclid

# Using yarn
yarn add @ksassnowski/vueclid

# Using bun
bun add @ksassnowski/vueclid

  7. Implement common Arc configurations

    Examples of using the Arc component for different visual requirements, including basic arcs, positioned arcs, dashed lines, and labeled arcs.
    <template>
  <Graph :units="false">
    <!-- Simple Arc from 0 to 180 degrees -->
    <Arc :from="0" :to="180" :radius="2" />

    <!-- Arc with specific position and color -->
    <Arc :position="[2, 0]" :from="180" :to="0" :radius="1" color="red" />

    <!-- Arc with a dashed stroke and custom line width -->
    <Arc :from="0" :to="270" :radius="2" :line-width="1.75" dashed />

    <!-- Arc with a label (α) placed at the halfway point -->
    <Arc :from="0" :to="65" :radius="2" :line-width="1.75" label="α" />
  </Graph>
</template>

  8. Draw an angle using the Angle component

    The <Angle /> component draws an angle defined by three points: a, b, and c. The vertex of the angle is located at point b. The angle is always drawn counter-clockwise from the first vector (ab) to the second vector (bc).
    <template>
  <Graph :origin="[0, 5]" :domain-x="[0, 5]" :domain-y="[0, 5]">
    <Vector :to="[4, 2]" />
    <Vector :to="[1, 3]" />
    <!-- Vertex is at [0,0], arc goes from [4,2] to [1,3] counter-clockwise -->
    <Angle :a="[4, 2]" :b="[0, 0]" :c="[1, 3]" :radius="1.25" />
  </Graph>
</template>

  9. Create animated function plots

    Set the animated prop to true to enable animation. When animated, the component redraws every frame using requestAnimationFrame, and the time parameter in the function prop is automatically updated with the current timestamp. This allows for the creation of dynamic plots that evolve over time.
    <template>
  <Graph :domain-y="[-2, 2]" :domain-x="[-2, 2]" :units="false">
    <FunctionPlot
      :function="(x, time) => Math.cos(x + time / 500)"
      :line-width="2"
      animated
    />
  </Graph>
</template>

  10. Draw a polygon using the Polygon component

    The Polygon component draws a polygon based on a provided set of vertices. A polygon must have at least three vertices; otherwise, the component will throw an error.
    <template>
  <Graph :units="false" :grid="false" :axis="false">
    <Polygon
      :vertices="[
        [-3, -2],
        [-3, 4],
        [4.5, -2],
      ]"
    />
  </Graph>
</template>

  11. Create interactive diagrams using Vue reactivity

    Vueclid components are fully reactive. By using Vue ref and computed properties, you can link UI inputs (like sliders) to the properties of geometric elements. For example, updating a computed coordinate based on a reactive angle will automatically redraw the vector and angle components.
    <template>
  <Graph>
    <Circle :radius="4" />
    <Angle :a="[1, 0]" :b="[0, 0]" :c="to" :radius="1.5" color="#33aabb" label="θ" dashed />
    <Vector :to="to" />
  </Graph>

  <input type="range" :min="0" :max="2 * Math.PI - 0.001" v-model.number="angle" :step="0.01" />
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Graph, Circle, Angle, Vector, Vector2 } from "@ksassnowski/vueclid";

const angle = ref(Math.PI / 4);
const to = computed(() => Vector2.fromPolar(angle.value, 4));
</script>

  12. Initialize a diagram with the Graph component

    Every Vueclid diagram must be wrapped in a <Graph /> component. The Graph component is responsible for drawing the axes, grid, and units, and it provides the essential coordinate system for all other child components. Even if axes or grids are disabled, the Graph wrapper is required for other elements to render correctly.
    <template>
  <Graph />
</template>