terrier-engine 4.0.18 → 4.0.20

package/app.ts

@@ -18,13 +18,9 @@ Logger.level = 'info'
  */
 export abstract class TerrierApp<
     TThemeType extends ThemeType,
+    TSelf extends TerrierApp<TThemeType, TSelf, TTheme>,
     TTheme extends Theme<TThemeType>
-> extends TerrierPart<
-    {theme: TTheme},
-    TThemeType,
-    TerrierApp<TThemeType, TTheme>,
-    TTheme
-> {
+> extends TerrierPart<{theme: TTheme}, TThemeType, TSelf, TTheme> {
 
     _theme!: TTheme
 
@@ -48,7 +44,7 @@ export abstract class TerrierApp<
     update(root: HTMLElement) {
         log.info(`Update`, root)
         Tooltips.init(root)
-        Lightbox.init(root, this, 'body-content')
+        Lightbox.init<TThemeType, TSelf, TTheme>(root, this as unknown as TSelf, 'body-content')
     }
 
 
@@ -57,7 +53,8 @@ export abstract class TerrierApp<
     makeOverlay<OverlayType extends Part<StateType>, StateType>(
         constructor: { new(p: PartParent, id: string, state: StateType): OverlayType; },
         state: StateType,
-        layer: OverlayLayer): OverlayType {
+        layer: OverlayLayer
+    ): OverlayType {
         return this.overlayPart.makeLayer(constructor, state, layer)
     }
 
@@ -76,9 +73,9 @@ export abstract class TerrierApp<
 
     /// Modals
 
-    showModal<ModalType extends ModalPart<StateType, TThemeType>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
+    showModal<ModalType extends ModalPart<StateType, TThemeType, TSelf, TTheme>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
         const modalStack =
-            (this.overlayPart.parts.modal as ModalStackPart<TThemeType>)
+            (this.overlayPart.parts.modal as ModalStackPart<TThemeType, TSelf, TTheme, ModalType>)
                 ?? this.makeOverlay(ModalStackPart, {}, 'modal')
         const modal = modalStack.pushModal(constructor, state)
         modalStack.dirty()

package/dropdowns.ts

@@ -16,7 +16,12 @@ const clearDropdownKey = untypedKey()
  * Abstract base class for dropdown parts.
  * Subclasses must implement the `renderContent()` method to render the dropdown content.
  */
-export abstract class Dropdown<T, TT extends ThemeType> extends TerrierPart<T, TT, TerrierApp<TT, Theme<TT>>, Theme<TT>> {
+export abstract class Dropdown<
+    TState,
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends TerrierPart<TState, TThemeType, TApp, TTheme> {
 
     parentPart?: StatelessPart
 
@@ -79,7 +84,11 @@ export abstract class Dropdown<T, TT extends ThemeType> extends TerrierPart<T, T
 /**
  * A concrete dropdown part that shows a list of actions.
  */
-export class ActionsDropdown<TT extends ThemeType> extends Dropdown<Array<Action<TT>>, TT> {
+export class ActionsDropdown<
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends Dropdown<Array<Action<TThemeType>>, TThemeType, TApp, TTheme> {
 
 
     get parentClasses(): Array<string> {

package/lightbox.ts

@@ -16,7 +16,11 @@ const log = new Logger('Lightbox')
  * @param app
  * @param containerClass
  */
-function init<TT extends ThemeType>(root: HTMLElement, app: TerrierApp<TT, Theme<TT>>, containerClass: string) {
+function init<
+    TT extends ThemeType,
+    TApp extends TerrierApp<TT, TApp, TTheme>,
+    TTheme extends Theme<TT>
+>(root: HTMLElement, app: TApp, containerClass: string) {
     log.info("Init", root)
     root.addEventListener("click", evt => {
         if (!(evt.target instanceof HTMLElement) || evt.target.tagName != 'IMG') {
@@ -49,13 +53,21 @@ function init<TT extends ThemeType>(root: HTMLElement, app: TerrierApp<TT, Theme
 
 type LightboxState = { src: string }
 
-function showPart<TT extends ThemeType>(app: TerrierApp<TT, Theme<TT>>, state: LightboxState) {
+function showPart<
+    TT extends ThemeType,
+    TApp extends TerrierApp<TT,TApp, TTheme>,
+    TTheme extends Theme<TT>
+>(app: TApp, state: LightboxState) {
     app.makeOverlay(LightboxPart, {app,...state}, 'lightbox')
 }
 
 const closeKey = untypedKey()
 
-class LightboxPart<TT extends ThemeType> extends Part<LightboxState & {app: TerrierApp<TT, Theme<TT>>}> {
+class LightboxPart<
+    TT extends ThemeType,
+    TApp extends TerrierApp<TT, TApp, TTheme>,
+    TTheme extends Theme<TT>
+> extends Part<LightboxState & {app: TApp}> {
 
     async init() {
         this.onClick(closeKey, _ => {

package/modals.ts

@@ -1,7 +1,7 @@
 import { Logger } from "tuff-core/logging"
 import { untypedKey } from "tuff-core/messages"
 import {ContentPart, TerrierPart} from "./parts"
-import {PartParent, PartTag} from "tuff-core/parts"
+import {PartConstructor, PartTag} from "tuff-core/parts"
 import Theme, {ThemeType} from "./theme";
 import {TerrierApp} from "./app";
 
@@ -17,7 +17,12 @@ const log = new Logger('Modals')
  * Since it extends ContentPart, all of the same title/action methods
  * available for pages can be used in modals as well.
  */
-export abstract class ModalPart<T, TT extends ThemeType> extends ContentPart<T, TT> {
+export abstract class ModalPart<
+    TState,
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends ContentPart<TState, TThemeType, TApp, TTheme> {
 
 
     get parentClasses(): Array<string> {
@@ -68,7 +73,12 @@ export abstract class ModalPart<T, TT extends ThemeType> extends ContentPart<T,
  */
 export const modalPopKey = untypedKey()
 
-export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT, TerrierApp<TT, Theme<TT>>, Theme<TT>> {
+export class ModalStackPart<
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>,
+    TModal extends ModalPart<any, TThemeType, TApp, TTheme>
+> extends TerrierPart<{}, TThemeType, TApp, TTheme> {
 
     displayClass: 'show' | 'hide' = 'show'
 
@@ -77,7 +87,7 @@ export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT, Te
         this.listenMessage(modalPopKey, _ => this.pop())
     }
 
-    modals: ModalPart<unknown, TT>[] = []
+    modals: TModal[] = []
 
     /**
      * Pops the last modal off the stack and removes itself if it's empty.
@@ -114,7 +124,7 @@ export class ModalStackPart<TT extends ThemeType> extends TerrierPart<{}, TT, Te
      * @param constructor the modal class
      * @param state the modal's state
      */
-    pushModal<ModalType extends ModalPart<StateType, TT>, StateType>(constructor: { new(p: PartParent, id: string, state: StateType): ModalType; }, state: StateType): ModalType {
+    pushModal<StateType>(constructor: PartConstructor<TModal, StateType>, state: StateType): TModal {
         log.info(`Making modal`, constructor.name)
         const modal = this.makePart(constructor, state)
         this.modals.push(modal)

package/overlays.ts

@@ -30,7 +30,8 @@ export class OverlayPart extends Part<NoState> {
     makeLayer<PartType extends Part<StateType>, StateType>(
         constructor: { new(p: PartParent, id: string, state: StateType): PartType; },
         state: StateType,
-        layer: OverlayLayer): PartType {
+        layer: OverlayLayer
+    ): PartType {
         const part = this.makePart(constructor, state)
         this.clearLayer(layer)
         this.parts[layer] = part

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.0.18",
+  "version": "4.0.20",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"

package/parts.ts

@@ -29,7 +29,7 @@ export type ActionLevel = keyof PanelActions<any>
 export abstract class TerrierPart<
     TState,
     TThemeType extends ThemeType,
-    TApp extends TerrierApp<TThemeType, TTheme>,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
     TTheme extends Theme<TThemeType>
 > extends Part<TState> {
 
@@ -120,12 +120,12 @@ export abstract class TerrierPart<
 /**
  * Base class for all Parts that render some main content, like pages, panels, and modals.
  */
-export abstract class ContentPart<TState, TThemeType extends ThemeType> extends TerrierPart<
+export abstract class ContentPart<
     TState,
-    TThemeType,
-    TerrierApp<TThemeType, Theme<TThemeType>>,
-    Theme<TThemeType>
-> {
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends TerrierPart<TState, TThemeType, TApp, TTheme> {
 
     /**
      * All ContentParts must implement this to render their actual content.
@@ -253,14 +253,14 @@ export abstract class ContentPart<TState, TThemeType extends ThemeType> extends
      * @param state the dropdown's state
      * @param target the target element around which to show the dropdown
      */
-    makeDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType>, DropdownStateType>(
+    makeDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType, TApp, TTheme>, DropdownStateType>(
         constructor: {new(p: PartParent, id: string, state: DropdownStateType): DropdownType;},
         state: DropdownStateType,
         target: EventTarget | null) {
         if (!(target && target instanceof HTMLElement)) {
             throw "Trying to show a dropdown without an element target!"
         }
-        const dropdown = this.app.makeOverlay(constructor, state, 'dropdown') as Dropdown<DropdownStateType, TThemeType>
+        const dropdown = this.app.makeOverlay(constructor, state, 'dropdown')
         dropdown.parentPart = this
         dropdown.anchor(target)
         this.app.lastDropdownTarget = target
@@ -276,7 +276,7 @@ export abstract class ContentPart<TState, TThemeType extends ThemeType> extends
      * @param state the dropdown's state
      * @param target the target element around which to show the dropdown
      */
-    toggleDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType>, DropdownStateType>(
+    toggleDropdown<DropdownType extends Dropdown<DropdownStateType, TThemeType, TApp, TTheme>, DropdownStateType>(
         constructor: { new(p: PartParent, id: string, state: DropdownStateType): DropdownType; },
         state: DropdownStateType,
         target: EventTarget | null) {
@@ -303,13 +303,18 @@ export type ContentWidth = "normal" | "wide"
 /**
  * A part that renders content to a full page.
  */
-export abstract class PagePart<T, TT extends ThemeType> extends ContentPart<T, TT> {
+export abstract class PagePart<
+    TState,
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends ContentPart<TState, TThemeType, TApp, TTheme> {
 
     /// Breadcrumbs
 
-    private _breadcrumbs = Array<Action<TT>>()
+    private _breadcrumbs = Array<Action<TThemeType>>()
 
-    addBreadcrumb(crumb: Action<TT>) {
+    addBreadcrumb(crumb: Action<TThemeType>) {
         this._breadcrumbs.push(crumb)
     }
 
@@ -359,7 +364,7 @@ export abstract class PagePart<T, TT extends ThemeType> extends ContentPart<T, T
         })
     }
 
-    protected renderActions(parent: PartTag, level: ActionLevel, options?: RenderActionOptions<TT>) {
+    protected renderActions(parent: PartTag, level: ActionLevel, options?: RenderActionOptions<TThemeType>) {
         parent.div(`.${level}-actions`, actions => {
             this.app.theme.renderActions(actions, this.getActions(level), options)
         })
@@ -372,7 +377,7 @@ export abstract class PagePart<T, TT extends ThemeType> extends ContentPart<T, T
             const crumbs = Array.from(this._breadcrumbs)
 
             // add a breadcrumb for the page title
-            const titleCrumb: Action<TT> = {
+            const titleCrumb: Action<TThemeType> = {
                 title: this._title,
                 icon: this._icon || undefined,
             }
@@ -394,7 +399,11 @@ export abstract class PagePart<T, TT extends ThemeType> extends ContentPart<T, T
 /**
  * Default page part if the router can't find the path.
  */
-export class NotFoundRoute<TT extends ThemeType> extends PagePart<NoState, TT> {
+export class NotFoundRoute<
+    TT extends ThemeType,
+    TApp extends TerrierApp<TT, TApp, TTheme>,
+    TTheme extends Theme<TT>
+> extends PagePart<NoState, TT, TApp, TTheme> {
     async init() {
         this.setTitle("Page Not Found")
     }
@@ -414,7 +423,12 @@ export class NotFoundRoute<TT extends ThemeType> extends PagePart<NoState, TT> {
 /**
  * A part that renders content inside a panel.
  */
-export abstract class PanelPart<T, TT extends ThemeType> extends ContentPart<T, TT> {
+export abstract class PanelPart<
+    TState,
+    TThemeType extends ThemeType,
+    TApp extends TerrierApp<TThemeType, TApp, TTheme>,
+    TTheme extends Theme<TThemeType>
+> extends ContentPart<TState, TThemeType, TApp, TTheme> {
 
     getLoadingContainer() {
         return this.element?.getElementsByClassName('tt-panel')[0]