@univerjs/docs-drawing-ui 0.2.6 → 0.2.7

package/lib/es/index.js

@@ -2,14 +2,14 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, LocaleService, RxDisposable, UniverInstanceType, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, IContextService, useDependency, PositionedObjectLayoutType, BooleanNumber, ObjectRelativeFromH, ObjectRelativeFromV, Tools, WrapTextType, Direction, IUndoRedoService, FOCUSING_UNIVER_EDITOR, Disposable, Injector, UndoCommand, RedoCommand, throttle, COLORS, Plugin, DependentOn } from "@univerjs/core";
+import { CommandType, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, LocaleService, RxDisposable, UniverInstanceType, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, IContextService, useDependency, PositionedObjectLayoutType, BooleanNumber, ObjectRelativeFromH, ObjectRelativeFromV, Tools, WrapTextType, Direction, IUndoRedoService, FOCUSING_UNIVER_EDITOR, Disposable, Injector, fromEventSubject, LifecycleService, UndoCommand, RedoCommand, throttle, COLORS, Plugin, DependentOn } from "@univerjs/core";
 import { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
 import { IDrawingManagerService, DRAWING_IMAGE_ALLOW_IMAGE_LIST, ArrangeTypeEnum, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DrawingTypeEnum, getDrawingShapeKeyByDrawingSearch, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, IImageIoService, UniverDrawingPlugin } from "@univerjs/drawing";
 import { IDocDrawingService, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
-import { ITextSelectionRenderManager, IRenderManagerService, DocumentEditArea, Liquid, PageLayoutType, NodePositionConvertToCursor, getOneTextSelectionRange, DocumentSkeletonPageType, Vector2, getAnchorBounding, Rect, getColor, TEXT_RANGE_LAYER_INDEX } from "@univerjs/engine-render";
-import { takeUntil, BehaviorSubject } from "rxjs";
+import { ITextSelectionRenderManager, IRenderManagerService, DocumentEditArea, Liquid, TRANSFORM_CHANGE_OBSERVABLE_TYPE, PageLayoutType, NodePositionConvertToCursor, getOneTextSelectionRange, DocumentSkeletonPageType, Vector2, getAnchorBounding, Rect, getColor, TEXT_RANGE_LAYER_INDEX } from "@univerjs/engine-render";
+import { takeUntil, Observable, BehaviorSubject, filter, debounceTime, first } from "rxjs";
 import { DocCanvasPopManagerService, docDrawingPositionToTransform } from "@univerjs/docs-ui";
-import { RichTextEditingMutation, getRichTextEditPath, DocSkeletonManagerService, TextSelectionManagerService, getRetainAndDeleteFromReplace, SetDocZoomRatioOperation, getDocObject } from "@univerjs/docs";
+import { RichTextEditingMutation, getRichTextEditPath, TextSelectionManagerService, DocSkeletonManagerService, getRetainAndDeleteFromReplace, SetDocZoomRatioOperation, getDocObject } from "@univerjs/docs";
 import { ISidebarService, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, ComponentManager, IMenuService, IShortcutService, IMessageService, IEditorService } from "@univerjs/ui";
 import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
 import clsx from "clsx";
@@ -307,7 +307,30 @@ const InsertDocImageOperation = {
       multiple: !0
     }
   ));
