@jupytergis/base 0.12.0 → 0.12.1

package/lib/constants.d.ts

@@ -1,9 +1,10 @@
-import { IDict } from '@jupytergis/schema';
+import { ProcessingCommandIDs } from '@jupytergis/schema';
 import { LabIcon } from '@jupyterlab/ui-components';
+import * as BaseCommandIDs from './commands/BaseCommandIDs';
 /**
  * The command IDs.
  */
-export declare const CommandIDs: IDict;
+export declare const CommandIDs: typeof BaseCommandIDs & typeof ProcessingCommandIDs;
 interface IRegisteredIcon {
     icon?: LabIcon;
     iconClass?: string;

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -1,4 +1,5 @@
 import { BaseForm } from './baseform';
+import { getCssVarAsColor } from "../../tools";
 /**
  * The form to modify story map properties.
  */
@@ -6,11 +7,27 @@ export class StoryEditorPropertiesForm extends BaseForm {
     processSchema(data, schema, uiSchema) {
         super.processSchema(data, schema, uiSchema);
         this.removeFormEntry('storySegments', data, schema, uiSchema);
-        uiSchema.presentaionBgColor = {
+        uiSchema.presentationBgColor = {
             'ui:widget': 'color',
         };
         uiSchema.presentaionTextColor = {
             'ui:widget': 'color',
         };
+        // Set default values from theme CSS variables when not already in data
+        const schemaProps = schema.properties;
+        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentationBgColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentationBgColor) === undefined) {
+            const defaultBg = getCssVarAsColor('--jp-layout-color0');
+            if (defaultBg) {
+                schemaProps.presentationBgColor.default = defaultBg;
+            }
+        }
+        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentaionTextColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentaionTextColor) === undefined) {
+            const defaultText = getCssVarAsColor('--jp-ui-font-color0');
+            if (defaultText) {
+                schemaProps.presentaionTextColor.default = defaultText;
+            }
+        }
     }
 }

package/lib/mainview/mainView.js

@@ -528,7 +528,7 @@ export class MainView extends React.Component {
                 return;
             }
             const story = this._model.getSelectedStory().story;
