cesium-map-object/ruoyi-ui/src/views/childRoom/TaskPageContent.vue

<template>
  <div class="task-page-content">
    <input
      ref="bgInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleBackgroundSelect"
    />
    <input
      ref="iconImageInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleIconImageSelect"
    />
    <!-- 可编辑画布区域 -->
    <div
      ref="canvas"
      class="task-canvas"
      :class="{ 'insert-icon': insertMode === 'icon', 'insert-textbox': insertMode === 'textbox' }"
      :style="canvasStyle"
      @click="onCanvasClick"
      @mousedown="onCanvasMouseDown"
      @mousemove="onCanvasMouseMove"
      @mouseup="onCanvasMouseUp"
      @mouseleave="onCanvasMouseUp"
    >
      <!-- 图标元素（插入的图片） -->
      <div
        v-for="icon in icons"
        :key="icon.id"
        class="canvas-icon"
        :class="{ selected: selectedId === icon.id }"
        :style="getIconStyle(icon)"
        @mousedown.stop="selectElement(icon.id, $event)"
      >
        <div class="icon-body" :style="{ transform: `rotate(${icon.rotation || 0}deg)` }">
          <img v-if="icon.src" :src="icon.src" class="icon-image" />
          <i v-else class="el-icon-picture-outline icon-placeholder"></i>
        </div>
        <div class="icon-resize-handle" v-if="selectedId === icon.id">
          <div
            v-for="pos in resizeHandles"
            :key="pos"
            class="handle"
            :class="pos"
            @mousedown.stop="startResize($event, icon, pos)"
          ></div>
          <div class="rotate-handle" @mousedown.stop="startRotate($event, icon)"></div>
          <div class="delete-handle" @mousedown.stop="deleteIcon(icon.id)" title="删除">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>

      <!-- 文本框元素：Office 风格，全透明，可随时拖拽和调整大小 -->
      <div
        v-for="box in textBoxes"
        :key="box.id"
        class="canvas-textbox"
        :class="{ selected: selectedId === box.id }"
        :style="getTextBoxStyle(box)"
        @mousedown="onTextBoxMouseDown(box, $event)"
      >
        <div class="textbox-drag-bar" @mousedown.stop="selectElement(box.id, $event)"></div>
        <div
          class="textbox-input"
          contenteditable="true"
          @blur="box.text = $event.target.innerText"
          @mousedown.stop="selectedId = box.id"
        >{{ box.text }}</div>
        <div class="textbox-resize-handle" v-if="selectedId === box.id">
          <div
            v-for="pos in resizeHandles"
            :key="pos"
            class="handle"
            :class="pos"
            @mousedown.stop="startResizeTextBox($event, box, pos)"
          ></div>
          <div class="textbox-rotate-handle" @mousedown.stop="startRotateTextBox($event, box)"></div>
          <div class="delete-handle textbox-delete" @mousedown.stop="deleteTextBox(box.id)" title="删除">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>

      <!-- 绘制中的文本框 -->
      <div
        v-if="drawingTextBox"
        class="drawing-textbox"
        :style="drawingTextBoxStyle"
      ></div>
    </div>
  </div>
</template>

<script>
let idCounter = 0
function genId() {
  return 'el_' + (++idCounter) + '_' + Date.now()
}

