Skip to content

Commit

Permalink
refactor: refactor doc drawing
Browse files Browse the repository at this point in the history
  • Loading branch information
@wzhudev
wzhudev committed Jun 18, 2024
1 parent a270e80 commit 5127019
Show file tree
Hide file tree
Showing 8 changed files with 193 additions and 193 deletions.
4 changes: 3 additions & 1 deletion examples/src/docs/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
import { UniverUIPlugin } from '@univerjs/ui';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import { UniverDebuggerPlugin } from '@univerjs/debugger';
import { UniverDocsDrawingUIPlugin } from '@univerjs/docs-drawing-ui';

import { DEFAULT_DOCUMENT_DATA_CN } from '../data';
import { enUS, ruRU, zhCN } from '../locales';

Expand Down Expand Up @@ -66,7 +68,7 @@ univer.registerPlugin(UniverDocsUIPlugin, {
},
});

// univer.registerPlugin(UniverDocsDrawingUIPlugin);
univer.registerPlugin(UniverDocsDrawingUIPlugin);

univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_CN);

Expand Down
7 changes: 4 additions & 3 deletions packages/docs-drawing-ui/src/commands/operations/insert-image.operation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@ export interface IInsertImageOperationParams {
files: Nullable<File[]>;
};

/**
* @deprecated Do not use command as event!
*/
export const InsertDocImageOperation: IOperation<IInsertImageOperationParams> = {
id: 'doc.operation.insert-float-image',
type: CommandType.OPERATION,
handler: (accessor, params) => {
return true;
},
handler: () => true,
};
212 changes: 42 additions & 170 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 @@ -15,7 +15,7 @@
*/

import type { DocumentDataModel, ICommandInfo, IDocDrawingPosition, Nullable } from '@univerjs/core';
import { Disposable, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, IUniverInstanceService, LifecycleStages, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, OnLifecycle, PositionedObjectLayoutType, UniverInstanceType } from '@univerjs/core';
import { Disposable, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType } from '@univerjs/core';
import { Inject } from '@wendellhu/redi';
import type { IImageIoServiceParam } from '@univerjs/drawing';
import { DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, DrawingTypeEnum, getImageSize, IDrawingManagerService, IImageIoService, ImageUploadStatusType } from '@univerjs/drawing';
Expand All @@ -25,8 +25,8 @@ import type { IDocDrawing } from '@univerjs/docs-drawing';
import { IDocDrawingService } from '@univerjs/docs-drawing';
import { DocSkeletonManagerService, TextSelectionManagerService } from '@univerjs/docs';
import { docDrawingPositionToTransform, transformToDocDrawingPosition } from '@univerjs/docs-ui';
import type { Documents } from '@univerjs/engine-render';
import { IRenderManagerService, Liquid } from '@univerjs/engine-render';
import type { IRenderContext, IRenderModule } from '@univerjs/engine-render';

import type { IInsertImageOperationParams } from '../commands/operations/insert-image.operation';
import { InsertDocImageOperation } from '../commands/operations/insert-image.operation';
import type { IInsertDrawingCommandParams, ISetDrawingCommandParams } from '../commands/commands/interfaces';
Expand All @@ -36,68 +36,56 @@ import { GroupDocDrawingCommand } from '../commands/commands/group-doc-drawing.c
import { UngroupDocDrawingCommand } from '../commands/commands/ungroup-doc-drawing.command';
import { SetDocDrawingCommand } from '../commands/commands/set-doc-drawing.command';

