@difizen/libro-core 0.0.0-snapshot-20241017072317

package/src/settings/setting-editor/configuration-panel-view.tsx

@@ -0,0 +1,89 @@
+import type { ConfigurationNode } from '@difizen/mana-app';
+import {
+  BaseView,
+  prop,
+  transient,
+  useInject,
+  view,
+  ViewInstance,
+  ConfigurationRenderRegistry,
+  useConfigurationValue,
+  SchemaValidator,
+} from '@difizen/mana-app';
+import { Form } from 'antd';
+import React from 'react';
+
+import './index.less';
+
+const layout = {
+  labelCol: { span: 8 },
+  wrapperCol: { span: 16 },
+};
+
+export const ConfigurationNodeRender: React.FC<{ node: ConfigurationNode<any> }> = ({
+  node,
+}) => {
+  const configurationRenderRegistry = useInject(ConfigurationRenderRegistry);
+  const schemaValidator = useInject(SchemaValidator);
+  const Render = configurationRenderRegistry.getConfigurationRender(node);
+  const [value, setValue] = useConfigurationValue(node);
+  return (
+    <div key={node.id}>
+      {Render && (
+        <div id={node.id}>
+          <Form.Item
+            label={node.title}
+            extra={node.description}
+            rules={[
+              {
+                validator: (_, currentVal) => {
+                  const valid = schemaValidator.validateNode(node, currentVal);
+                  if (valid) {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject(new Error('invalid value'));
+                },
+              },
+            ]}
+            hasFeedback
+          >
+            <Render
+              label={node.title}
+              value={value}
+              schema={node.schema}
+              onChange={(val) => {
+                setValue(val);
+              }}
+            />
+          </Form.Item>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DefaultConfigurationViewComponent: React.FC = () => {
+  const [form] = Form.useForm();
+  const viewInstance = useInject<ConfigurationPanelView>(ViewInstance);
+  const configs = viewInstance.configurationNodes;
+  return (
+    <Form
+      {...layout}
+      form={form}
+      className={`libro-configuration-site-card ${viewInstance.className}`}
+    >
+      {configs?.map((config) => {
+        return <ConfigurationNodeRender node={config} key={config.id} />;
+      })}
+    </Form>
+  );
+};
+
+@transient()
+@view('ConfigurationPanel')
+export class ConfigurationPanelView extends BaseView {
+  override view = DefaultConfigurationViewComponent;
+
+  @prop()
+  configurationNodes: ConfigurationNode<any>[] = [];
+}

package/src/settings/setting-editor/configuration-render-contribution.ts

@@ -0,0 +1,81 @@
+import type { ConfigurationRender } from '@difizen/mana-app';
+import { singleton, ConfigurationRenderContribution } from '@difizen/mana-app';
+
+import {
+  DefaultCheckbox,
+  DefaultInput,
+  DefaultInputNumber,
+  DefaultSelect,
+  DefaultSwitch,
+  DefaultDatePicker,
+} from './default-node-render.js';
+
+@singleton({ contrib: [ConfigurationRenderContribution] })
+export class DefaultConfigurationRenderContribution
+  implements ConfigurationRenderContribution
+{
+  registerConfigurationRenders(): ConfigurationRender[] {
+    return [
+      {
+        canHandle: (config) => {
+          if (config.type === 'input') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultInput,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'checkbox') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultCheckbox,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'switch') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultSwitch,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'inputnumber') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultInputNumber,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'select') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultSelect,
+      },
+      {
+        canHandle: (config) => {
+          if (config.type === 'datepicker') {
+            return 1;
+          } else {
+            return false;
+          }
+        },
+        component: DefaultDatePicker,
+      },
+    ];
+  }
+}

package/src/settings/setting-editor/default-node-render.tsx

@@ -0,0 +1,65 @@
+import type { RenderProps } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Checkbox, DatePicker, Input, InputNumber, Select, Switch } from 'antd';
+import dayjs from 'dayjs';
+import React from 'react';
+
+const { Option } = Select;
+
+export const DefaultInput: React.FC<RenderProps<string>> = ({ value, onChange }) => (
+  <Input value={value} onChange={(event) => onChange(event.target.value)} />
+);
+
+export const DefaultInputNumber: React.FC<RenderProps<number>> = ({
+  value,
+  onChange,
+  schema,
+}) => (
+  <InputNumber
+    value={value}
+    min={schema.minimum ?? Number.MIN_SAFE_INTEGER}
+    max={schema.maximum ?? Number.MAX_SAFE_INTEGER}
+    onChange={(val) => onChange(val)}
+  />
+);
+
+export const DefaultCheckbox: React.FC<RenderProps<boolean>> = ({
+  value,
+  onChange,
+}) => {
+  return (
+    <Checkbox checked={value} onChange={(event) => onChange(event.target.checked)}>
+      {value ? l10n.t('开启') : l10n.t('关闭')}
+    </Checkbox>
+  );
+};
+
+export const DefaultSwitch: React.FC<RenderProps<boolean>> = ({ value, onChange }) => (
+  <Switch checked={value} onChange={(checked: boolean) => onChange(checked)} />
+);
+
+export const DefaultSelect: React.FC<RenderProps<string>> = ({
+  value,
+  onChange,
+  schema,
+}) => (
+  <Select value={value} onChange={(val: string) => onChange(val)}>
+    {schema['enum'].map((val: string) => (
+      <Option key={val} value={val}>
+        {val}
+      </Option>
+    ))}
+  </Select>
+);
+
+const dateFormat = 'YYYY/MM/DD';
+
+export const DefaultDatePicker: React.FC<RenderProps<string>> = ({
+  value,
+  onChange,
+}) => (
+  <DatePicker
+    value={dayjs(value, dateFormat)}
+    onChange={(date, dateString) => onChange(dateString.toString())}
+  />
+);

package/src/settings/setting-editor/index.less

@@ -0,0 +1,12 @@
+.libro-configuration-tree {
+  height: 100%;
+
+  .libro-configuration-content {
+    height: calc(100% - 48px);
+  }
+}
+
+.libro-configuration-site-card {
+  padding: 30px;
+  background: #ececec;
+}

package/src/settings/setting-editor/index.ts

@@ -0,0 +1,6 @@
+export * from './module.js';
+export * from './configuration-panel-view.js';
+export * from './configuration-render-contribution.js';
+export * from './default-node-render.js';
+export * from './setting-editor-view.js';
+export * from './setting-tree-view.js';

package/src/settings/setting-editor/module.ts

@@ -0,0 +1,17 @@
+import { ManaModule, ConfigurationModule } from '@difizen/mana-app';
+
+import { ConfigurationPanelView } from './configuration-panel-view.js';
+import { DefaultConfigurationRenderContribution } from './configuration-render-contribution.js';
+import { SettingEditorView } from './setting-editor-view.js';
+// import { SettingTreeService } from './setting-tree-service.js';
+// import { SettingTreeView } from './setting-tree-view.js';
+
+export const SettingEditorModule = ManaModule.create()
+  .register(
+    SettingEditorView,
+    DefaultConfigurationRenderContribution,
+    ConfigurationPanelView,
+    // SettingTreeView,
+    // SettingTreeService,
+  )
+  .dependOn(ConfigurationModule);

package/src/settings/setting-editor/setting-editor-view.tsx

@@ -0,0 +1,93 @@
+import {
+  BaseView,
+  view,
+  singleton,
+  ViewRender,
+  inject,
+  ViewManager,
+  useInject,
+  ViewInstance,
+  prop,
+  URI,
+  ConfigurationRegistry,
+} from '@difizen/mana-app';
+import { SplitPanel } from '@difizen/mana-react';
+import { useEffect, useState } from 'react';
+
+import { ConfigurationPanelView } from './configuration-panel-view.js';
+import { SettingTreeView } from './setting-tree-view.js';
+
+export const SettingEditorComponent: React.FC = () => {
+  const viewInstance = useInject<SettingEditorView>(ViewInstance);
+  const viewManager = useInject<ViewManager>(ViewManager);
+  const PanelView = viewInstance.configurationPanel?.view;
+
+  const [treeView, setTreeView] = useState<SettingTreeView>();
+  useEffect(() => {
+    viewManager
+      .getOrCreateView(SettingTreeView)
+      .then((item) => {
+        setTreeView(item);
+        return;
+      })
+      .catch(console.error);
+  });
+
+  return (
+    <SplitPanel id="">
+      <SplitPanel.Pane className="" id="" defaultSize={200}>
+        {treeView && <ViewRender view={treeView} />}
+      </SplitPanel.Pane>
+      <SplitPanel.Pane className="" id="" flex={1}>
+        {PanelView && <PanelView />}
+      </SplitPanel.Pane>
+    </SplitPanel>
+  );
+};
+
+@singleton()
+@view('SettingEditor')
+export class SettingEditorView extends BaseView {
+  override view = SettingEditorComponent;
+
+  protected readonly configurationRegistry: ConfigurationRegistry;
+  protected readonly viewManager: ViewManager;
+
+  constructor(
+    @inject(ConfigurationRegistry) configurationRegistry: ConfigurationRegistry,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super();
+    this.configurationRegistry = configurationRegistry;
+    this.viewManager = viewManager;
+  }
+
+  @prop()
+  configurationPanel?: ConfigurationPanelView;
+
+  override async onViewMount() {
+    await this.initFileView();
+    await this.initPanel();
+  }
+
+  async initPanel() {
+    const namespace = this.configurationRegistry.getRootNamespaces().at(0);
+    if (namespace) {
+      this.configurationPanel =
+        await this.viewManager.getOrCreateView<ConfigurationPanelView>(
+          ConfigurationPanelView,
+        );
+      this.configurationPanel.configurationNodes =
+        this.configurationRegistry.getConfigurationByNamespace([namespace], false);
+    }
+  }
+
+  async initFileView() {
+    const treeView =
+      await this.viewManager.getOrCreateView<SettingTreeView>(SettingTreeView);
+    // if (!this.viewStorage.canStoreView) {
+    treeView.model.rootVisible = false;
+    treeView.model.location = new URI('file:///');
+    // }
+  }
+}

package/src/settings/setting-editor/setting-tree-service.ts

@@ -0,0 +1,82 @@
+import { inject, ConfigurationRegistry, URI } from '@difizen/mana-app';
+import { FileService, singleton } from '@difizen/mana-app';
+import type { FileStatWithMetadata } from '@difizen/mana-app';
+
+const defaultFileMeta = {
+  mtime: 0,
+  ctime: 0,
+  etag: '',
+  size: 0,
+  isFile: false,
+  isDirectory: false,
+  isSymbolicLink: false,
+};
+
+@singleton({ contrib: FileService })
+export class SettingTreeService extends FileService {
+  protected readonly configurationRegistry: ConfigurationRegistry;
+  constructor(
+    @inject(ConfigurationRegistry) configurationRegistry: ConfigurationRegistry,
+  ) {
+    super();
+    this.configurationRegistry = configurationRegistry;
+  }
+
+  override async resolve(
+    resource: URI,
+    // options?: ResolveFileOptions | undefined,
+  ): Promise<FileStatWithMetadata> {
+    if (resource.path.isRoot) {
+      const roots = this.configurationRegistry.getRootNamespaces().map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: false,
+          isDirectory: true,
+          name: item,
+          resource: URI.resolve(resource, item),
+        };
+      });
+      return {
+        ...defaultFileMeta,
+        isDirectory: true,
+        name: resource.displayName,
+        resource,
+        children: roots,
+      };
+    }
+
+    const name = resource.path.name;
+
+    const namespaces = this.configurationRegistry
+      .getChildNamespaces([name])
+      .map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: false,
+          isDirectory: true,
+          name: item.join('.'),
+          resource: URI.resolve(resource, item.join('.')),
+        };
+      });
+
+    const configs = this.configurationRegistry
+      .getConfigurationByNamespace([name])
+      .map((item) => {
+        return {
+          ...defaultFileMeta,
+          isFile: true,
+          name: item.title ?? '',
+          resource: URI.resolve(resource, item.id),
+        };
+      });
+
+    return {
+      ...defaultFileMeta,
+      isFile: false,
+      isDirectory: true,
+      name: resource.displayName,
+      resource,
+      children: [...namespaces, ...configs],
+    };
+  }
+}

