Skip to content

Commit

Permalink
Code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@trungleduc
trungleduc committed Oct 25, 2022
1 parent 890151b commit 9e485e0
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 184 deletions.
129 changes: 66 additions & 63 deletions src/mainview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import { JupyterCadModel } from './model';
import {
IDict,
IDisplayShape,
IJupyterCadClientState,
IMainMessage,
IWorkerMessage,
MainAction,
Position,
WorkerAction
} from './types';

Expand All @@ -32,7 +32,8 @@ interface IProps {
}

interface IStates {
id: string;
id: string; // ID of the component, it is used to identify which component
//is the source of awareness updates.
loading: boolean;
lightTheme: boolean;
}
Expand All @@ -45,10 +46,7 @@ export class MainView extends React.Component<IProps, IStates> {
this._geometry.setDrawRange(0, 3 * 10000);
this._refLength = 0;
this._sceneAxe = [];
// this.shapeGroup = new THREE.Group();
// this.sceneScaled = false;
// this.computedScene = {};
// this.progressData = { time_step: -1, data: {} };

this._resizeTimeout = null;

const lightTheme =
Expand Down Expand Up @@ -76,15 +74,13 @@ export class MainView extends React.Component<IProps, IStates> {
{ action: WorkerAction.REGISTER, payload: { id: this.state.id } },
this._messageChannel.port2
);
this._model.themeChanged.connect((_, arg) => {
this.handleThemeChange();
});
this._model.themeChanged.connect(this._handleThemeChange);
this._model.clientStateChanged.connect(this._onClientSharedStateChanged);
});
}

componentDidMount(): void {
window.addEventListener('resize', this.handleWindowResize);
window.addEventListener('resize', this._handleWindowResize);
this.generateScene();
}

Expand All @@ -94,29 +90,18 @@ export class MainView extends React.Component<IProps, IStates> {

componentWillUnmount(): void {
window.cancelAnimationFrame(this._requestID);
window.removeEventListener('resize', this.handleWindowResize);
window.removeEventListener('resize', this._handleWindowResize);
this._controls.dispose();
this.postMessage({
action: WorkerAction.CLOSE_FILE,
payload: {
fileName: this._context.path
}
});
this._model.themeChanged.disconnect(this._handleThemeChange);
this._model.clientStateChanged.disconnect(this._onClientSharedStateChanged);
}

handleThemeChange = (): void => {
const lightTheme =
document.body.getAttribute('data-jp-theme-light') === 'true';
this.setState(old => ({ ...old, lightTheme }));
};

handleWindowResize = () => {
clearTimeout(this._resizeTimeout);
this._resizeTimeout = setTimeout(() => {
this.forceUpdate();
}, 500);
};

addSceneAxe = (dir: THREE.Vector3, color: number): void => {
const origin = new THREE.Vector3(0, 0, 0);
const length = 20;
Expand Down Expand Up @@ -251,23 +236,23 @@ export class MainView extends React.Component<IProps, IStates> {
canvas.addEventListener('mouseleave', event => {
this._model.syncCamera(undefined);
});
// ['wheel', 'mousemove'].forEach(evtName => {
// canvas.addEventListener(
// evtName as any,
// (event: MouseEvent | WheelEvent) => {
// this._model.syncCamera(
// {
// offsetX: event.offsetX,
// offsetY: event.offsetY,
// x: this._camera.position.x,
// y: this._camera.position.y,
// z: this._camera.position.z
// },
// this.state.id
// );
// }
// );
// });
['wheel', 'mousemove'].forEach(evtName => {
canvas.addEventListener(
evtName as any,
(event: MouseEvent | WheelEvent) => {
this._model.syncCamera(
{
offsetX: event.offsetX,
offsetY: event.offsetY,
x: this._camera.position.x,
y: this._camera.position.y,
z: this._camera.position.z
},
this.state.id
);
}
);
});
}
};

Expand Down Expand Up @@ -398,12 +383,17 @@ export class MainView extends React.Component<IProps, IStates> {
}

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

this._model.syncSelectedObject(
this._selectedMesh !== null ? this._selectedMesh.name : null,
this.state.id
);
const selectedMesh = this._pick();
if (selectedMesh) {
if (selectedMesh === this._selectedMesh) {
this._selectedMesh = null;
} else {
this._selectedMesh = selectedMesh;
}
if (this._selectedMesh) {
this._model.syncSelectedObject(this._selectedMesh.name, this.state.id);
}
}
}

