feat: optimization of table operations in form mode #662

src/editor/core/contextmenu/ContextMenu.ts

@@ -181,7 +181,8 @@ export class ContextMenu {
       isInTable: isTable,
       trIndex: trIndex ?? null,
       tdIndex: tdIndex ?? null,
-      tableElement
+      tableElement,
+      options: this.options
     }
   }
 

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

@@ -1,4 +1,5 @@
 import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { EditorMode } from '../../../dataset/enum/Editor'
 import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
 import { Command } from '../../command/Command'
 const {
@@ -13,7 +14,8 @@ export const controlMenus: IRegisterContextMenu[] = [
       return (
         !payload.isReadonly &&
         !payload.editorHasSelection &&
-        !!payload.startElement?.controlId
+        !!payload.startElement?.controlId &&
+        payload.options.mode !== EditorMode.FORM
       )
     },
     callback: (command: Command) => {

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

@@ -1,4 +1,5 @@
 import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { EditorMode } from '../../../dataset/enum/Editor'
 import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
 import {
   TableBorder,
@@ -47,7 +48,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.border',
     icon: 'border-all',
     when: payload => {
-      return !payload.isReadonly && payload.isInTable
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     childMenus: [
       {
@@ -146,7 +151,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.verticalAlign',
     icon: 'vertical-align',
     when: payload => {
-      return !payload.isReadonly && payload.isInTable
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     childMenus: [
       {
@@ -183,7 +192,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.insertRowCol',
     icon: 'insert-row-col',
     when: payload => {
-      return !payload.isReadonly && payload.isInTable
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     childMenus: [
       {
@@ -229,7 +242,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.deleteRowCol',
     icon: 'delete-row-col',
     when: payload => {
-      return !payload.isReadonly && payload.isInTable
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     childMenus: [
       {
@@ -266,7 +283,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.mergeCell',
     icon: 'merge-cell',
     when: payload => {
-      return !payload.isReadonly && payload.isCrossRowCol
+      return (
+        !payload.isReadonly &&
+        payload.isCrossRowCol &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     callback: (command: Command) => {
       command.executeMergeTableCell()
@@ -277,7 +298,11 @@ export const tableMenus: IRegisterContextMenu[] = [
     i18nPath: 'contextmenu.table.mergeCancelCell',
     icon: 'merge-cancel-cell',
     when: payload => {
-      return !payload.isReadonly && payload.isInTable
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
     },
     callback: (command: Command) => {
       command.executeCancelMergeTableCell()

src/editor/core/draw/Draw.ts

@@ -295,6 +295,7 @@ export class Draw {
       this.setEditorData(this.printModeData)
       this.printModeData = null
     }
+    this.clearSideEffect()
     this.range.clearRange()
     this.mode = payload
     this.render({

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

@@ -170,7 +170,7 @@ export class Previewer {
       'mouseup',
       () => {
         // 改变尺寸
-        if (this.curElement) {
+        if (this.curElement && !this.previewerDrawOption.dragDisable) {
           this.curElement.width = this.width
           this.curElement.height = this.height
           this.draw.render({
@@ -192,7 +192,7 @@ export class Previewer {
   }
 
   private _mousemove(evt: MouseEvent) {
-    if (!this.curElement) return
+    if (!this.curElement || this.previewerDrawOption.dragDisable) return
     const { scale } = this.options
     let dx = 0
     let dy = 0

src/editor/core/event/handlers/mousedown.ts

@@ -1,6 +1,8 @@
 import { ImageDisplay } from '../../../dataset/enum/Common'
+import { EditorMode } from '../../../dataset/enum/Editor'
 import { ElementType } from '../../../dataset/enum/Element'
 import { MouseEventButton } from '../../../dataset/enum/Event'
+import { IPreviewerDrawOption } from '../../../interface/Previewer'
 import { deepClone } from '../../../utils'
 import { isMod } from '../../../utils/hotkey'
 import { CheckboxControl } from '../../draw/control/checkbox/CheckboxControl'
@@ -135,15 +137,20 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
   const previewer = draw.getPreviewer()
   previewer.clearResizer()
   if (isDirectHitImage) {
+    const previewerDrawOption: IPreviewerDrawOption = {
+      // 只读或控件外表单模式禁用拖拽
+      dragDisable:
+        isReadonly ||
+        (!curElement.controlId && draw.getMode() === EditorMode.FORM)
+    }
+    if (curElement.type === ElementType.LATEX) {
+      previewerDrawOption.mime = 'svg'
+      previewerDrawOption.srcKey = 'laTexSVG'
+    }
     previewer.drawResizer(
       curElement,
       positionList[curIndex],
-      curElement.type === ElementType.LATEX
-        ? {
-            mime: 'svg',
-            srcKey: 'laTexSVG'
-          }
-        : {}
+      previewerDrawOption
     )
     // 光标事件代理丢失，重新定位
     draw.getCursor().drawCursor({
@@ -162,7 +169,7 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
   // 表格工具组件
   const tableTool = draw.getTableTool()
   tableTool.dispose()
-  if (isTable && !isReadonly) {
+  if (isTable && !isReadonly && draw.getMode() !== EditorMode.FORM) {
     tableTool.render()
   }
   // 超链接

src/editor/interface/Previewer.ts

@@ -11,4 +11,5 @@ export interface IPreviewerCreateResult {
 export interface IPreviewerDrawOption {
   mime?: 'png' | 'jpg' | 'jpeg' | 'svg'
   srcKey?: keyof Pick<IElement, 'value' | 'laTexSVG'>
+  dragDisable?: boolean
 }

src/editor/interface/contextmenu/ContextMenu.ts

@@ -1,5 +1,7 @@
 import { Command } from '../../core/command/Command'
 import { EditorZone } from '../../dataset/enum/Editor'
+import { DeepRequired } from '../Common'
+import { IEditorOption } from '../Editor'
 import { IElement } from '../Element'
 
 export interface IContextMenuContext {
@@ -14,6 +16,7 @@ export interface IContextMenuContext {
   trIndex: number | null
   tdIndex: number | null
   tableElement: IElement | null
+  options: DeepRequired<IEditorOption>
 }
 
 export interface IRegisterContextMenu {