@difizen/libro-common 0.3.3 → 1.0.0

package/src/core/theme/theme-app.ts

@@ -0,0 +1,80 @@
+import { Disposable, DisposableCollection } from '../../common/index.js';
+import type { Contribution } from '../../ioc/index.js';
+import { contrib, inject, singleton } from '../../ioc/index.js';
+
+import type { Application } from '../application/index';
+import { ApplicationContribution } from '../application/index';
+
+import { VariableContribution } from './basic/variable-protocol';
+import { VariableRegistry } from './basic/variable-registry';
+import { ColorContribution } from './color/color-protocol';
+import { ColorRegistry } from './color/color-registry';
+import type { CssVariable } from './protocol';
+import { ThemeService } from './theme-service';
+
+@singleton({ contrib: ApplicationContribution })
+export class ThemeApplication implements ApplicationContribution {
+  protected toUpdate = new DisposableCollection(); // dispose action when update
+  @inject(ThemeService) protected readonly themeService: ThemeService;
+  @inject(VariableRegistry) protected readonly variables: VariableRegistry;
+  @contrib(VariableContribution)
+  protected readonly variableContributions: Contribution.Provider<VariableContribution>;
+  @inject(ColorRegistry) protected readonly colors: ColorRegistry;
+
+  @contrib(ColorContribution)
+  protected readonly colorContributions: Contribution.Provider<ColorContribution>;
+
+  protected application: Application;
+
+  onStart(application: Application): void {
+    this.application = application;
+    this.application.onHostChanged(() => this.update());
+    for (const contribution of this.variableContributions.getContributions()) {
+      contribution.registerVariables(this.variables);
+    }
+    for (const contribution of this.colorContributions.getContributions()) {
+      contribution.registerColors(this.colors);
+    }
+    this.themeService.onDidColorThemeChange(() => this.update());
+    this.variables.onDidChange(() => this.update());
+    this.themeService.onDidColorThemeChange(() => this.update());
+    this.colors.onDidChange(() => this.update());
+    this.update();
+  }
+
+  protected setCssVariable(cv: CssVariable) {
+    const host = this.application.host;
+    if (document) {
+      document.body.style.setProperty(cv.name, cv.value);
+    }
+    if (host) {
+      host.style.setProperty(cv.name, cv.value);
+    }
+  }
+
+  protected setThemeClassName() {
+    const themeClass = this.themeService.themeClassName;
+    if (document) {
+      document.body.classList.add(themeClass);
+      this.toUpdate.push(
+        Disposable.create(() => document.body.classList.remove(themeClass)),
+      );
+    }
+    const host = this.application.host;
+    if (host) {
+      host.classList.add(themeClass);
+      this.toUpdate.push(Disposable.create(() => host.classList.remove(themeClass)));
+    }
+  }
+  protected update = (): void => {
+    this.toUpdate.dispose();
+    this.toUpdate = new DisposableCollection();
+    this.setThemeClassName();
+    for (const cv of [
+      ...this.colors.getCurrentCssVariables(),
+      ...this.variables.getCurrentCssVariables(),
+    ]) {
+      this.setCssVariable(cv);
+    }
+  };
+}

package/src/core/theme/theme-service.ts

