@difizen/libro-common 0.3.4 → 1.0.0

package/src/core/view/portal-slot-view.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/unified-signatures */
+import { Disposable, DisposableCollection } from '../../common/index.js';
+import { equals, getOrigin, prop, useInject } from '../../observable/index.js';
+import { inject, transient } from '../../ioc/index.js';
+import * as React from 'react';
+
+import { view } from './decorator';
+import { BaseView } from './default-view';
+import type {
+  SlotView,
+  ViewOpenOption,
+  ViewComponent,
+  SlotViewOption,
+  View,
+} from './view-protocol';
+import { ViewOption, ViewInstance } from './view-protocol';
+import { ViewRender } from './view-render';
+
+export const PortalViewComponent: React.FC = React.forwardRef(
+  function PortalViewComponent() {
+    const instance = useInject<PortalSlotView>(ViewInstance);
+    return (
+      <>
+        {instance.children.map((viewItem) => (
+          <ViewRender view={viewItem} key={viewItem.id} />
+        ))}
+      </>
+    );
+  },
+);
+
+@transient()
+@view('portal-slot-view')
+export class PortalSlotView extends BaseView implements SlotView {
+  protected viewOpenOptions = new Map<View, ViewOpenOption | undefined>();
+  protected viewRemoveDispose = new Map<View, Disposable>();
+
+  @prop()
+  children: View[] = [];
+
+  protected option: SlotViewOption | undefined;
+
+  override view: ViewComponent = PortalViewComponent;
+
+  constructor(@inject(ViewOption) option: SlotViewOption | undefined) {
+    super();
+    this.option = option;
+    this.id = `portal-slot-${this.id}`;
+    if (option?.className) {
+      this.className = option.className;
+    }
+  }
+
+  contains(instanceOrId: View | string) {
+    if (typeof instanceOrId === 'string') {
+      return !!this.children.find((item) => item.id === instanceOrId);
+    }
+    return !!this.children.find((item) => equals(item, instanceOrId));
+  }
+
+  async addView(viewInstance: View, option?: ViewOpenOption): Promise<Disposable> {
+    const toDispose = new DisposableCollection();
+    if (!this.contains(viewInstance)) {
+      this.children.push(getOrigin(viewInstance));
+      this.setViewOption(viewInstance, option);
+      viewInstance.isAttached = true;
+      const remove = () => {
+        this.doRemoveView(viewInstance);
+      };
+      const disposable = viewInstance.onDisposed(remove);
+      toDispose.push(disposable);
+      toDispose.push(Disposable.create(remove));
+      this.viewRemoveDispose.set(viewInstance, toDispose);
+    }
+    return toDispose;
+  }
+
+  protected doRemoveView(viewInstance: View): void {
+    const currentIndex = this.children.findIndex((item) => equals(item, viewInstance));
+    if (currentIndex > -1) {
+      this.children.splice(currentIndex, 1);
+      this.viewOpenOptions.delete(viewInstance);
+      viewInstance.isAttached = false;
+    }
+  }
+  removeView(viewInstance: View): void {
+    this.viewRemoveDispose.get(viewInstance)?.dispose();
+    this.viewRemoveDispose.delete(viewInstance);
+  }
+
+  protected setViewOption(instance: View, option?: ViewOpenOption) {
+    this.viewOpenOptions.set(instance, option);
+  }
+
+  getViewOption(child: View): ViewOpenOption | undefined {
+    return this.viewOpenOptions.get(getOrigin(child));
+  }
+
+  override dispose() {
+    super.dispose();
+    this.children.forEach((item) => {
+      if (Disposable.is(item)) {
+        item.dispose();
+      }
+    });
+  }
+}

package/src/core/view/root-view.tsx

