reference already-calculated w/h instead of re-calculating

nodepen · Aug 1, 2023 · 9d6b377 · 9d6b377
1 parent 3a648de
commit 9d6b377
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 37 deletions.
diff --git a/packages/nodes/src/components/annotations/wire/Wire.tsx b/packages/nodes/src/components/annotations/wire/Wire.tsx
@@ -154,19 +154,14 @@ export const Wire = ({
   }
 
   const getNodeBodyClipPath = (node: DocumentNode) => {
-    const { position, templateId } = node
-
-    const template = useStore.getState().templates[templateId]
-
-    const nodeWidth = getNodeWidth(node, template)
-    const nodeHeight = getNodeHeight(template)
+    const { position } = node
 
     return (
       <rect
         x={position.x - 2}
         y={position.y - 2}
-        width={nodeWidth + 4}
-        height={nodeHeight + 6}
+        width={node.dimensions.width + 4}
+        height={node.dimensions.height + 6}
         rx={7}
         ry={7}
         fill="none"
@@ -177,19 +172,14 @@ export const Wire = ({
   }
 
   const getNodeLabelClipPath = (node: DocumentNode) => {
-    const { position, templateId } = node
-
-    const template = useStore.getState().templates[templateId]
-
-    const nodeWidth = getNodeWidth(node, template)
-    const nodeHeight = getNodeHeight(template)
+    const { position } = node
 
     return (
       <rect
-        x={position.x + nodeWidth / 2 - DIMENSIONS.NODE_LABEL_WIDTH / 2 - 1}
+        x={position.x + node.dimensions.width / 2 - DIMENSIONS.NODE_LABEL_WIDTH / 2 - 1}
         y={position.y + DIMENSIONS.NODE_INTERNAL_PADDING - 1}
         width={DIMENSIONS.NODE_LABEL_WIDTH + 2}
-        height={nodeHeight - DIMENSIONS.NODE_INTERNAL_PADDING * 2 + 2}
+        height={node.dimensions.height - DIMENSIONS.NODE_INTERNAL_PADDING * 2 + 2}
         rx={7}
         ry={7}
         fill={COLORS.LIGHT}

diff --git a/.../src/components/controls/panels/template-library-control/components/TemplateDraggable.tsx b/.../src/components/controls/panels/template-library-control/components/TemplateDraggable.tsx
@@ -28,14 +28,11 @@ const TemplateDraggable = ({ template }: TemplateDraggableProps) => {
 
       const node = createInstance(template)
 
-      const nodeWidth = getNodeWidth(node, template)
-      const nodeHeight = getNodeHeight(template)
-
       apply((state) => {
         node.status.isProvisional = true
         node.position = {
-          x: x - nodeWidth / 2,
-          y: y - nodeHeight / 2,
+          x: x - node.dimensions.width / 2,
+          y: y - node.dimensions.height / 2,
         }
 
         state.document.nodes[node.instanceId] = node

diff --git a/packages/nodes/src/components/nodes/generic-node/components/GenericNodeBody.tsx b/packages/nodes/src/components/nodes/generic-node/components/GenericNodeBody.tsx
@@ -14,8 +14,8 @@ type GenericNodeBodyProps = {
 export const GenericNodeBody = ({ node, template }: GenericNodeBodyProps) => {
   const { position } = node
 
-  const nodeWidth = getNodeWidth(node, template)
-  const nodeHeight = getNodeHeight(template)
+  const nodeWidth = node.dimensions.width
+  const nodeHeight = node.dimensions.height
 
   const { apply } = useDispatch()
   const pageSpaceToOverlaySpace = usePageSpaceToOverlaySpace()

diff --git a/packages/nodes/src/components/nodes/generic-node/components/GenericNodeLabel.tsx b/packages/nodes/src/components/nodes/generic-node/components/GenericNodeLabel.tsx
@@ -46,8 +46,8 @@ export const GenericNodeLabel = ({ node, template }: GenericNodeLabelProps) => {
 
   const longHoverTarget = useLongHover<SVGGElement>(handleLongHover)
 
-  const nodeWidth = getNodeWidth(node, template)
-  const nodeHeight = getNodeHeight(template)
+  const nodeWidth = node.dimensions.width
+  const nodeHeight = node.dimensions.height
 
   return (
     <>

diff --git a/packages/nodes/src/components/nodes/generic-node/components/GenericNodeShadow.tsx b/packages/nodes/src/components/nodes/generic-node/components/GenericNodeShadow.tsx
@@ -13,8 +13,8 @@ type GenericNodeShadowProps = {
 export const GenericNodeShadow = ({ node, template }: GenericNodeShadowProps) => {
   const { position, inputs, outputs, anchors } = node
 
-  const nodeWidth = getNodeWidth(node, template)
-  const nodeHeight = getNodeHeight(template)
+  const nodeWidth = node.dimensions.width
+  const nodeHeight = node.dimensions.height
 
   const nodePortInstanceIds = [...Object.keys(inputs), ...Object.keys(outputs)]
 

diff --git a/packages/nodes/src/components/nodes/generic-node/components/GenericNodeSkeleton.tsx b/packages/nodes/src/components/nodes/generic-node/components/GenericNodeSkeleton.tsx
@@ -18,8 +18,8 @@ export const GenericNodeSkeleton = ({ node, template }: GenericNodeSkeletonProps
 
   const prefersReducedMotion = useReducedMotion()
 
-  const nodeWidth = useMemo(() => getNodeWidth(node, template), [node, template])
-  const nodeHeight = useMemo(() => getNodeHeight(template), [template])
+  const nodeWidth = node.dimensions.width
+  const nodeHeight = node.dimensions.height
 
   const NODE_CORNER_RADIUS = 7
 

diff --git a/packages/nodes/src/utils/node-dimensions/getNodeDimensions.ts b/packages/nodes/src/utils/node-dimensions/getNodeDimensions.ts
@@ -36,8 +36,6 @@ export const getNodeDimensions = (
 
   const dyStartInputs = deltaYStart(inputInstanceIds.length)
 
-  console.log(dyStartInputs)
-
   for (let i = 0; i < inputInstanceIds.length; i++) {
     const instanceId = inputInstanceIds[i]
 

diff --git a/packages/nodes/src/utils/templates/createInstance.ts b/packages/nodes/src/utils/templates/createInstance.ts
@@ -65,8 +65,6 @@ export const createInstance = (template: NodePen.NodeTemplate): NodePen.Document
 
   const { dimensions, anchors } = getNodeDimensions(node, template)
 
-  console.log(anchors)
-
   node.dimensions = dimensions
   node.anchors = anchors
 

diff --git a/...ages/nodes/src/views/document-view/layers/node-placement-overlay/NodePlacementOverlay.tsx b/...ages/nodes/src/views/document-view/layers/node-placement-overlay/NodePlacementOverlay.tsx
@@ -14,9 +14,8 @@ const NodePlacementOverlay = () => {
     }
 
     const activeNode = useStore.getState().document.nodes[activeNodeId]
-    const activeNodeTemplate = useStore.getState().templates[activeNode.templateId]
 
-    return [getNodeWidth(activeNode, activeNodeTemplate), getNodeHeight(activeNodeTemplate)]
+    return [activeNode.dimensions.width, activeNode.dimensions.height]
   }, [activeNodeId])
 
   const pageSpaceToWorldSpace = usePageSpaceToWorldSpace()

diff --git a/...yers/transient-element-overlay/context-menus/add-node-context-menu/AddNodeContextMenu.tsx b/...yers/transient-element-overlay/context-menus/add-node-context-menu/AddNodeContextMenu.tsx
@@ -99,8 +99,8 @@ export const AddNodeContextMenu = ({ position: eventPosition }: AddNodeContextMe
   const handleAddNode = (template: NodePen.NodeTemplate): void => {
     const nodeInstance = createInstance(template)
 
-    const nodeWidth = getNodeWidth(nodeInstance, template)
-    const nodeHeight = getNodeHeight(template)
+    const nodeWidth = nodeInstance.dimensions.width
+    const nodeHeight = nodeInstance.dimensions.height
 
     const [centerX, centerY] = overlaySpaceToWorldSpace(eventPosition.x, eventPosition.y)