@@ -0,0 +1,170 @@
+import type { Event } from '../../common/index.js';
+import { isPromiseLike } from '../../common/index.js';
+import { Emitter, Disposable, objects } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import { singleton } from '../../ioc/index.js';
+
+import { localStorageService } from '../common';
+import type { StorageService } from '../common';
+
+import './style/theme-base.less';
+
+export const ThemeServiceSymbol = Symbol('ThemeService');
+
+export type ThemeType = 'light' | 'dark' | 'hc';
+
+export type TokenValue = string | undefined;
+export interface ExtraTokens {
+  basic?: Record<string, TokenValue>;
+  color?: Record<string, TokenValue>;
+  [key: string]: Record<string, TokenValue> | undefined;
+}
+export interface Theme {
+  readonly id: string;
+  readonly type: ThemeType;
+  readonly label: string;
+  readonly description?: string;
+  readonly extraTokens?: ExtraTokens;
+}
+export interface ThemeChangeEvent {
+  readonly newTheme: Theme;
+  readonly oldTheme?: Theme | undefined;
+}
+export class BuiltinThemeProvider {
+  static readonly darkTheme: Theme = {
+    id: 'dark',
+    type: 'dark',
+    label: 'Dark (mana)',
+  };
+
+  static readonly lightTheme: Theme = {
+    id: 'light',
+    type: 'light',
+    label: 'Light (mana)',
+  };
+
+  static readonly hcTheme: Theme = {
+    id: 'hc-mana',
+    type: 'hc',
+    label: 'High Contrast (mana)',
+  };
+
+  static readonly themes = [
+    BuiltinThemeProvider.darkTheme,
+    BuiltinThemeProvider.lightTheme,
+    BuiltinThemeProvider.hcTheme,
+  ];
+}
+
+@singleton()
+export class ThemeService {
+  protected themes: Record<string, Theme> = {};
+  @prop()
+  protected activeTheme: Theme | undefined;
+  protected storageService: StorageService = localStorageService;
+  protected readonly themeChange = new Emitter<ThemeChangeEvent>();
+
+  readonly onDidColorThemeChange: Event<ThemeChangeEvent> = this.themeChange.event;
+
+  get themeClassName(): string {
+    return `mana-${this.getCurrentTheme().type}`;
+  }
+
+  constructor() {
+    if (typeof window !== undefined) {
+      window.addEventListener('mana-theme-change', (event) => {
+        // this.setCurrentTheme(event.);
+      });
+    }
+  }
+
+  static get(): ThemeService {
+    const global = window as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    if (!global[ThemeServiceSymbol]) {
+      const themeService = new ThemeService();
+      themeService.register(...BuiltinThemeProvider.themes);
+      themeService.startupTheme();
+      global[ThemeServiceSymbol] = themeService;
+    }
+    return global[ThemeServiceSymbol];
+  }
+
+  startupTheme() {
+    this.activeTheme = this.getCurrentTheme();
+  }
+
+  register(...themes: Theme[]): Disposable {
+    for (const theme of themes) {
+      this.themes[theme.id] = theme;
+    }
+    this.validateActiveTheme();
+    return Disposable.create(() => {
+      for (const theme of themes) {
+        delete this.themes[theme.id];
+      }
+    });
+  }
+
+  protected validateActiveTheme(): void {
+    if (!this.activeTheme) {
+      return;
+    }
+    const themeId = this.getCurrentTheme().id;
+    if (themeId !== this.activeTheme.id) {
+      this.setCurrentTheme(themeId);
+    }
+  }
+
+  getThemes(): Theme[] {
+    const result = [];
+    for (const o in this.themes) {
+      if (Object.prototype.hasOwnProperty.call(this.themes, o)) {
+        result.push(this.themes[o]);
+      }
+    }
+    return result;
+  }
+
+  getTheme(themeId: string): Theme {
+    return this.themes[themeId] || this.defaultTheme;
+  }
+
+  setCurrentTheme(themeId: string, tokens: ExtraTokens = {}): void {
+    const newTheme = this.getTheme(themeId);
+    const oldTheme = this.activeTheme;
+    if (oldTheme) {
+      if (oldTheme.id === newTheme.id && !tokens) {
+        return;
+      }
+    }
+    this.activeTheme = objects.mixin(objects.deepClone(newTheme), {
+      extraTokens: { ...tokens },
+    });
+    this.storageService.setData('theme', themeId);
+    this.themeChange.fire({
+      newTheme,
+      oldTheme,
+    });
+  }
+
+  getCurrentTheme(): Theme {
+    const maybeThemeId = this.storageService.getData<string>('theme');
+    let themeId = this.defaultTheme.id;
+    if (!isPromiseLike(maybeThemeId) && maybeThemeId) {
+      themeId = maybeThemeId;
+    }
+    return this.getTheme(themeId);
+  }
+
+  getActiveTheme(): Theme {
+    return this.activeTheme || this.getCurrentTheme();
+  }
+
+  get defaultTheme(): Theme {
+    return BuiltinThemeProvider.lightTheme;
+  }
+
+  reset(): void {
+    this.setCurrentTheme(this.defaultTheme.id);
+  }
+}

