From 2b2b685d877e8c8b488b9dc8ba06a8cb3255b332 Mon Sep 17 00:00:00 2001 From: lichunn <46984087+lichunn@users.noreply.github.com> Date: Sun, 10 Nov 2024 22:42:07 -0800 Subject: [PATCH 1/3] =?UTF-8?q?fix=EF=BC=9Amissing=20outline=20tree=20eyes?= =?UTF-8?q?=20icon=20(#900)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复大纲树显示隐藏按钮重叠问题 * fix: 调整大纲树眼睛控制状态 --- packages/plugins/tree/src/Main.vue | 31 ++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue index 4ed6584ae..07f85bf20 100644 --- a/packages/plugins/tree/src/Main.vue +++ b/packages/plugins/tree/src/Main.vue @@ -47,8 +47,8 @@ class="tree-box" :schemaId="data.row?.id" :type="data.row.componentName" - @mouseover="mouseover(data.row, $event)" - @mouseleave="mouseleave(data.row, $event)" + @mouseover="mouseover(data.row)" + @mouseleave="mouseleave(data.row)" @click="checkElement(data.row)" > @@ -57,7 +57,7 @@ --> {{ data.row.componentName }} - + @@ -105,6 +105,7 @@ export default { const translateChild = (data) => { data.forEach((item) => { item.show = pageState.nodesStatus[item.id] !== false + item.showEye = !item.show const child = item.children if (typeOf(child) !== 'array') { delete item.children @@ -171,7 +172,7 @@ export default { return component.icon || 'IconAssociation' } - const mouseover = (data, event) => { + const mouseover = (data) => { if (state.isLock) { return } @@ -179,15 +180,14 @@ export default { const { hoverNode } = useCanvas().canvasApi.value hoverNode(data.id) - const handleEl = event.target.querySelector('.tree-handle') - handleEl && (handleEl.style.display = 'block') + data.showEye = true } - const mouseleave = (data, event) => { + const mouseleave = (data) => { if (data && !data.show) { return } - event.target.querySelector('.tree-handle').style.display = 'none' + data.showEye = false } const checkElement = (row) => { @@ -312,16 +312,23 @@ export default { padding-top: 12px; border-top: 1px solid var(--ti-lowcode-tree-border-color); - .tree-handle svg { - color: var(--ti-lowcode-tree-icon-color); + .tree-handle { + svg { + color: var(--ti-lowcode-tree-icon-color); - &:hover { - color: var(--ti-lowcode-tree-hover-icon-color); + &:hover { + color: var(--ti-lowcode-tree-hover-icon-color); + } } } } :deep(.tiny-grid) { background-color: unset; + .tree-box { + display: flex; + width: 200px; + justify-content: space-between; + } .tiny-grid-tree-wrapper { margin-right: 8px; From f13549903547b8e59dec1ab85e5e87ed7ea0c7b4 Mon Sep 17 00:00:00 2001 From: yy <40423888+yy-wow@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:50:29 +0800 Subject: [PATCH 2/3] Feat: add refresh life cycles (#898) * fear: add refresh lifeCycles * feat: add canvas flag * fix: spell * fix: review * fix: review * fix: review --- .../src/vite-plugins/devAliasPlugin.js | 2 +- packages/canvas/common/src/constant.js | 5 +++ .../canvas/container/src/CanvasContainer.vue | 36 +++++++++++------ packages/canvas/container/src/container.js | 6 +++ packages/canvas/render/src/RenderMain.js | 8 +++- packages/canvas/render/src/context.js | 14 +++++++ packages/canvas/render/src/render.js | 14 ++++--- packages/toolbars/refresh/src/Main.vue | 39 ++++++++++++++++--- 8 files changed, 100 insertions(+), 24 deletions(-) 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 @@