Skip to content

Commit

Permalink
Merge pull request #1554 from xeokit/XEOK-44-annotation-text-adjustment
Browse files Browse the repository at this point in the history 
XEOK-44 Annotation text adjustment
  • Loading branch information
@xeolabs
xeolabs authored Jun 26, 2024
2 parents e0a052a + 2d545d8 commit 42855b5
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 53 deletions.
87 changes: 73 additions & 14 deletions dist/xeokit-sdk.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14529,6 +14529,7 @@ class Annotation extends Marker {
this._values = cfg.values || {};
this._layoutDirty = true;
this._visibilityDirty = true;
this._labelPosition = 24;

this._buildHTML();

Expand Down Expand Up @@ -14659,17 +14660,23 @@ class Annotation extends Marker {
* @private
*/
_updatePosition() {
const px = x => x + "px";
const boundary = this.scene.canvas.boundary;
const left = boundary[0];
const top = boundary[1];
const canvasPos = this.canvasPos;
this._marker.style.left = (Math.floor(left + canvasPos[0]) - 12) + "px";
this._marker.style.top = (Math.floor(top + canvasPos[1]) - 12) + "px";
const left = boundary[0] + this.canvasPos[0];
const top = boundary[1] + this.canvasPos[1];
const markerRect = this._marker.getBoundingClientRect();
const markerWidth = markerRect.width;
const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
const markerCenter = left + markerDir * (markerWidth / 2 - 12);
this._marker.style.left = px(markerCenter - markerWidth / 2);
this._marker.style.top = px(top - 12);
this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
const offsetX = 20;
const offsetY = -17;
this._label.style.left = 20 + Math.floor(left + canvasPos[0] + offsetX) + "px";
this._label.style.top = Math.floor(top + canvasPos[1] + offsetY) + "px";

const labelRect = this._label.getBoundingClientRect();
const labelWidth = labelRect.width;
const labelDir = Math.sign(this._labelPosition);
this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
this._label.style.top = px(top - 17);
this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
}

Expand Down Expand Up @@ -14704,6 +14711,37 @@ class Annotation extends Marker {
}
}

/**
* Sets the horizontal alignment of the Annotation's marker HTML.
*
* @param {String} align Either "left", "center", "right" (default "left")
*/
setMarkerAlign(align) {
const valid = [ "left", "center", "right" ];
if (! valid.includes(align)) {
this.error("Param 'align' should be one of: " + JSON.stringify(valid));
} else {
this._markerAlign = align;
this._updatePosition();
}
}

/**
* Sets the relative horizontal position of the Annotation's label HTML.
*
* @param {Number} position Negative - to the left, positive - to the right, otherwise ignore (default 24)
*/
setLabelPosition(position) {
if (typeof position !== "number") {
this.error("Param 'position' is not a number");
} else if (position === 0) {
this.error("Param 'position' is zero");
} else {
this._labelPosition = position;
this._updatePosition();
}
}

/**
* Sets whether or not to show this Annotation's marker.
*
Expand Down Expand Up @@ -31777,10 +31815,10 @@ class Scene extends Component {
*/
get center() {
if (this._aabbDirty || !this._center) {
if (!this._center || !this._center) {
const aabb = this.aabb;
if (!this._center) {
this._center = math.vec3();
}
const aabb = this.aabb;
this._center[0] = (aabb[0] + aabb[3]) / 2;
this._center[1] = (aabb[1] + aabb[4]) / 2;
this._center[2] = (aabb[2] + aabb[5]) / 2;
Expand Down Expand Up @@ -31855,6 +31893,7 @@ class Scene extends Component {
this._aabb[4] = ymax;
this._aabb[5] = zmax;
this._aabbDirty = false;
this._center = null;
}
return this._aabb;
}
Expand Down Expand Up @@ -96774,7 +96813,7 @@ class KeyboardAxisViewHandler {
return;
}

if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}

Expand Down Expand Up @@ -97268,7 +97307,7 @@ class KeyboardPanRotateDollyHandler {
if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
return;
}
if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}
keyDownMap[keyCode] = true;
Expand Down Expand Up @@ -97299,7 +97338,7 @@ class KeyboardPanRotateDollyHandler {
return;
}

if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}