package/src/core/toolbar/default-toolbar-item.ts

@@ -0,0 +1,80 @@
+import type { Event } from '../../common/index.js';
+import { Emitter } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import { inject } from '../../ioc/index.js';
+import { transient } from '../../ioc/index.js';
+
+import { ToolbarNode } from './toolbar-protocol';
+import type { ToolbarItem } from './toolbar-protocol';
+
+@transient()
+export class DefaultToolbarItem implements ToolbarItem {
+  readonly id: string;
+  readonly command: string;
+
+  source: ToolbarNode;
+
+  meta?: Record<string, any> | undefined;
+
+  @prop()
+  readonly extra?: boolean | undefined;
+
+  @prop()
+  readonly showLabelInline?: boolean | undefined;
+
+  @prop()
+  readonly order?: string | undefined;
+
+  @prop()
+  readonly group?: string | string[] | undefined;
+
+  protected disposedEventEmitter: Emitter<void> = new Emitter();
+
+  onDisposed: Event<void> = this.disposedEventEmitter.event;
+
+  /**
+   * Optional label for the item.
+   */
+  readonly label?: React.ReactNode | React.FC;
+
+  /**
+   * Optional tooltip for the item.
+   */
+  readonly tooltip?: React.ReactNode | React.FC;
+
+  /**
+   * Optional icon for the item.
+   */
+  readonly icon?: React.ReactNode | React.FC;
+
+  readonly execute?: ((...args: any[]) => any) | undefined;
+  readonly isEnabled?: ((...args: any[]) => boolean) | undefined;
+  readonly isVisible?: ((...args: any[]) => boolean) | undefined;
+  readonly isActive?: ((...args: any[]) => boolean) | undefined;
+
+  item: ToolbarNode;
+
+  constructor(@inject(ToolbarNode) item: ToolbarNode) {
+    this.item = item;
+    this.source = item;
+    this.id = item.id;
+    this.command = item.command;
+    this.extra = item.extra;
+    this.order = item.order;
+    this.label = item.label;
+    this.tooltip = item.tooltip;
+    this.icon = item.icon;
+    this.meta = item.meta;
+    this.group = item.group;
+    this.showLabelInline = item.showLabelInline;
+    this.isActive = item.isActive;
+    this.isEnabled = item.isEnabled;
+    this.isVisible = item.isVisible;
+    this.execute = item.execute;
+  }
+  disposed?: boolean | undefined;
+
+  dispose() {
+    this.disposedEventEmitter.fire();
+  }
+}

package/src/core/toolbar/index.ts

@@ -0,0 +1,23 @@
+import { ManaModule } from '../module';
+
+import { DefaultToolbarItem } from './default-toolbar-item';
+import { ToolbarNode, ToolbarItemFactory } from './toolbar-protocol';
+import { ToolbarRegistry, ToolbarContribution } from './toolbar-registry';
+
+export const CoreToolbarModule = ManaModule.create()
+  .contribution(ToolbarContribution)
+  .register(DefaultToolbarItem, ToolbarRegistry)
+  .register({
+    token: ToolbarItemFactory,
+    useDynamic: (ctx) => {
+      return (item: ToolbarNode) => {
+        const child = ctx.container.createChild();
+        child.register({ token: ToolbarNode, useValue: item });
+        return child.get(DefaultToolbarItem);
+      };
+    },
+  });
+
+export * from './toolbar-protocol';
+export * from './toolbar-registry';
+export * from './default-toolbar-item';

package/src/core/toolbar/toolbar-protocol.ts

