feat:image particle display mode

src/editor/core/draw/Draw.ts

@@ -40,7 +40,7 @@ import { Control } from './control/Control'
 import { zipElementList } from '../../utils/element'
 import { CheckboxParticle } from './particle/CheckboxParticle'
 import { DeepRequired } from '../../interface/Common'
-import { ControlComponent } from '../../dataset/enum/Control'
+import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control'
 import { formatElementList } from '../../utils/element'
 import { WorkerManager } from '../worker/WorkerManager'
 import { Previewer } from './particle/previewer/Previewer'
@@ -733,7 +733,9 @@ export class Draw {
       // 超过限定宽度
       const preElement = elementList[i - 1]
       if (
-        (preElement && preElement.type === ElementType.TABLE)
+        preElement?.type === ElementType.TABLE
+        || preElement?.imgDisplay === ImageDisplay.INLINE
+        || element.imgDisplay === ImageDisplay.INLINE
         || curRow.width + metrics.width > innerWidth
         || (i !== 0 && element.value === ZERO)
       ) {
@@ -793,9 +795,11 @@ export class Draw {
       for (let j = 0; j < curRow.elementList.length; j++) {
         const element = curRow.elementList[j]
         const metrics = element.metrics
-        const offsetY = element.type === ElementType.IMAGE || element.type === ElementType.LATEX
+        const offsetY =
-          ? curRow.ascent - metrics.height
+          (element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE)
-          : curRow.ascent
+            || element.type === ElementType.LATEX
+            ? curRow.ascent - metrics.height
+            : curRow.ascent
         const positionItem: IElementPosition = {
           pageNo,
           index,

src/editor/core/draw/particle/previewer/Previewer.ts

@@ -293,7 +293,7 @@ export class Previewer {
   public drawResizer(element: IElement, position: IElementPosition, options: IPreviewerDrawOption = {}) {
     this.previewerDrawOption = options
     const { scale } = this.options
-    const { coordinate: { leftTop: [left, top] } } = position
+    const { coordinate: { leftTop: [left, top] }, ascent } = position
     const elementWidth = element.width! * scale
     const elementHeight = element.height! * scale
     const height = this.draw.getHeight()
@@ -302,7 +302,7 @@ export class Previewer {
     const preY = this.draw.getPageNo() * (height + pageGap)
     // 边框
     this.resizerSelection.style.left = `${left}px`
-    this.resizerSelection.style.top = `${top + preY}px`
+    this.resizerSelection.style.top = `${top + preY + ascent}px`
     this.resizerSelection.style.width = `${elementWidth}px`
     this.resizerSelection.style.height = `${elementHeight}px`
     // handle

src/editor/dataset/enum/Control.ts

@@ -10,4 +10,9 @@ export enum ControlComponent {
   PLACEHOLDER = 'placeholder',
   VALUE = 'value',
   CHECKBOX = 'checkbox'
+}
+
+export enum ImageDisplay {
+  INLINE = 'inline',
+  BLOCK = 'block'
 }

src/editor/index.ts

@@ -17,7 +17,7 @@ import { IHeader } from './interface/Header'
 import { IWatermark } from './interface/Watermark'
 import { defaultHeaderOption } from './dataset/constant/Header'
 import { defaultWatermarkOption } from './dataset/constant/Watermark'
-import { ControlType } from './dataset/enum/Control'
+import { ControlType, ImageDisplay } from './dataset/enum/Control'
 import { defaultControlOption } from './dataset/constant/Control'
 import { IControlOption } from './interface/Control'
 import { ICheckboxOption } from './interface/Checkbox'
@@ -115,7 +115,8 @@ export {
   ControlType,
   EditorComponent,
   EDITOR_COMPONENT,
-  PageMode
+  PageMode,
+  ImageDisplay
 }
 
 // 对外类型

src/editor/interface/Element.ts

@@ -1,4 +1,4 @@
-import { ControlComponent } from '../dataset/enum/Control'
+import { ControlComponent, ImageDisplay } from '../dataset/enum/Control'
 import { ElementType } from '../dataset/enum/Element'
 import { RowFlex } from '../dataset/enum/Row'
 import { ICheckbox } from './Checkbox'
@@ -74,6 +74,10 @@ export interface IDateElement {
   dateId?: string;
 }
 
+export interface IImageElement {
+  imgDisplay?: ImageDisplay
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
@@ -84,6 +88,7 @@ export type IElement = IElementBasic
   & ICheckboxElement
   & ILaTexElement
   & IDateElement
+  & IImageElement
 
 export interface IElementMetrics {
   width: number;