Expand Down Expand Up @@ -98940,6 +98979,8 @@ class CameraControl extends Component {
snapToEdge: DEFAULT_SNAP_EDGE,
snapRadius: DEFAULT_SNAP_PICK_RADIUS,

keyboardEnabledOnlyIfMouseover: true,

// Rotation

dragRotationRate: 360.0,
Expand Down Expand Up @@ -99250,6 +99291,24 @@ class CameraControl extends Component {
get snapRadius() {
return this._configs.snapRadius;
}

/**
* If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
*
* @param {boolean} value
*/
set keyboardEnabledOnlyIfMouseover(value) {
this._configs.keyboardEnabledOnlyIfMouseover = !!value;
}

/**
* Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
*
* @returns {boolean}
*/
get keyboardEnabledOnlyIfMouseover() {
return this._configs.keyboardEnabledOnlyIfMouseover;
}

/**
* Sets the current navigation mode.
Expand Down
87 changes: 73 additions & 14 deletions dist/xeokit-sdk.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14525,6 +14525,7 @@ class Annotation extends Marker {
this._values = cfg.values || {};
this._layoutDirty = true;
this._visibilityDirty = true;
this._labelPosition = 24;

this._buildHTML();

Expand Down Expand Up @@ -14655,17 +14656,23 @@ class Annotation extends Marker {
* @private
*/
_updatePosition() {
const px = x => x + "px";
const boundary = this.scene.canvas.boundary;
const left = boundary[0];
const top = boundary[1];
const canvasPos = this.canvasPos;
this._marker.style.left = (Math.floor(left + canvasPos[0]) - 12) + "px";
this._marker.style.top = (Math.floor(top + canvasPos[1]) - 12) + "px";
const left = boundary[0] + this.canvasPos[0];
const top = boundary[1] + this.canvasPos[1];
const markerRect = this._marker.getBoundingClientRect();
const markerWidth = markerRect.width;
const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
const markerCenter = left + markerDir * (markerWidth / 2 - 12);
this._marker.style.left = px(markerCenter - markerWidth / 2);
this._marker.style.top = px(top - 12);
this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
const offsetX = 20;
const offsetY = -17;
this._label.style.left = 20 + Math.floor(left + canvasPos[0] + offsetX) + "px";
this._label.style.top = Math.floor(top + canvasPos[1] + offsetY) + "px";

const labelRect = this._label.getBoundingClientRect();
const labelWidth = labelRect.width;
const labelDir = Math.sign(this._labelPosition);
this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
this._label.style.top = px(top - 17);
this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
}

Expand Down Expand Up @@ -14700,6 +14707,37 @@ class Annotation extends Marker {
}
}

/**
* Sets the horizontal alignment of the Annotation's marker HTML.
*
* @param {String} align Either "left", "center", "right" (default "left")
*/
setMarkerAlign(align) {
const valid = [ "left", "center", "right" ];
if (! valid.includes(align)) {
this.error("Param 'align' should be one of: " + JSON.stringify(valid));
} else {
this._markerAlign = align;
this._updatePosition();
}
}

/**
* Sets the relative horizontal position of the Annotation's label HTML.
*
* @param {Number} position Negative - to the left, positive - to the right, otherwise ignore (default 24)
*/
setLabelPosition(position) {
if (typeof position !== "number") {
this.error("Param 'position' is not a number");
} else if (position === 0) {
this.error("Param 'position' is zero");
} else {
this._labelPosition = position;
this._updatePosition();
}
}

/**
* Sets whether or not to show this Annotation's marker.
*
Expand Down Expand Up @@ -31773,10 +31811,10 @@ class Scene extends Component {
*/
get center() {
if (this._aabbDirty || !this._center) {
if (!this._center || !this._center) {
const aabb = this.aabb;
if (!this._center) {
this._center = math.vec3();
}
const aabb = this.aabb;
this._center[0] = (aabb[0] + aabb[3]) / 2;
this._center[1] = (aabb[1] + aabb[4]) / 2;
this._center[2] = (aabb[2] + aabb[5]) / 2;
Expand Down Expand Up @@ -31851,6 +31889,7 @@ class Scene extends Component {
this._aabb[4] = ymax;
this._aabb[5] = zmax;
this._aabbDirty = false;
this._center = null;
}
return this._aabb;
}
Expand Down Expand Up @@ -96770,7 +96809,7 @@ class KeyboardAxisViewHandler {
return;
}

if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}

Expand Down Expand Up @@ -97264,7 +97303,7 @@ class KeyboardPanRotateDollyHandler {
if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
return;
}
if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}
keyDownMap[keyCode] = true;
Expand Down Expand Up @@ -97295,7 +97334,7 @@ class KeyboardPanRotateDollyHandler {
return;
}

if (!states.mouseover) {
if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
return;
}

Expand Down Expand Up @@ -98936,6 +98975,8 @@ class CameraControl extends Component {
snapToEdge: DEFAULT_SNAP_EDGE,
snapRadius: DEFAULT_SNAP_PICK_RADIUS,

keyboardEnabledOnlyIfMouseover: true,

// Rotation

dragRotationRate: 360.0,
Expand Down Expand Up @@ -99246,6 +99287,24 @@ class CameraControl extends Component {
get snapRadius() {
return this._configs.snapRadius;
}

/**
* If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
*
* @param {boolean} value
*/
set keyboardEnabledOnlyIfMouseover(value) {
this._configs.keyboardEnabledOnlyIfMouseover = !!value;
}

/**
* Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
*
* @returns {boolean}
*/
get keyboardEnabledOnlyIfMouseover() {
return this._configs.keyboardEnabledOnlyIfMouseover;
}

/**
* Sets the current navigation mode.
Expand Down
Loading

0 comments on commit 42855b5

Please sign in to comment.