@difizen/libro-common 0.3.3 → 1.0.0

package/src/app/style/index.less

@@ -0,0 +1,181 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable custom-property-pattern */
+
+.app {
+  padding: 0;
+  margin: 0;
+  font-family: var(--mana-ui-font-family);
+}
+
+.mana-input {
+  padding-left: 5px;
+  color: var(--mana-input-foreground);
+  font-size: var(--mana-ui-font-size1);
+  font-family: var(--mana-ui-font-family);
+  line-height: var(--mana-content-line-height);
+  background: var(--mana-input-background);
+  border: var(--mana-border-width) solid var(--mana-input-border);
+}
+
+.mana-input::placeholder {
+  color: var(--mana-input-placeholderForeground);
+}
+
+.mana-maximized {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 255 !important;
+  width: auto !important;
+  height: auto !important;
+  background: var(--mana-editor-background);
+}
+
+.mana-visible-menu-maximized {
+  top: var(--mana-private-menubar-height) !important;
+}
+
+.applicationShell {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--mana-editor-background);
+}
+
+.mana-icon {
+  width: 32px;
+  height: 18px;
+  margin: 5px;
+  margin-left: 8px;
+}
+
+.mana-mod-disabled,
+.mana-mod-disabled:focus {
+  opacity: var(--mana-mod-disabled-opacity) !important;
+}
+
+.mana-header {
+  font-weight: 450;
+  font-size: var(--mana-ui-font-size0);
+  text-transform: uppercase;
+}
+
+.p-Widget {
+  font-size: var(--mana-ui-font-size1);
+}
+
+.p-Widget.p-mod-hidden {
+  display: none !important;
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                   supported by Chrome and Opera */
+}
+
+::selection {
+  background: var(--mana-selection-background);
+}
+
+.p-Widget:focus {
+  border: none;
+  outline: none;
+}
+
+.action-item {
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-item:hover {
+  background-color: rgba(50%, 50%, 50%, 20%);
+}
+
+button.mana-button,
+.mana-button {
+  min-width: 65px;
+  margin-left: calc(var(--mana-ui-padding) * 2);
+  padding: 4px 9px;
+  color: var(--mana-button-foreground);
+  background-color: var(--mana-button-background);
+  border: none;
+  border-radius: 1px;
+  outline: none;
+  box-shadow:
+    0 1px 5px 0 rgba(0, 0, 0, 20%),
+    0 1px 2px 0 rgba(0, 0, 0, 14%),
+    0 1px 1px -2px rgba(0, 0, 0, 12%);
+  cursor: pointer;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+button.mana-button:hover,
+.mana-button:hover,
+.mana-button:focus {
+  background-color: var(--mana-button-hoverBackground);
+}
+
+button.secondary,
+.mana-button.secondary {
+  color: var(--mana-secondaryButton-foreground);
+  background-color: var(--mana-secondaryButton-background);
+}
+
+button.secondary:hover,
+.mana-button.secondary:hover {
+  background-color: var(--mana-secondaryButton-hoverBackground);
+}
+
+button.mana-button[disabled],
+.mana-button[disabled] {
+  color: var(--mana-button-disabledForeground);
+  background-color: var(--mana-button-disabledBackground);
+  cursor: default;
+  opacity: 0.6;
+}
+
+button.secondary[disabled],
+.mana-button.secondary[disabled] {
+  color: var(--mana-secondaryButton-disabledForeground);
+  background-color: var(--mana-secondaryButton-disabledBackground);
+}
+
+.mana-select {
+  color: var(--dropdown-foreground);
+  font-size: var(--mana-ui-font-size1);
+  background: var(--mana-dropdown-background);
+  border: 1px solid var(--mana-dropdown-border);
+  border-radius: 0;
+  outline: none;
+}
+
+.mana-select option {
+  background: var(--mana-dropdown-listBackground);
+}
+
+.mana-transparent-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+.mana-cursor-no-drop,
+.mana-cursor-no-drop:active {
+  cursor: no-drop;
+}

package/src/app/style/style-protocol.ts

@@ -0,0 +1,13 @@
+import type PerfectScrollbar from 'perfect-scrollbar';
+
+export const ACTION_ITEM = 'action-item';
+export const DISABLED_CLASS = 'mana-mod-disabled';
+export const EXPANSION_TOGGLE_CLASS = 'mana-expansion-toggle';
+export const COLLAPSED_CLASS = 'mana-mod-collapsed';
+export const BUSY_CLASS = 'mana-mod-busy';
+export const SELECTED_CLASS = 'mana-mod-selected';
+export const FOCUS_CLASS = 'mana-mod-focus';
+export const DEFAULT_SCROLL_OPTIONS: PerfectScrollbar.Options = {
+  suppressScrollX: true,
+  minScrollbarLength: 35,
+};

package/src/app/toolbar/index.less

@@ -0,0 +1,40 @@
+.mana-toolbar {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 0 4px;
+
+  &-item {
+    margin: 0 4px;
+    cursor: pointer;
+  }
+
+  &-item-disabled {
+    cursor: default;
+    opacity: var(--mana-mod-disabled-opacity);
+  }
+
+  &-item-active {
+    background-color: var(--mana-selection-background);
+  }
+
+  &-more {
+    & :hover {
+      background-color: var(--mana-menubar-background);
+    }
+  }
+
+  &-inline-divider {
+    display: block;
+    width: 1px;
+    margin: 2px 4px;
+    background: rgba(150, 150, 150, 20%);
+    pointer-events: none;
+  }
+
+  &-item-label {
+    display: inline-block;
+    margin: 0 4px;
+  }
+}

package/src/app/toolbar/index.ts

@@ -0,0 +1,20 @@
+import { ManaModule } from '../../core/index.js';
+
+import { Toolbar, ToolbarFactory } from './toolbar.js';
+import 'rc-tooltip/assets/bootstrap.css';
+import './index.less';
+
+export const ToolbarModule = ManaModule.create()
+  .register(Toolbar)
+  .register({
+    token: ToolbarFactory,
+    useDynamic: (ctx) => {
+      return () => {
+        const toolbar = ctx.container.get(Toolbar);
+        return toolbar;
+      };
+    },
+  });
+
+export * from './toolbar.js';
+export * from './toolbar-render.js';

package/src/app/toolbar/toolbar-item-keeper.tsx

@@ -0,0 +1,45 @@
+import type { ToolbarItem } from '../../core/index.js';
+import { CommandRegistry } from '../../core/index.js';
+import { observable, useObserve } from '../../observable/index.js';
+import { useInject } from '../../observable/index.js';
+import { memo } from 'react';
+import type { Toolbar } from './toolbar.js';
+import type { ToolbarItemData, ToolbarItemState } from './toolbar-protocol.js';
+
+interface ToolbarItemKeeperProps {
+  data: ToolbarItemData;
+  item: ToolbarItem;
+  toolbar: Toolbar;
+}
+const ToolbarItemKeeperInner = (props: ToolbarItemKeeperProps) => {
+  const commands = useInject(CommandRegistry);
+  const item = useObserve(props.item);
+  const toolbar = useObserve(props.toolbar);
+
+  const handleState = (...args: any[]): ToolbarItemState => {
+    const visible = commands.isVisibleByHandler(item, item.command, ...args);
+    let enable = false;
+    let active = false;
+    if (visible) {
+      enable = commands.isEnabledByHandler(item, item.command, ...args);
+      active = commands.isActiveByHandler(item, item.command, ...args);
+    }
+    return { id: item.id, visible, enable, active };
+  };
+  let data = useObserve(props.data);
+  if (!Array.isArray(data)) {
+    data = [data];
+  }
+  const newState = handleState(...data);
+  const currentState = toolbar.getState(item);
+  if (currentState) {
+    const observableState = observable(currentState);
+    observableState.visible = !!newState?.visible;
+    observableState.enable = !!newState?.enable;
+    observableState.active = !!newState?.active;
+  } else {
+    toolbar.setState(newState);
+  }
+  return null;
+};
+export const ToolbarItemKeeper = memo(ToolbarItemKeeperInner);

package/src/app/toolbar/toolbar-item-render.tsx

@@ -0,0 +1,23 @@
+import type { ToolbarItem } from '../../core/index.js';
+import { useObserve } from '../../observable/index.js';
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import type { Toolbar } from './toolbar.js';
+import type { ToolbarItemState } from './toolbar-protocol.js';
+
+interface ToolbarItemRenderProps {
+  data: any;
+  item: ToolbarItem;
+  toolbar: Toolbar;
+  state: ToolbarItemState;
+}
+function ToolbarItemRenderInner(props: ToolbarItemRenderProps) {
+  const data = useObserve(props.data);
+  const item = useObserve(props.item);
+  const toolbar = useObserve(props.toolbar);
+  const state = useObserve(props.state);
+  return <>{toolbar.renderItem(data, item, state)}</>;
+}
+export const ToolbarItemRender: FC<ToolbarItemRenderProps> =
+  memo(ToolbarItemRenderInner);

package/src/app/toolbar/toolbar-protocol.ts

@@ -0,0 +1,10 @@
+export const ToolbarArgs = Symbol('ToolbarArgs');
+
+export type ToolbarItemData = any | any[];
+
+export interface ToolbarItemState {
+  id: string;
+  enable: boolean;
+  visible: boolean;
+  active: boolean;
+}

package/src/app/toolbar/toolbar-render.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { ToolbarRegistry, ToolbarInstance, useUnmount } from '../../core/index.js';
+import { useInject, ObservableContext } from '../../observable/index.js';
+import type { Syringe } from '../../ioc/index.js';
+import { useEffect, memo, useState, useContext, useMemo } from 'react';
+
+import type { Toolbar } from './toolbar.js';
+import { ToolbarFactory } from './toolbar.js';
+import { ToolbarItemKeeper } from './toolbar-item-keeper.js';
+import { ToolbarArgs } from './toolbar-protocol.js';
+import { ToolbarVisiblesRender } from './toolbar-visible-render.js';
+
+export interface ToolbarRenderProps {
+  /**
+   * 参数
+   * @description       toolbar 传递的参数
+   */
+  data: any | any[];
+  /**
+   * 工厂函数
+   * @description       获取 toolbar 实例的工厂函数，用于自定义
+   */
+  factory?: ToolbarFactory;
+  /**
+   * toolbar 实例
+   * @description       可以传递已经存在的 toolbar 实例
+   */
+  toolbar?: Toolbar;
+  /**
+   * tooltip 设置
+   * @description       设置 tooltip 的属性
+   */
+  tooltip?: { placement: string };
+}
+export const ToolbarRender = memo(function ToolbarRender(props: ToolbarRenderProps) {
+  const { data, factory, tooltip } = props;
+  const defaultFactory = useInject<ToolbarFactory>(ToolbarFactory);
+  const registry = useInject<ToolbarRegistry>(ToolbarRegistry);
+  const currentFactory = factory || defaultFactory;
+  const [toolbar, setToolbar] = useState<Toolbar | undefined>(props.toolbar);
+  const [contextReady, setContextReady] = useState<boolean>(false);
+  const context = useContext(ObservableContext);
+  const container = context.getContainer();
+
+  const childContainer = useMemo(() => {
+    return container?.createChild() as Syringe.Container;
+  }, [container]);
+
+  useEffect(() => {
+    if (!props.toolbar) {
+      const newToolbar = currentFactory();
+      setToolbar(newToolbar);
+      childContainer.register({
+        token: ToolbarInstance,
+        useValue: newToolbar,
+      });
+    } else {
+      setToolbar(undefined);
+    }
+  }, [childContainer, currentFactory, props.toolbar]);
+
+  useEffect(() => {
+    if (toolbar && !toolbar.disposed) {
+      toolbar.setCurrentArgs(data);
+      toolbar.tooltip = tooltip;
+      if (childContainer) {
+        childContainer.register({
+          token: ToolbarArgs,
+          useValue: data,
+        });
+      }
+      setContextReady(true);
+    }
+    return () => {
+      setContextReady(false);
+    };
+  }, [childContainer, data, toolbar, tooltip]);
+
+  useUnmount(() => {
+    if (toolbar) {
+      toolbar.dispose();
+    }
+  });
+  if (!toolbar || !contextReady) {
+    return null;
+  }
+  return (
+    <ObservableContext.Provider
+      value={{ getContainer: () => childContainer || context.getContainer() }}
+    >
+      {[...registry.items].map((item) => (
+        <ToolbarItemKeeper
+          key={item[1].id}
+          item={item[1]}
+          toolbar={toolbar}
+          data={data}
+        />
+      ))}
+      <ToolbarVisiblesRender toolbar={toolbar} />
+    </ObservableContext.Provider>
+  );
+});

package/src/app/toolbar/toolbar-visible-render.tsx

@@ -0,0 +1,21 @@
+import type { ToolbarItem } from '../../core/index.js';
+import { useObserve } from '../../observable/index.js';
+import { memo } from 'react';
+
+import type { Toolbar } from './toolbar.js';
+
+interface ToolbarVisiblesRenderProps {
+  toolbar: Toolbar;
+}
+export const ToolbarVisiblesRender = memo(function ToolbarVisiblesRender(
+  props: ToolbarVisiblesRenderProps,
+) {
+  const { toolbar: propsToolbar } = props;
+  const toolbar = useObserve(propsToolbar);
+  const inlines: ToolbarItem[] = [];
+  const more: ToolbarItem[] = [];
+  toolbar.visibleItems.forEach((item) =>
+    toolbar.isInline(item) ? inlines.push(item) : more.push(item),
+  );
+  return toolbar.renderToolbar(inlines, more);
+});

package/src/app/toolbar/toolbar.tsx

@@ -0,0 +1,241 @@
+import { MoreOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import Tooltip from 'rc-tooltip';
+
+import { DisposableCollection } from '../../common/index.js';
+import type { Disposable } from '../../common/index.js';
+import {
+  CommandRegistry,
+  MenuRegistry,
+  ToolbarItem,
+  ToolbarRegistry,
+  renderNode,
+} from '../../core/index.js';
+import { l10n } from '../../l10n/index.js';
+import { getOrigin, prop } from '../../observable/index.js';
+import { inject, transient } from '../../ioc/index.js';
+
+import { ToolbarItemRender } from './toolbar-item-render.js';
+import type { ToolbarItemState } from './toolbar-protocol.js';
+
+/**
+ * Factory for instantiating toolbars.
+ */
+export const ToolbarFactory = Symbol('ToolbarFactory');
+export interface ToolbarFactory {
+  (): Toolbar;
+}
+
+export interface ToolbarOption {
+  divider?: 'item' | 'group';
+}
+
+/**
+ * The toolbar manager, a toolbar instance should be created with view.
+ */
+@transient()
+export class Toolbar implements Disposable {
+  protected toDispose = new DisposableCollection();
+  protected _disposed = false;
+  get disposed() {
+    return this._disposed;
+  }
+  get onDispose() {
+    return this.toDispose.onDispose;
+  }
+
+  @prop()
+  currentArgs: any | any[];
+
+  @prop()
+  states: Map<string, ToolbarItemState> = new Map<string, ToolbarItemState>();
+
+  @prop()
+  tooltip?: { placement: string } | undefined;
+
+  protected readonly commands: CommandRegistry;
+  protected readonly menus: MenuRegistry;
+  protected readonly toolbarRegistry: ToolbarRegistry;
+
+  constructor(
+    @inject(CommandRegistry)
+    commands: CommandRegistry,
+
+    @inject(MenuRegistry)
+    menus: MenuRegistry,
+
+    @inject(ToolbarRegistry)
+    toolbarRegistry: ToolbarRegistry,
+  ) {
+    this.commands = commands;
+    this.menus = menus;
+    this.toolbarRegistry = toolbarRegistry;
+    this.toolbarRegistry.items.forEach((item) => {
+      this.states.set(item.id, {
+        id: item.id,
+        enable: false,
+        visible: false,
+        active: false,
+      });
+    });
+  }
+
+  setCurrentArgs(current: any): void {
+    this.currentArgs = current;
+  }
+
+  sort(left: ToolbarItem, right: ToolbarItem) {
+    const leftOrder = left.order ?? '';
+    const rightOrder = right.order ?? '';
+    const leftGroupOrder = ToolbarItem.getGroupKey(left);
+    const rightGroupOrder = ToolbarItem.getGroupKey(right);
+    const result = leftGroupOrder.localeCompare(rightGroupOrder);
+    if (result !== 0) {
+      return result;
+    }
+    return leftOrder.localeCompare(rightOrder);
+  }
+
+  get visibleItems() {
+    const keys = this.states.keys();
+    const items = [];
+    for (const key of keys) {
+      if (this.states.get(key)?.visible) {
+        const item = this.toolbarRegistry.getToolbarItem(key);
+        if (ToolbarItem.is(item)) {
+          items.push(item);
+        }
+      }
+    }
+    return items.sort(this.sort);
+  }
+  isInline(item: ToolbarItem) {
+    return !item.extra;
+  }
+  renderToolbar(inlines: ToolbarItem[], more: ToolbarItem[]) {
+    return (
+      <div className="mana-toolbar">
+        {this.renderInlines(inlines)}
+        {this.renderMore(more)}
+      </div>
+    );
+  }
+  renderMore(items: ToolbarItem[]): React.ReactNode {
+    return (
+      !!items.length && (
+        <div key="__more__" className="mana-toolbar-item mana-toolbar-more">
+          <MoreOutlined
+            className="mana-toolbar-more-icon"
+            title={l10n.t('更多')}
+            onClick={() => {
+              //
+            }}
+          />
+        </div>
+      )
+    );
+  }
+  renderInlineDivider(key: string | undefined) {
+    return <div key={key} className="mana-toolbar-inline-divider" />;
+  }
+  renderInlines(items: ToolbarItem[]): React.ReactNode {
+    if (!items.length) {
+      return null;
+    }
+    const nodes: React.ReactNode[] = [];
+    let group: string | undefined = undefined;
+    items.forEach((item) => {
+      let itemGroup: string | string[] | undefined = item.group;
+      const state = this.states.get(item.id);
+      if (!state) {
+        nodes.push(null);
+        return;
+      }
+      if (itemGroup) {
+        itemGroup = typeof itemGroup === 'string' ? itemGroup : itemGroup[0];
+      }
+      if (nodes.length && itemGroup !== group) {
+        nodes.push(this.renderInlineDivider(itemGroup));
+      }
+      group = itemGroup;
+      nodes.push(
+        <ToolbarItemRender
+          key={item.id}
+          data={getOrigin(this.currentArgs)}
+          toolbar={this}
+          item={item}
+          state={state}
+        />,
+      );
+    });
+    return nodes;
+  }
+  renderItem(data: any, item: ToolbarItem, state: ToolbarItemState): React.ReactNode {
+    const command = this.commands.getCommand(item.command);
+    const placement = this.tooltip?.placement || 'bottom';
+    const tooltip = item.tooltip || command?.label;
+    if (tooltip) {
+      return (
+        <Tooltip
+          key={item.id}
+          trigger="hover"
+          placement={placement}
+          overlay={renderNode(tooltip)}
+        >
+          {this.renderItemContent(data, item, state)}
+        </Tooltip>
+      );
+    }
+    return this.renderItemContent(data, item, state);
+  }
+  protected getItemProps(_data: any, _item: ToolbarItem, state: ToolbarItemState) {
+    return {
+      className: classnames('mana-toolbar-item', {
+        'mana-toolbar-item-disabled': !state.enable,
+        'mana-toolbar-item-active': state.active,
+      }),
+    };
+  }
+  protected renderItemContent(data: any, item: ToolbarItem, state: ToolbarItemState) {
+    const command = this.commands.getCommand(item.command);
+    const icon = item.icon || command?.icon;
+    return (
+      <div
+        id={item.id}
+        key={item.id}
+        onClick={() => this.execute(item, getOrigin(data))}
+        {...this.getItemProps(data, item, state)}
+      >
+        {renderNode(icon)}
+        {item.label && item.showLabelInline && (
+          <div className="mana-toolbar-item-label">{renderNode(item.label)}</div>
+        )}
+      </div>
+    );
+  }
+  protected execute(item: ToolbarItem, data: any[]) {
+    if (this.states.get(item.id)?.enable) {
+      let args = data;
+      if (!Array.isArray(data)) {
+        args = [data];
+      }
+      return this.commands.executeCommandByHandler(item, item.command, ...args);
+    }
+    return undefined;
+  }
+
+  getState = (item: ToolbarItemState | ToolbarItem) => {
+    const currentState = this.states.get(item.id);
+    return currentState;
+  };
+
+  setState = (item: ToolbarItemState) => {
+    this.states.set(item.id, item);
+  };
+
+  dispose(): void {
+    this.states.clear();
+    this.toDispose.dispose();
+    this._disposed = true;
+  }
+}