@@ -0,0 +1,102 @@
+import { timeout } from '../../common/index.js';
+import { prop, useInject } from '../../observable/index.js';
+import { inject, singleton } from '../../ioc/index.js';
+import * as React from 'react';
+
+import { ApplicationState, ApplicationStateService } from '../application';
+import { parseCssTime } from '../browser';
+
+import { view } from './decorator';
+import { BaseView } from './default-view';
+import { Slot } from './slot';
+import { RootSlotId, RootViewId, ViewInstance } from './view-protocol';
+
+export const RootComponents = Symbol('RootViewComponent');
+export interface RootComponents {
+  Loading?: React.FC;
+}
+
+export const RootViewComponent = React.forwardRef(function RootViewComponent(
+  _props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const appState = useInject(ApplicationStateService);
+  const instance = useInject<RootView>(ViewInstance);
+  const components = useInject<RootComponents>(RootComponents);
+  const { Loading = () => null } = components;
+  return (
+    <div className={instance.className} ref={ref}>
+      {appState.state === ApplicationState.Ready && <Slot name={RootSlotId} />}
+      {instance.loading && <Loading />}
+    </div>
+  );
+});
+
+@singleton()
+@view(RootViewId)
+export class RootView extends BaseView {
+  override id: string = RootViewId;
+
+  @prop()
+  loading = true;
+
+  protected appState!: ApplicationStateService;
+  constructor(@inject(ApplicationStateService) appState: ApplicationStateService) {
+    super();
+    this.appState = appState;
+    this.className = 'mana-root';
+  }
+  override view = RootViewComponent;
+  override onViewMount = () => {
+    // Prevent forward/back navigation by scrolling in OS X
+    // if (isOSX) {
+    //   if (this.container?.current) {
+    //     this.container?.current.addEventListener('wheel', preventNavigation, { passive: false });
+    //   } else {
+    //     document.body.addEventListener('wheel', preventNavigation, { passive: false });
+    //   }
+    // }
+    this.appState
+      .reachedState(ApplicationState.Ready)
+      .then(() => {
+        this.hideLoading();
+        return;
+      })
+      .catch((_e) => {
+        //
+      });
+  };
+
+  /**
+   * Return an HTML element that indicates the startup phase, e.g. with an animation or a splash screen.
+   */
+  protected getStartupIndicator(): HTMLElement | undefined {
+    if (this.container?.current) {
+      const startupElements =
+        this.container.current.getElementsByClassName('mana-preload');
+      return startupElements.length === 0
+        ? undefined
+        : (startupElements[0] as HTMLElement);
+    }
+    return undefined;
+  }
+  /**
+   * If a startup indicator is present, it is first hidden with the `mana-hidden` CSS class and then
+   * removed after a while. The delay until removal is taken from the CSS transition duration.
+   */
+  protected hideLoading(): Promise<void> {
+    return new Promise((resolve) => {
+      window.requestAnimationFrame(async () => {
+        const startupElem = this.getStartupIndicator();
+        if (startupElem) {
+          startupElem.classList.add('mana-hidden');
+          const preloadStyle = window.getComputedStyle(startupElem);
+          const transitionDuration = parseCssTime(preloadStyle.transitionDuration, 0);
+          await timeout(transitionDuration);
+        }
+        this.loading = false;
+        resolve();
+      });
+    });
+  }
+}

package/src/core/view/saveable.ts

