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 123 124 125 126 127 128 | 990x 990x 990x 990x 990x 990x 990x 990x 990x 990x 990x 2970x 1980x 990x 990x 990x 990x 1350x 180x 990x 990x 1710x 513x 501x 990x 990x 990x 2994x 990x 2016x 186x 2292x 177x 1167x 269x 177x 990x 1259x 4005x 192x 990x 1566x 2799x | import { ModuleMark } from "@/ahuora-design-system/componentIcons/ModuleMark.tsx";
import { ObjectTypeEnum } from "@/api/apiStore.gen";
import { GenericObjectGraphicProps } from "@/hooks/graphicTypes.ts";
import { PropertiesStatus } from "../../PropertiesSidebar/PropertyPanel/PropertiesStatus.tsx";
import { getFillColor, getStrokeColor, NodeLabel } from "./HelperFunctions.tsx";
const UnitOpGraphic = (props: GenericObjectGraphicProps) => {
const textPadding = 0;
const gObj = props.graphicObject;
const width = gObj.width ?? 100;
const height = gObj.height ?? 100;
const rotation = gObj.rotation ?? 0;
const flipped = !!gObj.flipped;
const canConnect = [
ObjectTypeEnum.DecisionNode,
ObjectTypeEnum.Splitter,
ObjectTypeEnum.Mixer,
];
const highlightStroke =
canConnect.includes(props.simulationObject.objectType) && !!props.highlight;
const isModule = props.simulationObject.objectType === "group";
const labelY = height + textPadding;
const stroke = getStrokeColor(props, highlightStroke);
const fill = getFillColor(props);
const strokeWidth = 2;
const inset = strokeWidth / 2;
const imageName = props.simulationObject?.objectType;
const defaultImageSrc = `../../assets/UpdatedIcons/uo_default.svg`;
const imageSrc = `../../assets/UpdatedIcons/${imageName}.svg`;
const scaleXvalue =
rotation === 0 || rotation === 180 ? (flipped ? -1 : 1) : 1;
const scaleYvalue =
rotation === 90 || rotation === 270 ? (flipped ? -1 : 1) : 1;
return (
<div style={{ position: "relative", width, height, overflow: "visible" }}>
<div
style={{
position: "absolute",
left: width / 2,
top: height / 2,
transform: `translate(-50%, -50%)`,
transformOrigin: "center",
width,
height,
}}
>
<div
style={{
position: "absolute",
left: inset,
top: inset,
width: width - strokeWidth,
height: height - strokeWidth,
background: fill,
border: `${strokeWidth}px solid ${stroke}`,
borderRadius: 4,
boxSizing: "border-box",
}}
aria-label={`Graphic - ${props.simulationObject.componentName ?? ""}`}
/>
{imageName === ObjectTypeEnum.Header ? null : (
<img
src={imageSrc}
alt=""
draggable={false}
onError={(e) => {
(e.currentTarget as HTMLImageElement).src = defaultImageSrc;
}}
style={{
position: "absolute",
left: "50%",
top: "50%",
maxWidth: width / 2 - strokeWidth,
maxHeight: height / 2 - strokeWidth,
width: "50%",
height: "50%",
objectFit: "contain",
transform: `translate(-50%, -50%) scaleX(${scaleXvalue}) scaleY(${scaleYvalue}) rotate(${rotation}deg)`,
pointerEvents: "none",
userSelect: "none",
}}
/>
)}
{isModule && (
<div
style={{ position: "absolute", left: 10, top: 10 }}
className="text-emerald-600 select-none"
>
<ModuleMark />
</div>
)}
<div
style={{
position: "absolute",
right: 2,
bottom: 0,
transform: "scale(0.6)",
}}
className="select-none"
>
<PropertiesStatus
hideSuccess={true}
propertySet={props.simulationObject.unspecifiedProperties}
/>
</div>
</div>
<NodeLabel
text={props.simulationObject.componentName ?? ""}
width={width}
y={labelY}
/>
</div>
);
};
export default UnitOpGraphic;
|