Skip to content

Commit

Permalink
Merge pull request #487 from rnbwdev/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
mrmatthewnguyen105 authored Dec 6, 2023
2 parents 4f49b6b + 0d3ab77 commit 9a9e24b
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 48 deletions.
1 change: 1 addition & 0 deletions src/_redux/main/nodeTree/event/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export const NodeTree_Event_StoreLimit = 10000;
export const NodeTree_Event_UndoActionType = "main/NodeEvent/undo";
export const NodeTree_Event_RedoActionType = "main/NodeEvent/redo";
export const NodeTree_Event_ClearActionType = "main/NodeEvent/clear";
export const NodeTree_Event_JumpToPastActionType = "main/NodeEvent/jumpToPast";
2 changes: 2 additions & 0 deletions src/_redux/main/nodeTree/event/slice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";

import {
NodeTree_Event_ClearActionType,
NodeTree_Event_JumpToPastActionType,
NodeTree_Event_RedoActionType,
NodeTree_Event_StoreLimit,
NodeTree_Event_UndoActionType,
Expand Down Expand Up @@ -36,4 +37,5 @@ export const NodeEventReducer = undoable(nodeEventSlice.reducer, {
undoType: NodeTree_Event_UndoActionType,
redoType: NodeTree_Event_RedoActionType,
clearHistoryType: NodeTree_Event_ClearActionType,
jumpToPastType: NodeTree_Event_JumpToPastActionType,
});
4 changes: 3 additions & 1 deletion src/_redux/main/nodeTree/slice.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,13 @@ const nodeTreeSlice = createSlice({
},
setExpandedNodeTreeNodes(state, action: PayloadAction<TNodeUid[]>) {
const expandedItems = action.payload;
state.nodeTreeViewState.expandedItems = expandedItems;
state.nodeTreeViewState.expandedItemsObj = {};
for (const uid of expandedItems) {
state.nodeTreeViewState.expandedItemsObj[uid] = true;
}
state.nodeTreeViewState.expandedItems = Object.keys(
state.nodeTreeViewState.expandedItemsObj,
);
},
expandNodeTreeNodes(state, action: PayloadAction<TNodeUid[]>) {
const uids = action.payload;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ export function useNodeViewState() {

// update file - WIP
if (currentFileUid !== prevRenderableFileUid) {
const file = fileTree[prevRenderableFileUid];
const fileData = file.data as TFileNodeData;
dispatch(setCurrentFileUid(prevRenderableFileUid));
dispatch(setCurrentFileContent(fileData.content));
dispatch(selectFileTreeNodes([prevRenderableFileUid]));
// const file = fileTree[prevRenderableFileUid];
// const fileData = file.data as TFileNodeData;
// dispatch(setCurrentFileUid(prevRenderableFileUid));
// dispatch(setCurrentFileContent(fileData.content));
// dispatch(selectFileTreeNodes([prevRenderableFileUid]));
// dispatch({ type: NodeTree_Event_ClearActionType });
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
import { useInvalidNodes } from "./useInvalidNodes";
import { useTemporaryNodes } from "./useTemporaryNodes";
import { useAppState } from "@_redux/useAppState";
import { clearFileSession } from "@_pages/main/helper";

export const useNodeActionsHandler = (
openFileUid: React.MutableRefObject<string>,
Expand Down Expand Up @@ -476,8 +477,7 @@ export const useNodeActionsHandler = (
return;
}

dispatch(clearNodeTreeViewState());
dispatch({ type: NodeTree_Event_ClearActionType });
clearFileSession(dispatch);

const nodeData = node.data as TFileNodeData;
if (RednerableFileTypes[nodeData.ext]) {
Expand Down
1 change: 0 additions & 1 deletion src/components/main/stageView/iFrame/hooks/useCmdk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { TCmdkKeyMap } from "@_types/main";
import { useAppState } from "@_redux/useAppState";
import { TNodeTreeData, TNodeUid } from "@_node/types";
import { editHtmlContent } from "../helpers";
import { ShortDelay } from "@_constants/main";

interface IUseCmdkProps {
iframeRefRef: React.MutableRefObject<HTMLIFrameElement | null>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { THtmlNodeData } from "@_node/node";
import { setActivePanel } from "@_redux/main/processor";
import { MainContext } from "@_redux/main";
import { LogAllow } from "@_constants/global";
import { debounce } from "lodash";
import { ShortDelay } from "@_constants/main";

interface IUseMouseEventsProps {
Expand Down
7 changes: 4 additions & 3 deletions src/pages/main/MainPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -851,6 +851,8 @@ export default function MainPage() {
osType,
);

clearProjectSession(dispatch);

// build nohost idb
handlerArr && buildNohostIDB(handlerArr);

Expand Down Expand Up @@ -889,6 +891,8 @@ export default function MainPage() {
const { _fileTree, _initialFileUidToOpen } =
await loadIDBProject(DefaultProjectPath);

clearProjectSession(dispatch);

dispatch(
setProject({
context: "idb",
Expand Down Expand Up @@ -969,14 +973,12 @@ export default function MainPage() {
_preferPolyfill: false,
mode: "readwrite",
} as CustomDirectoryPickerOptions);
clearProjectSession(dispatch);
await importProject(fsType, projectHandle);
} catch (err) {
reject(err);
}
} else if (fsType === "idb") {
try {
clearProjectSession(dispatch);
await importProject(fsType, null);
} catch (err) {
reject(err);
Expand Down Expand Up @@ -1613,7 +1615,6 @@ export default function MainPage() {
}
}
}
clearProjectSession(dispatch);
importProject(projectContext, projectHandler);
} else if (
(currentCmdkPage === "Add" &&
Expand Down
4 changes: 2 additions & 2 deletions src/pages/main/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
} from "@_redux/main/nodeTree";
import {
NodeTree_Event_ClearActionType,
setCurrentFileContent,
NodeTree_Event_JumpToPastActionType,
} from "@_redux/main/nodeTree/event";
import { setIframeSrc } from "@_redux/main/stageView";
import { TCmdkReferenceData, TFilesReference } from "@_types/main";
Expand Down Expand Up @@ -113,7 +113,6 @@ export const clearProjectSession = (dispatch: Dispatch<AnyAction>) => {
dispatch(setCurrentFileUid(""));
dispatch(setPrevFileUid(""));
dispatch(setPrevRenderableFileUid(""));
dispatch(setCurrentFileContent(""));
dispatch(clearFileTreeViewState());
dispatch({ type: FileTree_Event_ClearActionType });

Expand All @@ -125,6 +124,7 @@ export const clearFileSession = (dispatch: Dispatch<AnyAction>) => {
dispatch(setValidNodeTree({}));
dispatch(clearNodeTreeViewState());
dispatch({ type: NodeTree_Event_ClearActionType });
dispatch({ type: NodeTree_Event_JumpToPastActionType, payload: 0 });

dispatch(setIframeSrc(null));
};
Expand Down
83 changes: 50 additions & 33 deletions src/pages/main/processor/hooks/useNodeTreeEvent.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
import { useContext, useEffect } from "react";
import { useContext, useEffect, useRef } from "react";

import morphdom from "morphdom";
import { useDispatch } from "react-redux";

import { LogAllow } from "@_constants/global";
import { RootNodeUid } from "@_constants/main";
import {
parseFile,
PreserveRnbwNode,
StageNodeIdAttr,
writeFile,
} from "@_node/file";
import { getSubNodeUidsByBfs } from "@_node/helpers";
import { TNodeTreeData } from "@_node/types";
import { MainContext } from "@_redux/main";
import {
setDoingFileAction,
Expand Down Expand Up @@ -61,13 +58,15 @@ export const useNodeTreeEvent = () => {
} = useAppState();
const { addRunningActions, removeRunningActions } = useContext(MainContext);

const isSelectedNodeUidsChanged = useRef(false);
const isCurrentFileContentChanged = useRef(false);
useEffect(() => {
/* LogAllow &&
console.log("useNodeTreeEvent - selectedNodeUids", {
selectedNodeUids,
currentFileContent,
}); */
isSelectedNodeUidsChanged.current = false;
isCurrentFileContentChanged.current = false;
}, [selectedNodeUids, currentFileContent]);

useEffect(() => {
isSelectedNodeUidsChanged.current = true;
// focus node
dispatch(
focusNodeTreeNode(
Expand All @@ -78,29 +77,10 @@ export const useNodeTreeEvent = () => {
);
// select nodes
dispatch(selectNodeTreeNodes(selectedNodeUids));
// expand nodes
dispatch(
expandNodeTreeNodes(
getNeedToExpandNodeUids(validNodeTree, selectedNodeUids),
),
);
}, [selectedNodeUids]);

/* useEffect(() => {
// validate expanded node uids
const _expandedItems = nExpandedItems.filter(
(uid) => validNodeTree[uid] && validNodeTree[uid].isEntity === false,
);
dispatch(setExpandedNodeTreeNodes([..._expandedItems]));
}, [validNodeTree]); */

useEffect(() => {
/* LogAllow &&
console.log("useNodeTreeEvent - currentFileContent", {
selectedNodeUids,
currentFileContent,
}); */

isCurrentFileContentChanged.current = true;
// validate
if (!fileTree[currentFileUid]) return;

Expand All @@ -116,13 +96,12 @@ export const useNodeTreeEvent = () => {
fileData.content = currentFileContent;
fileData.contentInApp = contentInApp;
fileData.changed = fileData.content !== fileData.orgContent;

if (fileData.changed && file.parentUid) {
markChangedFolders(fileTree, file, dispatch);
}

// when "Save" while text-editing, we need to call "Save" command after file-content updated.
// after fileTree has been updated exactly. so when "Save" while text-editing, we first call "SaveForce"
// after fileTree has been updated exactly. so when "Save" while text-editing, we should call "SaveForce" first.
if (currentCommand?.action === "SaveForce") {
dispatch(setCurrentCommand({ action: "Save" }));
}
Expand Down Expand Up @@ -156,14 +135,41 @@ export const useNodeTreeEvent = () => {
LogAllow && console.log("it's a new project");
dispatch(setInitialFileUidToOpen(""));
dispatch(setSelectedNodeUids([uid]));
dispatch(
setExpandedNodeTreeNodes(
getNeedToExpandNodeUids(_validNodeTree, [uid]),
),
);
} else if (prevFileUid !== currentFileUid) {
LogAllow && console.log("it's a new file");
dispatch(setSelectedNodeUids([uid]));
dispatch(
setExpandedNodeTreeNodes(
getNeedToExpandNodeUids(_validNodeTree, [uid]),
),
);
} else {
LogAllow && console.log("it's a rnbw-change");
if (isSelectedNodeUidsChanged.current) {
const validExpandedItems = nExpandedItems.filter(
(uid) =>
_validNodeTree[uid] && _validNodeTree[uid].isEntity === false,
);
const needToExpandItems = getNeedToExpandNodeUids(
_validNodeTree,
selectedNodeUids,
);
dispatch(
setExpandedNodeTreeNodes([
...validExpandedItems,
...needToExpandItems,
]),
);
}
}

// sync stage-view
if (prevFileUid !== currentFileUid) {
// reload if it's a new file.
LogAllow && console.log("need to refresh iframe");
dispatch(setNeedToReloadIframe(true));
} else {
Expand Down Expand Up @@ -258,4 +264,15 @@ export const useNodeTreeEvent = () => {

removeRunningActions(["processor-update"]);
}, [currentFileContent]);

// expand nodes that need to be expanded when it's just select-event
useEffect(() => {
if (!isCurrentFileContentChanged.current) {
const needToExpandItems = getNeedToExpandNodeUids(
validNodeTree,
selectedNodeUids,
);
dispatch(expandNodeTreeNodes(needToExpandItems));
}
}, [selectedNodeUids]);
};

0 comments on commit 9a9e24b

Please sign in to comment.