improve: adaptive size when the image is larger than the page width #599

src/editor/core/command/CommandAdapt.ts

@@ -1796,14 +1796,15 @@ export class CommandAdapt {
     if (isDisabled) return
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return
-    const { value, width, height } = payload
+    const { value, width, height, imgDisplay } = payload
     this.insertElementList([
       {
         value,
         width,
         height,
         id: getUUID(),
-        type: ElementType.IMAGE
+        type: ElementType.IMAGE,
+        imgDisplay
       }
     ])
   }
@@ -1995,12 +1996,12 @@ export class CommandAdapt {
   public changeImageDisplay(element: IElement, display: ImageDisplay) {
     if (element.imgDisplay === display) return
     element.imgDisplay = display
+    const { startIndex, endIndex } = this.range.getRange()
     if (
       display === ImageDisplay.FLOAT_TOP ||
       display === ImageDisplay.FLOAT_BOTTOM
     ) {
       const positionList = this.position.getPositionList()
-      const { startIndex } = this.range.getRange()
       const {
         coordinate: { leftTop }
       } = positionList[startIndex]
@@ -2013,7 +2014,8 @@ export class CommandAdapt {
     }
     this.draw.getPreviewer().clearResizer()
     this.draw.render({
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: endIndex
     })
   }
 

src/editor/core/draw/Draw.ts

@@ -1199,21 +1199,13 @@ export class Draw {
         } else {
           const elementWidth = element.width! * scale
           const elementHeight = element.height! * scale
-          // 图片超出尺寸后自适应
-          const curRowWidth =
-            element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width
-          if (curRowWidth + elementWidth > availableWidth) {
-            // 计算剩余大小
-            const surplusWidth = availableWidth - curRowWidth
-            const adaptiveWidth =
-              surplusWidth > 0
-                ? surplusWidth
-                : Math.min(elementWidth, availableWidth)
+          // 图片超出尺寸后自适应（图片大小大于可用宽度时）
+          if (elementWidth > availableWidth) {
             const adaptiveHeight =
-              (elementHeight * adaptiveWidth) / elementWidth
-            element.width = adaptiveWidth / scale
+              (elementHeight * availableWidth) / elementWidth
+            element.width = availableWidth / scale
             element.height = adaptiveHeight / scale
-            metrics.width = adaptiveWidth
+            metrics.width = availableWidth
             metrics.height = adaptiveHeight
             metrics.boundingBoxDescent = adaptiveHeight
           } else {

src/editor/interface/Draw.ts

@@ -22,6 +22,7 @@ export interface IDrawImagePayload {
   width: number
   height: number
   value: string
+  imgDisplay?: ImageDisplay
 }
 
 export interface IDrawRowPayload {