Skip to content

Commit

Permalink
feat: optimization of doc image
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jocs
Jocs committed Jun 5, 2024
1 parent 066941a commit f976926
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 41 deletions.
152 changes: 119 additions & 33 deletions packages/docs-drawing-ui/src/commands/commands/insert-doc-drawing.command.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,62 +14,148 @@
* limitations under the License.
*/

import type { ICommand } from '@univerjs/core';
import type { ICommand, IMutationInfo, JSONXActions } from '@univerjs/core';
import {
CommandType,
ICommandService,
IUndoRedoService,
IUniverInstanceService,
JSONX,
TextX,
TextXActionType,
} from '@univerjs/core';

import { DocDrawingApplyType, IDocDrawingService, SetDocDrawingApplyMutation } from '@univerjs/docs-drawing';
import type { IAccessor } from '@wendellhu/redi';
import type { IDrawingJsonUndo1 } from '@univerjs/drawing';
import { ClearDocDrawingTransformerOperation } from '../operations/clear-drawing-transformer.operation';
import type { IRichTextEditingMutationParams } from '@univerjs/docs';
import { getRetainAndDeleteFromReplace, RichTextEditingMutation, TextSelectionManagerService } from '@univerjs/docs';
import type { IInsertDrawingCommandParams } from './interfaces';

/**
* The command to insert new defined name
*/
export const InsertDocDrawingCommand: ICommand = {
id: 'doc.command.insert-doc-image',

type: CommandType.COMMAND,

// eslint-disable-next-line max-lines-per-function
handler: (accessor: IAccessor, params?: IInsertDrawingCommandParams) => {
if (params == null) {
return false;
}

const commandService = accessor.get(ICommandService);
const undoRedoService = accessor.get(IUndoRedoService);
const docDrawingService = accessor.get(IDocDrawingService);
const textSelectionManagerService = accessor.get(TextSelectionManagerService);
const univerInstanceService = accessor.get(IUniverInstanceService);

if (!params) return false;
const activeTextRange = textSelectionManagerService.getActiveRange();
const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
if (activeTextRange == null || documentDataModel == null) {
return false;
}

// const { drawingParam, imageParam } = params;
const unitId = documentDataModel.getUnitId();
const { drawings } = params;
const { collapsed, startOffset, endOffset, segmentId, style } = activeTextRange;

const textX = new TextX();
const jsonX = JSONX.getInstance();
const rawActions: JSONXActions = [];
const drawingOrderLength = documentDataModel.getSnapshot().drawingsOrder?.length ?? 0;

// Step 1: Insert placeholder `\b` in dataStream and add drawing to customBlocks.
if (collapsed) {
if (startOffset > 0) {
textX.push({
t: TextXActionType.RETAIN,
len: startOffset,
segmentId,
});
}
} else {
textX.push(...getRetainAndDeleteFromReplace(activeTextRange, segmentId));
}

textX.push({
t: TextXActionType.INSERT,
body: {
dataStream: '\b'.repeat(drawings.length),
customBlocks: drawings.map((drawing, i) => ({
startIndex: endOffset + i,
blockId: drawing.drawingId,
})),
},
len: drawings.length,
line: 0,
segmentId,
});

const placeHolderAction = jsonX.editOp(textX.serialize());

rawActions.push(placeHolderAction!);

const drawings = params.drawings;
for (const drawing of drawings) {
const { drawingId } = drawing;
const addDrawingAction = jsonX.insertOp(['drawings', drawingId], drawing);
const addDrawingOrderAction = jsonX.insertOp(['drawingsOrder', drawingOrderLength], drawingId);

rawActions.push(addDrawingAction!);
rawActions.push(addDrawingOrderAction!);
}

const textRanges = [
{
startOffset: startOffset + drawings.length,
endOffset: startOffset + drawings.length,
collapsed: true,
style,
},
];

const doMutation: IMutationInfo<IRichTextEditingMutationParams> = {
id: RichTextEditingMutation.id,
params: {
unitId,
actions: [],
textRanges,
},
};

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

const result = commandService.syncExecuteCommand<
IRichTextEditingMutationParams,
IRichTextEditingMutationParams
>(doMutation.id, doMutation.params);

return Boolean(result);
// const sheetDrawingParams = drawings.map((param) => param.sheetDrawingParam);
const unitIds: string[] = drawings.map((param) => param.unitId);
// const unitIds = drawings.map((param) => param.unitId);

// execute do mutations and add undo mutations to undo stack if completed
const jsonOp = docDrawingService.getBatchAddOp(drawings) as IDrawingJsonUndo1;

const { unitId, subUnitId, undo, redo, objects } = jsonOp;

const result = commandService.syncExecuteCommand(SetDocDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DocDrawingApplyType.INSERT });

if (result) {
undoRedoService.pushUndoRedo({
unitID: unitId,
undoMutations: [
{ id: SetDocDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DocDrawingApplyType.REMOVE } },
{ id: ClearDocDrawingTransformerOperation.id, params: unitIds },
],
redoMutations: [
{ id: SetDocDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DocDrawingApplyType.INSERT } },
{ id: ClearDocDrawingTransformerOperation.id, params: unitIds },
],
});