@OnLifecycle(LifecycleStages.Rendered, DocDrawingUpdateController)
export class DocDrawingUpdateController extends Disposable {
export class DocDrawingUpdateRenderController extends Disposable implements IRenderModule {
constructor(
private readonly _context: IRenderContext<DocumentDataModel>,
@ICommandService private readonly _commandService: ICommandService,
@IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
@Inject(TextSelectionManagerService) private readonly _textSelectionManagerService: TextSelectionManagerService,
@IImageIoService private readonly _imageIoService: IImageIoService,
@Inject(DocSkeletonManagerService) private readonly _docSkeletonManagerService: DocSkeletonManagerService,
@IDocDrawingService private readonly _sheetDrawingService: IDocDrawingService,
@IImageIoService private readonly _imageIoService: IImageIoService,
@IDrawingManagerService private readonly _drawingManagerService: IDrawingManagerService,
@IContextService private readonly _contextService: IContextService,
@IMessageService private readonly _messageService: IMessageService,
@Inject(LocaleService) private readonly _localeService: LocaleService,
@Inject(DocSkeletonManagerService) private readonly _docSkeletonManagerService: DocSkeletonManagerService,
@IRenderManagerService private readonly _renderManagerService: IRenderManagerService
@Inject(LocaleService) private readonly _localeService: LocaleService
) {
super();

this._init();
}

private _init(): void {
this._initCommandListeners();

this._updateDrawingListener();

this._updateOrderListener();

this._groupDrawingListener();

this._focusDrawingListener();
}

/**
* Upload image to cell or float image
*/
private _initCommandListeners() {
this.disposeWithMe(
this._commandService.onCommandExecuted(async (command: ICommandInfo) => {
if (command.id === InsertDocImageOperation.id) {
const params = command.params as IInsertImageOperationParams;
if (params.files == null) {
return;
}

const fileLength = params.files.length;

if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
this._messageService.show({
type: MessageType.Error,
content: this._localeService.t('update-status.exceedMaxCount', String(DRAWING_IMAGE_COUNT_LIMIT)),
});
return;
}

this._imageIoService.setWaitCount(fileLength);

params.files.forEach(async (file) => {
await this._insertFloatImage(file);
this.disposeWithMe(this._commandService.onCommandExecuted(async (command: ICommandInfo) => {
if (command.id === InsertDocImageOperation.id) {
const params = command.params as IInsertImageOperationParams;
if (params.files == null) {
return;
}

const fileLength = params.files.length;

if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
this._messageService.show({
type: MessageType.Error,
content: this._localeService.t('update-status.exceedMaxCount', String(DRAWING_IMAGE_COUNT_LIMIT)),
});
return;
}
})
);

this._imageIoService.setWaitCount(fileLength);

params.files.forEach(async (file) => {
await this._insertFloatImage(file);
});
}
}));
}

private async _insertFloatImage(file: File) {
Expand Down Expand Up @@ -129,21 +117,11 @@ export class DocDrawingUpdateController extends Disposable {
return;
}

const info = this._getUnitInfo();
if (info == null) {
return;
}
const { unitId, subUnitId } = info;
const { unitId } = this._context;
const { imageId, imageSourceType, source, base64Cache } = imageParam;
const { width, height, image } = await getImageSize(base64Cache || '');

const renderObject = this._renderManagerService.getRenderById(unitId);

if (renderObject == null) {
return;
}

const { width: sceneWidth, height: sceneHeight } = renderObject.scene;
const { width: sceneWidth, height: sceneHeight } = this._context.scene;

this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);

Expand All @@ -154,15 +132,15 @@ export class DocDrawingUpdateController extends Disposable {
scale = Math.max(scaleWidth, scaleHeight);
}

const docTransform = this._getImagePosition(width * scale, height * scale, sceneWidth, sceneHeight);
const docTransform = this._getImagePosition(width * scale, height * scale);

if (docTransform == null) {
return;
}

const docDrawingParam: IDocDrawing = {
unitId,
subUnitId,
subUnitId: unitId,
drawingId: imageId,
drawingType: DrawingTypeEnum.DRAWING_IMAGE,
imageSourceType,
Expand All @@ -177,25 +155,10 @@ export class DocDrawingUpdateController extends Disposable {
drawings: [docDrawingParam],
} as IInsertDrawingCommandParams);

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

private _getUnitInfo() {
const documentDataModel = this._univerInstanceService.getCurrentUnitForType<DocumentDataModel>(UniverInstanceType.UNIVER_DOC);
if (documentDataModel == null) {
return;
}

const unitId = documentDataModel.getUnitId();
const subUnitId = unitId;

return {
unitId,
subUnitId,
};
}

private _getImagePosition(imageWidth: number, imageHeight: number, sceneWidth: number, sceneHeight: number): Nullable<IDocDrawingPosition> {
private _getImagePosition(imageWidth: number, imageHeight: number): Nullable<IDocDrawingPosition> {
const activeTextRange = this._textSelectionManagerService.getActiveTextRange();
const position = activeTextRange?.getAbsolutePosition() || {
left: 0,
Expand Down Expand Up @@ -235,18 +198,13 @@ export class DocDrawingUpdateController extends Disposable {

private _updateDrawingListener() {
this._drawingManagerService.featurePluginUpdate$.subscribe((params) => {
const drawings: Partial<IDocDrawing>[] = [];

if (params.length === 0) {
return;
}

// const offsetInfo = this._getDocsOffsetInfo();

// const { pageMarginCache, docsLeft, docsTop } = offsetInfo;

const drawings: Partial<IDocDrawing>[] = [];
(params as IDocDrawing[]).forEach((param) => {
const { unitId, subUnitId, drawingId, drawingType, transform } = param;
const { unitId, subUnitId, drawingId, transform } = param;
if (transform == null) {
return;
}
Expand Down Expand Up @@ -275,8 +233,9 @@ export class DocDrawingUpdateController extends Disposable {
});

if (drawings.length > 0) {
const unitId = params[0].unitId;
this._commandService.syncExecuteCommand(SetDocDrawingCommand.id, {
unitId: params[0].unitId,
unitId,
drawings,
} as ISetDrawingCommandParams);

Expand All @@ -285,97 +244,10 @@ export class DocDrawingUpdateController extends Disposable {
});
}

private _getDocsOffsetInfo() {
const docsSkeletonObject = this._docSkeletonManagerService.getCurrent();
if (docsSkeletonObject == null) {
return {
pageMarginCache: new Map<string, { marginLeft: number; marginTop: number }>(),
docsLeft: 0,
docsTop: 0,
};
}

const { unitId, skeleton } = docsSkeletonObject;

const currentRender = this._renderManagerService.getRenderById(unitId);

const skeletonData = skeleton?.getSkeletonData();

if (currentRender == null || !skeletonData) {
return {
pageMarginCache: new Map<string, { marginLeft: number; marginTop: number }>(),
docsLeft: 0,
docsTop: 0,
};
}

const { mainComponent } = currentRender;

const documentComponent = mainComponent as Documents;

const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;

const { pages } = skeletonData;

const liquid = new Liquid();

const pageMarginCache = new Map<string, { marginLeft: number; marginTop: number }>();

for (let i = 0, len = pages.length; i < len; i++) {
const page = pages[i];
const { skeDrawings, marginLeft, marginTop } = page;
// cumPageLeft + = pageWidth + documents.pageMarginLeft;

liquid.translatePagePadding(page);

skeDrawings.forEach((drawing) => {
const { aLeft, aTop, height, width, drawingId, drawingOrigin } = drawing;
// const behindText = drawingOrigin.layoutType === PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === BooleanNumber.TRUE;
// floatObjects.push({
// unitId,
// subUnitId: DEFAULT_DOCUMENT_SUB_COMPONENT_ID,
// floatingObjectId: drawingId,
// behindText,
// floatingObject: {
// left: aLeft + docsLeft + liquid.x,
// top: aTop + docsTop + liquid.y,
// width,
// height,
// },
// });

pageMarginCache.set(drawingId, {
marginLeft: liquid.x,
marginTop: liquid.y,
});
});

liquid.restorePagePadding(page);

liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
}

return { pageMarginCache, docsLeft, docsTop };
}

private _refreshDocSkeleton() {
const docsSkeletonObject = this._docSkeletonManagerService.getCurrent();
if (docsSkeletonObject == null) {
return;
}

const { unitId, skeleton } = docsSkeletonObject;

const currentRender = this._renderManagerService.getRenderById(unitId);

if (currentRender == null) {
return;
}

const { mainComponent } = currentRender;

const skeleton = this._docSkeletonManagerService.getSkeleton();
const { mainComponent } = this._context;
skeleton?.calculate();

mainComponent?.makeDirty();
}

Expand Down
Loading

0 comments on commit 5127019

Please sign in to comment.