Skip to content

Commit

Permalink
fix resizing confusion sometimes
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdriesler
cdriesler committed Nov 22, 2023
1 parent 11dc000 commit 752041a
Show file tree
Hide file tree
Showing 12 changed files with 199 additions and 169 deletions.
137 changes: 70 additions & 67 deletions apps/nodepen-client/components/NodesAppContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,94 +37,97 @@ const NodesAppContainer = ({ document: initialDocument, templates }: NodesAppCon

const payload = { method: 'POST', body }

const response = await fetch('http://localhost:6500/files/gh', payload)
const response = await fetch('http://localhost:4000/files/gh', payload)
const data = await response.json()

setDocument(data)
}, [])

const handleExpireSolution = useCallback((state: NodesAppState): void => {
const solutionId = state.solution.solutionId
const handleExpireSolution = useCallback(
(state: NodesAppState): void => {
const solutionId = state.solution.solutionId

const requestSolution = async (): Promise<string> => {
const response = await fetch('http://localhost:6500/grasshopper/id/solution', {
method: 'POST',
body: JSON.stringify({ solutionId, document: state.document }),
})
const requestSolution = async (): Promise<string> => {
const response = await fetch('http://localhost:4000/grasshopper/id/solution', {
method: 'POST',
body: JSON.stringify({ solutionId, document: state.document, streamId: stream.id }),
})

return await response.text()
}
return await response.text()
}

const fetchSolutionRuntimeData = async (rootObjectId: string): Promise<NodePen.DocumentSolutionData> => {
const query = gql`
query GetObjects($streamId: String!, $objectId: String!) {
stream(id: $streamId) {
object(id: $objectId) {
data
const fetchSolutionRuntimeData = async (rootObjectId: string): Promise<NodePen.DocumentSolutionData> => {
const query = gql`
query GetObjects($streamId: String!, $objectId: String!) {
stream(id: $streamId) {
object(id: $objectId) {
data
}
}
}
}
`
`

const response = await fetch(`${stream.url}/graphql`, {
method: 'POST',
headers: {
Authorization: `Bearer ${stream.token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: print(query),
operationName: 'GetObjects',
variables: {
streamId: stream.id,
objectId: rootObjectId,
const response = await fetch(`${stream.url}/graphql`, {
method: 'POST',
headers: {
Authorization: `Bearer ${stream.token}`,
'Content-Type': 'application/json',
},
}),
})

const { data } = await response.json()
body: JSON.stringify({
query: print(query),
operationName: 'GetObjects',
variables: {
streamId: stream.id,
objectId: rootObjectId,
},
}),
})

const { data: streamSolutionData } = data.stream.object
const { data } = await response.json()

// console.log(streamSolutionData)
const { data: streamSolutionData } = data.stream.object

const documentSolutionData: NodePen.DocumentSolutionData = {
solutionId: streamSolutionData['SolutionData']['SolutionId'],
documentRuntimeData: {
durationMs: streamSolutionData['SolutionData']['DocumentRuntimeData']['DurationMs'],
},
nodeSolutionData: [],
}
// console.log(streamSolutionData)

for (const entry of streamSolutionData['SolutionData']['NodeSolutionData']) {
const nodeSolutionData: NodePen.NodeSolutionData = {
nodeInstanceId: entry['NodeInstanceId'],
nodeRuntimeData: {
durationMs: entry['NodeRuntimeData']['DurationMs'],
messages: entry['NodeRuntimeData']['Messages'].map((message: { Level: string; Message: string }) => ({
level: message['Level'],
message: message['Message'],
})),
const documentSolutionData: NodePen.DocumentSolutionData = {
solutionId: streamSolutionData['SolutionData']['SolutionId'],
documentRuntimeData: {
durationMs: streamSolutionData['SolutionData']['DocumentRuntimeData']['DurationMs'],
},
portSolutionData: [],
nodeSolutionData: [],
}

documentSolutionData.nodeSolutionData.push(nodeSolutionData)
}
for (const entry of streamSolutionData['SolutionData']['NodeSolutionData']) {
const nodeSolutionData: NodePen.NodeSolutionData = {
nodeInstanceId: entry['NodeInstanceId'],
nodeRuntimeData: {
durationMs: entry['NodeRuntimeData']['DurationMs'],
messages: entry['NodeRuntimeData']['Messages'].map((message: { Level: string; Message: string }) => ({
level: message['Level'],
message: message['Message'],
})),
},
portSolutionData: [],
}

return documentSolutionData
}
documentSolutionData.nodeSolutionData.push(nodeSolutionData)
}

requestSolution()
.then((rootObjectId) => {
setStreamRootObjectId(rootObjectId)
return fetchSolutionRuntimeData(rootObjectId)
})
.then((documentSolutionData) => {
console.log(documentSolutionData)
setSolution(documentSolutionData)
})
}, [])
return documentSolutionData
}

requestSolution()
.then((rootObjectId) => {
setStreamRootObjectId(rootObjectId)
return fetchSolutionRuntimeData(rootObjectId)
})
.then((documentSolutionData) => {
console.log(documentSolutionData)
setSolution(documentSolutionData)
})
},
[stream.id]
)

const fetchPortSolutionData = useCallback(
async (nodeInstanceId: string, portInstanceId: string): Promise<NodePen.PortSolutionData | null> => {
Expand Down
2 changes: 1 addition & 1 deletion apps/nodepen-client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "nodepen-viewer-example",
"private": true,
"scripts": {
"dev": "next dev -p 4000",
"dev": "next dev -p 3000",
"build": "next build",
"start": "next start",
"lint": "next lint",
Expand Down
2 changes: 1 addition & 1 deletion apps/nodepen-client/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const getStaticProps: GetStaticProps<PageProps> = async () => {
const document = await fetchDocument('test-id')

const fetchTemplates = async (): Promise<NodePen.NodeTemplate[]> => {
const response = await fetch('http://localhost:6500/grasshopper', { cache: 'no-store' })
const response = await fetch('http://localhost:4000/grasshopper', { cache: 'no-store' })
const templates = await response.json()

return templates
Expand Down
2 changes: 1 addition & 1 deletion .../src/components/controls/panels/template-library-control/components/TemplateDraggable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const TemplateDraggable = ({ template }: TemplateDraggableProps) => {
}
})
},
[apply]
[apply, pageSpaceToOverlaySpace]
)

const longHoverTarget = useLongHover<HTMLDivElement>(handleLongHover)
Expand Down
12 changes: 5 additions & 7 deletions packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const SolutionStatusBar = (): React.ReactElement => {
},
}
})
}, [documentProgressStatus, modelProgressStatus])
}, [documentProgressStatus, modelProgressStatus, pageSpaceToOverlaySpace])

const handleMouseLeave = useCallback(() => {
apply((state) => {
Expand Down Expand Up @@ -136,17 +136,15 @@ export const SolutionStatusBar = (): React.ReactElement => {
<div className="np-relative np-w-full np-h-full">
<div
id="np-solution-status-icon"
className={`${
progress === 1 ? 'np-opacity-100' : 'np-opacity-0'
} np-absolute np-l-0 np-t-0 np-w-8 np-h-8 np-flex np-items-center np-justify-center`}
className={`${progress === 1 ? 'np-opacity-100' : 'np-opacity-0'

Check failure on line 139 in packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx

View workflow job for this annotation

GitHub Actions / lint 

Insert `⏎················`
} np-absolute np-l-0 np-t-0 np-w-8 np-h-8 np-flex np-items-center np-justify-center`}

Check failure on line 140 in packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx

View workflow job for this annotation

GitHub Actions / lint 

Delete `··`
>
{getSolutionResultStatusIcon()}
</div>
<div
id="np-solution-loading-icon"
className={`${
progress === 1 ? 'np-opacity-0' : 'np-opacity-100'
} np-absolute np-l-0 np-t-0 np-w-8 np-h-8 np-flex np-items-center np-justify-center`}
className={`${progress === 1 ? 'np-opacity-0' : 'np-opacity-100'

Check failure on line 146 in packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx

View workflow job for this annotation

GitHub Actions / lint 

Insert `⏎················`
} np-absolute np-l-0 np-t-0 np-w-8 np-h-8 np-flex np-items-center np-justify-center`}

Check failure on line 147 in packages/nodes/src/components/controls/solution-status/SolutionStatusBar.tsx

View workflow job for this annotation

GitHub Actions / lint 

Delete `··`
>
<svg
aria-hidden="true"
Expand Down
43 changes: 23 additions & 20 deletions packages/nodes/src/components/nodes/generic-node/components/GenericNodeBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,30 +22,33 @@ export const GenericNodeBody = ({ node, template }: GenericNodeBodyProps) => {
const documentSelection = useStore((state) => state.registry.selection.nodes)
const isSelected = documentSelection.includes(node.instanceId)

const handleContextMenu = useCallback((e: React.MouseEvent<SVGGElement>): void => {
e.stopPropagation()
e.preventDefault()
const handleContextMenu = useCallback(
(e: React.MouseEvent<SVGGElement>): void => {
e.stopPropagation()
e.preventDefault()

const { pageX, pageY } = e
const { pageX, pageY } = e

const key = `node-context-menu-${node.instanceId}`
const key = `node-context-menu-${node.instanceId}`

const [x, y] = pageSpaceToOverlaySpace(pageX + 6, pageY + 6)
const [x, y] = pageSpaceToOverlaySpace(pageX + 6, pageY + 6)

apply((state) => {
state.registry.contextMenus[key] = {
position: {
x,
y,
},
context: {
type: 'node',
nodeInstanceId: node.instanceId,
nodeTemplate: template,
},
}
})
}, [])
apply((state) => {
state.registry.contextMenus[key] = {
position: {
x,
y,
},
context: {
type: 'node',
nodeInstanceId: node.instanceId,
nodeTemplate: template,
},
}
})
},
[pageSpaceToOverlaySpace]
)

return (
<g id={`generic-node-body-${node.instanceId}`} onContextMenu={handleContextMenu}>
Expand Down
47 changes: 25 additions & 22 deletions packages/nodes/src/components/nodes/generic-node/components/GenericNodePort.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,32 @@ const GenericNodePort = ({ nodeInstanceId, portInstanceId, template }: GenericNo
const { apply } = useDispatch()
const pageSpaceToOverlaySpace = usePageSpaceToOverlaySpace()

const handleLongHover = useCallback((e: PointerEvent): void => {
const { pageX, pageY } = e

const [x, y] = pageSpaceToOverlaySpace(pageX, pageY)

apply((state) => {
state.registry.tooltips[`port-tooltip-${nodeInstanceId}-${portInstanceId}`] = {
configuration: {
position: {
x: x + 8,
y: y + 8,
const handleLongHover = useCallback(
(e: PointerEvent): void => {
const { pageX, pageY } = e

const [x, y] = pageSpaceToOverlaySpace(pageX, pageY)

apply((state) => {
state.registry.tooltips[`port-tooltip-${nodeInstanceId}-${portInstanceId}`] = {
configuration: {
position: {
x: x + 8,
y: y + 8,
},
isSticky: false,
},
isSticky: false,
},
context: {
type: 'port',
template,
nodeInstanceId,
portInstanceId,
},
}
})
}, [])
context: {
type: 'port',
template,
nodeInstanceId,
portInstanceId,
},
}
})
},
[pageSpaceToOverlaySpace]
)

const longHoverTarget = useLongHover<SVGGElement>(handleLongHover)

Expand Down
55 changes: 29 additions & 26 deletions packages/nodes/src/components/nodes/hooks/usePort.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,32 +17,35 @@ export const usePort = (

const { __direction: direction, nickName } = portTemplate

const handleContextMenu = useCallback((e: MouseEvent): void => {
e.stopPropagation()
e.preventDefault()

const { pageX, pageY } = e

const key = `${nodeInstanceId}-${portInstanceId}-${direction}-${nickName}`

const [x, y] = pageSpaceToOverlaySpace(pageX + 6, pageY + 6)

apply((state) => {
state.registry.contextMenus[key] = {
position: {
x,
y,
},
context: {
type: 'port',
direction,
nodeInstanceId,
portInstanceId,
portTemplate,
},
}
})
}, [])
const handleContextMenu = useCallback(
(e: MouseEvent): void => {
e.stopPropagation()
e.preventDefault()

const { pageX, pageY } = e

const key = `${nodeInstanceId}-${portInstanceId}-${direction}-${nickName}`

const [x, y] = pageSpaceToOverlaySpace(pageX + 6, pageY + 6)

apply((state) => {
state.registry.contextMenus[key] = {
position: {
x,
y,
},
context: {
type: 'port',
direction,
nodeInstanceId,
portInstanceId,
portTemplate,
},
}
})
},
[pageSpaceToOverlaySpace]
)

const handlePointerDown = useCallback((e: PointerEvent): void => {
const { pageX, pageY, pointerId } = e
Expand Down
Loading

0 comments on commit 752041a

Please sign in to comment.