From 60a3f21ee3c5a2fd93e88c42b7d00f0475040e24 Mon Sep 17 00:00:00 2001 From: John Obelenus Date: Fri, 20 Dec 2024 16:16:46 -0500 Subject: [PATCH 1/5] Fix: applying a new view while looking at it --- app/web/src/pages/WorkspaceSinglePage.vue | 22 ++++++++++++++++++++-- app/web/src/store/views.store.ts | 7 +++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/app/web/src/pages/WorkspaceSinglePage.vue b/app/web/src/pages/WorkspaceSinglePage.vue index a1f73490af..a1787993a4 100644 --- a/app/web/src/pages/WorkspaceSinglePage.vue +++ b/app/web/src/pages/WorkspaceSinglePage.vue @@ -130,6 +130,7 @@ import { VormInput, } from "@si/vue-lib/design-system"; import { useChangeSetsStore } from "@/store/change_sets.store"; +import { useViewsStore } from "@/store/views.store"; import { useWorkspacesStore } from "@/store/workspaces.store"; import { useAuthStore } from "@/store/auth.store"; import AppLayout from "@/components/layout/AppLayout.vue"; @@ -191,13 +192,30 @@ function handleUrlChange() { const changeSetId = route.params.changeSetId as string | undefined; if ([undefined, "null", "undefined", "auto"].includes(changeSetId ?? "")) { const id = changeSetsStore.getAutoSelectedChangeSetId(); + const newChangeSetId = + id === false || id === changeSetsStore.headChangeSetId ? "head" : id; + + const viewId = route.params.viewId as string | undefined; + if (viewId) { + const viewStore = useViewsStore(newChangeSetId); + if (!viewStore.viewsById[viewId]) { + delete route.params.viewId; + const defaultView = + viewStore.viewList.find((v) => v.id === viewId) || + viewStore.viewList[0]; + if (viewStore.outlinerViewId === viewId) + viewStore.outlinerViewId = defaultView?.id ?? null; + if (viewStore.selectedViewId === viewId) + if (defaultView?.id) viewStore.selectView(defaultView.id); + else viewStore.clearSelectedView(); + } + } router.replace({ name: route.name, // eslint-disable-line @typescript-eslint/no-non-null-assertion params: { ...route.params, - changeSetId: - id === false || id === changeSetsStore.headChangeSetId ? "head" : id, + changeSetId: newChangeSetId, }, query: { ...route.query }, }); diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts index 6149915995..6d1c96af35 100644 --- a/app/web/src/store/views.store.ts +++ b/app/web/src/store/views.store.ts @@ -616,6 +616,13 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => { // to begin, and then adjust it via delta when things move this.sockets = view.sockets; }, + clearSelectedView() { + this.selectedViewId = null; + this.sockets = {}; + this.components = {}; + this.groups = {}; + this.viewNodes = {}; + }, async selectView(id: ViewId) { const view = this.viewsById[id]; if (view) { From 301a35ef50225b017422c0b1ba9d4f6ba980edd9 Mon Sep 17 00:00:00 2001 From: John Obelenus Date: Fri, 20 Dec 2024 18:22:52 -0500 Subject: [PATCH 2/5] Fix: sockets need to be re-set after component update --- app/web/src/store/views.store.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts index 6d1c96af35..19bc97ebb2 100644 --- a/app/web/src/store/views.store.ts +++ b/app/web/src/store/views.store.ts @@ -1747,6 +1747,11 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => { finalGeo.height = node.height; finalGeo.width = node.width; view.components[data.component.id] = finalGeo as IRect; + for (const [key, loc] of Object.entries( + setSockets(node, finalGeo), + )) { + view.sockets[key] = loc; + } } else { if (!finalGeo.width) finalGeo.width = 500; if (!finalGeo.height) finalGeo.height = 500; @@ -1755,6 +1760,15 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => { size: finalGeo.width * finalGeo.height, zIndex: 0, }; + const node = processRawComponent( + data.component, + componentsStore.rawComponentsById, + ) as DiagramGroupData; + for (const [key, loc] of Object.entries( + setSockets(node, finalGeo), + )) { + view.sockets[key] = loc; + } } }); this.setGroupZIndex(); From 144c726e6671a247666aca2805b677f1f40f203b Mon Sep 17 00:00:00 2001 From: John Obelenus Date: Fri, 20 Dec 2024 18:34:24 -0500 Subject: [PATCH 3/5] dont try to do things on head --- app/web/src/components/LeftPanelDrawer.vue | 6 ++++++ app/web/src/store/views.store.ts | 5 ----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/web/src/components/LeftPanelDrawer.vue b/app/web/src/components/LeftPanelDrawer.vue index e57c6a9cc4..aca5d9e402 100644 --- a/app/web/src/components/LeftPanelDrawer.vue +++ b/app/web/src/components/LeftPanelDrawer.vue @@ -80,9 +80,11 @@ import { } from "@si/vue-lib/design-system"; import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue"; import { useViewsStore } from "@/store/views.store"; +import { useChangeSetsStore } from "@/store/change_sets.store"; import ViewCard from "./ViewCard.vue"; const viewStore = useViewsStore(); +const changeSetsStore = useChangeSetsStore(); const emit = defineEmits<{ (e: "closed"): void; @@ -117,6 +119,10 @@ const create = async () => { labelRef.value?.setError("Name is required"); } else { const resp = await viewStore.CREATE_VIEW(viewName.value); + // creating a view will force a changeset + // if you're on head don't try and select a new view + // because it happens on another changeset + if (changeSetsStore.headSelected) return; if (resp.result.success) { modalRef.value?.close(); viewStore.selectView(resp.result.data.id); diff --git a/app/web/src/store/views.store.ts b/app/web/src/store/views.store.ts index 19bc97ebb2..ae34195efc 100644 --- a/app/web/src/store/views.store.ts +++ b/app/web/src/store/views.store.ts @@ -760,11 +760,6 @@ export const useViewsStore = (forceChangeSetId?: ChangeSetId) => { method: "post", url: API_PREFIX, params: { name, clientUlid }, - onSuccess: (view) => { - const idx = this.viewList.findIndex((v) => v.name === name); - // confirming we dont already have the data - if (idx === -1) this.viewList.push(view); - }, }); }, async UPDATE_VIEW_NAME(view_id: ViewId, name: string) { From 8b3caecaa4bbc4632d0a0b406ec92408c1ce0818 Mon Sep 17 00:00:00 2001 From: John Obelenus Date: Fri, 20 Dec 2024 18:53:46 -0500 Subject: [PATCH 4/5] Fix: need to keep track of onHead prior to calling CREATE_VIEW --- app/web/src/components/LeftPanelDrawer.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/web/src/components/LeftPanelDrawer.vue b/app/web/src/components/LeftPanelDrawer.vue index aca5d9e402..e5d8faacfa 100644 --- a/app/web/src/components/LeftPanelDrawer.vue +++ b/app/web/src/components/LeftPanelDrawer.vue @@ -118,11 +118,13 @@ const create = async () => { if (!viewName.value) { labelRef.value?.setError("Name is required"); } else { + const onHead = changeSetsStore.headSelected; + // creating a view will force a changeset if you're on head const resp = await viewStore.CREATE_VIEW(viewName.value); - // creating a view will force a changeset - // if you're on head don't try and select a new view - // because it happens on another changeset - if (changeSetsStore.headSelected) return; + // while awaiting CREATE_VIEW, the changeSet changes + // and the viewStore we _currently_ have is still the HEAD viewStore + // so we need to keep that in a variable + if (onHead) return; if (resp.result.success) { modalRef.value?.close(); viewStore.selectView(resp.result.data.id); From 4b89eef17973999a8d1101db9e5ae4235248a239 Mon Sep 17 00:00:00 2001 From: John Obelenus Date: Fri, 20 Dec 2024 19:10:56 -0500 Subject: [PATCH 5/5] Fix: we need to filter out deleted children when attempting to move things... but not filter them out when we need to zindex them forward due to parent being selected --- .../ModelingDiagram/ModelingDiagram.vue | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue index 5908d24888..59cb418393 100644 --- a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue +++ b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue @@ -1508,6 +1508,7 @@ const currentSelectionMovableElements = computed(() => { const findChildrenByBoundingBox = ( el: DiagramNodeData | DiagramGroupData, + allowDeletedChildrenToBeFilteredOut: boolean, ): (DiagramNodeData | DiagramGroupData | DiagramViewData)[] => { const cRect = el.def.isGroup ? viewsStore.groups[el.def.id] @@ -1526,16 +1527,18 @@ const findChildrenByBoundingBox = ( if (rectContainsAnother(rect, _r)) { const component = componentsStore.allComponentsById[id]; if (component) { - if ( - "changeStatus" in component.def && - component.def.changeStatus === "deleted" - ) - return; - if ( - "fromBaseChangeSet" in component.def && - component.def.fromBaseChangeSet - ) - return; + if (allowDeletedChildrenToBeFilteredOut) { + if ( + "changeStatus" in component.def && + component.def.changeStatus === "deleted" + ) + return; + if ( + "fromBaseChangeSet" in component.def && + component.def.fromBaseChangeSet + ) + return; + } nodes.push(component); } } @@ -1579,6 +1582,7 @@ function beginDragElements() { if (el.def.componentType !== ComponentType.View) { const childs = findChildrenByBoundingBox( el as DiagramNodeData | DiagramGroupData, + true, ); childs.forEach((c) => children.add(c)); } @@ -2915,7 +2919,7 @@ const groups = computed(() => { ); const ancestryByBounds = new DefaultMap(() => []); frames.forEach((g) => { - const childIds = findChildrenByBoundingBox(g).map((el) => el.def.id); + const childIds = findChildrenByBoundingBox(g, false).map((el) => el.def.id); childIds.forEach((child) => { const ancestors = ancestryByBounds.get(child); ancestors.push(g.def.id);