Build with the VisQuill GDK

import { VisQuill, Reactive, Circles, Attach } from "@visquill/visquill-gdk"

/**
 * A draggable handle with a circle that tracks it reactively.
 * Styles are defined in a CSS file using the prefix chain.
 *
 * @param div - The div element that will contain the graphic
 */
export function run(div: HTMLDivElement) {
    const rvg    = VisQuill.create(div, "my-graphic-")
    const canvas = rvg.canvas

    // A draggable handle — class: "my-graphic-handle"
    const handle = canvas.handles.disk("handle", { x: 300, y: 200 })

    // A circle that follows the handle — class: "my-graphic-ring"
    const ring = canvas.visuals.circle("ring")

    Reactive.do([handle], () => {
        Circles.circleAt(handle, 60, ring)
    })

    // A label that stays above the handle — class: "my-graphic-label"
    const label = canvas.text.label("", "label")
    Attach.pointToPoint(label, handle, { offset: { x: 0, y: -80 } })

    Reactive.do([handle], () => {
        label.value = `${Math.round(handle.x)}, ${Math.round(handle.y)}`
    })
}

See the guide for a full walkthrough, or browse the Lab for more complex examples.