diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index b081a562d..2f2cd3b58 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/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'), diff --git a/packages/canvas/common/src/constant.js b/packages/canvas/common/src/constant.js index 9fa572a24..11fa215b4 100644 --- a/packages/canvas/common/src/constant.js +++ b/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' // 运行态 +} diff --git a/packages/canvas/container/src/CanvasContainer.vue b/packages/canvas/container/src/CanvasContainer.vue index c757c4278..74cd1c21b 100644 --- a/packages/canvas/container/src/CanvasContainer.vue +++ b/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 - } - - insertPosition.value = false - setCurrentNode(event) - target.value = event.target + handleCanvasEvent(() => { + // 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) + handleCanvasEvent(() => { + dragMove(ev, true) + }) }) // 阻止浏览器默认的右键菜单功能 diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js index 1bf2a9238..d758c61a4 100644 --- a/packages/canvas/container/src/container.js +++ b/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, diff --git a/packages/canvas/render/src/RenderMain.js b/packages/canvas/render/src/RenderMain.js index 04e2c928f..bb41b5fc7 100644 --- a/packages/canvas/render/src/RenderMain.js +++ b/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 } diff --git a/packages/canvas/render/src/context.js b/packages/canvas/render/src/context.js index 710cf3ed9..67bbf6080 100644 --- a/packages/canvas/render/src/context.js +++ b/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 +} diff --git a/packages/canvas/render/src/render.js b/packages/canvas/render/src/render.js index a27442061..1c5c4a36c 100644 --- 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, 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 } diff --git a/packages/toolbars/refresh/src/Main.vue b/packages/toolbars/refresh/src/Main.vue index 642ade60e..f64d41aaf 100644 --- a/packages/toolbars/refresh/src/Main.vue +++ b/packages/toolbars/refresh/src/Main.vue @@ -4,8 +4,18 @@