Made panels use tab , fixe them to the edge of the map.

Author: Gauss-Taylor-Euler

packages/base/src/mainview/mainView.tsx

@@ -1,37 +1,42 @@
 import { IStateDB } from '@jupyterlab/statedb';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { Widget } from '@lumino/widgets';
 import * as React from 'react';
 
 import { MainView } from './mainView';
 import { MainViewModel } from './mainviewmodel';
+import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
+
+export interface IOptions {
+	mainViewModel: MainViewModel;
+	state?: IStateDB;
+	formSchemaRegistry?: IJGISFormSchemaRegistry;
+	annotationModel?: IAnnotationModel;
+}
 
 export class JupyterGISMainViewPanel extends ReactWidget {
-  /**
-   * Construct a `JupyterGISPanel`.
-   */
-  constructor(
-    options: { mainViewModel: MainViewModel, state?: IStateDB },
-    rightPanel?: Widget,
-  ) {
-    super();
-    this._mainViewModel = options.mainViewModel;
-    this._state = options.state;
-    this.addClass('jp-jupytergis-panel');
-    this._rightPanel = rightPanel;
-  }
+	/**
+	 * Construct a `JupyterGISPanel`.
+	 */
+	constructor(options: IOptions) {
+		super();
+		this._state = options.state;
+		this.addClass('jp-jupytergis-panel');
+		this._options = options;
+	}
 
-  render(): JSX.Element {
-    return (
-      <MainView
-        state={this._state}
-        rightPanel={this._rightPanel}
-        viewModel={this._mainViewModel}
-      />
-    );
-  }
+	render(): JSX.Element {
+		return (
+			<MainView
+				state={this._state}
+				viewModel={this._options.mainViewModel}
+				formSchemaRegistry={
+					this._options.formSchemaRegistry
+				}
+				annotationModel={this._options.annotationModel}
+			/>
+		);
+	}
 
-  private _state?: IStateDB;
-  private _mainViewModel: MainViewModel;
-  private _rightPanel?: Widget;
+	private _state?: IStateDB;
+	private _options: IOptions;
 }

packages/base/src/mainview/mainviewwidget.tsx

@@ -5,90 +5,88 @@ import React, { Component } from 'react';
 import Annotation from '@/src/annotations/components/Annotation';
 
 interface IAnnotationPanelProps {
-  annotationModel: IAnnotationModel;
-  rightPanelModel: IJupyterGISModel;
+	annotationModel: IAnnotationModel;
+	rightPanelModel: IJupyterGISModel;
 }
 
 export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
-  constructor(props: IAnnotationPanelProps) {
-    super(props);
-
-    const updateCallback = () => {
-      this.forceUpdate();
-    };
-
-    this._annotationModel = props.annotationModel;
-    this._rightPanelModel = props.rightPanelModel;
-
-    this._annotationModel.modelChanged.connect(async () => {
-      // await this._annotationModel?.context?.ready;
-
-      this._annotationModel?.model?.sharedMetadataChanged.disconnect(
-        updateCallback,
-      );
-      this._annotationModel = props.annotationModel;
-      this._annotationModel?.model?.sharedMetadataChanged.connect(
-        updateCallback,
-      );
-      this.forceUpdate();
-    });
-  }
-
-  render(): JSX.Element {
-    const annotationIds = this._annotationModel?.getAnnotationIds();
-
-    if (!annotationIds || !this._annotationModel) {
-      return <div></div>;
-    }
-
-    const annotations = annotationIds.map((id: string) => {
-      return (
-        <div>
-          <Annotation
-            rightPanelModel={this._rightPanelModel}
-            annotationModel={this._annotationModel}
-            itemId={id}
-          />
-          <hr className="jGIS-Annotations-Separator"></hr>
-        </div>
-      );
-    });
-
-    return <div className="jgis-scrollable">{annotations}</div>;
-  }
-
-  private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IJupyterGISModel;
+	constructor(props: IAnnotationPanelProps) {
+		super(props);
+
+		console.log(props.annotationModel);
+
+		const updateCallback = () => {
+			this.forceUpdate();
+		};
+
+		this._annotationModel = props.annotationModel;
+		this._rightPanelModel = props.rightPanelModel;
+
+		this._annotationModel?.model?.sharedMetadataChanged.connect(
+			updateCallback,
+		);
+		this.forceUpdate();
+	}
+
+	render(): JSX.Element {
+		const annotationIds = this._annotationModel?.getAnnotationIds();
+
+		if (!annotationIds || !this._annotationModel) {
+			return <div></div>;
+		}
+
+		const annotations = annotationIds.map((id: string) => {
+			return (
+				<div>
+					<Annotation
+						rightPanelModel={
+							this._rightPanelModel
+						}
+						annotationModel={
+							this._annotationModel
+						}
+						itemId={id}
+					/>
+					<hr className="jGIS-Annotations-Separator"></hr>
+				</div>
+			);
+		});
+
+		return <div className="jgis-scrollable">{annotations}</div>;
+	}
+
+	private _annotationModel: IAnnotationModel;
+	private _rightPanelModel: IJupyterGISModel;
 }
 
 export class Annotations extends PanelWithToolbar {
-  constructor(options: Annotations.IOptions) {
-    super({});
+	constructor(options: Annotations.IOptions) {
+		super({});
 
-    this.title.label = 'Annotations';
-    this.addClass('jgis-scrollable');
+		this.title.label = 'Annotations';
+		this.addClass('jgis-scrollable');
 
-    this._annotationModel = options.annotationModel;
-    this._rightPanelModel = options.rightPanelModel;
+		this._annotationModel = options.annotationModel;
+		this._rightPanelModel = options.rightPanelModel;
 
-    this._widget = ReactWidget.create(
-      <AnnotationsPanel
-        rightPanelModel={this._rightPanelModel}
-        annotationModel={this._annotationModel}
-      />,
-    );
+		this._widget = ReactWidget.create(
+			<AnnotationsPanel
+				rightPanelModel={this._rightPanelModel}
+				annotationModel={this._annotationModel}
+			/>,
+		);
 
-    this.addWidget(this._widget);
-  }
+		this.addWidget(this._widget);
+	}
 
-  private _widget: ReactWidget;
-  private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IJupyterGISModel;
+	private _widget: ReactWidget;
+	private _annotationModel: IAnnotationModel;
+	private _rightPanelModel: IJupyterGISModel;
 }
 
 export namespace Annotations {
-  export interface IOptions {
-    annotationModel: IAnnotationModel;
-    rightPanelModel: IJupyterGISModel;
-  }
+	export interface IOptions {
+		annotationModel: IAnnotationModel;
+		rightPanelModel: IJupyterGISModel;
+	}
 }