@difizen/libro-core 0.0.0-snapshot-20241017072317

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

@@ -0,0 +1,28 @@
+import type { View } from '@difizen/mana-app';
+import { Syringe } from '@difizen/mana-app';
+
+import type { LibroView } from '../libro-view.js';
+
+export type LibroExtensionSlotFactory = (view: LibroView) => Promise<View>;
+
+export const LibroExtensionSlotContribution = Syringe.defineToken(
+  'LibroExtensionSlotContribution',
+);
+export interface LibroExtensionSlotContribution {
+  factory: LibroExtensionSlotFactory;
+  slot: LibroSlot;
+  viewOpenOption?: {
+    order?: string;
+    reveal?: boolean;
+  };
+}
+
+export type LibroSlot = 'content' | 'container' | 'list' | 'right';
+
+export interface DisplayView {
+  isDisplay: boolean;
+}
+
+export function isDisplayView(object: any): object is DisplayView {
+  return 'isDisplay' in object;
+}

package/src/slot/libro-slot-view.tsx

@@ -0,0 +1,48 @@
+import { DefaultSlotView, view, ViewRender, ViewInstance } from '@difizen/mana-app';
+import { transient } from '@difizen/mana-app';
+import { equals, prop, useInject } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import { isDisplayView } from './libro-slot-protocol.js';
+
+export const LibroExtensionViewComponent = forwardRef(
+  function LibroExtensionViewComponent(props, ref: React.ForwardedRef<HTMLDivElement>) {
+    const instance = useInject<LibroSlotView>(ViewInstance);
+    //过滤出实现了DisplayView接口的View,用于控制抢占逻辑
+    const filteredChildren = instance.children.filter((item) => {
+      return isDisplayView(item) && item.isDisplay;
+    });
+    if (filteredChildren.length < 1) {
+      return (
+        <div className={'libro-slot-container'} ref={ref}>
+          {instance.children.map(
+            (item) => !isDisplayView(item) && <ViewRender view={item} key={item.id} />,
+          )}
+        </div>
+      );
+    } else {
+      const activeView =
+        filteredChildren.find(
+          (item) => instance.active && equals(item, instance.active),
+        ) || filteredChildren[filteredChildren.length - 1];
+      return (
+        <div className={'libro-slot-container'} ref={ref}>
+          <ViewRender view={activeView} />
+          {instance.children.map(
+            (item) => !isDisplayView(item) && <ViewRender view={item} key={item.id} />,
+          )}
+        </div>
+      );
+    }
+  },
+);
+
+@transient()
+@view('libro-slot-view')
+export class LibroSlotView extends DefaultSlotView {
+  override label: React.ReactNode = null;
+  override view = LibroExtensionViewComponent;
+  @prop()
+  override sort?: boolean = false;
+  // sort?: boolean = true;
+}

package/src/slot/module.ts

@@ -0,0 +1,9 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroSlotManager } from './libro-slot-manager.js';
+import { LibroExtensionSlotContribution } from './libro-slot-protocol.js';
+import { LibroSlotView } from './libro-slot-view.js';
+
+export const LibroSlotModule = ManaModule.create()
+  .contribution(LibroExtensionSlotContribution)
+  .register(LibroSlotManager, LibroSlotView);

package/src/theme/libro-color-registry.ts