export default {
  name: 'TaskPageContent',
  props: {
    backgroundImage: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      insertMode: null,
      pendingIconImage: null,
      icons: [],
      textBoxes: [],
      selectedId: null,
      resizeHandles: ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'],
      // 拖拽/调整/旋转
      dragState: null,
      // 绘制文本框
      drawingTextBox: false,
      drawStartX: 0,
      drawStartY: 0,
      drawCurrentX: 0,
      drawCurrentY: 0
    }
  },
  mounted() {
    this._keydownHandler = (e) => this.onKeydown(e)
    document.addEventListener('keydown', this._keydownHandler)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this._keydownHandler)
  },
  computed: {
    canvasStyle() {
      const style = {}
      if (this.backgroundImage) {
        style.backgroundImage = `url(${this.backgroundImage})`
        style.backgroundSize = '100% 100%'
        style.backgroundPosition = 'center'
        style.backgroundRepeat = 'no-repeat'
      }
      return style
    },
    drawingTextBoxStyle() {
      const style = {}
      const left = Math.min(this.drawStartX, this.drawCurrentX)
      const top = Math.min(this.drawStartY, this.drawCurrentY)
      const width = Math.abs(this.drawCurrentX - this.drawStartX)
      const height = Math.abs(this.drawCurrentY - this.drawStartY)
      style.left = left + 'px'
      style.top = top + 'px'
      style.width = Math.max(width, 20) + 'px'
      style.height = Math.max(height, 20) + 'px'
      return style
    }
  },
  methods: {
    handleInsertCommand(cmd) {
      this.insertMode = cmd
      if (cmd === 'background') {
        this.$refs.bgInput.value = ''
        this.$refs.bgInput.click()
      } else if (cmd === 'icon') {
        this.$refs.iconImageInput.value = ''
        this.$refs.iconImageInput.click()
      }
    },
    handleBackgroundSelect(e) {
      const file = e.target.files?.[0]
      if (!file) return
      const reader = new FileReader()
      reader.onload = (ev) => {
        this.$emit('background-change', ev.target.result)
      }
      reader.readAsDataURL(file)
      this.insertMode = null
      e.target.value = ''
    },
    handleIconImageSelect(e) {
      const file = e.target.files?.[0]
      if (!file) return
      const reader = new FileReader()
      reader.onload = (ev) => {
        this.pendingIconImage = ev.target.result
        this.insertMode = 'icon'
      }
      reader.readAsDataURL(file)
      e.target.value = ''
    },
    onCanvasClick(e) {
      if (this.insertMode === 'icon' && this.pendingIconImage) {
        const rect = this.$refs.canvas.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        this.icons.push({
          id: genId(),
          x,
          y,
          width: 60,
          height: 60,
          rotation: 0,
          src: this.pendingIconImage
        })
        this.pendingIconImage = null
        this.insertMode = null
      }
      if (this.insertMode !== 'textbox' && !this.drawingTextBox) {
        if (!e.target.closest('.canvas-textbox') && !e.target.closest('.canvas-icon')) {
          this.selectedId = null
        }
      }
    },
    onCanvasMouseDown(e) {
      if (this.insertMode === 'textbox' && !this.drawingTextBox) {
        const rect = this.$refs.canvas.getBoundingClientRect()
        this.drawingTextBox = true
        this.drawStartX = e.clientX - rect.left
        this.drawStartY = e.clientY - rect.top
        this.drawCurrentX = this.drawStartX
        this.drawCurrentY = this.drawStartY
      }
    },
    onCanvasMouseMove(e) {
      if (this.drawingTextBox) {
        const rect = this.$refs.canvas.getBoundingClientRect()
        this.drawCurrentX = e.clientX - rect.left
        this.drawCurrentY = e.clientY - rect.top
      }
      if (this.dragState) {
        this.$refs.canvas.style.cursor = this.dragState.cursor || 'move'
      }
    },
    onCanvasMouseUp(e) {
      if (this.drawingTextBox) {
        const rect = this.$refs.canvas.getBoundingClientRect()
        const x = Math.min(this.drawStartX, this.drawCurrentX)
        const y = Math.min(this.drawStartY, this.drawCurrentY)
        const w = Math.max(Math.abs(this.drawCurrentX - this.drawStartX), 20)
        const h = Math.max(Math.abs(this.drawCurrentY - this.drawStartY), 20)
        this.textBoxes.push({
          id: genId(),
          x,
          y,
          width: w,
          height: h,
          text: '',
          rotation: 0
        })
        this.drawingTextBox = false
        this.insertMode = null
      }
      this.dragState = null
      this.$refs.canvas && (this.$refs.canvas.style.cursor = '')
    },
    onTextBoxMouseDown(box, e) {
      if (e.target.closest('.textbox-input')) return
      this.selectElement(box.id, e)
    },
    selectElement(id, e) {
      this.selectedId = id
      const icon = this.icons.find(i => i.id === id)
      const textbox = this.textBoxes.find(t => t.id === id)
      const el = icon || textbox
      if (!el) return
      const rect = this.$refs.canvas.getBoundingClientRect()
      const offsetX = e.clientX - rect.left - el.x
      const offsetY = e.clientY - rect.top - el.y
      this.dragState = {
        type: 'drag',
        id,
        isIcon: !!icon,
        startX: e.clientX,
        startY: e.clientY,
        origX: el.x,
        origY: el.y,
        offsetX,
        offsetY
      }
      const onMove = (ev) => {
        if (this.dragState?.type !== 'drag') return
        if (this.dragState.isIcon) return
        const dx = ev.clientX - this.dragState.startX
        const dy = ev.clientY - this.dragState.startY
        this.dragState.origX += dx
        this.dragState.origY += dy
        el.x = this.dragState.origX
        el.y = this.dragState.origY
        this.dragState.startX = ev.clientX
        this.dragState.startY = ev.clientY
      }
      const onUp = (ev) => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
        if (this.dragState?.type === 'drag' && this.dragState.isIcon) {
          const r = this.$refs.canvas.getBoundingClientRect()
          el.x = ev.clientX - r.left - this.dragState.offsetX
          el.y = ev.clientY - r.top - this.dragState.offsetY
        }
        this.dragState = null
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    },
    startResize(e, icon, pos) {
      e.stopPropagation()
      this.dragState = {
        type: 'resize',
        id: icon.id,
        pos,
        startX: e.clientX,
        startY: e.clientY,
        origW: icon.width,
        origH: icon.height,
        origX: icon.x,
        origY: icon.y
      }
      const onMove = (ev) => {
        if (this.dragState?.type !== 'resize') return
        const dx = ev.clientX - this.dragState.startX
        const dy = ev.clientY - this.dragState.startY
        this.dragState.startX = ev.clientX
        this.dragState.startY = ev.clientY
        const { pos, origW, origH, origX, origY } = this.dragState
        let w = icon.width
        let h = icon.height
        let x = icon.x
        let y = icon.y
        if (pos.includes('e')) { w = Math.max(20, w + dx) }
        if (pos.includes('w')) { w = Math.max(20, w - dx); x = icon.x + dx }
        if (pos.includes('s')) { h = Math.max(20, h + dy) }
        if (pos.includes('n')) { h = Math.max(20, h - dy); y = icon.y + dy }
        icon.width = w
        icon.height = h
        icon.x = x
        icon.y = y
      }
      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
        this.dragState = null
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    },
    startRotate(e, icon) {
      e.stopPropagation()
      const rect = this.$refs.canvas.getBoundingClientRect()
      const cx = icon.x + icon.width / 2
      const cy = icon.y + icon.height / 2
      const startAngle = Math.atan2(e.clientY - rect.top - cy, e.clientX - rect.left - cx)
      const startRot = icon.rotation || 0
      const onMove = (ev) => {
        const angle = Math.atan2(ev.clientY - rect.top - cy, ev.clientX - rect.left - cx)
        const delta = ((angle - startAngle) * 180 / Math.PI)
        icon.rotation = (startRot + delta + 360) % 360
      }
      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    },
    startResizeTextBox(e, box, pos) {
      e.stopPropagation()
      this.dragState = {
        type: 'resize',
        id: box.id,
        pos,
        startX: e.clientX,
        startY: e.clientY
      }
      const onMove = (ev) => {
        if (this.dragState?.type !== 'resize') return
        const dx = ev.clientX - this.dragState.startX
        const dy = ev.clientY - this.dragState.startY
        this.dragState.startX = ev.clientX
        this.dragState.startY = ev.clientY
        const { pos } = this.dragState
        let w = box.width
        let h = box.height
        let x = box.x
        let y = box.y
        if (pos.includes('e')) { w = Math.max(20, w + dx) }
        if (pos.includes('w')) { w = Math.max(20, w - dx); x = box.x + dx }
        if (pos.includes('s')) { h = Math.max(20, h + dy) }
        if (pos.includes('n')) { h = Math.max(20, h - dy); y = box.y + dy }
        box.width = w
        box.height = h
        box.x = x
        box.y = y
      }
      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
        this.dragState = null
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    },
    getIconStyle(icon) {
      return {
        left: icon.x + 'px',
        top: icon.y + 'px',
        width: icon.width + 'px',
        height: icon.height + 'px'
      }
    },
    getTextBoxStyle(box) {
      return {
        left: box.x + 'px',
        top: box.y + 'px',
        width: box.width + 'px',
        height: box.height + 'px',
        transform: `rotate(${box.rotation || 0}deg)`
      }
    },
    deleteIcon(id) {
      const idx = this.icons.findIndex(i => i.id === id)
      if (idx >= 0) this.icons.splice(idx, 1)
      if (this.selectedId === id) this.selectedId = null
    },
    deleteTextBox(id) {
      const idx = this.textBoxes.findIndex(t => t.id === id)
      if (idx >= 0) this.textBoxes.splice(idx, 1)
      if (this.selectedId === id) this.selectedId = null
    },
    onKeydown(e) {
      if (!this.selectedId) return
      if (e.key === 'Delete' || e.key === 'Backspace') {
        if (document.activeElement?.contentEditable === 'true') return
        e.preventDefault()
        const icon = this.icons.find(i => i.id === this.selectedId)
        const box = this.textBoxes.find(t => t.id === this.selectedId)
        if (icon) this.deleteIcon(icon.id)
        else if (box) this.deleteTextBox(box.id)
      }
    },
    startRotateTextBox(e, box) {
      e.stopPropagation()
      const rect = this.$refs.canvas.getBoundingClientRect()
      const cx = box.x + box.width / 2
      const cy = box.y + box.height / 2
      const startAngle = Math.atan2(e.clientY - rect.top - cy, e.clientX - rect.left - cx)
      const startRot = box.rotation || 0
      const onMove = (ev) => {
        const angle = Math.atan2(ev.clientY - rect.top - cy, ev.clientX - rect.left - cx)
        const delta = ((angle - startAngle) * 180 / Math.PI)
        box.rotation = (startRot + delta + 360) % 360
      }
      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    }
  }
}
</script>

