@epxing/designer 5.3.0-beta.1 → 5.3.0-beta.3

package/src/page-designer/widget-preview/Mixin.js

@@ -1,285 +1,285 @@
-import PreviewItem from './PreviewItem.vue'
-import util from '@epxing/core/src/runtime-utils/util'
-import { createDropCache, clearDropCache, insertIndex, insertLineRect } from './dropPosition'
-function appendCss (id, css) {
-  const formatCss = css.replace(/:current/g, '.css_' + id).replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
-    return `url(${util.getFileUrl($1)})`
-  })
-  const element = document.getElementById('style_' + id)
-  if (element) {
-    element.textContent = formatCss
-  } else {
-    const style = document.createElement('style')
-    style.id = 'style_' + id
-    style.textContent = formatCss
-
-    style.setAttribute('type', 'text/css')
-    document.head.appendChild(style)
-  }
-}
-function removeCss (id) {
-  const element = document.getElementById('style_' + id)
-  if (element) document.head.removeChild(element)
-}
-
-export default {
-  props: {
-    designer: {
-      type: Object
-    },
-    widget: {
-      type: Object
-    },
-    pageRelationList: {
-      type: Array
-    },
-    templateInfo: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  components: {
-    'widget-preview': PreviewItem
-  },
-  computed: {
-    $isMobile () {
-      return this.designer.terminal === 'mobile' ? true : this.$store.state.config.isMobile
-    },
-    selectedWidget () {
-      return this.designer.selectedWidget
-    },
-    widgetInfo () {
-      return this.designer.getWidgetByType(this.widget.contentType) || {}
-    },
-    childWidgetList: {
-      get () {
-        return this.widget.items || []
-      },
-      set (v) {
-        this.designer.updateWidget(this.widget.id, { items: v })
-      }
-    },
-    style () {
-      const { style = {} } = this.widget
-      const _style = { ...style }
-      if (this.$configs.height && !style.height) {
-        const height = this.$configs.height.includes('%') ? this.$configs.height : this.$configs.height + 'px'
-        _style.height = height
-      }
-      if (_style.backgroundImage) {
-        _style.backgroundImage = _style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
-          return `url(${util.getFileUrl($1)})`
-        })
-      }
-      return _style
-    },
-    widgetStyle () {
-      const { style = {} } = this.widget
-      return style
-    },
-    $configs () {
-      const { id, configs = {} } = this.widget
-      if (this.templateInfo) {
-        // 获取当前组件的配置  获取模板的配置
-        const templateConfig = this.designer.widgetConfig[this.templateInfo.id] || {}
-        const { itemConfigs } = this.templateInfo.content
-        const _configs = { ...configs, ...(itemConfigs[id] || {}) }
-        for (const key in _configs) {
-          const item = _configs[key]
-          if (typeof item === 'string') {
-            _configs[key] = item.replace(/@\[([\w-.|$#]+)\]/g, (macth, key) => templateConfig[key] || '')
-              .replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`)
-              .replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
-          }
-        }
-        return _configs
-      } else {
-        const widgetConfig = this.designer.widgetConfig[id] || {}
-        // 将变量转为⌊⌉『』
-        const allConfigs = { ...widgetConfig, ...configs }
-        const _configs = {}
-        for (const key in allConfigs) {
-          const item = allConfigs[key]
-          if (typeof item === 'string') {
-            _configs[key] = item.replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`).replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
-          } else {
-            _configs[key] = item
-          }
-        }
-        return _configs
-      }
-    },
-    $metaId () {
-      const { metaId } = this.$configs
-      return metaId || this.designer.page.metaId
-    }
-  },
-  watch: {
-    'widget.css' (v) {
-      appendCss(this.widget.id, this.widget.css)
-    }
-  },
-  mounted () {
-    if (this.widget.css) {
-      appendCss(this.widget.id, this.widget.css)
-    }
-    if (this.$el) {
-      if (this.$el.classList) {
-        this.$el.classList.add('css_' + this.widget.id)
-      } else {
-        this.$el.className += ' css_' + this.widget.id
-      }
-    }
-
-    // 自动为容器组件绑定拖拽事件
-    const isContainer = this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
-    if (isContainer && this.$el) {
-      // 保存事件处理器引用，用于销毁时移除
-      this._dragEnterHandler = this.onContainerDragEnter.bind(this)
-      this._dragOverHandler = (e) => {
-        e.preventDefault()
-        this.onContainerDragOver(e)
-      }
-      this._dragLeaveHandler = this.onContainerDragLeave.bind(this)
-      this._dropHandler = (e) => {
-        e.preventDefault()
-        e.stopPropagation() // 阻止事件继续冒泡到父容器
-        this.onContainerDrop(e)
-      }
-
-      // 使用 capture 阶段捕获事件，优先于子元素处理
-      this.$el.addEventListener('dragenter', this._dragEnterHandler, false)
-      this.$el.addEventListener('dragover', this._dragOverHandler, false)
-      this.$el.addEventListener('dragleave', this._dragLeaveHandler, false)
-      this.$el.addEventListener('drop', this._dropHandler, false)
-    }
-  },
-  unmounted () {
-    removeCss(this.widget.id)
-
-    // 清除可能存在的离开定时器
-    if (this._dragLeaveTimer) {
-      clearTimeout(this._dragLeaveTimer)
-      this._dragLeaveTimer = null
-    }
-    if (this._dragFrame) {
-      cancelAnimationFrame(this._dragFrame)
-      this._dragFrame = null
-    }
-
-    // 移除拖拽事件监听
-    if (this._dragEnterHandler && this.$el) {
-      this.$el.removeEventListener('dragenter', this._dragEnterHandler)
-      this.$el.removeEventListener('dragover', this._dragOverHandler)
-      this.$el.removeEventListener('dragleave', this._dragLeaveHandler)
-      this.$el.removeEventListener('drop', this._dropHandler)
-    }
-  },
-  methods: {
-    // ========== 容器拖拽通用方法 ==========
-    // 判断是否是从组件库或模板库拖拽
-    isDraggingFromLibrary (e) {
-      const hasData = e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('text/plain')
-      if (!hasData) return false
-
-      // 尝试获取数据判断类型（注意：在 dragover 中无法获取数据，只能在 drop 中获取）
-      // 所以这里只能做基本判断
-      return true
-    },
-
-    // 是否在拖画布上已有的组件（否则是组件库 / 模板库）：读拖拽状态，不再每次 querySelector
-    isDraggingWidget () {
-      return this.designer.dragState.dragSource === 'preview'
-    },
-
-    // 是否容器组件：有 CONTAINER 标记或有 items
-    isContainerWidget () {
-      return this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
-    },
-
-    // 容器拖拽进入：重新测量一次 children，之后的 dragover 复用缓存
-    onContainerDragEnter (e) {
-      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
-      e.preventDefault()
-      e.stopPropagation()
-      if (this._dragLeaveTimer) {
-        clearTimeout(this._dragLeaveTimer)
-        this._dragLeaveTimer = null
-      }
-      if (!this._dropCache) this._dropCache = createDropCache()
-      clearDropCache(this._dropCache)
-      this.designer.setDragOverTarget({ type: 'container', widgetId: this.widget.id })
-      this.designer.setDragOverTargetElement(this.$el)
-      this.designer.setPreviewDragTarget({ widgetId: this.widget.id, position: 'inside' })
-    },
-
-    // 容器拖拽悬停：只记坐标 + 允许放置；插入位置的计算与状态更新合并到下一帧
-    onContainerDragOver (e) {
-      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
-      e.preventDefault()
-      e.stopPropagation()
-      e.dataTransfer.dropEffect = this.isDraggingWidget() ? 'move' : 'copy'
-      this._dragClientX = e.clientX
-      this._dragClientY = e.clientY
-      this.scheduleDragFrame()
-    },
-
-    scheduleDragFrame () {
-      if (this._dragFrame) return
-      this._dragFrame = requestAnimationFrame(() => {
-        this._dragFrame = null
-        if (this._dragClientY === undefined || !this.designer.dragState.isDragging) return
-        // 事件被 stopPropagation 后到不了 document，悬浮窗位置在这里更新
-        this.designer.updateDragGhostPosition(this._dragClientX, this._dragClientY)
-        // 列表元素（子类可以覆盖 getDropListElement 方法自定义）
-        const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
-        if (!this._dropCache) this._dropCache = createDropCache()
-        const lineRect = insertLineRect(this._dropCache, listEl, this._dragClientY)
-        if (lineRect) this.designer.setDragInsertLine(lineRect)
-        this.designer.setPreviewDragTarget({ widgetId: this.widget.id, index: insertIndex(this._dropCache, listEl, this._dragClientY), position: 'inside' })
-      })
-    },
-
-    // 容器拖拽离开：relatedTarget 为空（离开窗口）或不在当前元素内才算真正离开
-    onContainerDragLeave (e) {
-      if (!this.isContainerWidget()) return
-      const relatedTarget = e.relatedTarget
-      if (!relatedTarget || !this.$el.contains(relatedTarget)) {
-        // 小延迟避免在子元素之间快速移动时误判
-        if (this._dragLeaveTimer) clearTimeout(this._dragLeaveTimer)
-        this._dragLeaveTimer = setTimeout(() => {
-          if (this.designer.dragOverTarget?.widgetId === this.widget.id) {
-            this.designer.clearDragOverTarget()
-            this.designer.clearDragInsertLine()
-            this.designer.clearPreviewDragTarget()
-          }
-          if (this._dropCache) clearDropCache(this._dropCache)
-          this._dragLeaveTimer = null
-        }, 30)
-      }
-    },
-
-    // 容器放置
-    onContainerDrop (e) {
-      if (!this.isContainerWidget()) return
-      e.preventDefault()
-      e.stopPropagation()
-      if (this._dragLeaveTimer) {
-        clearTimeout(this._dragLeaveTimer)
-        this._dragLeaveTimer = null
-      }
-      this.designer.clearDragOverTarget()
-      this.designer.clearDragInsertLine()
-      this.designer.clearPreviewDragTarget()
-      const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
-      if (!this._dropCache) this._dropCache = createDropCache()
-      const index = insertIndex(this._dropCache, listEl, e.clientY)
-      clearDropCache(this._dropCache)
-      // 使用 designer 的统一拖拽处理方法；不在这里发 drag-end，让 dragend 事件自然触发
-      this.designer.handleDrop({ dataTransfer: e.dataTransfer, target: { type: 'container', widgetId: this.widget.id, index } })
-    }
-  }
-}
+import PreviewItem from './PreviewItem.vue'
+import util from '@epxing/core/src/runtime-utils/util'
+import { createDropCache, clearDropCache, insertIndex, insertLineRect } from './dropPosition'
+function appendCss (id, css) {
+  const formatCss = css.replace(/:current/g, '.css_' + id).replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+    return `url(${util.getFileUrl($1)})`
+  })
+  const element = document.getElementById('style_' + id)
+  if (element) {
+    element.textContent = formatCss
+  } else {
+    const style = document.createElement('style')
+    style.id = 'style_' + id
+    style.textContent = formatCss
+
+    style.setAttribute('type', 'text/css')
+    document.head.appendChild(style)
+  }
+}
+function removeCss (id) {
+  const element = document.getElementById('style_' + id)
+  if (element) document.head.removeChild(element)
+}
+
+export default {
+  props: {
+    designer: {
+      type: Object
+    },
+    widget: {
+      type: Object
+    },
+    pageRelationList: {
+      type: Array
+    },
+    templateInfo: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  components: {
+    'widget-preview': PreviewItem
+  },
+  computed: {
+    $isMobile () {
+      return this.designer.terminal === 'mobile' ? true : this.$store.state.config.isMobile
+    },
+    selectedWidget () {
+      return this.designer.selectedWidget
+    },
+    widgetInfo () {
+      return this.designer.getWidgetByType(this.widget.contentType) || {}
+    },
+    childWidgetList: {
+      get () {
+        return this.widget.items || []
+      },
+      set (v) {
+        this.designer.updateWidget(this.widget.id, { items: v })
+      }
+    },
+    style () {
+      const { style = {} } = this.widget
+      const _style = { ...style }
+      if (this.$configs.height && !style.height) {
+        const height = this.$configs.height.includes('%') ? this.$configs.height : this.$configs.height + 'px'
+        _style.height = height
+      }
+      if (_style.backgroundImage) {
+        _style.backgroundImage = _style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+          return `url(${util.getFileUrl($1)})`
+        })
+      }
+      return _style
+    },
+    widgetStyle () {
+      const { style = {} } = this.widget
+      return style
+    },
+    $configs () {
+      const { id, configs = {} } = this.widget
+      if (this.templateInfo) {
+        // 获取当前组件的配置  获取模板的配置
+        const templateConfig = this.designer.widgetConfig[this.templateInfo.id] || {}
+        const { itemConfigs } = this.templateInfo.content
+        const _configs = { ...configs, ...(itemConfigs[id] || {}) }
+        for (const key in _configs) {
+          const item = _configs[key]
+          if (typeof item === 'string') {
+            _configs[key] = item.replace(/@\[([\w-.|$#]+)\]/g, (macth, key) => templateConfig[key] || '')
+              .replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`)
+              .replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
+          }
+        }
+        return _configs
+      } else {
+        const widgetConfig = this.designer.widgetConfig[id] || {}
+        // 将变量转为⌊⌉『』
+        const allConfigs = { ...widgetConfig, ...configs }
+        const _configs = {}
+        for (const key in allConfigs) {
+          const item = allConfigs[key]
+          if (typeof item === 'string') {
+            _configs[key] = item.replace(/\{\{([\w-.|$#]+)\}\}/g, (macth, key) => `⌊${key}⌉`).replace(/\$\[([\w-.|$#]+)\]/g, (macth, key) => `⌊${key}⌉`)
+          } else {
+            _configs[key] = item
+          }
+        }
+        return _configs
+      }
+    },
+    $metaId () {
+      const { metaId } = this.$configs
+      return metaId || this.designer.page.metaId
+    }
+  },
+  watch: {
+    'widget.css' (v) {
+      appendCss(this.widget.id, this.widget.css)
+    }
+  },
+  mounted () {
+    if (this.widget.css) {
+      appendCss(this.widget.id, this.widget.css)
+    }
+    if (this.$el) {
+      if (this.$el.classList) {
+        this.$el.classList.add('css_' + this.widget.id)
+      } else {
+        this.$el.className += ' css_' + this.widget.id
+      }
+    }
+
+    // 自动为容器组件绑定拖拽事件
+    const isContainer = this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
+    if (isContainer && this.$el) {
+      // 保存事件处理器引用，用于销毁时移除
+      this._dragEnterHandler = this.onContainerDragEnter.bind(this)
+      this._dragOverHandler = (e) => {
+        e.preventDefault()
+        this.onContainerDragOver(e)
+      }
+      this._dragLeaveHandler = this.onContainerDragLeave.bind(this)
+      this._dropHandler = (e) => {
+        e.preventDefault()
+        e.stopPropagation() // 阻止事件继续冒泡到父容器
+        this.onContainerDrop(e)
+      }
+
+      // 使用 capture 阶段捕获事件，优先于子元素处理
+      this.$el.addEventListener('dragenter', this._dragEnterHandler, false)
+      this.$el.addEventListener('dragover', this._dragOverHandler, false)
+      this.$el.addEventListener('dragleave', this._dragLeaveHandler, false)
+      this.$el.addEventListener('drop', this._dropHandler, false)
+    }
+  },
+  unmounted () {
+    removeCss(this.widget.id)
+
+    // 清除可能存在的离开定时器
+    if (this._dragLeaveTimer) {
+      clearTimeout(this._dragLeaveTimer)
+      this._dragLeaveTimer = null
+    }
+    if (this._dragFrame) {
+      cancelAnimationFrame(this._dragFrame)
+      this._dragFrame = null
+    }
+
+    // 移除拖拽事件监听
+    if (this._dragEnterHandler && this.$el) {
+      this.$el.removeEventListener('dragenter', this._dragEnterHandler)
+      this.$el.removeEventListener('dragover', this._dragOverHandler)
+      this.$el.removeEventListener('dragleave', this._dragLeaveHandler)
+      this.$el.removeEventListener('drop', this._dropHandler)
+    }
+  },
+  methods: {
+    // ========== 容器拖拽通用方法 ==========
+    // 判断是否是从组件库或模板库拖拽
+    isDraggingFromLibrary (e) {
+      const hasData = e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes('text/plain')
+      if (!hasData) return false
+
+      // 尝试获取数据判断类型（注意：在 dragover 中无法获取数据，只能在 drop 中获取）
+      // 所以这里只能做基本判断
+      return true
+    },
+
+    // 是否在拖画布上已有的组件（否则是组件库 / 模板库）：读拖拽状态，不再每次 querySelector
+    isDraggingWidget () {
+      return this.designer.dragState.dragSource === 'preview'
+    },
+
+    // 是否容器组件：有 CONTAINER 标记或有 items
+    isContainerWidget () {
+      return this.widgetInfo.CONTAINER === '1' || (this.widget.items !== undefined)
+    },
+
+    // 容器拖拽进入：重新测量一次 children，之后的 dragover 复用缓存
+    onContainerDragEnter (e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = null
+      }
+      if (!this._dropCache) this._dropCache = createDropCache()
+      clearDropCache(this._dropCache)
+      this.designer.setDragOverTarget({ type: 'container', widgetId: this.widget.id })
+      this.designer.setDragOverTargetElement(this.$el)
+      this.designer.setPreviewDragTarget({ widgetId: this.widget.id, position: 'inside' })
+    },
+
+    // 容器拖拽悬停：只记坐标 + 允许放置；插入位置的计算与状态更新合并到下一帧
+    onContainerDragOver (e) {
+      if (!this.isContainerWidget() || !this.isDraggingFromLibrary(e)) return
+      e.preventDefault()
+      e.stopPropagation()
+      e.dataTransfer.dropEffect = this.isDraggingWidget() ? 'move' : 'copy'
+      this._dragClientX = e.clientX
+      this._dragClientY = e.clientY
+      this.scheduleDragFrame()
+    },
+
+    scheduleDragFrame () {
+      if (this._dragFrame) return
+      this._dragFrame = requestAnimationFrame(() => {
+        this._dragFrame = null
+        if (this._dragClientY === undefined || !this.designer.dragState.isDragging) return
+        // 事件被 stopPropagation 后到不了 document，悬浮窗位置在这里更新
+        this.designer.updateDragGhostPosition(this._dragClientX, this._dragClientY)
+        // 列表元素（子类可以覆盖 getDropListElement 方法自定义）
+        const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
+        if (!this._dropCache) this._dropCache = createDropCache()
+        const lineRect = insertLineRect(this._dropCache, listEl, this._dragClientY)
+        if (lineRect) this.designer.setDragInsertLine(lineRect)
+        this.designer.setPreviewDragTarget({ widgetId: this.widget.id, index: insertIndex(this._dropCache, listEl, this._dragClientY), position: 'inside' })
+      })
+    },
+
+    // 容器拖拽离开：relatedTarget 为空（离开窗口）或不在当前元素内才算真正离开
+    onContainerDragLeave (e) {
+      if (!this.isContainerWidget()) return
+      const relatedTarget = e.relatedTarget
+      if (!relatedTarget || !this.$el.contains(relatedTarget)) {
+        // 小延迟避免在子元素之间快速移动时误判
+        if (this._dragLeaveTimer) clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = setTimeout(() => {
+          if (this.designer.dragOverTarget?.widgetId === this.widget.id) {
+            this.designer.clearDragOverTarget()
+            this.designer.clearDragInsertLine()
+            this.designer.clearPreviewDragTarget()
+          }
+          if (this._dropCache) clearDropCache(this._dropCache)
+          this._dragLeaveTimer = null
+        }, 30)
+      }
+    },
+
+    // 容器放置
+    onContainerDrop (e) {
+      if (!this.isContainerWidget()) return
+      e.preventDefault()
+      e.stopPropagation()
+      if (this._dragLeaveTimer) {
+        clearTimeout(this._dragLeaveTimer)
+        this._dragLeaveTimer = null
+      }
+      this.designer.clearDragOverTarget()
+      this.designer.clearDragInsertLine()
+      this.designer.clearPreviewDragTarget()
+      const listEl = this.getDropListElement ? this.getDropListElement() : this.$el
+      if (!this._dropCache) this._dropCache = createDropCache()
+      const index = insertIndex(this._dropCache, listEl, e.clientY)
+      clearDropCache(this._dropCache)
+      // 使用 designer 的统一拖拽处理方法；不在这里发 drag-end，让 dragend 事件自然触发
+      this.designer.handleDrop({ dataTransfer: e.dataTransfer, target: { type: 'container', widgetId: this.widget.id, index } })
+    }
+  }
+}