@difizen/libro-core 0.1.1 → 0.1.2

package/src/settings/setting-editor/setting-editor-view.tsx

@@ -0,0 +1,93 @@
+import {
+  BaseView,
+  view,
+  singleton,
+  ViewRender,
+  inject,
+  ViewManager,
+  useInject,
+  ViewInstance,
+  prop,
+  URI,
+  ConfigurationRegistry,
+} from '@difizen/mana-app';
+import { SplitPanel } from '@difizen/mana-react';
+import { useEffect, useState } from 'react';
+
+import { ConfigurationPanelView } from './configuration-panel-view.js';
+import { SettingTreeView } from './setting-tree-view.js';
+
+export const SettingEditorComponent: React.FC = () => {
+  const viewInstance = useInject<SettingEditorView>(ViewInstance);
+  const viewManager = useInject<ViewManager>(ViewManager);
+  const PanelView = viewInstance.configurationPanel?.view;
+
+  const [treeView, setTreeView] = useState<SettingTreeView>();
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(SettingTreeView)
+      .then((item) => {
+        setTreeView(item);
+        return;
+      })
+      .catch(console.error);
+  });
+
+  return (
+    <SplitPanel id="">
+      <SplitPanel.Pane className="" id="" defaultSize={200}>
+        {treeView && <ViewRender view={treeView} />}
+      </SplitPanel.Pane>
+      <SplitPanel.Pane className="" id="" flex={1}>
+        {PanelView && <PanelView />}
+      </SplitPanel.Pane>
+    </SplitPanel>
+  );
+};
+
+@singleton()
+@view('SettingEditor')
+export class SettingEditorView extends BaseView {
+  override view = SettingEditorComponent;
+
+  protected readonly configurationRegistry: ConfigurationRegistry;
+  protected readonly viewManager: ViewManager;
+
+  constructor(
+    @inject(ConfigurationRegistry) configurationRegistry: ConfigurationRegistry,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super();
+    this.configurationRegistry = configurationRegistry;
+    this.viewManager = viewManager;
+  }
+
+  @prop()
+  configurationPanel?: ConfigurationPanelView;
+
+  override async onViewMount() {
+    await this.initFileView();
+    await this.initPanel();
+  }
+
+  async initPanel() {
+    const namespace = this.configurationRegistry.getRootNamespaces().at(0);
+    if (namespace) {
+      this.configurationPanel =
+        await this.viewManager.getOrCreateView<ConfigurationPanelView>(
+          ConfigurationPanelView,
+        );
+      this.configurationPanel.configurationNodes =
+        this.configurationRegistry.getConfigurationByNamespace([namespace], false);
+    }
+  }
+
+  async initFileView() {
+    const treeView =
+      await this.viewManager.getOrCreateView<SettingTreeView>(SettingTreeView);
+    // if (!this.viewStorage.canStoreView) {
+    treeView.model.rootVisible = false;
+    treeView.model.location = new URI('file:///');
+    // }
+  }
+}

package/src/settings/setting-editor/setting-tree-service.ts

@@ -0,0 +1,82 @@
+import { inject, ConfigurationRegistry, URI } from '@difizen/mana-app';
+import { FileService, singleton } from '@difizen/mana-app';
+import type { FileStatWithMetadata } from '@difizen/mana-app';
+
+const defaultFileMeta = {
+  mtime: 0,
+  ctime: 0,
+  etag: '',
+  size: 0,
+  isFile: false,
+  isDirectory: false,
+  isSymbolicLink: false,
+};
+
+@singleton({ contrib: FileService })
+export class SettingTreeService extends FileService {
+  protected readonly configurationRegistry: ConfigurationRegistry;
+  constructor(
+    @inject(ConfigurationRegistry) configurationRegistry: ConfigurationRegistry,
+  ) {
+    super();
+    this.configurationRegistry = configurationRegistry;
+  }
+
+  override async resolve(
+    resource: URI,
+    // options?: ResolveFileOptions | undefined,
+  ): Promise<FileStatWithMetadata> {
+    if (resource.path.isRoot) {
+      const roots = this.configurationRegistry.getRootNamespaces().map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: false,
+          isDirectory: true,
+          name: item,
+          resource: URI.resolve(resource, item),
+        };
+      });
+      return {
+        ...defaultFileMeta,
+        isDirectory: true,
+        name: resource.displayName,
+        resource,
+        children: roots,
+      };
+    }
+
+    const name = resource.path.name;
+
+    const namespaces = this.configurationRegistry
+      .getChildNamespaces([name])
+      .map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: false,
+          isDirectory: true,
+          name: item.join('.'),
+          resource: URI.resolve(resource, item.join('.')),
+        };
+      });
+
+    const configs = this.configurationRegistry
+      .getConfigurationByNamespace([name])
+      .map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: true,
+          name: item.title ?? '',
+          resource: URI.resolve(resource, item.id),
+        };
+      });
+
+    return {
+      ...defaultFileMeta,
+      isFile: false,
+      isDirectory: true,
+      name: resource.displayName,
+      resource,
+      children: [...namespaces, ...configs],
+    };
+  }
+}

