{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-shapes",
  "framework": "react",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "shapes",
  "dependencies": [
    "@syncfusion/ej2-react-diagrams"
  ],
  "description": "Diagram gallery displays Basic, Flow, and BPMN shape collections for selection.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/diagram-shapes.md"
  },
  "files": [
    {
      "target": "src/components/diagram-shapes/Diagram.tsx",
      "content": "import {\n    BpmnDiagrams,\n    SnapConstraints,\n    DiagramComponent,\n    type NodeModel,\n    Node,\n    Diagram,\n    Inject,\n    DataBinding,\n    type FlowShapes,\n    type TextModel,\n    type FlowShapeModel,\n    NodeConstraints\n} from \"@syncfusion/ej2-react-diagrams\";\n\n// Function to create a text node\nconst createTextNode = (content: string): NodeModel => ({\n    shape: { type: \"Text\", content },\n    constraints: NodeConstraints.PointerEvents,\n    style: {\n        fontSize: 16,\n        fill: \"None\",\n        fontFamily: \"sans-serif\",\n        bold: true,\n        strokeWidth: 0\n    }\n});\n\n// Function to create a shape node\nconst createShapeNode = (type: string, shape: string, content: string, additionalProps?: any): NodeModel => ({\n    shape: { type, shape, ...additionalProps },\n    annotations: [{ content }]\n});\n\n// Basic shape models\nconst basicShapes: string[] = [\n    \"Rectangle\", \"Ellipse\", \"Triangle\", \"Plus\", \"Star\", \"Pentagon\",\n    \"Heptagon\", \"Octagon\", \"Trapezoid\", \"Decagon\", \"RightTriangle\", \"Parallelogram\"\n];\n\nconst basicShapeModels: NodeModel[] = [\n    createTextNode(\"Basic Shapes\"),\n    ...basicShapes.map(shape => createShapeNode(\"Basic\", shape, shape))\n];\n\n// Flow shape models\nconst flowShapes: { shape: string, content: string }[] = [\n    { shape: \"Terminator\", content: \"Terminator\" },\n    { shape: \"Process\", content: \"Process\" },\n    { shape: \"Decision\", content: \"Decision\" },\n    { shape: \"Document\", content: \"Document\" },\n    { shape: \"PreDefinedProcess\", content: \"Predefined Process\" },\n    { shape: \"PaperTap\", content: \"Paper Tape\" },\n    { shape: \"DirectData\", content: \"Direct Data\" },\n    { shape: \"SequentialData\", content: \"Sequential Data\" },\n    { shape: \"Sort\", content: \"Sort\" },\n    { shape: \"MultiDocument\", content: \"Multi-Document\" },\n    { shape: \"Collate\", content: \"Collate\" },\n    { shape: \"SummingJunction\", content: \"Summing Junction\" },\n    { shape: \"Or\", content: \"Or\" },\n    { shape: \"InternalStorage\", content: \"Internal Storage\" },\n    { shape: \"Extract\", content: \"Extract\" },\n    { shape: \"ManualOperation\", content: \"Manual Operation\" },\n    { shape: \"Merge\", content: \"Merge\" },\n    { shape: \"OffPageReference\", content: \"Off-Page Reference\" },\n    { shape: \"SequentialAccessStorage\", content: \"Sequential Access Storage\" },\n    { shape: \"Data\", content: \"Data\" },\n    { shape: \"Card\", content: \"Card\" }\n];\n\nconst flowShapeModels: NodeModel[] = [\n    createTextNode(\"Flow Shapes\"),\n    ...flowShapes.map(({ shape, content }) => createShapeNode(\"Flow\", shape, content))\n];\n\n// BPMN shape models\nconst bpmnShapes: { shape: string, content: string, event?: any, activity?: any, subProcess?: any }[] = [\n    { shape: \"Event\", content: \"Start Event\", event: { event: \"Start\", trigger: \"None\" } },\n    { shape: \"Event\", content: \"Intermediate Event\", event: { event: \"Intermediate\", trigger: \"None\" } },\n    { shape: \"Event\", content: \"End Event\", event: { event: \"End\", trigger: \"None\" } },\n    { shape: \"Gateway\", content: \"Gateway\" },\n    { shape: \"Activity\", content: \"Task\", activity: { activity: \"Task\" } },\n    { shape: \"Activity\", content: \"Transaction\", activity: { activity: \"SubProcess\", subProcess: { type: \"Transaction\", transaction: { success: { visible: false }, failure: { visible: false }, cancel: { visible: false } } } } },\n    { shape: \"Message\", content: \"Message\" },\n    { shape: \"DataObject\", content: \"Data Object\" },\n    { shape: \"DataSource\", content: \"Data Source\" },\n    { shape: \"Group\", content: \"Group\" },\n    { shape: \"TextAnnotation\", content: \"Text Annotation\" }\n];\n\nconst bpmnShapeModels: NodeModel[] = [\n    createTextNode(\"BPMN Shapes\"),\n    ...bpmnShapes.map(({ shape, content, event, activity, subProcess }) => createShapeNode(\"Bpmn\", shape, content, { event, activity, subProcess }))\n];\n\nconst allShapeModels: NodeModel[] = [\n    ...basicShapeModels,\n    ...flowShapeModels,\n    ...bpmnShapeModels\n];\n\nlet diagramInstance: DiagramComponent;\n\nfunction ShapeGallery() {\n\n    function rendereComplete() {\n        diagramInstance.fitToPage({ mode: \"Height\" });\n    }\n\n    // To set default values for different types of nodes.\n    function getNodes() {\n        const nodes = allShapeModels;\n        let offsetx: number = 60;\n        let offsety: number = 50;\n        let count: number = 1;\n\n        const updateFlowShapeHeight = (shapeType: FlowShapes): number => {\n            switch (shapeType) {\n                case 'Process':\n                case 'Terminator':\n                case 'Document':\n                case 'DirectData':\n                case 'MultiDocument':\n                case 'PreDefinedProcess':\n                    return 30;\n                case 'Decision':\n                    return 35;\n                default:\n                    return 40;\n            }\n        };\n\n        nodes.forEach((node: NodeModel) => {\n            node.width = 40;\n            node.height = 40;\n\n            if (node.shape.type === 'Flow') {\n                node.height = updateFlowShapeHeight((node.shape as FlowShapeModel).shape);\n            }\n\n            node.offsetX = offsetx;\n            node.offsetY = offsety;\n\n            if (node.shape.type !== 'Text') {\n                node.annotations[0].verticalAlignment = 'Top';\n                node.annotations[0].offset = { y: 1 };\n                node.annotations[0].margin = { top: 8 };\n\n                offsetx += 90;\n                if (count % 10 === 0) {\n                    offsety += 100;\n                    offsetx = 60;\n                }\n                count++;\n            } else {\n                offsetx = 60;\n                offsety += 50;\n                count = 1;\n                node.width = 150;\n                node.height = 50;\n                node.offsetX = 90;\n\n                if ((node.shape as TextModel).content !== 'Basic Shapes') {\n                    node.offsetY = offsety + 50;\n                    offsety += 100;\n                }\n            }\n        });\n\n        return nodes;\n    }\n\n    return (\n        <div className=\"control-panel\">\n            <div\n                className=\"control-section\"\n            >\n                <div  style={{ width: \"100%\" }}>\n                    <DiagramComponent\n                        id=\"diagram\"\n                        ref={diagram => (diagramInstance = diagram)}\n                        width={\"100%\"}\n                        height={\"800px\"}\n                        snapSettings={{ constraints: SnapConstraints.None }}\n                        nodes={getNodes()}\n\n                        //Defines the default node and connector properties.\n                        getNodeDefaults={(obj: Node, diagram: Diagram) => {\n                            return obj;\n                        }}\n                    >\n                        <Inject services={[DataBinding, BpmnDiagrams]} />\n                    </DiagramComponent>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport interface GalleryInfo {\n    type: string;\n    shape: string;\n    text: string;\n}\nexport default ShapeGallery;"
    }
  ]
}