@opensumi/ide-addons 2.21.13 → 2.22.0

package/src/browser/status-bar-contribution.ts

@@ -0,0 +1,28 @@
+import { Autowired } from '@opensumi/di';
+import { ClientAppContribution } from '@opensumi/ide-core-browser';
+import {
+  BrowserConnectionCloseEvent,
+  BrowserConnectionOpenEvent,
+  OnEvent,
+  WithEventBus,
+  CommandService,
+  Domain,
+} from '@opensumi/ide-core-common';
+
+@Domain(ClientAppContribution)
+export class StatusBarContribution extends WithEventBus implements ClientAppContribution {
+  @Autowired(CommandService)
+  private readonly commandService: CommandService;
+
+  onStart() {}
+
+  @OnEvent(BrowserConnectionOpenEvent)
+  handleBrowserConnectionOpen() {
+    this.commandService.executeCommand('statusbar.changeBackgroundColor', 'var(--statusBar-background)');
+  }
+
+  @OnEvent(BrowserConnectionCloseEvent)
+  handleBrowserConnectionClose() {
+    this.commandService.executeCommand('statusbar.changeBackgroundColor', 'var(--kt-statusbar-offline-background)');
+  }
+}

package/src/browser/toolbar-customize/style.module.less

@@ -0,0 +1,52 @@
+@import '~@opensumi/ide-components/lib/style/mixins.less';
+
+.toolbar-customize-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  .toolbar-customize {
+    position: fixed;
+    width: 720px;
+    margin-left: -360px;
+    left: 50%;
+    top: 30px;
+    z-index: 1001;
+    .overlay-shadow();
+    background-color: var(--kt-modal-background);
+    color: var(--kt-modal-foreground);
+    min-height: 200px;
+    .toolbar-customize-location {
+      display: flex;
+      flex-wrap: wrap;
+      border-bottom: 1px solid var(--kt-modal-separatorBackground);
+      .action-item {
+        margin-right: 10px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+      }
+      padding: 15px 20px;
+    }
+    .button-display {
+      padding: 20px;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      > div:first-child {
+        margin-right: 10px;
+        font-size: 12px;
+      }
+      .button-display-select {
+        width: 200px;
+      }
+    }
+    .customize-complete {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+    }
+  }
+}

package/src/browser/toolbar-customize/toolbar-customize.contribution.ts

@@ -0,0 +1,59 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  CommandContribution,
+  CommandRegistry,
+  ComponentContribution,
+  ComponentRegistry,
+  AppConfig,
+  SlotLocation,
+  localize,
+} from '@opensumi/ide-core-browser';
+import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import { ToolbarCustomizeComponent, ToolbarCustomizeViewService } from './toolbar-customize';
+
+@Domain(CommandContribution, ComponentContribution, MenuContribution)
+export class ToolbarCustomizeContribution implements CommandContribution, ComponentContribution, MenuContribution {
+  @Autowired(AppConfig)
+  config: AppConfig;
+
+  @Autowired(ToolbarCustomizeViewService)
+  viewService: ToolbarCustomizeViewService;
+
+  registerCommands(registry: CommandRegistry) {
+    registry.registerCommand(
+      {
+        id: 'toolbar.showCustomizePanel',
+        label: 'Show Toolbar Customization',
+      },
+      {
+        execute: () => {
+          this.viewService.setVisible(true);
+        },
+      },
+    );
+  }
+
+  registerComponent(registry: ComponentRegistry) {
+    registry.register('addon/toolbar-customize', {
+      id: 'addon/toolbar-customize',
+      component: ToolbarCustomizeComponent,
+    });
+    if (!this.config.layoutConfig[SlotLocation.extra]) {
+      this.config.layoutConfig[SlotLocation.extra] = {
+        modules: [],
+      };
+    }
+    this.config.layoutConfig[SlotLocation.extra].modules.push('addon/toolbar-customize');
+  }
+
+  registerMenus(registry: IMenuRegistry) {
+    registry.registerMenuItem(MenuId.KTToolbarLocationContext, {
+      command: {
+        id: 'toolbar.showCustomizePanel',
+        label: localize('toolbar.customize.menu'),
+      },
+    });
+  }
+}

