@difizen/libro-core 0.0.0-snapshot-20241017072317

package/src/toolbar/index.less

@@ -0,0 +1,59 @@
+// The prefix to use on all css classes from ant.
+@ant-prefix: ant;
+
+.libro-hide-selector-menu {
+  .@{ant-prefix}-dropdown-menu {
+    background-color: var(--mana-libro-popover-background-color);
+  }
+  .@{ant-prefix}-dropdown-menu-item {
+    color: var(--mana-libro-toolbar-menu-label-color);
+  }
+  .@{ant-prefix}-dropdown-menu-item-disabled {
+    color: var(--mana-libro-toolbar-menu-disabled-label-color) !important;
+  }
+  .@{ant-prefix}-dropdown-menu-item.@{ant-prefix}-dropdown-menu-item-disabled:hover,
+  .@{ant-prefix}-dropdown-menu-item:hover {
+    background-color: var(--mana-libro-menu-hover-color);
+  }
+}
+
+.libro-cell-selector {
+  background-color: var(--mana-libro-popover-background-color) !important;
+  .@{ant-prefix}-select-item-option-selected:not(
+      .@{ant-prefix}-select-item-option-disabled
+    ),
+  .@{ant-prefix}-select-item-option-active:not(
+      .@{ant-prefix}-select-item-option-disabled
+    ) {
+    background-color: var(--mana-libro-menu-hover-color) !important;
+  }
+  .@{ant-prefix}-select-item-option-content {
+    color: var(--mana-libro-toolbar-menu-label-color);
+  }
+}
+
+.libro-restart-kernel-modal,
+.libro-shut-down-kernel-modal {
+  .@{ant-prefix}-modal-content {
+    background-color: var(--mana-libro-popover-background-color) !important;
+  }
+  .@{ant-prefix}-modal-header {
+    background: var(--mana-libro-popover-background-color);
+    border-color: var(--mana-libro-table-bottom-border-color);
+  }
+  .@{ant-prefix}-modal-title {
+    color: var(--mana-libro-modal-title-color);
+  }
+  .@{ant-prefix}-modal-body {
+    color: var(--mana-libro-modal-content-color);
+  }
+  .@{ant-prefix}-modal-footer {
+    border-color: var(--mana-libro-table-bottom-border-color);
+  }
+  .@{ant-prefix}-btn-primary {
+    background: var(--mana-libro-btn-primary-background-color);
+  }
+  .@{ant-prefix}-modal-close {
+    color: var(--mana-libro-close-color);
+  }
+}

package/src/toolbar/index.ts

@@ -0,0 +1,3 @@
+export * from './libro-toolbar.js';
+export * from './libro-toolbar-protocol.js';
+export * from './module.js';

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

@@ -0,0 +1,4 @@
+import type { CellView } from '../libro-protocol.js';
+import type { LibroView } from '../libro-view.js';
+
+export type LibroToolbarArags = [CellView, LibroView, string] | undefined;

package/src/toolbar/libro-toolbar.tsx

