From 0020334db9401f026df4254641e57a9259bcddc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Tue, 6 Sep 2022 17:46:47 +0800
Subject: [PATCH] feat:image particle display mode

---
 src/editor/core/draw/Draw.ts                       | 14 +++++++++-----
 .../core/draw/particle/previewer/Previewer.ts      |  4 ++--
 src/editor/dataset/enum/Control.ts                 |  5 +++++
 src/editor/index.ts                                |  5 +++--
 src/editor/interface/Element.ts                    |  7 ++++++-
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
index b93a62c..ae48f33 100644
--- a/src/editor/core/draw/Draw.ts
+++ b/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
-          ? curRow.ascent - metrics.height
-          : curRow.ascent
+        const offsetY =
+          (element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE)
+            || element.type === ElementType.LATEX
+            ? curRow.ascent - metrics.height
+            : curRow.ascent
         const positionItem: IElementPosition = {
           pageNo,
           index,
diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts
index ed45db1..6af0cd8 100644
--- a/src/editor/core/draw/particle/previewer/Previewer.ts
+++ b/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
diff --git a/src/editor/dataset/enum/Control.ts b/src/editor/dataset/enum/Control.ts
index c40a8d4..fcbbbce 100644
--- a/src/editor/dataset/enum/Control.ts
+++ b/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'
 }
\ No newline at end of file
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 31a569e..9d22e92 100644
--- a/src/editor/index.ts
+++ b/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
 }
 
 // 对外类型
diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts
index 8279961..66c34ff 100644
--- a/src/editor/interface/Element.ts
+++ b/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;