package/src/browser/toolbar-customize/toolbar-customize.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { CheckBox, Select, Button } from '@opensumi/ide-components';
+import {
+  useInjectable,
+  PreferenceService,
+  PreferenceScope,
+  IToolbarRegistry,
+  localize,
+} from '@opensumi/ide-core-browser';
+
+import styles from './style.module.less';
+
+@Injectable()
+export class ToolbarCustomizeViewService {
+  private _setVisible: (visible: boolean) => void;
+
+  @Autowired(PreferenceService)
+  preferenceService: PreferenceService;
+
+  public bindSetVisibleHandle(setVisible: (visible: boolean) => void) {
+    this._setVisible = setVisible;
+  }
+
+  setVisible(visible: boolean) {
+    this._setVisible(visible);
+  }
+
+  async toggleActionVisibility(location: string, actionId: string, visible: boolean) {
+    const prev: { [key: string]: string[] } = this.preferenceService.getValid('toolbar.ignoreActions', {});
+    if (!prev[location]) {
+      prev[location] = [];
+    }
+    if (!visible) {
+      if (prev[location].indexOf(actionId) === -1) {
+        prev[location].push(actionId);
+      }
+    } else {
+      const index = prev[location].indexOf(actionId);
+      if (index !== -1) {
+        prev[location].splice(index, 1);
+      }
+    }
+    const effectingScope = this.preferenceService.inspect('toolbar.ignoreActions')!.workspaceValue
+      ? PreferenceScope.Workspace
+      : PreferenceScope.User;
+    await this.preferenceService.set('toolbar.ignoreActions', prev, effectingScope);
+  }
+}
+
+export const ToolbarCustomizeComponent = () => {
+  const [visible, setVisible] = React.useState<boolean>(false);
+  const service: ToolbarCustomizeViewService = useInjectable(ToolbarCustomizeViewService);
+  const registry: IToolbarRegistry = useInjectable(IToolbarRegistry);
+  const preferenceService: PreferenceService = useInjectable(PreferenceService);
+
+  service.bindSetVisibleHandle(setVisible);
+
+  if (!visible) {
+    return null;
+  }
+
+  const locations = registry.getAllLocations();
+
+  const currentPref: { [key: string]: string[] } = preferenceService.get('toolbar.ignoreActions') || {};
+
+  let currentDisplayPref: string = preferenceService.get<string>('toolbar.buttonDisplay', 'iconAndText')!;
+
+  function renderLocationPref(location: string) {
+    const groups = [{ id: '_head' }, ...(registry.getActionGroups(location) || []), { id: '_tail' }];
+    const result: React.ReactNode[] = [];
+    const pref = currentPref[location] || [];
+
+    groups.forEach((group, gi) => {
+      const actions = registry.getToolbarActions({ location, group: group.id });
+      if (actions && actions.actions.length > 0) {
+        if (result.length > 0) {
+          result.push(<div className={styles['group-split']} key={'split-' + gi}></div>);
+        }
+        actions.actions.forEach((action, i) => {
+          let visible = pref.indexOf(action.id) === -1;
+          const id = 'action-toggle-' + action.id;
+          result.push(
+            <div className={styles['action-item']} key={i + '_' + action.id}>
+              <CheckBox
+                onChange={() => {
+                  service.toggleActionVisibility(location, action.id, !visible);
+                  visible = !visible;
+                }}
+                defaultChecked={visible}
+                id={id}
+                label={action.description ?? action.id}
+              />
+            </div>,
+          );
+        });
+      }
+    });
+    if (result.length === 0) {
+      return null;
+    }
+
+    return (
+      <div key={location} className={styles['toolbar-customize-location']}>
+        {result}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles['toolbar-customize-overlay']}>
+      <div className={styles['toolbar-customize']}>
+        {locations.map((location) => renderLocationPref(location))}
+        <div className={styles['button-display']}>
+          <div>{localize('toolbar-customize.buttonDisplay.description')}</div>
+          <Select
+            options={[
+              {
+                label: localize('toolbar-customize.buttonDisplay.icon'),
+                value: 'icon',
+              },
+              {
+                label: localize('toolbar-customize.buttonDisplay.iconAndText'),
+                value: 'iconAndText',
+              },
+            ]}
+            value={currentDisplayPref}
+            onChange={(v) => {
+              const effectingScope = preferenceService.inspect('toolbar.buttonDisplay')!.workspaceValue
+                ? PreferenceScope.Workspace
+                : PreferenceScope.User;
+              preferenceService.set('toolbar.buttonDisplay', v, effectingScope);
+              currentDisplayPref = v;
+            }}
+            className={styles['button-display-select']}
+          ></Select>
+        </div>
+        <div className={styles['customize-complete']}>
+          <Button type='primary' onClick={() => setVisible(false)}>
+            {localize('toolbar-customize.complete')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/common/index.ts

@@ -0,0 +1,46 @@
+import { FileTreeDropEvent } from '@opensumi/ide-core-common';
+
+export const FileDropServicePath = 'FileDropServicePath';
+
+export const IFileDropServiceToken = Symbol('IFileDropService');
+
+export interface IFileDropBackendService {
+  $ensureFileExist(fileName: string, targetDir: string): Promise<boolean>;
+  $writeStream(chunk: string | ArrayBuffer, fileName: string, targetDir: string, done: boolean): Promise<void>;
+}
+
+export const IFileDropFrontendServiceToken = Symbol('IFileDropFrontendService');
+export interface IFileDropFrontendService {
+  onDidDropFile(e: FileTreeDropEvent): void;
+}
+
+export interface IWebkitDataTransfer {
+  items: IWebkitDataTransferItem[];
+}
+
+export interface IWebkitDataTransferItem {
+  webkitGetAsEntry(): IWebkitDataTransferItemEntry;
+}
+
+export interface IWebkitDataTransferItemEntry {
+  name: string | undefined;
+  fullPath: string;
+  isFile: boolean;
+  isDirectory: boolean;
+  type: string;
+
+  file(resolve: (file: File) => void, reject: () => void): void;
+  createReader(): IWebkitDataTransferItemEntryReader;
+}
+
+export interface IWebkitDataTransferItemEntryReader {
+  readEntries(resolve: (file: IWebkitDataTransferItemEntry[]) => void, reject: () => void): void;
+}
+
+export const ConnectionBackServicePath = 'ConnectionBackServicePath';
+
+export const IConnectionBackService = Symbol('IConnectionBackService');
+
+export interface IConnectionBackService {
+  $measure(): Promise<void>;
+}

package/src/index.ts

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

package/src/node/connection-rtt-service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@opensumi/di';
+
+import { IConnectionBackService } from '../common';
+
+@Injectable()
+export class ConnectionRTTBackService implements IConnectionBackService {
+  $measure(): Promise<void> {
+    return Promise.resolve();
+  }
+}

package/src/node/file-drop.service.ts

@@ -0,0 +1,34 @@
+import fs from 'fs';
+import path from 'path';
+
+import { Injectable } from '@opensumi/di';
+import { Uri } from '@opensumi/ide-core-common';
+
+import { IFileDropBackendService } from '../common';
+@Injectable()
+export class FileDropService implements IFileDropBackendService {
+  private writeableStreams: Map<string, fs.WriteStream> = new Map();
+
+  async $ensureFileExist(fileName: string, targetDir: string): Promise<boolean> {
+    const targetPath = Uri.file(path.join(targetDir, fileName)).path;
+    this.writeableStreams.set(targetPath, fs.createWriteStream(targetPath));
+    return true;
+  }
+
+  $writeStream(chunk: string | ArrayBuffer, fileName: string, targetDir: string, done: boolean): Promise<void> {
+    const targetPath = Uri.file(path.join(targetDir, fileName)).path;
+    const stream = this.writeableStreams.get(targetPath);
+    return new Promise((resolve, reject) => {
+      stream?.write(chunk, 'binary', (err) => {
+        if (err) {
+          reject(err);
+        }
+        resolve();
+        if (done) {
+          stream.close();
+          this.writeableStreams.delete(targetPath);
+        }
+      });
+    });
+  }
+}

package/src/node/index.ts

@@ -0,0 +1,37 @@
+import { Provider, Injectable } from '@opensumi/di';
+import { NodeModule } from '@opensumi/ide-core-node';
+
+import {
+  IFileDropServiceToken,
+  FileDropServicePath,
+  IConnectionBackService,
+  ConnectionBackServicePath,
+} from '../common';
+
+import { ConnectionRTTBackService } from './connection-rtt-service';
+import { FileDropService } from './file-drop.service';
+
+@Injectable()
+export class AddonsModule extends NodeModule {
+  providers: Provider[] = [
+    {
+      token: IFileDropServiceToken,
+      useClass: FileDropService,
+    },
+    {
+      token: IConnectionBackService,
+      useClass: ConnectionRTTBackService,
+    },
+  ];
+
+  backServices = [
+    {
+      servicePath: FileDropServicePath,
+      token: IFileDropServiceToken,
+    },
+    {
+      servicePath: ConnectionBackServicePath,
+      token: IConnectionBackService,
+    },
+  ];
+}