-}, "UploadFileMenu"), COMPONENT_DOC_UPLOAD_FILE_MENU = "COMPONENT_DOC_UPLOAD_FILE_MENU", ImageUploadIcon = "addition-and-subtraction-single", IMAGE_MENU_ID = "doc.menu.image", IMAGE_MENU_UPLOAD_FLOAT_ID = "doc.menu.image.upload.float";
+}, "UploadFileMenu"), COMPONENT_DOC_UPLOAD_FILE_MENU = "COMPONENT_DOC_UPLOAD_FILE_MENU", ImageUploadIcon = "addition-and-subtraction-single", IMAGE_MENU_ID = "doc.menu.image", IMAGE_MENU_UPLOAD_FLOAT_ID = "doc.menu.image.upload.float", getDisableWhenSelectionInTableObservable = /* @__PURE__ */ __name((accessor) => {
+  const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
+  return new Observable((subscriber) => {
+    const observable = textSelectionManagerService.textSelection$.subscribe(() => {
+      var _a8;
+      const activeRange = textSelectionManagerService.getActiveTextRangeWithStyle();
+      if (activeRange) {
+        const { segmentId, startOffset, endOffset } = activeRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), tables = (_a8 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a8.tables;
+        if (tables && tables.length && tables.some((table) => {
+          const { startIndex, endIndex } = table;
+          return startOffset >= startIndex && startOffset <= endIndex || endOffset >= startIndex && endOffset <= endIndex;
+        })) {
+          subscriber.next(!0);
+          return;
+        }
+      } else {
+        subscriber.next(!0);
+        return;
+      }
+      subscriber.next(!1);
+    });
+    return () => observable.unsubscribe();
+  });
+}, "getDisableWhenSelectionInTableObservable");
 function ImageMenuFactory(accessor) {
   return {
     id: IMAGE_MENU_ID,
@@ -316,6 +339,7 @@ function ImageMenuFactory(accessor) {
     group: MenuGroup.TOOLBAR_LAYOUT,
     icon: ImageUploadIcon,
     tooltip: "docImage.title",
+    disabled$: getDisableWhenSelectionInTableObservable(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
@@ -653,7 +677,10 @@ const UpdateDocDrawingWrappingStyleCommand = {
     const transformer = scene.getTransformerByCreate(), commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
     if (documentDataModel == null)
       return !1;
-    const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage } = params, rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
+    const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
+    if (needRefreshDrawings)
+      return docRefreshDrawingsService.refreshDrawings(skeleton), transformer.refreshControls(), !0;
+    const rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
       newSegmentId,
       segmentId,
       segmentPage,
@@ -1252,7 +1279,7 @@ const UpdateDocDrawingWrappingStyleCommand = {
     var _a8, _b;
     if (params == null)
       return !1;
-    const commandService = accessor.get(ICommandService), textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), activeTextRange = textSelectionManagerService.getActiveRange(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    const commandService = accessor.get(ICommandService), textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), activeTextRange = textSelectionManagerService.getActiveTextRangeWithStyle(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
     if (activeTextRange == null || documentDataModel == null)
       return !1;
     const unitId = documentDataModel.getUnitId(), { drawings } = params, { collapsed, startOffset, segmentId } = activeTextRange, body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
@@ -1660,13 +1687,13 @@ var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPrope
   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"), _a4;
 let DocDrawingTransformUpdateController = (_a4 = class extends Disposable {
-  constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService) {
+  constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
     super();
     __publicField(this, "_liquid", new Liquid());
-    this._context = _context, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._editorService = _editorService, this._drawingManagerService = _drawingManagerService, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._initialize(), this._commandExecutedListener();
+    this._context = _context, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._editorService = _editorService, this._drawingManagerService = _drawingManagerService, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._univerInstanceService = _univerInstanceService, this._lifecycleService = _lifecycleService, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
-    this._initialRenderRefresh();
+    this._initialRenderRefresh(), this._drawingInitializeListener(), this._initResize();
   }
   _initialRenderRefresh() {
     this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
@@ -1695,6 +1722,18 @@ let DocDrawingTransformUpdateController = (_a4 = class extends Disposable {
       })
     );
   }
+  _initResize() {
+    this.disposeWithMe(
+      fromEventSubject(this._context.engine.onTransformChange$).pipe(
+        filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize),
+        debounceTime(16)
+      ).subscribe(() => {
+        var _a8;
+        const skeleton = this._docSkeletonManagerService.getSkeleton(), { scene } = this._context;
+        (_a8 = scene.getTransformer()) == null || _a8.refreshControls(), this._refreshDrawing(skeleton);
+      })
+    );
+  }
   _refreshDrawing(skeleton) {
     var _a8, _b;
     const skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData(), { mainComponent, unitId } = this._context, documentComponent = mainComponent;
@@ -1773,13 +1812,25 @@ let DocDrawingTransformUpdateController = (_a4 = class extends Disposable {
       marginLeft
     });
   }
+  _drawingInitializeListener() {
+    this._lifecycleService.lifecycle$.pipe(filter((stage) => stage === LifecycleStages.Steady), first()).subscribe((stage) => {
+      var _a8;
+      const unitId = (_a8 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a8.getUnitId();
+      if (!unitId)
+        return;
+      const skeleton = this._docSkeletonManagerService.getSkeleton();
+      skeleton != null && (this._refreshDrawing(skeleton), this._drawingManagerService.initializeNotification(unitId));
+    });
+  }
 }, __name(_a4, "DocDrawingTransformUpdateController"), _a4);
 DocDrawingTransformUpdateController = __decorateClass$3([
   __decorateParam$3(1, Inject(DocSkeletonManagerService)),
   __decorateParam$3(2, ICommandService),
   __decorateParam$3(3, IEditorService),
   __decorateParam$3(4, IDrawingManagerService),
-  __decorateParam$3(5, Inject(DocRefreshDrawingsService))
+  __decorateParam$3(5, Inject(DocRefreshDrawingsService)),
+  __decorateParam$3(6, IUniverInstanceService),
+  __decorateParam$3(7, Inject(LifecycleService))
 ], DocDrawingTransformUpdateController);
 var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -1909,6 +1960,11 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
   return kind && result && __defProp$1(target, key, result), result;
 }, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
 const INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
+function isInTableCell(nodePosition) {
+  const { path } = nodePosition;
+  return path.some((p) => p === "cells");
+}
+__name(isInTableCell, "isInTableCell");
 var _a6;
 let DocDrawingTransformerController = (_a6 = class extends Disposable {
   constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService, _textSelectionRenderManager) {
@@ -2102,7 +2158,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     if (glyphAnchor == null)
       return;
     const nodePosition = skeleton == null ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex), docObject = this._getDocObject();
-    if (nodePosition == null || skeleton == null || docObject == null)
+    if (nodePosition == null || skeleton == null || docObject == null || isInTableCell(nodePosition))
       return;
     const positionWithIsBack = {
       ...nodePosition,
@@ -2214,7 +2270,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     if (glyphAnchor == null)
       return;
     const nodePosition = skeleton == null ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage), docObject = this._getDocObject();
-    if (nodePosition == null || skeleton == null || docObject == null)
+    if (nodePosition == null || skeleton == null || docObject == null || isInTableCell(nodePosition))
       return;
     const positionWithIsBack = {
       ...nodePosition,
@@ -2248,15 +2304,15 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
   // Update inline drawing when use transformer to move it.
   _moveInlineDrawing(drawing, offsetX, offsetY) {
     const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY), { offset, segmentId, segmentPage } = anchor != null ? anchor : {};
-    if (offset != null)
-      return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
-        unitId: drawing.unitId,
-        subUnitId: drawing.unitId,
-        drawing,
-        offset,
-        segmentId,
-        segmentPage
-      });
+    return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
+      unitId: drawing.unitId,
+      subUnitId: drawing.unitId,
+      drawing,
+      offset,
+      segmentId,
+      segmentPage,
+      needRefreshDrawings: offset == null
+    });
   }
   // Limit the drawing to the page area, mainly in the vertical direction,
   // and the upper and lower limits cannot exceed the page margin area.
