Skip to content

Commit 047e396

Browse files
nakul-pyarjxn-py
nakul-py
and
arjxn-py
authored
Making Embedded side panels Draggable. (#957)
* Making Embedded side panels Draggable. * installing file again * discarding lockfile changes --------- Co-authored-by: Arjun Verma <[email protected]>
1 parent 8f67e97 commit 047e396

File tree

5 files changed

+120
-101
lines changed

5 files changed

+120
-101
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"lerna": "^8.1.9",
7070
"npm-run-all": "^4.1.5",
7171
"prettier": "^3.0.0",
72+
"react-draggable": "^4.5.0",
7273
"rimraf": "^3.0.2",
7374
"typescript": "^5",
7475
"webpack": "^5.76.3"

‎packages/base/src/panelview/leftpanel.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IStateDB } from '@jupyterlab/statedb';
33
import { CommandRegistry } from '@lumino/commands';
44
import { MouseEvent as ReactMouseEvent } from 'react';
55
import * as React from 'react';
6+
import Draggable from 'react-draggable';
67

78
import { LayersBodyComponent } from './components/layers';
89
import {
@@ -62,55 +63,57 @@ export const LeftPanel: React.FC<ILeftPanelProps> = (
6263
);
6364

6465
return (
65-
<div
66-
className="jgis-left-panel-container"
67-
style={{ display: leftPanelVisible ? 'block' : 'none' }}
68-
>
69-
<PanelTabs curTab={curTab} className="jgis-panel-tabs">
70-
<TabsList>
71-
{tabInfo.map(tab => (
72-
<TabsTrigger
73-
className="jGIS-layer-browser-category"
74-
key={tab.name}
75-
value={tab.name}
76-
onClick={() => {
77-
if (curTab !== tab.name) {
78-
setCurTab(tab.name);
79-
} else {
80-
setCurTab('');
81-
}
82-
}}
83-
>
84-
{tab.title}
85-
</TabsTrigger>
86-
))}
87-
</TabsList>
66+
<Draggable handle=".jgis-panel-tabs" bounds=".jGIS-Mainview-Container">
67+
<div
68+
className="jgis-left-panel-container"
69+
style={{ display: leftPanelVisible ? 'block' : 'none' }}
70+
>
71+
<PanelTabs curTab={curTab} className="jgis-panel-tabs">
72+
<TabsList>
73+
{tabInfo.map(tab => (
74+
<TabsTrigger
75+
className="jGIS-layer-browser-category"
76+
key={tab.name}
77+
value={tab.name}
78+
onClick={() => {
79+
if (curTab !== tab.name) {
80+
setCurTab(tab.name);
81+
} else {
82+
setCurTab('');
83+
}
84+
}}
85+
>
86+
{tab.title}
87+
</TabsTrigger>
88+
))}
89+
</TabsList>
8890

89-
{!settings.layersDisabled && (
90-
<TabsContent
91-
value="layers"
92-
className="jgis-panel-tab-content jp-gis-layerPanel"
93-
>
94-
<LayersBodyComponent
95-
model={props.model}
96-
commands={props.commands}
97-
state={props.state}
98-
></LayersBodyComponent>
99-
</TabsContent>
100-
)}
91+
{!settings.layersDisabled && (
92+
<TabsContent
93+
value="layers"
94+
className="jgis-panel-tab-content jp-gis-layerPanel"
95+
>
96+
<LayersBodyComponent
97+
model={props.model}
98+
commands={props.commands}
99+
state={props.state}
100+
></LayersBodyComponent>
101+
</TabsContent>
102+
)}
101103

102-
{!settings.stacBrowserDisabled && (
103-
<TabsContent value="stac" className="jgis-panel-tab-content">
104-
<StacPanel model={props.model} />
105-
</TabsContent>
106-
)}
104+
{!settings.stacBrowserDisabled && (
105+
<TabsContent value="stac" className="jgis-panel-tab-content">
106+
<StacPanel model={props.model} />
107+
</TabsContent>
108+
)}
107109

108-
{!settings.filtersDisabled && (
109-
<TabsContent value="filters" className="jgis-panel-tab-content">
110-
<FilterComponent model={props.model}></FilterComponent>
111-
</TabsContent>
112-
)}
113-
</PanelTabs>
114-
</div>
110+
{!settings.filtersDisabled && (
111+
<TabsContent value="filters" className="jgis-panel-tab-content">
112+
<FilterComponent model={props.model}></FilterComponent>
113+
</TabsContent>
114+
)}
115+
</PanelTabs>
116+
</div>
117+
</Draggable>
115118
);
116119
};

‎packages/base/src/panelview/rightpanel.tsx‎

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
IJupyterGISModel,
66
} from '@jupytergis/schema';
77
import * as React from 'react';
8+
import Draggable from 'react-draggable';
89

910
import { AnnotationsPanel } from './annotationPanel';
1011
import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
@@ -83,61 +84,66 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
8384
React.useState(undefined);
8485

