@jupytergis/base 0.1.1

package/lib/panelview/components/layers.js

@@ -0,0 +1,275 @@
+import { DOMUtils } from '@jupyterlab/apputils';
+import { Button, LabIcon, ReactWidget, caretDownIcon } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import React, { useEffect, useState } from 'react';
+import { icons } from '../../constants';
+import { nonVisibilityIcon, visibilityIcon } from '../../icons';
+const LAYERS_PANEL_CLASS = 'jp-gis-layerPanel';
+const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
+const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
+const LAYER_GROUP_COLLAPSER_CLASS = 'jp-gis-layerGroupCollapser';
+const LAYER_ITEM_CLASS = 'jp-gis-layerItem';
+const LAYER_CLASS = 'jp-gis-layer';
+const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
+const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
+const LAYER_TEXT_CLASS = 'jp-gis-layerText';
+/**
+ * The layers panel widget.
+ */
+export class LayersPanel extends Panel {
+    constructor(options) {
+        super();
+        // This happens when dragging over empty space below the tree.
+        this._onDragOver = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this.node.appendChild(Private.dragIndicator);
+            Private.dragInfo.dragOverElement = null;
+            Private.dragInfo.dragOverPosition = null;
+        };
+        this._onDrop = (e) => {
+            Private.dragIndicator.style.display = 'none';
+            if (this._model === undefined) {
+                return;
+            }
+            const { jGISModel: model } = this._model;
+            const { draggedElement, dragOverElement, dragOverPosition } = Private.dragInfo;
+            if (dragOverElement === 'error') {
+                return;
+            }
+            if (!draggedElement) {
+                return;
+            }
+            const draggedId = draggedElement.dataset.id;
+            if (!draggedId) {
+                return;
+            }
+            // Element has been dropped in the empty zone below the tree.
+            if (dragOverElement === null) {
+                model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], '', 0);
+                return;
+            }
+            const dragOverId = dragOverElement.dataset.id;
+            if (!dragOverId) {
+                return;
+            }
+            // Handle the special case where we want to drop the element on top of the first
+            // element of a group.
+            if (dragOverElement.classList.contains(LAYER_GROUP_HEADER_CLASS) &&
+                dragOverPosition === 'below') {
+                model === null || model === void 0 ? void 0 : model.moveItemsToGroup([draggedId], dragOverId);
+                return;
+            }
+            model === null || model === void 0 ? void 0 : model.moveItemRelatedTo(draggedId, dragOverId, dragOverPosition === 'above');
+        };
+        this._model = options.model;
+        this._onSelect = options.onSelect;
+        this._state = options.state;
+        this.id = 'jupytergis::layerTree';
+        this.addClass(LAYERS_PANEL_CLASS);
+        this.addWidget(ReactWidget.create(React.createElement(LayersBodyComponent, { model: this._model, onSelect: this._onSelect, state: this._state })));
+        this.node.ondragover = this._onDragOver;
+        this.node.ondrop = this._onDrop;
+    }
+}
+/**
+ * The body component of the panel.
+ */
+function LayersBodyComponent(props) {
+    var _a, _b;
+    const [model, setModel] = useState((_a = props.model) === null || _a === void 0 ? void 0 : _a.jGISModel);
+    const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+    /**
+     * Propagate the layer selection.
+     */
+    const onItemClick = ({ type, item, nodeId, event }) => {
+        props.onSelect({ type, item, nodeId, event });
+    };
+    /**
+     * Listen to the layers and layer tree changes.
+     */
+    useEffect(() => {
+        const updateLayers = () => {
+            setLayerTree((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+        };
+        model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.connect(updateLayers);
+        model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.connect(updateLayers);
+        return () => {
+            model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.disconnect(updateLayers);
+            model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.disconnect(updateLayers);
+        };
+    }, [model]);
+    /**
+     * Update the model when it changes.
+     */
+    (_b = props.model) === null || _b === void 0 ? void 0 : _b.documentChanged.connect((_, widget) => {
+        var _a;
+        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+        setLayerTree(((_a = widget === null || widget === void 0 ? void 0 : widget.context.model) === null || _a === void 0 ? void 0 : _a.getLayerTree()) || []);
+    });
+    return (React.createElement("div", { id: "jp-gis-layer-tree" }, layerTree
+        .slice()
+        .reverse()
+        .map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
+}
+/**
+ * The component to handle group of layers.
+ */
+function LayerGroupComponent(props) {
+    var _a, _b;
+    const { group, gisModel, onClick, state } = props;
+    if (group === undefined) {
+        return React.createElement(React.Fragment, null);
+    }
+    const [id, setId] = useState('');
+    const [open, setOpen] = useState(false);
+    const name = (_a = group === null || group === void 0 ? void 0 : group.name) !== null && _a !== void 0 ? _a : 'Undefined group';
+    const layers = (_b = group === null || group === void 0 ? void 0 : group.layers) !== null && _b !== void 0 ? _b : [];
+    const [selected, setSelected] = useState(
+    // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
+    isSelected(group.name, gisModel));
+    useEffect(() => {
+        setId(DOMUtils.createDomID());
+        const getExpandedState = async () => {
+            var _a;
+            const groupState = await state.fetch(group.name);
+            setOpen(groupState ? ((_a = groupState['expanded']) !== null && _a !== void 0 ? _a : false) : false);
+        };
+        getExpandedState();
+    }, []);
+    /**
+     * Listen to the changes on the current layer.
+     */
+    useEffect(() => {
+        const onClientSharedStateChanged = () => {
+            // TODO Support follow mode and remoteUser state
+            setSelected(isSelected(group.name, gisModel));
+        };
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.connect(onClientSharedStateChanged);
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
+        };
+    }, [gisModel]);
+    const handleRightClick = (event) => {
+        var _a;
+        const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
+        onClick({ type: 'group', item: name, nodeId: childId, event });
+    };
+    const handleExpand = async () => {
+        state.save(group.name, { expanded: !open });
+        setOpen(!open);
+    };
+    return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`, draggable: true, onDragStart: Private.onDragStart, onDragEnd: Private.onDragEnd, "data-id": name },
+        React.createElement("div", { onClick: handleExpand, onContextMenu: handleRightClick, className: `${LAYER_GROUP_HEADER_CLASS} ${selected ? ' jp-mod-selected' : ''}`, onDragOver: Private.onDragOver, "data-id": name },
+            React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: LAYER_GROUP_COLLAPSER_CLASS + (open ? ' jp-mod-expanded' : ''), tag: 'span' }),
+            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name)),
+        open && (React.createElement("div", null, layers
+            .slice()
+            .reverse()
+            .map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: gisModel, layerId: layer, onClick: onClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: gisModel, group: layer, onClick: onClick, state: props.state })))))));
+}
+function isSelected(layerId, model) {
+    var _a, _b, _c, _d;
+    return ((((_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value) &&
+        Object.keys((_d = (_c = model === null || model === void 0 ? void 0 : model.localState) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.value).includes(layerId)) ||
+        false);
+}
+/**
+ * The component to display a single layer.
+ */
+function LayerComponent(props) {
+    const { layerId, gisModel, onClick } = props;
+    const layer = gisModel === null || gisModel === void 0 ? void 0 : gisModel.getLayer(layerId);
+    if (layer === undefined) {
+        return React.createElement(React.Fragment, null);
+    }
+    const [id, setId] = useState('');
+    const [selected, setSelected] = useState(
+    // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
+    isSelected(layerId, gisModel));
+    const name = layer.name;
+    useEffect(() => {
+        setId(DOMUtils.createDomID());
+    }, []);
+    /**
+     * Listen to the changes on the current layer.
+     */
+    useEffect(() => {
+        const onClientSharedStateChanged = (sender, clients) => {
+            // TODO Support follow mode and remoteUser state
+            setSelected(isSelected(layerId, gisModel));
+        };
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.connect(onClientSharedStateChanged);
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
+        };
+    }, [gisModel]);
+    /**
+     * Toggle layer visibility.
+     */
+    const toggleVisibility = () => {
+        var _a;
+        layer.visible = !layer.visible;
+        (_a = gisModel === null || gisModel === void 0 ? void 0 : gisModel.sharedModel) === null || _a === void 0 ? void 0 : _a.updateLayer(layerId, layer);
+    };
+    const setSelection = (event) => {
+        var _a;
+        const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
+        onClick({ type: 'layer', item: layerId, nodeId: childId, event });
+    };
+    return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId },
+        React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection },
+            icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
+            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name)),
+        React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
+            React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: LAYER_ICON_CLASS, tag: "span" }))));
+}
+var Private;
+(function (Private) {
+    Private.dragIndicator = document.createElement('div');
+    Private.dragIndicator.id = 'jp-drag-indicator';
+    Private.dragInfo = {
+        draggedElement: null,
+        dragOverElement: null,
+        dragOverPosition: null
+    };
+    Private.onDragStart = (e) => {
+        Private.dragInfo.draggedElement = e.target;
+    };
+    Private.onDragOver = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        const { clientY } = e;
+        let target = e.target.closest(`.${LAYER_GROUP_HEADER_CLASS}, .${LAYER_ITEM_CLASS}`);
+        if (!target) {
+            return;
+        }
+        // Do not allow move a group into itself.
+        if ((_a = Private.dragInfo.draggedElement) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            Private.dragInfo.dragOverElement = 'error';
+            return;
+        }
+        Private.dragInfo.dragOverElement = target;
+        const boundingBox = target.getBoundingClientRect();
+        if (clientY - boundingBox.top < boundingBox.bottom - clientY) {
+            Private.dragInfo.dragOverPosition = 'above';
+            if (target.classList.contains(LAYER_GROUP_HEADER_CLASS)) {
+                target = target.parentNode;
+            }
+            target.insertAdjacentElement('beforebegin', Private.dragIndicator);
+            Private.dragIndicator.style.display = 'block';
+        }
+        else {
+            Private.dragInfo.dragOverPosition = 'below';
+            target.insertAdjacentElement('afterend', Private.dragIndicator);
+            Private.dragIndicator.style.display = 'block';
+        }
+    };
+    Private.onDragEnd = () => {
+        Private.dragIndicator.style.display = 'none';
+        Private.dragInfo.draggedElement = null;
+        Private.dragInfo.dragOverElement = null;
+        Private.dragInfo.dragOverPosition = null;
+    };
+})(Private || (Private = {}));

package/lib/panelview/components/sources.d.ts

@@ -0,0 +1,10 @@
+import { Panel } from '@lumino/widgets';
+import { ILeftPanelOptions } from '../leftpanel';
+/**
+ * The sources panel widget.
+ */
+export declare class SourcesPanel extends Panel {
+    constructor(options: ILeftPanelOptions);
+    private _model;
+    private _onSelect;
+}

package/lib/panelview/components/sources.js

@@ -0,0 +1,147 @@
+import { DOMUtils } from '@jupyterlab/apputils';
+import { LabIcon, ReactWidget } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import React, { useEffect, useState } from 'react';
+import { icons } from '../../constants';
+const SOURCES_PANEL_CLASS = 'jp-gis-sourcePanel';
+const SOURCE_CLASS = 'jp-gis-source';
+const SOURCE_TITLE_CLASS = 'jp-gis-sourceTitle';
+const SOURCE_ICON_CLASS = 'jp-gis-sourceIcon';
+const SOURCE_TEXT_CLASS = 'jp-gis-sourceText';
+const SOURCE_UNUSED = 'jp-gis-sourceUnused';
+const SOURCE_INFO = 'jp-gis-sourceInfo';
+/**
+ * The sources panel widget.
+ */
+export class SourcesPanel extends Panel {
+    constructor(options) {
+        super();
+        this._model = options.model;
+        this._onSelect = options.onSelect;
+        this.id = 'jupytergis::sourcesPanel';
+        this.addClass(SOURCES_PANEL_CLASS);
+        this.addWidget(ReactWidget.create(React.createElement(SourcesBodyComponent, { model: this._model, onSelect: this._onSelect })));
+    }
+}
+/**
+ * The body component of the panel.
+ */
+function SourcesBodyComponent(props) {
+    var _a, _b;
+    const [model, setModel] = useState((_a = props.model) === null || _a === void 0 ? void 0 : _a.jGISModel);
+    const [sourceIds, setSourceIds] = useState(Private.sortedSourceIds(model));
+    /**
+     * Propagate the source selection.
+     */
+    const onItemClick = ({ type, item, nodeId, event }) => {
+        props.onSelect({ type, item, nodeId, event });
+    };
+    /**
+     * Listen to the sources and changes.
+     */
+    useEffect(() => {
+        const updateSources = () => {
+            setSourceIds([...Private.sortedSourceIds(model)]);
+        };
+        model === null || model === void 0 ? void 0 : model.sharedModel.sourcesChanged.connect(updateSources);
+        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(updateSources);
+        updateSources();
+        return () => {
+            model === null || model === void 0 ? void 0 : model.sharedModel.sourcesChanged.disconnect(updateSources);
+            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(updateSources);
+        };
+    }, [model]);
+    /**
+     * Update the model when it changes.
+     */
+    (_b = props.model) === null || _b === void 0 ? void 0 : _b.documentChanged.connect((_, widget) => {
+        setModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+    });
+    return (React.createElement("div", { id: "jp-gis-sources" }, sourceIds.map(sourceId => {
+        return (React.createElement(SourceComponent, { key: `source-${sourceId}`, gisModel: model, sourceId: sourceId, onClick: onItemClick }));
+    })));
+}
+function isSelected(sourceId, model) {
+    var _a, _b, _c, _d;
+    return ((((_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value) &&
+        Object.keys((_d = (_c = model === null || model === void 0 ? void 0 : model.localState) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.value).includes(sourceId)) ||
+        false);
+}
+/**
+ * The component to display a single source.
+ */
+function SourceComponent(props) {
+    const { sourceId, gisModel, onClick } = props;
+    const source = gisModel === null || gisModel === void 0 ? void 0 : gisModel.getSource(sourceId);
+    if (source === undefined) {
+        return React.createElement(React.Fragment, null);
+    }
+    const [id, setId] = useState('');
+    const [selected, setSelected] = useState(
+    // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
+    isSelected(sourceId, gisModel));
+    const [unused, setUnused] = useState(false);
+    const name = source.name;
+    useEffect(() => {
+        setId(DOMUtils.createDomID());
+    }, []);
+    /**
+     * Check if the source is used by a layer.
+     */
+    useEffect(() => {
+        const checkUsage = () => {
+            const sources = gisModel === null || gisModel === void 0 ? void 0 : gisModel.getLayersBySource(sourceId);
+            setUnused(sources ? sources.length === 0 : true);
+        };
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.sharedLayersChanged.connect(checkUsage);
+        checkUsage();
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.sharedLayersChanged.disconnect(checkUsage);
+        };
+    }, [gisModel]);
+    /**
+     * Listen to the changes on the current source.
+     */
+    useEffect(() => {
+        const onClientSharedStateChanged = (sender, clients) => {
+            // TODO Support follow mode and remoteUser state
+            setSelected(isSelected(sourceId, gisModel));
+        };
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.connect(onClientSharedStateChanged);
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
+        };
+    }, [gisModel]);
+    const setSelection = (event) => {
+        var _a;
+        const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
+        onClick({ type: 'source', item: sourceId, nodeId: childId, event });
+    };
+    let mainClasses = SOURCE_CLASS;
+    if (selected) {
+        mainClasses = mainClasses.concat(' jp-mod-selected');
+    }
+    if (unused) {
+        mainClasses = mainClasses.concat(` ${SOURCE_UNUSED}`);
+    }
+    return (React.createElement("div", { className: mainClasses },
+        React.createElement("div", { className: SOURCE_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection },
+            icons.has(source.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(source.type), { className: SOURCE_ICON_CLASS }))),
+            React.createElement("span", { id: id, className: SOURCE_TEXT_CLASS }, name),
+            unused && React.createElement("span", { className: SOURCE_INFO }, "(unused)"))));
+}
+var Private;
+(function (Private) {
+    function sortedSourceIds(model) {
+        const sources = model === null || model === void 0 ? void 0 : model.getSources();
+        if (sources === undefined) {
+            return [];
+        }
+        return Object.keys(sources).sort((id1, id2) => {
+            const name1 = sources[id1].name.toLowerCase();
+            const name2 = sources[id2].name.toLowerCase();
+            return name1 < name2 ? -1 : name1 > name2 ? 1 : 0;
+        });
+    }
+    Private.sortedSourceIds = sortedSourceIds;
+})(Private || (Private = {}));

package/lib/panelview/header.d.ts

@@ -0,0 +1,11 @@
+import { Widget } from '@lumino/widgets';
+export declare class ControlPanelHeader extends Widget {
+    /**
+     * Instantiate a new sidebar header.
+     */
+    constructor();
+}
+/**
+ * Create a sidebar header node.
+ */
+export declare function createHeader(): HTMLElement;

package/lib/panelview/header.js

@@ -0,0 +1,20 @@
+import { Widget } from '@lumino/widgets';
+export class ControlPanelHeader extends Widget {
+    /**
+     * Instantiate a new sidebar header.
+     */
+    constructor() {
+        super({ node: createHeader() });
+        this.title.changed.connect(_ => {
+            this.node.textContent = this.title.label;
+        });
+    }
+}
+/**
+ * Create a sidebar header node.
+ */
+export function createHeader() {
+    const title = document.createElement('h2');
+    title.textContent = '-';
+    return title;
+}

package/lib/panelview/index.d.ts

@@ -0,0 +1,5 @@
+export * from './header';
+export * from './leftpanel';
+export * from './model';
+export * from './objectproperties';
+export * from './rightpanel';

package/lib/panelview/index.js

@@ -0,0 +1,5 @@
+export * from './header';
+export * from './leftpanel';
+export * from './model';
+export * from './objectproperties';
+export * from './rightpanel';

package/lib/panelview/leftpanel.d.ts

@@ -0,0 +1,51 @@
+import { IJupyterGISTracker, JupyterGISDoc, SelectionType } from '@jupytergis/schema';
+import { IStateDB } from '@jupyterlab/statedb';
+import { SidePanel } from '@jupyterlab/ui-components';
+import { Message } from '@lumino/messaging';
+import { MouseEvent as ReactMouseEvent } from 'react';
+import { IControlPanelModel } from '../types';
+/**
+ * Options of the left panel widget.
+ */
+export interface ILeftPanelOptions {
+    model: IControlPanelModel;
+    onSelect: ({ type, item, nodeId }: ILeftPanelClickHandlerParams) => void;
+}
+export interface ILayerPanelOptions extends ILeftPanelOptions {
+    state: IStateDB;
+}
+export interface ILeftPanelClickHandlerParams {
+    type: SelectionType;
+    item: string;
+    nodeId?: string;
+    event: ReactMouseEvent;
+}
+export declare class LeftPanelWidget extends SidePanel {
+    constructor(options: LeftPanelWidget.IOptions);
+    dispose(): void;
+    protected onAfterAttach(msg: Message): void;
+    protected onBeforeDetach(msg: Message): void;
+    handleEvent(event: Event): void;
+    private _mouseUpEvent;
+    /**
+     * Function to call when a layer is selected from a component of the panel.
+     *
+     * @param item - the selected layer or group.
+     */
+    private _onSelect;
+    resetSelected(type: SelectionType, nodeId?: string, item?: string): void;
+    private _lastSelectedNodeId;
+    private _model;
+    private _state;
+}
+export declare namespace LeftPanelWidget {
+    interface IOptions {
+        model: IControlPanelModel;
+        tracker: IJupyterGISTracker;
+        state: IStateDB;
+    }
+    interface IProps {
+        filePath?: string;
+        sharedModel?: JupyterGISDoc;
+    }
+}

package/lib/panelview/leftpanel.js

@@ -0,0 +1,125 @@
+import { SidePanel } from '@jupyterlab/ui-components';
+import { LayersPanel } from './components/layers';
+import { SourcesPanel } from './components/sources';
+import { ControlPanelHeader } from './header';
+export class LeftPanelWidget extends SidePanel {
+    constructor(options) {
+        super();
+        /**
+         * Function to call when a layer is selected from a component of the panel.
+         *
+         * @param item - the selected layer or group.
+         */
+        this._onSelect = ({ type, item, nodeId, event }) => {
+            var _a, _b;
+            if (!this._model || !nodeId) {
+                return;
+            }
+            const { jGISModel } = this._model;
+            const selectedValue = (_b = (_a = jGISModel === null || jGISModel === void 0 ? void 0 : jGISModel.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
+            const node = document.getElementById(nodeId);
+            if (!node) {
+                return;
+            }
+            node.tabIndex = 0;
+            node.focus();
+            // Early return if no selection exists
+            if (!selectedValue) {
+                this.resetSelected(type, nodeId, item);
+                return;
+            }
+            // Don't want to reset selected if right clicking a selected item
+            if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
+                return;
+            }
+            // Reset selection for normal left click
+            if (!event.ctrlKey) {
+                this.resetSelected(type, nodeId, item);
+                return;
+            }
+            if (nodeId) {
+                // Check if new selection is the same type as previous selections
+                const isSelectedSameType = Object.values(selectedValue).some(selection => selection.type === type);
+                if (!isSelectedSameType) {
+                    // Selecting a new type, so reset selected
+                    this.resetSelected(type, nodeId, item);
+                    return;
+                }
+                // If types are the same add the selection
+                const updatedSelectedValue = Object.assign(Object.assign({}, selectedValue), { [item]: { type, selectedNodeId: nodeId } });
+                this._lastSelectedNodeId = nodeId;
+                jGISModel.syncSelected(updatedSelectedValue, this.id);
+            }
+        };
+        this.addClass('jGIS-sidepanel-widget');
+        this._model = options.model;
+        this._state = options.state;
+        const header = new ControlPanelHeader();
+        this.header.addWidget(header);
+        const sourcesPanel = new SourcesPanel({
+            model: this._model,
+            onSelect: this._onSelect
+        });
+        sourcesPanel.title.caption = 'Sources';
+        sourcesPanel.title.label = 'Sources';
+        this.addWidget(sourcesPanel);
+        const layerTree = new LayersPanel({
+            model: this._model,
+            state: this._state,
+            onSelect: this._onSelect
+        });
+        layerTree.title.caption = 'Layer tree';
+        layerTree.title.label = 'Layers';
+        this.addWidget(layerTree);
+        options.tracker.currentChanged.connect((_, changed) => {
+            if (changed) {
+                header.title.label = changed.context.localPath;
+            }
+            else {
+                header.title.label = '-';
+            }
+        });
+    }
+    dispose() {
+        super.dispose();
+    }
+    onAfterAttach(msg) {
+        super.onAfterAttach(msg);
+        const node = this.node;
+        node.addEventListener('mouseup', this);
+    }
+    onBeforeDetach(msg) {
+        super.onBeforeDetach(msg);
+        const node = this.node;
+        node.removeEventListener('mouseup', this);
+    }
+    handleEvent(event) {
+        switch (event.type) {
+            case 'mouseup':
+                this._mouseUpEvent(event);
+                break;
+            default:
+                break;
+        }
+    }
+    _mouseUpEvent(event) {
+        // If we click on empty space in the layer panel, keep the focus on the last selected element
+        const node = document.getElementById(this._lastSelectedNodeId);
+        if (!node) {
+            return;
+        }
+        node.focus();
+    }
+    resetSelected(type, nodeId, item) {
+        var _a, _b;
+        const selection = {};
+        if (item && nodeId) {
+            selection[item] = {
+                type,
+                selectedNodeId: nodeId
+            };
+            this._lastSelectedNodeId = nodeId;
+        }
+        (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.jGISModel) === null || _b === void 0 ? void 0 : _b.syncSelected(selection, this.id);
+    }
+}

package/lib/panelview/model.d.ts

@@ -0,0 +1,19 @@
+import { IJupyterGISDoc, IJupyterGISModel, IJupyterGISTracker, IJupyterGISWidget } from '@jupytergis/schema';
+import { ISignal } from '@lumino/signaling';
+import { IControlPanelModel } from '../types';
+export declare class ControlPanelModel implements IControlPanelModel {
+    constructor(options: ControlPanelModel.IOptions);
+    get documentChanged(): ISignal<IJupyterGISTracker, IJupyterGISWidget | null>;
+    get filePath(): string | undefined;
+    get jGISModel(): IJupyterGISModel | undefined;
+    get sharedModel(): IJupyterGISDoc | undefined;
+    disconnect(f: any): void;
+    private readonly _tracker;
+    private _documentChanged;
+}
+declare namespace ControlPanelModel {
+    interface IOptions {
+        tracker: IJupyterGISTracker;
+    }
+}
+export {};