molstar 3.0.1 → 3.0.2

package/lib/commonjs/mol-repr/shape/loci/dihedral.js

@@ -0,0 +1,257 @@
+"use strict";
+/**
+ * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DihedralRepresentation = exports.DihedralParams = void 0;
+var tslib_1 = require("tslib");
+var loci_1 = require("../../../mol-model/loci");
+var lines_1 = require("../../../mol-geo/geometry/lines/lines");
+var text_1 = require("../../../mol-geo/geometry/text/text");
+var param_definition_1 = require("../../../mol-util/param-definition");
+var names_1 = require("../../../mol-util/color/names");
+var representation_1 = require("../representation");
+var representation_2 = require("../../representation");
+var shape_1 = require("../../../mol-model/shape");
+var lines_builder_1 = require("../../../mol-geo/geometry/lines/lines-builder");
+var text_builder_1 = require("../../../mol-geo/geometry/text/text-builder");
+var linear_algebra_1 = require("../../../mol-math/linear-algebra");
+var mesh_1 = require("../../../mol-geo/geometry/mesh/mesh");
+var mesh_builder_1 = require("../../../mol-geo/geometry/mesh/mesh-builder");
+var misc_1 = require("../../../mol-math/misc");
+var circle_1 = require("../../../mol-geo/primitive/circle");
+var primitive_1 = require("../../../mol-geo/primitive/primitive");
+var marker_action_1 = require("../../../mol-util/marker-action");
+var label_1 = require("../../../mol-theme/label");
+var common_1 = require("./common");
+var geometry_1 = require("../../../mol-math/geometry");
+var SharedParams = {
+    color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen),
+    arcScale: param_definition_1.ParamDefinition.Numeric(0.7, { min: 0.01, max: 1, step: 0.01 })
+};
+var LinesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesSize: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.04, { min: 0.01, max: 0.2, step: 0.01 }) });
+var VectorsParams = (0, tslib_1.__assign)({}, LinesParams);
+var ExtendersParams = (0, tslib_1.__assign)({}, LinesParams);
+var ArmsParams = (0, tslib_1.__assign)({}, LinesParams);
+var ArcParams = (0, tslib_1.__assign)({}, LinesParams);
+var SectorParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams), { ignoreLight: param_definition_1.ParamDefinition.Boolean(true), sectorOpacity: param_definition_1.ParamDefinition.Numeric(0.75, { min: 0, max: 1, step: 0.01 }) });
+var DihedralVisuals = {
+    'vectors': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getVectorsShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'extenders': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getExtendersShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'connector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getConnectorShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'arms': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArmsShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'arc': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getArcShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+    'sector': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getSectorShape, mesh_1.Mesh.Utils, { modifyProps: function (p) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, p), { alpha: p.sectorOpacity })); }, modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
+};
+exports.DihedralParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, VectorsParams), ExtendersParams), ArmsParams), ArcParams), SectorParams), common_1.LociLabelTextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['extenders', 'arms', 'sector', 'text'], param_definition_1.ParamDefinition.objectToOptions(DihedralVisuals)) });
+//
+function getDihedralState() {
+    return {
+        sphereA: (0, geometry_1.Sphere3D)(),
+        sphereB: (0, geometry_1.Sphere3D)(),
+        sphereC: (0, geometry_1.Sphere3D)(),
+        sphereD: (0, geometry_1.Sphere3D)(),
+        dirBA: (0, linear_algebra_1.Vec3)(),
+        dirCD: (0, linear_algebra_1.Vec3)(),
+        projA: (0, linear_algebra_1.Vec3)(),
+        projD: (0, linear_algebra_1.Vec3)(),
+        arcPointA: (0, linear_algebra_1.Vec3)(),
+        arcPointD: (0, linear_algebra_1.Vec3)(),
+        arcDirA: (0, linear_algebra_1.Vec3)(),
+        arcDirD: (0, linear_algebra_1.Vec3)(),
+        arcCenter: (0, linear_algebra_1.Vec3)(),
+        arcNormal: (0, linear_algebra_1.Vec3)(),
+        radius: 0,
+        angle: 0,
+    };
+}
+var tmpVec = (0, linear_algebra_1.Vec3)();
+var tmpMat = (0, linear_algebra_1.Mat4)();
+// TODO improper dihedrals are not handled correctly
+function setDihedralState(quad, state, arcScale) {
+    var sphereA = state.sphereA, sphereB = state.sphereB, sphereC = state.sphereC, sphereD = state.sphereD, dirBA = state.dirBA, dirCD = state.dirCD, projA = state.projA, projD = state.projD;
+    var arcPointA = state.arcPointA, arcPointD = state.arcPointD, arcDirA = state.arcDirA, arcDirD = state.arcDirD, arcCenter = state.arcCenter, arcNormal = state.arcNormal;
+    var _a = quad.loci, lociA = _a[0], lociB = _a[1], lociC = _a[2], lociD = _a[3];
+    loci_1.Loci.getBoundingSphere(lociA, sphereA);
+    loci_1.Loci.getBoundingSphere(lociB, sphereB);
+    loci_1.Loci.getBoundingSphere(lociC, sphereC);
+    loci_1.Loci.getBoundingSphere(lociD, sphereD);
+    linear_algebra_1.Vec3.add(arcCenter, sphereB.center, sphereC.center);
+    linear_algebra_1.Vec3.scale(arcCenter, arcCenter, 0.5);
+    linear_algebra_1.Vec3.sub(dirBA, sphereA.center, sphereB.center);
+    linear_algebra_1.Vec3.sub(dirCD, sphereD.center, sphereC.center);
+    linear_algebra_1.Vec3.add(arcPointA, arcCenter, dirBA);
+    linear_algebra_1.Vec3.add(arcPointD, arcCenter, dirCD);
+    linear_algebra_1.Vec3.sub(arcNormal, sphereC.center, sphereB.center);
+    linear_algebra_1.Vec3.orthogonalize(arcDirA, arcNormal, dirBA);
+    linear_algebra_1.Vec3.orthogonalize(arcDirD, arcNormal, dirCD);
+    linear_algebra_1.Vec3.projectPointOnVector(projA, arcPointA, arcDirA, arcCenter);
+    linear_algebra_1.Vec3.projectPointOnVector(projD, arcPointD, arcDirD, arcCenter);
+    var len = Math.min(linear_algebra_1.Vec3.distance(projA, arcCenter), linear_algebra_1.Vec3.distance(projD, arcCenter));
+    var radius = len * arcScale;
+    linear_algebra_1.Vec3.setMagnitude(arcDirA, arcDirA, radius);
+    linear_algebra_1.Vec3.setMagnitude(arcDirD, arcDirD, radius);
+    linear_algebra_1.Vec3.add(arcPointA, arcCenter, arcDirA);
+    linear_algebra_1.Vec3.add(arcPointD, arcCenter, arcDirD);
+    state.radius = radius;
+    state.angle = linear_algebra_1.Vec3.dihedralAngle(sphereA.center, sphereB.center, sphereC.center, sphereD.center);
+    linear_algebra_1.Vec3.matchDirection(tmpVec, arcNormal, linear_algebra_1.Vec3.sub(tmpVec, arcPointA, sphereA.center));
+    var angleA = linear_algebra_1.Vec3.angle(dirBA, tmpVec);
+    var lenA = radius / Math.cos(angleA - misc_1.halfPI);
+    linear_algebra_1.Vec3.add(projA, sphereB.center, linear_algebra_1.Vec3.setMagnitude(tmpVec, dirBA, lenA));
+    linear_algebra_1.Vec3.matchDirection(tmpVec, arcNormal, linear_algebra_1.Vec3.sub(tmpVec, arcPointD, sphereD.center));
+    var angleD = linear_algebra_1.Vec3.angle(dirCD, tmpVec);
+    var lenD = radius / Math.cos(angleD - misc_1.halfPI);
+    linear_algebra_1.Vec3.add(projD, sphereC.center, linear_algebra_1.Vec3.setMagnitude(tmpVec, dirCD, lenD));
+    return state;
+}
+function getCircle(state, segmentLength) {
+    var radius = state.radius, angle = state.angle;
+    var segments = segmentLength ? (0, misc_1.arcLength)(angle, radius) / segmentLength : 32;
+    linear_algebra_1.Mat4.targetTo(tmpMat, state.arcCenter, angle < 0 ? state.arcPointD : state.arcPointA, state.arcNormal);
+    linear_algebra_1.Mat4.setTranslation(tmpMat, state.arcCenter);
+    linear_algebra_1.Mat4.mul(tmpMat, tmpMat, linear_algebra_1.Mat4.rotY180);
+    var circle = (0, circle_1.Circle)({ radius: radius, thetaLength: Math.abs(angle), segments: segments });
+    return (0, primitive_1.transformPrimitive)(circle, tmpMat);
+}
+var tmpState = getDihedralState();
+function getDihedralName(data) {
+    return data.quads.length === 1 ? "Dihedral ".concat((0, label_1.dihedralLabel)(data.quads[0], { measureOnly: true })) : "".concat(data.quads.length, " Dihedrals");
+}
+//
+function buildVectorsLines(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        builder.addFixedLengthDashes(tmpState.arcCenter, tmpState.arcPointA, props.dashLength, i);
+        builder.addFixedLengthDashes(tmpState.arcCenter, tmpState.arcPointD, props.dashLength, i);
+    }
+    return builder.getLines();
+}
+function getVectorsShape(ctx, data, props, shape) {
+    var lines = buildVectorsLines(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    return shape_1.Shape.create(name, data, lines, function () { return props.color; }, function () { return props.linesSize; }, function () { return ''; });
+}
+//
+function buildConnectorLine(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        builder.addFixedLengthDashes(tmpState.sphereB.center, tmpState.sphereC.center, props.dashLength, i);
+    }
+    return builder.getLines();
+}
+function getConnectorShape(ctx, data, props, shape) {
+    var lines = buildConnectorLine(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    return shape_1.Shape.create(name, data, lines, function () { return props.color; }, function () { return props.linesSize; }, function () { return ''; });
+}
+//
+function buildArmsLines(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        builder.addFixedLengthDashes(tmpState.sphereB.center, tmpState.sphereA.center, props.dashLength, i);
+        builder.addFixedLengthDashes(tmpState.sphereC.center, tmpState.sphereD.center, props.dashLength, i);
+    }
+    return builder.getLines();
+}
+function getArmsShape(ctx, data, props, shape) {
+    var lines = buildArmsLines(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    return shape_1.Shape.create(name, data, lines, function () { return props.color; }, function () { return props.linesSize; }, function () { return ''; });
+}
+//
+function buildExtendersLines(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        builder.addFixedLengthDashes(tmpState.arcPointA, tmpState.projA, props.dashLength, i);
+        builder.addFixedLengthDashes(tmpState.arcPointD, tmpState.projD, props.dashLength, i);
+    }
+    return builder.getLines();
+}
+function getExtendersShape(ctx, data, props, shape) {
+    var lines = buildExtendersLines(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    return shape_1.Shape.create(name, data, lines, function () { return props.color; }, function () { return props.linesSize; }, function () { return ''; });
+}
+//
+function buildArcLines(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        var circle = getCircle(tmpState, props.dashLength);
+        var indices = circle.indices, vertices = circle.vertices;
+        for (var j = 0, jl = indices.length; j < jl; j += 3) {
+            if (j % 2 === 1)
+                continue; // draw every other segment to get dashes
+            var start = indices[j] * 3;
+            var end = indices[j + 1] * 3;
+            var startX = vertices[start];
+            var startY = vertices[start + 1];
+            var startZ = vertices[start + 2];
+            var endX = vertices[end];
+            var endY = vertices[end + 1];
+            var endZ = vertices[end + 2];
+            builder.add(startX, startY, startZ, endX, endY, endZ, i);
+        }
+    }
+    return builder.getLines();
+}
+function getArcShape(ctx, data, props, shape) {
+    var lines = buildArcLines(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    return shape_1.Shape.create(name, data, lines, function () { return props.color; }, function () { return props.linesSize; }, function () { return ''; });
+}
+//
+function buildSectorMesh(data, props, mesh) {
+    var state = mesh_builder_1.MeshBuilder.createState(128, 64, mesh);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        var circle = getCircle(tmpState);
+        state.currentGroup = i;
+        mesh_builder_1.MeshBuilder.addPrimitive(state, linear_algebra_1.Mat4.id, circle);
+        mesh_builder_1.MeshBuilder.addPrimitiveFlipped(state, linear_algebra_1.Mat4.id, circle);
+    }
+    return mesh_builder_1.MeshBuilder.getMesh(state);
+}
+function getSectorShape(ctx, data, props, shape) {
+    var mesh = buildSectorMesh(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    var getLabel = function (groupId) { return (0, label_1.dihedralLabel)(data.quads[groupId]); };
+    return shape_1.Shape.create(name, data, mesh, function () { return props.color; }, function () { return 1; }, getLabel);
+}
+//
+function buildText(data, props, text) {
+    var builder = text_builder_1.TextBuilder.create(props, 128, 64, text);
+    for (var i = 0, il = data.quads.length; i < il; ++i) {
+        setDihedralState(data.quads[i], tmpState, props.arcScale);
+        linear_algebra_1.Vec3.add(tmpVec, tmpState.arcDirA, tmpState.arcDirD);
+        linear_algebra_1.Vec3.setMagnitude(tmpVec, tmpVec, tmpState.radius);
+        linear_algebra_1.Vec3.add(tmpVec, tmpState.arcCenter, tmpVec);
+        var angle = (0, misc_1.radToDeg)(tmpState.angle).toFixed(2);
+        if (angle === '-0.00')
+            angle = '0.00';
+        var label = props.customText || "".concat(angle, "\u00B0");
+        var radius = Math.max(2, tmpState.sphereA.radius, tmpState.sphereB.radius, tmpState.sphereC.radius, tmpState.sphereD.radius);
+        var scale = radius / 2;
+        builder.add(label, tmpVec[0], tmpVec[1], tmpVec[2], 0.1, scale, i);
+    }
+    return builder.getText();
+}
+function getTextShape(ctx, data, props, shape) {
+    var text = buildText(data, props, shape && shape.geometry);
+    var name = getDihedralName(data);
+    var getLabel = function (groupId) { return (0, label_1.dihedralLabel)(data.quads[groupId]); };
+    return shape_1.Shape.create(name, data, text, function () { return props.textColor; }, function () { return props.textSize; }, getLabel);
+}
+function DihedralRepresentation(ctx, getParams) {
+    return representation_2.Representation.createMulti('Dihedral', ctx, getParams, representation_2.Representation.StateBuilder, DihedralVisuals);
+}
+exports.DihedralRepresentation = DihedralRepresentation;
+//# sourceMappingURL=dihedral.js.map

package/lib/commonjs/mol-repr/shape/loci/distance.d.ts

@@ -28,14 +28,14 @@ export declare const DistanceParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;

package/lib/commonjs/mol-repr/shape/loci/distance.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DistanceRepresentation = exports.DistanceParams = void 0;
+var tslib_1 = require("tslib");
+var loci_1 = require("../../../mol-model/loci");
+var lines_1 = require("../../../mol-geo/geometry/lines/lines");
+var text_1 = require("../../../mol-geo/geometry/text/text");
+var param_definition_1 = require("../../../mol-util/param-definition");
+var names_1 = require("../../../mol-util/color/names");
+var representation_1 = require("../representation");
+var representation_2 = require("../../representation");
+var shape_1 = require("../../../mol-model/shape");
+var lines_builder_1 = require("../../../mol-geo/geometry/lines/lines-builder");
+var text_builder_1 = require("../../../mol-geo/geometry/text/text-builder");
+var linear_algebra_1 = require("../../../mol-math/linear-algebra");
+var marker_action_1 = require("../../../mol-util/marker-action");
+var label_1 = require("../../../mol-theme/label");
+var common_1 = require("./common");
+var geometry_1 = require("../../../mol-math/geometry");
+var SharedParams = {
+    unitLabel: param_definition_1.ParamDefinition.Text('\u212B', { isEssential: true })
+};
+var LineParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, lines_1.Lines.Params), SharedParams), { lineSizeAttenuation: param_definition_1.ParamDefinition.Boolean(true), linesColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.lightgreen, { isEssential: true }), linesSize: param_definition_1.ParamDefinition.Numeric(0.075, { min: 0.01, max: 5, step: 0.01 }), dashLength: param_definition_1.ParamDefinition.Numeric(0.2, { min: 0.01, max: 0.2, step: 0.01 }) });
+var TextParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, common_1.LociLabelTextParams), SharedParams);
+var DistanceVisuals = {
+    'lines': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getLinesShape, lines_1.Lines.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerActions.Highlighting })); } }); },
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { markerActions: marker_action_1.MarkerAction.None })); } }); },
+};
+exports.DistanceParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, LineParams), TextParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['lines', 'text'], param_definition_1.ParamDefinition.objectToOptions(DistanceVisuals)) });
+//
+function getDistanceState() {
+    return {
+        sphereA: (0, geometry_1.Sphere3D)(),
+        sphereB: (0, geometry_1.Sphere3D)(),
+        center: (0, linear_algebra_1.Vec3)(),
+        distance: 0,
+    };
+}
+function setDistanceState(pair, state) {
+    var sphereA = state.sphereA, sphereB = state.sphereB, center = state.center;
+    var _a = pair.loci, lociA = _a[0], lociB = _a[1];
+    loci_1.Loci.getBoundingSphere(lociA, sphereA);
+    loci_1.Loci.getBoundingSphere(lociB, sphereB);
+    linear_algebra_1.Vec3.add(center, sphereA.center, sphereB.center);
+    linear_algebra_1.Vec3.scale(center, center, 0.5);
+    state.distance = linear_algebra_1.Vec3.distance(sphereA.center, sphereB.center);
+    return state;
+}
+var tmpState = getDistanceState();
+function getDistanceName(data, unitLabel) {
+    return data.pairs.length === 1 ? "Distance ".concat((0, label_1.distanceLabel)(data.pairs[0], { unitLabel: unitLabel, measureOnly: true })) : "".concat(data.pairs.length, " Distances");
+}
+//
+function buildLines(data, props, lines) {
+    var builder = lines_builder_1.LinesBuilder.create(128, 64, lines);
+    for (var i = 0, il = data.pairs.length; i < il; ++i) {
+        setDistanceState(data.pairs[i], tmpState);
+        builder.addFixedLengthDashes(tmpState.sphereA.center, tmpState.sphereB.center, props.dashLength, i);
+    }
+    return builder.getLines();
+}
+function getLinesShape(ctx, data, props, shape) {
+    var lines = buildLines(data, props, shape && shape.geometry);
+    var name = getDistanceName(data, props.unitLabel);
+    var getLabel = function (groupId) { return (0, label_1.distanceLabel)(data.pairs[groupId], props); };
+    return shape_1.Shape.create(name, data, lines, function () { return props.linesColor; }, function () { return props.linesSize; }, getLabel);
+}
+//
+function buildText(data, props, text) {
+    var builder = text_builder_1.TextBuilder.create(props, 128, 64, text);
+    for (var i = 0, il = data.pairs.length; i < il; ++i) {
+        setDistanceState(data.pairs[i], tmpState);
+        var center = tmpState.center, distance = tmpState.distance, sphereA = tmpState.sphereA, sphereB = tmpState.sphereB;
+        var label = props.customText || "".concat(distance.toFixed(2), " ").concat(props.unitLabel);
+        var radius = Math.max(2, sphereA.radius, sphereB.radius);
+        var scale = radius / 2;
+        builder.add(label, center[0], center[1], center[2], 1, scale, i);
+    }
+    return builder.getText();
+}
+function getTextShape(ctx, data, props, shape) {
+    var text = buildText(data, props, shape && shape.geometry);
+    var name = getDistanceName(data, props.unitLabel);
+    var getLabel = function (groupId) { return (0, label_1.distanceLabel)(data.pairs[groupId], props); };
+    return shape_1.Shape.create(name, data, text, function () { return props.textColor; }, function () { return props.textSize; }, getLabel);
+}
+function DistanceRepresentation(ctx, getParams) {
+    return representation_2.Representation.createMulti('Distance', ctx, getParams, representation_2.Representation.StateBuilder, DistanceVisuals);
+}
+exports.DistanceRepresentation = DistanceRepresentation;
+//# sourceMappingURL=distance.js.map

package/lib/commonjs/mol-repr/shape/loci/label.d.ts

@@ -31,14 +31,14 @@ export declare const LabelParams: {
     tether: PD.BooleanParam;
     tetherLength: PD.Numeric;
     tetherBaseWidth: PD.Numeric;
-    attachment: PD.Select<"middle-center" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-right" | "top-left" | "top-center" | "top-right">;
+    attachment: PD.Select<"bottom-left" | "bottom-center" | "bottom-right" | "middle-left" | "middle-center" | "middle-right" | "top-left" | "top-center" | "top-right">;
     fontFamily: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontFamily>;
     fontQuality: PD.Select<number>;
     fontStyle: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontStyle>;
     fontVariant: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontVariant>;
     fontWeight: PD.Select<import("../../../mol-geo/geometry/text/font-atlas").FontWeight>;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;

package/lib/commonjs/mol-repr/shape/loci/label.js

@@ -0,0 +1,65 @@
+"use strict";
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelRepresentation = exports.LabelParams = void 0;
+var tslib_1 = require("tslib");
+var loci_1 = require("../../../mol-model/loci");
+var text_1 = require("../../../mol-geo/geometry/text/text");
+var param_definition_1 = require("../../../mol-util/param-definition");
+var representation_1 = require("../representation");
+var representation_2 = require("../../representation");
+var shape_1 = require("../../../mol-model/shape");
+var text_builder_1 = require("../../../mol-geo/geometry/text/text-builder");
+var geometry_1 = require("../../../mol-math/geometry");
+var label_1 = require("../../../mol-theme/label");
+var common_1 = require("./common");
+var TextParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, common_1.LociLabelTextParams), { offsetZ: param_definition_1.ParamDefinition.Numeric(2, { min: 0, max: 10, step: 0.1 }) });
+var LabelVisuals = {
+    'text': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getTextShape, text_1.Text.Utils, { modifyState: function (s) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, s), { pickable: false })); } }); },
+};
+exports.LabelParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, TextParams), { scaleByRadius: param_definition_1.ParamDefinition.Boolean(true), visuals: param_definition_1.ParamDefinition.MultiSelect(['text'], param_definition_1.ParamDefinition.objectToOptions(LabelVisuals)) });
+//
+var tmpSphere = (0, geometry_1.Sphere3D)();
+function label(info, condensed) {
+    if (condensed === void 0) { condensed = false; }
+    return info.label || (0, label_1.lociLabel)(info.loci, { hidePrefix: true, htmlStyling: false, condensed: condensed });
+}
+function getLabelName(data) {
+    return data.infos.length === 1 ? label(data.infos[0]) : "".concat(data.infos.length, " Labels");
+}
+//
+function buildText(data, props, text) {
+    var builder = text_builder_1.TextBuilder.create(props, 128, 64, text);
+    var customLabel = props.customText.trim();
+    for (var i = 0, il = data.infos.length; i < il; ++i) {
+        var info = data.infos[i];
+        var sphere = loci_1.Loci.getBoundingSphere(info.loci, tmpSphere);
+        if (!sphere)
+            continue;
+        var center = sphere.center, radius = sphere.radius;
+        var text_2 = customLabel || label(info, true);
+        builder.add(text_2, center[0], center[1], center[2], props.scaleByRadius ? radius / 0.9 : 0, props.scaleByRadius ? Math.max(1, radius) : 1, i);
+    }
+    return builder.getText();
+}
+function getTextShape(ctx, data, props, shape) {
+    var text = buildText(data, props, shape && shape.geometry);
+    var name = getLabelName(data);
+    var customLabel = props.customText.trim();
+    var getLabel = customLabel
+        ? function (groupId) {
+            return customLabel;
+        } : function (groupId) {
+        return label(data.infos[groupId]);
+    };
+    return shape_1.Shape.create(name, data, text, function () { return props.textColor; }, function () { return props.textSize; }, getLabel);
+}
+function LabelRepresentation(ctx, getParams) {
+    return representation_2.Representation.createMulti('Label', ctx, getParams, representation_2.Representation.StateBuilder, LabelVisuals);
+}
+exports.LabelRepresentation = LabelRepresentation;
+//# sourceMappingURL=label.js.map

package/lib/commonjs/mol-repr/shape/loci/orientation.d.ts

@@ -10,7 +10,7 @@ export interface OrientationData {
     locis: StructureElement.Loci[];
 }
 export declare const OrientationParams: {
-    visuals: PD.MultiSelect<"axes" | "ellipsoid" | "box">;
+    visuals: PD.MultiSelect<"box" | "axes" | "ellipsoid">;
     color: PD.Color;
     scaleFactor: PD.Numeric;
     radiusScale: PD.Numeric;
@@ -22,7 +22,7 @@ export declare const OrientationParams: {
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;

package/lib/commonjs/mol-repr/shape/loci/orientation.js

@@ -0,0 +1,103 @@
+"use strict";
+/**
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrientationRepresentation = exports.OrientationParams = void 0;
+var tslib_1 = require("tslib");
+var param_definition_1 = require("../../../mol-util/param-definition");
+var names_1 = require("../../../mol-util/color/names");
+var representation_1 = require("../representation");
+var representation_2 = require("../../representation");
+var shape_1 = require("../../../mol-model/shape");
+var mesh_1 = require("../../../mol-geo/geometry/mesh/mesh");
+var mesh_builder_1 = require("../../../mol-geo/geometry/mesh/mesh-builder");
+var label_1 = require("../../../mol-theme/label");
+var axes_1 = require("../../../mol-geo/geometry/mesh/builder/axes");
+var box_1 = require("../../../mol-geo/geometry/mesh/builder/box");
+var ellipsoid_1 = require("../../../mol-geo/geometry/mesh/builder/ellipsoid");
+var geometry_1 = require("../../../mol-math/geometry");
+var linear_algebra_1 = require("../../../mol-math/linear-algebra");
+var marker_action_1 = require("../../../mol-util/marker-action");
+var structure_1 = require("../../../mol-model/structure");
+var SharedParams = {
+    color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.orange),
+    scaleFactor: param_definition_1.ParamDefinition.Numeric(1, { min: 0.1, max: 10, step: 0.1 }),
+    radiusScale: param_definition_1.ParamDefinition.Numeric(2, { min: 0.1, max: 10, step: 0.1 })
+};
+var AxesParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
+var BoxParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
+var EllipsoidParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), SharedParams);
+var OrientationVisuals = {
+    'axes': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getAxesShape, mesh_1.Mesh.Utils); },
+    'box': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getBoxShape, mesh_1.Mesh.Utils); },
+    'ellipsoid': function (ctx, getParams) { return (0, representation_1.ShapeRepresentation)(getEllipsoidShape, mesh_1.Mesh.Utils); },
+};
+exports.OrientationParams = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, AxesParams), BoxParams), EllipsoidParams), { visuals: param_definition_1.ParamDefinition.MultiSelect(['box'], param_definition_1.ParamDefinition.objectToOptions(OrientationVisuals)) });
+//
+function getAxesName(locis) {
+    var label = (0, label_1.structureElementLociLabelMany)(locis, { countsOnly: true });
+    return "Principal Axes of ".concat(label);
+}
+function buildAxesMesh(data, props, mesh) {
+    var state = mesh_builder_1.MeshBuilder.createState(256, 128, mesh);
+    var principalAxes = structure_1.StructureElement.Loci.getPrincipalAxesMany(data.locis);
+    geometry_1.Axes3D.scale(principalAxes.momentsAxes, principalAxes.momentsAxes, props.scaleFactor);
+    state.currentGroup = 0;
+    (0, axes_1.addAxes)(state, principalAxes.momentsAxes, props.radiusScale, 2, 20);
+    return mesh_builder_1.MeshBuilder.getMesh(state);
+}
+function getAxesShape(ctx, data, props, shape) {
+    var mesh = buildAxesMesh(data, props, shape && shape.geometry);
+    var name = getAxesName(data.locis);
+    return shape_1.Shape.create(name, data, mesh, function () { return props.color; }, function () { return 1; }, function () { return name; });
+}
+//
+function getBoxName(locis) {
+    var label = (0, label_1.structureElementLociLabelMany)(locis, { countsOnly: true });
+    return "Oriented Box of ".concat(label);
+}
+function buildBoxMesh(data, props, mesh) {
+    var state = mesh_builder_1.MeshBuilder.createState(256, 128, mesh);
+    var principalAxes = structure_1.StructureElement.Loci.getPrincipalAxesMany(data.locis);
+    geometry_1.Axes3D.scale(principalAxes.boxAxes, principalAxes.boxAxes, props.scaleFactor);
+    state.currentGroup = 0;
+    (0, box_1.addOrientedBox)(state, principalAxes.boxAxes, props.radiusScale, 2, 20);
+    return mesh_builder_1.MeshBuilder.getMesh(state);
+}
+function getBoxShape(ctx, data, props, shape) {
+    var mesh = buildBoxMesh(data, props, shape && shape.geometry);
+    var name = getBoxName(data.locis);
+    return shape_1.Shape.create(name, data, mesh, function () { return props.color; }, function () { return 1; }, function () { return name; });
+}
+//
+function getEllipsoidName(locis) {
+    var label = (0, label_1.structureElementLociLabelMany)(locis, { countsOnly: true });
+    return "Oriented Ellipsoid of ".concat(label);
+}
+function buildEllipsoidMesh(data, props, mesh) {
+    var state = mesh_builder_1.MeshBuilder.createState(256, 128, mesh);
+    var principalAxes = structure_1.StructureElement.Loci.getPrincipalAxesMany(data.locis);
+    var axes = principalAxes.boxAxes;
+    var origin = axes.origin, dirA = axes.dirA, dirB = axes.dirB;
+    var size = geometry_1.Axes3D.size((0, linear_algebra_1.Vec3)(), axes);
+    linear_algebra_1.Vec3.scale(size, size, 0.5 * props.scaleFactor);
+    var radiusScale = linear_algebra_1.Vec3.create(size[2], size[1], size[0]);
+    state.currentGroup = 0;
+    (0, ellipsoid_1.addEllipsoid)(state, origin, dirA, dirB, radiusScale, 2);
+    return mesh_builder_1.MeshBuilder.getMesh(state);
+}
+function getEllipsoidShape(ctx, data, props, shape) {
+    var mesh = buildEllipsoidMesh(data, props, shape && shape.geometry);
+    var name = getEllipsoidName(data.locis);
+    return shape_1.Shape.create(name, data, mesh, function () { return props.color; }, function () { return 1; }, function () { return name; });
+}
+function OrientationRepresentation(ctx, getParams) {
+    var repr = representation_2.Representation.createMulti('Orientation', ctx, getParams, representation_2.Representation.StateBuilder, OrientationVisuals);
+    repr.setState({ markerActions: marker_action_1.MarkerActions.Highlighting });
+    return repr;
+}
+exports.OrientationRepresentation = OrientationRepresentation;
+//# sourceMappingURL=orientation.js.map

package/lib/commonjs/mol-repr/shape/loci/plane.d.ts

@@ -21,7 +21,7 @@ export declare const PlaneParams: {
     bumpFrequency: PD.Numeric;
     bumpAmplitude: PD.Numeric;
     alpha: PD.Numeric;
-    quality: PD.Select<"custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest">;
+    quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
     material: PD.Group<PD.Normalize<{
         metalness: number;
         roughness: number;