diff --git a/.changeset/subnet-panel-navigation.md b/.changeset/subnet-panel-navigation.md new file mode 100644 index 00000000000..d53b8d48558 --- /dev/null +++ b/.changeset/subnet-panel-navigation.md @@ -0,0 +1,5 @@ +--- +"@hashintel/petrinaut": patch +--- + +Open a subnet directly from a component instance's properties panel. diff --git a/libs/@hashintel/petrinaut/docs/drawing-a-net.md b/libs/@hashintel/petrinaut/docs/drawing-a-net.md index 52864e599a1..5f5da2136b1 100644 --- a/libs/@hashintel/petrinaut/docs/drawing-a-net.md +++ b/libs/@hashintel/petrinaut/docs/drawing-a-net.md @@ -94,6 +94,8 @@ You can also focus the outgoing handle with **Tab**, press **Enter** or **Space* Subnets can expose selected places as ports. If you don't see subnet or component controls, enable **User settings → Labs → Net Components** first. +To open a subnet from the canvas, select a component instance and click **Open subnet** in its properties panel. This navigation is also available in read-only mode. + Open the subnet, select a boundary place, and enable **Component port** in the place properties panel. When you instantiate that subnet as a component, each port appears as a handle on the component instance: diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx index cfbfe5c020a..9fd70228bde 100644 --- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx +++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/component-instance-properties/subviews/main.tsx @@ -1,3 +1,5 @@ +import { use } from "react"; + import { Button, Form, @@ -9,6 +11,7 @@ import { css } from "@hashintel/ds-helpers/css"; import { validateEntityName } from "@hashintel/petrinaut-core"; import { usePetrinautMutations } from "../../../../../../../react"; +import { ActiveNetContext } from "../../../../../../../react/state/active-net-context"; import { useIsReadOnly } from "../../../../../../../react/state/use-is-read-only"; import { DescriptionField } from "../../../../../../components/description-field"; import { PropertyValue } from "../../../../../../components/property-value"; @@ -50,6 +53,7 @@ const hintTextStyle = css({ }); const ComponentInstanceMainContent: React.FC = () => { + const { setActiveSubnetId } = use(ActiveNetContext); const { instance, subnet, subnetParameters, updateComponentInstance } = useComponentInstancePropertiesContext(); const isDisabled = useIsReadOnly(); @@ -122,6 +126,15 @@ const ComponentInstanceMainContent: React.FC = () => {
{subnet?.name ?? "The referenced subnet no longer exists."}
+ {subnet && ( + + )}