@@ -0,0 +1,112 @@
+import type { Event, Disposable } from '../../common/index.js';
+
+import type { CommandHandler } from '../command';
+
+/**
+ * Instance of toolbar
+ * Use this token to get the toolbar instance when customizing elements on the toolbar.
+ */
+export const ToolbarInstance = Symbol('ToolbarInstance');
+
+/**
+ * Factory for instantiating toolbars.
+ */
+export const ToolbarItemFactory = Symbol('ToolbarItemFactory');
+
+export interface ToolbarItemFactory {
+  (item: ToolbarNode): ToolbarItem;
+}
+export const ToolbarNode = Symbol('ToolbarItemDefinition');
+
+type Partial<T> = {
+  [P in keyof T]?: T[P] | undefined;
+};
+
+export type ToolbarNode = BaseToolbarNode & Partial<CommandHandler>;
+export interface BaseToolbarNode {
+  /**
+   * The unique ID of the toolbar item.
+   */
+  readonly id: string;
+
+  /**
+   * The command to execute.
+   */
+  readonly command: string;
+
+  /**
+   * Priority among the items. Can be negative. The smaller the number the left-most the item will be placed in the toolbar. It is `0` by default.
+   */
+  //   readonly priority?: number;
+
+  /**
+   * show in the `...` dropdown
+   */
+  readonly extra?: boolean | undefined;
+
+  /**
+   * The order to display toolbar item inline or in the `...` dropdown.
+   */
+  readonly order?: string | undefined;
+
+  /**
+   * When extra, group means that the item will be located in a submenu(s) of the `...` dropdown.
+   * The submenu's title is named by the name in group, e.g. ['menu', 'submenu'].
+   */
+  readonly group?: string | string[] | undefined;
+  /**
+   * Optional label for the item.
+   */
+  readonly label?: React.ReactNode | React.FC;
+
+  /**
+   * Optional tooltip for the item.
+   */
+  readonly tooltip?: React.ReactNode | React.FC;
+
+  /**
+   * Optional icon for the item.
+   */
+  readonly icon?: React.ReactNode | React.FC;
+
+  /**
+   * Show toolbar item label inline.
+   */
+  readonly showLabelInline?: boolean | undefined;
+
+  /**
+   * Custom meta data for the item.
+   */
+  meta?: Record<string, any> | undefined;
+}
+
+export interface ToolbarItem extends ToolbarNode, Disposable {
+  source: ToolbarNode;
+  onDisposed: Event<void>;
+}
+
+export namespace ToolbarItem {
+  export function isDefinition(
+    arg: Record<string, any> | undefined,
+  ): arg is ToolbarNode {
+    return (
+      !!arg &&
+      'id' in arg &&
+      'command' in arg &&
+      typeof (arg as any).command === 'string'
+    );
+  }
+  export function is(arg: Record<string, any> | undefined): arg is ToolbarItem {
+    return isDefinition(arg) && 'onDisposed' in arg;
+  }
+
+  export function getGroupKey(record: ToolbarItem): string {
+    if (!record.group) {
+      return '';
+    }
+    if (typeof record.group === 'string') {
+      return record.group;
+    }
+    return record.group.join('.');
+  }
+}

package/src/core/toolbar/toolbar-registry.ts