return true;
}
// const jsonOp = docDrawingService.getBatchAddOp(drawings) as IDrawingJsonUndo1;

// const { unitId, subUnitId, undo, redo, objects } = jsonOp;

// const result = commandService.syncExecuteCommand(SetDocDrawingApplyMutation.id, { op: redo, unitId, subUnitId, objects, type: DocDrawingApplyType.INSERT });

// if (result) {
// undoRedoService.pushUndoRedo({
// unitID: unitId,
// undoMutations: [
// { id: SetDocDrawingApplyMutation.id, params: { op: undo, unitId, subUnitId, objects, type: DocDrawingApplyType.REMOVE } },
// { id: ClearDocDrawingTransformerOperation.id, params: unitIds },
// ],
// redoMutations: [
// { id: SetDocDrawingApplyMutation.id, params: { op: redo, unitId, subUnitId, objects, type: DocDrawingApplyType.INSERT } },
// { id: ClearDocDrawingTransformerOperation.id, params: unitIds },
// ],
// });

// return true;
// }

return false;
// return false;
},
};
2 changes: 1 addition & 1 deletion packages/docs-drawing-ui/src/commands/operations/clear-drawing-transformer.operation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { CommandType } from '@univerjs/core';
import { IRenderManagerService } from '@univerjs/engine-render';

