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