@difizen/libro-jupyter 0.0.2-alpha.0 → 0.1.1

package/src/file/file-protocol.ts

@@ -5,3 +5,20 @@ export enum FileType {
   SymbolicLink = 64,
 }
 export type DirItem = [string, FileType];
+
+export interface EditorView {
+  dirty: boolean;
+}
+
+export const EditorView = {
+  is: (data?: Record<string, any>): data is EditorView => {
+    return (
+      !!data &&
+      typeof data === 'object' &&
+      'id' in data &&
+      'view' in data &&
+      'dirty' in data &&
+      typeof data['view'] === 'function'
+    );
+  },
+};

package/src/file/file-rename-modal-contribution.ts

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

package/src/file/file-rename-modal.tsx

@@ -0,0 +1,103 @@
+import { useInject, ViewManager } from '@difizen/mana-app';
+import type { ModalItem, ModalItemProps, URI } from '@difizen/mana-app';
+import { Form, message, Input, Modal } from 'antd';
+import type { InputRef } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+
+import { JupyterFileService } from './file-service.js';
+import { FileView } from './file-view/index.js';
+import './index.less';
+
+export interface ModalItemType {
+  resource: URI;
+  fileName: string;
+}
+
+export const FileRenameModalComponent: React.FC<ModalItemProps<ModalItemType>> = ({
+  visible,
+  close,
+  data,
+}: ModalItemProps<ModalItemType>) => {
+  const fileService = useInject(JupyterFileService);
+  const viewManager = useInject(ViewManager);
+  const inputRef = useRef<InputRef>(null);
+  const [form] = Form.useForm();
+  const [fileView, setFileView] = useState<FileView>();
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(FileView)
+      .then((view) => {
+        setFileView(view);
+        return;
+      })
+      .catch(() => {
+        //
+      });
+    inputRef.current?.focus();
+  });
+
+  const onFinish = async (values: { rename: string }) => {
+    await form.validateFields();
+    close();
+    try {
+      await fileService.rename(data.resource, values.rename);
+
+      if (fileView) {
+        fileView.model.refresh();
+      }
+    } catch {
+      message.error('重命名文件/文件夹失败');
+    }
+  };
+
+  const validateRename = async (rule: any, value: string, callback: any) => {
+    if (!value || !value.length) {
+      throw new Error('请输入文件夹名');
+    } else {
+      if (value === data.fileName) {
+        throw new Error('文件/文件夹名称已存在，请重新输入');
+      }
+    }
+  };
+
+  return (
+    <Modal
+      title="文件重命名"
+      open={visible}
+      onCancel={close}
+      onOk={() => {
+        form.submit();
+      }}
+      wrapClassName="libro-rename-file-modal"
+    >
+      <Form
+        layout="vertical"
+        autoComplete="off"
+        form={form}
+        onFinish={onFinish}
+        className="libro-rename-file-form"
+      >
+        <Form.Item
+          name="rename"
+          label="文件/文件夹名称"
+          rules={[{ required: true, validator: validateRename }]}
+          initialValue={data.fileName}
+        >
+          <Input
+            ref={inputRef}
+            onKeyDown={async (e) => {
+              if (e.keyCode === 13) {
+                form.submit();
+              }
+            }}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const FileRenameModal: ModalItem<ModalItemType> = {
+  id: 'file.rename.modal',
+  component: FileRenameModalComponent,
+};

package/src/file/file-service.ts

@@ -1,3 +1,5 @@
+import pathUtil from 'path';
+
 import type { IContentsModel } from '@difizen/libro-kernel';
 import { ContentsManager } from '@difizen/libro-kernel';
 import type {
@@ -7,6 +9,7 @@ import type {
   ResolveFileOptions,
 } from '@difizen/mana-app';
 import { FileService, URI, inject, singleton } from '@difizen/mana-app';
+import { message } from 'antd';
 
 import { FileNameAlias } from './file-name-alias.js';
 import type { DirItem } from './file-protocol.js';
@@ -50,41 +53,29 @@ export class JupyterFileService extends FileService {
   }
 
   async write(filePath: string, content: string): Promise<string | undefined> {
-    try {
-      await this.contentsManager.save(filePath, {
-        content,
-      });
-      return filePath;
-    } catch (_e) {
-      //
-    }
-    return undefined;
+    await this.contentsManager.save(filePath, {
+      content,
+    });
+    return filePath;
   }
 
   async readDir(dirPath: string): Promise<DirItem[]> {
     let children: DirItem[] = [];
-    try {
-      const res = await this.contentsManager.get(dirPath, { type: 'directory' });
-      if (res && this.isDirectory(res)) {
-        const content = res.content;
-        children = content.map((item) => {
-          return [item.path, this.isDirectory(item) ? 2 : 1];
-        });
-      }
-    } catch (_e) {
-      //
+    const res = await this.contentsManager.get(dirPath, { type: 'directory' });
+    if (res && this.isDirectory(res)) {
+      const content = res.content;
+      children = content.map((item) => {
+        return [item.path, this.isDirectory(item) ? 2 : 1];
+      });
     }
     return children;
   }
+
   async read(filePath: string): Promise<string | undefined> {
     let content: string | undefined = undefined;
-    try {
-      const res = await this.contentsManager.get(filePath);
-      if (res && !this.isDirectory(res)) {
-        content = res.content as string;
-      }
-    } catch (_e) {
-      //
+    const res = await this.contentsManager.get(filePath);
+    if (res && !this.isDirectory(res)) {
+      content = res.content as string;
     }
     return content;
   }
@@ -94,7 +85,7 @@ export class JupyterFileService extends FileService {
     try {
       const res = await this.contentsManager.get(filePath);
       stat = this.toFileMeta(res);
-    } catch (_e) {
+    } catch {
       //
     }
     return stat;
@@ -132,22 +123,22 @@ export class JupyterFileService extends FileService {
 
   override async copy(
     source: URI,
-    target: URI,
-    options?: CopyFileOptions,
+    _target: URI,
+    _options?: CopyFileOptions,
   ): Promise<FileStatWithMetadata> {
+    await this.contentsManager.copy(source.path.toString(), _target.path.toString());
     return this.resolve(source);
   }
   override async move(
     source: URI,
-    target: URI,
-    options?: MoveFileOptions,
+    _target: URI,
+    _options?: MoveFileOptions,
   ): Promise<FileStatWithMetadata> {
     return this.resolve(source);
   }
 
   toFileStatMeta(meta: FileMeta): FileStatWithMetadata {
     const uri = URI.withScheme(new URI(meta.resource), 'file');
-
     return {
       ...meta,
       resource: uri,
@@ -158,7 +149,7 @@ export class JupyterFileService extends FileService {
 
   override async resolve(
     resource: URI,
-    options?: ResolveFileOptions | undefined,
+    _options?: ResolveFileOptions | undefined,
   ): Promise<FileStatWithMetadata> {
     const resolved = await this.doResolve(resource.path.toString());
     if (resolved) {
@@ -176,4 +167,49 @@ export class JupyterFileService extends FileService {
       isSymbolicLink: false,
     };
   }
+
+  async delete(
+    resource: URI,
+    _options?: ResolveFileOptions | undefined,
+  ): Promise<FileStatWithMetadata> {
+    await this.contentsManager.delete(resource.path.toString());
+    return this.resolve(resource);
+  }
+
+  async rename(resource: URI, newName: string): Promise<FileStatWithMetadata> {
+    const newPath = pathUtil.join(resource.path.dir.toString(), newName);
+    await this.contentsManager.rename(resource.path.toString(), newPath);
+
+    return this.resolve(resource);
+  }
+
+  async newFile(fileName: string, target: URI): Promise<FileStatWithMetadata> {
+    const targetFileUri = new URI(pathUtil.join(target.path.toString(), fileName));
+    if ((await this.resolve(targetFileUri)).isFile) {
+      message.error('文件名重复');
+      return this.resolve(target);
+    }
+    const fileNameArr = fileName.split('.');
+    const ext = fileNameArr[fileNameArr.length - 1];
+    const res = await this.contentsManager.newUntitled({
+      path: target.path.toString(),
+      ext,
+    });
+    await this.rename(new URI(res.path.toString()), fileName);
+    return this.resolve(target);
+  }
+
+  async newFileDir(dirName: string, target: URI): Promise<FileStatWithMetadata> {
+    const targetFileUri = new URI(pathUtil.join(target.path.toString(), dirName));
+    if ((await this.resolve(targetFileUri)).isDirectory) {
+      message.error('文件夹重复');
+      return this.resolve(target);
+    }
+    const res = await this.contentsManager.newUntitled({
+      path: target.path.toString(),
+      type: 'directory',
+    });
+    await this.rename(new URI(res.path.toString()), dirName);
+    return this.resolve(target);
+  }
 }

package/src/file/file-view/index.tsx

@@ -1,3 +1,4 @@
+import { FolderFilled } from '@ant-design/icons';
 import type { TreeNode, ViewOpenHandler } from '@difizen/mana-app';
 import { FileTreeViewFactory } from '@difizen/mana-app';
 import {
@@ -19,7 +20,7 @@ import {
   inject,
   singleton,
 } from '@difizen/mana-app';
-import type React from 'react';
+import React from 'react';
 
 import type { LibroNavigatableView } from '../navigatable-view.js';
 
@@ -53,6 +54,8 @@ export class FileView extends FileTreeView {
       labelProvider,
       decoratorService,
     );
+    this.title.label = '文件导航';
+    this.title.icon = <FolderFilled />;
     this.toDispose.push(this.model.onOpenNode(this.openNode));
   }
 

package/src/file/index.less

@@ -0,0 +1,98 @@
+.libro-create-file-type {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 24px;
+  height: 100px;
+  width: 100px;
+  border: 1px solid rgba(0, 10, 26, 10%);
+  border-radius: 4px;
+  cursor: pointer;
+
+  &.active {
+    border: 1px solid #1677ff;
+    background-color: rgba(22, 122, 255, 9%);
+  }
+
+  &.active::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: 18px;
+    height: 0;
+    width: 0;
+    border-top: 12px solid #1677ff;
+    border-left: 12px solid transparent;
+  }
+}
+
+.libro-create-file-modal,
+.libro-create-dir-modal,
+.libro-rename-file-modal {
+  .ant-modal-content {
+    padding: unset;
+  }
+
+  .ant-modal-body {
+    padding: 20px 24px;
+  }
+
+  .ant-modal-header {
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0, 10, 26, 7%);
+    margin: unset;
+  }
+
+  .ant-modal-footer {
+    margin: unset;
+    padding: 10px 24px;
+    border-top: 1px solid rgba(0, 10, 26, 7%);
+  }
+
+  .ant-modal-title {
+    font-weight: 500;
+    color: rgba(0, 10, 26, 89%);
+  }
+}
+
+.libro-remove-file-modal {
+  .ant-modal-confirm-title {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 88%);
+  }
+}
+
+.libro-create-file-modal {
+  .ant-form-item-control-input {
+    width: 370px;
+  }
+}
+
+.libro-create-dir-modal,
+.libro-rename-file-modal {
+  .ant-form-item-control-input {
+    width: 316px;
+  }
+}
+
+.libro-create-file-path-container {
+  margin-bottom: 8px;
+}
+
+.libro-create-file-des {
+  margin-bottom: 8px;
+  display: inline-block;
+  color: rgba(0, 0, 0, 85%);
+  letter-spacing: 0;
+  line-height: 22px;
+}
+
+.libro-create-file-path {
+  color: rgba(0, 0, 0, 65%);
+}
+
+.libro-create-file-type-text {
+  margin-top: 8px;
+  color: rgba(0, 10, 26, 68%);
+}

package/src/file/index.ts

@@ -4,3 +4,6 @@ export * from './navigatable-view.js';
 export * from './open-handler-contribution.js';
 export * from './file-service.js';
 export * from './file-protocol.js';
+export * from './file-icon.js';
+export * from './file-create-modal.js';
+export * from './file-createdir-modal.js';

package/src/file/module.ts

@@ -1,6 +1,10 @@
 import { FileTreeModule, ManaModule } from '@difizen/mana-app';
 
+import { FileCommandContribution } from './file-command.js';
+import { FileCreateModalContribution } from './file-create-modal-contribution.js';
+import { FileCreateDirModalContribution } from './file-createdir-modal-contribution.js';
 import { FileNameAlias } from './file-name-alias.js';
+import { FileRenameModalContribution } from './file-rename-modal-contribution.js';
 import { JupyterFileService } from './file-service.js';
 import { FileTreeLabelProvider } from './file-tree-label-provider.js';
 import { FileView } from './file-view/index.js';
@@ -15,5 +19,9 @@ export const LibroJupyterFileModule = ManaModule.create()
     FileTreeLabelProvider,
     LibroNavigatableView,
     LibroJupyterOpenHandler,
+    FileCommandContribution,
+    FileCreateModalContribution,
+    FileCreateDirModalContribution,
+    FileRenameModalContribution,
   )
   .dependOn(FileTreeModule);

package/src/file/navigatable-view.tsx

@@ -1,6 +1,6 @@
 import type { LibroView } from '@difizen/libro-core';
-import { LibroService } from '@difizen/libro-core';
-import type { NavigatableView } from '@difizen/mana-app';
+import { LibroService, DocumentCommands } from '@difizen/libro-core';
+import type { NavigatableView, Saveable } from '@difizen/mana-app';
 import {
   BaseView,
   inject,
@@ -16,6 +16,8 @@ import {
   ViewRender,
   Deferred,
   URI,
+  CommandRegistry,
+  Emitter,
 } from '@difizen/mana-app';
 import { createRef, forwardRef } from 'react';
 
@@ -32,15 +34,31 @@ export const LibroEditorComponent = forwardRef(function LibroEditorComponent() {
 export const LibroNavigatableViewFactoryId = 'libro-navigatable-view-factory';
 @transient()
 @view(LibroNavigatableViewFactoryId)
-export class LibroNavigatableView extends BaseView implements NavigatableView {
+export class LibroNavigatableView
+  extends BaseView
+  implements NavigatableView, Saveable
+{
   @inject(LibroService) protected libroService: LibroService;
 
+  @inject(CommandRegistry) commandRegistry: CommandRegistry;
+
   override view = LibroEditorComponent;
 
   codeRef = createRef<HTMLDivElement>();
 
   @prop() filePath?: string;
 
+  dirtyEmitter = new Emitter<void>();
+
+  get onDirtyChanged() {
+    return this.dirtyEmitter.event;
+  }
+
+  readonly autoSave = 'off';
+
+  @prop()
+  dirty: boolean;
+
   @prop()
   libroView?: LibroView;
 
@@ -56,6 +74,7 @@ export class LibroNavigatableView extends BaseView implements NavigatableView {
   ) {
     super();
     this.filePath = options.path;
+    this.dirty = false;
     this.title.caption = options.path;
     const uri = new URI(options.path);
     const uriRef = URIIconReference.create('file', new VScodeURI(options.path));
@@ -68,6 +87,14 @@ export class LibroNavigatableView extends BaseView implements NavigatableView {
     this.getOrCreateLibroView();
   }
 
+  save = () => {
+    this.commandRegistry.executeCommand(
+      DocumentCommands['Save'].id,
+      undefined,
+      this.libroView,
+    );
+  };
+
   protected async getOrCreateLibroView() {
     const libroView = await this.libroService.getOrCreateView({
       id: this.filePath,
@@ -77,7 +104,16 @@ export class LibroNavigatableView extends BaseView implements NavigatableView {
       return;
     }
     this.libroView = libroView;
+    this.libroView.model.onContentChanged(() => {
+      this.dirty = true;
+      this.dirtyEmitter.fire();
+    });
+    this.libroView.onSave(() => {
+      this.dirty = false;
+      this.dirtyEmitter.fire();
+    });
     await this.libroView.initialized;
+    this.libroView.focus();
     this.defer.resolve();
   }
 

package/src/file/utils.ts

@@ -0,0 +1,51 @@
+import { message } from 'antd';
+
+function copyFallback(string: string) {
+  function handler(event: ClipboardEvent) {
+    const clipboardData = event.clipboardData || (window as any).clipboardData;
+    clipboardData.setData('text/plain', string);
+    event.preventDefault();
+    document.removeEventListener('copy', handler, true);
+  }
+
+  document.addEventListener('copy', handler, true);
+  const successful = document.execCommand('copy');
+  if (successful) {
+    message.success('复制成功');
+  } else {
+    message.warning('复制失败');
+  }
+}
+
+// 复制到剪贴板
+export const copy2clipboard = (string: string) => {
+  navigator.permissions
+    .query({
+      name: 'clipboard-write' as any,
+    })
+    .then((result) => {
+      if (result.state === 'granted' || result.state === 'prompt') {
+        if (window.navigator && window.navigator.clipboard) {
+          window.navigator.clipboard
+            .writeText(string)
+            .then(() => {
+              message.success('复制成功');
+              return;
+            })
+            .catch((err) => {
+              message.warning('复制失败');
+              console.error('Could not copy text: ', err);
+            });
+        } else {
+          console.warn('navigator is not  exist');
+        }
+      } else {
+        console.warn('浏览器权限不允许复制');
+        copyFallback(string);
+      }
+      return;
+    })
+    .catch(() => {
+      //
+    });
+};

package/src/index.spec.ts

@@ -0,0 +1,11 @@
+import assert from 'assert';
+
+import { JupyterFileService, LibroJupyterModel } from './index.js';
+import 'reflect-metadata';
+
+describe('libro-jupyter', () => {
+  it('#import', () => {
+    assert(JupyterFileService);
+    assert(LibroJupyterModel);
+  });
+});

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './theme/index.js';
 export * from './toolbar/index.js';
 export * from './libro-jupyter-protocol.js';
 export * from './libro-jupyter-model.js';
+export * from './libro-jupyter-view.js';
 export * from './libro-jupyter-file-service.js';
 export * from './libro-jupyter-server-launch-manager.js';
 export * from './file/index.js';

package/src/libro-jupyter-protocol.ts

@@ -52,8 +52,3 @@ export interface LibroFileService {
     currentFileContents: IContentsModel,
   ) => Promise<IContentsModel | undefined>;
 }
-
-export const ServerLaunchManager = Symbol('ServerLaunchManager');
-export interface ServerLaunchManager {
-  launch: () => Promise<any>;
-}

package/src/libro-jupyter-server-launch-manager.ts

@@ -2,12 +2,8 @@ import { ServerManager, ServerConnection } from '@difizen/libro-kernel';
 import { inject, singleton } from '@difizen/mana-app';
 import { ApplicationContribution } from '@difizen/mana-app';
 
-import { ServerLaunchManager } from './libro-jupyter-protocol.js';
-
-@singleton({ contrib: [ServerLaunchManager, ApplicationContribution] })
-export class JupyterServerLaunchManager
-  implements ServerLaunchManager, ApplicationContribution
-{
+@singleton({ contrib: [ApplicationContribution] })
+export class JupyterServerLaunchManager implements ApplicationContribution {
   protected serverManager: ServerManager;
   protected serverConnection: ServerConnection;
 
@@ -27,10 +23,5 @@ export class JupyterServerLaunchManager
       baseUrl: `http://${host}`,
       wsUrl: `ws://${host}`,
     });
-    this.launch();
-  }
-
-  launch() {
-    return this.serverManager.launch();
   }
 }