@@ -0,0 +1,231 @@
+import type { ToolbarRegistry } from '@difizen/mana-app';
+import { isMacintosh } from '@difizen/mana-app';
+import {
+  inject,
+  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 {
+  @inject(ModalService) protected readonly modalService: ModalService;
+  @inject(LibroService) protected readonly libroService: LibroService;
+
+  registerToolbarItems(registry: ToolbarRegistry): void {
+    registry.registerItem({
+      id: DocumentCommands['Save'].id,
+      command: DocumentCommands['Save'].id,
+      icon: SaveIcon,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('保存')}</span>
+          <span className="libro-tooltip-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + S`}</span>
+        </div>
+      ),
+
+      group: ['group1'],
+      order: '1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['Interrupt'].id,
+      command: NotebookCommands['Interrupt'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('中断')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'b-all',
+    });
+    registry.registerItem({
+      id: NotebookCommands['CloseAndShutdown'].id,
+      command: NotebookCommands['CloseAndShutdown'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('关闭内核')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'b-all',
+    });
+    registry.registerItem({
+      id: NotebookCommands['RestartClearOutput'].id,
+      command: NotebookCommands['RestartClearOutput'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('重启并清空输出')}</span>
+        </div>
+      ),
+
+      showLabelInline: true,
+      group: ['group2'],
+      order: 'c-all',
+    });
+    registry.registerItem({
+      id: DocumentCommands['FormatCell'].id,
+      command: DocumentCommands['FormatCell'].id,
+      tooltip: () => (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('格式化代码')}</span>
+          <span className="libro-tooltip-keybind">{`Shift+${isMacintosh ? 'Option' : 'Alt'}+F`}</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'd',
+    });
+    registry.registerItem({
+      id: NotebookCommands['MoveCellUp'].id,
+      command: NotebookCommands['MoveCellUp'].id,
+      tooltip: () => (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('上移')}</span>
+          <span className="libro-tooltip-keybind">Up</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'e',
+    });
+    registry.registerItem({
+      id: NotebookCommands['MoveCellDown'].id,
+      command: NotebookCommands['MoveCellDown'].id,
+      tooltip: () => (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('下移')}</span>
+          <span className="libro-tooltip-keybind">Down</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar1'],
+      order: 'f',
+    });
+    registry.registerItem({
+      id: NotebookCommands['InsertCellBelow'].id,
+      command: NotebookCommands['InsertCellBelow'].id,
+      tooltip: () => (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('增加')}</span>
+          <span className="libro-tooltip-keybind">B</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar2'],
+      order: 'g1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['DeleteCell'].id,
+      command: NotebookCommands['DeleteCell'].id,
+      tooltip: () => (
+        <div className="libro-side-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('删除')}</span>
+          <span className="libro-tooltip-keybind">D D</span>
+        </div>
+      ),
+
+      group: ['sidetoolbar2'],
+      order: 'g2',
+    });
+    registry.registerItem({
+      id: NotebookCommands['UndoCellAction'].id,
+      command: NotebookCommands['UndoCellAction'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('撤销')}</span>
+          <span className="libro-tooltip-keybind">Z</span>
+        </div>
+      ),
+
+      group: ['group3'],
+      order: 'h1',
+    });
+    registry.registerItem({
+      id: NotebookCommands['RedoCellAction'].id,
+      command: NotebookCommands['RedoCellAction'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('重做')}</span>
+          <span className="libro-tooltip-keybind">Shift + Z</span>
+        </div>
+      ),
+
+      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,
+      icon: HideAllSelect,
+      group: ['group3'],
+      order: 'i',
+    });
+    registry.registerItem({
+      id: NotebookCommands['ClearAllCellOutput'].id,
+      command: NotebookCommands['ClearAllCellOutput'].id,
+      tooltip: () => (
+        <div className="libro-tooltip">
+          <span className="libro-tooltip-text">{l10n.t('清空输出')}</span>
+        </div>
+      ),
+
+      group: ['group3'],
+      order: 'j',
+    });
+    registry.registerItem({
+      id: NotebookCommands['ChangeCellTo'].id,
+      icon: ToolItemSelect,
+      command: NotebookCommands['ChangeCellTo'].id,
+      group: ['group4'],
+      order: 'k',
+    });
+    registry.registerItem({
+      id: NotebookCommands['More'].id,
+      icon: SideToolbarMoreSelect,
+      command: NotebookCommands['More'].id,
+      group: ['sidetoolbar3'],
+      order: 'm',
+    });
+  }
+}

package/src/toolbar/module.ts

@@ -0,0 +1,11 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroToolbarContribution } from './libro-toolbar.js';
+import { RestartClearOutputsContribution } from './restart-clear-outputs-contribution.js';
+import { ShutdownContribution } from './shutdown-contribution.js';
+
+export const LibroToolbarModule = ManaModule.create().register(
+  LibroToolbarContribution,
+  RestartClearOutputsContribution,
+  ShutdownContribution,
+);

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

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { RestartClearOutputModal } from './restart-clear-outputs-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class RestartClearOutputsContribution implements ModalContribution {
+  registerModal() {
+    return RestartClearOutputModal;
+  }
+}

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

