@difizen/libro-toc 0.0.2-alpha.0

package/src/toc-provider.ts

@@ -0,0 +1,154 @@
+import type { LibroView } from '@difizen/libro-core';
+import type { Disposable, Event } from '@difizen/mana-app';
+import { inject, notEmpty, prop, transient, watch } from '@difizen/mana-app';
+import { Emitter, DisposableCollection } from '@difizen/mana-app';
+
+import { LibroCellTOCProvider } from './cell-toc-provider.js';
+import type { CellTOCProvider, IHeading } from './toc-protocol.js';
+import { TOCProviderOption } from './toc-protocol.js';
+
+export type LibroTOCProviderFactory = (option: TOCProviderOption) => LibroTOCProvider;
+export const LibroTOCProviderFactory = Symbol('LibroTOCProviderFactory');
+
+@transient()
+export class LibroTOCProvider implements Disposable {
+  protected libroCellTOCProvider: LibroCellTOCProvider;
+
+  @prop() protected providerMap = new Map<string, CellTOCProvider>();
+
+  @prop() headings: IHeading[] = [];
+
+  @prop()
+  protected view: LibroView;
+
+  protected toDispose = new DisposableCollection();
+  protected toDisposeWatcher = new DisposableCollection();
+
+  disposed = false;
+
+  protected activeCellChangeEmitter = new Emitter<IHeading>();
+
+  get activeCellChange(): Event<IHeading> {
+    return this.activeCellChangeEmitter.event;
+  }
+
+  constructor(
+    @inject(TOCProviderOption) option: TOCProviderOption,
+    @inject(LibroCellTOCProvider) libroCellTOCProvider: LibroCellTOCProvider,
+  ) {
+    this.view = option.view as LibroView;
+    this.libroCellTOCProvider = libroCellTOCProvider;
+
+    this.initUpdateWatch();
+    this.updateTOC();
+  }
+
+  protected initUpdateWatch() {
+    this.toDispose.push(
+      watch(this.view.model, 'activeIndex', this.handleActiveCellChange),
+    );
+    this.toDispose.push(watch(this.view.model, 'cells', this.onCellsChanged));
+    this.setupUpdaterWatcher();
+  }
+
+  protected setupUpdaterWatcher() {
+    this.toDisposeWatcher.dispose();
+    this.toDisposeWatcher = new DisposableCollection();
+    this.getCellTocProviders().map((item) => {
+      this.toDisposeWatcher.push(item.updateWatcher(this.updateTOC));
+    });
+  }
+
+  protected handleActiveCellChange = () => {
+    const header = this.getHeadingByCellIndex(this.view.model.activeIndex);
+    if (header) {
+      this.activeCellChangeEmitter.fire(header);
+    }
+  };
+
+  protected updateTOC = () => {
+    this.headings = this.getHeadings();
+  };
+
+  protected onActiveCellChanged = () => {
+    this.updateTOC();
+  };
+
+  protected onCellsChanged = () => {
+    this.setupUpdaterWatcher();
+    this.updateTOC();
+  };
+
+  protected onContentChanged = () => {
+    this.updateTOC();
+  };
+
+  getCellTocProviderList() {
+    if (!this.view) {
+      return [];
+    }
+    const cells = this.view.model.cells;
+    return cells.map((cell) => {
+      let tocProvider: CellTOCProvider | undefined;
+      if (this.providerMap.has(cell.id)) {
+        tocProvider = this.providerMap.get(cell.id);
+      } else {
+        tocProvider = this.libroCellTOCProvider.createCellTOCProvider(cell);
+      }
+
+      if (tocProvider) {
+        this.providerMap.set(cell.id, tocProvider);
+      }
+      return { cellId: cell.model.id, tocProvider };
+    });
+  }
+
+  protected getCellTocProviders() {
+    return this.getCellTocProviderList()
+      .map((item) => item.tocProvider)
+      .filter(notEmpty);
+  }
+
+  protected getHeadings() {
+    return this.getCellTocProviderList()
+      .map((item) => {
+        if (item.tocProvider !== undefined) {
+          const headings = item.tocProvider.getHeadings();
+          headings.forEach(
+            (heading) =>
+              (heading.dataset = { ...heading.dataset, cellId: item.cellId }),
+          );
+          return headings;
+        }
+        return;
+      })
+      .filter(notEmpty)
+      .flat();
+  }
+
+  selectCellByHeading(heading: IHeading) {
+    const cellId = heading?.dataset?.['cellId'];
+    if (!cellId) {
+      return;
+    }
+    const cell = this.view.model.cells.find((item) => item.model.id === cellId);
+    if (cell) {
+      this.view.selectCell(cell);
+    }
+  }
+
+  getHeadingByCellIndex(index: number) {
+    const cell = this.view.model.cells[index];
+    return this.headings.find((item) => item?.dataset?.['cellId'] === cell.model.id);
+  }
+
+  dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this.toDispose.dispose();
+    this.toDisposeWatcher.dispose();
+    this.providerMap.clear();
+    this.disposed = true;
+  }
+}

package/src/toc-view.tsx

