Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 76x 76x 76x 9464x 7930x 7930x 7930x 7930x 7930x 6x 6x 9536x 7930x 6250x 6250x 7930x 7930x 8011x 7930x 7930x 81x 8011x 8011x 55510x 708x 7930x 7930x 8638x 1283x 6250x 6x 10496x 31720x | import { defineCommand } from "just-search-it";
import { ArrowUpDown, Hand, MousePointer } from "lucide-react";
import { useSelector } from "react-redux";
import { useSearchParams } from "react-router-dom";
import { ObjectTypeEnum } from "@/api/apiStore.gen";
import { RegisterCommand } from "@/commands/CommandProvider";
import { useGraphicsObjects } from "@/hooks/flowsheetObjects";
import { setClick } from "@/store/ClickSlice";
import { useAppDispatch } from "@/store/hooks";
import { RootState } from "@/store/store";
import { ContentTypes } from "../LeftSideBar/LeftSideBarTabDefinitions";
export const TogglePointerState = defineCommand<
[state: "select" | "hand"],
void
>("togglePointerState");
export const GoToObject = defineCommand<[id: number], void>("goToObject");
export const AutoSortCanvas = defineCommand<[], Promise<void> | void>(
"autoSortCanvas",
);
export function FlowsheetCommands({
togglePointerState,
handleAutoSortCanvas,
}: {
togglePointerState: () => void;
handleAutoSortCanvas: () => Promise<void> | void;
}) {
const pointerState = useSelector((state: RootState) => state.pointer);
//get all objects
const graphicsObjects = useGraphicsObjects();
const [, setParams] = useSearchParams("object");
const dispatch = useAppDispatch();
//Change selected object
function selectObject(objectId: number, parentGroup: string) {
setParams({
parentGroup: parentGroup.toString(),
object: objectId.toString(),
content: ContentTypes.objectDetails,
});
dispatch(
setClick({
type: "unit",
id: objectId,
}),
);
}
//Manage existing flowsheet icon objects
const displayObjectIcon = (objectType: ObjectTypeEnum) => {
const image = new URL(
"/assets/UpdatedIcons/" + objectType + ".svg",
import.meta.url,
).href;
return (
<div className="bg-white p-1 rounded-md">
<img src={image} alt={objectType} className="icon-ls" />
</div>
);
};
// TODO: registerCommand for e.g zoom to fit doesn't need to be here.
// We could just put a useRegisterCommand hook in the file the zoomToFit function is in
return (
<>
<RegisterCommand
command={TogglePointerState}
args={[pointerState.state === "select" ? "hand" : "select"]}
name={
pointerState.state === "select" ? "Move Pointer" : "Select Pointer"
}
description={
pointerState.state === "select"
? "Allows you to move around the design without accidentally selecting objects."
: "Allows you to move and select elements in the flowsheet."
}
group="Display & flowsheet controls"
icon={
pointerState.state === "select" ? (
<Hand className="icon-ls" />
) : (
<MousePointer className="icon-ls" />
)
}
action={togglePointerState}
shortcuts={[{ key: pointerState.state === "select" ? "M" : "S" }]}
/>
<RegisterCommand
command={AutoSortCanvas}
args={[]}
name="Auto-sort Canvas"
description="Deterministically arrange the current group from left to right based on process connectivity."
group="Display & flowsheet controls"
icon={<ArrowUpDown className="icon-ls" />}
action={handleAutoSortCanvas}
/>
{graphicsObjects?.map((unitOp) => {
return (
unitOp.group && (
<RegisterCommand
key={unitOp.simulationObject.componentName}
command={GoToObject}
args={[unitOp.id]}
name={`Go To ${unitOp.simulationObject.componentName}`}
description={`Unit Op: ${unitOp.simulationObject.componentName}`}
icon={displayObjectIcon(unitOp.simulationObject.objectType)}
group="Go to object"
action={() =>
selectObject(
unitOp.simulationObject.id,
unitOp.group?.toString(),
)
}
/>
)
);
})}
</>
);
}
|