-            const bgColor = story === null || story === void 0 ? void 0 : story.presentaionBgColor;
+            const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
             const textColor = story === null || story === void 0 ? void 0 : story.presentaionTextColor;
             // Set background color
             if (bgColor) {
@@ -705,11 +705,11 @@ export class MainView extends React.Component {
         const fullScreen = new FullScreen({
             target: this.controlsToolbarRef.current || undefined,
         });
-        this._zoomControl = new Zoom({
-            target: this.controlsToolbarRef.current || undefined,
-        });
         const controls = [scaleLine, fullScreen];
         if (this._model.jgisSettings.zoomButtonsEnabled) {
+            this._zoomControl = new Zoom({
+                target: this.controlsToolbarRef.current || undefined,
+            });
             controls.push(this._zoomControl);
         }
         if (this.divRef.current) {

package/lib/panelview/leftpanel.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CommandIDs } from '../constants';
 import { LayersBodyComponent } from './components/layers';
 import FilterComponent from './filter-panel/Filter';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
@@ -9,6 +10,19 @@ export const LeftPanel = (props) => {
     const [options, setOptions] = React.useState(props.model.getOptions());
     const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
     const [layerTree, setLayerTree] = React.useState(props.model.getLayerTree());
+    const tabInfo = [
+        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
+        !settings.stacBrowserDisabled && !storyMapPresentationMode
+            ? { name: 'stac', title: 'Stac Browser' }
+            : false,
+        !settings.filtersDisabled && !storyMapPresentationMode
+            ? { name: 'filters', title: 'Filters' }
+            : false,
+        !settings.storyMapsDisabled
+            ? { name: 'segments', title: 'Segments' }
+            : false,
+    ].filter(Boolean);
+    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     React.useEffect(() => {
         const onSettingsChanged = () => {
             setSettings(Object.assign({}, props.model.jgisSettings));
@@ -18,17 +32,25 @@ export const LeftPanel = (props) => {
         };
         const updateLayerTree = () => {
             setLayerTree(props.model.getLayerTree() || []);
+            // Need to let command know when segments get populated
+            props.commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        };
+        const onSegmentAdded = (_sender, payload) => {
+            props.model.syncSelected({ [payload.storySegmentId]: { type: 'layer' } }, props.model.getClientId().toString());
+            setCurTab('segments');
         };
         props.model.settingsChanged.connect(onSettingsChanged);
         props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.sharedModel.layersChanged.connect(updateLayerTree);
         props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
+        props.model.segmentAdded.connect(onSegmentAdded);
         updateLayerTree();
         return () => {
             props.model.settingsChanged.disconnect(onSettingsChanged);
             props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
             props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
+            props.model.segmentAdded.disconnect(onSegmentAdded);
         };
     }, [props.model]);
     // Since story segments are technically layers they are stored in the layer tree, so we separate them
@@ -93,19 +115,6 @@ export const LeftPanel = (props) => {
         settings.filtersDisabled &&
         settings.storyMapsDisabled;
     const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
-    const tabInfo = [
-        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled && !storyMapPresentationMode
-            ? { name: 'stac', title: 'Stac Browser' }
-            : false,
-        !settings.filtersDisabled && !storyMapPresentationMode
-            ? { name: 'filters', title: 'Filters' }
-            : false,
-        !settings.storyMapsDisabled
-            ? { name: 'segments', title: 'Segments' }
-            : false,
-    ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
             React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {

package/lib/panelview/rightpanel.js

@@ -49,6 +49,7 @@ export const RightPanel = props => {
         const onOptionsChanged = () => {
             const { storyMapPresentationMode } = props.model.getOptions();
             setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
+            storyMapPresentationMode && setCurTab('storyPanel');
         };
         let currentlyIdentifiedFeatures = undefined;
         const onAwerenessChanged = (_, clients) => {

package/lib/tools.d.ts

@@ -5,7 +5,8 @@ export declare const debounce: (func: CallableFunction, timeout?: number) => Cal
 export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay?: number): T;
 export declare function getElementFromProperty(filePath?: string | null, prop?: string | null): HTMLElement | undefined | null;
 export declare function nearest(n: number, tol: number): number;
-export declare function getCSSVariableColor(name: string): string;
+/** Read a CSS variable from the document root and return the value. */
+export declare function getCssVarAsColor(cssVar: string): string;
 /**
  * Call the API extension
  *

package/lib/tools.js

@@ -2,7 +2,6 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt, URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import { VectorTile } from '@mapbox/vector-tile';
-import * as d3Color from 'd3-color';
 import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
@@ -53,9 +52,18 @@ export function nearest(n, tol) {
         return n;
     }
 }
-export function getCSSVariableColor(name) {
-    const color = window.getComputedStyle(document.body).getPropertyValue(name) || '#ffffff';
-    return d3Color.rgb(color).formatHex();
+/** Read a CSS variable from the document root and return the value. */
+export function getCssVarAsColor(cssVar) {
+    if (typeof document === 'undefined') {
+        return '';
+    }
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(cssVar)
+        .trim();
+    if (!value) {
+        return '';
+    }
+    return value;
 }
 /**
  * Call the API extension

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.12.0",
+    "@jupytergis/schema": "^0.12.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -80,7 +80,6 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colormap": "^2.3.2",
-    "d3-color": "^3.1.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",

package/style/base.css

@@ -95,20 +95,28 @@ button.jp-mod-styled.jp-mod-reject {
   border-width: 0;
 }
 
-.jgis-right-panel-container {
-  width: 330px;
-  right: 0px;
+/* Height constrained to 0.5rem less than .jGIS-Mainview-Container */
+.jgis-right-panel-container,
+.jgis-left-panel-container {
   position: absolute;
-  margin: 5px;
+  margin: 0.25rem;
   z-index: 40;
+  max-height: calc(100% - 0.5rem);
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.jgis-right-panel-container {
+  width: 330px;
+  right: 0;
 }
 
 .jgis-left-panel-container {
-  position: absolute;
   width: 250px;
-  left: 0px;
-  margin: 5px;
-  z-index: 40;
+  left: 0;
 }
 
 .jgis-icon-adjust {

package/style/shared/tabs.css

@@ -4,10 +4,6 @@
   justify-content: center;
   align-items: center;
   background-color: var(--jp-layout-color0);
-  box-shadow:
-    0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  border-radius: 5px;
 }
 .jgis-tabs-list {
   display: inline-flex;
@@ -19,8 +15,6 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   overflow-x: scroll;
 }
 

package/style/storyPanel.css

@@ -134,6 +134,8 @@
   height: 100%;
   margin: unset;
   top: unset;
+  box-shadow: unset;
+  max-height: unset;
 }
 
 .jgis-specta-story-panel-container {
@@ -145,16 +147,16 @@
   overflow: auto;
   background: linear-gradient(
     to left,
-    var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 49%,
+    var(--jgis-specta-bg-color, --jp-layout-color0) 49%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 60%,
+        var(--jgis-specta-bg-color, --jp-layout-color0) 60%,
         transparent
       )
       65%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 50%,
+        var(--jgis-specta-bg-color, --jp-layout-color0) 50%,
         transparent
       )
       70%,
@@ -163,7 +165,7 @@
 }
 
 .jgis-story-viewer-panel-specta-mod {
-  width: 50%;
+  width: 45%;
   font-size: var(--jp-ui-font-size3);
   padding-right: 1.7rem;
   color: var(--jgis-specta-text-color, var(--jp-ui-inverse-font-color1));
@@ -175,7 +177,7 @@
   .jp-FormGroup-content
   fieldset
   .jp-inputFieldWrapper
-  > input#root_presentaionBgColor,
+  > input#root_presentationBgColor,
 .jGIS-property-panel
   .jp-FormGroup-content
   fieldset