@@ -0,0 +1,37 @@
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { Modal } from 'antd';
+import { useCallback } from 'react';
+
+import { NotebookCommands } from '../command/index.js';
+import type { LibroView } from '../libro-view.js';
+
+export function RestartClearOutputModalComponent({
+  visible,
+  close,
+  data,
+}: ModalItemProps<LibroView>) {
+  const handleRestart = useCallback(() => {
+    data?.restartClearOutput();
+    close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return (
+    <Modal
+      title="Restart Kernel?"
+      open={visible}
+      onOk={handleRestart}
+      onCancel={() => close()}
+      width={'400px'}
+      centered={true}
+      className="libro-restart-kernel-modal"
+    >
+      Do you want to restart the current kernel? All variables will be lost.
+    </Modal>
+  );
+}
+
+export const RestartClearOutputModal: ModalItem<LibroView> = {
+  id: NotebookCommands['RestartClearOutput'].id,
+  component: RestartClearOutputModalComponent,
+};

package/src/toolbar/save-icon.tsx

@@ -0,0 +1,47 @@
+import {
+  SaveOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import type { Disposable } from '@difizen/mana-app';
+import type { FC } from 'react';
+import { useEffect, useCallback, useState } from 'react';
+
+import type { LibroView } from '../libro-view.js';
+
+export const SaveIcon: FC = () => {
+  const [saved, setSaved] = useState<boolean | undefined>(undefined);
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  const handleSave = useCallback((result: boolean) => {
+    setSaved(result);
+    setTimeout(() => {
+      setSaved(undefined);
+    }, 500);
+  }, []);
+
+  useEffect(() => {
+    let toDispose: Disposable;
+    if (libroView) {
+      toDispose = libroView.onSave((result) => {
+        handleSave(result);
+      });
+    }
+    return () => {
+      toDispose?.dispose();
+    };
+  }, [handleSave, libroView]);
+  if (saved !== undefined) {
+    if (saved) {
+      return <CheckOutlined style={{ color: 'green' }} />;
+    } else {
+      return <CloseOutlined style={{ color: 'red' }} />;
+    }
+  }
+  if (libroView?.saving) {
+    return <LoadingOutlined />;
+  }
+  return <SaveOutlined />;
+};

package/src/toolbar/shutdown-contribution.tsx

@@ -0,0 +1,10 @@
+import { ModalContribution, singleton } from '@difizen/mana-app';
+
+import { ShutdownModal } from './shutdown-modal.js';
+
+@singleton({ contrib: ModalContribution })
+export class ShutdownContribution implements ModalContribution {
+  registerModal() {
+    return ShutdownModal;
+  }
+}

package/src/toolbar/shutdown-modal.tsx

@@ -0,0 +1,37 @@
+import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { Modal } from 'antd';
+import { useCallback } from 'react';
+
+import { NotebookCommands } from '../command/index.js';
+import type { LibroView } from '../libro-view.js';
+
+export function ShutdownModalComponent({
+  visible,
+  close,
+  data,
+}: ModalItemProps<LibroView>) {
+  const handleShutdown = useCallback(() => {
+    data?.closeAndShutdown();
+    close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  return (
+    <Modal
+      title="Shutdown Kernel?"
+      open={visible}
+      onOk={handleShutdown}
+      onCancel={() => close()}
+      width={'400px'}
+      centered={true}
+      className="libro-shut-down-kernel-modal"
+    >
+      Do you want to shutdown the current kernel?.
+    </Modal>
+  );
+}
+
+export const ShutdownModal: ModalItem<LibroView> = {
+  id: NotebookCommands['CloseAndShutdown'].id,
+  component: ShutdownModalComponent,
+};

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

@@ -0,0 +1,177 @@
+import type { Toolbar } from '@difizen/mana-app';
+import { isMacintosh } from '@difizen/mana-app';
+import {
+  CommandRegistry,
+  getOrigin,
+  ToolbarInstance,
+  useInject,
+  useObserve,
+} from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Menu, MenuContext } from '@difizen/mana-react';
+import { Popover } from 'antd';
+
+import { ExecutableCellModel, ExecutableCellView } from '../cell/index.js';
+import { NotebookCommands } from '../command/index.js';
+import type { LibroSideToolbarMenuItemType } from '../components/libro-side-toolbar-menu.js';
+import { MoreOutlined } from '../material-from-designer.js';
+
+import type { LibroToolbarArags } from './libro-toolbar-protocol.js';
+
+export const LibroSideToolbarMoreMenu: React.FC = () => {
+  const command = useInject(CommandRegistry);
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  const args = getOrigin(data) || [];
+  const cell = useObserve(args[0]);
+  const codeItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['HideCellCode'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('隐藏 Code')}</span>
+          <span className="libro-menu-item-keybind">
+            {`${isMacintosh ? 'Cmd' : 'Ctrl'} + `}&apos;
+          </span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['ShowCellCode'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('显示 Code')}</span>
+          <span className="libro-menu-item-keybind">
+            {`${isMacintosh ? 'Cmd' : 'Ctrl'} + `}&apos;
+          </span>
+        </>
+      ),
+    },
+  ];
+
+  const outputItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['HideCellOutputs'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('隐藏 Output')}</span>
+          <span className="libro-menu-item-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + O`}</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['ShowCellOutputs'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('显示 Output')}</span>
+          <span className="libro-menu-item-keybind">{`${isMacintosh ? 'Cmd' : 'Ctrl'} + O`}</span>
+        </>
+      ),
+    },
+  ];
+
+  const moreItems: LibroSideToolbarMenuItemType[] = [
+    {
+      id: NotebookCommands['CopyCell'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('复制')}</span>
+          <span className="libro-menu-item-keybind">C</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['CutCell'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('剪切')}</span>
+          <span className="libro-menu-item-keybind">X</span>
+        </>
+      ),
+    },
+    {
+      id: NotebookCommands['PasteCellBelow'].id,
+      label: (
+        <>
+          <span className="libro-menu-item-label">{l10n.t('粘贴')}</span>
+          <span className="libro-menu-item-keybind">V</span>
+        </>
+      ),
+    },
+  ];
+  if (!cell) {
+    return null;
+  }
+  const hasOutput =
+    ExecutableCellView.is(cell) && cell.outputArea?.length && cell.outputArea.length > 0
+      ? true
+      : false;
+  const nodes: React.ReactNode[] = [];
+  const baseCls = 'mana-menu';
+  const contextValue: MenuContext.Context = {
+    prefixCls: baseCls,
+  };
+  const codeMenuItem = cell.hasInputHidden ? 1 : 0;
+  nodes.push(
+    <Menu.Item
+      key={codeItems[codeMenuItem].id}
+      onClick={() => {
+        command.executeCommand(codeItems[codeMenuItem].id, ...args);
+        cell.hasInputHidden = !cell.hasInputHidden;
+      }}
+    >
+      {codeItems[codeMenuItem].label}
+    </Menu.Item>,
+  );
+  const outputMenuItem =
+    ExecutableCellModel.is(cell.model) && cell.model.hasOutputHidden ? 1 : 0;
+  nodes.push(
+    <Menu.Item
+      key={outputItems[outputMenuItem].id}
+      onClick={() => {
+        if (hasOutput) {
+          command.executeCommand(outputItems[outputMenuItem].id, ...args);
+          if (ExecutableCellModel.is(cell.model)) {
+            cell.model.hasOutputHidden = !cell.model.hasOutputHidden;
+          }
+        }
+      }}
+      disabled={!hasOutput}
+    >
+      {outputItems[outputMenuItem].label}
+    </Menu.Item>,
+  );
+  nodes.push(<Menu.Divider key="libro-menu-divider" />);
+  moreItems.forEach((item) => {
+    nodes.push(
+      <Menu.Item
+        key={item.id}
+        onClick={() => {
+          command.executeCommand(item.id, ...args);
+        }}
+      >
+        {item.label}
+      </Menu.Item>,
+    );
+  });
+  return (
+    <div className="libro-side-toolbar-menu">
+      <MenuContext.Provider value={contextValue}>{nodes} </MenuContext.Provider>
+    </div>
+  );
+};
+
+export const SideToolbarMoreSelect: React.FC = () => {
+  return (
+    <Popover
+      placement="leftTop"
+      content={<LibroSideToolbarMoreMenu />}
+      trigger="click"
+      overlayClassName="libro-popover-side-toolbar-menu libro-side-toolbar-more-select-menu"
+    >
+      <span>
+        <MoreOutlined />
+      </span>
+    </Popover>
+  );
+};

package/src/typings/index.d.ts

@@ -0,0 +1 @@
+declare module '*.less';

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;
+  }
+}