@@ -2422,10 +2478,12 @@ UniverDocsDrawingUIPlugin = __decorateClass([
   __decorateParam(2, IRenderManagerService)
 ], UniverDocsDrawingUIPlugin);
 export {
+  COMPONENT_DOC_UPLOAD_FILE_MENU,
   ClearDocDrawingTransformerOperation,
   DeleteDocDrawingsCommand,
   EditDocDrawingOperation,
   GroupDocDrawingCommand,
+  IMAGE_MENU_ID,
   InsertDocDrawingCommand,
   InsertDocImageOperation,
   MoveDocDrawingsCommand,

package/lib/types/commands/commands/update-doc-drawing.command.d.ts

@@ -40,6 +40,7 @@ export interface IMoveInlineDrawingParams {
     offset: number;
     segmentId: string;
     segmentPage: number;
+    needRefreshDrawings?: boolean;
 }
 /**
  * The command to move inline drawing.

package/lib/types/controllers/render-controllers/doc-drawing-transform-update.controller.d.ts

@@ -1,4 +1,4 @@
-import { DocumentDataModel, Disposable, ICommandService } from '@univerjs/core';
+import { DocumentDataModel, Disposable, ICommandService, IUniverInstanceService, LifecycleService } from '@univerjs/core';
 import { DocSkeletonManagerService } from '@univerjs/docs';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
@@ -12,12 +12,16 @@ export declare class DocDrawingTransformUpdateController extends Disposable impl
     private readonly _editorService;
     private readonly _drawingManagerService;
     private readonly _docRefreshDrawingsService;
+    private _univerInstanceService;
+    private _lifecycleService;
     private _liquid;
-    constructor(_context: IRenderContext<DocumentDataModel>, _docSkeletonManagerService: DocSkeletonManagerService, _commandService: ICommandService, _editorService: IEditorService, _drawingManagerService: IDrawingManagerService, _docRefreshDrawingsService: DocRefreshDrawingsService);
+    constructor(_context: IRenderContext<DocumentDataModel>, _docSkeletonManagerService: DocSkeletonManagerService, _commandService: ICommandService, _editorService: IEditorService, _drawingManagerService: IDrawingManagerService, _docRefreshDrawingsService: DocRefreshDrawingsService, _univerInstanceService: IUniverInstanceService, _lifecycleService: LifecycleService);
     private _initialize;
     private _initialRenderRefresh;
     private _commandExecutedListener;
+    private _initResize;
     private _refreshDrawing;
     private _handleMultiDrawingsTransform;
     private _calculateDrawingPosition;
+    private _drawingInitializeListener;
 }

package/lib/types/index.d.ts

@@ -25,3 +25,5 @@ export { ClearDocDrawingTransformerOperation } from './commands/operations/clear
 export { EditDocDrawingOperation } from './commands/operations/edit-doc-drawing.operation';
 export { InsertDocImageOperation } from './commands/operations/insert-image.operation';
 export { SidebarDocDrawingOperation } from './commands/operations/open-drawing-panel.operation';
+export { IMAGE_MENU_ID } from './views/menu/image.menu';
+export { COMPONENT_DOC_UPLOAD_FILE_MENU } from './views/upload-component/component-name';

package/lib/types/views/menu/image.menu.d.ts

@@ -2,5 +2,6 @@ import { IMenuItem } from '@univerjs/ui';
 import { IAccessor } from '@univerjs/core';
 
 export declare const ImageUploadIcon = "addition-and-subtraction-single";
+export declare const IMAGE_MENU_ID = "doc.menu.image";
 export declare function ImageMenuFactory(accessor: IAccessor): IMenuItem;
 export declare function UploadFloatImageMenuFactory(_accessor: IAccessor): IMenuItem;