From 0223a64a25baf0d0dab52eb9733d1bf4a86f9397 Mon Sep 17 00:00:00 2001 From: DR-Univer Date: Wed, 29 May 2024 15:06:47 +0800 Subject: [PATCH] fix(drawing): standardize project config --- .../doc-drawing-update.controller.ts | 20 ++++++--------- packages/docs-drawing-ui/src/locale/en-US.ts | 4 +-- packages/docs-drawing-ui/src/locale/zh-CN.ts | 4 +-- .../src/views/upload-component/UploadFile.tsx | 4 +-- packages/drawing/src/basics/config.ts | 25 +++++++++++++++++++ packages/drawing/src/index.ts | 2 +- .../drawing/src/services/image-io.service.ts | 9 +++---- .../sheet-drawing-update.controller.ts | 25 ++++++++++++------- .../sheets-drawing-ui/src/locale/en-US.ts | 4 +-- .../sheets-drawing-ui/src/locale/zh-CN.ts | 4 +-- .../src/views/upload-component/UploadFile.tsx | 4 +-- 11 files changed, 65 insertions(+), 40 deletions(-) create mode 100644 packages/drawing/src/basics/config.ts diff --git a/packages/docs-drawing-ui/src/controllers/doc-drawing-update.controller.ts b/packages/docs-drawing-ui/src/controllers/doc-drawing-update.controller.ts index d320076b5ba1..dc58a1e008ed 100644 --- a/packages/docs-drawing-ui/src/controllers/doc-drawing-update.controller.ts +++ b/packages/docs-drawing-ui/src/controllers/doc-drawing-update.controller.ts @@ -17,7 +17,7 @@ import type { DocumentDataModel, ICommandInfo, IDocDrawingPosition, IImageIoServiceParam, Nullable } from '@univerjs/core'; import { Disposable, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, IDrawingManagerService, IImageIoService, ImageUploadStatusType, IUniverInstanceService, LifecycleStages, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, OnLifecycle, PositionedObjectLayoutType, UniverInstanceType } from '@univerjs/core'; import { Inject } from '@wendellhu/redi'; -import { getImageSize } from '@univerjs/drawing'; +import { DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, getImageSize } from '@univerjs/drawing'; import { IMessageService } from '@univerjs/ui'; import { MessageType } from '@univerjs/design'; import type { IDocDrawing } from '@univerjs/docs'; @@ -34,10 +34,6 @@ 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'; -const SHEET_IMAGE_WIDTH_LIMIT = 500; -const SHEET_IMAGE_HEIGHT_LIMIT = 500; -const SHEET_IMAGE_COUNT_LIMIT = 10; - @OnLifecycle(LifecycleStages.Rendered, DocDrawingUpdateController) export class DocDrawingUpdateController extends Disposable { constructor( @@ -85,15 +81,15 @@ export class DocDrawingUpdateController extends Disposable { const fileLength = params.files.length; - if (fileLength > SHEET_IMAGE_COUNT_LIMIT) { + if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) { this._messageService.show({ type: MessageType.Error, - content: this._localeService.t('update-status.exceedMaxCount', String(SHEET_IMAGE_COUNT_LIMIT)), + content: this._localeService.t('update-status.exceedMaxCount', String(DRAWING_IMAGE_COUNT_LIMIT)), }); return; } - this._imageRemoteService.setWaitCount(params.files.length); + this._imageRemoteService.setWaitCount(fileLength); params.files.forEach(async (file) => { await this._insertFloatImage(file); @@ -113,7 +109,7 @@ export class DocDrawingUpdateController extends Disposable { if (type === ImageUploadStatusType.ERROR_EXCEED_SIZE) { this._messageService.show({ type: MessageType.Error, - content: this._localeService.t('update-status.exceedMaxSize'), + content: this._localeService.t('update-status.exceedMaxSize', String(DRAWING_IMAGE_ALLOW_SIZE / 1024 * 1024)), }); } else if (type === ImageUploadStatusType.ERROR_IMAGE_TYPE) { this._messageService.show({ @@ -143,9 +139,9 @@ export class DocDrawingUpdateController extends Disposable { this._imageRemoteService.addImageSourceCache(imageId, imageSourceType, image); let scale = 1; - if (width > SHEET_IMAGE_WIDTH_LIMIT || height > SHEET_IMAGE_HEIGHT_LIMIT) { - const scaleWidth = SHEET_IMAGE_WIDTH_LIMIT / width; - const scaleHeight = SHEET_IMAGE_HEIGHT_LIMIT / height; + if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) { + const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width; + const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height; scale = Math.max(scaleWidth, scaleHeight); } diff --git a/packages/docs-drawing-ui/src/locale/en-US.ts b/packages/docs-drawing-ui/src/locale/en-US.ts index 9150ea384ccb..6e28db307d29 100644 --- a/packages/docs-drawing-ui/src/locale/en-US.ts +++ b/packages/docs-drawing-ui/src/locale/en-US.ts @@ -34,9 +34,9 @@ const locale = { reset: 'Reset Size', }, 'update-status': { - exceedMaxSize: 'Image size exceeds limit, limit is 5M', + exceedMaxSize: 'Image size exceeds limit, limit is {0}M', invalidImageType: 'Invalid image type', - exceedMaxCount: 'The number of images exceeds the limit, the limit is {0}', + exceedMaxCount: 'Only {0} images can be uploaded at a time', invalidImage: 'Invalid image', }, }; diff --git a/packages/docs-drawing-ui/src/locale/zh-CN.ts b/packages/docs-drawing-ui/src/locale/zh-CN.ts index be38a55cac02..3d2c99ff6dc9 100644 --- a/packages/docs-drawing-ui/src/locale/zh-CN.ts +++ b/packages/docs-drawing-ui/src/locale/zh-CN.ts @@ -36,9 +36,9 @@ const locale: typeof enUS = { reset: '重置大小', }, 'update-status': { - exceedMaxSize: '图片大小超过限制, 限制为5M', + exceedMaxSize: '图片大小超过限制, 限制为{0}M', invalidImageType: '图片类型错误', - exceedMaxCount: '图片数量超过限制, 限制为{0}', + exceedMaxCount: '图片只能一次上传{0}张', invalidImage: '无效图片', }, }; diff --git a/packages/docs-drawing-ui/src/views/upload-component/UploadFile.tsx b/packages/docs-drawing-ui/src/views/upload-component/UploadFile.tsx index c355bb7fb742..710464d268db 100644 --- a/packages/docs-drawing-ui/src/views/upload-component/UploadFile.tsx +++ b/packages/docs-drawing-ui/src/views/upload-component/UploadFile.tsx @@ -17,7 +17,7 @@ import { ICommandService } from '@univerjs/core'; import { useDependency } from '@wendellhu/redi/react-bindings'; import React, { useRef } from 'react'; -import { ALLOW_IMAGE_LIST } from '@univerjs/drawing'; +import { DRAWING_IMAGE_ALLOW_IMAGE_LIST } from '@univerjs/drawing'; import { InsertDocImageOperation } from '../../commands/operations/insert-image.operation'; import styles from './index.module.less'; @@ -30,7 +30,7 @@ export const UploadFileMenu = () => { fileInputRef.current?.click(); }; - const imageAccept = ALLOW_IMAGE_LIST.map((image) => `.${image.replace('image/', '')}`).join(','); + const imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace('image/', '')}`).join(','); const handleFileChange = (event: React.ChangeEvent) => { const fileList = event.target.files; diff --git a/packages/drawing/src/basics/config.ts b/packages/drawing/src/basics/config.ts new file mode 100644 index 000000000000..393e3cf6b812 --- /dev/null +++ b/packages/drawing/src/basics/config.ts @@ -0,0 +1,25 @@ +/** + * Copyright 2023-present DreamNum Inc. + * + * 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. + */ + +export const DRAWING_IMAGE_WIDTH_LIMIT = 500; + +export const DRAWING_IMAGE_HEIGHT_LIMIT = 500; + +export const DRAWING_IMAGE_COUNT_LIMIT = 10; + +export const DRAWING_IMAGE_ALLOW_SIZE = 5 * 1024 * 1024; + +export const DRAWING_IMAGE_ALLOW_IMAGE_LIST = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']; diff --git a/packages/drawing/src/index.ts b/packages/drawing/src/index.ts index 6f111b3e626f..2a897298a494 100644 --- a/packages/drawing/src/index.ts +++ b/packages/drawing/src/index.ts @@ -14,10 +14,10 @@ * limitations under the License. */ +export { DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_ALLOW_IMAGE_LIST } from './basics/config'; export { DrawingManagerService, UnitDrawingService, type IDrawingJson1Type, type IDrawingJsonUndo1 } from './services/drawing-manager.service'; export { getDrawingShapeKeyByDrawingSearch } from './utils/get-image-shape-key'; export { getImageSize } from './utils/get-image-size'; export { UniverDrawingPlugin } from './plugin'; export { type IImageData } from './models/image-model-interface'; -export { ALLOW_IMAGE_LIST } from './services/image-io.service'; diff --git a/packages/drawing/src/services/image-io.service.ts b/packages/drawing/src/services/image-io.service.ts index a4432448e749..4a9308a2e640 100644 --- a/packages/drawing/src/services/image-io.service.ts +++ b/packages/drawing/src/services/image-io.service.ts @@ -18,10 +18,7 @@ import type { IImageIoService, IImageIoServiceParam, Nullable } from '@univerjs/ import { ImageSourceType, ImageUploadStatusType, Tools } from '@univerjs/core'; import type { Observable } from 'rxjs'; import { Subject } from 'rxjs'; - -export const ALLOW_IMAGE_LIST = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']; - -const ALLOW_IMAGE_SIZE = 5 * 1024 * 1024; +import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_ALLOW_SIZE } from '../basics/config'; export class ImageIoService implements IImageIoService { private _waitCount = 0; @@ -57,12 +54,12 @@ export class ImageIoService implements IImageIoService { async saveImage(imageFile: File): Promise> { return new Promise((resolve, reject) => { - if (!ALLOW_IMAGE_LIST.includes(imageFile.type)) { + if (!DRAWING_IMAGE_ALLOW_IMAGE_LIST.includes(imageFile.type)) { reject(new Error(ImageUploadStatusType.ERROR_IMAGE_TYPE)); this._decreaseWaiting(); return; } - if (imageFile.size > ALLOW_IMAGE_SIZE) { + if (imageFile.size > DRAWING_IMAGE_ALLOW_SIZE) { reject(new Error(ImageUploadStatusType.ERROR_EXCEED_SIZE)); this._decreaseWaiting(); return; diff --git a/packages/sheets-drawing-ui/src/controllers/sheet-drawing-update.controller.ts b/packages/sheets-drawing-ui/src/controllers/sheet-drawing-update.controller.ts index 62e6e3c0cd97..ffa322aefa62 100644 --- a/packages/sheets-drawing-ui/src/controllers/sheet-drawing-update.controller.ts +++ b/packages/sheets-drawing-ui/src/controllers/sheet-drawing-update.controller.ts @@ -18,7 +18,7 @@ import type { ICommandInfo, IImageIoServiceParam, IRange, Nullable, Workbook } f import { Disposable, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, IDrawingManagerService, IImageIoService, ImageUploadStatusType, IUniverInstanceService, LifecycleStages, LocaleService, OnLifecycle, UniverInstanceType } from '@univerjs/core'; import { Inject } from '@wendellhu/redi'; import type { IImageData } from '@univerjs/drawing'; -import { getImageSize } from '@univerjs/drawing'; +import { DRAWING_IMAGE_ALLOW_SIZE, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, getImageSize } from '@univerjs/drawing'; import type { ISheetDrawing, ISheetDrawingPosition } from '@univerjs/sheets'; import { ISheetDrawingService, SelectionManagerService } from '@univerjs/sheets'; import { ISelectionRenderService } from '@univerjs/sheets-ui'; @@ -35,9 +35,6 @@ import { GroupSheetDrawingCommand } from '../commands/commands/group-sheet-drawi import { UngroupSheetDrawingCommand } from '../commands/commands/ungroup-sheet-drawing.command'; import { drawingPositionToTransform, transformToDrawingPosition } from '../basics/transform-position'; -const SHEET_IMAGE_WIDTH_LIMIT = 500; -const SHEET_IMAGE_HEIGHT_LIMIT = 500; - @OnLifecycle(LifecycleStages.Rendered, SheetDrawingUpdateController) export class SheetDrawingUpdateController extends Disposable { constructor( @@ -81,7 +78,17 @@ export class SheetDrawingUpdateController extends Disposable { return; } - this._imageRemoteService.setWaitCount(params.files.length); + 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._imageRemoteService.setWaitCount(fileLength); if (command.id === InsertCellImageOperation.id) { params.files.forEach(async (file) => { await this._insertCellImage(file); @@ -110,7 +117,7 @@ export class SheetDrawingUpdateController extends Disposable { if (type === ImageUploadStatusType.ERROR_EXCEED_SIZE) { this._messageService.show({ type: MessageType.Error, - content: this._localeService.t('update-status.exceedMaxSize'), + content: this._localeService.t('update-status.exceedMaxSize', String(DRAWING_IMAGE_ALLOW_SIZE / 1024 * 1024)), }); } else if (type === ImageUploadStatusType.ERROR_IMAGE_TYPE) { this._messageService.show({ @@ -142,9 +149,9 @@ export class SheetDrawingUpdateController extends Disposable { this._imageRemoteService.addImageSourceCache(imageId, imageSourceType, image); let scale = 1; - if (width > SHEET_IMAGE_WIDTH_LIMIT || height > SHEET_IMAGE_HEIGHT_LIMIT) { - const scaleWidth = SHEET_IMAGE_WIDTH_LIMIT / width; - const scaleHeight = SHEET_IMAGE_HEIGHT_LIMIT / height; + if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) { + const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width; + const scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height; scale = Math.max(scaleWidth, scaleHeight); } diff --git a/packages/sheets-drawing-ui/src/locale/en-US.ts b/packages/sheets-drawing-ui/src/locale/en-US.ts index 813a807d2cc6..e3db2a43d099 100644 --- a/packages/sheets-drawing-ui/src/locale/en-US.ts +++ b/packages/sheets-drawing-ui/src/locale/en-US.ts @@ -41,9 +41,9 @@ const locale = { none: "Don't move or size with cells", }, 'update-status': { - exceedMaxSize: 'Image size exceeds limit, limit is 5M', + exceedMaxSize: 'Image size exceeds limit, limit is {0}M', invalidImageType: 'Invalid image type', - exceedMaxCount: 'The number of images exceeds the limit, the limit is {0}', + exceedMaxCount: 'Only {0} images can be uploaded at a time', invalidImage: 'Invalid image', }, }; diff --git a/packages/sheets-drawing-ui/src/locale/zh-CN.ts b/packages/sheets-drawing-ui/src/locale/zh-CN.ts index c1f324920724..f1b9cf0cec17 100644 --- a/packages/sheets-drawing-ui/src/locale/zh-CN.ts +++ b/packages/sheets-drawing-ui/src/locale/zh-CN.ts @@ -43,9 +43,9 @@ const locale: typeof enUS = { none: '不要移动或调整大小与单元格', }, 'update-status': { - exceedMaxSize: '图片大小超过限制, 限制为5M', + exceedMaxSize: '图片大小超过限制, 限制为{0}M', invalidImageType: '图片类型错误', - exceedMaxCount: '图片数量超过限制, 限制为{0}', + exceedMaxCount: '图片只能一次上传{0}张', invalidImage: '无效图片', }, }; diff --git a/packages/sheets-drawing-ui/src/views/upload-component/UploadFile.tsx b/packages/sheets-drawing-ui/src/views/upload-component/UploadFile.tsx index 69d4c1977944..9e2df793f09f 100644 --- a/packages/sheets-drawing-ui/src/views/upload-component/UploadFile.tsx +++ b/packages/sheets-drawing-ui/src/views/upload-component/UploadFile.tsx @@ -19,7 +19,7 @@ import { ICommandService } from '@univerjs/core'; import { useDependency } from '@wendellhu/redi/react-bindings'; import React, { useRef } from 'react'; import type { ICustomComponentProps } from '@univerjs/ui'; -import { ALLOW_IMAGE_LIST } from '@univerjs/drawing'; +import { DRAWING_IMAGE_ALLOW_IMAGE_LIST } from '@univerjs/drawing'; import { InsertCellImageOperation, InsertFloatImageOperation } from '../../commands/operations/insert-image.operation'; import styles from './index.module.less'; import { UploadFileType } from './component-name'; @@ -39,7 +39,7 @@ export const UploadFileMenu = (props: IUploadFileProps) => { fileInputRef.current?.click(); }; - const imageAccept = ALLOW_IMAGE_LIST.map((image) => `.${image.replace('image/', '')}`).join(','); + const imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace('image/', '')}`).join(','); const handleFileChange = (event: React.ChangeEvent) => { const fileList = event.target.files;