Skip to content
This repository has been archived by the owner on Jul 15, 2024. It is now read-only.

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: store hidden nodes separetly
Browse files Browse the repository at this point in the history
sdlyy committed Feb 9, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 8035f66 commit 2ad6120
Showing 7 changed files with 39 additions and 41 deletions.
26 changes: 5 additions & 21 deletions packages/frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -22,8 +22,10 @@ import { Viewport } from './view/Viewport'
export function App() {
// load the initial nodes from the store that gets rehydrated from local storage at startup
const initialNodes = useStore((state) => state.nodes)
const hiddenNodesIds = useStore((state) => state.hiddenNodesIds)
const projectId = useStore((state) => state.projectId)
const updateNodeLocations = useStore((state) => state.updateNodeLocations)
const setHiddenNodes = useStore((state) => state.setHiddenNodes)
const setProjectId = useStore((state) => state.setProjectId)
const [nodes, setNodes] = useState<SimpleNode[]>(
initialNodes.map(nodeToSimpleNode),
@@ -48,6 +50,7 @@ export function App() {

function clear() {
setNodes([])
setHiddenNodes(() => [])
}

function save() {
@@ -74,26 +77,8 @@ export function App() {
setNodes((nodes) => merge(nodes, result))
}

function hideNode(id: string) {
setNodes((nodes) =>
nodes.map((node) =>
node.id === id
? {
...node,
hidden: true,
}
: node,
),
)
}

function revealAllNodes() {
setNodes((nodes) =>
nodes.map((node) => ({
...node,
hidden: false,
})),
)
setHiddenNodes(() => [])
}

async function loadFromFile(file: File) {
@@ -165,7 +150,6 @@ export function App() {
loading={loading}
// eslint-disable-next-line @typescript-eslint/no-misused-promises
onDiscover={discoverContract}
onHideNode={hideNode}
/>

<div className="absolute top-0 w-full p-2">
@@ -193,7 +177,7 @@ export function App() {
onClick={revealAllNodes}
className="rounded bg-blue-400 px-4 py-2 font-bold text-white hover:bg-blue-700"
>
Reveal all ({nodes.filter((n) => n.hidden).length})
Reveal all ({hiddenNodesIds.length})
</button>
<button
className="px-1 text-2xl hover:bg-gray-300"
1 change: 0 additions & 1 deletion packages/frontend/src/api/SimpleNode.ts
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ interface SimpleNodeShared {
id: string
name: string
discovered: boolean
hidden: boolean
fields: {
name: string
connection?: string // id
1 change: 1 addition & 0 deletions packages/frontend/src/store/State.ts
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import { SimpleNode } from '../api/SimpleNode'

export interface State {
readonly selectedNodeIds: readonly string[]
readonly hiddenNodesIds: readonly string[]
readonly nodes: readonly Node[]
readonly selection?: Box
readonly transform: {
2 changes: 2 additions & 0 deletions packages/frontend/src/store/actions/Actions.ts
Original file line number Diff line number Diff line change
@@ -12,4 +12,6 @@ export interface Actions {
updateNodes: (nodes: SimpleNode[]) => void
updateNodeLocations: (locations: NodeLocations) => void
setProjectId: (projectId: string) => void

setHiddenNodes: (update: (currentlyHiddenIds: string[]) => string[]) => void
}
11 changes: 11 additions & 0 deletions packages/frontend/src/store/store.ts
Original file line number Diff line number Diff line change
@@ -15,6 +15,7 @@ export const useStore = create<State & Actions>()(
persist(
(set) => ({
selectedNodeIds: [],
hiddenNodesIds: [],
nodes: [],
selection: undefined,
transform: { offsetX: 0, offsetY: 0, scale: 1 },
@@ -43,12 +44,22 @@ export const useStore = create<State & Actions>()(
set((state) => updateNodeLocations(state, ...args)),
setProjectId: (projectId: string) =>
set((state) => ({ ...state, projectId: projectId })),

setHiddenNodes: (updateFn) => {
set((state) => {
// stale-state
const hiddenNodesIds = updateFn([...state.hiddenNodesIds])

return { ...state, hiddenNodesIds }
})
},
}),
{
name: 'store',
partialize: (state) => {
return {
nodes: state.nodes,
hiddenNodesIds: state.hiddenNodesIds,
projectId: state.projectId,
}
},
7 changes: 1 addition & 6 deletions packages/frontend/src/view/NodeView.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ export interface NodeViewProps {
node: Node
selected: boolean
discovered: boolean
hidden: boolean
onDiscover: (nodeId: string) => void
onHideNode: (nodeId: string) => void
loading: boolean
@@ -42,7 +41,7 @@ export function NodeView(props: NodeViewProps) {
return () => {
hideRef.current?.removeEventListener('mousedown', onHide, true)
}
}, [props.hidden])
}, [])

const onDiscover = useCallback(() => {
props.onDiscover(props.node.simpleNode.id)
@@ -60,10 +59,6 @@ export function NodeView(props: NodeViewProps) {
})
}, [])

if (props.hidden) {
return null
}

return (
<div
ref={ref}
32 changes: 19 additions & 13 deletions packages/frontend/src/view/Viewport.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ import { useViewport } from './useViewport'
export interface ViewportProps {
nodes: SimpleNode[]
onDiscover: (nodeId: string) => void
onHideNode: (nodeId: string) => void
loading: Record<string, boolean | undefined>
}

@@ -22,28 +21,36 @@ export function Viewport(props: ViewportProps) {
updateNodes(props.nodes)
}, [updateNodes, props.nodes])

const setHiddenNodes = useStore((state) => state.setHiddenNodes)

const nodes = useStore((state) => state.nodes)
const selectedNodeIds = useStore((state) => state.selectedNodeIds)
const hiddenNodesIds = useStore((state) => state.hiddenNodesIds)

const transform = useStore((state) => state.transform)
const mouseSelection = useStore((state) => state.mouseSelection)

const visibleNodes = nodes.filter(
(node) => !hiddenNodesIds.includes(node.simpleNode.id),
)

function hideNode(nodeId: string) {
setHiddenNodes((nodes) => [...nodes, nodeId])
}

return (
<div
ref={containerRef}
className="relative h-full w-full overflow-hidden rounded-lg bg-white"
>
<ScalableView ref={viewRef} transform={transform}>
{nodes.map((node) =>
{visibleNodes.map((node) =>
node.fields.map((field, i) => {
const shouldShow =
field.connection &&
!node.simpleNode.hidden &&
// check if connection is pointing to a node that is hidden
!nodes
.filter((n) => n.simpleNode.id === field.connection?.nodeId)
.every((n) => n.simpleNode.hidden)
const shouldHide =
!field.connection ||
hiddenNodesIds.find((id) => id === field.connection?.nodeId)

if (!shouldShow) {
if (shouldHide) {
return null
}

@@ -56,15 +63,14 @@ export function Viewport(props: ViewportProps) {
)
}),
)}
{nodes.map((node) => (
{visibleNodes.map((node) => (
<NodeView
key={node.simpleNode.id}
node={node}
selected={selectedNodeIds.includes(node.simpleNode.id)}
discovered={node.simpleNode.discovered}
hidden={node.simpleNode.hidden}
onDiscover={props.onDiscover}
onHideNode={props.onHideNode}
onHideNode={hideNode}
loading={!!props.loading[node.simpleNode.id]}
/>
))}

0 comments on commit 2ad6120

Please sign in to comment.