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

Multi selection #145

Merged
merged 8 commits into from
May 26, 2023
Merged

Multi selection #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3a2474b
Implement multi-selection
martinRenou May 15, 2023
ce339ba
Update Playwright Snapshots
github-actions[bot] May 25, 2023
5ac2b49
Add timeout
martinRenou May 25, 2023
93eb26d
Be more specific about the selector
martinRenou May 25, 2023
6f9baee
Update screenshots
martinRenou May 25, 2023
599d29a
Merge branch 'main' into multi_selection
martinRenou May 25, 2023
2145541
Update Playwright Snapshots
github-actions[bot] May 25, 2023
f685427
Try fixing UI test
martinRenou May 26, 2023
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
20 changes: 15 additions & 5 deletions packages/jupytercad-extension/src/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,11 @@ const OPERATORS = {
shape: 'Part::Cut',
default: (model: IJupyterCadModel) => {
const objects = model.getAllObject();
const selected = model.localState?.selected.value || [];
return {
Name: newName('Cut', model),
Base: objects[0].name ?? '',
Tool: objects[1].name ?? '',
Base: selected.length > 0 ? selected[0] : objects[0].name ?? '',
Tool: selected.length > 1 ? selected[1] : objects[1].name ?? '',
Refine: false,
Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
};
Expand Down Expand Up @@ -178,9 +179,10 @@ const OPERATORS = {
shape: 'Part::Extrusion',
default: (model: IJupyterCadModel) => {
const objects = model.getAllObject();
const selected = model.localState?.selected.value || [];
return {
Name: newName('Extrusion', model),
Base: [objects[0].name ?? ''],
Base: [selected.length > 0 ? selected[0] : objects[0].name ?? ''],
Dir: [0, 0, 1],
LengthFwd: 10,
LengthRev: 0,
Expand Down Expand Up @@ -218,9 +220,13 @@ const OPERATORS = {
shape: 'Part::MultiFuse',
default: (model: IJupyterCadModel) => {
const objects = model.getAllObject();
const selected = model.localState?.selected.value || [];
return {
Name: newName('Union', model),
Shapes: [objects[0].name ?? '', objects[1].name ?? ''],
Shapes: [
selected.length > 0 ? selected[0] : objects[0].name ?? '',
selected.length > 1 ? selected[1] : objects[1].name ?? ''
],
Refine: false,
Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
};
Expand Down Expand Up @@ -255,9 +261,13 @@ const OPERATORS = {
shape: 'Part::MultiCommon',
default: (model: IJupyterCadModel) => {
const objects = model.getAllObject();
const selected = model.localState?.selected.value || [];
return {
Name: newName('Intersection', model),
Shapes: [objects[0].name ?? '', objects[1].name ?? ''],
Shapes: [
selected.length > 0 ? selected[0] : objects[0].name ?? '',
selected.length > 1 ? selected[1] : objects[1].name ?? ''
],
Refine: false,
Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
};
Expand Down
128 changes: 58 additions & 70 deletions packages/jupytercad-extension/src/mainview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,43 +500,37 @@ export class MainView extends React.Component<IProps, IStates> {

private _onClick(e: MouseEvent) {
const selection = this._pick();

const guidata = this._model.sharedModel.getOption('guidata');
const selectedMeshesNames = new Set(
this._selectedMeshes.map(sel => sel.name)
);

if (selection) {
// Deselect old selection
if (this._selectedMesh) {
let originalColor = DEFAULT_MESH_COLOR;
if (
guidata &&
guidata[this._selectedMesh.name] &&
guidata[this._selectedMesh.name]['color']
) {
const rgba = guidata[this._selectedMesh.name]['color'] as number[];
originalColor = new THREE.Color(rgba[0], rgba[1], rgba[2]);
}

this._selectedMesh.material.color = originalColor;
// TODO Support selecting edges?
let selectionName = '';
if (selection.mesh.name.startsWith('edge')) {
selectionName = (selection.mesh.parent as BasicMesh).name;
} else {
selectionName = selection.mesh.name;
}

// Set new selection
if (selection.mesh === this._selectedMesh) {
this._selectedMesh = null;
} else {
// TODO Support selecting edges?
if (selection.mesh.name.startsWith('edge')) {
this._selectedMesh = selection.mesh.parent as BasicMesh;
if (e.ctrlKey) {
if (selectedMeshesNames.has(selectionName)) {
selectedMeshesNames.delete(selectionName);
} else {
this._selectedMesh = selection.mesh;
selectedMeshesNames.add(selectionName);
}
}

if (this._selectedMesh) {
this._selectedMesh.material.color = SELECTED_MESH_COLOR;
this._model.syncSelectedObject(this._selectedMesh.name, this.state.id);
} else {
this._model.syncSelectedObject(undefined, this.state.id);
const alreadySelected = selectedMeshesNames.has(selectionName);
selectedMeshesNames.clear();

if (!alreadySelected) {
selectedMeshesNames.add(selectionName);
}
}

const names = Array.from(selectedMeshesNames);
this._updateSelected(names);
this._model.syncSelectedObject(names, this.state.id);
}
}

Expand All @@ -550,6 +544,9 @@ export class MainView extends React.Component<IProps, IStates> {

const guidata = this._model.sharedModel.getOption('guidata');

const selectedNames = this._selectedMeshes.map(sel => sel.name);
this._selectedMeshes = [];

this._boundingGroup = new THREE.Box3();

this._meshGroup = new THREE.Group();
Expand Down Expand Up @@ -631,8 +628,8 @@ export class MainView extends React.Component<IProps, IStates> {
this._boundingGroup.expandByObject(mesh);
}

if (this._selectedMesh?.name === objName) {
this._selectedMesh = mesh;
if (selectedNames.includes(objName)) {
this._selectedMeshes.push(mesh);
mesh.material.color = SELECTED_MESH_COLOR;
}

Expand Down Expand Up @@ -738,37 +735,36 @@ export class MainView extends React.Component<IProps, IStates> {
return new THREE.Mesh(this._pointerGeometry, material);
}

private _selectObject(name: string): void {
if (name === this._selectedMesh?.name) {
return;
}

const selected = this._meshGroup?.getObjectByName(name);
private _updateSelected(names: string[]) {
// Reset original color for old selection
for (const selectedMesh of this._selectedMeshes) {
let originalColor = DEFAULT_MESH_COLOR;
const guidata = this._model.sharedModel.getOption('guidata');
if (
guidata &&
guidata[selectedMesh.name] &&
guidata[selectedMesh.name]['color']
) {
const rgba = guidata[selectedMesh.name]['color'] as number[];
originalColor = new THREE.Color(rgba[0], rgba[1], rgba[2]);
}

if (selected) {
this._selectedMesh = selected as BasicMesh;
this._selectedMesh.material.color = SELECTED_MESH_COLOR;
selectedMesh.material.color = originalColor;
}
}

private _deselectObject(): void {
if (!this._selectedMesh) {
return;
}
// Set new selection
this._selectedMeshes = [];
for (const name of names) {
const selected = this._meshGroup?.getObjectByName(name) as
| BasicMesh
| undefined;
if (!selected) {
continue;
}

let originalColor = DEFAULT_MESH_COLOR;
const guidata = this._model.sharedModel.getOption('guidata');
if (
guidata &&
guidata[this._selectedMesh.name] &&
guidata[this._selectedMesh.name]['color']
) {
const rgba = guidata[this._selectedMesh.name]['color'] as number[];
originalColor = new THREE.Color(rgba[0], rgba[1], rgba[2]);
this._selectedMeshes.push(selected);
selected.material.color = SELECTED_MESH_COLOR;
}

this._selectedMesh.material.color = originalColor;
this._selectedMesh = null;
}

private _onSharedMetadataChanged = (
Expand Down Expand Up @@ -816,12 +812,8 @@ export class MainView extends React.Component<IProps, IStates> {
}

// Sync selected
if (remoteState.selected.value !== this._selectedMesh?.name) {
this._deselectObject();

if (remoteState.selected.value) {
this._selectObject(remoteState.selected.value);
}
if (Array.isArray(remoteState.selected.value)) {
this._updateSelected(remoteState.selected.value);
}

// Sync camera
Expand Down Expand Up @@ -852,12 +844,8 @@ export class MainView extends React.Component<IProps, IStates> {
// Sync local selection if needed
const localState = this._model.localState;

if (localState?.selected?.value !== this._selectedMesh?.name) {
this._deselectObject();

if (localState?.selected?.value) {
this._selectObject(localState.selected.value);
}
if (localState?.selected && Array.isArray(localState.selected.value)) {
this._updateSelected(localState.selected.value);
}
}

Expand Down Expand Up @@ -1167,7 +1155,7 @@ export class MainView extends React.Component<IProps, IStates> {
position: THREE.Vector3 | undefined,
parent: string | undefined
) => void;
private _selectedMesh: BasicMesh | null = null;
private _selectedMeshes: BasicMesh[] = [];

private _meshGroup: THREE.Group | null = null; // The list of ThreeJS meshes

Expand Down
2 changes: 1 addition & 1 deletion packages/jupytercad-extension/src/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ export class JupyterCadModel implements IJupyterCadModel {
});
}

syncSelectedObject(name?: string, emitter?: string): void {
syncSelectedObject(name: string[], emitter?: string): void {
this.sharedModel.awareness.setLocalStateField('selected', {
value: name,
emitter: emitter
Expand Down
Loading