User Input

About 1 min

User Input

User-interaction input features include point coordinates, selection sets, numeric values, keywords, and more.

Online Examples

Example	Description	Link
Get Point	Usage of `Engine.getPoint`	Online Demo{target="_blank"}
Get Point with Base Point	Rubber-band line example	Online Demo{target="_blank"}
Get Selection Set	Usage of `Engine.getSelections`	Online Demo{target="_blank"}
Get Real	Usage of `Engine.getReal`	Online Demo{target="_blank"}
Get Integer	Usage of `Engine.getInteger`	Online Demo{target="_blank"}
Keyword Input	Usage of the `keywords` option to draw different shapes	Online Demo{target="_blank"}

Core API

Get Point Coordinates

const { getPoint, PointInputOptions, InputStatusEnum } = vjcad;

// Basic usage
const options = new PointInputOptions("Specify point location:");
const result = await getPoint(options);

if (result.status === InputStatusEnum.OK) {
    const point = result.value;
    console.log(`Point: (${point.x}, ${point.y})`);
}

Rubber-Band Line with Base Point

// Draw rubber-band line from a base point
const options = new PointInputOptions("Specify next point:");
options.basePoint = new Point2D(0, 0);  // Base point
options.showRubberBand = true;          // Show rubber-band line

const result = await getPoint(options);

Get Selection Set

const { getSelections, SelectionInputOptions } = vjcad;

const options = new SelectionInputOptions("Select entities:");
const result = await getSelections(options);

if (result.status === InputStatusEnum.OK) {
    const entities = result.value;
    console.log(`Selected ${entities.length} entities`);
}

Get Numeric Values

// Get real number
const realOptions = new RealInputOptions("Enter radius:");
realOptions.defaultValue = 10;
const realResult = await getReal(realOptions);

// Get integer
const intOptions = new IntegerInputOptions("Enter number of sides:");
intOptions.defaultValue = 6;
const intResult = await getInteger(intOptions);

Keyword Input

const options = new PointInputOptions("Select type [Circle(C)/Rectangle(R)/Triangle(T)]:");
options.keywords = [
    { keyword: "C", display: "Circle" },
    { keyword: "R", display: "Rectangle" },
    { keyword: "T", display: "Triangle" }
];

const result = await getPoint(options);

if (result.status === InputStatusEnum.Keyword) {
    switch (result.keyword) {
        case "C": /* draw circle */ break;
        case "R": /* draw rectangle */ break;
        case "T": /* draw triangle */ break;
    }
}

Input Status

Status	Description
`InputStatusEnum.OK`	Input succeeded
`InputStatusEnum.Cancel`	User canceled with `ESC`
`InputStatusEnum.Keyword`	User entered a keyword
`InputStatusEnum.None`	No input