package/src/settings/setting-editor/setting-tree-view.tsx

@@ -0,0 +1,95 @@
+import {
+  CommandRegistry,
+  FileStatNode,
+  FileTreeModel,
+  FileTreeView,
+  FileTreeViewModule,
+  inject,
+  LabelProvider,
+  SelectionService,
+  singleton,
+  TreeDecoratorService,
+  TreeProps,
+  TreeViewComponent,
+  TreeViewDecorator,
+  view,
+} from '@difizen/mana-app';
+import type { TreeNode } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import React, { forwardRef } from 'react';
+import './index.less';
+
+export const SettingTreeFactoryId = 'setting-editor-tree';
+export const FileTreeComponent = forwardRef<HTMLDivElement, any>(
+  function FileTreeComponent(props, containerRef: React.ForwardedRef<HTMLDivElement>) {
+    return (
+      <div className="libro-configuration-tree" ref={containerRef}>
+        <div className="ai-infra-configuration-header">{l10n.t('文件')}</div>
+        <div className="libro-configuration-content">
+          <TreeViewComponent />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const SettingTreeComponent: React.FC = () => {
+  return <></>;
+};
+
+function jump(h: string) {
+  const url = location.href; //Save down the URL without hash.
+  location.href = '#' + h; //Go to the target element.
+  history.replaceState(null, '', url); //Don't like hashes. Changing it back.
+}
+
+@singleton()
+@view(SettingTreeFactoryId, FileTreeViewModule)
+export class SettingTreeView extends FileTreeView {
+  protected command: CommandRegistry;
+  override readonly props: TreeProps;
+  override readonly model: FileTreeModel;
+  override readonly treeViewDecorator: TreeViewDecorator;
+  override readonly selectionService: SelectionService;
+  override readonly labelProvider: LabelProvider;
+  protected override readonly decoratorService: TreeDecoratorService;
+
+  constructor(
+    @inject(CommandRegistry) command: CommandRegistry,
+    @inject(TreeProps) props: TreeProps,
+    @inject(FileTreeModel) model: FileTreeModel,
+    @inject(TreeViewDecorator) treeViewDecorator: TreeViewDecorator,
+    @inject(SelectionService) selectionService: SelectionService,
+    @inject(LabelProvider) labelProvider: LabelProvider,
+    @inject(TreeDecoratorService)
+    decoratorService: TreeDecoratorService,
+  ) {
+    super(
+      props,
+      model,
+      treeViewDecorator,
+      selectionService,
+      labelProvider,
+      decoratorService,
+    );
+    this.command = command;
+    this.props = props;
+    this.model = model;
+    this.treeViewDecorator = treeViewDecorator;
+    this.selectionService = selectionService;
+    this.labelProvider = labelProvider;
+    this.decoratorService = decoratorService;
+
+    this.className += ` libro-configuration-tree`;
+  }
+
+  override handleClickEvent(
+    node: TreeNode | undefined,
+    event: React.MouseEvent<HTMLElement>,
+  ): void {
+    if (node && FileStatNode.is(node) && node.fileStat.isFile) {
+      jump(node.fileStat.resource.path.base);
+    }
+    super.handleClickEvent(node, event);
+  }
+}

package/src/settings/settings-contribution.tsx

@@ -0,0 +1,24 @@
+import { ModalContribution, singleton, ToolbarContribution } from '@difizen/mana-app';
+import type { ToolbarRegistry } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { DocumentCommands } from '../command/document-commands.js';
+
+import { SettingsModal } from './settings-modal.js';
+
+@singleton({ contrib: [ModalContribution, ToolbarContribution] })
+export class SettingsContribution implements ModalContribution, ToolbarContribution {
+  registerModal() {
+    return SettingsModal;
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry) {
+    registry.registerItem({
+      id: DocumentCommands['OpenSettings'].id,
+      icon: DocumentCommands['OpenSettings'].icon,
+      command: DocumentCommands['OpenSettings'].id,
+      order: 'z',
+      tooltip: l10n.t('设置'),
+    });
+  }
+}

package/src/settings/settings-modal.less

@@ -0,0 +1,3 @@
+.libro-settings-modal {
+  background-color: #fff !important;
+}

package/src/settings/settings-modal.tsx

@@ -0,0 +1,50 @@
+import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import { ConfigurationRegistry } from '@difizen/mana-app';
+import { useInject, ViewManager, ViewRender } from '@difizen/mana-app';
+import { Modal } from 'antd';
+import { useEffect, useState } from 'react';
+
+import { ConfigurationPanelView } from './setting-editor/index.js';
+import { LibroUserSettingsNamespace } from './settings-protocol.js';
+import './settings-modal.less';
+
+export function SettingsModalComponent({ visible, close }: ModalItemProps<void>) {
+  const viewManager = useInject(ViewManager);
+  const configRegistry = useInject(ConfigurationRegistry);
+  const [settingEditorView, setSettingEditorView] = useState<ConfigurationPanelView>();
+
+  useEffect(() => {
+    viewManager
+      .getOrCreateView<ConfigurationPanelView>(ConfigurationPanelView)
+      .then((view) => {
+        const config = configRegistry.getConfigurationByNamespace(
+          [LibroUserSettingsNamespace],
+          false,
+        );
+        view.configurationNodes = config;
+        view.className = 'libro-settings-modal';
+        setSettingEditorView(view);
+        return;
+      })
+      .catch((e) => {
+        //
+      });
+  }, [configRegistry, viewManager]);
+
+  return (
+    <Modal
+      title="设置"
+      open={visible}
+      onOk={() => close()}
+      onCancel={() => close()}
+      width={600}
+    >
+      {settingEditorView && <ViewRender view={settingEditorView} />}
+    </Modal>
+  );
+}
+
+export const SettingsModal: ModalItem = {
+  id: 'settings.modal',
+  component: SettingsModalComponent,
+};

package/src/settings/settings-protocol.ts

@@ -0,0 +1,7 @@
+import type { ConfigurationStorage } from '@difizen/mana-app';
+
+export const LibroUserSettingsNamespace = 'libro.user';
+export const LibroUserSettingStorage: ConfigurationStorage = {
+  id: '__libro.user.storage__',
+  priority: 100,
+};

package/src/slot/libro-slot-manager.ts

@@ -9,15 +9,13 @@ import { LibroExtensionSlotContribution } from './libro-slot-protocol.js';
 
 @singleton()
 export class LibroSlotManager {
-  protected slotViewManager: SlotViewManager;
+  @inject(SlotViewManager) slotViewManager: SlotViewManager;
   protected readonly libroExtraProvider: Contribution.Provider<LibroExtensionSlotContribution>;
   constructor(
-    @inject(SlotViewManager) slotViewManager: SlotViewManager,
     @contrib(LibroExtensionSlotContribution)
     libroExtraProvider: Contribution.Provider<LibroExtensionSlotContribution>,
   ) {
     this.libroExtraProvider = libroExtraProvider;
-    this.slotViewManager = slotViewManager;
   }
 
   getSlotName(libro: LibroView, slot: LibroSlot): string {

package/src/slot/libro-slot-view.tsx

@@ -1,15 +1,12 @@
 import { DefaultSlotView, view, ViewRender, ViewInstance } from '@difizen/mana-app';
 import { transient } from '@difizen/mana-app';
 import { equals, prop, useInject } from '@difizen/mana-app';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 import { isDisplayView } from './libro-slot-protocol.js';
 
 export const LibroExtensionViewComponent = forwardRef(
-  function LibroExtensionViewComponent(
-    _props,
-    ref: React.ForwardedRef<HTMLDivElement>,
-  ) {
+  function LibroExtensionViewComponent(props, ref: React.ForwardedRef<HTMLDivElement>) {
     const instance = useInject<LibroSlotView>(ViewInstance);
     //过滤出实现了DisplayView接口的View,用于控制抢占逻辑
     const filteredChildren = instance.children.filter((item) => {

package/src/theme/libro-color-registry.ts

@@ -366,6 +366,12 @@ export class LibroColorRegistry implements ColorContribution {
         defaults: { dark: '#788491', light: '#9f9f9f' },
         description: '',
       },
+
+      {
+        id: 'libro.cell.selected.bg.color',
+        defaults: { dark: '#353638', light: '#F1FAFF' },
+        description: '',
+      },
     );
   }
 }

package/src/toolbar/all-outputs-scroll-icon.tsx

@@ -0,0 +1,19 @@
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import type { FC } from 'react';
+
+import type { LibroView } from '../libro-view.js';
+import { DisableOutputScroll } from '../material-from-designer.js';
+
+export const AllOutputsScrollIcon: FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  return (
+    <div
+      className={`libro-all-outputs-scroll-button ${
+        libroView.outputsScroll ? 'active' : ''
+      }`}
+    >
+      <DisableOutputScroll />
+    </div>
+  );
+};

package/src/toolbar/libro-toolbar.tsx

@@ -4,24 +4,41 @@ import {
   ModalService,
   singleton,
   ToolbarContribution,
+  useObserve,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 
 import { DocumentCommands, NotebookCommands } from '../command/index.js';
+import { LibroService } from '../libro-service.js';
 
+import { AllOutputsScrollIcon } from './all-outputs-scroll-icon.js';
 import { ToolItemSelect } from './change-cell-to-selector.js';
 import { HideAllSelect } from './hide-all-selector.js';
 // import { RunSelect } from './run-selector';
 import { SaveIcon } from './save-icon.js';
 import { SideToolbarMoreSelect } from './side-toolar-more-select.js';
 // import { SideToolbarRunSelect } from './side-toolbar-run-select';
+
+function OutputsScorllTooltip({ libroService }: { libroService: LibroService }) {
+  const service = useObserve(libroService);
+
+  return (
+    <div className="libro-tooltip">
+      <span className="libro-tooltip-text">
+        {l10n.t(
+          service.active?.outputsScroll
+            ? '取消固定 Output 展示高度'
+            : '固定 Output 展示高度',
+        )}
+      </span>
+    </div>
+  );
+}
+
 @singleton({ contrib: [ToolbarContribution] })
 export class LibroToolbarContribution implements ToolbarContribution {
-  protected readonly modalService: ModalService;
-
-  constructor(@inject(ModalService) modalService: ModalService) {
-    this.modalService = modalService;
-  }
+  @inject(ModalService) protected readonly modalService: ModalService;
+  @inject(LibroService) protected readonly libroService: LibroService;
 
   registerToolbarItems(registry: ToolbarRegistry): void {
     registry.registerItem({
@@ -155,6 +172,14 @@ export class LibroToolbarContribution implements ToolbarContribution {
       group: ['group3'],
       order: 'h2',
     });
+    registry.registerItem({
+      id: NotebookCommands['EnableOrDisableAllOutputScrolling'].id,
+      command: NotebookCommands['EnableOrDisableAllOutputScrolling'].id,
+      tooltip: <OutputsScorllTooltip libroService={this.libroService} />,
+      group: ['group3'],
+      order: 'h2',
+      icon: AllOutputsScrollIcon,
+    });
     registry.registerItem({
       id: NotebookCommands['HideAllCell'].id,
       command: NotebookCommands['HideAllCell'].id,

package/src/toolbar/restart-clear-outputs-modal.tsx

@@ -5,11 +5,11 @@ import { useCallback } from 'react';
 import { NotebookCommands } from '../command/index.js';
 import type { LibroView } from '../libro-view.js';
 
-export const RestartClearOutputModalComponent: React.FC<ModalItemProps<LibroView>> = ({
+export function RestartClearOutputModalComponent({
   visible,
   close,
   data,
-}: ModalItemProps<LibroView>) => {
+}: ModalItemProps<LibroView>) {
   const handleRestart = useCallback(() => {
     data?.restartClearOutput();
     close();
@@ -29,7 +29,7 @@ export const RestartClearOutputModalComponent: React.FC<ModalItemProps<LibroView
       Do you want to restart the current kernel? All variables will be lost.
     </Modal>
   );
-};
+}
 
 export const RestartClearOutputModal: ModalItem<LibroView> = {
   id: NotebookCommands['RestartClearOutput'].id,

package/src/toolbar/shutdown-modal.tsx

@@ -5,11 +5,11 @@ import { useCallback } from 'react';
 import { NotebookCommands } from '../command/index.js';
 import type { LibroView } from '../libro-view.js';
 
-export const ShutdownModalComponent: React.FC<ModalItemProps<LibroView>> = ({
+export function ShutdownModalComponent({
   visible,
   close,
   data,
-}: ModalItemProps<LibroView>) => {
+}: ModalItemProps<LibroView>) {
   const handleShutdown = useCallback(() => {
     data?.closeAndShutdown();
     close();
@@ -29,7 +29,7 @@ export const ShutdownModalComponent: React.FC<ModalItemProps<LibroView>> = ({
       Do you want to shutdown the current kernel?.
     </Modal>
   );
-};
+}
 
 export const ShutdownModal: ModalItem<LibroView> = {
   id: NotebookCommands['CloseAndShutdown'].id,

package/src/toolbar/side-toolar-more-select.tsx

@@ -4,6 +4,7 @@ import {
   getOrigin,
   ToolbarInstance,
   useInject,
+  useObserve,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import { Menu, MenuContext } from '@difizen/mana-react';
@@ -93,7 +94,7 @@ export const LibroSideToolbarMoreMenu: React.FC = () => {
   const toolbar = useInject<Toolbar>(ToolbarInstance);
   const data = toolbar.currentArgs as LibroToolbarArags;
   const args = getOrigin(data) || [];
-  const cell = args[0];
+  const cell = useObserve(args[0]);
   if (!cell) {
     return null;
   }

package/src/virtualized-manager-helper.ts

@@ -0,0 +1,29 @@
+import { inject, prop, singleton } from '@difizen/mana-app';
+
+import type { NotebookModel } from './libro-protocol.js';
+import { VirtualizedManagerOptionFactory } from './libro-protocol.js';
+import type { VirtualizedManager } from './virtualized-manager.js';
+
+@singleton()
+export class VirtualizedManagerHelper {
+  @inject(VirtualizedManagerOptionFactory) factory: VirtualizedManagerOptionFactory;
+
+  @prop()
+  current?: VirtualizedManager;
+  protected virtualizedManagerHelperMap = new Map<string, VirtualizedManager>();
+
+  setCurrent(libroModel: NotebookModel) {
+    const virtualizedManagerHelper = this.getOrCreate(libroModel);
+    this.current = virtualizedManagerHelper;
+  }
+
+  getOrCreate(libroModel: NotebookModel): VirtualizedManager {
+    const exist = this.virtualizedManagerHelperMap.get(libroModel.id);
+    if (exist) {
+      return exist;
+    }
+    const virtualizedManagerHelper = this.factory({ libroModel: libroModel });
+    this.virtualizedManagerHelperMap.set(libroModel.id, virtualizedManagerHelper);
+    return virtualizedManagerHelper;
+  }
+}

package/src/virtualized-manager.ts

@@ -0,0 +1,34 @@
+import { transient, prop } from '@difizen/mana-app';
+
+export interface IVirtualizedManager {
+  openVirtualized: (length: number, size?: number, path?: string) => Promise<boolean>;
+  isVirtualized: boolean;
+}
+
+@transient()
+export class VirtualizedManager implements IVirtualizedManager {
+  /**
+   * 因为进行isVirtualized判断过后才会渲染list
+   * 所以它用于滚动到某个cell的判断依据是没有问题的。
+   */
+  @prop()
+  isVirtualized = false;
+  /**
+   *
+   * @param length cell个数
+   * @param size undefined 或者 单位 为B
+   * @returns 是否使用虚拟滚动
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  openVirtualized = async (length: number, size?: number, path?: string) => {
+    // this.isVirtualized = true;
+    // return true;
+    if (length > 100 || (size && size > 4)) {
+      this.isVirtualized = true;
+      return true;
+    } else {
+      this.isVirtualized = false;
+      return false;
+    }
+  };
+}

package/es/configuration/libro-configuration-contribution.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"libro-configuration-contribution.d.ts","sourceRoot":"","sources":["../../src/configuration/libro-configuration-contribution.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAc9D,qBACa,8BAA+B,YAAW,yBAAyB;IAC9E,sBAAsB;CAYvB"}

package/es/configuration/libro-configuration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"libro-configuration.d.ts","sourceRoot":"","sources":["../../src/configuration/libro-configuration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,OAAO,CAS3D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,iBAAiB,CAAC,OAAO,CAS5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,OAAO,CAS7D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,OAAO,CAS3D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,iBAAiB,CAAC,OAAO,CAS/D,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,OAAO,CAStD,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,iBAAiB,CAAC,OAAO,CASnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,OAAO,CASxD,CAAC"}