@difizen/libro-lab 0.1.4 → 0.1.6

package/src/image-viewer/viewer.tsx

@@ -0,0 +1,131 @@
+import { ContentsManager } from '@difizen/libro-kernel';
+import type { NavigatableView } from '@difizen/mana-app';
+import { DisposableCollection } from '@difizen/mana-app';
+import {
+  BaseView,
+  inject,
+  LabelProvider,
+  prop,
+  transient,
+  URI as VScodeURI,
+  URIIconReference,
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+  Deferred,
+  URI,
+  CommandRegistry,
+} from '@difizen/mana-app';
+import { Spin } from 'antd';
+import { createRef, forwardRef, useEffect, useRef } from 'react';
+import Viewer from 'viewerjs';
+import './index.less';
+import 'viewerjs/dist/viewer.css';
+
+export function ImageViewer() {
+  const instance = useInject<NavigatableImageViewerView>(ViewInstance);
+  const ref = useRef<HTMLImageElement>(null);
+  const content = instance.content;
+  useEffect(() => {
+    if (ref && ref.current) {
+      new Viewer(ref.current, {
+        toolbar: {
+          prev: 0,
+          next: 0,
+          zoomIn: 4,
+          zoomOut: 4,
+          oneToOne: 4,
+          reset: 4,
+          play: {
+            show: 4,
+            size: 'large',
+          },
+          rotateLeft: 4,
+          rotateRight: 4,
+          flipHorizontal: 4,
+          flipVertical: 4,
+        },
+      });
+    }
+  }, [content, ref]);
+  if (!content) {
+    return null;
+  }
+  return <img ref={ref} src={`data:image/png;base64,${content}`} />;
+}
+
+export const NavigatableImageViewerComponent = forwardRef<HTMLDivElement>(
+  function LibroEditorComponent(props, ref) {
+    const instance = useInject<NavigatableImageViewerView>(ViewInstance);
+    const content = instance.content;
+    return (
+      <Spin spinning={!content}>
+        <div className="libro-lab-image-viewer" ref={ref}>
+          {content && <ImageViewer />}
+        </div>
+      </Spin>
+    );
+  },
+);
+
+export const NavigatableImageViewerViewFactoryId =
+  'navigatable-image-viewer-view-factory';
+@transient()
+@view(NavigatableImageViewerViewFactoryId)
+export class NavigatableImageViewerView extends BaseView implements NavigatableView {
+  @inject(CommandRegistry) commandRegistry: CommandRegistry;
+  @inject(ContentsManager) contentsManager: ContentsManager;
+
+  protected readonly toDisposeOnAutoSave = new DisposableCollection();
+
+  override view = NavigatableImageViewerComponent;
+
+  codeRef = createRef<HTMLDivElement>();
+
+  @prop() filePath?: string;
+  @prop() content?: string;
+
+  protected defer = new Deferred<void>();
+
+  get ready() {
+    return this.defer.promise;
+  }
+
+  constructor(
+    @inject(ViewOption) options: { path: string },
+    @inject(LabelProvider) labelProvider: LabelProvider,
+  ) {
+    super();
+    this.filePath = options.path;
+    this.title.caption = options.path;
+    const uri = new URI(options.path);
+    const uriRef = URIIconReference.create('file', new VScodeURI(options.path));
+    const iconClass = labelProvider.getIcon(uriRef);
+    this.title.icon = <div className={iconClass} />;
+    this.title.label = uri.displayName;
+  }
+
+  getFileContent = async () => {
+    if (this.filePath) {
+      const content = await this.contentsManager.get(this.filePath, {
+        content: true,
+        format: 'base64',
+      });
+      this.content = content.content;
+    }
+  };
+
+  override async onViewMount(): Promise<void> {
+    this.getFileContent();
+  }
+
+  getResourceUri(): URI | undefined {
+    return new URI(this.filePath);
+  }
+
+  createMoveToUri(resourceUri: URI): URI | undefined {
+    this.filePath = resourceUri.path.toString();
+    return resourceUri;
+  }
+}

package/src/index.ts

@@ -1 +1,12 @@
 export * from './module.js';
+export * from './lab-app.js';
+export * from './github-link/index.js';
+export * from './config/index.js';
+export * from './layout/index.js';
+export * from './menu/index.js';
+export * from './toc/index.js';
+export * from './welcome/index.js';
+export * from './kernel-manager/index.js';
+export * from './common/index.js';
+export * from './image-viewer/index.js';
+export * from './editor-viewer/index.js';

package/src/layout/index.tsx

@@ -1,4 +1,12 @@
 export * from './protocol.js';
 export * from './module.js';
 export * from './layout.js';
+export * from './layout-service.js';
+export * from './saveable-tab-view.js';
 export * from './footer/footer-view.js';
+export * from './footer/status-footer-view.js';
+export * from './footer/current-file-footer-view.js';
+export * from './brand/brand.js';
+export * from './main.js';
+export * from './container.js';
+export * from './content-bottom-tab-view.js';

package/src/layout/layout.tsx

@@ -11,8 +11,8 @@ import type { VisibilityMap } from './layout-service.js';
 import { LayoutService } from './layout-service.js';
 import { LibroLabLayoutSlots } from './protocol.js';
 
-export const LibroLabLayoutContainerComponent = forwardRef(
-  function LibroLabLayoutContainerComponent() {
+export const LibroLabLayoutComponent = forwardRef(
+  function LibroLabLayoutComponent() {
     const layoutService = useInject(LayoutService);
 
     return (
@@ -46,7 +46,7 @@ export const LibroLabLayoutContainerComponent = forwardRef(
 @singleton()
 @view('libro-lab-layout')
 export class LibroLabLayoutView extends BaseView {
-  override view = LibroLabLayoutContainerComponent;
+  override view = LibroLabLayoutComponent;
 
   @inject(LayoutService) layoutService: LayoutService;
 

package/src/layout/module.ts

@@ -6,7 +6,7 @@ import {
   ManaModule,
 } from '@difizen/mana-app';
 
-import { BrandView } from './brand/index.js';
+import { BrandView } from './brand/brand.js';
 import { LibroLabLayoutContainerView } from './container.js';
 import { ContentBottomTabView } from './content-bottom-tab-view.js';
 import { LibroLabCurrentFileFooterView } from './footer/current-file-footer-view.js';

package/src/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './menu-bar-view.js';
+export * from './menu-command.js';
+export * from './menu-contribution.js';
+export * from './module.js';

package/src/module.tsx

@@ -11,7 +11,9 @@ import {
 } from '@difizen/mana-app';
 
 import { LabConfigAppContribution } from './config/config-contribution.js';
+import { CodeEditorViewerModule } from './editor-viewer/index.js';
 import { GithubLinkView } from './github-link/index.js';
+import { ImageViewerModule } from './image-viewer/index.js';
 import { KernelManagerView } from './kernel-manager/index.js';
 import { LibroLabApp } from './lab-app.js';
 import { ContentBottomTabView } from './layout/content-bottom-tab-view.js';
@@ -98,4 +100,6 @@ export const LibroLabModule = ManaModule.create()
     LibroLabTocModule,
     LibroPromptCellModule,
     TerminalModule,
+    ImageViewerModule,
+    CodeEditorViewerModule,
   );

package/src/toc/index.ts

@@ -0,0 +1,2 @@
+export * from './libro-toc-panel-view.js';
+export * from './module.js';

package/src/welcome/index.ts

@@ -0,0 +1,2 @@
+export * from './welcome-view.js';
+export * from './entry-point-view.js';