@@ -0,0 +1,386 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LibroColorRegistry implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.warning.background',
+        defaults: { dark: '#A9611466', light: '#FFFBE6' },
+        description: '',
+      },
+      {
+        id: 'libro.drag.hover.line.color',
+        defaults: { dark: '#467DB0', light: '#BFE0FF' },
+        description: '',
+      },
+      {
+        id: 'libro.background',
+        defaults: { dark: '#1F2022', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.popover.background.color',
+        defaults: { dark: '#2F3032', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.menu.hover.color',
+        defaults: { dark: '#515359', light: '#EBF6FF' },
+        description: '',
+      },
+      {
+        id: 'libro.dropdown.icon.color',
+        defaults: {
+          dark: '#FFFFFF4D',
+          light: '#00000033',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.input.background',
+        defaults: { dark: '#19191B', light: '#F4F6FB' },
+        description: '',
+      },
+      {
+        id: 'libro.text.default.color',
+        defaults: { dark: '#E3E4E6', light: '#000000' },
+        description: '',
+      },
+      {
+        id: 'libro.text.tertiary.color',
+        defaults: { dark: '#BDC0C4', light: '#B8BABA' },
+        description: '',
+      },
+      {
+        id: 'libro.output.background',
+        defaults: { dark: '#292A2D', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.toptoolbar.border.color',
+        defaults: {
+          dark: '#FFFFFF1A',
+          light: '#0000001A',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.toptoolbar.icon.color',
+        defaults: { dark: '#BFBFBF', light: '#7B7B7B' },
+        description: '',
+      },
+      {
+        id: 'libro.toptoolbar.disabled.icon.color',
+        defaults: {
+          dark: '#FFFFFF4D',
+          light: '#00000040',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.toptoolbar.text.color',
+        defaults: { dark: '#F5F5F5', light: '#000000' },
+        description: '',
+      },
+      {
+        id: 'libro.bottom.btn.background.color',
+        defaults: {
+          dark: '#FFFFFF0A',
+          light: '#FFFFFF',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.bottom.btn.border.color',
+        defaults: { dark: '#505559', light: '#000A1A29' },
+        description: '',
+      },
+      {
+        id: 'libro.bottom.btn.icon.color',
+        defaults: { dark: '#505559', light: '#525964D9' },
+        description: '',
+      },
+      {
+        id: 'libro.bottom.btn.text.color',
+        defaults: { dark: '#E3E4E6', light: '#000A1AAD' },
+        description: '',
+      },
+      {
+        id: 'libro.default.btn.background.color',
+        defaults: { dark: '#FFFFFF1A', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.default.btn.text.color',
+        defaults: { dark: '#E3E4E6', light: '#000A1AAD' },
+        description: '',
+      },
+      {
+        id: 'libro.primary.btn.background.color',
+        defaults: { dark: '#2A97FD', light: '#1890FF' },
+        description: '',
+      },
+      {
+        id: 'libro.default.btn.border.color',
+        defaults: { dark: '#BDC0C4', light: '#D6D8DA' },
+        description: '',
+      },
+      {
+        id: 'libro.toolbar.menu.label.color',
+        defaults: { dark: '#BDC0C4', light: '#000000A6' },
+        description: '',
+      },
+      {
+        id: 'libro.toolbar.menu.disabled.label.color',
+        defaults: { dark: '#878C93', light: '#00000040' },
+        description: '',
+      },
+      {
+        id: 'libro.toolbar.menu.keybind.color',
+        defaults: { dark: '#878C93', light: '#00000073' },
+        description: '',
+      },
+      {
+        id: 'libro.sidetoolbar.icon.color',
+        defaults: { dark: '#BFBFBF', light: '#6982A9' },
+        description: '',
+      },
+      {
+        id: 'libro.sidetoolbar.border.color',
+        defaults: {
+          dark: '#FFFFFF14',
+          light: '#0000001A',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.close.color',
+        defaults: {
+          dark: '#FFFFFF73',
+          light: '#00000073',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.modal.title.color',
+        defaults: { dark: '#EDEEEF', light: '#000000D9' },
+        description: '',
+      },
+      {
+        id: 'libro.modal.content.color',
+        defaults: { dark: '#E3E4E6', light: '#000A1A' },
+        description: '',
+      },
+      {
+        id: 'libro.btn.primary.background.color',
+        defaults: { dark: '#2A97FD', light: '#1890FF' },
+        description: '',
+      },
+      {
+        id: 'libro.execution.count.color',
+        defaults: { dark: '#8694A9', light: '#6A83AA' },
+        description: '',
+      },
+      {
+        id: 'libro.tip.font.color',
+        defaults: { dark: '#D6D8DA', light: '#00000080' },
+        description: '',
+      },
+      {
+        id: 'libro.execution.tip.success.color',
+        defaults: { dark: '#48A918', light: '#0DC54E' },
+        description: '',
+      },
+      {
+        id: 'libro.link.color',
+        defaults: { dark: '#177DDC', light: '#1890FF' },
+        description: '',
+      },
+      {
+        id: 'libro.error.color',
+        defaults: { dark: '#CF4C52', light: '#ED1345' },
+        description: '',
+      },
+      {
+        id: 'libro.cell.border.color',
+        defaults: { dark: '#3B3C42', light: '#D6DEE6' },
+        description: '',
+      },
+      {
+        id: 'libro.cell.active.border.color',
+        defaults: { dark: '#378EDF', light: '#3490ED' },
+        description: '',
+      },
+      {
+        id: 'libro.cell.active.border.shadow.color',
+        defaults: {
+          dark: '#49A2FA40',
+          light: '#3592EE40',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.cell.header.content',
+        defaults: { dark: '#E3E4E6', light: '#545B66' },
+        description: '',
+      },
+      {
+        id: 'libro.cell.header.title',
+        defaults: { dark: '#D6D8DA', light: '#000A1A' },
+        description: '',
+      },
+      {
+        id: 'libro.code.border.color',
+        defaults: { dark: '#353638', light: '#DCE4EC' },
+        description: '',
+      },
+      {
+        id: 'libro.input.border.color',
+        defaults: { dark: '#505559', light: '#00000026' },
+        description: '',
+      },
+      {
+        id: 'libro.input.background.color',
+        defaults: { dark: '#FFFFFF0A', light: '#FFFFFF' },
+        description: '',
+      },
+      {
+        id: 'libro.input.group.btn.background.color',
+        defaults: { dark: '#00000005', light: '#00000005' },
+        description: '',
+      },
+      {
+        id: 'libro.table.innner.border.color',
+        defaults: { dark: '#1AFFFF', light: '#E5EBF1' },
+        description: '',
+      },
+      {
+        id: 'libro.table.bottom.border.color',
+        defaults: { dark: '#424242', light: '#E2E7EC' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.keyword.color',
+        defaults: { dark: '#109B67', light: '#098658' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.number.color',
+        defaults: { dark: '#109B67', light: '#098658' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.variable.2.color',
+        defaults: { dark: '#5DA4EA', light: '#2060A0' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.punctuation.color',
+        defaults: { dark: '#5DA4EA', light: '#2060A0' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.property.color',
+        defaults: { dark: '#5DA4EA', light: '#2060A0' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.operator.color',
+        defaults: { dark: 'E12EE1', light: '#C700C7' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.meta.color',
+        defaults: { dark: '#E12EE1', light: '#C700C7' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.builtin.color',
+        defaults: { dark: '#109B67', light: '#098658' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.variable.color',
+        defaults: { dark: '#E3E4E6', light: '#212121' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.def.color',
+        defaults: { dark: '#187DFF', light: '#003CFF' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.comment.color',
+        defaults: { dark: '#618961', light: '#406040' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.string.color',
+        defaults: { dark: '#FF5B48', light: '#C03030' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.activeline.color',
+        defaults: {
+          dark: '#E5E8F01A',
+          light: '#E5E8F080',
+        },
+        description: '',
+      },
+      {
+        id: 'libro.editor.selectionMatch.color',
+        defaults: { dark: '#99FF7780', light: '#DDE6FF' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.selection.color',
+        defaults: { dark: '#B4CEFF', light: '#B4CEFF' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.gutter.number.color',
+        defaults: { dark: '#A8AEBF', light: '#A4AECB' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.line.color',
+        defaults: { dark: '#565C6D', light: '#A4AECB' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.cursor.color',
+        defaults: { dark: '#FFFFFF', light: '#000000' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.search.match',
+        defaults: { dark: '#8c4717', light: '#ffb184' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.search.currentmatch',
+        defaults: { dark: '#a87713', light: '#fbde28' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.indent.marker.bg.color',
+        defaults: { dark: '#42444D', light: '#D6DBEB' },
+        description: '',
+      },
+      {
+        id: 'libro.editor.indent.marker.active.bg.color',
+        defaults: { dark: '#788491', light: '#9f9f9f' },
+        description: '',
+      },
+      {
+        id: 'libro.cell.selected.bg.color',
+        defaults: { dark: '#353638', light: '#F1FAFF' },
+        description: '',
+      },
+    );
+  }
+}

package/src/toolbar/all-outputs-scroll-icon.tsx

@@ -0,0 +1,19 @@
+import { useInject, ViewInstance } from '@difizen/mana-app';
+import type { FC } from 'react';
+
+import type { LibroView } from '../libro-view.js';
+import { DisableOutputScroll } from '../material-from-designer.js';
+
+export const AllOutputsScrollIcon: FC = () => {
+  const libroView = useInject<LibroView>(ViewInstance);
+
+  return (
+    <div
+      className={`libro-all-outputs-scroll-button ${
+        libroView.outputsScroll ? 'active' : ''
+      }`}
+    >
+      <DisableOutputScroll />
+    </div>
+  );
+};

package/src/toolbar/change-cell-to-selector.tsx

@@ -0,0 +1,67 @@
+import {
+  useInject,
+  ToolbarInstance,
+  getOrigin,
+  CommandRegistry,
+  ThemeService,
+} from '@difizen/mana-app';
+import type { Toolbar } from '@difizen/mana-app';
+import { ConfigProvider, Select, theme } from 'antd';
+import { memo } from 'react';
+
+import type { CellMeta } from '../cell/index.js';
+import { LibroCellService } from '../cell/index.js';
+import { NotebookCommands } from '../command/index.js';
+
+import type { LibroToolbarArags } from './libro-toolbar-protocol.js';
+import './index.less';
+
+const { Option } = Select;
+const widthStyle = { width: 110 };
+type ChangeType = {
+  name: string;
+  type: string;
+};
+export const ToolItemSelectInner: React.FC = () => {
+  const cellService: LibroCellService = useInject(LibroCellService);
+  const invertList: CellMeta[] = cellService.cellsMeta;
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  const command = useInject(CommandRegistry);
+  const curCell = data?.[0];
+  const themeService = useInject(ThemeService);
+
+  const handleChange = (value: string) => {
+    const args = getOrigin(data) || [];
+    command.executeCommand(NotebookCommands['ChangeCellTo'].id, ...args, value);
+  };
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm:
+          themeService.getCurrentTheme().type === 'dark'
+            ? theme.darkAlgorithm
+            : theme.defaultAlgorithm,
+      }}
+    >
+      <Select
+        value={curCell?.model?.type}
+        size={'small'}
+        style={widthStyle}
+        onChange={handleChange}
+        bordered={false}
+        popupClassName="libro-cell-selector"
+      >
+        {invertList.map((item: ChangeType) => {
+          return (
+            <Option value={item.type} key={item.name}>
+              {item.name}
+            </Option>
+          );
+        })}
+      </Select>
+    </ConfigProvider>
+  );
+};
+
+export const ToolItemSelect = memo(ToolItemSelectInner);

package/src/toolbar/hide-all-selector.tsx

@@ -0,0 +1,126 @@
+import { EyeInvisibleOutlined } from '@ant-design/icons';
+import {
+  useInject,
+  ToolbarInstance,
+  getOrigin,
+  CommandRegistry,
+} from '@difizen/mana-app';
+import type { Toolbar } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import { Menu, Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import { memo } from 'react';
+
+import { ExecutableCellModel } from '../cell/index.js';
+import { NotebookCommands } from '../command/index.js';
+
+import type { LibroToolbarArags } from './libro-toolbar-protocol.js';
+import './index.less';
+
+export const HideAllSelectInner: React.FC = () => {
+  const toolbar = useInject<Toolbar>(ToolbarInstance);
+  const data = toolbar.currentArgs as LibroToolbarArags;
+  // const data = useInject(ToolbarArgs) as LibroToolbarArags;
+  const command = useInject(CommandRegistry);
+  const libroView = data?.[1];
+  if (!libroView) {
+    return null;
+  }
+  const handleChange: MenuProps['onClick'] = (e) => {
+    const args = getOrigin(data) || [];
+    if (e.key === 'hideAllInputs') {
+      command.executeCommand(NotebookCommands['HideAllCellCode'].id, ...args);
+    } else if (e.key === 'hideAllOutputs') {
+      command.executeCommand(NotebookCommands['HideAllCellOutput'].id, ...args);
+    } else if (e.key === 'hideAll') {
+      command.executeCommand(NotebookCommands['HideAllCellCode'].id, ...args);
+      command.executeCommand(NotebookCommands['HideAllCellOutput'].id, ...args);
+    } else if (e.key === 'showAllInputs') {
+      command.executeCommand(NotebookCommands['ShowAllCellCode'].id, ...args);
+    } else if (e.key === 'showAllOutputs') {
+      command.executeCommand(NotebookCommands['ShowAllCellOutputs'].id, ...args);
+    } else if (e.key === 'showAll') {
+      command.executeCommand(NotebookCommands['ShowAllCellCode'].id, ...args);
+      command.executeCommand(NotebookCommands['ShowAllCellOutputs'].id, ...args);
+    }
+  };
+  //只要有一个cell input是显示的，隐藏cell input的选项都生效
+  const isCodeVisiable =
+    libroView.model.getCells().findIndex((item) => item.hasInputHidden === false) > -1
+      ? true
+      : false;
+  //只要有一个cell input是隐藏的，显示cell input的选项都生效
+  const isCodeHidden =
+    libroView.model.getCells().findIndex((item) => item.hasInputHidden === true) > -1
+      ? true
+      : false;
+  const isOutputVisible =
+    libroView.model
+      .getCells()
+      .findIndex(
+        (item) =>
+          ExecutableCellModel.is(item.model) && item.model.hasOutputHidden === false,
+      ) > -1
+      ? true
+      : false;
+  const isOutputHidden =
+    libroView.model
+      .getCells()
+      .findIndex(
+        (item) =>
+          ExecutableCellModel.is(item.model) && item.model.hasOutputHidden === true,
+      ) > -1
+      ? true
+      : false;
+  const menu = (
+    <Menu
+      onClick={handleChange}
+      items={[
+        {
+          key: 'hideAllInputs',
+          label: l10n.t('隐藏全部 Code'),
+          disabled: !isCodeVisiable,
+        },
+        {
+          key: 'hideAllOutputs',
+          label: l10n.t('隐藏全部 Output'),
+          disabled: !isOutputVisible,
+        },
+        {
+          key: 'hideAll',
+          label: l10n.t('全部隐藏'),
+          disabled: !isCodeVisiable || !isOutputVisible,
+        },
+        {
+          key: 'showAllInputs',
+          label: l10n.t('显示全部 Code'),
+          disabled: !isCodeHidden,
+        },
+        {
+          key: 'showAllOutputs',
+          label: l10n.t('显示全部 Output'),
+          disabled: !isOutputHidden,
+        },
+        {
+          key: 'showAll',
+          label: l10n.t('全部显示'),
+          disabled: !isCodeHidden || !isOutputHidden,
+        },
+      ]}
+    />
+  );
+
+  return (
+    <>
+      <Dropdown
+        overlay={menu}
+        placement="bottomLeft"
+        overlayClassName="libro-hide-selector-menu"
+      >
+        <EyeInvisibleOutlined style={{ fontSize: 20 }} />
+      </Dropdown>
+    </>
+  );
+};
+
+export const HideAllSelect = memo(HideAllSelectInner);