@@ -0,0 +1,146 @@
+import type { Event, MaybePromise } from '../../common/index.js';
+
+import type { View } from '..';
+
+export interface Saveable {
+  readonly dirty: boolean;
+  readonly onDirtyChanged: Event<void>;
+  readonly autoSave: 'on' | 'off';
+  /**
+   * Saves dirty changes.
+   */
+  save: () => MaybePromise<void>;
+  /**
+   * Reverts dirty changes.
+   */
+  restore?: () => MaybePromise<void>;
+}
+
+export interface SaveableSource {
+  readonly saveable: Saveable;
+}
+
+export namespace Saveable {
+  export function isSource(arg: any): arg is SaveableSource {
+    return !!arg && 'saveable' in arg && is(arg.saveable);
+  }
+  export function is(arg: any): arg is Saveable {
+    return !!arg && 'dirty' in arg && 'onDirtyChanged' in arg;
+  }
+  export function get(arg: any): Saveable | undefined {
+    if (is(arg)) {
+      return arg;
+    }
+    if (isSource(arg)) {
+      return arg.saveable;
+    }
+    return undefined;
+  }
+  export function getDirty(arg: any): Saveable | undefined {
+    const saveable = get(arg);
+    if (saveable && saveable.dirty) {
+      return saveable;
+    }
+    return undefined;
+  }
+  export function isDirty(arg: any): boolean {
+    return !!getDirty(arg);
+  }
+  export async function save(arg: any): Promise<void> {
+    const saveable = get(arg);
+    if (saveable) {
+      await saveable.save();
+    }
+  }
+  // export function apply(widget: View): SaveableView | undefined {
+  //   // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  //   if (SaveableView.is(widget)) {
+  //     return widget;
+  //   }
+  //   const saveable = Saveable.get(widget);
+  //   if (!saveable) {
+  //     return undefined;
+  //   }
+  //   setDirty(widget, saveable.dirty);
+  //   saveable.onDirtyChanged(() => setDirty(widget, saveable.dirty));
+  //   const closeWidget = widget.close.bind(widget);
+  //   const closeWithoutSaving: SaveableWidget['closeWithoutSaving'] = async () => {
+  //     if (saveable.dirty && saveable.revert) {
+  //       await saveable.revert();
+  //     }
+  //     closeWidget();
+  //     return waitForClosed(widget);
+  //   };
+  //   let closing = false;
+  //   const closeWithSaving: SaveableWidget['closeWithSaving'] = async options => {
+  //     if (closing) {
+  //       return;
+  //     }
+  //     closing = true;
+  //     try {
+  //       const result = await shouldSave(saveable, () => {
+  //         if (options && options.shouldSave) {
+  //           return options.shouldSave();
+  //         }
+  //         return new ShouldSaveDialog(widget).open();
+  //       });
+  //       if (typeof result === 'boolean') {
+  //         if (result) {
+  //           await Saveable.save(widget);
+  //         }
+  //         await closeWithoutSaving();
+  //       }
+  //     } finally {
+  //       closing = false;
+  //     }
+  //   };
+  //   return Object.assign(widget, {
+  //     closeWithoutSaving,
+  //     closeWithSaving,
+  //     close: () => closeWithSaving(),
+  //   });
+  // }
+  export async function shouldSave(
+    saveable: Saveable,
+    cb: () => MaybePromise<boolean | undefined>,
+  ): Promise<boolean | undefined> {
+    if (!saveable.dirty) {
+      return false;
+    }
+
+    if (saveable.autoSave === 'on') {
+      return true;
+    }
+
+    return cb();
+  }
+}
+
+export interface SaveableView extends View {
+  closeWithoutSaving: () => Promise<void>;
+  closeWithSaving: (options?: SaveableView.CloseOptions) => Promise<void>;
+}
+
+export namespace SaveableView {
+  export function is(view: View | undefined): view is SaveableView {
+    return !!view && 'closeWithoutSaving' in view;
+  }
+  export function getDirty<T extends View>(
+    views: Iterable<T>,
+  ): IterableIterator<SaveableView & T> {
+    return get(views, Saveable.isDirty);
+  }
+  export function* get<T extends View>(
+    views: Iterable<T>,
+    filter: (view: T) => boolean = () => true,
+  ): IterableIterator<SaveableView & T> {
+    for (const view of views) {
+      if (SaveableView.is(view) && filter(view)) {
+        yield view;
+      }
+    }
+  }
+  export interface CloseOptions {
+    shouldSave?: () => MaybePromise<boolean | undefined>;
+  }
+}

package/src/core/view/slot-view-manager.ts