private shapeToMesh = (payload: IDisplayShape['payload']) => {
Expand Down Expand Up @@ -541,14 +531,14 @@ export class MainView extends React.Component<IProps, IStates> {

private _onClientSharedStateChanged = (
sender: JupyterCadModel,
clients: Map<number, any>
clients: Map<number, IJupyterCadClientState>
): void => {
const clientId = this._context.model.getClientId();
// TODO Handle state changes from another user in follow mode.
const targetId: number | null = null;
if (targetId) {
const remoteState = clients.get(targetId);
const mouse = remoteState.mouse.value as Position;
const remoteState = clients.get(targetId)!;
const mouse = remoteState?.mouse.value;
if (mouse && this._cameraClients[targetId]) {
if (mouse.offsetX > 0) {
this._cameraClients[targetId]!.style.left = mouse.offsetX + 'px';
Expand All @@ -573,31 +563,44 @@ export class MainView extends React.Component<IProps, IStates> {
this._cameraClients[targetId] = undefined;
}
} else {
// We handle here the local state updated by other components
// Sync local state updated by other components

const localState = clients.get(clientId);

if (localState) {
if (
localState['selected'] &&
localState['selected']['emitter'] &&
localState['selected']['emitter'] !== this.state.id
localState.selected?.emitter &&
localState.selected?.emitter !== this.state.id
) {
this._meshGroup?.children.forEach(obj => {
if (obj.name === localState['selected']['value']) {
this._selectedMesh = obj as THREE.Mesh<
THREE.BufferGeometry,
THREE.MeshBasicMaterial
>;
}
});
if (this._selectedMesh?.name !== localState.selected.value) {
this._meshGroup?.children.forEach(obj => {
if (obj.name === localState.selected.value) {
this._selectedMesh = obj as THREE.Mesh<
THREE.BufferGeometry,
THREE.MeshBasicMaterial
>;
}
});
}
} else {
this._selectedMesh = null;
}
}
}
};

private _handleThemeChange = (): void => {
const lightTheme =
document.body.getAttribute('data-jp-theme-light') === 'true';
this.setState(old => ({ ...old, lightTheme }));
};

private _handleWindowResize = (): void => {
clearTimeout(this._resizeTimeout);
this._resizeTimeout = setTimeout(() => {
this.forceUpdate();
}, 500);
};

render(): JSX.Element {
return (
<div
Expand Down
20 changes: 14 additions & 6 deletions src/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { IJCadContent, IJCadModel } from './_interface/jcad';
import jcadSchema from './schema/jcad.json';
import {
IJCadObjectDoc,
IJupyterCadClientState,
IJupyterCadDoc,
IJupyterCadDocChange,
IJupyterCadModel,
Expand Down Expand Up @@ -141,14 +142,14 @@ export class JupyterCadModel implements IJupyterCadModel {
return all;
}

syncCamera(pos: Position | undefined, emitter?: any): void {
syncCamera(pos: Position | undefined, emitter?: string): void {
this.sharedModel.awareness.setLocalStateField('mouse', {
value: pos,
emitter: emitter
});
}

syncSelectedObject(name: string | null, emitter?: any): void {
syncSelectedObject(name: string | null, emitter?: string): void {
this.sharedModel.awareness.setLocalStateField('selected', {
value: name,
emitter: emitter
Expand All @@ -159,12 +160,16 @@ export class JupyterCadModel implements IJupyterCadModel {
return this.sharedModel.awareness.clientID;
}

get clientStateChanged(): ISignal<this, Map<number, any>> {
get clientStateChanged(): ISignal<this, Map<number, IJupyterCadClientState>> {
return this._clientStateChanged;
}

private _onClientStateChanged = () => {
const clients = this.sharedModel.awareness.getStates();
private _onClientStateChanged = changed => {
const clients = this.sharedModel.awareness.getStates() as Map<
number,
IJupyterCadClientState
>;

this._clientStateChanged.emit(clients);
};

Expand All @@ -186,7 +191,10 @@ export class JupyterCadModel implements IJupyterCadModel {
private _contentChanged = new Signal<this, void>(this);
private _stateChanged = new Signal<this, IChangedArgs<any>>(this);
private _themeChanged = new Signal<this, IChangedArgs<any>>(this);
private _clientStateChanged = new Signal<this, Map<number, any>>(this);
private _clientStateChanged = new Signal<
this,
Map<number, IJupyterCadClientState>
>(this);
private _sharedModelChanged = new Signal<this, IJupyterCadDocChange>(this);
static worker: Worker;
}
Expand Down
35 changes: 5 additions & 30 deletions src/panelview/model.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,19 @@
import { ObservableMap } from '@jupyterlab/observables';
import { ISignal } from '@lumino/signaling';

import { IJupyterCadTracker } from '../token';
import {
IControlPanelModel,
IControlPanelState,
IJupyterCadDoc,
IJupyterCadModel,
IJupyterCadWidget,
ISateChangedSignal,
IStateValue
IJupyterCadWidget
} from '../types';

export class ControlPanelModel implements IControlPanelModel {
constructor(options: ControlPanelModel.IOptions) {
const state = { activatedObject: '', visibleObjects: [] };
this._state = new ObservableMap({ values: state });
this._stateChanged = this._state.changed;
this._tracker = options.tracker;
this._documentChanged = this._tracker.currentChanged;
}

get state(): ObservableMap<IStateValue> {
return this._state;
}

get stateChanged(): ISateChangedSignal {
return this._stateChanged;
}

get documentChanged(): ISignal<IJupyterCadTracker, IJupyterCadWidget | null> {
return this._documentChanged;
}
Expand All @@ -45,26 +30,16 @@ export class ControlPanelModel implements IControlPanelModel {
return this._tracker.currentWidget?.context.model.sharedModel;
}

set(key: keyof IControlPanelState, value: IStateValue): void {
this._state.set(key, value);
}

get(key: keyof IControlPanelState): IStateValue | undefined {
return this._state.get(key);
}

has(key: keyof IControlPanelState): boolean {
return this._state.has(key);
}

disconnect(f: any): void {
this._tracker.forEach(w =>
w.context.model.sharedModelChanged.disconnect(f)
);
this._tracker.forEach(w => w.context.model.themeChanged.disconnect(f));
this._tracker.forEach(w =>
w.context.model.clientStateChanged.disconnect(f)
);
}

private readonly _stateChanged: ISateChangedSignal;
private readonly _state: ObservableMap<IStateValue>;
private readonly _tracker: IJupyterCadTracker;
private _documentChanged: ISignal<
IJupyterCadTracker,
Expand Down
Loading

0 comments on commit 9e485e0

Please sign in to comment.