feat: add canvas flag

yy-wow · Nov 9, 2024 · 53d5e07 · 53d5e07
1 parent 3dcfb26
commit 53d5e07
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue
@@ -117,6 +117,16 @@ export default {
       }
     }
 
+    const isCanvasEvent = (event, handler) => {
+      const canvasFlag = canvasApi.getRenderer().getCanvasFlag()
+
+      if (!canvasFlag) {
+        return
+      }
+
+      return handler(event)
+    }
+
     const canvasReady = ({ detail }) => {
       if (iframe.value) {
         // 设置monitor报错埋点
@@ -131,15 +141,17 @@ export default {
 
         // 以下是内部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
+          isCanvasEvent(event, () => {
+            // html元素使用scroll和mouseup事件处理
+            if (event.target === doc.documentElement) {
+              isScrolling = false
+              return
+            }
+
+            insertPosition.value = false
+            setCurrentNode(event)
+            target.value = event.target
+          })
         })
 
         win.addEventListener('scroll', () => {
@@ -168,7 +180,9 @@ export default {
         })
 
         win.addEventListener('mousemove', (ev) => {
-          dragMove(ev, true)
+          isCanvasEvent(ev, (e) => {
+            dragMove(e, true)
+          })
         })
 
         // 阻止浏览器默认的右键菜单功能

diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js
@@ -27,7 +27,9 @@ import {
   getCondition,
   getConditions,
   context,
-  setNode
+  setNode,
+  getCanvasFlag,
+  setCanvasFlag
 } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
 
@@ -451,5 +453,7 @@ export const api = {
   setGlobalState,
   setNode,
   getRenderer,
-  setRenderer
+  setRenderer,
+  getCanvasFlag,
+  setCanvasFlag
 }
diff --git a/packages/canvas/render/src/context.js b/packages/canvas/render/src/context.js
@@ -55,3 +55,12 @@ export const setCondition = (id, visible = false) => {
 export const getCondition = (id) => conditions[id] !== false
 
 export const getConditions = () => conditions
+
+// 是否表现画布内特征的标志，用来控制是否允许拖拽、原生事件是否触发等
+let canvasFlag = true
+
+export const getCanvasFlag = () => canvasFlag
+
+export const setCanvasFlag = (flag) => {
+  canvasFlag = flag
+}
diff --git a/packages/canvas/render/src/render.js b/packages/canvas/render/src/render.js
@@ -20,7 +20,7 @@ import i18nHost from '@opentiny/tiny-engine-i18n-host'
 import { CanvasRow, CanvasCol, CanvasRowColContainer } from '@opentiny/tiny-engine-builtin-component'
 
 import { NODE_UID as DESIGN_UIDKEY, NODE_TAG as DESIGN_TAGKEY, NODE_LOOP as DESIGN_LOOPID } from '../../common'
-import { context, conditions, setNode } from './context'
+import { context, conditions, setNode, getCanvasFlag } from './context'
 import {
   CanvasBox,
   CanvasCollection,
@@ -558,16 +558,20 @@ const getBindProps = (schema, scope) => {
   const bindProps = {
     ...parseData(schema.props, scope),
     [DESIGN_UIDKEY]: id,
-    [DESIGN_TAGKEY]: componentName,
-    onMouseover: stopEvent,
-    onFocus: stopEvent
+    [DESIGN_TAGKEY]: componentName
   }
+
+  if (getCanvasFlag()) {
+    bindProps.onMouseover = stopEvent
+    bindProps.onFocus = stopEvent
+  }
+
   if (scope) {
     bindProps[DESIGN_LOOPID] = scope.index === undefined ? scope.idx : scope.index
   }
 
   // 在捕获阶段阻止事件的传播
-  if (clickCapture(componentName)) {
+  if (clickCapture(componentName) && getCanvasFlag()) {
     bindProps.onClickCapture = stopEvent
   }