From 6e175dfb4db0997cd1b3f2801d2a672cc98ab1cb Mon Sep 17 00:00:00 2001 From: gene9831 Date: Fri, 29 Mar 2024 23:35:19 -0700 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B5=8C=E5=A5=97=E6=8B=96=E6=8B=BD=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/container/CanvasAction.vue | 9 ++-- .../src/components/container/container.js | 48 +++++++++++++++---- packages/theme/dark/canvas.less | 3 +- packages/theme/light/canvas.less | 3 +- 4 files changed, 48 insertions(+), 15 deletions(-) diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue index 5008e1c468..73341ca6da 100644 --- a/packages/canvas/src/components/container/CanvasAction.vue +++ b/packages/canvas/src/components/container/CanvasAction.vue @@ -68,7 +68,7 @@
拖放元素到容器内
-
+
@@ -540,11 +540,12 @@ export default { height: 100%; background: var(--ti-lowcode-canvas-hover-line-in-bg-color); } - &.forbid { - width: 100%; - height: 100%; + &.forbid:not(.in) { background: var(--ti-lowcode-canvas-hover-line-forbid-bg-color); } + &.forbid.in { + background: var(--ti-lowcode-canvas-hover-line-in-forbid-bg-color); + } } .choose-slots { diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js index 5812825761..8c1946e2b5 100644 --- a/packages/canvas/src/components/container/container.js +++ b/packages/canvas/src/components/container/container.js @@ -25,8 +25,7 @@ export const POSITION = Object.freeze({ BOTTOM: 'bottom', LEFT: 'left', RIGHT: 'right', - IN: 'in', - FORBID: 'forbid' + IN: 'in' }) import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments' @@ -98,6 +97,7 @@ const initialLineState = { width: 0, left: 0, position: '', + forbid: false, id: '', config: null, doc: null @@ -416,6 +416,23 @@ export const allowInsert = (configure = hoverState.configure || {}, data = dragS return flag } +const isAncestor = (ancestor, descendant) => { + const ancestorId = typeof ancestor === 'string' ? ancestor : ancestor.id + let descendantId = typeof descendant === 'string' ? descendant : descendant.id + + while (descendantId) { + const { parent } = getNode(descendantId, true) || {} + + if (parent.id === ancestorId) { + return true + } + + descendantId = parent.id + } + + return false +} + // 获取位置信息，返回状态 const lineAbs = 20 const getPosLine = (rect, configure) => { @@ -423,6 +440,7 @@ const getPosLine = (rect, configure) => { const yAbs = Math.min(lineAbs, rect.height / 3) const xAbs = Math.min(lineAbs, rect.width / 3) let type + let forbid = false if (mousePos.y < rect.top + yAbs) { type = POSITION.TOP @@ -433,12 +451,21 @@ const getPosLine = (rect, configure) => { } else if (mousePos.x > rect.right - xAbs) { type = POSITION.RIGHT } else if (configure.isContainer) { - type = allowInsert() ? POSITION.IN : POSITION.FORBID + type = POSITION.IN + if (!allowInsert()) { + forbid = true + } } else { type = POSITION.BOTTOM } - return { type } + // 如果被拖拽的节点不是新增的，并且是放置的节点的祖先节点，则禁止插入 + const draggedId = dragState.data?.id + if (draggedId && isAncestor(draggedId, lineState.id)) { + forbid = true + } + + return { type, forbid } } const isBodyEl = (element) => element.nodeName === 'BODY' @@ -484,20 +511,24 @@ const setHoverRect = (element, data) => { const childRect = getRect(childEle) const { left, height, top, width } = childRect const { x, y } = getOffset(childEle) + const posLine = getPosLine(childRect, lineState.configure) Object.assign(lineState, { width: width * scale, height: height * scale, top: top * scale + y - siteCanvasRect.y, left: left * scale + x - siteCanvasRect.x, - position: canvasState.type === 'absolute' || getPosLine(childRect, lineState.configure).type + position: canvasState.type === 'absolute' || posLine.type, + forbid: posLine.forbid }) } else { + const posLine = getPosLine(rect, configure) Object.assign(lineState, { width: width * scale, height: height * scale, top: top * scale + y - siteCanvasRect.y, left: left * scale + x - siteCanvasRect.x, - position: canvasState.type === 'absolute' || getPosLine(rect, configure).type + position: canvasState.type === 'absolute' || posLine.type, + forbid: posLine.forbid }) } @@ -670,13 +701,12 @@ export const copyNode = (id) => { export const onMouseUp = () => { const { draging, data } = dragState - const { position } = lineState + const { position, forbid } = lineState const absolute = canvasState.type === 'absolute' const sourceId = data?.id const lineId = lineState.id - const allowInsert = position !== POSITION.FORBID - if (draging && allowInsert) { + if (draging && !forbid) { const { parent, node } = getNode(lineId, true) || {} // target const targetNode = { parent, node, data: toRaw(data) } diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less index d3f83fe1e5..9201f83426 100644 --- a/packages/theme/dark/canvas.less +++ b/packages/theme/dark/canvas.less @@ -1,7 +1,8 @@ #canvas-wrap { --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2); --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1); - --ti-lowcode-canvas-hover-line-forbid-bg-color: rgb(255, 66, 77); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3); --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2); --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2); --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2); diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less index 35e3824ac5..1342c94571 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,7 +1,8 @@ #canvas-wrap { --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2); --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1); - --ti-lowcode-canvas-hover-line-forbid-bg-color: rgb(255, 66, 77); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3); --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2); --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2); --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2); From a2290ff72ca905adea52bce6b12100ea31c13c9a Mon Sep 17 00:00:00 2001 From: gene9831 Date: Mon, 8 Apr 2024 02:50:39 -0700 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/container/CanvasAction.vue | 6 +++--- .../src/components/container/container.js | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/canvas/src/components/container/CanvasAction.vue b/packages/canvas/src/components/container/CanvasAction.vue index 73341ca6da..0697f220ff 100644 --- a/packages/canvas/src/components/container/CanvasAction.vue +++ b/packages/canvas/src/components/container/CanvasAction.vue @@ -68,7 +68,7 @@
拖放元素到容器内
-
+
@@ -540,10 +540,10 @@ export default { height: 100%; background: var(--ti-lowcode-canvas-hover-line-in-bg-color); } - &.forbid:not(.in) { + &.forbidden:not(.in) { background: var(--ti-lowcode-canvas-hover-line-forbid-bg-color); } - &.forbid.in { + &.forbidden.in { background: var(--ti-lowcode-canvas-hover-line-in-forbid-bg-color); } } diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js index 8c1946e2b5..ec547a8877 100644 --- a/packages/canvas/src/components/container/container.js +++ b/packages/canvas/src/components/container/container.js @@ -97,7 +97,7 @@ const initialLineState = { width: 0, left: 0, position: '', - forbid: false, + forbidden: false, id: '', config: null, doc: null @@ -440,7 +440,7 @@ const getPosLine = (rect, configure) => { const yAbs = Math.min(lineAbs, rect.height / 3) const xAbs = Math.min(lineAbs, rect.width / 3) let type - let forbid = false + let forbidden = false if (mousePos.y < rect.top + yAbs) { type = POSITION.TOP @@ -453,7 +453,7 @@ const getPosLine = (rect, configure) => { } else if (configure.isContainer) { type = POSITION.IN if (!allowInsert()) { - forbid = true + forbidden = true } } else { type = POSITION.BOTTOM @@ -462,10 +462,10 @@ const getPosLine = (rect, configure) => { // 如果被拖拽的节点不是新增的，并且是放置的节点的祖先节点，则禁止插入 const draggedId = dragState.data?.id if (draggedId && isAncestor(draggedId, lineState.id)) { - forbid = true + forbidden = true } - return { type, forbid } + return { type, forbidden } } const isBodyEl = (element) => element.nodeName === 'BODY' @@ -518,7 +518,7 @@ const setHoverRect = (element, data) => { top: top * scale + y - siteCanvasRect.y, left: left * scale + x - siteCanvasRect.x, position: canvasState.type === 'absolute' || posLine.type, - forbid: posLine.forbid + forbidden: posLine.forbidden }) } else { const posLine = getPosLine(rect, configure) @@ -528,7 +528,7 @@ const setHoverRect = (element, data) => { top: top * scale + y - siteCanvasRect.y, left: left * scale + x - siteCanvasRect.x, position: canvasState.type === 'absolute' || posLine.type, - forbid: posLine.forbid + forbidden: posLine.forbidden }) } @@ -701,12 +701,12 @@ export const copyNode = (id) => { export const onMouseUp = () => { const { draging, data } = dragState - const { position, forbid } = lineState + const { position, forbidden } = lineState const absolute = canvasState.type === 'absolute' const sourceId = data?.id const lineId = lineState.id - if (draging && !forbid) { + if (draging && !forbidden) { const { parent, node } = getNode(lineId, true) || {} // target const targetNode = { parent, node, data: toRaw(data) }