From 7d1a8a93b0ee64147566cbd447b017fba23be345 Mon Sep 17 00:00:00 2001 From: Greg Date: Wed, 29 Jan 2025 17:15:22 +0100 Subject: [PATCH 1/3] Rework add layer toolbar menu --- packages/base/src/toolbar/widget.tsx | 91 ++++++++++++++++------------ 1 file changed, 51 insertions(+), 40 deletions(-) diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx index 3ba02b373..edd133829 100644 --- a/packages/base/src/toolbar/widget.tsx +++ b/packages/base/src/toolbar/widget.tsx @@ -2,19 +2,20 @@ import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema'; import { CommandToolbarButton } from '@jupyterlab/apputils'; import { ReactWidget, - Toolbar, ReactiveToolbar, + Toolbar, ToolbarButton, addIcon, redoIcon, - undoIcon, - terminalIcon + terminalIcon, + undoIcon } from '@jupyterlab/ui-components'; import { CommandRegistry } from '@lumino/commands'; import { Menu, Widget } from '@lumino/widgets'; import * as React from 'react'; import { CommandIDs } from '../constants'; +import { rasterIcon } from '../icons'; import { UsersItem } from './usertoolbaritem'; export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator'; @@ -98,56 +99,66 @@ export class ToolbarWidget extends ReactiveToolbar { }) ); - const NewButton = new ToolbarButton({ - icon: addIcon, - noFocusOnClick: false, - onClick: () => { - if (!options.commands) { - return; - } + // vector sub menu + const vectorSubMenu = new Menu({ commands: options.commands }); - const bbox = NewButton.node.getBoundingClientRect(); - const NewSubMenu = new Menu({ commands: options.commands }); - NewSubMenu.title.label = 'New Layer'; + vectorSubMenu.title.label = 'Add Vector Layer'; + vectorSubMenu.title.iconClass = 'fa fa-vector-square'; + vectorSubMenu.id = 'jp-gis-toolbar-vector-menu'; - NewSubMenu.addItem({ - type: 'command', - command: CommandIDs.newHillshadeEntry - }); + vectorSubMenu.addItem({ + type: 'command', + command: CommandIDs.newGeoJSONEntry + }); - NewSubMenu.addItem({ - type: 'separator' - }); + vectorSubMenu.addItem({ + type: 'command', + command: CommandIDs.newShapefileLayer + }); - NewSubMenu.addItem({ - type: 'command', - command: CommandIDs.newImageEntry - }); + //raster submenu + const rasterSubMenu = new Menu({ commands: options.commands }); - NewSubMenu.addItem({ - type: 'separator' - }); + rasterSubMenu.title.label = 'Add Raster Layer'; + rasterSubMenu.title.icon = rasterIcon; + rasterSubMenu.id = 'jp-gis-toolbar-raster-menu'; - NewSubMenu.addItem({ - type: 'command', - command: CommandIDs.newShapefileLayer - }); + rasterSubMenu.addItem({ + type: 'command', + command: CommandIDs.newHillshadeEntry + }); - NewSubMenu.addItem({ - type: 'command', - command: CommandIDs.newGeoTiffEntry - }); + rasterSubMenu.addItem({ + type: 'command', + command: CommandIDs.newImageEntry + }); + + rasterSubMenu.addItem({ + type: 'command', + command: CommandIDs.newGeoTiffEntry + }); + + const NewSubMenu = new Menu({ commands: options.commands }); + NewSubMenu.title.label = 'Add Layer'; + + NewSubMenu.addItem({ type: 'submenu', submenu: rasterSubMenu }); + NewSubMenu.addItem({ type: 'submenu', submenu: vectorSubMenu }); + + const NewEntryButton = new ToolbarButton({ + icon: addIcon, + noFocusOnClick: false, + onClick: () => { + if (!options.commands) { + return; + } - NewSubMenu.addItem({ - type: 'command', - command: CommandIDs.newGeoJSONEntry - }); + const bbox = NewEntryButton.node.getBoundingClientRect(); NewSubMenu.open(bbox.x, bbox.bottom); } }); - this.addItem('New', NewButton); + this.addItem('New', NewEntryButton); this.addItem('separator2', new Separator()); From 44ba4cac8a13fc9fefdc65f87fcf3ff5cfe3e16f Mon Sep 17 00:00:00 2001 From: Greg Date: Thu, 30 Jan 2025 11:57:12 +0100 Subject: [PATCH 2/3] Use MenuSvg --- packages/base/src/toolbar/widget.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx index edd133829..b20b3b67e 100644 --- a/packages/base/src/toolbar/widget.tsx +++ b/packages/base/src/toolbar/widget.tsx @@ -1,6 +1,7 @@ import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema'; import { CommandToolbarButton } from '@jupyterlab/apputils'; import { + MenuSvg, ReactWidget, ReactiveToolbar, Toolbar, @@ -138,7 +139,7 @@ export class ToolbarWidget extends ReactiveToolbar { command: CommandIDs.newGeoTiffEntry }); - const NewSubMenu = new Menu({ commands: options.commands }); + const NewSubMenu = new MenuSvg({ commands: options.commands }); NewSubMenu.title.label = 'Add Layer'; NewSubMenu.addItem({ type: 'submenu', submenu: rasterSubMenu }); From 68799f8a708b4e4c2fdfd13cf19d6b9e3a733d19 Mon Sep 17 00:00:00 2001 From: Greg Date: Thu, 30 Jan 2025 12:20:39 +0100 Subject: [PATCH 3/3] Update test --- ui-tests/tests/geojson-layers.spec.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/ui-tests/tests/geojson-layers.spec.ts b/ui-tests/tests/geojson-layers.spec.ts index 15e6b0dfb..bc63a11a5 100644 --- a/ui-tests/tests/geojson-layers.spec.ts +++ b/ui-tests/tests/geojson-layers.spec.ts @@ -1,8 +1,8 @@ import { + IJupyterLabPageFixture, expect, - test, galata, - IJupyterLabPageFixture + test } from '@jupyterlab/galata'; import { Locator } from '@playwright/test'; import path from 'path'; @@ -48,12 +48,14 @@ test.describe('#geoJSONLayer', () => { test('Add a GeoJSON layer', async ({ page, tmpPath }) => { const panel = await openGIS(page, tmpPath, FILENAME); - const button = panel?.locator('.jp-ToolbarButton[data-jp-item-name="New"]'); const main = panel?.locator('.jGIS-Mainview'); - await button?.click(); await page - .locator('.lm-Menu-itemLabel') + .locator('div:nth-child(9) > .jp-ToolbarButtonComponent > .control') + .click(); + await page.getByText('Add Vector Layer').hover(); + await page + .locator('#jp-gis-toolbar-vector-menu') .getByText('New GeoJSON layer') .click();