Language: JavaScript
The following JavaScript is a simplified modified version of the bounding box Bounding Box example – provided in the Developer Examples section of the “quick_start” Quickstart menu. The JS distills the original bounding box example into three components: bounding box markup, the callback and the selection function. To see it in action, launch “quick_start” and choose any of the sample models. In the web browser console, past the JS below and that’s it. When making a selection, a bounding box is drawn.| Code Block |
|---|
|
//Create bounding box markup item
var BoundingBoxMarkup = /** @class */ (function (_super) {
__extends(BoundingBoxMarkup, _super);
function BoundingBoxMarkup(viewer) {
var _this = _super.call(this) || this;
_this._box = null;
_this._boxVertices = new Communicator.Markup.Shape.CircleCollection();
_this._boxVertexSize = 1.0;
_this._boxWires = new Communicator.Markup.Shape.LineCollection();
_this._viewer = viewer;
return _this;
}
BoundingBoxMarkup.prototype.setVertexSize = function (vertexSize) {
this._boxVertexSize = vertexSize;
this._viewer.markupManager.refreshMarkup();
};
BoundingBoxMarkup.prototype.setWireWidth = function (wireWidth) {
this._boxWires.setStrokeWidth(wireWidth);
this._viewer.markupManager.refreshMarkup();
};
BoundingBoxMarkup.prototype.draw = function () {
if (!this._box) {
return;
}
this._update();
var renderer = this._viewer.markupManager.getRenderer();
renderer.drawCircles(this._boxVertices);
renderer.drawLines(this._boxWires);
};
BoundingBoxMarkup.prototype.setBox = function (box) {
this._box = box.copy();
};
BoundingBoxMarkup.prototype.clearBox = function () {
this._box = null;
};
BoundingBoxMarkup.prototype.setBoxColor = function (color) {
this._boxVertices.setFillColor(color);
this._boxVertices.setStrokeColor(color);
this._boxWires.setStrokeColor(color);
this._viewer.markupManager.refreshMarkup();
};
BoundingBoxMarkup.prototype._update = function () {
this._boxVertices.clear();
this._boxWires.clear();
if (this._box === null) {
return;
}
var view = this._viewer.view;
var vertices = [];
// generate vertices
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.min.x, this._box.max.y, this._box.max.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.max.x, this._box.max.y, this._box.max.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.max.x, this._box.min.y, this._box.max.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.min.x, this._box.min.y, this._box.max.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.min.x, this._box.max.y, this._box.min.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.max.x, this._box.max.y, this._box.min.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.max.x, this._box.min.y, this._box.min.z))));
vertices.push(Communicator.Point2.fromPoint3(view.projectPoint(new Communicator.Point3(this._box.min.x, this._box.min.y, this._box.min.z))));
// create points
for (var _i = 0, vertices_1 = vertices; _i < vertices_1.length; _i++) {
var vertex = vertices_1[_i];
this._boxVertices.addCircle(vertex, this._boxVertexSize);
}
// create wireframe
this._boxWires.addLine(vertices[0], vertices[1]);
this._boxWires.addLine(vertices[1], vertices[2]);
this._boxWires.addLine(vertices[2], vertices[3]);
this._boxWires.addLine(vertices[3], vertices[0]);
this._boxWires.addLine(vertices[4], vertices[5]);
this._boxWires.addLine(vertices[5], vertices[6]);
this._boxWires.addLine(vertices[6], vertices[7]);
this._boxWires.addLine(vertices[7], vertices[4]);
this._boxWires.addLine(vertices[0], vertices[4]);
this._boxWires.addLine(vertices[1], vertices[5]);
this._boxWires.addLine(vertices[2], vertices[6]);
this._boxWires.addLine(vertices[3], vertices[7]);
};
return BoundingBoxMarkup;
}(Communicator.Markup.MarkupItem));
//Set callback for selection function
hwv.setCallbacks({
selectionArray: function (events) {
for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
var event_1 = events_1[_i];
mySelectionFunc(event_1);
}
}
});
//Create variables
var _boundingBoxMarkup = new BoundingBoxMarkup(hwv);
var _boundingBoxMarkupHandle = null;
//Selection function that adds bounding box to selected node
function mySelectionFunc(event) {
var markupManager = hwv.getMarkupManager();
var model = hwv.getModel();
var selection = event.getSelection();
if (selection.isNodeSelection()) {
var partId = selection.getNodeId();
if (model.isNodeLoaded(partId)) {
model.getNodesBounding([partId]).then(function (boundingBox) {
_boundingBoxMarkup.setBox(boundingBox);
_boundingBoxMarkupHandle = hwv.getMarkupManager().registerMarkup(_boundingBoxMarkup);
});
}
}
else {
_boundingBoxMarkup.clearBox();
if (_boundingBoxMarkupHandle !== null) {
hwv.getMarkupManager().unregisterMarkup(_boundingBoxMarkupHandle);
}
}
};This modified example contains three components: BoundingBoxMarkup class extended from MarkupItem
Selection event handler
Registering event handler as a Callback
For more information, check out our forum post.
Related content
Learn more about Markup Basics in our official HOOPS Web Viewer documentation.
