@difizen/libro-core 1.0.0 → 1.0.2

package/src/libro-service.ts

@@ -1,7 +1,7 @@
 import type { Disposable } from '@difizen/libro-common/app';
 import { DisposableCollection, Emitter } from '@difizen/libro-common/app';
 import { ThemeService, ViewManager } from '@difizen/libro-common/app';
-import { inject, singleton } from '@difizen/libro-common/app';
+import { inject, singleton, ConfigurationService } from '@difizen/libro-common/app';
 import { prop } from '@difizen/libro-common/app';
 
 import type {
@@ -15,6 +15,7 @@ import {
   ModelFactory,
   NotebookService,
 } from './libro-protocol.js';
+import { SpmReporter } from './libro-setting.js';
 import { LibroViewTracker } from './libro-view-tracker.js';
 
 export interface NotebookViewChange {
@@ -37,6 +38,7 @@ export class LibroService implements NotebookService, Disposable {
   protected toDispose = new DisposableCollection();
   @inject(ModelFactory) protected libroModelFactory: ModelFactory;
   @inject(ViewManager) protected viewManager: ViewManager;
+  @inject(ConfigurationService) configurationService: ConfigurationService;
   @inject(LibroViewTracker) protected libroViewTracker: LibroViewTracker;
   protected themeService: ThemeService;
   @prop()
@@ -142,12 +144,17 @@ export class LibroService implements NotebookService, Disposable {
     return model;
   }
   async getOrCreateView(options: NotebookOption): Promise<NotebookView> {
-    const model = this.getOrCreateModel(options);
+    if (options.id) {
+      const exist = this.libroViewTracker.viewCache.get(options.id);
+      if (exist) {
+        return exist;
+      }
+    }
     const notebookViewPromise = this.viewManager.getOrCreateView<NotebookView>(
       notebookViewFactoryId,
       {
         ...(options || {}),
-        modelId: model.id,
+        modelId: options.modelId || options.id,
       },
     );
     const notebookView = await notebookViewPromise;

package/src/libro-setting.ts

@@ -108,3 +108,14 @@ export const SupportCodeFormat: ConfigurationNode<boolean> = {
     type: 'boolean',
   },
 };
+
+export const SpmReporter: ConfigurationNode<boolean> = {
+  id: 'libro.spm.reporter',
+  description: l10n.t('是否支持数据日志'),
+  title: l10n.t('是否支持数据日志'),
+  type: 'checkbox',
+  defaultValue: false,
+  schema: {
+    type: 'boolean',
+  },
+};

package/src/libro-view-tracker.ts

@@ -1,9 +1,112 @@
-import { singleton } from '@difizen/libro-common/app';
+import { singleton, Emitter } from '@difizen/libro-common/app';
+import { v4 } from 'uuid';
 
-import type { NotebookModel, NotebookView } from './libro-protocol.js';
+import type {
+  ITracker,
+  NotebookModel,
+  NotebookView,
+  Options,
+} from './libro-protocol.js';
+
+export class Tracker implements ITracker {
+  [key: string]: any;
+  startTime?: number;
+  endTime?: number;
+  extra?: any;
+  id: string;
+
+  constructor(id?: string, extra?: any) {
+    this.id = id || v4();
+    this.startTime = Date.now();
+    this.extra = extra || {};
+  }
+
+  clearAll() {
+    this.startTime = undefined;
+    this.endTime = undefined;
+  }
+
+  getDuration() {
+    if (this.endTime && this.startTime) {
+      return this.endTime - this.startTime;
+    }
+    return undefined;
+  }
+
+  log() {
+    const result = {
+      id: this.id,
+      startTime: this.startTime,
+      endTime: this.endTime,
+      duration: this.getDuration(),
+      extra: this.extra,
+    };
+    this.clearAll();
+    return result;
+  }
+}
+
+export class FpsTracker implements ITracker {
+  [key: string]: any;
+  extra?: any;
+  id: string;
+  avgFPS: number;
+  maxFrameTime: number;
+  totalDropped: number;
+  cellsCount: number;
+
+  constructor(id?: string, extra?: any) {
+    this.id = id || v4();
+    this.extra = extra || {};
+  }
+
+  log() {
+    const result = {
+      id: this.id,
+      avgFPS: this.avgFPS,
+      maxFrameTime: this.maxFrameTime,
+      totalDropped: this.totalDropped,
+      extra: this.extra,
+      cellsCount: this.cellsCount,
+    };
+    return result;
+  }
+}
 
 @singleton()
 export class LibroViewTracker {
   viewCache: Map<string, NotebookView> = new Map();
   modelCache: Map<string, NotebookModel> = new Map();
+  trackers: Map<string, ITracker> = new Map();
+  isEnabledSpmReporter: boolean;
+
+  protected onTrackerEmitter: Emitter<Record<string, any>> = new Emitter();
+  get onTracker() {
+    return this.onTrackerEmitter.event;
+  }
+
+  getOrCreateTrackers(options: Options) {
+    const id = options.id || v4();
+    const exist = this.trackers.get(id);
+    if (exist) {
+      if (options['type'] !== 'fps' && !exist['startTime']) {
+        exist['startTime'] = Date.now();
+      }
+      return exist;
+    }
+
+    const tracker = options['type'] === 'fps' ? new FpsTracker(id) : new Tracker(id);
+    this.trackers.set(id, tracker);
+    return tracker;
+  }
+
+  tracker(tracker: ITracker) {
+    const trackerLog = tracker.log();
+    this.trackers.delete(tracker.id);
+    this.onTrackerEmitter.fire(trackerLog);
+  }
+
+  hasTracker(id: string) {
+    return this.trackers.has(id);
+  }
 }

package/src/libro-view.tsx

@@ -26,7 +26,8 @@ import {
   ConfigurationService,
   useConfigurationValue,
 } from '@difizen/libro-common/app';
-import { FloatButton, Button, Spin } from 'antd';
+import { l10n } from '@difizen/libro-common/l10n';
+import { FloatButton, Button, Spin, message } from 'antd';
 import type { FC, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
 import { v4 } from 'uuid';
@@ -62,8 +63,9 @@ import {
   HeaderToolbarVisible,
   RightContentFixed,
 } from './libro-setting.js';
+import { LibroViewTracker } from './libro-view-tracker.js';
 import { LibroSlotManager, LibroSlotView } from './slot/index.js';
-import { useSize } from './utils/index.js';
+import { useFrameMonitor, useSize } from './utils/index.js';
 import { VirtualizedManagerHelper } from './virtualized-manager-helper.js';
 import type { VirtualizedManager } from './virtualized-manager.js';
 import './index.less';
@@ -83,6 +85,19 @@ export const LibroContentComponent = memo(function LibroContentComponent() {
   const HeaderRender = getOrigin(instance.headerRender);
   const [headerVisible] = useConfigurationValue(HeaderToolbarVisible);
   const [rightContentFixed] = useConfigurationValue(RightContentFixed);
+  useFrameMonitor(
+    libroViewContentRef,
+    instance.libroViewTracker.isEnabledSpmReporter,
+    (payload) => {
+      const fpsTracker = instance.libroViewTracker.getOrCreateTrackers({ type: 'fps' });
+      fpsTracker['avgFPS'] = payload.summary.avgFPS;
+      fpsTracker['maxFrameTime'] = payload.summary.maxFrameTime;
+      fpsTracker['totalDropped'] = payload.summary.totalDropped;
+      fpsTracker['extra'] = payload.frames;
+      fpsTracker['cells'] = instance.model.cells.length;
+      instance.libroViewTracker.tracker(fpsTracker);
+    },
+  );
 
   const handleScroll = useCallback(() => {
     instance.cellScrollEmitter.fire();
@@ -325,7 +340,7 @@ export class LibroView extends BaseView implements NotebookView {
   @inject(LibroService) libroService: LibroService;
   @inject(LibroSlotManager) libroSlotManager: LibroSlotManager;
   @inject(LibroContextKey) contextKey: LibroContextKey;
-
+  @inject(LibroViewTracker) libroViewTracker: LibroViewTracker;
   @inject(ViewManager) protected viewManager: ViewManager;
   @inject(ConfigurationService) protected configurationService: ConfigurationService;
 
@@ -350,6 +365,8 @@ export class LibroView extends BaseView implements NotebookView {
   @prop()
   saving?: boolean;
 
+  options: NotebookOption;
+
   onSaveEmitter: Emitter<boolean> = new Emitter();
   get onSave() {
     return this.onSaveEmitter.event;
@@ -386,6 +403,7 @@ export class LibroView extends BaseView implements NotebookView {
     if (options.id) {
       this.id = options.id;
     }
+    this.options = options;
     this.notebookService = notebookService;
     this.model = this.notebookService.getOrCreateModel(options);
     this.collapseService = collapseServiceFactory({ view: this });
@@ -463,6 +481,24 @@ export class LibroView extends BaseView implements NotebookView {
     this.libroService.active = this;
     this.libroSlotManager.setup(this);
 
+    if (this.libroViewTracker.isEnabledSpmReporter) {
+      this.libroViewTracker.getOrCreateTrackers({
+        id: this.options.modelId || this.options.id,
+      });
+    }
+    if (
+      this.model.cells.length > 30 ||
+      (this.options['fileSize'] || 0) / (1024 * 1024) >= 5
+    ) {
+      message.warning(
+        <div>
+          {l10n.t(
+            '即将打开的文件(内容过大 / cell 过多)，可能会导致操作卡顿，请耐心等待～',
+          )}
+          <Button type="link">{l10n.t('我知道了')}</Button>
+        </div>,
+      );
+    }
     // this.libroService.libroPerformanceStatistics.setRenderEnd(new Date());
 
     // console.log(
@@ -519,11 +555,27 @@ export class LibroView extends BaseView implements NotebookView {
   };
 
   addCell = async (option: CellOptions, position?: number) => {
+    if (this.libroViewTracker.isEnabledSpmReporter && option.id) {
+      const id = option.id + this.id;
+      const libroTracker = this.libroViewTracker.getOrCreateTrackers({
+        id: id + 'add',
+      });
+      libroTracker['extra'].cellsCount = this.model.cells.length;
+      libroTracker['extra'].cellOperation = 'add';
+    }
     const cellView = await this.getCellViewByOption(option);
     this.model.addCell(cellView, position);
   };
 
   addCellAbove = async (option: CellOptions, position?: number) => {
+    if (this.libroViewTracker.isEnabledSpmReporter && option.id) {
+      const id = option.id + this.id;
+      const libroTracker = this.libroViewTracker.getOrCreateTrackers({
+        id: id + 'add',
+      });
+      libroTracker['extra'].cellsCount = this.model.cells.length;
+      libroTracker['extra'].cellOperation = 'add';
+    }
     const cellView = await this.getCellViewByOption(option);
     this.model.addCell(cellView, position, 'above');
   };
@@ -548,6 +600,14 @@ export class LibroView extends BaseView implements NotebookView {
   };
 
   deleteCell = (cell: CellView) => {
+    if (this.libroViewTracker.isEnabledSpmReporter && cell.model.id) {
+      const id = cell.model.id + this.id;
+      const libroTracker = this.libroViewTracker.getOrCreateTrackers({
+        id: id + 'delete',
+      });
+      libroTracker['extra'].cellsCount = this.model.cells.length;
+      libroTracker['extra'].cellOperation = 'delete';
+    }
     const deleteIndex = this.model.getCells().findIndex((item) => {
       return equals(item, cell);
     });

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 import { useUnmount } from '@difizen/libro-common/app';
 import type { RefObject } from 'react';
+import { useEffect } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 function useRafState<S>(initialState?: S) {
@@ -46,3 +47,144 @@ export function useSize(ref: RefObject<HTMLDivElement>): Size | undefined {
   }, [ref, setSize]);
   return size;
 }
+
+interface FrameMetrics {
+  timestamp: number;
+  fps: number;
+  frameTime: number;
+  droppedFrames: number;
+}
+
+export const useFrameMonitor = (
+  scrollContainerRef: React.RefObject<HTMLElement>,
+  isEnabledSpmReporter: boolean,
+  onReport?: (payload: { frames: FrameMetrics[]; summary: any }) => void,
+) => {
+  const frameData = useRef<FrameMetrics[]>([]);
+  const lastFrameTime = useRef(performance.now());
+  const frameCount = useRef(0);
+  const lastScrollPos = useRef(0);
+  const rafId = useRef<number>();
+  const isMonitoring = useRef(false);
+  // const reportTimeout = useRef<NodeJS.Timeout>();
+  const intervalId = useRef<NodeJS.Timeout>();
+  const scrollDebounceTimer = useRef<NodeJS.Timeout>();
+
+  const stopFrameCapture = useCallback(() => {
+    if (rafId.current) {
+      cancelAnimationFrame(rafId.current);
+    }
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+    }
+    isMonitoring.current = false;
+    frameCount.current = 0;
+    lastFrameTime.current = performance.now();
+  }, []);
+
+  const startFrameCapture = useCallback(() => {
+    if (isMonitoring.current) {
+      return;
+    }
+
+    const calculateFPS = () => {
+      if (!isMonitoring.current) {
+        return;
+      }
+      const now = performance.now();
+      const delta = now - lastFrameTime.current;
+      frameData.current.push({
+        timestamp: now,
+        fps: Math.round((frameCount.current * 1000) / delta),
+        frameTime: delta / frameCount.current,
+        droppedFrames: Math.max(0, Math.floor(delta / 16.67) - frameCount.current),
+      });
+      lastFrameTime.current = now;
+      frameCount.current = 0;
+    };
+
+    const loop = () => {
+      if (isMonitoring.current) {
+        frameCount.current++;
+        rafId.current = requestAnimationFrame(loop);
+      }
+    };
+
+    isMonitoring.current = true;
+    frameCount.current = 0;
+    lastFrameTime.current = performance.now();
+
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+    }
+    intervalId.current = setInterval(calculateFPS, 1500); // 每秒生成一个数据点
+    rafId.current = requestAnimationFrame(loop);
+  }, []);
+
+  const reportFrames = useCallback(() => {
+    if (frameData.current.length === 0) {
+      return;
+    }
+
+    const send = () => {
+      const payload = {
+        frames: frameData.current,
+        summary: {
+          avgFPS:
+            frameData.current.reduce((a, b) => a + b.fps, 0) / frameData.current.length,
+          maxFrameTime: Math.max(...frameData.current.map((f) => f.frameTime)),
+          totalDropped: frameData.current.reduce((a, b) => a + b.droppedFrames, 0),
+        },
+      };
+      if (onReport) {
+        onReport(payload); // 触发外部回调
+      }
+      frameData.current = [];
+    };
+
+    requestIdleCallback(send, { timeout: 1000 }) || setTimeout(send, 0);
+  }, [onReport]); // 添加 onReport 依赖
+
+  useEffect(() => {
+    if (!isEnabledSpmReporter) {
+      return;
+    }
+    const container = scrollContainerRef.current || (window as unknown as HTMLElement);
+
+    const handleScroll = () => {
+      // const currentScroll =
+      //   (container as Window).scrollY || (container as HTMLElement).scrollTop;
+      const currentScroll =
+        container instanceof Window ? container.scrollY : container.scrollTop;
+      const scrollDelta = Math.abs(currentScroll - lastScrollPos.current);
+
+      if (scrollDelta > 10) {
+        if (!isMonitoring.current) {
+          startFrameCapture();
+        }
+
+        clearTimeout(scrollDebounceTimer.current);
+        scrollDebounceTimer.current = setTimeout(() => {
+          stopFrameCapture();
+          reportFrames();
+        }, 2000);
+      }
+
+      lastScrollPos.current = currentScroll;
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener('scroll', handleScroll);
+      stopFrameCapture();
+    };
+  }, [
+    scrollContainerRef,
+    startFrameCapture,
+    stopFrameCapture,
+    reportFrames,
+    isEnabledSpmReporter,
+  ]);
+
+  return { frameData, reportFrames };
+};