Merge remote-tracking branch 'origin/develop'

CHANGELOG.md

@@ -16,6 +16,31 @@ Document some advanced types so users may try them out and provide feedback. The
 
 - Read more in the extension documentation
 
+IDL 9.1 introduces new, command-line based progress bars. We have a first-pass of support for these progress bars inside IDL Notebooks.
+
+## 4.6.1 - September 2024
+
+Added layer controls to the Notebook Map.
+
+- Generic title for each layer (raster/vector)
+- Slider to make transparent or not
+
+Layers have a handle which allows you to use drag and drop to re-order them. As you re-order, the map updates with changes.
+
+Notebook maps now listen to theme changes from VSCode and, when swapping between light and dark themes, the basemap will update to match the theme of VSCode (light map for light theme; dark map for dark theme)
+
+Fixed an issue where we weren't properly detecting keywords for `obj_destroy` when a custom object class had a `::cleanup` method present
+
+Fixed a bug with auto-complete where, instead of variables, arguments, or functions, you would end up with procedures being suggested inside of a procedure call.
+
+Similar to `call_function()` and `obj_new()`, add special auto-complete for `call_procedure` to give you the list of procedure names with string literals
+
+Fixed a bug where we were incorrectly detecting standalone expressions and reporting as problems.
+
+Fixed a parsing issue where we would not correctly determine the end of ternary operators which could report errors incorrectly in your code.
+
+Re-worked auto-complete to function the same way as hover help. Now, we determine types of features to send from one of our worker threads and then the main thread builds out the completion items. The advantage of this is that we can now send back documentation and other information (which doesn't exist in our worker threads).
+
 ## 4.6.0 - August 2024
 
 Fixed an issue where we open a file that we have stopped in, even if it is compiled as a SAVE file. Now, only PRO files will be jumped to.

apps/idl-webview/src/app/services/services/vscode.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import {
   DEFAULT_VSCODE_MESSAGE,
   IProfilerMessage,
@@ -11,7 +11,7 @@ import { DEFAULT_VSCODE_STATE, IVSCodeState } from '../core/vscode.interface';
 @Injectable({
   providedIn: 'root',
 })
-export class VSCodeService {
+export class VSCodeService implements OnDestroy {
   // things that we emit that others can listen to
   messages = new BehaviorSubject<IVSCodeMessage>(DEFAULT_VSCODE_MESSAGE);
   newTheme = new BehaviorSubject<boolean>(false);
@@ -51,6 +51,9 @@ export class VSCodeService {
     this.handleMessage(state.lastMessage);
   }
 
+  /**
+   * Handle message from VSCode
+   */
   handleMessage(message: IVSCodeMessage) {
     // determine what to do with the events
     switch (message.command) {
@@ -73,6 +76,9 @@ export class VSCodeService {
     this.messages.next(message);
   }
 
+  /**
+   * Get state of web app
+   */
   getState(): IVSCodeState {
     let state = this.vscodeApi.getState();
     if (this.firstState) {
@@ -85,7 +91,19 @@ export class VSCodeService {
     return state;
   }
 
+  /**
+   * Set state of web app
+   */
   setState(state: IVSCodeState) {
     this.vscodeApi.setState(state);
   }
+
+  /**
+   * Clean up
+   */
+  ngOnDestroy() {
+    this.messages.complete();
+    this.newTheme.complete();
+    this.profiler.complete();
+  }
 }

apps/notebook/components/src/app/app.module.ts

@@ -1,3 +1,5 @@
+import '@material/web/all';
+
 import {
   provideHttpClient,
   withInterceptorsFromDi,
@@ -7,10 +9,6 @@ import { createCustomElement } from '@angular/elements';
 import { MatIconRegistry } from '@angular/material/icon';
 import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  MaterialCssVarsModule,
-  MaterialCssVarsService,
-} from 'angular-material-css-vars';
 
 import { AppComponent } from './app.component';
 import { ComponentsModule } from './components/components.module';
@@ -22,13 +20,7 @@ import {
   IDL_NB_MAP_PROPERTY_SHEET_SELECTOR,
   MapPropertySheetComponent,
 } from './components/map/map-property-sheet/map-property-sheet.component';
-import { FAST_FORWARD } from './icons/fast-forward';
-import { FAST_REWIND } from './icons/fast-rewind';
-import { LAYERS } from './icons/layers';
-import { MY_LOCATION_FILLED } from './icons/my-location-fill';
-import { PAUSE } from './icons/pause';
-import { PLAY } from './icons/play';
-import { SAVE } from './icons/save';
+import { RegisterIcons } from './icons/register-icons';
 import { MaterialModule } from './material.module';
 import { VSCodeRendererMessenger } from './services/vscode-renderer-messenger.service';
 
@@ -39,12 +31,10 @@ import { VSCodeRendererMessenger } from './services/vscode-renderer-messenger.se
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    MaterialCssVarsModule.forRoot({}),
     MaterialModule,
     ComponentsModule,
   ],
   providers: [
-    MaterialCssVarsService,
     VSCodeRendererMessenger,
     provideHttpClient(withInterceptorsFromDi()),
   ],
@@ -54,63 +44,9 @@ export class AppModule implements DoBootstrap {
     private injector: Injector,
     private appRef: ApplicationRef,
     private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer,
-    private materialCssVarsService: MaterialCssVarsService
+    private domSanitizer: DomSanitizer
   ) {
-    this.registerIcons();
-    // this.updateTheme();
-  }
-
-  /**
-   * Updates the theme based on current CSS variables
-   */
-  updateTheme() {
-    // get the body element
-    const body = document.body;
-
-    // get css class list
-    const classes = body.classList;
-
-    // flag if dark mode
-    const isDark = !classes.contains('vscode-light');
-
-    // get our colors
-    const accent = getComputedStyle(body).getPropertyValue(
-      '--vscode-activityBarBadge-background'
-    );
-
-    // set colors/themes/properties
-    this.materialCssVarsService.setDarkTheme(isDark);
-    // this.materialCssVarsService.setPrimaryColor(hex);
-    this.materialCssVarsService.setAccentColor(accent);
-  }
-
-  /**
-   * Adds custom icons for use in material
-   *
-   * This has been updated to directly include the SVG content
-   * instead of needing to load the SVGs via HTTP
-   */
-  registerIcons() {
-    // icons we load
-    const icons: { [key: string]: any } = {
-      'fast-forward': FAST_FORWARD,
-      'fast-rewind': FAST_REWIND,
-      layers: LAYERS,
-      my_location_fill: MY_LOCATION_FILLED,
-      pause: PAUSE,
-      play: PLAY,
-      save: SAVE,
-    };
-
-    // process all of our icons
-    const keys = Object.keys(icons);
-    for (let i = 0; i < keys.length; i++) {
-      this.matIconRegistry.addSvgIconLiteral(
-        keys[i],
-        this.domSanitizer.bypassSecurityTrustHtml(icons[keys[i]])
-      );
-    }
+    RegisterIcons(this.matIconRegistry, this.domSanitizer);
   }
 
   /**

apps/notebook/components/src/app/components/animation-controls/animation-controls.component.ts

@@ -12,7 +12,7 @@ export function RoundToNearest(num: number, to: number) {
   templateUrl: './animation-controls.component.html',
   styles: [
     `
-      @import 'shared-styles.scss';
+      @import 'styles.scss';
     `,
   ],
 })

apps/notebook/components/src/app/components/base-renderer.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, SkipSelf } from '@angular/core';
+import { Component, Input, OnDestroy, SkipSelf } from '@angular/core';
 import {
   IDLNotebook_EmbedType,
   IDLNotebookEmbeddedItem,
 } from '@idl/types/notebooks';
+import { Subscription } from 'rxjs';
 
 import { VSCodeRendererMessenger } from '../services/vscode-renderer-messenger.service';
 import { DataSharingService } from './data-sharing.service';
@@ -12,7 +13,9 @@ import { DataSharingService } from './data-sharing.service';
   template: ` <p>base works!</p> `,
   styles: [],
 })
-export class BaseRendererComponent<T extends IDLNotebook_EmbedType> {
+export class BaseRendererComponent<T extends IDLNotebook_EmbedType>
+  implements OnDestroy
+{
   /**
    * Track if we set data or not
    */
@@ -38,6 +41,11 @@ export class BaseRendererComponent<T extends IDLNotebook_EmbedType> {
    */
   messenger: VSCodeRendererMessenger;
 
+  /**
+   * Subscriptions that we need to clean up
+   */
+  _subscriptions = new Subscription();
+
   /**
    * Item we are embedding
    *
@@ -58,4 +66,8 @@ export class BaseRendererComponent<T extends IDLNotebook_EmbedType> {
     this.messenger = messenger;
     this.canMessage = messenger.canPostMessage();
   }
+
+  ngOnDestroy() {
+    this._subscriptions.unsubscribe();
+  }
 }

apps/notebook/components/src/app/components/components.module.ts

@@ -4,14 +4,14 @@ import {
   withInterceptorsFromDi,
 } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MaterialCssVarsModule } from 'angular-material-css-vars';
 
 import { MaterialModule } from '../material.module';
 import { AnimationControlsComponent } from './animation-controls/animation-controls.component';
 import { EntryComponent } from './entry/entry.component';
 import { ImageComponent } from './image/image.component';
 import { ImageAnimatorComponent } from './image-animator/image-animator.component';
 import { MapComponent } from './map/map.component';
+import { MapLayerCardComponent } from './map/map-layer-card/map-layer-card.component';
 import { MapPropertySheetComponent } from './map/map-property-sheet/map-property-sheet.component';
 import { PlotComponent } from './plot/plot.component';
 
@@ -24,6 +24,7 @@ import { PlotComponent } from './plot/plot.component';
     MapComponent,
     MapPropertySheetComponent,
     AnimationControlsComponent,
+    MapLayerCardComponent,
   ],
   exports: [
     EntryComponent,
@@ -33,9 +34,10 @@ import { PlotComponent } from './plot/plot.component';
     MapComponent,
     MapPropertySheetComponent,
     AnimationControlsComponent,
+    MapLayerCardComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [CommonModule, MaterialCssVarsModule, MaterialModule],
+  imports: [CommonModule, MaterialModule],
   providers: [provideHttpClient(withInterceptorsFromDi())],
 })
 export class ComponentsModule {}

apps/notebook/components/src/app/components/entry/entry.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="class" style="width: 100%">
+<div [ngClass]="class" style="width: 100%" class="mat-theme">
   <div *ngIf="hasData; then thenBlock; else elseBlock"></div>
 
   <ng-template #thenBlock [ngSwitch]="embed.type">

apps/notebook/components/src/app/components/entry/entry.component.ts

@@ -17,8 +17,14 @@ import { DataSharingService } from '../data-sharing.service';
  */
 export const IDL_NB_ENTRY_COMPONENT_SELECTOR = 'idl-nb-entry';
 
+/**
+ * Class for rendered when not focused
+ */
 const DEFAULT_CLASS = 'vscode-outlined';
 
+/**
+ * Class for the renderer when focused
+ */
 const OUTLINED_CLASS = 'vscode-outlined-focus';
 
 /**
@@ -37,7 +43,6 @@ const OUTLINED_CLASS = 'vscode-outlined-focus';
   templateUrl: './entry.component.html',
   styles: [
     `
-      @import 'shared-styles.scss';
       @import 'styles.scss';
     `,
   ],

apps/notebook/components/src/app/components/image-animator/image-animator.component.ts

@@ -20,7 +20,7 @@ export function RoundToNearest(num: number, to: number) {
   templateUrl: './image-animator.component.html',
   styles: [
     `
-      @import 'shared-styles.scss';
+      @import 'styles.scss';
     `,
   ],
 })

apps/notebook/components/src/app/components/image/image.component.ts

@@ -19,7 +19,7 @@ export const IDL_NB_IMAGE_COMPONENT_SELECTOR = 'idl-nb-image';
   templateUrl: './image.component.html',
   styles: [
     `
-      @import 'shared-styles.scss';
+      @import 'styles.scss';
     `,
   ],
 })

apps/notebook/components/src/app/components/map/helpers/awesome-image.class.ts

@@ -20,6 +20,10 @@ interface IAwesomeImageProps {
   colorTransformOptions?: ImageDisplayOptions;
 }
 
+export type AwesomeImageProps = Partial<
+  IAwesomeImageProps & Required<BitmapLayerProps> & Required<LayerProps>
+>;
+
 /**
  * Extension of the BitmapLayer that allows you to set display of data
  * using web.gl shaders to adjust data display at a layer-level
@@ -30,11 +34,7 @@ export class AwesomeImage extends BitmapLayer<IAwesomeImageProps> {
    */
   private colorTransform = new ColorTransform();
 
-  constructor(
-    ...propObjects: Partial<
-      IAwesomeImageProps & Required<BitmapLayerProps> & Required<LayerProps>
-    >[]
-  ) {
+  constructor(...propObjects: AwesomeImageProps[]) {
     super(...propObjects);
 
     // check if we have a color transform