Merge pull request #1580 from chilingling/chore/bugCherryPickv273

Author: hexqi

designer-demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "designer-demo",
   "private": true,
-  "version": "2.7.2",
+  "version": "2.7.3",
   "type": "module",
   "scripts": {
     "dev": "cross-env vite",

mockServer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-mock",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "publishConfig": {
     "access": "public"
   },

packages/block-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-block-compiler",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "publishConfig": {
     "access": "public"
   },

packages/build/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-config",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "",
   "type": "module",
   "main": "./index.js",

packages/build/vite-plugin-meta-comments/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-vite-plugin-meta-comments",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs",

packages/builtinComponent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-builtin-component",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

packages/canvas/container/src/components/CanvasAction.vue

@@ -417,32 +417,128 @@ export default {
       }
     }
 
+    /**
+     * 检查元素在画布中的可用空间
+     * @param {number} top - 选中元素顶部位置
+     * @param {number} selectedHeight - 选中元素高度
+     * @param {number} canvasHeight - 画布高度
+     * @param {number} elementHeight - 要放置元素的高度
+     * @returns {{hasTopSpace: boolean, hasBottomSpace: boolean}}
+     */
+    const checkElementSpace = (top, selectedHeight, canvasHeight, elementHeight) => {
+      return {
+        hasTopSpace: top >= elementHeight,
+        hasBottomSpace: canvasHeight - top - selectedHeight >= elementHeight
+      }
+    }
+
+    /**
+     * 根据策略决定元素应该放置在顶部还是底部
+     * @param {number} top - 选中元素顶部位置
+     * @param {number} elementHeight - 要放置元素的高度
+     * @param {boolean} hasTopSpace - 顶部是否有足够空间
+     * @param {boolean} hasBottomSpace - 底部是否有足够空间
+     * @param {string} strategy - 放置策略 ('topFirst' | 'bottomFirst')
+     * @returns {boolean} 是否放置在底部
+     */
+    const determineElementPosition = (hasTopSpace, hasBottomSpace, strategy = 'topFirst') => {
+      if (strategy === 'bottomFirst') {
+        // Option策略：优先底部，或顶部没空间时放底部
+        return hasBottomSpace || !hasTopSpace
+      } else {
+        // Label策略：顶部没空间且底部有空间才放底部
+        return !hasTopSpace && hasBottomSpace
+      }
+    }
+
+    /**
+     * 通用的垂直对齐计算函数
+     * @param {boolean} isAtBottom - 是否放置在底部
+     * @param {number} elementHeight - 元素高度
+     * @param {boolean} hasTopSpace - 顶部是否有足够空间
+     * @param {boolean} hasBottomSpace - 底部是否有足够空间
+     * @param {boolean} bottomFirst - 是否底部优先策略（true: Option策略, false: Label策略）
+     * @returns {{alignTop: boolean, verticalValue: number}}
+     */
+    const calculateVerticalAlignment = (
+      isAtBottom,
+      elementHeight,
+      hasTopSpace,
+      hasBottomSpace,
+      bottomFirst = false
+    ) => {
+      const alignTop = !isAtBottom
+
+      let verticalValue
+      if (bottomFirst) {
+        // Option策略：不在底部 OR 底部有空间时偏移
+        verticalValue = !isAtBottom || hasBottomSpace ? -elementHeight : 0
+      } else {
+        // Label策略：在底部 OR 顶部有空间时偏移
+        verticalValue = isAtBottom || hasTopSpace ? -elementHeight : 0
+      }
+
+      return { alignTop, verticalValue }
+    }
+
+    /**
+     * 一站式元素对齐计算函数（组合了空间检查、位置决策、对齐计算）
+     * @param {number} top - 选中元素顶部位置
+     * @param {number} selectedHeight - 选中元素高度
+     * @param {number} canvasHeight - 画布高度
+     * @param {number} elementHeight - 要放置元素的高度
+     * @param {string} strategy - 放置策略 ('topFirst' | 'bottomFirst')
+     * @returns {{alignTop: boolean, verticalValue: number}}
+     */
+    const calculateElementAlignment = (top, selectedHeight, canvasHeight, elementHeight, strategy = 'topFirst') => {
+      const spaceInfo = checkElementSpace(top, selectedHeight, canvasHeight, elementHeight)
+      const isAtBottom = determineElementPosition(spaceInfo.hasTopSpace, spaceInfo.hasBottomSpace, strategy)
+      return calculateVerticalAlignment(
+        isAtBottom,
+        elementHeight,
+        spaceInfo.hasTopSpace,
+        spaceInfo.hasBottomSpace,
+        strategy === 'bottomFirst'
+      )
+    }
+
     const getStyleValues = (selectState, canvasSize, labelWidth, optionWidth) => {
       const { left, top, width, height, doc } = selectState
       const { width: canvasWidth, height: canvasHeight } = canvasSize
       // 标签宽度和工具操作条宽度之和加上间距
       const fullRectWidth = labelWidth + optionWidth + OPTION_SPACE
+      const labelAlignment = calculateElementAlignment(
+        top,
+        height,
+        canvasHeight,
+        LABEL_HEIGHT,
+        'topFirst' // Label策略：顶部优先
+      )
 
-      // 是否 将label 标签放置到底部，判断 top 距离
-      const isLabelAtBottom = top < LABEL_HEIGHT
       const labelAlign = new Align({
         alignLeft: true,
         horizontalValue: 0,
-        alignTop: !isLabelAtBottom,
-        verticalValue: -LABEL_HEIGHT
+        alignTop: labelAlignment.alignTop,
+        verticalValue: labelAlignment.verticalValue
       })
 
       if (!doc) {
         return {}
       }
 
-      // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
-      const isOptionAtBottom = canvasHeight - top - height >= OPTION_BAR_HEIGHT
+      const optionAlignment = calculateElementAlignment(
+        top,
+        height,
+        canvasHeight,
+        OPTION_BAR_HEIGHT,
+        'bottomFirst' // Option策略：底部优先
+      )
+
       const optionAlign = new Align({
         alignLeft: false,
         horizontalValue: 0,
-        alignTop: !isOptionAtBottom,
-        verticalValue: -OPTION_BAR_HEIGHT
+        alignTop: optionAlignment.alignTop,
+        verticalValue: optionAlignment.verticalValue
       })
 
       const scrollBarWidth = doc.documentElement.scrollHeight > doc.documentElement.clientHeight ? SCROLL_BAR_WIDTH : 0
@@ -462,7 +558,7 @@ export default {
           optionAlign.align(positions.LEFT)
         }
 
-        if (isLabelAtBottom === isOptionAtBottom) {
+        if (labelAlignment.alignTop === optionAlignment.alignTop) {
           // 标签框和工具操作框都在顶部或者都在底部
 
           if (left + fullRectWidth < canvasWidth) {
@@ -562,6 +658,12 @@ export default {
   pointer-events: none;
   border: 1px solid var(--te-canvas-container-border-color-checked);
   z-index: 2;
+  // 禁止文本选择
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
   &.absolute {
     pointer-events: all;
   }

packages/canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-canvas",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "publishConfig": {
     "access": "public"
   },

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-common",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "publishConfig": {
     "access": "public"
   },

packages/configurator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-engine-configurator",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",