feat:add replace image contextmenu

src/editor/assets/css/index.css

@@ -378,6 +378,10 @@
   background-image: url(../../assets/images/image.svg);
 }
 
+.contextmenu-image-change {
+  background-image: url(../../assets/images/image-change.svg);
+}
+
 .contextmenu-insert-row-col {
   background-image: url(../../assets/images/insert-row-col.svg);
 }

src/editor/assets/images/image-change.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 4)" fill="#3D4757"><circle fill-rule="nonzero" cx="3" cy="1" r="1"/><path d="M7.473 8.223L3.47 4.107 0 7.667v-1.5C1.715 4.6 2.707 3.664 2.975 3.358c.402-.457.651-.39 1.042 0L7.473 7 9.96 4.349c.414-.462.62-.462 1.011-.071L13 7.06v1.5l-2.51-3.41-3.017 3.072z"/></g><path d="M6 1.5H1.5v12h13v-4V13a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V2a.5.5 0 01.5-.5h4zm8.5 8V6l-.5.5h1l-.5-.5v3.5zM6 1.5h4L9.5 1v1l.5-.5H6z" stroke="#3D4757"/><path d="M13.085 1.316l-3.814 4a1 1 0 001.458 1.368l3.815-4a1 1 0 10-1.459-1.368z" fill="#3D4757" fill-rule="nonzero"/></g></svg>

src/editor/core/command/Command.ts

@@ -55,6 +55,7 @@ export class Command {
   private static search: Function
   private static replace: Function
   private static print: Function
+  private static replaceImageElement: Function
   private static saveAsImageElement: Function
   private static getImage: Function
   private static getValue: Function
@@ -112,6 +113,7 @@ export class Command {
     Command.search = adapt.search.bind(adapt)
     Command.replace = adapt.replace.bind(adapt)
     Command.print = adapt.print.bind(adapt)
+    Command.replaceImageElement = adapt.replaceImageElement.bind(adapt)
     Command.saveAsImageElement = adapt.saveAsImageElement.bind(adapt)
     Command.getImage = adapt.getImage.bind(adapt)
     Command.getValue = adapt.getValue.bind(adapt)
@@ -311,6 +313,10 @@ export class Command {
     return Command.print()
   }
 
+  public executeReplaceImageElement(payload: string) {
+    return Command.replaceImageElement(payload)
+  }
+
   public executeSaveAsImageElement() {
     return Command.saveAsImageElement()
   }

src/editor/core/command/CommandAdapt.ts

@@ -1238,12 +1238,25 @@ export class CommandAdapt {
     }
   }
 
+  public replaceImageElement(payload: string) {
+    const { startIndex } = this.range.getRange()
+    const elementList = this.draw.getElementList()
+    const element = elementList[startIndex]
+    if (!element || element.type !== ElementType.IMAGE) return
+    // 替换图片
+    element.id = getUUID()
+    element.value = payload
+    this.draw.render({
+      isSetCursor: false
+    })
+  }
+
   public saveAsImageElement() {
     const { startIndex } = this.range.getRange()
     const elementList = this.draw.getElementList()
     const element = elementList[startIndex]
     if (!element || element.type !== ElementType.IMAGE) return
-    downloadFile(element.url!, `${element.id!}.png`)
+    downloadFile(element.value, `${element.id!}.png`)
   }
 
   public getImage(): string[] {

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

@@ -3,6 +3,30 @@ import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu
 import { Command } from '../../command/Command'
 
 export const imageMenus: IRegisterContextMenu[] = [
+  {
+    name: '更改图片',
+    icon: 'image-change',
+    when: (payload) => {
+      return !payload.editorHasSelection && payload.startElement?.type === ElementType.IMAGE
+    },
+    callback: (command: Command) => {
+      // 创建代理元素
+      const proxyInputFile = document.createElement('input')
+      proxyInputFile.type = 'file'
+      proxyInputFile.accept = '.png, .jpg, .jpeg'
+      // 监听上传
+      proxyInputFile.onchange = () => {
+        const file = proxyInputFile.files![0]!
+        const fileReader = new FileReader()
+        fileReader.readAsDataURL(file)
+        fileReader.onload = () => {
+          const value = fileReader.result as string
+          command.executeReplaceImageElement(value)
+        }
+      }
+      proxyInputFile.click()
+    }
+  },
   {
     name: '另存为图片',
     icon: 'image',
@@ -12,5 +36,5 @@ export const imageMenus: IRegisterContextMenu[] = [
     callback: (command: Command) => {
       command.executeSaveAsImageElement()
     }
-  },
+  }
 ]