Skip to content

Commit

Permalink
fix: modern mode only can relative to paragraph
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jocs
Jocs committed Oct 17, 2024
1 parent 82ebed3 commit 86b0e00
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 33 deletions.
2 changes: 1 addition & 1 deletion packages-experimental/debugger/src/controllers/e2e/data/default-doc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
* limitations under the License.
*/

import type { IDocumentData } from '@univerjs/core';
import { BooleanNumber, DocumentFlavor } from '@univerjs/core';
import { ptToPixel } from '@univerjs/engine-render';
import type { IDocumentData } from '@univerjs/core';

// eslint-disable-next-line max-lines-per-function
export function getDefaultDocData(): IDocumentData {
Expand Down
10 changes: 5 additions & 5 deletions packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
* limitations under the License.
*/

import { useDependency } from '@univerjs/core';
import React, { useEffect, useState } from 'react';
import { DrawingCommonPanel } from '@univerjs/drawing-ui';
import type { IDrawingParam } from '@univerjs/drawing';
import { useDependency } from '@univerjs/core';
import { IDrawingManagerService } from '@univerjs/drawing';
import styles from './index.module.less';
import { DocDrawingTextWrap } from './DocDrawingTextWrap';
import { DrawingCommonPanel } from '@univerjs/drawing-ui';
import React, { 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);
Expand Down
43 changes: 25 additions & 18 deletions packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,18 @@
* limitations under the License.
*/

import { ICommandService, IUniverInstanceService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType, useDependency } from '@univerjs/core';
import type { ICommandInfo, IObjectPositionH, IObjectPositionV, Nullable } from '@univerjs/core';
import type { IDocDrawing } from '@univerjs/docs-drawing';
import type { IDocumentSkeletonDrawing } from '@univerjs/engine-render';
import { DocumentFlavor, ICommandService, IUniverInstanceService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType, useDependency } from '@univerjs/core';
import { Checkbox, InputNumber, Select } from '@univerjs/design';
import { DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
import { DocSelectionRenderService } from '@univerjs/docs-ui';
import { IDrawingManagerService, type IDrawingParam } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';

import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import type { ICommandInfo, IObjectPositionH, IObjectPositionV, Nullable } from '@univerjs/core';

import type { IDocDrawing } from '@univerjs/docs-drawing';
import type { IDocumentSkeletonDrawing } from '@univerjs/engine-render';
import { UpdateDrawingDocTransformCommand } from '../../commands/commands/update-doc-drawing.command';
import styles from './index.module.less';

Expand Down Expand Up @@ -55,6 +55,8 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {

const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);

const documentFlavor = documentDataModel?.getSnapshot().documentStyle.documentFlavor;

const renderObject = renderManagerService.getRenderById(unitId);
const scene = renderObject?.scene;
if (scene == null) {
Expand All @@ -73,19 +75,24 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
value: String(ObjectRelativeFromH.MARGIN),
}];

const VERTICAL_RELATIVE_FROM = [{
label: localeService.t('image-position.line'),
value: String(ObjectRelativeFromV.LINE),
}, {
label: localeService.t('image-position.page'),
value: String(ObjectRelativeFromV.PAGE),
}, {
label: localeService.t('image-position.margin'),
value: String(ObjectRelativeFromV.MARGIN),
}, {
label: localeService.t('image-position.paragraph'),
value: String(ObjectRelativeFromV.PARAGRAPH),
}];
const VERTICAL_RELATIVE_FROM = documentFlavor === DocumentFlavor.MODERN ?
[{
label: localeService.t('image-position.paragraph'),
value: String(ObjectRelativeFromV.PARAGRAPH),
}] :
[{
label: localeService.t('image-position.line'),
value: String(ObjectRelativeFromV.LINE),
}, {
label: localeService.t('image-position.page'),
value: String(ObjectRelativeFromV.PAGE),
}, {
label: localeService.t('image-position.margin'),
value: String(ObjectRelativeFromV.MARGIN),
}, {
label: localeService.t('image-position.paragraph'),
value: String(ObjectRelativeFromV.PARAGRAPH),
}];

const [disabled, setDisabled] = useState(true);
const [hPosition, setHPosition] = useState<IObjectPositionH>({
Expand Down
94 changes: 89 additions & 5 deletions packages/docs-ui/src/commands/commands/switch-doc-mode.command.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@

import type { ICommand, ICommandInfo, JSONXActions } from '@univerjs/core';
import type { IRichTextEditingMutationParams } from '@univerjs/docs';
import { CommandType, DocumentFlavor, ICommandService, IUniverInstanceService, JSONX } from '@univerjs/core';
import { DocSelectionManagerService, RichTextEditingMutation } from '@univerjs/docs';
import { CommandType, DocumentFlavor, ICommandService, IUniverInstanceService, JSONX, ObjectRelativeFromV, PositionedObjectLayoutType } from '@univerjs/core';
import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
import { IRenderManagerService } from '@univerjs/engine-render';
import { DocSelectionRenderService } from '../../services/selection/doc-selection-render.service';

export interface ISwitchDocModeCommandParams { }

Expand All @@ -26,8 +28,10 @@ export const SwitchDocModeCommand: ICommand<ISwitchDocModeCommandParams> = {

type: CommandType.COMMAND,

// eslint-disable-next-line max-lines-per-function, complexity
handler: async (accessor) => {
const commandService = accessor.get(ICommandService);
const renderManagerService = accessor.get(IRenderManagerService);
const docSelectionManagerService = accessor.get(DocSelectionManagerService);

const univerInstanceService = accessor.get(IUniverInstanceService);
Expand All @@ -39,6 +43,20 @@ export const SwitchDocModeCommand: ICommand<ISwitchDocModeCommandParams> = {

const unitId = docDataModel.getUnitId();

const skeleton = renderManagerService.getRenderById(unitId)
?.with(DocSkeletonManagerService)
.getSkeleton();

const docSelectionRenderService = renderManagerService.getRenderById(unitId)?.with(DocSelectionRenderService);

if (skeleton == null || docSelectionRenderService == null) {
return false;
}

const segmentId = docSelectionRenderService?.getSegment();

const segmentPage = docSelectionRenderService?.getSegmentPage();

const documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;

const docRanges = docSelectionManagerService.getDocRanges();
Expand Down Expand Up @@ -69,13 +87,79 @@ export const SwitchDocModeCommand: ICommand<ISwitchDocModeCommandParams> = {

if (action) {
rawActions.push(action);
doMutation.params!.actions = rawActions.reduce((acc, cur) => {
return JSONX.compose(acc, cur as JSONXActions);
}, null as JSONXActions);
} else {
return false;
}

// Change all drawings' position to relative to paragraph if necessary.
// And only need to change drawing in body.
if (documentFlavor !== DocumentFlavor.MODERN) {
const snapshot = docDataModel.getSnapshot();
const { drawings = {}, body } = snapshot;
const customBlocks = body?.customBlocks ?? [];

for (const drawingId in drawings) {
const drawing = drawings[drawingId];

if (drawing.layoutType === PositionedObjectLayoutType.INLINE) {
continue;
}

const customBlock = customBlocks.find((block) => block.blockId === drawingId);

// If drawing is not in body, skip it.
if (customBlock == null) {
continue;
}

const drawingPositionV = drawing.docTransform.positionV;

const { relativeFrom: prevRelativeFrom, posOffset: prevPosOffset } = drawingPositionV;

if (prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH) {
continue;
}

const { startIndex } = customBlock;

const glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage);
const line = glyph?.parent?.parent;
const column = line?.parent;
const paragraphStartLine = column?.lines.find((l) => l.paragraphIndex === line?.paragraphIndex && l.paragraphStart);
const page = column?.parent?.parent;

if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null) {
continue;
}

let delta = 0;

if (prevRelativeFrom === ObjectRelativeFromV.LINE) {
delta -= line.top;
} else if (prevRelativeFrom === ObjectRelativeFromV.PAGE) {
delta += page.marginTop;
}

delta += paragraphStartLine.top;

const newPositionV = {
...drawingPositionV,
relativeFrom: ObjectRelativeFromV.PARAGRAPH,
posOffset: (prevPosOffset ?? 0) - delta,
};

const updateDrawingAction = jsonX.replaceOp(['drawings', drawingId, 'docTransform', 'positionV'], drawingPositionV, newPositionV);

if (updateDrawingAction) {
rawActions.push(updateDrawingAction);
}
}
}

doMutation.params!.actions = rawActions.reduce((acc, cur) => {
return JSONX.compose(acc, cur as JSONXActions);
}, null as JSONXActions);

const result = commandService.syncExecuteCommand<
IRichTextEditingMutationParams,
IRichTextEditingMutationParams
Expand Down
8 changes: 4 additions & 4 deletions packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@
*/

import { LocaleService, useDependency } from '@univerjs/core';
import React, { useEffect, useState } from 'react';
import { IRenderManagerService } from '@univerjs/engine-render';
import { IDrawingManagerService, type IDrawingParam } from '@univerjs/drawing';
import { IRenderManagerService } from '@univerjs/engine-render';
import React, { useEffect, useState } from 'react';
import { getUpdateParams } from '../../utils/get-update-params';
import { DrawingAlign } from './DrawingAlign';
import { DrawingArrange } from './DrawingArrange';
import { DrawingGroup } from './DrawingGroup';
import { DrawingTransform } from './DrawingTransform';
import { DrawingAlign } from './DrawingAlign';
import { ImageCropper } from './ImageCropper';
import { DrawingGroup } from './DrawingGroup';

export interface IDrawingCommonPanelProps {
drawings: IDrawingParam[];
Expand Down

0 comments on commit 86b0e00

Please sign in to comment.