@@ -0,0 +1,199 @@
+import type { Newable } from '../../common/index.js';
+import { Emitter } from '../../common/index.js';
+import { Deferred } from '../../common/index.js';
+import { Disposable, Priority } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import { contrib, inject, singleton } from '../../ioc/index.js';
+import type { Contribution } from '../../ioc/index.js';
+
+import { DebugService } from '../common/debug';
+
+import { DefaultSlotView } from './default-slot-view';
+import { ViewManager } from './view-manager';
+import type { View } from './view-protocol';
+import type { SlotPreference, ViewOpenOption } from './view-protocol';
+import { SlotPreferenceContribution, SlotView } from './view-protocol';
+
+interface ViewAddArgs {
+  view?: View;
+  slot: string;
+  option?: ViewOpenOption;
+}
+
+interface SlotSetArgs {
+  view?: View;
+  slot: string;
+}
+
+@singleton()
+export class SlotViewManager {
+  protected preferences: Map<string, SlotPreference> = new Map();
+  protected componentPreferences: Map<string, SlotPreference> = new Map();
+  protected slotRenderingDeferred: Map<string, Deferred<void>> = new Map();
+
+  protected onViewAddedEmitter: Emitter<ViewAddArgs> = new Emitter<ViewAddArgs>();
+  protected onSlotChangedEmitter: Emitter<SlotSetArgs> = new Emitter<SlotSetArgs>();
+
+  get onViewAdded() {
+    return this.onViewAddedEmitter.event;
+  }
+
+  get onSlotChanged() {
+    return this.onSlotChangedEmitter.event;
+  }
+
+  /**
+   * slot -> slotview
+   */
+  @prop()
+  slotViewMap: Map<string, View> = new Map<string, View>();
+
+  /**
+   * view -> child slotview
+   */
+  @prop()
+  slotChildrenMap: Map<View, string[]> = new Map<View, string[]>();
+
+  protected readonly preferenceProvider: Contribution.Provider<SlotPreferenceContribution>;
+  protected readonly debugService: DebugService;
+  protected readonly viewManager: ViewManager;
+
+  constructor(
+    @contrib(SlotPreferenceContribution)
+    preferenceProvider: Contribution.Provider<SlotPreferenceContribution>,
+    @inject(DebugService) debugService: DebugService,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    this.preferenceProvider = preferenceProvider;
+    this.debugService = debugService;
+    this.viewManager = viewManager;
+    this.setPreferencesFromContribution();
+  }
+
+  protected setPreferencesFromContribution(): void {
+    for (const preference of this.preferenceProvider.getContributions()) {
+      preference.forEach((item) => {
+        const { slot } = item;
+        this.setSlotPreference(slot, item);
+      });
+    }
+  }
+
+  protected getPreferences(): Map<string, SlotPreference> {
+    return this.preferences;
+  }
+
+  setSlotPreference(slot: string, preference: SlotPreference): void {
+    const last = this.preferences.get(slot);
+    const currentPriority = preference.priority ?? Priority.IDLE;
+    if (!last || !last.priority || currentPriority > last.priority) {
+      this.preferences.set(slot, preference);
+    }
+  }
+
+  setComponentSlotPreference(slot: string, preference: SlotPreference): void {
+    const last = this.componentPreferences.get(slot);
+    const currentPriority = preference.priority ?? Priority.IDLE;
+    if (!last || !last.priority || currentPriority > last.priority) {
+      this.componentPreferences.set(slot, preference);
+    }
+  }
+
+  protected waitSlotRendering(slot: string): Promise<void> {
+    let deferred = this.slotRenderingDeferred.get(slot);
+    if (!deferred) {
+      deferred = new Deferred<void>();
+      this.slotRenderingDeferred.set(slot, deferred);
+    }
+    return deferred.promise;
+  }
+
+  slotRendering(slot: string): void {
+    let deferred = this.slotRenderingDeferred.get(slot);
+    if (!deferred) {
+      deferred = new Deferred<void>();
+      this.slotRenderingDeferred.set(slot, deferred);
+    }
+    deferred.resolve();
+  }
+
+  async getOrCreateSlotView(
+    slot: string,
+    defaultSlotView: Newable<View> = DefaultSlotView,
+  ): Promise<SlotView | View> {
+    const existSlotView = this.slotViewMap.get(slot);
+    if (existSlotView) {
+      return existSlotView;
+    }
+    let preference = this.preferences.get(slot);
+    if (!preference) {
+      await this.waitSlotRendering(slot);
+      preference = this.componentPreferences.get(slot);
+    }
+    const defaultSlotViewFactory = this.viewManager.getFactory(DefaultSlotView)!;
+    const toFactory = preference?.view ?? defaultSlotView ?? DefaultSlotView;
+    const slotViewFactory =
+      this.viewManager.getFactory(toFactory) ?? defaultSlotViewFactory;
+    const slotOption = { ...preference?.options, area: slot };
+    const slotView = await this.viewManager.getOrCreateView(
+      slotViewFactory.id,
+      slotOption,
+    );
+    slotView.onDisposed(this.setSlotView(slot, slotView).dispose);
+    this.debugService('slot view set', slot, slotView);
+    return slotView as SlotView;
+  }
+
+  getSlotView(slot: string): View | undefined {
+    return this.slotViewMap.get(slot);
+  }
+
+  setSlotView(slot: string, view: View): Disposable {
+    this.slotViewMap.set(slot, view);
+    this.onSlotChangedEmitter.fire({ view, slot });
+    return Disposable.create(() => {
+      if (this.slotViewMap.get(slot) === view) {
+        this.slotViewMap.delete(slot);
+        this.onSlotChangedEmitter.fire({ view: undefined, slot });
+      }
+    });
+  }
+
+  async addView(view: View, slot: string, option?: ViewOpenOption): Promise<void> {
+    const slotView = await this.getOrCreateSlotView(slot);
+    if (SlotView.is(slotView)) {
+      await slotView.addView(view, option);
+      this.onViewAddedEmitter.fire({ view, slot, option });
+    }
+  }
+
+  async removeView(view: View, slot: string): Promise<void> {
+    const slotView = await this.getOrCreateSlotView(slot);
+    if (SlotView.is(slotView)) {
+      await slotView.removeView(view);
+    }
+  }
+
+  hasSlot(slot: string): boolean {
+    return this.slotViewMap.has(slot);
+  }
+
+  getSlotChildren(view: View): string[] | undefined {
+    return this.slotChildrenMap.get(view);
+  }
+  addSlotToView(slot: string, slotView: SlotView): void {
+    this.slotChildrenMap.set(slotView, [
+      ...(this.slotChildrenMap.get(slotView) ?? []),
+      slot,
+    ]);
+  }
+  removeSlotFromView(slot: string, slotView: SlotView): void {
+    const children = this.slotChildrenMap.get(slotView);
+    if (children) {
+      this.slotChildrenMap.set(
+        slotView,
+        children.filter((child) => child !== slot),
+      );
+    }
+  }
+}

