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

Moving module instance number control to Workbench and clearing layout on unmount in App #289

Merged
merged 3 commits into from
Aug 31, 2023
Merged

Moving module instance number control to Workbench and clearing layout on unmount in App #289

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27b8b7d
Adjusted workbench to new React 18 double use effect calls
rubenthoms Aug 31, 2023
b06fe13
Removed unused dependency
rubenthoms Aug 31, 2023
fbf66d3
Removed console messages
rubenthoms Aug 31, 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
6 changes: 6 additions & 0 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,20 @@ const layout: LayoutElement[] = [];

function App() {
const workbench = new Workbench();
console.debug("render app");
Copy link
Collaborator

Choose a reason for hiding this comment

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

Remove logging


React.useEffect(() => {
console.debug("app useEffect");
Copy link
Collaborator

Choose a reason for hiding this comment

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

Remove logging

if (!workbench.loadLayoutFromLocalStorage()) {
workbench.makeLayout(layout);
}
if (workbench.getLayout().length === 0) {
workbench.getGuiStateStore().setValue("drawerContent", DrawerContent.ModulesList);
}

return function () {
workbench.clearLayout();
};
}, []);

return (
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/framework/Module.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export class Module<StateType extends StateBaseType> {
private _defaultTitle: string;
public viewFC: ModuleFC<StateType>;
public settingsFC: ModuleFC<StateType>;
private _numInstances: number;
private _importState: ImportState;
private _moduleInstances: ModuleInstance<StateType>[];
private _defaultState: StateType | null;
Expand All @@ -55,7 +54,6 @@ export class Module<StateType extends StateBaseType> {
) {
this._name = name;
this._defaultTitle = defaultTitle;
this._numInstances = 0;
this.viewFC = () => <div>Not defined</div>;
this.settingsFC = () => <div>Not defined</div>;
this._importState = ImportState.NotImported;
Expand Down Expand Up @@ -101,12 +99,12 @@ export class Module<StateType extends StateBaseType> {
return this._syncableSettingKeys;
}

makeInstance(): ModuleInstance<StateType> {
makeInstance(instanceNumber: number): ModuleInstance<StateType> {
if (!this._workbench) {
throw new Error("Module must be added to a workbench before making an instance");
}

const instance = new ModuleInstance<StateType>(this, this._numInstances++, this._channelsDef, this._workbench);
const instance = new ModuleInstance<StateType>(this, instanceNumber, this._channelsDef, this._workbench);
this._moduleInstances.push(instance);
this.maybeImportSelf();
return instance;
Expand Down
21 changes: 17 additions & 4 deletions frontend/src/framework/Workbench.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export class Workbench {
private _broadcaster: Broadcaster;
private _subscribersMap: { [key: string]: Set<() => void> };
private _layout: LayoutElement[];
private _perModuleRunningInstanceNumber: Record<string, number>;

constructor() {
this._moduleInstances = [];
Expand All @@ -67,6 +68,7 @@ export class Workbench {
this._broadcaster = new Broadcaster();
this._subscribersMap = {};
this._layout = [];
this._perModuleRunningInstanceNumber = {};
}

loadLayoutFromLocalStorage(): boolean {
Expand Down Expand Up @@ -145,6 +147,15 @@ export class Workbench {
return this._moduleInstances.find((moduleInstance) => moduleInstance.getId() === id);
}

private getNextModuleInstanceNumber(moduleName: string): number {
if (moduleName in this._perModuleRunningInstanceNumber) {
this._perModuleRunningInstanceNumber[moduleName] += 1;
} else {
this._perModuleRunningInstanceNumber[moduleName] = 1;
}
return this._perModuleRunningInstanceNumber[moduleName];
}

makeLayout(layout: LayoutElement[]): void {
this._moduleInstances = [];
this.setLayout(layout);
Expand All @@ -155,19 +166,21 @@ export class Workbench {
}

module.setWorkbench(this);
const moduleInstance = module.makeInstance();
const moduleInstance = module.makeInstance(this.getNextModuleInstanceNumber(module.getName()));
this._moduleInstances.push(moduleInstance);
this._layout[index] = { ...this._layout[index], moduleInstanceId: moduleInstance.getId() };
this.notifySubscribers(WorkbenchEvents.ModuleInstancesChanged);
});
}

private clearLayout(): void {
clearLayout(): void {
for (const moduleInstance of this._moduleInstances) {
this._broadcaster.unregisterAllChannelsForModuleInstance(moduleInstance.getId());
}
this._moduleInstances = [];
this.setLayout([]);
this._perModuleRunningInstanceNumber = {};
this._layout = [];
this.notifySubscribers(WorkbenchEvents.FullModuleRerenderRequested);
}

makeAndAddModuleInstance(moduleName: string, layout: LayoutElement): ModuleInstance<any> {
Expand All @@ -178,7 +191,7 @@ export class Workbench {

module.setWorkbench(this);

const moduleInstance = module.makeInstance();
const moduleInstance = module.makeInstance(this.getNextModuleInstanceNumber(module.getName()));
this._moduleInstances.push(moduleInstance);

this._layout.push({ ...layout, moduleInstanceId: moduleInstance.getId() });
Expand Down