| 1 | "use client"; |
| 2 | |
| 3 | import { NodeApi, PathApi } from "platejs"; |
| 4 | import { PlateElement, type PlateElementProps } from "platejs/react"; |
| 5 | |
| 6 | import { cn } from "@/lib/utils"; |
| 7 | import { |
| 8 | type TConnectedCirclesGroupElement, |
| 9 | type TConnectedCirclesItemElement, |
| 10 | } from "../plugins/diagram-components-plugin"; |
| 11 | import { getPresentationAccentColor } from "./color-utils"; |
| 12 | import { |
| 13 | getConnectedCircleItemPosition, |
| 14 | getConnectedCircleItemTransform, |
| 15 | } from "./connected-circles-layout"; |
| 16 | import { getSiblingIndexContext } from "./sibling-index"; |
| 17 | import { getSmartLayoutStepColor } from "./smart-layout-gradient"; |
| 18 | |
| 19 | export function ConnectedCircleItem( |
| 20 | props: PlateElementProps<TConnectedCirclesItemElement>, |
| 21 | ) { |
| 22 | const { index, parentElement } = |
| 23 | getSiblingIndexContext<TConnectedCirclesGroupElement>( |
| 24 | props.editor, |
| 25 | props.element, |
| 26 | props.path, |
| 27 | ); |
| 28 | const fallbackParentPath = PathApi.parent(props.path); |
| 29 | const fallbackParentElement = NodeApi.get( |
| 30 | props.editor, |
| 31 | fallbackParentPath, |
| 32 | ) as TConnectedCirclesGroupElement | undefined; |
| 33 | const resolvedParentElement = parentElement ?? fallbackParentElement; |
| 34 | const total = resolvedParentElement?.children?.length || 1; |
| 35 | const alignment = |
| 36 | props.element.alignment ?? resolvedParentElement?.alignment ?? "center"; |
| 37 | const position = getConnectedCircleItemPosition(index, total); |
| 38 | const transform = getConnectedCircleItemTransform(index, total); |
| 39 | const bgColor = getPresentationAccentColor( |
| 40 | props.element, |
| 41 | resolvedParentElement, |
| 42 | getSmartLayoutStepColor(index, total), |
| 43 | ); |
| 44 | return ( |
| 45 | <PlateElement |
| 46 | {...props} |
| 47 | className="group/connected-circle relative z-10 grid min-w-0 place-items-center" |
| 48 | style={{ |
| 49 | gridColumn: position.gridColumn, |
| 50 | gridRow: position.gridRow, |
| 51 | justifySelf: "center", |
| 52 | transform, |
| 53 | }} |
| 54 | > |
| 55 | <div |
| 56 | className={cn( |
| 57 | "grid aspect-square size-56 place-items-center rounded-full px-8 text-(--presentation-foreground)", |
| 58 | alignment === "left" && "text-left", |
| 59 | alignment === "center" && "text-center", |
| 60 | alignment === "right" && "text-right", |
| 61 | "[&_:is(.presentation-heading)]:[-webkit-background-clip:unset!important;]", |
| 62 | "[&_:is(.presentation-heading)]:[-webkit-text-fill-color:unset!important;]", |
| 63 | "[&_:is(.presentation-heading)]:[background-clip:unset!important;]", |
| 64 | "[&_:is(.presentation-heading)]:[background:none!important;]", |
| 65 | "[&_:is(.presentation-heading)]:text-(--presentation-text)!", |
| 66 | "[&_h1]:text-2xl [&_h2]:text-2xl [&_h3]:text-2xl [&_h4]:text-xl [&_p]:mt-2 [&_p]:text-base", |
| 67 | )} |
| 68 | style={ |
| 69 | { |
| 70 | background: bgColor, |
| 71 | "--presentation-heading": "var(--presentation-card-background)", |
| 72 | "--presentation-text": "var(--presentation-card-background)", |
| 73 | } as React.CSSProperties |
| 74 | } |
| 75 | data-bg-export="true" |
| 76 | > |
| 77 | <div className="min-w-0">{props.children}</div> |
| 78 | </div> |
| 79 | </PlateElement> |
| 80 | ); |
| 81 | } |
| 82 |