package/src/core/view/slot.tsx

@@ -0,0 +1,68 @@
+import type { Newable } from '../../common/index.js';
+import { useInject, getOrigin } from '../../observable/index.js';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
+import { memo } from 'react';
+
+import { SlotViewManager } from './slot-view-manager';
+import { ViewInstance } from './view-protocol';
+import type { View } from './view-protocol';
+import type { SlotView } from './view-protocol';
+import { ViewRender } from './view-render';
+
+export interface Props {
+  name: string;
+  viewProps?: undefined | Record<string, any>;
+  children?: undefined | ReactNode | ReactNode[];
+  slotView?: undefined | Newable<View>;
+}
+
+const SlotRender = memo(
+  function SlotRenderInner(props: {
+    view: View | undefined;
+    children: React.ReactNode;
+    viewProps?: Record<string, any> | undefined;
+  }) {
+    const { view, children, viewProps } = props;
+    if (view) {
+      return (
+        <ViewRender view={view} {...viewProps}>
+          {children}
+        </ViewRender>
+      );
+    }
+    return <></>;
+  },
+  (prev, next) => {
+    return (
+      prev.view === next.view &&
+      prev.children === next.children &&
+      prev.viewProps === next.viewProps
+    );
+  },
+);
+
+export const Slot: React.FC<Props> = (props: Props) => {
+  const { name, children, viewProps, slotView } = props;
+  const slotViewManager = useInject(SlotViewManager);
+  slotViewManager.slotRendering(name);
+  const areaView = slotViewManager.slotViewMap.get(name);
+  const containerView = useInject<SlotView>(ViewInstance);
+
+  useEffect(() => {
+    slotViewManager.getOrCreateSlotView(name, slotView);
+    slotViewManager.addSlotToView(name, getOrigin(containerView));
+    return () => {
+      slotViewManager.removeSlotFromView(name, getOrigin(containerView));
+    };
+  }, [name, containerView, slotViewManager, slotView]);
+  if (slotView) {
+    slotViewManager.setComponentSlotPreference(name, { slot: name, view: slotView });
+  }
+
+  return (
+    <SlotRender view={areaView} viewProps={viewProps}>
+      {children}
+    </SlotRender>
+  );
+};

package/src/core/view/stateful-view.ts

@@ -0,0 +1,22 @@
+import { BaseView } from './default-view';
+import type { StatefulView } from './view-protocol';
+
+export abstract class BaseStatefulView extends BaseView implements StatefulView {
+  constructor() {
+    super();
+    Promise.resolve()
+      .then(() => {
+        return this.afterRestore();
+      })
+      .catch(console.error);
+  }
+  abstract storeState(): Record<string, any>;
+  abstract restoreState(oldState: Record<string, any>): void;
+
+  /**
+   * initialize after restore state
+   */
+  afterRestore() {
+    // do something
+  }
+}

package/src/core/view/title.tsx

@@ -0,0 +1,24 @@
+import { prop } from '../../observable/index.js';
+import { transient } from '../../ioc/index.js';
+import type * as React from 'react';
+
+import type { View } from './view-protocol';
+import type { Title } from './view-protocol';
+
+@transient()
+export class ViewTitle implements Title<View> {
+  owner: View;
+  @prop()
+  label?: React.ReactNode | React.FC;
+  @prop()
+  icon?: React.ReactNode | React.FC;
+  @prop()
+  caption?: string;
+  @prop()
+  className?: string;
+  @prop()
+  closable?: boolean = true;
+  constructor(owner: View) {
+    this.owner = owner;
+  }
+}