package/src/settings/setting-editor/setting-tree-view.tsx

@@ -0,0 +1,95 @@
+import {
+  CommandRegistry,
+  FileStatNode,
+  FileTreeModel,
+  FileTreeView,
+  FileTreeViewModule,
+  inject,
+  LabelProvider,
+  SelectionService,
+  singleton,
+  TreeDecoratorService,
+  TreeProps,
+  TreeViewComponent,
+  TreeViewDecorator,
+  view,
+} from '@difizen/mana-app';
+import type { TreeNode } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import React, { forwardRef } from 'react';
+import './index.less';
+
+export const SettingTreeFactoryId = 'setting-editor-tree';
+export const FileTreeComponent = forwardRef<HTMLDivElement, any>(
+  function FileTreeComponent(props, containerRef: React.ForwardedRef<HTMLDivElement>) {
+    return (
+      <div className="libro-configuration-tree" ref={containerRef}>
+        <div className="ai-infra-configuration-header">{l10n.t('文件')}</div>
+        <div className="libro-configuration-content">
+          <TreeViewComponent />
+        </div>
+      </div>
+    );
+  },
+);
+
+export const SettingTreeComponent: React.FC = () => {
+  return <></>;
+};
+
+function jump(h: string) {
+  const url = location.href; //Save down the URL without hash.
+  location.href = '#' + h; //Go to the target element.
+  history.replaceState(null, '', url); //Don't like hashes. Changing it back.
+}
+
+@singleton()
+@view(SettingTreeFactoryId, FileTreeViewModule)
+export class SettingTreeView extends FileTreeView {
+  protected command: CommandRegistry;
+  override readonly props: TreeProps;
+  override readonly model: FileTreeModel;
+  override readonly treeViewDecorator: TreeViewDecorator;
+  override readonly selectionService: SelectionService;
+  override readonly labelProvider: LabelProvider;
+  protected override readonly decoratorService: TreeDecoratorService;
+
+  constructor(
+    @inject(CommandRegistry) command: CommandRegistry,
+    @inject(TreeProps) props: TreeProps,
+    @inject(FileTreeModel) model: FileTreeModel,
+    @inject(TreeViewDecorator) treeViewDecorator: TreeViewDecorator,
+    @inject(SelectionService) selectionService: SelectionService,
+    @inject(LabelProvider) labelProvider: LabelProvider,
+    @inject(TreeDecoratorService)
+    decoratorService: TreeDecoratorService,
+  ) {
+    super(
+      props,
+      model,
+      treeViewDecorator,
+      selectionService,
+      labelProvider,
+      decoratorService,
+    );
+    this.command = command;
+    this.props = props;
+    this.model = model;
+    this.treeViewDecorator = treeViewDecorator;
+    this.selectionService = selectionService;
+    this.labelProvider = labelProvider;
+    this.decoratorService = decoratorService;
+
+    this.className += ` libro-configuration-tree`;
+  }
+
+  override handleClickEvent(
+    node: TreeNode | undefined,
+    event: React.MouseEvent<HTMLElement>,
+  ): void {
+    if (node && FileStatNode.is(node) && node.fileStat.isFile) {
+      jump(node.fileStat.resource.path.base);
+    }
+    super.handleClickEvent(node, event);
+  }
+}