<style scoped>
.task-page-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.task-canvas {
  flex: 1;
  position: relative;
  min-height: 200px;
  background: #fafafa;
}

.task-canvas.insert-icon {
  cursor: crosshair;
}

.task-canvas.insert-textbox {
  cursor: crosshair;
}

.canvas-icon {
  position: absolute;
  cursor: default;
  border: 2px solid transparent;
}

.canvas-icon.selected {
  border-color: #008aff;
  z-index: 10;
}

.icon-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

.icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-placeholder {
  font-size: 24px;
  color: #008aff;
}

.delete-handle {
  position: absolute;
  top: -28px;
  right: -4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #999;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: auto;
  color: #f56c6c;
  font-size: 14px;
}

.delete-handle:hover {
  background: #f56c6c;
  color: #fff;
  border-color: #f56c6c;
}

.textbox-delete {
  top: -28px;
  right: -4px;
}

.icon-resize-handle {
  position: absolute;
  left: -4px;
  right: -4px;
  top: -4px;
  bottom: -4px;
  pointer-events: none;
}

.icon-resize-handle .handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #008aff;
  border: 1px solid #fff;
  border-radius: 2px;
  pointer-events: auto;
}

.icon-resize-handle .handle.nw { left: -4px; top: -4px; cursor: nw-resize; }
.icon-resize-handle .handle.n { left: 50%; top: -4px; margin-left: -4px; cursor: n-resize; }
.icon-resize-handle .handle.ne { right: -4px; top: -4px; cursor: ne-resize; }
.icon-resize-handle .handle.e { right: -4px; top: 50%; margin-top: -4px; cursor: e-resize; }
.icon-resize-handle .handle.se { right: -4px; bottom: -4px; cursor: se-resize; }
.icon-resize-handle .handle.s { left: 50%; bottom: -4px; margin-left: -4px; cursor: s-resize; }
.icon-resize-handle .handle.sw { left: -4px; bottom: -4px; cursor: sw-resize; }
.icon-resize-handle .handle.w { left: -4px; top: 50%; margin-top: -4px; cursor: w-resize; }