@@ -0,0 +1,77 @@
+import { Emitter } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import type { Contribution } from '../../ioc/index.js';
+import { contrib, inject, singleton, Syringe } from '../../ioc/index.js';
+
+import { ApplicationContribution } from '../application';
+
+import type { ToolbarNode } from './toolbar-protocol';
+import { ToolbarItem, ToolbarItemFactory } from './toolbar-protocol';
+/**
+ * Clients should implement this interface if they want to contribute to the toolbar.
+ */
+export const ToolbarContribution = Syringe.defineToken('ToolbarContribution');
+
+export type ToolbarContribution = {
+  /**
+   * Registers toolbar items.
+   * @param registry the toolbar registry.
+   */
+  registerToolbarItems: (registry: ToolbarRegistry) => void;
+};
+
+/**
+ * Main, shared registry for tab-bar toolbar items.
+ */
+@singleton({ contrib: ApplicationContribution })
+export class ToolbarRegistry implements ApplicationContribution {
+  @prop()
+  items: Map<string, ToolbarItem> = new Map();
+
+  protected readonly toolbarItemFactory: ToolbarItemFactory;
+  protected readonly contributionProvider: Contribution.Provider<ToolbarContribution>;
+
+  constructor(
+    @inject(ToolbarItemFactory)
+    toolbarItemFactory: ToolbarItemFactory,
+    @contrib(ToolbarContribution)
+    contributionProvider: Contribution.Provider<ToolbarContribution>,
+  ) {
+    this.toolbarItemFactory = toolbarItemFactory;
+    this.contributionProvider = contributionProvider;
+  }
+
+  protected readonly onDidChangeEmitter = new Emitter<void>();
+
+  onStart(): void {
+    const contributions = this.contributionProvider.getContributions();
+    for (const contribution of contributions) {
+      contribution.registerToolbarItems(this);
+    }
+  }
+
+  /**
+   * Registers the given item. Throws an error, if the corresponding command cannot be found or an item has been already registered for the desired command.
+   *
+   * @param item the item to register.
+   */
+  registerItem(def: ToolbarNode): ToolbarItem {
+    const { id } = def;
+    if (this.items.has(id)) {
+      throw new Error(`A toolbar item is already registered with the '${id}' ID.`);
+    }
+    const item = ToolbarItem.is(def) ? def : this.toolbarItemFactory(def);
+    this.items.set(id, item);
+    item.onDisposed(() => this.items.delete(id));
+    return item;
+  }
+
+  getToolbarItem(id: string): ToolbarItem | undefined {
+    return this.items.get(id);
+  }
+
+  unregisterItem(itemOrId: ToolbarNode | string): void {
+    const id = typeof itemOrId === 'string' ? itemOrId : itemOrId.id;
+    this.items.delete(id);
+  }
+}

package/src/core/typings/native-keymap.d.ts

@@ -0,0 +1,72 @@
+declare module 'native-keymap' {
+  /*---------------------------------------------------------------------------------------------
+   *  Copyright (c) Microsoft Corporation. All rights reserved.
+   *  Licensed under the MIT License. See License.txt in the project root for license information.
+   *--------------------------------------------------------------------------------------------*/
+
+  export interface IWindowsKeyMapping {
+    vkey: string;
+    value: string;
+    withShift: string;
+    withAltGr: string;
+    withShiftAltGr: string;
+  }
+  export type IWindowsKeyboardMapping = Record<string, IWindowsKeyMapping>;
+  export interface ILinuxKeyMapping {
+    value: string;
+    withShift: string;
+    withAltGr: string;
+    withShiftAltGr: string;
+  }
+  export type ILinuxKeyboardMapping = Record<string, ILinuxKeyMapping>;
+  export interface IMacKeyMapping {
+    value: string;
+    valueIsDeadKey: boolean;
+    withShift: string;
+    withShiftIsDeadKey: boolean;
+    withAltGr: string;
+    withAltGrIsDeadKey: boolean;
+    withShiftAltGr: string;
+    withShiftAltGrIsDeadKey: boolean;
+  }
+  export type IMacKeyboardMapping = Record<string, IMacKeyMapping>;
+
+  export type IKeyboardMapping =
+    | IWindowsKeyboardMapping
+    | ILinuxKeyboardMapping
+    | IMacKeyboardMapping;
+
+  export function getKeyMap(): IKeyboardMapping;
+
+  export interface IWindowsKeyboardLayoutInfo {
+    name: string;
+    id: string;
+    text: string;
+  }
+
+  export interface ILinuxKeyboardLayoutInfo {
+    model: string;
+    group: number;
+    layout: string;
+    variant: string;
+    options: string;
+    rules: string;
+  }
+
+  export interface IMacKeyboardLayoutInfo {
+    id: string;
+    localizedName: string;
+    lang: string;
+  }
+
+  export type IKeyboardLayoutInfo =
+    | IWindowsKeyboardLayoutInfo
+    | ILinuxKeyboardLayoutInfo
+    | IMacKeyboardLayoutInfo;
+
+  export function getCurrentKeyboardLayout(): IKeyboardLayoutInfo;
+
+  export function onDidChangeKeyboardLayout(callback: () => void): void;
+
+  export function isISOKeyboard(): boolean | undefined;
+}