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 @@