From 1f78e33243353c254b01cd61d605f749181a98bf Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Tue, 9 Jan 2024 01:42:36 -0800
Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=A1=86=E7=9A=84=E6=98=BE=E7=A4=BA=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue | 166 ++++++++++++++----
 .../components/container/CanvasContainer.vue  |  26 ++-
 .../src/components/container/container.js     |  51 ++++--
 packages/design-core/src/DesignCanvas.vue     |   1 +
 4 files changed, 195 insertions(+), 49 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 17f3c666e1..ff396eaf96 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -36,7 +36,7 @@
       <div class="drag-resize resize-bottom-left" @mousedown.stop="onMousedown($event, 'start', 'end')"></div>
       <div class="drag-resize resize-bottom-right" @mousedown.stop="onMousedown($event, 'end', 'end')"></div>
     </template>
-    <div v-if="showAction" class="corner-mark-right" :style="fixStyle">
+    <div v-if="showAction" ref="optionRef" class="corner-mark-right" :style="fixStyle">
       <template v-if="!isModal">
         <div v-if="showToParent" title="选择父级">
           <icon-chevron-left @click.stop="selectParent"></icon-chevron-left>
@@ -74,7 +74,7 @@
   </div>
 </template>
 <script>
-import { watchPostEffect, ref, watch, computed } from 'vue'
+import { watchPostEffect, ref, watch, computed, nextTick } from 'vue'
 import {
   IconDel,
   IconSetting,
@@ -95,7 +95,7 @@ import {
   dragStart,
   getCurrentElement
 } from './container'
-import { useResource } from '@opentiny/tiny-engine-controller'
+import { useLayout, useResource } from '@opentiny/tiny-engine-controller'
 import { Popover } from '@opentiny/vue'
 import shortCutPopover from './shortCutPopover.vue'
 
@@ -103,15 +103,15 @@ import shortCutPopover from './shortCutPopover.vue'
 const OPTION_BAR_HEIGHT = 24
 // 标签高度
 const LABEL_HEIGHT = 24
-// 操作条最大宽度
-const MAX_OPTION_WIDTH = 110
-
-// 画布右边滚动条宽度
-const SCROLL_BAR_WIDTH = 8
 
 // 当工具操作条和标签高度并排显示时，需要的间距 6px
 const OPTION_SPACE = 6
 
+// 选中框的边框宽度
+const SELECTION_BORDER_WIDTH = 2
+
+const STYLE_UNSET = 'unset'
+
 export default {
   components: {
     IconDel: IconDel(),
@@ -204,6 +204,7 @@ export default {
       return config?.configure?.isModal
     })
 
+    const optionRef = ref(null)
     const fixStyle = ref('')
 
     let showPopover = ref(false)
@@ -265,45 +266,137 @@ export default {
     const labelRef = ref(null)
     const labelStyle = ref('')
 
-    const bottomPanelHeight = ref(0)
-    const topToolbarHeight = ref(0)
+    const styleObj2Str = (styleObj) => {
+      return Object.entries(styleObj)
+        .map(([key, value]) => {
+          const num = Number(value)
+
+          if (Number.isNaN(num)) {
+            return `${key}:${value}`
+          }
+
+          const val = key === 'right' || key === 'left' ? num - SELECTION_BORDER_WIDTH : num
+          return `${key}:${val}px`
+        })
+        .join(';')
+    }
 
-    watchPostEffect(() => {
-      if (!bottomPanelHeight.value) {
-        bottomPanelHeight.value = document.querySelector('#tiny-bottom-panel')?.offsetHeight
+    const styleObjAlign = (obj, position, val = 0) => {
+      if (position === 'left') {
+        obj.left = val
+        obj.right = STYLE_UNSET
+        return
+      }
+      if (position === 'right') {
+        obj.left = STYLE_UNSET
+        obj.right = val
+        return
       }
-      if (!topToolbarHeight.value) {
-        topToolbarHeight.value = document.querySelector('.tiny-engine-toolbar')?.offsetHeight
+      if (position === 'top') {
+        obj.top = val
+        obj.bottom = STYLE_UNSET
+        return
+      }
+      if (position === 'bottom') {
+        obj.top = STYLE_UNSET
+        obj.bottom = val
+        return
       }
+    }
 
-      const { left, top, width, height } = props.selectState
+    const getStyleValues = (selectState, siteCanvasWidth, siteCanvasHeight) => {
+      const { left, top, width, height } = selectState
+      const labelRect = labelRef.value.getBoundingClientRect()
+      const optionRect = optionRef.value.getBoundingClientRect()
+      // 标签宽度和工具操作条宽度之和加上间距
+      const fullRectWidth = labelRect.width + optionRect.width + OPTION_SPACE
 
       // 是否 将label 标签放置到底部，判断 top 距离
-      const isLabelAtBottom = top <= topToolbarHeight.value + LABEL_HEIGHT
+      const isLabelAtBottom = top <= LABEL_HEIGHT
+      const labelStyleObj = {}
+      styleObjAlign(labelStyleObj, isLabelAtBottom ? 'bottom' : 'top', -LABEL_HEIGHT)
+      styleObjAlign(labelStyleObj, 'left')
+
       // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
-      const isOptionAtBottom = window.innerHeight - top - height - bottomPanelHeight.value > OPTION_BAR_HEIGHT
+      const isOptionAtBottom = siteCanvasHeight - top - height > OPTION_BAR_HEIGHT
+      const optionStyleObj = {}
+      styleObjAlign(optionStyleObj, isOptionAtBottom ? 'bottom' : 'top', -OPTION_BAR_HEIGHT)
+      styleObjAlign(optionStyleObj, 'right')
+
+      if (width < fullRectWidth) {
+        // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距
+
+        // label 是否对齐右侧
+        const isLabelAlignRight = left + labelRect.width > siteCanvasWidth && labelRect.width > width
+        if (isLabelAlignRight) {
+          styleObjAlign(labelStyleObj, 'right')
+        }
+
+        // option 是否对齐左侧
+        const isOptionAlignLeft = left + width < optionRect.width && optionRect.width > width
+        if (isOptionAlignLeft) {
+          styleObjAlign(optionStyleObj, 'left')
+        }
 
-      // 选中组件需要最小的宽度，如果小于这个最小宽度，label 和 option 组件可能会重叠遮挡，labelRef.value.clientWidth：label 的宽度
-      const minWidth = MAX_OPTION_WIDTH + labelRef.value?.clientWidth || 0
-      let translateXDis = 0
+        if (isLabelAtBottom === isOptionAtBottom) {
+          // 标签框和工作操作框都在顶部或者都在底部
 
-      const siteCanvas = document.querySelector('.site-canvas')
-      const right = siteCanvas.getBoundingClientRect().right
-      // 判断是否偏右，偏右且重叠的话，需要移动 label 的位移，不能移动 option 的位移，否则有可能被遮挡
-      const isOverRight = right <= left + width + SCROLL_BAR_WIDTH
+          // 都放在左侧
+          styleObjAlign(labelStyleObj, 'left')
+          styleObjAlign(optionStyleObj, 'left', labelRect.width + OPTION_SPACE)
 
-      // 如果选中组件宽度小于最小宽度要求，则需要位移
-      if (width < minWidth) {
-        translateXDis = MAX_OPTION_WIDTH - width + (labelRef.value?.clientWidth || 0) + OPTION_SPACE
+          // 都放在右侧
+          if (left + fullRectWidth > siteCanvasWidth) {
+            styleObjAlign(optionStyleObj, 'right')
+            styleObjAlign(labelStyleObj, 'right', optionRect.width + OPTION_SPACE)
+          }
+        }
+      } else {
+        if (left < 0) {
+          styleObjAlign(labelStyleObj, 'left', Math.min(-left, width - fullRectWidth))
+        }
+
+        if (left + width > siteCanvasWidth) {
+          styleObjAlign(optionStyleObj, 'right', Math.min(left + width - siteCanvasWidth, width - fullRectWidth))
+        }
+      }
+
+      return {
+        labelStyleValue: styleObj2Str(labelStyleObj),
+        optionStyleValue: styleObj2Str(optionStyleObj)
       }
+    }
+
+    watchPostEffect(async () => {
+      let { left } = props.selectState
+      const { top, width, height } = props.selectState
 
-      labelStyle.value = `top: unset; ${isLabelAtBottom ? 'bottom' : 'top'}: -${LABEL_HEIGHT}px; ${
-        isOverRight && isLabelAtBottom === isOptionAtBottom && `left: -${translateXDis}px;`
-      }`
+      // nextTick后ref才能获取到元素。需要把监听的依赖放在await之前，否则无法监听变化
+      await nextTick()
 
-      fixStyle.value = `
-        ${translateXDis && !isOverRight ? `transform: translateX(${translateXDis}px);` : ''}
-        ${isOptionAtBottom ? 'bottom' : 'top'}: -${OPTION_BAR_HEIGHT}px;`
+      if (labelRef.value && !optionRef.value) {
+        // 选中body的情况
+        labelStyle.value = `left: 0; right: unset; top: unset; bottom: 0`
+        return
+      }
+
+      if (!labelRef.value || !optionRef.value) {
+        return
+      }
+
+      const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+      const scale = useLayout().getScale()
+
+      left -= ((1 - scale) / 2) * siteCanvasRect.width
+
+      const { labelStyleValue, optionStyleValue } = getStyleValues(
+        { left, top, width, height },
+        siteCanvasRect.width * scale,
+        siteCanvasRect.height
+      )
+
+      labelStyle.value = labelStyleValue
+      fixStyle.value = optionStyleValue
     })
 
     return {
@@ -313,6 +406,7 @@ export default {
       copy,
       hide,
       selectParent,
+      optionRef,
       fixStyle,
       showAction,
       showPopover,
@@ -329,7 +423,7 @@ export default {
 
 <style lang="less">
 .canvas-rect {
-  position: fixed;
+  position: absolute;
   box-sizing: border-box;
   pointer-events: none;
   border: 1px solid var(--ti-lowcode-canvas-rect-border-color);
@@ -454,7 +548,6 @@ export default {
     display: flex;
     align-items: center;
     position: absolute;
-    right: -1px;
     height: 24px;
     padding: 0 4px;
     color: var(--ti-lowcode-canvas-corner-mark-right-color);
@@ -479,7 +572,6 @@ export default {
     .corner-mark-left {
       white-space: nowrap;
       pointer-events: all;
-      left: -2px;
       color: var(--ti-lowcode-canvas-select-corner-mark-left-color);
       background: var(--ti-lowcode-canvas-select-corner-mark-left-bg-color);
       svg {
diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
index 626887f4fc..46d290b81a 100644
--- a/packages/canvas/src/components/container/CanvasContainer.vue
+++ b/packages/canvas/src/components/container/CanvasContainer.vue
@@ -123,8 +123,30 @@ export default {
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow
 
+        let isScrolling = false
+
         // 以下是内部iframe监听的事件
         win.addEventListener('mousedown', (event) => {
+          // html元素使用scroll和mouseup事件处理
+          if (event.target === doc.documentElement) {
+            isScrolling = false
+            return
+          }
+
+          insertPosition.value = false
+          setCurrentNode(event)
+          target.value = event.target
+        })
+
+        win.addEventListener('scroll', () => {
+          isScrolling = true
+        })
+
+        win.addEventListener('mouseup', (event) => {
+          if (event.target !== doc.documentElement || isScrolling) {
+            return
+          }
+
           insertPosition.value = false
           setCurrentNode(event)
           target.value = event.target
@@ -194,7 +216,9 @@ export default {
 
     onMounted(() => run(iframe))
     onUnmounted(() => {
-      removeHostkeyEvent(iframe.value.contentDocument)
+      if (iframe.value?.contentDocument) {
+        removeHostkeyEvent(iframe.value.contentDocument)
+      }
       window.removeEventListener('message', updateI18n, false)
     })
 
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index e946ad5bb5..e7bff43abb 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -146,6 +146,12 @@ export const getElement = (element) => {
   if (element === element.ownerDocument.body) {
     return element
   }
+
+  // 如果当前元素是画布的html，返回画布的body
+  if (element === element.ownerDocument.documentElement) {
+    return element.ownerDocument.body
+  }
+
   if (!element || element.nodeType !== 1) {
     return undefined
   }
@@ -159,6 +165,23 @@ export const getElement = (element) => {
   return undefined
 }
 
+const getRect = (element) => {
+  if (element === getDocument().body) {
+    const { innerWidth: width, innerHeight: height } = getWindow()
+    return {
+      left: 0,
+      top: 0,
+      right: width,
+      bottom: height,
+      width,
+      height,
+      x: 0,
+      y: 0
+    }
+  }
+  return element.getBoundingClientRect()
+}
+
 const inserAfter = ({ parent, node, data }) => {
   const parentChildren = parent.children
   const index = parentChildren.indexOf(node)
@@ -436,6 +459,10 @@ export const updateRect = (id) => {
   if (id) {
     setTimeout(() => setSelectRect(querySelectById(id)))
   } else {
+    // 如果选中的是body，不清除选中框
+    if (!selectState.componentName && selectState.width > 0) {
+      return
+    }
     clearSelect()
   }
 }
@@ -486,16 +513,17 @@ export const scrollToNode = (element) => {
 const setSelectRect = (element) => {
   element = element || getDocument().body
 
-  const { left, height, top, width } = element.getBoundingClientRect()
+  const { left, height, top, width } = getRect(element)
   const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
   const componentName = getCurrent().schema?.componentName || ''
   const scale = useLayout().getScale()
   clearHover()
   Object.assign(selectState, {
     width: width * scale,
     height: height * scale,
-    top: top * scale + y,
-    left: left * scale + x,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
     componentName
   })
 }
@@ -509,9 +537,10 @@ const setHoverRect = (element, data) => {
   const componentName = element.getAttribute(NODE_TAG)
   const id = element.getAttribute(NODE_UID)
   const configure = getConfigure(componentName)
-  const rect = element.getBoundingClientRect()
+  const rect = getRect(element)
   const { left, height, top, width } = rect
   const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
   const scale = useLayout().getScale()
 
   hoverState.configure = configure
@@ -539,22 +568,22 @@ const setHoverRect = (element, data) => {
 
     // 如果容器盒子有子元素
     if (childEle) {
-      const childRect = childEle.getBoundingClientRect()
+      const childRect = getRect(childEle)
       const { left, height, top, width } = childRect
       const { x, y } = getOffset(childEle)
       Object.assign(lineState, {
         width: width * scale,
         height: height * scale,
-        top: top * scale + y,
-        left: left * scale + x,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
         position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type
       })
     } else {
       Object.assign(lineState, {
         width: width * scale,
         height: height * scale,
-        top: top * scale + y,
-        left: left * scale + x,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
         position: canvasState.type === 'absolute' || getPosLine(rect, configure).type
       })
     }
@@ -566,8 +595,8 @@ const setHoverRect = (element, data) => {
   Object.assign(hoverState, {
     width: width * scale,
     height: height * scale,
-    top: top * scale + y,
-    left: left * scale + x,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
     componentName
   })
   return undefined
diff --git a/packages/design-core/src/DesignCanvas.vue b/packages/design-core/src/DesignCanvas.vue
index d76bee21c5..21dcb7afa6 100644
--- a/packages/design-core/src/DesignCanvas.vue
+++ b/packages/design-core/src/DesignCanvas.vue
@@ -175,6 +175,7 @@ export default {
     height: calc(100% - var(--base-bottom-panel-height, 30px) - 36px);
     background: var(--ti-lowcode-breadcrumb-hover-bg);
     position: absolute;
+    overflow: hidden;
     margin: 18px 0;
   }
 }

From 75dd9da7d8491cfdb5b8cba0e66ca041b29d7b5a Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Tue, 9 Jan 2024 03:21:40 -0800
Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/canvas/src/components/container/CanvasAction.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index ff396eaf96..14f06f6897 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -339,7 +339,7 @@ export default {
         }
 
         if (isLabelAtBottom === isOptionAtBottom) {
-          // 标签框和工作操作框都在顶部或者都在底部
+          // 标签框和工具操作框都在顶部或者都在底部
 
           // 都放在左侧
           styleObjAlign(labelStyleObj, 'left')

From 654de8b963f9dcf7468e9f4ddf4a6c7c187a8498 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 10 Jan 2024 01:10:47 -0800
Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=E9=80=89=E4=B8=AD=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E5=90=8E=E6=94=AF=E6=8C=81=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue |  9 ++++---
 .../src/components/container/container.js     | 24 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 14f06f6897..11f47183a2 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -104,6 +104,9 @@ const OPTION_BAR_HEIGHT = 24
 // 标签高度
 const LABEL_HEIGHT = 24
 
+// 画布右边滚动条宽度
+const SCROLL_BAR_WIDTH = 8
+
 // 当工具操作条和标签高度并排显示时，需要的间距 6px
 const OPTION_SPACE = 6
 
@@ -327,7 +330,7 @@ export default {
         // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距
 
         // label 是否对齐右侧
-        const isLabelAlignRight = left + labelRect.width > siteCanvasWidth && labelRect.width > width
+        const isLabelAlignRight = left + labelRect.width + SCROLL_BAR_WIDTH > siteCanvasWidth && labelRect.width > width
         if (isLabelAlignRight) {
           styleObjAlign(labelStyleObj, 'right')
         }
@@ -356,8 +359,8 @@ export default {
           styleObjAlign(labelStyleObj, 'left', Math.min(-left, width - fullRectWidth))
         }
 
-        if (left + width > siteCanvasWidth) {
-          styleObjAlign(optionStyleObj, 'right', Math.min(left + width - siteCanvasWidth, width - fullRectWidth))
+        if (left + width + SCROLL_BAR_WIDTH > siteCanvasWidth) {
+          styleObjAlign(optionStyleObj, 'right', Math.min(left + width + SCROLL_BAR_WIDTH - siteCanvasWidth, width - fullRectWidth))
         }
       }
 
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index e7bff43abb..bb4f04c0e6 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -495,16 +495,30 @@ export const hoverNode = (id, data) => {
   element && setHoverRect(element, data)
 }
 
+// 滚动页面后，目标元素与页面边界至少保留的边距
+const SCROLL_MARGIN = 15
+
 export const scrollToNode = (element) => {
   if (element) {
     const container = getDocument().documentElement
-    const h = container?.clientHeight
-    const { y, height } = element.getBoundingClientRect()
+    const { clientWidth, clientHeight } = container
+    const { x, y, width, height } = element.getBoundingClientRect()
+    const option = {}
+
+    if (x < 0) {
+      option.left = container.scrollLeft + x - SCROLL_MARGIN
+    } else if (x > clientWidth) {
+      option.left = x + width - clientWidth + SCROLL_MARGIN
+    }
 
     if (y < 0) {
-      container.scrollTo({ top: container.scrollTop + y - 15 })
-    } else if (y > h) {
-      container.scrollTo({ top: y + height - h + 15 })
+      option.top = container.scrollTop + y - SCROLL_MARGIN
+    } else if (y > clientHeight) {
+      option.top = y + height - clientHeight + SCROLL_MARGIN
+    }
+
+    if (typeof option.left === 'number' || typeof option.top === 'number') {
+      container.scrollTo(option)
     }
   }
 

From 0688a9dd3f36835e29fe2ca5721ce6564b2df21b Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 15 Jan 2024 04:10:19 -0800
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=E6=A0=B9=E6=8D=AE=E5=9E=82=E7=9B=B4?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E8=B0=83=E6=95=B4=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=9D=A1=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue | 153 +++++++++++-------
 .../src/components/container/container.js     |   6 +-
 2 files changed, 99 insertions(+), 60 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 11f47183a2..89251a13d4 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -269,46 +269,75 @@ export default {
     const labelRef = ref(null)
     const labelStyle = ref('')
 
-    const styleObj2Str = (styleObj) => {
-      return Object.entries(styleObj)
-        .map(([key, value]) => {
-          const num = Number(value)
+    class Align {
+      alignLeft = false
+      horizontalValue = 0
+      alignTop = false
+      verticalValue = 0
+
+      constructor({ alignLeft, horizontalValue, alignTop, verticalValue }) {
+        this.alignLeft = alignLeft
+        this.horizontalValue = horizontalValue
+        this.alignTop = alignTop
+        this.verticalValue = verticalValue
+      }
 
-          if (Number.isNaN(num)) {
-            return `${key}:${value}`
+      align(position, value = 0) {
+        if (typeof position === 'string') {
+          if (position === 'left' || position === 'right') {
+            this.alignLeft = position === 'left'
+            this.horizontalValue = value
+            return this
+          }
+          if (position === 'top' || position === 'bottom') {
+            this.alignTop = position === 'top'
+            this.horizontalValue = value
+            return this
           }
+        }
+        return this
+      }
 
-          const val = key === 'right' || key === 'left' ? num - SELECTION_BORDER_WIDTH : num
-          return `${key}:${val}px`
-        })
-        .join(';')
-    }
+      toStyleValue() {
+        const styleObj = {}
 
-    const styleObjAlign = (obj, position, val = 0) => {
-      if (position === 'left') {
-        obj.left = val
-        obj.right = STYLE_UNSET
-        return
-      }
-      if (position === 'right') {
-        obj.left = STYLE_UNSET
-        obj.right = val
-        return
-      }
-      if (position === 'top') {
-        obj.top = val
-        obj.bottom = STYLE_UNSET
-        return
+        if (this.alignLeft) {
+          styleObj.left = this.horizontalValue
+          styleObj.right = STYLE_UNSET
+        } else {
+          styleObj.right = this.horizontalValue
+          styleObj.left = STYLE_UNSET
+        }
+
+        if (this.alignTop) {
+          styleObj.top = this.verticalValue
+          styleObj.bottom = STYLE_UNSET
+        } else {
+          styleObj.bottom = this.verticalValue
+          styleObj.top = STYLE_UNSET
+        }
+
+        return this.styleObj2Str(styleObj)
       }
-      if (position === 'bottom') {
-        obj.top = STYLE_UNSET
-        obj.bottom = val
-        return
+
+      styleObj2Str = (styleObj) => {
+        return Object.entries(styleObj)
+          .map(([key, value]) => {
+            const num = Number(value)
+
+            if (Number.isNaN(num)) {
+              return `${key}:${value}`
+            }
+
+            const val = key === 'right' || key === 'left' ? num - SELECTION_BORDER_WIDTH : num
+            return `${key}:${val}px`
+          })
+          .join(';')
       }
     }
 
     const getStyleValues = (selectState, siteCanvasWidth, siteCanvasHeight) => {
-      const { left, top, width, height } = selectState
+      const { left, top, width, height, doc } = selectState
       const labelRect = labelRef.value.getBoundingClientRect()
       const optionRect = optionRef.value.getBoundingClientRect()
       // 标签宽度和工具操作条宽度之和加上间距
@@ -316,63 +345,71 @@ export default {
 
       // 是否 将label 标签放置到底部，判断 top 距离
       const isLabelAtBottom = top <= LABEL_HEIGHT
-      const labelStyleObj = {}
-      styleObjAlign(labelStyleObj, isLabelAtBottom ? 'bottom' : 'top', -LABEL_HEIGHT)
-      styleObjAlign(labelStyleObj, 'left')
+      const labelAlign = new Align({
+        alignLeft: true,
+        horizontalValue: 0,
+        alignTop: !isLabelAtBottom,
+        verticalValue: -LABEL_HEIGHT
+      })
 
       // 是否将操作栏放置到底部，判断当前选中组件底部与页面底部的距离。
       const isOptionAtBottom = siteCanvasHeight - top - height > OPTION_BAR_HEIGHT
-      const optionStyleObj = {}
-      styleObjAlign(optionStyleObj, isOptionAtBottom ? 'bottom' : 'top', -OPTION_BAR_HEIGHT)
-      styleObjAlign(optionStyleObj, 'right')
+      const optionAlign = new Align({
+        alignLeft: false,
+        horizontalValue: 0,
+        alignTop: !isOptionAtBottom,
+        verticalValue: -OPTION_BAR_HEIGHT
+      })
+
+      const scrollBarWidth = doc.documentElement.scrollHeight > doc.documentElement.clientHeight ? SCROLL_BAR_WIDTH : 0
 
       if (width < fullRectWidth) {
         // 选中框宽度小于标签宽度和工具操作条宽度之和加上间距
 
-        // label 是否对齐右侧
-        const isLabelAlignRight = left + labelRect.width + SCROLL_BAR_WIDTH > siteCanvasWidth && labelRect.width > width
+        // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
+        const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
         if (isLabelAlignRight) {
-          styleObjAlign(labelStyleObj, 'right')
+          labelAlign.align('right')
         }
 
-        // option 是否对齐左侧
-        const isOptionAlignLeft = left + width < optionRect.width && optionRect.width > width
+        // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
+        const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
         if (isOptionAlignLeft) {
-          styleObjAlign(optionStyleObj, 'left')
+          optionAlign.align('left')
         }
 
         if (isLabelAtBottom === isOptionAtBottom) {
           // 标签框和工具操作框都在顶部或者都在底部
 
-          // 都放在左侧
-          styleObjAlign(labelStyleObj, 'left')
-          styleObjAlign(optionStyleObj, 'left', labelRect.width + OPTION_SPACE)
-
-          // 都放在右侧
-          if (left + fullRectWidth > siteCanvasWidth) {
-            styleObjAlign(optionStyleObj, 'right')
-            styleObjAlign(labelStyleObj, 'right', optionRect.width + OPTION_SPACE)
+          if (left + fullRectWidth < siteCanvasWidth) {
+            // 都放在左侧
+            labelAlign.align('left')
+            optionAlign.align('left', labelRect.width + OPTION_SPACE)
+          } else {
+            // 都放在右侧
+            optionAlign.align('right')
+            labelAlign.align('right', optionRect.width + OPTION_SPACE)
           }
         }
       } else {
         if (left < 0) {
-          styleObjAlign(labelStyleObj, 'left', Math.min(-left, width - fullRectWidth))
+          labelAlign.align('left', Math.min(-left, width - fullRectWidth))
         }
 
-        if (left + width + SCROLL_BAR_WIDTH > siteCanvasWidth) {
-          styleObjAlign(optionStyleObj, 'right', Math.min(left + width + SCROLL_BAR_WIDTH - siteCanvasWidth, width - fullRectWidth))
+        if (left + width + scrollBarWidth > siteCanvasWidth) {
+          optionAlign.align('right', Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth))
         }
       }
 
       return {
-        labelStyleValue: styleObj2Str(labelStyleObj),
-        optionStyleValue: styleObj2Str(optionStyleObj)
+        labelStyleValue: labelAlign.toStyleValue(),
+        optionStyleValue: optionAlign.toStyleValue()
       }
     }
 
     watchPostEffect(async () => {
       let { left } = props.selectState
-      const { top, width, height } = props.selectState
+      const { top, width, height, doc } = props.selectState
 
       // nextTick后ref才能获取到元素。需要把监听的依赖放在await之前，否则无法监听变化
       await nextTick()
@@ -393,7 +430,7 @@ export default {
       left -= ((1 - scale) / 2) * siteCanvasRect.width
 
       const { labelStyleValue, optionStyleValue } = getStyleValues(
-        { left, top, width, height },
+        { left, top, width, height, doc },
         siteCanvasRect.width * scale,
         siteCanvasRect.height
       )
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index bb4f04c0e6..37ce812de0 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -77,7 +77,8 @@ const initialLineState = {
   left: 0,
   position: '',
   id: '',
-  config: null
+  config: null,
+  doc: null
 }
 
 // 选中画布中元素时的状态
@@ -538,7 +539,8 @@ const setSelectRect = (element) => {
     height: height * scale,
     top: top * scale + y - siteCanvasRect.y,
     left: left * scale + x - siteCanvasRect.x,
-    componentName
+    componentName,
+    doc: getDocument()
   })
 }
 

From be46b1aeb0feabe53ae51d84fc84a3727b7dfc37 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 15 Jan 2024 04:26:22 -0800
Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 89251a13d4..2a21c8ecd7 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -283,17 +283,15 @@ export default {
       }
 
       align(position, value = 0) {
-        if (typeof position === 'string') {
-          if (position === 'left' || position === 'right') {
-            this.alignLeft = position === 'left'
-            this.horizontalValue = value
-            return this
-          }
-          if (position === 'top' || position === 'bottom') {
-            this.alignTop = position === 'top'
-            this.horizontalValue = value
-            return this
-          }
+        if (position === 'left' || position === 'right') {
+          this.alignLeft = position === 'left'
+          this.horizontalValue = value
+          return this
+        }
+        if (position === 'top' || position === 'bottom') {
+          this.alignTop = position === 'top'
+          this.horizontalValue = value
+          return this
         }
         return this
       }

From 7170c6c15b4f0a241a09b69ea119518d5d80f034 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Mon, 15 Jan 2024 19:00:45 -0800
Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 2a21c8ecd7..4eba2f9243 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -269,6 +269,19 @@ export default {
     const labelRef = ref(null)
     const labelStyle = ref('')
 
+    const Position = {
+      LEFT: 'left',
+      RIGHT: 'right',
+      TOP: 'top',
+      BOTTOM: 'bottom',
+      isHorizontal(position) {
+        return [this.LEFT, this.RIGHT].includes(position)
+      },
+      isVertical(position) {
+        return [this.TOP, this.BOTTOM].includes(position)
+      }
+    }
+
     class Align {
       alignLeft = false
       horizontalValue = 0
@@ -283,13 +296,13 @@ export default {
       }
 
       align(position, value = 0) {
-        if (position === 'left' || position === 'right') {
-          this.alignLeft = position === 'left'
+        if (Position.isHorizontal(position)) {
+          this.alignLeft = position === Position.LEFT
           this.horizontalValue = value
           return this
         }
-        if (position === 'top' || position === 'bottom') {
-          this.alignTop = position === 'top'
+        if (Position.isVertical(position)) {
+          this.alignTop = position === Position.TOP
           this.horizontalValue = value
           return this
         }
@@ -327,7 +340,7 @@ export default {
               return `${key}:${value}`
             }
 
-            const val = key === 'right' || key === 'left' ? num - SELECTION_BORDER_WIDTH : num
+            const val = Position.isHorizontal(key) ? num - SELECTION_BORDER_WIDTH : num
             return `${key}:${val}px`
           })
           .join(';')
@@ -367,13 +380,13 @@ export default {
         // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
         const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
         if (isLabelAlignRight) {
-          labelAlign.align('right')
+          labelAlign.align(Position.RIGHT)
         }
 
         // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
         const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
         if (isOptionAlignLeft) {
-          optionAlign.align('left')
+          optionAlign.align(Position.LEFT)
         }
 
         if (isLabelAtBottom === isOptionAtBottom) {
@@ -381,21 +394,24 @@ export default {
 
           if (left + fullRectWidth < siteCanvasWidth) {
             // 都放在左侧
-            labelAlign.align('left')
-            optionAlign.align('left', labelRect.width + OPTION_SPACE)
+            labelAlign.align(Position.LEFT)
+            optionAlign.align(Position.LEFT, labelRect.width + OPTION_SPACE)
           } else {
             // 都放在右侧
-            optionAlign.align('right')
-            labelAlign.align('right', optionRect.width + OPTION_SPACE)
+            optionAlign.align(Position.RIGHT)
+            labelAlign.align(Position.RIGHT, optionRect.width + OPTION_SPACE)
           }
         }
       } else {
         if (left < 0) {
-          labelAlign.align('left', Math.min(-left, width - fullRectWidth))
+          labelAlign.align(Position.LEFT, Math.min(-left, width - fullRectWidth))
         }
 
         if (left + width + scrollBarWidth > siteCanvasWidth) {
-          optionAlign.align('right', Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth))
+          optionAlign.align(
+            Position.RIGHT,
+            Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth)
+          )
         }
       }
 

From 375d1b2f7ceaacce1284986efdb17e892877c199 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Tue, 16 Jan 2024 00:12:16 -0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/CanvasAction.vue | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue
index 4eba2f9243..5008e1c468 100644
--- a/packages/canvas/src/components/container/CanvasAction.vue
+++ b/packages/canvas/src/components/container/CanvasAction.vue
@@ -269,7 +269,7 @@ export default {
     const labelRef = ref(null)
     const labelStyle = ref('')
 
-    const Position = {
+    const positions = {
       LEFT: 'left',
       RIGHT: 'right',
       TOP: 'top',
@@ -296,13 +296,13 @@ export default {
       }
 
       align(position, value = 0) {
-        if (Position.isHorizontal(position)) {
-          this.alignLeft = position === Position.LEFT
+        if (positions.isHorizontal(position)) {
+          this.alignLeft = position === positions.LEFT
           this.horizontalValue = value
           return this
         }
-        if (Position.isVertical(position)) {
-          this.alignTop = position === Position.TOP
+        if (positions.isVertical(position)) {
+          this.alignTop = position === positions.TOP
           this.horizontalValue = value
           return this
         }
@@ -340,7 +340,7 @@ export default {
               return `${key}:${value}`
             }
 
-            const val = Position.isHorizontal(key) ? num - SELECTION_BORDER_WIDTH : num
+            const val = positions.isHorizontal(key) ? num - SELECTION_BORDER_WIDTH : num
             return `${key}:${val}px`
           })
           .join(';')
@@ -380,13 +380,13 @@ export default {
         // 如果labe宽度大于选中框宽度，并且label右侧已经超出画布，则label对齐右侧
         const isLabelAlignRight = labelRect.width > width && left + labelRect.width + scrollBarWidth > siteCanvasWidth
         if (isLabelAlignRight) {
-          labelAlign.align(Position.RIGHT)
+          labelAlign.align(positions.RIGHT)
         }
 
         // 如果option宽度大于选中框宽度，并且option左侧已经超出画布，则option对齐左侧
         const isOptionAlignLeft = optionRect.width > width && left + width - optionRect.width < 0
         if (isOptionAlignLeft) {
-          optionAlign.align(Position.LEFT)
+          optionAlign.align(positions.LEFT)
         }
 
         if (isLabelAtBottom === isOptionAtBottom) {
@@ -394,22 +394,22 @@ export default {
 
           if (left + fullRectWidth < siteCanvasWidth) {
             // 都放在左侧
-            labelAlign.align(Position.LEFT)
-            optionAlign.align(Position.LEFT, labelRect.width + OPTION_SPACE)
+            labelAlign.align(positions.LEFT)
+            optionAlign.align(positions.LEFT, labelRect.width + OPTION_SPACE)
           } else {
             // 都放在右侧
-            optionAlign.align(Position.RIGHT)
-            labelAlign.align(Position.RIGHT, optionRect.width + OPTION_SPACE)
+            optionAlign.align(positions.RIGHT)
+            labelAlign.align(positions.RIGHT, optionRect.width + OPTION_SPACE)
           }
         }
       } else {
         if (left < 0) {
-          labelAlign.align(Position.LEFT, Math.min(-left, width - fullRectWidth))
+          labelAlign.align(positions.LEFT, Math.min(-left, width - fullRectWidth))
         }
 
         if (left + width + scrollBarWidth > siteCanvasWidth) {
           optionAlign.align(
-            Position.RIGHT,
+            positions.RIGHT,
             Math.min(left + width + scrollBarWidth - siteCanvasWidth, width - fullRectWidth)
           )
         }

From 4308e65832a71b553366ee38d86ee66dabeea914 Mon Sep 17 00:00:00 2001
From: gene9831 <pacify.98@gmail.com>
Date: Wed, 24 Jan 2024 23:22:37 -0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=87=BD=E6=95=B0?=
 =?UTF-8?q?=E9=A1=BA=E5=BA=8F=EF=BC=8C=E6=B6=88=E9=99=A4eslint=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/container/container.js     | 675 +++++++++---------
 1 file changed, 338 insertions(+), 337 deletions(-)

diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index 37ce812de0..a2d43fe245 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -51,6 +51,28 @@ export const canvasState = shallowReactive({
   loopId: null
 })
 
+export const getRenderer = () => canvasState.renderer
+
+export const getController = () => canvasState.controller
+
+export const getDocument = () => canvasState.iframe.contentDocument
+
+export const getWindow = () => canvasState.iframe.contentWindow
+
+export const getCurrent = () => {
+  return {
+    schema: canvasState.current,
+    parent: canvasState.parent,
+    loopId: canvasState.loopId
+  }
+}
+
+export const getGlobalState = () => getRenderer().getGlobalState()
+
+export const getNode = (id, parent) => getRenderer()?.getNode(id, parent)
+
+export const getSchema = () => getRenderer()?.getSchema()
+
 export const getContext = () => {
   return getRenderer().getContext()
 }
@@ -96,6 +118,43 @@ export const lineState = reactive({
   ...initialLineState
 })
 
+export const clearHover = () => {
+  Object.assign(hoverState, initialRectState, { slot: null })
+}
+
+export const clearSelect = () => {
+  canvasState.current = null
+  canvasState.parent = null
+  Object.assign(selectState, initialRectState)
+  // 临时借用 remote 事件出发 currentSchema 更新
+  canvasState?.emit?.('remove')
+}
+
+const smoothScroll = {
+  timmer: null,
+  /**
+   *
+   * @param {*} up 方向
+   * @param {*} step 每次滚动距离
+   * @param {*} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
+   */
+  start(up, step = 40, time = 100) {
+    const dom = getDocument().documentElement
+    const fn = () => {
+      const top = up ? dom.scrollTop + step : dom.scrollTop - step
+
+      dom.scrollTo({ top, behavior: 'smooth' })
+      this.timmer = setTimeout(fn, time)
+    }
+
+    this.timmer || fn()
+  },
+  stop() {
+    clearTimeout(this.timmer)
+    this.timmer = null
+  }
+}
+
 export const dragStart = (
   data,
   element,
@@ -239,138 +298,249 @@ export const removeNodeById = (id) => {
   canvasState.emit('remove')
 }
 
-export const insertNode = (node, position = POSITION.IN, select = true) => {
-  if (!node.parent) {
-    insertInner({ node: canvasState.schema, data: node.data }, position)
-  } else {
-    switch (position) {
-      case POSITION.TOP:
-      case POSITION.LEFT:
-        insertBefore(node)
-        break
-      case POSITION.BOTTOM:
-      case POSITION.RIGHT:
-        inserAfter(node)
-        break
-      case POSITION.IN:
-        insertInner(node)
-        break
-      default:
-        insertInner(node)
-        break
-    }
+export const querySelectById = (id) => {
+  let selector = `[${NODE_UID}="${id}"]`
+  const doc = canvasState.iframe.contentDocument
+  let element = doc.querySelector(selector)
+  const loopId = element?.getAttribute('loop-id')
+  if (element && loopId) {
+    const currentLoopId = getCurrent().loopId
+    selector = `[${NODE_UID}="${id}"][${NODE_LOOP}="${currentLoopId}"]`
+    element = doc.querySelector(selector)
   }
+  return element
+}
 
-  select && setTimeout(() => selectNode(node.data.id))
+export const getCurrentElement = () => querySelectById(getCurrent().schema?.id)
 
-  getController().addHistory()
-}
+// 滚动页面后，目标元素与页面边界至少保留的边距
+const SCROLL_MARGIN = 15
 
-export const addComponent = (data, position) => {
-  const { schema, parent } = getCurrent()
+export const scrollToNode = (element) => {
+  if (element) {
+    const container = getDocument().documentElement
+    const { clientWidth, clientHeight } = container
+    const { x, y, width, height } = element.getBoundingClientRect()
+    const option = {}
 
-  insertNode({ node: schema, parent, data }, position)
-}
+    if (x < 0) {
+      option.left = container.scrollLeft + x - SCROLL_MARGIN
+    } else if (x > clientWidth) {
+      option.left = x + width - clientWidth + SCROLL_MARGIN
+    }
 
-export const copyNode = (id) => {
-  if (!id) {
-    return
+    if (y < 0) {
+      option.top = container.scrollTop + y - SCROLL_MARGIN
+    } else if (y > clientHeight) {
+      option.top = y + height - clientHeight + SCROLL_MARGIN
+    }
+
+    if (typeof option.left === 'number' || typeof option.top === 'number') {
+      container.scrollTo(option)
+    }
   }
-  const { node, parent } = getNode(id, true)
 
-  inserAfter({ parent, node, data: copyObject(node) })
-  getController().addHistory()
+  return nextTick()
 }
+const setSelectRect = (element) => {
+  element = element || getDocument().body
 
-export const onMouseUp = ({ target }) => {
-  const { draging, data } = dragState
-  const { position } = lineState
-  const absolute = canvasState.type === 'absolute'
-  const sourceId = data?.id
-  const lineId = lineState.id
-  const allowInsert = position !== POSITION.FORBID
-
-  if (draging && allowInsert) {
-    const { parent, node } = getNode(lineId, true) || {} // target
-    const targetNode = { parent, node, data: toRaw(data) }
+  const { left, height, top, width } = getRect(element)
+  const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+  const componentName = getCurrent().schema?.componentName || ''
+  const scale = useLayout().getScale()
+  clearHover()
+  Object.assign(selectState, {
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
+    componentName,
+    doc: getDocument()
+  })
+}
 
-    if (sourceId) {
-      // 内部拖拽
-      if (sourceId !== lineId && !absolute) {
-        removeNode(getNode(sourceId, true))
-        insertNode(targetNode, position)
-      }
-    } else {
-      // 从外部拖拽进来的无ID，insert
-      if (absolute) {
-        targetNode.node = getSchema()
-        data.props = data.props || {}
-        data.props.style = {
-          position: 'absolute',
-          top: dragState.mouse.y + 'px',
-          left: dragState.mouse.x + 'px'
-        }
-      }
+export const updateRect = (id) => {
+  id = (typeof id === 'string' && id) || getCurrent().schema?.id
+  clearHover()
 
-      insertNode(targetNode, position)
+  if (id) {
+    setTimeout(() => setSelectRect(querySelectById(id)))
+  } else {
+    // 如果选中的是body，不清除选中框
+    if (!selectState.componentName && selectState.width > 0) {
+      return
     }
+    clearSelect()
   }
-
-  // 重置拖拽状态
-  dragEnd()
 }
 
-const smoothScroll = {
-  timmer: null,
-  /**
-   *
-   * @param {*} up 方向
-   * @param {*} step 每次滚动距离
-   * @param {*} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
-   */
-  start(up, step = 40, time = 100) {
-    const dom = getDocument().documentElement
-    const fn = () => {
-      const top = up ? dom.scrollTop + step : dom.scrollTop - step
+export const getConfigure = (targetName) => {
+  const material = getController().getMaterial(targetName)
 
-      dom.scrollTo({ top, behavior: 'smooth' })
-      this.timmer = setTimeout(fn, time)
+  // 这里如果是区块插槽，则返回标识为容器的对象
+  if (targetName === 'Template') {
+    return {
+      isContainer: true
     }
-
-    this.timmer || fn()
-  },
-  stop() {
-    clearTimeout(this.timmer)
-    this.timmer = null
   }
+
+  return material?.content?.configure || material.configure || {}
 }
 
-// 绝对布局
-const absoluteMove = (event, element) => {
-  const { clientX, clientY } = event
-  const { offsetX, offsetY, horizontal, vertical, height, width, x, y } = dragState.offset
+/**
+ * 是否允许插入
+ * @param {*} configure 当前放置目标的 configure，比如getConfigure(componentName)
+ * @param {*} data 当前插入目标的schame数据
+ * @returns
+ */
+export const allowInsert = (configure = hoverState.configure || {}, data = dragState.data || {}) => {
+  const { nestingRule = {} } = configure
+  const { childWhitelist = [], descendantBlacklist = [] } = nestingRule
 
-  element.style.position = 'absolute'
+  // 要插入的父节点必须是容器
+  if (!configure.isContainer) {
+    return false
+  }
 
-  if (!horizontal) {
-    // 未传方向信息时判断为移动元素位置
-    element.style.top = `${clientY - offsetY}px`
-    element.style.left = `${clientX - offsetX}px`
-  } else {
-    // 调整元素大小
-    if (horizontal === 'start') {
-      element.style.left = `${clientX}px`
-      element.style.width = `${width + (x - clientX)}px`
-    }
+  let flag = true
+  // 白名单
+  flag = childWhitelist.length ? childWhitelist.includes(data?.componentName) : true
 
-    if (horizontal === 'end') {
-      element.style.width = `${clientX - x}px`
-    }
+  // 黑名单
+  if (descendantBlacklist.length) {
+    flag = !descendantBlacklist.includes(data?.componentName)
+  }
 
-    if (vertical === 'start') {
-      element.style.top = `${clientY}px`
-      element.style.height = `${height + (y - clientY)}px`
-    }
+  return flag
+}
+
+// 获取位置信息，返回状态
+const lineAbs = 20
+const getPosLine = (rect, configure) => {
+  const mousePos = dragState.mouse
+  const yAbs = Math.min(lineAbs, rect.height / 3)
+  const xAbs = Math.min(lineAbs, rect.width / 3)
+  let type
+
+  if (mousePos.y < rect.top + yAbs) {
+    type = POSITION.TOP
+  } else if (mousePos.y > rect.bottom - yAbs) {
+    type = POSITION.BOTTOM
+  } else if (mousePos.x < rect.left + xAbs) {
+    type = POSITION.LEFT
+  } else if (mousePos.x > rect.right - xAbs) {
+    type = POSITION.RIGHT
+  } else if (configure.isContainer) {
+    type = allowInsert() ? POSITION.IN : POSITION.FORBID
+  } else {
+    type = POSITION.BOTTOM
+  }
+
+  return { type }
+}
+
+const isBodyEl = (element) => element.nodeName === 'BODY'
+
+const setHoverRect = (element, data) => {
+  if (!element) {
+    return clearHover()
+  }
+  const componentName = element.getAttribute(NODE_TAG)
+  const id = element.getAttribute(NODE_UID)
+  const configure = getConfigure(componentName)
+  const rect = getRect(element)
+  const { left, height, top, width } = rect
+  const { x, y } = getOffset(element)
+  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
+  const scale = useLayout().getScale()
+
+  hoverState.configure = configure
+
+  if (data) {
+    let childEle = null
+    lineState.id = id
+    lineState.configure = configure
+    const rectType = isBodyEl(element) ? POSITION.IN : getPosLine(rect, configure).type
+
+    // 如果拖拽经过的元素是body或者是带有容器属性的盒子，并且在元素内部插入,则需要特殊处理
+    if ((isBodyEl(element) || configure?.isContainer) && rectType === POSITION.IN) {
+      const { node } = isBodyEl(element) ? { node: getSchema() } : getNode(id, true) || {}
+      const children = node?.children || []
+      if (children.length > 0) {
+        // 如果容器盒子有子节点，则以最后一个子节点为拖拽参照物
+        const lastNode = children[children.length - 1]
+        childEle = querySelectById(lastNode.id)
+        const childComponentName = element.getAttribute(childEle)
+        const Childconfigure = getConfigure(childComponentName)
+        lineState.id = lastNode.id
+        lineState.configure = Childconfigure
+      }
+    }
+
+    // 如果容器盒子有子元素
+    if (childEle) {
+      const childRect = getRect(childEle)
+      const { left, height, top, width } = childRect
+      const { x, y } = getOffset(childEle)
+      Object.assign(lineState, {
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
+        position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type
+      })
+    } else {
+      Object.assign(lineState, {
+        width: width * scale,
+        height: height * scale,
+        top: top * scale + y - siteCanvasRect.y,
+        left: left * scale + x - siteCanvasRect.x,
+        position: canvasState.type === 'absolute' || getPosLine(rect, configure).type
+      })
+    }
+
+    useLayout().closePlugin()
+  }
+
+  // 设置元素hover状态
+  Object.assign(hoverState, {
+    width: width * scale,
+    height: height * scale,
+    top: top * scale + y - siteCanvasRect.y,
+    left: left * scale + x - siteCanvasRect.x,
+    componentName
+  })
+  return undefined
+}
+
+// 绝对布局
+const absoluteMove = (event, element) => {
+  const { clientX, clientY } = event
+  const { offsetX, offsetY, horizontal, vertical, height, width, x, y } = dragState.offset
+
+  element.style.position = 'absolute'
+
+  if (!horizontal) {
+    // 未传方向信息时判断为移动元素位置
+    element.style.top = `${clientY - offsetY}px`
+    element.style.left = `${clientX - offsetX}px`
+  } else {
+    // 调整元素大小
+    if (horizontal === 'start') {
+      element.style.left = `${clientX}px`
+      element.style.width = `${width + (x - clientX)}px`
+    }
+
+    if (horizontal === 'end') {
+      element.style.width = `${clientX - x}px`
+    }
+
+    if (vertical === 'start') {
+      element.style.top = `${clientY}px`
+      element.style.height = `${height + (y - clientY)}px`
+    }
 
     if (vertical === 'end') {
       element.style.height = `${clientY - y}px`
@@ -426,47 +596,6 @@ export const dragMove = (event, isHover) => {
   }
 }
 
-export const clearHover = () => {
-  Object.assign(hoverState, initialRectState, { slot: null })
-}
-
-export const clearSelect = () => {
-  canvasState.current = null
-  canvasState.parent = null
-  Object.assign(selectState, initialRectState)
-  // 临时借用 remote 事件出发 currentSchema 更新
-  canvasState?.emit?.('remove')
-}
-
-export const querySelectById = (id, type = '') => {
-  let selector = `[${NODE_UID}="${id}"]`
-  const doc = canvasState.iframe.contentDocument
-  let element = doc.querySelector(selector)
-  const loopId = element?.getAttribute('loop-id')
-  if (element && loopId) {
-    const currentLoopId = getCurrent().loopId
-    selector = `[${NODE_UID}="${id}"][${NODE_LOOP}="${currentLoopId}"]`
-    element = doc.querySelector(selector)
-  }
-  return element
-}
-
-export const getCurrentElement = () => querySelectById(getCurrent().schema?.id)
-
-export const updateRect = (id) => {
-  id = (typeof id === 'string' && id) || getCurrent().schema?.id
-  clearHover()
-
-  if (id) {
-    setTimeout(() => setSelectRect(querySelectById(id)))
-  } else {
-    // 如果选中的是body，不清除选中框
-    if (!selectState.componentName && selectState.width > 0) {
-      return
-    }
-    clearSelect()
-  }
-}
 // type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
 export const selectNode = async (id, type) => {
   if (type && type.indexOf('loop-id') > -1) {
@@ -496,191 +625,85 @@ export const hoverNode = (id, data) => {
   element && setHoverRect(element, data)
 }
 
-// 滚动页面后，目标元素与页面边界至少保留的边距
-const SCROLL_MARGIN = 15
-
-export const scrollToNode = (element) => {
-  if (element) {
-    const container = getDocument().documentElement
-    const { clientWidth, clientHeight } = container
-    const { x, y, width, height } = element.getBoundingClientRect()
-    const option = {}
-
-    if (x < 0) {
-      option.left = container.scrollLeft + x - SCROLL_MARGIN
-    } else if (x > clientWidth) {
-      option.left = x + width - clientWidth + SCROLL_MARGIN
-    }
-
-    if (y < 0) {
-      option.top = container.scrollTop + y - SCROLL_MARGIN
-    } else if (y > clientHeight) {
-      option.top = y + height - clientHeight + SCROLL_MARGIN
-    }
-
-    if (typeof option.left === 'number' || typeof option.top === 'number') {
-      container.scrollTo(option)
+export const insertNode = (node, position = POSITION.IN, select = true) => {
+  if (!node.parent) {
+    insertInner({ node: canvasState.schema, data: node.data }, position)
+  } else {
+    switch (position) {
+      case POSITION.TOP:
+      case POSITION.LEFT:
+        insertBefore(node)
+        break
+      case POSITION.BOTTOM:
+      case POSITION.RIGHT:
+        inserAfter(node)
+        break
+      case POSITION.IN:
+        insertInner(node)
+        break
+      default:
+        insertInner(node)
+        break
     }
   }
 
-  return nextTick()
-}
-const setSelectRect = (element) => {
-  element = element || getDocument().body
+  select && setTimeout(() => selectNode(node.data.id))
 
-  const { left, height, top, width } = getRect(element)
-  const { x, y } = getOffset(element)
-  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
-  const componentName = getCurrent().schema?.componentName || ''
-  const scale = useLayout().getScale()
-  clearHover()
-  Object.assign(selectState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y - siteCanvasRect.y,
-    left: left * scale + x - siteCanvasRect.x,
-    componentName,
-    doc: getDocument()
-  })
+  getController().addHistory()
 }
 
-const isBodyEl = (element) => element.nodeName === 'BODY'
-
-const setHoverRect = (element, data) => {
-  if (!element) {
-    return clearHover()
-  }
-  const componentName = element.getAttribute(NODE_TAG)
-  const id = element.getAttribute(NODE_UID)
-  const configure = getConfigure(componentName)
-  const rect = getRect(element)
-  const { left, height, top, width } = rect
-  const { x, y } = getOffset(element)
-  const siteCanvasRect = document.querySelector('.site-canvas').getBoundingClientRect()
-  const scale = useLayout().getScale()
-
-  hoverState.configure = configure
-
-  if (data) {
-    let childEle = null
-    lineState.id = id
-    lineState.configure = configure
-    const rectType = isBodyEl(element) ? POSITION.IN : getPosLine(rect, configure).type
-
-    // 如果拖拽经过的元素是body或者是带有容器属性的盒子，并且在元素内部插入,则需要特殊处理
-    if ((isBodyEl(element) || configure?.isContainer) && rectType === POSITION.IN) {
-      const { node } = isBodyEl(element) ? { node: getSchema() } : getNode(id, true) || {}
-      const children = node?.children || []
-      if (children.length > 0) {
-        // 如果容器盒子有子节点，则以最后一个子节点为拖拽参照物
-        const lastNode = children[children.length - 1]
-        childEle = querySelectById(lastNode.id)
-        const childComponentName = element.getAttribute(childEle)
-        const Childconfigure = getConfigure(childComponentName)
-        lineState.id = lastNode.id
-        lineState.configure = Childconfigure
-      }
-    }
-
-    // 如果容器盒子有子元素
-    if (childEle) {
-      const childRect = getRect(childEle)
-      const { left, height, top, width } = childRect
-      const { x, y } = getOffset(childEle)
-      Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y - siteCanvasRect.y,
-        left: left * scale + x - siteCanvasRect.x,
-        position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type
-      })
-    } else {
-      Object.assign(lineState, {
-        width: width * scale,
-        height: height * scale,
-        top: top * scale + y - siteCanvasRect.y,
-        left: left * scale + x - siteCanvasRect.x,
-        position: canvasState.type === 'absolute' || getPosLine(rect, configure).type
-      })
-    }
-
-    useLayout().closePlugin()
-  }
+export const addComponent = (data, position) => {
+  const { schema, parent } = getCurrent()
 
-  // 设置元素hover状态
-  Object.assign(hoverState, {
-    width: width * scale,
-    height: height * scale,
-    top: top * scale + y - siteCanvasRect.y,
-    left: left * scale + x - siteCanvasRect.x,
-    componentName
-  })
-  return undefined
+  insertNode({ node: schema, parent, data }, position)
 }
 
-/**
- * 是否允许插入
- * @param {*} configure 当前放置目标的 configure，比如getConfigure(componentName)
- * @param {*} data 当前插入目标的schame数据
- * @returns
- */
-export const allowInsert = (configure = hoverState.configure || {}, data = dragState.data || {}) => {
-  const { nestingRule = {} } = configure
-  const { childWhitelist = [], descendantBlacklist = [] } = nestingRule
-
-  // 要插入的父节点必须是容器
-  if (!configure.isContainer) {
-    return false
-  }
-
-  let flag = true
-  // 白名单
-  flag = childWhitelist.length ? childWhitelist.includes(data?.componentName) : true
-
-  // 黑名单
-  if (descendantBlacklist.length) {
-    flag = !descendantBlacklist.includes(data?.componentName)
+export const copyNode = (id) => {
+  if (!id) {
+    return
   }
+  const { node, parent } = getNode(id, true)
 
-  return flag
+  inserAfter({ parent, node, data: copyObject(node) })
+  getController().addHistory()
 }
 
-export const getConfigure = (targetName) => {
-  const material = getController().getMaterial(targetName)
-
-  // 这里如果是区块插槽，则返回标识为容器的对象
-  if (targetName === 'Template') {
-    return {
-      isContainer: true
-    }
-  }
+export const onMouseUp = () => {
+  const { draging, data } = dragState
+  const { position } = lineState
+  const absolute = canvasState.type === 'absolute'
+  const sourceId = data?.id
+  const lineId = lineState.id
+  const allowInsert = position !== POSITION.FORBID
 
-  return material?.content?.configure || material.configure || {}
-}
+  if (draging && allowInsert) {
+    const { parent, node } = getNode(lineId, true) || {} // target
+    const targetNode = { parent, node, data: toRaw(data) }
 
-// 获取位置信息，返回状态
-const lineAbs = 20
-const getPosLine = (rect, configure) => {
-  const mousePos = dragState.mouse
-  const yAbs = Math.min(lineAbs, rect.height / 3)
-  const xAbs = Math.min(lineAbs, rect.width / 3)
-  let type
+    if (sourceId) {
+      // 内部拖拽
+      if (sourceId !== lineId && !absolute) {
+        removeNode(getNode(sourceId, true))
+        insertNode(targetNode, position)
+      }
+    } else {
+      // 从外部拖拽进来的无ID，insert
+      if (absolute) {
+        targetNode.node = getSchema()
+        data.props = data.props || {}
+        data.props.style = {
+          position: 'absolute',
+          top: dragState.mouse.y + 'px',
+          left: dragState.mouse.x + 'px'
+        }
+      }
 
-  if (mousePos.y < rect.top + yAbs) {
-    type = POSITION.TOP
-  } else if (mousePos.y > rect.bottom - yAbs) {
-    type = POSITION.BOTTOM
-  } else if (mousePos.x < rect.left + xAbs) {
-    type = POSITION.LEFT
-  } else if (mousePos.x > rect.right - xAbs) {
-    type = POSITION.RIGHT
-  } else if (configure.isContainer) {
-    type = allowInsert() ? POSITION.IN : POSITION.FORBID
-  } else {
-    type = POSITION.BOTTOM
+      insertNode(targetNode, position)
+    }
   }
 
-  return { type }
+  // 重置拖拽状态
+  dragEnd()
 }
 
 export const setPageCss = (css = '') => {
@@ -746,26 +769,6 @@ export const setGlobalState = (state) => {
   getRenderer().setGlobalState(state)
 }
 
-export const getGlobalState = () => getRenderer().getGlobalState()
-
-export const getRenderer = () => canvasState.renderer
-
-export const getController = () => canvasState.controller
-
-export const getNode = (id, parent) => getRenderer()?.getNode(id, parent)
-
-export const getDocument = () => canvasState.iframe.contentDocument
-
-export const getWindow = () => canvasState.iframe.contentWindow
-
-export const getCurrent = () => {
-  return {
-    schema: canvasState.current,
-    parent: canvasState.parent,
-    loopId: canvasState.loopId
-  }
-}
-
 export const getNodePath = (id, nodes = []) => {
   const { parent, node } = getNode(id, true) || {}
 
@@ -788,8 +791,6 @@ export const setSchema = async (schema) => {
   return canvasState.schema
 }
 
-export const getSchema = () => getRenderer()?.getSchema()
-
 export const setConfigure = (configure) => {
   getRenderer().setConfigure(configure)
 }