opensource/univer
3
0
Fork 0
mirror of https://github.com/dream-num/univer.git synced 2026-09-21 05:44:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(drawing): migrate to tailwindcss in drawing packages (#5122)

Browse Source
This commit is contained in:
Wenzhao Hu
2025-04-29 17:15:22 +08:00
committed by GitHub
parent 3967b13928
commit dc26e675bc
24 changed files with 489 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages-experimental/debugger/src/commands/operations/message.operation.ts
+12 -1
View File
@@ -22,8 +22,19 @@ import { IMessageService } from '@univerjs/ui';
export const MessageOperation: ICommand = {
id: 'debugger.operation.message',
type: CommandType.OPERATION,
handler: async (accessor: IAccessor) => {
handler: async (accessor: IAccessor, params: { value: string }) => {
const messageService = accessor.get(IMessageService);
if (params.value === 'loading') {
messageService.show({
type: MessageType.Loading,
content: 'Loading message',
duration: 3000,
});
return true;
}
messageService.show({
type: MessageType.Success,
content: 'Demo message',
packages-experimental/debugger/src/controllers/menu.ts
+5 -1
View File
@@ -171,7 +171,7 @@ export function ConfirmMenuItemFactory(): IMenuSelectorItem {
};
}
export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
export function MessageMenuItemFactory(): IMenuSelectorItem {
return {
id: MessageOperation.id,
title: 'Message',
@@ -182,6 +182,10 @@ export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
label: 'Open message',
value: '',
},
{
label: 'Open loading message',
value: 'loading',
},
],
};
}
packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx
+2 -4
View File
@@ -18,10 +18,9 @@ import type { IDrawingParam } from '@univerjs/core';
import { IDrawingManagerService } from '@univerjs/drawing';
import { DrawingCommonPanel } from '@univerjs/drawing-ui';
import { useDependency } from '@univerjs/ui';
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { DocDrawingPosition } from './DocDrawingPosition';
import { DocDrawingTextWrap } from './DocDrawingTextWrap';
import styles from './index.module.less';
export const DocDrawingPanel = () => {
const drawingManagerService = useDependency(IDrawingManagerService);
@@ -37,11 +36,10 @@ export const DocDrawingPanel = () => {
return () => {
focusDispose.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return !!drawings?.length && (
<div className={styles.imageCommonPanel}>
<div className="univer-p-2 univer-text-center univer-text-sm">
<DrawingCommonPanel drawings={drawings} hasAlign={false} hasCropper={false} hasGroup={false} hasTransform={false} />
<DocDrawingTextWrap drawings={drawings} />
<DocDrawingPosition drawings={drawings} />
packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
+108 -37
View File
@@ -18,7 +18,7 @@ import type { ICommandInfo, IDrawingParam, IObjectPositionH, IObjectPositionV, N
import type { IDocDrawing } from '@univerjs/docs-drawing';
import type { IDocumentSkeletonDrawing } from '@univerjs/engine-render';
import { DocumentFlavor, ICommandService, IUniverInstanceService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType } from '@univerjs/core';
import { Checkbox, clsx, InputNumber, Select } from '@univerjs/design';
import { Checkbox, InputNumber, Select } from '@univerjs/design';
import { DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
import { DocSelectionRenderService } from '@univerjs/docs-ui';
import { IDrawingManagerService } from '@univerjs/drawing';
@@ -26,7 +26,6 @@ import { IRenderManagerService } from '@univerjs/engine-render';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { UpdateDrawingDocTransformCommand } from '../../commands/commands/update-doc-drawing.command';
import styles from './index.module.less';
const MIN_OFFSET = -1000;
const MAX_OFFSET = 1000;
@@ -360,28 +359,55 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
}, []);
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: showPanel ? 'block' : 'none' }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
`}
style={{ display: showPanel ? 'block' : 'none' }}
>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1 univer-text-gray-400">
<div>{localeService.t('image-position.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
<div>{localeService.t('image-position.horizontal')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1 univer-text-gray-400">
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-position.absolutePosition')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_OFFSET}
max={MAX_OFFSET}
@@ -394,21 +420,30 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
posOffset: val as number,
});
}}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className="univer-flex univer-items-center univer-gap-1">
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-position.toTheRightOf')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<Select
value={String(hPosition.relativeFrom)}
disabled={disabled}
@@ -421,22 +456,40 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
<div>{localeService.t('image-position.vertical')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-position.absolutePosition')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_OFFSET}
max={MAX_OFFSET}
@@ -449,21 +502,30 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
posOffset: val as number,
});
}}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className="univer-flex univer-items-center univer-gap-1">
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-position.bellow')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<Select
disabled={disabled}
value={String(vPosition.relativeFrom)}
@@ -476,14 +538,23 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
<div>{localeService.t('image-position.options')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow} style={{ marginBottom: '50px' }}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
style={{ marginBottom: '50px' }}
>
<div className="univer-flex univer-items-center univer-gap-1">
<Checkbox disabled={disabled} checked={followTextMove} onChange={handleFollowTextMoveCheck}>{localeService.t('image-position.moveObjectWithText')}</Checkbox>
</div>
</div>
packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx
+112 -40
View File
@@ -24,7 +24,6 @@ import { IRenderManagerService } from '@univerjs/engine-render';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { TextWrappingStyle, UpdateDocDrawingDistanceCommand, UpdateDocDrawingWrappingStyleCommand, UpdateDocDrawingWrapTextCommand } from '../../commands/commands/update-doc-drawing.command';
import styles from './index.module.less';
const MIN_MARGIN = 0;
const MAX_MARGIN = 100;
@@ -263,19 +262,36 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
}, []);
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: showPanel ? 'block' : 'none' }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
`}
style={{ display: showPanel ? 'block' : 'none' }}
>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-gray-600')}>
<div>{localeService.t('image-text-wrap.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
<div>{localeService.t('image-text-wrap.wrappingStyle')}</div>
</div>
</div>
<div className={clsx(styles.imageCommonPanelRow)}>
<div className={clsx(styles.imageCommonPanelColumn)}>
<div
className={clsx(`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`)}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<RadioGroup value={wrappingStyle} onChange={handleWrappingStyleChange} direction="vertical">
<Radio value={TextWrappingStyle.INLINE}>{localeService.t('image-text-wrap.inline')}</Radio>
<Radio value={TextWrappingStyle.WRAP_SQUARE}>{localeService.t('image-text-wrap.square')}</Radio>
@@ -286,13 +302,21 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
<div>{localeService.t('image-text-wrap.wrapText')}</div>
</div>
</div>
<div className={clsx(styles.imageCommonPanelRow)}>
<div className={clsx(styles.imageCommonPanelColumn)}>
<div
className={clsx(`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`)}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<RadioGroup disabled={disableWrapText} value={wrapText} onChange={handleWrapTextChange} direction="horizontal">
<Radio value={WrapTextType.BOTH_SIDES}>{localeService.t('image-text-wrap.bothSide')}</Radio>
<Radio value={WrapTextType.LEFT}>{localeService.t('image-text-wrap.leftOnly')}</Radio>
@@ -301,22 +325,40 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
<div>{localeService.t('image-text-wrap.distanceFromText')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-text-wrap.top')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_MARGIN}
max={MAX_MARGIN}
@@ -324,21 +366,30 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
precision={1}
value={distToText.distT}
onChange={(val) => { handleDistToTextChange(val, 'distT'); }}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-text-wrap.left')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_MARGIN}
max={MAX_MARGIN}
@@ -346,23 +397,36 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
precision={1}
value={distToText.distL}
onChange={(val) => { handleDistToTextChange(val, 'distL'); }}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
</label>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-text-wrap.bottom')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_MARGIN}
max={MAX_MARGIN}
@@ -370,21 +434,30 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
precision={1}
value={distToText.distB}
onChange={(val) => { handleDistToTextChange(val, 'distB'); }}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={clsx('univer-flex univer-items-center univer-gap-1')}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
{localeService.t('image-text-wrap.right')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<InputNumber
min={MIN_MARGIN}
max={MAX_MARGIN}
@@ -392,7 +465,6 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
precision={1}
value={distToText.distR}
onChange={(val) => { handleDistToTextChange(val, 'distR'); }}
className={styles.imageCommonPanelInput}
/>
</div>
</div>
packages/docs-drawing-ui/src/views/doc-image-panel/index.module.less
-14
View File
@@ -1,14 +0,0 @@
@import '@univerjs/drawing-ui/src/views/panel/index.module.less';
.sheet-image {
&-menu {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
&-input {
display: none;
}
}
}
packages/drawing-ui/src/views/panel/DrawingAlign.tsx
+20 -7
View File
@@ -16,11 +16,10 @@
import type { IDrawingParam } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { clsx, Select } from '@univerjs/design';
import { Select } from '@univerjs/design';
import { useDependency } from '@univerjs/ui';
import { useState } from 'react';
import { AlignType, SetDrawingAlignOperation } from '../../commands/operations/drawing-align.operation';
import styles from './index.module.less';
export interface IDrawingAlignProps {
drawings: IDrawingParam[];
@@ -97,14 +96,28 @@ export const DrawingAlign = (props: IDrawingAlignProps) => {
};
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(alignShow) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-w-full univer-border-l-0 univer-border-r-0 univer-border-t univer-border-solid
univer-border-gray-200
`}
style={{ display: gridDisplay(alignShow) }}
>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-w-full univer-text-gray-900">
<div>{localeService.t('image-panel.align.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-w-full univer-text-gray-900">
<Select value={alignValue} options={alignOptions} onChange={handleAlignChange} />
</div>
</div>
packages/drawing-ui/src/views/panel/DrawingArrange.tsx
+18 -32
View File
@@ -16,12 +16,12 @@
import type { IDrawingParam } from '@univerjs/core';
import { ArrangeTypeEnum, LocaleService } from '@univerjs/core';
import { Button, clsx } from '@univerjs/design';
import { Button } from '@univerjs/design';
import { IDrawingManagerService } from '@univerjs/drawing';
import { BottomSingle, MoveDownSingle, MoveUpSingle, TopmostSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import styles from './index.module.less';
import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
export interface IDrawingArrangeProps {
arrangeShow: boolean;
@@ -51,50 +51,36 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
}, []);
const onArrangeBtnClick = (arrangeType: ArrangeTypeEnum) => {
// commandService.executeCommand(SetDrawingArrangeCommand.id, {
// unitId: drawings[0].unitId,
// subUnitId: drawings[0].subUnitId,
// drawingIds: drawings.map((drawing) => drawing.drawingId),
// arrangeType,
// });
const unitId = drawings[0].unitId;
const subUnitId = drawings[0].subUnitId;
const drawingIds = drawings.map((drawing) => drawing.drawingId);
drawingManagerService.featurePluginOrderUpdateNotification({ unitId, subUnitId, drawingIds, arrangeType });
// if (arrangeType === ArrangeType.forward) {
// drawingManagerService.forwardDrawings(unitId, subUnitId, drawingIds);
// } else if (arrangeType === ArrangeType.backward) {
// drawingManagerService.backwardDrawing(unitId, subUnitId, drawingIds);
// } else if (arrangeType === ArrangeType.front) {
// drawingManagerService.frontDrawing(unitId, subUnitId, drawingIds);
// } else if (arrangeType === ArrangeType.back) {
// drawingManagerService.backDrawing(unitId, subUnitId, drawingIds);
// }
};
return (
<div className={styles.imageCommonPanelGrid} style={{ display: gridDisplay(arrangeShow) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className="univer-relative univer-mt-5 univer-w-full"
style={{ display: gridDisplay(arrangeShow) }}
>
<div className={rowClassName}>
<div className={columnTitleClassName}>
<div>{localeService.t('image-panel.arrange.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={rowClassName}>
<div className="univer-w-1/2">
<Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
<span className={styles.imageCommonPanelInline}>
<span className={inlineClassName}>
<MoveUpSingle />
{localeService.t('image-panel.arrange.forward')}
</span>
</Button>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className="univer-w-1/2">
<Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
<span className={styles.imageCommonPanelInline}>
<span className={inlineClassName}>
<MoveDownSingle />
{localeService.t('image-panel.arrange.backward')}
</span>
@@ -102,18 +88,18 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
</Button>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={rowClassName}>
<div className="univer-w-1/2">
<Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
<span className={styles.imageCommonPanelInline}>
<span className={inlineClassName}>
<TopmostSingle />
{localeService.t('image-panel.arrange.front')}
</span>
</Button>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className="univer-w-1/2">
<Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
<span className={styles.imageCommonPanelInline}>
<span className={inlineClassName}>
<BottomSingle />
{localeService.t('image-panel.arrange.back')}
</span>
packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx
+1 -1
View File
@@ -128,9 +128,9 @@ export const DrawingCommonPanel = (props: IDrawingCommonPanelProps) => {
clearControlSub.unsubscribe();
focusSub.unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// TODO@siam-ese: use the new Form component to refactor this dialog panel.
return (
<>
<div style={{ display: nullShow === true ? 'block' : 'none', height: '100%' }}>
packages/drawing-ui/src/views/panel/DrawingGroup.tsx
+9 -10
View File
@@ -24,8 +24,7 @@ import { GroupSingle, UngroupSingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { getUpdateParams } from '../../utils/get-update-params';
import styles from './index.module.less';
import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
export interface IDrawingGroupProps {
drawings: IDrawingParam[];
@@ -187,24 +186,24 @@ export const DrawingGroup = (props: IDrawingGroupProps) => {
}, []);
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(hasGroup === true ? groupShow : false) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div className="univer-relative univer-mt-5 univer-w-full" style={{ display: gridDisplay(hasGroup === true ? groupShow : false) }}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
<div>{localeService.t('image-panel.group.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
<div className={rowClassName}>
<div className={clsx(inlineClassName, 'univer-justify-center')}>
<Button style={{ display: gridDisplay(groupBtnShow) }} onClick={onGroupBtnClick}>
<span className={styles.imageCommonPanelInline}>
<span className="univer-flex univer-items-center univer-gap-1">
<GroupSingle />
{localeService.t('image-panel.group.group')}
</span>
</Button>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
<div className={clsx(inlineClassName, 'univer-justify-center')}>
<Button style={{ display: gridDisplay(ungroupBtnShow) }} onClick={onUngroupBtnClick}>
<span className={styles.imageCommonPanelInline}>
<span className="univer-flex univer-items-center univer-gap-1">
<UngroupSingle />
{localeService.t('image-panel.group.unGroup')}
</span>
packages/drawing-ui/src/views/panel/DrawingTransform.tsx
+47 -41
View File
@@ -24,7 +24,7 @@ import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { MIN_DRAWING_HEIGHT_LIMIT, MIN_DRAWING_WIDTH_LIMIT, RANGE_DRAWING_ROTATION_LIMIT } from '../../utils/config';
import { getUpdateParams } from '../../utils/get-update-params';
import styles from './index.module.less';
import { columnTitleClassName, rowClassName } from '../utils/classnames';
export interface IDrawingTransformProps {
transformShow: boolean;
@@ -367,95 +367,101 @@ export const DrawingTransform = (props: IDrawingTransformProps) => {
};
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(transformShow) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-t-gray-200
`}
style={{ display: gridDisplay(transformShow) }}
>
<div className={rowClassName}>
<div className={clsx(columnTitleClassName)}>
<div>{localeService.t('image-panel.transform.title')}</div>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={rowClassName}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.width')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<InputNumber precision={1} value={width} onChange={(val) => { handleWidthChange(val); }} className={styles.imageCommonPanelInput} />
<div className={rowClassName}>
<div className={columnTitleClassName}>
<InputNumber precision={1} value={width} onChange={(val) => { handleWidthChange(val); }} />
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.height')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<InputNumber precision={1} value={height} onChange={(val) => { handleHeightChange(val); }} className={styles.imageCommonPanelInput} />
<div className={rowClassName}>
<div className={columnTitleClassName}>
<InputNumber precision={1} value={height} onChange={(val) => { handleHeightChange(val); }} />
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.lock')}
</div>
</div>
<div className={clsx(styles.imageCommonPanelRow, styles.imageCommonPanelRowVertical)}>
<div className={styles.imageCommonPanelColumn}>
<div className={clsx(rowClassName, 'univer-h-9 univer-items-center univer-justify-center')}>
<div className={columnTitleClassName}>
<Checkbox checked={lockRatio} onChange={handleLockRatioChange} />
</div>
</div>
</label>
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={rowClassName}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.x')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<InputNumber precision={1} value={xPosition} onChange={(val) => { handleXChange(val); }} className={styles.imageCommonPanelInput} />
<div className={rowClassName}>
<div className={columnTitleClassName}>
<InputNumber precision={1} value={xPosition} onChange={(val) => { handleXChange(val); }} />
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.y')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<InputNumber precision={1} value={yPosition} onChange={(val) => { handleYChange(val); }} className={styles.imageCommonPanelInput} />
<div className={rowClassName}>
<div className={columnTitleClassName}>
<InputNumber precision={1} value={yPosition} onChange={(val) => { handleYChange(val); }} />
</div>
</div>
</label>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
<div className={clsx(columnTitleClassName)}>
<label>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<div className={rowClassName}>
<div className={columnTitleClassName}>
{localeService.t('image-panel.transform.rotate')}
</div>
</div>
<div className={styles.imageCommonPanelRow}>
<div className={styles.imageCommonPanelColumn}>
<InputNumber precision={1} value={rotation} onChange={handleRotationChange} className={styles.imageCommonPanelInput} />
<div className={rowClassName}>
<div className={columnTitleClassName}>
<InputNumber precision={1} value={rotation} onChange={handleRotationChange} />
</div>
</div>
</label>
packages/drawing-ui/src/views/panel/ImageCropper.tsx
+15 -9
View File
@@ -16,12 +16,12 @@
import type { IDrawingParam } from '@univerjs/core';
import { ICommandService, LocaleService } from '@univerjs/core';
import { Button, clsx, Select } from '@univerjs/design';
import { Button, Select } from '@univerjs/design';
import { CreateCopySingle } from '@univerjs/icons';
import { useDependency } from '@univerjs/ui';
import { useEffect, useRef, useState } from 'react';
import { AutoImageCropOperation, CloseImageCropOperation, CropType } from '../../commands/operations/image-crop.operation';
import styles from './index.module.less';
import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
export interface IImageCropperProps {
drawings: IDrawingParam[];
@@ -123,22 +123,28 @@ export const ImageCropper = (props: IImageCropperProps) => {
};
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(cropperShow) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-t-gray-200
`}
style={{ display: gridDisplay(cropperShow) }}
>
<div className={rowClassName}>
<div className={columnTitleClassName}>
<div>{localeService.t('image-panel.crop.title')}</div>
</div>
</div>
<div className={clsx(styles.imageCommonPanelRow, styles.imageCommonPanelRowVertical)}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={rowClassName}>
<div className={inlineClassName}>
<Button onClick={() => { onCropperBtnClick(cropValue as CropType); }}>
<span className={styles.imageCommonPanelInline}>
<span className="univer-flex univer-items-center univer-gap-1">
<CreateCopySingle />
{localeService.t('image-panel.crop.start')}
</span>
</Button>
</div>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
<div className={inlineClassName}>
<Select value={cropValue} options={cropOptions} onChange={handleCropChange} />
</div>
</div>
packages/drawing-ui/src/views/panel/index.module.less
-67
View File
@@ -1,67 +0,0 @@
.image-common-panel {
text-align: center;
padding: var(--padding-sm);
font-size: var(--font-size-sm);
&-grid {
position: relative;
width: 100%;
}
&-border {
border-top: 1px solid rgb(var(--border-color));
margin-top: 20px;
}
&-title {
color: rgb(var(--text-color-secondary));
text-align: left;
}
&-subtitle {
color: rgb(var(--text-color-primary));
text-align: left;
}
&-row {
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
margin-top: 10px;
&-vertical {
justify-content: center;
align-items: center;
height: 36px;
}
}
&-column {
width: 100%;
&-center {
display: flex;
justify-content: center;
align-items: center;
}
}
&-inline {
display: flex;
align-items: center;
gap: var(--margin-xxs);
}
&-span2 {
width: 50%;
}
&-span3 {
width: 33.33333333%;
}
&-input {
width: 90%;
}
}
packages/drawing-ui/src/views/utils/classnames.ts
+22
View File
@@ -0,0 +1,22 @@
/**
* Copyright 2023-present DreamNum Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// TODO@siam-ese: these styles are widely used in drawing's components. They should be deprecated once the
// Form component is completed.
export const rowClassName = 'univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-between univer-gap-2 univer-flex-no-wrap';
export const columnTitleClassName = 'univer-w-full univer-text-left univer-text-gray-400';
export const inlineClassName = 'univer-flex univer-items-center univer-gap-1';
packages/sheets-drawing-ui/src/controllers/drawing-popup-menu.controller.ts
+65 -44
View File
@@ -15,31 +15,33 @@
*/
import type { IDisposable, Nullable, Workbook } from '@univerjs/core';
import type { ImageIoService } from '@univerjs/drawing';
import type { BaseObject, Scene } from '@univerjs/engine-render';
import type { ISheetFloatDom } from '@univerjs/sheets-drawing';
import { DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, Inject, Injector, IUniverInstanceService, RxDisposable, toDisposable, UniverInstanceType } from '@univerjs/core';
import { DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, IImageIoService, Inject, Injector, IUniverInstanceService, LocaleService, RxDisposable, UniverInstanceType } from '@univerjs/core';
import { MessageType } from '@univerjs/design';
import { IDrawingManagerService, SetDrawingSelectedOperation } from '@univerjs/drawing';
import { COMPONENT_IMAGE_POPUP_MENU, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation } from '@univerjs/drawing-ui';
import { IRenderManagerService } from '@univerjs/engine-render';
import { SheetCanvasPopManagerService } from '@univerjs/sheets-ui';
import { BuiltInUIPart, connectInjector, IUIPartsService } from '@univerjs/ui';
import { IMessageService } from '@univerjs/ui';
import { takeUntil } from 'rxjs';
import { RemoveSheetDrawingCommand } from '../commands/commands/remove-sheet-drawing.command';
import { EditSheetDrawingOperation } from '../commands/operations/edit-sheet-drawing.operation';
import { UploadLoading } from '../views/upload-loading/UploadLoading';
export class DrawingPopupMenuController extends RxDisposable {
private _initImagePopupMenu = new Set<string>();
constructor(
@Inject(Injector) private _injector: Injector,
@Inject(LocaleService) private readonly _localeService: LocaleService,
@IDrawingManagerService private readonly _drawingManagerService: IDrawingManagerService,
@Inject(SheetCanvasPopManagerService) private readonly _canvasPopManagerService: SheetCanvasPopManagerService,
@IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
@IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
@IMessageService private readonly _messageService: IMessageService,
@IContextService private readonly _contextService: IContextService,
@Inject(IUIPartsService) private readonly _uiPartsService: IUIPartsService,
@IImageIoService private readonly _ioService: ImageIoService,
@ICommandService private readonly _commandService: ICommandService
) {
super();
@@ -52,10 +54,31 @@ export class DrawingPopupMenuController extends RxDisposable {
this._univerInstanceService.getTypeOfUnitDisposed$<Workbook>(UniverInstanceType.UNIVER_SHEET).pipe(takeUntil(this.dispose$)).subscribe((workbook) => this._dispose(workbook));
this._univerInstanceService.getAllUnitsForType<Workbook>(UniverInstanceType.UNIVER_SHEET).forEach((workbook) => this._create(workbook));
this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(UploadLoading, this._injector));
this._setupLoadingStatus();
}
private _setupLoadingStatus() {
const MESSAGE_ID = 'image-upload-loading';
let messageDisposable: IDisposable | undefined;
this.disposeWithMe(this._ioService.change$.subscribe((status) => {
if (status > 0 && !messageDisposable) {
messageDisposable = this._messageService.show({
id: MESSAGE_ID,
type: MessageType.Loading,
content: `${this._localeService.t('uploadLoading.loading')}: ${status}`,
duration: 0,
});
} else if (status === 0) {
messageDisposable?.dispose();
messageDisposable = undefined;
}
}));
}
private _dispose(workbook: Workbook) {
super.dispose();
const unitId = workbook.getUnitId();
this._renderManagerService.removeRender(unitId);
}
@@ -93,52 +116,50 @@ export class DrawingPopupMenuController extends RxDisposable {
if (!transformer) {
return;
}
let singletonPopupDisposer: IDisposable;
this.disposeWithMe(
toDisposable(
transformer.createControl$.subscribe(() => {
this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, true);
this.disposeWithMe(transformer.createControl$.subscribe(() => {
this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, true);
if (this._hasCropObject(scene)) {
return;
}
if (this._hasCropObject(scene)) {
return;
}
const selectedObjects = transformer.getSelectedObjectMap();
if (selectedObjects.size > 1) {
singletonPopupDisposer?.dispose();
return;
}
const selectedObjects = transformer.getSelectedObjectMap();
if (selectedObjects.size > 1) {
singletonPopupDisposer?.dispose();
return;
}
const object = selectedObjects.values().next().value as Nullable<BaseObject>;
if (!object) {
return;
}
const object = selectedObjects.values().next().value as Nullable<BaseObject>;
if (!object) {
return;
}
const oKey = object.oKey;
const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
if (!drawingParam) {
return;
}
const oKey = object.oKey;
const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
if (!drawingParam) {
return;
}
const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
// drawingParam should be ICanvasFloatDom, use for disable popup dialog
const data = (drawingParam as ISheetFloatDom).data as Record<string, boolean>;
if (data && data.disablePopup) {
return;
}
const data = (drawingParam as ISheetFloatDom).data as Record<string, boolean>;
if (data && data.disablePopup) {
return;
}
singletonPopupDisposer?.dispose();
const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
componentKey: COMPONENT_IMAGE_POPUP_MENU,
direction: 'horizontal',
offset: [2, 0],
extraProps: {
menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
},
}));
})
)
singletonPopupDisposer?.dispose();
const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
componentKey: COMPONENT_IMAGE_POPUP_MENU,
direction: 'horizontal',
offset: [2, 0],
extraProps: {
menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
},
}));
})
);
this.disposeWithMe(
transformer.clearControl$.subscribe(() => {
packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx
+20 -7
View File
@@ -18,14 +18,13 @@ import type { IDrawingParam, Nullable } from '@univerjs/core';
import type { BaseObject } from '@univerjs/engine-render';
import type { ISheetDrawing } from '@univerjs/sheets-drawing';
import { ICommandService, LocaleService } from '@univerjs/core';
import { clsx, Radio, RadioGroup } from '@univerjs/design';
import { Radio, RadioGroup } from '@univerjs/design';
import { IDrawingManagerService } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';
import { SheetDrawingAnchorType } from '@univerjs/sheets-drawing';
import { useDependency } from '@univerjs/ui';
import { useEffect, useState } from 'react';
import { SetSheetDrawingCommand } from '../../commands/commands/set-sheet-drawing.command';
import styles from './index.module.less';
export interface ISheetDrawingAnchorProps {
drawings: IDrawingParam[];
@@ -140,14 +139,28 @@ export const SheetDrawingAnchor = (props: ISheetDrawingAnchorProps) => {
};
return (
<div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(anchorShow) }}>
<div className={styles.imageCommonPanelRow}>
<div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
<div
className={`
univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
univer-border-t univer-border-solid univer-border-gray-200
`}
style={{ display: gridDisplay(anchorShow) }}
>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-w-full univer-text-left univer-text-gray-400">
<div>{localeService.t('drawing-anchor.title')}</div>
</div>
</div>
<div className={clsx(styles.imageCommonPanelRow)}>
<div className={clsx(styles.imageCommonPanelColumn)}>
<div
className={`
univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
`}
>
<div className="univer-flex univer-items-center univer-gap-1">
<RadioGroup value={value} onChange={handleChange} direction="vertical">
<Radio value={SheetDrawingAnchorType.Both}>{localeService.t('drawing-anchor.both')}</Radio>
<Radio value={SheetDrawingAnchorType.Position}>{localeService.t('drawing-anchor.position')}</Radio>
packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingPanel.tsx
+2 -3
View File
@@ -18,8 +18,7 @@ import type { IDrawingParam } from '@univerjs/core';
import { IDrawingManagerService } from '@univerjs/drawing';
import { DrawingCommonPanel } from '@univerjs/drawing-ui';
import { useDependency } from '@univerjs/ui';
import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import { useEffect, useState } from 'react';
import { SheetDrawingAnchor } from './SheetDrawingAnchor';
export const SheetDrawingPanel = () => {
@@ -39,7 +38,7 @@ export const SheetDrawingPanel = () => {
}, []);
return !!drawings?.length && (
<div className={styles.imageCommonPanel}>
<div className="univer-p-2 univer-text-center univer-text-sm">
<DrawingCommonPanel drawings={drawings} />
<SheetDrawingAnchor drawings={drawings} />
</div>
packages/sheets-drawing-ui/src/views/sheet-image-panel/index.module.less
-14
View File
@@ -1,14 +0,0 @@
@import '@univerjs/drawing-ui/src/views/panel/index.module.less';
.sheet-image {
&-menu {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
&-input {
display: none;
}
}
}
packages/sheets-drawing-ui/src/views/upload-loading/UploadLoading.tsx
-48
View File
@@ -1,48 +0,0 @@
/**
* Copyright 2023-present DreamNum Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { LocaleService } from '@univerjs/core';
import { IImageIoService } from '@univerjs/drawing';
import { useDependency } from '@univerjs/ui';
import React, { useEffect } from 'react';
import styles from './index.module.less';
export const UploadLoading = () => {
const imageIoService = useDependency(IImageIoService);
const localeService = useDependency(LocaleService);
const [remain, setRemain] = React.useState(0);
useEffect(() => {
const sub = imageIoService.change$.subscribe((count) => {
setRemain(count);
});
return () => {
sub.unsubscribe();
};
}, [imageIoService]);
return (
<div style={{ display: remain > 0 ? 'block' : 'none' }} className={styles.uploadLoading}>
<div className={styles.uploadLoadingBody}>
<div className={styles.uploadLoadingBodyAnimation} />
<div className={styles.uploadLoadingBodyText}>{`${localeService.t('uploadLoading.loading')}: ${remain}` }</div>
</div>
</div>
);
};
packages/sheets-drawing-ui/src/views/upload-loading/index.module.less
-47
View File
@@ -1,47 +0,0 @@
.upload-loading {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
background-color: rgba(var(--color-black), 0.5);
z-index: 1000;
user-select: none;
&-body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(var(--color-white));
padding: 20px 40px;
display: flex;
align-items: center;
justify-items: center;
border-radius: var(--border-radius-lg);
&-animation {
width: 30px;
height: 30px;
border: 2px solid rgb(var(--color-black));
border-top-color: transparent;
border-radius: 100%;
animation: UniverCircleAnimation infinite 0.75s linear;
}
&-text {
font-size: var(--font-size-xs);
color: var(--color-black);
padding: 10px;
}
}
}
@keyframes UniverCircleAnimation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
packages/ui/src/services/message/__testing__/mock-message.service.ts
+8
View File
@@ -28,6 +28,14 @@ export class MockMessageService implements IMessageService {
return toDisposable(() => { /* empty */ });
}
remove(_id: string): void {
// empty
}
removeAll(): void {
// empty
}
setContainer(): void {
// empty
}
packages/ui/src/services/message/desktop-message.service.ts
+18 -3
View File
@@ -14,9 +14,10 @@
* limitations under the License.
*/
import type { IDisposable } from '@univerjs/core';
import type { IMessageProps } from '@univerjs/design';
import type { IMessageService } from './message.service';
import { Disposable, Inject, Injector } from '@univerjs/core';
import { Disposable, Inject, Injector, toDisposable } from '@univerjs/core';
import { message, Messager, removeMessage } from '@univerjs/design';
import { connectInjector } from '../../utils/di';
import { BuiltInUIPart, IUIPartsService } from '../parts/parts.service';
@@ -41,7 +42,21 @@ export class DesktopMessageService extends Disposable implements IMessageService
removeMessage();
}
show(options: IMessageProps) {
message(options);
show(options: IMessageProps): IDisposable {
let op = options;
if (typeof options.id === 'undefined') {
op = Object.assign({}, options, { id: `message-${Date.now()}` });
}
message(op);
return toDisposable(() => removeMessage(op.id));
}
remove(id: string): void {
removeMessage(id);
}
removeAll(): void {
removeMessage();
}
}
packages/ui/src/services/message/message.service.ts
+4 -1
View File
@@ -14,11 +14,14 @@
* limitations under the License.
*/
import type { IDisposable } from '@univerjs/core';
import type { IMessageProps } from '@univerjs/design';
import { createIdentifier } from '@univerjs/core';
export const IMessageService = createIdentifier<IMessageService>('ui.message.service');
export interface IMessageService {
show(options: IMessageProps): void;
show(options: IMessageProps): IDisposable;
remove(id: string): void;
removeAll(): void;
}
tests/formula-integration/src/__testing__/util.ts
+1 -4
View File
@@ -34,9 +34,6 @@ export function getTestFilePath() {
return name.replace(/[ >]/g, '-').toLowerCase();
}
/**
*
*/
export async function expectCalculationResultMatchesSnapshot() {
const testBed = createFormulaTestBed();
const snapshotRootDir = path.join(import.meta.dirname, '../__snapshots__');
@@ -49,7 +46,7 @@ export async function expectCalculationResultMatchesSnapshot() {
const testSnapshotRaw = fs.readFileSync(testSnapshotPath, 'utf-8');
const testSnapshot = JSON.parse(testSnapshotRaw) as IWorkbookData;
const workbook = testBed.api.createUniverSheet(testSnapshot);
const workbook = testBed.api.createWorkbook(testSnapshot);
const formula = testBed.api.getFormula();
await formula.onCalculationEnd();