package/src/settings/settings-contribution.tsx

@@ -0,0 +1,24 @@
+import { ModalContribution, singleton, ToolbarContribution } from '@difizen/mana-app';
+import type { ToolbarRegistry } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+import { DocumentCommands } from '../command/document-commands.js';
+
+import { SettingsModal } from './settings-modal.js';
+
+@singleton({ contrib: [ModalContribution, ToolbarContribution] })
+export class SettingsContribution implements ModalContribution, ToolbarContribution {
+  registerModal() {
+    return SettingsModal;
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry) {
+    registry.registerItem({
+      id: DocumentCommands['OpenSettings'].id,
+      icon: DocumentCommands['OpenSettings'].icon,
+      command: DocumentCommands['OpenSettings'].id,
+      order: 'z',
+      tooltip: l10n.t('设置'),
+    });
+  }
+}

package/src/settings/settings-modal.less

@@ -0,0 +1,3 @@
+.libro-settings-modal {
+  background-color: #fff !important;
+}

package/src/settings/settings-modal.tsx

@@ -0,0 +1,51 @@
+import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
+import { ConfigurationRegistry } from '@difizen/mana-app';
+import { useInject, ViewManager, ViewRender } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Modal } from 'antd';
+import { useEffect, useState } from 'react';
+
+import { ConfigurationPanelView } from './setting-editor/index.js';
+import { LibroUserSettingsNamespace } from './settings-protocol.js';
+import './settings-modal.less';
+
+export function SettingsModalComponent({ visible, close }: ModalItemProps<void>) {
+  const viewManager = useInject(ViewManager);
+  const configRegistry = useInject(ConfigurationRegistry);
+  const [settingEditorView, setSettingEditorView] = useState<ConfigurationPanelView>();
+
+  useEffect(() => {
+    viewManager
+      .getOrCreateView<ConfigurationPanelView>(ConfigurationPanelView)
+      .then((view) => {
+        const config = configRegistry.getConfigurationByNamespace(
+          [LibroUserSettingsNamespace],
+          false,
+        );
+        view.configurationNodes = config;
+        view.className = 'libro-settings-modal';
+        setSettingEditorView(view);
+        return;
+      })
+      .catch((e) => {
+        //
+      });
+  }, [configRegistry, viewManager]);
+
+  return (
+    <Modal
+      title={l10n.t('设置')}
+      open={visible}
+      onOk={() => close()}
+      onCancel={() => close()}
+      width={600}
+    >
+      {settingEditorView && <ViewRender view={settingEditorView} />}
+    </Modal>
+  );
+}
+
+export const SettingsModal: ModalItem = {
+  id: 'settings.modal',
+  component: SettingsModalComponent,
+};