8586
return (
86-
<div
87-
className="jgis-right-panel-container"
88-
style={{ display: rightPanelVisible ? 'block' : 'none' }}
89-
>
90-
<PanelTabs className="jgis-panel-tabs" curTab={curTab}>
91-
<TabsList>
92-
{tabInfo.map(tab => (
93-
<TabsTrigger
94-
className="jGIS-layer-browser-category"
95-
key={tab.name}
96-
value={tab.name}
97-
onClick={() => {
98-
if (curTab !== tab.name) {
99-
setCurTab(tab.name);
100-
} else {
101-
setCurTab('');
102-
}
103-
}}
104-
>
105-
{tab.title}
106-
</TabsTrigger>
107-
))}
108-
</TabsList>
87+
<Draggable handle=".jgis-panel-tabs" bounds=".jGIS-Mainview-Container">
88+
<div
89+
className="jgis-right-panel-container"
90+
style={{ display: rightPanelVisible ? 'block' : 'none' }}
91+
>
92+
<PanelTabs className="jgis-panel-tabs" curTab={curTab}>
93+
<TabsList>
94+
{tabInfo.map(tab => (
95+
<TabsTrigger
96+
className="jGIS-layer-browser-category"
97+
key={tab.name}
98+
value={tab.name}
99+
onClick={() => {
100+
if (curTab !== tab.name) {
101+
setCurTab(tab.name);
102+
} else {
103+
setCurTab('');
104+
}
105+
}}
106+
>
107+
{tab.title}
108+
</TabsTrigger>
109+
))}
110+
</TabsList>
109111

110-
{!settings.objectPropertiesDisabled && (
111-
<TabsContent
112-
value="objectProperties"
113-
className="jgis-panel-tab-content"
114-
>
115-
<ObjectPropertiesReact
116-
setSelectedObject={setSelectedObjectProperties}
117-
selectedObject={selectedObjectProperties}
118-
formSchemaRegistry={props.formSchemaRegistry}
119-
model={props.model}
120-
/>
121-
</TabsContent>
122-
)}
112+
{!settings.objectPropertiesDisabled && (
113+
<TabsContent
114+
value="objectProperties"
115+
className="jgis-panel-tab-content"
116+
>
117+
<ObjectPropertiesReact
118+
setSelectedObject={setSelectedObjectProperties}
119+
selectedObject={selectedObjectProperties}
120+
formSchemaRegistry={props.formSchemaRegistry}
121+
model={props.model}
122+
/>
123+
</TabsContent>
124+
)}
123125

124-
{!settings.annotationsDisabled && (
125-
<TabsContent value="annotations" className="jgis-panel-tab-content">
126-
<AnnotationsPanel
127-
annotationModel={props.annotationModel}
128-
jgisModel={props.model}
129-
></AnnotationsPanel>
130-
</TabsContent>
131-
)}
126+
{!settings.annotationsDisabled && (
127+
<TabsContent value="annotations" className="jgis-panel-tab-content">
128+
<AnnotationsPanel
129+
annotationModel={props.annotationModel}
130+
jgisModel={props.model}
131+
></AnnotationsPanel>
132+
</TabsContent>
133+
)}
132134

133-
{!settings.identifyDisabled && (
134-
<TabsContent value="identifyPanel" className="jgis-panel-tab-content">
135-
<IdentifyPanelComponent
136-
model={props.model}
137-
></IdentifyPanelComponent>
138-
</TabsContent>
139-
)}
140-
</PanelTabs>
141-
</div>
135+
{!settings.identifyDisabled && (
136+
<TabsContent
137+
value="identifyPanel"
138+
className="jgis-panel-tab-content"
139+
>
140+
<IdentifyPanelComponent
141+
model={props.model}
142+
></IdentifyPanelComponent>
143+
</TabsContent>
144+
)}
145+
</PanelTabs>
146+
</div>
147+
</Draggable>
142148
);
143149
};

‎packages/base/style/shared/tabs.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,15 @@
99
0 4px 8px 0 rgba(0, 0, 0, 0.2),
1010
0 6px 20px 0 rgba(0, 0, 0, 0.19);
1111
border-radius: 5px;
12+
cursor: grab;
13+
user-select: none;
14+
-webkit-user-drag: none;
1215
}
16+
17+
.jgis-panel-tabs:active {
18+
cursor: grabbing;
19+
}
20+
1321
.jgis-tabs-list {
1422
display: inline-flex;
1523
height: 2.5rem;

‎yarn.lock‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1054,6 +1054,7 @@ __metadata:
10541054
lerna: ^8.1.9
10551055
npm-run-all: ^4.1.5
10561056
prettier: ^3.0.0
1057+
react-draggable: ^4.5.0
10571058
rimraf: ^3.0.2
10581059
typescript: ^5
10591060
webpack: ^5.76.3
@@ -10674,7 +10675,7 @@ __metadata:
1067410675
languageName: node
1067510676
linkType: hard
1067610677

10677-
"react-draggable@npm:^4.4.5":
10678+
"react-draggable@npm:^4.4.5, react-draggable@npm:^4.5.0":
1067810679
version: 4.5.0
1067910680
resolution: "react-draggable@npm:4.5.0"
1068010681
dependencies:

0 commit comments

Comments
 (0)