Feat: add refresh life cycles (#898)

* fear: add refresh lifeCycles

* feat: add canvas flag

* fix: spell

* fix: review

* fix: review

* fix: review

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -53,8 +53,8 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-theme-light': path.resolve(basePath, 'packages/theme/light/index.less'),
     '@opentiny/tiny-engine-theme-base': path.resolve(basePath, 'packages/theme/base/src/index.js'),
     '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
-    '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
     '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.js'),
+    '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
     '@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.js'),
     '@opentiny/tiny-engine-webcomponent-core': path.resolve(basePath, 'packages/webcomponent/src/lib.js'),
     '@opentiny/tiny-engine-i18n-host': path.resolve(basePath, 'packages/i18n/src/lib.js'),

packages/canvas/common/src/constant.js

@@ -1,3 +1,8 @@
 export const NODE_UID = 'data-uid'
 export const NODE_TAG = 'data-tag'
 export const NODE_LOOP = 'loop-id'
+
+export const DESIGN_MODE = {
+  DESIGN: 'design', // 设计态
+  RUNTIME: 'runtime' // 运行态
+}

packages/canvas/container/src/CanvasContainer.vue

@@ -32,7 +32,7 @@
 import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
 import { useTranslate, useCanvas, useMaterial } from '@opentiny/tiny-engine-meta-register'
-import { NODE_UID, NODE_LOOP } from '../../common'
+import { NODE_UID, NODE_LOOP, DESIGN_MODE } from '../../common'
 import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
 import CanvasAction from './components/CanvasAction.vue'
@@ -117,6 +117,16 @@ export default {
       }
     }
 
+    const handleCanvasEvent = (handler) => {
+      const designMode = canvasApi.getDesignMode()
+
+      if (designMode !== DESIGN_MODE.DESIGN) {
+        return
+      }
+
+      return handler()
+    }
+
     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
-          }
+          handleCanvasEvent(() => {
+            // html元素使用scroll和mouseup事件处理
+            if (event.target === doc.documentElement) {
+              isScrolling = false
+              return
+            }
 
-          insertPosition.value = false
-          setCurrentNode(event)
-          target.value = event.target
+            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)
+          handleCanvasEvent(() => {
+            dragMove(ev, true)
+          })
         })
 
         // 阻止浏览器默认的右键菜单功能

packages/canvas/container/src/container.js

@@ -68,6 +68,10 @@ export const getCurrent = () => {
   }
 }
 
+export const getDesignMode = () => getRenderer()?.getDesignMode()
+
+export const setDesignMode = (mode) => getRenderer()?.setDesignMode(mode)
+
 export const getGlobalState = () => getRenderer().getGlobalState()
 
 export const getNode = (id, parent) => getRenderer()?.getNode(id, parent)
@@ -893,6 +897,8 @@ export const canvasApi = {
   setProps,
   setGlobalState,
   getGlobalState,
+  getDesignMode,
+  setDesignMode,
   getDocument,
   canvasDispatch,
   Builtin,

packages/canvas/render/src/RenderMain.js

@@ -27,7 +27,9 @@ import {
   getCondition,
   getConditions,
   context,
-  setNode
+  setNode,
+  getDesignMode,
+  setDesignMode
 } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
 
@@ -451,5 +453,7 @@ export const api = {
   setGlobalState,
   setNode,
   getRenderer,
-  setRenderer
+  setRenderer,
+  getDesignMode,
+  setDesignMode
 }

packages/canvas/render/src/context.js

@@ -55,3 +55,17 @@ export const setCondition = (id, visible = false) => {
 export const getCondition = (id) => conditions[id] !== false
 
 export const getConditions = () => conditions
+
+export const DESIGN_MODE = {
+  DESIGN: 'design', // 设计态
+  RUNTIME: 'runtime' // 运行态
+}
+
+// 是否表现画布内特征的标志，用来控制是否允许拖拽、原生事件是否触发等
+let designMode = DESIGN_MODE.DESIGN
+
+export const getDesignMode = () => designMode
+
+export const setDesignMode = (mode) => {
+  designMode = mode
+}

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, getDesignMode, DESIGN_MODE } 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 (getDesignMode() === DESIGN_MODE.DESIGN) {
+    bindProps.onMouseover = stopEvent
+    bindProps.onFocus = stopEvent
+  }
+
   if (scope) {
     bindProps[DESIGN_LOOPID] = scope.index === undefined ? scope.idx : scope.index
   }
 
   // 在捕获阶段阻止事件的传播
-  if (clickCapture(componentName)) {
+  if (clickCapture(componentName) && getDesignMode() === DESIGN_MODE.DESIGN) {
     bindProps.onClickCapture = stopEvent
   }
 

packages/toolbars/refresh/src/Main.vue

@@ -4,8 +4,18 @@
 </template>
 
 <script>
-import { useMaterial, useCanvas, useModal, useLayout, useBlock } from '@opentiny/tiny-engine-meta-register'
+import {
+  useMaterial,
+  useCanvas,
+  useModal,
+  useLayout,
+  useBlock,
+  useNotify,
+  useMessage,
+  getOptions
+} from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
+import meta from '../meta'
 
 export default {
   components: {
@@ -22,12 +32,16 @@ export default {
     const { isBlock, isSaved, pageState, initData } = useCanvas()
     const { PLUGIN_NAME, activePlugin, isEmptyPage } = useLayout()
     const { getCurrentBlock, initBlock } = useBlock()
+    const { beforeRefresh } = getOptions(meta.id)
+    const { publish } = useMessage()
 
-    const refreshResouce = () => {
+    const refreshResource = () => {
       // 清空区块缓存(不能清空组件缓存)，保证画布刷新后可以重新注册最新的区块资源
       useMaterial().clearBlockResources()
       // 因为webcomponents无法重复注册，所以需要刷新内部iframe
       useCanvas().canvasApi.value.getDocument().location.reload()
+      // 通知画布更新完成
+      publish({ topic: 'canvas_refreshed' })
     }
 
     const refreshBlock = async () => {
@@ -36,7 +50,7 @@ export default {
       const api = await activePlugin(PLUGIN_NAME.BlockManage, true)
       await api.refreshBlockData(block)
       await initBlock(block, {}, true)
-      refreshResouce()
+      refreshResource()
     }
 
     const refreshPage = async () => {
@@ -48,10 +62,25 @@ export default {
       const api = await activePlugin(PLUGIN_NAME.AppManage, true)
       const page = await api.getPageById(currentPage.id)
       await initData(page['page_content'], page)
-      refreshResouce()
+      refreshResource()
     }
 
-    const refresh = () => {
+    const refresh = async () => {
+      try {
+        if (typeof beforeRefresh === 'function') {
+          const stop = await beforeRefresh()
+
+          if (stop) {
+            return
+          }
+        }
+      } catch (error) {
+        useNotify({
+          type: 'error',
+          message: `Error in beforeRefresh: ${error}`
+        })
+      }
+
       if (isSaved()) {
         isBlock() ? refreshBlock() : refreshPage()
       } else {