{
  "$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/js/diagram-shapes.md"
  },
  "files": [
    {
      "target": "src/components/diagram-shapes/Diagram.jsx",
      "content": "import { BpmnDiagrams, SnapConstraints, DiagramComponent, Inject, DataBinding, NodeConstraints } from \"@syncfusion/ej2-react-diagrams\";\n// Function to create a text node\nconst createTextNode = (content) => ({\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// Function to create a shape node\nconst createShapeNode = (type, shape, content, additionalProps) => ({\n    shape: { type, shape, ...additionalProps },\n    annotations: [{ content }]\n});\n// Basic shape models\nconst basicShapes = [\n    \"Rectangle\", \"Ellipse\", \"Triangle\", \"Plus\", \"Star\", \"Pentagon\",\n    \"Heptagon\", \"Octagon\", \"Trapezoid\", \"Decagon\", \"RightTriangle\", \"Parallelogram\"\n];\nconst basicShapeModels = [\n    createTextNode(\"Basic Shapes\"),\n    ...basicShapes.map(shape => createShapeNode(\"Basic\", shape, shape))\n];\n// Flow shape models\nconst flowShapes = [\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];\nconst flowShapeModels = [\n    createTextNode(\"Flow Shapes\"),\n    ...flowShapes.map(({ shape, content }) => createShapeNode(\"Flow\", shape, content))\n];\n// BPMN shape models\nconst bpmnShapes = [\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];\nconst bpmnShapeModels = [\n    createTextNode(\"BPMN Shapes\"),\n    ...bpmnShapes.map(({ shape, content, event, activity, subProcess }) => createShapeNode(\"Bpmn\", shape, content, { event, activity, subProcess }))\n];\nconst allShapeModels = [\n    ...basicShapeModels,\n    ...flowShapeModels,\n    ...bpmnShapeModels\n];\nlet diagramInstance;\nfunction ShapeGallery() {\n    function rendereComplete() {\n        diagramInstance.fitToPage({ mode: \"Height\" });\n    }\n    // To set default values for different types of nodes.\n    function getNodes() {\n        const nodes = allShapeModels;\n        let offsetx = 60;\n        let offsety = 50;\n        let count = 1;\n        const updateFlowShapeHeight = (shapeType) => {\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        nodes.forEach((node) => {\n            node.width = 40;\n            node.height = 40;\n            if (node.shape.type === 'Flow') {\n                node.height = updateFlowShapeHeight(node.shape.shape);\n            }\n            node.offsetX = offsetx;\n            node.offsetY = offsety;\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                offsetx += 90;\n                if (count % 10 === 0) {\n                    offsety += 100;\n                    offsetx = 60;\n                }\n                count++;\n            }\n            else {\n                offsetx = 60;\n                offsety += 50;\n                count = 1;\n                node.width = 150;\n                node.height = 50;\n                node.offsetX = 90;\n                if (node.shape.content !== 'Basic Shapes') {\n                    node.offsetY = offsety + 50;\n                    offsety += 100;\n                }\n            }\n        });\n        return nodes;\n    }\n    return (<div className=\"control-panel\">\n            <div className=\"control-section\">\n                <div style={{ width: \"100%\" }}>\n                    <DiagramComponent id=\"diagram\" ref={diagram => (diagramInstance = diagram)} width={\"100%\"} height={\"800px\"} snapSettings={{ constraints: SnapConstraints.None }} nodes={getNodes()} \n    //Defines the default node and connector properties.\n    getNodeDefaults={(obj, diagram) => {\n            return obj;\n        }}>\n                        <Inject services={[DataBinding, BpmnDiagrams]}/>\n                    </DiagramComponent>\n                </div>\n            </div>\n        </div>);\n}\nexport default ShapeGallery;"
    }
  ]
}