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 | 103x 313x 313x 313x 313x 313x 313x 313x 313x 313x 313x 313x 436x 436x 313x 1252x 355x 313x 313x 18x 331x 2191x 9x 322x 313x 326x 25x 313x 313x 388x 2191x | import { useRunCommand } from "just-search-it";
import useImage from "use-image";
import { ModuleMark } from "@/ahuora-design-system/componentIcons/ModuleMark";
import { useSimulationObjectGroup } from "@/hooks/flowsheetObjects";
import type { GenericObjectGraphicProps } from "@/hooks/graphicTypes";
import { SwitchGroup } from "../../../../../commands/SwitchCurrentGroup";
import { PropertiesStatus } from "../../PropertiesSidebar/PropertyPanel/PropertiesStatus";
import {
Box,
getFillColor,
getStrokeColor,
NodeLabel,
Overlay,
} from "./HelperFunctions.tsx";
const TEXT_PADDING = 8;
const GroupGraphic = (props: GenericObjectGraphicProps) => {
const simulationObjectGroup = useSimulationObjectGroup();
const switchGroup = useRunCommand(SwitchGroup);
const gObj = props.graphicObject;
const width = gObj.width ?? 100;
const height = gObj.height ?? 100;
const imageName = props.simulationObject?.objectType;
const [defaultImage] = useImage(`../../assets/UpdatedIcons/uo_default.svg`);
const [img] = useImage(`../../assets/UpdatedIcons/${imageName}.svg`);
const image = img ?? defaultImage;
const isModule = props.simulationObject.objectType === "group";
const fill = getFillColor(props);
const stroke = getStrokeColor(props, false);
const openGroup = () => {
const group = simulationObjectGroup(props.simulationObject.id);
Iif (!group) return;
switchGroup(group.id);
};
return (
<div
style={{ width, height, position: "relative" }}
aria-label={`Module Graphic - ${props.simulationObject.componentName ?? ""}`}
>
<Box
width={width}
height={height}
fill={fill}
stroke={stroke}
radius={2}
onDoubleClick={openGroup}
>
{image && (
<img
src={image?.src}
alt=""
draggable={false}
style={{
width: "50%",
height: "50%",
objectFit: "contain",
pointerEvents: "none",
userSelect: "none",
}}
/>
)}
</Box>
{isModule && (
<Overlay left={10} top={10} style={{ transform: "scale(0.9)" }}>
<div className="text-emerald-600 select-none">
<ModuleMark />
</div>
</Overlay>
)}
<Overlay right={6} bottom={6} style={{ transform: "scale(0.9)" }}>
<div className="select-none">
<PropertiesStatus
propertySet={props.simulationObject.unspecifiedProperties}
hideSuccess={true}
/>
</div>
</Overlay>
<NodeLabel
text={props.simulationObject.componentName ?? ""}
width={width}
y={height + TEXT_PADDING}
/>
</div>
);
};
export default GroupGraphic;
|