diff --git a/package.json b/package.json index a2ebb14..b44310f 100644 --- a/package.json +++ b/package.json @@ -14,18 +14,18 @@ }, "dependencies": { "@radix-ui/colors": "^3.0.0", - "likec4": "latest", - "react": "^19.1.1", - "react-dom": "^19.1.1", - "react-use": "^17.6.0", + "likec4": "^1.58.0", + "react": "^19.2.7", + "react-dom": "^19.2.7", + "react-use": "^17.6.1", "roughjs": "^4.6.6" }, "devDependencies": { - "@types/react": "^19.1.16", - "@types/react-dom": "^19.1.9", - "@vitejs/plugin-react": "^5.0.4", - "typescript": "^5.9.2", - "vite": "^7.1.11" + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.2", + "typescript": "^6.0.3", + "vite": "^8.0.16" }, "stackblitz": { "installDependencies": true diff --git a/src/CustomNodes.tsx b/src/CustomNodes.tsx index 113d82e..ae6ea37 100644 --- a/src/CustomNodes.tsx +++ b/src/CustomNodes.tsx @@ -3,7 +3,7 @@ import { ElementActions, ElementData, ElementNodeContainer, - XYFlow, + xyflow, elementNode, useDiagram, useLikeC4Styles @@ -33,7 +33,7 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => { , + icon: , onClick(e) { e.stopPropagation(); open(nodeModel.id); @@ -42,10 +42,10 @@ export const ElementNode = elementNode(({ nodeModel, nodeProps }) => { /> {(isHoveredOrSelected && nodeModel.element.hasMetadata()) && ( - { {Object.entries(nodeModel.element.getMetadata()).map(([key, value]) => ( - {key} - {value} - ))} + {key} + {value} + ))} { - e.stopPropagation(); - diagram.openElementDetails(nodeModel.id) - }}> + e.stopPropagation(); + diagram.openElementDetails(nodeModel.id) + }}> Open Details { - e.stopPropagation(); - diagram.focusNode(nodeModel.id) - }} + e.stopPropagation(); + diagram.focusNode(nodeModel.id) + }} >Focus - + )} ); }) const IconBolt = () => ( - + )