feat:add image display contextmenu

src/editor/core/command/Command.ts

@@ -1,4 +1,4 @@
-import { IElement } from '../..'
+import { IElement, ImageDisplay } from '../..'
 import { EditorMode, PageMode } from '../../dataset/enum/Editor'
 import { RowFlex } from '../../dataset/enum/Row'
 import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw'
@@ -59,6 +59,7 @@ export class Command {
   private static print: CommandAdapt['print']
   private static replaceImageElement: CommandAdapt['replaceImageElement']
   private static saveAsImageElement: CommandAdapt['saveAsImageElement']
+  private static changeImageDisplay: CommandAdapt['changeImageDisplay']
   private static getImage: CommandAdapt['getImage']
   private static getValue: CommandAdapt['getValue']
   private static getWordCount: CommandAdapt['getWordCount']
@@ -122,6 +123,7 @@ export class Command {
     Command.print = adapt.print.bind(adapt)
     Command.replaceImageElement = adapt.replaceImageElement.bind(adapt)
     Command.saveAsImageElement = adapt.saveAsImageElement.bind(adapt)
+    Command.changeImageDisplay = adapt.changeImageDisplay.bind(adapt)
     Command.getImage = adapt.getImage.bind(adapt)
     Command.getValue = adapt.getValue.bind(adapt)
     Command.getWordCount = adapt.getWordCount.bind(adapt)
@@ -342,6 +344,10 @@ export class Command {
     return Command.saveAsImageElement()
   }
 
+  public executeChangeImageDisplay(element: IElement, display: ImageDisplay) {
+    return Command.changeImageDisplay(element, display)
+  }
+
   public getImage(): string[] {
     return Command.getImage()
   }

src/editor/core/command/CommandAdapt.ts

@@ -1,7 +1,7 @@
 import { WRAP, ZERO } from '../../dataset/constant/Common'
 import { EDITOR_ELEMENT_STYLE_ATTR } from '../../dataset/constant/Element'
 import { defaultWatermarkOption } from '../../dataset/constant/Watermark'
-import { ControlComponent } from '../../dataset/enum/Control'
+import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control'
 import { EditorContext, EditorMode, PageMode } from '../../dataset/enum/Editor'
 import { ElementType } from '../../dataset/enum/Element'
 import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
@@ -1355,6 +1355,15 @@ export class CommandAdapt {
     downloadFile(element.value, `${element.id!}.png`)
   }
 
+  public changeImageDisplay(element: IElement, display: ImageDisplay) {
+    if (element.imgDisplay === display) return
+    element.imgDisplay = display
+    this.draw.getPreviewer().clearResizer()
+    this.draw.render({
+      isSetCursor: false
+    })
+  }
+
   public getImage(): string[] {
     return this.draw.getDataURL()
   }

src/editor/core/contextmenu/menus/imageMenus.ts

@@ -1,5 +1,6 @@
+import { ImageDisplay } from '../../../dataset/enum/Control'
 import { ElementType } from '../../../dataset/enum/Element'
-import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { IContextMenuContext, IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
 import { Command } from '../../command/Command'
 
 export const imageMenus: IRegisterContextMenu[] = [
@@ -36,5 +37,28 @@ export const imageMenus: IRegisterContextMenu[] = [
     callback: (command: Command) => {
       command.executeSaveAsImageElement()
     }
+  },
+  {
+    name: '文字环绕',
+    when: (payload) => {
+      return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
+    },
+    childMenus: [
+      {
+        name: '嵌入型',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(context.startElement!, ImageDisplay.BLOCK)
+        }
+      },
+      {
+        name: '上下型环绕',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(context.startElement!, ImageDisplay.INLINE)
+
+        }
+      }
+    ]
   }
 ]

src/editor/core/draw/Draw.ts

@@ -571,9 +571,10 @@ export class Draw {
         const elementWidth = element.width! * scale
         const elementHeight = element.height! * scale
         // 图片超出尺寸后自适应
-        if (curRow.width + elementWidth > innerWidth) {
+        const curRowWidth = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width
+        if (curRowWidth + elementWidth > innerWidth) {
           // 计算剩余大小
-          const surplusWidth = innerWidth - curRow.width
+          const surplusWidth = innerWidth - curRowWidth
           element.width = surplusWidth
           element.height = elementHeight * surplusWidth / elementWidth
           metrics.width = element.width