|
@@ -258,6 +258,11 @@ const hasLockedWidgetTree = (node: HierarchyNodeData): boolean => {
|
|
|
|
|
|
|
|
const allowDrag: AllowDragFunction = (node) => {
|
|
const allowDrag: AllowDragFunction = (node) => {
|
|
|
const currentNode = getHierarchyNode(node.data)
|
|
const currentNode = getHierarchyNode(node.data)
|
|
|
|
|
+
|
|
|
|
|
+ if (currentNode.nodeType === 'page') {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
currentNode.nodeType === 'widget' &&
|
|
currentNode.nodeType === 'widget' &&
|
|
|
!hasLockedWidgetTree(currentNode) &&
|
|
!hasLockedWidgetTree(currentNode) &&
|
|
@@ -270,6 +275,15 @@ const allowDrop: AllowDropFunction = (dragNode, dropNode, type) => {
|
|
|
const dragData = getHierarchyNode(dragNode.data)
|
|
const dragData = getHierarchyNode(dragNode.data)
|
|
|
const dropData = getHierarchyNode(dropNode.data)
|
|
const dropData = getHierarchyNode(dropNode.data)
|
|
|
|
|
|
|
|
|
|
+ if (dragData.nodeType === 'page') {
|
|
|
|
|
+ return (
|
|
|
|
|
+ dropData.nodeType === 'page' &&
|
|
|
|
|
+ dragData.screenId === dropData.screenId &&
|
|
|
|
|
+ dragData.id !== dropData.id &&
|
|
|
|
|
+ type !== 'inner'
|
|
|
|
|
+ )
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (dragData.nodeType !== 'widget' || dropData.nodeType === 'screen') return false
|
|
if (dragData.nodeType !== 'widget' || dropData.nodeType === 'screen') return false
|
|
|
if (hasLockedWidgetTree(dragData)) return false
|
|
if (hasLockedWidgetTree(dragData)) return false
|
|
|
if (!dragData.pageId || !dropData.pageId || dragData.pageId !== dropData.pageId) return false
|
|
if (!dragData.pageId || !dropData.pageId || dragData.pageId !== dropData.pageId) return false
|
|
@@ -294,6 +308,41 @@ const findPageById = (pageId?: string) => {
|
|
|
.find((page) => page.id === pageId)
|
|
.find((page) => page.id === pageId)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const findScreenById = (screenId?: string) => {
|
|
|
|
|
+ if (!screenId) return
|
|
|
|
|
+
|
|
|
|
|
+ return projectStore.project?.screens.find((screen) => screen.id === screenId)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const reorderPage = (
|
|
|
|
|
+ dragData: HierarchyNodeData,
|
|
|
|
|
+ targetData: HierarchyNodeData,
|
|
|
|
|
+ dropType: NodeDropType
|
|
|
|
|
+) => {
|
|
|
|
|
+ if (dropType === 'inner' || dragData.screenId !== targetData.screenId) return
|
|
|
|
|
+
|
|
|
|
|
+ const screen = findScreenById(dragData.screenId)
|
|
|
|
|
+ if (!screen) return
|
|
|
|
|
+
|
|
|
|
|
+ const fromIndex = screen.pages.findIndex((page) => page.id === dragData.id)
|
|
|
|
|
+ const targetIndex = screen.pages.findIndex((page) => page.id === targetData.id)
|
|
|
|
|
+ if (fromIndex === -1 || targetIndex === -1 || fromIndex === targetIndex) return
|
|
|
|
|
+
|
|
|
|
|
+ const [page] = screen.pages.splice(fromIndex, 1)
|
|
|
|
|
+ const nextTargetIndex = screen.pages.findIndex((item) => item.id === targetData.id)
|
|
|
|
|
+ if (nextTargetIndex === -1) return
|
|
|
|
|
+
|
|
|
|
|
+ screen.pages.splice(dropType === 'before' ? nextTargetIndex : nextTargetIndex + 1, 0, page)
|
|
|
|
|
+
|
|
|
|
|
+ const screenIndex =
|
|
|
|
|
+ projectStore.project?.screens.findIndex((item) => item.id === screen.id) ?? -1
|
|
|
|
|
+ const openedPageId = projectStore.openPageIds[screenIndex]
|
|
|
|
|
+ setOpenedPage(
|
|
|
|
|
+ screen.id,
|
|
|
|
|
+ screen.pages.some((item) => item.id === openedPageId) ? openedPageId : page.id
|
|
|
|
|
+ )
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const findWidgetListById = (widgets: BaseWidget[], widgetId: string) => {
|
|
const findWidgetListById = (widgets: BaseWidget[], widgetId: string) => {
|
|
|
for (const widget of widgets) {
|
|
for (const widget of widgets) {
|
|
|
if (widget.id === widgetId) {
|
|
if (widget.id === widgetId) {
|
|
@@ -329,6 +378,11 @@ const handleNodeDrop = (dragNode: TreeDragNode, dropNode: TreeDragNode, dropType
|
|
|
|
|
|
|
|
if (dropType === 'none') return
|
|
if (dropType === 'none') return
|
|
|
|
|
|
|
|
|
|
+ if (dragData.nodeType === 'page') {
|
|
|
|
|
+ reorderPage(dragData, targetData, dropType)
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
if (dragData.nodeType !== 'widget' || !dragData.pageId || dragData.pageId !== targetData.pageId) {
|
|
if (dragData.nodeType !== 'widget' || !dragData.pageId || dragData.pageId !== targetData.pageId) {
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|