package/src/settings/settings-protocol.ts

@@ -0,0 +1,7 @@
+import type { ConfigurationStorage } from '@difizen/mana-app';
+
+export const LibroUserSettingsNamespace = 'libro.user';
+export const LibroUserSettingStorage: ConfigurationStorage = {
+  id: '__libro.user.storage__',
+  priority: 100,
+};

package/src/slot/index.ts

@@ -0,0 +1,4 @@
+export * from './libro-slot-protocol.js';
+export * from './libro-slot-manager.js';
+export * from './libro-slot-view.js';
+export * from './module.js';

package/src/slot/libro-slot-manager.ts

@@ -0,0 +1,38 @@
+import type { Contribution } from '@difizen/mana-app';
+import { SlotViewManager } from '@difizen/mana-app';
+import { contrib, inject, singleton } from '@difizen/mana-app';
+
+import type { LibroView } from '../libro-view.js';
+
+import type { LibroSlot } from './libro-slot-protocol.js';
+import { LibroExtensionSlotContribution } from './libro-slot-protocol.js';
+
+@singleton()
+export class LibroSlotManager {
+  @inject(SlotViewManager) slotViewManager: SlotViewManager;
+  protected readonly libroExtraProvider: Contribution.Provider<LibroExtensionSlotContribution>;
+  constructor(
+    @contrib(LibroExtensionSlotContribution)
+    libroExtraProvider: Contribution.Provider<LibroExtensionSlotContribution>,
+  ) {
+    this.libroExtraProvider = libroExtraProvider;
+  }
+
+  getSlotName(libro: LibroView, slot: LibroSlot): string {
+    return `libro-slot-${slot}-${libro.id}`;
+  }
+
+  setup(libro: LibroView) {
+    this.libroExtraProvider.getContributions().forEach(async (item) => {
+      const extra = await item.factory(libro);
+      this.slotViewManager.addView(
+        extra,
+        this.getSlotName(libro, item.slot),
+        item.viewOpenOption,
+      );
+      libro.onDisposed(() => {
+        extra.dispose();
+      });
+    });
+  }
+}