fix(drawing): standardize project config

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);
         }
 

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',
     },
 };

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: '无效图片',
     },
 };

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<HTMLInputElement>) => {
         const fileList = event.target.files;

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'];

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';
 

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<Nullable<IImageIoServiceParam>> {
         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;

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);
         }
 

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',
     },
 };

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: '无效图片',
     },
 };

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<HTMLInputElement>) => {
         const fileList = event.target.files;