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

Jump to bottom

Streamline edge selection #498

Merged
merged 2 commits into from
Oct 17, 2024
Merged

Streamline edge selection #498

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
351bce3
Don't use bounding box to select edges
arjxn-py Oct 17, 2024
33fdc43
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Oct 17, 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
74 changes: 51 additions & 23 deletions packages/base/src/3dview/mainview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export class MainView extends React.Component<IProps, IStates> {
this._mainViewModel.renderSignal.connect(this._requestRender, this);
this._mainViewModel.workerBusy.connect(this._workerBusyHandler, this);

this._raycaster.params.Line = { threshold: 50 };
this._raycaster.params.Line2 = { threshold: 50 };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am a bit confused by this.

  • I see it working properly in Firefox, just like in your screencast. So far so good, but we're not using Line2 in the codebase anymore, so why does it work?
  • I do not see it working in Chromium for some reason.

So should we explicitly use Line2 instead of Line for line meshes in the codebase so that it works in all cases? I would try that, but I really don't understand why it works in Firefox.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • I do not see it working in Chromium for some reason.

I haven't tested on firefox but I'm testing on Brave and Google Chrome and it both the cases it seems to work as expected on my end

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird!

Brave and Google Chrome are both chromium-based browsers. What's wrong with my chromium version 😅


this.state = {
id: this._mainViewModel.id,
Expand Down Expand Up @@ -964,7 +964,7 @@ export class MainView extends React.Component<IProps, IStates> {
}

private _updateSelected(selection: { [key: string]: ISelection }) {
// Reset original color for old selection
// Reset original color and remove bounding boxes for old selection
for (const selectedMesh of this._selectedMeshes) {
let originalColor = selectedMesh.userData.originalColor;

Expand All @@ -980,6 +980,13 @@ export class MainView extends React.Component<IProps, IStates> {
if (boundingBox) {
selectedMesh.remove(boundingBox);
}

const material = selectedMesh.material as THREE.Material & {
linewidth?: number;
};
if (material?.linewidth) {
material.linewidth = DEFAULT_LINEWIDTH;
}
}

// Set new selection
Expand All @@ -993,31 +1000,52 @@ export class MainView extends React.Component<IProps, IStates> {
continue;
}

this._selectedMeshes.push(selectedMesh);
if (selectedMesh.name.startsWith('edge')) {
// Highlight edges using the old method
if (!selectedMesh.userData.originalColor) {
selectedMesh.userData.originalColor =
selectedMesh.material.color.clone();
}

// Create and add bounding box
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.LineBasicMaterial({
color: BOUNDING_BOX_COLOR,
depthTest: false
});
const boundingBox = new THREE.LineSegments(
new THREE.EdgesGeometry(geometry),
material
);
boundingBox.name = SELECTION_BOUNDING_BOX;
this._selectedMeshes.push(selectedMesh);
if (selectedMesh?.material?.color) {
selectedMesh.material.color = BOUNDING_BOX_COLOR;
}

// Set the bounding box size and position
const bbox = new THREE.Box3().setFromObject(selectedMesh);
const size = new THREE.Vector3();
bbox.getSize(size);
boundingBox.scale.copy(size);
const material = selectedMesh.material as THREE.Material & {
linewidth?: number;
};
if (material?.linewidth) {
material.linewidth = SELECTED_LINEWIDTH;
}
} else {
// Highlight non-edges using a bounding box
this._selectedMeshes.push(selectedMesh);

const center = new THREE.Vector3();
bbox.getCenter(center);
boundingBox.position.copy(center);
// Create and add bounding box
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.LineBasicMaterial({
color: BOUNDING_BOX_COLOR,
depthTest: false
});
const boundingBox = new THREE.LineSegments(
new THREE.EdgesGeometry(geometry),
material
);
boundingBox.name = SELECTION_BOUNDING_BOX;

// Set the bounding box size and position
const bbox = new THREE.Box3().setFromObject(selectedMesh);
const size = new THREE.Vector3();
bbox.getSize(size);
boundingBox.scale.copy(size);

selectedMesh.add(boundingBox);
const center = new THREE.Vector3();
bbox.getCenter(center);
boundingBox.position.copy(center);

selectedMesh.add(boundingBox);
}
}
}

Expand Down
Loading