Using Primitive Data
Destructuring
Now that we're created a primitive, we can access reactive data about the generated shape and use it in many different ways. Previously, we defined a hexagon:
const hexagon = useHexagon({
size: 100,
});
With this, hexagon
is an object containing various properties. For most purposes, it's better to destructure the properties you need:
const { vertices, edges, faces } = useHexagon({
size: 100,
});
Now we can access vertices
, edges
and faces
separately. If you are using multiple primitives, you may want to rename the destructured properties to avoid conflicts:
const { vertices: hexagonVertices } = useHexagon({
size: 100,
});
const { vertices: squareVertices } = useSquare({
size: 200,
});
This gives us both hexagonVertices
and squareVertices
to work with.
Vertices
ComputedRef<Vertex[]>
Most of the time when you're working with VueXYZ, it'll come down to vertex data. vertices
is a reactive array of all points of the primitive shape. For example, a triangle has three (3) vertices.
A TypeScript type is available for Vertex
and defined as follows:
/**
* A single point in 2D or 3D space.
*/
export interface Vertex {
x: number
y: number
z?: number
}
NOTE
At the time of writing this, z
is largely ignored, but has been added for future compatibility if 3D primitives get added to the library.
It's important to be aware that while vertices
is a reactive array (computed), the individual Vertex
objects are not reactive. If you want to pass a reactive vertex to another composable, you'll want to wrap it within a computed property:
const { vertices } = useTriangle({
size: 100,
})
// This will give us a single reactive vertex from the triangle
const firstVertex = computed(() => vertices.value[0])
// You can also inline it be to more concise
const circle = useCircle({
radius: 100,
position: computed(() => vertices.value[0]),
})
This gives us a circle that is always centered on the first vertex of the triangle, and it's 100% reactive. If the triangle changes, the circle will update accordingly.
Edges
ComputedRef<Edge[]>
Edges are the lines that connect the vertices together. They are also reactive, and are useful for drawing the shape to a canvas or SVG. The TypeScript type for Edge
is a little more complex, as it can consist of multiple line and/or curve segments.
/**
* A line segment connecting two points in 2D or 3D space (vertices).
*/
export interface LineSegment {
type: 'line';
start: Vertex;
end: Vertex;
}
/**
* A curve segment connecting two points in 2D or 3D space (vertices).
*/
export interface CurveSegment {
type: 'curve';
start: Vertex;
c1: Vertex;
c2: Vertex;
end: Vertex;
}
/**
* A single segment of an edge, either a line segment or a curve segment.
*/
export type EdgeSegment = LineSegment | CurveSegment;
/**
* An edge connecting two points in 2D or 3D space, comprised of one or more line and/or curve segments.
*/
export type Edge = EdgeSegment[];
IMPORTANT
Don't worry, most of the time you won't need to worry about the complexity of Edge
. There are many utility methods built-in to VueXYZ that accept an Edge
object and return the data you'll actually need.
Faces
ComputedRef<Face[]>
Faces are the filled areas of a shape. For all closed polygon composables, there will only be one face. For open shapes, such as a line, arc or bézier curve, there will be no faces. In TypeScript, a Face
is just an array of edges that form a closed polygon:
/**
* Multiple edges combine to form a face.
*/
export type Face = Edge[];
Again, like Edges, you're unlikely to use this information directly - it will more than likely be passed to a utility composable to get what you actually need.