fix:图片尺寸自适应处理

src/editor/core/command/CommandAdapt.ts

@@ -226,8 +226,8 @@ export class CommandAdapt {
       elementList.splice(curIndex, 0, element)
     } else {
       elementList.splice(curIndex, endIndex - startIndex, element)
-      this.range.setRange(curIndex, curIndex)
     }
+    this.range.setRange(curIndex, curIndex)
     this.draw.render({ curIndex })
   }
 

src/editor/core/draw/Draw.ts

@@ -189,7 +189,15 @@ export class Draw {
         boundingBoxAscent: 0,
         boundingBoxDescent: 0
       }
+      const innerWidth = rightTopPoint[0] - leftTopPoint[0]
       if (element.type === ElementType.IMAGE) {
+        // 图片超出尺寸后自适应
+        if (curRow.width + element.width! > innerWidth) {
+          // 计算剩余大小
+          const surplusWidth = innerWidth - curRow.width
+          element.width = surplusWidth
+          element.height = element.height! * surplusWidth / element.width
+        }
         metrics.width = element.width!
         metrics.boundingBoxAscent = 0
         metrics.boundingBoxDescent = element.height!
@@ -205,7 +213,7 @@ export class Draw {
       const height = ascent + descent
       const rowElement: IRowElement = { ...element, metrics }
       // 超过限定宽度
-      if (curRow.width + metrics.width > rightTopPoint[0] - leftTopPoint[0] || (i !== 0 && element.value === ZERO)) {
+      if (curRow.width + metrics.width > innerWidth || (i !== 0 && element.value === ZERO)) {
         rowList.push({
           width: metrics.width,
           height: this.options.defaultSize,

src/editor/core/draw/particle/ImageParticle.ts

@@ -15,14 +15,16 @@ export class ImageParticle {
   }
 
   render(element: IElement, x: number, y: number) {
+    const width = element.width!
+    const height = element.height!
     if (this.imageCache.has(element.id!)) {
       const img = this.imageCache.get(element.id!)!
-      this.ctx.drawImage(img, x, y, element.width!, element.height!)
+      this.ctx.drawImage(img, x, y, width, height)
     } else {
       const img = new Image()
       img.src = element.value
       img.onload = () => {
-        this.ctx.drawImage(img, x, y, img.width, img.height)
+        this.ctx.drawImage(img, x, y, width, height)
         this.imageCache.set(element.id!, img)
       }
     }