@univerjs/sheets-data-validation-ui 0.4.1-nightly.202410271605 → 0.4.1-nightly.202410291249

package/lib/es/index.js

@@ -6,10 +6,10 @@ import React, { useState, forwardRef, useRef, createElement, useMemo, useEffect
 import { Inject, LocaleService, Disposable, DataValidationErrorStyle, useDependency, ICommandService, numfmt, CellValueType, UniverInstanceType, toDisposable, IUniverInstanceService, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DisposableCollection, CommandType, BuildTextUtils, DataValidationRenderMode, DataValidationType, IConfigService, UndoCommand, RedoCommand, isUnitRangesEqual, debounce, shallowEqual, Injector, DataValidationStatus, ObjectMatrix, Range, Rectangle, queryObjectMatrix, Optional, RxDisposable, InterceptorEffectEnum, sequenceExecute, bufferDebounceTime, createInternalEditorID, isFormulaString, Tools, ThemeService, VerticalAlign, HorizontalAlign, DEFAULT_STYLES, WrapStrategy, DocumentDataModel, DEFAULT_EMPTY_DOCUMENT_VALUE, BooleanNumber, Plugin } from "@univerjs/core";
 import { Button, DatePanel, RectPopup, Scrollbar, FormLayout, RadioGroup, Radio, Checkbox, Input, Select, DraggableList } from "@univerjs/design";
 import { DeviceInputEventType, IRenderManagerService, fixLineWidthByScale, Transform, Checkbox as Checkbox$1, FontCache, Shape, Rect, getFontStyleString, getDocsSkeletonPageSize, DocumentViewModel, DocumentSkeleton, Documents } from "@univerjs/engine-render";
-import { SetRangeValuesCommand, SheetsSelectionsService, getSheetCommandTarget, WorkbookEditablePermission, RangeProtectionPermissionEditPoint, WorksheetEditPermission, checkRangesEditablePermission, WorksheetSetCellStylePermission, SheetInterceptorService, INTERCEPTOR_POINT, InterceptCellContentPriority } from "@univerjs/sheets";
+import { SheetInterceptorService, AFTER_CELL_EDIT_ASYNC, SetRangeValuesCommand, SheetsSelectionsService, getSheetCommandTarget, WorkbookEditablePermission, RangeProtectionPermissionEditPoint, WorksheetEditPermission, checkRangesEditablePermission, WorksheetSetCellStylePermission, INTERCEPTOR_POINT, InterceptCellContentPriority } from "@univerjs/sheets";
 import { SheetDataValidationModel, getCellValueOrigin, getDataValidationCellValue, deserializeListOptions, serializeListOptions, UpdateSheetDataValidationRangeCommand, UpdateSheetDataValidationSettingCommand, RemoveSheetDataValidationCommand, UpdateSheetDataValidationOptionsCommand, createDefaultNewRule, AddSheetDataValidationCommand, RemoveSheetAllDataValidationCommand, DATA_VALIDATION_PLUGIN_NAME, getDataValidationDiffMutations, DataValidationCacheService, DataValidationFormulaController, DataValidationFormulaService, getFormulaResult, isLegalFormulaResult, transformCheckboxValue, CHECKBOX_FORMULA_1, CHECKBOX_FORMULA_2 } from "@univerjs/sheets-data-validation";
 import { getPatternType } from "@univerjs/sheets-numfmt";
-import { IEditorBridgeService, SetCellEditVisibleOperation, SheetCanvasPopManagerService, SheetPermissionInterceptorBaseController, IMarkSelectionService, HoverManagerService, CellAlertManagerService, CellAlertType, IAutoFillService, APPLY_TYPE, virtualizeDiscreteRanges, getAutoFillRepeatRange, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, getRepeatRange, ISheetClipboardService, getCurrentRangeDisable$, AutoHeightController, SheetSkeletonManagerService } from "@univerjs/sheets-ui";
+import { SetCellEditVisibleOperation, SheetCanvasPopManagerService, IEditorBridgeService, SheetPermissionInterceptorBaseController, IMarkSelectionService, HoverManagerService, CellAlertManagerService, CellAlertType, IAutoFillService, APPLY_TYPE, virtualizeDiscreteRanges, getAutoFillRepeatRange, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, getRepeatRange, ISheetClipboardService, getCurrentRangeDisable$, AutoHeightController, SheetSkeletonManagerService } from "@univerjs/sheets-ui";
 import { IDialogService, KeyCode, ISidebarService, useObservable, ComponentManager, IZenZoneService, useEvent, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, IMenuManagerService } from "@univerjs/ui";
 import { DataValidatorRegistryService, DataValidationModel, DataValidatorRegistryScope, TWO_FORMULA_OPERATOR_COUNT, getRuleOptions, getRuleSetting } from "@univerjs/data-validation";
 import { RichTextEditingMutation } from "@univerjs/docs";
@@ -406,12 +406,12 @@ var __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPrope
   return kind && result && __defProp$f(target, key, result), result;
 }, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f"), _a;
 let DataValidationRejectInputController = (_a = class extends Disposable {
-  constructor(_editorBridgeService, _dataValidationModel, _dataValidatorRegistryService, _dialogService, _localeService) {
-    super(), this._editorBridgeService = _editorBridgeService, this._dataValidationModel = _dataValidationModel, this._dataValidatorRegistryService = _dataValidatorRegistryService, this._dialogService = _dialogService, this._localeService = _localeService, this._initEditorBridgeInterceptor();
+  constructor(_sheetInterceptorService, _dataValidationModel, _dataValidatorRegistryService, _dialogService, _localeService) {
+    super(), this._sheetInterceptorService = _sheetInterceptorService, this._dataValidationModel = _dataValidationModel, this._dataValidatorRegistryService = _dataValidatorRegistryService, this._dialogService = _dialogService, this._localeService = _localeService, this._initEditorBridgeInterceptor();
   }
   _initEditorBridgeInterceptor() {
-    this._editorBridgeService.interceptor.intercept(
-      this._editorBridgeService.interceptor.getInterceptPoints().AFTER_CELL_EDIT_ASYNC,
+    this._sheetInterceptorService.writeCellInterceptor.intercept(
+      AFTER_CELL_EDIT_ASYNC,
       {
         handler: /* @__PURE__ */ __name(async (cellPromise, context, next) => {
           var _a18;
@@ -489,7 +489,7 @@ let DataValidationRejectInputController = (_a = class extends Disposable {
   }
 }, __name(_a, "DataValidationRejectInputController"), _a);
 DataValidationRejectInputController = __decorateClass$f([
-  __decorateParam$f(0, IEditorBridgeService),
+  __decorateParam$f(0, Inject(SheetInterceptorService)),
   __decorateParam$f(1, Inject(SheetDataValidationModel)),
   __decorateParam$f(2, Inject(DataValidatorRegistryService)),
   __decorateParam$f(3, IDialogService),
@@ -1969,6 +1969,32 @@ let SheetsDataValidationRenderController = (_a8 = class extends RxDisposable {
                 };
                 return (_f2 = (_e2 = validator == null ? void 0 : validator.canvasRender) == null ? void 0 : _e2.calcCellAutoHeight) == null ? void 0 : _f2.call(_e2, info);
               }, "interceptorAutoHeight"),
+              interceptorAutoWidth: /* @__PURE__ */ __name(() => {
+                var _a19, _b2, _c2, _d2, _e2, _f2;
+                const skeleton = (_b2 = (_a19 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId)) == null ? void 0 : _b2.skeleton;
+                if (!skeleton)
+                  return;
+                const mergeCell = skeleton.worksheet.getMergedCell(row, col), info = {
+                  data: {
+                    ...cell,
+                    dataValidation: {
+                      ruleId,
+                      validStatus,
+                      rule,
+                      validator
+                    }
+                  },
+                  style: skeleton.getsStyles().getStyleByCell(cell),
+                  primaryWithCoord: skeleton.getCellByIndex((_c2 = mergeCell == null ? void 0 : mergeCell.startRow) != null ? _c2 : row, (_d2 = mergeCell == null ? void 0 : mergeCell.startColumn) != null ? _d2 : col),
+                  unitId,
+                  subUnitId,
+                  row,
+                  col,
+                  workbook,
+                  worksheet
+                };
+                return (_f2 = (_e2 = validator == null ? void 0 : validator.canvasRender) == null ? void 0 : _e2.calcCellAutoWidth) == null ? void 0 : _f2.call(_e2, info);
+              }, "interceptorAutoWidth"),
               coverable: ((_f = cell == null ? void 0 : cell.coverable) != null ? _f : !0) && !(rule.type === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE)
             });
           }, "handler")
@@ -2626,6 +2652,11 @@ let CheckboxRender = (_a11 = class {
     const { style } = info;
     return ((_a18 = style == null ? void 0 : style.fs) != null ? _a18 : 10) * 1.6;
   }
+  calcCellAutoWidth(info) {
+    var _a18;
+    const { style } = info;
+    return ((_a18 = style == null ? void 0 : style.fs) != null ? _a18 : 10) * 1.6;
+  }
   async _parseFormula(rule, unitId, subUnitId) {
     var _a18, _b, _c;
     const { formula1 = CHECKBOX_FORMULA_1, formula2 = CHECKBOX_FORMULA_2 } = rule, results = await this._formulaService.getRuleFormulaResult(unitId, subUnitId, rule.uid), formulaResult1 = getFormulaResult((_a18 = results == null ? void 0 : results[0]) == null ? void 0 : _a18.result), formulaResult2 = getFormulaResult((_b = results == null ? void 0 : results[1]) == null ? void 0 : _b.result), isFormulaValid = isLegalFormulaResult(String(formulaResult1)) && isLegalFormulaResult(String(formulaResult2));
@@ -2766,7 +2797,7 @@ function getDropdownItemSize(text, fontStyle) {
 }
 __name(getDropdownItemSize, "getDropdownItemSize");
 function layoutDropdowns(items, fontStyle, cellWidth, cellHeight) {
-  const contentWidth = cellWidth - ICON_PLACE$1 - CELL_PADDING_H, contentHeight = cellHeight - CELL_PADDING_V * 2, textLayout = items.map((item) => ({
+  const cellPaddingH = ICON_PLACE$1 + CELL_PADDING_H * 2, widthAvailableForContent = cellWidth - cellPaddingH, heightAvailableForContent = cellHeight - CELL_PADDING_V * 2, textLayout = items.map((item) => ({
     layout: getDropdownItemSize(item, fontStyle),
     text: item
   }));
@@ -2774,7 +2805,7 @@ function layoutDropdowns(items, fontStyle, cellWidth, cellHeight) {
   const lines = [];
   textLayout.forEach((item) => {
     const { layout } = item, { width, height } = layout;
-    !currentLine || currentLine.width + width + MARGIN_H$1 > contentWidth ? (currentLine = {
+    !currentLine || currentLine.width + width + MARGIN_H$1 > widthAvailableForContent ? (currentLine = {
       width,
       height,
       items: [{
@@ -2786,15 +2817,16 @@ function layoutDropdowns(items, fontStyle, cellWidth, cellHeight) {
       left: currentLine.width + MARGIN_H$1
     }), currentLine.width = currentLine.width + width + MARGIN_H$1);
   });
-  let totalHeight = 0;
+  let totalHeight = 0, maxLineWidth = 0;
   return lines.forEach((line, index) => {
-    index === lines.length - 1 ? totalHeight += line.height : totalHeight += line.height + MARGIN_V$1;
+    maxLineWidth = Math.max(maxLineWidth, line.width), index === lines.length - 1 ? totalHeight += line.height : totalHeight += line.height + MARGIN_V$1;
   }), {
     lines,
     totalHeight,
-    contentWidth,
-    contentHeight,
-    cellAutoHeight: totalHeight + CELL_PADDING_V * 2
+    contentWidth: widthAvailableForContent,
+    contentHeight: heightAvailableForContent,
+    cellAutoHeight: totalHeight + CELL_PADDING_V * 2,
+    calcAutoWidth: maxLineWidth + cellPaddingH
   };
 }
 __name(layoutDropdowns, "layoutDropdowns");
@@ -2906,6 +2938,19 @@ let DropdownMultipleWidget = (_a13 = class {
     const cellWidth = cellBounding.endX - cellBounding.startX, cellHeight = cellBounding.endY - cellBounding.startY, cellValue = (_a18 = getCellValueOrigin(data)) != null ? _a18 : "", { validator: _validator } = validation, items = _validator.parseCellValue(cellValue), fontStyle = getFontStyleString(style != null ? style : void 0);
     return layoutDropdowns(items, fontStyle, cellWidth, cellHeight).cellAutoHeight;
   }
+  calcCellAutoWidth(info) {
+    var _a18;
+    const { primaryWithCoord, style, data } = info, fontRenderExtension = data.fontRenderExtension, { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = fontRenderExtension || {}, _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord, cellBounding = {
+      startX: _cellBounding.startX + leftOffset,
+      endX: _cellBounding.endX - rightOffset,
+      startY: _cellBounding.startY + topOffset,
+      endY: _cellBounding.endY - downOffset
+    }, validation = data.dataValidation;
+    if (!validation)
+      return;
+    const cellWidth = cellBounding.endX - cellBounding.startX, cellHeight = cellBounding.endY - cellBounding.startY, cellValue = (_a18 = getCellValueOrigin(data)) != null ? _a18 : "", { validator: _validator } = validation, items = _validator.parseCellValue(cellValue), fontStyle = getFontStyleString(style != null ? style : void 0);
+    return layoutDropdowns(items, fontStyle, cellWidth, cellHeight).calcAutoWidth;
+  }
   isHit(position, info) {
     const { primaryWithCoord } = info, cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord, { endX } = cellBounding, { x } = position;
     return x >= endX - ICON_PLACE$1 && x <= endX;
@@ -2940,7 +2985,7 @@ var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPrope
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$3(target, key, result), result;
 }, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3");
-const PADDING_H = 4, ICON_SIZE = 4, ICON_PLACE = 14, MARGIN_H = 6, MARGIN_V = 4, DROP_DOWN_ICON_COLOR = "#565656", downPath = new Path2D("M3.32201 4.84556C3.14417 5.05148 2.85583 5.05148 2.67799 4.84556L0.134292 1.90016C-0.152586 1.56798 0.0505937 1 0.456301 1L5.5437 1C5.94941 1 6.15259 1.56798 5.86571 1.90016L3.32201 4.84556Z");
+const PADDING_H = 4, ICON_SIZE = 4, ICON_PLACE = 14, MARGIN_H = 6, MARGIN_V = 4, RADIUS_BG = 8, DROP_DOWN_ICON_COLOR = "#565656", downPath = new Path2D("M3.32201 4.84556C3.14417 5.05148 2.85583 5.05148 2.67799 4.84556L0.134292 1.90016C-0.152586 1.56798 0.0505937 1 0.456301 1L5.5437 1C5.94941 1 6.15259 1.56798 5.86571 1.90016L3.32201 4.84556Z");
 function convertToDocumentData(text, style) {
   const contentLength = text.length;
   return {
@@ -3104,7 +3149,7 @@ let DropdownWidget = (_a14 = class {
         width: rectWidth,
         height: rectHeight,
         fill: (activeItem == null ? void 0 : activeItem.color) || DROP_DOWN_DEFAULT_COLOR,
-        radius: 8
+        radius: RADIUS_BG
       }), ctx.save(), ctx.translateWithPrecision(PADDING_H, 0), ctx.beginPath(), ctx.rect(0, 0, realWidth, fontHeight), ctx.clip(), ctx.translateWithPrecision(paddingLeft, 0), documents.render(ctx), ctx.restore(), ctx.translateWithPrecision(realWidth + PADDING_H + 4, (fontHeight - ICON_SIZE) / 2), ctx.fillStyle = DROP_DOWN_ICON_COLOR, ctx.fill(downPath), ctx.restore(), map.set(key, {
         left: cellBounding.startX + MARGIN_H + skeleton.rowHeaderWidth,
         top: cellBounding.startY + paddingTop + skeleton.columnHeaderHeight,
@@ -3140,6 +3185,33 @@ let DropdownWidget = (_a14 = class {
       return fontHeight + MARGIN_V * 2;
     }
   }
+  calcCellAutoWidth(info) {
+    var _a18;
+    const { primaryWithCoord, style, data } = info, cellRange = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord, fontRenderExtension = data.fontRenderExtension, { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = fontRenderExtension || {}, rule = (_a18 = data.dataValidation) == null ? void 0 : _a18.rule;
+    if (!rule || rule.renderMode === DataValidationRenderMode.TEXT) return;
+    const cellBounding = {
+      startX: cellRange.startX + leftOffset,
+      endX: cellRange.endX - rightOffset,
+      startY: cellRange.startY + topOffset,
+      endY: cellRange.endY - downOffset
+    }, cellWidth = cellBounding.endX - cellBounding.startX, value = getCellValueOrigin(data), valueStr = `${value != null ? value : ""}`;
+    let { tb, pd } = style || {};
+    const { l: l2 = DEFAULT_STYLES.pd.l, r: r2 = DEFAULT_STYLES.pd.r } = pd != null ? pd : {};
+    tb = tb != null ? tb : WrapStrategy.WRAP;
+    let paddingAll = MARGIN_H * 2 + ICON_PLACE;
+    switch (rule.renderMode) {
+      case DataValidationRenderMode.ARROW:
+        paddingAll = ICON_PLACE + MARGIN_H * 2 + r2 + l2;
+        break;
+      case DataValidationRenderMode.CUSTOM:
+        paddingAll = ICON_PLACE + MARGIN_H * 2 + PADDING_H * 2 + r2 + l2 + RADIUS_BG / 2 + 1;
+        break;
+      default:
+        paddingAll = ICON_PLACE + MARGIN_H * 2 + PADDING_H * 2 + r2 + l2 + RADIUS_BG / 2 + 1;
+    }
+    const widthForTextLayout = cellWidth - paddingAll, { documentSkeleton, docModel } = createDocuments(valueStr, this._localeService, style);
+    return tb === WrapStrategy.WRAP && docModel.updateDocumentDataPageSize(Math.max(widthForTextLayout, 1)), documentSkeleton.calculate(), documentSkeleton.getActualSize(), getDocsSkeletonPageSize(documentSkeleton).width + paddingAll;
+  }
   isHit(position, info) {
     const { data, subUnitId, row, col } = info, dropdownInfo = this._ensureMap(subUnitId).get(this._generateKey(row, col)), validation = data.dataValidation;
     if (!validation || !dropdownInfo || validation.rule.renderMode === DataValidationRenderMode.TEXT)

package/lib/types/controllers/dv-reject-input.controller.d.ts

@@ -1,15 +1,15 @@
 import { Disposable, LocaleService } from '@univerjs/core';
 import { DataValidatorRegistryService } from '@univerjs/data-validation';
+import { SheetInterceptorService } from '@univerjs/sheets';
 import { SheetDataValidationModel } from '@univerjs/sheets-data-validation';
-import { IEditorBridgeService } from '@univerjs/sheets-ui';
 import { IDialogService } from '@univerjs/ui';
 export declare class DataValidationRejectInputController extends Disposable {
-    private readonly _editorBridgeService;
+    private readonly _sheetInterceptorService;
     private readonly _dataValidationModel;
     private readonly _dataValidatorRegistryService;
     private readonly _dialogService;
     private readonly _localeService;
-    constructor(_editorBridgeService: IEditorBridgeService, _dataValidationModel: SheetDataValidationModel, _dataValidatorRegistryService: DataValidatorRegistryService, _dialogService: IDialogService, _localeService: LocaleService);
+    constructor(_sheetInterceptorService: SheetInterceptorService, _dataValidationModel: SheetDataValidationModel, _dataValidatorRegistryService: DataValidatorRegistryService, _dialogService: IDialogService, _localeService: LocaleService);
     private _initEditorBridgeInterceptor;
     showReject(title: string): void;
 }

package/lib/types/views/widgets/checkbox-widget.d.ts

@@ -9,6 +9,7 @@ export declare class CheckboxRender implements IBaseDataValidationWidget {
     private _calc;
     constructor(_commandService: ICommandService, _formulaService: DataValidationFormulaService, _themeService: ThemeService);
     calcCellAutoHeight(info: ICellRenderContext): number | undefined;
+    calcCellAutoWidth(info: ICellRenderContext): number | undefined;
     private _parseFormula;
     drawWith(ctx: UniverRenderingContext2D, info: ICellRenderContext): void;
     isHit(evt: {

package/lib/types/views/widgets/dropdown-multiple-widget.d.ts

@@ -11,6 +11,7 @@ export declare class DropdownMultipleWidget implements IBaseDataValidationWidget
     private _drawDownIcon;
     drawWith(ctx: UniverRenderingContext2D, info: ICellRenderContext, skeleton: SpreadsheetSkeleton, spreadsheets: Spreadsheet): void;
     calcCellAutoHeight(info: ICellRenderContext): number | undefined;
+    calcCellAutoWidth(info: ICellRenderContext): number | undefined;
     isHit(position: {
         x: number;
         y: number;

package/lib/types/views/widgets/dropdown-widget.d.ts

@@ -20,6 +20,7 @@ export declare class DropdownWidget implements IBaseDataValidationWidget {
     private _drawDownIcon;
     drawWith(ctx: UniverRenderingContext2D, info: ICellRenderContext, skeleton: SpreadsheetSkeleton): void;
     calcCellAutoHeight(info: ICellRenderContext): number | undefined;
+    calcCellAutoWidth(info: ICellRenderContext): number | undefined;
     isHit(position: {
         x: number;
         y: number;

package/lib/types/views/widgets/shape/layout.d.ts

@@ -34,4 +34,5 @@ export declare function layoutDropdowns(items: string[], fontStyle: IDocumentSke
     contentWidth: number;
     contentHeight: number;
     cellAutoHeight: number;
+    calcAutoWidth: number;
 };