.rotate-handle {
  position: absolute;
  top: -24px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #008aff;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
}

/* 文本框：默认显示细黑边框 */
.canvas-textbox {
  position: absolute;
  cursor: default;
  border: 1px solid #333;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* 编辑模式：虚线边框 + 空心圆控制点 + 旋转手柄 */
.canvas-textbox.selected {
  border: 1px dashed #333;
  z-index: 10;
}

.textbox-resize-handle {
  position: absolute;
  left: -6px;
  right: -6px;
  top: -6px;
  bottom: -6px;
  pointer-events: none;
}

.textbox-resize-handle .handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 50%;
  pointer-events: auto;
  box-sizing: border-box;
}

.textbox-resize-handle .handle.nw { left: -5px; top: -5px; cursor: nw-resize; }
.textbox-resize-handle .handle.n { left: 50%; top: -5px; margin-left: -5px; cursor: n-resize; }
.textbox-resize-handle .handle.ne { right: -5px; top: -5px; cursor: ne-resize; }
.textbox-resize-handle .handle.e { right: -5px; top: 50%; margin-top: -5px; cursor: e-resize; }
.textbox-resize-handle .handle.se { right: -5px; bottom: -5px; cursor: se-resize; }
.textbox-resize-handle .handle.s { left: 50%; bottom: -5px; margin-left: -5px; cursor: s-resize; }
.textbox-resize-handle .handle.sw { left: -5px; bottom: -5px; cursor: sw-resize; }
.textbox-resize-handle .handle.w { left: -5px; top: 50%; margin-top: -5px; cursor: w-resize; }

.textbox-rotate-handle {
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #999;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
}


.textbox-drag-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: default;
  background: transparent;
}

.textbox-input {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
  font-size: 14px;
  outline: none;
  overflow: auto;
  background: transparent;
  color: #333;
}

.drawing-textbox {
  position: absolute;
  border: 2px dashed #008aff;
  background: rgba(0, 138, 255, 0.05);
  pointer-events: none;
}

</style>