@difizen/libro-lab 0.1.13 → 0.1.15

package/src/kernel-and-terminal-panel/collapse/collapse-content.tsx

@@ -0,0 +1,72 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { TerminalCommands } from '@difizen/libro-terminal';
+import { CommandRegistry, useInject } from '@difizen/mana-app';
+import React from 'react';
+
+import {
+  existedLSP,
+  openedPage,
+  runningKernel,
+  runningTerminal,
+} from '../../common/icon.js';
+
+import { LibroPanelCollapseItemType } from './index.js';
+import type { LibroPanelCollapseItem } from './index.js';
+
+export const getIcon = (type: LibroPanelCollapseItemType) => {
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return openedPage();
+    case LibroPanelCollapseItemType.KERNEL:
+      return runningKernel();
+    case LibroPanelCollapseItemType.TERMINAL:
+      return runningTerminal();
+    case LibroPanelCollapseItemType.LSP:
+      return existedLSP();
+  }
+};
+
+interface Props {
+  type: LibroPanelCollapseItemType;
+  items: LibroPanelCollapseItem[];
+}
+
+export const LibroCollapseContent: React.FC<Props> = (props: Props) => {
+  const commandRegistry = useInject<CommandRegistry>(CommandRegistry);
+
+  return (
+    <>
+      {props.items.map((item) => {
+        return (
+          <div
+            className="libro-panel-collapse-item"
+            key={item.id}
+            onClick={() => {
+              if (props.type === LibroPanelCollapseItemType.TERMINAL) {
+                commandRegistry.executeCommand(
+                  TerminalCommands['OpenTerminal'].id,
+                  item.name,
+                );
+              }
+            }}
+          >
+            <div className="libro-panel-collapse-item-icon">{getIcon(props.type)}</div>
+            <div className="libro-panel-collapse-item-label">{item.name}</div>
+            <div
+              className="libro-panel-collapse-item-close"
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                if (item.shutdown) {
+                  item.shutdown();
+                }
+              }}
+            >
+              <CloseOutlined />
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};

package/src/kernel-and-terminal-panel/collapse/index.less

@@ -0,0 +1,89 @@
+.libro-panel-collapse-container {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.libro-panel-collapse-header {
+  user-select: none; // 双击不选中文本
+  color: rgba(0, 10, 26, 68%);
+  font-size: 12px;
+
+  .libro-panel-collapse-header-left {
+    display: inline-block;
+    cursor: pointer;
+
+    .libro-panel-collapse-header-icon {
+      display: inline-block;
+      margin-right: 5px;
+    }
+
+    .libro-panel-collapse-header-label {
+      display: inline-block;
+    }
+  }
+
+  .libro-panel-collapse-header-closeAll {
+    // display: inline-block;
+    cursor: pointer;
+    color: rgba(0, 10, 26, 47%);
+    float: right;
+  }
+}
+
+.libro-panel-collapse-kernel-item-container {
+  margin-left: 15px;
+}
+
+.libro-panel-collapse-content,
+.libro-panel-collapse-kernel-item-container {
+  .libro-panel-collapse-item,
+  .libro-panel-collapse-kernel-item {
+    cursor: pointer;
+    user-select: none; // 双击不选中文本
+    color: rgba(0, 10, 26, 65%);
+    font-size: 12px;
+    margin: 8px 0;
+    padding: 0 10px;
+    display: flex;
+
+    .libro-panel-collapse-item-toggle {
+      display: inline-block;
+      margin: auto 5px auto 0;
+    }
+
+    .libro-panel-collapse-item-icon,
+    .libro-panel-collapse-kernel-item-icon {
+      display: inline-block;
+      margin: auto 5px auto 0;
+
+      & > :first-child {
+        vertical-align: middle;
+      }
+    }
+
+    .libro-panel-collapse-item-label,
+    .libro-panel-collapse-kernel-item-name {
+      display: inline-block;
+      min-width: 50px;
+      white-space: nowrap; /* 避免文本换行 */
+      overflow: hidden; /* 隐藏超出div的内容 */
+      text-overflow: ellipsis; /* 在文本超出宽度时显示省略号 */
+      margin: auto 0;
+    }
+
+    .libro-panel-collapse-item-close {
+      // display: inline-block;
+      margin: auto 0 auto auto;
+    }
+
+    .libro-panel-collapse-item-close:hover {
+      background: rgba(0, 10, 26, 15%);
+      border-radius: 4px;
+    }
+  }
+
+  .libro-panel-collapse-item:hover {
+    background: rgba(0, 10, 26, 5%);
+    border-radius: 4px;
+  }
+}

package/src/kernel-and-terminal-panel/collapse/index.tsx

@@ -0,0 +1,128 @@
+import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ViewContext } from '@difizen/mana-app';
+import { Empty, Popconfirm } from 'antd';
+import React, { useState } from 'react';
+
+import type { SaveableTabView } from '../../index.js';
+
+import { LibroCollapseContent } from './collapse-content.js';
+
+import './index.less';
+import { LibroKernelCollapseContent } from './kernel-collapse-content.js';
+import { OpenedTabs } from './page-collapse-content.js';
+
+export enum LibroPanelCollapseItemType {
+  PAGE = 'Page',
+  KERNEL = 'Kernel',
+  TERMINAL = 'Terminal',
+  LSP = 'LSP',
+}
+
+export interface LibroPanelCollapseItem {
+  id: string;
+  name: string;
+  shutdown?: () => Promise<void>;
+  restart?: () => Promise<void>;
+}
+
+export interface LibroPanelCollapseKernelItem extends LibroPanelCollapseItem {
+  notebooks: { sessionId: string; name: string; path: string }[];
+}
+
+interface Props {
+  type: LibroPanelCollapseItemType;
+  items: LibroPanelCollapseItem[] | undefined;
+  tabView?: SaveableTabView;
+  shutdownAll?: () => Promise<void>;
+}
+
+const getCollapseContentView = (
+  type: LibroPanelCollapseItemType,
+  items: LibroPanelCollapseItem[] | undefined,
+  tabView?: SaveableTabView,
+) => {
+  if (!items) {
+    return (
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description="暂无内容"
+        className="kernel-and-terminal-panel-empty"
+      />
+    );
+  }
+
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return (
+        <ViewContext view={tabView!}>
+          <OpenedTabs />
+        </ViewContext>
+      );
+
+    case LibroPanelCollapseItemType.KERNEL:
+      return (
+        <LibroKernelCollapseContent
+          type={type}
+          items={items as LibroPanelCollapseKernelItem[]}
+        />
+      );
+    case LibroPanelCollapseItemType.TERMINAL:
+    case LibroPanelCollapseItemType.LSP:
+      return <LibroCollapseContent type={type} items={items!} />;
+  }
+};
+
+const getCollapseHeaderLabel = (type: LibroPanelCollapseItemType) => {
+  switch (type) {
+    case LibroPanelCollapseItemType.PAGE:
+      return '已开启的标签页';
+    case LibroPanelCollapseItemType.KERNEL:
+      return '运行的内核';
+    case LibroPanelCollapseItemType.TERMINAL:
+      return '运行的终端';
+    case LibroPanelCollapseItemType.LSP:
+      return '语言服务';
+  }
+};
+
+export const LibroCollapse: React.FC<Props> = (props: Props) => {
+  const [open, setOpen] = useState<boolean>(true);
+  return (
+    <div className="libro-panel-collapse-container" key={props.type}>
+      <div className="libro-panel-collapse-header">
+        <div
+          className="libro-panel-collapse-header-left"
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          <div className="libro-panel-collapse-header-icon">
+            {open ? <CaretDownOutlined /> : <CaretRightOutlined />}
+          </div>
+          <div className="libro-panel-collapse-header-label">
+            {getCollapseHeaderLabel(props.type)}
+          </div>
+        </div>
+        <div className="libro-panel-collapse-header-closeAll">
+          <Popconfirm
+            title="你确定要关闭全部吗？"
+            okText="确定"
+            cancelText="取消"
+            onConfirm={() => {
+              if (props.shutdownAll) {
+                props.shutdownAll();
+              }
+            }}
+          >
+            关闭全部
+          </Popconfirm>
+        </div>
+      </div>
+      {open && (
+        <div className="libro-panel-collapse-content">
+          {getCollapseContentView(props.type, props.items, props.tabView)}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/kernel-and-terminal-panel/collapse/kernel-collapse-content-item.tsx

@@ -0,0 +1,87 @@
+import {
+  CaretDownOutlined,
+  CaretRightOutlined,
+  CloseOutlined,
+} from '@ant-design/icons';
+import { OpenerService, URI, useInject } from '@difizen/mana-app';
+import React, { useState } from 'react';
+
+import { fileUnderKernel, runningKernel } from '../../common/icon.js';
+
+import type { LibroPanelCollapseKernelItem } from './index.js';
+
+interface Props {
+  item: LibroPanelCollapseKernelItem;
+}
+
+export const LibroKernelCollapseContentItem: React.FC<Props> = (props: Props) => {
+  const item = props.item;
+  const [open, setOpen] = useState<boolean>(true);
+  const openService = useInject<OpenerService>(OpenerService);
+
+  return (
+    <>
+      <div
+        className="libro-panel-collapse-item"
+        key={item.id}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <div className="libro-panel-collapse-item-toggle">
+          {open ? <CaretDownOutlined /> : <CaretRightOutlined />}
+        </div>
+        <div className="libro-panel-collapse-item-icon">{runningKernel()}</div>
+        <div className="libro-panel-collapse-item-label">{item.name}</div>
+        <div
+          className="libro-panel-collapse-item-close"
+          onClick={(e) => {
+            if (item.shutdown) {
+              item.shutdown();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <CloseOutlined />
+        </div>
+      </div>
+      {open && (
+        <div className="libro-panel-collapse-kernel-item-container">
+          {item.notebooks.map((notebook) => (
+            <div
+              className="libro-panel-collapse-kernel-item"
+              key={notebook.sessionId}
+              onClick={() => {
+                const uri = new URI(notebook.path);
+                const name = notebook.name;
+                openService
+                  .getOpener(uri)
+                  .then((opener) => {
+                    if (opener) {
+                      opener.open(uri, {
+                        viewOptions: {
+                          name: name,
+                        },
+                      });
+                    }
+                    return;
+                  })
+                  .catch((e) => {
+                    console.error(e);
+                  });
+              }}
+            >
+              <div className="libro-panel-collapse-kernel-item-icon">
+                {fileUnderKernel()}
+              </div>
+              <div className="libro-panel-collapse-kernel-item-name">
+                {notebook.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

package/src/kernel-and-terminal-panel/collapse/kernel-collapse-content.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { LibroKernelCollapseContentItem } from './kernel-collapse-content-item.js';
+
+import type {
+  LibroPanelCollapseItemType,
+  LibroPanelCollapseKernelItem,
+} from './index.js';
+
+interface Props {
+  type: LibroPanelCollapseItemType;
+  items: LibroPanelCollapseKernelItem[];
+}
+
+export const LibroKernelCollapseContent: React.FC<Props> = (props: Props) => {
+  return (
+    <>
+      {props.items.map((item) => {
+        return <LibroKernelCollapseContentItem item={item} key={item.id} />;
+      })}
+    </>
+  );
+};

package/src/kernel-and-terminal-panel/collapse/page-collapse-content.tsx

@@ -0,0 +1,49 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { renderNode, useInject, ViewContext, ViewInstance } from '@difizen/mana-app';
+
+import type { SaveableTabView } from '../../index.js';
+
+export const OpenedTabs: React.FC = () => {
+  const tabs = useInject<SaveableTabView>(ViewInstance);
+
+  const renderTitleIcon = renderNode;
+  const renderTitleLabel = renderNode;
+
+  return (
+    <>
+      {tabs.children.map((item) => {
+        return (
+          <ViewContext view={item} key={item.id}>
+            <div
+              title={item.title.caption}
+              className="libro-panel-collapse-item"
+              onClick={() => {
+                tabs.onChange(item.id);
+              }}
+            >
+              {item.title.icon && (
+                <span className="libro-panel-collapse-item-icon">
+                  {renderTitleIcon(item.title.icon)}
+                </span>
+              )}
+              <div className="libro-panel-collapse-item-label">
+                {renderTitleLabel(item.title.label)}
+              </div>
+              {item.title.closable && (
+                <div
+                  className="libro-panel-collapse-item-close"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    item.dispose();
+                  }}
+                >
+                  <CloseOutlined />
+                </div>
+              )}
+            </div>
+          </ViewContext>
+        );
+      })}
+    </>
+  );
+};

package/src/kernel-and-terminal-panel/index.less

@@ -0,0 +1,5 @@
+.kernel-and-terminal-panel {
+  height: 100%;
+  padding: 0 10px;
+  overflow-y: scroll;
+}

package/src/kernel-and-terminal-panel/index.ts

@@ -0,0 +1 @@
+export * from './module.js';

package/src/kernel-and-terminal-panel/kernel-and-terminal-panel-view.tsx

@@ -0,0 +1,218 @@
+import { LibroKernelManager, LibroSessionManager } from '@difizen/libro-kernel';
+import type { ILanguageServerManager, TLanguageServerId } from '@difizen/libro-lsp';
+import { ILSPDocumentConnectionManager } from '@difizen/libro-lsp';
+import { TerminalManager } from '@difizen/libro-terminal';
+import {
+  BaseView,
+  inject,
+  singleton,
+  useInject,
+  view,
+  ViewInstance,
+  ViewManager,
+} from '@difizen/mana-app';
+import { useEffect, useState } from 'react';
+
+import { KernelAndTerminal } from '../common/index.js';
+import type { SaveableTabView } from '../index.js';
+import { LibroLabLayoutSlots } from '../index.js';
+import { LayoutService } from '../layout/layout-service.js';
+
+import type {
+  LibroPanelCollapseItem,
+  LibroPanelCollapseKernelItem,
+} from './collapse/index.js';
+import { LibroPanelCollapseItemType, LibroCollapse } from './collapse/index.js';
+
+import './index.less';
+
+const PanelRender: React.FC = () => {
+  const instance = useInject<KernelAndTerminalPanelView>(ViewInstance);
+  const openedTabView = instance.getAllOpenedTabView();
+
+  const {
+    libroKernelManager,
+    libroSessionManager,
+    terminalManager,
+    lspManager,
+    lspConnectionManager,
+  } = instance;
+
+  const [kernelItems, setKernelItems] = useState<
+    LibroPanelCollapseKernelItem[] | undefined
+  >();
+
+  const [terminalItems, setTerminalItems] = useState<
+    LibroPanelCollapseItem[] | undefined
+  >();
+
+  // const lspManager = useInject<ILSPDocumentConnectionManager>(
+  //   DocumentConnectionManager,
+  // ).languageServerManager;
+
+  const [lspItems, setLSPItems] = useState<LibroPanelCollapseItem[] | undefined>();
+
+  lspManager.sessionsChanged(() => {
+    const sessions = lspManager.sessions;
+
+    const items = [] as LibroPanelCollapseItem[];
+
+    sessions.forEach((session: any, key: string) => {
+      items.push({
+        id: key,
+        name: `${key} (${session.spec.languages.join('/')})`,
+        shutdown: async () =>
+          lspConnectionManager.disconnectServer(key as TLanguageServerId),
+      });
+    });
+
+    setLSPItems(items);
+  });
+
+  useEffect(() => {
+    if (
+      !libroSessionManager.running ||
+      (libroSessionManager.running && libroSessionManager.running.size === 0)
+    ) {
+      setKernelItems(undefined);
+      return;
+    }
+
+    // kernelId -> item
+    const items = new Map<string, LibroPanelCollapseKernelItem>();
+
+    const runningSessions = libroSessionManager.running.values();
+
+    for (const session of runningSessions) {
+      const kernel = session.kernel!;
+      if (items.has(kernel.id)) {
+        items.get(kernel.id)?.notebooks.push({
+          sessionId: session.id,
+          name: session.name,
+          path: session.path,
+        });
+      } else {
+        items.set(kernel.id, {
+          id: kernel.id,
+          name: kernel.name,
+          shutdown: async () => libroKernelManager.shutdown(kernel.id),
+          notebooks: [
+            { sessionId: session.id, name: session.name, path: session.path },
+          ],
+        });
+      }
+    }
+
+    setKernelItems(Array.from(items.values()));
+  }, [libroKernelManager, libroSessionManager.running]);
+
+  useEffect(() => {
+    if (
+      !terminalManager.runningModels ||
+      (terminalManager.runningModels && terminalManager.runningModels.length === 0)
+    ) {
+      setTerminalItems(undefined);
+      return;
+    }
+
+    const items = [];
+    for (const terminal of terminalManager.runningModels) {
+      items.push({
+        id: 'terminal/' + terminal,
+        name: terminal,
+        shutdown: async () => terminalManager.shutdown(terminal),
+      });
+    }
+
+    setTerminalItems(items);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [terminalManager.runningModels]);
+
+  return (
+    <div className="kernel-and-terminal-panel">
+      <LibroCollapse
+        type={LibroPanelCollapseItemType.PAGE}
+        items={openedTabView.children.map((item) => {
+          return {
+            id: item.id + '',
+            name: item.title.label as string,
+          };
+        })}
+        tabView={openedTabView}
+        shutdownAll={async () => {
+          // dispose会影响原始数组，这里使用解构赋值copy一份数组。
+          for (const item of [...openedTabView.children]) {
+            if (item.title.closable) {
+              item.dispose();
+            }
+          }
+        }}
+      />
+      <LibroCollapse
+        type={LibroPanelCollapseItemType.KERNEL}
+        items={kernelItems}
+        shutdownAll={async () => {
+          await libroKernelManager.shutdownAll();
+          libroSessionManager.refreshRunning();
+        }}
+      />
+      <LibroCollapse
+        type={LibroPanelCollapseItemType.TERMINAL}
+        items={terminalItems}
+        shutdownAll={() => terminalManager.shutdownAll()}
+      />
+      <LibroCollapse
+        type={LibroPanelCollapseItemType.LSP}
+        items={lspItems}
+        shutdownAll={async () => lspConnectionManager.disconnectAllServers()}
+      />
+    </div>
+  );
+};
+
+export const KernelAndTerminalPanelViewId = 'libro-kernel-and-terminal-view';
+
+@singleton()
+@view(KernelAndTerminalPanelViewId)
+export class KernelAndTerminalPanelView extends BaseView {
+  override view = PanelRender;
+  @inject(ViewManager) protected viewManager: ViewManager;
+  @inject(LayoutService) protected layoutService: LayoutService;
+
+  libroKernelManager: LibroKernelManager;
+  libroSessionManager: LibroSessionManager;
+  terminalManager: TerminalManager;
+  lspConnectionManager: ILSPDocumentConnectionManager;
+  lspManager: ILanguageServerManager;
+
+  constructor(
+    @inject(LibroKernelManager) libroKernelManager: LibroKernelManager,
+    @inject(LibroSessionManager) libroSessionManager: LibroSessionManager,
+    @inject(TerminalManager) terminalManager: TerminalManager,
+    @inject(ILSPDocumentConnectionManager)
+    lspDocumentConnectionManager: ILSPDocumentConnectionManager,
+  ) {
+    super();
+    this.title.icon = <KernelAndTerminal />;
+    this.title.label = '运行的终端和内核';
+
+    this.libroKernelManager = libroKernelManager;
+    this.libroSessionManager = libroSessionManager;
+    this.terminalManager = terminalManager;
+    this.lspConnectionManager = lspDocumentConnectionManager;
+    this.lspManager = lspDocumentConnectionManager.languageServerManager;
+  }
+
+  getAllOpenedTabView(): SaveableTabView {
+    return this.layoutService.getAllSlotView(
+      LibroLabLayoutSlots.content,
+    ) as SaveableTabView;
+  }
+
+  refresh() {
+    this.libroSessionManager.refreshRunning();
+    this.terminalManager.refreshRunning();
+    this.lspManager.refreshRunning();
+  }
+}

package/src/kernel-and-terminal-panel/module.ts

@@ -0,0 +1,20 @@
+import { createViewPreference, ManaModule } from '@difizen/mana-app';
+
+import { LibroLabLayoutSlots } from '../layout/protocol.js';
+
+import { KernelAndTerminalPanelView } from './kernel-and-terminal-panel-view.js';
+import { PanelCommandContribution } from './panel-command.js';
+
+export const LibroKernelAndTerminalPanelModule = ManaModule.create().register(
+  PanelCommandContribution,
+  KernelAndTerminalPanelView,
+  createViewPreference({
+    view: KernelAndTerminalPanelView,
+    slot: LibroLabLayoutSlots.navigator,
+    autoCreate: true,
+    openOptions: {
+      reveal: true,
+      order: 'kernel',
+    },
+  }),
+);