@jupytergis/jupytergis-lab 0.1.7 → 0.2.1

package/lib/index.js

@@ -1,5 +1,5 @@
 import { CommandIDs, ControlPanelModel, GlobalStateDbManager, LeftPanelWidget, RightPanelWidget, addCommands, createDefaultLayerRegistry, logoMiniIcon } from '@jupytergis/base';
-import { IJGISFormSchemaRegistryToken, IJGISLayerBrowserRegistryToken, IJupyterGISDocTracker } from '@jupytergis/schema';
+import { IAnnotationToken, IJGISFormSchemaRegistryToken, IJGISLayerBrowserRegistryToken, IJupyterGISDocTracker } from '@jupytergis/schema';
 import { ILayoutRestorer } from '@jupyterlab/application';
 import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { IMainMenu } from '@jupyterlab/mainmenu';
@@ -209,9 +209,10 @@ const controlPanel = {
         ILayoutRestorer,
         IJupyterGISDocTracker,
         IJGISFormSchemaRegistryToken,
-        IStateDB
+        IStateDB,
+        IAnnotationToken
     ],
-    activate: (app, restorer, tracker, formSchemaRegistry, state) => {
+    activate: (app, restorer, tracker, formSchemaRegistry, state, annotationModel) => {
         const controlModel = new ControlPanelModel({ tracker });
         const leftControlPanel = new LeftPanelWidget({
             model: controlModel,
@@ -224,7 +225,8 @@ const controlPanel = {
         const rightControlPanel = new RightPanelWidget({
             model: controlModel,
             tracker,
-            formSchemaRegistry
+            formSchemaRegistry,
+            annotationModel
         });
         rightControlPanel.id = 'jupytergis::rightControlPanel';
         rightControlPanel.title.caption = 'JupyterGIS Control Panel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/jupytergis-lab",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "JupyterGIS Lab extension.",
   "keywords": [
     "jupyter",
@@ -53,9 +53,9 @@
   },
   "dependencies": {
     "@jupyter/collaborative-drive": "^3.0.0",
-    "@jupytergis/base": "^0.1.7",
-    "@jupytergis/jupytergis-core": "^0.1.7",
-    "@jupytergis/schema": "^0.1.7",
+    "@jupytergis/base": "^0.2.1",
+    "@jupytergis/jupytergis-core": "^0.2.1",
+    "@jupytergis/schema": "^0.2.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/coreutils": "^6.3.0",

package/style/base.css

@@ -1,4 +1,3 @@
-@import url('~@deathbeds/jupyterlab-rjsf/style/index.css');
 @import url('~@jupytergis/base/style/index.css');
 
 .jGIS-Spinner {
@@ -170,8 +169,8 @@ div.field.field-array > label + span {
 }
 
 /* TODO Upstream this to jupyterlab jrfs */
-.jp-SchemaForm .control-label,
-.jp-SchemaForm legend {
+.jGIS-property-panel .rjsf .control-label,
+.jGIS-property-panel .rjsf legend {
   position: inherit;
   text-transform: capitalize;
 }
@@ -219,7 +218,7 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   box-sizing: border-box;
 }
 
-.jGIS-Annotation-Wrapper {
+.jGIS-Popup-Wrapper {
   position: absolute;
   opacity: 1;
   transition: opacity 0.1s linear 0.15s;
@@ -242,12 +241,20 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   position: absolute;
   width: 250px;
   box-shadow: var(--jp-elevation-z6);
+  z-index: 40;
+  max-height: 400px;
+  overflow: auto;
 }
 
 .jGIS-Annotations {
   overflow: auto;
 }
 
+.jGIS-Annotation-Card {
+  max-height: 400px;
+  overflow: auto;
+}
+
 .jGIS-Annotations-Separator {
   border-color: var(--jp-layout-color4);
   border-style: solid;
@@ -266,7 +273,7 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   cursor: pointer;
   transition-property: width, height, left, top;
   transition-duration: 0.2s;
-  z-index: 1000;
+  z-index: 20;
 }
 
 .jGIS-Annotation-Handler:hover {
@@ -300,6 +307,9 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   color: var(--jp-ui-font-color2);
   flex-grow: 1;
   resize: none;
+  border: none;
+  padding: 0.5em;
+  outline: thin solid var(--jp-border-color0);
 }
 
 .jGIS-Annotation-Message-Content {
@@ -309,21 +319,14 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   flex-grow: 1;
 }
 
-.jGIS-Annotation-Topbar {
+.jGIS-Popup-Topbar {
   display: flex;
   flex-direction: row-reverse;
 }
 
-.jGIS-Annotation-TopBarIcon {
-  margin: 3px;
-  width: 20px;
-  height: 20px;
+.jGIS-Popup-TopBarIcon {
   cursor: pointer;
-}
-
-.jGIS-Annotation-TopBarIcon > svg {
-  width: 20px;
-  height: 20px;
+  transform: rotate(180deg);
 }
 
 .jGIS-Annotation-Submit > svg {
@@ -347,6 +350,58 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   height: 30px;
 }
 
+.jGIS-Annotation-Buttons {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 1em;
+}
+
+.jGIS-Annotation-Buttons > button {
+  border-radius: var(--jp-border-radius);
+  flex-grow: 1;
+  max-width: 68px;
+}
+
+.jGIS-Remote-Pointer {
+  position: absolute;
+  transition-property: left, top, width, height;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+  z-index: 20;
+}
+
+.jGIS-Remote-Pointer-Icon:hover {
+  scale: 1.3;
+}
+
+.jGIS-Floating-Pointer-Popup {
+  position: absolute;
+  width: 160px;
+  box-shadow: var(--jp-elevation-z6);
+  z-index: 40;
+  max-height: 400px;
+  overflow: auto;
+}
+
+.jGIS-Remote-Pointer-Popup {
+  margin-left: 7px;
+  margin-top: 14px;
+  color: #fff;
+  padding: 1em;
+  border-radius: 0.5em;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.jGIS-Remote-Pointer-Popup-Name {
+  font-size: 16px;
+  color: #333;
+}
+
+.jGIS-Remote-Pointer-Popup-Coordinates {
+  font-size: 14px;
+}
+
 /* Hack to remove the malformed form button */
 .object-property-expand {
   display: none;
@@ -364,8 +419,8 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   width: 100%;
 }
 
-.jp-SchemaForm .control-label,
-.jp-SchemaForm legend {
+.jGIS-property-panel .rjsf .control-label,
+.jGIS-property-panel .rjsf legend {
   width: 100%;
 }
 
@@ -376,3 +431,303 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
 .jpgis-console .jp-CodeConsole-banner {
   display: none;
 }
+
+/* FormComponent CSS */
+.jGIS-property-panel .rjsf {
+  color: var(--jp-ui-font-color1);
+}
+
+.jGIS-property-panel .rjsf > form {
+  padding: var(--jp-ui-font-size1);
+}
+
+.jGIS-property-panel .rjsf fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.jGIS-property-panel .rjsf button[type='submit'] {
+  display: none;
+}
+
+.jGIS-property-panel .rjsf .control-label,
+.jGIS-property-panel .rjsf legend {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  position: relative;
+  width: 100%;
+}
+
+.jGIS-property-panel .rjsf legend > :first-child,
+.jGIS-property-panel .rjsf .control-label > :first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.jGIS-property-panel .rjsf .form-group .form-group {
+  margin-bottom: var(--jp-ui-font-size1);
+}
+
+.jGIS-property-panel .rjsf .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.jGIS-property-panel .rjsf .jp-FormGroup-description,
+.jGIS-property-panel .rjsf .field-description,
+.jGIS-property-panel .rjsf .help-block {
+  color: var(--jp-ui-font-color2);
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  > input {
+  box-sizing: border-box;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  font-size: var(--jp-ui-font-size2);
+  min-width: 0;
+  outline: none !important;
+  padding: 2px 7px;
+  width: 100%;
+  max-width: 100%;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  > input#root_Color,
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  > input#root_shadowColor {
+  height: revert;
+}
+
+.jGIS-property-panel .jp-FormGroup-contentNormal {
+  display: flex;
+  flex-direction: column;
+  align-items: inherit;
+}
+
+.jGIS-property-panel .jp-FormGroup-contentNormal .jp-FormGroup-fieldLabel {
+  font-weight: bold;
+  order: 1;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  .jp-FormGroup-contentNormal
+  .jp-FormGroup-description,
+.jGIS-property-panel .field-description {
+  order: 2;
+  color: var(--jp-ui-font-color2);
+}
+
+.jGIS-property-panel .jp-FormGroup-content .jp-inputFieldWrapper {
+  order: 3;
+}
+
+.jGIS-property-panel .jp-FormGroup-contentNormal .validationErrors,
+.jGIS-property-panel .jp-FormGroup-contentNormal .validationErrors ul {
+  order: 4;
+  list-style: none;
+  color: var(--jp-warn-color0);
+  margin: 0;
+  padding: 0;
+}
+
+.jGIS-property-panel .jp-objectFieldWrapper,
+.jGIS-property-panel .jp-arrayFieldWrapper {
+  padding-left: var(--jp-notebook-padding);
+  border-left: solid 4px var(--jp-border-color3);
+}
+
+.jGIS-property-panel .array-item {
+  border: none;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  .jp-FormGroup-contentNormal
+  .jp-arrayFieldWrapper
+  + .jp-FormGroup-description {
+  display: none;
+}
+
+.jGIS-property-panel .rjsf .errors {
+  color: var(--jp-warn-color0);
+}
+
+.jGIS-property-panel .rjsf .errors ul,
+.jGIS-property-panel .rjsf .validationErrors ul,
+.jGIS-property-panel .rjsf .validationErrors li,
+.jGIS-property-panel .rjsf .errors li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jGIS-property-panel .rjsf .jp-ArrayOperationsButton {
+  display: none;
+}
+
+/* Hide additional property fields with remove buttons that should not be displayed in the form */
+.jGIS-property-panel
+  .form-group:has(.jp-FormGroup-removeButton):not(:has(.jp-root)) {
+  display: none;
+}
+
+.jGIS-property-panel .jp-arrayFieldWrapper .array-item legend,
+.jGIS-property-panel
+  .jp-arrayFieldWrapper
+  .field-array-of-array
+  .field-array-of-number
+  legend,
+.jGIS-property-panel
+  .jp-arrayFieldWrapper
+  .field-array-of-array
+  .field-array-of-number
+  .jp-FormGroup-fieldLabel {
+  display: none;
+}
+.jGIS-property-panel
+  .jp-arrayFieldWrapper
+  .field-array-of-array
+  .array-item
+  .form-group
+  .field-array-of-number {
+  display: flex;
+}
+
+.jGIS-property-panel
+  .jp-arrayFieldWrapper
+  .field-array-of-array
+  .array-item
+  .form-group
+  .field-array-of-number
+  > div:nth-child(1) {
+  order: 2;
+}
+
+.jGIS-property-panel
+  .jp-arrayFieldWrapper
+  .field-array-of-array
+  .array-item
+  .form-group
+  .field-array-of-number
+  > div:nth-child(2) {
+  order: 1;
+}
+
+.jGIS-property-panel .required {
+  font-size: var(--jp-ui-font-size3);
+  color: var(--jp-warn-color1);
+  font-weight: 800;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: block;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  select {
+  width: 100%;
+  font-size: var(--jp-ui-font-size1);
+  background: var(--jp-input-background);
+  color: var(--jp-ui-font-color0);
+  padding: calc(var(--jp-ui-font-size1) / 2);
+  padding-right: var(--jp-ui-font-size3);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' viewBox='0 0 20 20'%3e %3cg class='jp-icon3' fill='%23616161' shape-rendering='geometricPrecision'%3e %3cpolygon class='st1' points='9.9%2c13.6 3.6%2c7.4 4.4%2c6.6 9.9%2c12.2 15.4%2c6.7 16.1%2c7.4 '/%3e %3c/g%3e %3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: 99% center;
+  background-size: 18px;
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  border-radius: 0;
+  outline: none;
+  appearance: none;
+}
+
+.jGIS-property-panel .jp-select-wrapper select {
+  background-image: unset !important;
+}
+
+.lm-TabBar-tabIcon .jgis-main-logo[fill] {
+  fill: var(--jp-inverse-layout-color3);
+}
+
+.jGIS-identify-tool {
+  cursor: crosshair;
+}
+
+.jgis-identify-grid-item {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto auto;
+  position: relative;
+  gap: 1px;
+}
+
+.jgis-identify-grid-item-header {
+  display: flex;
+  grid-column: span 2;
+  font-weight: bold;
+  font-size: var(--jp-ui-font-size1);
+  padding: 2px 0;
+  cursor: pointer;
+  margin: 0 5px;
+  line-height: 25px;
+}
+
+.jgis-identify-grid-item:not(:last-of-type)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  border-bottom: 1px solid var(--jp-border-color0);
+}
+
+.jgis-identify-grid-body {
+  display: contents;
+}
+
+.jgis-identify-grid-body span a:link {
+  color: var(--jp-content-link-color);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.jgis-identify-grid-body span a:visited {
+  color: var(--jp-content-link-visited-color);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.jgis-identify-grid-body strong {
+  grid-column: 1;
+  text-transform: capitalize;
+  margin-left: 21px;
+}
+
+.jgis-identify-grid-body span {
+  grid-column: 2;
+}
+
+.jgis-identify-grid-body:last-of-type strong:last-of-type {
+  padding-bottom: 8px;
+}