@@ -0,0 +1,225 @@
+import { ArrowDown, ArrowRight } from '@difizen/libro-core';
+import type { DisplayView, LibroView } from '@difizen/libro-core';
+import { ConfigurationService } from '@difizen/mana-app';
+import { getOrigin, prop, useInject } from '@difizen/mana-app';
+import { BaseView, view, ViewInstance } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import React, { useRef } from 'react';
+
+import { TOCVisible } from './toc-configuration.js';
+import { LibroTOCManager } from './toc-manager.js';
+import type { IHeading } from './toc-protocol.js';
+import type { LibroTOCProvider } from './toc-provider.js';
+import './index.less';
+
+interface DisplayHeading extends IHeading {
+  hasChild: boolean;
+  visible: boolean;
+}
+
+interface TocItemProps {
+  heading: DisplayHeading;
+  active: boolean;
+  onClick: (heading: DisplayHeading) => void;
+  onToggle: () => void;
+  headingCollapsed: boolean;
+}
+
+const TocItem: React.FC<TocItemProps> = ({
+  heading,
+  onClick,
+  active,
+  headingCollapsed,
+  onToggle,
+}) => {
+  const instance = useInject<TOCView>(ViewInstance);
+  const { id, text, level, hasChild, visible } = heading;
+  if (!visible) {
+    return null;
+  }
+  const handleClick = () => {
+    if (!id) {
+      return;
+    }
+
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView();
+    }
+    onClick(heading);
+  };
+  return (
+    <>
+      <div
+        className={`markdown-toc-container-anchor ${active ? 'active' : ''}`}
+        style={{
+          paddingLeft: instance.getHeadingIndentSize(level) + (hasChild ? 0 : 20),
+        }}
+        onClick={handleClick}
+      >
+        {hasChild && (
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggle();
+            }}
+            className="libro-toc-collapsed"
+          >
+            {headingCollapsed ? <ArrowRight /> : <ArrowDown />}
+          </span>
+        )}
+
+        {text}
+      </div>
+      <div className={`markdown-toc-container-anchor-shot ${active ? 'active' : ''}`} />
+    </>
+  );
+};
+
+export const TocRender = () => {
+  const instance = useInject<TOCView>(ViewInstance);
+  const containRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (heading: IHeading) => {
+    instance.activeHeading = heading;
+    instance.tocProvider?.selectCellByHeading(heading);
+  };
+
+  return (
+    <div className="markdown-toc-container" ref={containRef}>
+      <div className="markdown-toc-container-title">{instance.tocTitle}</div>
+      {instance.getDisplayHeadings().map((heading) => {
+        const collapsed = instance.isHeadingCollapsed(heading);
+        return (
+          <TocItem
+            active={instance.activeHeading?.id === heading.id}
+            heading={heading}
+            key={heading.id}
+            onClick={handleClick}
+            headingCollapsed={collapsed}
+            onToggle={() => {
+              if (heading.id) {
+                instance.headingCollapseState.set(heading.id, !collapsed);
+              }
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+@transient()
+@view('libro-toc-view')
+export class TOCView extends BaseView implements DisplayView {
+  parent: LibroView | undefined = undefined;
+  protected configurationService: ConfigurationService;
+
+  override view = TocRender;
+
+  @prop()
+  isDisplay: boolean;
+
+  @prop()
+  tocProvider?: LibroTOCProvider;
+
+  @prop()
+  activeHeading: IHeading | undefined;
+
+  protected libroTOCManager: LibroTOCManager;
+
+  @prop()
+  tocTitle: string = l10n.t('大纲');
+
+  @prop()
+  headingCollapseState = new Map<string, boolean>();
+
+  constructor(
+    @inject(LibroTOCManager) libroTOCManager: LibroTOCManager,
+    @inject(ConfigurationService) configurationService: ConfigurationService,
+  ) {
+    super();
+    this.libroTOCManager = libroTOCManager;
+    this.configurationService = configurationService;
+    this.configurationService
+      .get(TOCVisible)
+      .then((value) => {
+        this.isDisplay = value;
+        return;
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  getHeadingIndentSize(level: number): number {
+    return level * 12;
+  }
+
+  override onViewMount() {
+    if (!this.tocProvider && this.parent) {
+      getOrigin(this.parent.initialized)
+        .then(() => {
+          this.tocProvider = this.libroTOCManager.getTOCProvider(this.parent!);
+          this.tocProvider.activeCellChange((header) => {
+            this.activeHeading = header;
+          });
+          return;
+        })
+        .catch(() => {
+          //
+        });
+    }
+  }
+
+  getDisplayHeadings(): DisplayHeading[] {
+    const headings = this.tocProvider?.headings ?? [];
+
+    return headings.map((item, index) => {
+      return {
+        ...item,
+        visible: this.isHeadingVisible(item, index, headings),
+        hasChild: this.hasChildren(item, index, headings),
+      };
+    });
+  }
+
+  protected isHeadingVisible(heading: IHeading, index: number, list: IHeading[]) {
+    if (index === 0) {
+      return true;
+    }
+    let headingCollapsed = false;
+    let parent = heading;
+    for (let i = index - 1; i >= 0; i--) {
+      const current = list[i];
+      if (current.level < parent.level) {
+        parent = current;
+        if (this.isHeadingCollapsed(parent)) {
+          headingCollapsed = true;
+          break;
+        }
+      }
+    }
+
+    return !headingCollapsed;
+  }
+
+  isHeadingCollapsed(heading: IHeading) {
+    return heading.id ? this.headingCollapseState.get(heading.id) ?? false : false;
+  }
+
+  protected hasChildren(current: IHeading, index: number, list: IHeading[]) {
+    if (index === list.length - 1) {
+      return false;
+    }
+    if (current.level < list[index + 1].level) {
+      return true;
+    }
+    return false;
+  }
+
+  override dispose() {
+    this.tocProvider?.dispose();
+  }
+}