Fix tab switching issues with layout model (#230)

This commit is contained in:
Evan Simkowitz
2024-08-15 13:45:45 -07:00
committed by GitHub
parent fc7bb7eaca
commit 9fa11ff838
4 changed files with 8 additions and 9 deletions
+1 -1
View File
@@ -264,7 +264,7 @@ const DisplayNode = ({ layoutModel, layoutNode, contents }: DisplayNodeProps) =>
className={clsx("tile-node", { className={clsx("tile-node", {
dragging: isDragging, dragging: isDragging,
magnified: layoutModel.treeState.magnifiedNodeId === layoutNode.id, magnified: layoutModel.treeState.magnifiedNodeId === layoutNode.id,
"last-magnified": addlProps.isLastMagnifiedNode, "last-magnified": addlProps?.isLastMagnifiedNode,
})} })}
ref={tileNodeRef} ref={tileNodeRef}
id={layoutNode.id} id={layoutNode.id}
+4 -4
View File
@@ -16,7 +16,7 @@ function getLayoutStateAtomFromTab(tabAtom: Atom<Tab>, get: Getter): WritableWav
export function withLayoutTreeStateAtomFromTab(tabAtom: Atom<Tab>): WritableLayoutTreeStateAtom { export function withLayoutTreeStateAtomFromTab(tabAtom: Atom<Tab>): WritableLayoutTreeStateAtom {
if (layoutStateAtomMap.has(tabAtom)) { if (layoutStateAtomMap.has(tabAtom)) {
console.log("found atom"); // console.log("found atom");
return layoutStateAtomMap.get(tabAtom); return layoutStateAtomMap.get(tabAtom);
} }
const generationAtom = atom(1); const generationAtom = atom(1);
@@ -25,7 +25,7 @@ export function withLayoutTreeStateAtomFromTab(tabAtom: Atom<Tab>): WritableLayo
const stateAtom = getLayoutStateAtomFromTab(tabAtom, get); const stateAtom = getLayoutStateAtomFromTab(tabAtom, get);
if (!stateAtom) return; if (!stateAtom) return;
const layoutStateData = get(stateAtom); const layoutStateData = get(stateAtom);
console.log("layoutStateData", layoutStateData); // console.log("layoutStateData", layoutStateData);
const layoutTreeState: LayoutTreeState = { const layoutTreeState: LayoutTreeState = {
rootNode: layoutStateData?.rootnode, rootNode: layoutStateData?.rootnode,
magnifiedNodeId: layoutStateData?.magnifiednodeid, magnifiedNodeId: layoutStateData?.magnifiednodeid,
@@ -36,10 +36,10 @@ export function withLayoutTreeStateAtomFromTab(tabAtom: Atom<Tab>): WritableLayo
(get, set, value) => { (get, set, value) => {
if (get(generationAtom) < value.generation) { if (get(generationAtom) < value.generation) {
const stateAtom = getLayoutStateAtomFromTab(tabAtom, get); const stateAtom = getLayoutStateAtomFromTab(tabAtom, get);
console.log("setting new atom val", value); // console.log("setting new atom val", value);
if (!stateAtom) return; if (!stateAtom) return;
const waveObjVal = get(stateAtom); const waveObjVal = get(stateAtom);
console.log("waveObjVal", waveObjVal); // console.log("waveObjVal", waveObjVal);
waveObjVal.rootnode = value.rootNode; waveObjVal.rootnode = value.rootNode;
waveObjVal.magnifiednodeid = value.magnifiedNodeId; waveObjVal.magnifiednodeid = value.magnifiedNodeId;
set(generationAtom, value.generation); set(generationAtom, value.generation);
+2 -2
View File
@@ -365,10 +365,10 @@ export class LayoutModel {
* Gets normalized dimensions for the TileLayout container. * Gets normalized dimensions for the TileLayout container.
* @returns The normalized dimensions for the TileLayout container. * @returns The normalized dimensions for the TileLayout container.
*/ */
function getBoundingRect(): Dimensions { const getBoundingRect: () => Dimensions = () => {
const boundingRect = this.displayContainerRef.current.getBoundingClientRect(); const boundingRect = this.displayContainerRef.current.getBoundingClientRect();
return { top: 0, left: 0, width: boundingRect.width, height: boundingRect.height }; return { top: 0, left: 0, width: boundingRect.width, height: boundingRect.height };
} };
if (!node.children?.length) { if (!node.children?.length) {
// console.log("adding node to leafs", node); // console.log("adding node to leafs", node);
+1 -2
View File
@@ -1,6 +1,6 @@
import { globalStore, WOS } from "@/app/store/global"; import { globalStore, WOS } from "@/app/store/global";
import useResizeObserver from "@react-hook/resize-observer"; import useResizeObserver from "@react-hook/resize-observer";
import { atom, Atom, useAtomValue } from "jotai"; import { Atom, useAtomValue } from "jotai";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { withLayoutTreeStateAtomFromTab } from "./layoutAtom"; import { withLayoutTreeStateAtomFromTab } from "./layoutAtom";
import { LayoutModel } from "./layoutModel"; import { LayoutModel } from "./layoutModel";
@@ -15,7 +15,6 @@ export function getLayoutModelForTab(tabAtom: Atom<Tab>): LayoutModel {
if (layoutModelMap.has(tabId)) { if (layoutModelMap.has(tabId)) {
const layoutModel = layoutModelMap.get(tabData.oid); const layoutModel = layoutModelMap.get(tabData.oid);
if (layoutModel) { if (layoutModel) {
if (!layoutModel.generationAtom) layoutModel.generationAtom = atom(0);
return layoutModel; return layoutModel;
} }
} }