Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XEOK-44 Annotation text adjustment #1554

Merged
merged 2 commits into from
Jun 26, 2024
Merged

XEOK-44 Annotation text adjustment #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a70545c
XEOK-44 Expose Annotation::setMarkerAlign and Annotation::setLabelPos…
MichalDybizbanskiCreoox Jun 26, 2024
2d545d8
Rebuild
MichalDybizbanskiCreoox Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 73 additions & 14 deletions dist/xeokit-sdk.cjs.js
View file
Open in desktop
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
Open in desktop
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
Loading