export const ClearDocDrawingTransformerOperation: IMutation<string[]> = {
id: 'sheet.operation.clear-drawing-transformer',
id: 'doc.operation.clear-drawing-transformer',
type: CommandType.MUTATION,
handler: (accessor, params) => {
const renderManagerService = accessor.get(IRenderManagerService);
Expand Down
11 changes: 8 additions & 3 deletions packages/docs-drawing-ui/src/controllers/doc-drawing-update.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ export class DocDrawingUpdateController extends Disposable {
);
}

// eslint-disable-next-line max-lines-per-function
private async _insertFloatImage(file: File) {
let imageParam: Nullable<IImageIoServiceParam>;

Expand Down Expand Up @@ -169,15 +170,17 @@ export class DocDrawingUpdateController extends Disposable {
source,
transform: docDrawingPositionToTransform(docTransform),
docTransform,
title: '', description: '', layoutType: PositionedObjectLayoutType.WRAP_SQUARE,
title: '',
description: '',
layoutType: PositionedObjectLayoutType.WRAP_SQUARE,
};

this._commandService.executeCommand(InsertDocDrawingCommand.id, {
unitId,
drawings: [docDrawingParam],
} as IInsertDrawingCommandParams);

this._docSkeletonManagerService.getCurrent()?.skeleton.calculate();
// this._docSkeletonManagerService.getCurrent()?.skeleton.calculate();
}

private _getUnitInfo() {
Expand All @@ -195,7 +198,9 @@ export class DocDrawingUpdateController extends Disposable {
};
}

private _getImagePosition(imageWidth: number, imageHeight: number, sceneWidth: number, sceneHeight: number): Nullable<IDocDrawingPosition> {
private _getImagePosition(
imageWidth: number, imageHeight: number, _sceneWidth: number, _sceneHeight: number
): Nullable<IDocDrawingPosition> {
const activeTextRange = this._textSelectionManagerService.getActiveTextRange();
const position = activeTextRange?.getAbsolutePosition() || {
left: 0,
Expand Down
2 changes: 2 additions & 0 deletions packages/docs-drawing/src/commands/mutations/set-drawing-apply.mutation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ export interface ISetDrawingApplyMutationParams extends IDrawingJson1Type {

export const SetDocDrawingApplyMutation: IMutation<ISetDrawingApplyMutationParams> = {
id: 'doc.mutation.set-drawing-apply',

type: CommandType.MUTATION,

handler: (accessor, params) => {
const drawingManagerService = accessor.get(IDrawingManagerService);
const docDrawingService = accessor.get(IDocDrawingService);
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/src/commands/mutations/core-editing.mutation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@ export const RichTextEditingMutation: IMutation<IRichTextEditingMutationParams,
const undoActions = JSONX.invertWithDoc(actions, documentDataModel.getSnapshot());
documentDataModel.apply(actions);

// console.log('redoactions', actions);
// console.log('undoactions', undoActions);
// console.log(documentDataModel);

// Step 2: Update Doc View Model.
const segmentDocumentDataModel = documentDataModel.getSelfOrHeaderFooterModel(segmentId);
const segmentViewModel = documentViewModel.getSelfOrHeaderFooterViewModel(segmentId);
Expand Down
1 change: 1 addition & 0 deletions packages/docs/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,4 @@ export { SelectAllOperation } from './commands/operations/select-all.operation';
export { CutContentCommand, InnerPasteCommand } from './commands/commands/clipboard.inner.command';
export { SetDocZoomRatioOperation, type ISetDocZoomRatioOperationParams } from './commands/operations/set-doc-zoom-ratio.operation';
export { SetDocZoomRatioCommand } from './commands/commands/set-doc-zoom-ratio.command';
export { getRetainAndDeleteFromReplace } from './basics/retain-delete-params';
4 changes: 2 additions & 2 deletions packages/drawing-ui/src/controllers/image-update.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class ImageUpdateController extends Disposable {
if (renderObject == null) {
return;
}
const { scene, transformer } = renderObject;
const { scene } = renderObject;

const imageShapeKey = getDrawingShapeKeyByDrawingSearch({ unitId, subUnitId, drawingId });

Expand Down Expand Up @@ -207,7 +207,7 @@ export class ImageUpdateController extends Disposable {
if (renderObject == null) {
return;
}
const { scene, transformer } = renderObject;
const { scene } = renderObject;
if (transform == null) {
return true;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,12 @@ import { KeyCode, ProgressBar, TextEditor } from '@univerjs/ui';
import { useDependency } from '@wendellhu/redi/react-bindings';
import clsx from 'clsx';
import React, { useEffect, useLayoutEffect, useState } from 'react';

import { RangeProtectionPermissionEditPoint, RangeProtectionRuleModel, SelectionManagerService, WorksheetEditPermission, WorksheetProtectionRuleModel, WorksheetSetCellValuePermission } from '@univerjs/sheets';
import { merge } from 'rxjs';
import { IFormulaEditorManagerService } from '../../services/editor/formula-editor-manager.service';
import { IEditorBridgeService } from '../../services/editor-bridge.service';

import { DefinedName } from '../defined-name/DefinedName';

import styles from './index.module.less';

enum ArrowDirection {
Expand Down

0 comments on commit f976926

Please sign in to comment.